/* Level Pad: Terraria surface at noon. Jersey 10 (display) / VT323 (words) / Azeret Mono (every number, tabular).
   Pixel art at native grids, scaled by integers with nearest-neighbour. No glow, no gradients-as-style, no blur, no red. */
:root{
  --sky:#7CC9F4;--cloud:#FFFFFF;--cloud2:#D6ECFA;--grass:#5BC236;--grass2:#3E9A2A;--dirt:#9B6A3C;--dirt2:#7A4E2A;--stone:#8C8F99;
  --road:#C9B79C;--road2:#A89478;--wood:#B8803F;--wood2:#8B5A2B;--ink:#2B2118;--gold:#FFC93C;--gold2:#E59A1C;--stripe:#FFD23F;
  --slot:#3A4A8C;--rim:#6A82D0;--lava:#FF8A1E;--paper:#FFF6E4;
  --fd:"Jersey 10",ui-monospace,monospace;--fl:"VT323",ui-monospace,monospace;--fn:"Azeret Mono",ui-monospace,monospace;
  --hdr:58px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--sky);color:var(--ink);font:22px/1.25 var(--fl);overflow-x:hidden;cursor:url(/assets/art/cur-coin.png) 16 16,auto}
img{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}
a,button,[role=button],[onclick],summary,label,.ca,select,input[type=file]{cursor:pointer}
a:hover,button:hover{cursor:url(/assets/art/cur-coin.png) 16 16,pointer}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.num{font-family:var(--fn);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:0}
h1,h2,h3{font-family:var(--fd);font-weight:400;margin:0;line-height:.9;letter-spacing:.01em}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- buttons: grass block, wood plank, stone */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px 2px;font:30px/1 var(--fd);
  text-decoration:none;color:#fff;border:4px solid var(--ink);white-space:nowrap;user-select:none;transition:transform .08s steps(2)}
.btn:active,.btn.busy{transform:translateY(4px)}
.btn .bl{position:relative}
.btn.grass{background:linear-gradient(var(--grass2) 0 10px,var(--grass) 10px);box-shadow:inset 0 -4px 0 #2f7a20,inset 4px 0 0 #7fd85a}
.btn.grass:hover{background:linear-gradient(var(--grass2) 0 10px,#69d042 10px)}
.btn.wood{background:url(/assets/art/tile-wood.png) 0 0/128px 128px var(--wood);box-shadow:inset 0 -4px 0 var(--wood2)}
.btn.wood:hover{background-color:#c88c48;filter:brightness(1.08)}
.btn.stone{background:url(/assets/art/tile-stone.png) 0 0/128px 128px var(--stone);box-shadow:inset 0 -4px 0 #5f626b}
.btn.stone:hover{filter:brightness(1.1)}
.btn.sq{width:44px;padding:0}
.btn .xg{width:16px;height:16px;color:#fff}
.btn.big{min-height:56px;font-size:36px;padding:0 26px 3px}
.btn.sm{min-height:36px;font-size:24px;padding:0 12px 2px;border-width:3px}
.btn[disabled]{filter:grayscale(1);opacity:.6;pointer-events:none}

/* CA plank */
.ca{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 12px;background:var(--paper);border:4px solid var(--ink);font:22px var(--fl)}
.ca b{font:24px var(--fd)}
.ca .num{font-size:15px}
.ca .cbtn{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 8px;background:var(--gold);border:3px solid var(--ink);font:20px var(--fd);color:var(--ink)}
.ca .cbtn img{width:12px;height:12px;transition:transform .2s steps(2)}
.ca.copied .cbtn img{transform:scaleX(-1)}
.ca.copied .cbtn{background:var(--grass);color:#fff}
.ca.ca-off .cbtn{display:none}

/* ---------------------------------------------------------------- header: one wooden plank strip */
.top{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--hdr);display:flex;align-items:center;gap:10px;padding:0 14px;
  background:url(/assets/art/tile-wood.png) 0 0/128px 128px var(--wood);border-bottom:4px solid var(--ink);box-shadow:0 4px 0 rgba(43,33,24,.18)}
.top .wm{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font:32px/1 var(--fd);white-space:nowrap}
.top .wm img{width:32px;height:37px}
.tnav{display:flex;gap:2px;margin-left:10px}
.tnav a{font:24px/1 var(--fd);color:#fff;text-decoration:none;padding:6px 8px 8px;border:3px solid transparent}
.tnav a:hover,.tnav a[aria-current]{border-color:var(--ink);background:rgba(43,33,24,.22)}
.top .sp{flex:1}
.top .btn{min-height:40px;font-size:26px;border-width:3px}
.top .btn.sq{width:40px}
.top .ca{min-height:40px;border-width:3px}
.wbtn .bl{font-size:24px}
.wbtn.on .bl{font:600 13px var(--fn)}
@media (max-width:1180px){.tnav{display:none}}
@media (max-width:760px){
  :root{--hdr:54px}
  .top{gap:6px;padding:0 8px}
  .top .wm span{display:none}
  .top .ca b{font-size:20px}
  .top .ca{padding:0 4px 0 6px;gap:4px}
  .top .ca .num{font-size:12px}
  .top .ca .cbtn .cl{display:none}
  .top .btn{min-height:40px;font-size:22px;padding:0 9px 2px}
  .top .pf .bl{font-size:20px}
  .wbtn.on .bl{font-size:11px}
}
@media (max-width:380px){.top .pf{display:none}}

/* ---------------------------------------------------------------- hero: the land */
.hero{cursor:grab;position:relative;height:100vh;height:100dvh;min-height:600px;max-height:1200px;overflow:hidden;background:var(--sky);touch-action:pan-y;isolation:isolate;outline:none}
.hero.grab{cursor:grabbing}
.hero.leasing .world{cursor:url(/assets/art/cur-sign.png) 6 28,pointer}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.sky .sun{position:absolute;right:30%;top:calc(var(--hdr) + 22px);width:78px;height:78px}
.clouds{position:absolute;inset:0;will-change:transform}
.clouds img{position:absolute}
.cl1{left:44%;top:calc(var(--hdr) + 36px);width:153px;height:75px}
.cl2{left:70%;top:calc(var(--hdr) + 140px);width:108px;height:60px}
.cl3{left:57%;top:calc(var(--hdr) + 255px);width:81px;height:54px}
.cl4{left:118%;top:calc(var(--hdr) + 70px);width:108px;height:60px}
.hills{position:absolute;left:0;right:0;bottom:22%;height:288px;background:url(/assets/art/hills.png) 0 100%/768px 288px repeat-x;opacity:.85}
.world{position:absolute;left:0;top:0;z-index:1;image-rendering:pixelated;image-rendering:crisp-edges}
.wlayer{position:absolute;left:0;top:0;z-index:2;width:0;height:0;will-change:transform;pointer-events:none}
.rsign{position:absolute;transform:translate(-50%,-100%);width:calc(var(--s)*35px);height:calc(var(--s)*43.75px);pointer-events:auto}
.rsign img{width:100%;height:100%;display:block}
.rsign p{position:absolute;left:5%;right:5%;top:12%;height:50%;gap:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;color:var(--ink)}
.rsign p i{font-style:normal;font-size:calc(var(--s)*3.6px);font-weight:600;opacity:.75}
.rsign p b{font:calc(var(--s)*6px)/1 var(--fd);white-space:nowrap}
.rsign p span{font-size:calc(var(--s)*4px);font-weight:600;white-space:nowrap}
.rsign.free p b{color:var(--grass2)}
.rsign.sel{filter:drop-shadow(0 -3px 0 var(--gold)) drop-shadow(0 3px 0 var(--gold))}
.axis{position:absolute;right:0;top:0;bottom:0;z-index:3;width:0;pointer-events:none}
.ap{position:absolute;right:6px;transform:translateY(-50%);display:flex;gap:6px;align-items:center;padding:2px 6px;background:var(--road);border:2px solid var(--ink);font-size:11px;white-space:nowrap}
.ap i{font-style:normal;font-weight:600}
.ap b{font-weight:600}
.ap.own{background:var(--stripe)}
.aunit{position:absolute;right:6px;bottom:calc(100% - var(--hdr) - 150px);display:none}
.title{position:absolute;z-index:5;left:clamp(16px,4vw,64px);top:calc(var(--hdr) + clamp(18px,4vh,48px));max-width:min(760px,92vw)}
.name{font-size:clamp(84px,11.5vw,188px);color:var(--ink);line-height:.82;letter-spacing:.01em;margin-left:-.04em}
.line{font-size:clamp(26px,2.6vw,38px);margin-top:10px;text-transform:uppercase;letter-spacing:.02em}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
.inv{position:absolute;z-index:5;right:clamp(12px,3vw,40px);top:calc(var(--hdr) + 18px);display:grid;gap:4px;padding:10px 12px;background:var(--slot);border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--rim);color:#fff;min-width:210px}
.inv p{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline}
.inv span{font-size:20px;color:#cfd8ff}
.inv b{font-size:20px;font-weight:600;color:#fff}
.inv i{font-style:normal;font-size:18px;color:#cfd8ff;min-width:30px}
.bag{position:absolute;z-index:5;left:clamp(16px,4vw,64px);top:calc(var(--hdr) + clamp(250px,36vh,330px));max-width:calc(100% - 40px)}
.tabs{display:flex;gap:0}
.tab{font:22px/1 var(--fd);color:#fff;background:var(--slot);border:3px solid var(--ink);border-bottom:0;padding:7px 12px 6px;margin-right:-3px}
.tab.on{background:var(--rim)}
.tab:hover{background:#4a5ca4}
.items{display:flex;gap:6px;padding:6px;background:rgba(58,74,140,.92);border:3px solid var(--ink);overflow-x:auto;scrollbar-width:none;max-width:min(720px,calc(100vw - 32px))}
.items::-webkit-scrollbar{display:none}
.item{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;background:var(--slot);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--rim);color:#fff;text-decoration:none;flex:none;position:relative}
.item:hover{box-shadow:inset 0 0 0 2px #9fb2f0}
.item.on{box-shadow:inset 0 0 0 3px var(--gold)}
.item .ibox{width:36px;height:36px;display:grid;place-items:center;background:#2c3a72;border:2px solid var(--ink);overflow:hidden}
.item .ibox img{width:28px;height:28px;object-fit:cover;image-rendering:auto}
.item .ibox img[src$=".png"]{image-rendering:pixelated}
.item .tk{font:16px var(--fd);color:var(--gold)}
.item .itx{display:grid;line-height:1}
.item .itx b{font:22px var(--fd)}
.item .itx i{font-style:normal;font-size:12px;color:#cfd8ff}
.item em{font-style:normal;font-size:11px;color:var(--gold);align-self:flex-end}
.item.invite .itx b{font-size:20px}
.item.invite .itx i{font:18px var(--fl);color:#cfd8ff}
.inone{color:#fff;font-size:20px;padding:6px 8px}
.wnav{position:absolute;z-index:5;left:clamp(12px,3vw,40px);bottom:calc(var(--hb) + 30px);display:flex;gap:6px;align-items:center;--hb:118px}
.arrow{width:40px;height:40px;display:grid;place-items:center;background:var(--slot);color:#fff;border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--rim)}
.arrow:hover{background:var(--rim)}
.range{display:flex}
.range button{font:20px/1 var(--fd);color:#fff;background:var(--slot);border:3px solid var(--ink);padding:9px 10px 8px;margin-right:-3px}
.range button.on{background:var(--rim);color:var(--ink)}
.mini{cursor:ew-resize;position:absolute;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(var(--hb) + 12px);--hb:118px;width:min(420px,60vw);height:22px;background:rgba(43,33,24,.55);border:3px solid var(--ink);touch-action:none}
.mini canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.mwin{position:absolute;top:-3px;bottom:-3px;border:3px solid var(--gold);pointer-events:none}
.ttip{position:absolute;left:0;top:0;z-index:20;min-width:230px;padding:8px 12px 10px;background:var(--slot);border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--gold);color:#fff;pointer-events:none}
.ttip .th{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:2px solid var(--rim);padding-bottom:4px;margin-bottom:4px}
.ttip .th b{font:28px var(--fd);color:var(--gold)}
.ttip .th span{font-size:12px}
.ttip dl{margin:0;display:grid;gap:2px}
.ttip dl div{display:flex;justify-content:space-between;gap:14px}
.ttip dt{font-size:20px;color:#cfd8ff}
.ttip dd{margin:0;font-size:13px;font-weight:600}
.ttip .tf{margin-top:4px;color:var(--gold);font-size:20px}
.flycoin{position:absolute;left:0;top:0;z-index:15;transform-origin:0 0;transition:transform .7s steps(10),opacity .7s steps(4);pointer-events:none}

/* hotbar + its panel */
.hud{position:absolute;z-index:8;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 16px)}
.hotbar{display:flex;gap:4px}
.slot{position:relative;width:87px;height:84px;background:url(/assets/art/slot.png) 0 0/87px 84px;display:grid;place-items:center;align-content:center;gap:2px;color:#fff;padding-top:4px}
.slot.on,.slot[aria-pressed=true]{background-image:url(/assets/art/slot-active.png)}
.slot:hover{filter:brightness(1.12)}
.slot i{position:absolute;left:9px;top:5px;font:18px/1 var(--fl);font-style:normal;color:#cfd8ff}
.slot img{height:36px;width:auto}
.slot img[src$="coin.png"]{width:30px;height:30px}
.slot b{font:18px/1 var(--fd);letter-spacing:.02em}
.slot em{position:absolute;right:9px;bottom:6px;font-size:12px;font-style:normal;font-weight:600;color:var(--gold)}
.hpanel{width:min(560px,calc(100vw - 16px));padding:10px 14px 14px;background:var(--slot);border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--rim);color:#fff;max-height:52vh;overflow:auto}
.hpanel .ph{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--rim);padding-bottom:6px;margin-bottom:10px}
.hpanel .ph b{font:30px/1 var(--fd);color:var(--gold)}
.hpanel .ph span{font:22px var(--fd)}
.pclose{margin-left:auto;width:40px;height:40px;font:28px/1 var(--fn);color:#fff;background:#2c3a72;border:3px solid var(--ink)}
.pclose:hover{background:var(--rim)}
.hpanel .pe{font-size:22px}
.hpanel .pe a{color:var(--gold)}
.hpanel .pq{font-size:20px;line-height:1.15;margin:8px 0;color:#e6ebff}
.hpanel .pq b{color:var(--gold);font-size:14px}
.prow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.prow .hint{font-size:18px;color:#cfd8ff}
.seg{display:inline-flex;margin-bottom:8px}
.seg button{font:24px/1 var(--fd);padding:8px 16px 7px;background:#2c3a72;border:3px solid var(--ink);margin-right:-3px}
.seg button.on{background:var(--gold);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{min-height:40px;padding:0 12px;font:600 14px var(--fn);color:#fff;background:#2c3a72;border:3px solid var(--ink)}
.chip.on{background:var(--gold);color:var(--ink)}
.chip:hover{border-color:var(--gold)}
.lsel{display:flex;align-items:center;gap:10px;font-size:14px}
.lsel .arrow{font:20px/1 var(--fn)}
.odo{display:flex;align-items:baseline;gap:10px;margin:10px 0 4px;flex-wrap:wrap}
.odo .num{font-size:40px;font-weight:600;color:var(--gold)}
.odo i{font-style:normal;font-size:22px}
.odo em{font-style:normal;font-size:12px;color:#cfd8ff}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.plist li{display:flex;gap:14px;font-size:13px;padding:6px 8px;background:#2c3a72;border:2px solid var(--ink)}
.plist li b{color:var(--gold)}
.pkv{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.pkv div{display:flex;flex-direction:column}
.pkv dt{font-size:18px;color:#cfd8ff}
.pkv dd{margin:0;font-size:16px;font-weight:600}
.carow{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.carow .lab{font:20px var(--fd)}
.cachip{display:inline-flex;gap:6px;align-items:center;min-height:36px;padding:0 8px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);font-size:12px}
.cachip .cl{font:18px var(--fd)}
.cachip.copied{background:var(--grass);color:#fff}
.carow .lk{font:18px var(--fd);padding:7px 8px 6px;border:3px solid var(--ink);background:var(--wood);color:#fff;text-decoration:none}
.carow .lk:hover{background:#c88c48}

@media (max-width:760px){
  .hero{min-height:640px}
  .sky .sun{width:52px;height:52px;right:8%}
  .cl1,.cl3{display:none}
  .cl2{left:62%;top:calc(var(--hdr) + 190px)}
  .hills{bottom:30%;height:192px;background-size:512px 192px}
  .title{left:14px;right:14px;top:calc(var(--hdr) + 14px)}
  .name{font-size:clamp(64px,19vw,96px)}
  .line{font-size:22px;margin-top:6px}
  .cta{gap:8px;margin-top:12px}
  .cta .btn{min-height:40px;font-size:24px;padding:0 10px 2px}
  .cta .btn.sq{width:40px;padding:0}
  .cta .heroca{min-height:40px}
  .inv{display:none}
  .bag{left:10px;right:10px;top:auto;bottom:calc(var(--hb) + 56px);--hb:84px}
  .tab{font-size:18px;padding:6px 8px 5px}
  .items{max-width:calc(100vw - 20px)}
  .item .itx b{font-size:18px}
  .hud{bottom:8px}
  .slot{width:58px;height:56px;background-size:58px 56px;padding-top:2px}
  .slot i{left:6px;top:3px;font-size:14px}
  .slot img{height:22px}
  .slot img[src$="coin.png"]{width:20px;height:20px}
  .slot b{font-size:13px}
  .wnav{bottom:calc(var(--hb) + 14px);--hb:64px;left:auto;right:10px}
  .wnav .range button{padding:7px 7px 6px;font-size:17px}
  .wnav .arrow{width:36px;height:36px}
  .mini{display:none}
  .ap{font-size:10px;padding:1px 4px}
  .hpanel{max-height:46vh}
}
@media (max-width:420px){.cta .heroca .cl{display:none}}

/* ---------------------------------------------------------------- scenes */
.scene{position:relative}
.scene .pin{position:sticky;top:var(--hdr);min-height:calc(100vh - var(--hdr));display:grid;align-content:center;padding:40px clamp(16px,5vw,80px)}
.scene h2{font-size:clamp(56px,7vw,96px)}
.say{font-size:clamp(26px,2.4vw,34px);margin-top:10px;text-transform:uppercase}
.live{font-size:22px;margin-top:16px}
.live b{font-family:var(--fn);font-size:15px}
.fine{font-size:20px;margin-top:12px;opacity:.85}

/* lease: a road close-up, the price board on its post slides down notch by notch */
.lease{height:230vh;background:var(--sky)}
.lease .pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);
  background:linear-gradient(var(--sky) 0 62%,var(--ink) 62% calc(62% + 4px),transparent calc(62% + 4px)),url(/assets/art/tile-dirt.png) 0 0/192px 192px var(--dirt)}
.lease .pin::before{content:"";position:absolute;left:0;right:0;top:calc(62% - 30px);height:30px;background:url(/assets/art/tile-road.png) 0 0/96px 96px;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.lease .pin::after{content:"";position:absolute;left:0;right:0;top:calc(62% + 4px);height:12px;background:var(--grass);border-bottom:4px solid var(--grass2)}
.ltext{position:relative;z-index:2;align-self:start;margin-top:4vh}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:4px 20px;margin:22px 0 0;justify-content:start}
.facts div{display:flex;flex-direction:column}
.facts dt{font-size:20px}
.facts dd{margin:0;font-size:clamp(16px,1.5vw,22px);font-weight:600}
.lease .live{background:var(--paper);border:4px solid var(--ink);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;max-width:620px}
.lease .live:empty{display:none}
.post{position:relative;z-index:2;justify-self:center;width:260px;height:min(62vh,560px);align-self:start;margin-top:3vh}
.post::before{content:"";position:absolute;left:122px;top:30px;bottom:-40px;width:16px;background:var(--wood2);border:4px solid var(--ink)}
.board{position:absolute;left:0;top:0;width:260px;height:325px;transition:transform .15s steps(2)}
.board .sgn{position:absolute;inset:0;width:260px;height:325px}
.board .pk{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:40px;font-weight:600}
.board .pu{position:absolute;left:0;right:0;top:114px;text-align:center;font:28px var(--fd)}
.board .lk{position:absolute;left:0;right:0;top:34px;text-align:center;font:24px var(--fd);color:var(--wood2)}
.notches{position:absolute;right:-24px;top:40px;display:grid;gap:4px}
.notches i{display:block;width:20px;height:8px;background:var(--road2);border:2px solid var(--ink)}
.notches i.on{background:var(--gold)}
.days{position:absolute;left:-20px;right:-20px;bottom:-110px;display:grid;gap:6px;justify-items:center}
.days .dl{font-size:22px;color:#fff;background:var(--ink);padding:0 8px}
.tiles{display:flex;gap:4px}
.dt{width:36px;height:36px;border:3px solid var(--ink);background:linear-gradient(var(--grass) 0 12px,var(--grass2) 12px 16px,var(--dirt) 16px);transition:background .2s steps(2)}
.dt.dry{background:url(/assets/art/tile-dirt.png) 0 0/64px 64px var(--dirt)}

/* toll: a side view of one road; the land walks across it, the gate opens, the coin goes to the sign */
.toll{height:240vh;background:var(--dirt2)}
.toll .pin{background:url(/assets/art/tile-stone.png) 0 0/192px 192px var(--stone);color:#fff;grid-template-columns:1fr;justify-items:start;gap:18px}
.toll h2,.toll .say{color:#fff}
.road{position:relative;width:100%;max-width:1100px;height:260px;background:var(--sky);border:4px solid var(--ink);overflow:hidden;--x:0}
.ground{position:absolute;inset:0;display:flex;align-items:flex-end;transform:translateX(calc(var(--x) * -6.6%))}
.ground span{flex:none;width:9%;height:calc(var(--h) * 22px + 20px);background:linear-gradient(var(--ink) 0 3px,var(--grass) 3px 12px,var(--grass2) 12px 15px,transparent 15px),url(/assets/art/tile-dirt.png) 0 0/96px 96px var(--dirt)}
.rline{position:absolute;left:0;right:0;top:108px;height:20px;background:url(/assets/art/tile-road.png) 0 0/72px 72px;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.rline::after{content:"";position:absolute;left:0;right:0;top:6px;height:3px;background:repeating-linear-gradient(90deg,var(--stripe) 0 18px,transparent 18px 36px)}
.gate{position:absolute;left:46%;top:auto}
.g-closed{width:104px;height:64px;top:56px}
.g-open{width:36px;height:128px;top:-6px;display:none}
.road.opening .g-closed{display:none}
.road.opening .g-open{display:block}
.osign{position:absolute;right:6%;top:4px;width:80px;height:100px}
.osign img{width:80px;height:100px}
.osign span{position:absolute;left:0;right:0;top:22px;text-align:center;font-size:12px;font-weight:600;color:var(--ink)}
.pop{position:absolute;left:47%;top:60px;width:36px;height:36px;opacity:0}
.road.opening .pop{animation:pop .6s steps(6) forwards}
@keyframes pop{0%{opacity:1;transform:translate(0,0)}60%{opacity:1;transform:translate(200px,-50px)}100%{opacity:0;transform:translate(390px,-20px)}}
.split{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;max-width:1100px}
.stack{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 10px;align-items:center;padding:8px;background:rgba(43,33,24,.82);border:4px solid var(--ink);opacity:.45;transform:translateY(8px);transition:opacity .2s steps(2),transform .2s steps(2)}
.stack.in{opacity:1;transform:none}
.stack .slotbox{grid-row:1/3;width:58px;height:56px;background:url(/assets/art/slot.png) 0 0/58px 56px;display:grid;place-items:center}
.stack.hl .slotbox{background-image:url(/assets/art/slot-active.png)}
.stack .slotbox img{height:30px;width:auto}
.stack b{font-size:26px;font-weight:600;color:var(--gold)}
.stack i{font-style:normal;font-size:20px;line-height:1}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:1100px;counter-reset:s}
.steps li{background:var(--paper);color:var(--ink);border:4px solid var(--ink);padding:10px 12px;font-size:20px;line-height:1.1}
.steps li b{display:block;font:30px/1 var(--fd);margin-bottom:4px}
.steps .num{font-size:15px;font-weight:600}
.toll .live{background:var(--ink);padding:8px 12px;color:#fff}
.toll .live:empty{display:none}

/* burn: under the land, coins fall through dirt and stone into lava */
.burn{min-height:120vh;display:grid;align-items:center;padding:60px clamp(16px,5vw,80px);background:var(--ink)}
.under{position:absolute;inset:0;background:url(/assets/art/underground.png) 50% 100%/cover;image-rendering:pixelated;overflow:hidden}
.falls{position:absolute;inset:0;--p:0}
.falls img{position:absolute;left:calc(var(--x) * 1%);top:calc(((var(--p) * 100) + var(--i) * 13) * 1% % 100%);width:36px;height:36px;transform:translateY(calc(var(--p) * 60vh + var(--i) * 5vh))}
.btext{position:relative;z-index:2;max-width:880px;background:rgba(43,33,24,.9);border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--lava);color:#fff;padding:22px clamp(16px,3vw,32px)}
.btext h2{color:var(--gold)}
.burnrows{display:grid;gap:6px;margin-top:16px}
.brow{display:grid;grid-template-columns:110px repeat(4,minmax(0,1fr));gap:10px;align-items:baseline;padding:6px 8px;background:rgba(255,255,255,.06);border:2px solid #5a4a3a;font-size:13px}
.brow b{font:24px var(--fd);color:var(--gold)}
.chestrow{display:flex;gap:14px;align-items:center;margin-top:16px;font-size:22px}
.chestrow img{width:75px;height:63px;flex:none}
.chestrow b{font-size:15px;color:var(--gold)}
.pe{font-size:22px}

/* ending: the house on the hill, its signboard carries the links */
.ending{position:relative;min-height:88vh;display:grid;place-items:end center;padding:0 16px 7vh;overflow:hidden;background:var(--sky)}
.endart{position:absolute;inset:0;background:url(/assets/art/ending.png) 50% 100%/cover;image-rendering:pixelated}
.endsign{position:relative;z-index:2;display:grid;justify-items:center;gap:12px;padding:20px 22px 22px;background:url(/assets/art/tile-wood.png) 0 0/128px 128px var(--wood);border:4px solid var(--ink);box-shadow:inset 0 -6px 0 var(--wood2)}
.endsign::after{content:"";position:absolute;left:50%;top:100%;width:20px;height:7vh;margin-left:-10px;background:var(--wood2);border:4px solid var(--ink);border-top:0}
.ename{font:clamp(48px,6vw,80px)/.9 var(--fd);color:#fff}
.ebtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--ink);color:#fff;border-top:4px solid #000}
.fin{max-width:1280px;margin:0 auto;padding:18px 16px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.foot .wm{min-height:40px;display:flex;gap:8px;align-items:center;text-decoration:none;font:28px var(--fd)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot nav a{font-size:22px;text-decoration:none;padding:6px 0}
.foot nav a:hover{color:var(--gold)}
.fbtns{display:flex;gap:8px}
.foot .ca{color:var(--ink)}
.foot .fine{font-size:20px;margin:0;opacity:.8}
.foot .fine a{font-size:13px;color:var(--gold);display:inline-block;padding:10px 0}

/* ---------------------------------------------------------------- inner pages */
.inner main{min-height:calc(100vh - 120px);padding:calc(var(--hdr) + 30px) clamp(16px,4vw,48px) 60px;background:var(--sky)}
.inner main.dirtbg{background:linear-gradient(var(--sky) 0 300px,var(--ink) 300px 304px,var(--grass) 304px 316px,var(--grass2) 316px 320px,transparent 320px),url(/assets/art/tile-dirt.png) 0 0/192px 192px var(--dirt)}
.wrap{max-width:1180px;margin:0 auto}
.inner h1{font-size:clamp(64px,8vw,120px)}
.inner .lead{font-size:clamp(24px,2.4vw,32px);margin:8px 0 26px;max-width:860px}
.panel{background:var(--slot);color:#fff;border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--rim);padding:16px clamp(14px,2.4vw,26px);margin-bottom:18px}
.panel h2{font-size:40px;color:var(--gold);margin-bottom:10px}
.panel.paper{background:var(--paper);color:var(--ink);box-shadow:none}
.panel.paper h2{color:var(--wood2)}
.lrow{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:8px 6px;border-bottom:2px solid rgba(106,130,208,.5);font-size:13px}
.panel.paper .lrow{border-color:rgba(43,33,24,.18)}
.lrow.lh{font:20px var(--fl);color:#cfd8ff}
.lrow .lsym{font:26px var(--fd);color:var(--gold);text-decoration:none;min-width:90px}
.panel.paper .lrow .lsym{color:var(--wood2)}
.lrow b{font-weight:600}
.empty{font-size:22px}
.empty a{color:var(--gold)}
.killer{font-size:clamp(26px,2.6vw,36px);line-height:1.15;max-width:1000px}
.killer b{font-size:.62em;font-weight:600;background:var(--gold);padding:0 6px;border:3px solid var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:18px}
.kpis p{display:flex;flex-direction:column;padding:10px 12px;background:var(--slot);color:#fff;border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--rim)}
.kpis span{font-size:20px;color:#cfd8ff}
.kpis b{font-size:20px;font-weight:600}
.claimbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:10px 0}
.claimbar .num{font-size:24px;font-weight:600;color:var(--gold)}
.claimbar .cn{font-size:18px;color:#cfd8ff}

/* launch form */
.oform{background:var(--paper);border:4px solid var(--ink);padding:18px clamp(14px,2.4vw,26px);max-width:980px}
.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.fld{display:flex;flex-direction:column;gap:4px;font-size:22px}
.fld.wide{grid-column:1/-1}
.fld i{font-size:18px;opacity:.7}
.fld input[type=text]{min-height:46px;padding:0 12px;font:16px var(--fn);color:#fff;background:var(--slot);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--rim);outline:none}
.fld input[type=text]::placeholder{color:#9aa8de}
.fld input[type=text]:focus{box-shadow:inset 0 0 0 2px var(--gold)}
.fld.pic input{position:absolute;opacity:0;width:1px;height:1px}
.pickbtn{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pickbtn .btn{font-size:24px;min-height:42px}
.prev{width:44px;height:44px;object-fit:cover;border:3px solid var(--ink);image-rendering:auto}
.picv{font:600 12px var(--fn)}
.menu-row{border:0;padding:0;margin:16px 0 0}
.menu-row legend{font-size:22px;margin-bottom:6px}
.oform .chip{color:var(--ink);background:#fff}
.oform .chip.on{background:var(--gold)}
.unit{font-size:20px;margin-left:6px}
.lgrid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:16px}
.lgrid i{display:block;height:14px;background:var(--road);border:2px solid var(--ink)}
.lnote{font-size:20px;margin-top:10px;max-width:760px}
.ofoot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:18px}
.osum{font-size:14px;font-weight:600}
.oerr{margin-top:10px;background:var(--gold);border:3px solid var(--ink);padding:6px 10px;font-size:20px}

/* docs */
.docs h2{font-size:44px;margin:26px 0 10px}
.docs p,.docs li{font-size:22px;line-height:1.2;max-width:900px}
.docs ul,.docs ol{padding-left:22px}
.docs code,.docs .num{font-size:15px}
.ptab .lrow{justify-content:space-between}

/* 404 */
.lost{position:relative;min-height:100vh;display:grid;place-items:center;padding:calc(var(--hdr) + 20px) 16px 40px;background:var(--sky);overflow:hidden}
.lost .art{position:absolute;inset:0;background:url(/assets/art/404.png) 50% 100%/cover;image-rendering:pixelated}
.lost .card{position:relative;z-index:2;display:grid;gap:16px;justify-items:center;text-align:center;padding:22px 26px;background:var(--slot);color:#fff;border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--rim)}
.lost h1{font-size:clamp(56px,9vw,110px);color:var(--gold)}

/* toasts */
.tstack{position:fixed;z-index:60;right:12px;bottom:12px;display:grid;gap:8px;max-width:min(420px,calc(100vw - 24px))}
.toast{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--slot);color:#fff;border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--rim);font-size:20px}
.toast.ok{box-shadow:inset 0 0 0 3px var(--grass)}
.toast.err{box-shadow:inset 0 0 0 3px var(--gold)}
.toast a{color:var(--gold);white-space:nowrap}
.toast .tx{margin-left:auto;font:22px/1 var(--fn);min-width:32px;min-height:32px}
.tipt{position:fixed;z-index:70;max-width:280px;padding:6px 10px;background:var(--slot);color:#fff;border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--gold);font-size:18px;pointer-events:none}

@media (max-width:900px){
  .lease{height:auto}
  .lease .pin{position:relative;grid-template-columns:1fr;background:linear-gradient(var(--sky) 0 70%,var(--ink) 70% calc(70% + 4px),transparent calc(70% + 4px)),url(/assets/art/tile-dirt.png) 0 0/128px 128px var(--dirt);padding-bottom:180px}
  .lease .pin::before{top:calc(70% - 30px)}
  .lease .pin::after{top:calc(70% + 4px)}
  .post{transform:scale(.72);transform-origin:50% 0;height:440px;margin-bottom:-120px}
  .facts{grid-template-columns:repeat(2,auto)}
  .toll{height:auto}
  .toll .pin{position:relative}
  .split,.steps{grid-template-columns:1fr 1fr}
  .road{height:220px}
  .brow{grid-template-columns:1fr 1fr}
  .ogrid{grid-template-columns:1fr}
  .lgrid{grid-template-columns:repeat(12,1fr)}
}
@media (max-width:480px){
  .split,.steps{grid-template-columns:1fr}
  .road{height:200px}
  .g-closed{width:78px;height:48px;top:70px}
  .osign{right:2%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------------------------------------------------------------- how it works: the surveyor's film (own player) */
.film{position:relative;padding:56px clamp(16px,3vw,40px) 64px;background:url(/assets/art/tile-dirt.png) 0 0/128px 128px var(--dirt);border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.film-in{max-width:1120px;margin:0 auto}
.film h2{font-size:64px;color:#fff;text-shadow:4px 4px 0 var(--ink)}
.film .say{color:#fff;font-size:26px;margin-top:6px;text-shadow:2px 2px 0 var(--ink)}
.player{position:relative;max-width:1040px;margin:28px auto 0;background:var(--paper);border:6px solid var(--ink);box-shadow:0 10px 0 var(--ink);padding:14px}
.vp-scr{position:relative;background:var(--ink);border:6px solid var(--ink);aspect-ratio:16/9}
.vp-scr video{display:block;width:100%;height:100%;object-fit:contain;background:var(--sky);cursor:pointer}
.vp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:12px}
.vp-big:hover{transform:translate(-50%,calc(-50% - 4px))}
.vp-big:active{transform:translate(-50%,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:18px}
.vp-bar .btn{min-height:44px;font-size:24px}
.vp-pp{width:52px;padding:0!important}
.vp-tl{position:relative;flex:1;min-width:64px;height:34px;background:var(--cloud2,#D6ECFA);border:4px solid var(--ink);cursor:pointer;touch-action:none}
.vp-fill{position:absolute;left:0;top:0;bottom:0;max-width:100%;background:var(--grass)}
.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:120px;text-align:center;background:var(--paper);border:4px solid var(--ink);padding:8px;font:500 14px/1.2 var(--fn)}
.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(--paper);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(--grass)}
.player:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:18px;max-width:none;margin:0;background:var(--paper)}
.player:fullscreen .vp-scr{max-height:calc(100vh - 100px);margin:0 auto;width:min(100%,calc((100vh - 100px) * 16 / 9))}
@media (max-width:640px){.vp-vol,.vp-m,.vp-fs{display:none}.vp-t{min-width:0;font-size:12px}.player{padding:8px}.vp-bar{gap:6px}.film h2{font-size:48px}}