:root{--bg:#05060a;--card:rgba(16,18,24,.85);--line:#3a2a14;--amber:#ffb020;--amber2:#ff6a00;--text:#f3e6c8;--mute:#7a6f58;--green:#3dba6a;--glow:rgba(255,176,32,.35)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,Segoe UI,sans-serif;color:var(--text);min-height:100vh;
background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(255,120,0,.18),transparent),linear-gradient(180deg,#0a0b10,var(--bg));
background-size:cover;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;
background-image:linear-gradient(rgba(255,176,32,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,176,32,.07) 1px,transparent 1px);background-size:48px 48px}
.wrap{max-width:1000px;margin:0 auto;padding:16px 16px 100px;position:relative;z-index:1}
.brand{letter-spacing:.35em;font-size:12px;color:var(--amber);font-weight:800;text-shadow:0 0 18px var(--glow)}
.status{font-size:11px;color:#a89060;display:flex;gap:8px;align-items:center}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
h1{font-size:24px;margin:14px 0 6px}.sub{color:var(--mute);font-size:13px;margin-bottom:12px}
.grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;backdrop-filter:blur(12px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.label{font-size:10px;letter-spacing:.2em;color:var(--amber);margin-bottom:8px}
.row,.barrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #1c1c22;font-size:13px}
.row:last-child,.barrow:last-child{border:0}
.mute{color:var(--mute)}.tiny{font-size:12px}
.feed{height:220px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.4;white-space:pre-wrap}
.msg img.media{max-width:220px;border-radius:10px;display:block;margin-top:6px}
.me{align-self:flex-end;background:linear-gradient(135deg,#2a1a0a,#1d140c);border:1px solid #5a3a12}
.sys{align-self:flex-start;background:#12151c;border:1px solid #2a303a}
.who{font-size:10px;color:var(--amber);margin-bottom:4px;display:flex;align-items:center;gap:6px}
form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
input,button,select{border-radius:10px;border:1px solid var(--line);background:#0b0c10;color:var(--text);padding:11px;font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--amber)}
input{flex:1}
button{background:linear-gradient(135deg,var(--amber),var(--amber2));color:#140e04;font-weight:800;border:0;cursor:pointer;transition:transform .08s,filter .12s,opacity .12s}
button:hover{filter:brightness(1.08)}
button:active,button.pressed{transform:scale(.96);filter:grayscale(.35) brightness(.75);opacity:.85}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.quick button{background:#160f08;color:var(--amber);border:1px solid #4a3010;font-size:12px;padding:8px 10px}
.stickers button{font-size:18px;padding:6px 8px;background:#120e0a}
nav{position:fixed;bottom:0;left:0;right:0;background:rgba(8,9,12,.92);border-top:1px solid var(--line);display:flex;backdrop-filter:blur(16px);z-index:20}
nav button{flex:1;background:transparent;color:var(--mute);border:0;padding:14px 6px;font-size:10px;letter-spacing:.1em;position:relative}
nav button.on{color:var(--amber);text-shadow:0 0 12px var(--glow)}
nav button.on::after{content:"";position:absolute;left:22%;right:22%;bottom:6px;height:2px;background:var(--amber)}
.gate{max-width:420px;margin:12vh auto;padding:24px;position:relative;z-index:1}
.rejoin{display:none}
html.rejoin #gate{display:none}
html.rejoin .rejoin{display:block;margin:30vh auto 0;text-align:center;font:700 14px var(--mono,monospace);letter-spacing:.4em;color:var(--amber,#ffb020);opacity:.85}
.rejoin em{font-style:normal;color:var(--holo,#4fe3ff);letter-spacing:.2em}
.rejoin-glyph{display:inline-block;margin-right:6px}
.hidden{display:none}
.bar{height:8px;background:#1a1a1a;border-radius:8px;overflow:hidden;margin-top:8px}
.fill{height:100%;background:linear-gradient(90deg,#c4483a,var(--amber),#ffe08a);width:8%;transition:width .4s}
.pill{font-size:10px;padding:2px 6px;border-radius:999px;border:1px solid #333}
.pill.g{border-color:#2a5;color:var(--green)}
.n{width:18px;color:var(--amber);font-weight:700}
iframe{border:0;border-radius:12px;width:100%;height:352px}.tw{height:280px}
.story{background:rgba(12,14,18,.9);border:1px solid var(--line);border-radius:14px;padding:14px;min-height:88px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.gcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.gcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.gcal-dow{font-size:10px;color:var(--mute);text-align:center;padding:4px 0}
.gcal-day{min-height:72px;background:#0b0c10;border:1px solid var(--line);border-radius:8px;padding:5px;cursor:pointer}
.gcal-day.out{opacity:.3}.gcal-day.today{border-color:#886020}
.gcal-day.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 0 16px rgba(255,176,32,.25);background:#15110a}
.gcal-num{font-size:11px;color:var(--mute)}
.gcal-chip{font-size:10px;background:#1a140c;border:1px solid #3a2c12;color:var(--amber);border-radius:6px;padding:2px 4px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcal-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.cal-note{font-size:11px;color:#8a7a55;margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.patch-row{padding:8px 0;border-bottom:1px solid #1c1c22;font-size:13px}
.patch-ver{color:var(--amber);font-weight:700;margin-right:8px}
.sug{border-bottom:1px solid #1c1c22;padding:8px 0}
#toasts{position:fixed;right:16px;bottom:72px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:280px}
.toast{background:#1a1208;border:1px solid var(--amber);color:var(--text);padding:12px 14px;border-radius:12px;font-size:13px;box-shadow:0 0 24px rgba(255,120,0,.25);animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gifgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.gifgrid img{width:100%;border-radius:8px;cursor:pointer;border:1px solid var(--line)}
.av{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid #5a3a12;background:#1a140c;flex-shrink:0}
.av.lg{width:84px;height:84px;border-width:2px}
.ghost{background:transparent!important;color:var(--mute)!important;border:1px solid #333!important;padding:2px 6px!important;font-size:11px!important}
.who-row{display:flex;align-items:center;gap:8px}
.quest-row.done {
  opacity: 0.85;
  border-color: rgba(61, 186, 106, 0.35);
}
.quest-row.done span:first-child {
  color: var(--green);
  text-decoration: line-through;
  text-decoration-color: rgba(61, 186, 106, 0.5);
}
.quest-row.done span:last-child {
  color: var(--green);
  font-weight: 700;
}
.pit-map{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pit-cell{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,176,32,.25);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mute);background:#0c0e14}
.pit-cell.here{border-color:var(--amber);color:var(--amber);box-shadow:0 0 10px rgba(255,176,32,.35)}
.pit-cell.done{background:#142014;color:#3dba6a}
.pit-cell.boss{border-color:#c4483a;color:#c4483a}
#pit-hud{font-size:12px;letter-spacing:.04em;line-height:1.35;max-width:100%}
.pit-hud-top{color:#cfc4a8}
.pit-hud-bless{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pit-chip{
  font-size:9px;font-style:normal;letter-spacing:.08em;font-weight:700;
  border:1px solid #5a3a12;color:#ffe08a;padding:2px 6px;border-radius:999px;
}
.pit-read{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;
  letter-spacing:.12em;color:#c8d0c4;
}
.pit-tag{
  border:1px solid #3dba6a;color:#3dba6a;padding:2px 7px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.pit-read .pit-tag:first-child{min-width:3.2em;text-align:center}
.pit-kv em{display:block;font-style:normal;font-size:8px;color:#6a7a68;letter-spacing:.16em}
.pit-kv{line-height:1.1}
.pit-rail{
  flex:1;min-width:72px;height:6px;background:#1a2018;border:1px solid #2a3a28;
  position:relative;overflow:hidden;
}
.pit-rail i{
  display:block;height:100%;background:linear-gradient(90deg,#3dba6a,#ffe08a);
  box-shadow:0 0 8px #3dba6a;
}
.uni-sky{height:88px;border-radius:10px;margin-bottom:10px;border:1px solid #3a2a14;
  position:relative;overflow:hidden;background:#08060a}
.uni-sky i{position:absolute;pointer-events:none}
.uni-sky::after{content:attr(data-u);position:absolute;right:10px;bottom:8px;z-index:5;
  font-size:10px;letter-spacing:.18em;color:#ffe08a;text-shadow:0 0 8px #ffb020}.us-stars{inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:18px 18px;opacity:.35}
.us-planet{width:28px;height:28px;border-radius:50%;
  left:57%;top:22px;right:auto;
  background:radial-gradient(circle at 30% 30%,#8cf,#245);box-shadow:0 0 16px #246}
.us-ring{width:52px;height:14px;left:56%;top:32px;right:auto;
  border:2px solid rgba(200,220,255,.35);border-radius:50%;transform:rotate(-18deg)}
.us-lamps{left:14px;bottom:10px;width:70px;height:16px;
  background:linear-gradient(90deg,#ffe08a 4px,transparent 4px,transparent 14px,#c4483a 14px,#c4483a 18px,transparent 18px);
  background-size:20px 16px;opacity:0}
.us-grain{inset:0;opacity:0;background:repeating-linear-gradient(0deg,rgba(255,80,40,.08),transparent 3px)}.uni-sky.u0 .us-lamps{opacity:1}
.uni-sky.u0 .us-planet,.uni-sky.u0 .us-ring{display:none}
.uni-sky.u0{background:linear-gradient(#243044 40%,#1a1408 40%)}.uni-sky.u1,.uni-sky.u2{background:linear-gradient(#1a2848,#0a1020)}
.uni-sky.u1 .us-planet,.uni-sky.u2 .us-planet{right:auto;left:18%;background:radial-gradient(circle at 30% 30%,#fc8,#a40)}.uni-sky.u3,.uni-sky.u4{background:radial-gradient(ellipse at 50% 120%,#1a3048,transparent 50%),#070814}
.uni-sky.u3 .us-stars{opacity:.6;animation:twinkle 3s ease infinite}
.uni-sky.u3 .us-lamps,
.uni-sky.u4 .us-lamps{
  opacity:.5;left:12%;bottom:22px;width:10px;height:10px;border-radius:50%;
  background:#ffe08a;box-shadow:0 0 10px #ffe08a;background-size:auto;
}
.uni-sky.u5,.uni-sky.u6{background:radial-gradient(circle at 80% 20%,#406,#02040c)}
.uni-sky.u5 .us-planet{background:radial-gradient(circle at 30% 30%,#f8c,#604);width:36px;height:36px}.uni-sky.u7{background:#120808}
.uni-sky.u7 .us-grain{opacity:1}
.uni-sky.u7 .us-planet{filter:grayscale(1) brightness(.6)}
.uni-sky.u7 .us-stars{opacity:.15}@keyframes twinkle{50%{opacity:.25}}
.pit-tag.dead{border-color:#c4483a;color:#c4483a}
.sp-map{display:flex;align-items:center;gap:0;flex-wrap:nowrap;margin:10px 0 14px;overflow:auto}
.sp-node{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,176,32,.3);display:flex;align-items:center;justify-content:center;font-size:14px;background:#120e18;flex:0 0 36px;z-index:1}
.sp-node.now{border-color:#c9a4ff;box-shadow:0 0 14px rgba(160,80,255,.45);color:#e8d6ff}
.sp-node.done{background:#1a1420;opacity:.55}
.sp-pick{
  display:none;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:12px 0;padding:12px;border:1px dashed #8a6030;border-radius:12px;
}
#pit-bless.sp-pick,
#sp-pick.sp-pick{display:none}
#pit-bless.sp-pick.on,
#sp-pick.sp-pick.on{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:90;background:#120e0a;border:2px solid #e0c35a;
  padding:14px;border-radius:12px;max-width:480px;
}
.sp-path{height:3px;flex:1;min-width:10px;background:linear-gradient(90deg,#3a2a14,#8a6030);opacity:.55}
.sp-stage{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;border-radius:14px;
  background:radial-gradient(ellipse at 50% 0%,rgba(120,40,180,.25),transparent 55%),linear-gradient(180deg,#140c18,#0a0710);
}
.sp-stage.elite{background:radial-gradient(ellipse at 50% 0%,rgba(200,140,40,.28),transparent 55%),linear-gradient(180deg,#1a1208,#0c0804)}
.sp-stage.boss{background:radial-gradient(ellipse at 50% 0%,rgba(160,30,80,.35),transparent 50%),linear-gradient(180deg,#1a0610,#070308)}
.sp-stage.hit .sp-foe{animation:spSlam .22s ease}
@keyframes spSlam{40%{transform:translateX(8px)}}
.sp-foe{text-align:center;min-height:170px}
.sp-you{display:flex;flex-direction:column;justify-content:center;gap:8px}
.sp-art{position:relative;width:110px;height:110px;margin:0 auto 10px;overflow:hidden}
.sp-art::before,.sp-art::after{content:"";position:absolute;pointer-events:none}
.sp-art.jaw{border-radius:50%;background:radial-gradient(circle at 30% 28%,#8a4a3a,#3a1414 62%,#120808);box-shadow:0 0 24px rgba(180,40,40,.4)}
.sp-art.jaw::before{left:22%;right:22%;bottom:28%;height:16px;border-radius:8px;background:#1a0808;box-shadow:inset 0 0 0 3px #c4483a}
.sp-art.jaw::after{width:12px;height:12px;left:28%;top:28%;border-radius:50%;background:#ffe08a;box-shadow:26px 0 0 #ffe08a}
.sp-art.cult{border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 30% 20%,#6a3a8a,#1a0a24 60%,#080410)}
.sp-art.cult::before{left:20%;right:20%;top:8%;height:22px;border-radius:40% 40% 0 0;background:#2a1040}
.sp-art.cult::after{left:32%;right:32%;top:48%;height:8px;border-radius:4px;background:#c4483a}
.sp-art.louse{border-radius:50%;height:80px;margin-top:16px;background:radial-gradient(circle at 30% 30%,#c4483a,#4a1010)}
.sp-art.louse::before{width:14px;height:14px;left:26%;top:28%;border-radius:50%;background:#ffe08a}
.sp-art.louse::after{left:30%;right:30%;bottom:16%;height:8px;border-radius:6px;background:#2a0808}
.sp-art.nob,.sp-art.elite{border-radius:18px 18px 40% 40%;background:radial-gradient(circle at 30% 20%,#c49030,#4a2808 60%,#140804);box-shadow:0 0 28px rgba(200,140,40,.45)}
.sp-art.nob::before,.sp-art.elite::before{width:14px;height:22px;left:16px;top:8px;background:#8a6030;border-radius:4px;box-shadow:64px 0 0 #8a6030}
.sp-art.nob::after,.sp-art.elite::after{left:28%;right:28%;top:52%;height:12px;background:#1a0a04;border-radius:4px}
.sp-art.champ,.sp-art.boss{border-radius:16px;background:radial-gradient(circle at 30% 20%,#6a2060,#1a0818 55%,#050308);box-shadow:0 0 32px rgba(160,40,180,.5)}
.sp-art.champ::before,.sp-art.boss::before{left:12%;right:12%;top:16%;height:12px;background:#c9a227;border-radius:4px}
.sp-art.champ::after,.sp-art.boss::after{width:18px;height:18px;left:28%;top:42%;border-radius:50%;background:#ffe08a;box-shadow:36px 0 0 #ffe08a}
.sp-name{letter-spacing:.16em;font-size:12px;color:#e8d6ff}
.sp-intent{margin:6px 0;color:#ffb020;font-weight:800}
.sp-bar{height:10px;background:#1a1220;border-radius:8px;overflow:hidden;border:1px solid #3a2040}
.sp-hp{height:100%;width:100%;background:linear-gradient(90deg,#8a2030,#e04040);transition:width .2s}
.sp-bar.you .sp-hp{background:linear-gradient(90deg,#206030,#4cda7a)}
.sp-shield{border:1px solid #5a8ad0;color:#9cf;border-radius:8px;padding:2px 8px;box-shadow:0 0 12px rgba(80,140,220,.35)}
.sp-hand{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;justify-content:center}
.sp-card{
  flex:0 0 118px;width:118px;min-height:150px;border-radius:12px;padding:10px;cursor:pointer;
  background:linear-gradient(180deg,#2a1a14,#120c10);
  border:1px solid #8a6030;color:#f4ead0;
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,220,150,.15);
}
.sp-card:hover{transform:translateY(-6px);border-color:#ffb020}
.sp-card .c{font-size:10px;color:#ffb020;letter-spacing:.14em}
.sp-card h4{font-size:13px;margin:6px 0}
.sp-card p{font-size:11px;color:#b8a888;line-height:1.3}
.sp-card.atk{border-color:#a04030}
.sp-card.sk{border-color:#3060a0}
.sp-card.pw{border-color:#a070c0}
.sp-stage{grid-template-columns:1.1fr .9fr 1fr}
.sp-hero{
  position:relative;width:84px;height:96px;margin:0 auto 8px;
  filter:drop-shadow(0 0 10px rgba(255,176,32,.35));
}
.sp-hero .boot,.sp-hero .leg,.sp-hero .body,.sp-hero .head,.sp-hero .eye{
  position:absolute;background:#ffb020;
}
.sp-hero .leg{width:14px;height:22px;bottom:0;border-radius:3px;background:#5a3a18}
.sp-hero .leg.l{left:18px}.sp-hero .leg.r{right:18px}
.sp-hero .body{left:18px;right:18px;top:34px;height:36px;border-radius:8px}
.sp-hero .head{left:24px;right:24px;top:8px;height:30px;border-radius:50%}
.sp-hero .eye{width:6px;height:6px;top:18px;border-radius:50%;background:#1a1008}
.sp-hero .eye.l{left:30px}.sp-hero .eye.r{right:30px}
.sp-hero .plate{position:absolute;left:14px;right:14px;top:32px;height:10px;border-radius:3px;background:#c9a227;display:none}
.sp-hero .horn{position:absolute;top:2px;width:8px;height:14px;background:#c9a227;border-radius:3px 3px 0 0;display:none}
.sp-hero .horn.l{left:22px;transform:rotate(-18deg)}
.sp-hero .horn.r{right:22px;transform:rotate(18deg)}
.sp-hero.up .plate{display:block}
.sp-hero.bossready .horn{display:block}
.sp-hero.sp-red .body,.sp-hero.sp-red .head{background:#c4483a}
.sp-hero.sp-green .body,.sp-hero.sp-green .head{background:#3dba6a}
.sp-hero.sp-gold .body,.sp-hero.sp-gold .head{background:#ffe08a;filter:drop-shadow(0 0 8px #e0c35a)}
.sp-hero.hit{animation:spSlam .22s ease}
.sp-feed{
  background:rgba(8,6,12,.55);border:1px solid #3a2a14;border-radius:12px;
  padding:10px;min-height:150px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;
}
.sp-line{font-size:12px;color:#cfc4a8;line-height:1.3;border-left:2px solid #5a3a12;padding-left:8px}
.sp-line.you{color:#ffe08a;border-color:#ffb020}
.sp-line.foe{color:#f0a0a0;border-color:#c4483a}
.sp-line.sys{color:#a890c8;border-color:#6a3a8a}
@media(max-width:720px){.sp-stage{grid-template-columns:1fr}}
.bi-scene{
  position:relative;height:180px;border-radius:14px;overflow:hidden;
  margin:8px 0 12px;border:1px solid rgba(255,176,32,.35);
  box-shadow:0 0 28px rgba(255,120,0,.12);
}
.bi-sky{
  position:absolute;inset:0 0 38% 0;
  background:linear-gradient(#4a6a9a,#c4a070);
  background-size:200% 200%;
  animation:biSky 12s linear infinite;
}
#bi-scene[data-skin="bi-biltong"]{box-shadow:inset 0 0 40px rgba(196,72,58,.25)}
#bi-scene[data-skin="bi-ska"]{box-shadow:inset 0 0 40px rgba(80,160,255,.25)}
#bi-scene[data-skin="bi-taxi"]{box-shadow:inset 0 0 40px rgba(255,200,80,.25)}
.bi-ground{position:absolute;left:0;right:0;bottom:0;height:42%;background:#2a4a28}
.bi-stars{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:28px 28px;opacity:.25;
  animation:biStars 8s linear infinite;
}
.bi-build{
  position:absolute;left:50%;bottom:16%;transform:translateX(-50%);
  font-size:58px;
  filter:drop-shadow(0 0 16px rgba(255,176,32,.45));
  animation:biBob 1.1s ease-in-out infinite;
}
.bi-build.hit{animation:biHit .25s ease}
.bi-float{position:absolute;inset:0;pointer-events:none;font-size:12px;color:#b8ff90;font-weight:800}
.bi-cash{
  font-size:28px;font-weight:800;color:var(--amber);
  text-shadow:0 0 12px var(--glow);margin:6px 0;
  transition:transform .15s;
}
.bi-cash.hit{animation:biCash .25s ease}
.bi-buy{width:100%;margin-top:6px;text-align:left;font-size:12px}
.bi-buy.owned,.bi-buy:disabled{
  filter:grayscale(1);opacity:.45;cursor:default;text-decoration:line-through;
}
.help-btn{float:right;width:28px;height:28px;border-radius:50%;padding:0;font-size:14px;line-height:1}
.help-pop{display:none;margin-top:10px;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(8,10,16,.94);font-size:13px;line-height:1.45;white-space:pre-wrap}
.help-pop.on{display:block}
#bi-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
#bi-perks .bi-buy{width:100%;margin-top:0;font-size:11px;padding:8px 6px;white-space:normal;line-height:1.25;min-height:52px}
@media(max-width:720px){#bi-perks{grid-template-columns:repeat(2,1fr)}}
.bi-shoot{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bi-shot{
  position:absolute;width:70px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#fff);
  animation:biShot .7s linear forwards;
  opacity:.85;
}
.bi-ufo{
  position:absolute;top:18%;font-size:22px;opacity:0;
  animation:biUfo 18s ease-in-out infinite;
  pointer-events:none;filter:drop-shadow(0 0 8px #8af);
}
@keyframes biShot{
  from{transform:translate3d(0,0,0) rotate(-18deg);opacity:.9}
  to{transform:translate3d(-160px,70px,0) rotate(-18deg);opacity:0}
}
@keyframes biUfo{
  0%,70%{opacity:0;transform:translate3d(-20%,0,0)}
  78%{opacity:.9;transform:translate3d(30%,8px,0)}
  90%{opacity:.9;transform:translate3d(80%,-6px,0)}
  100%{opacity:0;transform:translate3d(120%,0,0)}
  100%{transform:translate3d(120%,0,0) scale(1)}
}
.plot-row{margin:10px 0 14px}
.plot-pips{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;margin:6px 0}
.plot-pips i{height:8px;border-radius:2px;background:#1a1a22}
.plot-pips i.on{background:linear-gradient(90deg,#c4483a,var(--amber))}
.crate-modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:16px}
.crate-modal.hidden{display:none}
.crate-panel{width:min(560px,100%);background:#0c0a08;border:1px solid #c9a227;border-radius:16px;padding:16px;box-shadow:0 0 50px rgba(201,162,39,.4)}
.crate-window{position:relative;overflow:hidden;height:118px;border:2px solid #e0c35a;border-radius:10px;background:linear-gradient(180deg,#1a1408,#0a0804)}
.crate-line{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 14px #fff;z-index:3;transform:translateX(-50%)}
.crate-reel{display:flex;height:100%;will-change:transform;position:relative;z-index:1}
.crate-fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.crate-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe08a;animation:crateSpark .7s ease-out forwards}
@keyframes crateSpark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.crate-window{
  position:relative;overflow:hidden;height:132px;
  border:2px solid #e0c35a;border-radius:10px;
  background:#0a0804;
}
.crate-item{
  flex:0 0 128px;width:128px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;border-right:1px solid rgba(0,0,0,.35);padding:8px;
  text-align:center;
}
.crate-item .g{font-size:34px;line-height:1}
.crate-item .n{
  font-size:11px;letter-spacing:.04em;line-height:1.15;
  white-space:normal;overflow:visible;text-overflow:unset;
  max-width:116px;font-weight:700;
}
.crate-item.blue{background:#102030;color:#8cf}
.crate-item.purple{background:#1a1030;color:#c9a}
.crate-item.pink{background:#301028;color:#f8c}
.crate-item.red{background:#301008;color:#f86}
.crate-item.gold{background:linear-gradient(180deg,#5a4010,#2a1808);color:#ffe08a}
.crate-won{text-align:center;margin:12px 0;min-height:24px;color:#ffe08a;font-weight:800}
.odds-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:3px 0;border-bottom:1px solid #1c1c22}
.bi-stage{
  position:absolute;left:0;right:0;bottom:10%;
  z-index:5;height:58%;
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto auto;
  align-items:end;
  padding:0 12px;
  pointer-events:none;
}
.bi-unis,.bi-eggfield,.bi-habs{
  display:grid;gap:3px 4px;justify-items:center;align-items:end;
  font-size:18px;line-height:1;text-shadow:0 2px 0 #000;
}
.bi-unis{grid-auto-flow:column;grid-auto-columns:22px;font-size:20px}
.bi-eggfield{grid-template-columns:repeat(6,16px);font-size:15px;opacity:.95}
.bi-habs{grid-template-columns:repeat(4,22px);font-size:20px}
.bi-unis span,.bi-eggfield span,.bi-habs span{
  filter:drop-shadow(0 0 5px rgba(255,176,32,.4));
}
.bi-world{
  position:relative;width:84px;height:78px;
  pointer-events:none;
  filter:drop-shadow(0 0 16px hsl(var(--u-hue,145) 85% 50% / .8));
}
.bi-world .trunk{
  position:absolute;left:50%;bottom:0;
  width:12px;height:34px;
  transform:translateX(-50%);
  border-radius:3px 3px 2px 2px;
  background:
    linear-gradient(90deg,#2a160c 0 3px,#6a3e1c 3px 7px,#3a2010 7px 12px);
}
.bi-world .limb{
  position:absolute;left:50%;bottom:28px;
  width:22px;height:4px;border-radius:4px;
  background:#4a2a14;
}
.bi-world .limb.l{transform:translateX(-100%) rotate(-28deg);transform-origin:right center}
.bi-world .limb.r{transform:rotate(24deg);transform-origin:left center}
.bi-world .canopy{
  position:absolute;left:50%;bottom:22px;
  width:78px;height:52px;transform:translateX(-50%);
}
.bi-world .leaf{
  position:absolute;border-radius:50% 50% 46% 54%;
  background:radial-gradient(circle at 32% 28%,
    hsl(var(--u-hue,145) 90% 62%),
    hsl(var(--u-hue,145) 72% 28%) 68%,
    hsl(var(--u-hue,145) 50% 16%));
}
.bi-world .l1{width:46px;height:38px;left:2px;top:10px}
.bi-world .l2{width:42px;height:36px;right:0;top:12px}
.bi-world .l3{width:36px;height:30px;left:21px;top:0}
.bi-world .l4{width:28px;height:22px;left:12px;top:22px;opacity:.85}
.bi-world .spark{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff8c8;box-shadow:0 0 7px #ffe27a;
  animation:treeSpark 2.6s ease-in-out infinite;
}
@keyframes treeSpark{0%,100%{opacity:.2}50%{opacity:1}}
.bi-build{z-index:3}
.bi-float{z-index:8}
#bi-uni{margin-top:12px}
.bi-eggwrap{display:flex;align-items:center;gap:10px;margin:8px 0}
.bi-egg{font-size:42px;filter:drop-shadow(0 0 10px rgba(255,220,150,.55));animation:biBob 1.4s ease-in-out infinite}
.bi-egg.hot{filter:drop-shadow(0 0 14px #ffe08a)}
.raid-card .pill{margin-left:6px}
.sk-prev{position:relative}
.sk-pop{
  display:none;position:absolute;left:50%;bottom:110%;transform:translateX(-50%);
  background:#120e0a;border:1px solid var(--amber);border-radius:10px;padding:8px 10px;
  font-size:11px;white-space:nowrap;z-index:8;pointer-events:none;
}
.sk-prev:hover .sk-pop{display:block}
.sk-dude{width:42px;height:42px;margin:0 auto 4px;border-radius:50%}
.bi-buy.sk-prev{
  position:relative;
  overflow:visible;
  filter:none !important;
  opacity:1 !important;
  text-decoration:none !important;
}
.sk-pop{
  display:none;position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);
  background:#120e0a;border:1px solid var(--amber);border-radius:10px;
  padding:10px 12px;font-size:11px;white-space:nowrap;z-index:30;
  pointer-events:none;filter:none;opacity:1;
}
.sk-prev:hover .sk-pop{display:block}
.sk-dude{
  width:42px;height:42px;margin:0 auto 4px;border-radius:50%;
  border:1px solid #5a3a12;
}
.pit-touch{
  display:none;align-items:center;justify-content:center;gap:24px;
  margin:12px 0 4px;
}
.pit-stick{
  width:110px;height:110px;border-radius:50%;
  border:2px solid #5a3a12;background:rgba(20,14,8,.6);position:relative;touch-action:none;
}
.pit-knob{
  width:44px;height:44px;border-radius:50%;background:#ffb020;position:absolute;left:33px;top:33px;
}
.pit-fire{
  width:90px;height:90px;border-radius:50%;
  background:#c4483a;border:2px solid #ffe08a;color:#fff;font-weight:800;letter-spacing:.08em;
}
@media(max-width:800px){
  .pit-touch{display:flex}
}
@media(min-width:801px){
  .pit-touch{display:none}
}
#house-help{
  position:relative;
  top:-2px;
  left:6px;
  margin:0;
}
.forge-stage{
  min-height: 160px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,176,32,.18), transparent 55%),
    #0a0806;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.forge-stage > img{ display: none; }
.forge-anvil, .forge-stage .stamp{
  width: 96px;
  height: 96px;
  margin: 24px auto 6px;
  pointer-events: none;
  font-size: 0;
  background: url("/static/art/forge-grid.png") 0% 0% / 400% 300% no-repeat;
  image-rendering: pixelated;
  mix-blend-mode: lighten;
  filter: contrast(1.15) saturate(1.1);
}
#forge button, .forge-buy, [data-forge]{
  pointer-events: auto !important;
  font-size: 12px !important;
  font-family: "Segoe UI", system-ui, sans-serif !important;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
}
header{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 12px;
}
.status{
  justify-self: start;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 600;
}
.brand-px{
  justify-self: center;
  height: 56px;
  width: auto;          /* never 100% */
  max-width: none;
  object-fit: contain;
  image-rendering: auto; /* photo banner, not pixel-scale */
  display: block;
}
.hdr-spacer{ width: 1px; }
.forge-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 60%,rgba(255,176,32,.2),transparent 50%);animation:fgPulse 2.4s ease-in-out infinite}
@keyframes fgPulse{50%{transform:scale(1.08);opacity:.7}}
.forge-stage.slam .forge-anvil{animation:fgSlam .35s ease}
@keyframes fgSlam{40%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(1)}}
.forge-stage.gold{box-shadow:0 0 40px rgba(255,200,80,.45)}
.forge-stage.red{box-shadow:0 0 40px rgba(255,60,40,.4)}
.forge-stage.pink{box-shadow:0 0 32px rgba(255,80,180,.35)}
.forge-name{position:relative;z-index:2;letter-spacing:.18em;font-weight:800;margin-top:8px;color:#ffe08a}
.forge-rare{font-size:11px;letter-spacing:.2em;color:#cfc4a8}
.fg-card{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;margin:6px 0;border-radius:10px;border:1px solid #3a2a14;cursor:pointer;
}
.fg-shake{animation:fgShake .4s ease}
@keyframes fgShake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.fg-card.blue{border-color:#3a6a8a}.fg-card.purple{border-color:#6a3a8a}
.fg-card.pink{border-color:#8a3a6a}.fg-card.red{border-color:#8a3030}
.fg-card.gold{border-color:#e0c35a;background:#1a1208}
.fg-card.on{box-shadow:0 0 12px rgba(255,176,32,.35)}
#feed.rain{background-image:repeating-linear-gradient(110deg,transparent,transparent 8px,rgba(140,200,255,.04) 9px)}
#feed.grain{background-image:repeating-linear-gradient(0deg,rgba(255,80,40,.04),transparent 2px)}
.pit-card{display:none;position:fixed;left:50%;top:28%;transform:translateX(-50%);z-index:85;
  text-align:center;letter-spacing:.2em;color:#ffe08a;pointer-events:none}
.pit-card.on{display:block;animation:cardIn 1.5s ease}
.pit-card b{display:block;font-size:22px}
.pit-card span{display:block;margin-top:8px;font-size:11px;color:#cfc4a8;letter-spacing:.08em}
@keyframes cardIn{0%{opacity:0;letter-spacing:.6em}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
#vb-menu button,#vb-moves button,#vb-party button{
  min-width:72px;letter-spacing:.1em;font-size:11px
}
.vb-field{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:120px}
.vb-sprite{width:72px;height:72px;image-rendering:pixelated;background:#0a120e;border:1px solid #1e2e20}
.vb-foe .vb-name{color:#ffb0a0}.vb-you .vb-name{color:#8f8}
.vb-name{text-align:center;letter-spacing:.14em;font-size:11px;margin:4px 0}
.vb-log{
  min-height:36px;color:#cfc4a8;font-size:12px;margin:8px 0;
  border-top:1px solid #1e2e20;padding-top:6px;letter-spacing:.04em;
}
.sp-bar .sp-hp{height:100%;background:linear-gradient(90deg,#3dba6a,#ffe08a)}
#vb-menu button,#vb-moves button,#vb-party button{
  min-width:72px;letter-spacing:.1em;font-size:11px
}
#host-wipe{display:none}
/* ===== BruNet chrome / sheets (keep this last) ===== */
:root{
  --line: rgba(201,162,39,.28);
  --line2: rgba(201,162,39,.12);
}

header{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 12px;
  border-bottom: none;
  background: linear-gradient(180deg, transparent, var(--line2));
}
header::after{
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.status{
  justify-self: start;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 600;
}
.brand-px{
  justify-self: center;
  height: 56px;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  image-rendering: auto;
  display: block;
  margin: 0;
}
.hdr-spacer{ width: 1px; }

h1, .label{
  font-family: "Segoe UI", system-ui, sans-serif;
}
h1{ font-size: 22px !important; font-weight: 600; letter-spacing: 0; }
.label{ font-size: 11px !important; letter-spacing: .16em; font-weight: 600; opacity: .7; }

.card, .forge-stage, .pit-card, .bi-scene,
.crate-panel, .vb-field{
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

nav{ border-top: 1px solid var(--line2); }
nav button{
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  opacity: .75;
  box-shadow: none !important;
  border-radius: 0 !important;
}
nav button.on{ opacity: 1; color: var(--amber); }
nav button.on::after{ height: 1px !important; background: #c9a227; }

button, .quick button{
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .06em;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}
.forge-stage{
  position: relative;
  overflow: hidden;
}
.forge-glow{
  pointer-events: none !important;
  z-index: 0;
}
.forge-anvil, .forge-stage .stamp{
  pointer-events: none;
  z-index: 1;
}
.forge-name, .forge-rare{
  position: relative;
  z-index: 2;
  pointer-events: none;
}
#forge button,
#tab-forge button,
.forge-stage button,
.forge-stage + button,
.forge-stage ~ button,
.forge-buy,
[data-forge]{
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
  font-size: 12px !important;
  font-family: "Segoe UI", system-ui, sans-serif !important;
  opacity: 1 !important;
  min-height: 36px;
}
.bet-felt{
  position:relative;margin:12px 0;min-height:280px;padding:18px 16px 22px;
  border-radius:50% / 28%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20,60,32,.2), transparent 55%),
    repeating-linear-gradient(45deg, #16351f 0 2px, #12402a 2px 4px);
  box-shadow:
    inset 0 0 0 10px #1a1208,
    inset 0 0 0 12px #c9a227,
    0 16px 40px #0008;
  overflow:hidden;
  background-image: url("/static/art/felt.png"); background-size:cover;
}
.bet-felt::before{
  content:"";position:absolute;inset:14px;
  border-radius:46% / 24%;
  border:1px solid rgba(201,162,39,.28);
  pointer-events:none;
}
.bet-dealer,.bet-you{position:relative;z-index:1;text-align:center}
.bet-dealer{margin-top:6px}
.bet-you{margin-top:28px}
.bet-pot{text-align:center;letter-spacing:.16em;margin:8px 0}
.bet-hand{display:flex;justify-content:center;gap:8px;min-height:88px;align-items:center}
.bet-card{
  width:54px;height:78px;border-radius:6px;
  background:#f4ead0;color:#1a1008;
  border:1px solid #c9a227;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:5px 6px;font-weight:800;font-size:14px;
  box-shadow:2px 3px 0 #0006;
}
.bet-card.red{color:#8a2030}
.bet-card.back{
  background:repeating-linear-gradient(135deg,#1a1208,#1a1208 4px,#3a2a14 4px,#3a2a14 8px);
  color:transparent;border-color:#8a6030;
}
#bet-modes button.on,#bet-stakes button.on{filter:brightness(1.15)}

.bet-seat{
  font-size: 10px;
  letter-spacing: .42em;
  font-weight: 800;
  color: #ffe08a;
  text-shadow: 0 0 12px rgba(255,176,32,.55), 0 1px 0 #000;
  margin-bottom: 6px;
}
.bet-pot{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 2px;
  color: #ffe08a;
}
.bet-pot em{
  font-style: normal;
  font-size: 9px;
  letter-spacing: .32em;
  opacity: .75;
}
.bet-pot b{
  font-size: 22px;
  letter-spacing: .08em;
  font-weight: 800;
  text-shadow: 0 0 16px rgba(255,176,32,.45);
}
.bet-phase{
  text-align: center;
  font-size: 9px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #e0c35a;
  text-shadow: 0 0 8px rgba(201,162,39,.4);
  min-height: 1em;
}
.bet-banner{
  text-align: center;
  margin: 10px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffe08a;
  text-shadow: 0 0 14px rgba(255,176,32,.35);
}
.bet-card{
  box-shadow: 0 4px 0 #1a1008, 0 8px 18px #0008;
}
.bet-line-row{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.bet-hand{
  margin: 0 auto;
}
.bet-count{
  position: absolute;
  left: calc(50% + 86px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  border: 1px solid #c9a227;
  background: radial-gradient(circle at 30% 30%, #3a2a14, #120e08);
  color: #ffe08a;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255,176,32,.35), inset 0 0 0 2px #1a1208;
}
.bet-count:empty{ visibility: hidden; }
@font-face {
  font-family: "LinAB";
  src: local("Noto Sans Linear A"), local("Noto Sans Linear B"),
       local("Aegean"), local("Code2001");
}
.glyph-desk { display: flex; flex-direction: column; gap: 10px; }
.glyph-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.glyph-score { background: rgba(0,0,0,.35); padding: 8px 12px; border-radius: 8px; }
.glyph-score em { font-style: normal; letter-spacing: .12em; font-size: 10px; color: var(--amber); }
.glyph-score b { display: block; font-size: 22px; }
.glyph-cols { display: grid; grid-template-columns: 180px 1fr 220px; gap: 12px; }
.glyph-felt { min-height: 220px; padding: 12px; border-radius: 10px;
  background: rgba(20, 40, 28, .55); }
.gly-doc, .gly-sign { display: block; width: 100%; text-align: left; margin: 0 0 6px;
  background: rgba(0,0,0,.25); border: 0; color: inherit; padding: 6px 8px; cursor: pointer; }
.gly-doc.on, .gly-sign.on { outline: 1px solid var(--amber); }
.glyph-signs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 280px; overflow: auto; }
.glyph-signs .gly-sign { width: auto; min-width: 56px; text-align: center; }
.gly-g { font-family: "LinAB", "Noto Sans Linear A", "Noto Sans Linear B", serif;
  font-size: 26px; display: block; line-height: 1.1; }
.gly-ab, .gly-v, .gly-n { display: block; font-size: 10px; opacity: .75; }
.gly-word { margin: 0 0 12px; }
.gly-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.gly-cards .gly-sign { width: auto; min-width: 52px; text-align: center; }
.gly-read { font-size: 18px; color: var(--amber); margin-top: 4px; letter-spacing: .04em; }
.glyph-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gly-src { margin: 0 0 8px; font-size: 12px; }
@media (max-width: 900px) {
  .glyph-cols, .glyph-bottom { grid-template-columns: 1fr; }
}
.dots-desk {
  max-width: 640px;
  margin: 0 auto 80px;
  padding: 12px 12px 18px;
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(255,120,0,.16), transparent),
    linear-gradient(180deg, #12141c, #0a0b10);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.dots-rail {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dots-chip {
  background: rgba(255,176,32,.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  min-width: 64px;
  text-align: center;
}
.dots-chip b { display: block; color: var(--amber); font-size: 14px; }
.dots-chip span { font-size: 9px; letter-spacing: .16em; color: var(--mute); }
.dots-daily, #d-help {
  margin-left: auto;
  background: linear-gradient(135deg, var(--amber), var(--amber2));
  color: #140e04;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  letter-spacing: .08em;
}
#d-help { margin-left: 0; width: 36px; padding: 8px 0; }
.dots-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dots-moves {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #1a120c;
  display: grid; place-items: center;
  font-weight: 800; font-size: 20px;
  box-shadow: 0 0 0 3px #1a120c, 0 0 18px var(--glow);
}
.dots-goals { display: flex; gap: 14px; flex: 1; justify-content: center; }
.dots-goal { text-align: center; font-size: 13px; color: var(--text); }
.dots-goal i {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  margin: 0 auto 4px; box-shadow: 0 0 8px currentColor;
}
.dots-meta { text-align: right; font-size: 11px; letter-spacing: .16em; color: var(--mute); }
.dots-lives { color: #e15b5b; letter-spacing: 2px; }
#d-board {
  display: block; width: 100%; height: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(62,198,201,.12), transparent 40%),
    linear-gradient(180deg, #1a2240, #12182c);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,176,32,.12);
}
.dots-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dots-bar button {
  flex: 1; border: 0;
  background: #1c1e28; color: var(--text);
  padding: 10px 0; border-radius: 999px; cursor: pointer;
  letter-spacing: .1em; font-size: 11px;
  border: 1px solid var(--line);
}
.dots-bar button.on { background: var(--amber); color: #140e04; }
.dots-shop { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dots-shop button {
  background: linear-gradient(135deg, var(--amber), var(--amber2));
  color: #140e04; border: 0; border-radius: 999px; padding: 8px 12px;
}

#d-map.hidden,
#d-board.hidden,
.dots-trail.hidden { display: none !important; }

.dots-trail {
  position: relative;
  height: min(72vh, 640px);
  margin-top: 8px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #07140f;
}
.d-sky {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, #1b3a28, transparent 55%),
    linear-gradient(180deg, #0b1c16 0%, #07140f 40%, #04100c 100%);
}
.d-sky::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,230,180,.7), transparent),
    radial-gradient(1px 1px at 28% 40%, rgba(255,230,180,.45), transparent),
    radial-gradient(1.5px 1.5px at 63% 14%, rgba(255,230,180,.6), transparent),
    radial-gradient(1px 1px at 81% 32%, rgba(255,230,180,.4), transparent),
    radial-gradient(1.5px 1.5px at 44% 22%, rgba(255,230,180,.5), transparent);
  animation: d-twinkle 6s ease-in-out infinite;
}
.d-mist {
  position: absolute; left: -20%; right: -20%; bottom: 8%;
  height: 40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(180,220,200,.16), transparent 70%);
  animation: d-drift 18s ease-in-out infinite alternate;
}
.d-canopy {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background:
    radial-gradient(ellipse 40% 90% at 8% 110%, #0a2418 60%, transparent 61%),
    radial-gradient(ellipse 50% 110% at 22% 120%, #0d2c1c 58%, transparent 59%),
    radial-gradient(ellipse 36% 80% at 78% 115%, #0a2418 60%, transparent 61%),
    radial-gradient(ellipse 55% 120% at 94% 125%, #0c281a 56%, transparent 57%),
    linear-gradient(180deg, transparent 20%, #06140f 100%);
}
.d-fireflies span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #d6ff8a;
  box-shadow: 0 0 10px #d6ff8a, 0 0 18px rgba(180,255,120,.5);
  animation: d-fly 7s ease-in-out infinite;
}
@keyframes d-twinkle { 50% { opacity: .45; } }
@keyframes d-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes d-fly {
  0%,100% { transform: translate(0,0); opacity: .2; }
  40% { opacity: 1; }
  70% { transform: translate(18px,-28px); opacity: .35; }
}

.dots-trail-scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 8px 0 48px;
}
.d-world {
  position: relative;
  min-height: 1180px;
  margin: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.d-world-bg { display: none; }

.d-world-head {
  position: relative;
  z-index: 2;
  padding: 18px 16px 8px;
  text-align: center;
}
.d-world-head .kicker {
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--amber);
}
.d-world-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
  letter-spacing: .12em;
  color: var(--text);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.d-world-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--mute);
}

.d-path { position: relative; z-index: 2; height: 1080px; }
.d-path svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}

.d-node {
  position: absolute;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 0; border-radius: 50%;
  cursor: pointer;
  color: #140e04;
  font-weight: 800; font-size: 12px;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #e0c35a 45%, #b88620);
  box-shadow:
    0 0 0 3px rgba(8,9,12,.85),
    0 8px 18px rgba(0,0,0,.45),
    0 0 16px rgba(255,176,32,.25);
  z-index: 3;
}
.d-node .stars {
  position: absolute; left: 50%; bottom: -14px;
  transform: translateX(-50%);
  font-size: 9px; color: #ffe08a; letter-spacing: 1px;
}
.d-node.on {
  background: radial-gradient(circle at 35% 30%, #fff, #3ec6c9 50%, #147a86);
  animation: d-pulse 1.6s ease-in-out infinite;
}
.d-node.cleared {
  background: radial-gradient(circle at 35% 30%, #ffe08a, var(--amber) 50%, var(--amber2));
}
.d-node.lock {
  background: radial-gradient(circle at 35% 30%, #3a3d4a, #1c1e28);
  color: #6a6558;
  cursor: default;
  filter: grayscale(.35);
}
.d-node.boss {
  width: 68px; height: 68px;
  margin: -34px 0 0 -34px;
}

.d-deco { position: absolute; z-index: 1; pointer-events: none; }
.d-deco.tree {
  width: 120px; height: 150px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 78%, #2a4a28, #102010 70%, transparent 71%),
    radial-gradient(ellipse 55% 40% at 50% 52%, #3d6a34, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 30%, #5a8a3a, transparent 70%);
}
.d-deco.flame {
  width: 28px; height: 44px;
  background: radial-gradient(ellipse at 50% 80%, #ffb020, #ff6a00 40%, transparent 70%);
  animation: d-flicker 1.2s ease-in-out infinite;
}
.d-deco.crystal {
  width: 22px; height: 36px;
  background: linear-gradient(180deg, #b07ad6, #3a1a5a);
  clip-path: polygon(50% 0, 100% 40%, 75% 100%, 25% 100%, 0 40%);
}
.d-deco.taxi {
  width: 54px; height: 22px;
  background: linear-gradient(180deg, #f0c14a, #b88620);
  border-radius: 6px 10px 4px 4px;
}
.d-deco.tower {
  width: 18px; height: 90px;
  background: linear-gradient(180deg, #c4483a, #2a1010);
}

@keyframes d-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes d-flicker {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

.dots-toast {
  min-height: 22px; margin-top: 8px; text-align: center;
  letter-spacing: .14em; font-size: 12px; color: var(--amber);
}
.dots-help p { color: var(--text); font-size: 13px; line-height: 1.45; }
.dots-pop {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%) scale(.92);
  min-width: 180px;
  padding: 16px 22px 14px;
  border-radius: 16px;
  text-align: center;
  background: rgba(8,12,10,.88);
  border: 1px solid rgba(255,176,32,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  color: var(--text);
  letter-spacing: .14em;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
  transition: opacity .18s, transform .18s;
}
.dots-pop.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.dots-pop.win { border-color: #3ec6a5; color: #d6ff8a; }
.dots-pop.fail { border-color: #e15b5b; color: #ffb0a8; }
.dots-pop .big { display: block; font-size: 18px; font-weight: 800; }
.dots-pop .sub { display: block; margin-top: 6px; font-size: 11px; color: var(--mute); letter-spacing: .12em; }
.dots-combo {
  position: absolute;
  right: 16px; top: 12px;
  font-size: 13px;
  letter-spacing: .16em;
  color: #ffe08a;
  text-shadow: 0 0 12px rgba(255,176,32,.45);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
  z-index: 7;
}
.dots-combo.show { opacity: 1; transform: translateY(0); }
.dots-desk { position: relative; }
.px-desk {
  max-width: 960px;
  margin: 0 auto 96px;
  padding: 4px 4px 20px;
}
.px-hud {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.px-chip {
  background: linear-gradient(180deg, rgba(255,176,32,.1), rgba(255,176,32,.03));
  border: 1px solid rgba(255,176,32,.18);
  border-radius: 999px;
  padding: 8px 14px;
  min-width: 68px;
  text-align: center;
}
.px-chip b {
  display: block;
  color: var(--amber);
  font-size: 13px;
  letter-spacing: .1em;
}
.px-chip span {
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--mute);
}
.px-chip.warn {
  border-color: rgba(225,91,91,.45);
  background: rgba(225,91,91,.08);
}
.px-chip.warn b { color: #ff8b82; }
.px-dead {
  flex: 1;
  font-size: 15px;
  letter-spacing: 2px;
  color: #d9cbb3;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.px-shell {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(220px, .85fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 760px) {
  .px-shell { grid-template-columns: 1fr; }
  .px-war-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .px-war-stats em { font-size: 13px; }
}
.px-stage {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,160,40,.12), transparent 55%),
    #120e0a;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,176,32,.2);
  box-shadow:
    0 24px 50px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,220,160,.08);
}
.px-stage.phase-2 { box-shadow: 0 24px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(255,120,20,.12); }
.px-stage.phase-3 { box-shadow: 0 24px 50px rgba(0,0,0,.55), inset 0 0 55px rgba(255,70,10,.2); }
.px-stage.phase-4 { box-shadow: 0 0 30px rgba(255,70,10,.25), inset 0 0 70px rgba(255,40,0,.28); }
#px-board {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
#px-env {
  position: absolute;
  left: 14px;
  top: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  pointer-events: none;
  border-radius: 10px;
}
#px-fx {
  position: absolute;
  left: 14px;
  top: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  pointer-events: none;
  border-radius: 10px;
}
.px-hint-panel {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(90,209,255,.35);
  background: rgba(9,12,18,.92);
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(90,209,255,.06);
  font-family: 'Consolas', 'SF Mono', monospace;
}
.px-hint-panel.hidden { display: none; }
.px-hint-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.px-hint-top span {
  font-size: 9px;
  letter-spacing: .2em;
  color: #5ad1ff;
}
.px-hint-top button {
  background: none;
  border: none;
  color: var(--mute);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
}
.px-hint-top button:hover { color: #cfe8ff; }
.px-hint-text {
  font-size: 12px;
  line-height: 1.5;
  color: #d7e6f2;
  margin-bottom: 10px;
}
.px-hint-text b {
  color: #5ad1ff;
  letter-spacing: .04em;
}
#px-hint-play {
  width: 100%;
  border: 1px solid rgba(90,209,255,.4);
  background: rgba(90,209,255,.1);
  color: #cfe8ff;
  border-radius: 999px;
  padding: 8px 0;
  letter-spacing: .14em;
  font-size: 10px;
  cursor: pointer;
}
#px-hint-play:hover { background: rgba(90,209,255,.2); }
.px-sheet {
  background:
    linear-gradient(180deg, rgba(255,176,32,.08), transparent 22%),
    #0c0e14;
  border: 1px solid rgba(255,176,32,.16);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
}
.px-sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.px-sheet-top b {
  display: block;
  letter-spacing: .2em;
  color: var(--amber);
  font-size: 13px;
}
.px-sheet-top span {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--mute);
}
.px-sheet-top em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: #f2e6cf;
  letter-spacing: .14em;
  font-size: 16px;
}
.px-moves {
  flex: 1;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  overflow-y: auto;
  max-height: 440px;
}
.px-moves li {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.px-moves li:nth-child(odd) { background: rgba(255,255,255,.015); }
.px-moves i {
  color: var(--mute);
  padding: 8px 0 8px 14px;
  font-style: normal;
  font-size: 11px;
}
.px-moves b,
.px-moves span {
  padding: 8px 10px;
  font-weight: 650;
  letter-spacing: .03em;
  cursor: pointer;
  color: #e8ddcc;
}
.px-moves b:hover,
.px-moves span:hover {
  color: var(--amber);
  background: rgba(255,176,32,.08);
}
.px-moves li.on b,
.px-moves li.on-b span {
  background: rgba(255,176,32,.16);
  color: var(--amber);
  box-shadow: inset 3px 0 0 var(--amber);
}
.px-sheet-foot {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--amber);
}
.px-bar {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.px-bar button {
  flex: 1;
  min-width: 90px;
  border: 1px solid rgba(255,176,32,.16);
  background: #14161f;
  color: #d7cbb8;
  border-radius: 999px;
  padding: 11px 0;
  letter-spacing: .16em;
  font-size: 10px;
  cursor: pointer;
}
.px-bar button.on,
.px-bar button:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255,176,32,.08);
}
.px-toast {
  min-height: 22px;
  margin-top: 8px;
  text-align: center;
  letter-spacing: .16em;
  font-size: 12px;
  color: var(--amber);
}
.px-war {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(120,200,255,.16);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px),
    #0b0d12;
  font-variant-numeric: tabular-nums;
}
.px-war-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120,200,255,.14);
}
.px-war-top b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: .18em;
  font-size: 11px;
  color: #cfe8ff;
  font-family: 'Consolas', 'SF Mono', monospace;
}
.px-sync {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5ad1ff;
  box-shadow: 0 0 6px rgba(90,209,255,.9);
  animation: px-sync-pulse 1.8s ease-in-out infinite;
}
@keyframes px-sync-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.px-war-body {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 12px;
}
.px-war-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.px-war-stats > div {
  text-align: center;
  padding: 8px 4px;
  border-radius: 4px;
  background: rgba(120,200,255,.04);
  border: 1px solid rgba(120,200,255,.12);
}
.px-war-stats em {
  display: block;
  font-style: normal;
  font-size: 16px;
  font-family: 'Consolas', 'SF Mono', monospace;
  color: #cfe8ff;
  letter-spacing: .02em;
}
.px-war-stats span {
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--mute);
  text-transform: uppercase;
}
.px-war-map {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 4px;
  border: 1px solid rgba(120,200,255,.18);
  background: #0e1117;
}
.px-war-hot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 18px;
  margin-bottom: 10px;
  font-size: 11px;
  font-family: 'Consolas', 'SF Mono', monospace;
  letter-spacing: .02em;
  color: #c9d6e3;
}
.px-war-hot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.px-war-hot span b {
  font-weight: 600;
  color: #cfe8ff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
}
.px-war-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--mute);
  text-transform: uppercase;
}
.px-war-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.px-swatch {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  display: inline-block;
}
.px-swatch.t1 { background: rgb(90,200,255); box-shadow: 0 0 4px rgba(90,200,255,.5); }
.px-swatch.t2 { background: rgb(255,209,102); box-shadow: 0 0 4px rgba(255,209,102,.5); }
.px-swatch.t3 { background: rgb(255,138,61); box-shadow: 0 0 5px rgba(255,138,61,.6); }
.px-swatch.t4 { background: rgb(255,64,64); box-shadow: 0 0 6px rgba(255,64,64,.8); }
.home-raid { margin-top: 12px; }
.hm-raid { border-color: #6a2a2a !important; background: linear-gradient(135deg, rgba(255,60,60,.08), transparent 60%); }
.hm-raid.dead { border-color: #2a6a3a !important; background: linear-gradient(135deg, rgba(60,255,120,.06), transparent 60%); }
.hm-raid-top { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.hm-raid-icon { font-size: 34px; filter: drop-shadow(0 0 10px rgba(255,80,80,.5)); }
.hm-raid-top b { font-size: 16px; }
.hm-raid-you { margin-left: auto; font-size: 12px; }
.hm-raid-bar { position: relative; height: 18px; border-radius: 6px; background: #1a0c0c; border: 1px solid #4a1a1a; overflow: hidden; }
.hm-raid-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a01818, #ff4a3a); transition: width .6s ease; }
.hm-raid-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
.hm-raid-dmg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; }
.cr-pass { margin-top: 12px; border-color: rgba(255,79,216,.35) !important; }
.cr-pass .cr-xpbar i { background: linear-gradient(90deg, #7a3aff, #ff4fd8); }
.cr-pass-track { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin-top: 10px; }
.cr-pt { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: 8px; background: #11131a; border: 1px solid #22263a; opacity: .55; }
.cr-pt small { font-size: 9px; opacity: .6; }
.cr-pt span { font-size: 16px; }
.cr-pt em { font-style: normal; font-size: 8px; text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-pt.got { opacity: 1; border-color: #7a3aff; background: rgba(122,58,255,.12); }
.cr-pt.next { opacity: 1; border-color: #ff4fd8; box-shadow: 0 0 10px rgba(255,79,216,.35); }
.cr-pt.item { border-style: dashed; }
@media (max-width: 720px) { .cr-pass-track { grid-template-columns: repeat(6, 1fr); } }
.dc-code { margin-top: 8px; font-size: 13px; } .dc-code code { font-size: 14px; color: #ffd27a; }