/* Detective Sneaky, Case 000 "Closing Time".
   Extracted from the design prototype. The theme tokens at the top are a
   mirror of theme/detective-sneaky-theme.css so the case still renders if
   the shared theme fails to load. */
/* ── Detective Sneaky theme tokens (mirrored from theme/detective-sneaky-theme.css).
   Self-contained on purpose so SD can just open the file. When this ports into
   the real case, drop these and link the shared theme instead. ── */
:root{
  --c-bg:#1a1814; --c-paper:#ede1c8; --c-paper-edge:#d4c39c;
  --c-ink:#1c1a17; --c-ink-soft:#4a443a;
  --c-accent:#b13a2e; --c-stamp:#5b1e16; --c-tape:#f3e2a4cc;
  --c-cork:#8a5a32; --c-cork-dark:#5e3c1f;
  --font-body:"Special Elite","Courier New",Consolas,monospace;
  --font-display:"Crimson Pro",Georgia,"Times New Roman",serif;
  --shadow-paper:0 4px 12px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
/* The real case is a fixed canvas with overflow:hidden and internal scrolling
   (src-case-003/css/main.css: width min(100vw,1400px), height min(100vh,1000px)).
   The slice matches that architecture so it behaves the same on the site, and
   so it survives the tightest embed we care about, 900x660. The PAGE never
   scrolls; each panel scrolls inside itself. */
body{
  margin:0; background:var(--c-bg); color:var(--c-paper);
  /* --fs-base is set by the Preferences panel (js/settings.js). The rest of
     the case is in rem, so the root size does most of the work; this covers
     the handful of places that are still px. */
  font-family:var(--font-body); font-size:var(--fs-base,15px); line-height:1.5;
  background-image:radial-gradient(ellipse at 50% -10%,#2a251d 0%,#1a1814 60%);
  /* THE PAGE SCROLLS. The case does not fill the viewport.
     ─────────────────────────────────────────────────────────────
     This is the whole answer to "ads cover the game". A canvas that fills
     the viewport leaves Mediavine nowhere to put anything except ON TOP of
     it, so adhesion and floating video overlap the game and players complain.
     A fixed-size case block inside a normal scrolling page means the ad units
     flow AROUND it instead, and it gets MORE inventory (content units above
     and below) rather than less. SD's 900x660 is player-validated: it is the
     size that survives the ad furniture. Trust it over the CSS cap. */
  min-height:100%;
}
.page{max-width:1080px;margin:0 auto;padding:14px 14px 320px}
div.ds-page-slot{
  height:var(--slot-h,90px);display:none;place-items:center;margin:0 auto 14px;
  max-width:var(--slot-w,728px);background:#15120f;border:1px dashed #3a3227;
  font-size:.58rem;letter-spacing:.18em;color:#4d4437;text-align:center;
}
body.show-ads div.ds-page-slot{display:grid}

/* The case itself: a fixed block, never the viewport. */
.stage{
  width:900px;
  /* THE BINDING CONSTRAINT: the case must fit in the space above the adhesion
     unit, or its bottom sits under the ad and the player complains. So height
     is "660 if there is room, otherwise whatever is left", never a hard 660.
     A short laptop gets a shorter case rather than a covered one. */
  height:min(660px, calc(100vh - var(--ad-gutter,0px) - 30px));
  min-height:480px;
  margin:0 auto 14px;position:relative;
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #3a3227;border-radius:4px;background:var(--c-bg);
  box-shadow:0 10px 40px rgba(0,0,0,.55);
}
@media (max-width:940px){ .stage{width:100%;height:auto;min-height:660px} }
/* Side rails. The canvas caps at 1400, so on a 1920 monitor there is ~260px of
   dead space either side doing nothing. Two 160px rails turn that into ad
   inventory at zero cost to the game. The shipped case already has the markup
   for these (endscene-rail-left/right in src-case-003/index.html) but they are
   hidden and inert; this is what reviving them looks like.
   Only appear when there is genuinely room: 1400 canvas + 2x160 rails + gaps. */
/* Rails sit CLOSE to the case, not pinned to the screen edges. SD: "the rail
   doesn't have to be so far away from the game, 90-100px should be fine."
   Positioned off the centre line so the gap stays constant at any width:
     rail(160) | gap(96) | case(900) | gap(96) | rail(160)
   which needs 1412px, so they appear at 1420 and up. */
div.ds-rail{
  position:fixed;top:0;bottom:var(--ad-gutter,0px);width:var(--rail-w,160px);
  display:none;place-items:center;text-align:center;
  background:#15120f;border:1px solid #2a241d;
  font-size:.58rem;letter-spacing:.18em;color:#4d4437;line-height:1.8;z-index:140;
}
div.ds-rail-l{ right:calc(50% + 450px + var(--rail-gap,96px)); }
div.ds-rail-r{ left: calc(50% + 450px + var(--rail-gap,96px)); }
@media (min-width:1420px){ body.show-ads div.ds-rail{display:grid} }

/* Stand-in for the adhesion unit so the reserved strip is visible, not imagined. */
div.ds-adhesion{
  position:fixed;left:0;right:0;bottom:0;height:var(--ad-gutter,0px);
  display:none;place-items:center;background:#15120f;border-top:1px solid #000;
  font-size:.62rem;letter-spacing:.2em;color:#4d4437;z-index:150;
}
body.show-ads div.ds-adhesion{display:grid}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}


/* ── M-M chrome bar (top of canvas) ─────────────────────────────────
   Lifted from the shipped case so the prototype sits in the same furniture:
   src-case-003/css/main.css #mm-chrome, and the markup from its index.html.
   Same colours, same sizing, same clip-do-not-grow behaviour. */
#mm-chrome{
  flex:0 0 auto;
  background:#0e0c08;color:#8a8170;border-bottom:1px solid #2a2620;
  display:flex;align-items:center;padding:0 12px;gap:8px;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  overflow:hidden;min-width:0;white-space:nowrap;user-select:none;
}
#mm-chrome .mm-link{
  color:#b8ad95;text-decoration:none;background:none;border:none;
  padding:4px 5px;font-family:var(--font-body);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .15s;
}
#mm-chrome .mm-link:hover{color:#ede1c8}
#mm-chrome .mm-sep{color:#3a342c}
#mm-chrome .mm-spacer{flex:1}
/* The bar is only ever as wide as the 900px stage, so this is not a responsive
   nicety — it is the difference between the controls being there and being
   clipped off the end. The breadcrumb is the ONLY thing allowed to give up
   space; Briefing, Sound, Preferences and the sign-in state never shrink. */
#mm-chrome .mm-nav-left{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
}
#mm-chrome .mm-nav-right{
  flex:0 0 auto;margin-left:auto;padding-left:10px;
  display:flex;align-items:center;gap:8px;
}
/* Breadcrumb items keep their natural width and the GROUP clips from its right
   edge. Letting each item shrink instead turned every label into an ellipsis
   ("MELTING-M... | DETECTIVE SN... | DISCUSS THE ...") the moment the bar was
   a few pixels tight, which reads as broken rather than as tight. */
#mm-chrome .mm-nav-left > *{flex:0 0 auto}
#mm-chrome .mm-ghost{opacity:.65}
#mm-chrome .mm-ghost:hover{opacity:1}
#mm-chrome .mm-case-tag{color:#8a7f68}
#mm-chrome .mm-sep.mm-case-tag{color:#6a5d4a;padding:0 2px}
/* Terms only shows on the splash, same as the shipped case. */
#mm-chrome .mm-website{display:none}
#mm-chrome .mm-premium-badge{
  display:inline-block;margin-left:6px;padding:2px 6px 1px;
  background:var(--c-accent);color:var(--c-paper);
  font-size:.5rem;letter-spacing:.14em;border-radius:2px;
}

/* ── Case bar ── */
.bar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:18px;
  padding:10px 20px;border-bottom:2px solid #000;
  background:linear-gradient(#241f19,#1b1713);
  position:sticky;top:0;z-index:50;
}
.bar-id{font-size:.72rem;letter-spacing:.22em;color:#8d8271}
.bar-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:.04em}
.bar-build{font-size:.58rem;letter-spacing:.16em;color:#6b6152;border:1px solid #3a3227;padding:2px 6px;border-radius:2px}
.bar-spacer{flex:1}

/* Milestone stamps: blank until earned. Never named in advance. */
.stamps{display:flex;gap:8px;align-items:center}
.stamps-label{font-size:.66rem;letter-spacing:.18em;color:#8d8271;margin-right:2px}
.stamp{
  min-width:80px;height:34px;padding:0 8px;border:2px dashed #4d4437;border-radius:3px;
  display:grid;place-items:center;font-size:.58rem;letter-spacing:.14em;color:#4d4437;
  transition:transform .25s ease;white-space:nowrap;
}
.stamp.earned{
  border:2px solid var(--c-stamp);border-style:solid;color:var(--c-paper);
  background:var(--c-stamp);transform:rotate(-3deg);
  box-shadow:0 2px 0 rgba(0,0,0,.4);
}

/* ── Layout ── */
.wrap{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px; padding:16px; overflow:hidden;
}
.col{display:flex;flex-direction:column;gap:16px;min-height:0}
/* Panels share the column height so their inner scroll regions do the work.
   The desk is the exception: its content is a fixed size, so it keeps it. */
.col > .panel{flex:1 1 0;min-height:0}
.col > .panel.fixed{flex:0 0 auto}
/* Below 760 there is not room for two columns of anything useful, so stack and
   let the whole thing scroll rather than crushing both. */
@media (max-width:760px){
  body{overflow:auto}
  .wrap{grid-template-columns:1fr;overflow:visible}
  .col{min-height:auto}
}

.panel{background:#221d17;border:1px solid #3a3227;border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;min-height:0}
.sidetabs{display:flex;gap:0;padding:0 !important}
.sidetab{
  flex:1;padding:9px 10px;font-size:.62rem;letter-spacing:.16em;color:#8d8271;
  border-right:1px solid #3a3227;border-bottom:2px solid transparent;
}
.sidetab:last-child{border-right:none}
.sidetab:hover{color:var(--c-paper);background:#332b21}
.sidetab.on{color:var(--c-paper);background:#332b21;border-bottom-color:var(--c-accent)}
.sidetab span{color:var(--c-accent)}
.panel-head{
  flex:0 0 auto;
  padding:9px 14px;background:#2b251d;border-bottom:1px solid #3a3227;
  font-size:.68rem;letter-spacing:.2em;color:#a2967f;
}

/* ── Tabs ── */
.tabs{flex:0 0 auto;display:flex;flex-wrap:wrap;border-bottom:1px solid #3a3227;background:#1e1913}
.tab{
  padding:11px 14px;font-size:.7rem;letter-spacing:.1em;color:#8d8271;
  border-right:1px solid #3a3227;border-bottom:3px solid transparent;
}
.tab:hover{color:var(--c-paper);background:#262019}
.tab.active{color:var(--c-paper);border-bottom-color:var(--c-accent);background:#262019}
.tab .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c-accent);margin-left:7px;vertical-align:middle}
.view{padding:16px;flex:1 1 auto;min-height:0;overflow:auto}

/* ── Paper documents ── */
.paper{
  background:var(--c-paper);color:var(--c-ink);border:1px solid var(--c-paper-edge);
  padding:14px 16px;box-shadow:var(--shadow-paper);border-radius:2px;
}
.paper h3{font-family:var(--font-display);margin:0 0 8px;font-size:1.05rem}
.paper p{margin:0 0 9px}
.paper p:last-child{margin-bottom:0}
.paper .meta{font-size:.68rem;letter-spacing:.12em;color:var(--c-ink-soft);text-transform:uppercase}

/* ── Scene hotspots ── */
.scene-intro{margin-bottom:14px;color:#c3b79f;font-size:.9rem}
.spots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spot{
  text-align:left;padding:12px 13px;background:#2b251d;border:1px solid #453b2d;border-radius:3px;
  transition:border-color .15s,background .15s;
}
.spot:hover{border-color:var(--c-accent);background:#332b21}
.spot-name{display:block;font-size:.86rem;color:var(--c-paper);margin-bottom:3px}
.spot-sub{display:block;font-size:.72rem;color:#8d8271}
.spot.taken{opacity:.45;cursor:default;border-style:dashed}
.spot.taken:hover{border-color:#453b2d;background:#2b251d}

/* ── Interview ── */
.qs{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.q{
  text-align:left;padding:10px 13px;background:#2b251d;border:1px solid #453b2d;
  border-left:3px solid var(--c-accent);border-radius:3px;font-size:.86rem;
}
.q:hover{background:#332b21}
.q.asked{opacity:.45}
.reply{margin-top:12px}
.reply .who{font-size:.68rem;letter-spacing:.16em;color:var(--c-ink-soft);margin-bottom:5px}
.captured{
  margin-top:9px;padding:7px 10px;background:#2e2a1d;border:1px dashed var(--c-accent);
  border-radius:3px;font-size:.74rem;color:#d9c9a5;
}

/* ── Records desk ── */
.rec-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #332c22}
.rec-row:last-child{border-bottom:none}
.rec-name{flex:1;font-size:.88rem}
.rec-sub{display:block;font-size:.72rem;color:#8d8271}
.btn{
  padding:7px 14px;background:var(--c-accent);color:var(--c-paper);border-radius:2px;
  font-size:.72rem;letter-spacing:.13em;box-shadow:0 2px 0 #6d2018;
}
.btn:hover{background:#c4453a}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #6d2018}
.btn[disabled]{background:#4a4238;box-shadow:0 2px 0 #2c261f;cursor:default;color:#8d8271}
.pending{font-size:.72rem;letter-spacing:.14em;color:#c9a227}
.landed{font-size:.72rem;letter-spacing:.14em;color:#7fa05a}
.rec-none{color:#6b6152;font-size:.82rem;padding:14px 0}

/* ── Deduction slot ── */
.slot-wrap{padding:16px;flex:0 0 auto}
.slot-q{font-family:var(--font-display);font-size:1.18rem;margin:0 0 3px}
.slot-hint{font-size:.74rem;color:#8d8271;margin:0 0 13px}
.bays{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.bay{
  min-height:88px;border:2px dashed #4d4437;border-radius:4px;padding:10px;
  display:grid;place-items:center;text-align:center;font-size:.76rem;color:#6b6152;
  transition:border-color .15s,background .15s;
}
.bay.over{border-color:var(--c-accent);background:#2e241f}
.bay.full{border-style:solid;border-color:#6b5c45;background:var(--c-paper);color:var(--c-ink);place-items:stretch}
.bay-card{width:100%;text-align:left;cursor:pointer}
.bay-card .bc-kind{font-size:.6rem;letter-spacing:.15em;color:var(--c-ink-soft)}
.bay-card .bc-name{font-size:.82rem;line-height:1.3;margin-top:3px}
.bay-card .bc-drop{font-size:.62rem;color:var(--c-accent);margin-top:6px;letter-spacing:.1em}
.vs{font-size:.7rem;letter-spacing:.2em;color:#6b6152}
.slot-actions{margin-top:13px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-ghost{background:none;color:#a2967f;border:1px solid #4d4437;box-shadow:none}
.btn-ghost:hover{background:#2b251d;color:var(--c-paper);border-color:var(--c-accent)}
.btn-ghost:active{transform:none;box-shadow:none}
.sneaky-level{font-size:.6rem;letter-spacing:.16em;color:#8d8271;margin-top:6px}
.slot-msg{font-size:.78rem;color:#a2967f;min-height:1.2em}

/* ── Evidence in hand ── */
.hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;padding:14px;
  flex:1 1 auto;min-height:0;overflow:auto;align-content:start}
.card{
  text-align:left;background:var(--c-paper);color:var(--c-ink);border:1px solid var(--c-paper-edge);
  border-radius:2px;padding:9px 11px;box-shadow:var(--shadow-paper);cursor:grab;
  transition:transform .12s ease,box-shadow .12s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.5)}
.card.picked{outline:3px solid var(--c-accent);outline-offset:2px}
/* A newly filed card announces itself once, so a piece of evidence arriving
   reads as an event instead of the panel silently jumping. */
.card.fresh{animation:cardIn .5s ease-out}
@keyframes cardIn{
  0%  {opacity:0;transform:translateY(-7px);box-shadow:0 0 0 3px var(--c-accent)}
  60% {opacity:1;box-shadow:0 0 0 3px var(--c-accent)}
  100%{opacity:1;transform:none;box-shadow:var(--shadow-paper)}
}
@media (prefers-reduced-motion:reduce){ .card.fresh{animation:none} }
.card.inbay{opacity:.32;cursor:default}
.card.inbay:hover{transform:none;box-shadow:var(--shadow-paper)}
.card{position:relative;padding-right:46px}
.card-kind{font-size:.58rem;letter-spacing:.15em;color:var(--c-ink-soft)}
.card-name{font-size:.82rem;line-height:1.3;margin-top:3px}
/* Labelled, not a glyph. A magnifier symbol was ambiguous and it also sat on
   top of the wrapped card title. Same lesson as the take-down control. */
.card-look{
  position:absolute;top:5px;right:5px;padding:2px 5px 1px;border-radius:2px;
  font-size:.52rem;letter-spacing:.12em;line-height:1.4;
  color:var(--c-ink-soft);border:1px solid var(--c-paper-edge);background:#0000000d;
}
.card-look:hover{background:var(--c-accent);color:var(--c-paper);border-color:var(--c-accent)}

/* ── Examine ── */
.exam{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#0b0906e8;padding:24px}
.exam-inner{
  width:min(720px,94vw);max-height:92vh;overflow:auto;background:var(--c-paper);color:var(--c-ink);
  border:1px solid var(--c-paper-edge);box-shadow:0 20px 60px rgba(0,0,0,.7);border-radius:2px;
}
.exam-head{display:flex;align-items:flex-start;gap:14px;padding:15px 17px 0}
.exam-head .h{flex:1}
.exam-kind{font-size:.6rem;letter-spacing:.16em;color:var(--c-ink-soft)}
.exam-name{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-top:2px}
.exam-photo{display:block;width:calc(100% - 34px);margin:13px 17px 0;border:1px solid var(--c-paper-edge)}
.exam-nophoto{
  margin:13px 17px 0;padding:26px 14px;text-align:center;font-size:.76rem;
  color:var(--c-ink-soft);border:1px dashed var(--c-paper-edge);background:#e3d7ba;
}
.exam-detail{padding:14px 17px;font-size:.92rem;line-height:1.55}
.exam-foot{padding:0 17px 15px;display:flex;gap:10px;align-items:center}
.exam-close{
  padding:6px 12px;border:1px solid var(--c-ink-soft);border-radius:2px;
  font-size:.68rem;letter-spacing:.14em;color:var(--c-ink);
}
.exam-close:hover{background:var(--c-ink);color:var(--c-paper)}
/* spans the whole grid, otherwise it wraps inside a single 168px column */
.hand-empty{grid-column:1/-1;padding:26px 14px;text-align:center;color:#6b6152;font-size:.82rem}

/* ── The record of what has been put together ── */
.board{background:repeating-linear-gradient(45deg,#8a5a32 0 3px,#835530 3px 6px);
  border-top:1px solid #000;padding:14px;flex:1 1 auto;min-height:0;overflow:auto;}
.board-empty{color:#f0dcbe99;font-size:.8rem;text-align:center;padding:20px 0}
.pin{
  background:var(--c-paper);color:var(--c-ink);border:1px solid var(--c-paper-edge);
  padding:9px 12px;padding-right:34px;margin-bottom:9px;box-shadow:var(--shadow-paper);
  border-radius:2px;position:relative;
}
.pin.milestone{border-left:5px solid var(--c-stamp)}
.pin-pair{font-size:.76rem;line-height:1.4}
.pin-yarn{color:var(--c-accent);letter-spacing:.08em;padding:0 5px}
.pin-find{
  margin-top:7px;padding-top:7px;border-top:1px dashed var(--c-paper-edge);
  font-family:var(--font-display);font-size:.95rem;
}
.pin-tag{
  position:absolute;top:-8px;right:9px;background:var(--c-stamp);color:var(--c-paper);
  font-size:.55rem;letter-spacing:.16em;padding:3px 7px;border-radius:2px;transform:rotate(2deg);
}
/* Take-down, on plain pins only. A milestone is permanent by design; a pair the
   player was merely curious about should not become furniture they cannot move.
   VISIBLE AT REST, on purpose: this was hover-only and SD could not find it.
   A control nobody can see is a control that does not exist. */
.pin-off{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:22px;height:22px;border-radius:2px;
  display:grid;place-items:center;font-size:.95rem;line-height:1;
  color:var(--c-ink-soft);border:1px solid var(--c-paper-edge);background:#0000000d;
  transition:background .12s,color .12s,border-color .12s;
}
.pin-off:hover{background:var(--c-accent);color:var(--c-paper);border-color:var(--c-accent)}
.pin-off:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}

/* ── Report desk ── */
.claim{margin-bottom:16px;background:#2b251d;border:1px solid #453b2d;border-radius:3px;overflow:hidden}
.claim-head{padding:9px 12px;border-bottom:1px solid #453b2d;background:#1e1913}
.claim-label{font-size:.66rem;letter-spacing:.18em;color:#a2967f}
.claim-lead{font-size:.82rem;color:#c3b79f;margin-top:2px}
.claim-opts{padding:9px 12px;display:flex;flex-direction:column;gap:6px}
.opt{
  text-align:left;padding:8px 11px;background:#241f19;border:1px solid #3a3227;
  border-radius:2px;font-size:.82rem;color:#c3b79f;
}
.opt:hover{border-color:#6b5c45;color:var(--c-paper)}
.opt.on{background:var(--c-paper);color:var(--c-ink);border-color:var(--c-paper-edge)}
.claim-ev{padding:0 12px 11px}
.claim-ev-head{font-size:.62rem;letter-spacing:.16em;color:#8d8271;margin-bottom:6px}
.att{display:flex;flex-wrap:wrap;gap:6px}
.att-chip{
  font-size:.7rem;padding:4px 8px;border-radius:2px;border:1px solid #453b2d;
  background:#241f19;color:#a2967f;
}
.att-chip:hover{border-color:var(--c-accent);color:var(--c-paper)}
.att-chip.on{background:var(--c-stamp);border-color:var(--c-stamp);color:var(--c-paper)}
.att-none{font-size:.72rem;color:#6b6152}
.att-more{
  margin-top:7px;font-size:.7rem;letter-spacing:.08em;color:#8d8271;
  border-bottom:1px dotted #4d4437;padding:0 0 1px;
}
.att-more:hover{color:var(--c-accent);border-bottom-color:var(--c-accent)}
.att + .att{margin-top:7px}
.report-file{margin-top:4px}
.jenkins{
  margin-top:16px;padding:13px 15px;background:#2e2a1d;border-left:4px solid var(--c-accent);
  border-radius:3px;
}
.jenkins.win{border-left-color:#7fa05a;background:#262c1d}
.jenkins-who{font-size:.62rem;letter-spacing:.18em;color:var(--c-accent);margin-bottom:6px}
.jenkins.win .jenkins-who{color:#9ec272}
.jenkins-line{font-size:.9rem;color:#e2d3b4;font-family:var(--font-display)}


/* The case is a FIXED 900x660 block now, so this is unconditional rather than a
   media query. Keying it off the viewport was wrong the moment the stage stopped
   being the viewport: on a big monitor the roomy styles applied inside a 900px
   box and the case bar wrapped onto two lines. */
.stage .bar{gap:12px;padding:7px 14px}
.stage .bar-title{font-size:1rem}
.stage .stamps{gap:6px}
.stage .stamps-label{display:none}
.stage .stamp{min-width:60px;height:27px;font-size:.5rem;letter-spacing:.08em;padding:0 6px}
.stage .wrap{gap:9px;padding:9px}
.stage .col{gap:9px}
.stage .panel-head{padding:6px 11px;font-size:.62rem;letter-spacing:.16em}
.stage .tab{padding:7px 9px;font-size:.6rem;letter-spacing:.04em}
.stage .view{padding:11px}
.stage .scene-intro{font-size:.8rem;margin-bottom:10px}
.stage .slot-wrap{padding:11px}
.stage .slot-q{font-size:1rem}
.stage .slot-hint{margin:0 0 8px;font-size:.68rem}
.stage .bay{min-height:64px;padding:8px}
.stage .hand{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:7px;padding:9px}
.stage .card{padding:7px 9px;padding-right:42px}
.stage .card-name{font-size:.76rem}
.stage .board{padding:9px}
.stage .pin{padding:7px 10px;padding-right:32px;margin-bottom:7px}
.stage .pin-pair{font-size:.72rem}
.stage .pin-find{font-size:.86rem}
.stage .sneaky{margin:0 11px 11px;padding:9px 11px}
.stage .sneaky-line{font-size:.8rem}
.stage .q{padding:8px 11px;font-size:.8rem}
.stage .btn{padding:6px 11px;font-size:.66rem}



/* ── Journal ── */
.jrn{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 14px}
.jrn h4{
  margin:0 0 7px;font-family:var(--font-body);font-size:.6rem;letter-spacing:.18em;
  color:#a2967f;font-weight:400;border-bottom:1px solid #3a3227;padding-bottom:5px;
}
.jrn section{margin-bottom:16px}
.jrn section:last-child{margin-bottom:0}
.jrn-empty{color:#6b6152;font-size:.78rem;padding:4px 0}
.jrn-t{display:flex;gap:10px;padding:5px 0;font-size:.78rem;line-height:1.45}
.jrn-t .at{flex:0 0 46px;color:var(--c-accent);letter-spacing:.04em}
.jrn-t .tx{flex:1;color:#ded0b4}
.jrn-who{margin-bottom:9px}
.jrn-who .nm{font-size:.62rem;letter-spacing:.15em;color:#8d8271;margin-bottom:3px}
.jrn-q{
  border-left:2px solid #453b2d;padding:3px 0 3px 9px;margin-bottom:5px;
  font-size:.78rem;line-height:1.45;color:#c3b79f;
}
.jrn-li{font-size:.78rem;color:#c3b79f;padding:3px 0;display:flex;gap:8px}
.jrn-li .dot{color:#6b6152}
.jrn-li.wait .dot{color:#c9a227}
.jrn-notes{
  width:100%;min-height:74px;resize:vertical;background:#f4e6a8;color:var(--c-ink);
  border:1px solid #dcc97f;border-radius:2px;padding:9px 10px;
  font-family:var(--font-body);font-size:.78rem;line-height:1.4;outline:none;
}

/* ── Debrief ── */
.debrief{max-width:900px;margin:0 auto 16px;display:none}
body.case-closed .debrief{display:block}
.db-head{
  background:linear-gradient(#2b241c,#221d17);border:1px solid #3a3227;border-radius:4px;
  padding:22px 24px;margin-bottom:14px;text-align:center;
}
.db-stamp{
  display:inline-block;padding:6px 16px 5px;background:var(--c-stamp);color:var(--c-paper);
  font-size:.66rem;letter-spacing:.22em;border-radius:2px;transform:rotate(-2deg);margin-bottom:11px;
}
.db-head h2{font-family:var(--font-display);font-size:1.7rem;margin:0 0 6px}
.db-head p{margin:0;color:#a2967f;font-size:.9rem}
.db-stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.db-stat{background:#1a1611;border:1px solid #3a3227;border-radius:3px;padding:9px 14px;min-width:104px}
.db-stat b{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--c-paper)}
.db-stat span{font-size:.58rem;letter-spacing:.14em;color:#8d8271}
.db-guest{
  margin:13px 0 0;font-size:.82rem;color:var(--c-accent);
}
.db-share{
  margin-top:15px;background:#1a1611;border:1px dashed #4d4437;border-radius:3px;
  padding:11px 13px;font-size:.8rem;color:#c3b79f;display:flex;gap:11px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.db-sec{background:#221d17;border:1px solid #3a3227;border-radius:4px;margin-bottom:14px;overflow:hidden}
.db-sec > h3{
  margin:0;padding:11px 16px;background:#2b251d;border-bottom:1px solid #3a3227;
  font-family:var(--font-body);font-size:.66rem;letter-spacing:.2em;color:#a2967f;font-weight:400;
}
.db-body{padding:15px 17px}
.db-row{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid #2e281f}
.db-row:last-child{border-bottom:none}
.db-when{flex:0 0 132px;font-size:.72rem;letter-spacing:.06em;color:var(--c-accent);padding-top:2px}
.db-what{flex:1;font-size:.88rem;line-height:1.55;color:#ded0b4}
.db-lead{padding:11px 0;border-bottom:1px solid #2e281f}
.db-lead:last-child{border-bottom:none}
.db-lead h4{margin:0 0 4px;font-family:var(--font-display);font-size:1rem;color:var(--c-paper)}
.db-lead p{margin:0;font-size:.86rem;line-height:1.55;color:#c3b79f}
.db-missed{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.db-miss{background:var(--c-paper);color:var(--c-ink);border:1px solid var(--c-paper-edge);
  border-radius:2px;padding:9px 11px}
.db-miss .k{font-size:.56rem;letter-spacing:.14em;color:var(--c-ink-soft)}
.db-miss .n{font-size:.8rem;line-height:1.3;margin-top:2px}
.db-none{color:#8d8271;font-size:.84rem}
.db-filing{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #2e281f;font-size:.82rem}
.db-filing:last-child{border-bottom:none}
.db-filing .no{flex:0 0 26px;color:#6b6152}
.db-filing .said{flex:1;color:#c3b79f}
.db-filing .said i{color:#8d8271;font-style:normal;display:block;font-size:.74rem;margin-bottom:3px}
.db-filing.won .said{color:#9ec272}

/* ── Sneaky nudge ── */
.sneaky{
  flex:0 0 auto;
  margin:0 16px 16px;padding:12px 14px;background:#2e2a1d;border:1px solid var(--c-accent);
  border-radius:3px;display:flex;gap:11px;align-items:flex-start;
}
.sneaky-who{font-size:.62rem;letter-spacing:.18em;color:var(--c-accent);white-space:nowrap;padding-top:2px}
.sneaky-line{font-size:.86rem;color:#e2d3b4}

/* ── Dev panel ── */
.dev{position:fixed;left:14px;bottom:14px;z-index:80}
.dev-toggle{
  width:38px;height:38px;border-radius:50%;background:#2b251d;border:1px solid #4d4437;
  display:grid;place-items:center;font-size:1rem;box-shadow:0 3px 9px rgba(0,0,0,.5);
}
.dev-toggle:hover{border-color:var(--c-accent)}
.dev-body{
  position:absolute;left:0;bottom:46px;width:230px;background:#221d17;border:1px solid #4d4437;
  border-radius:4px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.6);
}
.dev-body h4{margin:0 0 9px;font-size:.66rem;letter-spacing:.18em;color:#8d8271;font-weight:400}
.dev-body button{
  display:block;width:100%;text-align:left;padding:7px 9px;margin-bottom:6px;
  background:#2b251d;border:1px solid #453b2d;border-radius:2px;font-size:.74rem;
}
.dev-body button:hover{border-color:var(--c-accent)}
[hidden]{display:none !important}

/* ── Splash + briefing ───────────────────────────────────────────────
   The case opens on a title card, and the briefing stays reachable from the
   chrome bar for the whole case. The shipped cases do the same: nobody should
   have to remember the setup, and the Briefing button in the chrome bar has
   been pointing at nothing until now. */
body.splash-active .stage > *:not(#splash),
body.splash-active div.ds-page-slot { visibility: hidden; }

/* Stays in the DOM after it is dismissed: the Briefing button in the chrome bar
   reopens THIS text, so there is exactly one copy of the setup and it can never
   drift from what the player was told at the start. */
#splash{display:none}
body.splash-active #splash{
  position:absolute;inset:0;z-index:60;display:grid;place-items:center;
  background:
    linear-gradient(rgba(12,10,8,.86), rgba(12,10,8,.94)),
    repeating-linear-gradient(38deg,#2a241c 0 3px,#241f18 3px 6px);
  padding:22px;text-align:center;
}
.sp-inner{max-width:560px}
.sp-kicker{font-size:.6rem;letter-spacing:.28em;color:#8d8271;margin-bottom:9px}
.sp-title{font-family:var(--font-display);font-size:2.5rem;font-weight:700;margin:0 0 4px;letter-spacing:.02em}
.sp-sub{font-size:.72rem;letter-spacing:.2em;color:var(--c-accent);margin-bottom:16px}
.sp-brief{
  background:var(--c-paper);color:var(--c-ink);border:1px solid var(--c-paper-edge);
  box-shadow:var(--shadow-paper);border-radius:2px;padding:15px 17px;text-align:left;
  font-size:.88rem;line-height:1.6;
}
.sp-brief p{margin:0 0 9px}
.sp-brief p:last-child{margin:0}
.sp-brief .from{font-size:.62rem;letter-spacing:.16em;color:var(--c-ink-soft);margin-bottom:8px}
.sp-meta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:.66rem;letter-spacing:.14em;color:#8d8271}
.sp-go{margin-top:16px}
.sp-go .btn{padding:10px 22px;font-size:.76rem}

/* The same briefing, re-opened mid-case from the chrome bar. */
#briefing{position:fixed;inset:0;z-index:210;display:grid;place-items:center;background:#0b0906e8;padding:24px}
.bf-inner{width:min(620px,94vw);max-height:90vh;overflow:auto}
.bf-close{margin-top:12px;text-align:center}

/* ══ Detective preferences ══════════════════════════════════════════════════
   Every control here is drawn by us. Nothing is a browser default: a native
   range input on a case file looks like somebody left a form on the desk. */
.set{position:fixed;inset:0;z-index:215;display:grid;place-items:center;background:#0b0906e8;padding:24px}
.set[hidden]{display:none}
.set-inner{width:min(460px,94vw);max-height:90vh;overflow:auto;padding:17px 19px 15px}
.set-head{
  font-family:var(--font-body);font-size:.66rem;letter-spacing:.2em;
  color:var(--c-ink-soft);border-bottom:1px solid var(--c-paper-edge);padding-bottom:9px;
}
.set-sub{margin:11px 0 15px;font-size:.8rem;color:var(--c-ink-soft);line-height:1.45}
.set-row{margin-bottom:15px}
.set-row-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px}
.set-label{font-size:.82rem;color:var(--c-ink);margin-bottom:7px;display:flex;align-items:baseline;gap:8px}
.set-row-toggle .set-label{margin-bottom:0}
.set-val{
  font-size:.66rem;letter-spacing:.08em;color:var(--c-ink-soft);
  background:#00000010;border:1px solid var(--c-paper-edge);border-radius:2px;padding:1px 6px;
}

/* Segmented picker (text size). */
.set-seg{display:flex;gap:0;border:1px solid var(--c-ink);border-radius:2px;overflow:hidden;width:fit-content}
.set-seg .seg{
  appearance:none;border:none;border-right:1px solid var(--c-ink);background:transparent;
  font-family:var(--font-body);font-size:.74rem;letter-spacing:.06em;color:var(--c-ink);
  padding:6px 14px;cursor:pointer;
}
.set-seg .seg:last-child{border-right:none}
.set-seg .seg:hover{background:#0000000f}
.set-seg .seg.on{background:var(--c-ink);color:var(--c-paper)}

/* Toggle. */
.set-toggle{
  appearance:none;border:1px solid var(--c-ink);background:#00000012;border-radius:11px;
  width:46px;height:22px;padding:0 2px;cursor:pointer;display:flex;align-items:center;
  transition:background .13s;
}
.set-toggle span{
  display:block;width:16px;height:16px;border-radius:50%;background:var(--c-ink-soft);
  transition:transform .13s,background .13s;
}
.set-toggle.on{background:var(--c-stamp);border-color:var(--c-stamp)}
.set-toggle.on span{transform:translateX(24px);background:var(--c-paper)}

/* Slider. Track and thumb both hand-drawn, both engines. */
.set-slider{
  appearance:none;-webkit-appearance:none;width:100%;height:20px;background:transparent;
  cursor:pointer;display:block;margin:0;
}
.set-slider::-webkit-slider-runnable-track{
  height:4px;background:#00000022;border:1px solid var(--c-paper-edge);border-radius:2px;
}
.set-slider::-moz-range-track{
  height:4px;background:#00000022;border:1px solid var(--c-paper-edge);border-radius:2px;
}
.set-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--c-stamp);border:1px solid var(--c-ink);margin-top:-6px;
}
.set-slider::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--c-stamp);border:1px solid var(--c-ink);
}
.set-slider:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.set-vols{transition:opacity .15s}
.set-vols.off{opacity:.38}
.set-foot{border-top:1px solid var(--c-paper-edge);padding-top:13px;text-align:right}

#soundBtn.on{color:var(--c-paper)}

/* High contrast. Lifts the paper and drops the ink rather than inverting
   anything, so the case still looks like a case file. */
body.high-contrast{
  --c-paper:#fbf3e2; --c-paper-edge:#8f7f5c; --c-ink:#0a0908; --c-ink-soft:#2e2a23;
  --c-accent:#d4402f;
}
body.high-contrast .scene-intro,
body.high-contrast .db-body,
body.high-contrast .jenkins-line{color:var(--c-paper)}