:root {
    --bg: #03070d;
    --panel: rgba(6, 14, 23, .86);
    --line: rgba(133, 222, 255, .35);
    --cyan: #8deaff;
    --blue: #39b8ff;
    --red: #ff4b4b;
    --orange: #ffad42;
    --green: #77f0c1;
    --text: #edfaff;
    --muted: #8aa4b2;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }

.app-shell { position: relative; width: 100%; height: 100%; min-height: 520px; isolation: isolate; background: #02060c; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.scanlines, .vignette { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.scanlines { opacity: .11; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.11) 4px); mix-blend-mode: overlay; }
.vignette { background: radial-gradient(circle at 50% 44%, transparent 35%, rgba(0,0,0,.38) 78%, rgba(0,0,0,.82) 100%); }

.topbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(16px + var(--safe-top)) clamp(18px, 3vw, 44px) 16px; pointer-events: none; transition: opacity .3s ease; }
.brand-block { display: grid; gap: 2px; letter-spacing: .16em; text-shadow: 0 0 18px rgba(91,205,255,.4); }
.brand-block strong { font-size: clamp(16px, 2vw, 25px); }
.brand-kicker, .eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .22em; color: var(--cyan); }
.topbar-actions { display: flex; gap: 8px; pointer-events: auto; }
.icon-button, .pause-button { border: 1px solid rgba(145,220,248,.35); background: rgba(4,12,20,.62); padding: 9px 12px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .13em; cursor: pointer; backdrop-filter: blur(10px); }
.icon-button:hover, .pause-button:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(56,190,255,.16); }

.screen { position: absolute; z-index: 20; inset: 0; display: none; place-items: center; padding: clamp(24px, 5vw, 64px); }
.screen-active { display: grid; }

.intro-screen { overflow: hidden; background: rgba(1,4,8,.35); }
.intro-backdrop, .intro-grid { position: absolute; inset: 0; }
.intro-image { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0; animation: imageCycle 24s infinite; transform: scale(1.08); filter: saturate(.72) contrast(1.08) brightness(.52); }
.intro-image-a { background-image: linear-gradient(90deg, rgba(1,7,12,.92) 0%, rgba(1,7,12,.5) 50%, rgba(1,7,12,.72) 100%), url('../img/briefing-hoth-battle.jpg'); }
.intro-image-b { background-image: linear-gradient(90deg, rgba(1,7,12,.92), rgba(1,7,12,.46), rgba(1,7,12,.76)), url('../img/briefing-hoth-game.jpg'); animation-delay: 8s; }
.intro-image-c { background-image: linear-gradient(90deg, rgba(1,7,12,.92), rgba(1,7,12,.46), rgba(1,7,12,.76)), url('../img/briefing-jungle.jpg'); animation-delay: 16s; }
@keyframes imageCycle { 0% { opacity: 0; transform: scale(1.08); } 8%, 30% { opacity: 1; } 38%, 100% { opacity: 0; transform: scale(1.01); } }
.intro-grid { opacity: .14; background-image: linear-gradient(rgba(106,210,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(106,210,255,.35) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(600px) rotateX(60deg) scale(1.6) translateY(20%); transform-origin: bottom; }
.intro-content { position: relative; width: min(850px, 100%); margin-right: auto; padding-top: 4vh; }
.intro-content h1 { margin: 12px 0 18px; max-width: 760px; font-size: clamp(48px, 8vw, 112px); line-height: .82; letter-spacing: -.065em; text-transform: uppercase; text-shadow: 0 5px 40px rgba(0,0,0,.8); }
.intro-content h1 span { display: block; margin-bottom: 12px; font-size: .31em; letter-spacing: .34em; color: transparent; -webkit-text-stroke: 1px rgba(216,244,255,.85); }
.mission-copy { max-width: 690px; margin: 0 0 28px; color: #d2e4eb; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.65; text-shadow: 0 2px 12px #000; }
.pilot-form { width: min(670px, 100%); }
.pilot-form label { display: block; margin-bottom: 7px; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pilot-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.pilot-input-row input { width: 100%; border: 1px solid rgba(139,224,255,.4); border-radius: 4px; outline: none; background: rgba(3,11,18,.82); color: white; padding: 14px 16px; box-shadow: inset 0 0 24px rgba(4,40,55,.36); }
.pilot-input-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(84,203,255,.14), inset 0 0 24px rgba(4,40,55,.36); }
.primary-button, .secondary-button, .text-button { border: 0; cursor: pointer; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.primary-button { border-radius: 4px; background: linear-gradient(135deg, #c3f4ff, #49caff); color: #03101a; padding: 14px 22px; box-shadow: 0 10px 30px rgba(36,180,255,.24); }
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.secondary-button { margin-top: 18px; padding: 11px 14px; color: var(--cyan); border: 1px solid rgba(129,225,255,.38); border-radius: 4px; background: rgba(4,13,22,.58); }
.text-button { padding: 10px 5px; background: transparent; color: var(--muted); }
.control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; max-width: 740px; margin-top: 24px; }
.control-grid div { display: grid; gap: 5px; border-top: 1px solid rgba(139,224,255,.25); padding-top: 9px; color: var(--muted); font-size: 11px; }
kbd { color: white; font: 800 10px/1.3 inherit; letter-spacing: .1em; }
.legal-line { position: absolute; z-index: 2; left: clamp(18px,3vw,44px); right: 18px; bottom: calc(14px + var(--safe-bottom)); color: rgba(207,232,241,.56); font-size: 10px; }

.briefing-screen { background: radial-gradient(circle at center, rgba(9,31,48,.92), rgba(1,5,9,.98)); }
.briefing-panel { width: min(900px, 100%); }
.briefing-panel h2, .modal-panel h2, .leaderboard-panel h2, .result-panel h2 { margin: 8px 0 26px; font-size: clamp(32px, 5vw, 62px); letter-spacing: -.04em; text-transform: uppercase; }
.briefing-map { position: relative; height: 220px; margin: 0 0 26px; border: 1px solid rgba(120,218,255,.26); background: radial-gradient(circle at 28% 52%, rgba(62,174,230,.12), transparent 20%), linear-gradient(rgba(91,205,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91,205,255,.08) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; overflow: hidden; }
.briefing-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0 30%, rgba(104,219,255,.08) 31% 32%, transparent 33% 100%); }
.route-line { position: absolute; top: 51%; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--orange)); box-shadow: 0 0 18px var(--cyan); }
.route-point { position: absolute; top: calc(51% - 15px); min-width: 64px; padding: 7px 8px; border: 1px solid currentColor; background: #07121a; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .13em; color: var(--cyan); }
.route-start { left: 8%; } .route-mid { left: 49%; color: var(--orange); } .route-end { right: 7%; color: var(--red); }
.briefing-objectives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.briefing-objectives article { min-height: 108px; border-left: 1px solid rgba(118,218,255,.32); padding: 4px 16px; }
.briefing-objectives span { color: var(--cyan); font-weight: 900; }
.briefing-objectives p { color: #b8ced7; line-height: 1.55; }
.loading-track { height: 4px; margin-top: 26px; background: rgba(111,204,240,.13); overflow: hidden; }
.loading-track i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); transition: width .2s linear; }
#loadingText { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.game-hud { display: none; position: absolute; z-index: 10; inset: 0; pointer-events: none; padding: calc(82px + var(--safe-top)) clamp(16px, 3vw, 42px) calc(26px + var(--safe-bottom)); text-shadow: 0 0 10px rgba(85,214,255,.35); }
.game-hud.active { display: block; }
.hud-top-left, .hud-top-right { position: absolute; top: calc(82px + var(--safe-top)); width: min(290px, 29vw); }
.hud-top-left { left: clamp(16px, 3vw, 42px); }
.hud-top-right { right: clamp(16px, 3vw, 42px); text-align: right; }
.hud-top-center { position: absolute; top: calc(82px + var(--safe-top)); left: 50%; transform: translateX(-50%); display: grid; text-align: center; }
.hud-top-center span, .hud-label, .objective-panel span { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.hud-top-center strong { font-size: 22px; letter-spacing: .08em; }
.meter { height: 6px; margin: 6px 0; background: rgba(184,236,255,.12); border: 1px solid rgba(130,218,255,.2); overflow: hidden; }
.meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--red), var(--orange), var(--green)); transform-origin: left; }
.meter.heat i { width: 0; background: linear-gradient(90deg, #5fe0ff, #ffcf52, #ff4141); }
.hud-value { color: white; font-size: 11px; font-weight: 900; }
.hud-score, .hud-wave { position: absolute; top: calc(144px + var(--safe-top)); font-size: 10px; color: var(--muted); letter-spacing: .13em; }
.hud-score { left: clamp(16px, 3vw, 42px); } .hud-wave { right: clamp(16px, 3vw, 42px); }
.hud-score strong, .hud-wave strong { color: white; font-size: 17px; }
.hud-target { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); min-width: 190px; text-align: center; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.hud-warning { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0; color: #180000; background: var(--red); padding: 8px 22px; font-size: 13px; font-weight: 1000; letter-spacing: .24em; transition: opacity .16s, transform .16s; box-shadow: 0 0 35px rgba(255,41,41,.55); }
.hud-warning.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.radar { position: absolute; left: clamp(14px, 2vw, 30px); bottom: calc(22px + var(--safe-bottom)); width: 180px; text-align: center; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.radar canvas { display: block; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(110,218,255,.25); background: rgba(2,10,16,.54); backdrop-filter: blur(6px); }
.objective-panel { position: absolute; left: 50%; bottom: calc(28px + var(--safe-bottom)); width: min(370px, 42vw); transform: translateX(-50%); text-align: center; }
.objective-panel strong { display: block; margin: 5px 0 7px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.meter.objective { height: 5px; }
.meter.objective i { width: 0; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.pause-button { position: absolute; right: clamp(14px, 2vw, 30px); bottom: calc(28px + var(--safe-bottom)); pointer-events: auto; }

.pause-screen { background: rgba(0,4,7,.7); backdrop-filter: blur(10px); }
.modal-panel, .result-panel { width: min(620px, 100%); padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(118,220,255,.26); background: linear-gradient(145deg, rgba(8,20,31,.96), rgba(3,8,13,.97)); box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 0 50px rgba(62,179,229,.05); }
.modal-panel.compact { width: min(440px, 100%); display: grid; gap: 10px; text-align: center; }
.modal-panel.compact h2 { margin-bottom: 8px; }

.result-screen { background: radial-gradient(circle at 50% 30%, rgba(18,60,85,.48), rgba(0,4,7,.94)); }
.result-panel { width: min(760px, 100%); }
.result-panel h2 { margin-bottom: 8px; }
.result-panel > p { color: #b7ccd5; font-size: 17px; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0; border-top: 1px solid rgba(127,218,255,.2); border-bottom: 1px solid rgba(127,218,255,.2); }
.result-stats div { padding: 22px 12px; border-right: 1px solid rgba(127,218,255,.16); }
.result-stats div:last-child { border: 0; }
.result-stats span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.result-stats strong { display: block; margin-top: 6px; font-size: clamp(20px, 3vw, 32px); }
.result-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.result-actions .secondary-button { margin-top: 0; }

.leaderboard-screen { background: rgba(0,4,7,.78); backdrop-filter: blur(14px); }
.leaderboard-panel { width: min(850px, 100%); max-height: 86vh; overflow: auto; padding: clamp(24px, 4vw, 46px); border: 1px solid rgba(126,220,255,.28); background: rgba(5,14,22,.96); box-shadow: 0 40px 100px rgba(0,0,0,.65); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.panel-heading h2 { margin-bottom: 18px; }
.close-button { border: 1px solid rgba(126,220,255,.25); width: 42px; height: 42px; border-radius: 50%; background: transparent; cursor: pointer; font-size: 24px; }
.leaderboard-row { display: grid; grid-template-columns: 50px minmax(130px, 1.6fr) 1fr .8fr .8fr; gap: 14px; align-items: center; padding: 13px 10px; border-top: 1px solid rgba(117,207,241,.13); }
.leaderboard-row.header { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.leaderboard-row:not(.header):nth-child(2) { color: #ffe58b; }
.rank { color: var(--cyan); font-weight: 900; }
.leaderboard-loading, .leaderboard-empty { padding: 28px 0; color: var(--muted); }

.mobile-controls { display: none; position: absolute; z-index: 12; left: 0; right: 0; bottom: calc(18px + var(--safe-bottom)); justify-content: center; gap: 14px; pointer-events: none; }
.mobile-controls button { width: 72px; height: 58px; border: 1px solid rgba(127,220,255,.36); border-radius: 8px; background: rgba(3,12,20,.7); color: white; font-weight: 900; pointer-events: auto; backdrop-filter: blur(8px); }
.mobile-controls .mobile-fire { width: 100px; border-color: rgba(255,103,103,.55); background: rgba(91,10,10,.62); }
.toast { position: absolute; z-index: 50; left: 50%; bottom: calc(28px + var(--safe-bottom)); transform: translate(-50%, 25px); opacity: 0; pointer-events: none; background: rgba(3,11,18,.94); border: 1px solid rgba(120,219,255,.3); padding: 11px 16px; border-radius: 4px; color: white; font-size: 12px; transition: .25s ease; }
.toast.active { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
    .app-shell { min-height: 480px; }
    .topbar { padding-left: 14px; padding-right: 14px; }
    .brand-kicker { display: none; }
    .brand-block strong { font-size: 13px; }
    .icon-button { padding: 8px; font-size: 8px; }
    .screen { padding: 18px; }
    .intro-content { padding-top: 30px; }
    .intro-content h1 { font-size: clamp(44px, 17vw, 72px); }
    .mission-copy { font-size: 14px; line-height: 1.5; }
    .pilot-input-row { grid-template-columns: 1fr; }
    .control-grid { grid-template-columns: repeat(2, 1fr); }
    .briefing-objectives { grid-template-columns: 1fr; gap: 6px; }
    .briefing-objectives article { min-height: auto; }
    .briefing-map { height: 150px; }
    .hud-top-left, .hud-top-right { top: calc(65px + var(--safe-top)); width: 35vw; }
    .hud-top-center { top: calc(66px + var(--safe-top)); }
    .hud-top-center strong { font-size: 15px; }
    .hud-score, .hud-wave { top: calc(117px + var(--safe-top)); }
    .radar { width: 112px; left: 8px; bottom: calc(90px + var(--safe-bottom)); }
    .radar canvas { width: 112px; height: 112px; }
    .objective-panel { width: 54vw; bottom: calc(90px + var(--safe-bottom)); }
    .pause-button { bottom: calc(92px + var(--safe-bottom)); }
    .mobile-controls.active { display: flex; }
    .result-stats { grid-template-columns: repeat(2, 1fr); }
    .result-stats div:nth-child(2) { border-right: 0; }
    .result-stats div:nth-child(-n+2) { border-bottom: 1px solid rgba(127,218,255,.16); }
    .leaderboard-row { grid-template-columns: 34px 1.6fr 1fr .8fr; font-size: 12px; }
    .leaderboard-row span:nth-child(5) { display: none; }
    .leaderboard-row.header span:nth-child(5) { display: none; }
}

@media (max-height: 620px) and (orientation: landscape) {
    .intro-content { transform: scale(.84); transform-origin: left center; }
    .legal-line { display: none; }
    .topbar { padding-top: 10px; }
    .radar { transform: scale(.7); transform-origin: bottom left; }
    .objective-panel { bottom: 12px; }
    .pause-button { bottom: 14px; }
}

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

/* Development by ceis-it.de */

/* Schwierigkeit und erweiterte Einsatzanzeige */
.difficulty-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
}
.difficulty-selector legend {
    width: 100%;
    margin-bottom: 7px;
    color: var(--cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.difficulty-option { position: relative; cursor: pointer; }
.difficulty-option input { position: absolute; opacity: 0; pointer-events: none; }
.difficulty-card {
    position: relative;
    display: grid;
    min-height: 72px;
    gap: 5px;
    align-content: center;
    padding: 11px 13px 11px 39px;
    border: 1px solid rgba(132,220,255,.22);
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(7,20,31,.86), rgba(2,9,15,.76));
    box-shadow: inset 0 0 24px rgba(62,192,246,.035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.difficulty-card::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(153,226,255,.52);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: inset 0 0 0 3px rgba(3,10,17,.9);
}
.difficulty-card strong { font-size: 11px; letter-spacing: .15em; }
.difficulty-card small { color: #8fa8b4; font-size: 10px; line-height: 1.35; }
.difficulty-option input:checked + .difficulty-card {
    border-color: rgba(125,226,255,.8);
    box-shadow: 0 0 24px rgba(53,191,255,.13), inset 0 0 34px rgba(56,192,255,.075);
    transform: translateY(-1px);
}
.difficulty-option input:checked + .difficulty-card::before {
    background: var(--cyan);
    box-shadow: 0 0 13px var(--cyan), inset 0 0 0 3px rgba(3,10,17,.9);
}
.difficulty-option input[value="hard"]:checked + .difficulty-card {
    border-color: rgba(255,105,83,.75);
    box-shadow: 0 0 24px rgba(255,65,48,.12), inset 0 0 34px rgba(255,66,42,.06);
}
.difficulty-option input[value="hard"]:checked + .difficulty-card::before {
    background: #ff604f;
    box-shadow: 0 0 13px #ff604f, inset 0 0 0 3px rgba(3,10,17,.9);
}
.hud-difficulty {
    position: absolute;
    right: clamp(16px, 3vw, 42px);
    top: calc(171px + var(--safe-top));
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .14em;
}
.hud-difficulty strong { color: var(--cyan); font-size: 11px; }
.hud-difficulty.hard strong { color: #ff7867; text-shadow: 0 0 12px rgba(255,67,49,.6); }
.result-difficulty {
    display: inline-flex;
    margin-top: 10px;
    padding: 7px 10px;
    border: 1px solid rgba(126,220,255,.25);
    border-radius: 3px;
    color: var(--cyan);
    background: rgba(3,13,21,.58);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .17em;
}
.result-difficulty.hard { border-color: rgba(255,100,79,.42); color: #ff806f; }
.leaderboard-difficulty {
    display: inline-block;
    min-width: 54px;
    padding: 4px 6px;
    border: 1px solid rgba(125,223,255,.25);
    border-radius: 3px;
    color: var(--cyan);
    text-align: center;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
}
.leaderboard-difficulty.hard { border-color: rgba(255,106,84,.42); color: #ff806f; }
.leaderboard-row { grid-template-columns: 50px minmax(130px, 1.5fr) .75fr 1fr .8fr .8fr; }

@media (max-width: 760px) {
    .difficulty-selector { grid-template-columns: 1fr; gap: 7px; }
    .difficulty-card { min-height: 54px; }
    .hud-difficulty { top: calc(139px + var(--safe-top)); right: 12px; }
    .leaderboard-row { grid-template-columns: 30px 1.4fr .8fr 1fr; }
    .leaderboard-row span:nth-child(5),
    .leaderboard-row span:nth-child(6) { display: none; }
}

@media (max-height: 720px) and (min-width: 761px) {
    .intro-content { transform: scale(.88); transform-origin: left center; }
}


/* Superlaser und erweiterte Gefechtsdarstellung */
.control-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 850px; }

.hud-super {
    position: absolute;
    right: clamp(16px, 3vw, 42px);
    bottom: calc(105px + var(--safe-bottom));
    width: min(250px, 27vw);
    padding: 10px 12px;
    border: 1px solid rgba(255,108,68,.28);
    background: linear-gradient(135deg, rgba(34,8,5,.72), rgba(5,12,18,.74));
    box-shadow: inset 0 0 28px rgba(255,67,37,.06), 0 0 24px rgba(255,54,31,.08);
    text-align: right;
    pointer-events: auto;
    backdrop-filter: blur(7px);
}
.hud-super > span {
    display: block;
    color: #ff9a70;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .2em;
}
.hud-super strong {
    display: block;
    margin: 2px 0 7px;
    color: #ffd4b2;
    font-size: 11px;
    letter-spacing: .16em;
}
.meter.super {
    height: 7px;
    border-color: rgba(255,111,70,.3);
    background: rgba(255,73,43,.08);
}
.meter.super i {
    width: 100%;
    background: linear-gradient(90deg, #7a1712, #ff4d24, #ffd76d, #fff6d8);
    box-shadow: 0 0 18px rgba(255,80,38,.55);
}
.hud-super button {
    width: 100%;
    border: 1px solid rgba(255,105,67,.25);
    border-radius: 3px;
    background: rgba(70,15,10,.38);
    color: rgba(255,196,162,.45);
    padding: 7px 8px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .15em;
    cursor: not-allowed;
    transition: border-color .18s, box-shadow .18s, color .18s, background .18s, transform .18s;
}
.hud-super button.ready {
    border-color: rgba(255,207,117,.9);
    background: linear-gradient(135deg, rgba(127,26,13,.84), rgba(226,65,25,.72));
    color: #fff7dd;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(255,79,36,.38), inset 0 0 14px rgba(255,233,151,.12);
    animation: superReadyPulse 1.25s ease-in-out infinite;
}
.hud-super button.ready:hover { transform: translateY(-1px); filter: brightness(1.12); }
.hud-super button:disabled { opacity: .72; }

@keyframes superReadyPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255,79,36,.28), inset 0 0 12px rgba(255,233,151,.08); }
    50% { box-shadow: 0 0 34px rgba(255,99,40,.58), inset 0 0 20px rgba(255,233,151,.18); }
}

.mobile-controls .mobile-super {
    width: 82px;
    border-color: rgba(255,166,94,.62);
    background: linear-gradient(145deg, rgba(117,28,15,.86), rgba(56,10,8,.86));
    color: #ffd9b8;
    box-shadow: 0 0 18px rgba(255,67,31,.18);
}

@media (max-width: 760px) {
    .control-grid { grid-template-columns: repeat(2, 1fr); }
    .hud-super {
        right: 8px;
        bottom: calc(158px + var(--safe-bottom));
        width: 145px;
        padding: 7px 8px;
    }
    .hud-super > span { font-size: 7px; }
    .hud-super strong { font-size: 9px; margin-bottom: 4px; }
    .hud-super button { padding: 5px; font-size: 8px; }
    .mobile-controls { gap: 8px; }
    .mobile-controls button { width: 58px; }
    .mobile-controls .mobile-fire { width: 82px; }
    .mobile-controls .mobile-super { width: 68px; font-size: 10px; }
}

@media (max-height: 620px) and (orientation: landscape) {
    .hud-super { right: 12px; bottom: 60px; transform: scale(.78); transform-origin: bottom right; }
}