/* Salary Pad - a Habbo-style office you ride: brass elevator on the left, four floors and a roof.
   Press Start 2P (words) / Ubuntu (text) / Ubuntu Mono (numbers). 4 px grid, steps() motion, no glow, no gradients. */
@font-face{font-family:"Press Start 2P";src:url(/assets/fonts/PressStart2P-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Ubuntu";src:url(/assets/fonts/Ubuntu-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Ubuntu";src:url(/assets/fonts/Ubuntu-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url(/assets/fonts/UbuntuMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url(/assets/fonts/UbuntuMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --wall:#F6E7C8;--wall2:#E9D2A6;--carpet:#E9A55B;--carpet2:#D88A3E;--wood:#B97A45;--woodD:#8A5530;--card:#FFF6E2;--ink:#3A2210;
  --or:#F07A1E;--orD:#B8530C;--gold:#F6C744;--goldD:#C99A1E;--brass:#D9A441;--brassD:#A97C2A;--blue:#4A90D6;--blueD:#2F64A8;--slate:#5B6577;--slateD:#424A58;
  --ps:"Press Start 2P",monospace;--ub:"Ubuntu",system-ui,sans-serif;--mono:"Ubuntu Mono",ui-monospace,monospace;
  --lw:150px;--s:3;--hand:pointer;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:500 16px/1.5 var(--ub);overflow-x:hidden;min-height:100vh}
img{image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%}
a{color:var(--orD);text-underline-offset:3px}
a,button,[role=button],[onclick],summary,label,select,.ca,input[type=file]{cursor:var(--hand)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blueD);outline-offset:3px}
.ps{font-family:var(--ps);font-weight:400;letter-spacing:0;text-transform:uppercase}
.num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:calc(var(--lw) + 8px);top:8px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);z-index:99;background:var(--card);border:4px solid var(--ink);padding:8px 12px;font:12px var(--ps);color:var(--ink)}
.skip:focus{width:auto;height:auto;clip:auto;overflow:visible}
.tb{color:var(--blueD)}.ts{color:var(--slate)}.dim{color:var(--wood)}.ok{color:var(--blueD);font-weight:700}

/* ---------------------------------------------------------------- plates (buttons) */
.pl{--bg:var(--card);--fg:var(--ink);--bev:var(--wall2);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px 14px;
  font:12px/1 var(--ps);text-transform:uppercase;color:var(--fg);background:var(--bg);border:4px solid var(--ink);box-shadow:inset 0 -6px 0 var(--bev),4px 4px 0 var(--ink);
  text-decoration:none;white-space:nowrap;transition:transform 80ms steps(1),background-color 80ms steps(1);user-select:none}
.pl:hover{background:var(--bgh,var(--bg));filter:none}
.pl:active,.pl.on{transform:translate(4px,4px);box-shadow:inset 0 -2px 0 var(--bev),0 0 0 var(--ink)}
.pl[disabled],.pl.off{--bg:var(--wall2);--fg:var(--wood);--bev:#D6BC8C;--bgh:var(--wall2);cursor:not-allowed}
.pl[disabled]:active{transform:none}
.pl.orange{--bg:var(--or);--fg:var(--card);--bev:var(--orD);--bgh:#F68B33}
.pl.cream{--bg:var(--card);--fg:var(--ink);--bev:var(--wall2);--bgh:#FFFBF0}
.pl.yes{--bg:var(--blue);--fg:var(--card);--bev:var(--blueD);--bgh:#5A9DE0}
.pl.no{--bg:var(--slate);--fg:var(--card);--bev:var(--slateD);--bgh:#6A7488}
.pl.brass{--bg:var(--brass);--fg:var(--ink);--bev:var(--brassD);--bgh:#E3B456}
.pl.big{min-height:52px;padding:14px 20px 18px;font-size:13px}
.pl.sm{min-height:36px;padding:6px 10px 10px;font-size:10px}
.pl.sq{padding-left:12px;padding-right:12px}
.pl .xg{width:16px;height:16px}
.pl.busy{cursor:progress}
.pl.yes.on,.pl.no.on{box-shadow:inset 0 -2px 0 var(--bev),0 0 0 var(--ink),0 0 0 4px var(--gold)}

/* name-tag inputs */
.tag{display:flex;align-items:center;background:var(--card);border:4px solid var(--ink);box-shadow:inset 0 4px 0 var(--wall2);min-height:44px}
.tag input,.tag textarea,.tag select{flex:1;min-width:0;border:0;background:transparent;font:700 18px/1.2 var(--mono);color:var(--ink);padding:8px 10px;outline:0}
.tag textarea{font:500 15px/1.4 var(--ub);resize:vertical}
.tag:focus-within{box-shadow:inset 0 4px 0 var(--wall2),0 0 0 3px var(--blueD)}
.tag .u,.tag .pre{font:9px/1 var(--ps);color:var(--wood);padding:0 8px}
.tag .pre{padding:0 0 0 10px;font:700 18px var(--mono);color:var(--ink)}
input::placeholder,textarea::placeholder{color:#B49A74;opacity:1}

/* CA plank */
.ca{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:4px solid var(--ink);padding:4px 4px 4px 12px;min-height:44px}
.ca b{font:10px var(--ps);color:var(--wood)}
.ca .num{font-size:18px}
.ca .cbtn{font:10px/1 var(--ps);background:var(--wall2);border:3px solid var(--ink);padding:9px 10px;color:var(--ink);min-height:34px}
.ca .cbtn:hover{background:var(--gold)}
.ca.copied .cbtn{background:var(--blue);color:var(--card)}
.ca.ca-off .num{font-weight:400;color:var(--wood)}
.carow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.carow .lab{font:10px var(--ps);color:var(--wood)}
.cachip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:3px solid var(--ink);padding:6px 8px;min-height:38px}
.cachip .num{font-size:16px}.cachip .cl{font:9px var(--ps);color:var(--wood)}
.cachip.copied{background:var(--blue);color:var(--card)}.cachip.copied .cl{color:var(--card)}
.carow .lk{font:9px var(--ps);color:var(--orD);padding:12px 4px}

/* ---------------------------------------------------------------- top bar (plates over the scene) */
.top{position:absolute;z-index:40;top:12px;left:calc(var(--lw) + 16px);right:16px;display:flex;align-items:center;gap:12px;pointer-events:none}
.top>*{pointer-events:auto}
.top .sp{flex:1;pointer-events:none}
.brand{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:5px 12px 5px 8px;text-decoration:none;color:var(--ink);min-height:48px}
.brand img{width:27px;height:35px}
.brand .wm{font:12px/1 var(--ps)}
.tnav{display:flex;background:var(--card);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tnav a{font:10px/1 var(--ps);color:var(--ink);text-decoration:none;padding:15px 12px;border-right:3px solid var(--wall2)}
.tnav a:last-child{border-right:0}
.tnav a:hover{background:var(--gold)}
.tnav a[aria-current]{background:var(--or);color:var(--card)}
.wbtn.on{--bg:var(--gold);--bev:var(--goldD)}
.wbtn .bl{font-family:var(--ps)}
.mbtn{display:none}

/* ---------------------------------------------------------------- the elevator column */
.lift{position:fixed;z-index:45;left:0;top:0;bottom:0;width:var(--lw);background:var(--brass);border-right:4px solid var(--ink);box-shadow:inset -8px 0 0 var(--brassD);
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0 12px;overflow-y:auto;scrollbar-width:none}
.lift::-webkit-scrollbar{display:none}
.car{position:relative;flex:none;width:calc(47px * var(--s));height:calc(172px * var(--s))}
.car-img{display:block;width:100%;height:100%}
.car .needle,.mdial .needle{position:absolute;left:calc(23px * var(--s));top:calc(12px * var(--s));width:calc(1px * var(--s));height:calc(9px * var(--s));background:var(--ink);
  transform-origin:50% 100%;transform:rotate(calc(-64deg + var(--step,0) * 32deg));transition:transform 320ms steps(3)}
.floors{position:absolute;inset:0}
.fl{position:absolute;left:calc(17px * var(--s));top:calc((36px + 21px * var(--i)) * var(--s));width:calc(12px * var(--s));height:calc(12px * var(--s));
  display:grid;place-items:center;text-decoration:none;color:var(--ink);font:calc(4px * var(--s))/1 var(--ps);border-radius:50%}
.fl span{transform:translate(1px,1px)}
.fl.lit{background:url(/assets/art/floorlit.webp) 0 0/100% 100%;image-rendering:pixelated}
.fl:hover{color:var(--orD)}
.fl:focus-visible{outline-offset:0}
.intercom{flex:none;width:calc(var(--lw) - 16px);background:var(--card);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px;display:flex;flex-direction:column;gap:6px}
.intercom.ring{animation:ring 480ms steps(4)}
@keyframes ring{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-4px)}}
.ic-h{display:flex;align-items:center;justify-content:space-between;font:9px/1 var(--ps);color:var(--wood);padding:2px 2px 0}
.ic-x{display:none;background:none;border:0;font:700 26px/1 var(--ub);padding:0 6px;color:var(--ink)}
.ic-coin select{width:100%;font:700 14px/1 var(--mono);color:var(--ink);background:var(--wall);border:3px solid var(--ink);padding:6px 4px;min-height:34px;border-radius:0;appearance:none;-webkit-appearance:none}
.ic-side{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink)}
.ic-side button{font:9px/1 var(--ps);border:0;background:var(--wall);padding:9px 0;color:var(--wood)}
.ic-side button+button{border-left:3px solid var(--ink)}
.ic-side button.on{background:var(--or);color:var(--card)}
.ic-side button[data-side=sell].on{background:var(--ink);color:var(--card)}
.ic-amt{min-height:40px;box-shadow:inset 0 3px 0 var(--wall2);border-width:3px}
.ic-amt input{font-size:16px;padding:6px 6px;width:100%}
.ic-amt .u{padding:0 4px;font-size:7px}
.ic-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ic-quick button,.ic-slip button{font:700 13px/1 var(--mono);background:var(--wall);border:3px solid var(--ink);padding:5px 0;min-height:30px}
.ic-quick button:hover,.ic-slip button:hover{background:var(--gold)}
.ic-q{margin:0;font-size:13px;min-height:18px;text-align:center;color:var(--ink)}
.ic-q span{color:var(--ink)}
.ic-slip{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:4px;align-items:center}
.ic-slip span{font:7px var(--ps);color:var(--wood)}
.ic-slip button.on{background:var(--ink);color:var(--card)}
.ic-go{width:100%;min-height:42px;padding:8px 6px 12px}
.ic-note{display:none;margin:0;font-size:11px;line-height:1.3;color:var(--wood);text-align:center}
.lift-plates{display:flex;gap:8px;flex:none}
.lift-plates .pl{min-height:40px;padding:8px 10px 12px;font-size:9px}
.mbar{display:none}

/* ---------------------------------------------------------------- floors */
main.building,main.room,.foot{margin-left:var(--lw)}
.floor{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;border-bottom:8px solid var(--ink)}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;z-index:0;max-width:none}
.fl-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:104px 40px 72px}
.splate{display:inline-flex;align-items:center;gap:14px;margin:0 0 24px;font:22px/1.1 var(--ps);background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:12px 18px 12px 12px}
.splate .fn{display:grid;place-items:center;width:40px;height:40px;background:var(--gold);border:4px solid var(--ink);border-radius:50%;font-size:14px}
.doors{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.doors i{position:absolute;top:0;bottom:0;width:50%;background:var(--brass);border:4px solid var(--ink);box-shadow:inset 0 0 0 8px var(--brassD);transform:translateX(-101%)}
.doors i+i{left:50%;transform:translateX(101%)}
.floor.arrived .doors i{animation:doorL 420ms steps(2) both}
.floor.arrived .doors i+i{animation-name:doorR}
@keyframes doorL{0%,45%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes doorR{0%,45%{transform:translateX(0)}100%{transform:translateX(101%)}}

/* L: lobby */
.lobby .scene{object-position:50% 0}
.nameplate{position:absolute;z-index:3;left:50%;bottom:6vh;transform:translateX(-50%);width:min(860px,calc(100% - 48px));background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:24px 28px 20px}
.name{margin:0;font:clamp(22px,4.2vw,60px)/1.1 var(--ps);white-space:nowrap;letter-spacing:0}
.one{margin:12px 0 16px;font:700 clamp(16px,1.6vw,20px)/1.35 var(--ub)}
.np-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.np-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:20px 0 0;border-top:4px solid var(--ink);padding-top:14px}
.np-stats div{padding:0 12px;border-left:3px solid var(--wall2)}
.np-stats div:first-child{padding-left:0;border-left:0}
.np-stats dt{font:9px/1.3 var(--ps);color:var(--wood);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-stats dd{margin:6px 0 0;font-size:clamp(20px,2vw,28px);line-height:1}
.demo{position:absolute;z-index:3;top:96px;right:28px;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:14px;background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:14px 16px}
.demo[hidden]{display:none}
.demo-tag{position:absolute;top:-14px;left:12px;font:10px/1 var(--ps);background:var(--ink);color:var(--card);padding:6px 8px}
.demo-clock img{width:70px;height:92px}
.demo-card{position:relative;display:block;width:48px;height:88px}
.demo-card img{width:48px;height:88px}
.demo-card.punch{animation:dpunch 900ms steps(3) both}
@keyframes dpunch{0%{transform:none}50%{transform:translate(-20px,12px)}100%{transform:none}}
.demo-out{display:flex;flex-direction:column;gap:8px;min-width:140px}
.demo-out .ps{font-size:16px}
.demo-out .num{font-size:15px}
.hole{position:absolute;width:8px;height:8px;left:8px;top:58px;background:transparent}
.hole.yes{background:var(--blueD);box-shadow:0 0 0 2px var(--ink)}
.hole.no{background:var(--slate);box-shadow:0 0 0 2px var(--ink)}

/* 2: roster */
.cork{background:url(/assets/art/tile-cork.webp) 0 0/192px 192px;image-rendering:pixelated;border:12px solid var(--wood);box-shadow:0 0 0 4px var(--ink),10px 10px 0 4px var(--ink);padding:20px 24px 36px}
.cork-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:28px}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{font:9px/1 var(--ps);background:var(--card);border:3px solid var(--ink);padding:12px 10px 10px;color:var(--ink);box-shadow:3px 3px 0 var(--ink);min-height:40px}
.tab:hover{background:var(--gold)}
.tab.on{background:var(--or);color:var(--card);transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.search{flex-direction:column;align-items:stretch;min-width:240px;border-color:var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--card)}
.search .tg{display:block;background:var(--or);color:var(--card);font:8px/1 var(--ps);padding:6px 10px;text-align:center}
.search input{font:700 16px var(--ub);padding:8px 10px;text-align:center}
.hooks{display:grid;grid-template-columns:repeat(auto-fill,256px);justify-content:center;gap:34px 30px;min-height:240px}
.badge{--b:2;position:relative;display:block;width:calc(128px * var(--b));height:calc(115px * var(--b));background:url(/assets/art/badgecard.webp) 0 0/100% 100% no-repeat;image-rendering:pixelated;color:var(--ink);text-decoration:none;transform-origin:50% 0}
.badge.b-blue{background-image:url(/assets/art/badgecard-blue.webp)}
.badge.b-slate{background-image:url(/assets/art/badgecard-slate.webp)}
.badge.b-gold{background-image:url(/assets/art/badgecard-gold.webp)}
.badge.big{--b:3}
.badge:hover{animation:swing 600ms steps(4)}
.badge.swing{animation:swing 1200ms steps(6) 2}
@keyframes swing{25%{transform:rotate(-3deg)}50%{transform:rotate(0)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.pin,.hook .pin{position:absolute;left:50%;top:-8px;width:16px;height:16px;transform:translateX(-50%);background:var(--brass);border:4px solid var(--ink);border-radius:50%;z-index:2}
.badge .band{position:absolute;left:calc(7px * var(--b));right:calc(7px * var(--b));top:calc(49px * var(--b));height:calc(14px * var(--b));display:flex;align-items:center;justify-content:space-between;font-size:calc(5px * var(--b));color:var(--card)}
.badge.b-gold .band{color:var(--ink)}
.badge .band em{font-style:normal}
.badge .ph{position:absolute;left:calc(11px * var(--b));top:calc(70px * var(--b));width:calc(35px * var(--b));height:calc(34px * var(--b));overflow:hidden;background:var(--wall2);display:grid;place-items:center}
.badge .ph img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.badge .ph.noimg b{font:calc(9px * var(--b))/1 var(--ps);color:var(--wood)}
.badge .bt{position:absolute;left:calc(51px * var(--b));top:calc(66px * var(--b));width:calc(72px * var(--b));height:calc(42px * var(--b));display:flex;flex-direction:column;justify-content:center;overflow:hidden;font-size:calc(6px * var(--b));line-height:1.2}
.badge .tk{font:700 calc(7.5px * var(--b))/1.1 var(--ub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge .nm{font:500 calc(5.6px * var(--b))/1.3 var(--ub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--woodD);margin-bottom:calc(1px * var(--b))}
.badge .kv{display:flex;justify-content:space-between;gap:4px;font-size:calc(5.8px * var(--b));line-height:1.25;white-space:nowrap}
.badge .kv i{font:normal calc(3.4px * var(--b))/1.6 var(--ps);color:var(--wood)}
.badge .cd{color:var(--orD)}
.hook{position:relative;width:256px;height:230px;border:4px dashed rgba(58,34,16,.35)}
.invite{position:relative;grid-column:1/-1;justify-self:center;max-width:460px;text-align:center;background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:28px 24px 24px}
.invite .ps{font-size:14px;margin:0 0 10px}
.invite p{margin:0 0 16px}

/* 3: the time clock */
.clockfl .scene{object-position:50% 30%}
.cointabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.ctab{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--mono);background:var(--card);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:10px 12px;min-height:42px}
.ctab:hover{background:var(--gold)}
.ctab.on{background:var(--ink);color:var(--card);transform:translate(3px,3px);box-shadow:none}
.ctab .dot{width:12px;height:12px;border:3px solid currentColor;background:var(--or)}
.dot.b-blue{background:var(--blue)}.dot.b-slate{background:var(--slate)}.dot.b-gold{background:var(--gold)}
.nocoin{background:var(--card);border:4px solid var(--ink);display:inline-block;padding:10px 14px;margin:0}
.tc{display:grid;grid-template-columns:400px 1fr;gap:28px;align-items:start}
.tc-machine{position:relative;height:420px;background:var(--wall);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:url(/assets/art/tile-wallpaper.webp) 0 0/192px 192px}
.tc-clock{position:absolute;left:28px;top:56px;width:245px;height:322px}
.tc-clock.jolt{animation:jolt 600ms steps(3)}
@keyframes jolt{33%{transform:translateY(4px)}66%{transform:translateY(-4px)}}
.rack{position:absolute;right:16px;top:16px;width:96px;height:120px;background:var(--wood);border:4px solid var(--ink);display:grid;grid-template-rows:repeat(3,1fr);gap:6px;padding:8px}
.rack i{background:var(--woodD);border:3px solid var(--ink)}
.pcard{position:absolute;right:28px;top:196px;width:72px;height:132px;z-index:2;transition:transform 450ms steps(3)}
.pcard img{width:72px;height:132px;display:block}
.pcard.ghost{opacity:.55}
.pcard.racked{transform:translate(0,-186px)}
.pcard.punch{animation:punch 1400ms steps(1) both}
@keyframes punch{0%{transform:translate(0,-186px)}20%{transform:translate(-160px,-40px)}35%{transform:translate(-160px,-36px)}50%{transform:translate(-160px,-32px)}65%{transform:translate(-160px,-28px)}85%{transform:translate(-160px,-40px)}100%{transform:none}}
.pc-t{position:absolute;left:4px;right:6px;top:46px;text-align:center;font-size:14px;line-height:1}
.pc-s{position:absolute;left:4px;right:6px;top:64px;text-align:center;font:7px/1 var(--ps);color:var(--wood)}
.pcard .hole{left:12px;top:92px;width:12px;height:12px}
.pc-stamp{position:absolute;left:30px;top:90px;font-size:15px;color:var(--blueD)}
.tc-panel{background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:20px 22px}
.tc-state{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-bottom:14px;border-bottom:4px solid var(--ink)}
.tc-state .ps{font-size:11px;width:100%;color:var(--wood)}
.tc-state .big{font-size:44px;line-height:1}
.tc-sub{font-size:14px;color:var(--woodD)}
.tally{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0 10px}
.ty{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-items:center}
.ty .stk{grid-row:1/4;position:relative;width:64px;height:96px}
.stk i{position:absolute;left:0;bottom:calc(var(--k) * 6px);width:36px;height:66px;background:url(/assets/art/punchcard-blue.webp) 0 0/100% 100%;image-rendering:pixelated;transform:translateX(calc(var(--k) * 3px))}
.stk.no i{background-image:url(/assets/art/punchcard-slate.webp)}
.ty .ps{font-size:10px}
.ty.yes .ps{color:var(--blueD)}.ty.no .ps{color:var(--slate)}
.ty .num{font-size:28px;line-height:1.1}
.ty .pc{font-size:15px;color:var(--wood)}
.quorum{display:grid;gap:6px;padding:4px 0 14px}
.qbar{position:relative;height:20px;background:var(--wall2);border:3px solid var(--ink)}
.qfill{position:absolute;left:0;top:0;bottom:0;background:var(--gold);transition:width 300ms steps(4)}
.qmark{position:absolute;top:-8px;bottom:-8px;width:4px;margin-left:-2px;background:var(--ink)}
.qlab{font-size:13px;color:var(--woodD)}
.steps{list-style:none;margin:0;padding:12px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:3px solid var(--wall2)}
.steps li{position:relative;padding:10px 0 0 0;border-top:6px solid var(--wall2);display:grid;gap:4px}
.steps li.done{border-top-color:var(--wood)}
.steps li.on{border-top-color:var(--or)}
.steps .ps{font-size:9px}.steps .num{font-size:13px;color:var(--woodD)}
.you{border-top:4px solid var(--ink);padding-top:14px;display:grid;gap:10px}
.yl{margin:0;font-size:15px}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.slots .pl{min-height:52px}
.punch{width:100%;min-height:52px;font-size:14px}
.lockrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lockrow .tag{flex:1;min-width:160px}
.more summary{font:9px var(--ps);color:var(--orD);padding:8px 0;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more[open]{display:grid;gap:8px}

/* 4: payroll */
.payroll .scene{object-position:50% 50%}
.pay{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.pay-belt{display:grid;grid-template-columns:170px 1fr 190px;align-items:center;gap:0;background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:20px}
.pot,.end{display:grid;justify-items:center;text-align:center;gap:6px}
.pot img{width:120px;height:138px}
.pot .ps,.end .ps{font-size:9px;color:var(--wood)}
.pot .gold{font-size:32px;line-height:1;background:var(--gold);border:4px solid var(--ink);padding:6px 10px 4px}
.pot .u{font-size:13px;color:var(--wood);margin-top:-4px}
.belt{position:relative;height:120px;margin:0 6px}
.rail{position:absolute;left:0;right:0;top:72px;height:22px;background:var(--ink);border-top:6px solid var(--slate);box-shadow:inset 0 -6px 0 var(--slateD)}
.env{position:absolute;left:0;top:22px;width:80px;height:76px;opacity:0}
.env.run[data-to=tray]{animation:envT 3600ms steps(12) infinite}
.env.run[data-to=fire]{animation:envF 3600ms steps(12) infinite}
@keyframes envT{0%{opacity:1;transform:translateX(-20px)}70%{opacity:1;transform:translate(var(--bw,200px),0)}85%{opacity:1;transform:translate(calc(var(--bw,200px) + 40px),-36px)}86%,100%{opacity:0;transform:translate(calc(var(--bw,200px) + 40px),-36px)}}
@keyframes envF{0%{opacity:1;transform:translateX(-20px)}70%{opacity:1;transform:translate(var(--bw,200px),0)}85%{opacity:1;transform:translate(calc(var(--bw,200px) + 40px),40px)}86%,100%{opacity:0;transform:translate(calc(var(--bw,200px) + 40px),40px)}}
.ends{display:grid;gap:12px}
.end{border:4px solid var(--wall2);padding:10px 6px;opacity:.55}
.end.on{border-color:var(--ink);opacity:1;background:var(--wall)}
.end img{width:80px;height:76px}
.end.fire img{width:98px;height:94px}
.end .num{font-size:20px}
.end .tc-sub{font-size:12px}
.shake{animation:shake 500ms steps(4)}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-4px)}}
.pay-side{display:grid;gap:16px;background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:20px 22px}
.split{display:grid;gap:10px}
.split div{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;border-bottom:3px solid var(--wall2);padding-bottom:10px}
.split b{font-size:36px;line-height:1}
.split div:first-child b{color:var(--orD)}
.fine{font-size:13px;color:var(--woodD);margin:0}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:0}
.ledger dt{font:8px/1.4 var(--ps);color:var(--wood)}
.ledger dd{margin:4px 0 0;font-size:17px}

/* 5: roof */
.roof{min-height:auto;background:var(--carpet);border-bottom:0;padding-bottom:56px}
.roofscene{position:relative;line-height:0}
.scene2{display:block;width:100%;height:auto;aspect-ratio:2/1}
.sign{position:absolute;left:37.4%;top:32.6%;width:13.8%;height:12.2%;transform:skewY(20.3deg);transform-origin:0 0;display:grid;place-items:center}
.sign span{font:calc((100vw - var(--lw)) * .0104)/1 var(--ps);color:var(--ink);white-space:nowrap;line-height:1}
.roofplate{position:relative;z-index:2;width:min(980px,calc(100% - 48px));margin:-72px auto 0;background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 26px}
.roofplate h2{margin:0;font-size:clamp(16px,2vw,24px)}

/* ---------------------------------------------------------------- inner pages */
main.room{position:relative;min-height:100vh;background:url(/assets/art/tile-wallpaper.webp) 0 0/256px 256px;image-rendering:pixelated;padding:104px 40px 80px}
main.room>*{max-width:1180px;margin-left:auto;margin-right:auto}
main.room>.splate{display:flex;width:max-content;max-width:100%}
.sheet{background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:18px 20px;margin-bottom:24px;overflow-x:auto;image-rendering:auto}
.sheet.center{text-align:center;display:grid;gap:12px;justify-items:center;padding:36px 20px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{font:8px/1.4 var(--ps);color:var(--wood);text-align:left;padding:8px 10px;border-bottom:4px solid var(--ink);white-space:nowrap}
.tbl td{padding:10px;border-bottom:3px solid var(--wall2);vertical-align:middle}
.tbl td.num{font-size:16px;white-space:nowrap}
.tbl a{color:var(--ink);text-decoration:none}
.tbl a:hover{color:var(--orD)}
.sub{font-size:12px;margin:28px 0 12px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;background:var(--ink);color:var(--card);padding:18px 32px}
.foot .brand{min-height:36px!important;background:transparent;border:0;box-shadow:none;color:var(--card);min-height:0;padding:0}
.foot .brand img{width:18px;height:24px}
.foot .brand .wm{font-size:10px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot nav a{display:inline-flex;align-items:center;min-height:36px;font:9px/1 var(--ps);color:var(--wall2);text-decoration:none}
.foot nav a:hover{color:var(--gold)}
.foot .fine{color:var(--wall2);font:9px var(--ps);margin-left:auto}
.foot .fine a{display:inline-flex;align-items:center;min-height:36px;color:var(--gold);font:700 13px var(--mono);text-decoration:none}

/* coin page */
.cp-head{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;margin-bottom:40px}
.cp-badge{padding-top:12px;min-height:345px;min-width:384px}
.crumb{font-size:9px;margin:0 0 10px;color:var(--wood)}
.crumb a{color:var(--orD);text-decoration:none}
.cp-title{margin:0 0 14px;font:700 clamp(26px,3vw,40px)/1.15 var(--ub);background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:12px 16px;display:inline-block}
.cp-ca{margin:0 0 16px;background:var(--card);border:4px solid var(--ink);padding:8px 10px;display:inline-block}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 6px;background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.facts div{padding:12px 14px;border-right:3px solid var(--wall2);border-bottom:3px solid var(--wall2)}
.facts dt{font:8px/1.4 var(--ps);color:var(--wood)}
.facts dd{margin:4px 0 0;font-size:17px}
.cp-sec{margin-bottom:48px}

/* launch */
.contract{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start}
.form,.preview{background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 24px;display:grid;gap:14px}
.fh{font-size:12px;margin:0 0 4px;color:var(--wood)}
.fld{display:grid;gap:6px}
.fl-l{font:9px/1 var(--ps)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tag.file{position:relative}
.tag.file input{position:absolute;inset:0;opacity:0}
.tag.file .fname{padding:10px;font:500 14px var(--ub);color:var(--woodD)}
.terms{margin:4px 0;padding:14px 16px 14px 34px;background:var(--wall);border:3px solid var(--wall2);display:grid;gap:6px;font-size:15px}
.fee{margin:0;font-size:15px}.fee b{font-size:18px}
.done{margin:0;font-weight:700}
.preview{justify-items:center;position:sticky;top:96px}
.pv-note{margin:0;font-size:14px;color:var(--woodD);text-align:center}

/* stats + docs */
.killer{font:700 clamp(22px,3vw,38px)/1.3 var(--ub);background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 26px;margin:0 auto 24px}
.killer .num{background:var(--gold);padding:0 6px;border:3px solid var(--ink)}
.bigstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 auto 24px}
.bigstats div{background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:16px}
.bigstats dt{font-size:8px;color:var(--wood)}
.bigstats dd{margin:8px 0 0;font-size:26px;line-height:1}
.doc{display:grid;gap:0}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.toc a{font-size:9px;background:var(--card);border:3px solid var(--ink);padding:10px;color:var(--ink);text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.toc a:hover{background:var(--gold)}
.doc h2{font-size:14px;margin:0 0 14px}
.doc p,.doc li,.doc dd{font-size:16px;max-width:76ch}
.hw{margin:0;padding-left:22px;display:grid;gap:10px}
.kvs{margin:0;display:grid;gap:10px}
.kvs div{display:grid;grid-template-columns:150px 1fr;gap:12px;border-bottom:3px solid var(--wall2);padding-bottom:8px}
.kvs dt{font:9px/1.6 var(--ps);color:var(--wood)}.kvs dd{margin:0}
[id]{scroll-margin-top:88px}

/* 404 */
.nfroom{padding:0!important;min-height:100vh;position:relative;overflow:hidden}
.nfscene{position:absolute;inset:0}
.nfplate{bottom:10vh}
.nfplate h1{font-size:clamp(16px,2.6vw,30px);margin:0}

/* toasts + tooltip (sticky notes) + wallet dialog */
.tstack{position:fixed;z-index:80;right:16px;bottom:16px;display:grid;gap:10px;width:min(380px,calc(100vw - 32px))}
.toast{position:relative;background:var(--card);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:12px 40px 12px 14px;border-left:12px solid var(--or);font-size:15px;display:grid;gap:4px}
.toast.ok{border-left-color:var(--blue)}.toast.err{border-left-color:var(--slate)}
.toast a{font-size:13px}
.toast .tx{position:absolute;right:4px;top:4px;background:none;border:0;font:700 22px/1 var(--ub);width:32px;height:32px}
.tip{position:fixed;z-index:90;max-width:260px;background:var(--card);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 10px;font-size:14px;pointer-events:none}
.dlg{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--card);color:var(--ink);padding:22px;width:min(420px,calc(100vw - 32px));font-family:var(--ub)}
.dlg::backdrop{background:rgba(58,34,16,.55)}
.dlg h2{font:14px/1.3 var(--ps);margin:0 0 16px}
.dlg-x{position:absolute;right:8px;top:8px;width:40px;height:40px;background:none;border:0;font:700 26px/1 var(--ub);color:var(--ink)}
.wp-list{display:grid;gap:8px}
.wp-item{display:flex;align-items:center;gap:12px;background:var(--wall);border:3px solid var(--ink);padding:10px 12px;font:700 16px var(--ub);text-align:left;min-height:52px}
.wp-item:hover{background:var(--gold)}
.wp-item img{width:32px;height:32px;image-rendering:auto}
.wp-dot{width:32px;height:32px;background:var(--or);border:3px solid var(--ink)}
.wp-get{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:14px}
.wp-cur{font-size:15px}.wp-err{color:var(--orD);font-weight:700}
.wp-off{margin-top:14px;font:10px var(--ps);background:var(--card);border:3px solid var(--ink);padding:12px}

/* ---------------------------------------------------------------- short screens: elevator at x2 */
@media (max-height:860px) and (min-width:900px){:root{--s:2}}

/* ---------------------------------------------------------------- tablet + phone */
@media (max-width:1180px){
  .tc{grid-template-columns:1fr}
  .tc-machine{max-width:400px;justify-self:center;width:100%}
  .pay{grid-template-columns:1fr}
  .contract{grid-template-columns:1fr}
  .preview{position:static}
  .tnav a{padding:15px 8px}
}
@media (max-width:899px){
  :root{--lw:0px}
  .lift{position:static;width:auto;height:auto;padding:0;background:none;border:0;box-shadow:none;overflow:visible;display:block}
  .car,.lift-plates{display:none}
  .intercom{position:fixed;z-index:70;left:0;right:0;bottom:0;width:auto;transform:translateY(110%);visibility:hidden;transition:transform 240ms steps(3),visibility 0s 240ms;padding:14px 16px calc(16px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -4px 0 var(--ink);border-width:4px 0 0}
  body.ic-open .intercom{transform:none;visibility:visible;transition:transform 240ms steps(3)}
  .ic-h{font-size:11px}.ic-x{display:grid;place-items:center;width:44px;height:44px}
  .ic-coin select{font-size:17px;min-height:44px}
  .ic-side button{font-size:11px;padding:14px 0}
  .ic-amt input{font-size:20px}.ic-amt .u{font-size:9px}
  .ic-quick button,.ic-slip button{font-size:16px;min-height:42px}
  .ic-slip span{font-size:9px}
  .ic-go{min-height:52px;font-size:13px}
  .mbar{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;background:var(--brass);border-top:4px solid var(--ink);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .mdial{--s:1;position:relative;width:44px;height:44px;flex:none;background:var(--card);border:4px solid var(--ink);border-radius:50%}
  .mdial .needle{left:18px;top:6px;width:3px;height:16px}
  .mfl{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--card);border:4px solid var(--ink);font:11px/1 var(--ps);color:var(--ink);text-decoration:none}
  .mfl.lit{background:var(--gold)}
  .mbuy{margin-left:auto;min-height:44px;padding:8px 14px 12px}
  body{padding-bottom:72px}
  .tstack{bottom:84px}
  .top{left:10px;right:10px;top:10px;gap:8px}
  .foot .brand .wm{display:inline}
  .brand .wm{display:none}
  .brand{min-height:44px;padding:4px 8px}
  .tnav{display:none;position:absolute;top:66px;right:10px;flex-direction:column;z-index:50}
  body.menu-open .tnav{display:flex}
  .tnav a{padding:16px 18px;border-right:0;border-bottom:3px solid var(--wall2)}
  .mbtn{display:grid;gap:4px;align-content:center;justify-items:center;width:48px;height:48px;background:var(--card);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:0}
  .mbtn i{display:block;width:20px;height:4px;background:var(--ink)}
  .top .pl{min-height:48px}
  .fl-in{padding:84px 16px 56px}
  .splate{font-size:15px;padding:10px 12px 10px 10px;gap:10px}
  .splate .fn{width:32px;height:32px;font-size:11px}
  .lobby .scene{object-position:60% 0}
  .nameplate{bottom:84px;width:calc(100% - 24px);padding:16px 14px 14px;box-shadow:6px 6px 0 var(--ink)}
  .one{font-size:15px;margin:10px 0 8px}
  .np-row{gap:10px}
  .np-row.btns .pl.big{min-height:46px;padding:10px 12px 14px;font-size:11px}
  .np-stats{grid-template-columns:1fr 1fr 1fr;margin-top:14px;padding-top:10px}
  .np-stats div{padding:0 6px}
  .np-stats dt{font-size:7px;white-space:normal}
  .np-stats dd{font-size:16px}
  .demo{top:72px;right:12px;left:12px;grid-template-columns:auto auto 1fr;padding:10px 12px;gap:10px}
  .demo-clock img{width:35px;height:46px}.demo-card,.demo-card img{width:24px;height:44px}
  .demo-card .hole{left:4px;top:29px;width:5px;height:5px}
  .demo-out .ps{font-size:12px}.demo-out .num{font-size:13px}
  .cork{padding:14px 10px 26px;border-width:8px}
  .cork-bar{flex-direction:column;align-items:stretch}
  .search{min-width:0}
  .hooks{grid-template-columns:256px;gap:28px}
  .tc-machine{height:360px}
  .tc-clock{left:12px;top:40px;width:210px;height:276px}
  .pcard{right:12px;top:180px}
  .pcard.racked{transform:translate(-4px,-170px)}
  .tc-panel{padding:16px 14px}
  .tc-state .big{font-size:34px}
  .tally{gap:8px}
  .ty{grid-template-columns:1fr;justify-items:start}
  .ty .stk{grid-row:auto;height:84px}
  .ty .num{font-size:22px}
  .steps .num{font-size:12px}
  .pay-belt{grid-template-columns:1fr;gap:12px;padding:16px}
  .belt{height:110px}
  .ends{grid-template-columns:1fr 1fr}
  .pay-side{padding:16px 14px}
  .split b{font-size:28px}.split div{grid-template-columns:72px 1fr}
  .roofplate{margin-top:-24px;padding:16px 14px;width:calc(100% - 24px)}
  .sign{display:none}
  main.room{padding:84px 12px 40px}
  .cp-head{grid-template-columns:1fr;gap:20px}
  .cp-badge{min-width:0;min-height:230px;justify-self:center}
  .cp-badge .badge.big{--b:2}
  .facts{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  .preview .badge.big{--b:2}
  .bigstats{grid-template-columns:1fr 1fr}
  .kvs div{grid-template-columns:1fr;gap:4px}
  .foot{padding:16px 16px 20px}
  .foot .fine{margin-left:0}
  .killer{padding:16px}
  .nfplate{bottom:96px}
}
@media (max-width:360px){
  .hooks{grid-template-columns:232px}
  .badge{--b:1.8}
  .ca .num{font-size:15px}
  .np-row.btns .pl.big{font-size:10px;padding:10px 9px 14px}
  .pl{white-space:normal;text-align:center}
}
/* 4K / zoom-out: content stays in a frame, scenes cover */
@media (min-width:2000px){.fl-in{max-width:1400px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .env{opacity:0}
}

/* how it works: the payroll film, own player */
.film{position:relative;padding:44px 16px 56px;background:var(--wall2);border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.ftitle{margin:0 auto 22px;max-width:980px;font:14px/1.3 var(--ps);color:var(--ink);text-transform:uppercase}
.player{position:relative;max-width:980px;margin:0 auto;background:var(--card);border:6px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:14px}
.vp-scr{position:relative;background:var(--ink);border:5px solid var(--ink);aspect-ratio:16/9}
.vp-scr video{display:block;width:100%;height:100%;object-fit:contain;background:var(--wall);cursor:pointer}
.vp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:12px}
.vp-big:active{transform:translate(calc(-50% + 4px),calc(-50% + 4px))}
.vp-tri{display:inline-block;width:0;height:0;border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}
.vp-pp.on .vp-tri{width:14px;height:16px;border:0;border-left:5px solid currentColor;border-right:5px solid currentColor}
.vp-bar{display:flex;align-items:center;gap:10px;margin-top:16px}
.vp-bar .pl{font-size:10px;min-height:44px}
.vp-pp{width:52px;padding:10px 0 14px}
.vp-tl{position:relative;flex:1;height:34px;background:var(--wall);border:5px solid var(--ink);cursor:pointer;touch-action:none}
.vp-fill{position:absolute;left:0;top:0;bottom:0;max-width:100%;background:var(--or)}
.vp-k{position:absolute;top:-10px;width:16px;height:48px;margin-left:-8px;background:var(--gold);border:4px solid var(--ink)}
.vp-t{min-width:112px;text-align:center;background:#fff;border:4px solid var(--ink);color:var(--ink);padding:8px;font:700 15px var(--mono)}
.vp-vol{display:flex;align-items:stretch;cursor:pointer}
.vp-vol button{position:relative;width:16px;height:44px;padding:0;background:transparent;border:0;cursor:pointer}
.vp-vol button::before{content:"";position:absolute;left:2px;right:2px;bottom:4px;background:var(--card);border:3px solid var(--ink)}
.vp-vol button:nth-child(1)::before{height:14px}.vp-vol button:nth-child(2)::before{height:20px}.vp-vol button:nth-child(3)::before{height:26px}.vp-vol button:nth-child(4)::before{height:32px}
.vp-vol button.on::before{background:var(--or)}
.player:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:18px;max-width:none;background:var(--card)}
.player:fullscreen .vp-scr{max-height:calc(100vh - 90px);margin:0 auto;width:min(100%,calc((100vh - 90px) * 16 / 9))}
@media (max-width:640px){.vp-vol,.vp-m{display:none}.vp-t{min-width:0;font-size:12px}.player{padding:8px}.vp-bar{gap:6px}.ftitle{font-size:11px}}