:root{
  --ink:#14141c;
  --paper:#fff8ec;
  --coral:#ff3d68;
  --coral-dark:#c4123c;
  --mustard:#ffc93c;
  --teal:#00a8a8;
  --teal-dark:#00706f;
  --green:#3ecf6e;
  --red:#ef3f3f;
  --purple:#6c4ef2;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Baloo 2', sans-serif;
  background:
    radial-gradient(circle, rgba(20,20,28,0.09) 1.4px, transparent 1.6px) 0 0/16px 16px,
    var(--paper);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
  overflow-x:hidden;
}
#app{width:100%;max-width:560px;}
.panel{
  background:var(--paper);
  border:4px solid var(--ink);
  border-radius:14px;
  box-shadow:8px 8px 0 var(--ink);
  padding:26px 22px;
  position:relative;
}
h1,h2,h3{
  font-family:'Bangers', cursive;
  letter-spacing:1px;
  margin:0 0 6px;
  line-height:1.05;
}
.comic-title{
  font-size:52px;
  text-align:center;
  color:var(--coral);
  -webkit-text-stroke:2.5px var(--ink);
  transform:rotate(-2deg);
  margin-bottom:2px;
}
.comic-subtitle{
  text-align:center;
  font-family:'Bangers', cursive;
  font-size:22px;
  color:var(--ink);
  background:var(--mustard);
  display:inline-block;
  padding:2px 14px;
  border:3px solid var(--ink);
  border-radius:8px;
  transform:rotate(1deg);
}
.center{text-align:center;}
.stack{display:flex;flex-direction:column;gap:12px;}
.row{display:flex;gap:10px;flex-wrap:wrap;}

button{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  border:3px solid var(--ink);
  border-radius:10px;
  padding:12px 16px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .08s ease;
}
button:hover{transform:translate(-1px,-1px);}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
button.primary{background:var(--coral);color:var(--paper);}
button.secondary{background:var(--teal);color:var(--paper);}
button.gold{background:var(--mustard);}
button.danger{background:var(--red);color:var(--paper);}
button.wide{width:100%;text-align:left;}
button:disabled{opacity:.45;cursor:not-allowed;}
button:disabled:hover{transform:none;}
.menu-btn{font-size:19px;padding:14px 18px;}

.badge{
  display:inline-block;
  font-family:'Bangers',cursive;
  font-size:13px;
  letter-spacing:.5px;
  background:var(--ink);
  color:var(--paper);
  padding:3px 10px;
  border-radius:20px;
  transform:rotate(-2deg);
}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-weight:700;font-size:14px;}
select, input[type=text]{
  font-family:'Baloo 2', sans-serif;
  font-size:16px;
  padding:10px 12px;
  border:3px solid var(--ink);
  border-radius:8px;
  background:#fff;
}

.choice-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;}

.npc-face-wrap{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:6px 0 10px;
}
.npc-face-img{
  max-height:130px;
  max-width:100%;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.15));
}
.npc-face{
  font-size:74px;
  text-align:center;
  line-height:1;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.15));
}

.scene-image-wrap{
  width:100%;
  aspect-ratio:16/9;
  border:3px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  margin:10px 0 16px;
  background:#e9e2d0;
  position:relative;
}
.scene-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.result-image-wrap{
  width:100%;
  aspect-ratio:4/3;
  border:4px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:14px;
  background:#e9e2d0;
  position:relative;
}
.result-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.scene-image-fallback{
  display:none;
  position:absolute;
  inset:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:'Bangers',cursive;
  font-size:20px;
  text-align:center;
  padding:10px;
  color:#665f4f;
}

.gauge-wrap{margin:8px 0 16px;}
.gauge-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:4px;}
.gauge-track{
  height:22px;
  border:3px solid var(--ink);
  border-radius:11px;
  background:#e9e2d0;
  overflow:hidden;
  position:relative;
}
.gauge-fill{height:100%;transition:width .35s ease, background .35s ease;}
.gauge-threshold{
  position:absolute;
  top:0;bottom:0;
  width:3px;
  background:var(--ink);
  opacity:.55;
}

.bubble{
  position:relative;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:16px;
  padding:14px 16px;
  margin:6px 0 4px;
  font-size:16px;
  min-height:50px;
}
.bubble:after{
  content:"";
  position:absolute;
  left:34px;
  bottom:-16px;
  border-width:16px 10px 0 10px;
  border-style:solid;
  border-color:var(--ink) transparent transparent transparent;
}
.bubble:before{
  content:"";
  position:absolute;
  left:37px;
  bottom:-11px;
  border-width:12px 7px 0 7px;
  border-style:solid;
  border-color:#fff transparent transparent transparent;
  z-index:1;
}
.speaker{font-family:'Bangers',cursive;font-size:14px;color:var(--coral-dark);margin-bottom:2px;letter-spacing:1px;}

.deco-row{display:flex;gap:8px;justify-content:center;margin-top:10px;}
.deco-swatch{width:60px;height:44px;border:3px solid var(--ink);border-radius:8px;cursor:pointer;}
.deco-swatch.selected{outline:3px solid var(--mustard);outline-offset:2px;}

.result-banner{
  font-family:'Bangers',cursive;
  font-size:40px;
  text-align:center;
  padding:10px;
  border:4px solid var(--ink);
  border-radius:12px;
  margin-bottom:14px;
  transform:rotate(-1deg);
}
.result-win{background:var(--green);color:var(--ink);}
.result-lose{background:var(--red);color:var(--paper);}

.score-line{text-align:center;font-weight:700;margin:8px 0 16px;font-size:15px;}
.hint{font-size:13px;color:#665f4f;text-align:center;margin-top:10px;}
.twist-note{font-size:12px;color:var(--coral-dark);text-align:center;font-weight:700;margin-top:-6px;margin-bottom:10px;}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.small-btn{padding:6px 10px;font-size:13px;box-shadow:2px 2px 0 var(--ink);}

ul.rules{padding-left:20px;font-size:15px;line-height:1.5;}
ul.rules li{margin-bottom:8px;}

.roster-search{margin-bottom:12px;}
.roster-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:340px;overflow-y:auto;padding-right:4px;}
.roster-item{
  border:3px solid var(--ink);border-radius:10px;padding:8px 6px;text-align:center;
  background:#fff;font-size:11px;font-weight:700;cursor:pointer;
}
.roster-item:hover{background:var(--mustard);}
.roster-item .icon{font-size:26px;display:block;margin-bottom:2px;}
.roster-item .arch{display:block;font-size:9px;font-weight:400;color:#665f4f;}

.extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;max-height:340px;overflow-y:auto;}
.extras-item{
  border:3px solid var(--ink);border-radius:10px;padding:10px 4px;text-align:center;
  background:#fff;font-size:11px;font-weight:700;
}
.extras-item.locked{opacity:.35;}
.extras-item .icon{font-size:28px;display:block;margin-bottom:4px;}

.progress-line{font-size:13px;text-align:center;color:#665f4f;margin-top:-4px;margin-bottom:14px;}