:root {
  --black: #000000;
  --graphite: #000000;
  --graphite-soft: #2b2b31;
  --off: #f7f6f4;
  --warm: #efebe9;
  --red: #e6193b;
  --red-dark: #ad152e;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: var(--black); color: var(--off); }
body { font-family: "Trebuchet MS", "Avenir Next", sans-serif; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--off); outline-offset: 4px; }
::selection { color: var(--off); background: var(--red); }
[hidden] { display: none !important; }

.game-shell { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: #000; }
.game-shell::after { position: absolute; z-index: 50; inset: 0; pointer-events: none; content: ""; opacity: .09; background-image: url("../assets/brand/poster.png"); background-position: center; background-size: cover; mix-blend-mode: screen; filter: contrast(190%) grayscale(1); }
.canvas-wrap, .game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-canvas { display: block; }
.game-header { position: absolute; z-index: 20; top: 0; left: 0; display: grid; width: 100%; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 32px; border-bottom: 1px solid rgba(247,246,244,.25); background: rgba(11,11,13,.84); backdrop-filter: blur(10px); }
.brand-logo { width: 154px; height: 62px; object-fit: contain; object-position: left center; }
.hud-score { display: flex; align-items: center; min-width: 132px; justify-content: center; gap: 7px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .06em; }
.hud-score img { width: 34px; height: 30px; object-fit: contain; }
.hud-score strong { color: #e6193b; font-size: 28px; font-weight: 900; }
.hud-score span { color: rgba(247,246,244,.6); font-size: 16px; }
.header-actions { display: flex; justify-content: flex-end; gap: 8px; }
.icon-button { min-width: 46px; height: 42px; padding: 0 12px; border: 1px solid rgba(247,246,244,.35); border-radius: 0; background: #000; font-size: 12px; font-weight: 900; letter-spacing: .08em; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.icon-button:hover { color: #000; border-color: #e6193b; background: #e6193b; }
.story-card { position: absolute; z-index: 15; top: 112px; right: 32px; width: min(356px, calc(100vw - 64px)); overflow: hidden; padding: 18px 22px 22px; border: 1px solid rgba(247,246,244,.24); border-top: 4px solid #e6193b; background: rgba(11,11,13,.94); box-shadow: 10px 10px 0 rgba(230,25,59,.1); backdrop-filter: blur(14px); animation: story-in 520ms cubic-bezier(.16,1,.3,1); }
@keyframes story-in { from { opacity: 0; transform: translateY(-14px); } }
.story-context { display: flex; margin: -18px -22px 16px; padding: 9px 14px; align-items: center; justify-content: space-between; color: rgba(247,246,244,.48); background: rgba(247,246,244,.055); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.story-context b { color: #f7f6f4; font-size: 9px; }
.story-index, .intro-kicker { display: block; margin-bottom: 9px; color: #e6193b; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.story-card h2 { max-width: 312px; margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(27px,2.4vw,38px); font-weight: 900; line-height: .96; letter-spacing: -.015em; }
.story-card p { margin: 13px 0 0; color: rgba(247,246,244,.7); font-size: 12px; line-height: 1.55; }
.case-link { display: flex; margin-top: 22px; color: #f7f6f4; font-size: 12px; font-weight: 900; line-height: 1.4; text-decoration: none; flex-direction: column; gap: 4px; }
.case-link span { color: #e6193b; font-size: 9px; letter-spacing: .13em; }
.case-link:hover { color: #e6193b; }
.progress-rail { position: absolute; z-index: 18; right: 32px; bottom: 30px; left: 32px; height: 4px; background: rgba(247,246,244,.22); }
.progress-fill { height: 100%; background: #e6193b; transition: width 120ms linear; }
.progress-rail i { position: absolute; top: -4px; width: 2px; height: 12px; background: rgba(247,246,244,.45); }
.desktop-hint { position: absolute; z-index: 18; bottom: 50px; left: 32px; display: flex; gap: 24px; color: rgba(247,246,244,.58); font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.desktop-hint span { display: flex; align-items: center; gap: 5px; }
kbd { min-width: 25px; padding: 4px 7px; border: 1px solid rgba(247,246,244,.35); color: #f7f6f4; text-align: center; font-family: inherit; }
.touch-controls { position: absolute; z-index: 25; right: 24px; bottom: 46px; left: 24px; display: none; align-items: flex-end; justify-content: space-between; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-controls button { width: 74px; height: 68px; border: 1px solid rgba(247,246,244,.5); border-radius: 0; background: rgba(11,11,13,.78); font-size: 28px; font-weight: 900; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; }
.touch-controls button:active, .touch-controls button.is-pressed { color: #000; background: #e6193b; transform: translateY(2px); }
.touch-controls button * { pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-move { display: flex; gap: 10px; }
.touch-controls .jump-button { width: 86px; height: 86px; border-color: #e6193b; background: rgba(230,25,59,.82); }
.jump-button small { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .1em; }
.intro-screen, .pause-screen, .help-screen, .win-screen { position: absolute; z-index: 40; inset: 0; overflow: hidden; background: #000; }
.intro-screen { display: grid; grid-template-columns: 42% 58%; }
.intro-poster { min-height: 100%; border-right: 1px solid rgba(247,246,244,.28); background-image: url("../assets/brand/poster.png"); background-position: center 38%; background-size: cover; filter: contrast(1.1); animation: poster-reveal 900ms cubic-bezier(.16,1,.3,1); }
@keyframes poster-reveal { from { opacity: 0; transform: scale(1.08); } }
.intro-copy { position: relative; display: flex; max-width: 920px; justify-content: center; padding: 100px 7vw 70px; flex-direction: column; }
.intro-copy::before { position: absolute; top: 12%; right: -4%; width: 52%; height: 16px; content: ""; background: #e6193b; transform: rotate(-7deg); opacity: .85; }
.intro-copy h1 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(62px,8vw,142px); font-weight: 900; line-height: .82; letter-spacing: -.035em; animation: title-up 760ms 120ms both cubic-bezier(.16,1,.3,1); }
@keyframes title-up { from { opacity: 0; transform: translateY(48px); } }
.intro-copy h1 em { color: #e6193b; font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 1.08em; font-weight: 900; letter-spacing: -.1em; }
.intro-copy p { max-width: 560px; margin: 34px 0 30px; color: rgba(247,246,244,.72); font-size: clamp(15px,1.4vw,21px); line-height: 1.55; }
.primary-button { display: inline-flex; width: fit-content; min-height: 58px; align-items: center; justify-content: center; gap: 28px; padding: 0 24px; border: 0; border-radius: 0; color: #f7f6f4; background: #e6193b; box-shadow: 8px 8px 0 #f7f6f4; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-decoration: none; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, color 160ms ease, background 160ms ease; }
.primary-button span { font-size: 24px; }
.primary-button:hover { color: #000; background: #f7f6f4; box-shadow: 4px 4px 0 #e6193b; transform: translate(4px,4px); }
.intro-copy small { margin-top: 24px; color: rgba(247,246,244,.42); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.intro-number { position: absolute; right: 28px; bottom: 24px; color: rgba(247,246,244,.25); font-family: Impact,sans-serif; font-size: 18px; letter-spacing: .18em; }
.pause-screen, .help-screen, .win-screen { display: flex; align-items: center; justify-content: center; padding: 42px; flex-direction: column; background-color: rgba(11,11,13,.94); backdrop-filter: blur(15px); }
.pause-screen span, .win-screen > span { color: #e6193b; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.pause-screen h2, .help-screen h2, .win-screen h2 { max-width: 1000px; margin: 14px 0 34px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(62px,9vw,148px); line-height: .85; text-align: center; }
.text-button { margin-top: 28px; padding: 8px; border: 0; border-bottom: 1px solid rgba(247,246,244,.45); border-radius: 0; color: rgba(247,246,244,.72); background: transparent; font-size: 11px; font-weight: 900; letter-spacing: .12em; cursor: pointer; }
.text-button:hover { color: #e6193b; border-color: #e6193b; }
.help-screen { z-index: 44; }
.help-close { position: absolute; top: 28px; right: 32px; width: 48px; height: 48px; border: 1px solid rgba(247,246,244,.4); border-radius: 0; background: transparent; font-size: 29px; cursor: pointer; }
.help-grid { display: grid; width: min(880px,100%); margin: 0 0 38px; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(247,246,244,.26); border-left: 1px solid rgba(247,246,244,.26); }
.help-grid div { min-height: 150px; padding: 24px; border-right: 1px solid rgba(247,246,244,.26); border-bottom: 1px solid rgba(247,246,244,.26); }
.help-grid b { color: #e6193b; font-family: Impact,sans-serif; font-size: 32px; }
.help-grid p { margin: 20px 0 0; color: rgba(247,246,244,.68); font-size: 13px; line-height: 1.5; }
.win-screen img { width: 92px; height: 78px; margin-bottom: 20px; object-fit: contain; }
.win-screen h2 { max-width: 900px; margin-bottom: 22px; }
.win-screen p { max-width: 650px; margin: 0 0 34px; color: rgba(247,246,244,.7); line-height: 1.6; text-align: center; }
.win-screen { animation: win-screen-in 720ms both cubic-bezier(.16,1,.3,1); }
.win-screen::before { position: absolute; width: min(76vw,760px); aspect-ratio: 1; border: 2px solid rgba(230,25,59,.72); border-radius: 50%; content: ""; background: repeating-conic-gradient(from -8deg,rgba(230,25,59,.42) 0 2deg,transparent 2deg 14deg); opacity: 0; -webkit-mask: radial-gradient(circle,transparent 0 25%,#000 26% 48%,transparent 49%); mask: radial-gradient(circle,transparent 0 25%,#000 26% 48%,transparent 49%); animation: finale-burst 1.25s 80ms both cubic-bezier(.16,1,.3,1); pointer-events: none; }
.win-screen > * { position: relative; z-index: 1; }
@keyframes win-screen-in { from { opacity: 0; background-color: rgba(11,11,13,.3); backdrop-filter: blur(0); } }
@keyframes finale-burst { 0% { opacity: 0; transform: scale(.18) rotate(-16deg); } 35% { opacity: .9; } 100% { opacity: .12; transform: scale(1.18) rotate(7deg); } }
@keyframes prize-arrival { 0% { opacity: 0; transform: translateY(46px) scale(.45) rotate(-7deg); filter: drop-shadow(0 0 0 rgba(230,25,59,0)); } 58% { opacity: 1; transform: translateY(-8px) scale(1.1) rotate(2deg); } 100% { transform: translateY(0) scale(1) rotate(0); filter: drop-shadow(0 16px 32px rgba(230,25,59,.52)); } }
.win-actions { display: flex; align-items: center; gap: 28px; }
.win-actions .text-button { margin: 0; }
.site-link { margin-top: 48px; color: rgba(247,246,244,.5); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-decoration: none; }
.site-link:hover { color: #e6193b; }
.sr-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 900px), (pointer: coarse) {
  .game-header { padding: 12px 16px; }
  .brand-logo { width: 105px; height: 48px; }
  .header-actions { gap: 5px; }
  .icon-button { min-width: 38px; height: 38px; padding: 0 8px; font-size: 9px; }
  .hud-score { min-width: 95px; }
  .hud-score strong { font-size: 22px; }
  .hud-score img { width: 26px; }
  .story-card { top: 78px; right: 14px; width: min(310px,calc(100vw - 28px)); padding: 14px 16px; border-top-width: 3px; box-shadow: 8px 8px 0 rgba(230,25,59,.12); }
  .story-context { margin: -14px -16px 11px; padding: 7px 10px; }
  .story-card h2 { font-size: 28px; }
  .story-card p { display: -webkit-box; margin-top: 10px; overflow: hidden; font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .case-link { margin-top: 10px; font-size: 10px; }
  .desktop-hint { display: none; }
  .touch-controls { display: flex; }
  .progress-rail { right: 18px; bottom: 24px; left: 18px; }
  .intro-screen { grid-template-columns: 1fr; }
  .intro-poster { position: absolute; inset: 0; opacity: .32; border: 0; }
  .intro-copy { z-index: 1; align-items: flex-start; padding: 96px 8vw 68px; background: rgba(11,11,13,.55); }
  .intro-copy h1 { font-size: clamp(56px,17vw,94px); }
  .intro-copy p { max-width: 430px; font-size: 15px; }
  .help-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
  .story-card { max-width: 250px; }
  .story-card h2 { font-size: 23px; }
  .story-index { margin-bottom: 7px; font-size: 8px; }
  .touch-controls button { width: 62px; height: 60px; }
  .touch-controls .jump-button { width: 74px; height: 74px; }
  .help-screen, .win-screen, .pause-screen { padding: 26px 20px; }
  .pause-screen h2, .help-screen h2, .win-screen h2 { font-size: clamp(50px,17vw,82px); }
  .help-grid div { min-height: 115px; padding: 15px; }
  .help-grid p { margin-top: 8px; }
  .win-actions { flex-direction: column; gap: 18px; }
  .win-actions .primary-button { max-width: 310px; padding: 0 15px; font-size: 10px; text-align: center; }
}

@media (max-height: 650px) {
  .story-card { top: 72px; }
  .story-card p { display: none; }
  .intro-copy { padding-top: 72px; }
  .intro-copy p { margin: 18px 0; }
  .intro-copy small { margin-top: 14px; }
  .help-grid { margin-bottom: 20px; }
  .help-grid div { min-height: 105px; padding: 14px; }
}

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

/* Gameplay v2: generated stone world, compact HUD and responsive launch art. */
.game-shell { touch-action: none; overscroll-behavior: none; }
.game-shell::after { opacity: .055; background-image: url("../assets/generated/stone-platform-texture.png"); background-size: 420px; mix-blend-mode: soft-light; filter: contrast(145%) grayscale(1); }
.game-canvas { touch-action: none; }

.hud-score { min-width: 440px; gap: 0; }
.hud-metric { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 0 18px; border-right: 1px solid rgba(247,246,244,.2); }
.hud-metric:last-child { border-right: 0; }
.hud-metric small { color: rgba(247,246,244,.48); font-family: Arial,sans-serif; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.hud-metric > strong { color: #f7f6f4; font-size: 22px; line-height: 1; }
.hud-crowns > strong { color: #e6193b; font-size: 28px; }
.hud-metric strong span { margin-left: 3px; font-size: 12px; }
.hud-crowns img { filter: drop-shadow(0 0 9px rgba(230,25,59,.55)); }
.hud-life .life-icon { color: #e6193b; font-size: 18px; line-height: 1; filter: drop-shadow(0 0 8px rgba(230,25,59,.45)); }
.hud-life > strong { min-width: 24px; color: #e6193b; }

.intro-screen { display: block; background-color: #000; background-image: linear-gradient(180deg,transparent 52%,rgba(0,0,0,.28) 72%,#000 100%),url("../og.png"); background-repeat: no-repeat; background-position: center; background-size: cover; }
.intro-poster { display: none; }
.intro-copy { position: absolute; z-index: 2; inset: 0; display: flex; max-width: none; align-items: center; justify-content: flex-end; padding: 32px 32px clamp(30px,6vh,66px); text-align: center; }
.intro-copy::before { display: none; }
.intro-copy > .intro-kicker, .intro-copy > h1, .intro-copy > p { display: none; }
.intro-copy .primary-button { box-shadow: 8px 8px 0 rgba(247,246,244,.95),0 18px 60px rgba(0,0,0,.6); }
.intro-copy small { margin-top: 22px; padding: 8px 12px; color: rgba(247,246,244,.72); background: rgba(11,11,13,.72); backdrop-filter: blur(8px); }
.intro-number { display: none; }

.help-grid { width: min(1040px,100%); grid-template-columns: repeat(5,1fr); }
.help-grid div { min-height: 142px; }

.win-screen .final-prize-image { width: 154px; height: 204px; margin: -20px 0 -2px; filter: drop-shadow(0 16px 26px rgba(230,25,59,.28)); animation: prize-arrival 920ms 120ms both cubic-bezier(.16,1,.3,1); }
.win-stats { display: flex; margin: -12px 0 30px; border: 1px solid rgba(247,246,244,.24); }
.win-stats span { display: flex; min-width: 130px; padding: 12px 18px; align-items: center; color: rgba(247,246,244,.55); font-size: 8px; font-weight: 900; letter-spacing: .14em; flex-direction: column; gap: 5px; border-right: 1px solid rgba(247,246,244,.18); }
.win-stats span:last-child { border-right: 0; }
.win-stats b { color: #e6193b; font-family: Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size: 25px; letter-spacing: .04em; }

@media (max-width: 900px), (pointer: coarse) {
  .game-header { grid-template-columns: auto 1fr auto; }
  .hud-score { min-width: 0; }
  .hud-metric { min-height: 38px; padding: 0 10px; }
  .hud-metric small { font-size: 6px; }
  .hud-metric > strong { font-size: 17px; }
  .hud-crowns > strong { font-size: 22px; }
  .hud-metric strong span { font-size: 9px; }
  .help-grid { grid-template-columns: repeat(3,1fr); }
  .intro-copy { align-items: center; justify-content: flex-end; padding: 24px 7vw 42px; background: linear-gradient(180deg,transparent 45%,rgba(11,11,13,.22) 70%,rgba(11,11,13,.92) 100%); }
}

@media (max-width: 620px) {
  .game-header { padding: 8px 10px; }
  .brand-logo { width: 68px; height: 40px; }
  .hud-score { gap: 0; }
  .hud-metric { min-height: 34px; padding: 0 6px; gap: 4px; }
  .hud-metric small { display: none; }
  .hud-metric > strong { font-size: 15px; }
  .hud-crowns > strong { font-size: 18px; }
  .hud-crowns img { width: 19px; height: 18px; }
  .hud-metric strong span { font-size: 8px; }
  .icon-button { min-width: 31px; width: 31px; height: 32px; padding: 0 4px; font-size: 7px; }
  .story-card { top: 62px; right: 10px; max-width: 244px; width: calc(100vw - 20px); padding: 12px 14px; }
  .story-context { margin: -12px -14px 9px; }
  .story-card h2 { font-size: 21px; }
  .touch-controls { right: 14px; bottom: 34px; left: 14px; }
  .touch-controls button { border-radius: 8px; background: rgba(11,11,13,.68); backdrop-filter: blur(8px); }
  .progress-rail { right: 14px; bottom: 16px; left: 14px; }
  .intro-screen { background-image: linear-gradient(180deg,rgba(0,0,0,.04) 28%,rgba(0,0,0,.55) 67%,#000 100%),url("../og.png"); background-position: 30% center; }
  .intro-copy { align-items: flex-start; justify-content: flex-end; padding: 72px 22px 38px; text-align: left; }
  .intro-copy > h1 { display: block; max-width: 340px; margin: 0 0 22px; font-size: clamp(54px,16.5vw,76px); text-shadow: 0 8px 26px #000; }
  .intro-copy > h1 br { display: none; }
  .intro-copy small { align-self: stretch; margin-top: 18px; text-align: center; }
  .primary-button { min-height: 54px; box-shadow: 5px 5px 0 #f7f6f4; }
  .help-grid { grid-template-columns: repeat(2,1fr); overflow-y: auto; max-height: 45vh; }
  .win-screen .final-prize-image { width: 105px; height: 138px; margin-top: -8px; }
  .win-stats { width: 100%; margin-bottom: 22px; }
  .win-stats span { min-width: 0; padding: 9px 5px; flex: 1; }
  .win-stats b { font-size: 19px; }
}

@media (max-height: 650px) {
  .intro-screen { background-position: center 42%; }
  .intro-copy { padding-bottom: 22px; }
  .intro-copy small { display: none; }
  .win-screen .final-prize-image { display: none; }
  .win-stats { margin-bottom: 18px; }
}

/* Gameplay v3: client relics, projectiles and expanded world. */
.hud-score { min-width: 650px; }
.hud-relic {
  border: 0;
  border-right: 1px solid rgba(247,246,244,.2);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.hud-relic:hover,
.hud-relic:focus-visible { background: rgba(230,25,59,.14); }
.hud-relic.is-empty { opacity: .5; }
.relic-preview {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  border: 1px solid rgba(247,246,244,.28);
  border-radius: 50%;
  background-color: #171719;
  background-image: url("../assets/generated/client-relics-v2.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 300% 200%;
  box-shadow: 0 0 16px rgba(230,25,59,.2);
}
.hud-relic small {
  display: flex;
  min-width: 70px;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.hud-relic small span { color: rgba(247,246,244,.78); font-size: 8px; }
.hud-relic small em { color: rgba(247,246,244,.38); font-size: 7px; font-style: normal; letter-spacing: .08em; }
.hud-relic > strong { min-width: 20px; color: #e6193b; }
.hud-relic:not(.is-empty) .relic-preview { animation: relic-ready 1.8s ease-in-out infinite; }
@keyframes relic-ready { 50% { border-color: rgba(230,25,59,.72); box-shadow: 0 0 22px rgba(230,25,59,.42); } }

.touch-actions { display: flex; align-items: flex-end; gap: 10px; }
.touch-controls .shoot-button { width: 82px; height: 82px; border-color: #f7f6f4; background: rgba(247,246,244,.16); }
.touch-controls .cycle-button { width: 54px; height: 54px; font-size: 21px; }
.touch-controls .shoot-button small,
.touch-controls .cycle-button small { display: block; margin-top: 2px; font-size: 8px; letter-spacing: .08em; }
.touch-controls .shoot-button.is-pressed { color: #f7f6f4; border-color: #e6193b; background: #e6193b; }

.help-grid { width: min(1180px,100%); grid-template-columns: repeat(6,1fr); }
.win-stats span { min-width: 112px; }

@media (max-width: 1180px) {
  .hud-score { min-width: 0; }
  .hud-metric { padding-inline: 12px; }
  .hud-relic small { min-width: 58px; }
  .desktop-hint { gap: 12px; }
}

@media (max-width: 900px), (pointer: coarse) {
  .hud-relic small { display: none; }
  .relic-preview { width: 31px; height: 31px; flex-basis: 31px; }
  .hud-relic > strong { font-size: 16px; }
  .touch-controls .shoot-button { width: 78px; height: 78px; }
  .help-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 620px) {
  .hud-kills { display: none; }
  .hud-relic { padding-inline: 5px; }
  .relic-preview { width: 28px; height: 28px; flex-basis: 28px; }
  .touch-actions { gap: 6px; }
  .touch-controls .shoot-button { width: 68px; height: 68px; }
  .touch-controls .cycle-button { width: 44px; height: 44px; }
  .touch-controls .jump-button { width: 70px; height: 70px; }
  .win-stats { flex-wrap: wrap; }
  .win-stats span { min-width: 50%; border-bottom: 1px solid rgba(247,246,244,.18); }
}

@media (max-width: 430px) {
  .hud-points { display: none; }
  .brand-logo { width: 62px; }
  .touch-controls { right: 10px; left: 10px; }
  .touch-move { gap: 6px; }
  .touch-controls button { width: 54px; }
}