:root{
  color-scheme:dark;
  /* colour, type and shape tokens live in theme.css (direction: DESIGN.md); only local layout variables are set
     here: --fs (canvas font unit), --cell, --bA, --bE (touch pad sizes) */
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  padding-block:max(14px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-text-size-adjust:100%;
}
#app{max-width:980px;margin:0 auto}
/* the device frame: flat dark tray, outline and a hard bottom edge */
.shell{
  background:var(--hud);border:var(--line) solid var(--outline);
  border-radius:var(--r-win);padding:12px 14px 16px;
  box-shadow:inset 0 var(--line) 0 var(--hud-hi),inset 0 calc(-1*var(--edge)) 0 var(--shade);
}
.brand{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 10px;font-size:calc(15px*var(--ts));color:var(--dim)}
.brand b{color:var(--accent);font-weight:400;font-size:16px}

/* HUD strip: dark ground, a 4px band of the season along its lower edge; each value sits in a stat cell */
.hud{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin:0 0 10px;padding:0 0 8px;
  font-size:calc(15px*var(--ts));line-height:1.5;
  border-bottom:4px solid var(--season);
  transition:border-color 600ms var(--ease);
}
.hud .cell{
  min-width:0;display:flex;align-items:center;gap:6px;padding:4px 10px;min-height:34px;
  background:var(--hud-2);color:var(--hud-ink);border-radius:var(--r-ctl);
  box-shadow:inset 0 1px 0 var(--hud-hi);
}
.hud .cell:empty{display:none}
.hud .lbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hud .val{display:flex;align-items:center;color:var(--hud-ink);overflow-wrap:anywhere;font-size:calc(16px*var(--ts));line-height:1.3;font-variant-numeric:tabular-nums}
.hud .loc{flex:1 1 150px}
.hud .loc .val{font-weight:600;color:var(--accent);transition:color 600ms var(--ease)}
.hud .acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
html.gt-guest .hud .coinc{display:none}
/* icon dots in the stat cells */
.coin{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--outline),inset -2px -2px 0 var(--coin-edge);margin-right:6px;flex:none}
.sm{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--outline);margin-right:6px;flex:none}
.sm.dusk{background:var(--dusk)}
.sm.night{background:transparent;box-shadow:0 0 0 1px var(--outline),inset -3px -2px 0 0 var(--moon)}
.badge{display:inline-block;padding:0 6px;border-radius:var(--r-ctl);font-size:calc(14px*var(--ts));line-height:1.5;background:var(--good);color:var(--paper);box-shadow:0 0 0 1px var(--outline)}
.badge.maling{background:var(--bad);color:var(--paper)}
.clantag{color:var(--gold)}

/* buttons (on the HUD): secondary = --hud-2 fill; primary = accent fill with an ink label. 40px, 44px on phones. */
button{font-family:var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
.btn{
  min-height:40px;padding:6px 12px;background:var(--hud-2);color:var(--hud-ink);
  border:var(--line) solid var(--outline);border-radius:var(--r-ctl);
  font-size:calc(15px*var(--ts));line-height:1.3;
  box-shadow:inset 0 1px 0 var(--hud-hi),inset 0 calc(-1*var(--edge)) 0 var(--shade);
  transition:background-color var(--t-press) var(--ease),transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease);
}
.btn:hover{background:var(--hud-3)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 var(--hud-hi)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.45}
.btn:disabled:hover{background:var(--hud-2)}
.btn:disabled:active{transform:none}
.btn.hot{background:var(--accent);color:var(--accent-ink)}
.btn.hot:hover{background:var(--accent-hi)}
.btn.hot:disabled:hover{background:var(--accent)}
.menubtn{display:none}

.bezel{background:var(--bezel);border-radius:var(--r-win);padding:12px;box-shadow:inset 0 var(--line) 0 var(--outline)}
#fit{width:100%;display:flex;justify-content:center}
#screen{position:relative;margin-inline:auto;line-height:0;background:var(--outline);box-shadow:0 0 0 var(--line) var(--outline);overflow:hidden;--fs:10px}
/* 2.5D view (mods/view3d.js): the WebGL world under the 2D canvas, which then only carries the overlays */
.gt3d{position:absolute;left:0;top:0}
html.gt-3d #cv{position:relative;touch-action:none}
/* the lab's trays, key hint and drag ring (lab3d.html), shown while the 2.5D view draws */
.gt3d-bar{position:absolute;top:16px;right:16px;z-index:5;display:none;flex-wrap:wrap;justify-content:flex-end;gap:8px;line-height:normal;pointer-events:none;max-width:calc(100% - 32px)}
html.gt-3d .gt3d-bar{display:flex}
.gt3d-tray{pointer-events:auto;display:flex;gap:6px;align-items:center;padding:6px;background:var(--hud);border:var(--line) solid var(--outline);border-radius:var(--r-win);box-shadow:inset 0 calc(-1 * var(--edge)) 0 var(--season)}
.gt3d-tray button{font:600 15px var(--font);height:36px;min-width:36px;padding:0 12px;color:var(--hud-ink);background:var(--hud-2);cursor:pointer;border:var(--line) solid var(--outline);border-radius:var(--r-ctl);
  box-shadow:inset 0 calc(-1 * var(--edge)) 0 var(--shade),inset 0 1px 0 var(--hud-hi);transition:transform var(--t-press) var(--ease)}
.gt3d-tray button:hover{background:var(--hud-3)}
.gt3d-tray button:active{transform:translateY(2px);box-shadow:none}
.gt3d-tray button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gt3d-tray button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.gt3d-hint{position:absolute;left:16px;bottom:16px;z-index:5;display:none;padding:8px 12px;background:var(--chip,rgba(20,21,42,.85));border-radius:var(--r-ctl);font:14px var(--font);line-height:normal;color:var(--hud-dim);white-space:nowrap;pointer-events:none}
html.gt-3d .gt3d-hint{display:block}
.gt3d-hint kbd{font:600 13px var(--font);color:var(--hud-ink);background:var(--hud-3);border:var(--line) solid var(--outline);border-radius:var(--r-ctl);padding:0 5px}
.gt3d-stick{position:fixed;z-index:1000;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;pointer-events:none;display:none;border:var(--line) solid var(--outline);background:color-mix(in srgb,var(--hud) 45%,transparent)}
.gt3d-stick i{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--accent)}
@media (max-width:1300px){html.gt-3d .gt3d-hint{display:none}} /* narrower, it would meet the hotbar */
html.gt-phone .gt3d-bar{top:8px;right:8px;max-width:calc(100% - 16px)}
html.gt-phone .gt3d-tray button{height:44px;min-width:44px;padding:0 8px}
#cv{display:block;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;touch-action:none}

/* floating labels / speech bubbles over the canvas */
#fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;line-height:1.35;font-size:calc(14px*var(--ts))}
.bub,.ntag{position:absolute;left:0;top:0;white-space:normal;text-align:center;will-change:transform}
.bub{max-width:min(150px,72%);width:max-content;background:var(--paper);color:var(--paper-ink);border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl);padding:3px 6px;overflow-wrap:anywhere}
.bub::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-4px;border:4px solid transparent;border-top-color:var(--paper-ink);border-bottom-width:0}
.ntag{background:var(--chip);color:var(--hud-ink);border-radius:var(--r-ctl);padding:1px 4px;font-size:calc(12px*var(--ts));white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}

/* dialog: a paper tray over the bottom of the game view; the speaker's name is a tab on top */
#dlg{position:absolute;left:6px;right:6px;bottom:6px;display:none;line-height:1.4;font-size:calc(var(--fs)*1.6*var(--ts));color:var(--paper-ink);background:var(--paper);
  border:var(--line) solid var(--paper-ink);border-radius:var(--r-win);
  box-shadow:inset 0 var(--line) 0 var(--paper-hi),inset 0 calc(-1*var(--edge)) 0 var(--shade);
  padding:calc(var(--fs)*1.1) calc(var(--fs)*1.6) calc(var(--fs)*1.3) calc(var(--fs)*1.3);min-height:calc(var(--fs)*1.7*2 + var(--fs)*2.2);cursor:pointer;user-select:none;-webkit-user-select:none}
#dlg.on{display:block}
#dtxt{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
#dtxt .h{visibility:hidden}
#dwho{position:absolute;left:10px;top:calc(var(--fs)*-1.9 - var(--line));background:var(--paper-ink);color:var(--paper);font-size:calc(var(--fs)*1.25*var(--ts));line-height:1;padding:calc(var(--fs)*.55) calc(var(--fs)*.8);border-radius:var(--r-ctl) var(--r-ctl) 0 0;display:none}
#dwho::after{content:attr(data-hearts);margin-left:.6em;color:var(--accent);letter-spacing:.05em}
#dwho.on{display:block}
/* the "more text" caret is static: nothing in the interface blinks on its own */
#dnext{position:absolute;right:calc(var(--fs)*.9);bottom:calc(var(--fs)*.8);width:0;height:0;border-left:calc(var(--fs)*.5) solid transparent;border-right:calc(var(--fs)*.5) solid transparent;border-top:calc(var(--fs)*.75) solid var(--paper-ink);display:none}
#dnext.on{display:block}

/* minimap overlay */
#map{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:var(--chip-strong);color:var(--hud-ink);line-height:1.5;cursor:pointer;padding:8px;font-size:calc(14px*var(--ts));text-align:center}
#map.on{display:flex}
#map h2{margin:0;font-family:var(--font-display);font-size:16px;font-weight:400;color:var(--accent)}
#mm{height:min(640px,calc(100% - 130px));width:auto;aspect-ratio:1;flex-shrink:0;max-width:100%;image-rendering:pixelated;border:var(--line) solid var(--outline);box-shadow:0 0 0 var(--edge) var(--hud-3);background:var(--hud)}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;color:var(--dim);font-size:calc(14px*var(--ts))}
.legend span{display:inline-flex;align-items:center}
.legend i{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:2px;box-shadow:0 0 0 1px var(--outline)}
.hint{color:var(--dim);font-size:calc(14px*var(--ts))}
#screen.short .legend,#screen.short .hint{display:none}
#screen.short #mm{height:min(260px,calc(100% - 60px))}

/* touch pad (desktop with a coarse pointer or a narrow window: opaque HUD keys; the phone layout glazes them, see phone.css) */
.pad{display:none;align-items:center;justify-content:space-between;margin:18px 6px 4px;user-select:none;-webkit-user-select:none;touch-action:none;--cell:52px;--bA:70px;--bE:54px}
@media (pointer:coarse),(max-width:760px),(max-height:500px){.pad{display:flex}.help,#mapbtn{display:none}}
.dpad{display:grid;grid-template-columns:repeat(3,var(--cell));grid-template-rows:repeat(3,var(--cell));gap:0}
.dp{background:var(--hud-2);border:var(--line) solid var(--outline);color:var(--hud-ink);font-size:14px;font-family:var(--font-display);padding:0;touch-action:none;position:relative;
  box-shadow:inset 0 1px 0 var(--hud-hi),inset 0 calc(-1*var(--edge)) 0 var(--shade)}
.dp:active,.dp.down{background:var(--hud-3)}
.dp:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dp.up{grid-column:2;grid-row:1;border-radius:var(--r-win) var(--r-win) 0 0}
.dp.left{grid-column:1;grid-row:2;border-radius:var(--r-win) 0 0 var(--r-win)}
.dp.right{grid-column:3;grid-row:2;border-radius:0 var(--r-win) var(--r-win) 0}
.dp.dn{grid-column:2;grid-row:3;border-radius:0 0 var(--r-win) var(--r-win)}
.dpad .mid{grid-column:2;grid-row:2;background:var(--hud-2);border:var(--line) solid var(--outline);border-width:0}
.dp::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border:8px solid transparent;transform:translate(-50%,-50%)}
.dp.up::after{border-bottom-color:var(--hud-ink);border-top-width:0;margin-top:-3px}
.dp.dn::after{border-top-color:var(--hud-ink);border-bottom-width:0;margin-top:3px}
.dp.left::after{border-right-color:var(--hud-ink);border-left-width:0;margin-left:-3px}
.dp.right::after{border-left-color:var(--hud-ink);border-right-width:0;margin-left:3px}
.ab{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.abrow{display:flex;align-items:flex-end;gap:8px}
/* A is the one thing to do (accent fill, ink label); E is secondary. Round, as on every gamepad. */
#btnA,#btnE{border-radius:50%;border:var(--line) solid var(--outline);touch-action:none;
  box-shadow:inset 0 1px 0 var(--hud-hi),inset 0 calc(-1*var(--edge)) 0 var(--shade);
  transition:background-color var(--t-press) var(--ease),transform var(--t-press) var(--ease)}
#btnA{width:var(--bA);height:var(--bA);background:var(--accent);color:var(--accent-ink);font-size:16px;font-family:var(--font-display)}
#btnE{width:var(--bE);height:var(--bE);background:var(--hud-2);color:var(--hud-ink);font-size:14px;font-family:var(--font-display);margin-bottom:calc(var(--bA)*.5)}
#btnA:active,#btnA.down{background:var(--accent-hi);transform:translateY(2px);box-shadow:inset 0 1px 0 var(--hud-hi)}
#btnE:active,#btnE.down{background:var(--hud-3);transform:translateY(2px);box-shadow:inset 0 1px 0 var(--hud-hi)}
#btnA:focus-visible,#btnE:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.help{margin:14px 4px 0;font-size:calc(14px*var(--ts));line-height:1.5;color:var(--dim);text-align:center}
.help kbd{font-family:inherit;color:var(--ink)}

/* narrow screens: compact HUD, secondary buttons move into the Menu button */
@media (max-width:560px){
  .brand{display:none}
  .hud{gap:6px 8px;margin-bottom:8px}
  .hud .loc{flex:1 1 96px}
  .btn.sec{display:none}
  .menubtn{display:inline-block}
  .hud .acts{margin-left:0;flex:1 1 100%}
  .hud .acts .hot{margin-left:auto}
  .seedc .val::before{content:"#";color:var(--dim)}
  .seedc .val{color:var(--dim)}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:800px){
  .btn.sec{display:none}
  .menubtn{display:inline-block}
}
@media (max-width:340px){
  .pad{--cell:40px;--bA:56px;--bE:44px;margin-inline:0}
  .abrow{gap:0}
  #btnE{margin-right:-4px}
}
@media (orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-height:500px){
  body{padding-block:8px}
  .shell{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:8px 10px 10px}
  .brand,.help{display:none}
  .hud{grid-column:1/-1;margin:0 0 6px;gap:4px 8px}
  .hud .acts{flex:0 1 auto;margin-left:auto}
  .bezel{grid-column:2;grid-row:2;padding:8px}
  .pad{display:contents}
  .dpad{grid-column:1;grid-row:2;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px)}
  .ab{grid-column:3;grid-row:2;gap:10px}
  #btnA{width:58px;height:58px}
  #btnE{width:44px;height:44px;margin-bottom:28px}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:800px){
  .seedc{display:none}
  .hud{gap:4px 8px}
}

/* ---------------------------------------------------------------- windows: a tray with a season header */
#mroot{position:static}
.mover{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  background:var(--scrim);font-family:var(--font)}
.mover.under{display:none}
.mbox{display:flex;flex-direction:column;width:min(100%,480px);max-height:100%;background:var(--paper);color:var(--paper-ink);
  border:var(--line) solid var(--paper-ink);border-radius:var(--r-win);
  box-shadow:inset 0 calc(-1*var(--edge)) 0 var(--shade);
  font-size:calc(15px*var(--ts));line-height:1.4;outline:none;
  animation:gt-open var(--t-open) var(--ease) both}
@keyframes gt-open{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.mbox.wide{width:min(100%,720px)}
.mhead{flex:none;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;min-height:44px;
  background:var(--season);color:var(--season-ink);border-radius:calc(var(--r-win) - var(--line)) calc(var(--r-win) - var(--line)) 0 0;
  transition:background-color 600ms var(--ease)}
.mtitle{margin:0;flex:1;font-family:var(--font-display);font-size:16px;font-weight:400;line-height:1.4;overflow-wrap:anywhere}
/* phones: the bitmap face at 16px wraps longer titles ("Titip Jual · Mbok Darmi") to two lines; the text face fits one */
@media (max-width:520px){.mtitle{font-family:var(--font);font-size:calc(20px*var(--ts));font-weight:700;line-height:1.2}}
.mx{flex:none;width:32px;height:32px;border:var(--line) solid var(--outline);border-radius:var(--r-ctl);background:var(--paper);color:var(--paper-ink);font-size:18px;line-height:1;padding:0;
  box-shadow:inset 0 calc(-2px) 0 var(--shade);transition:background-color var(--t-press) var(--ease),transform var(--t-press) var(--ease)}
.mx:hover{background:var(--paper-3)}
.mx:active{transform:translateY(2px);box-shadow:none}
.mbody{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 14px 8px}
.mbody p{margin:0 0 8px;overflow-wrap:anywhere}
.mfoot{flex:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:6px 14px 14px}
.mfoot:empty{display:none}

/* window buttons: secondary = ink fill, paper label; primary (one per window) = accent fill, ink label; danger = --bad */
.mbtn{min-height:40px;padding:6px 14px;border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl);background:var(--paper-ink);color:var(--paper);font-size:calc(15px*var(--ts));line-height:1.3;
  box-shadow:inset 0 calc(-1*var(--edge)) 0 var(--shade);
  transition:background-color var(--t-press) var(--ease),transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease)}
.mbtn:hover{background:var(--paper-dim)}
.mbtn:active{transform:translateY(2px);box-shadow:none}
.mbtn.primary{background:var(--accent);color:var(--accent-ink)}
.mbtn.primary:hover{background:var(--accent-hi)}
.mbtn.danger{background:var(--bad);color:var(--paper)}
.mbtn.danger:hover{background:color-mix(in srgb,var(--bad) 82%,white)}
.mbtn:disabled{opacity:.45}
.mbtn:disabled:hover{background:var(--paper-ink)}
.mbtn.primary:disabled:hover{background:var(--accent)}
.mbtn.danger:disabled:hover{background:var(--bad)}
.mbtn:disabled:active{transform:none;box-shadow:inset 0 calc(-1*var(--edge)) 0 var(--shade)}
.mbtn:focus-visible,.mx:focus-visible,.mbox input:focus-visible,.mbox select:focus-visible,.choice:focus-visible,.gt-card:focus-visible{outline:3px solid var(--paper-ink);outline-offset:2px}
.mx:focus-visible{outline-color:var(--season-ink)}
.mlist{display:flex;flex-direction:column;gap:6px}
.mlist .mbtn{text-align:left;width:100%}

/* rows are cells one tone step darker than the window, 6px apart */
.mrow{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:6px;background:var(--paper-2);border-radius:var(--r-ctl);box-shadow:inset 0 1px 0 var(--paper-hi)}
.mrow:last-child{margin-bottom:0}
.mrow .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.mrow .num{color:var(--paper-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.mrow canvas{flex:none;image-rendering:pixelated}
.mrow .mbtn{min-height:32px;padding:4px 10px}
.mmoney{display:inline-block;margin-bottom:8px;padding:3px 8px;background:var(--hud);color:var(--gold);border-radius:var(--r-ctl);font-variant-numeric:tabular-nums}
.mfield{display:block;margin:0 0 10px}
.mfield>span{display:block;margin-bottom:4px}
.dsec{margin:0 0 6px;padding:8px 10px;background:var(--paper-2);border-radius:var(--r-ctl);box-shadow:inset 0 1px 0 var(--paper-hi)}
.dsec:last-child{margin-bottom:0}
.dsec .mrow{background:var(--paper-3)}
.dsec h3{margin:0 0 6px;font-size:calc(16px*var(--ts));font-weight:600;color:var(--paper-ink)}
.dsec .dbtns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.dsec .dbtns .mbtn{min-height:32px;padding:4px 10px}
.dsec input[type=range]{width:100%;margin:6px 0;accent-color:var(--paper-ink)}
.dsec input[type=number],.mbox input[type=text],.mbox select{font:inherit;font-size:calc(16px*var(--ts));padding:6px 8px;border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl);background:var(--field);color:var(--paper-ink)}
.dsec input[type=number]{width:84px}
.mbox input[type=text]{width:100%;padding:8px}
.dsec label.dchk{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.dsec label.dchk input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--paper-ink)}
.mseg{display:flex;gap:6px;flex-wrap:wrap}
.mseg label{flex:1 1 120px;display:block;cursor:pointer}
.mseg input{position:absolute;opacity:0;pointer-events:none}
.mseg span{display:block;padding:8px;min-height:40px;border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl);background:var(--paper);text-align:center;transition:background-color var(--t-press) var(--ease)}
.mseg label:hover span{background:var(--paper-3)}
.mseg input:checked+span{background:var(--paper-ink);color:var(--paper)}
.mseg input:focus-visible+span{outline:3px solid var(--paper-ink);outline-offset:2px}
.mnote{color:var(--paper-dim)}
.choice{display:block;width:100%;text-align:left;margin:0 0 8px;padding:10px;border:var(--line) solid var(--paper-ink);border-radius:var(--r-win);background:var(--paper-2);color:var(--paper-ink);font-size:calc(15px*var(--ts));line-height:1.4;
  box-shadow:inset 0 1px 0 var(--paper-hi),inset 0 calc(-1*var(--edge)) 0 var(--shade);transition:background-color var(--t-press) var(--ease),transform var(--t-press) var(--ease)}
.choice b{display:block;font-size:calc(18px*var(--ts));font-weight:600;margin-bottom:4px}
.choice:hover{background:var(--paper-3)}
.choice:active{transform:translateY(2px);box-shadow:none}

/* toasts: dark chips, no blur, no shadow */
#toasts{position:fixed;top:var(--toastTop,max(8px,env(safe-area-inset-top,0px)));left:50%;transform:translateX(-50%);z-index:1200;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(92vw,420px)}
.toast{background:var(--chip);color:var(--hud-ink);border:var(--line) solid var(--outline);border-radius:var(--r-ctl);padding:6px 10px;font-size:calc(14px*var(--ts));line-height:1.5;text-align:center;overflow-wrap:anywhere;font-family:var(--font)}

/* ---------------------------------------------------------------- character screen (mods/charscreen.js) */
.gt-cs{position:absolute;inset:0;z-index:60;display:flex;padding:12px;background:var(--chip-strong);color:var(--hud-ink);overflow:auto;line-height:1.4;transition:background .3s}
/* phone: #screen is only the strip between the HUD and the pad, so picking a look takes the whole screen; the throw
   (.gt-cs-throw) goes back into #screen so the character still lands on the player */
html.gt-phone .gt-cs:not(.gt-cs-throw){position:fixed;z-index:1100;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}
html.gt-phone .gt-cs-card{gap:12px}
html.gt-phone .gt-cs-stage{min-height:150px}
.gt-cs-load{font-size:calc(16px*var(--ts))}
.gt-cs-card{margin:auto;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;justify-content:center;max-width:760px;width:100%}
.gt-cs-left,.gt-cs-right{flex:1 1 280px;display:flex;flex-direction:column;gap:12px;background:var(--paper);color:var(--paper-ink);border:var(--line) solid var(--paper-ink);border-radius:var(--r-win);padding:14px;border-top:10px solid var(--season);
  box-shadow:inset 0 calc(-1*var(--edge)) 0 var(--shade)}
.gt-cs-namerow{display:flex;align-items:center;gap:8px}
.gt-cs-name{flex:1;min-width:0;width:0;font:inherit;font-size:calc(20px*var(--ts));padding:6px 8px;border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl);background:var(--field);color:inherit}
.gt-cs-name:focus-visible,.gt-cs-sw:focus-visible,.gt-cs-go:focus-visible{outline:3px solid var(--paper-ink);outline-offset:2px}
.gt-cs-tag{font-size:calc(20px*var(--ts));color:var(--paper-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.gt-cs-stage{flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;background:var(--stage);border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl)}
.gt-cs-prev{width:128px;height:160px;image-rendering:pixelated}
.gt-cs-h{margin:0;font-size:calc(18px*var(--ts));font-weight:600}
.gt-cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gt-cs-sw{padding:4px;border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl);background:var(--paper-2);cursor:pointer;line-height:0;box-shadow:inset 0 1px 0 var(--paper-hi);transition:background-color var(--t-press) var(--ease)}
.gt-cs-sw:hover{outline:2px dashed var(--paper-dim);outline-offset:1px}
.gt-cs-sw canvas{width:100%;height:auto;image-rendering:pixelated}
.gt-cs-sw.on{background:var(--paper-3);box-shadow:0 0 0 1px var(--paper-ink)}
.gt-cs-msg{min-height:1.6em;margin:0;color:var(--bad);font-size:calc(14px*var(--ts))}
.gt-cs-go{margin-top:auto;font:inherit;font-size:calc(22px*var(--ts));font-weight:700;min-height:52px;padding:10px;border:var(--line) solid var(--paper-ink);border-radius:var(--r-ctl);background:var(--accent);color:var(--accent-ink);cursor:pointer;
  box-shadow:inset 0 calc(-1*var(--edge)) 0 var(--shade);transition:background-color var(--t-press) var(--ease),transform var(--t-press) var(--ease)}
.gt-cs-go:hover{background:var(--accent-hi)}
.gt-cs-go:active{transform:translateY(2px);box-shadow:none}
.gt-cs-go:disabled{opacity:.45;cursor:not-allowed}
.gt-cs-go:disabled:hover{background:var(--accent)}
.gt-cs-go:disabled:active{transform:none}
.gt-cs.gt-cs-throw{background:transparent;padding:0;pointer-events:none}
.gt-cs-anim{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.gt-cs.gt-cs-fade{background:transparent;transition:background .35s}
.gt-cs.gt-cs-fade .gt-cs-card{opacity:0;transition:opacity .3s}

@media (prefers-reduced-motion:reduce){
  .mbox{animation:none}
  .hud,.hud .loc .val,.mhead,.btn,.mbtn,.mx,.choice,.mseg span,.gt-cs,.gt-cs-sw,.gt-cs-go,#btnA,#btnE{transition:none}
}