:root{
  --panel:#3a4a4d; --panel-in:#243033; --edge:#5b6f73; --shadow:#161e20;
  --red:#fe5f55; --red-d:#a8352f; --blue:#009dff; --blue-d:#00619e;
  --orange:#ff9800; --orange-d:#b25f00; --gold:#ffcf4a; --green:#4bc26a; --green-d:#2a7a3f; --purple:#b06cff;
}
html,body{margin:0;height:100%;background:#10171a;overflow:hidden;}
body{font-family:'Silkscreen',monospace;color:#fff;cursor:none;user-select:none;-webkit-user-select:none;}
canvas.gamecv,canvas#game{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;filter:saturate(1.12) contrast(1.05);}
#crt{pointer-events:none;position:fixed;inset:0;z-index:5;background:
  repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.08) 2px 3px),
  radial-gradient(ellipse at center,rgba(0,0,0,0) 72%,rgba(0,0,0,.22) 100%);}
/* each view is a fixed box; it's transformed so the HUD inside positions itself against the view, not the window */
.view{position:fixed;top:0;bottom:0;left:0;width:100%;overflow:hidden;transform:translateZ(0);}
.view+.view{box-shadow:inset 2px 0 0 #10171a,inset 3px 0 0 rgba(255,255,255,.12);}
/* co-op: one short, wide bar up top (bank | day | time | reputation | bank) */
#sharedBar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:4;display:none;pointer-events:none;padding:6px 10px;width:440px;box-sizing:border-box;
  align-items:center;gap:10px;font-size:13px;}
#sharedBar .day{background:var(--red);padding:3px 8px;border-radius:6px;box-shadow:0 3px 0 var(--red-d);}
#sharedBar .time{background:var(--panel-in);padding:3px 8px;border-radius:6px;}
#sharedBar .sm{flex:1;font-size:17px;font-weight:700;color:var(--gold);text-shadow:0 2px 0 #6b4a00,0 4px 0 rgba(0,0,0,.35);}
#sharedBar .sm.p0{text-align:left;padding-left:8px;border-left:4px solid #c8352c;} #sharedBar .sm.p1{text-align:right;padding-right:8px;border-right:4px solid #2f9a5a;}
#sharedBar .srep{display:flex;align-items:center;gap:5px;position:relative;} #sharedBar .srep b{font-size:15px;color:#cfe3e6;} #sharedBar .srep b.neg{color:var(--red);}
#sharedBar .srep .reppop{right:auto;left:100%;margin-left:6px;}
body.coop #sharedBar{display:flex;}
/* each half: no money panel (it's in the shared bar), and a slimmer battery panel */
body.coop .view #hud>.panel:first-child{display:none;}
body.coop .view #hud{width:190px;}
body.coop .view .pct{font-size:14px;min-width:40px;margin-left:6px;}
/* the house you're at folds into one row along the bottom: shared in the middle, or one per player in their corner */
#sharedLot{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;display:none;pointer-events:none;width:440px;}
body.coop .lotpanel{display:flex;align-items:center;gap:12px;padding:6px 10px;}
body.coop .lotpanel .lotid{min-width:0;flex:0 1 auto;} body.coop .lotpanel .lotname{font-size:13px;white-space:nowrap;} body.coop .lotpanel .lottag{font-size:9px;white-space:nowrap;}
body.coop .lotpanel .lotbar{flex:1;margin-top:0;min-width:110px;} body.coop .lotpanel .lotbar .bar{height:18px;} body.coop .lotpanel .barnum{font-size:12px;} body.coop .lotpanel .bartot{font-size:13px;min-width:30px;}
body.coop .lotpanel .lotbadge{position:static;order:3;flex:none;width:22px;height:22px;}
body.coop .view #hudR{top:auto;bottom:12px;left:16px;transform:none;width:min(400px,calc(100% - 32px));}
body.coop #view1 #hudR{left:auto;right:16px;}
body.coop .view #hotbar{bottom:62px;} body.coop .view #prompt{bottom:62px;} body.coop .view.hb #prompt{bottom:130px;}
/* player 2's panel sits in the far corner, clear of the shared bar */
body.coop #view1 #hud{left:auto;right:16px;}
body.coop #menuBtn{display:none!important;}
#fx{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden;}
.float{position:absolute;left:0;top:0;font-weight:700;font-size:16px;text-shadow:0 3px 0 rgba(0,0,0,.55);white-space:nowrap;}
.fullcue{position:absolute;left:0;top:0;display:none;font-size:22px;pointer-events:none;}
/* just the letter or button symbol, no keycap or button face behind it */
.fullcue .gb{background:none!important;box-shadow:none!important;border:0!important;color:#fff;text-shadow:none;margin:0;}
.fullcue{filter:drop-shadow(1px 0 0 #10171a) drop-shadow(-1px 0 0 #10171a) drop-shadow(0 1px 0 #10171a) drop-shadow(0 -1px 0 #10171a);}
.bubble{position:absolute;left:0;top:0;background:#fff;color:#1a2224;font-size:11px;font-weight:700;padding:5px 8px;border-radius:8px;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.35);}
.bubble:after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-top-color:#fff;border-bottom:0;}
svg.px{shape-rendering:crispEdges;display:block;}

/* ---------- HUD ---------- */
#hud{position:fixed;left:16px;top:16px;display:flex;flex-direction:column;gap:12px;pointer-events:none;z-index:4;width:236px;}
#hudR{position:fixed;left:50%;top:16px;transform:translateX(-50%);display:flex;flex-direction:column;gap:12px;pointer-events:none;z-index:4;width:300px;}
.panel{background:var(--panel);border:3px solid var(--edge);border-radius:12px;padding:10px 12px;box-shadow:0 6px 0 var(--shadow);}
.bob{animation:bob 3.2s ease-in-out infinite;}
.bob2{animation:bob 3.8s ease-in-out -1.3s infinite;}
@keyframes bob{0%,100%{transform:rotate(-.7deg) translateY(0)}50%{transform:rotate(.7deg) translateY(-3px)}}
.label{font-size:12px;letter-spacing:1px;color:#cfe3e6;text-shadow:0 2px 0 rgba(0,0,0,.4);margin-bottom:6px;}
.row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#cfe3e6;margin-top:5px;}
.row b{color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.4);}
.cash{font-size:30px;font-weight:700;color:var(--gold);text-shadow:0 4px 0 #6b4a00,0 6px 0 rgba(0,0,0,.35);line-height:1;}
.clock{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;}
.clock .day{background:var(--red);padding:3px 8px;border-radius:6px;box-shadow:0 3px 0 var(--red-d);}
.clock .time{background:var(--panel-in);padding:3px 8px;border-radius:6px;}
.batt{display:flex;align-items:center;gap:0;}
.bbar{position:relative;flex:1;height:24px;background:#141c1e;border:3px solid var(--panel-in);border-radius:7px;padding:2px;box-sizing:border-box;box-shadow:inset 0 3px 0 rgba(0,0,0,.4);}
.cells{display:flex;gap:2px;height:100%;}
.cells i{position:relative;flex:1;background:#232e31;border-radius:2px;overflow:hidden;}
.cells i b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c,#4bc26a);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.35);}
.cells i.use b{animation:drain var(--spd,.8s) ease-in-out infinite;}
@keyframes drain{50%{filter:brightness(1.7);}}
.bbar.low .cells i b{animation:blink .5s steps(2) infinite;}
.bbar.dead{border-color:var(--red-d);}
@keyframes blink{50%{opacity:.3}}
.nub{width:5px;height:12px;background:var(--panel-in);border-radius:0 3px 3px 0;}
.pct{margin-left:8px;font-size:17px;font-weight:700;text-shadow:0 3px 0 rgba(0,0,0,.45);min-width:50px;text-align:right;}
.inv{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;}
.inv .spacer{flex:1;}
.spares{display:flex;gap:4px;align-items:center;} .spares b.neg{color:var(--red);}
.spares i{display:block;width:8px;height:13px;border-radius:2px;background:#1a2325;overflow:visible;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.35);position:relative;}
.spares i:before{content:'';position:absolute;left:2px;top:-3px;width:4px;height:2px;background:#5d656d;border-radius:1px 1px 0 0;}
.spares i b{position:absolute;left:0;right:0;bottom:0;border-radius:2px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.25);}
.spares svg{margin-left:2px;animation:pop2 1.4s ease-in-out infinite;}
.spares i.used{background:#1a2325;box-shadow:none;}
.spares.empty{color:var(--red);}
.inv b{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4);}
.bundle{display:none;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:#cfe3e6;}
.bundle b{color:var(--blue);}
.lotname{font-size:15px;font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4);}
.lottag{font-size:10px;color:#9fb5b8;margin-top:2px;}
.lotbar{display:flex;align-items:center;gap:10px;margin-top:9px;}
.lotbar .bar{flex:1;margin:0;}
.barnum{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:700;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6),1px 0 0 rgba(0,0,0,.4),-1px 0 0 rgba(0,0,0,.4);}
.bartot{font-size:16px;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.4);min-width:40px;text-align:right;}
.bar{position:relative;height:24px;background:var(--panel-in);border-radius:8px;margin-top:8px;overflow:hidden;box-shadow:inset 0 3px 0 rgba(0,0,0,.35);}
.bar i{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(207,227,230,.35);}
.bar i.hit{background:rgba(255,255,255,.9);}
#lotPanel{position:relative;}
#lotName{padding-right:34px;}
.lotbadge{position:absolute;right:9px;top:9px;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(0,0,0,.35);}
.lotbadge.open{background:var(--orange);box-shadow:0 3px 0 var(--orange-d);}
.lotbadge.locked{background:#5d656d;box-shadow:0 3px 0 #2a3033;}
.lotbadge.paid{background:var(--green);box-shadow:0 3px 0 var(--green-d);}
.bar div{height:100%;width:0;background:var(--green);border-radius:7px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);transition:width .2s;}
.paid{display:inline-block;background:var(--green);padding:2px 8px;border-radius:6px;box-shadow:0 3px 0 var(--green-d);font-size:11px;}
.red{color:var(--red)!important;}

#menuBtn{position:fixed;right:16px;top:16px;z-index:4;width:48px;height:48px;padding:0;display:none;align-items:center;justify-content:center;cursor:pointer;background:var(--panel);border:3px solid var(--edge);border-radius:12px;box-shadow:0 6px 0 var(--shadow);}
#menuBtn:hover{border-color:#fff;}
/* tutorial: the current goal, top right beside the menu button */
#tutBox{position:fixed;right:76px;top:16px;z-index:4;display:none;max-width:min(430px,calc(100vw - 110px));pointer-events:none;background:var(--panel);border:3px solid var(--edge);border-radius:12px;padding:8px 12px;box-shadow:0 6px 0 var(--shadow);text-align:right;transition:border-color .2s,background .2s;}
#tutBox .tl{font-size:9px;letter-spacing:2px;color:#9fb5b8;margin-bottom:4px;}
#tutBox .tt{font-size:14px;font-weight:700;line-height:1.5;text-shadow:0 2px 0 rgba(0,0,0,.4);}
#tutBox .ts{font-size:10px;color:var(--gold);margin-top:4px;letter-spacing:1px;}
#tutBox .ts:empty{display:none;}
#tutBox.done{border-color:var(--green);background:#2c5a3a;}
/* for the first couple of goals, a red arrow under the goal box so nobody misses it */
#tutArrow{position:fixed;z-index:4;display:none;pointer-events:none;animation:tutArrow .8s ease-in-out infinite;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));}
@keyframes tutArrow{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.tutpop{width:min(520px,92vw);display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 22px;margin:auto;text-align:center;}
.tutpop h2{margin:0;font-size:24px;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4);}
.tutpop .rl{display:flex;flex-direction:column;gap:9px;font-size:12px;line-height:1.5;text-align:left;width:100%;}
.tutpop .rl b{display:inline-block;width:20px;} .tutpop .pos{color:var(--green);} .tutpop .neg{color:var(--red);}
#menuBtn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--shadow);}
/* goals: top right under the menu button (in split screen, only on player 2's half, under their battery panel) */
#goals{position:fixed;right:16px;top:76px;z-index:4;display:none;pointer-events:none;width:252px;box-sizing:border-box;padding:7px 10px 8px;border-radius:10px;}
#goals .gh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.4);}
#goals .gk{font-size:8px;letter-spacing:1px;color:#9fb5b8;white-space:nowrap;} #goals .gk .gb{font-size:10px;}
#goals .gsub{font-size:9px;color:#9fb5b8;margin-top:5px;}
#goals .grow{margin-top:7px;} #goals .gt{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;font-size:10px;line-height:1.35;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4);}
#goals .gx{flex:1;min-width:0;} #goals .gp{font-size:9px;color:var(--gold);white-space:nowrap;margin-top:1px;}
#goals .gi{display:inline-block;vertical-align:-1px;margin:0 1px;}
#goals .gbar{height:2px;background:rgba(0,0,0,.45);margin-top:3px;overflow:hidden;} #goals .gbar b{display:block;height:100%;background:var(--green);}
#goals .gn{font-size:8px;color:#9fb5b8;margin-top:2px;text-align:right;letter-spacing:1px;}
#goals .grow.bad .gbar b{background:var(--red);} #goals .grow.bad .gn{color:var(--red);}
#goals .grow.done .gt{color:var(--green);} #goals .grow.done .gn{color:var(--green);} #goals .grow.done .gbar b{background:var(--gold);}
#goals .gmini{display:flex;gap:5px;margin-top:5px;} #goals .gmini i{flex:1;height:2px;background:rgba(0,0,0,.45);overflow:hidden;} #goals .gmini i b{display:block;height:100%;background:var(--green);}
#goals .gmini i.bad b{background:var(--red);} #goals .gmini i.ok b{background:var(--gold);}
body.coop #view1 #goals{width:236px;}
.pause{width:min(780px,94vw);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 20px 20px;margin:auto;}
.pause h2{margin:0;font-size:26px;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4);}
.pause .sub{font-size:11px;max-width:560px;}
.pause .btns{flex-wrap:wrap;justify-content:center;}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(620px,88vw);}
.mq{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px;border-radius:10px;background:rgba(0,0,0,.18);border:2px solid rgba(255,255,255,.06);} .mq .netbox{margin:-4px 0 2px;}
@media (max-width:520px){.pgrid{grid-template-columns:1fr;}}
.mlist{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:min(340px,84vw);} .mlist .netbox{margin:-4px 0 2px;}
.setlist{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(500px,88vw);}
.setrow{display:flex;align-items:center;gap:10px;width:100%;font-size:13px;letter-spacing:1px;}
.setrow .setlab{flex:0 0 150px;text-align:left;} .setrow .setlab small{display:block;font-size:8px;color:#7f9396;margin-top:3px;}
.setrow input{flex:1;min-width:0;accent-color:var(--gold);cursor:pointer;} .setrow .btn{width:34px;padding:6px 0;} .setrow .setval{width:46px;text-align:right;color:var(--gold);}
/* ---------- controls sheet (pause menu + first-play) ---------- */
.ctl{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;width:100%;}
.ctlbox{flex:1 1 300px;background:var(--panel-in);border-radius:12px;padding:14px 12px 16px;box-shadow:inset 0 3px 0 rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;gap:12px;}
.ctlhead{font-size:10px;letter-spacing:2px;color:#7f9396;}
.krow{display:flex;gap:6px;align-items:flex-end;}
.kc{display:flex;flex-direction:column;align-items:center;gap:5px;}
.kbd{display:flex;flex-direction:column;align-items:flex-start;gap:6px;} .kbd .krow.home{margin-left:12px;} .kbd .klab.g{margin-left:12px;width:130px;text-align:center;}
.key{font-style:normal;min-width:40px;height:38px;box-sizing:border-box;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  background:#e9e2cf;color:#2a3033;box-shadow:0 5px 0 #8a8272;border:2px solid rgba(255,255,255,.5);}
.key.sm{min-width:28px;height:26px;font-size:11px;padding:0 5px;border-radius:6px;box-shadow:0 4px 0 #8a8272;}
.key.g{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-d);text-shadow:0 2px 0 rgba(0,0,0,.3);}
.key.b{background:var(--blue);color:#fff;box-shadow:0 5px 0 var(--blue-d);text-shadow:0 2px 0 rgba(0,0,0,.3);}
.key.o{background:var(--orange);color:#fff;box-shadow:0 5px 0 var(--orange-d);text-shadow:0 2px 0 rgba(0,0,0,.3);}
.key.p{background:var(--purple);color:#fff;box-shadow:0 4px 0 #6a3aa8;text-shadow:0 2px 0 rgba(0,0,0,.3);}
.key.y{background:#e0a85a;color:#fff;box-shadow:0 5px 0 #8a5a24;text-shadow:0 2px 0 rgba(0,0,0,.3);}
.key.sm.g,.key.sm.b,.key.sm.o{box-shadow:0 4px 0 rgba(0,0,0,.35);}
.kanim{animation:kpress 2.4s steps(1) infinite;}
@keyframes kpress{0%{transform:translateY(0)}6%{transform:translateY(3px);filter:brightness(1.2)}14%{transform:translateY(0);filter:none}}
.klab{font-size:11px;letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.4);}
.klab.g{color:var(--green);} .klab.b{color:var(--blue);} .klab.o{color:var(--orange);} .klab.p{color:var(--purple);} .klab.r{color:var(--red);} .klab.y{color:var(--gold);}
.klab small{display:block;font-size:9px;color:#9fb5b8;letter-spacing:0;margin-top:2px;}
.mwrap{display:grid;grid-template-columns:1fr auto 1fr;gap:10px 14px;align-items:center;}
.mwrap .lft{text-align:right;} .mwrap .rgt{text-align:left;}
.mouse{position:relative;width:78px;height:116px;border-radius:39px 39px 34px 34px;background:#e9e2cf;box-shadow:0 6px 0 #8a8272;overflow:hidden;border:2px solid rgba(255,255,255,.5);}
.mouse .mb{position:absolute;top:0;width:50%;height:46px;border-bottom:3px solid #2a3033;}
.mouse .mb.l{left:0;background:var(--blue);border-right:2px solid #2a3033;animation:mclick 2s steps(1) infinite;}
.mouse .mb.r{right:0;background:var(--red);border-left:1px solid #2a3033;animation:mclick 2s steps(1) -1s infinite;}
@keyframes mclick{0%{filter:brightness(1.35)}30%{filter:none}}
.mouse .mw{position:absolute;left:50%;top:12px;width:10px;height:20px;margin-left:-5px;border-radius:5px;background:var(--gold);border:2px solid #2a3033;z-index:1;}
.mcord{width:3px;height:14px;background:#8a8272;margin:0 auto -2px;}
.mgrid{display:flex;flex-direction:column;align-items:center;}
.goal{font-size:11px;color:#cfe3e6;text-align:center;line-height:1.8;max-width:600px;}
#hotbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:none;gap:8px;z-index:4;pointer-events:none;}
.slot{background:var(--panel);border:3px solid var(--edge);border-radius:10px;padding:6px 8px 5px;box-shadow:0 5px 0 var(--shadow);font-size:10px;color:#9fb5b8;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:62px;transition:transform .1s;}
.slot .k{font-size:9px;color:#6f8386;}
.slot .dot{width:18px;height:8px;border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,.35);}
.slot.on{transform:translateY(-6px);border-color:#fff;color:#fff;}
.slot.on .k{color:var(--gold);}

#prompt{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;pointer-events:none;
  padding:10px 18px;border-radius:12px;font-size:15px;font-weight:700;text-shadow:0 3px 0 rgba(0,0,0,.4);
  border:3px solid rgba(255,255,255,.18);box-shadow:0 6px 0 var(--shadow);display:none;text-align:center;white-space:nowrap;}
/* (sits just above the nozzle bar when there is one) */
.view.hb #prompt{bottom:84px;}
#prompt.swap{background:var(--blue);display:block;animation:pop 1s ease-in-out infinite;}
#prompt.dead{background:var(--red);display:block;animation:shake .5s ease-in-out infinite;}
#prompt.busy{background:var(--orange);display:block;}
#prompt.info{background:var(--panel);display:block;}
#pbar{height:10px;background:rgba(0,0,0,.3);border-radius:5px;margin-top:8px;overflow:hidden;display:none;}
#prompt.busy #pbar{display:block;}
#pfill{height:100%;width:0;background:#fff;border-radius:5px;}
@keyframes pop{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
@keyframes shake{0%,100%{transform:translateX(-50%) rotate(-.6deg)}50%{transform:translateX(-50%) rotate(.6deg)}}
/* the reputation lock is a standing notice, not an emergency: a much gentler, slower rock */
#prompt.dead.calm{animation:shakeCalm 1.4s ease-in-out infinite;}
@keyframes shakeCalm{0%,100%{transform:translateX(-50%) rotate(-.25deg)}50%{transform:translateX(-50%) rotate(.25deg)}}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(ellipse at center,rgba(16,23,26,.6),rgba(16,23,26,.92));cursor:default;overflow:auto;}
.overlay.hide{display:none;}
#modal{justify-content:safe center;}
.night{margin:auto;}
.nighthead{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;}
.logo{font-size:clamp(40px,8vw,96px);font-weight:700;letter-spacing:4px;display:flex;}
.logo span{display:inline-block;animation:wave 2.4s ease-in-out infinite;text-shadow:0 6px 0 #1a0f0a,0 10px 0 rgba(0,0,0,.35);}
.logo span:nth-child(3n+1){color:var(--orange);} .logo span:nth-child(3n+2){color:var(--red);} .logo span:nth-child(3n){color:var(--gold);}
@keyframes wave{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.sub{font-size:14px;color:#cfe3e6;letter-spacing:2px;text-align:center;line-height:1.6;}
.btn{background:var(--blue);padding:11px 22px;border-radius:12px;font-size:18px;font-weight:700;box-shadow:0 6px 0 var(--blue-d);text-shadow:0 3px 0 rgba(0,0,0,.35);cursor:pointer;border:0;color:#fff;font-family:inherit;transition:transform .08s;}
.btn:hover{transform:translateY(-3px);} .btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--blue-d);}
.btn.red{background:var(--red);box-shadow:0 6px 0 var(--red-d);color:#fff!important;}
.btn.green{background:var(--green);box-shadow:0 6px 0 var(--green-d);}
.btn.gold{background:var(--orange);box-shadow:0 6px 0 var(--orange-d);}
.btn.small{font-size:13px;padding:8px 14px;}
.btn[disabled]{background:#4a5a5d;box-shadow:0 6px 0 #2a3638;color:#8a9a9d;cursor:not-allowed;transform:none;}
.btns{display:flex;gap:14px;}
.bounce{animation:pop2 1.1s ease-in-out infinite;}
@keyframes pop2{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.receipt{width:min(460px,90vw);}
.receipt h2{margin:0 0 4px;font-size:22px;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.4);}
.receipt .quote{font-size:12px;color:#cfe3e6;margin:8px 0 14px;line-height:1.5;}
.line{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:2px dashed rgba(255,255,255,.1);gap:12px;}
.line.total{font-size:20px;border:0;padding-top:12px;color:var(--gold);}
.line .neg{color:var(--red);} .line .pos{color:var(--green);} .line .dim{color:#7f9396;}

.night{width:min(1000px,94vw);display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 0;}
.tabs{display:flex;gap:10px;}
.tab{font-family:inherit;font-size:16px;font-weight:700;padding:10px 20px;border-radius:10px 10px 4px 4px;border:0;cursor:pointer;background:var(--panel-in);color:#7f9396;box-shadow:0 5px 0 var(--shadow);transition:transform .08s;}
.tab.on{background:var(--red);color:#fff;box-shadow:0 5px 0 var(--red-d);transform:translateY(-4px);text-shadow:0 2px 0 rgba(0,0,0,.35);}
.tab:not(.on):hover{color:#cfe3e6;}
.tabbody{width:100%;}
.sumwrap{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;}
@media (max-width:760px){.sumwrap{grid-template-columns:1fr;}}
.bigstat{font-size:34px;font-weight:700;color:var(--gold);text-shadow:0 4px 0 #6b4a00,0 6px 0 rgba(0,0,0,.35);margin:6px 0 10px;}
.house{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:2px dashed rgba(255,255,255,.08);font-size:12px;gap:10px;}
.house .n{color:#fff;} .house .t{font-size:9px;color:#7f9396;display:block;margin-top:2px;}
.tagp{padding:3px 8px;border-radius:6px;font-size:11px;white-space:nowrap;}
.tagp.g{background:var(--green);box-shadow:0 3px 0 var(--green-d);} .tagp.y{background:var(--orange);box-shadow:0 3px 0 var(--orange-d);} .tagp.x{background:var(--panel-in);color:#7f9396;}
.sect{font-size:14px;color:var(--gold);margin:6px 0 10px;text-shadow:0 2px 0 rgba(0,0,0,.4);letter-spacing:1px;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;width:100%;margin-bottom:12px;}
.ucard{background:#e9e2cf;color:#2a3033;border-radius:12px;padding:10px;box-shadow:0 6px 0 #8a8272,0 10px 18px rgba(0,0,0,.35);border:3px solid #fff;display:flex;flex-direction:column;gap:8px;transition:transform .12s;}
.ucard:nth-child(odd){transform:rotate(-1deg);} .ucard:nth-child(even){transform:rotate(1deg);}
.ucard:hover{transform:translateY(-6px) rotate(0);}
.ucard .t{font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:6px;}
.ucard .ic{width:34px;height:34px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);box-shadow:0 3px 0 rgba(0,0,0,.25);}
.ucard .d{font-size:10px;line-height:1.45;color:#4a5256;min-height:30px;}
.pips{display:flex;gap:4px;} .pips i{width:14px;height:8px;border-radius:3px;background:#c8c0ab;} .pips i.on{background:var(--orange);}
.stats{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:9px;color:#5a6266;align-items:center;}
.sbar{height:6px;background:#cfc7b2;border-radius:3px;overflow:hidden;} .sbar i{display:block;height:100%;background:var(--blue);border-radius:3px;}
.ucard .btn{font-size:14px;padding:8px 10px;}
.ucard>.btn,.ucard>.buy2{margin-top:auto;}
/* ---------- live reputation readout ---------- */
.reprow{display:flex;align-items:center;gap:8px;margin-top:10px;position:relative;}
.reprow b{font-size:17px;color:#cfe3e6;text-shadow:0 2px 0 rgba(0,0,0,.4);}
.reprow b.pos{color:var(--green);} .reprow b.neg{color:var(--red);}
.reprow .lbl{font-size:10px;color:#9fb5b8;letter-spacing:1px;}
.reppop{position:absolute;right:0;top:50%;font-size:22px;font-weight:700;white-space:nowrap;text-shadow:0 3px 0 rgba(0,0,0,.55);animation:reppop 1.6s ease-out forwards;}
@keyframes reppop{0%{opacity:0;transform:translateY(-50%) scale(.6)}12%{opacity:1;transform:translateY(-50%) scale(1.2)}25%{transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-150%)}}
/* ---------- controller: glyphs, controls sheet, menu focus ---------- */
[data-k]:empty{display:none;}
.gb{font-style:normal;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.6em;height:1.6em;padding:0 .35em;margin:0 .1em;border-radius:.35em;font-size:.78em;font-weight:700;line-height:1;vertical-align:.12em;
  background:#e9e2cf;color:#2a3033;box-shadow:0 .16em 0 #8a8272;text-shadow:none;letter-spacing:0;}
.gb.face{border-radius:50%;padding:0;width:1.6em;min-width:0;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.45);}
.gb.xa{background:#4bc26a;box-shadow:0 .16em 0 #2a7a3f;} .gb.xb{background:#fe5f55;box-shadow:0 .16em 0 #a8352f;}
.gb.xx{background:#009dff;box-shadow:0 .16em 0 #00619e;} .gb.xy{background:#ffcf4a;box-shadow:0 .16em 0 #b08a20;color:#3a2a00;text-shadow:none;}
.gb.ps,.gb.sh,.gb.stk{background:#1d2326;color:#fff;box-shadow:0 .16em 0 #000;}
.gb.ps svg{width:1em;height:1em;display:block;}
.gb.sh{border-radius:.55em .55em .3em .3em;}
.gb.stk{border-radius:50%;width:1.6em;padding:0;min-width:0;border:.14em solid #9fb5b8;}
.seg{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;}
.segb{font-family:inherit;font-size:12px;font-weight:700;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;background:var(--panel-in);color:#7f9396;box-shadow:0 4px 0 var(--shadow);}
.segb.on{background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-d);text-shadow:0 2px 0 rgba(0,0,0,.3);}
.segb:not(.on):hover{color:#cfe3e6;}
.seg .gb{font-size:12px;}
#ctlWrap{width:100%;}
.ctlbox.wide{flex-basis:100%;}
.padsvg{width:100%;max-width:720px;height:auto;display:block;overflow:visible;}
.clab{font-size:11px;font-weight:700;letter-spacing:1px;fill:#fff;}
.clab.g{fill:var(--green);} .clab.b{fill:var(--blue);} .clab.o{fill:var(--orange);} .clab.p{fill:var(--purple);} .clab.r{fill:var(--red);} .clab.y{fill:#e0a85a;}
.csub{font-size:8px;fill:#9fb5b8;}
.cline{fill:none;stroke:#9fb5b8;stroke-width:1;opacity:.85;}
.cline.o{stroke:#161e20;stroke-width:3;opacity:.7;}
.ptx{font-size:9px;font-weight:700;fill:#fff;text-anchor:middle;}
.ptx.sm{font-size:8px;}
.pdim{opacity:.4;}
.stkL{animation:stkL 2.6s ease-in-out infinite;}
@keyframes stkL{0%,100%{transform:translate(0,0)}20%{transform:translate(0,-4px)}45%{transform:translate(4px,0)}70%{transform:translate(0,4px)}85%{transform:translate(-4px,0)}}
.stkR{animation:stkR 2.4s linear infinite;}
@keyframes stkR{0%,100%{transform:translate(4px,0)}12.5%{transform:translate(2.8px,2.8px)}25%{transform:translate(0,4px)}37.5%{transform:translate(-2.8px,2.8px)}50%{transform:translate(-4px,0)}62.5%{transform:translate(-2.8px,-2.8px)}75%{transform:translate(0,-4px)}87.5%{transform:translate(2.8px,-2.8px)}}
.trL{animation:mclick 2s steps(1) infinite;} .trR{animation:mclick 2s steps(1) -1s infinite;}
.fpA{animation:fflash 2.4s steps(1) infinite;} .fpX{animation:fflash 2.4s steps(1) -1.2s infinite;}
@keyframes fflash{0%{filter:brightness(1.5)}12%{filter:none}}
.pfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;}
.pstat{font-size:10px;color:#9fb5b8;} .pstat.on{color:var(--green);}
.hbb{align-self:center;font-size:15px;}
body.pad .slot .k{display:none;}
body.pad,body.pad *{cursor:none!important;}
body.pad .padfocus{outline:3px solid #fff;outline-offset:4px;transform:translateY(-3px);}
body.pad .ucard:has(.padfocus){transform:translateY(-6px) rotate(0);}
#padToast{position:fixed;right:16px;bottom:16px;z-index:8;background:var(--panel);border:3px solid var(--edge);border-radius:10px;padding:8px 12px;font-size:11px;box-shadow:0 5px 0 var(--shadow);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none;}
#padToast.on{opacity:1;transform:none;}
/* dev: performance overlay (F3) */
#perf{position:fixed;left:8px;bottom:8px;z-index:9;display:none;pointer-events:none;background:rgba(10,14,16,.88);border:1px solid #5b6f73;border-radius:6px;padding:6px 8px;
  font:10px/1.3 ui-monospace,Menlo,Consolas,monospace;color:#cfe3e6;max-height:calc(100vh - 16px);overflow:hidden;}
#perf .ph{font-size:11px;margin-bottom:4px;} #perf canvas{display:block;margin-bottom:4px;} #perf pre{margin:0;font:inherit;white-space:pre;}
#netBadge{position:fixed;right:16px;top:74px;z-index:4;display:none;pointer-events:none;background:var(--panel);border:3px solid var(--edge);border-radius:10px;padding:5px 10px;font-size:11px;letter-spacing:1px;color:#9fe0ff;box-shadow:0 4px 0 var(--shadow);}
#netBanner{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:5;display:none;pointer-events:none;background:var(--panel);border:3px solid var(--edge);border-radius:12px;padding:10px 18px;font-size:15px;letter-spacing:2px;box-shadow:0 5px 0 var(--shadow);}
.keypad .codebox{display:flex;gap:8px;justify-content:center;} .codebox span{width:34px;height:44px;border-radius:8px;background:var(--panel-in);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--gold);box-shadow:inset 0 3px 0 rgba(0,0,0,.35);}
.kp{display:grid;grid-template-columns:repeat(3,76px);gap:12px;justify-content:center;} .kpb{font-size:20px;padding:10px 0;}
.netbox{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:11px;color:#9fb5b8;letter-spacing:1px;} .netbox b{font-size:22px;color:var(--gold);letter-spacing:4px;}
.shopcols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;}
.shopcol{background:rgba(0,0,0,.18);border-radius:12px;padding:10px;border:3px solid #c8352c;max-height:max(280px,calc(100vh - 360px));overflow-y:auto;scrollbar-width:thin;}
.shopcol.p1{border-color:#2f9a5a;}
.shopcol .cards{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
.colhead{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:8px;letter-spacing:1px;} .colhead b{color:var(--gold);}
.shnote{font-size:9px;color:#9fb5b8;letter-spacing:1px;line-height:1.5;margin:-6px 0 10px;}
.buy2{display:flex;gap:6px;flex-wrap:wrap;} .buy2 .btn{flex:1;padding:8px 4px;font-size:12px;}
body.pad .padfocus.pf1{outline-color:#6fd18e;}
.sum2{display:flex;flex-direction:column;gap:18px;width:100%;}
.heroes{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:720px){.heroes{grid-template-columns:1fr;}}
.hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 14px 16px;}
.hero .big{font-size:46px;font-weight:700;line-height:1;display:flex;align-items:center;gap:12px;}
.hero .big.gold{color:var(--gold);text-shadow:0 4px 0 #6b4a00,0 7px 0 rgba(0,0,0,.35);}
.hero .big.pos{color:var(--green);text-shadow:0 4px 0 var(--green-d),0 7px 0 rgba(0,0,0,.35);}
.hero .big.neg{color:var(--red);text-shadow:0 4px 0 var(--red-d),0 7px 0 rgba(0,0,0,.35);}
.hero .small{font-size:11px;color:#9fb5b8;letter-spacing:2px;}
.lvup{font-size:18px;color:var(--gold);letter-spacing:3px;text-shadow:0 3px 0 #6b4a00;animation:pop2 .9s ease-in-out infinite;}
.rankname{font-size:14px;color:var(--gold);letter-spacing:2px;text-shadow:0 2px 0 rgba(0,0,0,.4);}
.rankbar{width:100%;max-width:280px;height:10px;background:var(--panel-in);border-radius:5px;overflow:hidden;}
.rankbar i{display:block;height:100%;background:var(--gold);border-radius:5px;transition:width 1.1s cubic-bezier(.3,1,.5,1);}
.rankrow{display:flex;justify-content:space-between;width:100%;max-width:280px;font-size:9px;color:#7f9396;margin-top:-4px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px;}
.chip{display:flex;align-items:center;gap:6px;background:var(--panel-in);border-radius:8px;padding:5px 9px 5px 6px;font-size:10px;box-shadow:0 3px 0 var(--shadow);animation:chipin .4s cubic-bezier(.3,1.6,.6,1) backwards;}
.chip .cl{color:#cfe3e6;letter-spacing:1px;} .chip b{font-size:12px;} .chip b.pos,.htile .pos{color:var(--green);} .chip b.neg{color:var(--red);}
@keyframes chipin{from{opacity:0;transform:scale(.3)}}
.htiles{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.htile{width:112px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:10px 8px;background:var(--panel);border:3px solid var(--edge);border-radius:12px;box-shadow:0 5px 0 var(--shadow);animation:chipin .45s cubic-bezier(.3,1.6,.6,1) backwards;}
.htile.paid{border-color:var(--green);}
.htile .hn{font-size:10px;color:#fff;text-align:center;letter-spacing:1px;}
.htile .hb{width:100%;height:7px;background:var(--panel-in);border-radius:4px;overflow:hidden;} .htile .hb i{display:block;height:100%;}
.htile .hp{font-size:11px;} .htile .gold{color:var(--gold);} .htile .dim{color:#9fb5b8;}
/* ---------- yard editor ---------- */
#editor{position:fixed;inset:0;z-index:7;background:#10171a;display:flex;flex-direction:column;cursor:default;}
#editor.hide{display:none;}
.etop{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 14px;align-items:center;background:var(--panel);border-bottom:3px solid var(--edge);box-shadow:0 4px 0 var(--shadow);}
.egrp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.egrp .label{margin:0 4px 0 0;}
.ebtn{font-family:inherit;font-size:11px;padding:6px 9px;border-radius:8px;border:0;background:var(--panel-in);color:#cfe3e6;cursor:pointer;box-shadow:0 3px 0 var(--shadow);white-space:nowrap;}
.ebtn:hover{color:#fff;}
.ebtn.on{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--blue-d);}
.ebtn.go{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-d);}
.ebtn.warn{background:var(--red);color:#fff;box-shadow:0 3px 0 var(--red-d);}
.ebtn .k{color:var(--gold);margin-right:4px;}
.esw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;box-shadow:0 0 0 1px rgba(0,0,0,.5);}
#ebody{flex:1;min-height:0;display:flex;}
#eside{position:relative;width:176px;flex:none;overflow-y:auto;padding:8px;background:var(--panel);border-right:3px solid var(--edge);}
#eside.shut{width:40px;overflow:hidden;}#eside.shut #eMenus{display:none;}
#eSideTog{display:block;margin:0 0 8px auto;}
.esec{margin-bottom:8px;}
.ehead{width:100%;text-align:left;font-family:inherit;font-size:11px;padding:6px 8px;border:0;border-radius:8px;background:var(--panel-in);color:var(--gold);cursor:pointer;box-shadow:0 3px 0 var(--shadow);}
.elist{display:flex;flex-direction:column;gap:5px;padding:7px 0 2px;}.esec.shut .elist{display:none;}
.elist .ebtn{text-align:left;overflow:hidden;text-overflow:ellipsis;}
#ewrap{position:relative;flex:1;min-width:0;min-height:0;}
#ecan{position:absolute;inset:0;width:100%;height:100%;display:block;}
.ehint{position:absolute;left:14px;bottom:12px;font-size:10px;color:#9fb5b8;line-height:1.7;pointer-events:none;text-shadow:0 2px 0 #000;}
.etag{position:absolute;right:14px;bottom:12px;font-size:12px;color:#fff;pointer-events:none;text-align:right;text-shadow:0 2px 0 #000;}
.esec[data-sec=h] .elist{max-height:34vh;overflow-y:auto;padding-right:3px;}
.elist .ebtn{flex:none;}