/* ============ SUMO · full-screen arena HUD (liquid glass) ============ */
body.game { height: 100dvh; overflow: hidden; }
#cv { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; z-index: 1; }
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4,5,9,.65)); }

.glasspanel { position: relative; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 rgba(255,255,255,.04), var(--shadow); }
.glasspanel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.16), transparent 45%); }
.glasspanel > * { position: relative; }
.label { font: 700 10.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); margin-left: 6px; }

/* ---------- top HUD ---------- */
.hud-top { position: fixed; z-index: 10; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; gap: 12px; }
.brandmark { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; color: var(--text); text-decoration: none !important;
  background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow); }
.brandmark img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.4); }
.brandmark span { font: 900 19px Inter, sans-serif; letter-spacing: .06em; }
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; margin: 0 auto; background: rgba(10,12,20,.45); border: 1px solid var(--edge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow); }
.seg button { border: 0; background: none; color: var(--muted); font: 600 13.5px Inter, sans-serif; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button.on { color: #06210f; background: linear-gradient(180deg, #b6ffd6, #6be8a8); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 16px rgba(52,211,153,.4); }
.hud-actions { display: flex; gap: 8px; align-items: center; }
.iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); font-weight: 700; text-decoration: none !important;
  background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 var(--edge-hi); }
.gbtn.small { padding: 7px 14px; font-size: 13px; }

/* ---------- left HUD: scoreboard ---------- */
.hud-left { position: fixed; z-index: 5; left: 16px; top: 80px; width: 250px; border-radius: 24px; padding: 14px; display: grid; gap: 12px;
  max-height: calc(100dvh - 80px - 150px); overflow: auto; scrollbar-width: none; }
.clock { display: grid; gap: 2px; }
.clock b { font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.clock small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.hudsec { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.hudrow { display: flex; justify-content: space-between; align-items: baseline; }
.hudrow b { font-size: 18px; }
.hudrow.small b, .hudrow.small span.mono { font-size: 12px; }
.podsplit3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.podsplit3 span { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.podsplit3 i { font-style: normal; font-size: 15px; }
.podsplit3 b { font-size: 11px; }
.podsplit3 em { font-style: normal; font-size: 10px; color: var(--faint); }
.hud-left .curve { margin-top: 0; }
.mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.mini li { display: flex; align-items: center; gap: 8px; font: 500 12px "IBM Plex Mono", monospace; padding: 3px 4px; border-radius: 8px; }
.mini li:first-child:not(.muted) { background: rgba(255,224,102,.1); color: var(--yellow); }
.mini .pl { width: 14px; color: var(--faint); }
.mini .pill { width: 22px; height: 10px; }
.mini .st { margin-left: auto; font-family: Inter, sans-serif; color: var(--muted); font-size: 11px; }
.mini li.me { color: var(--yellow); }
.mini li.outrow { opacity: .45; }

/* ---------- right HUD: kill feed ---------- */
.hud-right { position: fixed; z-index: 5; right: 16px; top: 80px; width: 300px; display: grid; gap: 8px; align-content: start; pointer-events: none; }
.feedhead { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font: 700 12.5px Inter, sans-serif; pointer-events: auto; }
.feedhead b { margin-left: auto; color: var(--muted); font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.toasts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.toasts li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-radius: 16px; font-size: 12.5px; line-height: 1.3;
  background: rgba(14,16,26,.5); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.35); animation: toast .35s cubic-bezier(.2,.9,.3,1.2); }
.toasts li:nth-child(n+5) { opacity: .7; } .toasts li:nth-child(n+7) { opacity: .45; }
.toasts li b { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.toasts li .pill { width: 20px; height: 9px; }
.toasts li .ko { color: var(--red); font-weight: 600; }
.toasts li.big { border-color: rgba(124,245,176,.5); color: var(--green); font-weight: 700; }
.toasts li.win { border-color: rgba(255,224,102,.6); color: var(--yellow); font-weight: 700; }
@keyframes toast { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- king of the hill badge ---------- */
.koth-badge { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "crown pill info" "won won won"; align-items: center; gap: 4px 8px; padding: 10px 12px;
  border-radius: 18px; background: linear-gradient(140deg, rgba(255,224,102,.18), rgba(255,224,102,.04)); border: 1px solid rgba(255,224,102,.45);
  box-shadow: inset 0 1px 0 rgba(255,240,180,.5), 0 8px 24px rgba(255,200,60,.12); }
.koth-badge .crown { grid-area: crown; font-size: 18px; }
.koth-badge .pill { grid-area: pill; width: 32px; height: 15px; }
.koth-badge .kinfo { grid-area: info; min-width: 0; }
.koth-badge .label { color: var(--yellow); font-size: 9.5px; }
.kname { font-size: 13px; font-weight: 600; }
.kmeta { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.kwon { grid-area: won; font-size: 13px; }
.kwon::before { content: "Won "; color: var(--muted); font: 500 11px Inter, sans-serif; }

/* ---------- center overlay + status ---------- */
body.game .overlay { position: fixed; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; pointer-events: none; padding: 16px; }
body.game .overlay.on { display: flex; }
.status { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 150px; font-size: 12px; color: var(--muted); padding: 5px 12px; border-radius: 999px;
  background: rgba(10,12,20,.4); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; }

/* ---------- bottom dock ---------- */
.dock { position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(1060px, calc(100% - 32px)); border-radius: 28px; padding: 12px 16px;
  display: grid; grid-template-columns: minmax(240px, 330px) 1fr auto; gap: 18px; align-items: center; }
.dock-me, .dock-styles { display: grid; gap: 6px; min-width: 0; }
.find { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.25); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.find input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); padding: 6px 10px; font: 500 13px "IBM Plex Mono", monospace; outline: none; }
.find input::placeholder { color: var(--faint); }
.find.wide { margin: 0; }
.dock .meinfo { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); max-width: none; min-height: 0; }
.stylerow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stylechip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; cursor: pointer; color: var(--text); font: 600 13px Inter, sans-serif; text-align: left;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s, background .15s, border-color .15s; }
.stylechip:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
/* small inline version of the style badge (scoreboard, leaderboard, results, how to play) */
.sbadge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; flex: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 45%), linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset 0 -1.5px 3px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.3), 0 2px 6px var(--glow); }
.sbadge svg { width: 11px; height: 11px; }
.sbadge.charge, .stylechip.charge { --c1: #ff8f9c; --c2: #e1324b; --glow: rgba(225,50,75,.45); }
.sbadge.tank, .stylechip.tank { --c1: #e9edfb; --c2: #7f8bb3; --glow: rgba(160,172,214,.4); }
.sbadge.tank svg { color: #7f8bb3; }
.sbadge.dodge, .stylechip.dodge { --c1: #9fe0ff; --c2: #2b8de0; --glow: rgba(43,141,224,.45); }
.sbadge.hunter, .stylechip.hunter { --c1: #ffc58a; --c2: #ef7a1a; --glow: rgba(239,122,26,.45); }
.podium .sbadge { width: 22px; height: 22px; }
.podium .sbadge svg { width: 13px; height: 13px; }
.howlist .sbadge { margin: 0 1px; }

/* bold icon badges: glossy colored circle + thick white glyph */
.stylechip .si { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 42%), linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px var(--glow), 0 0 0 1.5px rgba(255,255,255,.35); }
.stylechip .si svg { width: 22px; height: 22px; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.35)); }
.stylechip.charge { --c1: #ff8f9c; --c2: #e1324b; --glow: rgba(225,50,75,.45); }
.stylechip.tank   { --c1: #e9edfb; --c2: #7f8bb3; --glow: rgba(160,172,214,.4); }
.stylechip.tank .si svg { color: #7f8bb3; }
.stylechip.dodge  { --c1: #9fe0ff; --c2: #2b8de0; --glow: rgba(43,141,224,.45); }
.stylechip.hunter { --c1: #ffc58a; --c2: #ef7a1a; --glow: rgba(239,122,26,.45); }
.stylechip .sn { font: 800 14px Inter, sans-serif; letter-spacing: -.01em; min-width: 0; }
.stylechip .sn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stylechip:hover .si { transform: scale(1.06); }
.stylechip .si { transition: transform .15s; }
.stylechip.on .si { box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2.5px #7cf5b0, 0 8px 22px var(--glow); }
.stylechip small { display: block; font: 500 10.5px "IBM Plex Mono", monospace; color: var(--faint); }
.stylechip.on { border-color: rgba(124,245,176,.8); background: rgba(124,245,176,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(124,245,176,.4), 0 8px 24px rgba(52,211,153,.3); }
.dock .note { margin: 0; font-size: 12px; min-height: 0; }
.dock .follow { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- sheets (leaderboard, payouts) ---------- */
.sheet { position: fixed; z-index: 30; top: 80px; right: 16px; bottom: 16px; width: min(760px, calc(100% - 32px)); border-radius: 28px; display: flex; flex-direction: column;
  background: linear-gradient(140deg, rgba(30,34,52,.72), rgba(14,16,26,.78)); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 30px 80px rgba(0,0,0,.55); animation: sheet .35s cubic-bezier(.2,.9,.3,1); }
@keyframes sheet { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheethead { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 8px; }
.sheethead h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.sheet .x, .introcard .x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--edge); background: rgba(255,255,255,.08); color: var(--muted); font-size: 14px; cursor: pointer; }
.sheetbody { overflow-y: auto; padding: 4px 22px 22px; }
.sheetbody h3 { font-size: 15px; margin: 22px 0 10px; }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.statrow.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .statrow, .statrow.four { grid-template-columns: repeat(2, 1fr); } }
.statrow div { padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.statrow span { display: block; font-size: 11.5px; color: var(--muted); }
.statrow b { font-size: 19px; }
.flowline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.flowline span { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.flowline i { font-style: normal; color: var(--green); }
.chartslot { height: 180px; border-radius: 20px; overflow: hidden; background: rgba(0,0,0,.25); }
.chartslot.live { height: 420px; }
.chartslot iframe { width: 100%; height: 100%; border: 0; display: block; }
.sheet .cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sheet .pcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet .pcard::before { display: none; }
.sheet .pcard .av { width: 64px; height: 64px; }
.sheet .pcard .av .pill { width: 44px; height: 20px; }
.sheet .tablewrap { border-radius: 16px; background: rgba(0,0,0,.18); }
.sheet .tt { min-width: 560px; }
.sheet .fine { margin-top: 20px; }

/* ---------- how to play ---------- */
.introlg { display: block; width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 10px; box-shadow: 0 10px 30px rgba(124,245,176,.3); }
.howlist li b { color: var(--green); }

/* ---------- small screens: stack the HUD ---------- */
@media (max-width: 960px) {
  .hud-top { flex-wrap: wrap; gap: 8px; top: 10px; left: 10px; right: 10px; }
  .seg { order: 3; width: 100%; overflow-x: auto; justify-content: space-between; margin: 0; }
  .seg button { padding: 7px 10px; font-size: 12.5px; }
  .hud-actions .chip, .hud-actions #buyLink { display: none; }
  .hud-left { top: 112px; left: 10px; width: auto; right: 10px; max-height: none; padding: 10px 12px; grid-template-columns: auto 1fr; gap: 10px; border-radius: 20px; }
  .hud-left .clock b { font-size: 28px; }
  .hud-left .hudsec { border-top: 0; padding-top: 0; }
  .hud-left .hudsec:nth-of-type(2) .podsplit3, .hud-left .hudsec:last-child { display: none; }
  .hud-right { top: auto; bottom: 230px; right: 10px; left: 10px; width: auto; }
  .hud-right .feedhead { display: none; }
  .toasts li:nth-child(n+3) { display: none; }
  .koth-badge { display: none !important; }
  .dock { grid-template-columns: 1fr; gap: 10px; bottom: 10px; width: calc(100% - 20px); border-radius: 22px; padding: 10px 12px; }
  .stylechip small { display: none; }
  .stylechip { padding: 7px 8px; font-size: 12px; }
  .dock .follow { display: none; }
  .status { bottom: 200px; }
  .sheet { top: 110px; right: 10px; bottom: 10px; width: calc(100% - 20px); }
}