/* Layout: a picture-like stage (phone / gate / houses / thief) on the left, a short panel on the right; stacks on phones */
:root{
  --bg:#0c141c; --stage:#08111a; --panel:#0f1a24; --raise:#16242f; --raise2:#1c2e3a;
  --line:rgba(170,210,235,.14); --line2:rgba(170,210,235,.3);
  --ink:#e8f0f4; --muted:#a3b4bf; --dim:#6f8494;
  --priv:#ffc95a; --pub:#5fe0c8; --chal:#b9a3ff; --bad:#ff6b7a; --good:#7fdc8a; --pw:#ff9d57; --sig:#8fc1ff;
  --f-display:'Dela Gothic One','Hiragino Sans','Yu Gothic',sans-serif;
  --f-body:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic','Meiryo',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 var(--f-body)}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--chal);outline-offset:2px}
#app{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:100%}
#stage{min-width:0;display:flex;flex-direction:column;gap:14px;padding:16px 20px;background:var(--stage);overflow-y:auto}
#toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cap{margin:0;color:var(--muted);font-size:12px}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px}
.seg button{border:0;background:none;border-radius:6px;padding:7px 14px;cursor:pointer;color:var(--muted);line-height:1.3}
.seg.small button{padding:5px 10px;font-size:12px}
.seg button[aria-pressed="true"]{background:var(--raise2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
#segMode button[data-v="password"][aria-pressed="true"]{color:var(--pw)}
#segMode button[data-v="passkey"][aria-pressed="true"]{color:var(--priv)}
.btn{border:1px solid var(--line2);background:var(--raise);border-radius:8px;padding:7px 14px;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.ghost{background:none;color:var(--muted)}
.btn.go{background:var(--priv);color:#1c1406;border-color:var(--priv);font-weight:700}
.btn.pw{background:var(--pw);color:#1f0d02;border-color:var(--pw);font-weight:700}
.btn.small{padding:4px 10px;font-size:12.5px}

/* ---- the world ---- */
#world{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto;gap:34px 56px;align-items:start;padding:6px 2px}
#wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#wires line{stroke:var(--line2);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
#wires line.tap{stroke:var(--bad);opacity:.25}
#wires line.tap.on{opacity:.9}
#aPhone{grid-column:1;grid-row:1/span 2}
#aGate{grid-column:2;grid-row:1}
#sites{grid-column:3;grid-row:1/span 2}
#aThief{grid-column:2;grid-row:2}
.actor{position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;min-width:0}
.actor>header{font-weight:700;font-size:14px}
.actor>header small{margin-left:6px;color:var(--dim);font-weight:400;font-size:11px}

/* phone */
#aPhone{border:2px solid #2a3a47;border-radius:26px;background:#060b10;padding:16px 12px}
.screen{width:100%;min-height:92px;background:#101b25;border-radius:12px;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;font-size:13px}
.screen .big{font-size:30px;line-height:1.1}
.screen .ok{color:var(--good)} .screen .err{color:var(--bad)}
.touch{width:58px;height:58px;border-radius:50%;border:2px solid #34495a;background:#0b141c;font-size:26px;cursor:pointer;opacity:.45;padding:0}
.touch.ready{opacity:1;border-color:var(--priv)}
.vault{width:100%;border:1.5px dashed rgba(255,201,90,.4);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.vault .ttl{font-size:11.5px;color:var(--priv)}
.key{display:flex;align-items:center;gap:6px;justify-content:center;font-size:13px;background:rgba(255,201,90,.07);border-radius:8px;padding:4px 6px;border:0;cursor:pointer}
.key:hover{background:rgba(255,201,90,.16)}
.empty{color:var(--dim);font-size:12px}

/* gate (browser) */
#gate{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
.dest{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%;box-sizing:border-box}
.dest .lbl{font-size:11px;color:var(--dim)}
.dest .nm{font-size:15px;font-weight:700}
.tag{font-family:var(--f-mono);font-size:12px;border-radius:999px;padding:1px 9px;background:#0a131b;border:1px solid var(--line2)}
.tag.bad{color:var(--bad);border-color:var(--bad)}
.stop{font-size:30px;line-height:1}
.gatebtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

/* houses (sites) */
.sites{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.house{position:relative;border:0;background:none;padding:0;cursor:pointer;text-align:center;display:block;width:100%}
.house .roof{height:26px;margin:0 14px;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--hc);opacity:.85}
.house .wall{background:var(--panel);border:1.5px solid var(--line);border-top:0;border-radius:0 0 10px 10px;margin:0 22px;padding:6px 8px 8px;display:flex;flex-direction:column;gap:4px;align-items:center}
.house.on .wall{border-color:var(--hc)}
.house:not(.on){opacity:.55}
.house .nm{font-weight:700;font-size:13.5px}
.house .oni{position:absolute;right:10px;top:16px;font-size:20px}
.ledger{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);min-height:22px}
.badges{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.badges span{font-size:11.5px;border-radius:6px;padding:1px 5px;background:var(--raise);border:1px solid var(--line);white-space:nowrap}
.badges span.ok{border-color:var(--good);color:var(--good)}
.badges span.ng{border-color:var(--bad);color:var(--bad);background:rgba(255,107,122,.12)}
.verdict{font-weight:700;font-size:13px}
.verdict.ok{color:var(--good)} .verdict.ng{color:var(--bad)}

/* thief */
.thief{border-color:rgba(255,107,122,.2)}
.thief>header{color:var(--bad)}
.thief.on{border-color:var(--bad)}
#loot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:12.5px}
#loot .it{display:flex;align-items:center;gap:4px;background:var(--raise);border-radius:8px;padding:2px 7px}
#loot .guess{font-family:var(--f-mono);font-size:11.5px;color:var(--dim)}
#loot .guess.x{text-decoration:line-through}
#loot .guess.hit{color:var(--bad);font-weight:500}

/* color pattern of a byte string */
.pat{display:inline-block;vertical-align:middle;border-radius:3px;flex:none}

/* packets */
#packets{position:absolute;inset:0;pointer-events:none;z-index:4}
.pkt{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#0a121a;border:1.5px solid var(--c,var(--line2));font-size:13px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pkt.paused{outline:2px dashed var(--bad);outline-offset:3px}

.want{box-shadow:0 0 0 3px var(--chal)!important;animation:want 1.8s ease-in-out infinite}
@keyframes want{50%{box-shadow:0 0 0 7px rgba(185,163,255,.3)!important}}
@media (prefers-reduced-motion:reduce){.want{animation:none}}

/* narration */
#narr{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--chal);border-radius:10px;padding:12px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-height:48px}
#narrText{margin:0;flex:1 1 280px;font-size:15px}
#narrText b{color:var(--chal)}
#narrText em{font-style:normal;color:var(--bad);font-weight:700}
#narrText strong{color:var(--good)}
#narrBtns{display:flex;gap:8px;flex-wrap:wrap}

/* details: log + inspector */
#more{border-top:1px solid var(--line);padding-top:8px}
#more summary{cursor:pointer;color:var(--muted);font-size:12.5px}
#log{list-style:none;margin:8px 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
#log button{border:1px solid var(--line);border-left:3px solid var(--c,var(--line2));background:var(--panel);border-radius:5px;padding:2px 8px;font-size:11.5px;cursor:pointer;color:var(--muted)}
#log button.sel{color:var(--ink);border-color:var(--line2)}
#insp{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
#insp>.cap,#insp>.ihead{grid-column:1/-1}
.ihead b{font-size:13px}
.fld{background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:7px 9px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.fld .fl{display:flex;justify-content:space-between;gap:6px;align-items:center}
.fld .fl small{color:var(--dim);font-family:var(--f-mono)}
.hex{font-family:var(--f-mono);font-size:11px;line-height:1.55;word-break:break-all;color:var(--muted)}

/* ---- panel ---- */
#panel{min-width:0;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:18px 16px 28px;display:flex;flex-direction:column;gap:20px}
.brand h1{font:400 24px/1.3 var(--f-display);margin:0 0 6px;letter-spacing:.02em}
.brand p{margin:0;color:var(--muted);font-size:13.5px}
h2{font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.12em;margin:0}
section{display:flex;flex-direction:column;gap:8px}
.score{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:13px}
.score th{font-size:11.5px;color:var(--dim);font-weight:500;text-align:center;padding:0 2px}
.score th:first-child{text-align:left}
.score td.t{padding:4px 2px;white-space:nowrap}
.score td.t span{display:inline-block;width:1.6em}
.score td.c{width:64px;padding:0 2px}
.score td.c button{display:block;width:100%;border:1px solid var(--line);background:var(--raise);border-radius:7px;padding:5px 0;cursor:pointer;font-size:12px;color:var(--muted)}
.score td.c button:hover{border-color:var(--line2);color:var(--ink)}
.score td.c button.cur{border-color:var(--chal);color:var(--ink)}
.score td.c button.safe{color:var(--good);border-color:rgba(127,220,138,.5)}
.score td.c button.hit{color:var(--bad);border-color:rgba(255,107,122,.5)}
.score td.c .na{display:block;text-align:center;color:var(--dim)}
.idea{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;background:var(--raise);border-radius:10px;padding:8px 10px}
.idea .ic{font-size:22px;text-align:center}
.idea p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.idea b{color:var(--ink)}
.explain details{border-top:1px solid var(--line);padding:8px 0 2px}
.explain summary{cursor:pointer;font-weight:700;font-size:13px}
.explain p{font-size:12.5px;color:var(--muted);margin:6px 0}
.explain p b{color:var(--ink)}
.src{margin:6px 0;padding-left:18px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.src a{color:var(--sig)}

/* ---- narrow windows ---- */
@media (max-width:1050px){
  #world{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 34px}
  #aPhone{grid-column:1;grid-row:1}
  #aGate{grid-column:2;grid-row:1}
  #aThief{grid-column:1;grid-row:2}
  #sites{grid-column:2;grid-row:2}
}
@media (max-width:820px){
  html,body{height:auto}
  #app{display:block;height:auto}
  #stage{overflow:visible;padding:12px 16px}
  #panel{border-left:0;border-top:1px solid var(--line)}
  #narr{position:sticky;bottom:8px;z-index:6;box-shadow:0 6px 24px rgba(0,0,0,.6)}
}
@media (max-width:560px){
  #world{gap:20px 14px}
  #sites{gap:8px}
  .house .wall{margin:0 8px}
  .house .roof{margin:0 2px;height:18px}
  .screen{min-height:70px}
  #narrText{font-size:14px}
}

/* ---- where to press next ---- */
#callout{position:fixed;left:0;top:0;z-index:30;max-width:240px;background:var(--chal);color:#140c2a;font-weight:700;font-size:14px;line-height:1.45;padding:7px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.55);pointer-events:none;animation:bob 1.4s ease-in-out infinite}
#callout .txt b,#callout .txt em,#callout .txt strong{color:inherit;font-style:normal}
#callout .arrow{position:absolute;left:var(--ax,50%);top:-7px;width:14px;height:14px;margin-left:-7px;background:var(--chal);transform:rotate(45deg)}
#callout.up .arrow{top:auto;bottom:-7px}
@keyframes bob{50%{margin-top:4px}}
#world.focus>.actor:not(.lit),#world.focus>.sites{opacity:.4;transition:opacity .3s}
#askBox{position:fixed;left:calc(50% - 170px);bottom:22px;transform:translateX(-50%);z-index:9;width:min(380px,92%);background:var(--raise2);border:2px solid var(--chal);border-radius:14px;padding:16px 18px;box-shadow:0 10px 40px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:12px;text-align:center}
#askBox p{margin:0;font-size:15.5px}
#askBox p b{color:var(--chal)} #askBox p em{color:var(--bad);font-style:normal;font-weight:700} #askBox p strong{color:var(--good)}
#askBox .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#askBox .btn{font-size:15px;padding:9px 18px}
@media (prefers-reduced-motion:reduce){#callout{animation:none}}
@media (max-width:820px){#askBox{left:50%;bottom:14px}}
#narr.quiet{visibility:hidden}
.score td.t,.score td.t span{line-height:20px}
.score{line-height:20px}.score td.c button{line-height:18px}