/* ============================================================
   RECKONING — Prototype v10 (Browser-Native Build)
   VISUAL FIDELITY RECONSTRUCTION PASS — presentation-only.
   Palette, materials and layout patterns ported from the approved
   concept reference (Reckoning_Prototype.html). No external
   fonts/CDNs — system serif/condensed-sans only.
   ============================================================ */

:root{
  --red:#a8342c;
  --green:#4ade80;
  --bg:#181009;
  --panel:#1f150c;
  --parchment:#e9dcbd;
  --parchment-dark:#d9c89a;
  --ink:#2b2118;
  --sepia:#9c7c4d;
  --wood:#3a2414;
  --wood-dark:#1c1108;
  --gold:#d9a441;
  --brass:#b8862f;
  --neutral:#6B6B6B;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --t-fast: 150ms;
  --t-med: 300ms;
  --t-slow: 400ms;
}

body.reduced-motion, body.reduced-motion *{
  transition-duration: 0ms !important;
  animation-duration: 0ms !important;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--bg);}
body{font-family:var(--sans);letter-spacing:.3px;color:#fff;min-height:100vh;display:flex;justify-content:center;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
::-webkit-scrollbar{display:none;}

#app{
  width:100%;max-width:430px;min-height:100vh;
  background:var(--panel);position:relative;overflow-x:hidden;
  display:flex;flex-direction:column;
}

/* ---------- screen / view switching ---------- */
.screen{display:none;flex-direction:column;flex:1;min-height:100vh;}
.screen.active{display:flex;}

/* ---------- shared tactile button language ----------
   every button on every screen uses this chunky, offset-shadow
   "stamped" press, never a flat pill */
.cta-btn{
  width:100%;padding:16px;background:linear-gradient(180deg,#e0c177,#b5853b);
  border:1px solid #5a3c14;border-radius:4px;color:#241404;font-size:13px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;position:relative;font-family:var(--sans);
  box-shadow:0 6px 0 #432a0c, inset 0 1px rgba(255,255,255,.5);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  min-height:44px;
}
.cta-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #432a0c, inset 0 1px rgba(255,255,255,.5);}
.cta-btn:disabled{opacity:.35;cursor:not-allowed;}
.btn-secondary{
  padding:14px;background:linear-gradient(180deg,#2f1f12,#160d07);border:1px solid #6e5128;
  border-radius:4px;color:#cbb892;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 5px 0 #0c0703;transition:transform var(--t-fast), box-shadow var(--t-fast);min-height:44px;
}
.btn-secondary:active{transform:translateY(4px);box-shadow:0 1px 0 #0c0703;}
.btn-row{display:flex;gap:8px;}
.btn-row > *{flex:1;}

/* ---------- title screen — wax-sealed cover page ---------- */
#screen-title{position:relative;background:radial-gradient(circle at 50% 20%, #2b1a0d 0%, var(--bg) 70%);justify-content:flex-end;padding-bottom:30px;overflow:hidden;}
#screen-title::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(91deg,rgba(0,0,0,.18) 0 2px,transparent 2px 17px);}
.title-seal{position:relative;z-index:1;margin:60px auto 0;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle,#c89238,#5b2d13 65%,#220d05);border:3px double var(--gold);
  box-shadow:0 10px 22px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;}
.title-seal span{font-family:var(--serif);font-weight:900;font-size:42px;color:#2a1304;}
.title-h1{position:relative;z-index:1;font-family:var(--serif);font-weight:900;letter-spacing:8px;text-transform:uppercase;color:#fff;text-align:center;font-size:34px;margin:22px 16px 0;}
.title-eyebrow{position:relative;z-index:1;text-align:center;font-size:9px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-top:10px;font-weight:600;}
.title-tag{position:relative;z-index:1;text-align:center;font-size:11px;letter-spacing:2px;color:#9c8868;text-transform:uppercase;margin-top:14px;padding:0 24px;}
.title-buttons{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin:36px auto 0;padding:0 28px;}
.title-footnote{position:relative;z-index:1;text-align:center;font-size:8px;letter-spacing:2px;color:#3a2e1f;text-transform:uppercase;padding:18px 0 6px;}

/* ---------- quiz — a single petition card ---------- */
#screen-quiz{background:radial-gradient(circle at 50% 0%,#4a2f17 0%,var(--wood-dark) 65%);padding:40px 16px 22px;}
.quiz-progress{display:flex;gap:4px;margin-bottom:18px;}
.quiz-progress .seg{flex:1;height:4px;background:rgba(0,0,0,.4);border-radius:2px;}
.quiz-progress .seg.done{background:var(--gold);}
.quiz-card{background:var(--parchment);color:var(--ink);border-radius:2px;border:1px solid var(--sepia);
  box-shadow:0 16px 30px rgba(0,0,0,.55),6px 6px 0 rgba(0,0,0,.18);padding:20px 18px;flex:1;display:flex;flex-direction:column;position:relative;}
.quiz-card::before{content:'';position:absolute;inset:6px;border:1px solid rgba(43,33,24,.18);pointer-events:none;}
.quiz-counter{font-family:var(--sans);font-size:9px;letter-spacing:2px;color:#6b5836;text-transform:uppercase;margin-bottom:10px;text-align:center;}
.quiz-q{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:18px;text-align:center;}
.quiz-options{display:flex;flex-direction:column;gap:9px;}
.opt-btn{text-align:left;padding:13px 14px;border:1px solid var(--sepia);border-radius:2px;
  background:linear-gradient(180deg,#f3e8c9,#e3d2a3);color:var(--ink);font-size:12px;line-height:1.4;
  box-shadow:0 4px 0 rgba(43,33,24,.25);transition:transform var(--t-fast), box-shadow var(--t-fast);min-height:44px;}
.opt-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,33,24,.25);background:linear-gradient(180deg,#e8c87a,#cda751);}
.opt-letter{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--ink);color:var(--parchment);font-size:9px;font-weight:700;margin-right:8px;font-family:var(--sans);}

/* ---------- shared tab-root header (brass plaque) ---------- */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:42px 16px 8px;
  background:linear-gradient(180deg,#241608,var(--wood-dark));border-bottom:1px solid #4a3216;}
.app-header .nation-name{font-family:var(--serif);font-weight:900;font-size:15px;color:var(--parchment);letter-spacing:.5px;}
.app-header .date-label{font-family:var(--sans);font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:#8a7a5e;margin-top:1px;}
.gear-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;
  background:linear-gradient(180deg,#4a3018,#211107);border:1px solid #7d5b2a;color:#cbb892;box-shadow:0 3px 0 #0d0603,inset 0 1px rgba(255,255,255,.1);}
.gear-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #0d0603,inset 0 1px rgba(255,255,255,.1);}

.stat-row{display:flex;gap:6px;padding:10px 14px 8px;flex-wrap:wrap;background:var(--wood-dark);}
.stat-chip{flex:1;min-width:70px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:7px 4px;text-align:center;}
.stat-chip .lbl{font-family:var(--sans);font-size:7px;letter-spacing:1.2px;text-transform:uppercase;color:#8a7a5e;}
.stat-chip .val{font-family:var(--serif);font-size:15px;font-weight:900;color:var(--parchment);margin-top:2px;}

/* ---------- domain strip (brass gauges, sits above the desk) ---------- */
.desk-domain-strip{padding:6px 14px 8px;background:var(--wood-dark);border-bottom:1px solid rgba(255,255,255,.06);}
.dds-label{font-family:var(--sans);font-size:7px;letter-spacing:2.5px;text-transform:uppercase;color:#7a6a52;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.dds-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08);}
.domain-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.domain-bar-row .dlabel{width:96px;font-family:var(--sans);font-size:10px;color:var(--parchment-dark);letter-spacing:.3px;}
.domain-bar-track{flex:1;height:8px;background:rgba(0,0,0,.45);border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.5);}
.domain-bar-fill{height:100%;transition:width var(--t-slow);}
.domain-bar-fill.high{background:var(--green);}
.domain-bar-fill.mid{background:var(--gold);}
.domain-bar-fill.low{background:var(--red);}

/* =========================================================
   THE RULER'S DESK — physical workspace, home hub.
   #desk-objects holds the four JS-rendered objects, absolutely
   positioned by nth-child onto a literal wood-desk scene
   (newspaper dominant, letter, ledger, medal) rather than a card
   grid. Static clutter (inkwell, quill, coins, ribbon) lives
   outside #desk-objects so it survives every re-render.
========================================================= */
#screen-desk{background:var(--wood-dark);padding-bottom:0;}
.desk-surface{position:relative;flex:1;min-height:480px;overflow:hidden;
  background:radial-gradient(circle at 50% 0%,#5a3a1e 0,#2b1a0d 55%,#100905 100%);}
.desk-wood-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:repeating-linear-gradient(91deg,rgba(0,0,0,.18) 0 2px,transparent 2px 17px);}

#desk-objects{position:absolute;inset:0;z-index:3;}
.desk-card{position:absolute;cursor:pointer;font-family:var(--sans);transition:transform var(--t-fast);}
.desk-card:active{transform:scale(.97);}

/* nth-child(1) — THE NEWSPAPER. Dominant, occupies the majority of the desk. */
.desk-card-paper{
  top:14px;left:5%;width:90%;background:var(--parchment);color:var(--ink);border-radius:2px;
  border:1px solid var(--sepia);box-shadow:0 14px 28px rgba(0,0,0,.55),6px 6px 0 rgba(0,0,0,.18);
  padding:16px 16px 14px;transform:rotate(-1.1deg);text-align:left;z-index:3;
}
.desk-card-paper::before{content:'';position:absolute;inset:6px;border:1px solid rgba(43,33,24,.18);pointer-events:none;}
.dcp-masthead{font-family:var(--serif);font-weight:900;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  text-align:center;border-bottom:3px double var(--ink);padding-bottom:6px;margin-bottom:10px;}
.dcp-headline{font-family:var(--serif);font-weight:900;font-size:18px;line-height:1.18;margin-bottom:6px;text-align:center;text-transform:uppercase;}
.dcp-deck{font-size:10px;color:#4a3c2a;line-height:1.45;font-family:var(--sans);text-align:center;}
.dcp-cta{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:9px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--red);font-weight:700;font-family:var(--sans);}

/* nth-child(2) — wax-sealed letter ("Petitions & Reports") */
.desk-card-letter{
  top:210px;right:6%;width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 6px 10px;border-radius:2px;background:#ead4a3;color:#3a2a14;border:1px solid #5c3b1d;
  transform:rotate(3deg);box-shadow:0 8px 16px rgba(0,0,0,.5);z-index:4;text-align:center;
}
.dcl-seal{font-size:24px;color:var(--red);}
.dcl-label{font-family:var(--serif);font-weight:900;font-size:10px;line-height:1.25;text-transform:uppercase;}

/* nth-child(3) — leather ledger ("Budget") */
.desk-card-ledger{
  bottom:96px;left:6%;width:96px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:13px 6px 11px;border-radius:3px;background:linear-gradient(180deg,#4a3018,#211107);
  border:1px solid #7d5b2a;box-shadow:0 5px 0 #0d0603,inset 0 1px rgba(255,255,255,.12);
  color:#e9d09a;z-index:4;text-align:center;
}
.desk-card-ledger:active{transform:translateY(4px) scale(1);box-shadow:0 1px 0 #0d0603,inset 0 1px rgba(255,255,255,.12);}
.dcg-icon{font-size:24px;color:#e2bd6e;display:block;}
.dcg-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;line-height:1.3;display:block;margin-top:3px;}

/* nth-child(4) — wax medal/seal ("Cabinet Meeting") */
.desk-card-medal{
  bottom:18px;right:8%;width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;background:radial-gradient(circle,#c89238,#5b2d13 65%,#220d05);
  border:3px double var(--gold);box-shadow:0 8px 14px rgba(0,0,0,.55);z-index:5;color:#2a1304;
}
.dcm-icon{font-size:18px;}
.dcm-label{font-size:7px;letter-spacing:1px;text-transform:uppercase;font-weight:700;}

.desk-badge{position:absolute;top:-7px;right:-7px;background:var(--red);color:#fff;border-radius:50%;
  min-width:19px;height:19px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:1px solid #1a0d06;}

/* static desk clutter — atmosphere only, not interactive */
.desk-clutter{position:absolute;pointer-events:none;opacity:.9;z-index:1;}
.desk-inkwell{left:4%;top:6px;width:30px;height:34px;border-radius:3px 3px 10px 10px;
  background:linear-gradient(180deg,#1a1108,#000);border:1px solid #5c3b1d;box-shadow:0 4px 8px rgba(0,0,0,.5);}
.desk-inkwell::after{content:'';position:absolute;top:-6px;left:6px;width:18px;height:8px;border-radius:50%;background:#0d0905;border:1px solid #5c3b1d;}
.desk-quill{left:9%;top:-4px;font-size:30px;transform:rotate(38deg);filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));}
.desk-coins{left:8%;bottom:14px;width:46px;height:18px;}
.desk-coins::before,.desk-coins::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle,#e6c156,#9c7a22 70%,#5c4a14);border:1px solid #5c4a14;box-shadow:0 2px 4px rgba(0,0,0,.5);}
.desk-coins::before{left:0;bottom:0;}
.desk-coins::after{left:14px;bottom:5px;}
.desk-ribbon{right:30%;top:8px;width:6px;height:46px;background:var(--red);opacity:.85;
  box-shadow:0 2px 6px rgba(0,0,0,.4);transform:rotate(-6deg);}

.next-month-wrap{padding:14px 16px calc(14px + 78px);background:linear-gradient(0deg,var(--wood-dark) 60%,transparent);position:relative;z-index:2;margin-top:-40px;}

/* =========================================================
   BOTTOM NAV — carved into the desk, not a modern tab bar.
========================================================= */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;
  display:flex;background:#120c07;border-top:2px solid var(--sepia);z-index:50;
  box-shadow:0 -6px 16px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.04);padding-bottom:env(safe-area-inset-bottom);}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 7px;
  color:#6b5c46;font-family:var(--sans);font-size:8.5px;letter-spacing:1px;text-transform:uppercase;position:relative;min-height:44px;}
.bottom-nav button.active{color:var(--parchment);}
.bottom-nav button.active::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--gold);}
.bottom-nav svg{width:19px;height:19px;stroke:currentColor;}
.bottom-nav .nav-glyph{display:none;} /* legacy emoji glyph hidden in favor of inline svg */
.nav-badge{position:absolute;top:1px;right:20%;background:var(--red);color:#fff;border-radius:50%;
  min-width:14px;height:14px;font-size:8px;display:flex;align-items:center;justify-content:center;border:1px solid #120c07;}

/* =========================================================
   BOTTOM-SHEET MODAL — opens as a drawer over the desk, not a
   page navigation. Wood-dark drawer shell with a parchment
   "document" panel inside for whatever was tapped, matching the
   approved concept's sheet pattern.
========================================================= */
.modal-layer{position:fixed;inset:0;z-index:100;display:none;background:rgba(0,0,0,.6);
  justify-content:center;align-items:flex-end;}
.modal-layer.active{display:flex;}
.modal-sheet{width:100%;max-width:430px;max-height:84vh;background:var(--wood-dark);
  border:1px solid #4a3018;border-bottom:none;border-radius:16px 16px 0 0;
  display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);
  transition:transform var(--t-med) cubic-bezier(.2,.85,.25,1.1);box-shadow:0 -14px 40px rgba(0,0,0,.6);}
.modal-layer.active .modal-sheet{transform:translateY(0);}
.modal-sheet::before{content:'';display:block;width:42px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.25);margin:10px auto 2px;flex-shrink:0;}
.modal-sheet-inner{overflow-y:auto;flex:1;margin:8px 12px 16px;padding:16px;
  background:var(--parchment);color:var(--ink);border-radius:3px;border:1px solid var(--sepia);
  box-shadow:0 6px 14px rgba(0,0,0,.35);}

/* the newspaper takes the whole sheet as one uninterrupted broadsheet —
   no wood drawer chrome, no handle, it IS the paper. */
.modal-sheet:has(.paper-masthead){background:var(--parchment);max-height:94vh;}
.modal-sheet:has(.paper-masthead)::before{background:rgba(43,33,24,.25);}

/* ---------- forced overlay (full screen, no escape) ---------- */
.overlay-layer{position:fixed;inset:0;z-index:200;display:none;background:var(--wood-dark);flex-direction:column;}
.overlay-layer.active{display:flex;}
.overlay-layer::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:repeating-linear-gradient(91deg,rgba(0,0,0,.18) 0 2px,transparent 2px 17px);}

/* =========================================================
   NEWSPAPER — the visual centerpiece. Dominates the screen;
   reading it should feel like physically opening a broadsheet.
========================================================= */
.paper-masthead{padding:34px 18px 14px;text-align:center;border-bottom:3px double var(--ink);position:relative;background:var(--parchment);}
.paper-masthead .name{font-family:var(--serif);font-size:24px;font-weight:900;letter-spacing:2px;}
.paper-masthead .meta{font-family:var(--sans);font-size:9.5px;letter-spacing:1px;color:var(--neutral);margin-top:3px;text-transform:uppercase;}
.paper-close{position:absolute;top:28px;right:14px;font-size:16px;color:var(--ink);min-width:36px;min-height:36px;
  border-radius:50%;background:rgba(43,33,24,.08);display:flex;align-items:center;justify-content:center;}
.paper-page{flex:1;padding:20px 18px;overflow-y:auto;background:var(--parchment);
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(43,33,24,.05) 27px 28px);}
.paper-lead{font-family:var(--serif);font-size:26px;font-weight:900;line-height:1.18;text-transform:uppercase;}
.paper-subhead{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--neutral);margin-top:10px;}
.paper-art{height:130px;background:repeating-linear-gradient(45deg,#0000,#0000 8px,rgba(0,0,0,.1) 8px,rgba(0,0,0,.1) 16px);
  margin-top:18px;border-radius:0;border:1px solid var(--sepia);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:10px;color:var(--neutral);text-transform:uppercase;letter-spacing:1.5px;}
.paper-quote{font-family:var(--serif);font-style:italic;font-size:13.5px;margin-top:18px;border-left:3px solid var(--sepia);padding-left:12px;}
.paper-article-h{font-family:var(--serif);font-size:19px;font-weight:700;}
.paper-article-body{font-size:14px;line-height:1.6;margin-top:10px;}
.paper-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;
  border-top:1px solid var(--sepia);background:var(--parchment-dark);}
.paper-nav-btn{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink);min-width:60px;min-height:44px;}
.paper-nav-btn:disabled{opacity:.3;}
.paper-counter{font-family:var(--sans);font-size:10px;letter-spacing:1px;color:var(--neutral);text-transform:uppercase;}

/* ---------- decision card (legislation) — a petition on parchment ---------- */
.dcard{background:#fffaef;border:1px solid var(--sepia);border-radius:1px;padding:14px;margin-bottom:12px;
  box-shadow:2px 2px 0 rgba(43,33,24,.1);transition:opacity var(--t-med), transform var(--t-med);}
.dcard.crisis{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset;}
.dcard.exiting{opacity:0;transform:translateX(40px);}
.dcard-head{display:flex;align-items:center;gap:8px;}
.dcard-glyph{font-size:18px;}
.dcard-title{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--ink);flex:1;}
.dcard-tag{font-family:var(--sans);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;border-radius:2px;background:var(--red);color:#fff;}
.dcard-desc{font-size:12px;color:var(--ink);margin-top:8px;line-height:1.45;}
.dcard-actions{display:flex;gap:6px;margin-top:10px;}
.dcard-actions button{flex:1;font-family:var(--sans);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;padding:9px 4px;border-radius:2px;min-height:44px;}
.btn-approve{background:#cfe8cf;color:#2e5a2e;}
.btn-amend{background:#f0e2bd;color:#7a5c1e;}
.btn-reject{background:#f0cfcf;color:var(--red);}
.dcard-responded{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--neutral);margin-top:8px;font-weight:700;}
.empty-state{text-align:center;color:var(--neutral);font-size:13px;padding:40px 16px;font-style:italic;}

/* ---------- budget — leather ledger ---------- */
.budget-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(43,33,24,.18);}
.budget-row .dname{width:96px;font-family:var(--serif);font-size:12px;color:var(--ink);}
.budget-row .steppers{display:flex;align-items:center;gap:6px;}
.stepper-btn{width:30px;height:30px;border-radius:2px;background:var(--ink);color:var(--parchment);font-size:16px;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.3);}
.stepper-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3);}
.budget-modal-footer{display:flex;gap:8px;padding:14px 0 0;margin-top:6px;border-top:2px solid var(--ink);}

/* ---------- cabinet — ministers as dossier folders ---------- */
.minister-card{display:flex;gap:12px;align-items:center;background:#fffaef;border:1px solid var(--sepia);
  border-left:5px solid var(--sepia);border-radius:1px;padding:12px;margin-bottom:10px;box-shadow:2px 2px 0 rgba(43,33,24,.1);}
.minister-portrait{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;border:2px solid var(--sepia);}
.minister-portrait.pleased{background:#cfe8cf;}
.minister-portrait.neutral{background:#e3d9bf;}
.minister-portrait.concerned{background:#f0e2bd;}
.minister-portrait.hostile{background:#f0cfcf;}
.minister-info{flex:1;}
.minister-name{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--ink);}
.minister-domain{font-family:var(--sans);font-size:9.5px;color:var(--neutral);text-transform:uppercase;letter-spacing:.5px;}
.minister-quote{font-family:var(--serif);font-size:11px;font-style:italic;color:var(--ink);margin-top:6px;}
.recommend-btn{font-family:var(--sans);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8a6112;margin-top:6px;min-height:32px;}

/* ---------- projects — brass plaques on the workbench ---------- */
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;}
.project-card{background:linear-gradient(180deg,#4a3018,#211107);border:1px solid #7d5b2a;border-radius:3px;padding:12px;
  min-height:44px;position:relative;box-shadow:0 4px 0 #0d0603,inset 0 1px rgba(255,255,255,.1);}
.project-card .glyph{font-size:22px;}
.project-card .pname{font-family:var(--serif);font-size:11px;color:#e9d09a;margin-top:6px;line-height:1.3;}
.project-progress-track{height:6px;background:rgba(0,0,0,.45);border-radius:2px;margin-top:8px;overflow:hidden;}
.project-progress-fill{height:100%;background:var(--gold);}
.project-months{font-family:var(--sans);font-size:9px;color:#8a7a5e;margin-top:4px;text-transform:uppercase;letter-spacing:.5px;}
.project-commission-btn{margin-top:8px;width:100%;font-family:var(--sans);font-size:9px;font-weight:700;text-transform:uppercase;
  color:#241404;background:var(--gold);border-radius:2px;padding:8px 0;min-height:32px;box-shadow:0 3px 0 #7a5c1e;}
.project-complete-flash{box-shadow:0 0 0 2px var(--green);}
.project-ack-btn{margin-top:8px;width:100%;font-family:var(--sans);font-size:9px;font-weight:700;text-transform:uppercase;
  color:#fff;background:var(--green);border-radius:2px;padding:8px 0;min-height:32px;box-shadow:0 3px 0 #1f6b3a;}

/* ---------- nation map — aged chart, not a flat panel ---------- */
#screen-map{background:var(--wood-dark);}
.map-container{height:280px;margin:14px;border-radius:3px;overflow:hidden;position:relative;
  background:var(--parchment);box-shadow:inset 0 0 40px rgba(43,33,24,.25),0 6px 14px rgba(0,0,0,.5);
  border:2px solid #21140a;transition:transform var(--t-slow);}
.map-container::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(0deg,transparent 0 18px,rgba(43,33,24,.08) 18px 19px),
    repeating-linear-gradient(90deg,transparent 0 18px,rgba(43,33,24,.08) 18px 19px);}
.map-marker{position:absolute;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:16px;background:rgba(255,255,255,.85);border:2px solid var(--sepia);
  transform:translate(-50%,-50%);transition:opacity var(--t-med), transform var(--t-med);min-width:32px;min-height:32px;z-index:1;}
.map-marker.locked{opacity:.25;filter:grayscale(1);}
.map-marker.revealing{animation:markerPop var(--t-med) ease-out;}
@keyframes markerPop{from{transform:translate(-50%,-50%) scale(0);opacity:0;}to{transform:translate(-50%,-50%) scale(1);opacity:1;}}
.map-marker.selected{box-shadow:0 0 0 3px var(--gold);}
.map-detail{padding:14px;flex:1;}
.map-detail h3{font-family:var(--serif);color:var(--parchment);font-size:16px;margin-bottom:10px;}
.almanac-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #3a2c1c;font-family:var(--sans);font-size:12px;}
.almanac-row .l{color:#9a8a6e;}
.almanac-row .v{color:var(--gold);font-weight:700;}
.map-note{font-family:var(--serif);font-size:11px;color:#8a7a5e;margin-top:10px;font-style:italic;}

/* =========================================================
   CRISIS / MAJOR EVENT — a decree pressed onto the desk,
   resolved with a literal wax stamp, not a modal dialog.
========================================================= */
.overlay-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;padding:30px 20px;justify-content:center;}
.overlay-tag{text-align:center;font-family:var(--sans);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:10px;}
.overlay-title{font-family:var(--serif);font-size:23px;font-weight:900;color:#fff;text-align:center;}
.overlay-desc{font-family:var(--serif);font-size:13px;color:var(--parchment-dark);text-align:center;margin-top:14px;line-height:1.55;font-style:italic;}
.overlay-responses{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.overlay-resp-btn{background:var(--parchment);color:var(--ink);border-radius:1px;padding:14px;font-family:var(--sans);font-size:12px;
  text-align:left;line-height:1.4;min-height:44px;box-shadow:3px 3px 0 rgba(0,0,0,.3);}
.stamp-wrap{display:flex;justify-content:center;margin-top:20px;}
.stamp{font-family:var(--serif);font-weight:900;font-size:28px;color:var(--red);border:4px solid var(--red);
  border-radius:4px;padding:6px 18px;transform:rotate(-8deg) scale(0);letter-spacing:2px;}
.stamp.show{animation:stampIn 220ms ease-out forwards, stampSettle 180ms 220ms ease-out forwards;}
@keyframes stampIn{from{transform:rotate(-8deg) scale(2.2);opacity:0;}to{transform:rotate(-8deg) scale(1.15);opacity:1;}}
@keyframes stampSettle{to{transform:rotate(-8deg) scale(1);}}
.chosen-echo{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--parchment-dark);text-align:center;margin-top:14px;}

/* ---------- archive — bound editions on a shelf ---------- */
.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;}
.archive-card{background:#fffaef;border:1px solid var(--sepia);border-left:4px solid var(--ink);border-radius:1px;
  padding:10px;min-height:44px;box-shadow:2px 2px 0 rgba(43,33,24,.12);}
.archive-card .athumb{height:60px;background:repeating-linear-gradient(0deg,#0000,#0000 4px,rgba(0,0,0,.07) 4px,rgba(0,0,0,.07) 5px);
  border-radius:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:9px;color:var(--neutral);text-transform:uppercase;letter-spacing:1px;}
.archive-card .ahead{font-family:var(--serif);font-size:11px;color:var(--ink);margin-top:8px;line-height:1.3;font-weight:700;}
.archive-card .adate{font-family:var(--sans);font-size:9px;color:var(--neutral);margin-top:4px;letter-spacing:.5px;}
.archive-historic-tag{display:inline-block;font-family:var(--sans);font-size:7px;letter-spacing:1px;text-transform:uppercase;
  background:var(--red);color:#fff;padding:2px 5px;border-radius:1px;margin-top:4px;}

/* ---------- settings — engraved brass toggles ---------- */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(43,33,24,.18);}
.settings-label{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--ink);}
.settings-note{font-family:var(--sans);font-size:10px;color:var(--neutral);margin-top:2px;}
.toggle{width:46px;height:26px;border-radius:13px;background:#cbb892;position:relative;transition:background var(--t-fast);
  min-height:26px;border:1px solid var(--sepia);}
.toggle.on{background:var(--brass);}
.toggle .knob{width:20px;height:20px;border-radius:50%;background:#fff7e6;position:absolute;top:2px;left:2px;
  transition:left var(--t-fast);box-shadow:0 1px 3px rgba(0,0,0,.4);border:1px solid var(--sepia);}
.toggle.on .knob{left:23px;}
.reset-link{font-family:var(--sans);font-size:11px;color:#8a6112;text-decoration:underline;margin-top:-6px;margin-bottom:10px;min-height:32px;}

/* ---------- end game — the final decree ---------- */
#screen-endgame{background:radial-gradient(circle at 50% 0%,#caa24a 0,var(--gold) 60%);padding:60px 18px 30px;position:relative;}
.endgame-kicker{font-family:var(--sans);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#241404;opacity:.8;font-weight:700;}
.endgame-title{font-family:var(--serif);font-size:25px;font-weight:900;color:#241404;margin-top:6px;}
.endgame-sub{font-family:var(--serif);font-size:12px;color:#241404;opacity:.85;margin-top:4px;font-style:italic;}
.legacy-card{background:var(--parchment);border-radius:2px;border:1px solid var(--sepia);padding:16px;margin-top:18px;
  box-shadow:0 8px 16px rgba(0,0,0,.25),6px 6px 0 rgba(0,0,0,.12);}
.legacy-card h3{font-family:var(--serif);font-size:15px;color:var(--ink);margin-bottom:10px;border-bottom:2px double var(--ink);padding-bottom:6px;}
.legacy-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #c9b98f;font-family:var(--sans);font-size:12px;color:var(--ink);}
.legacy-row .v{font-weight:700;font-family:var(--serif);}
.endgame-closing{font-family:var(--serif);font-size:13px;color:#241404;margin-top:18px;font-style:italic;line-height:1.55;}
.endgame-btn-wrap{margin-top:24px;}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);max-width:380px;width:90%;
  background:var(--ink);color:var(--parchment);padding:10px 16px;border-radius:2px;font-family:var(--serif);font-style:italic;
  font-size:12px;text-align:center;opacity:0;transition:opacity var(--t-med), transform var(--t-med);z-index:300;pointer-events:none;
  box-shadow:0 6px 14px rgba(0,0,0,.4);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- section heading reused ---------- */
.section-title{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;
  border-bottom:2px double var(--ink);padding-bottom:6px;}
.tab-screen-pad{padding:14px 14px 90px;flex:1;overflow-y:auto;}
.tab-screen-pad.dark{background:var(--wood-dark);}
.tab-screen-pad.light{background:var(--parchment);}