/* ===================== THE SIDE DOOR · styles ===================== */
:root{
  --bg:#0a0a0a; --ink:#f4f1ea; --muted:#9a948a;
  --gold:#c09e5a; --cyan:#00d4ff; --coral:#ff6b6b; --green:#2fd08a;
  --panel:#11131a; --panel-2:#0d0f15; --line:rgba(244,241,234,.10);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
#app{
  display:grid; grid-template-columns:1fr minmax(340px,410px);
  height:100vh; width:100vw;
}

/* ===================== STAGE ===================== */
#stage{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #161a26 0%, #0c0d13 45%, #070709 100%),
    var(--bg);
}
#fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}

#titlebar{position:absolute; top:26px; left:34px; z-index:5; pointer-events:none; max-width:60%}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.32em; color:var(--gold); margin-bottom:8px}
#titlebar h1{font-family:var(--disp); font-weight:700; font-size:clamp(28px,3.2vw,50px); margin:0; letter-spacing:.06em;
  background:linear-gradient(180deg,#fff,#bdb6a8); -webkit-background-clip:text; background-clip:text; color:transparent}
#titlebar .tag{margin:8px 0 0; color:var(--muted); font-size:14px; max-width:460px}
#titlebar .tag em{color:var(--ink); font-style:normal; border-bottom:1px solid var(--gold)}

/* ===================== SCENE ===================== */
#scene{
  position:absolute; inset:0; z-index:3;
  display:grid; grid-template-columns:minmax(150px,210px) 1fr minmax(120px,180px);
  align-items:center; gap:clamp(12px,3vw,48px);
  padding:130px 56px 88px;
}

/* --- the two doors (left column) --- */
.doors{display:flex; flex-direction:column; gap:26px; align-items:stretch}
.door{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:10px; border-radius:14px; transition:all .3s}
.door-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted)}
.door-sub{font-size:11px; color:var(--muted); font-style:italic}
.door-frame{position:relative; width:118px; height:120px; display:flex; align-items:flex-end; justify-content:center}

/* door slab */
.door-slab{position:relative; width:84px; height:108px; border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,#222838,#161b27); border:2px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.door-slab::after{content:""; position:absolute; right:9px; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px rgba(192,158,90,.6)}
.door-slab.service{background:repeating-linear-gradient(180deg,#1a1f2b 0 8px,#161b27 8px 16px); border-style:dashed; border-color:rgba(255,255,255,.07)}
.door-slab.service::after{background:#5a6172; box-shadow:none}

/* the guard standing in the front door */
.guard-svg{width:42px; display:block; margin-bottom:2px}
.guard-svg .g-head{fill:#3a4150}
.guard-svg .g-body{fill:#2a313f; stroke:rgba(255,255,255,.08); stroke-width:1}

/* camera */
.cam{position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:34px; height:18px;
  border-radius:5px 5px 8px 8px; background:#10141d; border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center}
.cam-eye{width:8px; height:8px; border-radius:50%; background:var(--coral);
  box-shadow:0 0 8px rgba(255,107,107,.7); animation:camBlink 2.4s ease-in-out infinite}
@keyframes camBlink{0%,100%{opacity:1}50%{opacity:.45}}
.cam.audit{opacity:.25; filter:grayscale(1)}
.cam.audit[data-on="true"]{opacity:1; filter:none}
.cam.audit[data-on="true"] .cam-eye{background:var(--cyan); box-shadow:0 0 10px rgba(0,212,255,.8)}

/* shield that pops up at the front door on refuse */
.shield{position:absolute; inset:-6px; border-radius:12px; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(47,208,138,.22), transparent 70%);
  border:2px solid rgba(47,208,138,.0); transition:all .35s cubic-bezier(.2,1.4,.4,1)}
.shield.up{opacity:1; border-color:rgba(47,208,138,.8);
  box-shadow:0 0 30px rgba(47,208,138,.4), inset 0 0 24px rgba(47,208,138,.25)}
.shield.up::after{content:"⛨"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:30px; color:var(--green); text-shadow:0 0 16px rgba(47,208,138,.7)}
.shield.bounce{animation:shieldBounce .5s cubic-bezier(.3,1.5,.4,1)}
@keyframes shieldBounce{0%{transform:scale(.6)}55%{transform:scale(1.12)}100%{transform:scale(1)}}

/* door active-state glow */
.door.active.front{background:rgba(47,208,138,.05)}
.door.active.side{background:rgba(255,107,107,.05)}
.door.dim{opacity:.32; filter:saturate(.5)}

/* --- the AI assistant (center column) --- */
.ai{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%}
.ai-figure{position:relative; width:clamp(140px,13vw,190px);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.6))}
.ai-svg{width:100%; display:block; overflow:visible}
.ai-svg .ai-eye{fill:var(--cyan); filter:drop-shadow(0 0 6px rgba(0,212,255,.55)); transition:fill .3s}
.ai-svg .ai-mouth{stroke:#5a6172; stroke-width:5; stroke-linecap:round; transition:d .3s}
.ai-svg .ai-plate{stroke:rgba(255,255,255,.06); stroke-width:1.5; transition:filter .3s}
.ai-name{margin-top:9px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--muted)}
.ai-state{margin-top:3px; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--green); opacity:.8}

/* AI emotional states */
.ai.refusing .ai-eye{fill:var(--green)}
.ai.refusing .ai-mouth{d:path("M74 164 L126 164")}
.ai.refusing .ai-plate{filter:drop-shadow(0 0 14px rgba(47,208,138,.5))}
.ai.laundering .ai-eye{fill:var(--coral)}
.ai.laundering .ai-mouth{d:path("M74 158 Q100 152 126 158")}
.ai.shrug{animation:shrug .6s ease-in-out}
@keyframes shrug{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px) rotate(-1.5deg)}70%{transform:translateY(2px) rotate(1deg)}}

/* the AI's private reading of the packet */
.reading{
  position:absolute; bottom:74%; max-width:260px; padding:11px 14px; border-radius:14px;
  background:rgba(0,212,255,.06); border:1px dashed rgba(0,212,255,.5);
  color:#bdeaff; font-family:var(--mono); font-size:12px; line-height:1.45;
  opacity:0; transform:translateY(8px) scale(.96); z-index:6;
  transition:opacity .35s ease, transform .4s cubic-bezier(.2,1.3,.4,1);
}
.reading::before{content:"PRIVATE READING"; display:block; font-size:9px; letter-spacing:.2em; color:var(--cyan); margin-bottom:4px; opacity:.85}
.reading[data-empty="true"]{display:none}
.reading.show{opacity:1; transform:translateY(0) scale(1)}
.reading.laundered{background:rgba(255,107,107,.07); border-color:rgba(255,107,107,.5); color:#ffc3c3}
.reading.laundered::before{content:"PRIVATE READING"; color:var(--coral)}

/* the report the AI emits downward */
.report{
  position:absolute; top:76%; max-width:280px; padding:11px 14px; border-radius:13px;
  font-size:13px; line-height:1.42; opacity:0; transform:translateY(-8px) scale(.96); z-index:6;
  transition:opacity .35s ease, transform .4s cubic-bezier(.2,1.3,.4,1);
}
.report[data-empty="true"]{display:none}
.report.show{opacity:1; transform:translateY(0) scale(1)}
.report::before{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; margin-bottom:4px}
.report.refuse{background:linear-gradient(180deg,#10261d,#0d1c16); border:1px solid rgba(47,208,138,.55); color:#a8ecca}
.report.refuse::before{content:"ASSISTANT · REFUSES"; color:var(--green)}
.report.launder{background:linear-gradient(180deg,#2a1416,#1c0e10); border:1px solid rgba(255,107,107,.55); color:#ffc3c3}
.report.launder::before{content:"REPORT TO CLIENT · the laundered lie"; color:var(--coral)}

/* --- the client (right column) --- */
.client{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%}
.client-svg{width:clamp(96px,9vw,128px); display:block; filter:drop-shadow(0 16px 24px rgba(0,0,0,.5))}
.client-svg .c-head,.client-svg .c-body{fill:#2a313f; stroke:rgba(255,255,255,.08); stroke-width:1; transition:fill .3s}
.client-svg .c-eye{fill:#9aa4b6; transition:fill .3s}
.client-svg .c-mouth{stroke:#5a6172; stroke-width:3.5; stroke-linecap:round; transition:d .3s}
.client-name{margin-top:8px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--muted)}
.client.deceived .c-head,.client.deceived .c-body{fill:#33241f; stroke:rgba(192,158,90,.5)}
.client.deceived .c-eye{fill:var(--gold)}
.client.deceived .c-mouth{d:path("M58 56 Q70 64 82 56")}
.client.deceived .client-svg{animation:nod .6s ease-in-out; filter:drop-shadow(0 0 16px rgba(192,158,90,.4)) drop-shadow(0 16px 24px rgba(0,0,0,.5))}
@keyframes nod{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.client-belief{margin-top:14px; max-width:170px; padding:9px 12px; border-radius:12px;
  font-size:12px; line-height:1.4; text-align:center;
  opacity:0; transform:translateY(8px) scale(.96); transition:all .4s cubic-bezier(.2,1.3,.4,1)}
.client-belief[data-empty="true"]{display:none}
.client-belief.show{opacity:1; transform:translateY(0) scale(1)}
.client-belief.believed{background:rgba(192,158,90,.1); border:1px solid rgba(192,158,90,.5); color:var(--gold)}
.client-belief.safe{background:rgba(47,208,138,.08); border:1px solid rgba(47,208,138,.4); color:var(--green)}

/* --- the travelling packet --- */
.packet{position:absolute; z-index:7; display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:10px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  background:linear-gradient(180deg,#23283a,#171b27); border:1px solid rgba(255,255,255,.14);
  color:var(--ink); box-shadow:0 8px 22px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .85s cubic-bezier(.45,.05,.3,1);
}
.packet.show{opacity:1}
.packet .packet-ico{color:var(--gold); font-size:14px}
.packet.lie{border-color:rgba(255,107,107,.5); box-shadow:0 0 18px rgba(255,107,107,.3)}
.packet.lie .packet-ico{color:var(--coral)}
.packet.bounced{animation:packetBounce .5s cubic-bezier(.4,1.3,.5,1)}
@keyframes packetBounce{0%{transform:translateX(0)}40%{transform:translateX(40px) rotate(8deg)}100%{transform:translateX(-30px) rotate(-4deg)}}

/* ===================== OUTCOME BANNER ===================== */
.outcome{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%) translateY(10px);
  z-index:8; font-family:var(--disp); font-weight:700; letter-spacing:.12em; font-size:15px;
  padding:9px 22px; border-radius:999px; opacity:0; transition:all .35s; white-space:nowrap;
  border:1px solid var(--line); background:rgba(13,15,21,.85); backdrop-filter:blur(6px);
}
.outcome.show{opacity:1; transform:translateX(-50%) translateY(0)}
.outcome.refuse{color:var(--green); border-color:rgba(47,208,138,.5); box-shadow:0 0 26px rgba(47,208,138,.22)}
.outcome.launder{color:var(--coral); border-color:rgba(255,107,107,.5); box-shadow:0 0 26px rgba(255,107,107,.25)}
.outcome.watch{color:var(--cyan); border-color:rgba(0,212,255,.5); box-shadow:0 0 26px rgba(0,212,255,.22)}

/* ===================== CONTROL DECK ===================== */
#deck{
  background:linear-gradient(180deg,#0c0d12,#08090d); border-left:1px solid var(--line);
  padding:20px 20px 16px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; z-index:10;
}
.panel{background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:15px 16px}
.panel-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:13px; gap:8px}
.panel-title{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink)}
.panel-hint{font-size:11px; color:var(--muted); text-align:right}

/* mode segmented control — the star knob */
.mode-seg{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mode-btn{display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
  padding:11px 13px; border-radius:11px; cursor:pointer; transition:all .2s;
  background:#15171f; border:1px solid var(--line); color:var(--muted); font-family:inherit}
.mode-btn b{font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--ink)}
.mode-btn i{font-style:normal; font-size:11px; color:var(--muted)}
.mode-btn:hover{background:#1c1f29; border-color:rgba(255,255,255,.18)}
.mode-btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.mode-btn[data-mode="front"].active{border-color:rgba(47,208,138,.6); background:rgba(47,208,138,.08)}
.mode-btn[data-mode="front"].active b{color:var(--green)}
.mode-btn[data-mode="side"].active{border-color:rgba(255,107,107,.6); background:rgba(255,107,107,.08)}
.mode-btn[data-mode="side"].active b{color:var(--coral)}

.mode-readout{margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
.mr-name{font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:.02em}
.mr-blurb{color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:5px}
.mr-leak{margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--muted)}
.mr-leak b{color:var(--gold)}

/* levers */
.levers-panel{display:flex; flex-direction:column; gap:15px}
.toggle{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.toggle input{position:absolute; opacity:0; width:0; height:0}
.knob{width:40px; height:22px; border-radius:999px; background:#272a33; position:relative; transition:background .2s; flex:none}
.knob::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#7a7e88; transition:all .2s}
.toggle input:checked + .knob{background:rgba(0,212,255,.35)}
.toggle input:checked + .knob::after{left:20px; background:var(--cyan)}
.toggle input:focus-visible + .knob{outline:2px solid var(--cyan); outline-offset:2px}
.t-text{font-size:13px; color:var(--ink)}
.t-text i{font-style:normal; color:var(--muted); font-size:11.5px; margin-left:4px}

/* instruction-strength slider */
.slider-row{display:flex; flex-direction:column; gap:9px}
.sr-head{display:flex; justify-content:space-between; align-items:baseline}
.sr-title{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted)}
.sr-hint{font-family:var(--mono); font-size:11px; color:var(--gold)}
input[type=range]#dose{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,#3a3f4d,#3a3f4d);
}
#dose::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--gold)); border:2px solid #0a0a0a; cursor:grab; box-shadow:0 0 0 4px rgba(192,158,90,.18)}
#dose::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--gold); border:2px solid #0a0a0a; cursor:grab}
#dose:focus-visible{box-shadow:0 0 0 3px rgba(0,212,255,.4)}
.dose-readout{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.dr-leak{font-family:var(--mono); font-size:11px; color:var(--muted)} .dr-leak b{color:var(--gold)}
.dr-note{font-size:11px; color:var(--muted); text-align:right; font-style:italic; line-height:1.35}

/* transport */
.transport{display:flex; gap:8px}
.btn{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 8px; border-radius:10px;
  background:#15171f; border:1px solid var(--line); color:var(--ink); font-family:var(--body); font-weight:600; font-size:13px; cursor:pointer; transition:all .18s}
.btn:hover{background:#1c1f29; border-color:rgba(255,255,255,.2)}
.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,#c5a866,#a98841); border-color:transparent; color:#161208}
.btn.primary:hover{filter:brightness(1.08)}
.btn .ico-pause{display:none}
.btn.playing .ico-play{display:none} .btn.playing .ico-pause{display:inline}
.round-row{display:flex; align-items:center; gap:12px; margin-top:12px}
.round-label{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted)}
.round-count{font-family:var(--mono); font-size:18px; color:var(--ink)}
.round-count i{font-style:normal; font-size:13px; color:var(--muted)}
.pleas{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted); text-align:right}
.pleas b{color:var(--green)}

/* verdict */
.verdict-panel{background:linear-gradient(180deg,#15110c,#0d0b07); border-color:rgba(192,158,90,.25)}
.verdict-head{font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--gold); margin-bottom:8px}
.verdict-line{font-family:var(--disp); font-weight:500; font-size:15.5px; line-height:1.4}
.verdict-foot{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5}
.verdict-panel.sting{border-color:rgba(255,107,107,.5); background:linear-gradient(180deg,#1a0f10,#0d0708)}
.verdict-panel.sting .verdict-head{color:var(--coral)}
.verdict-panel.win{border-color:rgba(47,208,138,.45); background:linear-gradient(180deg,#0d1813,#070d0a)}
.verdict-panel.win .verdict-head{color:var(--green)}
.verdict-panel.watch{border-color:rgba(0,212,255,.45); background:linear-gradient(180deg,#091418,#06090d)}
.verdict-panel.watch .verdict-head{color:var(--cyan)}

#credits{margin-top:auto; font-size:11px; color:var(--muted); line-height:1.5; padding-top:4px}
#credits a{color:var(--gold); text-decoration:none} #credits a:hover{text-decoration:underline}

/* screen flash on launder */
#stage.flash::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 55%, rgba(255,107,107,.18), transparent 60%); z-index:4; animation:flash .55s ease-out; pointer-events:none}
@keyframes flash{from{opacity:1}to{opacity:0}}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1500px){
  #scene{padding:120px 36px 84px; gap:clamp(10px,2.4vw,32px)}
  .reading,.report{max-width:230px; font-size:11.5px}
}
@media (max-width:1180px){
  #app{grid-template-columns:1fr 330px}
}
@media (max-width:900px){
  #app{grid-template-columns:1fr; grid-template-rows:1fr auto; height:auto; min-height:100vh; overflow:auto}
  body{overflow:auto}
  #stage{min-height:74vh}
  #deck{border-left:none; border-top:1px solid var(--line); max-height:none}
}
@media (max-width:560px){
  #titlebar{position:static; padding:18px 18px 0; max-width:100%}
  #scene{position:static; grid-template-columns:1fr; grid-template-rows:auto auto auto;
    padding:18px; gap:22px; height:auto}
  .doors{flex-direction:row; justify-content:center; gap:18px}
  .ai{height:auto; min-height:280px}
  .client{height:auto}
  .reading{position:static; max-width:none; margin:0 auto 8px; bottom:auto}
  .report{position:static; max-width:none; margin:8px auto 0; top:auto}
  .client-belief{position:static}
  .outcome{position:static; transform:none; margin:18px auto 0; display:inline-block}
  .outcome.show{transform:none}
  #stage{min-height:auto; overflow:visible}
  .packet{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.05s !important}
  .cam-eye{animation:none}
}