@font-face{font-family:"Press Start 2P";src:url("fonts/press-start-2p.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url("fonts/pixelify-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans.woff2") format("woff2");font-weight:400 600;font-display:swap}
/* Layout: one screen. A slim top bar, then a wooden game cabinet that fills the rest of the window: the bet desk over
   the flight board on the left, the last flights, the airfield (which takes every pixel left) and the flight bar on
   the right. Rules live in a How to play panel. Phones get one column with the big button docked to the bottom edge;
   landscape phones keep the two columns. One dark look, like rh.farm. */
:root{
  color-scheme: dark;
  --ground:#0f1a0f; --soil:#101c10; --panel:#17241a; --inset:#0f1811; --line:#2c3a29; --rule:#4a4c37;
  --wood:#7a5230; --wood-dark:#3b2414; --wood-edge:#1e120a;
  --paper:#f2d182; --ink:#251b0e;
  --amber:#fcd34d; --cream:#ece8d4; --muted:#a9b39b; --brass:#dbc084;
  --leaf:#8fd65a; --leaf-ink:#13240f; --win:#a8e57f; --loss:#ee8a73; --warn:#f3b49b; --lost:#949d87; --lost-p:#c59a8b; --control:#76806a;
  --t-low:#5b3a2c; --t-mid:#2f5a2a; --t-high:#7a5a12;
  --t-bronze:#d0915c; --t-silver:#ccd3db; --t-gold:#f5c542;
  --f-pixel:"Press Start 2P", ui-monospace, Menlo, monospace;
  --f-label:"Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --f-num:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--ground)}
body{margin:0;color:var(--cream);font-family:var(--f-num);font-size:16px;line-height:1.5;font-variant-ligatures:none}
[hidden]{display:none!important}
img{max-width:100%}
.wrap{max-width:1560px;margin:0 auto;padding-inline:16px;padding-block:10px 16px;display:flex;flex-direction:column;gap:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
input{font:inherit;border-radius:0}
a{color:var(--brass)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
::selection{background:var(--amber);color:var(--ink)}
input{caret-color:var(--amber)}

/* header: one slim bar */
header.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.home{font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.home:hover{color:var(--cream);text-decoration:underline}
header.top h1{margin:0 auto 0 0;font-family:var(--f-pixel);font-weight:400;font-size:20px;line-height:1.25;color:var(--amber);text-shadow:3px 3px 0 var(--wood-edge);white-space:nowrap}
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bal{display:flex;align-items:center;gap:8px;background:var(--inset);border:2px solid var(--wood);padding:5px 10px 5px 7px;box-shadow:0 3px 0 var(--wood-edge)}
.bal img{width:22px;height:22px;display:block}
.bal b{font-family:var(--f-num);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;color:var(--cream);min-width:7ch;text-align:right}
.bal span{font-family:var(--f-num);font-size:13px;color:var(--muted)}
.bal.bump{animation:bump .36s steps(3) 1}
.house{font-family:var(--f-num);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
@keyframes bump{0%{transform:translateY(0)}33%{transform:translateY(-4px);border-color:var(--amber)}66%{transform:translateY(-2px);border-color:var(--amber)}100%{transform:translateY(0)}}
.chip{font-family:var(--f-num);font-weight:500;font-size:14.5px;background:transparent;border:2px solid var(--wood);color:var(--cream);padding:5px 10px;box-shadow:0 3px 0 var(--wood-edge)}
.chip:hover{background:var(--wood-dark)}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wood-edge)}
.sound{display:flex;align-items:center;gap:6px}
.sound input[type=range]{width:84px;accent-color:var(--amber)}

/* cabinet */
.cabinet{border:4px solid var(--wood-edge);box-shadow:0 0 0 4px var(--wood),0 0 0 8px var(--wood-edge),10px 12px 0 8px rgba(0,0,0,.4);background:var(--wood-dark);padding:10px}
.board{display:grid;grid-template-columns:300px minmax(0,1fr);gap:10px;align-items:stretch}
.left{display:flex;flex-direction:column;gap:10px;min-width:0}
.right{display:flex;flex-direction:column;gap:8px;min-width:0}

/* bet desk */
.desk{background:var(--panel);border:2px solid var(--wood-edge);box-shadow:inset 0 0 0 1px var(--rule);padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--inset);border:2px solid var(--wood-edge);padding:3px;gap:3px}
.tabs button{font-family:var(--f-num);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;padding:7px 4px;border:0;background:transparent;color:var(--muted)}
.tabs button[aria-pressed="true"]{background:var(--wood);color:var(--cream);box-shadow:inset 0 -3px 0 var(--amber)}
.tabs button:disabled{cursor:not-allowed}
.fields{display:grid;gap:8px;min-width:0;align-content:start}
.field{display:grid;gap:4px;min-width:0}
.lab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;color:var(--muted)}
.lab label,.lab > span:first-child{font-weight:500}
.lab label{color:var(--cream)}
.lab .hint{font-family:var(--f-num);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.inrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px}
.money{display:flex;align-items:center;gap:7px;background:var(--inset);border:2px solid var(--control);padding:0 9px;min-width:0}
.money:focus-within{outline:2px solid var(--brass);outline-offset:1px}
.money img{width:18px;height:18px;flex:none}
.money input{flex:1;width:0;min-width:0;background:transparent;border:0;color:var(--cream);font-family:var(--f-num);font-weight:500;font-size:17px;font-variant-numeric:tabular-nums;padding:8px 0;outline:none}
.money .suf{font-family:var(--f-num);color:var(--muted);font-size:16px}
.money.bad{border-style:dashed;border-color:var(--warn)}
.money.off{opacity:.45}
.step{min-width:44px;background:var(--wood-dark);border:2px solid var(--wood-edge);color:var(--cream);font-family:var(--f-num);font-weight:600;font-size:15px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.step:hover{background:var(--wood)}
.step:disabled{opacity:.4;cursor:not-allowed}
.step svg{width:18px;height:18px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square}
/* the cash-out's fine arrows: 0.01 a click, inside the field; the big chevrons beside it move a whole 1.00 */
.fine{display:grid;grid-template-rows:1fr 1fr;align-self:stretch;margin-right:-9px;border-left:2px solid var(--control)}
.fine button{width:26px;padding:0;background:transparent;border:0;color:var(--muted);display:grid;place-items:center}
.fine button + button{border-top:2px solid var(--control)}
.fine button:hover:not(:disabled){color:var(--cream);background:var(--wood-dark)}
.fine button:disabled{opacity:.4;cursor:not-allowed}
.fine svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:square}
.err{margin:0;font-family:var(--f-num);font-size:13px;color:var(--warn)}
.note{margin:0;font-size:12.5px;color:var(--warn)}
.capnote{margin:0;font-size:12.5px;color:var(--brass)}
.short{display:none}
.autosum{margin:0;padding:8px 10px;background:var(--inset);border:2px solid var(--control);font-size:14px;font-variant-numeric:tabular-nums;color:var(--cream)}
.autosum b{color:var(--amber)}
.profitline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px;font-size:14px;color:var(--muted)}
.profitline > span:first-child{font-weight:500;color:var(--muted)}
.profitline i{font-style:normal;font-size:12.5px;margin-left:6px;font-variant-numeric:tabular-nums}
.profitline b{display:flex;align-items:center;gap:5px;font-weight:600;font-size:15.5px;font-variant-numeric:tabular-nums;color:var(--win)}
.profitline b img{width:16px;height:16px}
.profitline b.dim{color:var(--muted);font-weight:400;font-size:13.5px}
.readout{background:var(--inset);border:2px solid var(--line);padding:6px 10px;font-family:var(--f-num);font-weight:500;font-size:16px;font-variant-numeric:tabular-nums;color:var(--win);min-height:38px;display:flex;align-items:center;gap:6px}
.readout.dim{color:var(--muted);font-weight:400;font-size:14px}
.switch{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-size:14px;min-height:28px}
.switch input{width:16px;height:16px;accent-color:var(--leaf);margin:0}
.autog{display:grid;gap:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px;align-items:stretch}
.seg button{font-family:var(--f-num);font-size:13.5px;padding:6px 8px;background:var(--inset);border:2px solid var(--line);color:var(--muted)}
.seg button[aria-pressed="true"]{border-color:var(--brass);color:var(--cream);background:#22301f}
.mini-in{display:flex;align-items:center;gap:6px;background:var(--inset);border:2px solid var(--control);padding:0 8px;min-width:0}
.mini-in:focus-within{outline:2px solid var(--brass);outline-offset:1px}
.mini-in input{flex:1;width:0;min-width:0;background:transparent;border:0;color:var(--cream);font-family:var(--f-num);font-size:15px;font-variant-numeric:tabular-nums;padding:7px 0;outline:none}
.mini-in span{font-family:var(--f-num);font-size:13px;color:var(--muted)}
.result{min-height:1.45em;margin:0;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-num);font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.result.win{color:var(--win)}
.result.loss{color:var(--loss)}
.go{display:grid;gap:2px;justify-items:center;width:100%;min-width:0;flex:none;padding:10px 10px 9px;border:3px solid var(--wood-edge);background:var(--leaf);color:var(--leaf-ink);box-shadow:0 5px 0 var(--wood-edge);text-align:center;position:relative}
.go .gm{font-family:var(--f-pixel);font-size:15px;line-height:1.4;letter-spacing:.02em}
.go .gs{font-family:var(--f-num);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;opacity:.85}
.go:hover:not(:disabled){filter:brightness(1.07)}
.go:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--wood-edge)}
.go.ghost{background:#3f5b2f;color:var(--cream)}
.go.cash{background:var(--amber);color:var(--ink);animation:glow .9s steps(2) infinite}
@keyframes glow{0%{box-shadow:0 5px 0 var(--wood-edge),0 0 0 0 rgba(252,211,77,.0)}50%{box-shadow:0 5px 0 var(--wood-edge),0 0 0 4px rgba(252,211,77,.35)}}
.go.cancel{background:#b98f5c;color:var(--ink)}
.go.stop{background:var(--loss);color:var(--ink)}
.go:disabled{opacity:.5;cursor:not-allowed}
.go .key{position:absolute;top:6px;right:7px;font-family:var(--f-num);font-size:10.5px;font-weight:600;line-height:1;padding:3px 5px;border:1px solid currentColor;opacity:.55}
@media (hover:none){.go .key{display:none}}
.go:not(.haskey) .key{display:none}
.refuel{font-family:var(--f-num);font-weight:500;font-size:14px;min-height:40px;padding:0 12px;background:transparent;border:2px solid var(--wood);color:var(--cream);box-shadow:0 3px 0 var(--wood-edge)}
.refuel:hover{background:var(--wood-dark)}
.refuel[hidden]{display:none}
.buy{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 12px;font-family:var(--f-num);font-weight:600;font-size:14.5px;white-space:nowrap;text-decoration:none;background:var(--amber);color:#2a1a0b;border:2px solid #a8741c;box-shadow:0 3px 0 var(--wood-edge)}
.buy:hover{background:#ffe07a}
.buy:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wood-edge)}
.buy:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.buy svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square}
.tabrow{display:contents}
.slipbuy{display:none}
.broke{display:grid;gap:8px;padding:10px;background:var(--wood-dark);border:2px dashed var(--amber)}
.broke[hidden]{display:none}
.broke p{margin:0;font-weight:600;font-size:14.5px;color:var(--amber)}
.broke small{font-size:12.5px;color:var(--muted)}
.brokerow{display:flex;flex-wrap:wrap;gap:8px}

/* flight board */
.flight{background:var(--panel);border:2px solid var(--wood-edge);box-shadow:inset 0 0 0 1px var(--rule);display:flex;flex-direction:column;flex:1 1 0;height:0;min-height:96px}
.ftabs{display:flex;align-items:center;gap:0;padding:8px 6px 0;flex-wrap:nowrap;overflow:hidden}
.ftabs button{flex:0 1 auto;white-space:nowrap;font-family:var(--f-num);font-weight:600;font-size:13.5px;padding:5px 7px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted)}
.ftabs button[aria-selected="true"]{color:var(--cream);border-bottom-color:var(--amber)}
.ftabs .count{font-family:var(--f-num);font-size:11px;color:var(--amber);margin-left:3px}
.ftabs button{position:relative}
.ftabs button.new::after{content:"";position:absolute;top:5px;right:1px;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 1px 2px rgba(0,0,0,.55)}
.fsum{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding:7px 12px;border-bottom:1px solid var(--rule);font-family:var(--f-num);font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.fsum b{color:var(--cream);font-weight:600}
.fsum .tag{font-size:12px;border:1px dashed var(--line);padding:0 6px;color:var(--muted)}
.rows{container-type:inline-size;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--wood) var(--inset)}
.r{display:grid;grid-template-columns:minmax(0,1fr) 62px 52px 66px;gap:6px;align-items:center;padding:4px 12px;font-family:var(--f-num);font-size:13.5px;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(74,76,55,.35)}
.r.h{color:var(--muted);font-size:12px;position:sticky;top:0;background:var(--panel);z-index:1;padding-block:6px}
.r .who{display:flex;align-items:center;gap:7px;min-width:0}
.r .who img{width:20px;height:20px;image-rendering:pixelated;flex:none}
.r .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r .n{text-align:right}
.r.cashed .x,.r.cashed .p{color:var(--win)}
.r.cashed.fresh{animation:flash .6s steps(3) 1}
@keyframes flash{0%{background:rgba(168,229,127,.28)}66%{background:rgba(168,229,127,.12)}100%{background:transparent}}
.r.lost{color:var(--lost)}
.r.lost .p{color:var(--lost-p)}
.r.me{background:rgba(252,211,77,.09);box-shadow:inset 0 0 0 1px rgba(252,211,77,.5)}
.r.me .who span{color:var(--amber);font-weight:600}
.r.click{cursor:pointer}
.r.click:hover{background:rgba(255,255,255,.04)}
.empty{padding:22px 14px;color:var(--muted);font-size:15px;text-align:center}
.stamps{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
.stamp{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;background:var(--inset);border:2px solid var(--line);padding:6px}
.stamp img{width:40px;height:40px;object-fit:contain;image-rendering:auto}
.stamp b{display:block;font-family:var(--f-label);font-weight:600;font-size:14.5px;line-height:1.2}
.stamp span{display:block;font-family:var(--f-num);font-size:11.5px;line-height:1.3;color:var(--muted)}
.stamp.got{border-color:var(--brass);background:#1f2d1b}
.stamp.got b{color:var(--amber)}
.stamp:not(.got) img{filter:grayscale(1) brightness(.55);opacity:.7}
@container (max-width: 420px){.stamps{grid-template-columns:minmax(0,1fr)}}
.sgroup{margin:0;padding:10px 12px 0;font-family:var(--f-pixel);font-weight:400;font-size:11px;line-height:1.6;color:var(--amber)}
.stamp em.tier{display:block;font-style:normal;font-family:var(--f-num);font-weight:600;font-size:10.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stamp b{overflow-wrap:anywhere}
.stamp.got.t-bronze{border-color:var(--t-bronze)}
.stamp.got.t-bronze em.tier{color:var(--t-bronze)}
.stamp.got.t-silver{border-color:var(--t-silver)}
.stamp.got.t-silver em.tier{color:var(--t-silver)}
.stamp.got.t-gold{border-color:var(--t-gold);background:#2b2a14}
.stamp.got.t-gold em.tier{color:var(--t-gold)}

/* right column */
.history{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;align-items:center;min-height:38px;padding:3px 3px 4px}
.history::-webkit-scrollbar{display:none}
@media (pointer:fine){.history{scrollbar-width:thin;scrollbar-color:var(--wood) transparent;padding-bottom:6px}.history::-webkit-scrollbar{display:block;height:6px}.history::-webkit-scrollbar-thumb{background:var(--wood)}}
.hx{scroll-snap-align:start}
.hx{flex:none;font-family:var(--f-num);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;padding:5px 9px;border:2px solid var(--wood-edge);color:var(--cream);box-shadow:0 2px 0 var(--wood-edge)}
.hx.t0{background:var(--t-low);color:#f2c7b8}
.hx.t1{background:#43442f;color:var(--cream)}
.hx.t2{background:var(--t-mid);color:#d9f5c4}
.hx.t3{background:var(--t-high);color:#ffeaa3}
.hx.t4{background:#8a5208;color:#fff6cf}
.hx.forced{border-style:dashed;border-color:var(--warn)}
.hx:first-child{border-color:var(--amber)}
.hx:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}
.hx.new{animation:slidein .3s steps(3) 1}
@keyframes slidein{0%{transform:translateX(-40px);opacity:.2}100%{transform:none;opacity:1}}
.stage{position:relative;width:100%;aspect-ratio:16/10;flex:1 0 auto;background:#5e87d9;border:3px solid var(--wood-edge);overflow:hidden}
.stage-load{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-family:var(--f-pixel);font-size:16px;color:#fbf6e6;text-shadow:3px 3px 0 var(--wood-edge);background:#1d2f57}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* who is still up there: boarding before takeoff, still flying out of everyone aboard in flight, got out after a stall */
.stage-count{position:absolute;left:8px;bottom:8px;margin:0;display:flex;align-items:center;gap:6px;font-family:var(--f-num);font-weight:600;font-size:14px;line-height:1;font-variant-numeric:tabular-nums;color:#f6efd8;background:rgba(14,20,12,.72);border:1px solid rgba(246,239,216,.3);padding:5px 9px;pointer-events:none}
.stage-count svg{width:17px;height:17px;fill:currentColor;opacity:.85}
.stage-count b{font-weight:700}
.stage-count span{color:#d8d2bb;font-weight:500}
.stage-tag{position:absolute;top:8px;right:8px;margin:0;font-family:var(--f-num);font-weight:600;font-size:11.5px;line-height:1.4;letter-spacing:.02em;color:#f6efd8;background:rgba(14,20,12,.72);border:1px solid rgba(246,239,216,.3);padding:3px 8px;pointer-events:none}
.tipline{display:none;margin:0;padding:6px 10px;background:var(--paper);color:var(--ink);border:2px solid var(--wood-edge);font-family:var(--f-num);font-weight:500;font-size:14.5px;line-height:1.35}
.tipline b{font-family:var(--f-label);font-weight:700;font-size:14px;margin-right:6px}
.fbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;font-family:var(--f-num);font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--muted);padding:0 2px}
.fbar b{color:var(--cream);font-weight:600}
.fbar button{background:none;border:0;padding:0;color:var(--brass);text-decoration:underline;text-underline-offset:3px;font-family:var(--f-num);font-size:13.5px}

/* toasts and flying coins */
.toasts{position:fixed;right:16px;top:64px;display:grid;align-content:start;gap:8px;z-index:35;pointer-events:none;max-width:calc(100vw - 32px)}
.toast{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;background:var(--panel);border:3px solid var(--wood-edge);box-shadow:0 0 0 2px var(--amber),6px 6px 0 2px rgba(0,0,0,.45);padding:8px 14px 8px 8px;animation:toastin .32s steps(4) 1}
.toast img{width:44px;height:44px;object-fit:contain}
.toast b{display:block;font-family:var(--f-num);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.toast span{display:block;font-family:var(--f-label);font-size:16px}
.toast.out{animation:toastout .3s steps(3) 1 forwards}
@keyframes toastin{0%{transform:translateX(120%)}100%{transform:none}}
@keyframes toastout{100%{transform:translateX(120%);opacity:0}}
.slipbar{display:contents}
.dockbal{display:none;width:142px;height:58px;align-content:center;gap:4px;padding:6px 9px;background:var(--inset);border:2px solid var(--wood);box-shadow:0 4px 0 var(--wood-edge);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dockbal span{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.dockbal b{font-size:14px;font-weight:600;color:var(--cream)}
.dockbal span + span b{color:#ffb35a}
.dockbal img{width:16px;height:16px;flex:none}
.coin{position:fixed;left:0;top:0;width:22px;height:22px;z-index:40;pointer-events:none;image-rendering:auto}

/* demo + notes + footer */
details.demo{position:fixed;right:16px;bottom:16px;z-index:30;max-width:min(640px,calc(100vw - 32px));max-height:72vh;overflow:auto;background:var(--soil);border:2px dashed var(--line);padding:8px 14px;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
details.demo summary{cursor:pointer;font-family:var(--f-pixel);font-size:11px;line-height:1.8;color:var(--muted)}
.demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.demo-row > span{font-size:14px;color:var(--muted);min-width:150px}
.dbtn{font-family:var(--f-num);font-size:14px;padding:6px 11px;background:var(--panel);border:2px solid var(--wood);color:var(--cream);box-shadow:0 3px 0 var(--wood-edge)}
.dbtn[aria-pressed="true"]{background:var(--wood);border-color:var(--amber)}
details.demo p{margin:12px 0 0;font-size:14px;color:var(--muted);max-width:75ch}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.notes.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--soil);border:2px solid var(--line);padding:16px 18px;display:grid;gap:10px;align-content:start}
.card h2{margin:0;font-family:var(--f-pixel);font-weight:400;font-size:12px;line-height:1.8;color:var(--amber)}
.card p,.card li{margin:0;font-size:15px;max-width:68ch}
.card ul{margin:0;padding-left:20px;display:grid;gap:6px}
.card .chip{justify-self:start}
.odds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.odds div{background:var(--ground);border:1px solid var(--line);padding:6px 4px;text-align:center;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.odds b{display:block;font-size:14px;color:var(--cream)}
.odds i{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}
.card .small{font-size:14.5px;color:var(--muted)}

/* provably fair dialog */
dialog.panel{max-width:min(760px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 40px);background:var(--panel);color:var(--cream);border:4px solid var(--wood-edge);box-shadow:0 0 0 4px var(--wood),0 0 0 8px var(--wood-edge),10px 12px 0 8px rgba(0,0,0,.45);padding:0}
dialog.panel::backdrop{background:rgba(6,10,6,.72)}
.fh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:2px solid var(--rule);position:sticky;top:0;background:var(--panel)}
.fh h2{margin:0;font-family:var(--f-pixel);font-weight:400;font-size:13px;line-height:1.7;color:var(--amber)}
.fb{padding:14px 18px 18px;display:grid;gap:14px}
dialog#help{max-width:min(980px,calc(100vw - 32px))}
.helpgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.helpgrid > .card:first-child{grid-row:span 2}
#liveCard{grid-column:1 / -1}
.helpfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin:0;color:var(--muted);font-size:14px;border-top:1px solid var(--rule);padding-top:12px}
.fb p{margin:0;font-size:15px;max-width:64ch}
.kv{display:grid;gap:3px}
.kv span{font-size:13.5px;color:var(--muted)}
.kv code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all;background:var(--inset);border:1px solid var(--line);padding:6px 8px;color:var(--cream)}
.kv b{font-family:var(--f-num);font-size:16px}
.ok{color:var(--win)}
/* the fairness panel's two tabs and its plain-words page */
.ptabs{display:flex;gap:2px;padding:8px 18px 0;border-bottom:2px solid var(--rule)}
.ptabs button{font-family:var(--f-num);font-weight:600;font-size:14.5px;padding:7px 10px;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;background:transparent;color:var(--muted)}
.ptabs button[aria-selected="true"]{color:var(--cream);border-bottom-color:var(--amber)}
.fb p.fhow-lead{font-size:16.5px;color:var(--cream)}
.fhow{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:fhow}
.fhow li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.5;max-width:66ch;counter-increment:fhow}
.fhow li::before{content:counter(fhow);font-family:var(--f-pixel);font-size:13px;display:grid;place-items:center;width:30px;height:30px;background:var(--inset);border:2px solid var(--wood);color:var(--amber)}
.fhow b{color:var(--cream)}
.fformula{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px;background:var(--inset);border:2px solid var(--line);font-size:14.5px}
.fformula span{color:var(--cream);font-weight:600}
.fformula i{font-style:normal;font-family:var(--f-pixel);font-size:12px;color:var(--amber)}
/* How to play's at-a-glance row and the keys */
.glance{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.glance li{font-size:13.5px;padding:4px 9px;background:var(--inset);border:1px solid var(--line);color:var(--muted)}
.glance b{color:var(--cream);font-weight:600}
kbd.k{font-family:var(--f-num);font-weight:600;font-size:12.5px;padding:1px 6px 2px;border:1px solid var(--wood);box-shadow:inset 0 -2px 0 rgba(0,0,0,.45);background:var(--wood-dark);color:var(--cream)}
/* the Top Crop board and the session stats in My bets */
.tops h3{margin:0;padding:10px 12px 4px;font-family:var(--f-pixel);font-weight:400;font-size:11px;line-height:1.6;color:var(--amber)}
.r.top{grid-template-columns:22px minmax(0,1fr) 58px 70px}
.r.top .rank{font-family:var(--f-pixel);font-size:10px;color:var(--muted)}
.r.top.first .rank{color:var(--gold)}
.fsum .tseg{display:inline-flex;gap:4px}
.fsum .tseg button{font-size:12.5px;line-height:1.4;padding:2px 9px;border-width:1px}
.r.big{grid-template-columns:minmax(0,1fr) 62px 74px}
.r.big .x,.r.big .p{color:var(--win)}
.r.big.fresh{animation:bigin .9s cubic-bezier(.16,1,.3,1) 1}
@keyframes bigin{0%{background:rgba(252,211,77,.32);transform:translateY(-6px)}60%{background:rgba(252,211,77,.12)}100%{background:transparent;transform:none}}
.mstats{display:grid;gap:7px;padding:8px 12px 10px;border-bottom:1px solid var(--rule)}
.mstats dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0}
.mstats dt{font-size:11.5px;color:var(--muted)}
.mstats dd{margin:0;font-family:var(--f-num);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;color:var(--cream)}
.spark{width:100%;height:36px;display:block;background:var(--inset);border:1px solid var(--line)}
.spark .zero{stroke:rgba(246,239,216,.28);stroke-width:1;stroke-dasharray:3 3;fill:none;vector-effect:non-scaling-stroke}
.spark .line{fill:none;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spark .line.up{stroke:var(--win)}
.spark .line.down{stroke:var(--loss)}
.bad{color:var(--loss)}
.fsel{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fsel select{font-family:var(--f-num);font-size:15px;background:var(--inset);color:var(--cream);border:2px solid var(--wood);padding:5px 8px}
.warnbox{border:2px dashed var(--warn);padding:10px 12px;color:var(--warn);font-size:15px}
.fdet{border-top:1px solid var(--rule);padding-top:12px}
.fdet summary{cursor:pointer;color:var(--brass)}
.fdet .grid{display:grid;gap:8px;margin-top:10px}
.fdet input{width:100%;min-height:36px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--inset);color:var(--cream);border:2px solid var(--control);padding:7px}

@media (min-width:901px), (min-width:640px) and (max-height:500px){
  .wrap{height:100vh;height:100svh;min-height:470px}
  .cabinet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .board{flex:1 1 auto;min-height:0}
  .left,.right{min-height:0}
  .stage{flex:1 1 auto;min-height:0;aspect-ratio:auto}
  .desk{flex:0 1 auto;min-height:0}
  .fields{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--wood) var(--inset)}
}
@media (max-width:1439px){
  header .buy svg{display:none}
}
@media (max-width:1199px){
  .home,.sound input[type=range],#btnHelp .long{display:none}
  header.top h1{font-size:16px}
}
@media (max-width:1100px){
  .bal .u2{display:none}
}
/* up to 900px wide the top bar has no room for the swap: Buy CROP rides beside the Manual / Auto tabs instead */
@media (max-width:900px){
  header .buy{display:none}
  .tabrow{display:flex;gap:8px;align-items:stretch}
  .tabrow .tabs{flex:1 1 auto}
  .slipbuy{display:inline-flex;min-height:0;padding:0 10px;font-size:14px}
}
@media (min-width:640px) and (max-width:900px) and (max-height:500px){
  .wrap{padding-block:6px 8px;gap:6px;min-height:0}
  .home,.sound input[type=range],#btnHelp{display:none}
  header.top h1{font-size:16px}
  .board{grid-template-columns:270px minmax(0,1fr);gap:8px}
  .cabinet{padding:6px}
  .flight{display:none}
}
@media (max-width:639px), (max-width:900px) and (min-height:501px){
  .wrap{padding-block-end:112px}
  details.demo{bottom:100px}
  .desk .go{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));width:auto;max-width:560px;margin-inline:auto;z-index:25}
  .dockbal{display:none}
  .result{min-height:0}
  .board{grid-template-columns:minmax(0,1fr)}
  .right{order:-1}
  .flight{flex:none;height:auto;min-height:0}
  .rows{max-height:420px}
}
@media (max-width:620px){
  .wrap{padding-inline:16px;padding-block:8px 112px;gap:8px}
  .home,#btnHelp .long,.hud .bal,#btnFair,.fbar > span:last-child{display:none}
  .tipline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;padding:5px 9px}
  header.top{flex-wrap:nowrap}
  header.top h1{font-size:16px}
  .wrap{padding-block-end:calc(var(--slip-h, 230px) + 12px)}
  .desk{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px));gap:6px;border-width:2px 0 0;box-shadow:0 -6px 0 rgba(0,0,0,.4),inset 0 0 0 1px var(--rule);max-height:80vh;overflow:auto}
  .desk .tabs button{min-height:36px;padding:4px}
  .switch .long,.profitline .long{display:none}
  .switch .short{display:inline}
  .desk .switch{min-height:0}
  details.demo{top:52px;bottom:auto}
  .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}
  .fields > .profitline,.fields > .capnote,.fields > #autoFields,.fields > .autosum{grid-column:1 / -1}
  .field .lab{font-size:12.5px}
  .field .lab .hint{display:none}
  .money{padding:0 7px}
  .money img{display:none}
  .step{min-width:34px}
  .money input,.mini-in input,.fdet input{font-size:16px}
  .result{display:none}
  .slipbar{display:grid;grid-template-columns:142px minmax(0,1fr);gap:8px}
  .dockbal{display:grid}
  .desk .go{position:static;width:100%;max-width:none;margin:0}
  .hud{gap:6px}
  .chip{font-size:14px;padding:4px 8px}
  .bal{padding:4px 8px 4px 6px}
  .bal b{font-size:15px;min-width:0}
  #btnFair{display:none}
  .sound input[type=range]{display:none}
  .cabinet{padding:6px}
  .stage{aspect-ratio:4/3}
  .desk{gap:8px}
  .tipline{display:block}
  .tabs button,.ftabs button{min-height:44px}
  .fsum .tseg button{min-height:40px;padding:6px 12px}
  .switch{min-height:44px}
  .hx{min-height:40px}
  .chip{min-height:40px}
  .fbar button{min-height:44px}
  .bal .u2{display:none}
  .helpgrid{grid-template-columns:minmax(0,1fr)}
  .r{grid-template-columns:minmax(0,1fr) 62px 50px 66px;padding-inline:9px;font-size:13px}
  .stamps{grid-template-columns:minmax(0,1fr)}
  .toasts{left:16px;right:16px;top:12px;bottom:auto}
}
/* the title screen, like a video game's: the airfield painting edge to edge under its own sky, the name and the goose
   up in the sky, a blinking prompt over the field. It owns the whole screen; the game waits behind it. */
dialog.intro{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(20px,7vh,72px) 16px 64px;border:0;color:var(--cream);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.6vh,24px);cursor:pointer;overflow:hidden;
  background:url("assets/airfield.webp") 30% 100% / cover no-repeat, linear-gradient(#3e62bd 0%, #5f86d6 30%, #a99db7 55%, #e2a37a 75%) #0d140d}
dialog.intro:not([open]){display:none}
dialog.intro::backdrop{background:#0d140d}
dialog.intro.out{opacity:0;transition:opacity .18s cubic-bezier(.16,1,.3,1)}
.intro-title{display:grid;justify-items:center;gap:10px;text-align:center}
.intro-plane{width:min(260px,56vw);height:auto;animation:introbob 1.2s steps(2,jump-none) infinite}
.intro-title h2{margin:0;font-family:var(--f-pixel);font-weight:400;font-size:64px;line-height:1.15;color:var(--amber);text-shadow:-4px 0 0 var(--wood-edge),4px 0 0 var(--wood-edge),0 -4px 0 var(--wood-edge),0 4px 0 var(--wood-edge),8px 8px 0 var(--wood-edge)}
.intro-tag{margin:0;font-weight:600;font-size:18px;color:var(--cream);text-shadow:0 2px 0 var(--wood-edge)}
.intro-start{margin-top:auto;margin-bottom:clamp(4px,7vh,90px);font-family:var(--f-pixel);font-size:16px;line-height:1.6;padding:12px 18px;background:transparent;border:0;color:var(--cream);text-shadow:-3px 0 0 var(--wood-edge),3px 0 0 var(--wood-edge),0 -3px 0 var(--wood-edge),0 3px 0 var(--wood-edge),5px 5px 0 var(--wood-edge);cursor:pointer;animation:introblink 1.2s steps(1,end) infinite}
.intro-start:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
.intro-start .tp{display:none}
@media (hover:none){.intro-start .kb{display:none}.intro-start .tp{display:inline}}
.intro-foot{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:5px 12px;max-width:calc(100% - 32px);background:rgba(13,20,13,.8);font-size:12.5px;color:var(--cream);white-space:nowrap}
@keyframes introblink{0%{opacity:1}72%{opacity:0}}
@keyframes introbob{0%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-6px)}}
@media (max-width:620px){.intro-title h2{font-size:40px}.intro-tag{font-size:16px}}
@media (max-height:500px){dialog.intro{padding-top:16px}.intro-plane{width:130px}.intro-title h2{font-size:40px}.intro-start{margin-bottom:28px}}
@media (prefers-reduced-motion: reduce){
  .r.big.fresh{animation:none}
  .go.cash,.bal.bump,.r.cashed.fresh,.hx.new,.toast,.toast.out,.intro-start,.intro-plane{animation:none}
  .intro-plane{transform:rotate(-8deg)}
}

.proof-output{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:18px 0}.contract-bet{padding:12px;border-top:1px solid var(--line);font-size:13px}.contract-bet button{margin-top:7px}.history .empty{font-size:12px;padding:8px}.result[role=status]{white-space:normal}#sessionPanel input{display:block;max-width:100%;width:100%;margin:8px 0;padding:8px;background:var(--dark,#101a11);color:var(--text,#ecebd6);border:2px solid var(--line)}#sessionPanel .chip{margin:4px 0}.local-note{font-size:12px;color:var(--muted)}.wallet-body{display:grid;gap:16px}.wallet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wallet-actions{display:flex;flex-wrap:wrap;gap:8px}.wallet-status{color:var(--amber);font-weight:700}.wallet-advanced{border-top:2px solid var(--line);padding-top:16px}.wallet-advanced summary{cursor:pointer;font-weight:700;line-height:1.5}.wallet-advanced[open]>p,.wallet-advanced .card{margin-top:14px}.wallet-advanced summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px}#sessionPanel .small{font-size:14px;color:var(--muted)}@media(max-width:620px){.wallet-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:620px){#btnWallet{display:none}#btnGo[data-setup=true] .gm{font-size:12px}}

.bet-heading{margin:0;padding:0 0 8px;color:var(--muted);font:600 13px/1.4 var(--f-num)}#btnWallet[hidden],#goSub[hidden]{display:none}#tipline{display:none}#btnGo .gm{font-size:clamp(14px,1.5vw,19px)}