:root{
  --paper:#FAF5E9;
  --cream:#F5EEDC;
  --manila:#E8D9B5;
  --manila-dark:#D8CCAA;
  --ink:#2C2C2A;
  --ink-soft:#5F5E5A;
  --ink-faint:#888780;
  --red:#C0392B;
  --gold:#BA7517;
  --teal:#0F6E56;
  --pink:#F2C7CF;
  --postit:#F6E27A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--manila);
  color:var(--ink);
  font-family:'Playfair Display',Georgia,serif;
  min-height:100vh;
}
button{font-family:inherit;cursor:pointer}
.screen{max-width:680px;margin:0 auto;padding:20px 14px 60px}

/* ---------- title ---------- */
.poster{
  background:var(--cream);
  border:3px double var(--ink);
  border-radius:2px;
  padding:26px 16px 20px;
  text-align:center;
  margin-bottom:18px;
}
.poster-est{font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.28em;color:var(--ink-soft);margin-bottom:8px}
.poster-title{font-family:'Rye',serif;font-size:clamp(26px,6vw,40px);color:#993C1D;font-weight:400;line-height:1.15;margin-bottom:6px}
.poster-tag{font-style:italic;font-size:17px;color:#444441;margin-bottom:12px}
.poster-rule{height:0;border-top:1.5px solid var(--gold);width:130px;margin:0 auto 10px}
.poster-sub{font-family:'Special Elite',monospace;font-size:12px;color:var(--ink-soft)}

.name-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.name-label{font-family:'Special Elite',monospace;font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
#shopName{
  flex:1;min-width:160px;
  font-family:'Special Elite',monospace;font-size:16px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;
  padding:9px 12px;outline:none;
}
#shopName:focus{border-color:var(--gold)}
.dice{
  font-family:'Special Elite',monospace;font-size:12px;
  background:var(--paper);border:1.5px solid var(--ink-soft);border-radius:2px;
  padding:9px 12px;color:var(--ink-soft);
}
.dice:hover{border-color:var(--ink);color:var(--ink)}

.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media (max-width:520px){.mode-row{grid-template-columns:1fr}}
.mode-btn{
  background:var(--cream);border:2px solid var(--ink);border-radius:2px;
  padding:16px 12px;text-align:center;transition:transform .08s;
}
.mode-btn:hover{transform:translateY(-2px)}
.mode-btn:active{transform:scale(.98)}
.mode-big{display:block;font-family:'Rye',serif;font-size:17px;color:var(--teal);margin-bottom:4px}
.mode-btn.chaos .mode-big{color:var(--red)}
.mode-small{display:block;font-family:'Special Elite',monospace;font-size:11px;color:var(--ink-soft)}

.rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.postcard{background:var(--cream);border:2px solid var(--ink);border-radius:2px;padding:6px;cursor:pointer;transition:transform .08s}
.postcard:hover{transform:translateY(-2px) rotate(-.4deg)}
.postcard.locked{border-style:dashed;border-color:var(--ink-faint)}
.postcard-inner{border:.5px solid var(--ink);border-radius:1px;padding:14px 10px 12px;text-align:center;height:100%}
.postcard.locked .postcard-inner{border-style:dashed;border-color:var(--ink-faint)}
.pc-greet{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.18em;color:var(--ink-soft);margin-bottom:4px}
.pc-state{font-family:'Rye',serif;font-size:19px;line-height:1.15;margin-bottom:8px}
.pc-state.gold{color:var(--gold)} .pc-state.teal{color:var(--teal)} .pc-state.gray{color:var(--ink-faint)}
.pc-trade{font-style:italic;font-size:14px;margin-bottom:8px}
.pc-flavor{font-family:'Special Elite',monospace;font-size:10.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:10px}
.pc-art{width:100%;height:120px;object-fit:cover;object-position:center 62%;border:1px solid var(--ink);border-radius:1px;margin-bottom:10px;display:block;background:var(--cream)}
#inspector{transition:opacity 1.4s ease}
.pc-stamp{display:inline-block;transform:rotate(-5deg);border:2px solid;font-size:10px;font-weight:600;letter-spacing:.14em;padding:2px 7px;border-radius:2px;font-family:'Playfair Display',serif}
.pc-stamp.red{color:var(--red);border-color:var(--red)}
.pc-stamp.gray{color:var(--ink-faint);border-color:var(--ink-faint);transform:rotate(4deg)}
.vote-toast{font-family:'Special Elite',monospace;font-size:12px;color:var(--teal);margin-top:10px;text-align:center}

.title-foot{margin-top:26px;text-align:center}
.title-foot p{font-family:'Special Elite',monospace;font-size:10.5px;color:var(--ink-soft);line-height:1.7;max-width:480px;margin:0 auto 6px}
.byline{letter-spacing:.06em}

/* ---------- game ---------- */
.scene-wrap{border:2px solid var(--ink);border-radius:2px;overflow:hidden;background:var(--cream);margin-bottom:10px}
#scene{display:block;width:100%;height:auto;transition:filter 1s}

.hud{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--cream);border:2px solid var(--ink);border-radius:2px;
  padding:8px 12px;margin-bottom:4px;
  font-family:'Special Elite',monospace;font-size:12px;
}
.hud-month{letter-spacing:.06em}
.hud-cash{font-size:15px;color:var(--teal)}
.hud-cash.low{color:var(--gold)} .hud-cash.danger{color:var(--red)}
.hud-meter{color:var(--ink-soft);letter-spacing:.04em}
.hud-mode{margin-left:auto;border:1.5px solid var(--ink-soft);border-radius:2px;padding:1px 7px;font-size:10px;letter-spacing:.12em;color:var(--ink-soft)}
.hud-mode.chaos{border-color:var(--red);color:var(--red)}
.hud-sub{font-family:'Special Elite',monospace;font-size:12px;color:var(--red);padding:2px 4px 0;margin-bottom:6px}

#desk{position:relative;padding-top:12px;min-height:300px}

/* envelope */
.envelope{
  background:#E2CD9C;
  border:1.5px solid #A88F58;border-radius:3px;
  max-width:430px;margin:26px auto;padding:22px 22px 18px;
  cursor:pointer;position:relative;
  animation:slideIn .55s cubic-bezier(.2,.9,.3,1.05);
}
.envelope:hover{transform:rotate(-.5deg)}
.env-from{font-family:'Special Elite',monospace;font-size:12px;color:var(--ink);line-height:1.6}
.env-to{font-family:'Special Elite',monospace;font-size:13px;color:var(--ink);margin-top:14px;padding-left:90px;line-height:1.6}
.env-cert{position:absolute;top:14px;right:14px;border:2px solid var(--teal);color:var(--teal);font-family:'Playfair Display',serif;font-weight:600;font-size:10px;letter-spacing:.14em;padding:2px 7px;transform:rotate(4deg);border-radius:2px}
.env-cert.red{border-color:var(--red);color:var(--red)}
.env-stampcorner{position:absolute;top:12px;right:64px;width:30px;height:36px;border:1.5px dashed var(--ink-faint);border-radius:2px;opacity:.7}
.env-open{display:block;text-align:center;font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.18em;color:var(--ink-soft);margin-top:16px}
@keyframes slideIn{
  0%{opacity:0;transform:translateY(-46px) rotate(-4deg)}
  70%{opacity:1;transform:translateY(4px) rotate(.8deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}

/* documents */
.doc{
  max-width:520px;margin:10px auto;position:relative;
  animation:unfold .35s ease-out;
  border-radius:2px;padding:24px 26px 20px;
}
@keyframes unfold{0%{opacity:0;transform:scaleY(.6) translateY(-20px)}100%{opacity:1;transform:scaleY(1) translateY(0)}}
.doc.letter{background:var(--paper);border:.5px solid var(--manila-dark);transform:rotate(-.4deg)}
.doc.scam{background:#FFFDF6;border:1px solid var(--manila-dark);transform:rotate(.5deg)}
.doc.postit{background:var(--postit);max-width:380px;transform:rotate(1.6deg);border:none;padding:20px 22px}
.doc.statement{background:#FCFBF5;border:.5px solid var(--manila-dark)}
.doc.invoice{background:var(--paper);border:.5px solid var(--manila-dark);transform:rotate(.3deg)}
.doc.form{background:var(--paper);border:.5px solid var(--manila-dark)}

.doc-agency{text-align:center;font-size:10px;letter-spacing:.22em;color:var(--ink-soft);font-family:'Special Elite',monospace;margin-bottom:2px}
.doc-agency-name{text-align:center;font-family:'Playfair Display',serif;font-size:15px;font-weight:600;margin-bottom:4px}
.doc-rule{border-top:1.5px solid var(--ink);border-bottom:.5px solid var(--ink);height:2px;margin-bottom:14px}
.doc-meta{font-family:'Special Elite',monospace;font-size:11.5px;color:#444441;margin-bottom:3px}
.doc-re{font-family:'Special Elite',monospace;font-size:12.5px;font-weight:600;margin:12px 0;line-height:1.6}
.doc-body{font-family:'Special Elite',monospace;font-size:13px;line-height:1.8;margin-bottom:8px;white-space:pre-line}
.doc.postit .doc-body{font-family:'Caveat',cursive;font-size:21px;line-height:1.35;color:#41310A}
.doc.scam .doc-scamhead{font-family:'Playfair Display',serif;font-weight:700;font-size:15px;color:var(--red);text-align:center;letter-spacing:.04em;margin-bottom:10px}
.doc-stamp{
  position:absolute;top:46px;right:18px;transform:rotate(7deg);
  border:2.5px solid var(--red);color:var(--red);
  font-family:'Playfair Display',serif;font-weight:600;font-size:12px;letter-spacing:.16em;
  padding:3px 9px;border-radius:3px;opacity:.85;background:rgba(250,245,233,.6)
}
.doc-sue{font-family:'Caveat',cursive;font-size:20px;color:var(--red);margin:12px 0 0;transform:rotate(-1.6deg)}
.doc-real{font-size:10.5px;color:var(--ink-faint);font-family:'Special Elite',monospace;margin-top:12px}
.doc-real .redact{background:#444441;color:transparent;border-radius:2px;user-select:none}
.doc-source{font-size:10.5px;color:var(--ink-soft);font-family:'Special Elite',monospace;margin-top:6px;border-top:.5px dashed var(--manila-dark);padding-top:6px;line-height:1.6}

/* statement table */
.stmt-row{display:flex;justify-content:space-between;font-family:'Special Elite',monospace;font-size:12.5px;padding:3px 0;border-bottom:.5px dashed var(--manila-dark)}
.stmt-row.total{border-bottom:none;font-weight:600;margin-top:4px}
.neg{color:var(--red)} .pos{color:var(--teal)}

/* choices */
.choices{max-width:520px;margin:14px auto 0}
.choice{
  display:block;width:100%;text-align:left;
  background:var(--cream);border:1.5px solid var(--ink);border-radius:2px;
  font-family:'Special Elite',monospace;font-size:13px;line-height:1.5;color:var(--ink);
  padding:11px 14px;margin-bottom:8px;transition:transform .06s;
}
.choice:hover{transform:translateX(3px);border-color:var(--gold)}
.choice:active{transform:scale(.99)}
.choice .pre{color:var(--ink-faint)}

/* outcome */
.outcome{max-width:520px;margin:14px auto 0;animation:unfold .3s ease-out}
.outcome-stamp{
  display:inline-block;border:3px solid;border-radius:3px;
  font-family:'Playfair Display',serif;font-weight:700;font-size:16px;letter-spacing:.16em;
  padding:4px 14px;margin-bottom:10px;
  animation:slam .28s cubic-bezier(.3,1.6,.5,1);
}
.outcome-stamp.bad{color:var(--red);border-color:var(--red);transform:rotate(-5deg)}
.outcome-stamp.good{color:var(--teal);border-color:var(--teal);transform:rotate(-3deg)}
.outcome-stamp.neutral{color:var(--gold);border-color:var(--gold);transform:rotate(-4deg)}
@keyframes slam{0%{transform:scale(2.6) rotate(-14deg);opacity:0}60%{transform:scale(.95) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-5deg)}}
.outcome-text{font-family:'Special Elite',monospace;font-size:13px;line-height:1.8;margin-bottom:4px}
.outcome-fx{font-family:'Special Elite',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:10px}
.outcome-sue{font-family:'Caveat',cursive;font-size:21px;color:var(--red);margin:6px 0 12px;transform:rotate(-1.2deg)}
.continue{
  background:var(--ink);color:var(--cream);border:none;border-radius:2px;
  font-family:'Special Elite',monospace;font-size:13px;letter-spacing:.1em;
  padding:11px 22px;
}
.continue:hover{background:#444441}

.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.street-note{
  text-align:center;font-family:'Special Elite',monospace;font-size:12.5px;
  letter-spacing:.08em;color:var(--red);margin:14px auto 2px;max-width:520px;
  animation:unfold .5s ease-out;
}
.month-flip{
  text-align:center;font-family:'Special Elite',monospace;font-size:12px;letter-spacing:.2em;
  color:var(--ink-soft);margin:18px 0 4px;animation:unfold .4s;
}

/* ---------- end / certificate ---------- */
#certWrap{max-width:520px;margin:10px auto}
.cert{
  background:var(--paper);border:3px double var(--ink);border-radius:2px;
  padding:26px 28px 20px;position:relative;
}
.cert-case{text-align:center;font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:4px}
.cert-title{text-align:center;font-family:'Playfair Display',serif;font-size:23px;font-weight:500;margin-bottom:18px}
.cert table{width:100%;border-collapse:collapse;font-size:14px}
.cert td{padding:5px 0;vertical-align:top;line-height:1.5}
.cert td:first-child{color:var(--ink-soft);font-family:'Playfair Display',serif;width:40%}
.cert td:last-child{font-family:'Special Elite',monospace;font-size:13px}
.cert .cause{font-weight:600}
.cert .liab{color:var(--red);font-weight:600}
.cert-stamp{
  position:absolute;right:20px;top:62px;transform:rotate(8deg);
  border:3px solid var(--red);color:var(--red);
  font-family:'Playfair Display',serif;font-weight:700;font-size:14px;letter-spacing:.18em;
  padding:3px 10px;border-radius:3px;
}
.cert-stamp.gold{border-color:var(--gold);color:var(--gold)}
.cert-seal{
  position:absolute;right:24px;bottom:54px;width:62px;height:62px;border-radius:50%;
  border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:'Rye',serif;font-size:9px;color:var(--gold);text-align:center;transform:rotate(-8deg);
}
.cert-sue{font-family:'Caveat',cursive;font-size:22px;color:var(--ink);margin-top:14px;transform:rotate(-1.4deg)}
.cert-foot{border-top:.5px solid var(--manila-dark);margin-top:14px;padding-top:10px;font-family:'Special Elite',monospace;font-size:11.5px;color:var(--ink-soft);line-height:1.7}

.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.end-actions button{
  background:var(--cream);border:2px solid var(--ink);border-radius:2px;
  font-family:'Special Elite',monospace;font-size:12px;letter-spacing:.1em;
  padding:11px 16px;
}
.end-actions button:hover{border-color:var(--gold)}
.record{text-align:center;font-family:'Special Elite',monospace;font-size:11.5px;color:var(--ink-soft)}