/* ============================================================
   Reality Check — prototype stylesheet
   Warm cartoon bureau: cream / teal / amber; rounded shapes;
   high-contrast; touch targets >=44px; no colour-only coding.
   GDD refs: section 8 (UI), section 9 (art), section 10.2 (accessibility)
   ============================================================ */

:root{
  --cream:#faf3e3;
  --cream-2:#f3e8cf;
  --paper:#fffdf6;
  --ink:#26323a;
  --ink-soft:#4c5a63;
  --teal:#12707c;
  --teal-dark:#0b515a;
  --teal-light:#e0f1f2;
  --amber:#e8a020;
  --amber-dark:#b57108;
  --red:#c94f3d;
  --red-soft:#f7ded9;
  --green:#3d8a4e;
  --green-soft:#e1f0e3;
  --purple:#6b5b95;
  --card-shadow:0 3px 0 rgba(38,50,58,.18);
  --radius:14px;
  --focus:#1465d8;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:#20343a;
  font-family:"Segoe UI","Trebuchet MS",Verdana,Arial,sans-serif;
  color:var(--ink);
  font-size:17px;
  line-height:1.45;
}
body.textsize-large{font-size:20px;}

/* Letterbox stage: minimum 1024x600 design space, responsive */
.app{
  position:relative;
  max-width:1180px;
  min-height:100vh;
  margin:0 auto;
  background:var(--cream);
  box-shadow:0 0 40px rgba(0,0,0,.5);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

button{
  font-family:inherit;
  font-size:1em;
  cursor:pointer;
  border:none;
  border-radius:var(--radius);
  min-height:46px;
  min-width:46px;
  padding:.55em 1.2em;
  background:var(--teal);
  color:#fff;
  box-shadow:var(--card-shadow);
  transition:transform .08s ease, filter .12s ease;
}
button:hover{filter:brightness(1.08);}
button:active{transform:translateY(2px);box-shadow:none;}
button:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
button:disabled{opacity:.45;cursor:default;filter:grayscale(.3);}
button.secondary{background:var(--cream-2);color:var(--ink);border:2px solid #d8c9a5;}
button.amber{background:var(--amber);color:#3d2a00;}
button.ghost{background:transparent;color:var(--teal-dark);box-shadow:none;text-decoration:underline;}
button.big{font-size:1.2em;padding:.7em 1.6em;}
button.danger{background:var(--red);}

h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:.2em 0 .4em;}
h1{font-size:2.1em;color:var(--teal-dark);}
h2{font-size:1.5em;color:var(--teal-dark);}
h3{font-size:1.15em;}
p{margin:.4em 0;}
.small{font-size:.85em;color:var(--ink-soft);}
.center{text-align:center;}

/* ---------- HUD ---------- */
.hud{
  display:flex;align-items:center;gap:.8rem;
  padding:.45rem 1rem;
  background:var(--teal-dark);
  color:#fff;
  min-height:52px;
  flex-wrap:wrap;
}
.hud .logo{font-family:Georgia,serif;font-weight:bold;letter-spacing:.04em;font-size:1.05em;}
.hud .logo .tick{color:var(--amber);}
.hud .spacer{flex:1;}
.hud .chip{
  background:rgba(255,255,255,.14);
  border-radius:999px;padding:.15em .8em;
  font-size:.85em;display:inline-flex;align-items:center;gap:.35em;
}
.hud .chip b{color:#ffd98a;}
.hud button{min-height:38px;padding:.25em .8em;font-size:.85em;background:rgba(255,255,255,.18);box-shadow:none;}
.hud .progress-strip{display:flex;gap:.35em;align-items:center;}
.hud .folder-dot{
  width:26px;height:20px;border-radius:4px 8px 4px 4px;
  background:#4d777e;border:2px solid #86adb3;position:relative;
  font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center;
}
.hud .folder-dot.done{background:var(--amber);border-color:#ffd98a;color:#3d2a00;}
.hud .folder-dot.current{border-color:#fff;box-shadow:0 0 6px #fff;}

/* ---------- Screen scaffold ---------- */
.screen{
  flex:1;display:flex;flex-direction:column;
  padding:1.2rem 1.6rem 1.4rem;
  animation:fadein .35s ease;
  width:100%;
}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.screen .content{flex:1;width:100%;max-width:1040px;margin:0 auto;}
.screen .actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1rem;}

/* ---------- Mentor dialogue ---------- */
.mentor-row{
  display:flex;gap:.9rem;align-items:flex-end;margin:.8rem auto .4rem;max-width:1040px;width:100%;
}
.mentor-portrait{
  width:78px;height:78px;flex:none;border-radius:50%;
  border:3px solid var(--teal);
  background:var(--teal-light);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.mentor-portrait svg{width:100%;height:100%;}
.bubble{
  background:var(--paper);
  border:2px solid var(--teal);
  border-radius:16px 16px 16px 4px;
  padding:.7rem 1rem;
  box-shadow:var(--card-shadow);
  max-width:760px;
  position:relative;
}
.bubble .speaker{font-weight:bold;color:var(--teal-dark);font-size:.8em;letter-spacing:.05em;text-transform:uppercase;}
.bubble.dara{border-color:var(--purple);}
.bubble.dara .speaker{color:var(--purple);}
.bubble.system{border-style:dashed;font-style:italic;}

/* ---------- Cards / panels ---------- */
.panel{
  background:var(--paper);
  border:2px solid #e2d5b4;
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  box-shadow:var(--card-shadow);
  margin:.6rem 0;
}
.panel.teal{border-color:var(--teal);background:var(--teal-light);}
.panel.warn{border-color:var(--amber);background:#fff6e2;}
.panel.good{border-color:var(--green);background:var(--green-soft);}
.panel.bad{border-color:var(--red);background:var(--red-soft);}

.option-list{display:flex;flex-direction:column;gap:.6rem;margin:.8rem 0;}
.option-btn{
  text-align:left;background:var(--paper);color:var(--ink);
  border:2px solid #cbd6da;border-radius:var(--radius);
  padding:.7em 1em;font-size:1em;line-height:1.35;
  display:flex;gap:.6em;align-items:flex-start;
}
.option-btn:hover{border-color:var(--teal);}
.option-btn.selected{border-color:var(--teal);background:var(--teal-light);box-shadow:0 0 0 2px var(--teal) inset;}
.option-btn .letter{
  flex:none;width:1.7em;height:1.7em;border-radius:50%;
  background:var(--cream-2);display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:.9em;
}
.option-btn.selected .letter{background:var(--teal);color:#fff;}
.option-btn.idk{border-style:dashed;color:var(--ink-soft);background:var(--cream);}
.option-btn.idk .letter{background:transparent;border:1.5px dashed #9aa7ad;}

/* ---------- Assessment terminal ---------- */
.terminal{
  background:#223a40;
  border-radius:18px;
  border:3px solid #0b515a;
  color:var(--ink);
  padding:1.1rem;
  margin:0 auto;
  max-width:1000px;
  width:100%;
}
.terminal-inner{background:var(--paper);border-radius:10px;padding:1rem 1.3rem;}
.terminal-head{
  display:flex;align-items:center;gap:.7rem;color:#bfe6e2;margin-bottom:.6rem;flex-wrap:wrap;
}
.terminal-head .title{font-family:Georgia,serif;letter-spacing:.06em;font-size:1.02em;}
.progress-dots{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;align-items:center;}
.progress-dots .dot{width:11px;height:11px;border-radius:50%;background:#54767c;border:1px solid #86adb3;}
.progress-dots .dot.done{background:var(--amber);border-color:#ffd98a;}
.progress-dots .dot.now{background:#fff;box-shadow:0 0 5px #fff;}

.assess-images{display:flex;gap:1rem;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:.7rem 0;}
.assess-images .side{flex:1 1 340px;max-width:460px;text-align:center;}
.assess-images .side .tag{font-weight:bold;margin-bottom:.3rem;display:inline-block;background:var(--cream-2);border-radius:8px;padding:.1em .8em;}

.verdict-row{display:flex;gap:1rem;justify-content:center;margin-top:.8rem;flex-wrap:wrap;}
.verdict-row button{font-size:1.15em;min-width:150px;}
.btn-real{background:var(--green);}
.btn-fake{background:var(--red);}
/* a picked-but-not-yet-committed answer: changeable until "how sure" is chosen */
button.picked{
  outline:4px solid var(--focus);outline-offset:2px;
  box-shadow:0 0 0 3px #fff, var(--card-shadow);
}
button.picked::after{content:" ✔";}
.change-note{font-size:.8em;color:var(--ink-soft);text-align:center;margin:.3em 0 0;}

.confidence-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.6rem;}
.confidence-row button{background:var(--paper);color:var(--ink);border:2px solid #cbd6da;font-size:.92em;flex:1 1 140px;max-width:190px;}
.confidence-row button:hover{border-color:var(--teal);}

/* Smileyometer */
.smiley-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1rem 0;}
.smiley-btn{
  display:flex;flex-direction:column;align-items:center;gap:.3em;
  background:var(--paper);color:var(--ink);border:2px solid #cbd6da;
  padding:.6em .5em;flex:1 1 120px;max-width:170px;min-height:110px;
}
.smiley-btn:hover{border-color:var(--teal);}
.smiley-btn .face{font-size:2.3em;line-height:1;}
.smiley-btn .anchor{font-size:.8em;text-align:center;line-height:1.2;}

/* Free text (LX-10) */
/* one neutral intro line per assessment part (AHS §1.3) */
.part-intro{color:var(--teal-dark);font-weight:bold;border-left:4px solid var(--teal);padding-left:.6em;margin:.2rem 0 .8rem;}

/* brief in-fiction wait line while the image preloader finishes (never a raw
   blank wait — performance revision 2026-09-07) */
.preload-wait{animation:preloadPulse 1.4s ease-in-out infinite;}
@keyframes preloadPulse{0%,100%{opacity:1;}50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){.preload-wait{animation:none;}}

/* ---------- Evidence frame + magnifier ---------- */
.evidence-frame{
  position:relative;
  display:inline-block;
  background:#fff;
  padding:10px 10px 30px;
  border:1px solid #b9b2a0;
  box-shadow:2px 4px 12px rgba(0,0,0,.25);
  /* torn-edge file border */
  border-radius:3px;
  max-width:100%;
}
.evidence-frame::after{
  content:"EVIDENCE";
  position:absolute;right:8px;bottom:5px;
  font-family:"Courier New",monospace;font-weight:bold;font-size:12px;
  color:#c0392b;border:2px solid #c0392b;border-radius:3px;padding:0 .35em;
  transform:rotate(-4deg);letter-spacing:.15em;opacity:.85;
}
.evidence-frame .ev-wrap{position:relative;overflow:hidden;line-height:0;}
.evidence-frame img{display:block;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none;}
.ev-caption{font-family:"Courier New",monospace;font-size:12px;color:#555;position:absolute;left:10px;bottom:6px;}

.magnifier-lens{
  position:absolute;width:220px;height:220px;border-radius:50%;
  border:4px solid var(--amber);
  box-shadow:0 0 0 2px #7c5510, 0 6px 16px rgba(0,0,0,.4);
  background-repeat:no-repeat;
  pointer-events:none;
  display:none;
  z-index:30;
}
/* small centre ring marking the exact point being magnified */
.magnifier-lens::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;
  margin:-8px 0 0 -8px;border:2px solid rgba(232,160,32,.95);border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75);
}
.zoom-hint{font-size:.85em;color:var(--ink-soft);text-align:center;margin-top:.3rem;}

/* pins */
.pin{
  position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:3px solid #fff;
  background:var(--amber);
  color:#3d2a00;font-weight:bold;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  z-index:20;
}
.pin.correct{background:var(--green);color:#fff;}
.pin.wrong{background:var(--red);color:#fff;}
.zone-reveal{
  position:absolute;border:3px dashed var(--green);border-radius:10px;
  background:rgba(61,138,78,.12);z-index:15;pointer-events:none;
}
.zone-reveal.missed{border-color:var(--amber);background:rgba(232,160,32,.13);}
/* letter chip pinned to a revealed zone; the wording lives in the legend list */
.zone-tag{
  position:absolute;left:-3px;top:-3px;width:26px;height:26px;border-radius:8px;
  background:var(--green);color:#fff;font-weight:bold;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.zone-reveal.missed .zone-tag{background:var(--amber);color:#3d2a00;}
/* case-closed legend: one readable row per clue zone and per player pin */
.reveal-legend{margin:.6rem 0;}
.reveal-legend .legend-item{
  display:flex;gap:.55em;align-items:flex-start;background:var(--paper);
  border:2px solid #e2d5b4;border-radius:10px;padding:.4em .6em;margin:.3em 0;
  font-size:.9em;text-align:left;line-height:1.3;
}
.reveal-legend .legend-item .lg-chip{
  flex:none;width:24px;height:24px;border-radius:8px;margin-top:.1em;
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:13px;
  color:#fff;background:var(--green);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.reveal-legend .legend-item.missed .lg-chip{background:var(--amber);color:#3d2a00;}
.reveal-legend .legend-item.pin-right{border-color:var(--green);background:var(--green-soft);}
.reveal-legend .legend-item.pin-wrong{border-color:var(--red);background:var(--red-soft);}
.reveal-legend .legend-item.pin-wrong .lg-chip{background:var(--red);border-radius:50%;}
.reveal-legend .legend-item.pin-right .lg-chip{border-radius:50%;}
.reveal-legend .legend-item.pin-na .lg-chip{background:#8a8a8a;border-radius:50%;}
.reveal-legend .legend-item b{white-space:nowrap;}

/* ---------- Inspector ---------- */
.inspector{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;max-width:1080px;margin:0 auto;}
.inspector .left{flex:1 1 480px;min-width:340px;text-align:center;}
.inspector .right{flex:1 1 300px;min-width:280px;}
.phase-tabs{display:flex;gap:4px;margin-bottom:.6rem;flex-wrap:wrap;}
.phase-tabs button{
  flex:1;min-width:80px;border-radius:10px 10px 0 0;background:var(--cream-2);color:var(--ink-soft);
  font-size:.8em;font-weight:bold;letter-spacing:.03em;box-shadow:none;min-height:44px;padding:.3em .4em;
}
.phase-tabs button.active{background:var(--teal);color:#fff;}
.phase-tabs button.visited:not(.active){background:#cfe4e6;color:var(--teal-dark);}
.phase-tabs button:disabled{opacity:.4;}
.tray{background:var(--paper);border:2px solid #e2d5b4;border-radius:var(--radius);padding:.6rem .8rem;min-height:70px;}
.tray h3{margin:0 0 .3em;font-size:.95em;}
.tray .tray-item{
  display:flex;align-items:center;gap:.5em;background:var(--teal-light);
  border-radius:8px;padding:.25em .6em;margin:.25em 0;font-size:.9em;
}
.tray .tray-item.source{background:#efe7fa;}
.tray .tray-item .n{font-weight:bold;background:var(--amber);color:#3d2a00;width:1.5em;height:1.5em;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:.85em;}
.shield{
  display:inline-flex;align-items:center;gap:.4em;background:var(--teal-dark);color:#fff;
  border-radius:999px;padding:.25em 1em;font-weight:bold;
}
.shield .pt{color:#ffd98a;}

/* clue card picker */
.card-picker{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;}
.clue-card-mini{
  width:158px;background:var(--paper);color:var(--ink);border:2px solid #cbd6da;border-radius:10px;
  padding:.5em .4em;text-align:center;cursor:pointer;font-size:.78em;line-height:1.25;
  min-height:44px;
}
.clue-card-mini:hover{border-color:var(--amber);}
.clue-card-mini .cicon{font-size:1.7em;display:block;}
.clue-card-mini b{display:block;margin:.15em 0;color:var(--teal-dark);}
.clue-card-mini .lk{display:block;font-size:.88em;color:var(--ink-soft);}
.clue-card-mini.locked{opacity:.35;cursor:default;}
.clue-card-mini.disabled-child{opacity:.35;cursor:default;position:relative;}

/* clue card full (album/debrief) */
.clue-card{
  width:212px;background:var(--paper);border:3px solid var(--teal);border-radius:14px;
  padding:.7em .7em .8em;text-align:center;box-shadow:var(--card-shadow);
}
.clue-card .cicon{font-size:2.1em;}
.clue-card h4{margin:.2em 0;font-size:1em;color:var(--teal-dark);}
.clue-card .look{font-size:.82em;}
.clue-card .caveat{font-size:.75em;background:#fff6e2;border:1px dashed var(--amber);border-radius:8px;padding:.3em .4em;margin-top:.4em;color:#6b4b00;}
.clue-card.mastered{border-color:var(--amber);}
.clue-card .badge-star{color:var(--amber);font-size:1em;}
.clue-card img{width:100%;border-radius:8px;margin-top:.4em;}
.card-grid{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;}

/* ---------- Judgement console ---------- */
.console-wrap{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start;max-width:1080px;margin:0 auto;}
.console-wrap .scenario{flex:1 1 430px;min-width:320px;}
.console-wrap .console{flex:1 1 360px;min-width:320px;}
.console{
  background:#5d4632;border-radius:16px;padding:1rem;
  border:3px solid #3f2f20;color:#fff;
}
.switch-row{
  display:flex;align-items:center;gap:.6rem;background:#4a3828;border-radius:10px;
  padding:.5rem .7rem;margin:.5rem 0;flex-wrap:wrap;
}
.switch-row .sw-label{flex:1 1 110px;font-weight:bold;letter-spacing:.03em;font-size:.95em;}
.switch-row .sw-states{display:flex;gap:4px;}
.switch-row .sw-states button{
  min-height:44px;min-width:56px;font-size:.78em;font-weight:bold;box-shadow:none;
  background:#7a6348;color:#e8dcc9;border:2px solid #93805f;
}
.switch-row .sw-states button.on-yes{background:var(--green);border-color:#7cc98b;color:#fff;}
.switch-row .sw-states button.on-no{background:var(--red);border-color:#e79a8c;color:#fff;}
.switch-row .sw-states button.on-ct{background:var(--amber);border-color:#ffd98a;color:#3d2a00;}
.switch-row.locked{opacity:.55;}
.switch-row .lock-note{font-size:.72em;color:#e8dcc9;width:100%;}
.lamp-wrap{text-align:center;margin:.8rem auto .2rem;}
.lamp-wrap .lamp-label{
  display:block;font-size:.7em;letter-spacing:.14em;color:#e8dcc9;font-weight:bold;margin-bottom:.25em;
}
.verdict-lamp{
  margin:0 auto;width:190px;min-height:64px;border-radius:32px 32px 12px 12px;
  background:#332619;border:3px solid #93805f;
  display:flex;align-items:center;justify-content:center;gap:.35em;
  font-weight:bold;font-size:1.05em;letter-spacing:.04em;
  color:#b9a98c;padding:.3em .6em;text-align:center;
}
.verdict-lamp .bulb{font-size:1.25em;filter:grayscale(1) brightness(.7);}
.verdict-lamp.ready{border-color:#ffd98a;box-shadow:0 0 10px rgba(255,217,138,.35);}
.verdict-lamp.ready .bulb{filter:grayscale(.5);}
.verdict-lamp.good,.verdict-lamp.bad,.verdict-lamp.depends{font-size:1.2em;}
.verdict-lamp.good .bulb,.verdict-lamp.bad .bulb,.verdict-lamp.depends .bulb{filter:none;}
.verdict-lamp.good{background:var(--green);color:#fff;border-color:#7cc98b;box-shadow:0 0 18px rgba(61,138,78,.8);}
.verdict-lamp.bad{background:var(--red);color:#fff;border-color:#e79a8c;box-shadow:0 0 18px rgba(201,79,61,.8);}
.verdict-lamp.depends{background:var(--amber);color:#3d2a00;border-color:#ffd98a;box-shadow:0 0 18px rgba(232,160,32,.8);}

.evchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0;}
.evchip{
  background:var(--paper);color:var(--ink);border:2px solid #cbd6da;border-radius:10px;
  padding:.45em .8em;font-size:.88em;text-align:left;
}
.evchip.viewed{border-color:var(--teal);background:var(--teal-light);}
.evchip .tick{color:var(--green);font-weight:bold;}

/* triage chute */
.chute{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:.8rem 0;}
.desk{
  flex:1 1 200px;max-width:280px;background:var(--paper);border:3px solid #cbd6da;border-radius:14px;
  padding:.7rem;text-align:center;cursor:pointer;min-height:110px;
}
.desk:hover{border-color:var(--amber);}
.desk h4{margin:.1em 0;color:var(--teal-dark);}
.desk .dicon{font-size:1.8em;}
.desk .dsub{font-size:.8em;color:var(--ink-soft);}
.case-card-red{
  background:var(--red);color:#fff;border-radius:10px;display:inline-block;
  padding:.5em 1.2em;font-weight:bold;box-shadow:var(--card-shadow);margin:.4rem 0;
}

/* spread ticker */
.ticker{
  display:inline-flex;align-items:center;gap:.5em;background:#26323a;color:#ffd98a;
  font-family:"Courier New",monospace;font-weight:bold;border-radius:10px;padding:.35em .9em;font-size:1.05em;
}
.ticker .lbl{color:#9fb3bc;font-size:.7em;font-family:inherit;}

/* ---------- Phone / app mocks ---------- */
.app-mock{
  max-width:430px;margin:0 auto;background:#fff;border-radius:22px;
  border:3px solid #26323a;overflow:hidden;box-shadow:var(--card-shadow);
  text-align:left;
}
.app-mock .bar{display:flex;align-items:center;gap:.5em;padding:.45em .8em;color:#fff;font-weight:bold;}
.app-mock .bar.loopa{background:#7c3aad;}
.app-mock .bar.hivechat{background:#c9812b;}
.app-mock .bar.streamly{background:#b03050;}
.app-mock .bar.beacon{background:#1d4f8a;}
.app-mock .body{padding:.7em .9em;}
.app-mock .body img{max-width:100%;border-radius:8px;display:block;}
.app-mock .handle{font-weight:bold;}
.app-mock .meta{font-size:.78em;color:#667;}
.app-mock .stats{display:flex;gap:1.2em;font-size:.85em;color:#556;padding:.4em .2em 0;border-top:1px solid #eee;margin-top:.5em;}
.app-mock .chatline{margin:.4em 0;display:flex;}
.app-mock .chatline .msg{background:#f0f0f4;border-radius:12px;padding:.4em .8em;max-width:85%;}
.app-mock .chatline.me{justify-content:flex-end;}
.app-mock .chatline.me .msg{background:#d5ecd9;}
.waveform{display:flex;align-items:center;gap:2px;height:44px;margin:.4em 0;}
.waveform i{display:block;width:4px;background:#7c3aad;border-radius:2px;}

/* ---------- Case board / hub ---------- */
.case-board{
  background:#8a6f4d;border:6px solid #6b5238;border-radius:14px;
  padding:1.2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
  position:relative;
}
.folder{
  width:196px;background:var(--cream-2);border-radius:8px 16px 8px 8px;
  border:2px solid #c9b482;padding:.7rem;cursor:pointer;text-align:left;
  position:relative;min-height:104px;box-shadow:var(--card-shadow);
}
.folder:hover{transform:translateY(-2px);}
.folder h4{margin:0 0 .2em;font-size:.98em;}
.folder .fmeta{font-size:.78em;color:var(--ink-soft);}
.folder .stamp{
  position:absolute;right:6px;top:6px;font-family:"Courier New",monospace;font-weight:bold;
  font-size:.72em;border:2px solid;border-radius:4px;padding:0 .3em;transform:rotate(6deg);
}
.folder.done{opacity:.8;cursor:default;}
.folder.done .stamp{color:var(--green);border-color:var(--green);}
.folder.open .stamp{color:var(--red);border-color:var(--red);}
.folder.locked{opacity:.5;cursor:default;}
.folder.pinned{border-color:var(--red);}
.media-slots{display:flex;gap:.5rem;justify-content:center;margin:.6rem 0;}
.media-slot{
  width:64px;height:52px;border-radius:8px;border:2px dashed #93805f;color:#93805f;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7em;font-weight:bold;
  background:rgba(255,255,255,.35);
}
.media-slot.filled{border-style:solid;border-color:var(--teal);color:var(--teal-dark);background:var(--teal-light);}
.media-slot .micon{font-size:1.3em;}

/* ---------- Machine room ---------- */
.machine{
  background:#6d7f86;border:4px solid #47555b;border-radius:18px;padding:1rem;color:#fff;
  max-width:900px;margin:0 auto;text-align:center;
}
.machine .hopper{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:.6rem 0;}
.machine .hopper img{width:56px;height:56px;border-radius:6px;object-fit:cover;border:2px solid #fff;}
.machine .mbuttons{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:.7rem 0;}
.nest-rings{display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;margin:1rem 0;}
.ring-slot{
  border:3px dashed #cbd6da;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.85);color:var(--ink-soft);cursor:pointer;text-align:center;font-size:.85em;
}
.ring-slot.outer{width:250px;height:250px;}
.ring-slot.middle{width:165px;height:165px;}
.ring-slot.inner{width:92px;height:92px;font-size:.7em;}
.ring-slot.filled{border-style:solid;border-color:var(--teal);color:var(--teal-dark);font-weight:bold;}
.ring-chip{background:var(--paper);color:var(--ink);border:2px solid #cbd6da;font-weight:bold;}
.ring-chip.selected{border-color:var(--amber);background:#fff6e2;}

/* ---------- Certificate ---------- */
.certificate{
  background:var(--paper);border:6px double var(--amber-dark);border-radius:8px;
  max-width:660px;margin:1rem auto;padding:1.6rem 2rem;text-align:center;
  box-shadow:var(--card-shadow);
}
.certificate h2{color:var(--amber-dark);letter-spacing:.05em;}
.certificate .badges{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin:.6rem 0;}
.badge-pill{background:var(--teal-light);border:2px solid var(--teal);border-radius:999px;padding:.15em .7em;font-size:.8em;font-weight:bold;color:var(--teal-dark);}

/* ---------- Avatars ---------- */
.avatar-grid{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;}
.avatar-choice{
  width:92px;height:92px;border-radius:50%;border:3px solid #cbd6da;cursor:pointer;overflow:hidden;background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.avatar-choice.selected{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber);}
.avatar-choice svg{width:100%;height:100%;}
.handle-grid{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:720px;margin:0 auto;}
.handle-grid button{background:var(--paper);color:var(--ink);border:2px solid #cbd6da;font-weight:bold;}
.handle-grid button.selected{border-color:var(--amber);background:#fff6e2;}

/* ---------- Repair panel ---------- */
.repair-verbs{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin:.8rem 0;}
.repair-verbs button{flex:1 1 180px;max-width:230px;background:var(--paper);color:var(--ink);border:2px solid #cbd6da;text-align:center;}
.repair-verbs button.done{border-color:var(--green);background:var(--green-soft);cursor:default;}

/* ---------- Overlays (But how? / hints / content notes) ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(20,30,35,.65);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.overlay .box{
  background:var(--paper);border-radius:16px;max-width:620px;width:100%;
  padding:1.2rem 1.4rem;box-shadow:0 10px 40px rgba(0,0,0,.4);
  max-height:88vh;overflow:auto;
}
.overlay .box h3{color:var(--teal-dark);margin-top:0;}

/* toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--teal-dark);color:#fff;border-radius:999px;padding:.5em 1.4em;
  z-index:120;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:fadein .3s ease;
  font-weight:bold;max-width:90%;text-align:center;
}
.toast.reward{background:var(--amber);color:#3d2a00;}

/* dev bar */
.devbar{
  position:fixed;top:0;right:0;background:#111;color:#0f0;font-family:monospace;font-size:11px;
  padding:2px 8px;z-index:200;opacity:.85;max-width:340px;
}
.devbar button{min-height:20px;min-width:0;padding:1px 6px;font-size:10px;background:#333;box-shadow:none;border-radius:4px;margin:1px;}

/* researcher panel */
.researcher{font-family:Consolas,monospace;font-size:13px;padding:1rem;}
.researcher table{border-collapse:collapse;width:100%;}
.researcher td,.researcher th{border:1px solid #999;padding:2px 6px;text-align:left;}

/* speed shift */
.timer-big{font-family:"Courier New",monospace;font-size:1.6em;font-weight:bold;color:var(--teal-dark);}

/* locker */
.locker-grid{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.locker-item{
  width:150px;background:var(--paper);border:2px solid #cbd6da;border-radius:12px;padding:.6rem;text-align:center;
}
.locker-item .licon{font-size:2em;}
.locker-item.owned{border-color:var(--green);background:var(--green-soft);}

/* ---------- Title screen (presentation only) ---------- */
.title-stage{
  position:relative;overflow:hidden;
  margin:1.2rem auto 0;max-width:880px;
  padding:2.6rem 1.5rem 2.4rem;
  border-radius:18px;color:var(--cream);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(232,160,32,.16),transparent 55%),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px),
    linear-gradient(180deg,#1b4a52 0%,#0b515a 58%,#0a3d44 100%);
  box-shadow:0 14px 34px rgba(11,42,48,.45),inset 0 0 0 3px rgba(224,241,242,.12);
}
.title-crest{
  width:106px;margin:0 auto .5rem;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
  animation:crestBob 4.5s ease-in-out infinite;
}
.title-crest svg{width:100%;height:auto;display:block;}
@keyframes crestBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.title-logo{
  font-size:clamp(2.4em,6vw,3.4em);color:var(--cream);
  letter-spacing:.04em;margin:.1em 0 .15em;
  text-shadow:0 3px 0 #08343a,0 8px 24px rgba(0,0,0,.5);
}
.title-tagline{font-size:1.25em;color:var(--cream);margin:.2em 0 0;}
.title-meta{font-size:.88em;color:rgba(250,243,227,.75);margin-top:.5em;}
.title-toggles{margin-top:.9rem;}
.title-file{
  display:inline-block;margin-top:1.6rem;padding:.2em 1.1em;
  border:2px dashed rgba(232,160,32,.65);border-radius:8px;
  color:#f2c56b;font-size:.8em;letter-spacing:.12em;
  transform:rotate(-1.5deg);
}
@media (prefers-reduced-motion:reduce){.title-crest{animation:none;}}

@media (max-width:760px){
  .screen{padding:.8rem;}
  .inspector .left,.inspector .right{flex:1 1 100%;}
  .magnifier-lens{width:170px;height:170px;}
}

/* ---------- machine-room extras (ring lock glosses + drawn pattern machine) ---------- */
.term-cards{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:.6rem 0;}
.term-card{
  flex:1 1 200px;max-width:250px;background:var(--paper);border:2px solid #cbd6da;
  border-radius:12px;padding:.55em .7em;text-align:left;font-size:.85em;line-height:1.3;
}
.term-card b{color:var(--teal-dark);display:block;margin-bottom:.15em;}
.machine-visual{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;margin:.5rem 0;}
.machine-visual .m-in{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:150px;}
.machine-visual .m-in .hopper{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin:0;}
.machine-visual .m-in .hopper img{width:44px;height:44px;}
.machine-visual .m-stage{font-size:.72em;color:#dfe8ea;font-weight:bold;letter-spacing:.05em;}
.machine-visual svg{width:190px;height:auto;flex:none;}
.machine-visual .m-outcol{max-width:320px;}
.machine-visual .m-out-slot{
  min-width:150px;min-height:90px;max-width:300px;border:2px dashed #cbd6da;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:#cbd6da;font-size:.75em;padding:.3em;
  overflow:hidden;
}
.machine-visual .m-out-slot img{max-width:100%;}
.machine-visual .m-out-slot svg{max-width:100%;height:auto;}