* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background:
                radial-gradient(circle at 50% 42%, rgba(96,72,46,0.22) 0%, rgba(96,72,46,0.08) 18%, transparent 42%),
                radial-gradient(circle at top, #1b1510 0%, #0f0b08 45%, #060504 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            min-height: 100dvh;
            font-family: 'Courier New', monospace;
            overflow: hidden;
            position: relative;
            touch-action: manipulation;
            overscroll-behavior: none;
            padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        }
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 18% 22%, rgba(255,180,90,0.10), transparent 12%),
                radial-gradient(circle at 82% 18%, rgba(255,160,70,0.08), transparent 10%),
                radial-gradient(circle at 14% 78%, rgba(255,150,70,0.06), transparent 12%),
                radial-gradient(circle at 86% 80%, rgba(255,170,90,0.06), transparent 13%),
                radial-gradient(circle at 50% 50%, transparent 58%, rgba(24,16,10,0.74) 78%, rgba(10,8,6,0.96) 100%);
            filter: blur(2px);
        }
        canvas {
            border: 18px solid #2e2218;
            border-radius: 22px;
            background: #000;
            box-shadow:
                0 0 0 3px rgba(86,63,42,0.95),
                0 0 0 10px rgba(46,34,24,0.98),
                0 0 0 14px rgba(22,16,11,0.98),
                0 28px 80px rgba(0,0,0,0.62),
                inset 0 0 0 2px rgba(158,121,78,0.22),
                inset 0 0 24px rgba(0,0,0,0.42);
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            touch-action: none;
            max-width: 100%;
            max-height: 100%;
        }
/* ===== MULTIPLAYER LOBBY ===== */
        #lobby {
            position:fixed; inset:0;
            background:
                radial-gradient(circle at center, rgba(18,12,8,0.14) 0%, rgba(8,6,4,0.24) 52%, rgba(2,2,2,0.40) 100%);
            backdrop-filter: blur(0.35px);
            -webkit-backdrop-filter: blur(0.35px);
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            z-index:200; font-family:'Courier New',monospace; color:#d8ccb9;
        }
        #lobby h1 { font-size:42px; color:#e4c696; text-shadow:0 0 18px rgba(96,64,28,0.42); margin-bottom:6px; letter-spacing:4px; }
        #lobby h2 { font-size:14px; color:#9a8363; margin-bottom:42px; letter-spacing:3px; }
        .lbCard {
            background:
                linear-gradient(180deg, rgba(34,24,16,0.56), rgba(18,12,8,0.62)),
                radial-gradient(circle at 28% 18%, rgba(214,170,110,0.05), transparent 26%),
                radial-gradient(circle at 76% 82%, rgba(90,64,38,0.08), transparent 30%);
            border:1px solid rgba(122,90,56,0.58);
            border-radius:16px; padding:28px 36px; margin:10px;
            width:320px; text-align:center;
            box-shadow:
                0 0 0 1px rgba(188,148,92,0.05) inset,
                0 18px 44px rgba(0,0,0,0.18),
                inset 0 -10px 24px rgba(0,0,0,0.10);
            backdrop-filter: blur(0.7px);
            -webkit-backdrop-filter: blur(0.7px);
        }
        .lbCard h3 { color:#dcc09a; font-size:13px; letter-spacing:2px; margin-bottom:18px; text-shadow:0 1px 0 rgba(0,0,0,0.35); }
        .lbBtn {
            background:
                linear-gradient(180deg, rgba(98,70,40,0.68), rgba(52,32,16,0.74)),
                radial-gradient(circle at 22% 18%, rgba(255,220,150,0.08), transparent 24%),
                radial-gradient(circle at 76% 80%, rgba(40,24,10,0.14), transparent 28%);
            border:1px solid rgba(156,118,70,0.74);
            color:#f2dfc4; font-family:'Courier New',monospace; font-size:13px; font-weight:bold;
            padding:10px 22px; border-radius:12px; cursor:pointer; width:100%; margin:5px 0;
            letter-spacing:1px; transition:all 0.15s;
            box-shadow:
                0 1px 0 rgba(255,220,160,0.06) inset,
                0 8px 18px rgba(0,0,0,0.10),
                inset 0 -6px 12px rgba(0,0,0,0.08);
            backdrop-filter: blur(0.55px);
            -webkit-backdrop-filter: blur(0.55px);
        }
        .lbBtn:hover {
            background:
                linear-gradient(180deg, rgba(116,84,50,0.76), rgba(66,42,22,0.80)),
                radial-gradient(circle at 22% 18%, rgba(255,228,168,0.10), transparent 24%),
                radial-gradient(circle at 76% 80%, rgba(40,24,10,0.16), transparent 28%);
            border-color:rgba(202,158,100,0.82);
            color:#fff1d3;
            transform:translateY(-1px);
        }
        .lbBtn.green { border-color:rgba(168,128,76,0.74); color:#ffe4ad; }
        .lbBtn.green:hover {
            background:
                linear-gradient(180deg, rgba(122,88,52,0.88), rgba(72,46,24,0.90)),
                radial-gradient(circle at 22% 18%, rgba(255,228,168,0.12), transparent 24%),
                radial-gradient(circle at 76% 80%, rgba(40,24,10,0.18), transparent 28%);
        }
        .lbBtn:disabled { opacity:0.4; cursor:not-allowed; }
        .lbInput {
            background:rgba(20,14,10,0.62); border:1px solid rgba(120,92,58,0.68); color:#f0dec2;
            font-family:'Courier New',monospace; font-size:16px; font-weight:bold;
            padding:10px 14px; border-radius:6px; width:100%; margin:5px 0;
            text-align:center; letter-spacing:4px; text-transform:uppercase; outline:none;
        }
        .lbInput:focus { border-color:rgba(196,154,96,0.88); box-shadow:0 0 0 2px rgba(196,154,96,0.10); }
        #lbRoomCode {
            font-size:30px; letter-spacing:8px; color:#ffdd44;
            text-shadow:0 0 16px #aa8800; margin:10px 0; font-weight:bold;
        }
        #lbStatus { font-size:11px; color:#9a8363; margin-top:8px; min-height:16px; }
        #lbPlayers { margin-top:14px; }
        .lbPlayer {
            padding:6px 12px; margin:4px 0; border-radius:4px;
            font-size:11px; font-weight:bold; letter-spacing:1px;
            border:1px solid; text-align:left;
        }
        #lbError { color:#ff5555; font-size:11px; margin-top:8px; min-height:16px; }
        .lbDivider { color:#9f8460; font-size:11px; margin:12px 0; letter-spacing:2px; }
        #lbConnStatus {
            font-size:10px; color:#a88c67; margin-top:6px; min-height:14px;
            letter-spacing:1px;
        }


        .weaponChoiceWrap { margin-top:14px; display:none; }
        .weaponChoiceTitle { font-size:11px; color:#d1b189; letter-spacing:1px; margin-bottom:8px; }
        .weaponBtns { display:flex; gap:8px; }
        .weaponBtn {
            flex:1; background:linear-gradient(180deg, rgba(94,66,38,0.72), rgba(48,30,16,0.78)); border:1px solid rgba(166,126,76,0.84); color:#f1dfc2;
            font: bold 12px 'Courier New', monospace; padding:9px 8px; border-radius:10px; cursor:pointer;
            box-shadow:0 1px 0 rgba(255,224,170,0.06) inset, inset 0 -4px 10px rgba(0,0,0,0.08);
        }
        .weaponBtn.active { border-color:#e0b36e; color:#fff0cf; box-shadow:0 0 12px rgba(214,170,110,0.16) inset, 0 0 0 1px rgba(255,226,164,0.10); }
        .lbChoiceNote { font-size:10px; color:#c5a883; min-height:14px; margin-top:6px; }


        #weaponScreen {
            position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
            background: rgba(12,8,5,0.70); z-index: 260; backdrop-filter: blur(1.5px);
        }
        #weaponScreen.show { display:flex; }
        .weaponMenuCard{
            width:min(92vw,520px); background:linear-gradient(180deg,rgba(42,30,18,0.92),rgba(20,12,8,0.94));
            border:2px solid rgba(154,118,72,0.88); border-radius:16px; padding:22px 22px 18px;
            box-shadow:0 0 0 1px rgba(188,148,92,0.10) inset, 0 24px 80px rgba(0,0,0,0.34);
        }
        .weaponMenuTitle{ font: bold 24px 'Courier New', monospace; color:#f0e2c8; letter-spacing:2px; text-align:center; margin-bottom:8px; }
        .weaponMenuSub{ font: 12px 'Courier New', monospace; color:#b9a180; text-align:center; margin-bottom:16px; line-height:1.5; }
        .weaponMenuGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
        .weaponCardBtn{
            background:linear-gradient(180deg, rgba(86,60,34,0.82), rgba(40,24,12,0.88)); border:2px solid rgba(154,118,72,0.86); border-radius:14px; cursor:pointer;
            padding:16px 14px; color:#eadfc9; font-family:'Courier New', monospace; text-align:left;
            transition:transform .08s ease, border-color .08s ease, box-shadow .08s ease;
        }
        .weaponCardBtn:hover{ transform:translateY(-1px); border-color:#c9a06a; }
        .weaponCardBtn.active{ border-color:#ffd86a; box-shadow:0 0 0 1px rgba(214,170,110,0.18) inset, 0 0 18px rgba(214,170,110,0.12); }
        .weaponCardBtn .wIcon{ font-size:30px; display:block; margin-bottom:8px; text-align:center; }
        .weaponCardBtn .wName{ font:bold 18px 'Courier New', monospace; display:block; text-align:center; margin-bottom:8px; color:#f3e5cd; text-shadow:0 1px 0 rgba(0,0,0,0.32); }
        .weaponCardBtn .wDesc{ font-size:11px; line-height:1.45; color:#ccb08a; text-align:center; min-height:34px; }
        #weaponConfirmBtn{
            width:100%; margin-top:16px; background:linear-gradient(180deg, rgba(126,92,56,0.82), rgba(74,48,26,0.88)); border:1px solid rgba(186,144,92,0.86); color:#fff1d3;
            font:bold 16px 'Courier New', monospace; padding:12px 14px; border-radius:12px; cursor:pointer;
            box-shadow:0 1px 0 rgba(255,228,178,0.08) inset, inset 0 -6px 12px rgba(0,0,0,0.10);
        }
        #weaponConfirmBtn:disabled{ opacity:0.55; cursor:not-allowed; }
        #weaponReadyList{ margin-top:12px; font:12px 'Courier New', monospace; color:#d8bb95; line-height:1.6; min-height:72px; }


/* ===== ENHANCED MAIN MENU ===== */
#lobby::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(168,120,66,0.05), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(132,92,54,0.05), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(94,62,34,0.08), transparent 38%);
    pointer-events:none;
}
#lobby > *{ position:relative; z-index:1; }
#lobby h1{
    font-size:52px;
    letter-spacing:6px;
    color:#b9c7ff;
    text-shadow:0 0 12px rgba(120,150,255,0.65), 0 0 34px rgba(54,88,210,0.55);
}
#lobby h2{
    font-size:13px;
    color:#7381b8;
    letter-spacing:4px;
    margin-bottom:26px;
}
.menuHeroNote{
    margin-bottom:20px;
    font-size:12px;
    color:#8c96c9;
    text-align:center;
    max-width:760px;
    line-height:1.5;
}
.lbCard{
    background:linear-gradient(180deg, rgba(20,24,56,0.96) 0%, rgba(8,10,28,0.96) 100%);
    border:1px solid rgba(98,114,210,0.45);
    box-shadow:0 18px 50px rgba(0,0,0,0.45), inset 0 0 30px rgba(130,150,255,0.06);
    backdrop-filter: blur(4px);
}
.lbCard h3{
    color:#d7e0ff;
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:18px;
}
.lbBtn{
    background:linear-gradient(180deg, rgba(43,55,124,0.96) 0%, rgba(20,25,69,0.96) 100%);
    border:1px solid rgba(126,145,255,0.42);
    color:#e8eeff;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
    transition:transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.lbBtn:hover{
    transform:translateY(-1px);
    background:linear-gradient(180deg, rgba(116,84,50,0.76) 0%, rgba(66,42,22,0.80) 100%);
    border-color:rgba(202,158,100,0.82);
    color:#ffffff;
    box-shadow:0 12px 26px rgba(0,0,0,0.34), 0 0 20px rgba(120,84,42,0.10);
}
.lbBtn.green{
    background:linear-gradient(180deg, rgba(112,80,46,0.72) 0%, rgba(60,38,18,0.78) 100%);
    border-color:rgba(170,128,76,0.76);
    color:#ffe4ad;
}
.lbBtn.green:hover{
    background:linear-gradient(180deg, rgba(126,92,56,0.80) 0%, rgba(72,46,24,0.84) 100%);
    border-color:rgba(202,158,100,0.86);
}
.menuActionRow{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:16px;
}
#menuResolutionBtn{
    width:260px;
    font-size:12px;
    letter-spacing:1.5px;
}
.menuFooterNote{
    font-size:10px;
    color:#a78c69;
    margin-top:18px;
    letter-spacing:1.3px;
    text-align:center;
}

    
#game{

display:block;
width:100%;
height:100%;
image-rendering:auto;

}

#gameWrap{

position:relative;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;

}

#gameCanvas{
    display:block;
    margin:0 auto;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
}



#mobileControls{
    position:fixed;
    inset:0;
    display:none;
    z-index:140;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
}
.mobileControlDock{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.mobileCluster{
    position:absolute;
    pointer-events:none;
}
.mobileCluster.left{
    left:max(14px, calc(env(safe-area-inset-left) + 10px));
    bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px));
}
.mobileCluster.right{
    right:max(14px, calc(env(safe-area-inset-right) + 10px));
    bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px));
}
.mobileDpad{
    position:relative;
    width:178px;
    height:178px;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%, rgba(90,105,160,0.18) 0%, rgba(18,22,38,0.16) 46%, rgba(8,10,18,0.03) 74%, transparent 76%);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:inset 0 0 28px rgba(0,0,0,0.24), 0 10px 22px rgba(0,0,0,0.14);
    pointer-events:auto;
    touch-action:none;
}
.mobileDpad::before{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.10);
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(20,24,38,0.01) 72%);
    box-shadow:inset 0 0 18px rgba(0,0,0,0.22);
}
.mobileDpad.active{
    background:radial-gradient(circle at 50% 50%, rgba(110,128,190,0.22) 0%, rgba(20,24,42,0.18) 48%, rgba(8,10,18,0.04) 76%, transparent 78%);
}
.mobileThumb{
    position:absolute;
    left:50%;
    top:50%;
    width:58px;
    height:58px;
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(182,198,255,0.38), rgba(52,63,100,0.86));
    border:1px solid rgba(255,255,255,0.24);
    box-shadow:0 8px 18px rgba(0,0,0,0.26);
    opacity:0.96;
    transition:transform 0.06s linear;
}
.mobileBtn{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.20);
    background:rgba(18,20,34,0.46);
    color:#f1f1f1;
    border-radius:999px;
    font:bold 22px 'Courier New', monospace;
    box-shadow:0 12px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    touch-action:none;
    pointer-events:auto;
}
.mobileBtn:active,
.mobileBtn.pressed{
    transform:translateZ(0) scale(0.96);
    background:rgba(70,84,136,0.72);
    border-color:rgba(255,255,255,0.38);
}
.mobileActions{
    display:grid;
    grid-template-columns:repeat(2, 80px);
    grid-template-rows:80px;
    gap:12px;
    pointer-events:none;
}
.mobileActionsCompact{
    grid-template-columns:repeat(2, 80px);
    grid-template-rows:80px;
}
.mobileBtn.action{
    position:relative;
    width:80px;
    height:80px;
    font-size:20px;
}
.mobileBtn .labelSmall{
    display:block;
    font-size:11px;
    letter-spacing:1px;
    opacity:0.82;
    margin-top:3px;
}
body.mobile-device #mobileControls.show{ display:block; }
body.mobile-device #menuResolutionBtn{ display:none; }
body.mobile-device{
    padding:0;
    align-items:stretch;
    justify-content:center;
    background:#000;
}
body.mobile-device::before{ display:none; }
body.mobile-device canvas{
    border:none;
    border-radius:0;
    box-shadow:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
}


@media (pointer:coarse), (max-width: 980px){
    body{ align-items:flex-start; }
    #lobby{
        justify-content:flex-start;
        overflow:auto;
        padding:18px 14px calc(120px + env(safe-area-inset-bottom));
    }
    #lobby h1{ font-size:34px; letter-spacing:3px; text-align:center; }
    #lobby h2{ font-size:11px; letter-spacing:2px; margin-bottom:16px; text-align:center; }
    .menuHeroNote{ font-size:11px; margin-bottom:14px; padding:0 8px; color:rgba(214,190,152,0.92); }
    .lbCard{ width:min(100%, 420px); padding:20px 16px; }
    .weaponMenuGrid{ grid-template-columns:1fr; }
}
@media (orientation:portrait) and (pointer:coarse){
    .mobileCluster.left{ left:max(10px, calc(env(safe-area-inset-left) + 6px)); bottom:max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
    .mobileCluster.right{ right:max(10px, calc(env(safe-area-inset-right) + 6px)); bottom:max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
    .mobileActions, .mobileActionsCompact{ grid-template-columns:repeat(2, 72px); grid-template-rows:72px; gap:10px; }
    .mobileBtn.action{ width:72px; height:72px; font-size:18px; }
    #mobileControls{ opacity:0.92; }
}



#mobileShopOverlay{
    position:fixed;
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    top:max(10px, env(safe-area-inset-top));
    bottom:max(70px, calc(env(safe-area-inset-bottom) + 60px));
    z-index:180;
    display:none;
    pointer-events:none;
}

#mobileEnhanceOverlay{
    position:fixed;
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    top:max(10px, env(safe-area-inset-top));
    bottom:max(10px, env(safe-area-inset-bottom));
    z-index:181;
    display:none;
    pointer-events:none;
}

body.mobile-device #mobileShopOverlay.show,
body.mobile-device #mobileEnhanceOverlay.show,
#mobileShopOverlay.show,
#mobileEnhanceOverlay.show{
    display:block;
    pointer-events:auto;
}

.mobilePanelCard{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    background:
        linear-gradient(180deg, rgba(34,24,16,0.94), rgba(18,12,8,0.96)),
        radial-gradient(circle at 28% 18%, rgba(214,170,110,0.06), transparent 26%),
        radial-gradient(circle at 76% 82%, rgba(90,64,38,0.10), transparent 30%);
    border:1px solid rgba(122,90,56,0.58);
    border-radius:18px;
    box-shadow:
        0 18px 48px rgba(0,0,0,0.42),
        inset 0 0 0 1px rgba(188,148,92,0.05),
        inset 0 -10px 24px rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow:hidden;
}

.mobilePanelHead{
    padding:14px 14px 10px;
    border-bottom:1px solid rgba(140,108,72,0.24);
    background:linear-gradient(180deg, rgba(58,40,24,0.46), rgba(24,16,10,0.18));
}

.mobilePanelTitle{
    color:#f0e2c8;
    font:bold 18px 'Courier New', monospace;
    letter-spacing:1px;
    text-shadow:0 1px 0 rgba(0,0,0,0.35);
}

.mobilePanelMeta{
    margin-top:6px;
    color:#bda27f;
    font:12px 'Courier New', monospace;
    line-height:1.45;
}

.mobileShopList{
    flex:1;
    overflow:auto;
    padding:10px 10px 4px;
    display:flex;
    flex-direction:column;
    gap:8px;
    -webkit-overflow-scrolling:touch;
}

.mobileShopItem{
    display:grid;
    grid-template-columns:50px 1fr auto;
    gap:10px;
    align-items:center;
    padding:10px;
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(42,28,18,0.88), rgba(24,16,10,0.92));
    border:1px solid rgba(122,90,56,0.34);
    box-shadow:
        inset 0 1px 0 rgba(255,220,160,0.04),
        inset 0 -6px 12px rgba(0,0,0,0.08);
}

.mobileShopIcon{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(156,118,70,0.20);
    font-size:24px;
}

.mobileShopInfo{
    min-width:0;
}

.mobileShopName{
    color:#f5e7cf;
    font:bold 14px 'Courier New', monospace;
    line-height:1.2;
}

.mobileShopDesc{
    margin-top:4px;
    color:#c8ad86;
    font:11px 'Courier New', monospace;
    line-height:1.35;
    white-space:pre-line;
}

.mobileShopCost{
    margin-top:6px;
    color:#ffd972;
    font:bold 11px 'Courier New', monospace;
}

.mobileShopStatsBar{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    padding:10px;
    border-top:1px solid rgba(140,108,72,0.18);
    border-bottom:1px solid rgba(140,108,72,0.18);
    background:rgba(16,10,7,0.72);
}

.mobileShopStatBox{
    min-width:0;
    padding:9px 10px;
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(42,28,18,0.84), rgba(24,16,10,0.88));
    border:1px solid rgba(122,90,56,0.22);
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mobileShopStatLabel{
    color:#a98e6a;
    font:10px 'Courier New', monospace;
    letter-spacing:1px;
}

.mobileShopStatValue{
    color:#f6ead6;
    font:bold 12px 'Courier New', monospace;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mobilePanelActions{
    display:flex;
    gap:8px;
    padding:10px;
    border-top:1px solid rgba(140,108,72,0.20);
    background:rgba(18,12,8,0.72);
}

.mobileActionBtn,
.mobileBuyBtn,
.mobileEnchantTrigger{
    border:1px solid rgba(156,118,70,0.42);
    color:#f2dfc4;
    border-radius:12px;
    font:bold 13px 'Courier New', monospace;
    letter-spacing:.5px;
    user-select:none;
    -webkit-user-select:none;
    touch-action:manipulation;
    background:
        linear-gradient(180deg, rgba(98,70,40,0.82), rgba(52,32,16,0.88)),
        radial-gradient(circle at 22% 18%, rgba(255,220,150,0.08), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.14), transparent 28%);
    box-shadow:
        0 1px 0 rgba(255,220,160,0.05) inset,
        0 8px 18px rgba(0,0,0,0.12),
        inset 0 -6px 12px rgba(0,0,0,0.08);
}

.mobileBuyBtn{
    min-width:92px;
    padding:10px 12px;
}

.mobileActionBtn{
    flex:1;
    padding:12px 12px;
}

.mobileActionBtn.primary,
.mobileBuyBtn.primary,
.mobileEnchantTrigger,
.mobileBuyBtn.gold{
    background:
        linear-gradient(180deg, rgba(112,80,46,0.88), rgba(60,38,18,0.92)),
        radial-gradient(circle at 22% 18%, rgba(255,228,168,0.10), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.16), transparent 28%);
    border-color:rgba(202,158,100,0.58);
    color:#fff1d3;
}

.mobileBuyBtn:disabled,
.mobileActionBtn:disabled{
    opacity:0.48;
}

.mobileEnhanceBody{
    flex:1;
    padding:14px;
    color:#e4d4bb;
    font:13px 'Courier New', monospace;
    line-height:1.55;
    display:flex;
    flex-direction:column;
    gap:12px;
    background:rgba(10,7,5,0.18);
}

.mobileEnhanceStat{
    padding:12px;
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(42,28,18,0.84), rgba(24,16,10,0.88));
    border:1px solid rgba(122,90,56,0.24);
}

.mobileHintPill{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(112px + env(safe-area-inset-bottom));
    z-index:175;
    display:none;
    align-items:center;
    justify-content:center;
    min-width:172px;
    padding:12px 16px;
    box-shadow:0 12px 28px rgba(0,0,0,0.34);
}
body.mobile-device .mobileHintPill.show{ display:flex; }
@media (orientation:landscape) and (pointer:coarse){
    #mobileShopOverlay, #mobileEnhanceOverlay{ left:max(10px, env(safe-area-inset-left)); right:calc(max(10px, env(safe-area-inset-right)) + 128px); top:max(10px, env(safe-area-inset-top)); bottom:max(10px, env(safe-area-inset-bottom)); }
    .mobileShopStatsBar{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
    .mobileHintPill{ left:auto; right:calc(118px + env(safe-area-inset-right)); transform:none; bottom:18px; }
}

@media (pointer:fine){
    #mobileShopOverlay, #mobileEnhanceOverlay{
        left:50%;
        right:auto;
        top:50%;
        bottom:auto;
        width:min(920px, calc(100vw - 48px));
        height:min(760px, calc(100vh - 48px));
        transform:translate(-50%, -50%);
    }
    .mobilePanelCard{
        border-radius:22px;
    }
}



#browserAdFallback{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:170;
    display:none;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(12,10,8,0.92), rgba(8,6,4,0.96));
    border-top:1px solid rgba(180,140,90,0.24);
    color:#d7bf9b;
    font:12px 'Courier New', monospace;
    letter-spacing:.3px;
    text-align:center;
    box-shadow:0 -10px 24px rgba(0,0,0,0.28);
}
#browserAdFallback.show{ display:flex; }
#browserAdFallback strong{ color:#ffd76d; }

/* ===== FINAL CAVE MENU OVERRIDE ===== */
#lobby h1{
    color:#e4c696 !important;
    text-shadow:0 0 18px rgba(96,64,28,0.42) !important;
}
#lobby h2{
    color:#9a8363 !important;
}
.menuHeroNote{
    color:rgba(214,190,152,0.92) !important;
}
.lbCard{
    background:
        linear-gradient(180deg, rgba(34,24,16,0.56), rgba(18,12,8,0.62)),
        radial-gradient(circle at 28% 18%, rgba(214,170,110,0.05), transparent 26%),
        radial-gradient(circle at 76% 82%, rgba(90,64,38,0.08), transparent 30%) !important;
    border:1px solid rgba(122,90,56,0.58) !important;
    box-shadow:
        0 0 0 1px rgba(188,148,92,0.05) inset,
        0 18px 44px rgba(0,0,0,0.18),
        inset 0 -10px 24px rgba(0,0,0,0.10) !important;
    backdrop-filter: blur(0.7px) !important;
    -webkit-backdrop-filter: blur(0.7px) !important;
}
.lbCard h3{
    color:#dcc09a !important;
}
.lbBtn,
#btnCreate,
#btnJoin,
#btnStart,
.menuActionRow .lbBtn,
#menuResolutionBtn{
    background:
        linear-gradient(180deg, rgba(98,70,40,0.68), rgba(52,32,16,0.74)),
        radial-gradient(circle at 22% 18%, rgba(255,220,150,0.08), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.14), transparent 28%) !important;
    border:1px solid rgba(156,118,70,0.74) !important;
    color:#f2dfc4 !important;
    border-radius:12px !important;
    box-shadow:
        0 1px 0 rgba(255,220,160,0.06) inset,
        0 8px 18px rgba(0,0,0,0.10),
        inset 0 -6px 12px rgba(0,0,0,0.08) !important;
}
.lbBtn:hover,
#btnCreate:hover,
#btnJoin:hover,
#btnStart:hover,
.menuActionRow .lbBtn:hover,
#menuResolutionBtn:hover{
    background:
        linear-gradient(180deg, rgba(116,84,50,0.76), rgba(66,42,22,0.80)),
        radial-gradient(circle at 22% 18%, rgba(255,228,168,0.10), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.16), transparent 28%) !important;
    border-color:rgba(202,158,100,0.82) !important;
    color:#fff1d3 !important;
    box-shadow:0 12px 26px rgba(0,0,0,0.20), 0 0 20px rgba(120,84,42,0.10) !important;
}
.lbBtn.green,
#btnStart{
    background:
        linear-gradient(180deg, rgba(112,80,46,0.72), rgba(60,38,18,0.78)),
        radial-gradient(circle at 22% 18%, rgba(255,220,150,0.08), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.14), transparent 28%) !important;
    border-color:rgba(170,128,76,0.76) !important;
    color:#ffe4ad !important;
}
.lbBtn.green:hover,
#btnStart:hover{
    background:
        linear-gradient(180deg, rgba(126,92,56,0.80), rgba(72,46,24,0.84)),
        radial-gradient(circle at 22% 18%, rgba(255,228,168,0.10), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.16), transparent 28%) !important;
    border-color:rgba(202,158,100,0.86) !important;
}
.lbInput{
    background:rgba(20,14,10,0.62) !important;
    border:1px solid rgba(120,92,58,0.68) !important;
    color:#f0dec2 !important;
}
.lbInput:focus{
    border-color:rgba(196,154,96,0.88) !important;
    box-shadow:0 0 0 2px rgba(196,154,96,0.10) !important;
}
#lbStatus,
#lbJoinStatus,
#lbConnStatus,
.lbChoiceNote,
.menuFooterNote,
.weaponChoiceTitle,
.lbDivider{
    color:#b89d78 !important;
}
#lobby::before{
    background:
        radial-gradient(circle at 20% 20%, rgba(168,120,66,0.05), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(132,92,54,0.05), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(94,62,34,0.08), transparent 38%) !important;
}

/* ===== FOOTER BUTTONS ===== */
#siteFooterButtons{
    position:fixed;
    left:0;
    right:0;
    bottom:8px;
    z-index:300;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    pointer-events:auto;
    padding:0 12px calc(6px + env(safe-area-inset-bottom));
}

#siteFooterButtons .footerDungeonBtn{
    width:auto;
    min-width:160px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
}

.footerDungeonBtn{
    background:
        linear-gradient(180deg, rgba(98,70,40,0.68), rgba(52,32,16,0.74)),
        radial-gradient(circle at 22% 18%, rgba(255,220,150,0.08), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.14), transparent 28%);
    border:1px solid rgba(156,118,70,0.74);
    color:#f2dfc4;
    font-family:'Courier New',monospace;
    font-size:12px;
    font-weight:bold;
    padding:10px 16px;
    border-radius:12px;
    letter-spacing:1px;
    transition:all 0.15s ease;
    box-shadow:
        0 1px 0 rgba(255,220,160,0.06) inset,
        0 8px 18px rgba(0,0,0,0.10),
        inset 0 -6px 12px rgba(0,0,0,0.08);
    backdrop-filter: blur(0.55px);
    -webkit-backdrop-filter: blur(0.55px);
}

.footerDungeonBtn:hover{
    background:
        linear-gradient(180deg, rgba(116,84,50,0.76), rgba(66,42,22,0.80)),
        radial-gradient(circle at 22% 18%, rgba(255,228,168,0.10), transparent 24%),
        radial-gradient(circle at 76% 80%, rgba(40,24,10,0.16), transparent 28%);
    border-color:rgba(202,158,100,0.82);
    color:#fff1d3;
    box-shadow:
        0 12px 26px rgba(0,0,0,0.20),
        0 0 20px rgba(120,84,42,0.10);
    transform:translateY(-1px);
}

.footerDungeonBtn:active{
    transform:translateY(0);
}

@media (pointer:coarse), (max-width: 980px){
    #siteFooterButtons{
        bottom:10px;
        gap:8px;
        padding-left:10px;
        padding-right:10px;
    }

    #siteFooterButtons .footerDungeonBtn{
        min-width:140px;
        padding:9px 12px;
        font-size:11px;
    }
}