:root{--bg:#061018;--panel:rgba(6,16,26,.78);--line:rgba(140,210,180,.18);--gold:#f5d76e;--mint:#7ee0a8;--pink:#ff6b8a;--ink:#d7efe4;--dim:#7a9a8c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#061018;color:var(--ink);font-family:ui-sans-serif,system-ui,"Segoe UI",Inter,Arial,sans-serif;overflow:hidden}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
a{color:var(--gold);text-decoration:none}
button{font:inherit;cursor:pointer}
.hud{position:fixed;inset:0;pointer-events:none;z-index:20}
.hud > *{pointer-events:auto}
.top-left{position:absolute;top:16px;left:18px;max-width:360px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em;font-size:18px}
.dot{width:10px;height:10px;border-radius:50%;background:#6dff9a;box-shadow:0 0 10px #6dff9a;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.45}}
.brand span.soft{color:#8fd7ff;font-weight:800}
.blurb{margin-top:8px;font-size:12px;line-height:1.45;color:#b7d4c8;max-width:340px}
.stats{margin-top:14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8aa99b}
.stat-row{display:flex;justify-content:space-between;margin:4px 0 3px}
.bar{height:6px;background:#123;border-radius:6px;overflow:hidden;border:1px solid #1b3}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,#f5d76e,#7ee0a8)}
.bar.hp > i{background:linear-gradient(90deg,#ff6b8a,#ff9aae);width:100%}
.brain-box{margin-top:10px;width:220px;height:120px;border:1px solid var(--line);border-radius:10px;background:radial-gradient(circle at 50% 50%,#0b2a22,#061018);position:relative;overflow:hidden}
.neuron{position:absolute;width:3px;height:3px;border-radius:50%;background:#7ee0a8;opacity:.7}
.status-line{margin-top:8px;font-size:12px;color:#9ecfb8}
.pfp-layer,.pop-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pfp-layer{z-index:8}
.pop-layer{z-index:25}
.pfp-chip{position:absolute;width:36px;height:36px;margin-left:-18px;margin-top:-18px;border-radius:50%;overflow:hidden;border:2px solid #f5d76e;box-shadow:0 2px 8px rgba(0,0,0,.45);background:#123}
.pfp-chip img{width:100%;height:100%;object-fit:cover;display:block}
.kol-pop{position:absolute;left:0;top:0;transform:translate(8px,-50%);display:flex;align-items:center;justify-content:center;white-space:nowrap;pointer-events:none}
.kol-pop .word{font-weight:900;letter-spacing:.08em;line-height:1;font-size:clamp(28px,8vw,52px)}
.kol-pop.eat .word{color:#ff1d1d;text-shadow:0 2px 0 #4a0000,0 0 16px rgba(255,0,0,.65)}
.kol-pop.eat .x{position:absolute;left:50%;top:50%;transform:translate(-55%,-52%) rotate(-18deg);color:#e40000;font-size:clamp(52px,16vw,96px);font-weight:900;line-height:.8;text-shadow:0 0 10px #800}
.kol-pop.like .word{color:#2dff6a;text-shadow:0 0 18px rgba(40,255,110,.8)}
.kol-pop.like .mark{font-size:clamp(26px,7vw,44px);margin-left:6px}
.sound-gate{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;background:#f5d76e;color:#142;border:0;border-radius:999px;padding:10px 16px;font-weight:800;font-size:13px}
.sound-gate.off{display:none}
.podium-wrap{position:relative;width:100%;margin-bottom:10px}
.podium-sign{text-align:center;margin-bottom:6px}
.podium-kicker{font-size:10px;letter-spacing:.16em;color:#86e0a8;text-transform:uppercase}
.podium-title{font-size:18px;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.podium-hero{background:linear-gradient(180deg,#1a1408,#0b0b0d);border:1px solid #c9a227;border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:12px}
.podium-hero .frame{width:56px;height:56px;border-radius:12px;overflow:hidden;border:2px solid #f5d76e;position:relative;flex-shrink:0}
.podium-hero .frame img{width:100%;height:100%;object-fit:cover}
.podium-hero .rank{font-size:22px;font-weight:900;color:#f5d76e;line-height:1}
.podium-hero .who{font-weight:800;font-size:14px}
.podium-hero .pnl{color:#6dff9a;font-weight:700}
.podium-hero .wal{font-size:11px;color:#8aa99b;word-break:break-all}
.podium-row{display:none}
.top-right{position:absolute;top:12px;right:12px;width:min(300px,34vw);max-height:calc(100vh - 24px);overflow:auto}
.token-pill{display:flex;justify-content:flex-end;margin-bottom:8px}
.token-pill button.copy{background:#0c1c16;border:1px solid #2a4;color:#d7efe4;border-radius:8px;padding:6px 10px;font-size:11px}
.tape{text-align:right;font-size:10px;letter-spacing:.18em;color:#6f8;margin:6px 0}
.sniff-row{display:flex;gap:8px;justify-content:flex-end}
.sniff-row input{width:190px;background:#0c1c16;border:1px solid #245;color:#d7efe4;border-radius:8px;padding:8px 10px;font-size:12px}
.sniff-row button{background:#f5d76e;border:0;border-radius:8px;padding:8px 12px;font-weight:800;color:#142}
.panel{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.panel h3{font-size:10px;letter-spacing:.14em;color:#8aa99b;font-weight:700;margin-bottom:8px}
.lb-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0}
.lb-row img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.lb-row .r{width:16px;color:#8aa99b}
.lb-row .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row .s{color:#7ee0a8}
.more{display:block;text-align:right;margin-top:6px;font-size:11px}
.trade{display:flex;align-items:center;gap:6px;font-size:11px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.badge{font-size:9px;font-weight:800;padding:2px 5px;border-radius:4px}
.badge.yes{background:#143;color:#7ee0a8}
.badge.no{background:#411;color:#ff8aa0}
.bottom-left{position:absolute;left:18px;bottom:18px;width:340px}
.pick{border:1px solid #c9a227;border-radius:10px;padding:10px 12px;background:rgba(8,14,10,.72)}
.pick .k{font-size:10px;letter-spacing:.12em;color:#f5d76e}
.pick .t{margin-top:4px;font-weight:800}
.pick .d{margin-top:4px;font-size:11px;color:#9ecfb8}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:rgba(8,16,12,.86);border:1px solid var(--gold);color:#f5d76e;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;z-index:30;opacity:0;pointer-events:none}
.toast.show{opacity:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:40}
.modal.show{display:flex}
.card{width:min(420px,92vw);background:#0b1612;border:1px solid var(--line);border-radius:14px;padding:16px}
.card img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.close{margin-top:12px;background:transparent;border:1px solid #456;color:#d7efe4;border-radius:8px;padding:6px 10px}
@media(max-width:900px){
  .top-left{top:6px;left:8px;max-width:42vw}
  .brand{font-size:12px}
  .blurb,.brain-box,.stats,.bottom-left,.token-pill,.tape,.panel{display:none !important}
  .top-right{top:6px;right:6px;left:auto;bottom:auto;width:min(196px,48vw);max-height:none;overflow:visible}
  .podium-sign{display:none}
  .podium-hero{padding:6px;gap:8px}
  .podium-hero .frame{width:36px;height:36px}
  .podium-hero .wal{display:none}
  .sniff-row{display:none}
  .sound-gate{top:auto;bottom:10px;font-size:11px;padding:8px 12px}
  .pfp-chip{width:26px;height:26px;margin-left:-13px;margin-top:-13px}
}
