:root{
  --bg0:#0f0e0a; --bg1:#1b1913; --bg2:#262318;
  --wood:#241c12; --wood2:#2f2516;
  --panel:#211e16; --panel2:#2b2719; --line:#473e29;
  --ink:#ece3cb; --dim:#b3a786; --faint:#7d735a;
  --manila:#e9dcb4; --manila2:#dccb98; --manilaLine:#b8a674; --manilaInk:#2a2414;
  --stampR:#b62b1f; --stampR2:#e0503f; --stampG:#2f7d46; --stampG2:#4fb06a;
  --gold:#d9b25a; --gold2:#f3d486;
  --warn:#e0a83c;
  --cell:46px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Segoe UI','Apple SD Gothic Neo',system-ui,sans-serif;
  background:
    repeating-linear-gradient(90deg,#0000 0 38px,#ffffff05 38px 39px),
    radial-gradient(130% 80% at 50% -10%, #2a2415 0%, var(--bg1) 50%, var(--bg0) 100%);
  color:var(--ink); overflow:hidden; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
button{font-family:inherit; cursor:pointer; color:inherit}
.muted{color:var(--dim)} .small{font-size:12px} .bignum{font-variant-numeric:tabular-nums}

/* ---- top bar ---- */
#topbar{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:linear-gradient(#241c11ee,#181408cc); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40; backdrop-filter:blur(6px);
}
#topbar .back{color:var(--dim); text-decoration:none; font-size:13px; padding:6px 9px; border:1px solid var(--line); border-radius:9px; white-space:nowrap}
#topbar .back:hover{color:var(--ink); border-color:var(--gold)}
#topbar .brand{font-weight:800; letter-spacing:.4px; display:flex; align-items:center; gap:6px; font-size:15px}
#topbar .brand .ic{font-size:18px}
#topbar .spacer{flex:1}
.hud{font-size:13px; padding:5px 9px; border:1px solid var(--line); border-radius:9px; background:#15110a; white-space:nowrap; font-variant-numeric:tabular-nums}
#topbar button{background:#2b2516; border:1px solid var(--line); border-radius:9px; width:34px; height:32px; font-size:15px}
#topbar button:hover{border-color:var(--gold)}

/* ---- layout ---- */
#app{height:calc(100% - 49px); display:flex; flex-direction:column; overflow:hidden; max-width:560px; margin:0 auto}

/* ---- booth ---- */
#booth{padding:10px 12px 4px; flex:0 0 auto}
#boothFrame{
  position:relative; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,#15120b,#0d0b07);
  box-shadow:inset 0 1px 0 #ffffff10, 0 6px 18px #0008; overflow:hidden;
}
#window{
  position:relative; height:138px; display:flex; align-items:flex-end; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 120%, #3a3320 0%, #211c10 60%, #14110a 100%);
  border-bottom:1px solid var(--line);
}
#window::after{ /* glass glare */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, #ffffff0e 0 18%, #0000 18% 46%, #ffffff07 46% 52%, #0000 52%);
}
#portrait{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:120px; height:130px}
#portrait svg{width:100%; height:100%; display:block}
#emptyBooth{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px}
#emptyBooth .bigq{margin:0; color:var(--faint); letter-spacing:3px; font-size:13px; text-transform:uppercase}
#nameplate{
  display:flex; align-items:center; justify-content:center; gap:8px; padding:7px 10px;
  background:#0c0a06; font-size:13.5px; font-weight:700; letter-spacing:.3px;
  border-top:1px solid #00000060;
}
#nameplate .muted{font-weight:500; font-size:12px}
.speech{
  margin:0; padding:9px 12px; font-size:13.5px; line-height:1.4; color:var(--manila);
  background:linear-gradient(#1c1810,#16130c); border-top:1px dashed var(--line);
  font-style:italic;
}
#queueDots{display:flex; gap:5px; justify-content:center; padding:8px 0 2px; min-height:14px}
.qd{width:9px; height:9px; border-radius:50%; background:#3a3320; border:1px solid #5a4f30}
.qd.done{background:var(--stampG); border-color:var(--stampG2)}
.qd.cur{background:var(--gold2); border-color:var(--gold2); box-shadow:0 0 8px var(--gold2)}

/* ---- desk / docs ---- */
#desk{flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 12px 10px; min-height:0}
#deskHead{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 2px 8px; position:sticky; top:0; z-index:5;
  background:linear-gradient(#1b1913,#1b1913ee 70%, #1b191300)}
.dh-title{font-weight:700; font-size:13px; color:var(--dim); letter-spacing:.3px}
.dh-hint{font-size:11px; color:var(--faint)} .dh-hint b{color:var(--gold2)}
#docs{display:flex; flex-direction:column; gap:10px}

.doc{
  background:
    linear-gradient(180deg,var(--manila) 0%, var(--manila2) 100%);
  color:var(--manilaInk); border:1px solid var(--manilaLine); border-radius:9px;
  padding:9px 11px 11px; box-shadow:0 4px 12px #0006; position:relative;
  animation:slideIn .28s ease both;
}
@keyframes slideIn{from{transform:translateY(14px) rotate(-.4deg); opacity:0} to{transform:none; opacity:1}}
.doc::before{ /* paper texture lines */
  content:""; position:absolute; inset:0; border-radius:9px; pointer-events:none;
  background:repeating-linear-gradient(0deg,#0000 0 22px,#00000008 22px 23px);
}
.doc .dtype{
  display:flex; align-items:center; gap:6px; font-weight:800; font-size:12px; letter-spacing:.5px;
  text-transform:uppercase; color:#5a4a22; border-bottom:2px solid #00000022; padding-bottom:5px; margin-bottom:7px;
}
.doc .dtype .seal{margin-left:auto; font-size:15px; opacity:.8}
.doc .fields{display:grid; grid-template-columns:1fr 1fr; gap:5px 8px}
.doc .fields.one{grid-template-columns:1fr}
.field{
  background:#ffffff55; border:1px solid #0000001a; border-radius:6px; padding:4px 7px;
  cursor:pointer; transition:background .12s, box-shadow .12s, transform .05s; position:relative; z-index:1;
}
.field:active{transform:scale(.98)}
.field .k{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:#8a7a4e; font-weight:700}
.field .v{display:block; font-size:13.5px; font-weight:700; color:var(--manilaInk); font-variant-numeric:tabular-nums; word-break:break-all}
.field.sel{background:#fff3c4; box-shadow:0 0 0 2px var(--gold)}
.field.match{box-shadow:0 0 0 2px var(--stampG2); background:#d6f0d8}
.field.mismatch{box-shadow:0 0 0 2px var(--stampR2); background:#f7d6d0}
.field .photo{font-size:30px; line-height:1; display:block; text-align:center}

/* full-width photo field */
.field.photofield{grid-column:1 / -1; display:flex; align-items:center; gap:10px}
.field.photofield .pf-svg{width:48px;height:52px;flex:0 0 auto}
.field.photofield .pf-svg svg{width:100%;height:100%}

#compareBanner{
  margin-top:10px; padding:9px 12px; border-radius:9px; font-weight:700; font-size:13.5px; text-align:center;
  animation:pop .2s ease;
}
#compareBanner.ok{background:#173d23; color:var(--stampG2); border:1px solid var(--stampG)}
#compareBanner.bad{background:#3d1713; color:var(--stampR2); border:1px solid var(--stampR)}
@keyframes pop{from{transform:scale(.94); opacity:0} to{transform:none; opacity:1}}

/* ---- action bar ---- */
#actionbar{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 12px max(10px,env(safe-area-inset-bottom));
  background:linear-gradient(#171309,#0e0b06); border-top:1px solid var(--line);
}
.abtn{border:1px solid var(--line); border-radius:11px; padding:12px 14px; font-size:15px; font-weight:800; background:#2a2415; color:var(--ink)}
.abtn:disabled{opacity:.4; cursor:default}
.abtn.ghost{background:#1d1810; font-weight:700; font-size:13.5px; padding:12px}
.stamps{margin-left:auto; display:flex; gap:8px}
.abtn.approve{background:linear-gradient(#2f7d46,#225e34); border-color:#3c9a57; min-width:96px}
.abtn.deny{background:linear-gradient(#b62b1f,#8d2017); border-color:#d8473a; min-width:96px}
.abtn.detain{background:linear-gradient(#9a7a1e,#7a5f12); border-color:#caa23a}
.abtn.approve:not(:disabled):active,.abtn.deny:not(:disabled):active,.abtn.detain:active{transform:translateY(1px)}

/* stamp slam effect over portrait */
.stampfx{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-14deg) scale(2.4);
  font-family:'Courier New',monospace; font-weight:900; font-size:40px; letter-spacing:3px;
  padding:6px 16px; border:5px solid; border-radius:8px; opacity:0; z-index:6; pointer-events:none;
  text-transform:uppercase;
}
.stampfx.show{animation:slam .5s cubic-bezier(.2,1.4,.4,1) forwards}
.stampfx.app{color:var(--stampG2); border-color:var(--stampG2)}
.stampfx.den{color:var(--stampR2); border-color:var(--stampR2)}
.stampfx.det{color:var(--gold2); border-color:var(--gold2)}
@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.4)}
  40%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(10px);
  z-index:200; max-width:90%; padding:11px 16px; border-radius:12px; font-size:13.5px; font-weight:600;
  text-align:center; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; box-shadow:0 8px 24px #0009;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.good{background:#173d23; color:#cdeccf; border:1px solid var(--stampG)}
.toast.bad{background:#3d1713; color:#f3cfc8; border:1px solid var(--stampR)}
.toast.warn{background:#3a2f10; color:#f0dca5; border:1px solid var(--warn)}

/* ---- overlays ---- */
.overlay{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(6,5,3,.72); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
.obox{width:100%; max-width:400px; max-height:88vh; overflow:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:20px 18px; box-shadow:0 24px 70px #000b}
.obox h1{margin:.1em 0; font-size:30px; letter-spacing:1px}
.obox h2{margin:0 0 6px; font-size:20px}
.bigbtn{display:block; width:100%; margin-top:12px; padding:14px; border:1px solid var(--gold); border-radius:12px;
  background:linear-gradient(#3a2f15,#2a2010); color:var(--gold2); font-size:16px; font-weight:800; letter-spacing:.5px}
.bigbtn:active{transform:translateY(1px)}
.bigbtn.ghost{border-color:var(--line); background:#1d1810; color:var(--ink); font-weight:700}
.linkbtn{display:block; width:100%; margin-top:10px; background:none; border:0; color:var(--dim); font-size:13px; text-decoration:underline}

/* start */
.startbox{text-align:center}
.crest{font-size:54px; line-height:1}
.subt{margin:2px 0 12px; color:var(--gold2); font-weight:700; letter-spacing:1px; font-size:13px}
.blurb{color:var(--dim); font-size:13.5px; line-height:1.55; margin:0 0 6px}

/* memo / day intro */
.memo .memohead{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:8px}
.memo h2{font-family:'Courier New',monospace; font-size:26px; letter-spacing:2px; color:var(--gold2)}
.newrules{margin:12px 0}
.ruleline{display:flex; gap:8px; padding:9px 11px; border-radius:9px; margin-bottom:7px; font-size:13.5px; line-height:1.4;
  background:#2c2414; border:1px solid var(--line)}
.ruleline.fresh{border-color:var(--warn); background:#332810}
.ruleline .rtag{flex:0 0 auto; font-weight:800; color:var(--warn); font-size:11px; align-self:flex-start; margin-top:2px}
.activerules{margin-top:6px}
.activerules .ahdr{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); margin:4px 0 6px}
.activerules .achip{display:inline-block; font-size:11.5px; padding:3px 8px; border-radius:20px; background:#241f12; border:1px solid var(--line); margin:0 5px 5px 0; color:var(--dim)}

/* rulebook */
.rblist{margin:8px 0 0; padding-left:20px}
.rblist li{padding:6px 0; font-size:13.5px; line-height:1.45; border-bottom:1px dashed var(--line)}
.rblist li b{color:var(--gold2)}
.wantedbox{margin-top:12px; padding:10px 12px; border:1px solid var(--stampR); border-radius:10px; background:#2c1410}
.wantedbox h3{margin:0 0 6px; font-size:13px; color:var(--stampR2); letter-spacing:.5px}
.wantedbox .wname{display:inline-block; font-size:12.5px; padding:3px 9px; margin:0 5px 5px 0; border-radius:6px; background:#3d1713; border:1px solid var(--stampR); font-weight:700}

/* settlement */
.setbox h2{font-family:'Courier New',monospace; letter-spacing:1px}
.ledger{margin:10px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.lrow{display:flex; justify-content:space-between; padding:8px 12px; font-size:13.5px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.lrow:last-child{border-bottom:0}
.lrow.pos span:last-child{color:var(--stampG2)} .lrow.neg span:last-child{color:var(--stampR2)}
.lrow.tot{background:#15110a; font-weight:800}
.family{display:flex; flex-direction:column; gap:7px; margin-bottom:6px}
.fam{display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#221d11}
.fam .fface{font-size:22px; flex:0 0 auto}
.fam .fmeta{flex:1; min-width:0}
.fam .fname{font-size:13.5px; font-weight:700}
.fam .fstat{font-size:11.5px}
.fam .fstat.ok{color:var(--stampG2)} .fam .fstat.sick{color:var(--warn)} .fam .fstat.dead{color:var(--faint)}
.fam .fbtns{display:flex; gap:5px; flex:0 0 auto}
.fbtn{border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-size:12px; font-weight:700; background:#2b2416; color:var(--ink); white-space:nowrap}
.fbtn.on{background:#2f7d46; border-color:#3c9a57; color:#eafff0}
.fbtn:disabled{opacity:.35}
.fam.dead{opacity:.5}
.setfoot{display:flex; align-items:baseline; justify-content:space-between; margin:8px 2px 2px}
.setfoot .bignum{font-size:26px; font-weight:800; color:var(--gold2)}
.heatrow{display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#221d11; margin-bottom:7px; font-size:13px}

/* game over */
.gobox{text-align:center; position:relative}
.gostamp{position:absolute; top:8px; right:10px; transform:rotate(12deg); font-family:'Courier New',monospace; font-weight:900;
  color:var(--stampR2); border:4px solid var(--stampR2); border-radius:8px; padding:3px 10px; font-size:18px; letter-spacing:3px; opacity:.85}
.goscore{margin:14px 0; font-size:13px; color:var(--dim)}
.goscore b{display:block; font-size:40px; color:var(--gold2); font-weight:800}

/* help */
.helpbox ul{margin:8px 0 0; padding-left:20px}
.helpbox li{padding:5px 0; font-size:13.5px; line-height:1.5}
.helpbox li b{color:var(--gold2)}

@media (max-width:380px){
  #window{height:120px} #portrait{width:104px;height:114px}
  .abtn.approve,.abtn.deny{min-width:80px; padding:12px 10px}
}
@media (min-height:760px){ #window{height:160px} #portrait{width:140px;height:152px} }