:root{
  /* ---- Spindle City design tokens (one source for every screen) ---- */
  --parch:#e9dcbd; --parch2:#d8c69a; --paper:#f7f0de; --paper-hi:#fffaf0; --ink:#2b2013; --ink2:#5a4a33; --line:#8a7752;
  --green:#2f4a2f; --green2:#1c2f1c; --gold:#b8891a; --gold2:#e0a52c; --red:#7a2020; --brick:#8c4a3a; --blue:#2c4a6b;
  --on-dark:#f3e6c4; --ok:#1f6b2a; --bad:#a32a1e; --focus:#1d5fa8;
  --m-best:#2FD36E; --m-beyond:#FFE000; --m-wrong:#FF9A2E; --m-false:#FF4FA3;
  --serif:Georgia,"Times New Roman",serif;
  --mono:"Courier Prime","Courier New",Courier,monospace;
  --hand:Caveat,"Comic Sans MS",cursive;
  --ts:1;                      /* text-size multiplier, set from Settings */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --shadow:3px 3px 0 var(--ink); --shadow-lg:4px 5px 0 rgba(43,32,19,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--parch);color:var(--ink);font-family:var(--serif);font-size:calc(17px*var(--ts));line-height:1.55;
  background-image:radial-gradient(rgba(120,90,40,.10) 1px,transparent 1px);background-size:5px 5px}
button{font-family:inherit;font-size:inherit;cursor:pointer}
.mono{font-family:var(--mono)}

/* top bar */
.bar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--green2);color:var(--on-dark);border-bottom:3px solid var(--gold)}
.bar h1{font-size:calc(20px*var(--ts));margin:0;letter-spacing:.06em;font-weight:normal}
.bar h1 b{color:var(--gold2);font-weight:normal}
.bar .wsq{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#9D4EDD;color:#fff;border:2px solid #1A1A1A;border-radius:7px;box-shadow:1px 2px 0 #1A1A1A;font:700 17px/1 Georgia,serif;text-decoration:none}
.bar .date{margin-left:auto;font-family:var(--mono);font-size:calc(15px*var(--ts));color:var(--gold2)}
.bar .ib{background:none;border:1px solid rgba(243,230,196,.4);color:var(--on-dark);border-radius:4px;padding:2px 8px;font-size:calc(14px*var(--ts))}

/* layout */
.wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;max-width:1180px;margin:0 auto;padding:18px 16px 60px}
@media (max-width:820px){.wrap{grid-template-columns:1fr}}
.wrap.solo{grid-template-columns:1fr;max-width:980px}
.panel{background:var(--paper);border:2px solid var(--ink);box-shadow:4px 5px 0 rgba(43,32,19,.35);padding:14px 16px}
#stats{align-self:start;position:sticky;top:12px;font-family:var(--mono);font-size:calc(14px*var(--ts))}
@media (max-width:820px){
  #stats{position:static;padding:10px 12px;font-size:calc(14px*var(--ts));display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  #stats h2,#stats .sub,#stats .goal{grid-column:1/-1}
  #stats .sub{margin-bottom:4px}
  #stats .meter{margin:3px 0 0}
  #stats .meter .trk{height:7px}
  .bar{padding:6px 10px;gap:8px}.bar h1{font-size:calc(17px*var(--ts))}.bar .date{font-size:calc(14px*var(--ts))}
}
#stats h2{font-family:var(--serif);font-size:calc(18px*var(--ts));margin:0 0 2px}
#stats .sub{color:var(--ink2);margin-bottom:10px}
.money{display:flex;justify-content:space-between;border-bottom:1px dotted var(--ink2);padding:3px 0}
.money b{font-size:calc(16px*var(--ts))}
.meter{margin:8px 0 2px}
.meter .lab{display:flex;justify-content:space-between}
.meter .trk{height:10px;border:1.5px solid var(--ink);background:var(--paper-hi);margin-top:2px}
.meter .fil{height:100%;transition:width .5s}
.goal{margin-top:12px;padding-top:8px;border-top:2px solid var(--ink)}
.hidden{display:none!important}

/* stage */
#stage{min-height:60vh}
.card{background:var(--paper);border:2px solid var(--ink);box-shadow:4px 5px 0 rgba(43,32,19,.35);padding:22px 26px}
@media (max-width:600px){.card{padding:16px}}
.season{font-family:var(--mono);color:var(--brick);letter-spacing:.12em;text-transform:uppercase;font-size:calc(14px*var(--ts))}
.card h2{font-size:calc(30px*var(--ts));margin:2px 0 12px;font-weight:normal}
.fig{margin:0 0 14px;border:6px solid var(--paper-hi);outline:2px solid var(--ink);background:var(--paper-hi);cursor:zoom-in}
.fig img{display:block;width:100%;max-height:420px;object-fit:contain;background:#efe5c9;filter:sepia(.18)}
.fig figcaption{font-size:calc(14px*var(--ts));color:var(--ink2);padding:6px 4px 2px;font-style:italic}
.fig .late{font-style:normal;font-family:var(--mono);font-size:calc(14px*var(--ts));color:var(--brick);border:1px solid var(--brick);padding:0 4px;margin-left:6px;white-space:nowrap}
.fig2 .fig img{max-height:230px}
.cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
.cols.single{grid-template-columns:1fr}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
blockquote.q{margin:14px 0;padding:10px 14px;border-left:5px solid var(--gold);background:var(--paper-hi);font-size:calc(17px*var(--ts))}
blockquote.q .by{display:block;font-size:calc(14px*var(--ts));color:var(--ink2);margin-top:6px;font-style:normal}
.note{font-size:calc(14px*var(--ts));background:#e7ecdf;border:1px solid var(--green);padding:8px 12px;margin:10px 0;color:var(--green2)}
.note b{font-family:var(--mono);letter-spacing:.06em}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.btn{background:var(--green);color:var(--on-dark);border:2px solid var(--ink);padding:10px 16px;text-align:left;box-shadow:3px 3px 0 var(--ink);transition:transform .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--paper-hi);color:var(--ink)}
.btn.gold{background:var(--gold2);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn .why{display:block;font-size:calc(14px*var(--ts));opacity:.85}
.result{background:var(--paper-hi);border:2px dashed var(--ink2);padding:12px 14px;margin-top:14px}
.fx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fx span{font-family:var(--mono);font-size:calc(14px*var(--ts));border:1.5px solid var(--ink);padding:1px 6px;background:#fff}
.fx .up{background:#dcefd6}.fx .dn{background:#f4d6d0}
.letter{font-style:italic;font-size:calc(19px*var(--ts));line-height:1.6;background:var(--paper-hi) repeating-linear-gradient(transparent 0 30px,#d9e3ef 30px 31px);border:1px solid #c9b88f;padding:22px 26px;box-shadow:2px 3px 8px rgba(0,0,0,.15);transform:rotate(-.6deg)}
.lastseason{font-size:calc(14px*var(--ts));border:1.5px solid var(--ink2);background:var(--paper-hi);padding:8px 12px;margin-bottom:14px}

/* title */
.title{text-align:center;padding:30px 26px}
.title .big{font-size:calc(56px*var(--ts));letter-spacing:.05em;margin:6px 0 0;line-height:1}
.title .tag{font-family:var(--mono);color:var(--brick);letter-spacing:.2em;text-transform:uppercase}
.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;text-align:left}
@media (max-width:640px){.rolegrid{grid-template-columns:1fr}}
.role{border:2px solid var(--ink);background:var(--paper-hi);padding:12px;box-shadow:3px 3px 0 var(--ink)}
.role img{width:100%;height:170px;object-fit:cover;object-position:top;filter:sepia(.25);border:1px solid var(--ink)}
.role h3{margin:8px 0 4px;font-weight:normal;font-size:calc(22px*var(--ts))}
.names{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.names button{border:1.5px solid var(--ink);background:#fff;padding:3px 9px;font-size:calc(15px*var(--ts))}
.names button.on{background:var(--gold2)}
.soon{opacity:.6}
.small{font-size:calc(14px*var(--ts));color:var(--ink2)}
input.code{font-family:var(--mono);font-size:calc(15px*var(--ts));padding:6px 8px;border:2px solid var(--ink);width:100%;max-width:380px}

/* season screen */
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:10px 0}
.ev{border:2px solid var(--ink);background:#fff;padding:8px 10px;text-align:left;position:relative}
.ev .t{font-size:calc(16px*var(--ts))}
.ev .n{font-family:var(--mono);font-size:calc(14px*var(--ts));color:var(--ink2)}
.ev .ct{position:absolute;top:6px;right:8px;font-family:var(--mono);font-weight:bold;color:var(--green)}
.ev.on{background:#e3eedc;box-shadow:inset 0 0 0 2px var(--green)}
.slots{font-family:var(--mono);margin:6px 0}
.slot{display:inline-block;min-width:110px;border:1.5px dashed var(--ink2);padding:2px 8px;margin:2px;background:var(--paper-hi);font-size:calc(14px*var(--ts))}
.payrow{display:flex;justify-content:space-between;font-family:var(--mono);border-bottom:1px dotted var(--ink2);padding:2px 0}
.alloc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
@media (max-width:600px){.alloc{grid-template-columns:1fr}}
.alloc button{border:2px solid var(--ink);background:#fff;padding:8px;text-align:left}
.alloc button.on{background:var(--gold2)}
h3.sec{font-weight:normal;font-size:calc(20px*var(--ts));border-bottom:2px solid var(--ink);margin:18px 0 6px}

/* document round */
.docbox{background:var(--paper-hi);border:2px solid var(--ink);padding:14px 16px;font-style:italic;font-size:calc(17px*var(--ts));box-shadow:inset 0 0 30px rgba(180,150,90,.18)}
.docbox .cite{display:block;font-style:normal;font-size:calc(14px*var(--ts));color:var(--ink2);font-weight:bold;margin-top:8px}
.qstem{font-size:calc(19px*var(--ts));margin:14px 0 8px}
.dock{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
.mk{border:2px solid var(--ink);padding:5px 10px;font-family:var(--mono);font-size:calc(14px*var(--ts));background:#fff;position:relative}
.mk i{display:inline-block;width:22px;height:12px;border:1px solid var(--ink);vertical-align:middle;margin-right:6px}
.mk.sel{outline:3px solid var(--ink);outline-offset:2px}
.mk.used{opacity:.5}
.opt{display:block;width:100%;text-align:left;border:2px solid var(--ink);background:#fff;padding:10px 12px;margin:6px 0;font-size:calc(16px*var(--ts));position:relative}
.opt .hl{background-repeat:no-repeat;background-size:100% 88%;background-position:0 70%;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.opt .tagc{float:right;font-family:var(--mono);font-size:calc(14px*var(--ts));border:1.5px solid var(--ink);padding:0 5px;margin-left:8px;background:#fff}
.opt .verdict{font-family:var(--mono);font-weight:bold;margin-right:6px}
.opt .exp{display:block;font-size:calc(14px*var(--ts));color:var(--ink2);margin-top:6px;border-top:1px dashed #b9a77d;padding-top:5px}
.opt[disabled]{color:inherit;opacity:1;cursor:default}
.opt.right{border-color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}
.opt.wrong{border-color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.howto{font-size:calc(14px*var(--ts));background:var(--paper-hi);border:1px dashed var(--ink2);padding:8px 12px;margin:8px 0}
.howto table{border-collapse:collapse;width:100%}
.howto td{padding:2px 6px;vertical-align:top}


/* document desk */
.deskcard{background:linear-gradient(90deg,rgba(0,0,0,.04) 0 2px,transparent 2px 60px),linear-gradient(#efe3c6,#e6d6b2);}
.paper{position:relative;margin:6px 4px 18px;padding:22px 28px 18px;background:radial-gradient(ellipse at 20% 10%,rgba(160,120,60,.10),transparent 40%),radial-gradient(ellipse at 85% 90%,rgba(150,110,50,.14),transparent 45%),#f8f0da;border:1px solid #c9b88f;box-shadow:0 1px 0 #fff inset,3px 6px 14px rgba(60,40,10,.28);transform:rotate(-.35deg)}
.paper:before{content:"";position:absolute;inset:6px;border:1px solid rgba(80,60,30,.25);pointer-events:none}
.paper .dhead{text-align:center;font-weight:bold;letter-spacing:.18em;font-size:calc(clamp(20px,3.4vw,30px)*var(--ts));line-height:1.1}
.paper .dsub{text-align:center;font-size:calc(14px*var(--ts));letter-spacing:.14em;margin:4px 0 12px;color:var(--ink2);font-family:var(--mono)}
.broadside .dhead{font-family:var(--serif);transform:scaleY(1.15);border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:6px 0}
.bookpage .dhead{font-family:var(--serif);font-weight:normal;font-size:calc(clamp(18px,2.8vw,24px)*var(--ts))}
.paper .dtext{font-size:calc(17.5px*var(--ts));line-height:1.65;text-align:justify;hyphens:auto}
.broadside .dtext:first-letter{float:left;font-size:calc(46px*var(--ts));line-height:.9;padding:4px 6px 0 0;font-weight:bold}
.bookpage .dtext{font-style:italic}
.paper .dcite{margin-top:12px;font-size:calc(14px*var(--ts));color:var(--ink2);font-weight:bold;border-top:1px solid rgba(80,60,30,.3);padding-top:6px}
.docimg{float:right;width:120px;max-height:150px;object-fit:cover;object-position:top;margin:0 0 8px 14px;border:4px solid var(--paper-hi);outline:1px solid #8a7752;filter:sepia(.3);transform:rotate(1.2deg)}
@media (max-width:600px){.paper{padding:16px 14px}.docimg{width:84px}}
.pens{display:flex;flex-wrap:wrap;gap:6px 12px;margin:10px 0 6px}
.pen{background:none;border:0;padding:4px 2px;display:flex;flex-direction:column;align-items:center;font-family:var(--mono);font-size:calc(14px*var(--ts));color:var(--ink);transition:transform .12s}
.pen svg{filter:drop-shadow(1px 2px 0 rgba(0,0,0,.25))}
.pen.sel{transform:translateY(-6px) rotate(-4deg)}
.pen.sel span{font-weight:bold;text-decoration:underline}
.pen.used:not(.sel){opacity:.45}
.legend{display:grid;gap:4px;margin-top:6px}
.legend .sw{background-size:100% 100%;padding:1px 8px;font-weight:bold;display:inline-block;min-width:150px}
.answers .opt{background:var(--paper-hi);border:1.5px solid var(--line);box-shadow:1px 2px 0 rgba(0,0,0,.08);padding:12px 14px 12px 14px}
.answers .opt .hl{background-size:100% 100%;background-repeat:no-repeat;padding:0 4px;margin:0 -4px}
.answers .opt.right{border:2px solid var(--ok);box-shadow:none}
.answers .opt.wrong{border:2px solid var(--bad);box-shadow:none}
.redpen{font-family:var(--hand);color:var(--bad);font-size:calc(34px*var(--ts));line-height:.6;float:left;margin:2px 10px 0 -4px;transform:rotate(-8deg)}
.redpen.big{font-size:calc(44px*var(--ts));float:none;display:inline-block;margin:0 8px 0 0}
.answers .exp{font-family:var(--hand);color:var(--bad);font-size:calc(21px*var(--ts));line-height:1.15;border-top:1px dashed #d8b4a8}
.answers .exp b{font-weight:700}
.answers .was{text-decoration:line-through;opacity:.8}
.tally{font-family:var(--hand);color:var(--bad);font-size:calc(26px*var(--ts));margin:8px 0}
/* loom */
@media (max-width:600px){.loomhud2{font-size:calc(14px*var(--ts))!important;padding:5px 8px!important}}
.loomhud2{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:calc(14px*var(--ts));background:var(--green2);color:var(--on-dark);padding:6px 12px;border:2px solid var(--ink);border-bottom:0}
.loomstage{position:relative;border:2px solid var(--ink);background:#3b2d1d;line-height:0}
.loomstage canvas{display:block;width:100%;height:auto}
.ticket{position:absolute;top:13%;left:50%;transform:translateX(-50%) rotate(-1.5deg);background:var(--paper-hi);border:2px solid var(--ink);box-shadow:3px 4px 0 rgba(0,0,0,.45);padding:8px 16px 9px;line-height:1.15;text-align:center;font-size:calc(clamp(17px,2.6vw,26px)*var(--ts));font-weight:bold;color:var(--ink);white-space:nowrap;transition:opacity .25s;pointer-events:none}
.ticket:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:clamp(20px,6vw,58px);background:var(--ink);opacity:.7}
.ticket .tk-lab{display:block;font-family:var(--mono);font-size:calc(14px*var(--ts));letter-spacing:.2em;color:var(--brick);font-weight:normal}
.ticket.gone{opacity:0}
.lflash{position:absolute;right:3%;bottom:6%;font-family:var(--mono);font-weight:bold;font-size:calc(clamp(14px,2.2vw,22px)*var(--ts));padding:6px 12px;border:3px solid;transform:rotate(-6deg) scale(.6);opacity:0;transition:all .2s;line-height:1.2;background:rgba(255,250,240,.92)}
.lflash.ok{color:var(--ok);border-color:var(--ok);opacity:1;transform:rotate(-6deg) scale(1)}
.lflash.no{color:var(--bad);border-color:var(--bad);opacity:1;transform:rotate(-6deg) scale(1)}
.defs2{display:grid;gap:8px;margin-top:12px}
.defs2 button{display:flex;gap:10px;align-items:flex-start;text-align:left;border:2px solid var(--ink);background:var(--paper-hi);padding:10px 12px;font-size:calc(16px*var(--ts));box-shadow:3px 3px 0 var(--ink);transition:transform .08s}
.defs2 button:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.defs2 .kn{font-family:var(--mono);font-weight:bold;background:var(--green2);color:var(--gold2);min-width:24px;text-align:center;padding:1px 0}
.defs2 button.ok{background:#cfe9c5}.defs2 button.no{background:#f3c8c0}.defs2 button[disabled]{cursor:default;color:inherit}
.piece{display:flex;gap:16px;align-items:center;background:var(--paper-hi);border:2px dashed var(--ink2);padding:12px;margin-top:12px;flex-wrap:wrap}
.piece img{width:220px;height:120px;border:2px solid var(--ink);image-rendering:pixelated}
.lfeed{min-height:24px;font-size:calc(14px*var(--ts));margin-top:6px}

/* ledger */
.ledger{background:var(--paper-hi);border:2px solid var(--ink);padding:20px 24px;font-family:var(--mono)}
.ledger h2{font-family:var(--serif);font-weight:normal;text-align:center;margin:0}
.ledger .lsub{text-align:center;color:var(--ink2);margin-bottom:12px}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.lgrid{grid-template-columns:1fr}}
.lgrid h3{font-family:var(--serif);font-weight:normal;font-size:calc(19px*var(--ts));border-bottom:2px double var(--ink);margin:6px 0}
.lrow{display:flex;justify-content:space-between;border-bottom:1px dotted #9f8d66;padding:3px 0;gap:10px}
.lrow span:last-child{text-align:right}
textarea{width:100%;min-height:90px;font-family:var(--serif);font-size:calc(16px*var(--ts));border:2px solid var(--ink);padding:8px;background:#fff}
.codebox{font-size:calc(20px*var(--ts));letter-spacing:.06em;background:var(--green2);color:var(--gold2);padding:8px 12px;display:inline-block;margin:4px 0;user-select:all}

/* lightbox & modal */
.lb{position:fixed;inset:0;background:rgba(20,14,6,.86);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;cursor:zoom-out}
.lb img{max-width:96vw;max-height:84vh;border:6px solid var(--paper-hi)}
.lb .cap{position:absolute;bottom:12px;left:20px;right:20px;color:var(--on-dark);text-align:center;font-style:italic;font-size:calc(14px*var(--ts))}
.modal{position:fixed;inset:0;background:rgba(20,14,6,.7);display:flex;align-items:flex-start;justify-content:center;z-index:40;padding:30px 12px;overflow:auto}
.modal .card{max-width:760px;width:100%}
.modal li{margin-bottom:6px;font-size:calc(14px*var(--ts))}

@media print{
  .bar,#stats,.noprint{display:none!important}
  .wrap{display:block;padding:0}
  body{background:#fff}
}

/* ---------- additions: scrapbook, yard, compare, games ---------- */
.albumbtn{display:block;width:100%;margin-top:12px;border:2px solid var(--ink);background:#f3e2b8;padding:7px 10px;font-family:var(--serif);font-size:calc(15px*var(--ts));text-align:left;box-shadow:2px 2px 0 var(--ink)}
.albumbtn b{float:right;font-family:var(--mono)}
.enter{font-size:calc(14px*var(--ts));background:#f6e3d8;border:1px solid var(--brick);padding:8px 12px;margin:10px 0}
.pasted{display:flex;gap:10px;align-items:center;margin-top:10px}
.fig.mini{width:150px;margin:0;transform:rotate(-2deg)}
.fig.mini img{max-height:120px}
.fig.mini figcaption{display:none}
.titlebar{display:grid;grid-template-columns:1fr auto;gap:16px;margin-top:22px;text-align:left;align-items:end}
@media (max-width:640px){.titlebar{grid-template-columns:1fr}}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btnrow .btn{display:inline-block}
.ib.dark{border:1px solid var(--ink);color:var(--ink);background:#fff;border-radius:4px;padding:2px 8px;font-size:calc(14px*var(--ts));vertical-align:middle}
/* album */
.album{background:#5b3a22;border:3px solid var(--ink);box-shadow:6px 8px 0 rgba(0,0,0,.4);max-width:1060px;width:100%;padding:12px;border-radius:6px}
.album-head{display:flex;gap:12px;align-items:center;color:var(--on-dark);font-family:var(--serif);font-size:calc(20px*var(--ts));padding:2px 6px 10px;flex-wrap:wrap}
.album-head .small{color:#e8d6aa;flex:1}
.spread{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--ink)}
@media (max-width:760px){.spread{grid-template-columns:1fr}}
.leaf{background:#efe3c2 radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 60%);min-height:420px;padding:18px 16px;display:grid;grid-template-rows:1fr 1fr;gap:14px;box-shadow:inset -10px 0 18px rgba(60,40,10,.25)}
.leaf.right{box-shadow:inset 10px 0 18px rgba(60,40,10,.25)}
.sb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.sb-photo{position:relative;background:#fff;padding:7px 7px 7px;box-shadow:1px 3px 6px rgba(0,0,0,.35);max-width:88%;cursor:zoom-in}
.sb-photo img{display:block;max-width:100%;max-height:170px;filter:sepia(.2)}
.sb-item.small .sb-photo img{max-height:120px}
.sb-photo.swatch{padding:5px;cursor:default}
.sb-corner{position:absolute;width:18px;height:18px;background:var(--ink);opacity:.85}
.sb-corner.tl{top:-4px;left:-4px;clip-path:polygon(0 0,100% 0,0 100%)}
.sb-corner.tr{top:-4px;right:-4px;clip-path:polygon(0 0,100% 0,100% 100%)}
.sb-corner.bl{bottom:-4px;left:-4px;clip-path:polygon(0 0,0 100%,100% 100%)}
.sb-corner.br{bottom:-4px;right:-4px;clip-path:polygon(100% 0,0 100%,100% 100%)}
.sb-note{font-family:var(--hand);font-size:calc(19px*var(--ts));line-height:1.1;color:#24345a;text-align:center;max-width:92%}
.sb-item.bonus .sb-photo{outline:3px solid #e0a52c}
.sb-clip{background:var(--paper-hi);border:1px dashed #8a7752;padding:12px 16px;font-family:var(--mono);font-size:calc(14px*var(--ts));max-width:80%;box-shadow:1px 2px 4px rgba(0,0,0,.25)}
.sb-empty{font-family:var(--hand);font-size:calc(22px*var(--ts));color:#6b5a3a;align-self:center;text-align:center}
.album-nav{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--on-dark)}
.album-nav .btn{display:inline-block}
/* yard */
.yardwrap{position:relative;border:3px solid var(--ink);background:#c9c19c;line-height:0}
#yard{display:block;width:100%;height:auto;aspect-ratio:3/2;cursor:pointer;touch-action:manipulation}
.yardtip{line-height:1.4;font-size:calc(14px*var(--ts));min-height:22px;background:var(--paper-hi);border-top:2px solid var(--ink);padding:6px 10px}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:10px 0}
.pb{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;text-align:left;border:2px solid var(--ink);background:var(--paper-hi);padding:5px 8px;box-shadow:2px 2px 0 var(--ink)}
.pb .pi{grid-row:1/3;font-size:calc(22px*var(--ts));align-self:center}
.pb .pl{font-size:calc(14px*var(--ts))}
.pb .pc2{font-family:var(--mono);font-size:calc(14px*var(--ts));color:var(--ink2)}
.pb.on{background:var(--gold2)}
.pb[disabled]{opacity:.45;cursor:not-allowed}
.yardgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.yardgrid{grid-template-columns:1fr}}
.pol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.pol span{font-family:var(--mono);min-width:72px;font-weight:bold}
.pol button{border:2px solid var(--ink);background:#fff;padding:4px 10px;font-size:calc(14px*var(--ts))}
.pol button.on{background:var(--gold2)}
.payrow.warn span{color:var(--bad)}
p.warn{color:var(--bad)}
/* compare */
.cmpin{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
@media (max-width:640px){.cmpin{grid-template-columns:1fr}}
.cmpin .code{max-width:none}
.cmpgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:760px){.cmpgrid{grid-template-columns:1fr}}
.cmpcol{background:var(--paper-hi);border:2px solid var(--ink);padding:12px 14px;font-family:var(--mono);font-size:calc(14px*var(--ts))}
.cmpcol h3{font-family:var(--serif);font-weight:normal;font-size:calc(18px*var(--ts));border-bottom:2px double var(--ink);margin:10px 0 4px}
.cmpcol.girl{border-top:8px solid var(--brick)}.cmpcol.owner{border-top:8px solid var(--blue)}
.cmphead{font-family:var(--serif);font-size:calc(21px*var(--ts))}
.cmpq{background:#e7ecdf;border:1px solid var(--green);padding:10px 16px;margin-top:16px}
.cmpq h3{margin:4px 0;font-weight:normal}
.cmpq li{margin:6px 0}
/* track & lock */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:12px}
.tcard{border:2px solid var(--ink);background:var(--paper-hi);padding:10px;text-align:left;box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;gap:4px;font-size:calc(15px*var(--ts))}
.tcard .ty{font-family:var(--mono);color:var(--ink2);font-size:calc(14px*var(--ts))}
.tcard[disabled]{opacity:.5}
.shake{animation:shk .4s;background:#f3c8c0!important}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.manifest{font-family:var(--mono);font-size:calc(14px*var(--ts));background:var(--paper-hi);border:2px solid var(--ink);padding:10px 14px;max-width:340px;line-height:1.45}

@media (max-width:700px){ .yardwrap{overflow-x:auto;-webkit-overflow-scrolling:touch} #yard{min-width:660px} .yardtip{min-width:660px;box-sizing:border-box} }

/* ---------- reading tickets ---------- */
.ticket.long{left:50%!important;white-space:normal;max-width:84%;width:max-content;font-size:calc(clamp(14px,1.7vw,17px)*var(--ts));font-weight:normal;font-style:italic;text-align:left;line-height:1.3}
.ticket.long .tk-lab{font-style:normal}
/* ---------- mill upgrades ---------- */
.upg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-top:8px;line-height:1.25}
.upg button{text-align:left;border:2px solid var(--ink);background:#fff;padding:6px 8px;display:flex;flex-direction:column;gap:2px;box-shadow:2px 2px 0 var(--ink)}
.upg button small{font-family:var(--mono);color:var(--ink2)}
.upg button em{font-size:calc(14px*var(--ts));color:var(--ink2)}
.upg button[disabled]{opacity:.45;cursor:not-allowed}
/* ---------- swipe-card deck ---------- */
.swipedeck{max-width:620px;margin:0 auto}
.rhead{display:flex;justify-content:space-between;font-family:var(--mono);color:var(--brick);letter-spacing:.08em;text-transform:uppercase;font-size:calc(14px*var(--ts));margin-bottom:6px}
.rlast{min-height:42px;font-size:calc(15px*var(--ts));background:var(--paper-hi);border:1.5px dashed var(--ink2);padding:7px 10px;margin:8px 0}
.rlast.hint{color:var(--ink2);font-style:italic}
.rtable{display:flex;justify-content:center;padding:10px 0 4px;overflow:hidden}
.rcard{position:relative;width:min(400px,92vw);background:var(--paper-hi);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 8px 0 rgba(43,32,19,.35);padding:12px 12px 16px;touch-action:pan-y;user-select:none;cursor:grab;transition:transform .25s}
.rcard:active{cursor:grabbing}
.rcard.payday{background:#f6efd8}.rcard.crisis{background:#f6e0d8;border-color:#7a2020}.rcard.evening{background:#eef0e2}
.rpic{border:2px solid var(--ink);border-radius:8px;overflow:hidden;height:min(240px,48vw);display:flex;align-items:center;justify-content:center;background:#e9dcbd}
.rpic svg{width:100%;height:100%}
.rpic img{width:100%;height:100%;object-fit:cover;filter:sepia(.2)}
.rletter{font-size:calc(90px*var(--ts))}
.rname{font-size:calc(22px*var(--ts));margin-top:10px;text-align:center}
.rname span{display:block;font-family:var(--mono);font-size:calc(14px*var(--ts));color:var(--ink2)}
.rtext{font-size:calc(17px*var(--ts));margin-top:8px;line-height:1.45}
.rbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.rb{border:2px solid var(--ink);background:var(--green);color:var(--on-dark);padding:12px;font-size:calc(16px*var(--ts));box-shadow:3px 3px 0 var(--ink)}
.rb.r{text-align:right}.rb.l{text-align:left}
.rb[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:600px){.rb{font-size:calc(14px*var(--ts));padding:10px}}

@media (max-width:820px){ .wrap.deckmode #stats{display:none} }
.rsb{font-size:calc(14px*var(--ts))}
@media (min-width:821px){ .rsb{display:none} }

.tcard img{width:100%;height:84px;object-fit:cover;border:1px solid var(--ink);filter:sepia(.25)}
.tcard .tnoimg{display:flex;align-items:center;justify-content:center;height:84px;border:1px dashed var(--ink2);font-size:calc(30px*var(--ts));background:#efe6cf}
.rpic{position:relative}
.rpic .rphoto{width:100%;height:100%;object-fit:cover;object-position:50% 15%;filter:sepia(.25) contrast(1.05)}
.rcap{position:absolute;left:0;right:0;bottom:0;background:rgba(30,20,10,.7);color:var(--on-dark);font-size:calc(14px*var(--ts));padding:2px 6px;line-height:1.25;text-align:left}
.rinset{position:absolute;right:6px;bottom:6px;width:64px;height:64px;border:3px solid #fbf6ea;box-shadow:0 2px 6px rgba(0,0,0,.4);transform:rotate(4deg);cursor:zoom-in;background:#fbf6ea;overflow:hidden}
.rinset img{width:100%;height:100%;object-fit:cover}
.rref{margin:8px 12px 10px;padding:6px 10px;border-left:3px solid var(--brick);background:rgba(139,46,31,.06);font-family:var(--serif);font-style:italic;font-size:calc(14px*var(--ts));line-height:1.35;text-align:left}
.rref b{display:block;font-style:normal;font-family:inherit;font-size:calc(14px*var(--ts));letter-spacing:.08em;text-transform:uppercase;color:var(--brick);margin-bottom:2px}
.rref i{display:block;font-style:normal;font-size:calc(14px*var(--ts));color:var(--ink2);margin-top:3px}


/* =====================================================================
   DESIGN SYSTEM LAYER — shared rules that keep every screen consistent
   ===================================================================== */
/* one type system: serif for reading, mono for ledgers/labels, hand for the scrapbook & red pen */
body{font-family:var(--serif)}
p,li{max-width:75ch}
.card p{line-height:1.6}

/* one button family: primary (.btn green), secondary (.btn.alt paper), accent (.btn.gold) and "chips" */
.btn,.rb{min-height:44px;border-radius:0;font-family:var(--serif)}
.names button,.pol button,.alloc button,.pb,.upg button,.tcard,.defs2 button,.mk,.ev,.opt{
  border:2px solid var(--ink);background:var(--paper-hi);color:var(--ink);border-radius:0;min-height:36px;
  box-shadow:2px 2px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.names button:hover:not([disabled]),.pol button:hover:not([disabled]),.alloc button:hover:not([disabled]),.pb:hover:not([disabled]),
.upg button:hover:not([disabled]),.tcard:hover:not([disabled]),.mk:hover:not([disabled]),.ev:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.names button.on,.pol button.on,.alloc button.on,.pb.on{background:var(--gold2);box-shadow:inset 0 0 0 2px var(--ink),2px 2px 0 var(--ink)}
.names button.on:before,.pol button.on:before,.alloc button.on:before{content:"✓ "}
.answers .opt{box-shadow:1px 2px 0 rgba(0,0,0,.08)}
.rcard{border-radius:10px}.rpic{border-radius:6px}

/* focus: always visible, 3:1 against parchment and dark bars */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.bar :focus-visible,.rmeters :focus-visible,.album :focus-visible{outline-color:var(--gold2)}
[data-img]{cursor:zoom-in}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:4px;z-index:99;background:var(--gold2);color:var(--ink);padding:8px 12px;border:2px solid var(--ink)}
.skip:focus{left:8px}

/* top bar: one row on every screen size */
.bar{flex-wrap:nowrap}
.bar h1{white-space:nowrap}
.bar .ib{min-height:36px;min-width:36px;padding:4px 10px;font-size:calc(14px*var(--ts));display:inline-flex;align-items:center;gap:4px;border-radius:0}
.bar .ib[aria-pressed="true"]{background:var(--gold2);color:var(--ink);border-color:var(--gold2)}
.bar .ib .lbl{display:inline}
@media (max-width:640px){
  .bar .date{display:none}
  .bar h1{margin-right:auto}
  .bar .ib .lbl{display:none}
  .bar .ib{padding:4px 8px}
}
/* mobile: the page never scrolls sideways (the mill-yard map scrolls inside its own frame) */
.wrap,.wrap.solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:821px){.wrap:not(.solo){grid-template-columns:260px minmax(0,1fr)}}

/* settings panel */
.set{display:grid;gap:14px}
.set fieldset{border:2px solid var(--ink);background:var(--paper-hi);padding:10px 14px;margin:0}
.set legend{font-family:var(--mono);font-weight:bold;letter-spacing:.06em;padding:0 6px}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.seg button{border:2px solid var(--ink);background:#fff;min-height:40px;padding:4px 12px;box-shadow:2px 2px 0 var(--ink)}
.seg button[aria-pressed="true"]{background:var(--gold2);box-shadow:inset 0 0 0 2px var(--ink)}
.seg button[aria-pressed="true"]:before{content:"✓ "}
.set input[type=range]{width:min(320px,100%);accent-color:var(--green);height:32px}
.set .hint{font-size:calc(14px*var(--ts));color:var(--ink2);margin:4px 0 0}

/* read-aloud highlight */
.reading{background:rgba(224,165,44,.28);outline:2px dashed var(--gold);outline-offset:2px}

/* reduced motion: system setting or the in-game switch */
@media (prefers-reduced-motion: reduce){
  html:not(.motion-full) *,html:not(.motion-full) *:before,html:not(.motion-full) *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html.motion-reduced *,html.motion-reduced *:before,html.motion-reduced *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.motion-reduced .paper,html.motion-reduced .letter,html.motion-reduced .rinset,html.motion-reduced .fig.mini{transform:none!important}

/* high contrast option */
html.hc{--parch:#f4ecd8;--paper:#ffffff;--paper-hi:#ffffff;--ink:#000;--ink2:#2b2013;--line:#000;--brick:#6e2a1c}
html.hc body{background-image:none}
html.hc .paper,html.hc .deskcard{background:#fff}
.role h2.rtitle{margin:8px 0 4px;font-weight:normal;font-size:calc(22px*var(--ts))}
.title h2.big{font-weight:normal}
[tabindex="-1"]:focus-visible{outline:none}
.role.owner img{object-position:50% 22%}
.rhead{flex-wrap:wrap;gap:4px 8px;align-items:center}

/* ---------- labor crisis (strategy cards) ---------- */
.crtracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
@media (max-width:640px){.crtracks{grid-template-columns:1fr}}
.crt{border:2px solid var(--ink);background:var(--paper-hi);padding:8px 10px}
.crt .crl{display:flex;justify-content:space-between;gap:6px;font-family:var(--mono);font-size:calc(14px*var(--ts));font-weight:bold}
.crbar{height:12px;border:1.5px solid var(--ink);background:#fff;margin:4px 0}
.crbar i{display:block;height:100%;background:var(--green);transition:width .4s}
.crt.p .crbar i{background:var(--blue)}.crt.k .crbar i{background:var(--brick)}
.crt.warn{background:#f6e0d8;border-color:var(--bad)}
.crd{font-size:calc(14px*var(--ts));color:var(--ink2);line-height:1.3}
.crhud{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:calc(14px*var(--ts));background:var(--green2);color:var(--on-dark);padding:6px 12px;border:2px solid var(--ink)}
.cropp{border:3px solid var(--bad);background:#f6e3d8;padding:10px 14px;margin:10px 0;box-shadow:var(--shadow)}
.cropp.blocked{border-color:var(--ok);background:#e3eedc;text-decoration:none}
.cropp.blocked .crt1{text-decoration:line-through}
.crwho{font-family:var(--mono);font-size:calc(14px*var(--ts));color:var(--bad);text-transform:uppercase;letter-spacing:.06em}
.cropp.blocked .crwho{color:var(--ok)}
.crt1{display:block;font-size:calc(19px*var(--ts));font-weight:bold}
.cre{display:block;font-family:var(--mono);font-size:calc(14px*var(--ts))}
.crn{display:block;font-size:calc(14px*var(--ts));font-style:italic;color:var(--ink2)}
.crhand{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.crc{display:flex;flex-direction:column;gap:4px;text-align:left;border:2px solid var(--ink);background:var(--paper-hi);color:var(--ink);padding:10px 12px;min-height:110px;box-shadow:3px 3px 0 var(--ink);border-radius:8px;transition:transform .08s}
.crc:hover:not([disabled]){transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.crc[disabled]{opacity:.5;cursor:not-allowed}
.crc.blocks{border-color:var(--ok);box-shadow:inset 0 0 0 2px var(--ok),3px 3px 0 var(--ink)}
.crx{font-family:var(--mono);font-size:calc(14px*var(--ts));color:var(--ink2)}
.crc.blocks .crx{color:var(--ok);font-weight:bold}
.crlog{margin-top:10px;font-size:calc(15px*var(--ts));border-left:4px solid var(--gold);padding:4px 10px;background:var(--paper-hi);min-height:30px}
.crlog div{margin:3px 0}
.crcols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.crcols{grid-template-columns:1fr}}
.crlist{list-style:none;padding:0;margin:6px 0;font-size:calc(15px*var(--ts))}
.crlist li{margin:5px 0}
.crlist.miss{color:var(--ink2)}
.crout{margin:0 0 6px;font-size:calc(22px*var(--ts));font-weight:normal}
/* meters near the top are dangerous too */
@media (max-width:640px){
  .crt .crd{display:none} .crt{padding:6px 8px} .crtracks{gap:6px}
  .crhand{grid-template-columns:1fr 1fr;gap:8px} .crc{min-height:96px;padding:8px}
  .crt1{font-size:calc(17px*var(--ts))}
}

/* ---------- her meters: an account-book panel ---------- */
.rmeters{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;background:var(--paper-hi);border:2px solid var(--ink);padding:8px 12px;box-shadow:var(--shadow);
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(44,74,107,.12) 27px 28px)}
@media (max-width:560px){.rmeters{grid-template-columns:1fr;gap:2px}}
.rm{display:grid;grid-template-columns:22px 92px minmax(40px,1fr) 64px;align-items:center;gap:6px;min-height:26px}
.rm .rmi{font-size:calc(16px*var(--ts));text-align:center}
.rm .rmn{font-family:var(--mono);font-size:calc(14px*var(--ts))}
.rm .rmb{height:10px;border:1.5px solid var(--ink);background:#fff;position:relative}
.rm .rmb i{display:block;height:100%;background:var(--green);transition:width .5s}
.rm.purse .rmb i{background:var(--gold)}.rm.standing .rmb i{background:#9a7a2a}.rm.sister .rmb i{background:var(--brick)}.rm.learning .rmb i{background:var(--blue)}
.rm .rml{font-family:var(--mono);font-size:calc(14px*var(--ts));text-align:right;font-weight:bold}
.rm.low .rmb i{background:var(--bad)} .rm.low .rml{color:var(--bad)}
.rm.high .rmb i{background:repeating-linear-gradient(45deg,#e0a52c 0 6px,#a32a1e 6px 12px)} .rm.high .rml{color:var(--bad)}
/* wax seals on choices */
.rb{display:flex;flex-direction:column;gap:6px}
.rb.r{align-items:flex-end}.rb.l{align-items:flex-start}
.seals{display:inline-flex;gap:5px;flex-wrap:wrap}
.seal{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:11px;
  background:radial-gradient(circle at 35% 30%,#c2463a,#8b1e1e 70%);box-shadow:0 0 0 2px #6e1414,1px 2px 0 rgba(0,0,0,.35);transform:rotate(-8deg)}
.seal.big{width:30px;height:30px;font-size:15px}
.rb.lean{outline:3px solid var(--gold2);outline-offset:2px;transform:translateY(-2px)}

/* ---------- labor crisis: a card table ---------- */
.pc{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;font-family:var(--serif);color:var(--ink);
  width:150px;min-height:208px;padding:10px 11px 12px;border:2px solid var(--ink);border-radius:10px;
  background:var(--paper-hi);box-shadow:2px 3px 0 rgba(43,32,19,.45);list-style:none}
.pc.pale{background:linear-gradient(#fffaf0,#f4ead2)}
.pc .pc-ic{font-size:calc(26px*var(--ts));line-height:1}
.pc .pc-name{font-size:calc(16px*var(--ts));font-weight:bold;line-height:1.2}
.pc .pc-fx{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.pc .chip{font-family:var(--mono);font-size:calc(13px*var(--ts));font-weight:bold;line-height:1.2;padding:2px 5px;border-radius:4px;border:1.3px solid currentColor;background:rgba(255,255,255,.6)}
.pc .chip.up{color:var(--ok)} .pc .chip.dn{color:var(--bad)} .pc .chip.cost{color:var(--ink2);border-style:dashed}
.pc .pc-blk{font-family:var(--mono);font-size:calc(11.5px*var(--ts));color:var(--ink2);border-top:1px dashed var(--line);padding-top:5px}
.pc .pc-blk.on{color:var(--ok);font-weight:bold}
.pc .pc-foot{font-family:var(--mono);font-size:calc(12px*var(--ts));color:var(--ink2)}
.pc.dark{background:linear-gradient(#3a1814,#5e211a);color:var(--on-dark);border-color:#1a0a08;width:178px;min-height:236px}
.pc.dark .chip{background:rgba(0,0,0,.25);color:#f6b9a8} .pc.dark .chip.up{color:#b9e6b0}
.pc.dark .pc-note{font-size:calc(12.5px*var(--ts));font-style:italic;color:#e8d3b0;line-height:1.3}
.pc.dark.blocked{filter:grayscale(.7) brightness(.85)}
.pc .stamp{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);font-family:var(--mono);font-weight:bold;letter-spacing:.1em;
  text-transform:uppercase;font-size:calc(20px*var(--ts));color:var(--ok);border:3px solid var(--ok);border-radius:6px;padding:2px 10px;background:rgba(255,250,240,.92)}
.pc.back{background:repeating-linear-gradient(45deg,#d8c69a 0 8px,#cdb98a 8px 16px);color:var(--ink2);justify-content:space-between;opacity:.8}
.pc.ghost{border-style:dashed;background:transparent;box-shadow:none;color:rgba(243,230,196,.75);font-family:var(--mono);font-size:calc(13px*var(--ts));justify-content:center;text-align:center;border-color:rgba(243,230,196,.5)}
.pc.mini{width:136px;min-height:170px;height:auto;padding:8px 9px}
.pc>*{flex-shrink:0}
.pc.mini .pc-name{font-size:calc(14.5px*var(--ts))}
.pcgrid{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:6px 0 12px}
.crtable{display:grid;grid-template-columns:auto 182px 1fr;gap:18px;align-items:start;margin:10px 0;padding:14px 16px;border-radius:12px;
  background:radial-gradient(ellipse at 50% 30%,#4a6a48,#2a3f29 75%);border:3px solid #3b2a17;box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.crtable .crwho{font-family:var(--mono);font-size:calc(13px*var(--ts));color:var(--on-dark);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.crside{display:flex;flex-direction:column;gap:12px;color:var(--on-dark);font-family:var(--mono);font-size:calc(13px*var(--ts));min-width:96px}
.crstat{display:flex;flex-direction:column;gap:3px}
.crstat b{font-size:calc(18px*var(--ts))}
.pips{display:flex;gap:4px}
.pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--on-dark)}
.pips i.on{background:var(--gold2);border-color:var(--gold2)}
.pips.big i{width:16px;height:16px}
.crpile{width:62px;height:84px;border-radius:7px;border:2px solid #1a0a08;background:repeating-linear-gradient(45deg,#d8c69a 0 6px,#c4ae7c 6px 12px);
  box-shadow:3px 3px 0 #cdb98a,6px 6px 0 #b8a272;display:flex;align-items:center;justify-content:center}
.crpile span{background:var(--paper-hi);color:var(--ink);font-weight:bold;border-radius:4px;padding:1px 6px}
.crplayed{display:flex;flex-wrap:wrap;gap:12px}
.crplayed .pc{transform:rotate(var(--r))}
.crhand.fan{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px 0 6px;grid-template-columns:none}
button.pc.crc{cursor:pointer;min-height:208px;transform:rotate(var(--r)) translateY(var(--y));transition:transform .18s, box-shadow .18s}
button.pc.crc:hover:not(:disabled),button.pc.crc:focus-visible{transform:rotate(0) translateY(-14px);box-shadow:4px 8px 0 rgba(43,32,19,.45)}
button.pc.crc:disabled{opacity:.45;cursor:not-allowed}
button.pc.crc.blocks{border-color:var(--ok);box-shadow:0 0 0 3px var(--gold2),2px 3px 0 rgba(43,32,19,.45)}
@keyframes crDeal{from{transform:rotateY(90deg) translateY(-20px);opacity:0}to{transform:none;opacity:1}}
@keyframes crLand{from{transform:translateY(160px) rotate(0);opacity:0}to{transform:rotate(var(--r));opacity:1}}
.pc.deal{animation:crDeal .45s ease-out}
.pc.land{animation:crLand .35s ease-out}
@media (prefers-reduced-motion:reduce){.pc.deal,.pc.land{animation:none}}
@media (max-width:700px){
  .crtable{grid-template-columns:1fr 1fr;gap:12px;padding:10px}
  .crside{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .crpile{width:44px;height:58px}
  .pc{width:132px;min-height:184px} .pc.dark{width:100%;min-height:0}
  .crslot.you{grid-column:1/-1} .crslot:not(.you){grid-column:1/-1}
  button.pc.crc{min-height:184px;transform:none}
}

/* ---- 20-minute version: fast-forward banner and class discussion stops ---- */
.ffwd{display:inline-block;font-family:var(--mono);font-size:calc(14px*var(--ts));background:var(--green2);color:var(--gold2);padding:3px 10px;margin-bottom:10px;border:1.5px solid var(--ink)}
.stopcard{border-width:3px}
.stopcard h2{margin-top:4px}
.stopq{font-size:calc(19px*var(--ts));line-height:1.5;background:var(--paper-hi);border-left:5px solid var(--brick);padding:12px 16px 12px 40px;margin:12px 0}
.stopq li{margin:6px 0}
.stopcard textarea{width:100%;min-height:110px;font-family:var(--serif);font-size:calc(16px*var(--ts));padding:8px;border:1.5px solid var(--ink2);background:var(--paper-hi);color:var(--ink);margin-top:4px}

/* ---- status sheet (open any time from the top bar) ---- */
.statussheet .sheethead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.statussheet .sheethead h2{margin:0}
.statussheet h3{font-family:var(--serif);font-weight:normal;border-bottom:2px double var(--ink);margin:14px 0 4px}
.statussheet .lrow{font-size:calc(14px*var(--ts))}
.hist{list-style:none;padding:0;margin:6px 0 12px;max-height:46vh;overflow:auto;border:1.5px solid var(--ink2);background:var(--paper-hi)}
.hist li{padding:8px 12px;border-bottom:1px dotted var(--line);font-size:calc(14px*var(--ts))}
.hist li:first-child{background:#fff3cf}
.hist .hd{display:block;font-family:var(--mono);font-size:calc(12px*var(--ts));color:var(--brick);text-transform:uppercase;letter-spacing:.04em}
.albumbtn+.albumbtn{margin-top:8px}
.hist li{max-width:none;display:block}

/* meters that just changed: pulse and a ▲ / ▼ badge */
.flash-up{animation:fup 1.4s ease-out}.flash-dn{animation:fdn 1.4s ease-out}
@keyframes fup{0%,40%{background:#bfe8b4;box-shadow:0 0 0 4px #2f8a3a}100%{background:transparent;box-shadow:none}}
@keyframes fdn{0%,40%{background:#f6c3b8;box-shadow:0 0 0 4px #b3412f}100%{background:transparent;box-shadow:none}}
.dbadge{font-family:var(--mono);font-weight:bold;font-size:calc(14px*var(--ts));padding:0 6px;margin-left:6px;border-radius:3px;color:#fff;white-space:nowrap}
.dbadge.up{background:#2f8a3a}.dbadge.dn{background:#b3412f}
.meter .trk{height:14px}

/* bigger, bolder result chips everywhere */
.fx span{font-size:calc(16px*var(--ts));font-weight:bold;border-width:2px;padding:3px 9px}
.fx .up{background:#bfe8b4;color:#123d12}.fx .dn{background:#f6c3b8;color:#5a1208}
.fx span b{margin-right:2px}

/* celebration when a goal milestone is crossed */
.celebrate{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:60;background:var(--green2);color:#fff;border:4px solid var(--gold2);box-shadow:6px 6px 0 rgba(0,0,0,.35);padding:18px 28px;text-align:center;animation:cin .5s cubic-bezier(.2,1.4,.4,1);max-width:92vw;cursor:pointer}
.celebrate div{display:grid;gap:6px}
.celebrate .cbig{font-size:calc(30px*var(--ts));font-weight:bold;color:var(--gold2)}
.celebrate .cnum{font-family:var(--mono);font-size:calc(20px*var(--ts))}
.celebrate.out{opacity:0;transition:opacity .5s}
@keyframes cin{0%{transform:translateX(-50%) scale(.4);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
.motion-reduced .celebrate,.motion-reduced .dchip.pop,.motion-reduced .flash-up,.motion-reduced .flash-dn,.motion-reduced .gb-warn span{animation:none}
@media (prefers-reduced-motion: reduce){ :root:not(.motion-full) .celebrate,:root:not(.motion-full) .dchip.pop,:root:not(.motion-full) .flash-up,:root:not(.motion-full) .flash-dn{animation:none} }
@media print{ .celebrate{display:none} }
.celebrate{width:min(460px,88vw)}
}

/* ---- goals in the left panel ---- */
@media (min-width:821px){ #stats{position:sticky;top:10px;align-self:start;max-height:calc(100vh - 20px);overflow:auto} }
.goalpanel{display:grid;gap:8px;margin:-4px -4px 12px}
.lgbox{background:var(--green2);color:#fff;border:2px solid var(--ink);padding:10px 12px;box-shadow:2px 2px 0 var(--ink)}
.lgbox .lg-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:calc(13px*var(--ts));text-transform:uppercase;letter-spacing:.05em;color:var(--gold2);font-weight:bold}
.lgbox .lg-h b{font-size:calc(26px*var(--ts));color:var(--gold2);letter-spacing:0}
.lgbox .lg-n{font-size:calc(15px*var(--ts));font-weight:bold;line-height:1.3;margin:2px 0 6px}
.lg-trk{position:relative;height:18px;background:#0f1d0f;border:2px solid var(--gold2);border-radius:9px}
.lg-fil{height:100%;background:linear-gradient(90deg,#e0a52c,#f5d36b);border-radius:7px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.lg-trk i{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--on-dark);opacity:.5}
.lg-trk i.hit{background:#fff;opacity:1}
.lg-num{font-family:var(--mono);font-size:calc(15px*var(--ts));margin-top:5px}
.lg-how{font-size:calc(12px*var(--ts));opacity:.85}
.lgbox.done .lg-fil{background:linear-gradient(90deg,#5cb85c,#9be58a)}
.lgbox.done .lg-h,.lgbox.done .lg-h b{color:#9be58a}
.ygbox{border:2px solid var(--ink);background:#fff3cf;padding:8px 10px;box-shadow:2px 2px 0 var(--ink)}
.ygbox .yg-h{display:flex;justify-content:space-between;gap:6px;font-family:var(--mono);font-size:calc(12px*var(--ts));text-transform:uppercase;letter-spacing:.04em;color:var(--brick)}
.ygbox .yg-h b{color:var(--ink);text-transform:none;letter-spacing:0;font-size:calc(14px*var(--ts))}
.ygbox .yg-t{font-weight:bold;font-size:calc(15px*var(--ts));line-height:1.3;margin:3px 0}
.yg-trk{height:12px;border:2px solid var(--ink);background:#fff;margin-top:4px}
.yg-trk i{display:block;height:100%;background:var(--gold);transition:width .6s}
.yg-p{font-family:var(--mono);font-size:calc(13px*var(--ts));margin-top:2px}
.ygbox.ontrack .yg-trk i,.ygbox.met .yg-trk i{background:#2f8a3a}
.ygbox.met{background:#d6f0cc}.ygbox.miss{background:#f6d6cf}
.ygbox.big{margin:12px 0;padding:12px 14px}
.ygbox.big .yg-t{font-size:calc(19px*var(--ts))}
.yearplan{margin:6px 0 0}
.chbox{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.chbox .ch-h{width:100%;font-family:var(--mono);font-size:calc(12px*var(--ts));text-transform:uppercase;letter-spacing:.05em;color:var(--brick);font-weight:bold}
.chbox .dchip{font-size:calc(14px*var(--ts));padding:2px 7px}
.warnbox{display:grid;gap:4px}
.warnbox div{background:#ffe37a;color:#3a1a00;font-weight:bold;padding:4px 8px;border:2px solid #b3412f;font-size:calc(13px*var(--ts));line-height:1.3;animation:wblink 1.6s ease-in-out 3}
@keyframes wblink{50%{background:#ffb3a0}}
.deckgoal{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:calc(14px*var(--ts));background:var(--green2);color:#fff;padding:6px 10px;margin-bottom:8px;border:2px solid var(--ink)}
.deckgoal b{color:var(--gold2)}
.deckgoal .ok{color:#9be58a}
.goaltag{display:block;font-size:calc(12px*var(--ts));color:var(--gold2);font-weight:bold;margin-top:2px}
@media (max-width:820px){ .goalpanel{grid-column:1/-1;margin:0 0 8px} .lgbox .lg-h b{font-size:calc(20px*var(--ts))} }
.motion-reduced .warnbox div{animation:none}
/* "just changed" chips */
.dchip{font-family:var(--mono);font-weight:bold;font-size:calc(16px*var(--ts));padding:2px 10px;border:2px solid var(--ink);border-radius:4px;white-space:nowrap}
.dchip.up{background:#2f8a3a;color:#fff}.dchip.dn{background:#b3412f;color:#fff}
.dchip.pop{animation:dpop .7s ease-out}
@keyframes dpop{0%{transform:scale(1.5)}60%{transform:scale(.95)}100%{transform:scale(1)}}
/* mini games fit on one screen: the picture shrinks so the answers stay in view */
.loomstage{max-width:min(100%,max(340px,calc((100vh - 470px)*1.78)));margin:0 auto}
.loomcard>p.small,.card>p.small{margin:4px 0 8px}
.ygbox .yg-h{flex-wrap:wrap}.rm .rml .dbadge{margin-left:4px;font-size:calc(12px*var(--ts))}.rm{grid-template-columns:22px 92px minmax(40px,1fr) auto}

/* ---- tidy layout: less to scroll ---- */
.scenecard .season .ffwd{margin:0 8px 0 0;padding:1px 8px;font-size:calc(13px*var(--ts));vertical-align:1px}
.scenecard h2{margin:2px 0 10px}
.scenecard .cols{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px}
.scenecard .cols.single{grid-template-columns:1fr}
.scenecard .fig img{max-height:260px}
.scenecard .fig figcaption{font-size:calc(12px*var(--ts))}
.scenecard p{margin:0 0 10px}
.scenecard blockquote.q{margin:10px 0;padding:8px 12px;font-size:calc(16px*var(--ts))}
.lastseason{margin-bottom:10px;padding:6px 10px}
details.note{padding:6px 10px;margin:8px 0}
details.note summary{cursor:pointer;font-weight:bold}
.result{margin-top:10px;padding:10px 12px}
.ygline{margin:10px 0 0;padding:8px 12px;background:#fff3cf;border:2px solid var(--ink);font-size:calc(16px*var(--ts))}
@media (max-width:900px){ .scenecard .cols{grid-template-columns:1fr} .scenecard .fig img{max-height:190px} }
details.howto summary{cursor:pointer}
/* swipe deck: on a computer the left panel already shows the goals and meters */
@media (min-width:821px){
  .swipedeck .deckgoal,.swipedeck #rmeters{display:none}
  .wrap.deckmode .chbox{display:none}
  .rpic{height:190px}
  .rcard .rtext{font-size:calc(16px*var(--ts))}
}
.rref{font-size:calc(13px*var(--ts))}
.rhead{margin-bottom:4px}
/* documents: tighter paper so the answers sit closer to the text */
.paper{margin:4px 2px 12px;padding:14px 22px 12px}
.paper .dhead{font-size:calc(clamp(18px,2.6vw,24px)*var(--ts))}
.paper .dsub{margin:2px 0 8px;font-size:calc(12px*var(--ts))}
.paper .dtext{font-size:calc(16px*var(--ts));line-height:1.5}
.broadside .dtext:first-letter{font-size:calc(36px*var(--ts))}
.paper .dcite{margin-top:8px;font-size:calc(12px*var(--ts))}
.deskcard h2{margin:2px 0 8px}
.answers .opt{padding-top:8px;padding-bottom:8px}