/* ============================================================
   WAVE DODGE — main.css
   ------------------------------------------------------------
   Structure (in file order): BASE/RESET, MENU/OVERLAY SCREENS,
   HUD, WAVE/DOWN BANNERS, RESULT SCREEN/SCORING, DEV MODE PANEL,
   then responsive @media overrides, then @keyframes animations.
   Section comments below mark each category as it appears.

   Conventions for future edits (human or AI):
   - One rule per selector. If you need to change #hud or any
     other selector, search for it — there should be exactly ONE
     matching block per breakpoint. Do NOT add a new override
     block "on top"; edit the existing rule instead.
   - Avoid !important. It should only appear where a rule must
     beat an inline style or a deliberately higher-priority rule
     elsewhere — not as a way to "win" against another CSS rule.
     If you find yourself reaching for !important, look for the
     competing rule and fix the specificity/order instead.
   - #devPanel's HTML content is written by js/systems/devMode.js
     (renderPanel()) at runtime — it replaces whatever is in the
     <section id="devPanel"> tag in index-test.html. Edit the
     panel's structure in devMode.js, not in the HTML file.
   ============================================================ */



/* BASE / RESET */
:root {--accent: #4ecdc4;--danger: #ff5c5c;--gold: #ffd93d;--graze: #7bed9f;--panel: rgba(14,16,26,.92);--border: rgba(255,255,255,.12);--safe-top: max(12px,env(safe-area-inset-top));--safe-left: max(12px,env(safe-area-inset-left))}
* {box-sizing: border-box}
html {margin: 0;width: 100%;height: 100%;overflow: hidden;background: #07070c;font-family: system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif}
body {margin: 0;width: 100%;height: 100%;overflow: hidden;background: #07070c;font-family: system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;touch-action: none}

/* GENERAL */
button {font: inherit;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent}
#gameRoot {position: fixed;inset: 0;overflow: hidden;background: #07070c}
canvas {cursor: none;position: absolute;inset: 0;width: 100%;height: 100%;display: block;touch-action: none}

/* MENU / OVERLAY SCREENS */
.chip {background: var(--panel);border: 1px solid var(--border);border-radius: 8px;padding: 6px 10px;font-size: 13px;color: #b8bcc8;display: flex;align-items: center;gap: 6px;box-shadow: 0 2px 8px #0006;backdrop-filter: blur(5px)}
.chip b {color: #fff;font-variant-numeric: tabular-nums}
.chip.time b {color: var(--accent)}
.chip.wave b {color: var(--gold)}
.chip.p2 b {letter-spacing: 1px}
.chip.skill b {color: #ff9f43}
.chip.skill.ready b {border-bottom: 2px solid var(--graze);color: var(--graze)}

/* RESULT SCREEN / SCORING */
.chip.graze b {color: var(--graze)}

/* MENU / OVERLAY SCREENS */
.chip.combo {border-color: #ff9f4377}
.chip.combo b {color: #ff9f43}

/* GENERAL */
.hidden {display: none !important}
#bossWrap {position: absolute;z-index: 10;top: var(--safe-top);left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: 4px;pointer-events: none;width: min(340px,55vw)}
#bossLabel {color: var(--danger);font-size: 13px;font-weight: 800;letter-spacing: 1px;text-shadow: 0 0 8px #ff5c5c99}
#bossBar {width: 100%;height: 12px;background: #ffffff14;border: 1px solid #ff5c5c80;border-radius: 8px;overflow: hidden;box-shadow: 0 0 14px #ff5c5c40}
#bossBarFill {height: 100%;width: 100%;background: linear-gradient(90deg,var(--danger),var(--gold))}

/* MENU / OVERLAY SCREENS */
.panel {width: min(620px,94vw);max-height: 94vh;overflow: auto;background: var(--panel);border: 1px solid var(--border);border-radius: 14px;padding: clamp(20px,4vw,34px);text-align: center;box-shadow: 0 12px 40px #0009}
.panel .logo {font-size: 14px;letter-spacing: 4px;color: var(--accent);margin-bottom: 3px}
.panel h1 {font-size: clamp(30px,7vw,38px);margin: 0 0 4px}

/* GENERAL */
.tagline {font-size: 13px;color: #8b8fa3;margin: 0 0 18px}
.option:hover {background: #ffffff0c}
.start {width: 100%;padding: 14px 16px;border: 0;border-radius: 8px;background: var(--accent);color: #06201d;font-weight: 800;letter-spacing: 2px;cursor: pointer;box-shadow: 0 4px 0 #2f8f88,0 6px 16px #4ecdc44d;font-size: 15px;transition: transform .12s,filter .12s,box-shadow .12s}
.start:hover {filter: brightness(1.08);transform: translateY(-1px);box-shadow: 0 5px 0 #2f8f88,0 9px 22px #4ecdc44d}
.start:active {transform: translateY(2px);box-shadow: 0 2px 0 #2f8f88,0 4px 10px #4ecdc433}
.restart-btn {position: relative;overflow: hidden}
.restart-btn span {display: inline-block;font-size: 18px;margin-right: 6px;vertical-align: -1px;transition: transform .35s}
.restart-btn:hover span {transform: rotate(-180deg)}
.result-actions .restart-btn {background: linear-gradient(135deg,#4ecdc4,#6ee7df);color: #06201d;border-color: transparent}
#pauseOverlay {cursor: auto;position: absolute;z-index: 30;inset: 0;display: flex;align-items: center;justify-content: center;color: #fff;padding: 16px;flex-direction: column;gap: 6px;background: #05050ab3}
.big {font-size: 30px;font-weight: 800;letter-spacing: 3px}
.small {font-size: 13px;color: #8b8fa3}

/* Pause screen: "เล่นต่อ" (Resume) is the primary, most-likely-wanted action —
   kept large, bright and separated above the secondary Restart/Menu group so
   players don't fat-finger a restart when they only meant to resume. */
.resume-btn {width: min(280px,80vw);margin-top: 18px;position: relative;overflow: hidden;font-size: 16px}
.resume-btn span {display: inline-block;font-size: 15px;margin-right: 6px;vertical-align: -1px;transition: transform .2s}
.resume-btn:hover span {transform: scale(1.15)}
.pause-actions-divider {display: flex;align-items: center;gap: 10px;width: min(280px,80vw);margin: 14px 0 2px;color: #6b6f80;font-size: 11px;letter-spacing: 1px}
.pause-actions-divider::before,
.pause-actions-divider::after {content: "";flex: 1;height: 1px;background: #ffffff1f}

/* MENU / OVERLAY SCREENS */
.menu-btn {width: 100%;padding: 12px 16px;border: 1px solid #ffffff26;border-radius: 8px;background: #ffffff0a;color: #d3d6de;font-weight: 700;letter-spacing: 1px;cursor: pointer;box-shadow: none;transition: background .12s,border-color .12s,transform .12s}
.menu-btn:hover {background: #ffffff14;border-color: #ffffff40}
.menu-btn:active {transform: translateY(1px)}

/* GENERAL */
.pause-actions {display: flex;flex-direction: column;gap: 10px;width: min(280px,80vw);margin-top: 8px}
.result-actions {display: flex;flex-direction: column;gap: 10px;margin-top: 16px}
.result-actions .restart-btn {margin-top: 0}

/* Top-right in-game hint: "Space bar เพื่อหยุดเกม" pill shown while playing */
.space-hint {position: fixed;top: max(10px,env(safe-area-inset-top));right: max(10px,env(safe-area-inset-right));z-index: 20;display: flex;align-items: center;gap: 6px;padding: 7px 12px;border-radius: 999px;border: 1px solid #4ecdc466;background: linear-gradient(135deg,#0d1b1ae0,#0a1210e0);color: #d3d6de;font-size: 12px;letter-spacing: .4px;box-shadow: 0 4px 14px #0007,inset 0 0 0 1px #ffffff08;pointer-events: none}
.space-hint kbd {font-family: inherit;font-size: 11px;font-weight: 800;letter-spacing: .5px;color: #06201d;background: linear-gradient(135deg,#4ecdc4,#6ee7df);border-radius: 5px;padding: 3px 7px;box-shadow: 0 2px 0 #2f8f88}
.space-hint span {color: #a9adbb}
@media (max-width: 700px) {.space-hint {display: none}}
/* Coop's Player 2 HUD block (score/lives/skill) sits pinned to the same
   top-right corner (#hud .hud-p2, justify-self: end) that this hint
   floats over — in coop the hint's fixed position lands directly on top
   of P2's lives card, covering the hearts. Solo has no P2 HUD there so
   the hint is unaffected; the shortcut itself is still shown elsewhere
   (mode-select's controlHint line and the pause screen), so hiding this
   copy of it in coop loses no information. */
#hud.coop-mode .space-hint {display: none}
.skill-status span:first-child {color: #ff9f43}
.skill-status span:last-child {color: #d8dbe5;font-variant-numeric: tabular-nums}

/* MENU / OVERLAY SCREENS */
.skill-card.ready .skill-status span:first-child {color: var(--graze)}
.skill-card.ready .skill-status span:last-child {color: var(--graze)}

/* GENERAL */
.skill-bar i {display: block;height: 100%;width: 100%;background: linear-gradient(90deg,#ff9f43,#ffd166);border-radius: inherit;transition: width .08s linear}
.skill-card {position: relative}
.skill-cd-popup-overlay {position: fixed !important;left: 0 !important;top: 0 !important;width: 0 !important;height: 0 !important;overflow: visible !important;pointer-events: none !important;z-index: 90 !important}
.skill-cd-popup {position: fixed !important;display: block !important;width: max-content !important;white-space: nowrap !important;color: var(--graze) !important;font-size: 10px !important;font-weight: 800 !important;letter-spacing: .3px !important;font-variant-numeric: tabular-nums !important;text-shadow: 0 2px 5px rgba(0,0,0,.85),0 0 8px rgba(123,237,159,.45) !important;transform-origin: center top !important;animation: skillCdPopupDrop .75s ease-out forwards !important}

/* MENU / OVERLAY SCREENS */
.skill-card.ready .skill-bar i {background: linear-gradient(90deg,#7bed9f,#a8f5c1)}
.skill-card:not(.ready) .skill-bar i {opacity: .9}

/* Skill-ready callout: a quick scale/glow pop on the chip itself, fired
   once on the cooldown->ready edge (see UI.pulseSkillReady()). The color
   change from .ready alone is easy to miss mid-swarm; the motion here is
   what catches peripheral vision without covering the play area. */
@keyframes skillReadyPop {
  0% {transform: scale(1);box-shadow: 0 2px 7px #0005}
  30% {transform: scale(1.14);box-shadow: 0 0 0 3px rgba(78,205,196,.55),0 0 22px 6px rgba(78,205,196,.65)}
  100% {transform: scale(1);box-shadow: 0 2px 7px #0005}
}
.skill-card.skill-pop {animation: skillReadyPop .55s cubic-bezier(.34,1.56,.64,1)}

/* GENERAL */
.option {color: #d3d6de;border-radius: 9px;padding: 11px 8px;cursor: pointer;box-shadow: none;letter-spacing: 1px;min-height: 48px;background: rgba(255,255,255,.035);border: 1px solid rgba(255,255,255,.09);font-weight: 800}
.option.selected {color: #fff;background: linear-gradient(180deg,rgba(78,205,196,.16),rgba(78,205,196,.05));border-color: rgba(78,205,196,.7);box-shadow: 0 0 0 1px rgba(78,205,196,.15) inset,0 8px 20px rgba(0,0,0,.18)}

/* MENU / OVERLAY SCREENS */
.rules {text-align: left;list-style: none;padding: 0;display: grid;grid-template-columns: 1fr 1fr;gap: 8px;margin: 12px 0 18px}
.rules li {font-size: 12px;color: #d3d6de;border: 1px solid #ffffff0d;border-radius: 8px;padding: 8px 10px;min-height: 38px;display: flex;align-items: center;background: rgba(255,255,255,.035);border-color: rgba(255,255,255,.07)}
.hero-kicker {color: var(--accent);font-size: 10px;font-weight: 800;letter-spacing: 5px;opacity: .82;margin-bottom: 8px}
.hero-title-wrap h1 {margin: 0;color: #fff;font-size: clamp(42px,9vw,72px);line-height: .95;font-weight: 900;letter-spacing: clamp(2px,1vw,7px);text-shadow: 0 8px 30px rgba(0,0,0,.55),0 0 32px rgba(78,205,196,.12)}
.hero-line {width: 54px;height: 2px;margin: 14px auto 11px;background: var(--accent);box-shadow: 0 0 12px rgba(78,205,196,.5)}
.hero-title-wrap p {margin: 0;color: #8e95a8;font-size: 12px}
.menu-screen {width: min(560px,92vw);padding: clamp(24px,5vw,42px) clamp(16px,5vw,32px);text-align: center}
.menu-screen.hidden {display: none !important}
.hero-title-wrap {margin-bottom: 26px}

/* GENERAL */
.screen-label {margin: 0 0 9px;text-align: left;color: #7f879a;font-size: 10px;font-weight: 800;letter-spacing: 1.5px;text-transform: uppercase}

/* MENU / OVERLAY SCREENS */
.mode-menu {display: flex;flex-direction: column;gap: 10px}
.mode-choice {width: 100%;min-height: 72px;display: grid;grid-template-columns: 48px 1fr 24px;align-items: center;text-align: left;padding: 10px 15px;border: 1px solid rgba(255,255,255,.10);border-radius: 12px;background: rgba(14,17,27,.88);color: #fff;cursor: pointer;transition: transform .12s,border-color .15s,background .15s,box-shadow .15s}
.mode-choice:hover {transform: translateX(2px);border-color: rgba(78,205,196,.48);background: rgba(24,29,42,.96);box-shadow: 0 8px 24px rgba(0,0,0,.18)}

/* GENERAL */
.mode-number {color: #657084;font-size: 11px;font-weight: 900;letter-spacing: 1px}

/* MENU / OVERLAY SCREENS */
.mode-choice strong {display: block;font-size: 17px;font-weight: 850}
.mode-choice small {display: block;margin-top: 2px;color: #7f879a;font-size: 9px;font-weight: 800;letter-spacing: 1.5px}

/* GENERAL */
.mode-arrow {font-size: 27px;line-height: 1;color: #687184;text-align: right}

/* MENU / OVERLAY SCREENS */
.mode-choice:hover .mode-number {color: var(--accent)}
.mode-choice:hover .mode-arrow {color: var(--accent)}
.menu-hint {margin-top: 13px;color: #626b7e;font-size: 9px;letter-spacing: .4px}

/* GENERAL */
.back-btn {border: 0;background: transparent;color: #8e95a8;font-size: 12px;padding: 4px 0;cursor: pointer;display: block;margin-bottom: 12px}
.back-btn:hover {color: #fff}
.skill-screen-head {text-align: left;margin-bottom: 15px}

/* MENU / OVERLAY SCREENS */
.skill-screen-head .hero-kicker {margin-bottom: 5px}

/* GENERAL */
.skill-screen-head h2 {margin: 0;font-size: clamp(28px,7vw,40px);line-height: 1;font-weight: 900}
.skill-screen-head p {margin: 7px 0 0;color: #8e95a8;font-size: 11px}
.skill-player-block {text-align: left;margin-top: 12px;padding: 12px;border: 1px solid rgba(255,255,255,.09);border-radius: 12px;background: rgba(10,13,21,.78)}
.skill-player-head {display: flex;justify-content: space-between;align-items: center;gap: 10px;margin-bottom: 9px}
.skill-player-head strong {font-size: 11px;letter-spacing: 1.5px;color: #fff}
.skill-player-head span {font-size: 9px;color: #7f879a}

/* MENU / OVERLAY SCREENS */
.skill-card-grid {display: grid;grid-template-columns: repeat(3,1fr);gap: 7px}
.skill-card-option:hover {transform: translateY(-1px);border-color: rgba(255,255,255,.2);background: rgba(255,255,255,.07)}

/* GENERAL */
.selected-loadout {display: flex;justify-content: center;align-items: center;gap: 9px;min-height: 38px;margin: 11px 0 9px;padding: 8px 10px;border: 1px solid rgba(78,205,196,.17);border-radius: 9px;background: rgba(78,205,196,.045);color: #8e95a8;font-size: 10px}
.selected-loadout b {color: #fff}
.selected-loadout i {color: #4ecdc4;font-style: normal}
#skillScreen .start {margin-top: 0;min-height: 52px;border-radius: 10px}

/* MENU / OVERLAY SCREENS */
#overlay {cursor: auto;position: absolute;z-index: 30;inset: 0;display: flex;align-items: center;justify-content: center;color: #fff;padding: 16px;backdrop-filter: blur(3px);overflow: hidden;background: radial-gradient(circle at 50% 20%, rgba(78,205,196,.11), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.035), transparent 45%),
    rgba(4,5,10,.88);-webkit-user-select: none;user-select: none}
#overlay * {-webkit-user-select: none;user-select: none}

/* GENERAL */
.p1-score b {color: #fff}
.p2-score b {color: #fff}

/* RESULT SCREEN / SCORING */
.rank-result {position: relative;margin: 18px auto 14px;padding: 14px 16px 16px;border: 1px solid rgba(255,255,255,.12);border-radius: 12px;background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));text-align: center;box-shadow: 0 8px 28px rgba(0,0,0,.22);overflow: visible}
.rank-kicker {font-size: 10px;font-weight: 900;letter-spacing: 4px;color: #8e95a8}
.rank-letter {position: relative;margin: 4px 0 10px;font-size: clamp(54px,12vw,76px);line-height: 1;font-weight: 1000;letter-spacing: 2px;text-shadow: 0 6px 22px rgba(255,255,255,.10);animation: rank-reveal .35s cubic-bezier(.2,.8,.2,1) both}
.rank-phrase {font-size: 13px;line-height: 1.5;color: #d8dbe4;font-weight: 700;letter-spacing: .3px;opacity: 0;transition: opacity .5s ease; margin-top: 4px;}
.rank-phrase.rank-phrase-visible {opacity: 1}
.rank-s .rank-letter {color: var(--gold)}
.rank-ss .rank-letter {color: var(--gold)}
.rank-sss .rank-letter {color: var(--gold)}
.rank-a .rank-letter {color: var(--accent)}
.rank-b .rank-letter {color: var(--accent)}
.rank-c .rank-letter {color: #a7ac86}
.rank-d .rank-letter {color: #8e95a8}
.rank-sss {border-color: rgba(255,217,61,.34);background: linear-gradient(180deg,rgba(255,217,61,.09),rgba(255,255,255,.018))}
.rank-ss {border-color: rgba(255,217,61,.24)}

/* Rank reveal: build-up cycle lands here — pop scale + shake, both scaled
   per-tier via --rank-pop-scale / --rank-shake-amp set inline by ui.js. */
.rank-letter.rank-pop {animation: rank-pop-scale .5s cubic-bezier(.2,.8,.2,1)}
.rank-result.rank-landed {animation: rank-shake .4s ease}
.rank-sss .rank-letter.rank-pop {
  background: linear-gradient(90deg,#ffd93d,#fff6cf,#ffb347,#ffd93d);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rank-pop-scale .5s cubic-bezier(.2,.8,.2,1), rank-shimmer 1.6s linear .5s infinite;
}

.rank-particles {position: absolute;inset: 0;pointer-events: none;overflow: visible}
.rank-particle {position: absolute;left: 50%;top: 38%;width: 6px;height: 6px;border-radius: 50%;opacity: 0;background: var(--rp-color, var(--gold));animation: rank-particle-fly .75s ease-out forwards;animation-delay: var(--rp-delay, 0s)}

/* GENERAL */
.run-comparison {margin: 18px 0 14px;border: 1px solid rgba(255,255,255,.10);border-radius: 12px;overflow: hidden;background: rgba(255,255,255,.025)}
.run-comparison-header {display: grid;grid-template-columns: 76px 1fr 1fr;align-items: center;min-height: 42px;border-bottom: 1px solid rgba(255,255,255,.08);background: rgba(255,255,255,.025)}
.run-comparison-header>div:not(:first-child) {font-size: 13px;font-weight: 900;letter-spacing: .3px;text-align: center}
.run-comparison-header .run-latest {color: var(--accent)}
.run-comparison-header .run-best {color: var(--gold)}
.run-comparison-row {display: grid;grid-template-columns: 76px 1fr 1fr;align-items: center;min-height: 38px;border-bottom: 1px solid rgba(255,255,255,.055)}
.run-comparison-row:last-child {border-bottom: 0}
.run-label {padding-left: 13px;color: #8e95a8;font-size: 12px;font-weight: 700;text-align: left}
.run-value {text-align: center;font-size: 15px;font-weight: 800;font-variant-numeric: tabular-nums}
.run-value.run-latest {color: var(--accent)}
.run-value.run-best {color: var(--gold)}

/* RESULT SCREEN / SCORING */
.score-results {display: grid;grid-template-columns: 1fr 1fr;gap: 8px;margin: 16px 0 10px}
.score-results>div {padding: 11px 12px;border: 1px solid rgba(255,255,255,.10);border-radius: 9px;background: rgba(255,255,255,.035);display: flex;flex-direction: column;gap: 3px}
.score-results span {font-size: 10px;color: #8e95a8;font-weight: 900;letter-spacing: 1.5px}
.score-results b {font-size: 19px;color: #fff;font-variant-numeric: tabular-nums}
.team-result {padding: 12px;border: 1px solid rgba(255,217,61,.3);border-radius: 10px;background: rgba(255,217,61,.06);display: flex;align-items: center;justify-content: space-between;gap: 12px}
.team-result span {font-size: 10px;color: #a6a7b3;font-weight: 900;letter-spacing: 1.5px}
.team-result b {font-size: 23px;color: var(--gold);font-variant-numeric: tabular-nums}

/* MENU / OVERLAY SCREENS */
.chip.lives {flex: 0 0 118px;min-width: 118px;justify-content: flex-start;white-space: nowrap;overflow: hidden}
.chip.p2-lives {flex: 0 0 118px;min-width: 118px;justify-content: flex-start;white-space: nowrap;overflow: hidden}
.chip.lives b {letter-spacing: 1px;display: block;min-width: 72px;text-align: left;white-space: nowrap;overflow: hidden}
.chip.p2-lives b {display: block;min-width: 72px;text-align: left;white-space: nowrap;overflow: hidden}

/* GENERAL */
.p1-score span {color: #4ecdc4;font-weight: 900;letter-spacing: 1px}
.p2-score span {color: #ffd166;font-weight: 900;letter-spacing: 1px}
.p2-lives>span {color: #ffd166;font-weight: 900}

/* WAVE / DOWN BANNERS */
#downBanner {position: absolute;z-index: 25;left: 50%;top: 18%;transform: translateX(-50%);min-width: min(360px,82vw);padding: 12px 22px;text-align: center;border: 1px solid rgba(255,92,92,.6);border-radius: 12px;backdrop-filter: blur(8px);animation: down-pulse .7s ease-in-out infinite alternate;border-color: rgba(255,209,102,.48);background: rgba(28,24,12,.92);box-shadow: 0 10px 32px rgba(0,0,0,.42),0 0 22px rgba(255,209,102,.10)}
#downBanner b {display: block;font-size: 18px;letter-spacing: 2px;font-weight: 900;color: #ffd166}
#downBanner small {display: block;margin-top: 4px;font-size: 11px;font-weight: 700;color: #f1ead6}
#downBanner.critical {border-color: rgba(255,209,102,.72);background: rgba(38,31,12,.96)}
#downBanner.critical b {font-size: 20px;color: #ffe29a}

/* HUD (in-game player status) */
.hud-p1 {align-items: stretch}
.hud-p2 {align-items: stretch}

/* GENERAL */
.p1-title {color: #4ecdc4}
.p1-score {min-width: 88px;border-color: rgba(78,205,196,.38);background: linear-gradient(180deg,rgba(12,35,37,.96),rgba(10,18,23,.94))}
.p2-score {min-width: 88px;border-color: rgba(255,209,102,.42);background: linear-gradient(180deg,rgba(42,34,18,.96),rgba(20,18,13,.94))}
.p2-lives {border-color: rgba(255,209,102,.42);background: linear-gradient(180deg,rgba(42,34,18,.96),rgba(20,18,13,.94))}
.p2-skill {border-color: rgba(255,209,102,.42);background: linear-gradient(180deg,rgba(42,34,18,.96),rgba(20,18,13,.94))}

/* HUD (in-game player status) */
.p2-skill .hud-label {color: #a99564}

/* GENERAL */
.p2-skill .skill-head>b {color: #ffd166}
.player-dot {border-radius: 50%;display: inline-block;background: currentColor;box-shadow: 0 0 9px currentColor;width: 5px;height: 5px}

/* HUD (in-game player status) */
.hud-card {background: linear-gradient(180deg,rgba(18,21,34,.96),rgba(10,12,21,.94));border: 1px solid rgba(255,255,255,.14);backdrop-filter: blur(6px);min-width: 0;width: 100%;padding: 5px 7px;border-radius: 7px;box-shadow: 0 2px 7px #0005}
.hud-label {display: block;color: #858ba0;font-weight: 800;line-height: 1;font-size: 7px;letter-spacing: 1.2px;margin-bottom: 2px}

/* GENERAL */
.skill-head {display: flex;align-items: center;justify-content: space-between;gap: 5px}
.p2-title {color: #ffd166;justify-content: flex-end}

/* HUD (in-game player status) */
.hud-row {grid-template-columns: 1fr 1fr;gap: 4px;display: contents}

/* GENERAL */
.player-score {font-variant-numeric: tabular-nums;flex: initial;justify-content: center;height: 36px;min-width: 0}
.lives-card {flex: initial;justify-content: center;height: 36px;min-width: 0}
.lives-card b {display: block;line-height: 1.1;font-variant-numeric: tabular-nums;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;letter-spacing: 1px;font-size: 10px}
.player-score b {display: block;line-height: 1.1;font-variant-numeric: tabular-nums;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 10px}

/* MENU / OVERLAY SCREENS */
.skill-card {min-width: 0;padding: 5px 7px;min-height: 36px;height: 36px}

/* GENERAL */
.skill-head>b {color: #fff;letter-spacing: .7px;font-size: 8px}
.skill-status {display: flex;align-items: center;justify-content: space-between;gap: 10px;font-weight: 800;letter-spacing: 1px;font-size: 6px;margin-top: 1px}
.skill-bar {border-radius: 4px;background: rgba(255,255,255,.09);overflow: hidden;height: 2px;margin-top: 2px}

/* HUD (in-game player status) */
.hud-zone {flex-direction: column;grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);display: flex;align-items: center;gap: 7px;min-width: 0;width: auto}
.hud-player-title {font-weight: 900;text-shadow: 0 2px 7px #000;gap: 5px;height: 32px;min-width: 42px;padding: 0 7px;display: flex;align-items: center;justify-content: center;font-size: 8px;letter-spacing: 1px;white-space: nowrap}
.hud-zone .lives-card {height: 32px;min-height: 32px;min-width: 0;width: auto;padding: 4px 8px}
.hud-zone .skill-card {height: 32px;min-height: 32px;min-width: 0;width: 110px;padding: 4px 7px}
.hud-zone .lives-card b {font-size: 11px}
.hud-zone .hud-label {font-size: 6px}
.hud-zone .skill-head>b {font-size: 7px}
.hud-zone .skill-status {font-size: 5px}
.hud-zone .skill-bar {height: 2px;margin-top: 2px}
#hud.hidden {display: none !important}
#hud .lives-card .hud-label {display: none}
#hud .skill-head {display: flex;align-items: center;justify-content: space-between;gap: 4px;line-height: 1}
#hud .hud-player-title {flex: 0 0 auto;width: auto;margin: 0;display: flex !important;align-items: center;justify-content: center;white-space: nowrap;min-width: 72px;height: 40px;padding: 0 10px;font-size: 10px;letter-spacing: 1.4px}
#hud .hud-p1 .lives-card {order: 2}
#hud .hud-p2 .lives-card {order: 2}
#hud .skill-head .hud-label {margin: 0;font-size: 7px}
#hud .skill-head>b {white-space: nowrap;font-size: 9px}
#hud .skill-status {line-height: 1;font-size: 6px;margin-top: 3px}
#hud .skill-bar {height: 3px;margin-top: 3px}
#hud .hud-p1 .hud-row {align-items: center !important;gap: 6px !important;width: auto !important;order: 2 !important;display: flex !important;flex-direction: row !important}
#hud .hud-p1 .hud-row .lives-card {order: 1 !important}
#hud .hud-p1 .skill-card {order: 3 !important}
#hud .hud-p2 .skill-card {order: 1 !important}
#hud .hud-p2 .hud-row {align-items: center !important;gap: 6px !important;width: auto !important;order: 2 !important;display: flex !important;flex-direction: row !important}
#hud .hud-p2 .hud-row .lives-card {order: 1 !important}
#hud .p1-score {display: none !important}
#hud .p2-score {display: none !important}
#hud .hud-p2.hidden {display: none !important}
#hud {position: absolute !important;z-index: 10 !important;top: max(6px,env(safe-area-inset-top)) !important;width: 100% !important;padding: 0 10px !important;box-sizing: border-box !important;transform: none !important;margin: 0;display: grid !important;grid-template-areas: "p1 center p2" !important;flex-wrap: nowrap !important;pointer-events: none;left: 10px !important;right: 10px !important;grid-template-columns: minmax(0,1fr) minmax(112px,auto) minmax(0,1fr) !important;gap: clamp(8px,2vw,20px) !important;align-items: center !important}
#hud .hud-p1 {grid-column: 1;grid-area: p1 !important;justify-self: start;width: auto;display: flex !important;flex-direction: row !important;align-items: center !important;justify-content: flex-start !important;min-width: 0 !important;max-width: 100% !important;gap: clamp(5px,1vw,10px) !important}
#hud .hud-p2 .hud-player-title {order: 3 !important;flex: 0 1 auto !important;min-width: 60px !important}
#hud .hud-p1 .hud-player-title {order: 1 !important;flex: 0 1 auto !important;min-width: 60px !important}
#hud .lives-card {margin: 0;height: 40px;padding: 6px 10px;border-radius: 8px;flex: 0 0 auto !important;min-width: 82px !important;width: 82px !important;display: flex !important;align-items: center !important;justify-content: center !important}
#hud .lives-card b {display: block;line-height: 1;font-size: 13px;letter-spacing: 1.5px;width: 100%;text-align: center;white-space: nowrap}
#hud .skill-card {margin: 0;height: 40px;min-height: 40px;padding: 6px 9px;border-radius: 8px;flex: 0 1 118px !important;width: 118px !important;min-width: 72px !important;overflow: hidden}
#hud .hud-p2 {grid-column: 3;grid-area: p2 !important;justify-self: end;width: auto;display: flex !important;flex-direction: row !important;align-items: center !important;justify-content: flex-end !important;min-width: 0 !important;max-width: 100% !important;gap: clamp(5px,1vw,10px) !important;overflow: hidden}
#hud .hud-p1 > * {min-width: 0 !important}
#hud .hud-p2 > * {min-width: 0 !important}
#hud .hud-p1 .hud-row > * {min-width: 0 !important}
#hud .hud-p2 .hud-row > * {min-width: 0 !important}

/* GENERAL */
#devBulletCount {float: none;margin-left: 7px;color: #8d94a8;font-size: 8px;letter-spacing: .7px}

/* DEV MODE PANEL */
#devPanel {overflow: hidden;backdrop-filter: blur(10px);position: fixed;left: 50%;bottom: 14px;right: auto;transform: translateX(-50%);z-index: 100000;width: min(680px,calc(100vw - 24px));padding: 14px;border: 1px solid #25252b;border-radius: 12px;background: #0b0b0e;color: #e7e7eb;box-shadow: 0 16px 50px rgba(0,0,0,.65);pointer-events: auto}
#devPanel .dev-title {height: 38px;margin: 0;font-size: 10px;letter-spacing: 1.5px;display: flex;align-items: center;justify-content: space-between;padding: 0 2px 10px;border-bottom: 1px solid #202026;color: #f2f2f4}
#devPanel .dev-title>div {display: flex;align-items: center;gap: 7px;font-size: 11px;font-weight: 900;letter-spacing: 1.8px}
#devPanel .dev-dot {width: 7px;height: 7px;border-radius: 50%;background: #fff;box-shadow: 0 0 8px rgba(255,255,255,.35)}
#devPanel .dev-close {width: 28px !important;min-width: 28px !important;height: 28px;min-height: 28px !important;padding: 0 !important;border: 1px solid #292930 !important;background: #111115 !important;color: #8e8e98 !important;font-size: 18px !important;line-height: 1}
#devPanel .dev-section {padding: 11px 0 0}
#devPanel .dev-section-label {margin: 0 0 6px;color: #6f6f79;font-size: 8px;font-weight: 900;letter-spacing: 1.7px}
#devPanel .dev-section-toggle {width: 100%;min-height: 0 !important;flex: none !important;display: flex;align-items: center;justify-content: space-between;padding: 6px 2px;margin: 0;border: 0;background: transparent;cursor: pointer}
#devPanel .dev-section-toggle:hover {background: transparent}
#devPanel .dev-section-toggle .dev-section-label {margin: 0}
#devPanel .dev-section-toggle .dev-toggle-chevron {color: #6f6f79;font-size: 10px;transition: transform .12s}
#devPanel .dev-section-toggle[aria-expanded="true"] .dev-toggle-chevron {color: #9a9aa4}
#devPanel .dev-section-body.hidden {display: none}
#devPanel .dev-row {grid-template-columns: repeat(3,1fr);margin: 0;display: flex;flex-wrap: wrap;gap: 6px}
#devPanel button {letter-spacing: .2px;min-height: 34px;flex: 1 1 120px;padding: 7px 10px;border: 1px solid #25252c;border-radius: 7px;background: #151519;color: #e7e7eb;font-size: 10px;font-weight: 800;cursor: pointer;transition: background .12s,border-color .12s,transform .08s}
#devPanel button:hover {color: #fff;background: #1c1c21;border-color: #3a3a43}
#devPanel button:active {transform: translateY(1px)}
#devPanel .dev-main-action {background: #19191e}
#devPanel .dev-speed-btn.active {background: #262637;border-color: #565672;color: #fff;box-shadow: inset 0 0 0 1px #6a6a8c}
#devPanel .dev-danger {color: #d9a0a0;border-color: #382626}
#devPanel .dev-danger:hover {color: #ffb0b0;background: #211717;border-color: #573535}
#devPanel .dev-wave-row {display: flex;align-items: stretch;gap: 6px}
#devPanel .dev-wave-btn {flex: 0 0 52px;font-size: 16px}
#devPanel .dev-wave-current {flex: 1;display: flex;align-items: center;justify-content: center;gap: 9px;min-height: 34px;border: 1px solid #25252c;border-radius: 7px;background: #101014}
#devPanel .dev-wave-current span {color: #686873;font-size: 8px;font-weight: 900;letter-spacing: 1.4px}
#devPanel .dev-wave-current strong {color: #f0f0f2;font-size: 15px}
#devPanel .dev-status {display: flex;align-items: center;justify-content: center;gap: 7px;margin-top: 12px;padding-top: 9px;border-top: 1px solid #202026;color: #5f5f69;font-size: 8px;letter-spacing: 1px}
#devPanel .dev-status b {color: #9a9aa4}
#devPanel .dev-skin-status {flex: 1 1 100%;min-height: 0;padding: 6px 4px 0;text-align: center;color: #8e8e98;font-size: 9px;letter-spacing: 1px;font-weight: 700}
#devPanel #devSkinRarityRow button {flex: 1 1 90px}
#devPanel #devSkinRarityRow button[data-rarity="common"] {border-color: rgba(167,172,184,.4)}
#devPanel #devSkinRarityRow button[data-rarity="uncommon"] {border-color: rgba(114,214,160,.4);color: #a7e9c6}
#devPanel #devSkinRarityRow button[data-rarity="rare"] {border-color: rgba(112,217,255,.4);color: #9fe3ff}
#devPanel #devSkinRarityRow button[data-rarity="epic"] {border-color: rgba(233,156,255,.4);color: #edb8ff}
#devPanel #devSkinRarityRow button[data-rarity="legendary"] {border-color: rgba(255,217,93,.45);color: #ffe28a}
#devPanel #devSkinRarityRow button[data-rarity="mythic"] {border-color: rgba(255,77,141,.5);color: #ff9dc1}
#secret-dev-badge {top: auto !important;left: 10px !important;bottom: 10px !important;padding: 5px 8px !important;border-radius: 7px !important;font-size: 11px !important}

/* RESULT SCREEN / SCORING */
#overlay #resultScreen {box-sizing: border-box;width: min(620px,94vw);max-width: none;max-height: none;padding: 0;margin: 0;overflow: visible;flex: 0 0 auto;transform-origin: center center}
#overlay #resultScreen .panel {box-sizing: border-box;width: 100%;max-width: none;max-height: none;margin: 0}


/* MENU / OVERLAY SCREENS */
.skill-card-option {min-width: 0;border: 1px solid rgba(255,255,255,.09);border-radius: 9px;color: #fff;cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 3px;text-align: center;transition: transform .12s,border-color .12s,background .12s,box-shadow .12s;position: relative;min-height: 104px;padding: 8px 7px 7px;overflow: hidden;background: radial-gradient(circle at 50% 18%,rgba(255,255,255,.06),transparent 45%),
    linear-gradient(180deg,rgba(20,24,38,.82),rgba(8,10,17,.94))}
.skill-card-option::before {content: "";position: absolute;inset: 0;pointer-events: none;background: linear-gradient(135deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(78,205,196,.04));opacity: .55}
.skill-card-option.selected {border-color: var(--accent);background: rgba(78,205,196,.11);transform: translateY(-1px) scale(1.01);box-shadow: 0 0 0 1px rgba(78,205,196,.26) inset,0 0 22px rgba(78,205,196,.13)}
.skill-card-icon {font-size: 18px;line-height: 1;width: 54px;height: 54px;display: grid;place-items: center;margin-bottom: 2px;position: relative;z-index: 1;border-radius: 14px;background: radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,0) 68%)}
.skill-card-icon img {width: 52px;height: 52px;display: block;object-fit: cover;border-radius: 12px;filter: drop-shadow(0 0 8px rgba(255,255,255,.12));transition: transform .18s,filter .18s}
.skill-card-option:hover .skill-card-icon img {transform: scale(1.08);filter: drop-shadow(0 0 11px rgba(255,255,255,.25))}
.skill-card-option.selected .skill-card-icon img {transform: scale(1.08);filter: drop-shadow(0 0 11px rgba(255,255,255,.25))}
.skill-card-name {position: relative;z-index: 1;font-size: 10px;font-weight: 900;letter-spacing: .6px}
.skill-card-desc {color: #7f879a;max-width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;z-index: 1;font-size: 8px;line-height: 1.2}
.mode-choice.mobile-disabled {opacity: .42;cursor: not-allowed;filter: grayscale(.45)}
.mode-choice.mobile-disabled:hover {background: transparent;transform: none}
.mode-choice.mobile-disabled .mode-arrow {opacity: .35}
.mode-choice.mobile-disabled small {color: #8b8fa3}

/* GENERAL */
#score {font-size: inherit;line-height: inherit;letter-spacing: inherit}
.score {font-size: inherit;line-height: inherit;letter-spacing: inherit}

/* HUD (in-game player status) */
.hud-zone[aria-label="Game status"] {display: flex;flex-direction: row;align-items: center;justify-content: center;gap: 0;width: max-content;min-width: 0;margin: 0 auto}
.hud-zone[aria-label="Game status"] .hud-stat {display: flex;flex-direction: column;align-items: center;justify-content: center;min-width: 86px;height: 36px;padding: 0 12px;text-align: center;box-sizing: border-box}
.hud-zone[aria-label="Game status"] .hud-stat + .hud-stat {border-left: 1px solid rgba(255,255,255,.12)}
.hud-zone[aria-label="Game status"] .hud-label {margin: 0;line-height: 1}
.hud-zone[aria-label="Game status"] .hud-stat > span {margin: 0;line-height: 1}
.hud-zone[aria-label="Game status"] .hud-stat > b {margin-top: 3px;line-height: 1;font-size: 15px;font-variant-numeric: tabular-nums}
.hud-zone[aria-label="Game status"] .hud-stat:nth-child(1) b {color: var(--gold)}
.hud-zone[aria-label="Game status"] .hud-stat:nth-child(2) b {color: var(--accent)}
.hud-zone[aria-label="Game status"] .hud-stat:nth-child(3) b {color: var(--gold)}
.hud-zone[aria-label="Game status"] .hud-extra {display: none}

/* GENERAL */
.reset-best-area {margin-top: 22px;padding-top: 14px}
.reset-best-divider {width: 100%;height: 1px;margin-bottom: 12px;background: rgba(255,255,255,.06)}
.reset-best-btn {display: block;width: max-content;min-width: 110px;margin: 0 auto;padding: 7px 14px;border: 1px solid rgba(255,255,255,.08);border-radius: 8px;background: rgba(255,255,255,.018);color: #737a8c;font-size: 9px;font-weight: 800;letter-spacing: 1px;cursor: pointer;transition: background .15s ease,color .15s ease,border-color .15s ease}
.reset-best-btn:hover {background: rgba(255,92,92,.08);border-color: rgba(255,92,92,.28);color: #ff8b8b}
.reset-best-btn:disabled {cursor: default;color: var(--accent);border-color: rgba(78,205,196,.20);background: rgba(78,205,196,.05)}

/* MENU / OVERLAY SCREENS */
.howto-btn {margin: 14px auto 0;min-width: 150px;padding: 9px 18px;border: 1px solid rgba(255,255,255,.16);border-radius: 8px;background: rgba(255,255,255,.045);color: #d8dbe5;cursor: pointer;font-size: 13px;font-weight: 600;display:flex;align-items:center;justify-content:center;gap:7px}
.howto-btn .btn-icon {width:16px;height:16px;flex:0 0 auto}
.howto-btn:hover {background: rgba(255,255,255,.08);border-color: rgba(255,255,255,.25)}
.howto-head {text-align: center;margin: 0 auto 16px;max-width: 620px}
.howto-head h2 {margin: 4px 0 5px;font-size: 28px;color: #fff}
.howto-head p {margin: 0;color: #9da3b2;font-size: 13px}
.howto-platforms {display: flex;gap: 8px;justify-content: center;margin: 0 auto 12px}
.howto-mode-tabs {display: flex;gap: 8px;justify-content: center;margin: 0 auto 12px}
.howto-platform {border: 1px solid rgba(255,255,255,.12);background: rgba(255,255,255,.035);color: #9da3b2;border-radius: 8px;padding: 9px 22px;cursor: pointer;font-size: 13px;font-weight: 700}
.howto-mode {border: 1px solid rgba(255,255,255,.12);background: rgba(255,255,255,.035);color: #9da3b2;border-radius: 8px;padding: 9px 22px;cursor: pointer;font-size: 13px;font-weight: 700}
.howto-platform.active {color: #fff;border-color: var(--accent);background: rgba(78,205,196,.09)}
.howto-mode.active {color: #fff;border-color: var(--accent);background: rgba(78,205,196,.09)}
.howto-panel {display: none;max-width: 680px;margin: 0 auto}
.howto-panel.active {display: block}
.howto-content {display: none}
.howto-content.active {display: block}
.howto-section {margin: 10px 0;padding: 14px 16px;border: 1px solid rgba(255,255,255,.1);border-radius: 10px;background: rgba(14,16,26,.72)}
.howto-section h3 {margin: 0 0 11px;font-size: 14px;color: #fff}
.howto-section p {margin: 0;color: #b5bac7;font-size: 13px;line-height: 1.65}

/* GENERAL */
.control-list {display: grid;gap: 7px}
.control-list>div {display: grid;grid-template-columns: minmax(105px,150px) 1fr;align-items: center;gap: 10px;color: #b5bac7;font-size: 13px}
.control-list kbd {display: inline-flex;align-items: center;justify-content: center;min-height: 28px;padding: 4px 8px;border: 1px solid rgba(255,255,255,.14);border-radius: 6px;background: rgba(255,255,255,.055);color: #fff;font-family: inherit;font-size: 11px;font-weight: 700;white-space: nowrap}

/* MENU / OVERLAY SCREENS */
.howto-tip {margin: 12px 0 0;padding: 10px 13px;border-left: 2px solid var(--accent);color: #9da3b2;background: rgba(78,205,196,.045);border-radius: 0 7px 7px 0;font-size: 12px;line-height: 1.55}
.howto-tip strong {color: #fff}
/* Game Over screen's random mechanic-reminder tip (see getRunTip() in
   ui.js) reuses .howto-tip's look but left-aligns — .panel/.menu-screen
   both center-align by default, which reads fine for the short one-line
   tips already used elsewhere but gets awkward once a tip wraps to two
   lines, so override it here specifically. */
.run-tip {margin: 18px 0 0;text-align: left}
.menu-actions {display: flex;justify-content: center;gap: 8px;margin-top: 14px}
.menu-actions .howto-btn {margin: 0;min-width: 150px}
.settings-panel {max-width: 560px;margin: 12px auto 0;padding: 18px 18px 15px;border: 1px solid rgba(255,255,255,.10);border-radius: 10px;background: rgba(14,16,26,.72)}
.settings-row {display: flex;align-items: center;justify-content: space-between;gap: 18px}
.settings-copy {display: flex;flex-direction: column;gap: 5px;text-align: left}
.settings-copy strong {font-size: 14px;color: #fff}
.settings-copy span {font-size: 11px;line-height: 1.5;color: #858ba0}
.settings-value {min-width: 58px;text-align: right;color: var(--accent);font-size: 14px;font-weight: 800;font-variant-numeric: tabular-nums}
.settings-range {display: block;width: 100%;margin: 20px 0 7px;accent-color: var(--accent);cursor: pointer}
.settings-scale {display: flex;justify-content: space-between;color: #626b7e;font-size: 9px;font-weight: 800;letter-spacing: .6px}

/* RESULT SCREEN / SCORING */
.score-hud-stat {position: relative !important;overflow: visible !important}
.score-line {position: relative !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;width: max-content !important;min-width: 0 !important;height: 18px !important;overflow: visible !important;white-space: nowrap !important}
.score-line > #score {display: block !important;margin: 0 !important}
.score-popup-layer {position: absolute !important;left: calc(100% + 8px) !important;top: 50% !important;width: 0 !important;height: 0 !important;overflow: visible !important;pointer-events: none !important;z-index: 100 !important}
.score-popup {position: absolute !important;left: 0 !important;top: 0 !important;display: block !important;width: max-content !important;white-space: nowrap !important;color: var(--graze) !important;font-family: inherit !important;font-size: inherit !important;font-weight: inherit !important;line-height: inherit !important;letter-spacing: inherit !important;font-variant-numeric: inherit !important;text-rendering: inherit !important;text-shadow: 0 2px 5px rgba(0,0,0,.85),0 0 8px rgba(123,237,159,.45) !important;transform: translateY(-50%) translateX(-4px) scale(1) !important;transform-origin: left center !important;animation: grazeScoreSidePop .75s ease-out forwards !important}

/* WAVE / DOWN BANNERS */
#waveBanner {--wave-banner-ms: 3000ms;position: absolute;z-index: 20;top: 50%;left: 50%;transform: translate(-50%,-50%);width: min(88vw,760px);padding: 18px 28px;border: 1px solid rgba(255,255,255,.14);border-radius: 16px;background: rgba(5,7,14,.72);backdrop-filter: blur(7px);box-shadow: 0 12px 40px rgba(0,0,0,.35);text-align: center;color: #fff;text-shadow: 0 0 24px rgba(255,255,255,.55),2px 2px 4px #000;opacity: 0;visibility: hidden;pointer-events: none}
#waveBanner.wave-show {visibility: visible;animation: waveBannerFade var(--wave-banner-ms) ease-in-out both}
#waveTitle {font-size: clamp(38px,7vw,60px);line-height: 1;font-weight: 800;letter-spacing: 4px}
#waveTitle.boss-title {color: var(--danger) !important}
#waveSubtitle {font-size: clamp(14px,2vw,18px);color: var(--gold);margin-top: 10px}

/* "No Hit" wave-clear bonus banner — same size/position/fade as
   #waveBanner so it reads as a matching pair. game.js sequences the two:
   this shows first (see CONFIG.noHit.displayMs), then it's replaced by the
   next wave's #waveBanner once this one is fully gone — see
   beginWaveTransition()'s extraDelay in game.js. */
#noHitBanner {--no-hit-ms: 1600ms;position: absolute;z-index: 20;top: 50%;left: 50%;transform: translate(-50%,-50%);width: min(88vw,760px);padding: 18px 28px;border: 1px solid rgba(255,217,61,.34);border-radius: 16px;background: rgba(5,7,14,.72);backdrop-filter: blur(7px);box-shadow: 0 12px 40px rgba(0,0,0,.35);text-align: center;color: #fff;text-shadow: 0 0 24px rgba(255,217,61,.45),2px 2px 4px #000;opacity: 0;visibility: hidden;pointer-events: none}
#noHitBanner.no-hit-show {visibility: visible;animation: waveBannerFade var(--no-hit-ms) ease-in-out both}
#noHitTitle {font-size: clamp(38px,7vw,60px);line-height: 1;font-weight: 800;letter-spacing: 4px;color: var(--gold)}
#noHitSubtitle {font-size: clamp(14px,2vw,18px);color: #fff;margin-top: 10px;font-weight: 700}

/* ============================================================
   RESPONSIVE OVERRIDES + ANIMATIONS
   ------------------------------------------------------------
   Moved here (2026-08-21) from the top of the file, where they
   were silently dead on mobile: CSS cascades by source order for
   equal-specificity rules, and #hud's base rule below used
   !important with the same #hud specificity, so it always won
   over these @media overrides regardless of viewport width —
   these blocks now correctly come AFTER the base rules they're
   meant to override, matching the structure this header comment
   has documented all along. No rule content changed, only order.
   ============================================================ */
/* Responsive: @media (max-width:700px) */

@media(max-width:700px) {
  .chip.best {display: none}
  .rules {grid-template-columns: 1fr}
  .panel {max-height: 92vh}
  .rules li {font-size: 12px}
  .chip {padding: 5px 8px;font-size: 11px}
  .hud-card {padding: 6px 8px;min-width: 94px}
  .skill-card {min-width: 124px}
  .hud-label {font-size: 8px}
  .menu-screen {width: min(560px,94vw);padding: 18px 9px}
  .hero-title-wrap {margin-bottom: 20px}
  .mode-choice {min-height: 62px}
  .mode-choice strong {font-size: 15px}
  .skill-player-block {padding: 10px}
  .skill-card-grid {grid-template-columns: repeat(2,1fr)}
  .player-score {padding: 5px 7px}
  .player-score b {font-size: 11px}
  #downBanner {top: 16%;padding: 10px 16px}
  #noHitBanner {width: min(92vw,620px);padding: 15px 18px}
  #noHitTitle {font-size: clamp(28px,8vw,42px)}
  #noHitSubtitle {font-size: 12px;margin-top: 5px}
  .score-results b {font-size: 16px}
  .team-result b {font-size: 20px}
  .chip.lives {flex-basis: 104px;min-width: 104px;width: 104px}
  .chip.p2-lives {flex-basis: 104px;min-width: 104px;width: 104px}
  .chip.lives b {min-width: 62px}
  .chip.p2-lives b {min-width: 62px}
  .p1-score {min-width: 82px}
  .p2-score {min-width: 82px}
  .hud-zone {gap: 3px}
  .hud-player-title {min-width: 31px;height: 29px;padding: 0 4px;font-size: 6px}
  .hud-zone .lives-card {height: 29px;min-height: 29px;padding: 3px 5px}
  .hud-zone .skill-card {height: 29px;min-height: 29px;width: 82px;padding: 3px 5px}
  .hud-zone .lives-card b {font-size: 9px}
  .hud-zone .hud-label {font-size: 5px}
  .hud-zone .skill-head>b {font-size: 6px}
  .hud-zone .skill-status {font-size: 4px}
  #overlay #resultScreen {width: calc(100vw - 16px);max-width: calc(100vw - 16px)}
  #overlay #resultScreen .panel {width: 100%;padding: 20px 16px}
  .skill-card-option {min-height: 92px}
  .skill-card-icon {width: 48px;height: 48px}
  .skill-card-icon img {width: 46px;height: 46px}
  #hud .hud-player-title {padding: 0 4px;min-width: 54px;height: 34px;font-size: 8px;display: none !important}
  #hud .hud-p2 .hud-row {display: flex !important;flex: 0 0 auto !important;align-items: center !important;gap: 4px !important;width: auto !important}
  #hud .lives-card {flex: 0 0 auto !important;width: 50px !important;min-width: 50px !important;height: 30px !important;padding: 4px 5px !important;border-radius: 7px !important}
  #hud .lives-card b {font-size: 9px !important;letter-spacing: .5px !important}
  #hud .skill-card {flex: 0 0 auto !important;width: 58px !important;min-width: 58px !important;height: 30px !important;min-height: 30px !important;padding: 4px 5px !important;border-radius: 7px !important}
  #hud .skill-head {gap: 3px !important}
  #hud .skill-head .hud-label {font-size: 5px !important}
  #hud .skill-head>b {font-size: 6px !important;max-width: 34px;overflow: hidden;text-overflow: ellipsis}
  #hud .skill-status {font-size: 5px;display: none !important}
  #hud .skill-bar {height: 2px !important;margin-top: 2px !important}
  #hud {padding: 0 !important;top: max(8px,env(safe-area-inset-top)) !important;left: 8px !important;right: 8px !important;width: auto !important;display: grid !important;grid-template-columns: minmax(0,1fr) auto !important;grid-template-areas: "p1 center" !important;align-items: start !important;gap: 8px !important;flex-wrap: nowrap !important}
  #hud .hud-p1 {justify-self: start !important;grid-area: p1 !important;width: auto !important;max-width: none !important;min-width: 0 !important;display: flex !important;flex-direction: row !important;align-items: center !important;gap: 8px !important;overflow: visible !important}
  #hud .hud-p1 .hud-player-title {display: none !important}
  #hud .hud-p1 .p1-score {display: none !important}
  #hud .hud-p1 .hud-row {align-items: center !important;gap: 4px !important;display: flex !important;flex: 0 0 auto !important;width: auto !important;margin: 0 !important}
  #hud .hud-p1 .lives-card {width: auto !important;min-width: 94px !important;height: 44px !important;padding: 6px 10px !important;justify-content: center !important;border-radius: 9px !important}
  #hud .hud-p1 .lives-card .hud-label {display: none !important}
  #hud .hud-p1 .lives-card b {display: flex !important;align-items: center !important;justify-content: center !important;gap: 2px !important;width: auto !important;min-width: 0 !important;overflow: visible !important;text-overflow: clip !important;white-space: nowrap !important;font-size: 21px !important;line-height: 1 !important;letter-spacing: 0 !important}
  #hud .hud-p1 .lives-card b .life-heart {display: inline-flex !important;width: 21px !important;height: 22px !important;align-items: center !important;justify-content: center !important;flex: 0 0 21px !important;line-height: 1 !important;opacity: 1 !important}
  #hud .hud-p1 .skill-card {width: 132px !important;min-width: 132px !important;height: 44px !important;min-height: 44px !important;padding: 6px 9px !important;border-radius: 9px !important}
  #hud .hud-p1 .skill-head .hud-label {font-size: 8px !important;margin-bottom: 2px !important}
  #hud .hud-p1 .skill-head>b {font-size: 11px !important;max-width: none !important}
  #hud .hud-p1 .skill-status {display: flex !important;font-size: 8px !important;margin-top: 3px !important}
  #hud .hud-p1 .skill-bar {height: 4px !important;margin-top: 4px !important}
  #hud .hud-p2 {width: 100% !important;max-width: 112px !important;min-width: 0 !important;align-items: center !important;gap: 4px !important;overflow: hidden !important;justify-self: end !important;display: none !important}
  .reset-best-area {margin-top: 20px;padding-top: 12px}
  .reset-best-btn {font-size: 8px;padding: 6px 10px;min-width: 100px}
  .howto-head h2 {font-size: 24px}
  .howto-platform {padding: 8px 18px}
  .howto-mode {padding: 8px 18px}
  .howto-section {padding: 12px 13px}
  .control-list>div {grid-template-columns: 105px 1fr;font-size: 12px}
  .howto-panel {max-height: 58vh;overflow: auto;padding: 0 2px 4px}
  .menu-actions {gap: 7px}
  .menu-actions .howto-btn {min-width: 0;flex: 1;padding: 8px 10px}
  .settings-panel {padding: 15px 13px}
  .settings-copy span {font-size: 10px}
  .score-line {height: 15px !important}
  .score-popup-layer {left: calc(100% + 5px) !important}
  #waveBanner {width: min(92vw,620px);padding: 15px 18px}
  #waveTitle {font-size: clamp(28px,8vw,42px)}
  #waveSubtitle {font-size: 12px;margin-top: 5px}
}

/* Responsive: @media (max-height:600px) */

@media(max-height:600px) {
  .panel {padding: 14px 18px}
  .rules {margin: 10px 0 12px}
  .rules li {padding: 6px 8px}
  .tagline {margin-bottom: 10px}
}

/* Animation: @keyframes skill-fired */

@keyframes skill-fired {
  0% {transform: scale(1);box-shadow: 0 0 0 transparent}
  35% {transform: scale(1.12);box-shadow: 0 0 18px #4ecdc499}
  100% {transform: scale(1);box-shadow: 0 0 0 transparent}
}

/* Responsive: @media (max-width:430px) */

@media (max-width:430px) {
  .chip {padding: 4px 7px}
  .chip.lives {flex-basis: 96px;min-width: 96px;width: 96px}
  .chip.p2-lives {flex-basis: 96px;min-width: 96px;width: 96px}
  .chip.lives b {min-width: 54px}
  .chip.p2-lives b {min-width: 54px}
  .hud-row {gap: 3px}
  .lives-card {height: 34px}
  .player-score {height: 34px}
  .hud-card {padding: 4px 5px;border-radius: 6px}
  .skill-card {min-width: 116px;min-height: 36px}
  .skill-bar {height: 2px}
  .hud-zone {grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .hud-label {font-size: 5px}
  .lives-card b {font-size: 7px}
  .player-score b {font-size: 7px}
  .skill-head>b {font-size: 6px}
  .skill-status {font-size: 6px;display: none}
  .hud-player-title {letter-spacing: 1.5px;height: 16px;min-width: 28px;font-size: 5px;padding: 0 2px;display: none}
  .hud-zone .skill-card {width: 68px}
  .hud-zone .lives-card b {font-size: 8px}
  #hud .hud-player-title {display: none;min-width: 43px;height: 30px;padding: 0 5px;font-size: 6px}
  #hud .lives-card {min-width: 55px;height: 30px;padding: 4px 6px}
  #hud .lives-card b {font-size: 8px}
  #hud .skill-card {width: 76px;min-width: 76px;height: 30px;min-height: 30px;padding: 4px 5px}
  #hud .skill-head .hud-label {font-size: 5px}
  #hud .skill-head>b {font-size: 6px}
  #hud .skill-status {display: none}
  .hud-zone[aria-label="Game status"] .hud-stat {min-width: 62px;padding: 0 5px}
  .hud-zone[aria-label="Game status"] .hud-stat > b {font-size: 11px}
  #hud {width: calc(100vw - 4px);padding: 0 3px;grid-template-columns: 1fr auto 1fr !important;left: 3px;right: 3px;gap: 7px !important}
  #hud .hud-p1 {gap: 4px !important}
  #hud .hud-p2 {gap: 4px !important}
}

/* Responsive: @media (max-width:520px) */

@media(max-width:520px) {
  .rules li {font-size: 11px}
  .hero-title-wrap {margin-bottom: 18px}
  .hero-title-wrap h1 {font-size: clamp(38px,13vw,60px)}
}

/* Animation: @keyframes skill-panel-in */

@keyframes skill-panel-in {
  from {opacity: 0;transform: translateY(-4px)}
  to {opacity: 1;transform: translateY(0)}
}

/* Responsive: @media (max-height:620px) */

@media(max-height:620px) {
  .menu-screen {padding: 10px 10px}
  .hero-title-wrap {margin-bottom: 12px}
  .hero-title-wrap h1 {font-size: clamp(34px,8vw,52px)}
  .hero-line {margin: 7px auto}
  .mode-choice {min-height: 50px}
  .skill-player-block {margin-top: 7px;padding: 8px}
  .skill-card-option {min-height: 58px}
  .selected-loadout {margin: 7px 0}
  .menu-hint {margin-top: 6px}
}

/* Animation: @keyframes down-pulse */

@keyframes down-pulse {
  from {transform: translateX(-50%) scale(1);box-shadow: 0 10px 32px rgba(0,0,0,.42),0 0 12px rgba(255,92,92,.12)}
  to {transform: translateX(-50%) scale(1.025);box-shadow: 0 10px 32px rgba(0,0,0,.42),0 0 28px rgba(255,92,92,.28)}
}

/* Animation: @keyframes rank-reveal */

@keyframes rank-reveal {
  from {opacity: 0;transform: scale(.72) translateY(8px);filter: blur(5px)}
  to {opacity: 1;transform: scale(1) translateY(0);filter: blur(0)}
}

/* rank-tick: applied (and re-triggered via reflow) on every letter swap
   during the reveal cycle in animateRankReveal(). Gives the rank letter a
   quick "rolling" blur/slide per step; since the JS loop's own delay grows
   with each step, the ticks visually decelerate into the final landing. */
.rank-letter.rank-tick {animation: rank-tick .16s cubic-bezier(.2,.8,.2,1) both}

@keyframes rank-tick {
  0% {transform: translateY(-20px) scaleY(1.2);filter: blur(5px);opacity: .45}
  60% {transform: translateY(2px) scaleY(.95);filter: blur(1px);opacity: 1}
  100% {transform: translateY(0) scaleY(1);filter: blur(0);opacity: 1}
}

/* arrow-bounce: a small continuous up/down bob for the "new best" up-arrows
   (both the per-row .best-arrow and the arrow inside the NEW SCORE banner)
   so they read as an active highlight instead of sitting static. */
@keyframes arrow-bounce {
  0%, 100% {transform: translateY(0)}
  50% {transform: translateY(-4px)}
}

/* Animation: @keyframes rank-pop-scale — final-landing punch, amplitude set
   per-tier via --rank-pop-scale (defaults to a barely-there pop). */
@keyframes rank-pop-scale {
  0% {transform: scale(1)}
  45% {transform: scale(var(--rank-pop-scale, 1.05))}
  100% {transform: scale(1)}
}

/* Animation: @keyframes rank-shake — panel shake on landing, amplitude set
   per-tier via --rank-shake-amp (px, defaults to 0 = no shake). */
@keyframes rank-shake {
  0%, 100% {transform: translateX(0)}
  15% {transform: translateX(calc(var(--rank-shake-amp, 0px) * -1))}
  30% {transform: translateX(var(--rank-shake-amp, 0px))}
  45% {transform: translateX(calc(var(--rank-shake-amp, 0px) * -0.7))}
  60% {transform: translateX(calc(var(--rank-shake-amp, 0px) * 0.7))}
  75% {transform: translateX(calc(var(--rank-shake-amp, 0px) * -0.35))}
  90% {transform: translateX(calc(var(--rank-shake-amp, 0px) * 0.35))}
}

/* Animation: @keyframes rank-shimmer — gold gradient sweep, SSS only. */
@keyframes rank-shimmer {
  from {background-position: 0 center}
  to {background-position: -220% center}
}

/* Animation: @keyframes rank-particle-fly — burst dot flying outward from
   the rank letter, direction/distance set per-particle via --rp-x/--rp-y. */
@keyframes rank-particle-fly {
  0% {opacity: 0;transform: translate(-50%,-50%) scale(.4)}
  15% {opacity: 1}
  100% {opacity: 0;transform: translate(calc(-50% + var(--rp-x,0px)),calc(-50% + var(--rp-y,0px))) scale(1)}
}

/* Animation: @keyframes down-pulse */

@keyframes down-pulse {
  from {transform: translateX(-50%) scale(1);box-shadow: 0 10px 32px rgba(0,0,0,.42),0 0 10px rgba(255,209,102,.08)}
  to {transform: translateX(-50%) scale(1.02);box-shadow: 0 10px 32px rgba(0,0,0,.42),0 0 24px rgba(255,209,102,.18)}
}

/* Responsive: @media (max-width:900px) */

@media(max-width:900px) {
  .hud-card {padding: 6px 7px}
  .hud-label {font-size: 8px}
  .lives-card {height: 36px}
  .player-score {height: 36px}
  .lives-card b {font-size: 10px}
  .player-score b {font-size: 10px}
  .skill-card {min-height: 38px}
  #hud {gap: 4px;top: max(7px,env(safe-area-inset-top));width: calc(100vw - 10px);grid-template-columns: minmax(0,1fr) 220px minmax(0,1fr)}
  .hud-zone {grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}
  .hud-player-title {min-width: 55px;font-size: 7px}
}

/* Responsive: @media (max-width:620px) */

@media(max-width:620px) {
  .p2-title {justify-content: flex-start}
  .hud-p1 {grid-area: p1}
  .hud-p2 {grid-area: p2}
  #hud {top: max(7px,env(safe-area-inset-top));left: 6px;right: 6px;transform: none;grid-template-areas: 'p1 p2' 'center center';width: calc(100vw - 6px);grid-template-columns: minmax(0,1fr) 170px minmax(0,1fr);gap: 3px}
  .hud-zone {grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);gap: 2px}
  .hud-player-title {min-width: 38px;height: 32px;padding: 0 3px;font-size: 6px;letter-spacing: .8px}
  .player-dot {width: 4px;height: 4px}
  .skill-card {height: 32px;min-height: 32px}
  .lives-card {height: 32px;min-height: 32px}
  .player-score {height: 32px;min-height: 32px}
  .lives-card b {font-size: 8px}
  .player-score b {font-size: 8px}
  .hud-label {font-size: 6px;letter-spacing: .7px}
  .skill-head>b {font-size: 7px}
  .skill-status {font-size: 5px}
  .hud-zone[aria-label="Game status"] .hud-stat {min-width: 72px;height: 32px;padding: 0 7px}
  .hud-zone[aria-label="Game status"] .hud-stat > b {font-size: 12px}
}

/* Responsive: @media (max-width:820px) */

@media (max-width:820px) {
  #hud {left: 6px !important;right: 6px !important;grid-template-columns: minmax(0,1fr) minmax(88px,104px) minmax(0,1fr) !important;gap: 5px !important}
  #hud .hud-p1 {gap: 3px !important}
  #hud .hud-p2 {gap: 3px !important}
  #hud .hud-p1 .hud-player-title {min-width: 42px !important;height: 32px;font-size: 7px}
  #hud .hud-p2 .hud-player-title {min-width: 42px !important;height: 32px;font-size: 7px}
  #hud .lives-card {width: 62px !important;min-width: 62px !important;height: 32px;padding: 4px 5px}
  #hud .lives-card b {font-size: 9px}
  #hud .skill-card {width: 78px !important;min-width: 60px !important;height: 32px;min-height: 32px;padding: 4px 5px}
  #hud .skill-head .hud-label {font-size: 5px}
  #hud .skill-head>b {font-size: 6px}
  #hud .skill-status {font-size: 4px}
}

/* Responsive: @media (max-width:600px) */

@media (max-width:600px) {
  #hud .hud-p1 .hud-player-title {min-width: 30px !important;height: 29px;padding: 0 3px;font-size: 5px}
  #hud .hud-p2 .hud-player-title {min-width: 30px !important;height: 29px;padding: 0 3px;font-size: 5px}
  #hud .lives-card {width: 52px !important;min-width: 52px !important;height: 29px;padding: 3px 4px}
  #hud .lives-card b {font-size: 7px;letter-spacing: .5px}
  #hud .skill-card {width: 62px !important;min-width: 54px !important;height: 29px;min-height: 29px;padding: 3px 4px}
  #hud .skill-head .hud-label {font-size: 4px}
  #hud .skill-head>b {font-size: 5px}
  #hud .skill-status {display: none}
  #devPanel {bottom: 7px;width: calc(100vw - 12px);padding: 10px}
  #devPanel .dev-row button {min-width: 0;flex: 1 1 calc(50% - 6px)}
  #devPanel .dev-wave-btn {flex: 0 0 46px !important}
  /* The 5 SPEED buttons wrap 2/2/1 under the generic 50%-basis rule above;
     give #devSpeedRow its own ~20% basis so all 5 stay on one row. */
  #devPanel #devSpeedRow button {flex: 1 1 calc(20% - 5px);min-width: 0;padding: 6px 3px;font-size: 9px}
  #hud {left: 3px !important;right: 3px !important;grid-template-columns: minmax(0,1fr) minmax(72px,82px) minmax(0,1fr) !important;gap: 9px !important}
  #hud .hud-p1 {gap: 6px !important}
  #hud .hud-p2 {gap: 6px !important}
}

/* Responsive: @media (max-width:380px) */

@media (max-width:380px) {
  #hud .hud-p1 .hud-player-title {min-width: 25px !important;font-size: 4px}
  #hud .hud-p2 .hud-player-title {min-width: 25px !important;font-size: 4px}
  #hud .lives-card {width: 43px !important;min-width: 43px !important}
  #hud .lives-card b {font-size: 6px}
  #hud .skill-card {width: 50px !important;min-width: 44px !important}
  #hud .skill-head>b {font-size: 4px}
  #hud {grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr) !important;left: 5px !important;right: 5px !important;gap: 5px !important}
  #hud .hud-p1 {gap: 5px !important}
  #hud .hud-p1 .lives-card {min-width: 82px !important;height: 40px !important;padding: 5px 7px !important}
  #hud .hud-p1 .lives-card b {font-size: 18px !important}
  #hud .hud-p1 .lives-card b .life-heart {width: 18px !important;height: 19px !important;flex-basis: 18px !important}
  #hud .hud-p1 .skill-card {width: 112px !important;min-width: 112px !important;height: 40px !important;padding: 5px 7px !important}
  #hud .hud-p1 .skill-head>b {font-size: 10px !important}
  #hud .hud-p1 .skill-status {font-size: 7px !important}
}

/* Responsive: @media (max-width:500px) */

@media(max-width:500px) {
  #devPanel {right: 6px;bottom: 6px;width: min(340px,calc(100vw - 12px))}
  #devPanel .dev-row {gap: 4px}
  #devPanel button {font-size: 7px;min-height: 28px;padding: 4px}
  #devPanel #devSpeedRow button {padding: 4px 1px;font-size: 8px}
}

/* Responsive: @media (max-width:360px) */

@media (max-width:360px) {
  #hud {grid-template-columns: minmax(0,1fr) 78px minmax(0,1fr) !important;gap: 3px !important}
  #hud .hud-p1 {max-width: 98px !important;gap: 3px !important}
  #hud .hud-p2 {max-width: 98px !important;gap: 3px !important}
  #hud .lives-card {width: 45px !important;min-width: 45px !important}
  #hud .skill-card {width: 50px !important;min-width: 50px !important;padding-left: 4px !important;padding-right: 4px !important}
}

/* Responsive: @media (max-width:700px) */

@media (max-width:700px) {
}

/* Animation: @keyframes grazeScoreSidePop */

@keyframes grazeScoreSidePop {
  0% {opacity: 0;transform: translateY(-50%) translateX(-4px) scale(1)}
  15% {opacity: 1;transform: translateY(-50%) translateX(0) scale(1)}
  68% {opacity: 1;transform: translateY(-50%) translateX(4px) scale(1)}
  100% {opacity: 0;transform: translateY(-50%) translateX(12px) scale(1)}
}

/* Animation: @keyframes skillCdPopupDrop — same fade-and-drift shape as
   grazeScoreSidePop above, just oriented vertically since this popup sits
   centered below the skill chip instead of beside a stat. */
@keyframes skillCdPopupDrop {
  0% {opacity: 0;transform: translate(-50%,-4px)}
  15% {opacity: 1;transform: translate(-50%,0)}
  68% {opacity: 1;transform: translate(-50%,0)}
  100% {opacity: 0;transform: translate(-50%,10px)}
}

/* Animation: @keyframes waveBannerFade */

@keyframes waveBannerFade {
  0% {opacity: 0}
  10% {opacity: 1}
  85% {opacity: 1}
  100% {opacity: 0}
}


/* Responsive: @media (prefers-reduced-motion: reduce) */

@media (prefers-reduced-motion: reduce) {
  #waveBanner.wave-show {animation: none;opacity: 1}
  #noHitBanner.no-hit-show {animation: none;opacity: 1}
}

/* SKIN COLLECTION */

/* === Rarity Frame System ===================================================
   Single visual language for rarity, shared by every place a skin is shown:
   Skin Collection (.skin-preview inside .skin-card), the CS:GO-style Case
   Reel (.skin-reel-item), the Case Result panel (.skin-case-result, incl.
   its .skin-preview icon), and any other Skin Preview. The rarity class
   (`rarity-<name>`) is always taken directly from the skin's own `rarity`
   field in js/data/skins.js by the JS that renders each of these — this
   block only controls how that class looks, never which one gets applied,
   so it can't drift from the actual drop rarity.
   Common (the worst tier) still gets no border at all, so its absence
   reads as "nothing special" and every other tier's color reads clearly
   against it. From Uncommon up, a static colored glow scales with rarity;
   from Epic up, a slow glow pulse and a soft diagonal shine sweep are
   layered on top so the top tiers read as "premium" without being loud.
   The pulse/shine are intentionally left OFF the plain (non-winner)
   case-reel items — dozens of those render at once mid-spin — and only
   run on the Skin Collection preview, the winning reel slot once it
   lands, and the Case Result panel, where at most a couple of elements
   are ever animating at the same time. */
:root {
  --rarity-common: #a7acb8;
  --rarity-uncommon: #72d6a0;
  --rarity-rare: #70d9ff;
  --rarity-epic: #e99cff;
  --rarity-legendary: #ffd95c;
  --rarity-mythic: #ff4d8d; /* red/pink — deliberately far from Epic's purple so the two never get confused at a glance */
}
.rarity-common, .skin-card-rarity.rarity-common {color: var(--rarity-common)}
.rarity-uncommon, .skin-card-rarity.rarity-uncommon {color: var(--rarity-uncommon)}
.rarity-rare, .skin-card-rarity.rarity-rare {color: var(--rarity-rare)}
.rarity-epic, .skin-card-rarity.rarity-epic {color: var(--rarity-epic)}
.rarity-legendary, .skin-card-rarity.rarity-legendary {color: var(--rarity-legendary)}
.rarity-mythic, .skin-card-rarity.rarity-mythic {color: var(--rarity-mythic)}

.skin-preview.rarity-uncommon, .skin-reel-item.rarity-uncommon {border-color: var(--rarity-uncommon); box-shadow: 0 0 8px -2px rgba(114,214,160,.45)}
.skin-preview.rarity-rare, .skin-reel-item.rarity-rare {border-color: var(--rarity-rare); box-shadow: 0 0 10px -1px rgba(112,217,255,.55)}
.skin-preview.rarity-epic, .skin-reel-item.rarity-epic {border-color: var(--rarity-epic); box-shadow: 0 0 12px -1px rgba(233,156,255,.6)}
.skin-preview.rarity-legendary, .skin-reel-item.rarity-legendary {border-color: var(--rarity-legendary); box-shadow: 0 0 14px -1px rgba(255,217,92,.65)}
.skin-preview.rarity-mythic, .skin-reel-item.rarity-mythic {border-color: var(--rarity-mythic); box-shadow: 0 0 16px -1px rgba(255,77,141,.7)}

/* Premium pulse, Epic and up; diagonal shine sweep, Legendary and up only
   — see note above on why the plain reel items are excluded. Duration
   shortens slightly per tier so Mythic visibly breathes faster/brighter
   than Epic without either feeling busy. Epic keeps the glow pulse but NOT
   the shine sweep (user-requested: shine reserved for Legendary/Mythic so
   those two top tiers read as a clear step up from Epic). */
.skin-preview.rarity-epic, .skin-reel-item.winner.rarity-epic,
.skin-preview.rarity-legendary, .skin-reel-item.winner.rarity-legendary,
.skin-preview.rarity-mythic, .skin-reel-item.winner.rarity-mythic {
  animation: rarityGlowPulse 2.6s ease-in-out infinite;
}
.skin-preview.rarity-legendary, .skin-reel-item.winner.rarity-legendary {animation-duration: 2.2s}
.skin-preview.rarity-mythic, .skin-reel-item.winner.rarity-mythic {animation-duration: 1.8s}
.skin-reel-item.winner.rarity-epic {animation: skinReelWinnerPop .35s ease-out .05s both, rarityGlowPulse 2.6s ease-in-out .35s infinite}
.skin-reel-item.winner.rarity-legendary {animation: skinReelWinnerPop .35s ease-out .05s both, rarityGlowPulse 2.2s ease-in-out .35s infinite}
.skin-reel-item.winner.rarity-mythic {animation: skinReelWinnerPop .35s ease-out .05s both, rarityGlowPulse 1.8s ease-in-out .35s infinite}
.skin-preview.rarity-legendary::before, .skin-reel-item.winner.rarity-legendary::before,
.skin-preview.rarity-mythic::before, .skin-reel-item.winner.rarity-mythic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 48%, rgba(255,255,255,.5) 52%, transparent 68%);
  background-size: 220% 220%;
  mix-blend-mode: overlay;
  animation: rarityShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
.skin-preview.rarity-legendary::before, .skin-reel-item.winner.rarity-legendary::before {animation-duration: 2.6s}
.skin-preview.rarity-mythic::before, .skin-reel-item.winner.rarity-mythic::before {
  animation-duration: 2.1s;
  /* Was the `background` SHORTHAND here, which silently resets
     background-size back to its `auto` default and wipes out the 220%
     220% oversize set above — with the gradient sized to fit the box
     exactly once, the background-position sweep in @keyframes rarityShine
     had almost nowhere to travel, so Mythic's shine looked stuck/frozen
     instead of sweeping like Legendary's. `background-image` only swaps
     the gradient itself and leaves background-size intact. */
  background-image: linear-gradient(115deg, transparent 28%, rgba(255,214,240,.55) 46%, rgba(255,255,255,.65) 50%, rgba(214,199,255,.55) 54%, transparent 72%);
}
@keyframes rarityGlowPulse {
  0%, 100% {filter: brightness(1)}
  50% {filter: brightness(1.22)}
}
@keyframes rarityShine {
  0% {background-position: 160% 0}
  100% {background-position: -60% 0}
}
@media (prefers-reduced-motion: reduce) {
  .skin-preview.rarity-epic, .skin-preview.rarity-legendary, .skin-preview.rarity-mythic,
  .skin-reel-item.winner.rarity-epic, .skin-reel-item.winner.rarity-legendary, .skin-reel-item.winner.rarity-mythic {
    animation: none;
  }
  .skin-preview.rarity-legendary::before, .skin-preview.rarity-mythic::before,
  .skin-reel-item.winner.rarity-legendary::before, .skin-reel-item.winner.rarity-mythic::before {
    display: none;
  }
}

.skin-case-result.rarity-common {color: var(--rarity-common)}
.skin-case-result.rarity-uncommon {border-color: var(--rarity-uncommon);color: var(--rarity-uncommon); box-shadow: 0 0 16px -4px rgba(114,214,160,.45)}
.skin-case-result.rarity-rare {border-color: var(--rarity-rare);color: var(--rarity-rare); box-shadow: 0 0 18px -3px rgba(112,217,255,.5)}
.skin-case-result.rarity-epic {border-color: var(--rarity-epic);color: var(--rarity-epic); box-shadow: 0 0 22px -2px rgba(233,156,255,.55); animation: caseResultReveal .6s cubic-bezier(.2,.8,.2,1) forwards, rarityGlowPulse 2.6s ease-in-out infinite}
.skin-case-result.rarity-legendary {border-color: var(--rarity-legendary);color: var(--rarity-legendary); box-shadow: 0 0 26px -2px rgba(255,217,92,.6); animation: caseResultReveal .6s cubic-bezier(.2,.8,.2,1) forwards, rarityGlowPulse 2.2s ease-in-out infinite}
.skin-case-result.rarity-mythic {border-color: var(--rarity-mythic);color: var(--rarity-mythic); box-shadow: 0 0 30px -1px rgba(255,77,141,.65); animation: caseResultReveal .6s cubic-bezier(.2,.8,.2,1) forwards, rarityGlowPulse 1.8s ease-in-out infinite}

.skin-wallet {display:flex;justify-content:center;gap:10px;margin:0 auto 14px;max-width:420px}
.skin-wallet > div {min-width:110px;padding:9px 14px;border:1px solid var(--border);border-radius:9px;background:rgba(14,16,26,.72);display:flex;align-items:center;justify-content:space-between;gap:16px}
.skin-wallet span {font-size:10px;letter-spacing:1.5px;color:#858ba0;font-weight:800}
.skin-wallet b {font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
.skin-case-box {max-width:620px;margin:0 auto 14px;padding:16px;border:1px solid rgba(78,205,196,.18);border-radius:12px;background:linear-gradient(180deg,rgba(78,205,196,.06),rgba(14,16,26,.72))}
.skin-case-title,.skin-section-title {font-size:11px;letter-spacing:2px;font-weight:900;color:#d8dbe5;margin-bottom:9px}
.skin-rarity-odds {display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;color:#858ba0;font-size:10px;margin-bottom:12px}
.skin-open-btn {max-width:300px;margin:auto}
.skin-open-btn:disabled {opacity:.55;cursor:default;filter:none;transform:none}
/* CS:GO-style case-opening reel: a masked viewport with a centered pointer
   line; a long horizontal strip of skin items is dropped in by JS and eased
   to a stop with the winning item centered under the pointer. */
.skin-case-roll {position:relative;height:92px;margin-top:12px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(0,0,0,.35);overflow:hidden}
.skin-case-roll::before {content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,#ffd93d,transparent);transform:translateX(-50%);z-index:3;box-shadow:0 0 10px rgba(255,217,61,.65)}
.skin-case-roll::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,transparent 14%,transparent 86%,rgba(0,0,0,.9) 100%);pointer-events:none;z-index:2}
.skin-reel-track {position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:10px;padding:0 10px}
.skin-reel-item {flex:0 0 auto;width:78px;height:78px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.1);box-sizing:border-box;position:relative;transition:border-color .2s ease,box-shadow .2s ease}
.skin-reel-item.winner {animation:skinReelWinnerPop .35s ease-out .05s both}
@keyframes skinReelWinnerPop {0%{transform:scale(1)}50%{transform:scale(1.22)}100%{transform:scale(1.05)}}

.skin-case-result {position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:none;border-radius:0;animation:backdropFadeIn .3s ease-out forwards;box-sizing:border-box}
.skin-case-result.hidden {display:none !important}
@keyframes backdropFadeIn {from{opacity:0}to{opacity:1}}

.skin-result-popup {position:relative;width:440px;max-width:90vw;max-height:85dvh;background:linear-gradient(180deg,rgba(20,22,34,.98),rgba(10,11,18,.98));border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.7);box-sizing:border-box;animation:popupScale .6s cubic-bezier(.2,.8,.2,1) forwards;overflow-y:auto}
@keyframes popupScale {0%{opacity:0;transform:scale(.92)}30%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}

/* Bottom-sheet variant: confirm/cancel asks and short info alerts (scrap
   exchange confirm, "collection complete") slide up from the bottom edge
   instead of zooming in centered — lighter-weight, thumb-reachable, and
   reads as "quick decision" rather than the big case-reveal moment. */
.skin-case-result.sheet {align-items:flex-end}
.skin-result-popup.sheet-panel {width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:20px 20px max(20px,env(safe-area-inset-bottom));animation:sheetSlideUp .32s cubic-bezier(.2,.8,.2,1) forwards}
.skin-result-popup.sheet-panel::before {content:"";display:block;width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:0 auto 16px}
@keyframes sheetSlideUp {0%{transform:translateY(100%)}100%{transform:translateY(0)}}

.result-header {font-size:14px;letter-spacing:3px;color:#858ba0;font-weight:900;margin-bottom:24px}

.skin-result-card {width:240px;height:240px;border-radius:14px;background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:24px;opacity:0;animation:caseSkinPop .5s cubic-bezier(.34,1.56,.64,1) .1s forwards}
@keyframes caseSkinPop {0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}

.skin-result-card .skin-preview {width:140px;height:140px;border:none;background:none;box-shadow:none;margin-bottom:15px}
.result-rarity-tag {font-size:11px;letter-spacing:2px;font-weight:900;text-transform:uppercase}

.skin-result-popup strong {font-size:28px;color:#fff;margin-bottom:6px;opacity:0;animation:caseTextFade .4s ease-out .25s forwards;text-align:center}
.skin-result-popup .result-status {font-size:16px;letter-spacing:3px;font-weight:900;opacity:0;animation:caseTextFade .4s ease-out .35s forwards}
.skin-result-popup .result-status.new {color:#72d6a0}
.skin-result-popup .result-status.duplicate {color:#858ba0}
.skin-result-popup .result-scrap {font-size:14px;color:#ffb84d;margin-top:8px;font-weight:800;opacity:0;animation:caseTextFade .4s ease-out .45s forwards}

.skin-result-popup .result-actions {display:flex;gap:12px;margin-top:24px;opacity:0;animation:caseTextFade .4s ease-out .55s forwards;width:100%;justify-content:center}
.skin-result-popup .result-actions button {padding:12px 24px;border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;transition:background .15s ease,opacity .15s ease;min-width:120px}
.skin-result-popup .result-actions .equip-btn {background:rgba(78,205,196,.15);border:1px solid rgba(78,205,196,.4);color:#4ecdc4}
.skin-result-popup .result-actions .equip-btn:hover:not(:disabled) {background:rgba(78,205,196,.25)}
.skin-result-popup .result-actions .equip-btn:disabled {opacity:.5;cursor:default}
.skin-result-popup .result-actions .close-btn {background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#d8dbe5}
.skin-result-popup .result-actions .close-btn:hover {background:rgba(255,255,255,.15)}
@keyframes caseTextFade {0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}

.skin-result-card.rarity-common {color:var(--rarity-common)}
.skin-result-card.rarity-uncommon {border-color:var(--rarity-uncommon);color:var(--rarity-uncommon);box-shadow:0 0 16px -4px rgba(114,214,160,.45)}
.skin-result-card.rarity-rare {border-color:var(--rarity-rare);color:var(--rarity-rare);box-shadow:0 0 24px -3px rgba(112,217,255,.5)}
.skin-result-card.rarity-epic {border-color:var(--rarity-epic);color:var(--rarity-epic);box-shadow:0 0 30px -2px rgba(233,156,255,.55);animation:caseSkinPop .5s cubic-bezier(.34,1.56,.64,1) .1s forwards,rarityGlowPulse 2.6s ease-in-out infinite .6s}
.skin-result-card.rarity-legendary {border-color:var(--rarity-legendary);color:var(--rarity-legendary);box-shadow:0 0 35px -2px rgba(255,217,92,.6);animation:caseSkinPop .5s cubic-bezier(.34,1.56,.64,1) .1s forwards,rarityGlowPulse 2.2s ease-in-out infinite .6s}
.skin-result-card.rarity-mythic {border-color:var(--rarity-mythic);color:var(--rarity-mythic);box-shadow:0 0 45px -1px rgba(255,77,141,.65);animation:caseSkinPop .5s cubic-bezier(.34,1.56,.64,1) .1s forwards,rarityGlowPulse 1.8s ease-in-out infinite .6s}

@media (max-width:520px){
  .skin-result-popup {padding:24px 16px}
  .skin-result-card {width:170px;height:170px;margin-bottom:16px}
  .skin-result-card .skin-preview {width:90px;height:90px;margin-bottom:10px}
  .skin-result-popup strong {font-size:22px}
  .skin-result-popup .result-status {font-size:14px}
  .skin-result-popup .result-actions {margin-top:18px}
  .skin-result-popup .result-actions button {min-width:100px;padding:10px 16px;font-size:11px}
}

.skin-exchange {max-width:620px;margin:0 auto 15px;padding:14px 14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(14,16,26,.62);box-sizing:border-box}
.skin-exchange-hint {margin:0 0 12px;font-size:10.5px;line-height:1.5;color:#858ba0;text-align:center}
.skin-exchange-grid {display:grid;grid-template-columns:1fr;gap:10px}
.exchange-card {display:flex;flex-direction:column;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.03);box-sizing:border-box}
.exchange-card-head {display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.exchange-card-title {font-size:11px;font-weight:900;color:#e2e5ef;letter-spacing:.2px;line-height:1.35}
.exchange-card-cost {flex:0 0 auto;display:flex;align-items:baseline;gap:3px;font-size:13px;font-weight:900;color:#70d9ff;padding:3px 8px;border-radius:6px;background:rgba(112,217,255,.1);border:1px solid rgba(112,217,255,.25);white-space:nowrap}
.exchange-card-cost small {font-size:7.5px;letter-spacing:1px;font-weight:800;opacity:.8}
.exchange-card-desc {margin:0 0 10px;font-size:10.5px;line-height:1.5;color:#858ba0;flex:1 1 auto}
.exchange-card-btn {margin-top:auto;padding:9px 10px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.06);color:#fff;font-size:11px;font-weight:800;cursor:pointer;transition:background .15s ease}
.exchange-card-btn:hover:not(:disabled) {background:rgba(255,255,255,.11)}
.exchange-card-btn:disabled {opacity:.4;cursor:not-allowed}
.exchange-confirm-row {display:flex;gap:8px;margin-top:auto}
.exchange-confirm-row .exchange-card-btn {margin-top:0;flex:1 1 0}
.exchange-confirm-row .confirm-btn {border-color:rgba(255,184,77,.5);color:#ffb84d;background:rgba(255,184,77,.15)}
.exchange-confirm-row .confirm-btn:hover:not(:disabled) {background:rgba(255,184,77,.22)}
.exchange-confirm-row .cancel-btn {color:#c9cddb}
@media (max-width:560px){.skin-exchange-grid{grid-template-columns:1fr}}
.skin-goto-collection-btn {max-width:300px;margin:6px auto 0}
#skinCollectionScreen {width:min(760px,94vw)}

/* Collection Progress — headline + overall bar + per-rarity breakdown.
   Purely a display of what renderSkinScreen() in js/ui/ui.js computes from
   SKINS (the full catalog) vs data.ownedSkins (SkinSystem's real saved
   inventory) — no counts are hardcoded here, this block only styles them. */
.skin-collection-progress {max-width:620px;margin:0 auto 16px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(14,16,26,.72);box-sizing:border-box}
.skin-progress-headline {display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:7px 14px;margin-bottom:10px;text-align:center}
.skin-progress-count {font-size:14px;font-weight:900;letter-spacing:1.5px;color:#fff}
.skin-progress-complete {font-size:10px;font-weight:900;letter-spacing:2px;color:var(--gold);padding:3px 9px;border:1px solid rgba(255,217,61,.4);border-radius:20px;background:rgba(255,217,61,.1);white-space:nowrap}
.skin-progress-bar {position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.skin-progress-fill {height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),#7bed9f);box-shadow:0 0 10px rgba(78,205,196,.5);transition:width .4s ease}
.skin-progress-rarities {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;margin-top:12px}
.skin-progress-rarity-row {display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.03);font-size:10px}
.skin-progress-rarity-row.complete {background:rgba(255,255,255,.06)}
.skin-progress-rarity-label {font-weight:900;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skin-progress-rarity-count {flex:0 0 auto;font-weight:800;color:#d8dbe5;font-variant-numeric:tabular-nums}
.skin-progress-rarity-row.complete .skin-progress-rarity-count {color:var(--graze)}
@media (max-width:520px){
  .skin-collection-progress {padding:11px 12px;margin-bottom:12px}
  .skin-progress-count {font-size:12px}
  .skin-progress-rarities {grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px}
  .skin-progress-rarity-row {font-size:9px;padding:4px 6px}
}
/* Below ~400px the 2-column rarity breakdown starts fighting the headline
   for room — drop it and keep only the overall bar (still fully readable),
   per the "don't force extra info into a cramped layout" rule. */
@media (max-width:400px){
  .skin-progress-rarities {display:none}
}

/* Missing/locked skin — silhouette instead of the real visual. The rarity
   border/glow (from .skin-preview.rarity-*, above) and the card-wide
   opacity dim (from the existing .skin-card:disabled rule) still apply —
   a locked card should read as "I'm missing a <rarity> skin" at a glance,
   without previewing the actual shape/color reward before it's unlocked. */
.skin-preview.locked-preview {background:rgba(255,255,255,.03)}
.skin-silhouette {display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07);border:2px dashed rgba(255,255,255,.25);color:#9aa0b2;font-size:15px;font-weight:900;font-style:normal;line-height:1}

#skinCollectionScreen.scrollable-screen {max-height:calc(100vh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(78,205,196,.55) rgba(255,255,255,.06)}
#skinCollectionScreen.scrollable-screen::-webkit-scrollbar {width:8px}
#skinCollectionScreen.scrollable-screen::-webkit-scrollbar-track {background:rgba(255,255,255,.06);border-radius:8px}
#skinCollectionScreen.scrollable-screen::-webkit-scrollbar-thumb {background:rgba(78,205,196,.55);border-radius:8px;border:2px solid rgba(14,16,26,.9)}
#skinCollectionScreen.scrollable-screen::-webkit-scrollbar-thumb:hover {background:rgba(78,205,196,.8)}
#skinCollectionScreen .back-btn {position:sticky;top:0;background:rgba(10,11,18,.92);z-index:2;margin:-4px -4px 8px;padding:8px 4px 4px}

.skin-grid {width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 auto}
.skin-card {min-width:0;padding:14px 8px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(14,16,26,.72);color:#fff;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.skin-card:hover:not(:disabled) {transform:translateY(-2px);background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.23)}
.skin-card:disabled {cursor:default;opacity:.48}
.skin-card.equipped {border-color:var(--accent);box-shadow:0 0 0 1px rgba(78,205,196,.18),0 0 18px rgba(78,205,196,.08)}
.skin-preview {width:64px;height:64px;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;border:2px solid transparent;border-radius:14px;transition:border-color .2s ease,box-shadow .2s ease}
/* The actual skin body/glow/decorations are drawn on a <canvas class="skin-canvas">
   by js/rendering/skinPreview.js, through the exact same drawSkinVisual() Gameplay
   uses (see js/rendering/skinRenderer.js) — CSS no longer draws the shape itself.
   This box just needs to fill whichever wrapper it's placed in (.skin-preview,
   .skin-reel-item, .skin-result-card .skin-preview); those wrappers keep their own
   sizing/border/box-shadow rarity-frame rules below, untouched. */
.skin-canvas {display:block;width:100%;height:100%}
.skin-card strong {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.skin-card small {font-size:10px;color:#858ba0;letter-spacing:1px;font-weight:800}
.skin-card-rarity {font-size:9px;letter-spacing:1px;font-weight:900;color:#858ba0}
#skinRewardToast {position:absolute;z-index:45;top:calc(var(--safe-top) + 72px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 16px;border:1px solid rgba(78,205,196,.35);border-radius:9px;background:rgba(8,10,18,.92);box-shadow:0 8px 30px #0008;pointer-events:none;animation:skinToastIn .22s ease-out}
#skinRewardToast.hidden {display:none}
#skinRewardToast strong {font-size:10px;letter-spacing:1.5px;color:var(--accent)}
#skinRewardToast span {font-size:15px;font-weight:900;color:#fff}
@keyframes skinReveal {from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes skinToastIn {from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:520px){.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.skin-card{padding:10px 5px}.skin-preview{width:52px;height:52px}.skin-card strong{font-size:11px}.skin-card small{font-size:9px}.skin-wallet > div{min-width:100px}.skin-rarity-odds{gap:5px 8px;font-size:9px}.skin-case-roll{height:72px}.skin-reel-item{width:60px;height:60px;border-radius:8px}}

.skin-case-title-row {display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:9px}
.skin-case-title-row .skin-case-title {margin-bottom:0}
.skin-info-btn {width:19px;height:19px;flex:0 0 auto;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#c7cbd8;font-size:11px;font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease,color .15s ease}
.skin-info-btn:hover {background:rgba(78,205,196,.16);border-color:rgba(78,205,196,.55);color:#fff}

.skin-info-overlay {position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,5,10,.72);backdrop-filter:blur(3px);box-sizing:border-box}
.skin-info-overlay.hidden {display:none}
.skin-info-modal {position:relative;width:min(420px,100%);max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box;padding:22px 20px 18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:linear-gradient(180deg,rgba(20,22,34,.98),rgba(10,11,18,.98));box-shadow:0 20px 60px rgba(0,0,0,.55);animation:skinReveal .18s ease-out}
.skin-info-modal h3 {margin:0 0 14px;font-size:15px;letter-spacing:.5px;color:#fff;padding-right:22px}
.skin-info-section {margin-bottom:13px}
.skin-info-section:last-child {margin-bottom:0}
.skin-info-section h4 {margin:0 0 4px;font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:900;text-transform:uppercase}
.skin-info-section p {margin:0;font-size:12px;line-height:1.55;color:#c3c7d4}
.skin-info-scrap-table {display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px !important;font-size:10px !important;font-weight:800;letter-spacing:.5px}
.skin-info-close {position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#9aa0b2;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.skin-info-close:hover {background:rgba(255,255,255,.1);color:#fff}