:root {
    --ink: #fff7ec;
    --muted: #c9b8d6;
    --gold: #ffd166;
    --orange: #ff8a3d;
    --coral: #ff4f6d;
    --violet: #2a1650;
    --night: #120a26;
    --teal: #3ee6c1;
    --panel: rgba(18, 10, 38, 0.62);
    --panel-border: rgba(255, 209, 102, 0.18);
    --hp: #ff4f6d;
    --armor: #4cc3ff;
}

* { box-sizing: border-box; }

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--night);
    color: var(--ink);
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    user-select: none;
}

#game {
    position: fixed;
    inset: 0;
    display: block;
}

body.playing #game { cursor: none; }

.hidden { display: none !important; }

/* ---------- Overlays & cards ---------- */

.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 6, 26, 0.55);
    backdrop-filter: blur(3px);
    z-index: 20;
}

/* Sunset wash over the live battle behind the title screen */
.menu-overlay {
    background:
        radial-gradient(ellipse at 50% 115%, rgba(255, 138, 61, 0.55) 0%, rgba(255, 79, 109, 0.28) 30%, transparent 62%),
        linear-gradient(180deg, rgba(18, 10, 38, 0.92) 0%, rgba(42, 22, 80, 0.72) 45%, rgba(120, 36, 90, 0.55) 100%);
    backdrop-filter: blur(2px) saturate(1.2);
}

.menu-card {
    width: min(440px, calc(100vw - 32px));
    padding: 36px 36px 28px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(36, 18, 70, 0.88), rgba(18, 10, 38, 0.92));
    border: 1px solid var(--panel-border);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 60px rgba(255, 138, 61, 0.12);
    text-align: center;
    animation: rise 0.5s cubic-bezier(.2, .9, .3, 1.2);
}

#menu { overflow-y: auto; align-items: safe center; padding: 16px 0; }
#menu .menu-card { width: min(520px, calc(100vw - 32px)); padding-top: 28px; }
.menu-card.small { width: min(400px, calc(100vw - 32px)); }

@keyframes rise {
    from { transform: translateY(24px) scale(0.97); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.title {
    margin: 0;
    font-family: 'Black Ops One', 'Impact', sans-serif;
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 3px;
    display: flex;
    flex-direction: column;
}

.title-top {
    font-size: 30px;
    letter-spacing: 14px;
    color: var(--teal);
    text-shadow: 0 0 18px rgba(62, 230, 193, 0.45);
}

.title-bottom {
    font-size: 72px;
    background: linear-gradient(180deg, #fff1b8 0%, var(--gold) 35%, var(--orange) 70%, var(--coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 0 rgba(90, 20, 50, 0.9)) drop-shadow(0 0 24px rgba(255, 138, 61, 0.35));
}

.credit {
    margin: 10px 0 26px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
}

.card-title {
    margin: 0 0 18px;
    font-family: 'Black Ops One', sans-serif;
    font-weight: 400;
    font-size: 44px;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #fff1b8, var(--gold) 45%, var(--orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.card-title.lose {
    background: linear-gradient(180deg, #ffd0d8, var(--coral) 60%, #b3264a);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---------- Mode carousel ---------- */

#menu .credit { margin-bottom: 18px; }

.mode-select {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mode-arrow {
    flex: none;
    width: 40px;
    height: 64px;
    border-radius: 12px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    background: rgba(255, 209, 102, 0.1);
    color: var(--gold);
    font-size: 40px;
    line-height: 1;
    padding-bottom: 6px;
    cursor: pointer;
    transition: transform 0.12s, background 0.12s;
}
.mode-arrow:hover { background: rgba(255, 209, 102, 0.22); transform: scale(1.06); }
.mode-arrow:active { transform: scale(0.94); }

.mode-card {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(255, 209, 102, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 138, 61, 0.15);
}
.mode-card canvas { display: block; width: 100%; height: auto; }
.mode-card.slide-left { animation: slideL 0.35s cubic-bezier(.2, .9, .3, 1.1); }
.mode-card.slide-right { animation: slideR 0.35s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes slideL { from { transform: translateX(40px); opacity: 0; } }
@keyframes slideR { from { transform: translateX(-40px); opacity: 0; } }

.mode-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 12px 8px;
    background: linear-gradient(180deg, transparent, rgba(12, 6, 26, 0.92) 55%);
    text-align: left;
}
.mode-name {
    font-family: 'Black Ops One', sans-serif;
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--gold);
    text-shadow: 0 2px 0 rgba(90, 20, 50, 0.9);
}
.mode-desc { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }

.mode-dots { display: flex; justify-content: center; gap: 8px; margin: 10px 0 14px; }
.mode-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.2s, transform 0.2s; }
.mode-dots span.on { background: var(--gold); transform: scale(1.3); }

.seg { display: flex; gap: 6px; }
.seg button {
    width: 38px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}
.seg button.on { background: var(--gold); color: #3a0d1e; border-color: var(--gold); }
#settings-war .cpu-row + .cpu-row { margin-top: 10px; }

.controls-wrap { margin-top: 16px; text-align: left; }
.controls-wrap summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}
.controls-wrap .controls { margin-top: 12px; }

/* ---------- War mode team scoreboard ---------- */

#team-score {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
}
#team-score em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 1px; }
.ts { display: flex; align-items: center; gap: 6px; }
.ts i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.ts b { font-size: 24px; line-height: 1; }
.ts span { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ts.mine span { color: var(--gold); }
.ts.out { opacity: 0.35; text-decoration: line-through; }

/* ---------- Opponent slider ---------- */

.cpu-select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px 18px 10px;
    margin-bottom: 20px;
}

.cpu-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.cpu-row strong {
    font-size: 30px;
    color: var(--gold);
    letter-spacing: 1px;
}

.cpu-scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(201, 184, 214, 0.6);
    font-weight: 600;
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    margin: 12px 0 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--teal), var(--gold) 50%, var(--coral));
    outline: none;
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff7ec;
    border: 4px solid var(--orange);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff7ec;
    border: 4px solid var(--orange);
}

/* ---------- Buttons ---------- */

.btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    border: none;
    border-radius: 14px;
    font-family: 'Black Ops One', sans-serif;
    font-size: 22px;
    letter-spacing: 3px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}

.btn.primary {
    color: #3a0d1e;
    background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 30%, var(--orange) 100%);
    box-shadow: 0 6px 0 #a8402a, 0 12px 30px rgba(255, 138, 61, 0.35);
}

.btn.primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 0 #a8402a, 0 16px 36px rgba(255, 138, 61, 0.45); }
.btn.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #a8402a, 0 6px 16px rgba(255, 138, 61, 0.3); }

.btn.ghost {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 17px;
}

.btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }

.best {
    margin: 18px 0 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.best strong { color: var(--gold); font-size: 20px; margin-left: 6px; }

.controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-align: left;
}

kbd {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    margin-right: 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom-width: 2px;
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* ---------- Game over ---------- */

.go-sub { margin: -8px 0 18px; color: var(--muted); font-size: 17px; font-weight: 600; }

.go-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.go-stats div {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 6px;
}

.go-stats span { display: block; font-size: 30px; font-weight: 700; color: var(--gold); }
.go-stats label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.go-best { min-height: 20px; margin: 6px 0 4px; color: var(--teal); font-weight: 700; letter-spacing: 1px; }

/* ---------- HUD ---------- */

#hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.panel {
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

#hud-topleft {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
}

.stat { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.stat-value { font-size: 30px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
#kills { color: var(--gold); }

#hud-topright {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.minimap-wrap { padding: 6px; }
#minimap { display: block; width: 200px; height: 200px; border-radius: 10px; }

#zone-info {
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted);
}

#zone-info.closing { color: var(--coral); }

#killfeed { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.kf {
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(18, 10, 38, 0.6);
    font-size: 14px;
    font-weight: 600;
    animation: kfIn 0.25s ease-out;
    transition: opacity 0.5s;
}

.kf.mine { background: rgba(255, 138, 61, 0.35); border: 1px solid rgba(255, 209, 102, 0.4); }
.kf .w { color: var(--muted); margin: 0 6px; font-size: 12px; }
.kf .you { color: var(--gold); }

@keyframes kfIn { from { transform: translateX(20px); opacity: 0; } }

#banner {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Black Ops One', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    color: var(--gold);
    text-shadow: 0 3px 0 rgba(90, 20, 50, 0.9), 0 0 20px rgba(255, 138, 61, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}

#banner.show { opacity: 1; }
#banner.danger { color: var(--coral); }

#prompt {
    position: absolute;
    left: 50%;
    bottom: 170px;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--panel);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

#prompt:empty { display: none; }
#prompt.warn { color: var(--coral); }
#prompt kbd { font-size: 14px; }

#hud-bottom {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#vitals { width: 380px; display: flex; flex-direction: column; gap: 5px; }

.bar {
    position: relative;
    height: 22px;
    border-radius: 8px;
    background: rgba(18, 10, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.bar .fill,
.bar .ghost {
    position: absolute;
    inset: 0;
    width: 100%;
    transform-origin: left;
}

#hp-bar .fill { background: linear-gradient(180deg, #ff8a9c, var(--hp) 55%, #c22a4d); transition: transform 0.1s; }
#hp-bar .ghost { background: #fff3; transition: transform 0.6s 0.2s; }
#hp-bar.low .fill { animation: pulse 0.8s infinite alternate; }
#armor-bar { height: 12px; }
#armor-bar .fill { background: linear-gradient(180deg, #a6e4ff, var(--armor)); transition: transform 0.15s; }

@keyframes pulse { to { filter: brightness(1.5); } }

.bar span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#armor-bar span { font-size: 10px; }
#shield-bar { height: 12px; }
#shield-bar .fill { background: linear-gradient(90deg, #00e5ff, #00f5d4); box-shadow: 0 0 8px #00e5ff; }
#shield-bar span { font-size: 10px; }
#hunger-bar { height: 12px; }
#hunger-bar .fill { background: linear-gradient(180deg, #ffd29a, #e8892e); }
#hunger-bar span { font-size: 10px; }
#hunger-bar.low .fill { animation: pulse 0.8s infinite alternate; }
#thirst-bar, #energy-bar { height: 12px; }
#thirst-bar .fill { background: linear-gradient(180deg, #a6dcff, #2e8bd6); }
#energy-bar .fill { background: linear-gradient(180deg, #dcc6ff, #8a5ad6); }
#thirst-bar span, #energy-bar span { font-size: 10px; }
#thirst-bar.low .fill, #energy-bar.low .fill { animation: pulse 0.8s infinite alternate; }

#hotbar { display: flex; gap: 6px; }

.slot {
    position: relative;
    width: 92px;
    height: 58px;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--panel);
    border: 2px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.1s, border-color 0.1s;
}

.slot .key { position: absolute; top: 3px; left: 7px; font-size: 12px; font-weight: 700; color: var(--muted); }
.slot .name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.slot.active { transform: translateY(-4px); background: rgba(42, 22, 80, 0.85); }
.slot.locked { opacity: 0.35; border-style: dashed; }
.slot.locked .name { font-size: 11px; color: var(--muted); }

#ammo-panel {
    position: absolute;
    right: 16px;
    bottom: 16px;
    min-width: 180px;
    padding: 10px 16px;
    text-align: right;
}

#weapon-name { font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
#ammo-count { line-height: 1; }
#mag { font-size: 44px; font-weight: 700; }

@media (max-width: 720px) {
    #vitals { width: calc(100vw - 32px); }
    .slot { width: 64px; height: 50px; }
    .slot .name { font-size: 11px; }
    #ammo-panel { bottom: 150px; }
    #minimap { width: 130px; height: 130px; }
    .title-bottom { font-size: 56px; }
    .controls { display: none; }
}

/* ---------- Kill & victory effects ---------- */

#game { transition: filter 1.2s; }
#game.dead { filter: grayscale(0.85) brightness(0.75); }

#banner { text-align: center; }
#banner.show { animation: bannerPop 0.45s cubic-bezier(.2, 1.6, .4, 1); }
#banner .sub {
    margin-top: 2px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--teal);
    text-shadow: 0 2px 0 rgba(18, 10, 38, 0.9), 0 0 14px rgba(62, 230, 193, 0.5);
}

@keyframes bannerPop {
    0% { transform: translateX(-50%) scale(1.8); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

#kills.pop { animation: killPop 0.5s cubic-bezier(.2, 1.8, .4, 1); }

@keyframes killPop {
    0% { transform: scale(1.9); color: #fff7ec; text-shadow: 0 0 18px var(--gold); }
    100% { transform: scale(1); }
}

/* Victory: let the fireworks show through and make the title shine */
#gameover.win {
    background: radial-gradient(ellipse at center, rgba(12, 6, 26, 0.15), rgba(12, 6, 26, 0.6));
    backdrop-filter: none;
}

#gameover.win .menu-card {
    border-color: rgba(255, 209, 102, 0.55);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 209, 102, 0.35);
    animation: rise 0.5s cubic-bezier(.2, .9, .3, 1.2), winGlow 2s ease-in-out infinite alternate;
}

#gameover.win .card-title {
    font-size: 56px;
    background: linear-gradient(100deg, #ff8a3d 0%, #ffd166 30%, #fffbe6 50%, #ffd166 70%, #ff8a3d 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 2.2s linear infinite;
}

#gameover.win #go-place { color: #fffbe6; text-shadow: 0 0 16px var(--gold); }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes winGlow { to { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 120px rgba(255, 209, 102, 0.55); } }

/* ---------- Supplies ---------- */

#heal-panel {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 8px 10px;
}

#heal-label { min-height: 0; font-size: 13px; font-weight: 700; color: #5ee08a; text-align: center; }
#heal-label:not(:empty) { margin-bottom: 4px; }

.supply-row { display: flex; gap: 8px; }

.supply {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, border-color 0.2s;
}

.supply img { width: 46px; height: 46px; margin-top: -6px; }
.supply .count { position: absolute; bottom: 3px; font-size: 15px; font-weight: 700; }
.supply kbd { position: absolute; top: 4px; left: 4px; font-size: 10px; min-width: 16px; padding: 0 4px; }
.supply.none { opacity: 0.4; }
.supply.full .count { color: var(--gold); }
.supply.using { border-color: #5ee08a; box-shadow: 0 0 14px rgba(94, 224, 138, 0.45); }

#heal-bar { height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; visibility: hidden; }
#heal-bar div { height: 100%; width: 0; background: #5ee08a; }
#heal-bar.on { visibility: visible; }

#grenade-panel {
    position: absolute;
    right: 16px;
    bottom: 132px;
    padding: 6px;
}

.slot.empty .name { color: var(--muted); }
.slot.empty.active { border-color: var(--ink); }

@media (max-width: 720px) {
    #heal-panel { bottom: 150px; }
    #grenade-panel { bottom: 260px; }
    .supply { width: 54px; height: 54px; }
    .supply img { width: 34px; height: 34px; }
}

.stat-label kbd { font-size: 9px; min-width: 14px; padding: 0 3px; }

/* ---------- Throwables ---------- */

#grenade-panel { pointer-events: auto; padding: 6px 8px 8px; }
.throw-hint { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; margin-bottom: 4px; }
.throw-hint kbd { font-size: 10px; min-width: 14px; padding: 0 3px; }
.supply.throwable { width: 58px; height: 58px; cursor: pointer; }
.supply.throwable img { width: 40px; height: 40px; }
.supply.throwable:hover { border-color: rgba(255, 255, 255, 0.3); }
/* With so many kinds, only the grenades you actually carry are shown (plus the one selected) */
.supply.throwable.none:not(.selected) { display: none; }
.supply.selected { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 209, 102, 0.4); background: rgba(255, 209, 102, 0.1); }

/* Battlefield choice */
#mapsel, #typesel { overflow-y: auto; align-items: safe center; padding: 16px 0; }
.menu-card.wide { width: min(1000px, calc(100vw - 32px)); }
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 18px 0 20px; }
.map-card.hidden { display: none; }
@media (max-width: 760px) { .map-grid { grid-template-columns: 1fr; } }
.map-card {
    display: flex; flex-direction: column; gap: 6px; padding: 0 0 14px; overflow: hidden;
    border-radius: 14px; border: 2px solid rgba(255, 209, 102, 0.35); background: rgba(18, 10, 38, 0.7);
    color: var(--text, #fff7ec); font: inherit; cursor: pointer; text-align: center;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.map-card canvas { display: block; width: 100%; height: auto; }
.map-card:hover:not(:disabled) { transform: translateY(-3px); border-color: #ffd166; box-shadow: 0 10px 30px rgba(255, 138, 61, 0.3); }
.map-card:disabled { opacity: 0.4; cursor: not-allowed; }
.map-name { font-family: "Black Ops One", sans-serif; font-size: 22px; letter-spacing: 2px; color: #ffd166; margin-top: 4px; }
.map-desc { font-size: 14px; padding: 0 12px; opacity: 0.85; line-height: 1.3; }

/* Revolution: how much ammo to load into the boss strike */
.sl-input {
    width: 100%;
    margin: 6px 0 14px;
    padding: 12px 14px;
    font: 700 22px Rajdhani, sans-serif;
    text-align: center;
    color: #fff7ec;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 179, 71, 0.6);
    border-radius: 10px;
    outline: none;
}
.sl-input:focus { border-color: #ffb347; }

/* Play with friends */
.friends-btn { margin-top: 14px; }
.host-strip { margin: -4px 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 209, 102, 0.14); border: 1px solid rgba(255, 209, 102, 0.5); color: #ffe6a8; font-weight: 600; letter-spacing: 0.04em; text-align: center; }
.host-strip strong { font-family: 'Black Ops One', sans-serif; letter-spacing: 0.18em; color: #ffd166; }
.fr-code { font-family: 'Black Ops One', sans-serif; font-size: 54px; letter-spacing: 0.22em; color: #ffd166; text-align: center; margin: 4px 0 10px; user-select: all; }
.fr-input { text-transform: uppercase; letter-spacing: 0.3em; text-align: center; }
#fr-choose { display: flex; flex-direction: column; gap: 10px; }
#net-video { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: contain; background: #000; z-index: 50; cursor: crosshair; }
#net-leave { z-index: 60; }

/* ---------- Touch controls ---------- */
#touch, #rotate-hint { display: none; }
body.touch.playing #touch { display: block; position: fixed; inset: 0; z-index: 9; touch-action: none; -webkit-user-select: none; user-select: none; }
body.touch.net-viewing #touch { z-index: 55; }
body.touch #game { touch-action: none; }
.stick { position: fixed; width: 130px; height: 130px; border-radius: 50%; background: rgba(14, 10, 28, 0.35); border: 2px solid rgba(255, 255, 255, 0.28); pointer-events: none; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(255, 255, 255, 0.6); }
.stick.on .knob { background: rgba(255, 209, 102, 0.65); }
.stick-label { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: rgba(255, 255, 255, 0.55); }
.tbtn { width: 56px; height: 56px; border-radius: 50%; background: rgba(14, 10, 28, 0.62); border: 2px solid rgba(255, 255, 255, 0.32); color: #fff7ec; font: 700 11px Rajdhani, sans-serif; letter-spacing: 0.5px; padding: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tbtn.down, .tbtn.on { background: rgba(255, 209, 102, 0.55); color: #1a1030; }
#tb-pause { position: fixed; top: 10px; left: 50%; margin-left: -22px; width: 44px; height: 44px; font-size: 16px; }
/* the HUD shrinks to fit a phone, with the medical supplies bottom-left and the grenades bottom-right */
body.touch #hud { zoom: 0.62; }
@media (min-height: 600px) { body.touch #hud { zoom: 0.8; } }
body.touch #grenade-panel { bottom: 16px; }
body.touch #ammo-panel { bottom: 150px; }
body.touch .throw-hint, body.touch .supply kbd, body.touch .stat-label kbd { display: none; }
body.touch #heal-panel { pointer-events: auto; }
body.touch #hotbar .slot { pointer-events: auto; }
@media (orientation: portrait) and (max-width: 600px) {
    body.touch.playing.never #rotate-hint { display: flex; position: fixed; inset: 0; z-index: 70; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(14, 10, 28, 0.94); color: #fff7ec; font: 700 20px Rajdhani, sans-serif; }
    #rotate-hint div { font-size: 64px; color: #ffd166; }
}
body.touch #grenade-panel .supply-row { flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 270px; }
/* (on a touch screen the hotbar already shows your ammo, so the ammo box goes; a smaller minimap leaves room for the buttons) */
body.touch #ammo-panel { display: none; }
body.touch #minimap { width: 120px; height: 120px; }
@media (max-height: 500px) { body.touch #killfeed { display: none; } }
#tb-pick { position: fixed; left: 50%; transform: translateX(-50%); padding: 12px 20px; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; background: rgba(255, 209, 102, 0.92); color: #1a1030; border: 2px solid #fff7ec; font: 700 17px Rajdhani, sans-serif; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#tb-pick:active { transform: translateX(-50%) scale(0.95); }
body.touch #prompt { display: none; }
/* (iPhones: keep everything clear of the notch) */
body.touch #hud { left: env(safe-area-inset-left); right: env(safe-area-inset-right); }
/* (touch: the health bars and hotbar go to the top, the grenades show just the one you've picked, and pause sits under your stats) */
body.touch #hud-bottom { top: 12px; bottom: auto; flex-direction: column-reverse; }
body.touch #hud-bottom #vitals { width: 300px; }
body.touch .supply.throwable:not(.selected) { display: none; }
body.touch #grenade-panel { pointer-events: auto; }
body.touch #tb-pause { top: auto; left: 12px; margin-left: 0; bottom: auto; }
body.touch .slot .key { display: none; }
.supply.armed { border-color: #ffb347; box-shadow: 0 0 18px rgba(255, 179, 71, 0.75); background: rgba(255, 179, 71, 0.22); }

/* Doomsday Nuke: the use button and the targeting map */
.nuke-use {
    display: block; width: 100%; margin: 0 0 6px; padding: 7px 10px; border: 2px solid #ff3b3b; border-radius: 9px;
    background: linear-gradient(180deg, #b31212, #6e0808); color: #fff; font: 800 15px Rajdhani, sans-serif; letter-spacing: 1.5px;
    cursor: pointer; box-shadow: 0 0 14px rgba(255, 50, 50, 0.55); animation: nukePulse 1.1s ease-in-out infinite;
}
.nuke-use.hidden { display: none; }
.nuke-use:hover { filter: brightness(1.2); }
@keyframes nukePulse { 50% { box-shadow: 0 0 26px rgba(255, 70, 70, 0.95); } }
#nuke-map { z-index: 60; background: rgba(10, 0, 0, 0.72); }
.nm-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 16px; max-width: calc(100vw - 24px);
    background: rgba(20, 12, 12, 0.94); border: 2px solid #ff3b3b; border-radius: 16px; box-shadow: 0 0 40px rgba(255, 40, 40, 0.4);
}
.nm-title { color: #ff5a5a; margin: 0; }
#nm-sub { margin: 0; text-align: center; }
#nm-canvas { display: block; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.25); cursor: crosshair; touch-action: none; }
@media (max-height: 520px) {
    #nm-sub { display: none; }
    .nm-card { padding: 6px 10px 8px; gap: 4px; }
    .nm-title { font-size: 18px; }
    #nm-cancel { padding: 4px 12px; }
}

/* Touch: the 8x scope button (only while holding a sniper rifle) */
#tb-scope { position: fixed; width: 58px; height: 58px; border-radius: 50%; background: rgba(14, 10, 28, 0.78); color: #8fd8ff; border: 2px solid #8fd8ff; font: 800 18px Rajdhani, sans-serif; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#tb-scope.on { background: #8fd8ff; color: #0e0a1c; }
#tb-scope.hidden { display: none; }

/* Full screen button (touch screens only) */
#fs-btn { display: none; }
body.touch #fs-btn { display: block; position: fixed; z-index: 65; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255, 247, 236, 0.6); background: rgba(14, 10, 28, 0.7); color: #fff7ec; font: 700 24px sans-serif; line-height: 1; touch-action: none; -webkit-tap-highlight-color: transparent; }
body.touch.playing #fs-btn { top: auto; right: auto; width: 40px; height: 40px; font-size: 20px; }
body.fs #fs-btn { opacity: 0.55; }
#fs-hint { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(14, 10, 28, 0.95); color: #fff7ec; font: 600 20px Rajdhani, sans-serif; }
#fs-hint.hidden { display: none; }
#fs-hint span { color: #8fd8ff; }

/* The long descriptions are gone from the menus: the briefing before each game says it instead */
#mode-desc, .map-card .map-desc { display: none; }
#brief { z-index: 55; }
.brief-card { max-width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.brief-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 2px 0 10px; }
.brief-tags span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 209, 102, 0.15); border: 1px solid rgba(255, 209, 102, 0.5); color: #ffd166; font: 700 13px Rajdhani, sans-serif; letter-spacing: 1px; }
.brief-list { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; display: grid; gap: 7px; }
.brief-list li { position: relative; padding-left: 26px; color: #fff7ec; font: 600 16px/1.3 Rajdhani, sans-serif; }
.brief-list li b { color: #ffd166; }
.brief-list li::before { content: attr(data-i); position: absolute; left: 0; top: 0; width: 20px; text-align: center; }
@media (max-height: 520px) { .brief-list li { font-size: 14px; } .brief-list { gap: 4px; margin-bottom: 8px; } }
.brief-btns { display: flex; gap: 10px; }
.brief-btns .btn { flex: 1; margin: 0; }
.brief-btns #brief-go { flex: 2; }
@media (max-height: 520px) {
    .brief-card { padding: 10px 18px 12px; }
    .brief-card .card-title { font-size: 26px; margin: 0 0 4px; }
    .brief-tags { margin: 0 0 6px; }
    .brief-list li { padding-left: 22px; line-height: 1.2; }
    .brief-btns .btn { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-height: 520px) and (min-width: 640px) {
    .brief-card { max-width: min(780px, calc(100vw - 24px)); }
    .brief-list { grid-template-columns: 1fr 1fr; column-gap: 18px; }
}
@media (max-height: 520px) and (min-width: 640px) {
    #brief .menu-card.brief-card { width: min(780px, calc(100vw - 24px)); max-width: none; }
}

/* Menus never scroll: each box is shrunk (see fitMenus) to fit whatever way the screen is held */
.overlay { overflow: hidden; }
.overlay .menu-card { max-height: none !important; overflow: visible !important; flex-shrink: 0; }
#menu, #mapsel, #typesel { overflow: hidden; padding: 0; align-items: center; }
@media (max-width: 760px) { .map-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Upright phone: gun slots and health go under the stats and minimap; the sticks sit above the supply panels */
@media (orientation: portrait) {
    body.touch #hud-bottom { top: 195px; left: 8px; right: 8px; transform: none; align-items: center; }
    body.touch #hud-bottom #vitals { width: min(300px, calc(100vw - 24px)); }
    body.touch #hotbar { max-width: calc(100vw - 16px); }
}

/* Sideways phone: the supplies stand in columns at the two edges (heals left, grenades right),
   and the gun slots sit at the bottom in the middle, between the sticks */
@media (orientation: landscape) {
    body.touch #heal-panel .supply-row, body.touch #grenade-panel .supply-row { flex-direction: column-reverse; flex-wrap: nowrap; max-width: none; }
    body.touch #hotbar.hb-bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
}

/* Sideways on a short screen: the title goes on one line ("BATTLE ARENA") so it takes far less height
   and the menu under it can stay bigger */
@media (orientation: landscape) and (max-height: 520px) {
    .title { flex-direction: row; align-items: baseline; justify-content: center; gap: 14px; line-height: 1; }
    .title-top { font-size: 34px; letter-spacing: 6px; }
    .title-bottom { font-size: 48px; letter-spacing: 3px; }
    .credit { margin: 4px 0 12px; font-size: 13px; }
    #menu .menu-card { padding-top: 16px; }
}

/* ---------- Boss Fight: the boss's health bar in the scoreboard ---------- */
.boss-hp { display: flex; align-items: center; gap: 8px; }
.boss-hp span { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #ffd166; white-space: nowrap; }
.boss-hp div { position: relative; width: 180px; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); }
.boss-hp i { position: absolute; left: 0; top: 0; bottom: 3px; background: linear-gradient(90deg, #b3262e, #ff4f6d); transition: width 0.2s; }
.boss-hp s { position: absolute; left: 0; bottom: 0; height: 3px; background: #4cc3ff; }
.boss-hp b { font-size: 18px; line-height: 1; }
.boss-hp.rage span, .boss-hp.rage b { color: #ff4f6d; }
@media (max-width: 760px), (max-height: 500px) { .boss-hp div { width: 90px; } .boss-hp span { display: none; } .boss-hp b { font-size: 15px; } }

/* ---------- Title screen in two steps: 1. the game mode, 2. opponents and settings ---------- */
#menu-card.step-mode .cpu-select,
#menu-card.step-mode .setup-head,
#menu-card.step-mode .setup-btns { display: none !important; }
#menu-card.step-setup .mode-select,
#menu-card.step-setup .mode-dots,
#menu-card.step-setup #mode-go,
#menu-card.step-setup .best,
#menu-card.step-setup .controls-wrap,
#menu-card.step-setup .credit,
#menu-card.step-setup .fx-select { display: none !important; }
#menu-card.step-setup .title { display: none; }
.setup-head { text-align: center; margin: 4px 0 14px; }
.setup-step { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }
.setup-mode { font-family: "Black Ops One", sans-serif; font-size: 38px; color: var(--gold); letter-spacing: 2px; line-height: 1.1; margin-top: 4px; }
.setup-btns { display: flex; gap: 10px; }
.setup-btns .btn { flex: 1; }
.setup-btns .btn.ghost { flex: 0 0 34%; }
#menu-card.step-setup { min-width: min(460px, 92vw); }

/* Effects: the button at the top of the mode step, and the Effects page */
.fx-select { display: flex; justify-content: center; margin: 2px 0 10px; }
.fx-open { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 12px; cursor: pointer; font-family: inherit; color: var(--ink);
    background: rgba(0, 255, 232, 0.07); border: 1px solid rgba(0, 255, 232, 0.45); box-shadow: 0 0 12px rgba(0, 255, 232, 0.18); }
.fx-open:hover { background: rgba(0, 255, 232, 0.14); }
.fx-label { font-family: 'Black Ops One', sans-serif; font-size: 13px; letter-spacing: 2px; color: #00ffe8; text-shadow: 0 0 8px rgba(0,255,232,0.6); }
.fx-cur { font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.fx-go { font-size: 20px; line-height: 1; color: #00ffe8; }
#fxsel .fx-card { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.fx-top { text-align: center; margin-bottom: 14px; }
.fx-rarity { font-family: 'Black Ops One', sans-serif; font-size: 30px; letter-spacing: 3px; line-height: 1.1; }
.fx-name { font-size: 15px; font-weight: 700; letter-spacing: 1px; opacity: 0.85; margin-bottom: 8px; }
#fx-clip { width: 100%; max-width: 480px; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); background: #24361f; display: block; margin: 0 auto; }
.fx-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fx-item { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; border-radius: 12px; cursor: pointer; font-family: inherit; color: var(--ink);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-left: 5px solid var(--rc); }
.fx-item.on { background: rgba(255,255,255,0.12); border-color: var(--rc); box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 45%, transparent); }
.fx-item .fx-ir { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--rc); }
.fx-item .fx-in { font-size: 17px; font-weight: 700; }
.fx-item .fx-id { font-size: 12px; opacity: 0.7; }
.fx-item .fx-check { margin-left: auto; font-size: 18px; color: var(--rc); opacity: 0; }
.fx-item.on .fx-check { opacity: 1; }
@media (max-height: 500px) {
    .fx-select { margin: 0 0 4px; } .fx-open { padding: 3px 10px; }
    .fx-rarity { font-size: 22px; } #fx-clip { max-width: 340px; }
}

.fx-bank { text-align: center; font-size: 13px; letter-spacing: 2px; color: #ff8a8a; margin: -6px 0 10px; }
.fx-bank b { color: #fff; font-size: 16px; }
.fx-action { margin: 10px auto 0; display: block; min-width: 220px; padding: 10px 18px; font-size: 16px; }
.fx-action.done { opacity: 0.6; }
.fx-action.buy { background: linear-gradient(135deg, #ffc23d, #ff5a5f); color: #2a0d12; }
.fx-action.locked { opacity: 0.55; background: rgba(255,255,255,0.08); color: var(--ink); }
.fx-item.view { outline: 2px dashed var(--rc); outline-offset: 2px; }
.fx-item.lock .fx-in { opacity: 0.75; }
.fx-item .fx-check { white-space: nowrap; font-size: 13px; font-weight: 700; }
.fx-item.lock .fx-check { opacity: 1; color: #ffb3b3; }

.fx-bar { margin-top: 6px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; max-width: 220px; }
.fx-bar i { display: block; height: 100%; width: 0; background: var(--rc); box-shadow: 0 0 6px var(--rc); }

/* Phones, team modes (war, zombies, boss...): the team score chip sits at the top middle, so the health bars go under it
   instead of on top of it, and when the phone is upright the chip drops below your stats and the minimap */
body.touch #hud:has(#team-score:not(.hidden)) #hud-bottom { top: 66px; }
@media (orientation: portrait) {
    body.touch #team-score { top: 186px; }
    body.touch #hud:has(#team-score:not(.hidden)) #hud-bottom { top: 250px; }
    body.touch #hud:has(#team-score:not(.hidden)) #killfeed { display: none; }
}

.fx-search { width: 100%; box-sizing: border-box; margin: 4px 0 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(0,255,232,0.4);
    background: rgba(255,255,255,0.06); color: var(--ink); font: 600 16px Rajdhani, sans-serif; outline: none; }
.fx-search:focus { border-color: #00ffe8; box-shadow: 0 0 10px rgba(0,255,232,0.3); }
.fx-search::placeholder { color: rgba(255,255,255,0.4); }
.fx-item.hidden { display: none; }
.fx-none { text-align: center; opacity: 0.7; margin: 6px 0 12px; }
.fx-none.unlocked { opacity: 1; color: #ffc23d; font-weight: 800; letter-spacing: 2px; text-shadow: 0 0 10px #ffc23d88; }