@font-face {
  font-family: 'Horizon';
  src: url('../assets/fonts/Horizon.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
:root{
  --ink:#12141A;
  --panel:#1B1E27;
  --panel-2:#20242F;
  --stroke:#0A0B0E;
  --cobalt:#2F6BFF;
  --cobalt-deep:#173FA0;
  --ember:#FF6B2C;
  --ember-deep:#B8420E;
  --paper:#F5F1E6;
  --text:#F5F1E6;
  --text-mute:#9AA0AC;
  --font-display:'Horizon','Arial Narrow',sans-serif;
  --font-mono:'Space Mono', monospace;
  --font-body:'Inter', sans-serif;
}
body{
  font-family:var(--font-body);
  background:var(--ink);
  min-height:100vh;
  color:var(--text);
  overflow-x:hidden;
}
button, input{font-family:inherit;}

.app{
  width:100%;
  min-height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- BACKDROP ---------- */
.backdrop{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:var(--ink);
  pointer-events:none;
}
.halftone{
  position:absolute; inset:-10%;
  background-image:radial-gradient(circle, rgba(245,241,230,0.07) 1.4px, transparent 1.4px);
  background-size:14px 14px;
  animation:driftDots 18s linear infinite;
}
@keyframes driftDots{
  0%{ background-position:0px 0px; }
  100%{ background-position:140px 84px; }
}
.spotlight{
  position:absolute;
  width:70vw; height:70vw;
  border-radius:50%;
  filter:blur(10px);
  opacity:0.6;
  mix-blend-mode:screen;
  transition:transform 3s cubic-bezier(.4,0,.2,1);
}
.spotlight-cobalt{
  left:-20%; top:-25%;
  background:conic-gradient(from 90deg, transparent 0deg, rgba(47,107,255,0.55) 40deg, transparent 90deg);
}
.spotlight-ember{
  right:-25%; bottom:-30%;
  background:conic-gradient(from 270deg, transparent 0deg, rgba(255,107,44,0.5) 40deg, transparent 90deg);
}
.spotlight-paper{
  width:46vw; height:46vw;
  left:38%; top:20%;
  opacity:0.16;
  background:conic-gradient(from 180deg, transparent 0deg, rgba(245,241,230,0.7) 30deg, transparent 70deg);
}
@media (prefers-reduced-motion: reduce){ .spotlight{transition:none;} .halftone{animation:none;} }

header.topbar, main, nav.bottombar, .subscreen{ position:relative; z-index:1; }

/* ---------- HEADER ---------- */
header.topbar{
  display:flex; align-items:center; gap:16px;
  padding:18px 22px;
  border-bottom:3px solid var(--stroke);
  background:var(--panel);
  flex-wrap:wrap;
}
.profile{ display:flex; align-items:center; gap:12px; }
.avatar{ width:52px; height:52px; background:var(--ink); border:3px solid var(--stroke); flex-shrink:0; }
.profile-meta{ display:flex; flex-direction:column; gap:5px; }
.name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rank-chip{
  display:inline-flex; align-items:center; gap:0;
  font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:1px;
  padding:2px 8px 2px 4px; border:2px solid #9AA0AC; color:#9AA0AC; background:var(--ink);
  white-space:nowrap;
}
.title-chip{
  font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:1px;
  padding:3px 8px; border:2px solid var(--ember); color:var(--ember); background:var(--ink);
  white-space:nowrap;
}
.promote-btn{
  font-family:var(--font-mono); font-weight:700; font-size:9px; letter-spacing:0.5px;
  padding:4px 8px; border:2px solid var(--stroke); background:var(--panel-2); color:var(--paper);
  cursor:pointer; flex-shrink:0;
}
.promote-btn:hover{ background:var(--cobalt); }
.pass-buy-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pass-buy-row .find-match,
.pass-buy-row .quick-play,
.pass-buy-row .cancel-find{ flex:1 1 180px; }
.buff-toast{
  position:absolute; top:16px; right:16px; z-index:5; max-width:280px;
  background:rgba(18,20,26,0.9); border:3px solid var(--ember); color:var(--ember);
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:0.5px;
  padding:10px 12px; line-height:1.4; pointer-events:none;
}

.shop-hub{
  flex:1; display:grid; grid-template-columns:1fr; gap:14px; min-height:0;
}
@media (min-width:900px){
  .shop-hub{ grid-template-columns:repeat(3, 1fr); }
}
.shop-hub-tile{
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  min-height:220px; padding:28px 24px; text-align:left; cursor:pointer;
  border:3px solid var(--stroke); color:var(--paper);
  font-family:inherit; transition:filter 0.12s ease, transform 0.08s ease;
}
.shop-hub-tile:hover{ filter:brightness(1.1); }
.shop-hub-tile:active{ transform:translateY(2px); }
.hub-pass{ background:linear-gradient(160deg, #173FA0 0%, #2F6BFF 100%); }
.hub-coins{ background:linear-gradient(160deg, #B8420E 0%, #FF6B2C 100%); color:var(--ink); }
.hub-gems{ background:linear-gradient(160deg, #12141A 0%, #3A2048 55%, #7C3AED 100%); }
.hub-kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; opacity:0.85; }
.hub-title{ font-family:var(--font-display); font-weight:700; font-size:42px; letter-spacing:1px; line-height:1; }
.hub-copy{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.4px; max-width:28ch; opacity:0.9; }
.shop-grid .tile-blurb{
  font-family:var(--font-mono); font-size:10px; color:var(--text-mute); letter-spacing:0.3px; line-height:1.4;
  min-height:4.2em; max-width:34ch;
}
.tile.shop-featured{ min-height:220px; }
.tile.shop-featured .tile-name{ font-size:16px; }
.party-name .rank-chip, .friend-name .rank-chip{
  display:inline-block; margin-left:8px; vertical-align:middle; font-size:9px;
}
.name-pill{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:0.5px;
  padding:4px 12px; border:2px solid var(--stroke); cursor:pointer; text-align:left;
}
.name-pill:hover{ background:var(--cobalt); color:var(--paper); }
.career-stats{ font-family:var(--font-mono); font-size:10px; color:var(--text-mute); letter-spacing:0.6px; }
.live-chip{
  font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:1px;
  padding:8px 10px; border:2px solid var(--stroke); background:var(--ink); color:var(--cobalt);
}
.level-row{ display:flex; gap:6px; align-items:center; }
.level-chip{ background:var(--cobalt); color:var(--paper); font-family:var(--font-mono); font-weight:700; font-size:12px; padding:3px 8px; border:2px solid var(--stroke); }
.xp-chip{ background:var(--panel-2); color:var(--text-mute); font-family:var(--font-mono); font-weight:700; font-size:11px; padding:3px 8px; border:2px solid var(--stroke); min-width:70px; text-align:center; }

.icon-btn{
  width:44px; height:44px; background:var(--panel-2); border:2px solid var(--stroke); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 0.12s ease, transform 0.08s ease; flex-shrink:0;
}
.icon-btn:hover{ background:var(--cobalt); }
.icon-btn:active{ transform:translateY(2px); }

.music-wrap{
  flex:1 1 240px; min-width:180px; display:flex; align-items:stretch; gap:0;
  border:2px solid var(--stroke);
}
.music-pill{
  flex:1; min-width:0; background:var(--panel-2); border:none;
  padding:9px 14px; display:flex; align-items:center; gap:10px;
  color:var(--paper); font-family:var(--font-mono); font-weight:700; font-size:13px; cursor:pointer; letter-spacing:0.5px;
}
.music-pill:hover{ background:#262B37; }
.music-pill #musicLabel{
  overflow:hidden; text-overflow:clip; white-space:nowrap; min-width:0;
}
.music-skip{
  flex:0 0 auto; background:var(--panel); border:none; border-left:2px solid var(--stroke);
  padding:9px 12px; color:var(--paper); font-family:var(--font-mono); font-weight:700;
  font-size:11px; letter-spacing:1px; cursor:pointer;
}
.music-skip:hover{ background:var(--cobalt); }

.currency{ display:flex; align-items:center; gap:0; border:2px solid var(--stroke); }
.currency .icon-circle{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0; }
.currency .gem{ background:var(--ember); }
.currency .coin{ background:var(--cobalt); }
.currency-value{ font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--paper); background:var(--panel-2); min-width:76px; padding:0 8px; height:36px; display:flex; align-items:center; }
.add-btn{ width:28px; height:36px; background:var(--panel); color:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; border-left:2px solid var(--stroke); }
.add-btn:hover{ background:var(--panel-2); }

.icon{ width:20px; height:20px; color:var(--paper); stroke:currentColor; fill:none; flex-shrink:0; }
.icon-sm{ width:12px; height:12px; }
.icon-lg{ width:28px; height:28px; }

/* ---------- MAIN ---------- */
main{ flex:1; padding:22px; display:flex; gap:22px; flex-wrap:wrap; }

.party-panel{ flex:1 1 440px; background:var(--panel); border:3px solid var(--stroke); display:flex; flex-direction:column; }
.party-panel-head{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--text-mute); padding:12px 16px; border-bottom:2px solid var(--stroke); }
#partyList{ flex:1; overflow:auto; }
.party-opts{
  display:flex; justify-content:space-between; gap:12px; padding:12px 14px;
  border-top:2px solid var(--stroke); align-items:flex-end;
}
.party-opt{ display:flex; flex-direction:column; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.4px; color:var(--paper); max-width:48%; }
.party-opt small{ color:var(--text-mute); letter-spacing:0; font-size:10px; }
.party-warn{
  display:none; margin:0 14px 14px; padding:10px 12px; border:2px solid var(--ember);
  color:var(--ember); font-family:var(--font-mono); font-size:11px; line-height:1.45; background:rgba(255,107,44,0.1);
}
.party-warn.on{ display:block; }
.party-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:2px solid var(--stroke); }
.party-row:last-child{ border-bottom:none; }
.party-avatar-wrap{ position:relative; flex-shrink:0; }
.party-avatar{ width:48px; height:48px; background:var(--ink); border:3px solid var(--stroke); background-size:cover; background-position:center; }
.avatar{ background-size:cover; background-position:center; }
.captain-tag{
  position:absolute; top:-10px; left:-10px; background:var(--cobalt); color:var(--paper);
  font-family:var(--font-mono); font-weight:700; font-size:8px; letter-spacing:0.5px;
  padding:2px 5px; border:2px solid var(--stroke); transform:rotate(-8deg);
}
.party-name{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--paper); letter-spacing:0.3px; flex:1; }
.status-tag{
  font-family:var(--font-mono); font-size:11px; font-weight:700; padding:5px 10px;
  color:var(--ink); letter-spacing:0.3px; transform:rotate(-3deg); flex-shrink:0; border:none; cursor:default;
}
.status-ready{ background:var(--cobalt); color:var(--paper); }
.status-notready{ background:var(--ember); color:var(--ink); }
.status-tag.you{ cursor:pointer; }
.status-tag.you:hover{ filter:brightness(1.15); }
.lvl-tag{ font-family:var(--font-mono); background:var(--panel-2); color:var(--paper); font-weight:700; font-size:12px; padding:6px 10px; border:2px solid var(--stroke); flex-shrink:0; }

.party-row.removable{ cursor:pointer; position:relative; transition:background 0.12s ease; }
.party-row.removable:hover{ background:rgba(255,107,44,0.12); }
.party-row.removable:hover .party-avatar,
.party-row.removable:hover .party-name{ opacity:0.5; }
.remove-overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:flex-end;
  gap:8px; padding-right:16px; background:rgba(18,20,26,0.55);
}
.party-row.removable:hover .remove-overlay{ display:flex; }
.remove-hint{
  font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:1px;
  color:var(--ember); border:2px solid var(--ember); padding:6px 10px; background:var(--ink);
}
.confirm-row{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:2px solid var(--stroke);
  background:rgba(255,107,44,0.1);
}
.confirm-row:last-child{ border-bottom:none; }
.confirm-text{ font-family:var(--font-mono); font-size:12px; color:var(--paper); flex:1; letter-spacing:0.3px; }
.confirm-btn{
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:0.5px;
  border:2px solid var(--stroke); padding:7px 14px; cursor:pointer;
}
.confirm-btn.yes{ background:var(--ember); color:var(--ink); }
.confirm-btn.yes:hover{ background:var(--ember-deep); color:var(--paper); }
.confirm-btn.no{ background:var(--panel-2); color:var(--paper); }
.confirm-btn.no:hover{ background:var(--cobalt); }

.mode-panel{ flex:1 1 340px; background:var(--panel); border:3px solid var(--stroke); padding:24px; display:flex; flex-direction:column; gap:22px; }
.mode-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--text-mute); }
.mode-title{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--paper); line-height:1.1; }
.mode-title .mode-value{ color:var(--ember); display:block; }
.mode-blurb{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); letter-spacing:0.4px; line-height:1.4; max-width:28ch; }
.controls-hint{ font-family:var(--font-mono); font-size:10px; color:var(--text-mute); letter-spacing:0.8px; }
.scoreboard{ background:var(--ink); border:2px solid var(--stroke); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.scoreboard-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; color:var(--text-mute); }
.scoreboard-timer{ font-family:var(--font-mono); font-weight:700; font-size:26px; color:var(--cobalt); letter-spacing:2px; }
.scan-bar{ height:3px; background:var(--panel-2); position:relative; overflow:hidden; }
.scan-bar::after{ content:''; position:absolute; top:0; left:-30%; width:30%; height:100%; background:var(--cobalt); animation:scan 1.6s linear infinite; }
.scan-bar.paused::after{ animation-play-state:paused; background:var(--ember); }
@keyframes scan{ 0%{left:-30%;} 100%{left:100%;} }
.find-match{
  align-self:flex-start; background:var(--cobalt); border:2px solid var(--stroke); color:var(--paper);
  font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:1px; padding:12px 22px; cursor:pointer;
}
.find-match:hover{ filter:brightness(1.12); }
.quick-play{
  align-self:flex-start; background:var(--ember); border:2px solid var(--stroke); color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:1px; padding:12px 18px; cursor:pointer;
}
.quick-play:hover{ filter:brightness(1.08); }
.cancel-find{
  align-self:flex-start; background:transparent; border:2px solid var(--stroke); color:var(--paper);
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:1px; padding:9px 16px; cursor:pointer;
}
.cancel-find:hover{ background:var(--panel-2); }

/* ---------- BOTTOM NAV ---------- */
nav.bottombar{ display:flex; gap:0; border-top:3px solid var(--stroke); }
.nav-btn{
  flex:1; font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:1px;
  border:none; padding:46px 10px; cursor:pointer; transition:filter 0.12s ease;
  border-right:3px solid var(--stroke); position:relative;
}
.nav-btn:last-child{ border-right:none; }
.nav-btn:hover{ filter:brightness(1.12); }
.nav-btn:active{ filter:brightness(0.9); }
.nav-shop{ background:var(--cobalt); color:var(--paper); }
.nav-gamemode{ background:var(--ember); color:var(--ink); }
.nav-pass{ background:#173FA0; color:var(--paper); }
.nav-locker{ background:var(--paper); color:var(--ink); }

/* ---------- SUBSCREENS ---------- */
.subscreen{ flex:1; padding:28px; display:none; flex-direction:column; gap:18px; }
.subscreen.active{ display:flex; }
.subscreen-head{ display:flex; align-items:center; gap:14px; border-bottom:3px solid var(--stroke); padding-bottom:16px; flex-wrap:wrap; }
.back-btn{ width:44px; height:44px; background:var(--panel-2); color:var(--paper); border:2px solid var(--stroke); font-size:18px; cursor:pointer; }
.back-btn:hover{ background:var(--cobalt); }
.subscreen-title{ font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--paper); }
.subscreen-sub{ font-family:var(--font-mono); font-size:12px; color:var(--text-mute); margin-left:auto; }

.section-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--text-mute);
  padding:10px 4px; border-bottom:2px solid var(--stroke); margin-top:6px;
}
.section-label:first-child{ margin-top:0; }

.tile-grid{
  background:var(--panel); border:3px solid var(--stroke);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr));
}
.tile{
  background:var(--panel-2); border:2px solid var(--stroke); margin:-1px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:16px 10px; text-align:center; position:relative; min-height:150px;
}
.tile .glyph{ display:flex; color:var(--paper); }
.tile-name{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--paper); letter-spacing:0.3px; }
.tile-price{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); display:flex; align-items:center; gap:4px; }
.tile-price .icon{ width:12px; height:12px; }
.tile-btn{
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:0.5px;
  border:2px solid var(--stroke); padding:6px 12px; cursor:pointer; margin-top:4px; color:var(--ink);
}
.tile-btn.buy{ background:var(--cobalt); color:var(--paper); }
.tile-btn.buy:hover{ filter:brightness(1.15); }
.tile-btn.owned{ background:var(--panel); color:var(--text-mute); cursor:default; }
.tile-btn.equip{ background:var(--paper); }
.tile-btn.equip:hover{ filter:brightness(0.9); }
.tile-btn.equipped{ background:var(--ember); color:var(--ink); cursor:default; }
.tile-btn.locked{ background:var(--panel); color:var(--text-mute); }
.tile-btn.locked:hover{ background:var(--ember-deep); color:var(--paper); }
.tile.is-equipped{ outline:3px solid var(--ember); outline-offset:-2px; }
.tile-ribbon{
  position:absolute; top:-9px; right:-9px; background:var(--ember); color:var(--ink);
  font-family:var(--font-mono); font-weight:700; font-size:9px; padding:3px 6px; border:2px solid var(--stroke); transform:rotate(6deg);
}
.coming-soon{ color:var(--text-mute); font-family:var(--font-body); font-size:14px; text-align:center; padding:24px; grid-column:1/-1; }

.gamemode-split{
  flex:1; display:flex; margin:0 -28px -28px; border-top:3px solid var(--stroke);
}
#screen-gamemode{ overflow:hidden; }
.gamemode-col{ flex:1; display:flex; flex-direction:column; }
.gamemode-col-unranked{ border-left:3px solid var(--stroke); }
.gamemode-col-head{
  font-family:var(--font-mono); font-weight:700; font-size:14px; letter-spacing:3px;
  text-align:center; padding:14px; border-bottom:3px solid var(--stroke);
}
.gamemode-col-head.ranked{ background:rgba(47,107,255,0.16); color:var(--cobalt); }
.gamemode-col-head.unranked{ background:rgba(255,107,44,0.16); color:var(--ember); }
.gamemode-col-head.train{ background:rgba(200,255,61,0.14); color:#C8FF3D; }
.gamemode-cells{ flex:1; display:flex; flex-direction:column; }
.gamemode-cell{
  flex:1; display:flex; align-items:center; justify-content:center; gap:14px;
  border-bottom:2px solid var(--stroke); cursor:pointer; transition:background 0.12s ease;
  position:relative; padding:8px 14px;
}
.gamemode-cell:last-child{ border-bottom:none; }
.gamemode-cell:hover{ background:var(--panel-2); }
.gamemode-cell .glyph{ color:var(--paper); flex-shrink:0; }
.gamemode-cell-label{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--paper); letter-spacing:0.5px; }
.gamemode-cell-copy{ display:flex; flex-direction:column; gap:4px; }
.gamemode-cell-blurb{ font-family:var(--font-mono); font-size:10px; color:var(--text-mute); letter-spacing:0.3px; max-width:34ch; }
.gamemode-col-ranked .gamemode-cell.selected{ outline:3px solid var(--cobalt); outline-offset:-3px; background:rgba(47,107,255,0.12); }
.gamemode-col-unranked .gamemode-cell.selected{ outline:3px solid var(--ember); outline-offset:-3px; background:rgba(255,107,44,0.12); }
.gamemode-col-train .gamemode-cell.selected{ outline:3px solid #C8FF3D; outline-offset:-3px; background:rgba(200,255,61,0.1); }
.gamemode-cell-tag{
  position:absolute; top:10px; right:14px; font-family:var(--font-mono); font-weight:700;
  font-size:9px; letter-spacing:1px; padding:3px 7px; border:2px solid var(--stroke);
}
.gamemode-col-ranked .gamemode-cell-tag{ background:var(--cobalt); color:var(--paper); }
.gamemode-col-unranked .gamemode-cell-tag{ background:var(--ember); color:var(--ink); }
.gamemode-col-train .gamemode-cell-tag{ background:#C8FF3D; color:var(--ink); }
@media (max-width:640px){
  .gamemode-split{ flex-direction:column; }
  .gamemode-col-unranked{ border-left:none; border-top:3px solid var(--stroke); }
  .gamemode-cell-label{ font-size:17px; }
}

.chat-panel{ background:var(--panel); border:3px solid var(--stroke); flex:1; display:flex; flex-direction:column; min-height:340px; }
.chat-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.chat-line{ background:var(--panel-2); border-left:3px solid var(--cobalt); padding:8px 12px; color:var(--paper); font-family:var(--font-body); font-size:13px; max-width:75%; }
.chat-line.me{ border-left-color:var(--ember); align-self:flex-end; }
.chat-line b{ color:var(--ember); font-family:var(--font-mono); }
.chat-line.me b{ color:var(--cobalt); }
.chat-input-row{ display:flex; border-top:2px solid var(--stroke); }
.chat-input-row input{
  flex:1; background:var(--ink); border:none; color:var(--paper); padding:14px 16px;
  font-family:var(--font-body); font-size:14px; outline:none;
}
.chat-input-row input::placeholder{ color:var(--text-mute); }
.chat-send{ background:var(--cobalt); color:var(--paper); border:none; padding:0 22px; font-family:var(--font-mono); font-weight:700; cursor:pointer; letter-spacing:0.5px; }
.chat-send:hover{ filter:brightness(1.1); }

.friends-panel{ background:var(--panel); border:3px solid var(--stroke); flex:1; display:flex; flex-direction:column; }
.add-friend-row{ display:flex; border-bottom:2px solid var(--stroke); }
.add-friend-row input{ flex:1; background:var(--ink); border:none; color:var(--paper); padding:14px 16px; font-family:var(--font-body); font-size:14px; outline:none; }
.add-friend-row input::placeholder{ color:var(--text-mute); }
.add-friend-row button{ background:var(--cobalt); color:var(--paper); border:none; padding:0 22px; font-family:var(--font-mono); font-weight:700; cursor:pointer; }
.add-friend-row button:hover{ filter:brightness(1.1); }
.friend-row{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:2px solid var(--stroke); }
.friend-row:last-child{ border-bottom:none; }
.friend-status-icon{ width:22px; height:22px; flex-shrink:0; }
.friend-status-icon.online{ color:var(--cobalt); }
.friend-status-icon.offline{ color:var(--text-mute); }
.friend-name{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--paper); flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.guest-chip{
  font-family:var(--font-mono); font-size:10px; letter-spacing:1px; font-weight:700;
  border:2px solid var(--stroke); padding:2px 6px; color:var(--text-mute); background:var(--panel);
}
.friend-note{ font-family:var(--font-mono); font-size:10px; color:var(--text-mute); }
.friend-btn{ font-family:var(--font-mono); font-weight:700; font-size:11px; border:2px solid var(--stroke); background:var(--panel-2); color:var(--paper); padding:7px 12px; cursor:pointer; }
.friend-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.friend-btn:disabled:hover{ background:var(--panel-2); }
.friend-btn.remove:hover{ background:var(--ember-deep); }
.friend-btn.add:hover{ background:var(--cobalt); }
.friends-empty{ padding:30px; text-align:center; color:var(--text-mute); font-family:var(--font-body); font-size:14px; }

.settings-body{ background:var(--panel); border:3px solid var(--stroke); padding:8px; display:flex; flex-direction:column; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:2px solid var(--stroke); color:var(--paper); font-family:var(--font-body); font-weight:600; gap:16px; }
.settings-row:last-child{ border-bottom:none; }
.toggle{ width:44px; height:24px; background:var(--ink); border:2px solid var(--stroke); position:relative; cursor:pointer; flex-shrink:0; }
.toggle::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; background:var(--text-mute); transition:left 0.15s ease, background 0.15s ease; }
.toggle.on{ background:var(--ink); }
.toggle.on::after{ left:22px; background:var(--cobalt); }
.volume-row{ display:flex; align-items:center; gap:14px; }
.volume-row input[type=range]{ width:160px; accent-color:var(--cobalt); }
.volume-value{ font-family:var(--font-mono); font-size:12px; color:var(--text-mute); min-width:34px; text-align:right; }
.reset-btn{ margin:16px 18px 4px; align-self:flex-start; background:transparent; border:2px solid var(--stroke); color:var(--paper); font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:1px; padding:9px 16px; cursor:pointer; }
.reset-btn:hover{ background:var(--ember-deep); }
.admin-row{ flex-wrap:wrap; }
.admin-self-tools{ margin-bottom:14px; }
.admin-self-actions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 0 12px; }
.admin-self-actions button{
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:0.5px;
  border:2px solid var(--stroke); background:var(--panel); color:var(--paper);
  padding:8px 12px; cursor:pointer;
}
.admin-self-actions button:hover{ background:var(--cobalt); }
.admin-actions{ display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.admin-actions button{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.4px; padding:6px 8px;
  background:var(--panel-2); color:var(--paper); border:2px solid var(--stroke); cursor:pointer;
}
.admin-actions button:hover{ background:var(--ember); color:var(--ink); }
.nav-panel{ margin-left:auto; }

/* ---------- TOAST ---------- */
#toastStack{ position:fixed; bottom:26px; right:26px; z-index:130; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.toast-item{
  background:var(--paper); color:var(--ink); border:4px solid var(--stroke);
  font-family:var(--font-mono); font-weight:700; font-size:17px; letter-spacing:0.3px;
  padding:18px 24px; transform:rotate(-2deg); animation:toastIn 0.25s ease-out;
  max-width:380px; box-shadow:6px 6px 0 rgba(0,0,0,0.35);
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) rotate(-2deg);} to{ opacity:1; transform:translateY(0) rotate(-2deg);} }
.toast-item.out{ animation:toastOut 0.3s ease-in forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-8px) rotate(-2deg);} }

#inviteModal{
  display:none; position:fixed; inset:0; z-index:120; align-items:center; justify-content:center;
  padding:24px; background:rgba(18,20,26,0.72);
}
#inviteModal.on{ display:flex; }
.invite-card{
  width:min(420px,100%); background:var(--panel); border:4px solid var(--stroke); padding:28px;
  transform:rotate(-1deg); box-shadow:8px 8px 0 rgba(0,0,0,0.35);
}
.invite-kicker{ font-family:var(--font-mono); letter-spacing:3px; color:var(--text-mute); font-size:12px; }
.invite-from{ font-family:var(--font-display); font-size:36px; margin:8px 0 6px; color:var(--paper); }
.invite-copy{ font-size:14px; color:var(--text-mute); line-height:1.4; margin:0 0 20px; }
.invite-actions{ display:flex; gap:12px; }
.invite-accept, .invite-decline{
  flex:1; font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:1px;
  border:3px solid var(--stroke); padding:12px 10px; cursor:pointer;
}
.invite-accept{ background:var(--cobalt); color:var(--paper); }
.invite-accept:hover{ filter:brightness(1.12); }
.invite-decline{ background:var(--panel-2); color:var(--paper); }
.invite-decline:hover{ background:var(--ember); color:var(--ink); }

body:not(.signed-in) .app,
body:not(.signed-in) #arena,
body:not(.signed-in) #results{ visibility:hidden; pointer-events:none; }

#gate{
  display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center;
  padding:24px; background:rgba(18,20,26,0.92);
}
#gate.on{ display:flex; }
.gate-card{
  width:min(980px,100%); background:var(--panel); border:4px solid var(--stroke); padding:28px;
}
.gate-brand{
  font-family:var(--font-display); font-weight:700; font-size:28px; letter-spacing:1px;
  color:var(--paper); line-height:1; margin-bottom:4px;
}
.gate-kicker{ font-family:var(--font-mono); letter-spacing:3px; color:var(--text-mute); font-size:12px; }
.gate-title{ font-family:var(--font-display); font-size:48px; margin:8px 0 18px; }
.gate-error{ min-height:22px; color:var(--ember); font-family:var(--font-mono); font-size:13px; margin-bottom:10px; }
.gate-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.gate-col{ display:flex; flex-direction:column; gap:10px; background:var(--panel-2); border:2px solid var(--stroke); padding:16px; }
.gate-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--text-mute); }
.gate-col input{
  background:var(--ink); border:2px solid var(--stroke); color:var(--paper); padding:10px 12px; font-family:var(--font-body);
}
.gate-note{ font-size:12px; color:var(--text-mute); line-height:1.4; }
.pass-list{ display:flex; flex-direction:column; border:3px solid var(--stroke); background:var(--panel); }
.pass-row{ display:grid; grid-template-columns:90px 1fr 1fr; gap:0; border-bottom:2px solid var(--stroke); }
.pass-row:last-child{ border-bottom:none; }
.pass-lv{ font-family:var(--font-mono); font-weight:700; padding:14px; display:flex; align-items:center; background:var(--ink); }
.pass-cell{ padding:14px; border-left:2px solid var(--stroke); display:flex; flex-direction:column; gap:4px; }
.pass-cell span{ font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--text-mute); }
.pass-cell b{ font-family:var(--font-body); font-size:13px; text-transform:capitalize; }
.pass-row.reached .pass-lv{ color:var(--cobalt); }
.pass-cell.got{ background:rgba(47,107,255,0.12); }
.pass-cell.prem{ opacity:0.55; }

/* ---------- ARENA ---------- */
body.in-arena .app{ display:none; }
#arena{
  display:none; position:fixed; inset:0; z-index:80; background:#12141A;
  pointer-events:none;
}
#arena.on{ display:block; pointer-events:auto; }
#arenaCanvas{ width:100%; height:100%; display:block; }
.arena-top{
  position:absolute; top:16px; left:16px; right:240px; display:flex; align-items:center; gap:18px; pointer-events:none;
}
.hud-score{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-size:22px; letter-spacing:1px;
  background:rgba(18,20,26,0.82); border:3px solid var(--stroke); padding:8px 14px;
}
.hud-score .t0{ color:var(--cobalt); }
.hud-score .t1{ color:var(--ember); }
.hud-score .vs{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); }
.hud-score span:nth-child(2), .hud-score span:nth-child(4){ font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--text-mute); }
.hud-timer{
  font-family:var(--font-mono); font-weight:700; font-size:22px; color:var(--paper);
  background:rgba(18,20,26,0.82); border:3px solid var(--stroke); padding:8px 14px;
}
.arena-banner{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-size:92px; color:var(--paper); letter-spacing:4px;
  text-shadow:8px 8px 0 #0A0B0E; pointer-events:none;
}
.kill-feed{
  position:absolute; top:16px; left:16px; margin-top:70px; display:flex; flex-direction:column; gap:6px; pointer-events:none;
}
.feed-line{
  background:rgba(18,20,26,0.82); border:2px solid var(--stroke); padding:6px 10px;
  font-family:var(--font-mono); font-size:11px; color:var(--paper);
}
.feed-line b{ color:var(--ember); }
.arena-bottom{
  position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:14px;
}
.hud-hp{
  position:relative; flex:1; height:28px; background:#0A0B0E; border:3px solid var(--stroke); overflow:hidden;
}
.hud-hp-fill{ height:100%; width:100%; background:var(--cobalt); }
.hud-hp span{
  position:absolute; inset:0; display:flex; align-items:center; padding:0 10px;
  font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--paper);
}
.hud-meta{
  min-width:160px; background:rgba(18,20,26,0.82); border:3px solid var(--stroke); padding:8px 12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1px;
}
.forfeit-btn{
  background:var(--ember); color:var(--ink); border:3px solid var(--stroke);
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:1px; padding:10px 12px; cursor:pointer;
}

/* ---------- MOBILE ARENA CONTROLS ---------- */
.mobile-controls{
  display:none;
  position:absolute; inset:0; z-index:6;
  pointer-events:none;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.mobile-controls.on{ display:block; }
#arena.mobile-on{ touch-action:none; }
#arena.mobile-on .arena-top{
  right:16px;
  top:auto;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  left:16px;
  z-index:5;
}
#arena.mobile-on .kill-feed{
  top:auto;
  bottom:calc(70px + env(safe-area-inset-bottom, 0px));
  margin-top:0;
}
#arena.mobile-on .arena-bottom{
  top:max(12px, env(safe-area-inset-top, 0px));
  bottom:auto;
  left:auto;
  right:max(12px, env(safe-area-inset-right, 0px));
  width:min(260px, 48vw);
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  z-index:7;
  pointer-events:none;
}
#arena.mobile-on .arena-bottom .forfeit-btn{ pointer-events:auto; }
#arena.mobile-on .hud-meta{ min-width:0; }
.mobile-stick{
  position:absolute;
  left:max(18px, env(safe-area-inset-left, 0px));
  bottom:max(22px, env(safe-area-inset-bottom, 0px));
  width:148px; height:148px;
  pointer-events:auto;
  touch-action:none;
}
.mobile-stick-base{
  position:absolute; inset:16px;
  border-radius:50%;
  border:3px solid rgba(245,241,230,0.45);
  background:rgba(18,20,26,0.42);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.35);
}
.mobile-stick-knob{
  position:absolute; left:50%; top:50%;
  width:58px; height:58px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(47,107,255,0.88);
  border:3px solid var(--stroke);
  box-shadow:3px 3px 0 rgba(0,0,0,0.35);
  pointer-events:none;
}
.mobile-stick-label{
  position:absolute; left:0; right:0; bottom:2px;
  text-align:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:2px;
  color:rgba(245,241,230,0.55); pointer-events:none;
}
.mobile-actions{
  position:absolute;
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:max(22px, env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  pointer-events:auto;
  touch-action:none;
}
.mobile-btn{
  border:3px solid var(--stroke);
  font-family:var(--font-mono); font-weight:700; letter-spacing:1px;
  color:var(--paper);
  background:rgba(18,20,26,0.55);
  box-shadow:4px 4px 0 rgba(0,0,0,0.35);
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.mobile-btn.shoot{
  width:96px; height:96px; border-radius:50%;
  background:rgba(226,58,46,0.88);
  font-size:16px;
}
.mobile-btn.dash{
  width:72px; height:44px; border-radius:8px;
  background:rgba(47,107,255,0.85);
  font-size:12px;
}
.mobile-btn.ability{
  width:56px; height:56px; border-radius:50%;
  background:rgba(200,255,61,0.82); color:var(--ink);
  font-size:14px;
}
.mobile-btn.lit{
  filter:brightness(1.18);
  transform:scale(0.96);
}
@media (max-width:640px){
  .mobile-stick{ width:136px; height:136px; }
  .mobile-btn.shoot{ width:88px; height:88px; }
  #arena.mobile-on .arena-banner{ font-size:56px; }
}

#results{
  display:none; position:fixed; inset:0; z-index:90; background:rgba(18,20,26,0.72);
  align-items:center; justify-content:center; padding:24px;
}
#results.on{ display:flex; }
.results-card{
  width:min(720px, 100%); background:var(--panel); border:4px solid var(--stroke); padding:28px;
  display:flex; flex-direction:column; gap:16px;
}
.results-banner{ font-family:var(--font-display); font-size:52px; letter-spacing:2px; }
.results-banner.win{ color:var(--cobalt); }
.results-banner.loss{ color:var(--ember); }
.results-sub{ font-family:var(--font-mono); color:var(--text-mute); letter-spacing:1px; }
.results-reward-hint{
  font-family:var(--font-mono); font-size:12px; letter-spacing:1px; color:var(--text-mute); margin-bottom:8px;
}
.results-rank-preview{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:1px;
}
.results-rank-preview .mmr-delta{
  font-family:var(--font-mono); font-size:12px; color:var(--text-mute); margin-left:4px;
}
.results-unlock{
  margin-top:8px; font-family:var(--font-mono); font-size:11px; color:var(--ember); letter-spacing:0.5px;
}
.results-rows{ display:flex; flex-direction:column; border:2px solid var(--stroke); }
.result-row{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:8px; padding:10px 12px;
  font-family:var(--font-mono); font-size:12px; border-bottom:2px solid var(--stroke);
}
.result-row:last-child{ border-bottom:none; }
.result-row.team-0{ box-shadow:inset 4px 0 0 var(--cobalt); }
.result-row.team-1{ box-shadow:inset 4px 0 0 var(--ember); }
.result-row.me{ background:rgba(47,107,255,0.12); }

/* Expanding rank icons */
.rank-icon{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; vertical-align:middle;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.35));
}
.rank-icon svg{ display:block; }
.rank-icon-inline{ margin-right:6px; }
.rank-chip-label{ margin-left:2px; }

/* Reward cinema (chest → rank) */
#rewardCinema{
  --punch: 1;
  display:none; position:fixed; inset:0; z-index:120;
  background:#07080c;
  align-items:center; justify-content:center; flex-direction:column;
  color:var(--paper); overflow:hidden;
}
#rewardCinema.on{ display:flex; }
#rewardCinema.punch{ animation:cinemaPunch 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cinemaPunch{
  0%{ transform:scale(1); }
  35%{ transform:scale(calc(1 + 0.018 * var(--punch))); }
  100%{ transform:scale(1); }
}
body.reward-cinema-open #results{ opacity:0; pointer-events:none; }
.cinema-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cinema-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(47,107,255,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255,107,44,0.12) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.72) 100%);
  animation:vigPulse 3.6s ease-in-out infinite;
}
@keyframes vigPulse{
  0%,100%{ opacity:0.85; }
  50%{ opacity:1; }
}
.cinema-rays{
  position:absolute; left:50%; top:38%; width:140vmax; height:140vmax;
  transform:translate(-50%, -50%);
  background:conic-gradient(from 0deg, transparent 0 14deg, rgba(245,241,230,0.045) 14deg 18deg, transparent 18deg 40deg);
  animation:raySpin 18s linear infinite;
  opacity:0.55; mix-blend-mode:screen;
}
@keyframes raySpin{ to{ transform:translate(-50%, -50%) rotate(360deg); } }
.cinema-fx{ position:absolute; inset:0; width:100%; height:100%; }

.reward-skip{
  position:absolute; top:18px; right:18px; z-index:5;
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:2px;
  padding:10px 16px; border:2px solid var(--stroke); background:rgba(18,20,26,0.85);
  color:var(--paper); cursor:pointer;
}
.reward-skip:hover{ background:var(--cobalt); }
.reward-phase{
  display:none; flex-direction:column; align-items:center; gap:22px;
  width:min(680px, 92vw); text-align:center; position:relative; z-index:2;
}
.reward-phase.on{
  display:flex;
  animation:phaseIn 0.45s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
@keyframes phaseIn{
  from{ opacity:0; transform:translateY(18px) scale(0.97); filter:blur(4px); }
  to{ opacity:1; transform:none; filter:none; }
}

.chest-title{
  font-family:var(--font-display); font-weight:700; font-size:46px; letter-spacing:2px;
  text-shadow:0 0 40px rgba(255,138,61,0.35);
  animation:titleBreath 2.4s ease-in-out infinite;
}
@keyframes titleBreath{
  0%,100%{ letter-spacing:2px; transform:scale(1); }
  50%{ letter-spacing:3px; transform:scale(1.02); }
}
.chest-stage{ position:relative; width:210px; height:190px; margin:8px 0 4px; }
.chest-beam{
  position:absolute; left:50%; bottom:70px; width:8px; height:0;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(226,182,58,0.15));
  opacity:0; filter:blur(1px);
  box-shadow:0 0 24px 8px rgba(226,182,58,0.55);
}
#rewardCinema.chest-open .chest-beam{
  animation:beamRise 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes beamRise{
  0%{ height:0; opacity:0; }
  30%{ opacity:1; }
  100%{ height:160px; opacity:0.85; }
}
.chest{ position:absolute; inset:28px 24px 0; transform-origin:50% 80%; }
.chest-body{
  position:absolute; left:0; right:0; bottom:0; height:96px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 30%),
    linear-gradient(180deg, #D4561A 0%, #8A2E08 55%, #5A1C05 100%);
  border:3px solid #2a1208; border-radius:8px 8px 14px 14px;
  box-shadow:
    inset 0 10px 0 rgba(255,255,255,0.1),
    0 18px 40px rgba(0,0,0,0.45);
}
.chest-band{
  position:absolute; left:10%; right:10%; top:38%; height:10px;
  background:linear-gradient(180deg, #F0D078, #B88920); border:2px solid #2a1208;
}
.chest-lock{
  position:absolute; left:50%; top:30px; transform:translateX(-50%);
  width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE08A, #E2B63A 45%, #9A6F12);
  border:3px solid #2a1208;
  box-shadow:0 0 16px rgba(226,182,58,0.55);
}
.chest-lid{
  position:absolute; left:0; right:0; bottom:86px; height:48px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 40%),
    linear-gradient(180deg, #FF9A4A 0%, #C45A18 100%);
  border:3px solid #2a1208; border-radius:12px 12px 5px 5px;
  transform-origin:14% 100%;
  transition:transform 0.55s cubic-bezier(0.15, 1.1, 0.3, 1);
  box-shadow:0 -4px 20px rgba(255,138,61,0.25);
}
.chest-glow{
  position:absolute; inset:-10%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,80,0.7) 0%, rgba(255,107,44,0.2) 40%, transparent 70%);
  opacity:0; transform:scale(0.5); pointer-events:none;
  transition:opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
}
#rewardCinema.chest-anticipation .chest{
  animation:chestAnticipate 0.5s ease-in-out;
}
@keyframes chestAnticipate{
  0%,100%{ transform:scale(1) translateY(0); }
  50%{ transform:scale(0.94) translateY(6px); }
}
#rewardCinema.chest-shake .chest{ animation:chestShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
#rewardCinema.chest-open .chest-lid{ transform:rotate(-128deg) translate(-4px, -10px); }
#rewardCinema.chest-open .chest-glow{ opacity:1; transform:scale(1.55); }
#rewardCinema.chest-open .chest-lock{ animation:lockPop 0.45s ease forwards; }
@keyframes chestShake{
  0%{ transform:translate(0,0) rotate(0); }
  15%{ transform:translate(-10px,2px) rotate(-4deg); }
  30%{ transform:translate(10px,-2px) rotate(4deg); }
  45%{ transform:translate(-8px,1px) rotate(-3deg); }
  60%{ transform:translate(8px,-1px) rotate(3deg); }
  75%{ transform:translate(-4px,0) rotate(-1deg); }
  100%{ transform:translate(0,0) rotate(0); }
}
@keyframes lockPop{
  0%{ transform:translateX(-50%) scale(1); }
  40%{ transform:translateX(-50%) scale(1.35); filter:brightness(1.4); }
  100%{ transform:translateX(-50%) scale(1); }
}
.chest-loot{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; min-height:132px; margin-top:8px;
}
.loot-card{
  position:relative; width:128px; padding:18px 12px 14px; border:3px solid color-mix(in srgb, var(--loot-c) 65%, #12141A);
  background:linear-gradient(160deg, rgba(18,20,26,0.95), rgba(30,24,40,0.95));
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; transform:translateY(36px) scale(0.7) rotate(-4deg);
  box-shadow:0 0 0 0 transparent, 0 16px 32px rgba(0,0,0,0.35);
}
.loot-ring{
  position:absolute; inset:-6px; border:2px solid var(--loot-c); opacity:0; border-radius:2px;
  pointer-events:none;
}
#rewardCinema.loot-in .loot-card{
  animation:lootSlam 0.62s cubic-bezier(0.16, 1.1, 0.3, 1) forwards;
  animation-delay:calc(var(--i, 0) * 0.14s);
}
#rewardCinema.loot-in .loot-card .loot-ring{
  animation:lootRing 0.7s ease forwards;
  animation-delay:calc(var(--i, 0) * 0.14s + 0.15s);
}
@keyframes lootSlam{
  0%{ opacity:0; transform:translateY(36px) scale(0.7) rotate(-4deg); }
  60%{ opacity:1; transform:translateY(-8px) scale(1.08) rotate(1deg); }
  100%{ opacity:1; transform:translateY(0) scale(1) rotate(0);
    box-shadow:0 0 28px color-mix(in srgb, var(--loot-c) 35%, transparent), 0 16px 32px rgba(0,0,0,0.35); }
}
@keyframes lootRing{
  0%{ opacity:0.9; transform:scale(0.85); }
  100%{ opacity:0; transform:scale(1.25); }
}
.loot-val{
  font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:1px;
  color:var(--loot-c); text-shadow:0 0 18px color-mix(in srgb, var(--loot-c) 45%, transparent);
}
.loot-lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; color:var(--text-mute); }

.rank-kicker, .rank-up-kicker{
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:3px; color:var(--text-mute);
}
.rank-up-kicker{
  color:#fff; letter-spacing:6px; font-size:14px;
  text-shadow:0 0 24px rgba(255,255,255,0.55);
}
.rank-hero{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  --rank-accent:#9AA0AC;
}
.rank-hero .rank-icon-hero{
  filter:drop-shadow(0 0 22px color-mix(in srgb, var(--rank-accent) 55%, transparent));
  animation:iconFloat 2.8s ease-in-out infinite;
}
@keyframes iconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
#rewardCinema.rank-enter .rank-hero{ animation:rankHeroIn 0.55s cubic-bezier(0.16, 0.9, 0.2, 1) both; }
@keyframes rankHeroIn{
  from{ opacity:0; transform:scale(0.8) translateY(20px); }
  to{ opacity:1; transform:none; }
}
.rank-hero-label{
  font-family:var(--font-display); font-weight:700; font-size:52px; letter-spacing:2px; line-height:1;
  text-shadow:0 0 28px color-mix(in srgb, var(--rank-accent) 40%, transparent);
}
.rank-hero-mark{
  font-family:var(--font-mono); font-weight:800; font-size:24px; letter-spacing:6px; color:var(--text-mute);
}
.rank-sub{ font-family:var(--font-mono); font-size:13px; letter-spacing:1px; color:var(--text-mute); min-height:1.2em; }
.rank-bar-wrap{ width:min(460px, 86vw); display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.rank-bar{
  height:22px; border:3px solid var(--stroke); background:#0c0e14; overflow:hidden; position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
}
.rank-bar-fill{
  position:relative; height:100%; width:0%;
  background:linear-gradient(90deg, #1740C8, var(--cobalt) 40%, #9EC0FF 78%, #F5F1E6);
  box-shadow:0 0 22px rgba(47,107,255,0.55);
  transition:none;
}
.rank-bar-sheen{
  position:absolute; inset:0 auto 0 -40%; width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation:sheenMove 1.1s linear infinite;
}
@keyframes sheenMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(350%); }
}
.rank-bar-wrap.hot .rank-bar-fill{
  box-shadow:0 0 28px rgba(255,200,80,0.65);
  background:linear-gradient(90deg, #2F6BFF, #E2B63A 60%, #fff);
}
.rank-bar-wrap.full .rank-bar{
  animation:barFlash 0.35s ease;
}
@keyframes barFlash{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.8); }
}
.rank-bar-pct{
  font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:2px; text-align:right;
}

.rank-flash{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(circle at 50% 45%, #fff 0%, #fff 28%, rgba(255,255,255,0.75) 48%, transparent 72%);
  opacity:0; transform:scale(0.2);
}
.rank-flash.on{ animation:rankWhiteBloom 0.95s cubic-bezier(0.15, 0.85, 0.25, 1) forwards; }
@keyframes rankWhiteBloom{
  0%{ opacity:0; transform:scale(0.15); }
  22%{ opacity:1; transform:scale(1.05); }
  55%{ opacity:1; transform:scale(1.35); }
  100%{ opacity:0; transform:scale(1.7); }
}
.rank-burst{
  position:fixed; left:50%; top:42%; width:12px; height:12px; z-index:2; pointer-events:none;
  transform:translate(-50%, -50%); border-radius:50%;
  box-shadow:0 0 0 0 var(--burst-c, #fff); opacity:0;
}
.rank-burst.on{ animation:rankRing 0.9s ease-out forwards; }
@keyframes rankRing{
  0%{ opacity:0.95; box-shadow:0 0 0 0 var(--burst-c, #fff); }
  100%{ opacity:0; box-shadow:0 0 0 140px transparent; }
}
.rank-reveal-wrap{
  position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:16px;
  opacity:0; transform:scale(0.55) translateY(30px); filter:blur(8px);
}
#rewardCinema.rank-revealed .rank-reveal-wrap{
  animation:rankRevealIn 0.85s cubic-bezier(0.14, 1.05, 0.28, 1) forwards;
}
#rewardCinema.rank-revealed .rank-icon-hero{
  animation:iconSlam 0.7s cubic-bezier(0.14, 1.2, 0.3, 1) both;
}
@keyframes rankRevealIn{
  to{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
@keyframes iconSlam{
  0%{ transform:scale(0.4) rotate(-12deg); }
  55%{ transform:scale(1.18) rotate(3deg); }
  100%{ transform:scale(1) rotate(0); }
}
#rewardCinema[data-phase="rankup"] .reward-phase[data-phase="rankup"]{ display:flex; }

@media (max-width:640px){
  .chest-title{ font-size:28px; }
  .rank-hero-label{ font-size:34px; }
  .loot-card{ width:100px; padding:12px 8px; }
  .loot-val{ font-size:22px; }
  .gate-brand{ font-size:22px; }
}

@media (max-width:640px){
  header.topbar{ padding:14px; }
  .mode-title{ font-size:22px; }
  .nav-btn{ font-size:18px; padding:37px 10px; }
  .subscreen-title{ font-size:24px; }
  #toastStack{ left:12px; right:12px; align-items:stretch; }
  .toast-item{ max-width:none; font-size:15px; padding:16px 20px; }
}