:root {
  --ink: #06111d;
  --navy: #071b2b;
  --panel: #0b2437;
  --panel-2: #103047;
  --ice: #dceff3;
  --ice-line: #96bbc6;
  --cyan: #63e6ed;
  --orange: #ff6b35;
  --blue: #1769ff;
  --white: #f7fbfc;
  --muted: #8eabba;
  --success: #87efaf;
  --danger: #ff8a77;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--white);
  background:
    radial-gradient(circle at 55% -10%, rgba(35, 118, 155, .25), transparent 35%),
    linear-gradient(135deg, #06111d, #071827 60%, #04101a);
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.app-shell { min-height: 100vh; padding: 22px clamp(18px, 3vw, 48px) 32px; }
.topbar { height: 60px; max-width: 1500px; margin: 0 auto 18px; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; gap: 1px; align-items: center; letter-spacing: .08em; }
.brand-mark { width: 48px; height: 42px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0,0,0,.35)); }
.brand-name { display: block; font-size: .64rem; line-height: 1; color: var(--cyan); font-weight: 400; letter-spacing: .18em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .text-button, .points-button { color: #b8ced8; background: transparent; border: 1px solid #234156; border-radius: 8px; min-height: 38px; cursor: pointer; }
.icon-button { position: relative; width: 38px; font-size: 1.05rem; font-weight: 900; }
.music-button { font-size: 1.2rem; }
.music-button[data-muted="true"] { color: #688491; }
.music-button[data-muted="true"]::after { content: ''; position: absolute; width: 22px; height: 2px; left: 7px; top: 17px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.text-button { padding: 0 14px; }
.points-button { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; color: #ffe07a; background: rgba(255, 207, 84, .07); border-color: #6e5d31; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,207,84,.18); }
.points-button strong { font-variant-numeric: tabular-nums; color: #fff2b5; }
.points-button span:last-child { color: #c7d8de; font-size: .78rem; font-weight: 800; }
.points-button:disabled { opacity: .45; cursor: default; }

.game-layout { max-width: 1500px; margin: auto; display: grid; grid-template-columns: minmax(205px, .7fr) minmax(470px, 1.55fr) minmax(190px, .65fr); gap: clamp(16px, 2.2vw, 32px); align-items: start; }
.mission-panel, .stats-panel { padding-top: 28px; }
.eyebrow, .overline { color: var(--cyan); font-size: .72rem; letter-spacing: .22em; font-weight: 800; }
h1 { margin: 10px 0 10px; font-size: clamp(1.8rem, 3vw, 3rem); line-height: .98; letter-spacing: -.045em; }
.mission-copy { color: #a8c0cc; line-height: 1.55; margin: 0 0 26px; }
.skill-card { display: flex; gap: 13px; align-items: center; padding: 14px; background: linear-gradient(120deg, #102d43, #0a2133); border-left: 3px solid var(--cyan); }
.skill-icon { font-size: 1.75rem; color: var(--cyan); }
.skill-card small, .coaching-card small, .stat-card small, .legend > small { display: block; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 3px; }
.skill-card strong { font-size: 1rem; }
.progress-block { margin: 24px 0; }
.progress-label { display: flex; justify-content: space-between; color: #a9c0cb; font-size: .76rem; margin-bottom: 8px; }
.progress-label strong { color: var(--white); }
.progress-track { height: 5px; background: #163246; overflow: hidden; border-radius: 5px; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--cyan); transition: width .35s ease; box-shadow: 0 0 10px var(--cyan); }
.coaching-card { padding: 16px; border: 1px solid #193a4f; background: rgba(7, 27, 43, .72); }
.coaching-card p { color: #c1d3da; font-size: .86rem; line-height: 1.5; margin: 7px 0 0; }

.arena-card { border: 1px solid #1d4258; background: var(--navy); box-shadow: 0 28px 70px rgba(0, 0, 0, .42); }
.hud { height: 70px; padding: 12px 22px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; background: #081827; border-bottom: 1px solid #1d4258; }
.hud > div { display: flex; flex-direction: column; }
.hud > div:nth-child(2) { align-items: center; }
.hud > div:nth-child(3) { align-items: end; }
.hud small { font-size: .63rem; letter-spacing: .16em; color: var(--muted); font-weight: 800; }
.hud strong { font-variant-numeric: tabular-nums; font-size: 1.3rem; letter-spacing: .08em; }
.hud .streak strong { color: var(--orange); }
.canvas-wrap { position: relative; overflow: hidden; aspect-ratio: 9 / 8.6; background: var(--ice); }
#rink { display: block; width: 100%; height: 100%; }
.power-up-indicator { --power-progress: 360deg; position: absolute; z-index: 1; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; padding: 3px; border-radius: 50%; background: conic-gradient(var(--cyan) var(--power-progress), rgba(7,27,43,.48) 0); box-shadow: 0 0 0 1px rgba(99,230,237,.45), 0 4px 12px rgba(0,0,0,.25); pointer-events: none; transition: opacity .75s linear; }
.power-up-indicator[hidden] { display: none; }
.power-up-indicator::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: rgba(5,24,37,.92); }
.power-up-indicator img { position: relative; z-index: 1; width: 20px; height: 20px; object-fit: contain; }
.start-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; text-align: center; padding: 20px; color: var(--white); background: radial-gradient(circle at 50% 45%, rgba(8, 40, 59, .72), rgba(4, 15, 25, .94)); backdrop-filter: blur(5px); transition: opacity .3s ease, visibility .3s ease; }
.start-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.cheese-hero-logo { width: 86px; height: 68px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.4)); margin-bottom: 10px; }
.score-logo { width: 74px; height: 74px; border: 4px solid var(--cyan); border-radius: 50%; display: grid; place-items: center; transform: rotate(-8deg); box-shadow: 0 0 0 7px rgba(99, 230, 237, .1), 0 12px 30px rgba(0,0,0,.35); margin-bottom: 22px; }
.score-logo span { font-size: 1.3rem; font-weight: 950; font-style: italic; }
.start-overlay h2 { font-size: clamp(1.85rem, 4vw, 2.85rem); line-height: .95; margin: 7px 0 9px; letter-spacing: -.055em; }
.start-overlay h2 em { color: var(--cyan); font-style: normal; }
.start-overlay > p:not(.overline) { max-width: 420px; color: #b7ccd5; margin: 0 0 14px; line-height: 1.4; }
.start-overlay > small { color: #829fad; margin-top: 13px; }
.primary-button { border: 0; border-radius: 4px; padding: 14px 20px; min-width: 190px; color: #03131e; background: var(--cyan); font-weight: 900; cursor: pointer; box-shadow: 0 8px 25px rgba(99,230,237,.22); }
.primary-button span { margin-left: 18px; }
.level-grid { width: min(540px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.level-card { position: relative; min-height: 82px; padding: 11px 12px; color: var(--white); text-align: left; border: 1px solid #28516a; border-radius: 7px; background: linear-gradient(135deg, #103047, #091d2d); cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.level-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--cyan); background: linear-gradient(135deg, #16405b, #0c2638); }
.level-card:disabled { cursor: default; opacity: .48; filter: saturate(.45); }
.level-card .level-number { display: block; color: var(--cyan); font-size: .62rem; font-weight: 900; letter-spacing: .16em; margin-bottom: 3px; }
.level-card strong { display: block; font-size: .95rem; line-height: 1.15; }
.level-card small { display: block; color: #9fb8c4; font-size: .68rem; line-height: 1.25; margin-top: 4px; }
.level-card .level-state { position: absolute; right: 9px; top: 8px; color: #ffcf54; font-size: .75rem; }
.overlay-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 8px; }
.secondary-button { min-width: 150px; padding: 12px 16px; color: #c9dce4; border: 1px solid #31566c; border-radius: 4px; background: #0b2437; font-weight: 800; cursor: pointer; }
.unlock-banner { margin: 0 0 10px; padding: 7px 12px; color: #071b2b; background: #ffcf54; border-radius: 4px; font-size: .76rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.finish-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.finish-confetti i { position: absolute; left: var(--x); top: -18px; width: 8px; height: 14px; border-radius: 2px; background: var(--colour); animation: finish-confetti-fall 2.35s cubic-bezier(.22,.72,.44,1) var(--delay) both; }
@keyframes finish-confetti-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(620px) rotate(var(--spin)); opacity: .15; } }
.feedback-zone { position: relative; z-index: 12; height: 0; pointer-events: none; }
.feedback { position: absolute; top: 8px; left: 50%; width: max-content; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 9px; box-shadow: 0 8px 22px rgba(0,0,0,.42); font-size: .76rem; font-weight: 900; letter-spacing: .045em; line-height: 1.25; text-align: center; text-transform: uppercase; opacity: 0; visibility: hidden; transform: translate(-50%, 5px) scale(.98); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.feedback.show { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.feedback.good { background: rgba(7,66,48,.96); color: var(--success); border: 1px solid #32a876; }
.feedback.bad { background: rgba(86,33,24,.97); color: #ffd2ca; border: 1px solid #d05a42; }
.controls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: #1a3d52; }
.controls button { min-height: 68px; border: 0; color: #bfd1d8; background: #0a2133; display: flex; justify-content: center; align-items: center; gap: 10px; cursor: pointer; transition: background .15s, color .15s; }
.controls button { grid-column: span 2; }
.controls button.strategy { grid-column: span 3; min-height: 58px; }
.controls button:hover { color: white; background: #12344a; }
.controls button:active { transform: translateY(1px); }
.controls button:disabled { opacity: .46; cursor: default; }
.controls .shoot { background: #0e2a3e; }
.controls .rush { background: #0b3040; }
.controls .regroup { background: #13283a; }
kbd { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #48687b; border-bottom-width: 3px; border-radius: 5px; color: var(--cyan); background: #061724; font-weight: 900; }
.controls .shoot kbd { width: auto; min-width: 52px; padding: 0 6px; font-size: .68rem; letter-spacing: .04em; }
.controls span { font-size: .8rem; font-weight: 700; }

.stats-panel { display: grid; gap: 14px; }
.stat-card { border: 1px solid #193b50; background: rgba(9, 31, 47, .78); padding: 17px; }
.stat-card.featured { position: relative; overflow: hidden; }
.stat-card.featured::after { content: ""; position: absolute; width: 70px; height: 70px; right: -30px; top: -28px; border: 12px solid rgba(99, 230, 237, .08); border-radius: 50%; }
.stat-card.featured > strong { display: block; color: var(--cyan); font-size: 2rem; letter-spacing: -.03em; }
.stat-card.featured > span { color: var(--muted); font-size: .7rem; }
.stat-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #17374a; color: #9eb6c1; font-size: .82rem; }
.stat-row:last-child { border: 0; }
.stat-row strong { color: var(--white); }
.legend { display: grid; gap: 9px; padding: 12px 4px; color: #9fb6c1; font-size: .78rem; }
.legend span { display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.you { background: #43a5ff; }
.dot.team { background: var(--blue); }
.dot.rival { background: #e7f4f7; border: 2px solid #d33232; }

dialog { width: min(520px, calc(100% - 32px)); color: var(--white); background: #0a2133; border: 1px solid #28516a; box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 30px; }
dialog::backdrop { background: rgba(1, 8, 14, .75); backdrop-filter: blur(4px); }
dialog h2 { font-size: 2rem; margin: 8px 0 20px; }
dialog ol { padding-left: 23px; color: #b8ccd5; line-height: 1.55; }
dialog li { margin: 12px 0; padding-left: 5px; }
dialog li strong { color: var(--white); }
.dialog-close { position: absolute; right: 12px; top: 10px; background: transparent; border: 0; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.tip { padding: 14px; background: #102e42; border-left: 3px solid var(--cyan); color: #c7d8de; font-size: .88rem; line-height: 1.5; }
#howDialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.how-version { display: flex; justify-content: space-between; gap: 14px; margin: 24px 0 0; padding-top: 14px; border-top: 1px solid #28516a; color: #91aebb; font-size: .67rem; font-weight: 850; letter-spacing: .14em; }
.how-version span { color: var(--cyan); white-space: nowrap; }

.locker-dialog { width: min(780px, calc(100% - 24px)); max-height: min(820px, calc(100vh - 24px)); overflow: auto; padding: 24px; }
.locker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-right: 24px; }
.locker-heading h2 { margin-bottom: 8px; }
.locker-balance { min-width: 132px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; padding: 10px 13px; color: #ffcf54; border: 1px solid #6e5d31; border-radius: 7px; background: #152b32; }
.locker-balance strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.locker-balance small { grid-column: 1 / -1; margin-top: 2px; color: #bfae72; font-size: .58rem; letter-spacing: .12em; font-weight: 900; }
.locker-note { margin: 0 0 17px; color: #b8ccd5; line-height: 1.45; }
.player-showcase-button { width: 100%; min-height: 64px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; margin: 4px 0 17px; padding: 10px 14px; color: #071b2b; text-align: left; border: 0; border-radius: 7px; background: linear-gradient(105deg, #63e6ed, #9af4d1); box-shadow: 0 9px 24px rgba(99,230,237,.16); cursor: pointer; touch-action: manipulation; }
.player-showcase-button > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; color: #fff3b0; background: #0b3142; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 1.1rem; }
.player-showcase-button > span:nth-child(2) { display: grid; gap: 2px; }
.player-showcase-button strong { font-size: .9rem; }
.player-showcase-button small { color: #245363; font-size: .78rem; font-weight: 750; }
.player-showcase-button > span:last-child { font-size: 1.25rem; font-weight: 900; }
.locker-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 9px; scrollbar-width: thin; }
.locker-tab { flex: 0 0 auto; padding: 9px 11px; color: #abc2cc; background: #081a29; border: 1px solid #24475c; border-radius: 6px; cursor: pointer; font-size: .78rem; font-weight: 800; }
.locker-tab.active { color: #061724; background: var(--cyan); border-color: var(--cyan); }
.locker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; min-height: 174px; }
.gear-card { position: relative; min-height: 154px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 7px 8px 10px; color: #edf8fa; text-align: left; border: 1px solid #25485c; border-radius: 7px; background: linear-gradient(145deg, #123349, #091d2d); cursor: pointer; overflow: hidden; }
.gear-card:hover { border-color: #63e6ed; }
.gear-card.equipped { border-color: #ffcf54; box-shadow: inset 0 0 0 1px rgba(255,207,84,.28); }
.gear-card.locked { filter: saturate(.72); }
.gear-card.level-locked { justify-content: center; align-items: center; text-align: center; cursor: not-allowed; border-color: #324b5a; background: linear-gradient(145deg, #102736, #081722); filter: none; }
.gear-lock-preview { width: 100%; min-height: 86px; display: grid; place-items: center; margin-bottom: 2px; border: 1px solid #294554; border-radius: 5px; background: radial-gradient(circle at 50% 35%, #254557, #0b1c29 72%); }
.gear-lock-preview span { font-size: 2.15rem; filter: grayscale(1); opacity: .88; }
.gear-card.level-locked strong { color: #c5d4da; }
.gear-card.level-locked small { color: #819ba7; }
.gear-card strong { position: relative; z-index: 1; padding: 0 3px; font-size: .83rem; }
.gear-card small { position: relative; z-index: 1; padding: 0 3px; color: #9fb7c2; font-size: .68rem; }
.gear-preview { display: block; width: 100%; height: 96px; margin-bottom: 3px; border-radius: 4px; background: #a7cdd5; object-fit: cover; image-rendering: auto; }
.powerup-card { justify-content: flex-end; }
.powerup-card.active { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(99,230,237,.32), 0 0 18px rgba(99,230,237,.1); }
.powerup-preview { padding: 10px; object-fit: contain; background: radial-gradient(circle at 50% 42%, #1c5269, #071b2b 72%); }
.powerup-card .powerup-effect { color: #c9e8ee; }
.locker-status { min-height: 22px; margin: 12px 0 0; color: #ffdf79; font-size: .82rem; font-weight: 800; }
.brand-note { margin: 2px 0 0; color: #6f8d9b; font-size: .68rem; line-height: 1.4; }

.player-showcase[hidden] { display: none; }
.player-showcase { text-align: center; }
.player-showcase .overline { margin: 5px 0 0; }
.player-showcase h2 { margin: 6px 0 14px; font-size: 1.85rem; }
.showcase-back { min-height: 44px; display: flex; align-items: center; gap: 8px; margin: -6px 0 2px; padding: 0 8px; color: #b9d0d9; border: 0; background: transparent; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.player-render-frame { width: min(100%, 520px); margin: auto; padding: 8px; border: 1px solid #376174; border-radius: 10px; background: linear-gradient(145deg, #173d51, #071a28); box-shadow: 0 18px 42px rgba(0,0,0,.32); }
#playerRender { width: 100%; height: auto; display: block; border-radius: 6px; background: #dceff3; }
.equipped-summary { width: min(100%, 520px); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 13px auto; }
.equipped-summary span { padding: 6px 9px; color: #bdd2da; border: 1px solid #294b5e; border-radius: 999px; background: #0d293b; font-size: .76rem; font-weight: 750; }
.equipped-summary strong { color: #fff; }
.showcase-actions { display: flex; justify-content: center; gap: 9px; }
.share-player-button, .download-player-button { min-height: 48px; padding: 0 18px; border-radius: 6px; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.share-player-button { color: #061724; border: 0; background: #ffcf54; box-shadow: 0 8px 22px rgba(255,207,84,.18); }
.download-player-button { color: #d9edf2; border: 1px solid #3a6074; background: #102d40; }
.share-player-button:disabled, .download-player-button:disabled { opacity: .55; cursor: wait; }
.share-status { min-height: 21px; margin: 10px 0 0; color: #91aeb9; font-size: .78rem; line-height: 1.4; }

.bonus-banner[hidden], .bonus-controls[hidden], .controls[hidden] { display: none; }
.bonus-banner { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 8px; overflow: hidden; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 42%, rgba(255,224,98,.98) 0 8%, rgba(255,121,47,.96) 28%, rgba(13,55,84,.98) 68%, #06111d 100%); opacity: 0; transform: scale(1.08); transition: opacity .28s ease, transform .55s cubic-bezier(.2,.9,.22,1); }
.bonus-banner.show { opacity: 1; transform: scale(1); }
.bonus-banner::before, .bonus-banner::after { content: ''; position: absolute; inset: -28%; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); animation: bonus-pulse 1.2s ease-out infinite; }
.bonus-banner::after { inset: -4%; animation-delay: .28s; }
.bonus-banner img { position: relative; z-index: 2; width: 100px; height: 80px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.45)); animation: bonus-logo-pop .7s cubic-bezier(.18,.9,.22,1.25) both; }
.bonus-banner span, .bonus-banner strong, .bonus-banner small { position: relative; z-index: 2; text-shadow: 0 4px 18px rgba(1,10,18,.65); }
.bonus-banner span { color: #fff5b2; font-size: clamp(.85rem, 2vw, 1.15rem); font-weight: 950; letter-spacing: .2em; }
.bonus-banner strong { max-width: 620px; color: #fff; font-size: clamp(2.25rem, 7vw, 4.8rem); line-height: .88; letter-spacing: -.055em; font-style: italic; }
.bonus-banner small { color: #dffcff; font-size: clamp(.85rem, 2vw, 1.05rem); font-weight: 850; letter-spacing: .06em; }
.bonus-rays { position: absolute; inset: -45%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0 7deg, transparent 7deg 18deg); animation: bonus-rays-spin 10s linear infinite; }
@keyframes bonus-pulse { from { transform: scale(.36); opacity: .8; } to { transform: scale(1); opacity: 0; } }
@keyframes bonus-logo-pop { 0% { transform: scale(.35) rotate(-18deg); opacity: 0; } 70% { transform: scale(1.12) rotate(5deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes bonus-rays-spin { to { transform: rotate(360deg); } }

.start-overlay > p.bonus-heading { max-width: none; margin: 20px 0 9px; color: #ffe274; font-size: .68rem; font-weight: 950; letter-spacing: .19em; line-height: 1.25; }
.start-overlay > .level-grid + p.bonus-heading { margin-top: 48px; }
.bonus-test-badge { margin: 0 0 9px; padding: 7px 11px; color: #071b2b; border-radius: 5px; background: linear-gradient(90deg, #ffcf54, #ffe88e); box-shadow: 0 7px 18px rgba(255,207,84,.18); font-size: .64rem; font-weight: 950; letter-spacing: .1em; }
.bonus-grid { width: min(540px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-bottom: 8px; }
.bonus-card { position: relative; min-height: 72px; padding: 9px 10px; color: #fff; text-align: left; border: 1px solid #8f7430; border-radius: 7px; background: radial-gradient(circle at 90% 10%, rgba(255,211,75,.2), transparent 35%), linear-gradient(135deg, #18384a, #2b223a); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.bonus-card:hover:not(:disabled) { transform: translateY(-2px); border-color: #ffe274; box-shadow: 0 8px 22px rgba(255,197,54,.13); }
.bonus-card:disabled { opacity: .42; filter: saturate(.4); cursor: default; }
.bonus-card span { display: block; color: #ffe274; font-size: .57rem; font-weight: 950; letter-spacing: .12em; }
.bonus-card strong { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.1; }
.bonus-card small { display: block; margin-top: 3px; color: #a9c4cf; font-size: .6rem; }

.bonus-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #24485d; }
.bonus-controls.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bonus-controls.single { grid-template-columns: 1fr; }
.bonus-controls button { min-height: 62px; padding: 8px 6px; border: 0; color: #d6e8ee; background: linear-gradient(180deg, #103149, #081f31); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 850; cursor: pointer; touch-action: manipulation; }
.bonus-controls button:hover { color: #fff; background: linear-gradient(180deg, #174761, #0b2b40); }
.bonus-controls button:active { transform: translateY(1px); }
.bonus-controls button:disabled { opacity: .46; cursor: default; }
.bonus-controls kbd { color: #ffe274; border-color: #6d744e; }
.bonus-controls .faceoff-trigger { min-height: 76px; color: #fff4b3; font-size: 1rem; letter-spacing: .05em; background: linear-gradient(100deg, #173f57, #51331d 50%, #173f57); }
.bonus-controls .faceoff-trigger kbd { min-width: 68px; width: auto; padding: 0 9px; }
.bonus-controls.ice-direct { grid-template-columns: 1fr; }
.bonus-controls.ice-direct .ice-instruction { position: relative; min-height: 66px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 18px; color: #e8fbff; overflow: hidden; cursor: default; pointer-events: none; background: radial-gradient(circle at 52% -90%, rgba(99,230,237,.2), transparent 55%), linear-gradient(100deg, #071b2b, #10374d 50%, #071b2b); border-top: 1px solid #2b6077; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.bonus-controls.ice-direct .ice-instruction::after { content: ''; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(120deg, transparent 0 18px, rgba(255,255,255,.08) 18px 19px); }
.instruction-mark, .instruction-copy, .instruction-speed { position: relative; z-index: 1; }
.instruction-mark { width: 36px; height: 36px; display: grid; place-items: center; color: #071b2b; border-radius: 50%; background: #ffcf54; box-shadow: 0 0 0 4px rgba(255,207,84,.1), 0 5px 14px rgba(0,0,0,.28); font-size: .9rem; }
.instruction-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.instruction-copy small { color: #7ec4d4; font-size: .6rem; font-weight: 900; letter-spacing: .17em; }
.instruction-copy strong { color: #f7fcfd; font-size: .86rem; line-height: 1.2; letter-spacing: .015em; }
.instruction-speed { padding: 6px 8px; color: #ffdf79; border: 1px solid rgba(255,207,84,.38); border-radius: 5px; background: rgba(255,207,84,.07); font-size: .61rem; font-weight: 950; letter-spacing: .11em; }
#rink.bonus-interactive { cursor: crosshair; touch-action: none; }
#rink.bonus-interactive.deflection { cursor: grab; }
#rink.bonus-interactive.deflection:active { cursor: grabbing; }

@media (max-width: 1000px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 210px; }
  .mission-panel { grid-column: 1 / -1; padding-top: 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; align-items: end; }
  .mission-panel .eyebrow, .mission-panel h1 { grid-column: 1; }
  .mission-panel h1 { margin-top: -10px; }
  .mission-copy { grid-column: 1; margin-bottom: 0; }
  .skill-card { grid-column: 2; grid-row: 1 / 4; align-self: stretch; }
  .progress-block { grid-column: 3; grid-row: 1 / 3; margin: 0; }
  .coaching-card { display: none; }
}

@media (max-width: 700px) {
  .app-shell { padding: 10px 10px 24px; }
  .topbar { margin-bottom: 8px; }
  .brand-name { font-size: .64rem; }
  .points-button span:last-child { display: none; }
  .points-button { padding: 0 8px; }
  .game-layout { display: flex; flex-direction: column; gap: 12px; }
  .mission-panel { width: 100%; display: grid; grid-template-columns: 1fr auto; padding: 4px 5px 0; }
  .mission-panel .eyebrow { grid-column: 1; }
  .mission-panel h1 { grid-column: 1; font-size: 1.7rem; margin: -4px 0 0; }
  .mission-copy, .skill-card, .coaching-card { display: none; }
  .progress-block { grid-column: 2; grid-row: 1 / 3; width: 100px; align-self: center; }
  .arena-card { width: 100%; }
  .canvas-wrap { aspect-ratio: 9 / 10.2; }
  .power-up-indicator { width: 26px; height: 26px; top: 6px; right: 6px; padding: 3px; }
  .power-up-indicator img { width: 17px; height: 17px; }
  .hud { height: 58px; padding: 8px 14px; }
  .hud strong { font-size: 1.05rem; }
  .controls button { min-height: 58px; flex-direction: column; gap: 3px; }
  .controls button.strategy { min-height: 52px; }
  .controls span { font-size: .72rem; }
  .stats-panel { width: 100%; padding: 0; grid-template-columns: 1fr 1.5fr; }
  .legend { display: none; }
  .stat-card { padding: 12px 14px; }
  .stat-card.featured > strong { font-size: 1.45rem; }
  .stat-row { padding: 4px 0; }
  .start-overlay h2 { font-size: 2.2rem; }
  .cheese-hero-logo { width: 66px; height: 52px; margin-bottom: 7px; }
  .score-logo { width: 58px; height: 58px; margin-bottom: 14px; }
  .start-overlay { padding: 12px; justify-content: flex-start; }
  .level-grid { gap: 6px; }
  .start-overlay > .level-grid + p.bonus-heading { margin-top: 52px; }
  .level-card { min-height: 74px; padding: 9px; }
  .level-card strong { font-size: .86rem; }
  .bonus-banner { padding: 15px; }
  .bonus-banner img { width: 78px; height: 61px; }
  .bonus-controls.ice-direct .ice-instruction { grid-template-columns: 32px minmax(0,1fr); gap: 9px; min-height: 62px; padding: 8px 12px; }
  .instruction-mark { width: 31px; height: 31px; font-size: .76rem; }
  .instruction-speed { display: none; }
  .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bonus-card { min-height: 66px; }
  .bonus-controls button { min-height: 54px; flex-direction: column; gap: 3px; font-size: .7rem; }
  .bonus-controls.six button { min-height: 48px; }
  .bonus-controls .faceoff-trigger { min-height: 64px; flex-direction: row; font-size: .86rem; }
  .locker-dialog { padding: 20px 14px; }
  .locker-heading { gap: 8px; padding-right: 18px; }
  .locker-heading h2 { font-size: 1.55rem; }
  .locker-balance { min-width: 112px; padding: 8px 9px; }
  .locker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-showcase h2 { font-size: 1.55rem; }
  .player-render-frame { width: min(100%, 430px); padding: 5px; }
  .showcase-actions { flex-direction: column; }
  .share-player-button, .download-player-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}