:root{
  --bg:#0f1b3d;
  --panel:#16234f;
  --panel-2:#1d2c60;
  --accent:#ffb703;
  --accent-2:#2ec4b6;
  --text:#eef1f8;
  --muted:#a8b3d9;
  --correct:#3ddc97;
  --wrong:#ff6b6b;
  --radius:16px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  font-family:"Segoe UI", Verdana, Tahoma, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, #24347a 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #0d2e4f 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  padding:24px 12px 60px;
}
.app{ width:100%; max-width:960px; }
header{ text-align:center; margin-bottom:18px; }
header .logo-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:6px; }
.rollie-avatar{ width:64px;height:64px; flex-shrink:0; }
h1{ font-size:1.7rem; margin:0; letter-spacing:.3px; }
h1 span{color:var(--accent);}
.subtitle{color:var(--muted); font-size:.95rem; margin-top:2px;}
.note-badge{
  display:inline-block; margin-top:8px; font-size:.72rem; letter-spacing:.5px; text-transform:uppercase;
  background:rgba(255,183,3,.15); border:1px solid rgba(255,183,3,.4); color:var(--accent);
  padding:3px 10px; border-radius:999px;
}
.panel{
  background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ---- start screen ---- */
.band-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0 20px; }
.band-card{
  background:var(--panel-2); border:2px solid transparent; border-radius:12px; padding:14px 10px;
  text-align:center; cursor:pointer; transition:.15s; color:var(--text);
}
.band-card:hover{border-color:rgba(255,183,3,.5);}
.band-card.selected{border-color:var(--accent); background:#243266;}
.band-card .emoji{font-size:1.6rem;display:block;margin-bottom:4px;}
.band-card b{display:block;font-size:.95rem;}
.band-card .range{display:block; color:var(--accent-2); font-size:.72rem; margin-top:2px;}
.band-card small{color:var(--muted); font-size:.72rem; line-height:1.35; display:block; margin-top:4px;}

button.primary{
  background:var(--accent); color:#26260a; border:none; font-weight:700; font-size:1rem;
  padding:12px 20px; border-radius:10px; cursor:pointer; width:100%; transition:.15s;
}
button.primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }
button.secondary{
  background:transparent; border:1px solid rgba(255,255,255,.25); color:var(--text);
  padding:9px 16px; border-radius:9px; cursor:pointer; font-size:.85rem;
}
button.secondary:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- game hud ---- */
.hud{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:14px; }
.hud-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.stat{ background:var(--panel-2); border-radius:10px; padding:8px 12px; font-size:.8rem; color:var(--muted); text-align:center; min-width:78px; }
.stat b{display:block; font-size:1.05rem; color:var(--text);}
.band-tag{
  display:inline-block; font-size:.72rem; letter-spacing:.4px; text-transform:uppercase;
  background:rgba(46,196,182,.15); border:1px solid rgba(46,196,182,.4); color:var(--accent-2);
  padding:3px 10px; border-radius:999px; margin-bottom:10px;
}

.result-box{ background:var(--panel-2); border-left:4px solid var(--muted); border-radius:10px; padding:16px 18px; margin:14px 0; transition:.15s; }
.result-box.mode-visit{ border-left-color:var(--accent-2); }
.result-box.mode-caught{ border-left-color:var(--correct); background:rgba(61,220,151,.08); }
.result-box.mode-already{ border-left-color:var(--muted); }
.result-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--accent-2); margin-bottom:8px; }
.result-box.mode-caught .result-label{ color:var(--correct); }
.result-box.mode-idle .result-label{ color:var(--accent); }
.result-about{ margin:0 0 10px; line-height:1.5; font-size:.92rem; color:var(--muted); font-style:italic; }
.result-lead{ margin:0 0 8px; line-height:1.5; font-size:1rem; display:flex; gap:8px; }
.result-lead:last-child{margin-bottom:0;}
.result-lead .ico{flex-shrink:0;}
.slot-progress{ color:var(--muted); font-size:.78rem; margin:0 0 10px; }
.slot-done-line{ color:var(--correct); font-size:.92rem; font-weight:600; margin:0; }
.rumor-box{
  background:rgba(255,183,3,.08); border:1px solid rgba(255,183,3,.35); border-radius:10px;
  padding:12px 14px; margin-top:2px;
}

/* ---- big obvious "caught" graphic ---- */
.catch-graphic-wrap{ position:relative; width:150px; height:150px; margin:4px auto 18px; }
.catch-graphic-wrap svg{ width:100%; height:100%; display:block; animation:catchBounce .6s ease; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
@keyframes catchBounce{
  0%{ transform:scale(.35) rotate(-12deg); opacity:0; }
  55%{ transform:scale(1.2) rotate(6deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.catch-ribbon{
  position:absolute; top:-6px; right:-26px; background:var(--correct); color:#063d27; font-weight:800;
  font-size:.82rem; padding:5px 14px; border-radius:7px; transform:rotate(14deg);
  box-shadow:0 6px 14px rgba(0,0,0,.45); letter-spacing:.6px; text-transform:uppercase;
  animation:ribbonPop .5s ease .3s both;
}
@keyframes ribbonPop{
  0%{ transform:rotate(14deg) scale(0); opacity:0; }
  70%{ transform:rotate(14deg) scale(1.25); opacity:1; }
  100%{ transform:rotate(14deg) scale(1); opacity:1; }
}
.confetti-dot{
  position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none;
  animation:confettiPop .9s ease forwards;
}
@keyframes confettiPop{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity:0; }
}

/* ---- clue slots (question-gated) ---- */
.slot-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px;
  padding:12px 14px; margin:0 0 10px;
}
.slot-card:last-child{margin-bottom:0;}
.slot-start-btn{
  display:block; width:100%; text-align:left; background:rgba(255,255,255,.04);
  border:1.5px dashed rgba(168,179,217,.4); color:var(--text); padding:9px 12px; border-radius:8px;
  font-size:.92rem; cursor:pointer; transition:.12s;
}
.slot-start-btn:hover{ border-color:var(--accent); background:rgba(255,183,3,.08); color:var(--accent); }
.slot-question{ font-size:.95rem; margin:0 0 10px; font-weight:600; }
.slot-choices{ display:grid; gap:8px; }
.slot-choice-btn{
  text-align:left; padding:9px 12px; border-radius:8px; border:1.5px solid rgba(168,179,217,.3);
  background:rgba(255,255,255,.03); color:var(--text); cursor:pointer; font-size:.92rem; transition:.1s;
}
.slot-choice-btn:hover:not(:disabled){border-color:var(--accent);}
.slot-choice-btn.correct-choice{ border-color:var(--correct); background:rgba(61,220,151,.18); }
.slot-choice-btn.wrong-choice{ border-color:var(--wrong); background:rgba(255,107,107,.18); }
.slot-input-row{ display:flex; gap:8px; }
.slot-input-row input{
  flex:1; padding:9px 12px; border-radius:8px; border:1.5px solid rgba(168,179,217,.3);
  background:rgba(255,255,255,.03); color:var(--text); font-size:.95rem;
}
.slot-input-row button{ flex-shrink:0; }
.slot-wrong-msg{ color:var(--wrong); font-size:.86rem; margin:8px 0 0; }

/* ---- site grid (subject rows x skill tiles, for the fixed grade band) ---- */
.grid-instructions{ color:var(--muted); font-size:.85rem; margin:0 0 12px; }
.section-grid{ display:flex; flex-direction:column; gap:4px; }
.subject-row-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; margin:12px 0 6px; font-weight:700; }
.subject-row-label:first-child{ margin-top:0; }
.subject-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.tile{
  border-radius:10px; padding:12px 6px; text-align:center; cursor:pointer;
  border:2px solid transparent; border-top-width:3px; background:var(--panel-2); transition:.12s; color:var(--text);
}
.tile:hover{ border-color:var(--accent); transform:translateY(-2px); }
.tile .emoji{ font-size:1.1rem; display:block; margin-bottom:3px; }
.tile .name{ font-size:.74rem; font-weight:600; line-height:1.2; }
.tile.visited{ box-shadow:0 0 0 3px rgba(46,196,182,.35); }
.tile.caught-tile{ background:rgba(61,220,151,.2); border-color:var(--correct); }
.tile.caught-tile .name{ color:var(--correct); }
.tile.just-found{ animation:pulse .9s ease 2; }
.tile.locked-out{ opacity:.35; cursor:not-allowed; pointer-events:none; }
.tile.active-investigation{ box-shadow:0 0 0 3px var(--accent); border-color:var(--accent); }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,151,.6); }
  100%{ box-shadow:0 0 0 14px rgba(61,220,151,0); }
}

.controls-row{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:10px; flex-wrap:wrap; }

.casefile{ max-height:230px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.casefile-item{ background:var(--panel-2); border-radius:8px; padding:8px 10px; font-size:.82rem; }
.casefile-item .head{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.casefile-item .status-caught{color:var(--correct); font-weight:600; margin-left:auto;}
.casefile-item .about{color:var(--muted); font-size:.78rem; font-style:italic; line-height:1.4; margin-bottom:2px;}
.casefile-item .lines{color:var(--text); font-size:.8rem; line-height:1.4;}
.casefile-item .lines.empty{color:var(--muted); font-style:italic;}
.casefile-empty{color:var(--muted); font-size:.85rem; font-style:italic;}

.win-screen{ text-align:center; }
.win-screen .big-emoji{ font-size:3rem; margin-bottom:6px; }
.win-list{ text-align:left; max-width:520px; margin:16px auto; display:flex; flex-direction:column; gap:6px; }
.win-list .row{ display:flex; justify-content:space-between; background:var(--panel-2); padding:8px 12px; border-radius:8px; font-size:.9rem; }

footer{ text-align:center; color:var(--muted); font-size:.75rem; margin-top:18px; }
.hidden{display:none !important;}