/* Header Components */
.retro-logo-link {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.retro-logo {
    width: clamp(112px, 15vw, 180px);
    height: auto;
    display: block;
    filter:
        drop-shadow(0 2px 0 rgba(255,255,255,0.75))
        drop-shadow(0 0 10px rgba(0, 217, 255, 0.62))
        drop-shadow(0 0 16px rgba(255, 47, 178, 0.38));
}

.header-title {
    font-size: 1.55rem;
    color: #1c2350;
    text-shadow: 0 1px 0 #fff, 0 0 12px rgba(0, 217, 255, 0.62);
    letter-spacing: 0;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 5px;
}

#lang-toggle-btn {
    color: #172256;
    font-size: 1rem;
    border: 1px solid rgba(0,217,255,0.45);
    border-radius: 4px;
    padding: 4px 8px;
    background: linear-gradient(180deg, #ffffff, #ccd5e8);
}

/* Winamp-style Radio Player */
.player-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    padding: 0 8px;
    margin-bottom: 6px;
    border: 1px solid #05070d;
    border-top-color: #cbd3e3;
    border-left-color: #cbd3e3;
    border-radius: 3px;
    background: linear-gradient(90deg, #18284e, #6b748c 55%, #161b2b);
    color: #eef4ff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.player-window-buttons {
    color: #07101f;
    background: #b9c1d1;
    padding: 0 4px;
    line-height: 14px;
    border: 1px solid #303748;
}

.player-display {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #05070d;
    border-top-color: #3d4d72;
    border-left-color: #3d4d72;
    border-radius: 4px;
    background: linear-gradient(180deg, #101a38, #071026);
    box-shadow: inset 0 0 18px rgba(0, 217, 255, 0.12);
}

.player-time {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    color: #9de8ff;
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.75);
}

.player-screen {
    min-width: 0;
}

#player-track-title {
    margin-bottom: 4px;
    color: #9de8ff;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.6);
}

@keyframes vu-needle {
    0% { transform: rotate(-45deg); }
    10% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(20deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(15deg); }
    60% { transform: rotate(35deg); }
    70% { transform: rotate(5deg); }
    80% { transform: rotate(25deg); }
    90% { transform: rotate(-20deg); }
    100% { transform: rotate(-45deg); }
}

@keyframes vu-needle-right {
    0% { transform: rotate(-45deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-5deg); }
    30% { transform: rotate(25deg); }
    40% { transform: rotate(0deg); }
    50% { transform: rotate(20deg); }
    60% { transform: rotate(40deg); }
    70% { transform: rotate(10deg); }
    80% { transform: rotate(30deg); }
    90% { transform: rotate(-15deg); }
    100% { transform: rotate(-45deg); }
}

.player-spectrum {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    align-items: end;
    gap: 3px;
    height: 34px;
    padding: 3px;
    background: rgba(0,0,0,0.24);
    border: 1px solid rgba(157, 232, 255, 0.16);
}

.player-spectrum span {
    display: block;
    height: 35%;
    background: linear-gradient(180deg, #ff2fb2, #00d9ff);
    opacity: 0.85;
}

.player-spectrum span:nth-child(2n) { height: 70%; }
.player-spectrum span:nth-child(3n) { height: 48%; }
.player-spectrum span:nth-child(4n) { height: 86%; }

body.audio-playing .player-spectrum span {
    animation: led-eq 1.1s ease-in-out infinite;
}

body.audio-playing .player-spectrum span:nth-child(1) { animation-delay: -0.2s; }
body.audio-playing .player-spectrum span:nth-child(2) { animation-delay: -0.75s; }
body.audio-playing .player-spectrum span:nth-child(3) { animation-delay: -0.42s; }
body.audio-playing .player-spectrum span:nth-child(4) { animation-delay: -0.95s; }
body.audio-playing .player-spectrum span:nth-child(5) { animation-delay: -0.3s; }
body.audio-playing .player-spectrum span:nth-child(6) { animation-delay: -0.6s; }
body.audio-playing .player-spectrum span:nth-child(7) { animation-delay: -0.12s; }
body.audio-playing .player-spectrum span:nth-child(8) { animation-delay: -0.86s; }
body.audio-playing .player-spectrum span:nth-child(9) { animation-delay: -0.38s; }
body.audio-playing .player-spectrum span:nth-child(10) { animation-delay: -0.7s; }

.vu-meters {
    display: flex;
    justify-content: center;
    gap: 12px;
    height: 38px;
    padding: 2px;
}

.vu-meter {
    background: #222;
    border: 2px solid #111;
    border-top-color: #000;
    border-radius: 4px;
    width: 64px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1);
    transition: background 0.3s;
}

body.audio-playing .vu-meter {
    background: #e8dcb0; /* Warm backlight */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6), 0 0 8px rgba(232, 220, 176, 0.3);
}

.vu-meter::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10%;
    width: 80%;
    height: 15px;
    border-radius: 50% 50% 0 0;
    border-top: 1.5px solid rgba(255,255,255,0.15);
}
body.audio-playing .vu-meter::before {
    border-top: 1.5px solid #444;
}

.vu-meter::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 10%;
    width: 25%;
    height: 15px;
    border-radius: 0 50% 0 0;
    border-top: 1.5px solid rgba(200,50,50,0.3);
}
body.audio-playing .vu-meter::after {
    border-top: 1.5px solid #d20000;
}

.vu-needle {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 2px;
    height: 40px;
    background: #000;
    transform-origin: bottom center;
    transform: rotate(-45deg);
    z-index: 2;
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.4, 1);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    opacity: 0.5;
}
body.audio-playing .vu-needle {
    opacity: 1;
}

body.audio-playing .vu-meters .vu-meter:first-child .vu-needle {
    animation: vu-needle 0.7s ease-in-out infinite alternate;
}

body.audio-playing .vu-meters .vu-meter:last-child .vu-needle {
    animation: vu-needle-right 0.8s ease-in-out infinite alternate;
}

.vu-label {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.55rem;
    font-weight: bold;
    color: rgba(255,255,255,0.2);
    font-family: sans-serif;
    z-index: 1;
}
body.audio-playing .vu-label {
    color: #333;
}

.station-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 305px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.radio-status {
    min-height: 1.2em;
    margin: 8px 2px 5px;
    color: #273769;
    font: 0.72rem var(--font-mono);
}

.station-list[aria-busy="true"]::before {
    content: 'Loading stations…';
    display: block;
    padding: 8px;
    color: #273769;
    font: 0.75rem var(--font-mono);
}

.station-btn {
    display: grid;
    grid-template-columns: 28px 1fr 8px;
    align-items: center;
    text-align: left;
    color: #172256;
    font-size: 0.88rem;
    padding: 6px 6px;
    border: 1px solid transparent;
    border-bottom-color: rgba(0, 217, 255, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.station-btn:hover,
.station-btn.active {
    border-color: rgba(0, 217, 255, 0.48);
    background: linear-gradient(90deg, rgba(255,47,178,0.2), rgba(0,217,255,0.34), rgba(255,255,255,0.72));
}

.station-btn[aria-pressed="true"] {
    border-color: rgba(20, 39, 92, 0.68);
    box-shadow: inset 3px 0 0 var(--color-hot-pink), inset 0 1px 0 rgba(255,255,255,0.72);
}

.station-icon {
    font-size: 1.2rem;
}

.status-indicator {
    width: 6px;
    height: 15px;
    background: #333;
    border-radius: 2px;
}

.station-btn.online .status-indicator {
    background: var(--color-cyan);
    box-shadow: 0 0 5px var(--color-cyan);
}

.station-btn.active .status-indicator {
    background: var(--color-text-green);
    box-shadow: 0 0 5px var(--color-text-green);
}

.now-playing {
    margin-top: 10px;
    background: #0d1c40;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-cyan);
    border: 1px solid rgba(0, 217, 255, 0.32);
    box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.08);
}

.now-playing-label {
    color: var(--color-hot-pink);
    margin-bottom: 4px;
}

/* Game Menu */
.game-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 768px) {
    .game-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.game-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 8px;
    border: 1px solid rgba(20, 39, 92, 0.28);
    border-radius: 4px;
    color: #101a44;
    text-align: left;
    background: rgba(255,255,255,0.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.game-menu-btn > span.game-menu-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.game-menu-btn:hover {
    background: linear-gradient(90deg, rgba(255,47,178,0.2), rgba(0,217,255,0.32), rgba(255,255,255,0.8));
    border-color: rgba(20, 39, 92, 0.48);
}

.game-menu-btn:focus-visible,
.station-btn:focus-visible,
.game-action:focus-visible,
#btn-back-menu:focus-visible {
    outline-offset: 1px;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .game-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.game-icon {
    font-size: 1.35rem;
    width: 28px;
    flex: 0 0 28px;
    text-align: center;
}

.game-title {
    font-size: 0.86rem;
    font-weight: 800;
    color: #101a44;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-subtitle {
    font-size: 0.66rem;
    opacity: 1;
    color: #273769;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .game-menu-btn {
        padding: 5px;
        gap: 4px;
        min-height: 48px;
    }
    .game-icon {
        font-size: 1.1rem;
        width: 20px;
        flex: 0 0 20px;
    }
    .game-title {
        font-size: 0.78rem;
    }
    .game-subtitle {
        font-size: 0.58rem;
    }
}

/* Game Board Wrapper */
.game-header {
    text-align: center;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-header h2 {
    color: #101a44;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    font-size: 1.15rem;
}

#btn-back-menu {
    color: #101a44;
    background: linear-gradient(180deg, #f8fbff, #aeb8cf);
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #273769;
    border-top-color: #fff;
    border-left-color: #fff;
    font-weight: 800;
}

.help-header {
    width: 100%;
    color: inherit;
    text-align: left;
    border: 0;
}

.game-shell {
    width: 100%;
    color: #101a44;
    font-family: var(--font-main);
}

.game-status {
    margin-top: 10px;
    text-align: center;
    color: #101a44;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    height: 42px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.game-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.game-action {
    padding: 6px 10px;
    border: 1px solid #273769;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 3px;
    color: #101a44;
    background: linear-gradient(180deg, #f8fbff, #aeb8cf);
    font-weight: 800;
}

.game-action:active {
    border-top-color: #273769;
    border-left-color: #273769;
    border-bottom-color: #fff;
    border-right-color: #fff;
}

.game-action.active {
    background: linear-gradient(180deg, #ffd85c, #ff9c2a);
}

.game-end-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: calc(100% - 28px);
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,0.86);
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 4px;
    background: rgba(248,251,255,0.92);
    color: #101a44;
    font-family: var(--font-mono);
    font-size: clamp(0.9rem, 4vw, 1.35rem);
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(16,26,68,0.18);
}

.game-end-overlay[hidden] {
    display: none;
}

.game-restart-link {
    appearance: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0;
    background: transparent;
    color: #b00068;
    font: inherit;
    font-size: 0.74em;
    line-height: 1.1;
    text-transform: none;
    cursor: pointer;
    white-space: nowrap;
}

.board-placeholder {
    color: #101a44;
}

#game-board-wrapper {
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

#game-board-wrapper:has(.game-frame) {
    flex: 1;
    align-items: stretch;
}

.game-frame {
    width: 100%;
    min-height: 500px;
    height: clamp(540px, 74vh, 800px);
    border: 1px solid #101a44;
    border-radius: 4px;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 10px 24px rgba(0,0,0,0.22);
}

@media (max-width: 767px) {
    #active-game-container {
        padding: 2px;
    }

    #active-game-container > .inner-border {
        padding: 4px;
    }

    body.game-active #game-help-panel {
        display: none;
    }

    .game-frame {
        min-height: 86vh;
        height: 92dvh;
        max-height: none;
    }
}

.checkers-native {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    --checker-cell-size: clamp(30px, 8vw, 52px);
}

.checkers-topline,
.checkers-scorebar {
    width: min(100%, 520px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.checkers-topline h3 {
    margin: 0;
    color: #101a44;
    font-family: var(--font-mono);
    letter-spacing: 0;
}

.checkers-mode-switch {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.checkers-scorebar {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
}

.checkers-player,
.checkers-turn {
    min-height: 46px;
    border: 1px solid #273769;
    border-top-color: #fff;
    border-left-color: #fff;
    background: rgba(255,255,255,0.42);
    color: #101a44;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 8px;
    font-size: 0.85rem;
    font-weight: 800;
}

.checkers-player {
    flex-wrap: wrap;
}

.checkers-player-name {
    min-width: 44px;
}

.checkers-score {
    flex-basis: 100%;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    color: #101a44;
    line-height: 1;
    text-transform: uppercase;
}

.checkers-score span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

.checkers-score b {
    font-size: 2rem;
    line-height: 0.95;
}

.checkers-player small {
    flex-basis: 100%;
    color: rgba(16,26,68,0.76);
    font-size: 0.68rem;
    line-height: 1;
    text-align: center;
}

.checkers-player.active {
    box-shadow: inset 0 0 0 2px #ff2fb2, 0 0 12px rgba(255,47,178,0.28);
}

.checkers-turn {
    min-width: 116px;
    background: #10285b;
    color: #ffd85c;
    font-family: var(--font-mono);
    text-align: center;
}

.checkers-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset -3px -3px 5px rgba(0,0,0,0.3);
}

.checkers-chip.red { background: radial-gradient(circle at 32% 28%, #ff8fba, #d41462 72%); }
.checkers-chip.black { background: radial-gradient(circle at 32% 28%, #9de8ff, #17366e 72%); }

.checkers-board-wrap {
    position: relative;
    width: min-content;
    max-width: 100%;
}

.checkers-board {
    display: grid;
    grid-template-columns: repeat(8, var(--checker-cell-size));
    grid-template-rows: repeat(8, var(--checker-cell-size));
    justify-content: center;
    border: 2px solid #1b2441;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background: #1b2441;
}

.checker-square {
    appearance: none;
    width: var(--checker-cell-size);
    height: var(--checker-cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16,26,68,0.14);
    padding: 0;
    border-radius: 0;
}

.checker-square.light { background: #e9f0fc; }
.checker-square.dark { background: #334579; }
.checker-square.selected { outline: 3px solid #ff2fb2; outline-offset: -3px; }
.checker-square.legal { box-shadow: inset 0 0 0 4px rgba(0,217,255,0.65); cursor: pointer; }
.checker-square.capture { box-shadow: inset 0 0 0 4px rgba(255,216,92,0.85); }
.checker-square.path-end { box-shadow: inset 0 0 0 4px #ffd85c, inset 0 0 18px rgba(255,216,92,0.62); }

.checker-piece {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.75);
    box-shadow: inset -4px -5px 8px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
    will-change: transform;
}

.checker-piece.red { background: radial-gradient(circle at 32% 28%, #ff8fba, #d41462 72%); }
.checker-piece.black { background: radial-gradient(circle at 32% 28%, #9de8ff, #17366e 72%); }
.checker-piece.movable { box-shadow: inset -4px -5px 8px rgba(0,0,0,0.35), 0 0 0 3px #ffd85c, 0 2px 8px rgba(0,0,0,0.35); }
.checker-piece.king { color: #ffd85c; text-shadow: 0 1px 2px rgba(0,0,0,0.65); }
.checker-piece.checker-moving {
    animation: checker-slide 400ms cubic-bezier(0.16, 0.82, 0.28, 1);
}

@keyframes checker-slide {
    0% {
        transform: translate(calc(var(--move-x) * 100%), calc(var(--move-y) * 100%)) scale(1.06);
        filter: brightness(1.14);
    }
    72% {
        transform: translate(0, 0) scale(1.06);
        filter: brightness(1.08);
    }
    100% {
        transform: translate(0, 0) scale(1);
        filter: brightness(1);
    }
}

@media (max-width: 767px) {
    .checkers-topline,
    .checkers-scorebar {
        width: 100%;
    }

    .checkers-topline {
        align-items: flex-start;
    }

    .checkers-mode-switch .game-action {
        padding-inline: 7px;
        font-size: 0.74rem;
    }

    .checkers-scorebar {
        grid-template-columns: 1fr 1fr;
    }

    .checkers-turn {
        grid-column: 1 / -1;
        order: -1;
    }

    .checkers-board, .c4-board, .c4-drop-row {
        --checker-cell-size: clamp(28px, 11vw, 42px);
        --c4-cell-size: clamp(28px, 11vw, 42px);
    }
}

.peg-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(28px, 44px));
    grid-template-rows: repeat(7, minmax(28px, 44px));
    gap: 4px;
    justify-content: center;
}

.peg-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.peg-hole {
    width: 82%;
    height: 82%;
    border-radius: 50%;
    border: 2px solid #273769;
    background: radial-gradient(circle at 50% 58%, #1d2747 0 18%, #60719b 19% 100%);
    cursor: pointer;
}

.peg-hole.selected { outline: 3px solid #ff2fb2; }
.peg-hole.legal { box-shadow: 0 0 0 3px rgba(0,217,255,0.68); }
.peg-hole.has-peg::after {
    content: "";
    display: block;
    width: 70%;
    height: 70%;
    margin: 15%;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff36d, #ff2fb2 70%);
    box-shadow: inset -4px -5px 8px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.4);
}

.solitaire-game,
.klondike-native {
    display: grid;
    align-content: start;
    gap: 10px;
    --klondike-gap: clamp(3px, 1.2vw, 8px);
    --klondike-card-w: calc((100cqw - 20px - (var(--klondike-gap) * 6)) / 7);
    --klondike-card-h: calc(var(--klondike-card-w) * 1.4);
    --klondike-face-step: calc(var(--klondike-card-w) * 0.35);
    --klondike-down-step: calc(var(--klondike-card-w) * 0.15);
}

.klondike-native {
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.26);
    border-radius: 6px;
    background: #008000;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), inset 0 0 36px rgba(0,0,0,0.18);
    color: #f5f2ea;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    overflow: visible;
    min-height: calc((var(--klondike-card-w) * 7.5) + 85px);
}

.klondike-topline {
    width: min(100%, calc((var(--klondike-card-w) * 7) + (var(--klondike-gap) * 6)));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    justify-self: center;
}

.klondike-topline h3 {
    margin: 0;
    color: #f5f2ea;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    text-shadow: 1px 1px 2px #000;
}

.klondike-options {
    width: min(100%, calc((var(--klondike-card-w) * 7) + (var(--klondike-gap) * 6)));
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #f5f2ea;
    font-size: 0.78rem;
    text-shadow: 1px 1px 0 #000;
}

.klondike-options .game-action {
    min-width: 34px;
    padding: 4px 8px;
    font-size: 0.72rem;
}

.klondike-toggle {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.34);
    border-top-color: rgba(255,255,255,0.58);
    border-left-color: rgba(255,255,255,0.58);
    border-radius: 3px;
    background: rgba(0,0,0,0.22);
    font-weight: 800;
    cursor: pointer;
}

.klondike-toggle input {
    margin: 0;
}

.klondike-board {
    position: relative;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.solitaire-top,
.solitaire-tableau,
.klondike-row {
    display: grid;
    grid-template-columns: repeat(7, var(--klondike-card-w));
    gap: var(--klondike-gap);
    justify-content: center;
}

.klondike-spacer {
    min-width: 0;
}

.card-pile,
.klondike-pile {
    appearance: none;
    position: relative;
    width: var(--klondike-card-w);
    min-height: var(--klondike-card-h);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    background: rgba(0,0,0,0.05);
    padding: 0;
    color: #f5f2ea;
    overflow: visible;
}

.klondike-pile.legal {
    box-shadow: 0 0 0 3px rgba(255,255,0,0.85), inset 0 0 0 2px rgba(255,255,255,0.3);
}

.klondike-pile.selected,
.klondike-pile.hinted {
    outline: 3px solid #ff2fb2;
    outline-offset: -3px;
}

.tableau-pile,
.klondike-pile.tableau-pile {
    min-height: calc(var(--klondike-card-h) + 124px);
}

.playing-card {
    width: 100%;
    height: var(--klondike-card-h);
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    background: #ffffff;
    color: #111;
    font-family: var(--font-main), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: calc(var(--klondike-card-w) * 0.32);
    font-weight: 900;
    display: block;
    padding: 0;
    margin-bottom: calc(var(--klondike-card-h) * -0.68);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.35));
    overflow: hidden;
}

.playing-card.dragging-source {
    opacity: 0.35;
}

.klondike-card-prep {
    pointer-events: none;
    transition: none;
    will-change: transform;
}

.klondike-card-moving {
    pointer-events: none;
    transition: transform 520ms cubic-bezier(0.16, 0.78, 0.22, 1);
    will-change: transform;
}

.klondike-drag-ghost {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    margin: 0;
    opacity: 0.96;
    transform: translate(0, 0);
    transition: none;
}

.klondike-pile > .playing-card {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
}

.klondike-pile.waste-pile {
    overflow: visible;
}

.klondike-pile.waste-pile > .playing-card {
    width: 100%;
}

.playing-card.red-card {
    color: #d0182f;
}

.playing-card.face-down {
    color: transparent;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255,255,255,0.35) 29% 31%, transparent 32%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 4px, transparent 4px 8px),
        linear-gradient(180deg, #17366e, #0d2146);
    background-size: auto, 12px 12px, auto;
    border: 4px solid #fffdf4;
    box-shadow: inset 0 0 0 2px #17366e, 1px 1px 4px rgba(0,0,0,0.6);
}

.card-back-mark {
    position: absolute;
    inset: 16% 14%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255,255,255,0.15) 0 8%, transparent 9% 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 3px, transparent 3px 6px);
    color: transparent;
    font-family: "Times New Roman", Georgia, serif;
    font-size: calc(var(--klondike-card-w) * 0.45);
    font-weight: 900;
}

.card-back-mark::after {
    content: "";
    width: 60%;
    height: 60%;
    background-image: url('../favicon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.card-corner {
    position: absolute;
    left: 6%;
    top: 5%;
    line-height: 0.9;
    text-align: center;
}

.card-corner.bottom {
    inset: auto 5% 4% auto;
    transform: rotate(180deg);
}

.card-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--klondike-card-w) * 0.68);
    line-height: 1;
    opacity: 0.96;
}

.playing-card.selected {
    outline: 3px solid #00d9ff;
    outline-offset: -3px;
}

.playing-card.hinted {
    outline: 3px solid #ff2fb2;
    outline-offset: -3px;
}

.foundation-symbol {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.28);
    font-size: calc(var(--klondike-card-w) * 0.42);
    font-weight: 900;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.45);
}

.stock-label {
    color: rgba(255,255,255,0.82);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.7rem;
    text-align: center;
    margin-top: calc(var(--klondike-card-h) * 0.38);
    display: block;
    text-shadow: 1px 1px 0 #000;
}

@media (max-width: 767px) {
    .klondike-native {
        --klondike-gap: 2px;
        --klondike-card-w: calc((100cqw - 8px - (var(--klondike-gap) * 6)) / 7);
        --klondike-face-step: calc(var(--klondike-card-w) * 0.38);
        --klondike-down-step: calc(var(--klondike-card-w) * 0.16);
        padding: 8px 4px;
    }

    .klondike-topline {
        width: min(100%, calc((var(--klondike-card-w) * 7) + (var(--klondike-gap) * 6)));
    }

    .klondike-options {
        gap: 5px;
        font-size: 0.72rem;
    }

    .klondike-options .game-action,
    .klondike-toggle {
        padding: 4px 6px;
        font-size: 0.68rem;
    }

    .klondike-pile.tableau-pile {
        min-height: calc(var(--klondike-card-h) + 224px);
    }

    .playing-card {
        font-size: calc(var(--klondike-card-w) * 0.23);
    }
}

@media (prefers-reduced-motion: reduce) {
    .klondike-card-moving {
        transition: none;
    }
}

/* Tetris */
.tetris-native { display: grid; gap: 10px; justify-items: center; padding: 10px; }
.tetris-topline { width: min(100%, 430px); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tetris-topline h3 { margin: 0; color: #101a44; font-family: var(--font-mono); }
.tetris-topline .game-toolbar { margin: 0; }
.tetris-layout { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.tetris-board { display: grid; grid-template-columns: repeat(10, clamp(16px, 4.6vw, 25px)); grid-template-rows: repeat(20, clamp(16px, 4.6vw, 25px)); gap: 1px; padding: 5px; background: #071126; border: 4px solid #273769; border-top-color: #9fc6ff; border-left-color: #9fc6ff; box-shadow: inset 0 0 14px #000, 0 8px 16px rgba(0,0,0,.3); }
.tetris-cell { background: rgba(122, 153, 204, .16); min-width: 0; min-height: 0; }
.tetris-i { background: #33d9ff; }.tetris-j { background: #4d75ff; }.tetris-l { background: #ff9c2a; }.tetris-o { background: #ffd85c; }.tetris-s { background: #55db73; }.tetris-t { background: #b366ff; }.tetris-z { background: #ff5576; }
.tetris-cell[class*="tetris-"] { box-shadow: inset 2px 2px rgba(255,255,255,.42), inset -2px -2px rgba(0,0,0,.3); }
.tetris-sidebar { display: grid; gap: 7px; min-width: 86px; }
.tetris-stat, .tetris-next { display: grid; gap: 2px; padding: 6px; background: #dcecff; border: 2px solid #273769; box-shadow: inset 1px 1px #fff; text-align: center; color: #101a44; font: 700 .68rem var(--font-mono); }
.tetris-stat strong { font-size: .95rem; }
.tetris-next-grid { display: grid; grid-template-columns: repeat(4, 14px); grid-template-rows: repeat(4, 14px); justify-content: center; min-height: 60px; padding-top: 4px; }
.tetris-next-grid i { display: block; width: 14px; height: 14px; background: rgba(39,55,105,.12); border: 1px solid rgba(255,255,255,.35); }
.tetris-next-grid i[class*="tetris-"] { box-shadow: inset 2px 2px rgba(255,255,255,.42), inset -2px -2px rgba(0,0,0,.3); }
.tetris-next-grid .tetris-i { background: #33d9ff; }
.tetris-next-grid .tetris-j { background: #4d75ff; }
.tetris-next-grid .tetris-l { background: #ff9c2a; }
.tetris-next-grid .tetris-o { background: #ffd85c; }
.tetris-next-grid .tetris-s { background: #55db73; }
.tetris-next-grid .tetris-t { background: #b366ff; }
.tetris-next-grid .tetris-z { background: #ff5576; }
.tetris-message { min-height: 1.2em; color: #b00c45; font: 800 .9rem var(--font-mono); letter-spacing: .08em; }
.tetris-touch-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(100%, 360px); }
.tetris-touch-controls button { min-height: 38px; border: 2px solid #273769; border-top-color: #fff; border-left-color: #fff; background: linear-gradient(#dcecff, #93b5e9); color: #101a44; font: 900 1.1rem var(--font-mono); touch-action: manipulation; }
.tetris-touch-controls button:active { border-color: #fff; border-top-color: #273769; border-left-color: #273769; }
.tetris-controls { margin: 0; max-width: 420px; text-align: center; color: #273769; font-size: .72rem; }
@media (max-width: 420px) { .tetris-board { grid-template-columns: repeat(10, clamp(15px, 6vw, 22px)); grid-template-rows: repeat(20, clamp(15px, 6vw, 22px)); } .tetris-layout { gap: 6px; } .tetris-sidebar { min-width: 68px; gap: 4px; } .tetris-stat, .tetris-next { padding: 4px; font-size: .58rem; } }
@media (prefers-reduced-motion: reduce) { .tetris-cell { transition: none; } }

.spider-native {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.26);
    border-radius: 6px;
    background: #008000;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), inset 0 0 36px rgba(0,0,0,0.18);
    color: #f5f2ea;
    --spider-gap: clamp(2px, 0.8vw, 6px);
    --spider-card-w: calc((100cqw - 20px - (var(--spider-gap) * 9)) / 10);
    --spider-card-h: calc(var(--spider-card-w) * 1.382);
    --spider-face-step: calc(var(--spider-card-w) * 0.36);
    --spider-down-step: calc(var(--spider-card-w) * 0.16);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    overflow: visible;
    min-height: calc((var(--spider-card-w) * 6.5) + 85px);
}

.spider-topline {
    width: min(100%, calc((var(--spider-card-w) * 10) + (var(--spider-gap) * 9)));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    justify-self: center;
}

.spider-topline h3 {
    margin: 0;
    color: #f5f2ea;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    text-shadow: 1px 1px 2px #000;
}

.spider-stats,
.spider-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #f5f2ea;
    font-size: 0.78rem;
    font-weight: 800;
    text-shadow: 1px 1px 0 #000;
}

.spider-stats span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.34);
    border-top-color: rgba(255,255,255,0.58);
    border-left-color: rgba(255,255,255,0.58);
    border-radius: 3px;
    background: rgba(0,0,0,0.22);
}

.spider-stats strong {
    color: #ffd85c;
    font-family: var(--font-mono);
}

.spider-options {
    width: min(100%, calc((var(--spider-card-w) * 10) + (var(--spider-gap) * 9)));
    justify-self: center;
}

.spider-options .game-action {
    min-width: 64px;
    padding: 4px 8px;
    font-size: 0.72rem;
}

.spider-board-wrap {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: center;
    width: 100%;
}

.spider-stock {
    appearance: none;
    position: relative;
    width: var(--spider-card-w);
    height: var(--spider-card-h);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    overflow: visible;
}

.spider-stock:disabled {
    opacity: 0.55;
    cursor: default;
}

.spider-stock-count {
    position: absolute;
    right: -8px;
    bottom: -7px;
    z-index: 4;
    min-width: 20px;
    padding: 2px 5px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 999px;
    background: #101a44;
    color: #ffd85c;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 1px 1px 0 #000;
}

.spider-foundations {
    width: min(100%, calc((var(--spider-card-w) * 10) + (var(--spider-gap) * 9)));
    display: grid;
    grid-template-columns: repeat(8, var(--spider-card-w));
    gap: var(--spider-gap);
    justify-content: center;
    justify-self: center;
}

.spider-foundation {
    position: relative;
    display: block;
    width: var(--spider-card-w);
    height: var(--spider-card-h);
    border: 2px solid rgba(255,255,255,0.22);
    border-radius: 5px;
    background: rgba(0,0,0,0.12);
    color: rgba(255,255,255,0.82);
    text-align: center;
    font-family: "Times New Roman", Georgia, serif;
    font-weight: 900;
    line-height: 0.82;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.65);
}

.spider-foundation.filled {
    border: 1px solid #c0c0c0;
    background: #ffffff;
    color: #111;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    text-shadow: none;
}

.spider-foundation.filled.red-card {
    color: #d0182f;
}

.spider-mini-stack {
    display: inline-block;
    padding-top: 2px;
    font-size: calc(var(--spider-card-w) * 0.2);
}

.spider-tableau {
    width: min(100%, calc((var(--spider-card-w) * 10) + (var(--spider-gap) * 9)));
    display: grid;
    grid-template-columns: repeat(10, var(--spider-card-w));
    gap: var(--spider-gap);
    justify-content: center;
    justify-self: center;
}

.spider-pile {
    position: relative;
    width: var(--spider-card-w);
    min-height: calc(var(--spider-card-h) + 210px);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    background: rgba(0,0,0,0.05);
    padding: 0;
    color: #f5f2ea;
    overflow: visible;
    cursor: pointer;
    box-sizing: border-box;
}

.spider-pile.hinted {
    outline: 3px solid #ff2fb2;
    outline-offset: -3px;
}

.spider-card {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--spider-card-h);
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    background: #ffffff;
    color: #111;
    font-family: var(--font-main), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: calc(var(--spider-card-w) * 0.32);
    font-weight: 900;
    display: block;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.35));
    overflow: hidden;
}

.spider-card.red-card {
    color: #d0182f;
}

.spider-stock .spider-card {
    inset: 0 auto auto 0;
}

.spider-card.movable:not(.spider-card-moving):hover {
    transform: translateY(-1px);
}

.spider-card-prep {
    pointer-events: none;
    transition: none;
    will-change: transform;
}

.spider-card-moving {
    pointer-events: none;
    transition: transform 750ms cubic-bezier(0.16, 0.78, 0.22, 1);
    will-change: transform;
}

.spider-card-flyout {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    margin: 0;
    opacity: 0.98;
    transition:
        transform 560ms cubic-bezier(0.2, 0.72, 0.22, 1),
        opacity 560ms ease-out;
    will-change: transform, opacity;
}

.spider-card.dragging-source {
    opacity: 0.35;
}

.spider-drag-ghost {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    margin: 0;
    opacity: 0.96;
    transform: translate(0, 0);
    transition: none;
}

.spider-card-back {
    color: transparent;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255,255,255,0.35) 29% 31%, transparent 32%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 4px, transparent 4px 8px),
        linear-gradient(180deg, #17366e, #0d2146);
    background-size: auto, 12px 12px, auto;
    border: 4px solid #fffdf4;
    box-shadow: inset 0 0 0 2px #17366e, 1px 1px 4px rgba(0,0,0,0.6);
}

.spider-card-back::after {
    display: none;
}

.spider-card-corner {
    position: absolute;
    left: 6%;
    top: 5%;
    line-height: 0.9;
    text-align: center;
}

.spider-card-corner.bottom {
    inset: auto 5% 4% auto;
    transform: rotate(180deg);
}

.spider-card-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--spider-card-w) * 0.68);
    line-height: 1;
    opacity: 0.96;
}

.spider-card.hinted {
    outline: 3px solid #ff2fb2;
    outline-offset: -3px;
}

.spider-foundation.just-filled {
    animation: spider-foundation-pop 420ms ease-out;
}

@keyframes spider-foundation-pop {
    0% {
        transform: translateY(-6px) scale(0.9);
        box-shadow: 0 0 0 rgba(255,216,92,0);
    }

    55% {
        transform: translateY(0) scale(1.06);
        box-shadow: 0 0 18px rgba(255,216,92,0.9);
    }

    100% {
        transform: translateY(0) scale(1);
        box-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spider-card-moving {
        transition: none;
    }

    .spider-card-flyout {
        transition: none;
    }

    .spider-foundation.just-filled {
        animation: none;
    }
}

@media (max-width: 767px) {
    .spider-native {
        --spider-gap: 1.5px;
        --spider-card-w: calc((100cqw - 8px - (var(--spider-gap) * 9)) / 10);
        --spider-face-step: calc(var(--spider-card-w) * 0.4);
        --spider-down-step: calc(var(--spider-card-w) * 0.18);
        padding: 8px 4px;
    }

    .spider-topline {
        justify-content: center;
        flex-wrap: wrap;
    }

    .spider-stats,
    .spider-options {
        gap: 5px;
        font-size: 0.72rem;
    }

    .spider-options .game-action {
        min-width: 54px;
        padding: 4px 6px;
        font-size: 0.68rem;
    }

    .spider-pile {
        min-height: calc(var(--spider-card-h) + 230px);
    }

    .spider-card {
        font-size: calc(var(--spider-card-w) * 0.23);
    }
}

.c4-drop-row {
    display: grid;
    grid-template-columns: repeat(7, var(--c4-cell-size, clamp(30px, 8vw, 52px)));
    gap: 4px;
    justify-content: center;
    margin-bottom: 5px;
    padding: 0 10px;
}

.connect4-native {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    --c4-cell-size: clamp(30px, 8vw, 52px);
}

.c4-topline,
.c4-layout {
    width: min(100%, 520px);
    display: flex;
    gap: 15px;
}

.c4-topline {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.c4-topline h3 {
    margin: 0;
    color: #101a44;
    font-family: var(--font-mono);
    letter-spacing: 0;
}

.c4-status-stack {
    display: grid;
    gap: 6px;
    justify-items: center;
}

.c4-reset-btn {
    min-width: 168px;
}

.c4-mode-switch {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.c4-turn-badge {
    min-width: 168px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid #273769;
    border-top-color: #fff;
    border-left-color: #fff;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24), 0 0 14px rgba(16,26,68,0.18);
}

.c4-turn-badge.red {
    background: linear-gradient(180deg, #ff6f9f, #d41462);
}

.c4-turn-badge.blue {
    background: linear-gradient(180deg, #68dcff, #17366e);
}

.c4-turn-badge.thinking {
    background: linear-gradient(180deg, #ffd85c, #ff9c2a);
    color: #101a44;
}

.c4-turn-badge.draw {
    background: linear-gradient(180deg, #f8fbff, #aeb8cf);
    color: #101a44;
}

.c4-layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.c4-board-wrap {
    width: min-content;
    max-width: 100%;
}

.c4-drop-btn {
    height: 26px;
    border: 1px solid #273769;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 3px;
    color: #101a44;
    background: linear-gradient(180deg, #f8fbff, #aeb8cf);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.c4-drop-btn:disabled {
    opacity: 0.38;
    cursor: default;
}

.c4-board-shell {
    position: relative;
}

.c4-board {
    display: grid;
    grid-template-columns: repeat(7, var(--c4-cell-size, clamp(30px, 8vw, 52px)));
    grid-template-rows: repeat(6, var(--c4-cell-size, clamp(30px, 8vw, 52px)));
    gap: 4px;
    justify-content: center;
    padding: 10px;
    border: 2px solid #1b2441;
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(0,217,255,0.16), rgba(255,47,178,0.12)),
        #334579;
    box-shadow: 0 10px 20px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.18);
    overflow: hidden;
}

.c4-cell {
    appearance: none;
    width: var(--c4-cell-size, clamp(30px, 8vw, 52px));
    height: var(--c4-cell-size, clamp(30px, 8vw, 52px));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16,26,68,0.24);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 44%, #121c3d 0 58%, #223462 59% 100%);
    cursor: pointer;
    overflow: visible;
    box-shadow: inset 0 2px 7px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.24);
}

.c4-cell:disabled {
    opacity: 1;
    cursor: default;
}

.c4-piece {
    width: 76%;
    height: 76%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.75);
    box-shadow: inset -4px -5px 8px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4);
}

.c4-winner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: calc(100% - 28px);
    padding: 10px 13px;
    border: 2px solid rgba(255,255,255,0.82);
    border-radius: 5px;
    color: #101a44;
    font-family: var(--font-mono);
    font-size: clamp(0.9rem, 4vw, 1.35rem);
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    text-shadow: none;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0 1px rgba(16,26,68,0.45), 0 14px 28px rgba(0,0,0,0.34);
}

.c4-winner[hidden] {
    display: none;
}

.c4-winner.red {
    background: rgba(248,251,255,0.92);
}

.c4-winner.blue {
    background: rgba(248,251,255,0.92);
}

.c4-winner.draw {
    background: rgba(248,251,255,0.92);
    color: #101a44;
    text-shadow: none;
}

.c4-red {
    background: radial-gradient(circle at 32% 28%, #ff8fba, #d41462 72%);
}

.c4-yellow {
    background: radial-gradient(circle at 32% 28%, #9de8ff, #17366e 72%);
}

.c4-winning-piece {
    animation: c4-win-glow 900ms ease-in-out infinite alternate;
    box-shadow:
        inset -4px -5px 8px rgba(0,0,0,0.35),
        0 0 0 3px #ffd85c,
        0 0 16px rgba(255,216,92,0.92);
}

.score-panel {
    width: min(100%, 520px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    color: #101a44;
}

.score-panel h3 {
    color: #101a44;
    border-bottom: 2px solid #273769;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-shadow: none;
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-width: 146px;
    margin-bottom: 0;
    padding: 7px 10px;
    border: 1px solid rgba(39,55,105,0.38);
    border-top-color: rgba(255,255,255,0.86);
    border-left-color: rgba(255,255,255,0.86);
    border-radius: 3px;
    background: rgba(248,251,255,0.68);
    font-weight: 800;
}

.score-p1 {
    color: #d41462;
}

.score-ai {
    color: #17366e;
}

.score-val {
    font-size: 2rem;
    font-weight: 800;
}

.instructions {
    margin-top: auto;
    text-align: center;
    color: #101a44;
    font-family: var(--font-mono);
}

.c4-falling {
    animation: c4-drop 340ms cubic-bezier(0.18, 0.76, 0.28, 1.08);
}

@keyframes c4-drop {
    from {
        transform: translateY(var(--drop-distance));
    }
    to {
        transform: translateY(0);
    }
}

@keyframes c4-win-glow {
    from {
        filter: brightness(1);
    }
    to {
        filter: brightness(1.24);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c4-falling,
    .c4-winning-piece,
    .checker-piece.checker-moving {
        animation: none;
    }
}

@media (max-width: 767px) {
    .c4-topline,
    .c4-layout {
        width: 100%;
    }

    .c4-topline {
        align-items: flex-start;
        justify-content: center;
    }

    .c4-status-stack,
    .c4-reset-btn,
    .c4-turn-badge {
        width: 100%;
        min-width: 0;
    }

    .c4-mode-switch {
        justify-content: center;
    }

    .c4-mode-switch .game-action {
        padding-inline: 7px;
        font-size: 0.74rem;
    }

    .score-panel {
        width: min(100%, 360px);
        min-width: 0;
        justify-content: stretch;
    }

    .score-row {
        min-width: 0;
        flex: 1 1 0;
        padding: 6px 8px;
    }

    .score-val {
        font-size: 1.55rem;
    }
}

/* Station Meta */
.station-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.station-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #101a44;
    font-weight: 800;
}
.station-meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: #21305f;
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 14px;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.78);
}

.station-btn.active .station-meta,
.station-btn:hover .station-meta {
    color: #09235d;
}

/* Radio Controls Player */
.radio-controls-player {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(0, 217, 255, 0.22);
    border-radius: 6px;
    background: linear-gradient(180deg, #cfd7e8, #8f9ab6);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.volume-control button {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    border: 1px solid rgba(0, 217, 255, 0.4);
    background: #080b12;
    color: var(--color-cyan);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vol-indicator {
    flex: 1;
    height: 10px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: 2px;
}

.playback-control {
    display: flex;
    gap: 10px;
}

.playback-control button {
    flex: 1;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom-color: var(--color-panel-border-dark);
    border-right-color: var(--color-panel-border-dark);
    border-radius: 3px;
    background: linear-gradient(180deg, #4b536a, #171c29);
    color: #fff;
    font-weight: bold;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

.sleep-timer-control {
    display: flex;
    margin-top: 10px;
}

.sleep-timer-control button {
    flex: 1;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom-color: var(--color-panel-border-dark);
    border-right-color: var(--color-panel-border-dark);
    border-radius: 3px;
    background: linear-gradient(180deg, #2b3040, #0c0e15);
    color: var(--color-text-amber);
    font-weight: bold;
    font-family: var(--font-mono);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

.sleep-timer-control button.active {
    color: var(--color-cyan);
}

/* Retro Radio Visual Stage */
.retro-stage {
    position: relative;
    min-height: 410px;
    height: 100%;
    border: 1px solid rgba(34, 49, 102, 0.34);
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(180deg, #8edfff 0%, #ffc4ed 43%, #31286e 44%, #140d36 100%);
}

.retro-stage-sky,
.retro-stage-horizon,
.retro-stage-grid {
    position: absolute;
    inset: 0;
}

.retro-stage-sun {
    position: absolute;
    left: 50%;
    top: 36px;
    width: 132px;
    height: 132px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: repeating-linear-gradient(180deg, #fff36d 0 11px, #ff7bbd 12px 18px);
    box-shadow: 0 0 34px rgba(255, 47, 178, 0.45);
}

.retro-stage-cloud {
    position: absolute;
    width: 148px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    box-shadow: 28px -10px 0 rgba(255,255,255,0.64), 56px 4px 0 rgba(255,255,255,0.56);
}

.cloud-one { left: 44px; top: 42px; }
.cloud-two { right: 76px; top: 94px; transform: scale(0.8); }

.retro-stage-horizon {
    top: 42%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d9ff, #ff2fb2, transparent);
    box-shadow: 0 0 18px rgba(0,217,255,0.7);
}

.retro-stage-grid {
    top: 42%;
    transform-origin: top center;
    background:
        linear-gradient(rgba(0,217,255,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,47,178,0.24) 1px, transparent 1px);
    background-size: 100% 28px, 42px 100%;
    transform: perspective(420px) rotateX(62deg) scaleY(1.8);
}

.retro-stage-radio {
    position: absolute;
    left: 8%;
    top: 32%;
    width: min(390px, 54%);
    padding: 14px;
    border: 2px solid #f8fbff;
    border-right-color: #30384d;
    border-bottom-color: #30384d;
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.3), transparent 12% 88%, rgba(0,0,0,0.16)),
        linear-gradient(180deg, #f1f4fb, #a5afc6 48%, #5f687f);
    box-shadow:
        0 24px 36px rgba(0,0,0,0.4),
        0 0 26px rgba(0,217,255,0.34),
        inset 0 0 0 1px rgba(255,255,255,0.55);
}

.stage-radio-topline {
    height: 8px;
    margin-bottom: 10px;
    border: 1px solid #30384d;
    border-radius: 999px;
    background: linear-gradient(90deg, #151b2c, #dce6f7 46%, #151b2c);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.stage-radio-face {
    display: grid;
    grid-template-columns: minmax(84px, 130px) 1fr;
    gap: 12px;
    align-items: center;
}

.retro-stage-radio img {
    width: 100%;
    display: block;
    filter:
        drop-shadow(0 2px 0 rgba(255,255,255,0.65))
        drop-shadow(0 0 9px rgba(255,47,178,0.45));
}

.stage-radio-screen {
    height: 82px;
    padding: 20px 7px 7px;
    position: relative;
    border: 2px solid #0b1122;
    border-top-color: #253a71;
    border-left-color: #253a71;
    background:
        linear-gradient(rgba(157,232,255,0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(157,232,255,0.1) 1px, transparent 1px),
        #10285b;
    background-size: 100% 9px, 14px 100%, auto;
    box-shadow: inset 0 0 16px rgba(0,217,255,0.25);
}

.stage-screen-title {
    position: absolute;
    top: 5px;
    left: 8px;
    color: #9de8ff;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-shadow: 0 0 7px rgba(0,217,255,0.85);
}

.stage-static-meter {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    align-items: end;
}

.stage-static-meter span {
    min-height: 12%;
    border-radius: 2px 2px 0 0;
    background:
        linear-gradient(180deg, #fff36d 0 28%, #bddf32 29% 54%, #39ff75 55% 100%);
    box-shadow:
        0 0 8px rgba(255,243,109,0.28),
        inset 0 0 0 1px rgba(255,255,255,0.18);
    transform-origin: bottom center;
}

.stage-static-meter span:nth-child(1) { height: 28%; }
.stage-static-meter span:nth-child(2) { height: 52%; }
.stage-static-meter span:nth-child(3) { height: 74%; }
.stage-static-meter span:nth-child(4) { height: 46%; }
.stage-static-meter span:nth-child(5) { height: 84%; }
.stage-static-meter span:nth-child(6) { height: 62%; }
.stage-static-meter span:nth-child(7) { height: 36%; }
.stage-static-meter span:nth-child(8) { height: 78%; }
.stage-static-meter span:nth-child(9) { height: 58%; }
.stage-static-meter span:nth-child(10) { height: 68%; }
.stage-static-meter span:nth-child(11) { height: 42%; }
.stage-static-meter span:nth-child(12) { height: 24%; }

@keyframes led-eq {
    0%, 100% { height: 18%; filter: brightness(0.82); }
    25% { height: 72%; filter: brightness(1.18); }
    50% { height: 42%; filter: brightness(0.96); }
    75% { height: 88%; filter: brightness(1.28); }
}

.stage-radio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.stage-radio-controls i,
.retro-cassette i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 32%, #f8fbff 0 10%, #8c97ad 11% 33%, #222b40 34% 100%);
    border: 2px solid #d8dfec;
    box-shadow: inset -4px -4px 8px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.6);
}

.stage-button-bank {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.stage-button-bank b {
    display: block;
    height: 18px;
    border: 1px solid #1b2437;
    border-top-color: #f4f7ff;
    border-left-color: #f4f7ff;
    border-radius: 3px;
    background: linear-gradient(180deg, #f5f7fc, #8d98af);
}

.stage-radio-vents {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 11px;
}

.stage-radio-vents span {
    height: 5px;
    border-radius: 999px;
    background: #252e45;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.7);
}

.retro-game-object {
    position: absolute;
    right: 13%;
    top: 46%;
    display: grid;
    grid-template-columns: repeat(4, 26px);
    gap: 4px;
    padding: 10px;
    transform: rotate(-7deg);
    background: rgba(255,255,255,0.76);
    border: 1px solid #29324d;
    box-shadow: 0 16px 28px rgba(0,0,0,0.32);
}

.retro-game-object span {
    width: 26px;
    height: 26px;
    background: #172256;
}

.retro-game-object span:nth-child(3n) { background: #ff2fb2; }
.retro-game-object span:nth-child(4n) { background: #00d9ff; }

.retro-cassette {
    position: absolute;
    right: 28%;
    bottom: 34px;
    width: 142px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff7d6, #f0a7dc);
    border: 2px solid #29324d;
    box-shadow: 0 14px 22px rgba(0,0,0,0.28);
}

.playback-control button:active {
    border-top-color: var(--color-panel-border-dark);
    border-left-color: var(--color-panel-border-dark);
    border-bottom-color: var(--color-panel-border);
    border-right-color: var(--color-panel-border);
}

/* Help Panel */
.help-panel {
    background: #18284e;
    border: 1px solid #303748;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #eef4ff;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.help-panel.collapsed .help-content {
    display: none;
}

.help-panel.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.help-header {
    border-bottom: 1px solid #303748;
}

/* Phase 3: original tabletop receiver treatment for the working radio player. */
.receiver-chassis {
    position: relative;
    overflow: hidden;
    padding: clamp(10px, 2vw, 18px);
    border: 2px solid #372916;
    border-radius: 12px;
    background:
        repeating-linear-gradient(96deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
        linear-gradient(135deg, #aa7a3a 0%, #d8b36b 17%, #785020 50%, #c39a50 78%, #593915 100%);
    box-shadow: inset 0 1px rgba(255,247,214,.72), inset 0 -14px 22px rgba(48,25,4,.35), 0 12px 20px rgba(25,14,4,.25);
}

.receiver-chassis::before,
.receiver-chassis::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #f7d58c, #4b3216 45%, #171009 52%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.48);
}
.receiver-chassis::before { top: 8px; left: 8px; }
.receiver-chassis::after { top: 8px; right: 8px; }

.receiver-titlebar {
    position: relative;
    z-index: 1;
    height: 26px;
    margin-bottom: 9px;
    border-color: #1d160e;
    border-top-color: #e6c779;
    border-left-color: #e6c779;
    background: linear-gradient(90deg, #24190e, #5d4120 52%, #21170e);
    color: #f8e5aa;
    letter-spacing: .08em;
}
.receiver-brand { color: #7dffd1; font-weight: 800; text-shadow: 0 0 7px rgba(95,255,187,.85); }
.receiver-model { color: #d4ae5c; font-size: .62rem; }

.receiver-chassis .player-display {
    position: relative;
    z-index: 1;
    padding: 10px;
    border: 5px solid #1c1710;
    border-top-color: #59421e;
    border-left-color: #59421e;
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(125,255,209,.08), transparent 36%), linear-gradient(#061b13, #020b08);
    box-shadow: inset 0 0 22px rgba(74,255,170,.16), 0 2px 0 rgba(255,235,160,.3);
}
.receiver-display-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #72f6b9;
    font: .62rem var(--font-mono);
    letter-spacing: .1em;
    text-shadow: 0 0 7px rgba(80,255,178,.8);
}
#tuner-frequency { color: #d9ffd4; }
.receiver-chassis #player-track-title { color: #a6ffd4; text-shadow: 0 0 9px rgba(64,255,162,.7); }
.receiver-chassis .player-spectrum { border-color: rgba(140,255,197,.22); background: rgba(0,0,0,.38); }
.receiver-chassis .player-spectrum span { background: linear-gradient(180deg, #e6ff72, #42eaa5); }

.receiver-tuning {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 5px 4px;
    color: #2f2113;
    font: 800 .66rem var(--font-mono);
}
.receiver-dial { position: relative; height: 17px; border: 2px solid #352611; border-radius: 3px; background: repeating-linear-gradient(90deg, #e7cb82 0 1px, transparent 1px 11px), #8d642c; box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.receiver-dial i { position: absolute; top: -4px; left: 48%; width: 2px; height: 22px; background: #fa3444; box-shadow: 0 0 4px #ff6573; }
.receiver-dial b { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(20,10,0,.55); }

.receiver-chassis .radio-controls-player {
    position: relative;
    z-index: 1;
    margin-bottom: 8px !important;
    padding: 10px;
    border: 2px solid #3a2914;
    border-top-color: #e6c779;
    border-left-color: #e6c779;
    border-radius: 5px;
    background: linear-gradient(180deg, #b88b45, #79501e);
}
.receiver-chassis .volume-control > span { color: #2f2113 !important; font-family: var(--font-mono); font-weight: 800; }
.receiver-chassis .volume-control button { border-radius: 50%; border-color: #25190d; background: radial-gradient(circle at 32% 28%, #e8d090, #5b3d19 63%, #1e140a 68%); color: #fff2b2; text-shadow: 0 1px #000; }
.receiver-chassis .vol-indicator { height: 12px; border-color: #25190d; background: #1b140c; box-shadow: inset 0 1px 4px #000; }
.receiver-chassis #vol-level-bar { background: linear-gradient(90deg, #5cff98, #eaff72) !important; box-shadow: 0 0 6px #74ff9e; }
.receiver-chassis .playback-control button { border-color: #21170d; border-top-color: #f2db91; border-left-color: #f2db91; background: linear-gradient(#cba65d, #64421a); color: #21170d; text-shadow: 0 1px rgba(255,255,255,.55); }
.receiver-chassis .sleep-timer-control { margin-top: 2px; }
.receiver-chassis .sleep-timer-control button { border-color: #21170d; background: linear-gradient(#4a3820, #1d160e); color: #d9ffd4; }

.receiver-speaker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 9px; margin-bottom: 8px; border: 2px solid #3a2914; border-top-color: #e6c779; border-left-color: #e6c779; border-radius: 5px; background: #312315; box-shadow: inset 0 0 14px #090603; }
.receiver-speaker span { height: 13px; border-radius: 50%; background: radial-gradient(circle, #6d5a42 0 20%, #16110b 24% 46%, #4a3b29 50% 56%, #120e09 60%); }
.receiver-chassis .radio-status { color: #2f2113; font-weight: 700; }
.receiver-chassis .station-list { padding-top: 2px; }
.receiver-chassis .station-btn { border-color: rgba(54,35,13,.28); background: rgba(255,242,201,.78); }

@media (max-width: 420px) {
    .receiver-chassis { padding: 8px; border-radius: 8px; }
    .receiver-titlebar { font-size: .62rem; }
    .receiver-model { display: none; }
    .receiver-speaker { gap: 3px; padding: 7px; }
    .receiver-speaker span { height: 10px; }
}

/* Bright brushed-chrome variant: shared by the working receiver and idle-stage radio. */
.receiver-chassis {
    border-color: #4f5a60;
    background:
        repeating-linear-gradient(96deg, rgba(255,255,255,.34) 0 1px, rgba(58,71,76,.035) 1px 4px),
        linear-gradient(135deg, #8e9ba0 0%, #eef4f2 15%, #bec9cb 46%, #f9ffff 70%, #8b989d 100%);
    box-shadow: inset 0 1px #fff, inset 0 -14px 22px rgba(34,44,48,.22), 0 12px 20px rgba(25,36,39,.22);
}
.receiver-chassis::before,
.receiver-chassis::after { background: radial-gradient(circle at 32% 28%, #f3f7f4, #68747a 45%, #252d31 52%); }
.receiver-titlebar { border-color: #20292d; border-top-color: #e5eef0; border-left-color: #e5eef0; background: linear-gradient(90deg, #172126, #53636a 52%, #182126); color: #e9fff4; }
.receiver-brand { color: #8dffd1; }
.receiver-model { color: #c6e0db; }
.receiver-chassis .player-display { border-color: #20292d; border-top-color: #708188; border-left-color: #708188; }
.receiver-tuning { color: #243037; }
.receiver-dial { border-color: #2d393e; background: repeating-linear-gradient(90deg, #e9f1ef 0 1px, transparent 1px 11px), #66767b; }
.receiver-chassis .radio-controls-player { border-color: #455258; border-top-color: #f8ffff; border-left-color: #f8ffff; background: linear-gradient(180deg, #e7efef, #a6b3b6); }
.receiver-chassis .volume-control > span { color: #263238 !important; }
.receiver-chassis .volume-control button { border-color: #354148; background: radial-gradient(circle at 32% 28%, #f8ffff, #88979c 63%, #303b40 68%); color: #16362f; }
.receiver-chassis .vol-indicator { border-color: #364349; background: #152124; }
.receiver-chassis .playback-control button { border-color: #3d494e; border-top-color: #fff; border-left-color: #fff; background: linear-gradient(#f7ffff, #9eafb3); color: #1f3032; }
.receiver-chassis .sleep-timer-control button { border-color: #364247; background: linear-gradient(#49595e, #1b262a); color: #d9fff0; }
.receiver-speaker { border-color: #4a565b; border-top-color: #fff; border-left-color: #fff; background: #607075; box-shadow: inset 0 0 14px #263237; }
.receiver-speaker span { background: radial-gradient(circle, #adbab9 0 20%, #263237 24% 46%, #7f8e92 50% 56%, #1d272b 60%); }
.receiver-chassis .radio-status { color: #263238; }
.receiver-chassis .station-btn { border-color: rgba(50,67,72,.28); background: rgba(250,255,253,.78); }

.retro-stage-radio {
    border-color: #f8ffff;
    border-right-color: #3b484e;
    border-bottom-color: #3b484e;
    background:
        repeating-linear-gradient(96deg, rgba(255,255,255,.32) 0 1px, rgba(47,61,67,.04) 1px 5px),
        linear-gradient(135deg, #9eabad, #f5fbfa 19%, #bcc8c9 52%, #f8ffff 74%, #7b898e);
    box-shadow: 0 24px 36px rgba(0,0,0,.4), 0 0 26px rgba(121,255,210,.28), inset 0 0 0 1px rgba(255,255,255,.72);
}
.stage-radio-topline { border-color: #273338; background: linear-gradient(90deg, #172126, #dceaea 46%, #172126); }
.stage-radio-screen { border-color: #071811; border-top-color: #315d4d; border-left-color: #315d4d; background: linear-gradient(rgba(133,255,197,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(133,255,197,.08) 1px, transparent 1px), #062116; box-shadow: inset 0 0 16px rgba(65,255,163,.22); }
.stage-screen-title { color: #a8ffcf; text-shadow: 0 0 7px rgba(93,255,178,.85); }
.stage-radio-controls i,
.retro-cassette i { background: radial-gradient(circle at 35% 32%, #f8ffff 0 10%, #98a8ac 11% 33%, #27343a 34% 100%); border-color: #e8f2f2; }
.stage-button-bank b { border-color: #38454a; border-top-color: #fff; border-left-color: #fff; background: linear-gradient(180deg, #f9ffff, #9daeb2); }
.stage-radio-vents span { background: #314046; }
.retro-cassette { background: linear-gradient(135deg, #e9f3f2, #a6b5b8); border-color: #3d4a50; }