:root {
    --bg-color: #050914;
    --glass-bg: rgba(9, 13, 23, 0.82);
    --glass-border: rgba(230, 190, 90, 0.35);
    --panel-stone: rgba(13, 17, 28, 0.9);
    --panel-wood: rgba(66, 42, 24, 0.24);
    --text-main: #f8fafc;
    --text-muted: #bdc3c7;
    --player1-color: #ff4757;
    --player2-color: #1e90ff;
    --player3-color: #2ed573;
    --player4-color: #eccc68;
    --neutral-color: #2c3e50;
    --map-stroke: rgba(185, 205, 225, 0.24);
    --accent-gold: #f6d365;
    --accent-glow: rgba(246, 211, 101, 0.36);
    --sea-deep: #020711;
    --sea-mid: #07182a;
    --sea-glow: rgba(68, 189, 220, 0.18);
    --font-epic-title: 'Cinzel Decorative', Georgia, serif;
    --font-epic-ui: 'Cinzel', Georgia, serif;
    --font-hand: 'MedievalSharp', 'Cinzel', serif;
    --forge-gold: #f5c86a;
    --forge-gold-dark: #8f5a1e;
    --forge-iron: #171717;
    --parchment: #d8b878;
    --parchment-dark: #6c4a22;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 18% 8%, rgba(246, 211, 101, 0.10), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(74, 144, 226, 0.12), transparent 36%),
        linear-gradient(135deg, #02050d 0%, #07182a 48%, #020711 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-main);
    overflow: auto; scroll-behavior: smooth;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body.menu-screen {
    min-height: 100vh;
    overflow: hidden;
    background-color: #080604;
    background-image:
        linear-gradient(90deg, rgba(3, 2, 1, 0.42) 0%, rgba(3, 2, 1, 0.08) 30%, rgba(3, 2, 1, 0.02) 55%, rgba(3, 2, 1, 0.28) 100%),
        radial-gradient(circle at 50% 46%, rgba(255, 170, 50, 0.08), transparent 45%),
        url("menu-background-weather-trails.png?v=menu-bg-1");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body.menu-screen,
body.menu-screen button,
body.menu-screen select,
body.menu-screen input {
    font-family: var(--font-epic-ui);
}

body.menu-screen::before,
body.menu-screen::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body.menu-screen::before {
    background:
        radial-gradient(circle at 34px 10px, rgba(255, 177, 58, 0.24), transparent 13%),
        radial-gradient(circle at 19% 4%, rgba(255, 114, 34, 0.17), transparent 18%),
        radial-gradient(circle at 48% 36%, rgba(80, 160, 255, 0.10), transparent 10%),
        radial-gradient(circle at 68% 42%, rgba(255, 140, 40, 0.10), transparent 10%),
        radial-gradient(circle at 45% 62%, rgba(255, 200, 80, 0.06), transparent 12%);
    mix-blend-mode: screen;
    animation: tavernLightPulse 5.8s ease-in-out infinite;
}

body.menu-screen::after {
    background:
        radial-gradient(ellipse at 50% 43%, transparent 34%, rgba(0, 0, 0, 0.24) 62%, rgba(0, 0, 0, 0.74) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.58), transparent 18%, transparent 80%, rgba(0,0,0,0.56));
}

#menu-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
}

#menu-weather-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#menu-weather-layer::before,
#menu-weather-layer::after {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
}

#menu-weather-layer::before {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.72) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(205,230,255,0.46) 0 1.4px, transparent 2.2px);
    background-size: 72px 72px, 118px 118px;
    background-position: 0 0, 38px 24px;
    opacity: 0.38;
    animation: menuSnowFall 16s linear infinite;
}

#menu-weather-layer::after {
    background:
        radial-gradient(circle at 28% 20%, rgba(90, 178, 255, 0.12), transparent 22%),
        radial-gradient(circle at 72% 62%, rgba(255, 117, 42, 0.10), transparent 20%),
        linear-gradient(120deg, transparent 0 40%, rgba(150, 205, 255, 0.08) 45%, transparent 52% 100%);
    mix-blend-mode: screen;
    opacity: 0.72;
}

.menu-ember {
    position: absolute;
    bottom: -10vh;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffcc6a;
    box-shadow:
        0 0 7px #ffb13a,
        0 0 18px rgba(255, 106, 27, 0.62);
    opacity: 0.72;
    animation: emberRise 7s linear infinite;
}

.ember-a { left: 9%; animation-duration: 6.4s; animation-delay: -1.2s; }
.ember-b { left: 47%; width: 3px; height: 3px; animation-duration: 8.2s; animation-delay: -4s; opacity: 0.56; }
.ember-c { left: 82%; animation-duration: 7.5s; animation-delay: -2.8s; }

.menu-cloud {
    position: absolute;
    width: 260px;
    height: 86px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 25% 58%, rgba(245,248,255,0.34), transparent 42%),
        radial-gradient(circle at 52% 40%, rgba(245,248,255,0.28), transparent 46%),
        radial-gradient(circle at 74% 62%, rgba(245,248,255,0.22), transparent 44%);
    filter: blur(10px);
    opacity: 0.5;
    animation: menuCloudDrift 28s linear infinite;
}

.cloud-a { top: 15%; left: 28%; }
.cloud-b { top: 48%; left: 62%; animation-duration: 36s; opacity: 0.36; }

.menu-rain {
    position: absolute;
    width: 280px;
    height: 190px;
    background-image: repeating-linear-gradient(110deg, rgba(145, 204, 255, 0.0) 0 12px, rgba(145, 204, 255, 0.33) 13px 15px, rgba(145, 204, 255, 0.0) 16px 30px);
    filter: blur(0.3px);
    opacity: 0.24;
    transform: rotate(8deg);
    animation: menuRainFall 1.6s linear infinite;
}

.rain-a { top: 18%; left: 48%; }
.rain-b { top: 58%; left: 28%; opacity: 0.22; animation-duration: 2.1s; }

@keyframes menuCloudDrift {
    from { transform: translateX(-18vw); }
    to { transform: translateX(32vw); }
}

@keyframes menuRainFall {
    from { background-position: 0 0; }
    to { background-position: -40px 80px; }
}

@keyframes menuSnowFall {
    from { transform: translate3d(0, -4%, 0); }
    to { transform: translate3d(-5%, 9%, 0); }
}

@keyframes emberRise {
    0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
    12% { opacity: 0.72; }
    55% { transform: translate3d(26px, -52vh, 0) scale(1); opacity: 0.58; }
    100% { transform: translate3d(-18px, -108vh, 0) scale(0.3); opacity: 0; }
}

@keyframes tavernLightPulse {
    0%, 100% { opacity: 0.74; filter: saturate(1); }
    50% { opacity: 1; filter: saturate(1.22); }
}

@keyframes epicGoldSweep {
    from { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
    30% { opacity: 0.85; }
    to { transform: translateX(145%) skewX(-18deg); opacity: 0; }
}

@keyframes forgeHoverQuiver {
    0%, 100% { transform: translateY(-1px); }
    35% { transform: translateY(-2px) translateX(0.5px); }
    70% { transform: translateY(-1px) translateX(-0.5px); }
}

body.menu-screen #start-menu {
    position: fixed;
    top: clamp(10px, 1.8vh, 26px);
    left: clamp(12px, 1.7vw, 34px);
    transform: none;
    width: 660px;
    max-width: 660px;
    max-height: none;
    overflow: visible;
    padding: 22px 24px 20px;
    text-align: left;
    border-radius: 2px;
    border: 8px solid #3c2415;
    background: radial-gradient(circle at 50% 50%, #2a1b14, #120a06);
    box-shadow:
        0 0 0 2px #150c07,
        inset 0 0 0 2px #4a2d1a,
        0 26px 50px rgba(0, 0, 0, 0.85),
        inset 0 0 60px rgba(0, 0, 0, 0.95);
    animation: menuPanelSlide 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    zoom: 0.82;
}

body.menu-screen #start-menu::before {
    content: "";
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border: 1px solid rgba(230, 178, 83, 0.15);
    pointer-events: none;
    z-index: 10;
}

body.menu-screen #start-menu::after {
    content: "";
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    pointer-events: none;
    z-index: 20;
    background:
        radial-gradient(circle at 12px 12px, #888 1px, #333 3px, #000 4px, transparent 5px),
        linear-gradient(135deg, #2b2b2b, #0a0a0a) left 0 top 0 / 24px 24px no-repeat,
        
        radial-gradient(circle at calc(100% - 12px) 12px, #888 1px, #333 3px, #000 4px, transparent 5px),
        linear-gradient(-135deg, #2b2b2b, #0a0a0a) right 0 top 0 / 24px 24px no-repeat,
        
        radial-gradient(circle at 12px calc(100% - 12px), #888 1px, #333 3px, #000 4px, transparent 5px),
        linear-gradient(45deg, #2b2b2b, #0a0a0a) left 0 bottom 0 / 24px 24px no-repeat,
        
        radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #888 1px, #333 3px, #000 4px, transparent 5px),
        linear-gradient(-45deg, #2b2b2b, #0a0a0a) right 0 bottom 0 / 24px 24px no-repeat;
    box-shadow: 
        inset 0 0 0 1px rgba(0,0,0,0.8),
        inset 0 0 0 2px rgba(255,255,255,0.05);
}

.css-candle {
    position: absolute;
    top: -38px;
    right: 40px;
    width: 24px;
    height: 46px;
    z-index: 25;
}
.candle-wax {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 38px;
    background: linear-gradient(90deg, #b0320f, #db5521 40%, #db5521 60%, #691703);
    border-radius: 4px 4px 2px 2px;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.8);
}
.candle-wax::before {
    content: "";
    position: absolute;
    top: 0; left: 2px;
    width: 6px; height: 18px;
    background: #db5521;
    border-radius: 3px;
}
.candle-wax::after {
    content: "";
    position: absolute;
    top: 0; right: 2px;
    width: 4px; height: 12px;
    background: #db5521;
    border-radius: 2px;
}
.candle-wick {
    position: absolute;
    top: 2px; left: 11px;
    width: 2px; height: 8px;
    background: #222;
}
.candle-flame {
    position: absolute;
    top: -12px; left: 8px;
    width: 8px; height: 16px;
    background: radial-gradient(ellipse at bottom, #fff 10%, #ffdb58 40%, #ff8c00 80%, transparent);
    border-radius: 50% 50% 20% 20%;
    animation: flicker 0.12s infinite alternate;
    box-shadow: 0 0 24px 8px rgba(255, 140, 0, 0.6);
}
@keyframes flicker {
    0% { transform: scale(1) rotate(-2deg); opacity: 0.9; box-shadow: 0 0 20px 6px rgba(255, 140, 0, 0.5); }
    50% { transform: scale(1.1) rotate(2deg); opacity: 1; box-shadow: 0 0 30px 10px rgba(255, 140, 0, 0.7); }
    100% { transform: scale(0.9) rotate(0deg); opacity: 0.8; box-shadow: 0 0 24px 8px rgba(255, 140, 0, 0.6); }
}

body.menu-screen #main-title {
    position: absolute;
    top: 44px;
    left: 58px;
    right: 58px;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.35rem, 3.4vw, 4.05rem);
    line-height: 0.9;
    text-align: center;
    color: #f4ce75;
    letter-spacing: 2px;
    text-shadow:
        0 2px 0 #2b1808,
        0 0 16px rgba(246, 211, 101, 0.42);
    z-index: 2;
}

#menu-title-decor {
    position: absolute;
    top: 7px;
    left: 34px;
    right: 34px;
    height: 162px;
    pointer-events: none;
    z-index: 3;
}

.title-rod {
    position: absolute;
    top: 5px;
    left: 16px;
    right: 16px;
    height: 9px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #f1c979, #6d4617 48%, #d59d45);
    box-shadow: 0 2px 0 rgba(0,0,0,0.65), 0 0 10px rgba(230,178,83,0.30);
}

.title-crown {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: #f4ce75;
    font-size: 2.2rem;
    text-shadow: 0 2px 0 #3a2109, 0 0 12px rgba(246,211,101,0.42);
}

.title-banner {
    position: absolute;
    top: 0;
    width: 58px;
    height: 142px;
    border: 2px solid rgba(211, 165, 81, 0.75);
    border-top-width: 4px;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        inset 0 -24px 28px rgba(0,0,0,0.35),
        0 8px 14px rgba(0,0,0,0.42);
}

.title-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.36), transparent 18%, rgba(255,255,255,0.12) 42%, transparent 58%, rgba(0,0,0,0.34)),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 12px);
    mix-blend-mode: screen;
    opacity: 0.75;
}

.title-banner::after {
    position: absolute;
    inset: 34px 0 0;
    display: grid;
    place-items: start center;
    color: rgba(244, 206, 117, 0.86);
    font-size: 1.8rem;
    text-shadow: 0 2px 0 rgba(0,0,0,0.65);
}

.banner-blue {
    left: 0;
    background:
        radial-gradient(circle at 48% 34%, rgba(104, 158, 224, 0.42), transparent 22%),
        linear-gradient(90deg, #0a1736, #1e4a8c 42%, #0f244d);
}

.banner-blue::after {
    content: "⚜";
}

.banner-red {
    right: 0;
    background:
        radial-gradient(circle at 48% 34%, rgba(232, 138, 92, 0.34), transparent 22%),
        linear-gradient(90deg, #3a0f0b, #8d2b22 45%, #44110e);
}

.banner-red::after {
    content: "♞";
}

#menu-profile-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    align-items: center;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #1a100a;
    border-radius: 2px;
    background: #180e09;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.05);
}

#menu-welcome-tip {
    display: none;
    gap: 3px;
    margin: 0 0 8px;
    padding: 7px 9px;
    border: 1px solid rgba(116, 185, 255, 0.28);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(23, 52, 78, 0.58), rgba(10, 11, 11, 0.76));
    color: #dff2ff;
    font-size: 0.78rem;
}

#menu-welcome-text {
    color: #f6d365;
    font-size: 0.86rem;
}

#menu-tip-text {
    color: #b9d7ee;
    line-height: 1.15;
}

.menu-avatar {
    width: 74px;
    height: 74px;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: 8px 0 7px;
    border: 2px solid rgba(231, 180, 81, 0.78);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, rgba(87, 171, 220, 0.68), rgba(7, 20, 32, 0.82) 42%, rgba(0,0,0,0.9) 70%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
    color: #f8d57b;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: 900;
    box-shadow: 0 0 20px rgba(70, 146, 209, 0.22);
}

.menu-avatar small {
    color: rgba(255, 238, 178, 0.72);
    font-family: var(--font-epic-ui, Georgia, serif);
    font-size: 0.52rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.menu-avatar span {
    line-height: 1;
}

.menu-nickname {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(205,154,66,0.38);
    background: transparent;
    color: #fff2c6;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.55rem;
    line-height: 1.1;
    outline: none;
}

.menu-rank-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #d9c28b;
    font-size: 0.86rem;
    margin-top: 5px;
}

.menu-league {
    color: #f6d365;
    font-weight: 800;
    font-size: 0.86rem;
}

.menu-prestige {
    color: #f3dca3;
    font-size: 0.78rem;
    white-space: nowrap;
    text-align: right;
}

.menu-prestige strong {
    display: block;
    color: #ffe08a;
    font-size: 1rem;
}

.menu-xp-bar {
    height: 10px;
    margin-top: 6px;
    border: 1px solid rgba(205,154,66,0.45);
    border-radius: 2px;
    background: rgba(0,0,0,0.44);
    overflow: hidden;
}

.menu-xp-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #244c7a, #4aa3df);
}

.menu-xp-caption {
    margin-top: 3px;
    color: rgba(225, 206, 160, 0.78);
    font-size: 0.66rem;
    letter-spacing: 0.2px;
}

.menu-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(205, 154, 66, 0.55);
    border-radius: 50%;
    background: rgba(0,0,0,0.34);
    color: #f6d365;
    cursor: pointer;
}

@keyframes menuPanelSlide {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: translateX(0); }
}

#menu-primary-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 10px;
    border: 1px solid rgba(205, 154, 66, 0.55);
    border-radius: 3px;
    overflow: hidden;
    background: rgba(0,0,0,0.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 16px rgba(0,0,0,0.30);
}

body.menu-screen .epic-menu-btn {
    width: 100%;
    min-height: 64px;
    position: relative;
    justify-content: center;
    border-radius: 4px;
    border: 2px solid #3c2415;
    background: linear-gradient(180deg, #3d2314, #24130a);
    color: #c9b385;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 8px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.6);
    padding: 0 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);
    letter-spacing: 2px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
body.menu-screen .epic-menu-btn:hover:not(.is-disabled) {
    background: linear-gradient(180deg, #4a2d1a, #2f1a0e);
    border-color: #5a3c22;
    color: #f4ce75;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 12px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.8);
    transform: translateX(4px);
}
body.menu-screen .epic-menu-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
}

.epic-back-btn {
    background: transparent;
    border: none;
    color: #c9b385;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    cursor: pointer;
    text-align: left;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(201, 179, 133, 0.2);
    transition: all 0.2s;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.epic-back-btn:hover {
    color: #f4ce75;
    border-bottom-color: rgba(244, 206, 117, 0.6);
    transform: translateX(-4px);
}

body.menu-screen .tab-btn {
    width: 100%;
    min-height: 56px;
    position: relative;
    justify-content: center;
    border-radius: 0;
    border: 1px solid #180e09;
    background: linear-gradient(180deg, #3d2314, #24130a);
    color: #c9b385;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 8px rgba(0,0,0,0.4);
    padding: 0 14px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1rem, 1.35vw, 1.45rem);
    letter-spacing: 0.7px;
    text-align: center;
}

body.menu-screen .tab-btn:last-child {
    border-right: 0;
}

body.menu-screen .tab-btn::before {
    content: none;
}

body.menu-screen #tab-career::before,
body.menu-screen #tab-online::before { content: none; }

body.menu-screen .tab-btn:hover {
    transform: none;
}

body.menu-screen .tab-btn.active {
    background: linear-gradient(180deg, #24130a, #180e09);
    border-color: #120905;
    color: #f4ce75;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.85);
}

body.menu-screen .menu-group {
    margin-bottom: 0;
    padding: 6px 0;
    border-bottom: 1px solid rgba(213, 166, 88, 0.18);
}

body.menu-screen .menu-row {
    display: grid !important;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 10px;
}

body.menu-screen .menu-row label {
    margin: 0;
}

body.menu-screen .player-setup {
    grid-template-columns: 150px 1fr;
}

body.menu-screen .player-setup > label {
    grid-row: span 3;
    align-self: start;
    padding-top: 4px;
}

body.menu-screen .player-setup > .menu-presets,
body.menu-screen .player-setup > #menu-player-role-grid,
body.menu-screen .player-setup > .human-color-grid {
    grid-column: 2;
}

.menu-mini-label {
    margin: -3px 0 -5px;
    color: rgba(246, 211, 101, 0.82);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.menu-native-select,
.hidden-player-selects {
    display: none !important;
}

.menu-choice-strip,
.menu-segmented,
.menu-presets,
.menu-color-row,
#menu-player-role-grid {
    display: flex;
    gap: 6px;
}

.menu-arrow-btn,
.menu-display-btn,
.menu-segmented button,
.menu-presets button,
#menu-player-role-grid button,
#menu-bottom-nav button,
.menu-top-icons button {
    min-height: 34px;
    border: 1px solid rgba(205, 154, 66, 0.52);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, rgba(31, 33, 30, 0.98), rgba(9, 10, 10, 0.98));
    color: #f1d28c;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.menu-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.menu-presets button {
    min-height: 38px;
    padding: 5px;
    display: grid;
    align-content: center;
    gap: 1px;
    text-align: center;
}

.menu-presets button strong {
    font-size: 0.9rem;
    color: #fff4cc;
}

.menu-presets button span {
    font-size: 0.58rem;
    color: rgba(255, 244, 204, 0.74);
}

.menu-presets button.active {
    background: linear-gradient(180deg, #235b8d, #0d3153);
    border-color: #74b9ff;
    box-shadow: 0 0 14px rgba(42, 133, 213, 0.35);
}

#menu-player-role-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

#menu-player-role-grid button {
    min-height: 38px;
    padding: 0 4px;
    font-size: 0.68rem;
    line-height: 1.05;
    display: grid;
    place-items: center;
}

#menu-player-role-grid button span {
    display: block;
    opacity: 0.72;
    font-size: 0.62rem;
}

#menu-player-role-grid button strong {
    display: block;
    font-size: 0.78rem;
}

#menu-player-role-grid button.is-human {
    background: linear-gradient(180deg, #235b8d, #0d3153);
    border-color: #74b9ff;
    color: #eaf6ff;
}

#menu-player-role-grid button.is-ai {
    background: linear-gradient(180deg, #4b3c22, #15110b);
    border-color: rgba(246, 211, 101, 0.55);
}

#menu-player-role-grid button.is-none {
    opacity: 0.55;
    background: linear-gradient(180deg, #292929, #0b0b0b);
}

.menu-arrow-btn {
    width: 38px;
    font-size: 1.6rem;
    line-height: 1;
}

.menu-display-btn {
    flex: 1;
    text-align: center;
    padding: 0 12px;
}

.menu-segmented button {
    flex: 1;
    padding: 0 12px;
}

.menu-segmented button.active,
.menu-display-btn:hover,
.menu-arrow-btn:hover,
#menu-bottom-nav button:hover:not(.is-disabled),
.menu-top-icons button:hover:not(.is-disabled) {
    background: linear-gradient(180deg, #235b8d, #0d3153);
    color: #fff4cc;
    border-color: #d8aa55;
    box-shadow: 0 0 13px rgba(42, 133, 213, 0.32);
}

.menu-color-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    padding: 3px;
    border: 1px solid rgba(205, 154, 66, 0.22);
    border-radius: 5px;
    background: rgba(0,0,0,0.18);
}

.menu-color-chip,
.human-color-swatch {
    width: auto;
    height: 28px;
    padding: 0 4px;
    border: 1px solid rgba(205, 154, 66, 0.52);
    border-radius: 4px;
    cursor: pointer;
    color: #fff7d6;
    font-size: 0.6rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

.menu-color-chip.red,
.human-color-swatch.red { background: linear-gradient(180deg, #d84834, #83180f); }
.menu-color-chip.blue,
.human-color-swatch.blue { background: linear-gradient(180deg, #2d8fe3, #0c397c); }
.menu-color-chip.yellow,
.human-color-swatch.yellow { background: linear-gradient(180deg, #e0b631, #7a5510); }
.menu-color-chip.green,
.human-color-swatch.green { background: linear-gradient(180deg, #3fb84f, #14631f); }
.menu-color-chip.mystery,
.human-color-swatch.mystery { background: linear-gradient(180deg, #6b5bbd, #211a43); color: #f1d28c; font-weight: 900; }

.menu-color-chip.active,
.human-color-swatch.active {
    outline: 2px solid #f6d365;
    box-shadow: 0 0 12px rgba(246,211,101,0.38), inset 0 0 0 2px rgba(255,255,255,0.18);
    transform: translateY(-1px);
}

.human-color-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

.human-color-card {
    display: grid;
    grid-template-columns: minmax(74px, 0.7fr) 1.3fr;
    gap: 8px;
    align-items: center;
    padding: 4px;
    border: 1px solid rgba(205, 154, 66, 0.22);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.18);
}

.human-color-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 5px;
    align-items: center;
    min-width: 0;
}

.human-color-title span {
    color: #74b9ff;
    font-size: 0.68rem;
    font-weight: 900;
}

.human-color-title strong {
    color: #fff4cc;
    font-size: 0.74rem;
}

.human-color-title em {
    grid-column: 1 / -1;
    color: rgba(246, 211, 101, 0.72);
    font-size: 0.56rem;
    font-style: normal;
    text-transform: uppercase;
}

.human-color-swatches {
    display: grid;
    grid-template-columns: repeat(5, minmax(22px, 1fr));
    gap: 5px;
}

.human-color-swatch {
    min-width: 0;
    font-size: 0;
}

.human-color-swatch.is-used {
    opacity: 0.34;
    cursor: not-allowed;
    filter: grayscale(0.55);
}

.is-disabled {
    opacity: 0.48;
    cursor: not-allowed !important;
}

body.menu-screen .menu-group label {
    color: #f1d28c;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

body.menu-screen .menu-group select,
body.menu-screen .menu-group input {
    border: 1px solid rgba(205, 154, 66, 0.55);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(28, 30, 28, 0.96), rgba(8, 9, 10, 0.98));
    color: #fff2c6;
}

body.menu-screen .highscore-container {
    display: none;
    padding: 6px 9px;
    border: 1px solid rgba(205, 154, 66, 0.42);
    border-radius: 4px;
    background: rgba(0,0,0,0.36);
}

body.menu-screen .start-btn {
    position: relative;
    border-radius: 4px;
    border: 2px solid rgba(255, 221, 124, 0.68);
    background:
        linear-gradient(180deg, #b68131, #6c3d0e 52%, #a46e23);
    color: #fff0bb;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 2.15vw, 2.35rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow:
        0 7px 18px rgba(0,0,0,0.52),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -8px 18px rgba(0,0,0,0.25);
}

body.menu-screen #btn-start,
body.menu-screen #btn-start-career {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

body.menu-screen #quick-play-view {
    zoom: 0.86;
}

body.menu-screen #btn-start {
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 18px 10px 13px !important;
    margin-top: 16px;
    border-radius: 2px;
    border: 2px solid #3c2415;
    background: linear-gradient(180deg, #8a5a2a, #4a2d1a);
    color: #f4ce75;
    box-shadow: inset 0 0 0 1px rgba(255,215,100,0.2), inset 0 0 12px rgba(0,0,0,0.4), 0 6px 12px rgba(0,0,0,0.6);
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    transition: all 0.2s ease;
}
body.menu-screen #btn-start:hover {
    background: linear-gradient(180deg, #9b6833, #5c3822);
    box-shadow: inset 0 0 0 1px rgba(255,215,100,0.3), inset 0 0 12px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.7);
    transform: translateY(-1px);
}
body.menu-screen #btn-start:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}

body.menu-screen #how-to-play-btn {
    display: none;
    width: auto;
    padding: 7px 10px !important;
    margin: 2px 0 7px !important;
    border-width: 1px;
    background: rgba(28, 57, 82, 0.66) !important;
    font-family: inherit;
    font-size: 0.86rem;
    text-transform: none;
}

body.menu-screen.menu-mode-career #start-menu {
    padding: 12px;
}

body.menu-screen.menu-mode-career #start-menu::before {
    height: 66px;
    margin-bottom: 8px;
}

body.menu-screen.menu-mode-career #main-title {
    top: 25px;
    font-size: clamp(1.45rem, 2vw, 2rem);
}

body.menu-screen.menu-mode-career #menu-profile-card {
    display: none;
}

body.menu-screen.menu-mode-career #menu-bottom-nav {
    display: none;
}

body.menu-screen #career-view {
    max-height: none !important;
    overflow: visible !important;
    scrollbar-width: none !important;
}

body.menu-screen #career-view::-webkit-scrollbar {
    display: none;
}

body.menu-screen.menu-mode-career #career-view {
    font-size: 0.82rem;
    zoom: 0.92;
}

body.menu-screen.menu-mode-career #career-view .profile-card {
    padding: 7px !important;
    margin-bottom: 6px !important;
    border-radius: 4px;
}

body.menu-screen.menu-mode-career #career-view > .profile-card:first-child {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    column-gap: 8px;
    text-align: left;
}

body.menu-screen.menu-mode-career #career-view .league-badge {
    grid-row: span 2;
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 1.1rem !important;
    line-height: 1;
    margin: 0 !important;
    border-radius: 50%;
}

body.menu-screen.menu-mode-career #career-view h2 {
    font-size: 1.1rem;
}

body.menu-screen.menu-mode-career #career-view .profile-stats {
    grid-column: 1 / -1;
    margin-top: 6px !important;
    gap: 6px;
    font-size: 0.74rem !important;
}

body.menu-screen.menu-mode-career #career-view .stat-box {
    padding: 4px !important;
}

body.menu-screen.menu-mode-career #skin-grid {
    max-height: 44px;
    overflow: hidden;
}

body.menu-screen.menu-mode-career #streak-dots {
    margin-top: 5px !important;
}

body.menu-screen.menu-mode-career #btn-start-career {
    padding: 10px !important;
    font-size: 1rem !important;
    margin-top: 4px;
}

body.menu-screen .profile-card {
    border-radius: 4px;
    border: 1px solid rgba(205, 154, 66, 0.44);
    background: linear-gradient(180deg, rgba(20, 23, 22, 0.96), rgba(8, 9, 9, 0.96));
}

#menu-side-panel {
    position: fixed;
    top: clamp(14px, 2.2vh, 34px);
    right: clamp(14px, 2vw, 34px);
    width: clamp(280px, 22vw, 390px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1;
}

.menu-top-icons {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr;
    border: 1px solid rgba(213, 166, 88, 0.58);
    background: rgba(10, 12, 12, 0.86);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 12px 24px rgba(0,0,0,0.38);
}

.menu-top-icons span,
.menu-top-icons button {
    padding: 12px 8px;
    text-align: center;
    border-right: 1px solid rgba(213, 166, 88, 0.28);
}

.menu-top-icons span:last-child,
.menu-top-icons button:last-child {
    border-right: 0;
}

.menu-top-icons button {
    width: 100%;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
}

#menu-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    margin-top: 10px;
    border: 1px solid rgba(205, 154, 66, 0.52);
    border-radius: 4px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 28%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 7px),
        rgba(0,0,0,0.36);
    box-shadow: 0 12px 28px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,255,255,0.05);
}

#menu-bottom-nav button {
    min-height: 54px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
}

#menu-bottom-nav button:last-child {
    border-right: 0;
}

body.menu-screen #main-menu-list,
body.menu-screen #menu-back-btn {
    display: none !important;
}

body.menu-screen #start-menu {
    width: 540px;
    max-width: 540px;
    padding: 178px 24px 20px;
    zoom: 1;
    transform: scale(var(--classic-menu-scale, 1));
    transform-origin: top left;
    animation: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.55), transparent 7%, transparent 93%, rgba(0,0,0,0.58)),
        linear-gradient(180deg, rgba(255,236,170,0.08), transparent 16%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.62)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 9px),
        radial-gradient(circle at 50% 10%, rgba(108, 70, 35, 0.42), transparent 42%),
        linear-gradient(180deg, #20150f, #090604 72%, #050302);
    border-image: linear-gradient(180deg, #d8a85a, #3b2412 30%, #0a0705 52%, #b47a35) 1;
    box-shadow:
        0 0 0 2px #0b0603,
        0 0 0 5px rgba(151, 96, 41, 0.65),
        0 26px 54px rgba(0,0,0,0.86),
        inset 0 2px 0 rgba(255, 230, 165, 0.16),
        inset 0 0 46px rgba(0,0,0,0.92);
}

body.menu-screen #quick-play-view {
    display: block;
}

body.menu-screen #menu-profile-card,
body.menu-screen #menu-primary-tabs,
body.menu-screen #menu-welcome-tip,
body.menu-screen #career-view,
body.menu-screen #online-view,
body.menu-screen #quick-play-view,
body.menu-screen #btn-start {
    position: relative;
    z-index: 30;
}

body.menu-screen #menu-welcome-tip {
    display: grid;
}

body.menu-screen #menu-bottom-nav {
    position: fixed;
    left: 55%;
    right: auto;
    bottom: clamp(10px, 1.4vh, 22px);
    transform: translateX(-50%);
    width: min(520px, 37vw);
    z-index: 4;
    margin: 0;
}

body.menu-screen #menu-side-panel {
    z-index: 4;
    transform: scale(var(--classic-side-scale, 0.84));
    transform-origin: top right;
}

body.menu-screen #menu-profile-card,
body.menu-screen #menu-primary-tabs,
body.menu-screen #menu-welcome-tip,
body.menu-screen .menu-group,
body.menu-screen #btn-start,
body.menu-screen .menu-widget,
body.menu-screen .menu-top-icons,
body.menu-screen #menu-bottom-nav {
    border-color: rgba(218, 168, 84, 0.7);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), transparent 24%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 8px),
        radial-gradient(circle at 18% 0, rgba(121, 72, 28, 0.30), transparent 42%),
        linear-gradient(180deg, rgba(24, 25, 23, 0.97), rgba(7, 7, 6, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 230, 165, 0.12),
        inset 0 -16px 24px rgba(0,0,0,0.34),
        0 12px 26px rgba(0,0,0,0.48);
}

body.menu-screen .tab-btn,
body.menu-screen .menu-arrow-btn,
body.menu-screen .menu-display-btn,
body.menu-screen .menu-segmented button,
body.menu-screen .menu-presets button,
body.menu-screen #menu-player-role-grid button,
body.menu-screen .human-color-grid button,
body.menu-screen .menu-widget-btn,
body.menu-screen .reward-row,
body.menu-screen .unlock-grid button,
body.menu-screen #menu-bottom-nav button,
body.menu-screen .menu-top-icons button {
    background:
        linear-gradient(180deg, rgba(255, 228, 150, 0.12), transparent 28%),
        linear-gradient(90deg, rgba(0,0,0,0.38), transparent 16%, rgba(255,255,255,0.055) 46%, transparent 68%, rgba(0,0,0,0.36)),
        linear-gradient(180deg, #372217, #140c08 64%, #070403);
    border-color: rgba(212, 154, 69, 0.66);
    box-shadow:
        inset 0 1px 0 rgba(255, 234, 170, 0.16),
        inset 0 -8px 14px rgba(0,0,0,0.36),
        0 5px 12px rgba(0,0,0,0.32);
}

body.menu-screen #btn-start {
    background:
        linear-gradient(180deg, rgba(255, 239, 180, 0.22), transparent 24%),
        linear-gradient(180deg, #b8873b, #6b3d12 58%, #a46c24);
    border-color: rgba(255, 224, 140, 0.82);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.22),
        inset 0 -10px 18px rgba(0,0,0,0.38),
        0 10px 22px rgba(0,0,0,0.56),
        0 0 18px rgba(202, 141, 54, 0.22);
}

body.menu-screen #main-title {
    font-family: var(--font-epic-title);
    color: #ffe6a0;
    letter-spacing: 1.5px;
    text-shadow:
        0 2px 0 #2b1808,
        0 4px 0 rgba(0,0,0,0.54),
        0 0 18px rgba(255, 204, 97, 0.42),
        0 0 34px rgba(122, 76, 21, 0.38);
}

body.menu-screen #start-menu,
body.menu-screen .menu-widget {
    border-style: solid;
    border-width: 10px;
    border-image:
        linear-gradient(135deg,
            #f6d57e 0%,
            #6d4319 13%,
            #15100c 34%,
            #c48a3a 50%,
            #1a120b 68%,
            #f1c46a 100%) 1;
}

body.menu-screen #start-menu::before,
body.menu-screen .menu-widget::before,
body.menu-screen #menu-bottom-nav::before {
    content: "";
    position: absolute;
    inset: 9px;
    pointer-events: none;
    border: 1px solid rgba(255, 222, 142, 0.24);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.72),
        inset 0 0 26px rgba(0,0,0,0.46);
}

body.menu-screen .menu-widget {
    position: relative;
}

body.menu-screen #start-menu::after,
body.menu-screen .menu-widget::after {
    content: "";
    position: absolute;
    inset: -12px;
    pointer-events: none;
    z-index: 21;
    background:
        radial-gradient(circle at 0 0, #f8d776 0 4px, #3a2410 5px 13px, transparent 14px),
        radial-gradient(circle at 100% 0, #f8d776 0 4px, #3a2410 5px 13px, transparent 14px),
        radial-gradient(circle at 0 100%, #f8d776 0 4px, #3a2410 5px 13px, transparent 14px),
        radial-gradient(circle at 100% 100%, #f8d776 0 4px, #3a2410 5px 13px, transparent 14px);
    filter: drop-shadow(0 4px 7px rgba(0,0,0,0.7));
}

body.menu-screen #menu-profile-card,
body.menu-screen #menu-welcome-tip,
body.menu-screen .menu-group,
body.menu-screen .human-color-card {
    background:
        linear-gradient(90deg, rgba(0,0,0,0.30), transparent 13%, transparent 87%, rgba(0,0,0,0.32)),
        radial-gradient(circle at 22% 16%, rgba(255, 225, 149, 0.14), transparent 26%),
        repeating-linear-gradient(22deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, rgba(50, 32, 18, 0.92), rgba(13, 9, 7, 0.96));
}

body.menu-screen .tab-btn,
body.menu-screen .menu-arrow-btn,
body.menu-screen .menu-display-btn,
body.menu-screen .menu-segmented button,
body.menu-screen .menu-presets button,
body.menu-screen #menu-player-role-grid button,
body.menu-screen .human-color-swatch,
body.menu-screen .menu-widget-btn,
body.menu-screen .reward-row,
body.menu-screen .unlock-grid button,
body.menu-screen #menu-bottom-nav button,
body.menu-screen .menu-top-icons button {
    position: relative;
    overflow: hidden;
    border-width: 2px;
    border-radius: 2px;
    color: #f7df9d;
    text-shadow: 0 1px 2px rgba(0,0,0,0.88);
    background:
        linear-gradient(180deg, rgba(255, 236, 174, 0.20), transparent 20%),
        linear-gradient(90deg, rgba(0,0,0,0.45), transparent 18%, rgba(255,255,255,0.07) 48%, transparent 70%, rgba(0,0,0,0.42)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.024) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #4b2b15, #19100a 58%, #070403);
}

body.menu-screen .tab-btn::after,
body.menu-screen .menu-arrow-btn::after,
body.menu-screen .menu-display-btn::after,
body.menu-screen .menu-segmented button::after,
body.menu-screen .menu-presets button::after,
body.menu-screen #menu-player-role-grid button::after,
body.menu-screen .menu-widget-btn::after,
body.menu-screen .reward-row::after,
body.menu-screen .unlock-grid button::after,
body.menu-screen #menu-bottom-nav button::after,
body.menu-screen .menu-top-icons button::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 236, 162, 0.42), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}

body.menu-screen .tab-btn:hover,
body.menu-screen .menu-arrow-btn:hover,
body.menu-screen .menu-display-btn:hover,
body.menu-screen .menu-segmented button:hover,
body.menu-screen .menu-presets button:hover,
body.menu-screen #menu-player-role-grid button:hover,
body.menu-screen .menu-widget-btn:hover,
body.menu-screen .reward-row:hover,
body.menu-screen .unlock-grid button:hover,
body.menu-screen #menu-bottom-nav button:hover,
body.menu-screen .menu-top-icons button:hover,
body.menu-screen #btn-start:hover {
    color: #fff4c8;
    border-color: rgba(255, 218, 125, 0.95);
    box-shadow:
        0 0 0 1px rgba(255, 237, 173, 0.22),
        0 0 19px rgba(245, 190, 88, 0.38),
        0 9px 18px rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -8px 16px rgba(0,0,0,0.42);
    animation: forgeHoverQuiver 0.42s ease-in-out;
}

body.menu-screen .tab-btn:hover::after,
body.menu-screen .menu-arrow-btn:hover::after,
body.menu-screen .menu-display-btn:hover::after,
body.menu-screen .menu-segmented button:hover::after,
body.menu-screen .menu-presets button:hover::after,
body.menu-screen #menu-player-role-grid button:hover::after,
body.menu-screen .menu-widget-btn:hover::after,
body.menu-screen .reward-row:hover::after,
body.menu-screen .unlock-grid button:hover::after,
body.menu-screen #menu-bottom-nav button:hover::after,
body.menu-screen .menu-top-icons button:hover::after {
    animation: epicGoldSweep 0.72s ease-out;
}

body.menu-screen .tab-btn.active,
body.menu-screen .menu-segmented button.active,
body.menu-screen .menu-presets button.active,
body.menu-screen #menu-player-role-grid button.is-human,
body.menu-screen .human-color-swatch.active {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 218, 112, 0.32), transparent 48%),
        linear-gradient(180deg, #5e3517, #17100b 65%, #070403);
    border-color: #ffda78;
    color: #fff2b7;
    box-shadow:
        0 0 15px rgba(255, 198, 82, 0.34),
        inset 0 0 15px rgba(255, 198, 82, 0.12),
        inset 0 2px 0 rgba(255,255,255,0.16);
}

body.menu-screen select,
body.menu-screen .menu-native-select {
    appearance: none;
    border: 2px solid rgba(214, 157, 71, 0.72);
    border-radius: 2px;
    color: #f7df9d;
    background:
        linear-gradient(45deg, transparent 50%, #f3cf7c 50%) calc(100% - 16px) 50% / 7px 7px no-repeat,
        linear-gradient(135deg, #f3cf7c 50%, transparent 50%) calc(100% - 10px) 50% / 7px 7px no-repeat,
        linear-gradient(180deg, rgba(255,236,174,0.16), transparent 24%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, #21140b, #050403);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.13),
        inset 0 -10px 18px rgba(0,0,0,0.42),
        0 6px 14px rgba(0,0,0,0.34);
}

body.menu-screen input.menu-nickname {
    font-family: var(--font-epic-ui);
    color: #fff0ba;
    text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

body.menu-screen .menu-group label,
body.menu-screen .menu-widget h2,
body.menu-screen #menu-bottom-nav button,
body.menu-screen .menu-top-icons,
body.menu-screen .menu-rank-row {
    font-family: var(--font-epic-ui);
    letter-spacing: 0.35px;
}

/* Trial 5: historical parchment layout, readable left/right menus with an open center */
body.menu-screen {
    background-image:
        radial-gradient(ellipse at 50% 46%, rgba(255, 214, 136, 0.06), transparent 28%),
        radial-gradient(ellipse at 50% 48%, transparent 36%, rgba(0,0,0,0.58) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.42), transparent 24%, transparent 75%, rgba(0,0,0,0.42)),
        url("menu-background-weather-trails.png?v=menu-bg-1");
}

body.menu-screen #start-menu {
    width: 500px;
    max-width: 500px;
    padding: 164px 22px 18px;
    background:
        linear-gradient(90deg, rgba(84, 48, 19, 0.30), transparent 14%, transparent 86%, rgba(84, 48, 19, 0.32)),
        radial-gradient(circle at 50% 7%, rgba(255, 233, 162, 0.18), transparent 35%),
        repeating-linear-gradient(21deg, rgba(255,255,255,0.030) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, rgba(49, 32, 17, 0.94), rgba(13, 9, 7, 0.96));
    border-width: 8px;
    border-image: linear-gradient(135deg, #f6dfac, #a46b2c 20%, #332011 50%, #bd873d 80%, #fff1c4) 1;
    box-shadow:
        0 0 0 2px rgba(17, 9, 3, 0.92),
        0 18px 44px rgba(0,0,0,0.72),
        inset 0 2px 0 rgba(255,244,203,0.18),
        inset 0 -24px 42px rgba(0,0,0,0.34);
}

body.menu-screen #menu-title-decor {
    top: 6px;
    left: 46px;
    right: 46px;
    height: 138px;
}

body.menu-screen #main-title {
    top: 43px;
    left: 78px;
    right: 78px;
    color: #f7dda0;
    font-size: clamp(2rem, 2.8vw, 3.1rem);
    line-height: 0.92;
    text-shadow:
        0 2px 0 #321705,
        0 0 13px rgba(255,215,128,0.30);
}

body.menu-screen .title-banner {
    width: 44px;
    height: 116px;
    opacity: 0.78;
}

body.menu-screen .title-crown {
    font-size: 1.7rem;
    top: -9px;
}

body.menu-screen #menu-profile-card,
body.menu-screen #menu-welcome-tip,
body.menu-screen .menu-group,
body.menu-screen .human-color-card,
body.menu-screen .menu-widget,
body.menu-screen .menu-top-icons,
body.menu-screen #menu-bottom-nav {
    background:
        linear-gradient(90deg, rgba(78, 45, 18, 0.26), transparent 16%, transparent 84%, rgba(78,45,18,0.26)),
        radial-gradient(circle at 18% 0, rgba(255, 234, 167, 0.12), transparent 32%),
        repeating-linear-gradient(22deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, rgba(28, 22, 16, 0.92), rgba(7, 6, 5, 0.94));
    border-color: rgba(226, 180, 96, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 242, 199, 0.12),
        inset 0 -14px 22px rgba(0,0,0,0.30),
        0 10px 22px rgba(0,0,0,0.38);
}

body.menu-screen .tab-btn,
body.menu-screen .menu-arrow-btn,
body.menu-screen .menu-display-btn,
body.menu-screen .menu-segmented button,
body.menu-screen .menu-presets button,
body.menu-screen #menu-player-role-grid button,
body.menu-screen .human-color-swatch,
body.menu-screen .menu-widget-btn,
body.menu-screen .reward-row,
body.menu-screen .unlock-grid button,
body.menu-screen #menu-bottom-nav button,
body.menu-screen .menu-top-icons button {
    border-color: rgba(219, 170, 84, 0.58);
    background:
        linear-gradient(180deg, rgba(255,236,174,0.15), transparent 25%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.020) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, #332112, #100b07 68%, #060403);
    color: #f3deb0;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 199, 0.12),
        inset 0 -8px 14px rgba(0,0,0,0.30),
        0 5px 11px rgba(0,0,0,0.28);
}

body.menu-screen .tab-btn.active,
body.menu-screen .menu-segmented button.active,
body.menu-screen .menu-presets button.active,
body.menu-screen #menu-player-role-grid button.is-human,
body.menu-screen .human-color-swatch.active {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 225, 137, 0.20), transparent 48%),
        linear-gradient(180deg, #543313, #14100b 68%, #070403);
    border-color: rgba(255, 224, 144, 0.82);
    box-shadow:
        0 0 10px rgba(255, 198, 82, 0.24),
        inset 0 0 12px rgba(255, 198, 82, 0.10);
}

body.menu-screen #btn-start {
    background:
        linear-gradient(180deg, rgba(255, 242, 190, 0.24), transparent 24%),
        linear-gradient(180deg, #c29655, #6a4118 58%, #a4712c);
    color: #fff0bd;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -9px 16px rgba(0,0,0,0.28),
        0 8px 17px rgba(0,0,0,0.48);
}

body.menu-screen #menu-side-panel {
    width: clamp(248px, 19vw, 320px);
    gap: 10px;
}

body.menu-screen .menu-widget {
    padding: 10px;
    border-width: 7px;
    border-image: linear-gradient(135deg, #f6dfac, #8b5a25 22%, #24170d 52%, #ba843a 82%, #fff1c4) 1;
}

body.menu-screen .menu-widget h2 {
    font-size: 0.86rem;
    margin-bottom: 7px;
    color: #f3d99f;
}

body.menu-screen .leaderboard-widget li,
body.menu-screen .reward-row {
    padding: 6px;
    font-size: 0.76rem;
}

body.menu-screen .unlock-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

body.menu-screen .unlock-grid button {
    min-height: 42px;
    font-size: 0.65rem;
}

body.menu-screen #menu-bottom-nav {
    left: 55%;
    width: min(500px, 37vw);
    opacity: 0.92;
}

body.menu-screen #menu-bottom-nav button {
    min-height: 48px;
    font-size: 0.7rem;
}

@media (max-width: 920px) {
    body.menu-screen #menu-side-panel,
    body.menu-screen #menu-bottom-nav {
        display: none;
    }

    body.menu-screen #start-menu {
        left: 50%;
        transform: translateX(-50%) scale(var(--classic-menu-scale, 1));
        transform-origin: top center;
    }
}

.menu-widget {
    border: 1px solid rgba(213, 166, 88, 0.66);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), transparent 22%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, rgba(22, 26, 25, 0.91), rgba(9, 10, 10, 0.94)),
        radial-gradient(circle at 0 0, rgba(160, 92, 31, 0.18), transparent 48%);
    color: #f4e2b0;
    padding: 12px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.menu-widget h2 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #f3d284;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leaderboard-widget ol {
    list-style: decimal inside;
}

.leaderboard-widget li,
.reward-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.leaderboard-widget .is-player {
    color: #f6d365;
    background: rgba(28, 98, 148, 0.38);
}

.reward-row button {
    padding: 4px 14px;
    border: 1px solid rgba(255, 221, 124, 0.55);
    border-radius: 4px;
    background: linear-gradient(180deg, #4f8b32, #22521f);
    color: #fff3c0;
    font-weight: 800;
    text-transform: uppercase;
}

.unlock-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.unlock-grid span {
    min-height: 54px;
    display: grid;
    place-items: end center;
    padding: 8px;
    border: 1px solid rgba(213, 166, 88, 0.46);
    border-radius: 4px;
    background:
        radial-gradient(circle at 50% 28%, rgba(95, 166, 219, 0.26), transparent 34%),
        rgba(0,0,0,0.28);
    font-size: 0.75rem;
    text-align: center;
}

.leaderboard-widget .is-you {
    color: #f6d365;
    background: rgba(28, 98, 148, 0.38);
}

.menu-widget-btn,
.reward-row,
.unlock-grid button {
    width: 100%;
    border: 1px solid rgba(213, 166, 88, 0.52);
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, rgba(35, 27, 17, 0.98), rgba(8, 9, 9, 0.98));
    color: #f4e2b0;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.menu-widget-btn {
    min-height: 36px;
    margin-top: 10px;
}

.reward-row {
    align-items: center;
    text-align: left;
}

.reward-row strong {
    min-width: 54px;
    padding: 6px 10px;
    border: 1px solid rgba(105, 193, 99, 0.66);
    border-radius: 4px;
    background: linear-gradient(180deg, #40692c, #1d421a);
    text-align: center;
}

.unlock-grid button {
    min-height: 60px;
    padding: 8px;
    font-size: 0.72rem;
    text-align: center;
}

#menu-news-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(520px, 42vw);
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 11px 18px;
    border: 1px solid rgba(213, 166, 88, 0.58);
    border-radius: 3px;
    background: rgba(11, 13, 13, 0.9);
    color: #f5e3b2;
    box-shadow: 0 12px 24px rgba(0,0,0,0.42);
    z-index: 1;
}

.glass-panel {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0)),
        linear-gradient(135deg, var(--panel-stone), rgba(3, 6, 14, 0.92)),
        radial-gradient(circle at 15% 0%, var(--panel-wood), transparent 48%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 0 22px rgba(246, 211, 101, 0.045);
}

.overlay-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    z-index: 1000;
    animation: menuEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes menuEntrance {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.menu-group {
    margin-bottom: 20px;
    text-align: left;
}

.menu-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.menu-group select, .menu-group input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    font-family: inherit;
}

.menu-group select option {
    background: var(--bg-color);
}

.highscore-container {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #f1c40f;
}

.start-btn {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
    color: var(--accent-gold);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.start-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(to right, rgba(255, 215, 0, 0.4), rgba(255, 140, 0, 0.4));
    box-shadow: 0 0 20px var(--accent-glow);
    border-color: var(--accent-gold);
}

h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-gold);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.turn-indicator {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
}



.score-card {
    padding: 7px 15px;
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
        rgba(2, 6, 15, 0.66);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    min-width: 280px;
    transition: transform 0.2s ease, background-color 0.2s, box-shadow 0.2s ease;
}

.score-card.active-turn-card {
    transform: translateX(-2px);
    background:
        linear-gradient(90deg, rgba(246, 211, 101, 0.13), rgba(255,255,255,0.025)),
        rgba(8, 12, 23, 0.9);
    box-shadow: 0 0 18px rgba(246, 211, 101, 0.24), inset 0 0 12px rgba(246, 211, 101, 0.06);
    border-color: rgba(246, 211, 101, 0.42);
}

.player-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0;
    min-width: 170px;
    max-width: 280px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    flex-shrink: 0;
}

.player-stats {
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
    color: #e2e8f0;
}

.player-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 3px 6px;
    border-radius: 4px;
}

.red-score { border-bottom: 3px solid var(--player1-color); }
.blue-score { border-bottom: 3px solid var(--player2-color); }
.green-score { border-bottom: 3px solid var(--player3-color); }
.yellow-score { border-bottom: 3px solid var(--player4-color); }

#game-status {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 400;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.game-container {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background:
        radial-gradient(circle at 22% 25%, rgba(55, 135, 185, 0.12), transparent 26%),
        radial-gradient(circle at 80% 62%, rgba(12, 70, 120, 0.16), transparent 32%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 42px),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.026) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, var(--sea-mid), var(--sea-deep));
    box-shadow: inset 0 18px 38px rgba(0,0,0,0.62);
}

.game-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 45%, transparent 0 44%, rgba(0,0,0,0.28) 84%),
        linear-gradient(90deg, rgba(68,189,220,0.035), transparent 18%, transparent 82%, rgba(68,189,220,0.035));
    z-index: 0;
}

#map-container, #physics-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let physics canvas handle pointer events when needed */
    z-index: 1;
}

#physics-container {
    pointer-events: auto; /* Physics canvas needs to intercept drag/drop */
}

#physics-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Map SVG Styling */
svg {
    width: 100%;
    height: 100%;
    filter:
        sepia(0.12)
        contrast(1.05)
        drop-shadow(0 12px 20px rgba(0,0,0,0.36));
}

.province {
    fill: var(--neutral-color);
    stroke: rgba(35, 26, 18, 0.72);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.3s ease, filter 0.25s ease;
}

.province:not(.player1):not(.player2):not(.player3):not(.player4) {
    fill: #405060;
}

.province:hover {
    filter: brightness(1.18) saturate(1.12) drop-shadow(0 0 9px rgba(255, 217, 122, 0.34));
}

.province.player1 { fill: var(--player1-color);  cursor: pointer; filter: drop-shadow(0 0 5px var(--player1-color)); }
.province.player2 { fill: var(--player2-color);  cursor: pointer; filter: drop-shadow(0 0 5px var(--player2-color)); }
.province.player3 { fill: var(--player3-color);  cursor: pointer; filter: drop-shadow(0 0 5px var(--player3-color)); }
.province.player4 { fill: var(--player4-color);  cursor: pointer; filter: drop-shadow(0 0 5px var(--player4-color)); }

.province.shield-eligible {
    cursor: crosshair !important;
    stroke: #f6d365 !important;
    stroke-width: 4 !important;
    filter: brightness(1.2) drop-shadow(0 0 10px #f6d365) !important;
    animation: shieldProvincePulse 0.9s ease-in-out infinite alternate;
}

.province.shield-maxed {
    cursor: not-allowed !important;
    filter: grayscale(0.35) brightness(0.72) !important;
}

@keyframes shieldProvincePulse {
    from { filter: brightness(1.08) drop-shadow(0 0 5px #f6d365); }
    to { filter: brightness(1.28) drop-shadow(0 0 13px #f6d365); }
}

.map-usa .province {
    fill: #314253;
    stroke: rgba(147, 222, 232, 0.35);
    stroke-width: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.28));
}

.map-usa .province:not(.player1):not(.player2):not(.player3):not(.player4) {
    fill: #314253;
}

.map-usa .province.player1 { fill: color-mix(in srgb, var(--player1-color) 78%, #314253); filter: drop-shadow(0 0 5px var(--player1-color)); }
.map-usa .province.player2 { fill: color-mix(in srgb, var(--player2-color) 78%, #314253); filter: drop-shadow(0 0 5px var(--player2-color)); }
.map-usa .province.player3 { fill: color-mix(in srgb, var(--player3-color) 78%, #314253); filter: drop-shadow(0 0 5px var(--player3-color)); }
.map-usa .province.player4 { fill: color-mix(in srgb, var(--player4-color) 78%, #314253); filter: drop-shadow(0 0 5px var(--player4-color)); }

.map-usa .usa-state-outline,
.map-usa .usa-state-outline-dark {
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.45));
}

.province-label {
    fill: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
}

.province-center-dot {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.75));
}

.country-flag {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.75));
    opacity: 0.92;
}

.map-world .world-country-flag {
    filter: none;
    opacity: 0.94;
    image-rendering: auto;
}

.world-conquest-flag image {
    font-size: 25px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9));
}

.world-conquest-flag-glow {
    fill: rgba(246, 205, 87, 0.18);
    stroke: rgba(255, 224, 120, 0.72);
    stroke-width: 1.5;
}
#conquest-toast-stack {
    position: absolute;
    top: 22%;
    left: 50%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: min(460px, 84vw);
    transform: translateX(-50%);
    pointer-events: none;
}

.conquest-toast {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    padding: 6px 13px;
    border: 1px solid color-mix(in srgb, var(--toast-player-color) 70%, #f6d365);
    border-radius: 6px;
    background: rgba(6, 10, 17, 0.88);
    color: var(--toast-player-color);
    font-size: clamp(0.88rem, 1.5vw, 1.15rem);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 4px #000;
    box-shadow: 0 0 12px color-mix(in srgb, var(--toast-player-color) 35%, transparent);
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 150ms ease, transform 150ms ease;
}
.conquest-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.conquest-toast.is-leaving { opacity: 0; transform: translateY(-8px) scale(0.98); }
.conquest-toast img, .battle-country-flag {
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.8);
    vertical-align: middle;
}
.battle-country-flag { margin-right: 5px; }

#top-ui-container {
    pointer-events: none;
}

#top-ui-container .glass-panel,
#top-ui-container button {
    pointer-events: auto;
}

.map-name-badge {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 180;
    pointer-events: none;
    width: max-content;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid rgba(246, 211, 101, 0.48);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(8, 12, 20, 0.92), rgba(18, 28, 42, 0.82));
    color: #f6d365;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 0.96rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(0,0,0,0.42), 0 0 18px rgba(246, 211, 101, 0.16);
    text-shadow: 0 0 8px rgba(246, 211, 101, 0.4);
}

#ui-title {
    letter-spacing: 3px;
}

.turn-indicator {
    background: linear-gradient(90deg, rgba(246, 211, 101, 0.10), rgba(255,255,255,0.02));
    border: 1px solid rgba(246, 211, 101, 0.12);
    border-radius: 8px;
    padding: 7px 10px;
}

#current-player-name {
    text-shadow: 0 0 12px currentColor;
    font-weight: 800;
}

.active-shooter-ring {
    animation: shooter-pulse 1.5s infinite;
}

@keyframes shooter-pulse {
    0% { r: 5px; opacity: 1; stroke-width: 3px; stroke: #ffffff; filter: drop-shadow(0 0 5px #000); }
    100% { r: 35px; opacity: 0; stroke-width: 6px; stroke: #ffffff; filter: drop-shadow(0 0 5px #000); }
}
@media (max-width: 800px) {
    body.menu-screen {
        overflow: auto;
        background-position: center;
    }
    #menu-shell {
        min-width: 1180px;
        min-height: 720px;
    }
    body.menu-screen #start-menu {
        position: fixed;
        top: 12px;
        left: 12px;
        transform: none;
        width: 560px;
        max-width: 560px;
        max-height: calc(100vh - 92px);
        margin: 0;
        animation: none;
    }
    #menu-side-panel {
        display: flex;
        right: 18px;
        width: 320px;
    }
    #menu-news-bar {
        display: none;
        left: 470px;
        right: auto;
        transform: none;
        width: 430px;
    }
    #top-ui-container {
        flex-direction: column;
        align-items: center;
        padding: 5px;
        gap: 5px;
    }
    header.glass-panel {
        max-width: 100% !important;
        width: 100%;
        padding: 5px 10px !important;
    }
    #leaderboard {
        flex-direction: column !important;
        gap: 3px !important;
        padding: 5px !important;
    }
    .score-card {
        min-width: 100% !important;
        padding: 2px 8px !important;
        gap: 5px !important;
    }
    .player-name {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
    .player-stats {
        font-size: 0.75rem !important;
        gap: 8px !important;
    }
    #battle-log-container {
        height: 60px !important;
        min-height: 60px !important;
    }
}

@media (min-width: 801px) and (max-width: 1180px) {
    body.menu-screen #start-menu {
        width: 430px;
    }
    #menu-side-panel {
        display: flex;
        width: 300px;
    }
    #menu-news-bar {
        display: none;
        width: min(520px, 48vw);
        right: 24px;
        left: auto;
        transform: none;
    }
}

/* Readability pass: full-height side panel and integrated player/color slots */
body.menu-screen #start-menu {
    width: 540px;
    max-width: 540px;
}

body.menu-screen .player-setup {
    gap: 6px !important;
}

body.menu-screen .player-setup > label {
    padding-top: 2px;
    line-height: 1.15;
}

body.menu-screen #menu-player-role-grid {
    display: none !important;
}

body.menu-screen .human-color-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

body.menu-screen .slot-color-card {
    grid-template-columns: 96px 30px 1fr;
    gap: 6px;
    min-height: 42px;
    padding: 5px;
    opacity: 1;
}

body.menu-screen .slot-color-card.is-none {
    opacity: 0.62;
}

body.menu-screen .slot-type-toggle {
    min-height: 32px;
    width: 100%;
    padding: 3px 6px;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 4px;
    text-align: left;
    text-transform: uppercase;
}

body.menu-screen .slot-type-toggle span {
    color: #8fc4ff;
    font-size: 0.66rem;
    font-weight: 900;
}

body.menu-screen .slot-type-toggle strong {
    color: #fff2ba;
    font-size: 0.68rem;
    line-height: 1.05;
}

body.menu-screen .slot-color-card.is-ai .slot-type-toggle span {
    color: #dfd0ff;
}

body.menu-screen .slot-color-card.is-none .slot-type-toggle span,
body.menu-screen .slot-color-card.is-none .slot-type-toggle strong {
    color: rgba(245, 222, 174, 0.54);
}

body.menu-screen .slot-color-meta {
    display: grid;
    place-items: center;
    color: rgba(246, 211, 101, 0.76);
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

body.menu-screen .human-color-swatches {
    grid-template-columns: repeat(5, minmax(26px, 1fr));
    gap: 5px;
}

body.menu-screen .human-color-swatch {
    height: 30px;
    min-height: 30px;
    padding: 0;
}

body.menu-screen .human-color-swatch.is-used:not(.active),
body.menu-screen .human-color-swatch:disabled {
    opacity: 0.28;
    filter: grayscale(0.75);
    cursor: not-allowed;
}

body.menu-screen .slot-strip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

body.menu-screen .slot-mini-card {
    display: grid;
    grid-template-columns: 1fr 28px;
    gap: 4px;
    align-items: center;
    min-height: 40px;
    padding: 5px;
    border-color: rgba(218, 168, 84, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 174, 0.10),
        inset 0 -8px 16px rgba(0,0,0,0.30);
}

body.menu-screen .slot-mini-card .slot-type-toggle {
    min-height: 28px;
    padding: 3px 4px;
    grid-template-columns: 19px 1fr;
    gap: 3px;
}

body.menu-screen .slot-mini-card .slot-type-toggle span {
    font-size: 0.58rem;
}

body.menu-screen .slot-mini-card .slot-type-toggle strong {
    font-size: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.menu-screen .slot-color-orb {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 224, 144, 0.76);
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.56), transparent 24%),
        radial-gradient(circle at 50% 50%, var(--slot-color), var(--slot-color) 56%, rgba(0,0,0,0.85) 72%);
    box-shadow:
        0 0 9px color-mix(in srgb, var(--slot-color) 52%, transparent),
        inset 0 0 0 2px rgba(0,0,0,0.42);
}

body.menu-screen .slot-color-orb.is-none {
    border-style: dashed;
    opacity: 0.72;
    background:
        linear-gradient(135deg, transparent 44%, rgba(244, 211, 144, 0.62) 47% 53%, transparent 56%),
        radial-gradient(circle at 50% 50%, rgba(60, 44, 28, 0.82), rgba(8, 6, 4, 0.96));
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.42);
}

body.menu-screen .slot-color-orb:hover:not(.is-none) {
    transform: translateY(-1px) scale(1.04);
}

body.menu-screen .slot-banner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

body.menu-screen .slot-banner-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 7px;
    min-height: 48px;
    padding: 7px 8px;
    border-color: rgba(218, 168, 84, 0.66);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--slot-color) 46%, rgba(0,0,0,0.70)), color-mix(in srgb, var(--slot-color) 18%, rgba(0,0,0,0.86)) 72%, rgba(0,0,0,0.34)),
        radial-gradient(circle at 12% 18%, rgba(255, 235, 174, 0.12), transparent 36%),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 9px),
        linear-gradient(180deg, rgba(54, 34, 17, 0.96), rgba(12, 8, 5, 0.98));
    overflow: hidden;
}

body.menu-screen .slot-banner-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    border-radius: 0 3px 3px 0;
    background: var(--slot-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--slot-color) 58%, transparent);
}

body.menu-screen .slot-banner-card.is-none {
    opacity: 0.72;
}

body.menu-screen .slot-banner-card .slot-type-toggle {
    min-height: 34px;
    padding: 5px 9px 5px 12px;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), transparent 35%),
        linear-gradient(90deg, color-mix(in srgb, var(--slot-color) 58%, rgba(0,0,0,0.55)), rgba(0,0,0,0.36));
    border-color: color-mix(in srgb, var(--slot-color) 68%, #f2c76a);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -8px 14px rgba(0,0,0,0.34),
        0 0 13px color-mix(in srgb, var(--slot-color) 32%, transparent);
}

body.menu-screen .slot-banner-card .slot-type-toggle span {
    display: grid;
    place-items: center;
    min-height: 22px;
    border-radius: 3px;
    background: rgba(0,0,0,0.34);
    color: #fff5c8;
    font-size: 0.76rem;
}

body.menu-screen .slot-banner-card .slot-type-toggle strong {
    color: #fff6d1;
    font-size: 0.82rem;
    line-height: 1.05;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

body.menu-screen .slot-card-color-cycle {
    width: 34px;
    height: 34px;
    min-height: 34px;
    align-self: center;
    border-radius: 5px;
    border: 2px solid rgba(255, 226, 145, 0.76);
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.50), transparent 24%),
        linear-gradient(180deg, var(--slot-color), color-mix(in srgb, var(--slot-color) 55%, #050403));
    box-shadow:
        0 0 11px color-mix(in srgb, var(--slot-color) 42%, transparent),
        inset 0 0 0 2px rgba(0,0,0,0.36);
    cursor: pointer;
}

body.menu-screen .slot-banner-card.is-none .slot-card-color-cycle {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
    background:
        linear-gradient(135deg, transparent 43%, rgba(244, 211, 144, 0.64) 47% 53%, transparent 57%),
        linear-gradient(180deg, rgba(69, 52, 32, 0.82), rgba(8, 6, 4, 0.96));
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.36);
}

body.menu-screen .slot-card-color-cycle:hover:not(:disabled) {
    transform: translateY(-1px);
}

body.menu-screen.menu-mode-career #start-menu {
    height: calc((100vh - 24px) / var(--classic-menu-scale, 1));
    padding-bottom: 18px;
}

body.menu-screen.menu-mode-career #career-view {
    height: calc(100% - 88px);
    display: flex !important;
    flex-direction: column;
    gap: 7px;
}

body.menu-screen.menu-mode-career #career-view .profile-card {
    margin-bottom: 0 !important;
}

body.menu-screen.menu-mode-career #career-view > .profile-card:nth-of-type(1) {
    flex: 0 0 auto;
}

body.menu-screen.menu-mode-career #career-view > .profile-card:nth-of-type(2),
body.menu-screen.menu-mode-career #career-view > .profile-card:nth-of-type(3),
body.menu-screen.menu-mode-career #career-view > .profile-card:nth-of-type(4) {
    flex: 0.8 1 0;
}

body.menu-screen.menu-mode-career #career-view > .profile-card:nth-of-type(5),
body.menu-screen.menu-mode-career #career-view > .profile-card:nth-of-type(6) {
    flex: 1 1 0;
}

body.menu-screen.menu-mode-career #btn-start-career {
    margin-top: auto !important;
}

body.menu-screen #menu-side-panel {
    top: 12px;
    bottom: auto;
    height: calc((100vh - 24px) / var(--classic-side-scale, 1));
    width: clamp(360px, 28vw, 430px);
    gap: 12px;
    transform: scale(var(--classic-side-scale, 1));
}

body.menu-screen .menu-top-icons {
    grid-template-columns: 1.2fr 0.78fr 0.78fr 0.78fr;
    flex: 0 0 auto;
}

body.menu-screen .menu-top-icons span,
body.menu-screen .menu-top-icons button {
    min-width: 0;
    padding: 11px 5px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.08;
    font-size: 0.76rem;
    letter-spacing: 0.15px;
}

body.menu-screen .menu-top-icons span {
    display: grid;
    place-items: center;
    color: #fff1bc;
    font-weight: 900;
    text-align: center;
}

body.menu-screen .menu-widget {
    padding: 12px;
}

body.menu-screen .leaderboard-widget {
    flex: 0 0 auto;
}

body.menu-screen .rewards-widget {
    flex: 0 0 auto;
}

body.menu-screen .unlocks-widget {
    flex: 1 1 auto;
    min-height: 150px;
}

body.menu-screen .menu-widget h2 {
    font-size: 1rem;
    margin-bottom: 9px;
}

body.menu-screen .leaderboard-widget li,
body.menu-screen .reward-row {
    padding: 8px;
    font-size: 0.86rem;
    line-height: 1.15;
}

body.menu-screen .menu-widget-btn {
    min-height: 42px;
    font-size: 0.88rem;
}

body.menu-screen .unlock-grid {
    height: calc(100% - 36px);
}

body.menu-screen .unlock-grid button {
    min-height: 52px;
    font-size: 0.76rem;
}

@media (min-width: 801px) and (max-width: 1180px) {
    body.menu-screen #start-menu {
        width: 500px;
        max-width: 500px;
    }

    body.menu-screen #menu-side-panel {
        width: 340px;
    }
}


::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }

.map-world .province-label {
    fill: rgba(255, 255, 255, 0.94);
    paint-order: stroke fill;
    stroke: rgba(5, 10, 18, 0.88);
    stroke-width: 3px;
    stroke-linejoin: round;
    font-weight: 800;
}

.map-world .world-label-leader-layer line {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.75));
}
.profile-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 38%, rgba(246, 211, 101, 0.16), transparent 34%),
        radial-gradient(circle at 50% 52%, rgba(20, 10, 2, 0.28), transparent 48%),
        rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(5px);
}

.profile-gate-card {
    width: min(460px, 92vw);
    padding: 28px 30px 24px;
    color: #f8ead0;
    text-align: center;
    border: 1px solid rgba(246, 211, 101, 0.62);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 24%, rgba(255,255,255,0.04) 64%, transparent),
        linear-gradient(180deg, rgba(34, 24, 13, 0.96), rgba(8, 8, 7, 0.96));
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(255, 238, 180, 0.26),
        0 0 26px rgba(246, 211, 101, 0.18);
}

.profile-gate-kicker {
    color: #f6d365;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.profile-gate-card h2 {
    font-family: var(--font-epic-title);
    color: #ffe3a3;
    font-size: 1.9rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

.profile-gate-card p {
    color: rgba(248, 234, 208, 0.82);
    line-height: 1.45;
    margin-bottom: 18px;
}

.profile-gate-card input {
    width: 100%;
    padding: 14px 16px;
    color: #fff8df;
    text-align: center;
    font: 800 1.1rem var(--font-epic-ui);
    letter-spacing: 0.04em;
    border: 1px solid rgba(246, 211, 101, 0.58);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.38);
    outline: none;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.46);
}

.profile-gate-card input:focus {
    border-color: #ffe3a3;
    box-shadow: 0 0 18px rgba(246, 211, 101, 0.24), inset 0 0 18px rgba(0,0,0,0.46);
}

.profile-gate-error {
    min-height: 20px;
    margin: 8px 0 4px;
    color: #ff7675;
    font-weight: 700;
    font-size: 0.86rem;
}

.profile-gate-card button {
    width: 100%;
    margin-top: 8px;
    padding: 14px 18px;
    cursor: pointer;
    color: #2b1804;
    font: 900 1.1rem var(--font-epic-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 238, 180, 0.82);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe3a3, #c8872e 52%, #8f5a1e);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.42);
}

.profile-gate-card button:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 32px rgba(246, 211, 101, 0.24), inset 0 1px 0 rgba(255,255,255,0.48);
}

.profile-gate-card small {
    display: block;
    margin-top: 12px;
    color: rgba(248, 234, 208, 0.58);
    line-height: 1.35;
}


/* Online lobi: panel taşmasın, odalar kendi içinde aksın */
body.menu-screen #online-view.online-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(62vh, 560px);
    overflow: hidden;
}

body.menu-screen #online-view .online-card,
body.menu-screen #online-view .online-lobby-card {
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
    border-color: rgba(215, 180, 96, 0.42);
    background:
        linear-gradient(135deg, rgba(63, 43, 20, 0.52), rgba(5, 8, 10, 0.82)),
        repeating-linear-gradient(155deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 13px);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.56), 0 8px 18px rgba(0,0,0,0.26);
}

body.menu-screen #online-title {
    margin: 0 0 4px !important;
    color: #f6d365 !important;
    font-size: 1.05rem;
    letter-spacing: 0.6px;
}

body.menu-screen #online-hint {
    color: rgba(232, 222, 190, 0.78) !important;
    font-size: 0.74rem !important;
    line-height: 1.2;
}

body.menu-screen #online-view .menu-group {
    display: grid;
    grid-template-columns: 128px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

body.menu-screen #online-player-name,
body.menu-screen #online-room-size {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(215, 180, 96, 0.55);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(10, 12, 12, 0.95), rgba(28, 21, 13, 0.92));
    color: #fff0c4;
    font-family: var(--font-epic-ui, Georgia, serif);
    font-size: 0.9rem;
}

body.menu-screen #online-create-btn.online-create-btn {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 12px 12px 10px !important;
    border-radius: 4px;
    font-size: 1.55rem;
    letter-spacing: 1.2px;
}

body.menu-screen .online-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

body.menu-screen #online-open-title {
    color: #f8ead0;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
}

body.menu-screen #online-refresh-btn.online-refresh-btn {
    width: auto;
    min-width: 82px;
    padding: 7px 12px !important;
    font-size: 0.75rem;
    background: linear-gradient(180deg, #4a3a22, #17130d) !important;
}

body.menu-screen .online-rooms-card {
    flex: 1 1 170px;
    min-height: 150px;
    overflow: hidden;
}

body.menu-screen #online-open-rooms {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 190px;
    overflow-y: auto;
    padding-right: 3px;
}

body.menu-screen .online-room-card {
    width: 100%;
    border: 1px solid rgba(215, 180, 96, 0.38);
    border-radius: 7px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(255,255,255,0.085), rgba(0,0,0,0.34));
    color: #f8fafc;
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.42);
}

body.menu-screen .online-room-card:hover {
    border-color: rgba(246, 211, 101, 0.85);
    box-shadow: 0 0 16px rgba(246, 211, 101, 0.16), inset 0 0 12px rgba(0,0,0,0.5);
    transform: translateY(-1px);
}

body.menu-screen .online-room-top,
body.menu-screen .online-player-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

body.menu-screen .online-room-top strong {
    color: #fff0c4;
    font-size: 0.88rem;
}

body.menu-screen .online-room-count {
    color: #8ec5ff;
    font-weight: 900;
    white-space: nowrap;
}

body.menu-screen .online-room-meta {
    margin-top: 3px;
    color: rgba(210, 221, 236, 0.72);
    font-size: 0.7rem;
    line-height: 1.15;
}

body.menu-screen .online-empty {
    padding: 12px;
    border: 1px dashed rgba(246, 211, 101, 0.28);
    border-radius: 7px;
    color: rgba(232, 222, 190, 0.76);
    font-size: 0.78rem;
    text-align: center;
}

body.menu-screen .online-error {
    color: #ff9f9f;
}

body.menu-screen #online-lobby.online-lobby-card {
    padding: 10px 12px !important;
    max-height: 185px;
    overflow-y: auto;
}

body.menu-screen .online-player-row {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px;
    padding: 7px 9px;
    background: rgba(255,255,255,0.07);
    color: #f4edd8;
}


/* Mermi skinleri: kalıcı kilit + anlık önizleme */
body.menu-screen #skin-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px !important;
}

body.menu-screen .skin-choice {
    min-height: 54px;
    padding: 7px 8px;
    border: 1px solid rgba(215, 180, 96, 0.28);
    border-radius: 8px;
    background:
        radial-gradient(circle at 16px 16px, color-mix(in srgb, var(--skin-color) 40%, transparent), transparent 34px),
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(0,0,0,0.42));
    color: #efe2bd;
    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-rows: auto auto;
    column-gap: 7px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.menu-screen .skin-choice:hover,
body.menu-screen .skin-choice.active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--skin-trail) 72%, #ffe8a3);
    box-shadow: 0 0 14px color-mix(in srgb, var(--skin-trail) 42%, transparent), inset 0 0 14px rgba(0,0,0,0.42);
}

body.menu-screen .skin-choice.preview {
    opacity: 0.78;
}

body.menu-screen .skin-swatch {
    grid-row: 1 / span 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--skin-color);
    box-shadow: 0 0 10px var(--skin-trail), inset 0 1px 2px rgba(255,255,255,0.6);
}

body.menu-screen .skin-name {
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.05;
}

body.menu-screen .skin-choice small {
    color: rgba(224, 210, 176, 0.72);
    font-size: 0.58rem;
    line-height: 1.05;
}

/* Günlük maç kotası */
body.menu-screen .daily-quota-card {
    margin: 8px 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(246, 211, 101, 0.34);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(246, 211, 101, 0.11), rgba(0,0,0,0.38));
    color: #f7e5ad;
    font-family: var(--font-epic-ui, Georgia, serif);
    font-size: 0.78rem;
    letter-spacing: 0.3px;
}

body.menu-screen .daily-quota-card strong {
    color: #ffe08a;
    font-size: 0.95rem;
}

body.menu-screen .daily-quota-card.quota-empty {
    border-color: rgba(255, 107, 107, 0.46);
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.12), rgba(0,0,0,0.46));
    color: #ffb6b6;
}

body.menu-screen .start-btn.quota-disabled,
body.menu-screen .start-btn:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    filter: grayscale(0.45);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.62);
}

.match-reward-pill {
    order: -10;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(246, 211, 101, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(246, 211, 101, 0.14), rgba(20, 13, 6, 0.72)),
        rgba(7, 10, 17, 0.86);
    color: rgba(255, 244, 200, 0.88);
    box-shadow: 0 0 16px rgba(246, 211, 101, 0.11), inset 0 0 14px rgba(255,255,255,0.04);
    font-size: 0.82rem;
}

.match-reward-pill span {
    color: rgba(225, 206, 160, 0.72);
}

.match-reward-pill strong {
    color: #f6d365;
    white-space: nowrap;
}

.reward-breakdown {
    margin: 8px auto 14px;
    max-width: 560px;
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(246, 211, 101, 0.25);
    border-radius: 8px;
    background: rgba(6, 8, 14, 0.42);
    color: rgba(235, 226, 205, 0.86);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
}

.reward-breakdown strong {
    color: #f6d365;
}

.reward-breakdown b {
    color: #ffeaa7;
}

@media (max-width: 900px) {
    .match-reward-pill {
        align-self: stretch;
        justify-content: center;
        font-size: 0.74rem;
        padding: 4px 6px;
    }
}

.menu-info-modal {
    width: min(720px, 92vw);
    max-height: min(78vh, 720px);
    overflow-y: auto;
    text-align: left;
    padding: 24px;
}

.menu-info-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(246, 211, 101, 0.36);
    border-radius: 50%;
    background: rgba(12, 8, 5, 0.82);
    color: #f6d365;
    font-size: 1.4rem;
    cursor: pointer;
}

.menu-info-body {
    display: grid;
    gap: 12px;
    color: rgba(247, 232, 196, 0.9);
    line-height: 1.45;
}

.menu-info-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid rgba(246, 211, 101, 0.22);
    border-radius: 8px;
    background: rgba(5, 7, 12, 0.38);
}

.menu-info-table th,
.menu-info-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(246, 211, 101, 0.13);
    vertical-align: top;
}

.menu-info-table th {
    color: #f6d365;
    text-align: left;
    background: rgba(246, 211, 101, 0.08);
}


body.menu-screen .daily-quota-card.quota-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    margin: 6px 0 0;
    padding: 8px 11px;
    border-radius: 4px;
    border: 1px solid rgba(246, 211, 101, 0.42);
    background:
        linear-gradient(135deg, rgba(255, 226, 130, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(26, 21, 13, 0.92), rgba(7, 8, 8, 0.94));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.26);
    color: #f8e2a0;
    text-transform: uppercase;
    white-space: nowrap;
}

body.menu-screen .daily-quota-card.quota-pill span {
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    opacity: 0.9;
}

body.menu-screen .daily-quota-card.quota-pill strong {
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 3px;
    text-align: center;
    background: rgba(0,0,0,0.36);
    border: 1px solid rgba(246, 211, 101, 0.28);
    color: #fff0b8;
    font-size: 1rem;
}

body.menu-screen.menu-mode-career #career-quota-card {
    grid-column: 1 / -1;
}

body.menu-screen.menu-mode-career #btn-start-career {
    position: relative !important;
    bottom: auto !important;
    z-index: 1 !important;
    margin-top: 6px !important;
    flex: 0 0 auto;
}

body.menu-screen.menu-mode-career .tournament-card {
    flex: 0 0 auto !important;
    min-height: 0;
}

body.menu-screen.menu-mode-career #tournament-status {
    min-height: 18px;
    line-height: 1.2;
    white-space: normal;
}

.leaderboard-widget li.is-empty {
    opacity: 0.72;
}

.leaderboard-period-block {
    margin: 14px 0 18px;
}

.leaderboard-period-block h3 {
    margin: 0 0 3px;
    color: #ffe58f;
    font-size: 1.15rem;
}

.leaderboard-period-block small {
    display: block;
    margin-bottom: 8px;
    color: rgba(248, 230, 181, 0.78);
}

.menu-info-table.leaderboard-real-table td:first-child,
.menu-info-table.leaderboard-real-table th:first-child {
    width: 42px;
    text-align: center;
}

.menu-info-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.menu-info-actions button {
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid rgba(246, 211, 101, 0.52);
    background:
        linear-gradient(135deg, rgba(255, 226, 130, 0.1), transparent 38%),
        linear-gradient(180deg, rgba(52, 38, 18, 0.94), rgba(11, 10, 8, 0.96));
    color: #ffe8a6;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.28);
    cursor: pointer;
}

.menu-info-actions button:hover {
    border-color: rgba(255, 228, 134, 0.85);
    color: #fff2c2;
    box-shadow: 0 0 18px rgba(246, 211, 101, 0.18), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.menu-info-actions.single-action {
    grid-template-columns: minmax(180px, 260px);
    justify-content: start;
}

.settings-table input[type="range"] {
    width: min(240px, 100%);
    accent-color: #e7bd62;
}

.settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffe8a6;
    font-weight: 700;
}

.settings-toggle input {
    accent-color: #d9a441;
    transform: scale(1.1);
}

.settings-audio-note {
    margin-top: 4px;
    color: rgba(247, 232, 196, 0.72);
    font-size: 0.82rem;
}

/* Stable cross-screen menu layout: keeps the first screen similar on different PCs */
body.menu-screen {
    --menu-safe-x: clamp(12px, 1.6vw, 30px);
    --menu-safe-y: clamp(8px, 1.5vh, 18px);
    background-size: cover !important;
    background-position: center center !important;
}

body.menu-screen #start-menu {
    top: var(--menu-safe-y) !important;
    left: var(--menu-safe-x) !important;
    width: clamp(440px, 31vw, 540px) !important;
    max-width: calc(100vw - 420px) !important;
    max-height: none !important;
    will-change: transform;
}

body.menu-screen #menu-side-panel {
    top: var(--menu-safe-y) !important;
    right: var(--menu-safe-x) !important;
    width: clamp(300px, 24vw, 390px) !important;
    max-width: 30vw !important;
    height: calc((100vh - (var(--menu-safe-y) * 2)) / var(--classic-side-scale, 1)) !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 12px);
    will-change: transform;
}

body.menu-screen #menu-side-panel .menu-widget {
    min-height: 0;
}

body.menu-screen #menu-side-panel .leaderboard-widget,
body.menu-screen #menu-side-panel .rewards-widget {
    flex: 0 0 auto;
}

body.menu-screen #menu-side-panel .unlocks-widget,
body.menu-screen #menu-side-panel .social-widget {
    flex: 1 1 auto;
    min-height: 112px;
}

body.menu-screen #menu-bottom-nav {
    left: 55% !important;
    bottom: clamp(8px, 1.2vh, 18px) !important;
    width: clamp(430px, 34vw, 620px) !important;
    max-width: calc(100vw - 40px) !important;
    transform: translateX(-50%) scale(var(--classic-menu-scale, 1)) !important;
    transform-origin: bottom center;
}

body.menu-screen .menu-top-icons span,
body.menu-screen .menu-top-icons button,
body.menu-screen .leaderboard-widget li,
body.menu-screen .reward-row,
body.menu-screen .unlock-grid button {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.menu-screen.menu-compact-screen #start-menu {
    width: clamp(390px, 47vw, 500px) !important;
    max-width: calc(100vw - 32px) !important;
}

body.menu-screen.menu-compact-screen #menu-side-panel {
    display: none !important;
}

body.menu-screen.menu-compact-screen #menu-bottom-nav {
    display: none !important;
}

body.menu-screen.menu-compact-screen #menu-weather-layer,
body.menu-screen.menu-compact-screen .menu-embers {
    opacity: 0.55;
}

@media (max-height: 760px) {
    body.menu-screen #start-menu {
        padding-top: 148px !important;
    }

    body.menu-screen #menu-title-decor {
        height: 120px !important;
    }

    body.menu-screen #main-title {
        top: 36px !important;
        font-size: clamp(1.75rem, 2.45vw, 2.65rem) !important;
    }

    body.menu-screen #menu-profile-card,
    body.menu-screen #menu-welcome-tip,
    body.menu-screen .menu-group {
        margin-bottom: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

@media (max-width: 820px) {
    body.menu-screen {
        overflow: auto !important;
    }

    body.menu-screen #start-menu {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 10px auto 18px !important;
        transform-origin: top center !important;
    }
}


/* Real leaderboard context and bullet cosmetic states */
.leaderboard-context {
    display: block;
    margin: -6px 0 8px;
    color: rgba(244, 226, 176, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.3px;
}

.menu-cosmetic-card {
    position: relative;
    display: grid;
    grid-template-rows: 24px auto auto;
    place-items: center;
    gap: 3px;
    overflow: hidden;
}

.menu-cosmetic-card .menu-cosmetic-orb {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    background: var(--skin-color);
    box-shadow: 0 0 12px var(--skin-glow);
}

.menu-cosmetic-card small {
    color: rgba(244, 226, 176, 0.7);
    font-size: 0.62rem;
}

.menu-cosmetic-card.is-active {
    border-color: #f6d365;
    box-shadow: inset 0 0 18px rgba(246, 211, 101, 0.2), 0 0 10px rgba(246, 211, 101, 0.18);
}

.menu-cosmetic-card.is-locked {
    opacity: 0.52;
    filter: saturate(0.35);
}
/* Career view: responsive, full-capacity layout */
body.menu-screen.menu-mode-career #career-view {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
}
body.menu-screen.menu-mode-career #career-view > .profile-card {
    min-width: 0;
    margin: 0 !important;
}
body.menu-screen.menu-mode-career #career-view > .profile-card:first-child,
body.menu-screen.menu-mode-career #career-view > .tournament-card,
body.menu-screen.menu-mode-career #career-view > #btn-start-career {
    grid-column: 1 / -1;
}
body.menu-screen.menu-mode-career #career-view > .profile-card:nth-child(2),
body.menu-screen.menu-mode-career #career-view > .profile-card:nth-child(3),
body.menu-screen.menu-mode-career #career-view > .profile-card:nth-child(4),
body.menu-screen.menu-mode-career #career-view > .profile-card:nth-child(5) {
    min-height: 86px;
}
body.menu-screen.menu-mode-career #career-view #skin-grid {
    max-height: 62px;
}
/* Career campaign: compact cards and readable cosmetic rail */
body.menu-screen.menu-mode-career #start-menu {
    height: auto !important;
}
body.menu-screen.menu-mode-career #career-view {
    height: auto !important;
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
    overflow: visible !important;
}
body.menu-screen.menu-mode-career #career-view > .profile-card {
    min-height: 0 !important;
    align-self: stretch;
}
body.menu-screen.menu-mode-career #career-view > .profile-card:first-child {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding: 10px !important;
}
body.menu-screen.menu-mode-career #career-view .profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.menu-screen.menu-mode-career .career-front-card {
    display: grid;
    gap: 7px;
    padding: 10px 12px !important;
    background:
        radial-gradient(circle at 88% 24%, rgba(116,185,255,0.13), transparent 42%),
        linear-gradient(180deg, rgba(20,29,34,0.98), rgba(7,10,12,0.98));
}
body.menu-screen.menu-mode-career .career-front-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #74b9ff;
}
body.menu-screen.menu-mode-career #career-front-league {
    padding: 3px 7px;
    border: 1px solid rgba(246,211,101,0.38);
    border-radius: 4px;
    color: #ffe08a;
    background: rgba(0,0,0,0.32);
}
body.menu-screen.menu-mode-career #career-front-map {
    color: #fff0b8;
    font-size: 1.08rem;
    letter-spacing: 0.05em;
}
body.menu-screen.menu-mode-career #career-front-hint {
    color: rgba(223,230,233,0.76);
    line-height: 1.25;
}
body.menu-screen.menu-mode-career #career-view > .career-skins-card {
    grid-column: 1 / -1;
    padding: 9px 10px !important;
}
body.menu-screen.menu-mode-career #career-view #skin-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(126px, 1fr);
    gap: 7px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 3px 2px 7px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin !important;
}
body.menu-screen.menu-mode-career #skin-grid .skin-choice {
    min-height: 58px;
    scroll-snap-align: start;
}
body.menu-screen.menu-mode-career #btn-start-career {
    min-height: 54px;
    padding: 11px !important;
}
/* Cosmetics gallery: all six skins remain visible */
body.menu-screen.menu-mode-career #career-view #skin-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible !important;
    padding: 3px 2px 2px;
    scroll-snap-type: none;
}
body.menu-screen.menu-mode-career #skin-grid .skin-choice {
    min-height: 58px;
    scroll-snap-align: none;
}
/* Functional menu information screens */
.leaderboard-context-controls {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(130px, 1fr);
    gap: 10px;
    margin: 4px 0 12px;
}

.leaderboard-context-controls select,
.menu-info-body select,
.menu-info-body input[type="range"] {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(246, 211, 101, 0.45);
    border-radius: 4px;
    background: #12120f;
    color: #f8e5ae;
    padding: 7px 10px;
    font: inherit;
    accent-color: #d9a441;
}

.menu-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.menu-hub-grid button {
    min-height: 54px;
    padding: 10px;
    border: 1px solid rgba(246, 211, 101, 0.5);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(255, 226, 130, 0.1), transparent 40%),
        linear-gradient(180deg, #392915, #0d0c09);
    color: #ffe8a6;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.menu-hub-grid button:hover {
    border-color: #ffe28a;
    color: #fff6d5;
    box-shadow: 0 0 18px rgba(246, 211, 101, 0.18);
}

.menu-info-body a {
    color: #9fd7ff;
    text-underline-offset: 3px;
}

.menu-info-body label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.menu-info-body input[type="checkbox"] {
    accent-color: #d9a441;
}

@media (max-width: 640px) {
    .leaderboard-context-controls,
    .menu-hub-grid,
    .menu-info-actions {
        grid-template-columns: 1fr;
    }

    .menu-info-modal {
        width: 94vw;
        max-height: 84vh;
        padding: 18px 14px;
    }

    .menu-info-table th,
    .menu-info-table td {
        padding: 7px 6px;
        font-size: 0.82rem;
    }
}
/* Online room: compact waiting room with one-screen actions. */
body.menu-screen.menu-mode-online #online-view.online-panel {
    gap: 8px;
    max-height: none;
    overflow: visible;
}

body.menu-screen.menu-mode-online #online-create-btn.online-create-btn {
    min-height: 44px;
    padding: 8px 12px !important;
    font-size: 1.05rem;
}

body.menu-screen.menu-mode-online .online-rooms-card {
    flex-basis: 140px;
    min-height: 126px;
}

body.menu-screen.menu-mode-online #online-open-rooms {
    max-height: 142px;
}

body.menu-screen.menu-mode-online #online-view.is-in-room .online-pre-room {
    display: none !important;
}

body.menu-screen.menu-mode-online #online-lobby.online-lobby-card {
    max-height: none;
    overflow: visible;
    padding: 12px !important;
    border-color: rgba(246, 211, 101, 0.62);
    box-shadow: inset 0 0 22px rgba(0,0,0,0.58), 0 0 18px rgba(246,211,101,0.12);
}

body.menu-screen .online-lobby-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(246, 211, 101, 0.25);
}

body.menu-screen .online-active-room {
    min-width: 0;
}

body.menu-screen #online-active-label {
    color: #8ec5ff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.menu-screen #online-active-code {
    margin-top: 2px;
    color: #ffe28a;
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

body.menu-screen #online-player-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

body.menu-screen .online-player-row {
    min-width: 0;
    padding: 7px 8px;
}

body.menu-screen .online-player-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.menu-screen #online-status {
    min-height: 18px;
    margin-top: 8px;
    color: #ced6e0;
    font-size: 0.74rem;
    line-height: 1.2;
}

body.menu-screen #online-leave-btn.online-leave-btn,
body.menu-screen #online-start-btn.online-start-btn {
    position: relative;
    width: auto;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px !important;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

body.menu-screen #online-leave-btn.online-leave-btn {
    flex: 0 0 auto;
    min-width: 76px;
    background: linear-gradient(180deg, #4e5660, #252b31) !important;
}

body.menu-screen #online-start-btn.online-start-btn {
    width: 100%;
    margin-top: 8px;
    color: #fff3c4;
    background: linear-gradient(180deg, #a9772b, #5b3514) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 12px rgba(0,0,0,0.35);
}

body.menu-screen #online-start-btn.online-start-btn:disabled {
    opacity: 0.58;
    filter: saturate(0.55);
    cursor: default;
}

@media (max-width: 520px) {
    body.menu-screen #online-player-list {
        grid-template-columns: 1fr;
    }
}

/* Online lobby v136: start action stays visible and the room uses the available panel. */
body.menu-screen.menu-mode-online #start-menu {
    width: clamp(570px, 42vw, 660px) !important;
    max-width: min(660px, calc(100vw - 390px)) !important;
}

body.menu-screen.menu-mode-online #menu-bottom-nav {
    left: 55% !important;
}

body.menu-screen.menu-mode-online #online-view.is-in-room {
    min-height: 0 !important;
    padding-bottom: 2px;
}

body.menu-screen.menu-mode-online #online-lobby.online-lobby-card {
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

body.menu-screen.menu-mode-online #online-start-btn.online-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 2px 0 10px;
    font-size: 1.05rem;
    white-space: normal;
}

body.menu-screen.menu-mode-online #online-player-list {
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.online-shot-monitor {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px 13px;
    margin: -3px 0 8px;
    padding: 6px 10px;
    border: 1px solid rgba(116, 185, 255, 0.38);
    border-radius: 6px;
    background: rgba(5, 10, 18, 0.72);
    color: #dfe6e9;
    font-size: 0.76rem;
}

.online-shot-monitor > span {
    white-space: nowrap;
}

body.online-game-active #top-ui-container {
    flex: 0 0 auto;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 6px !important;
}

body.online-game-active #top-ui-container > header {
    padding: 7px 12px !important;
}

body.online-game-active #leaderboard {
    padding: 7px !important;
    gap: 4px !important;
}

body.online-game-active #battle-log-container {
    height: 40px !important;
    min-height: 40px !important;
}

body.online-game-active .turn-indicator {
    margin-bottom: 4px !important;
    padding: 7px 10px !important;
}

body.online-game-active #online-turn-timer {
    min-height: 24px;
    margin: -2px 0 4px !important;
    padding: 3px 8px !important;
}

body.online-game-active .online-shot-monitor {
    min-height: 26px;
    margin: 0 0 4px !important;
    padding: 3px 8px !important;
}

body.online-game-active #leaderboard .score-card {
    min-height: 42px;
    padding: 5px 12px !important;
}

#online-sync-state {
    color: #7bed9f;
    white-space: nowrap;
}

#online-build-state,
#online-state-fingerprint {
    display: none !important;
}

#online-state-fingerprint.is-mismatch {
    color: #f6d365;
}
@media (max-width: 1180px) {
    body.menu-screen.menu-mode-online #start-menu {
        width: calc(100vw - 32px) !important;
        max-width: 660px !important;
    }
}

@media (max-height: 760px) {
    body.menu-screen.menu-mode-online #online-lobby.online-lobby-card {
        padding: 9px !important;
    }

    body.menu-screen.menu-mode-online #online-start-btn.online-start-btn {
        min-height: 48px;
        margin-bottom: 7px;
    }

    body.menu-screen.menu-mode-online #online-player-list {
        max-height: 108px;
    }
}

/* World map flight mode: reduce rain work without freezing weather or flattening clouds. */
.world-flight-lite .map-world .rain-drop:nth-of-type(even) {
    display: none;
}

.map-world .province-group path {
    shape-rendering: optimizeSpeed;
}

.map-world .province-label {
    text-rendering: optimizeSpeed;
}

.menu-reward-toast {
    position: fixed;
    z-index: 12000;
    left: 50%;
    bottom: clamp(18px, 4vh, 46px);
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(430px, calc(100vw - 28px));
    padding: 13px 16px;
    border: 1px solid rgba(246, 211, 101, 0.72);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(38, 31, 20, 0.97), rgba(9, 12, 18, 0.98));
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 238, 174, 0.14), 0 0 20px rgba(225, 177, 44, 0.16);
    color: #f8e8b0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 18px) scale(0.98);
    transition: opacity 180ms ease, transform 220ms ease;
}
.menu-reward-toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.menu-reward-toast-icon {
    flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(255, 219, 102, 0.72); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff2ad 0 8%, #db9f2a 31%, #6e3e0f 72%);
    box-shadow: 0 0 17px rgba(255, 190, 62, 0.42);
}
.menu-reward-toast.is-info .menu-reward-toast-icon {
    border-color: rgba(116, 185, 255, 0.8);
    background: radial-gradient(circle at 35% 30%, #e8f5ff 0 8%, #5488b8 34%, #162d48 74%);
    box-shadow: 0 0 17px rgba(116, 185, 255, 0.32);
}
.menu-reward-toast-copy { display: grid; gap: 2px; min-width: 0; }
.menu-reward-toast-copy strong { color: #f6d365; font-family: 'Cinzel', serif; font-size: 0.92rem; letter-spacing: 0; }
.menu-reward-toast-copy small { color: #e1e5ec; font-size: 0.83rem; line-height: 1.35; }

/* Mobile release layout: remove the legacy 1180px canvas without changing desktop composition. */
@media (max-width: 820px) {
    html,
    body.menu-screen {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #menu-shell {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 100svh !important;
        overflow-x: clip !important;
    }

    body.menu-screen #start-menu,
    body.menu-screen.menu-mode-career #start-menu,
    body.menu-screen.menu-mode-online #start-menu {
        width: calc(100vw - 20px) !important;
        max-width: 540px !important;
        box-sizing: border-box !important;
        margin: 10px auto 24px !important;
    }

    body.menu-screen #menu-title-decor {
        max-width: 100% !important;
    }

    body.menu-screen .menu-mode-tabs,
    body.menu-screen #menu-player-count-buttons,
    body.menu-screen #menu-player-role-grid {
        min-width: 0 !important;
    }

    body.menu-screen #btn-start,
    body.menu-screen #btn-start-career,
    body.menu-screen #online-create-btn,
    body.menu-screen #online-start-btn {
        max-width: 100% !important;
        white-space: normal !important;
    }
}

@media (max-width: 460px) {
    body.menu-screen #start-menu,
    body.menu-screen.menu-mode-career #start-menu,
    body.menu-screen.menu-mode-online #start-menu {
        width: calc(100vw - 12px) !important;
        margin-top: 6px !important;
    }

    body.menu-screen .menu-mode-tabs button {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: clamp(0.66rem, 3.3vw, 0.82rem) !important;
    }
}

@media (max-width: 820px) {
    body.menu-screen #start-menu,
    body.menu-screen.menu-mode-career #start-menu,
    body.menu-screen.menu-mode-online #start-menu {
        transform: scale(var(--classic-menu-scale, 1)) !important;
        transform-origin: top center !important;
    }
}