/* ---------- night-city dark sections ---------- */
.dark,.deckstrip{background:
  radial-gradient(900px 480px at 12% -8%,rgba(121,103,248,.38),transparent 70%),
  radial-gradient(800px 460px at 100% 108%,rgba(232,92,144,.26),transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,
  #12142A;position:relative;overflow:hidden}
.dark:before,.deckstrip:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(1.6px 1.6px at 8% 22%,#fff,transparent),radial-gradient(1.4px 1.4px at 27% 74%,#fff,transparent),
  radial-gradient(1.8px 1.8px at 46% 12%,#FFE9A8,transparent),radial-gradient(1.2px 1.2px at 63% 58%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 81% 26%,#fff,transparent),radial-gradient(1.3px 1.3px at 92% 80%,#C9C2FF,transparent),
  radial-gradient(1.4px 1.4px at 15% 90%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 92%,#fff,transparent);
  animation:twinkle 4s ease-in-out infinite alternate;opacity:.55}
@keyframes twinkle{to{opacity:.95}}
.dark>.wrap{position:relative;z-index:1}
.dark h2 span[style*="gold"],.dark h2 .w[style]{background:none}
.dark .card{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1.5px solid rgba(255,255,255,.14);border-radius:20px;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 18px 40px rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.dark .card:hover{transform:translateY(-6px);border-color:rgba(240,180,41,.7);box-shadow:0 0 0 1px rgba(240,180,41,.4),0 0 34px rgba(240,180,41,.25),0 18px 40px rgba(0,0,0,.3)}
.dark .kicker{color:var(--gold)}
.dark .hr-list>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px}

/* playable hints */
.playable{cursor:pointer;position:relative}
.playtag,.peektag{position:absolute;right:16px;bottom:14px;font-family:Silkscreen,monospace;font-size:11px;letter-spacing:1px;padding:5px 9px;border-radius:8px;background:var(--ink);color:#fff;transition:transform .2s}
.peektag{background:var(--gold);color:var(--ink)}
.playable:hover .playtag,.playable:hover .peektag{transform:scale(1.08)}
.step.playable .playtag{animation:tapPulse 2.4s ease-in-out infinite}
.gcard{cursor:pointer}
.gcard .inspect{position:absolute;left:8px;bottom:8px;font-family:Silkscreen,monospace;font-size:9px;background:#fff;color:var(--ink);padding:3px 6px;border-radius:5px;opacity:0;transform:translateY(4px);transition:.2s}
.gcard:hover .inspect,.gcard:focus .inspect{opacity:1;transform:none}
.gcard:focus{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- game modal ---------- */
#gm{margin:auto;border:0;padding:0;background:transparent;width:min(720px,calc(100% - 24px));max-height:calc(100vh - 24px);overflow:visible;color:var(--ink)}
#gm::backdrop{background:rgba(18,20,42,.7);backdrop-filter:blur(5px)}
#gm .gm-card{position:relative;background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:10px 10px 0 var(--gk,#7967F8);max-height:calc(100vh - 40px);overflow:auto}
#gm.flip .gm-card{animation:cardIn .5s cubic-bezier(.2,.9,.3,1.15)}
@keyframes cardIn{from{transform:perspective(900px) rotateY(-70deg) scale(.85);opacity:0}}
.gm-x{position:absolute;right:12px;top:12px;z-index:3;width:36px;height:36px;border-radius:10px;border:2px solid var(--ink);background:#fff;font-size:16px;cursor:pointer}
.stampx{display:inline-block;font-family:Silkscreen,monospace;font-size:13px;letter-spacing:1px;color:#fff;background:var(--mint);padding:8px 12px;border-radius:10px;transform:rotate(-3deg);animation:stampIn .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes stampIn{from{transform:scale(2.2) rotate(-12deg);opacity:0}}

/* big card */
.bigcard{display:grid;grid-template-columns:240px 1fr}
.bc-art{background:var(--k);display:grid;place-items:center;position:relative;min-height:300px;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:14px 14px}
.bc-art svg{width:120px!important;height:auto!important;max-height:160px;filter:drop-shadow(4px 4px 0 rgba(23,26,43,.25));animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.bc-art .rar{position:absolute;top:12px;left:12px;font-family:Silkscreen;font-size:11px;background:rgba(23,26,43,.8);color:#fff;padding:4px 8px;border-radius:6px}
.bc-body{padding:28px 28px 26px}
.bc-kick{font-size:11px;color:var(--grey)}
.bc-body h3{font-size:28px;margin:4px 0 8px}
.bc-lore{font-size:15px;font-style:italic}
.bc-list{list-style:none;margin:14px 0;display:grid;gap:8px}
.bc-list li{font-size:14.5px;color:var(--ink2);display:flex;gap:10px}
.bc-list li:before{content:"";flex:none;width:10px;height:10px;margin-top:6px;background:var(--k);border:2px solid var(--ink);border-radius:3px}
.bc-stats{display:grid;gap:8px;margin:16px 0 20px}
.sbar{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:10px;font-size:13px;font-weight:600}
.sbar div{height:10px;border:2px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--soft)}
.sbar i{display:block;height:100%;animation:grow .8s ease both}
@keyframes grow{from{width:0!important}}
.sbar b{font-size:12px;color:var(--grey)}
@media(max-width:640px){.bigcard{grid-template-columns:1fr}.bc-art{min-height:170px}}

/* quests */
.quest,.peek{padding:26px 26px 22px}
.q-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.q-head .pix{font-size:12px;background:var(--gk);color:#fff;padding:6px 9px;border-radius:8px}
.q-head .sk{font-size:11px;color:var(--grey)}
.quest h3,.peek h3{font-size:26px}
.q-sub{font-size:14.5px;margin-top:4px}
.q-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:20px}
.q-msg{font-size:14px;color:var(--ink2)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.plots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;padding:12px;background:#9AA0AE;border-radius:16px}
.plot{border-radius:10px;padding:12px 8px;min-height:74px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-align:center;font:inherit;border:0}
.plot b{font-size:13px}.plot small{font-size:11px;color:var(--grey)}
.plot.taken{background:var(--pc);color:#fff;opacity:.85}.plot.taken small{color:rgba(255,255,255,.85)}
.plot.hq{background:linear-gradient(135deg,#7967F8,#5B4FE8);color:#fff;box-shadow:inset 0 0 0 3px #F4D27A}.plot.hq small{color:#E4E0FF}
.plot.free{background:#DCEBD2;border:2px dashed #7AA86A;cursor:pointer;transition:.15s}
.plot.free:hover{transform:translateY(-3px);background:#E8F4DF}
.plot.free.on{background:#fff;border:3px solid var(--purple);box-shadow:0 0 0 4px rgba(121,103,248,.25)}
.plot.free.claimed,.plot.claimed{background:var(--purple);color:#fff;border-color:var(--ink)}.plot.claimed small{color:#fff}
.builder{display:grid;grid-template-columns:1fr 220px;gap:20px;margin-top:16px;align-items:start}
.b-form{display:grid;gap:14px}
.b-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.b-form input{font:inherit;font-size:15px;padding:11px 13px;border:2px solid var(--line);border-radius:12px;outline:none}
.b-form input:focus{border-color:var(--purple)}
.swatches,.fpick{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:10px;border:3px solid #fff;box-shadow:0 0 0 2px var(--line);cursor:pointer}
.sw.on{box-shadow:0 0 0 3px var(--ink)}
.fpick button{width:40px;height:40px;border-radius:10px;border:2px solid var(--line);background:#fff;font-family:"Press Start 2P";font-size:12px;cursor:pointer}
.fpick button.on{background:var(--purple);color:#fff;border-color:var(--purple)}
.b-price{font-size:14px;color:var(--ink2)}
.b-prev{background:linear-gradient(180deg,#EAF4FB,#DCEBD2 70%);border-radius:16px;padding:14px 10px 6px;text-align:center;border:2px solid var(--line)}
.b-sign{display:inline-block;color:#fff;font-weight:800;font-size:12px;padding:5px 12px;border-radius:999px;margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bTower svg{width:100%;height:auto}
#bTower svg.rise .rg{transform-box:fill-box;transform-origin:50% 100%;animation:build 1.1s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes build{from{transform:scaleY(0)}}
@media(max-width:640px){.builder{grid-template-columns:1fr}.plots{grid-template-columns:repeat(2,1fr)}}
.walkin{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px}
.wi-floor{position:relative;height:250px;border-radius:16px;border:6px solid #D6CEF0;background:linear-gradient(#ECE5D8 2px,transparent 2px) 0 0/40px 40px,linear-gradient(90deg,#ECE5D8 2px,transparent 2px) 0 0/40px 40px,#F7F4EE}
.wi-door,.wi-desk,.wi-cabin{position:absolute;font-family:Silkscreen;font-size:10px;letter-spacing:1px;display:grid;place-items:center;border-radius:10px}
.wi-door{left:40%;bottom:-6px;width:70px;height:26px;background:#BFE0F5;color:#3A7DAA}
.wi-desk{left:20%;top:30%;width:120px;height:34px;background:#D8B58A;color:#7A5A34;border:3px solid #B98F5E}
.wi-cabin{right:6%;top:8%;width:120px;height:90px;background:#EFEBFA;border:5px solid #9C92C8;color:#5A4E96;font-family:Poppins;font-weight:700;font-size:12px;letter-spacing:0;transition:.3s}
.wi-cabin.open{background:#E6F8F1;border-color:#36C995;color:#1F7A55}
.wi-me{position:absolute;left:44%;top:86%;transform:translate(-50%,-100%);transition:left 1s ease,top 1s ease}
.wi-me.sit{transform:translate(-50%,-92%) scale(.94)}
.wi-log{background:var(--bg);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.wi-log .sk{font-size:10px;color:var(--grey)}
.wi-row{background:#fff;border:2px solid var(--line);border-radius:10px;padding:8px 10px;animation:rise .35s ease both}
@media(max-width:640px){.walkin{grid-template-columns:1fr}}

/* HR console */
.hrc{background:#fff;color:var(--ink);border-radius:20px;border:3px solid #fff;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 60px rgba(121,103,248,.35);overflow:hidden}
.hrc-bar{display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;padding:10px 14px;font-size:13px;font-weight:600}
.hrc-bar i{width:10px;height:10px;border-radius:50%;background:#E85C5C}.hrc-bar i:nth-child(2){background:#F0B429}.hrc-bar i:nth-child(3){background:#36C995}
.hrc-bar span{margin-left:8px}.hrc-bar b{margin-left:auto;font-size:10px;color:var(--mint);font-weight:400}
.hrc-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;background:#F3F1FB}
.hrc-tabs button{border:2px solid transparent;background:#fff;border-radius:10px;padding:9px 4px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink2)}
.hrc-tabs button.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--purple);color:var(--ink)}
.hrc-pane{padding:18px;min-height:300px;display:grid;gap:12px;align-content:start;animation:rise .3s ease both}
.hrc-pane small{font-size:12px;color:var(--grey);font-weight:600}
.hbtn{border:0;border-radius:12px;background:var(--mint);color:#fff;font:inherit;font-weight:700;padding:11px 18px;cursor:pointer;box-shadow:0 4px 0 #239B70}
.hbtn.out{background:var(--red);box-shadow:0 4px 0 #B84444}
.hbtn.sm{padding:6px 10px;font-size:12px;background:var(--purple);box-shadow:0 3px 0 var(--deep)}
.hbtn[disabled]{opacity:.5;cursor:not-allowed}
.att-top{display:flex;justify-content:space-between;align-items:center}
.att-top .big{font-size:28px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.att-status{background:var(--bg);border-radius:12px;padding:10px 12px;font-size:14px}
.wk{display:flex;align-items:flex-end;gap:10px;height:110px;padding-top:6px}
.wk div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.wk i{width:100%;border-radius:6px 6px 2px 2px;background:#C9C2FF;transition:height .5s}
.wk i.today{background:var(--purple)}
.wk span{font-size:11px;color:var(--grey);font-weight:700}
.lv-bal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lv-bal div{background:var(--bg);border-radius:12px;padding:12px;text-align:center}
.lv-bal b{font-size:26px;display:block}
.lv-form{display:flex;gap:8px;flex-wrap:wrap}
.lv-form select{font:inherit;font-size:14px;padding:10px;border:2px solid var(--line);border-radius:10px;flex:1}
.req{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:2px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;animation:rise .3s ease both}
.req b{margin-left:auto;font-size:12px;padding:4px 8px;border-radius:6px;background:#FFF4DB;color:#9A6B00}
.req.approved b{background:#E6F8F1;color:#1F7A55}
.pay-l{display:grid;gap:8px;font-size:14px;font-weight:600}
.pay-l b{font-size:22px}
.pay-l input{accent-color:var(--purple)}
.slip{border:2px dashed var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:6px}
.slip-h{font-size:10px;color:var(--grey);margin-bottom:4px}
.slip .row{display:flex;justify-content:space-between;font-size:14px}
.slip .minus b{color:var(--red)}
.slip .net{border-top:2px solid var(--ink);padding-top:8px;margin-top:4px;font-size:16px}.slip .net b{color:var(--mint)}
.ladder2{display:grid;gap:8px}
.rung{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.rung i{height:28px;width:var(--w);max-width:170px;border-radius:8px;background:var(--rc);opacity:.45;transition:.2s}
.rung.on i{opacity:1;box-shadow:3px 3px 0 var(--ink)}
.rdesc{background:var(--bg);border-radius:12px;padding:12px;font-size:14px;line-height:1.5}

/* AI peek chat */
.chat{margin-top:16px;background:var(--bg);border-radius:16px;padding:14px;min-height:220px;max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.pm{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-line;animation:rise .3s ease both}
.pm.v{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:4px}
.pm.bot{align-self:flex-start;background:#fff;border:2px solid var(--ink);border-bottom-left-radius:4px}
.pm.sys{align-self:center;font-size:12px;color:var(--grey);background:none;padding:2px}
.pm.typing{display:flex;gap:4px}
.pm.typing i{width:6px;height:6px;border-radius:50%;background:var(--grey);animation:dot 1s infinite}
.pm.typing i:nth-child(2){animation-delay:.15s}.pm.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.4}}