:root{
    --bg:#07130f;
    --felt:#0b5b3b;
    --gold:#e7c66b;
    --panel:#10221b;
    --text:#f4f1e6;
    --muted:#aebdb5;
    --red:#d95757;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:radial-gradient(circle at 50% 35%,#123f2d 0,#06100d 70%);
    font-family:system-ui,-apple-system,sans-serif;
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
    touch-action:manipulation;
}

button{ font:inherit; }

#app{
    max-width: 1250px;
    margin: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header{
    width: 100%;
    max-width: 800px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

h1, .game-heading{ margin:0; color:var(--gold); font-size:28px; font-weight:800; }

.badge{
    background:var(--panel);
    padding:8px 12px;
    border-radius:10px;
    border:1px solid #234137;
    font-size:13px;
}

.header-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* THE NEW SQUARE TABLE */
#table{
    position:relative;
    width: 100%;
    max-width: 600px; 
    aspect-ratio: 1 / 1; 
    margin: 0 auto;
    border-radius:28px;
    background:radial-gradient(
        ellipse at center,
        #0e7650 0,
        #0b5d40 46%,
        #073c2a 100%
    );
    border:12px solid #241d15;
    box-shadow: inset 0 0 70px #032317, 0 15px 45px #0008;
    overflow:hidden;
}

#table:after{
    content:""; position:absolute; inset:12px;
    border:2px solid #d7b75d33; border-radius:20px; pointer-events:none;
}

/* FLOWER SCORE CONTAINERS */
.team-score{
    position:absolute;
    z-index:5;
    background:#06140fdd;
    border:1px solid #45695a;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:0 6px 15px #0009;
    transition:all 0.3s;
}
.team-score.top{ top:16px; left:16px; }
.team-score.bottom{ bottom:16px; left:16px; border-color:var(--gold); }

.flower {
    position: relative;
    width: 40px;
    height: 40px;
}
.petal {
    position: absolute;
    width: 12px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    top: calc(50% - 10px);
    left: calc(50% - 6px);
    transform-origin: center center;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.petal.active {
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold), inset 0 0 4px rgba(255,255,255,0.8);
}

/* PLAYERS */
.player{
    position:absolute;
    z-index:3;
    background:#071811d9;
    border:1px solid #315346;
    padding:8px 12px;
    border-radius:12px;
    text-align:center;
    min-width:110px;
    transition:all 0.3s ease;
}
.player.active{ border-color:var(--gold); box-shadow:0 0 20px #e7c66b66; transform:scale(1.05); }
.player.empty{ opacity:.5; }

#p0{ bottom:12px; left:50%; transform:translateX(-50%); }
#p1{ left:12px; top:50%; transform:translateY(-50%); }
#p2{ top:12px; left:50%; transform:translateX(-50%); }
#p3{ right:12px; top:50%; transform:translateY(-50%); }

.name{ font-weight:700; }
.score{ display: none !important; }

/* TRUMP INDICATOR */
#trump{
    position:absolute;
    top: 15px; 
    right: 15px;
    z-index:4;
    background:#06140fdd;
    border:1px solid #45695a;
    border-radius:12px;
    padding: 6px 14px;
    text-align:center;
}
#trump .suit{ font-size:24px; }
.hearts, .diamonds{ color:#ff7777; }
.clubs, .spades{ color:#fff; }

/* STATUS BANNER */
#message{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:100;
    width: auto;
    min-width: 180px;
    background:#06140feb;
    border:1px solid #527466;
    border-radius:30px;
    padding: 8px 24px;
    font-weight: bold;
    box-shadow:0 10px 30px rgba(0,0,0,0.8);
    text-align:center;
    display:none;
}

/* SQUARE TRICK AREA */
#trick{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width: 65%;
    height: 65%;
    max-width: 280px;
    max-height: 280px;
    z-index:4;
}

.played{
    position:absolute;
    width:76px;
    height:106px;
}

.played.n{ top:0; left:50%; transform:translateX(-50%); }
.played.s{ bottom:0; left:50%; transform:translateX(-50%); }
.played.w{ left:0; top:50%; transform:translateY(-50%); }
.played.e{ right:0; top:50%; transform:translateY(-50%); }

.played .card.winner{
    box-shadow: 0 0 40px #e7c66b, 0 0 15px #fff !important;
    transform:scale(1.15) !important;
    border-color:var(--gold) !important;
    z-index:10;
}

/* TRICK PILES (Stacked vertically with flowers) */
#trick-piles{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.trick-pile{ position:absolute; width:54px; height:76px; transition:all 0.3s; z-index:2; }
.trick-pile.my-team{ bottom: 85px; right: auto; left: 16px; } 
.trick-pile.opp-team{ top: 85px; right: auto; left: 16px; }  

/* HAND OUTSIDE TABLE */
#hand-container {
    width: 100%;
    max-width: 800px;
    height: 140px; 
    margin: 15px auto 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
#hand {
    position: static;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    z-index: 10;
}

.card{
    width:68px;
    height:96px;
    border-radius:9px;
    background:#fff;
    color:#111;
    border:2px solid #ddd;
    box-shadow:0 6px 16px rgba(0,0,0,0.5);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-weight:800;
    cursor:pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s, margin-top 0.4s;
    position:relative;
    -webkit-user-select:none;
    user-select:none;
    touch-action:none;
}

.card+.card{ margin-left:-18px; }
.card:hover{ transform:translateY(-24px) scale(1.12) rotate(0deg) !important; z-index:30; box-shadow:0 20px 40px rgba(0,0,0,0.8); }

.card.unplayable{
    opacity:1 !important; filter:brightness(0.65);
    cursor:not-allowed; transform:translateY(10px) !important;
}
.card.unplayable:hover{ transform:translateY(10px) scale(1) rotate(0deg) !important; box-shadow:0 6px 16px rgba(0,0,0,0.5); }

.card .rank{ font-size:22px; }
.card .suit{ font-size:25px; }

.card.hearts, .card.diamonds{ color:#ff7777; }
.played .card.hearts, .played .card.diamonds{ color:#ff7777; }

.card.selected{
    transform:translateY(-30px) scale(1.15) rotate(0deg) !important;
    z-index:40 !important;
    box-shadow:0 15px 35px rgba(231,198,107,0.7) !important;
    border:2px solid var(--gold) !important;
}

@keyframes swipeIn{
    0%{ opacity:0; top:-250px; transform:scale(0.2); box-shadow:0 40px 80px rgba(0,0,0,0.8); }
    100%{ opacity:1; top:0px; box-shadow:0 6px 16px rgba(0,0,0,0.5); }
}
@keyframes playCardAnim{
    0%{ opacity:0; transform:scale(1.6) translateY(20px); box-shadow:0 30px 60px rgba(0,0,0,0.7); }
    100%{ opacity:1; transform:scale(1) translateY(0); box-shadow:0 6px 16px rgba(0,0,0,0.5); }
}

#controls{
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
    z-index: 10;
}

.btn{
    border:0; border-radius:10px; padding:10px 16px;
    background:var(--gold); color:#17140b; font-weight:800;
    cursor:pointer; transition:all 0.2s;
}
.btn:hover:not(:disabled){ filter:brightness(1.1); transform:translateY(-2px); }
.btn:active:not(:disabled){ transform:translateY(0); }
.btn.secondary{ background:#173127; color:#eee; border:1px solid #426454; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

#leaveBtn, #startBtn, #playAgainBtn, #packBtn{ display:none; }
#leaveBtn { padding:6px 12px; font-size:12px; }

#sortBtn, #lastTrickBtn{ display:flex; }
#actionBtns{ position:absolute; bottom:16px; right:16px; display:none; gap:10px; z-index:50; pointer-events:auto; }
.icon-btn{ width:44px; height:44px; border-radius:50%; background:#173127; border:1px solid #426454; color:var(--gold); display:flex; justify-content:center; align-items:center; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.5); transition:all 0.2s; padding:0; }
.icon-btn:hover{ background:#20493a; transform:scale(1.1); }

/* EMOTES INLINE OUTSIDE THE TABLE */
#emotes{
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 15px auto 0;
    width: 100%;
    padding: 0;
    z-index: 150;
}
.emote-btn{ padding:6px; font-size:18px; line-height:1; }

.emote-bubble{
    position:absolute; font-size:44px; pointer-events:none; z-index:100;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5)); animation-duration:3.5s;
    animation-fill-mode:forwards; animation-timing-function:cubic-bezier(0.34,1.56,0.64,1);
}

.emote-bubble.vp-0{ bottom:80px; left:50%; transform:translateX(-50%); animation-name:floatSouth; }
.emote-bubble.vp-1{ left:140px; top:50%; transform:translateY(-50%); animation-name:floatWest; }
.emote-bubble.vp-2{ top:80px; left:50%; transform:translateX(-50%); animation-name:floatNorth; }
.emote-bubble.vp-3{ right:140px; top:50%; transform:translateY(-50%); animation-name:floatEast; }

@keyframes floatSouth{ 0%{ opacity:0; transform:translate(-50%,20px) scale(0.5); } 15%{ opacity:1; transform:translate(-50%,0) scale(1.2); } 30%{ transform:translate(-50%,-10px) scale(1); } 80%{ opacity:1; transform:translate(-50%,-40px) scale(1); } 100%{ opacity:0; transform:translate(-50%,-60px) scale(0.8); } }
@keyframes floatNorth{ 0%{ opacity:0; transform:translate(-50%,-20px) scale(0.5); } 15%{ opacity:1; transform:translate(-50%,0) scale(1.2); } 30%{ transform:translate(-50%,10px) scale(1); } 80%{ opacity:1; transform:translate(-50%,40px) scale(1); } 100%{ opacity:0; transform:translate(-50%,60px) scale(0.8); } }
@keyframes floatWest{ 0%{ opacity:0; transform:translate(-20px,-50%) scale(0.5); } 15%{ opacity:1; transform:translate(0,-50%) scale(1.2); } 30%{ transform:translate(10px,-50%) scale(1); } 80%{ opacity:1; transform:translate(40px,-50%) scale(1); } 100%{ opacity:0; transform:translate(60px,-50%) scale(0.8); } }
@keyframes floatEast{ 0%{ opacity:0; transform:translate(20px,-50%) scale(0.5); } 15%{ opacity:1; transform:translate(0,-50%) scale(1.2); } 30%{ transform:translate(-10px,-50%) scale(1); } 80%{ opacity:1; transform:translate(-40px,-50%) scale(1); } 100%{ opacity:0; transform:translate(-60px,-50%) scale(0.8); } }

#side{ width: 100%; max-width: 800px; display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.panel{ background:#0c1d16; border:1px solid #29463b; border-radius:12px; padding:10px 14px; }
.flex-grow-1{ flex:1; }

#cutModal, #lastTrickModal{ position:fixed; inset:0; background:#0009; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
#modal{ position:fixed; inset:0; background:transparent; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; pointer-events:none; }
#modal .modalbox{ pointer-events:auto; box-shadow:0 10px 40px rgba(0,0,0,0.9); border:1px solid var(--gold); }

.modalbox, .lobbybox{ background:#10221b; border:1px solid #4b705f; border-radius:18px; padding:24px; max-width:500px; width:100%; box-shadow:0 20px 60px #000; animation:playCardAnim 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.modalbox h2, .lobbybox h2{ margin-top:0; color:var(--gold); }

.suits{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.suitbtn{ padding:18px; border-radius:12px; border:1px solid #45695a; background:#17352a; color:#fff; cursor:pointer; font-size:25px; transition:all 0.2s; }
.suitbtn:hover{ background:#20493a; transform:scale(1.05); }

#cutSlider{ width:100%; margin:20px 0; }
#log{ max-height:100px; overflow:auto; font-size:12px; color:#b9c9c1; padding-right:8px; }

#lastTrickModal .modalbox{ text-align:center; }
#lastTrickModal h2{ margin-top:0; color:var(--gold); }
#closeLastTrickBtn{ margin-top:20px; width:100%; }
#lastTrickContainer{ position:relative; height:160px; width:100%; display:flex; justify-content:center; align-items:center; gap:-15px; margin-top:15px; }
#lastTrickContainer .card{ position:relative; transform:none; box-shadow:0 4px 10px #000; margin:0 -15px; }

#roomPanel{ position:fixed; inset:0; background:#0009; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

.seatrow{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid #2a463b; border-radius:8px; margin-bottom:8px; background:#0c1d16; }
.seatrow.me{ border-color:var(--gold); box-shadow:inset 0 0 10px rgba(231,198,107,0.1); }
.seatrow .stag{ font-size:11px; color:var(--muted); }
.roomcode{ font-size:26px; letter-spacing:4px; font-weight:800; color:var(--gold); text-align:center; margin:6px 0 16px; -webkit-user-select:all; user-select:all; }
.hidden{ display:none !important; }
.waitline{ font-size:13px; color:var(--muted); text-align:center; margin-top:8px; }

/* =========================================
   AD CONTAINERS & VISUAL PLACEHOLDERS (Strict Lockdown)
========================================= */
.ad-container {
    position: relative; 
    width: 100%;
    height: 90px;
    max-height: 90px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 1px dashed #29463b;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.strict-ad {
    display: inline-block;
    width: 100%;
    height: 90px;
    z-index: 2;
    position: relative;
}

.ad-container-top {
    max-width: 600px; 
    height: 60px;
    max-height: 60px;
    margin: 0 auto 12px auto;
    border-radius: 10px;
}

.ad-container-top .strict-ad {
    height: 60px;
}

.ad-placeholder-text {
    position: absolute;
    color: #4b705f;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    z-index: 1;
}

/* PERFECT MOBILE SCALING */
@media(max-width:700px){
    /* --- GAME BOARD SCALING --- */
    #table{ max-width: 95vw; } 
    #trick { width: 45%; height: 45%; }
    #hand-container { height: auto; min-height: 90px; margin-top: 5px; }
    #hand { height: auto !important; min-height: 85px; }
    .card{ width:54px; height:80px; } 
    .card .rank{ font-size:16px; }
    .card .suit{ font-size:20px; }
    .card+.card{ margin-left:-12px; }
    .played{ width: 55px; height: 80px; }
    .player{ min-width: 65px; padding: 4px 6px; font-size: 11px; }
    #p0{ bottom: 5px; }
    #p1{ left: 5px; }
    #p2{ top: 5px; }
    #p3{ right: 5px; }
    .trick-pile{ width:40px; height:56px; }
    .trick-pile.my-team{ bottom: 70px; right: auto; left: 18px; } 
    .trick-pile.opp-team{ top: 70px; right: auto; left: 18px; }  
    .team-score { width: 44px; height: 44px; }
    .flower { transform: scale(0.8); }
    #trump { padding: 4px 10px; }
    #trump .suit { font-size: 18px; }
    #side { margin-top: 15px; padding-bottom: 25px; }

    /* --- STRICT MOBILE AD LOCKDOWN --- */
    .ad-container, .ad-container-top {
        height: 50px !important;
        max-height: 50px !important;
        min-height: 50px !important;
        margin-bottom: 12px;
    }
    .strict-ad {
        height: 50px !important;
        max-height: 50px !important;
    }
    .ad-placeholder-text {
        font-size: 9px;
        letter-spacing: 1px;
    }

    /* --- DASHBOARD UI DE-ZOOMING --- */
    #dashboard { padding: 10px; }
    .dash-col { padding: 16px; border-radius: 16px; }
    .game-title { font-size: 36px; letter-spacing: 4px; }
    .dash-subtitle { font-size: 12px; margin-bottom: 15px; }
    .btn-primary { padding: 12px; font-size: 15px; }
    .private-box { padding: 15px; }
    .dash-input { padding: 10px; font-size: 16px; margin-bottom: 10px; }
}

/* =========================================
   HOKM DASHBOARD HUB
========================================= */
#dashboard {
    height: 100vh;
    height: 100dvh;
    display: flex; 
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 40px 20px;
    position: fixed; 
    inset: 0; 
    z-index: 500;
    background: radial-gradient(circle at 50% 35%,#0b261b 0,#030a07 100%); 
    overflow-y: auto;
}
.dash-container {
    display: grid; grid-template-columns: 280px 400px 300px; gap: 24px;
    max-width: 1050px; width: 100%; margin: auto;
}
.dash-col {
    background: linear-gradient(145deg, #0e2218, #07120d); 
    border: 1px solid #1a3528; border-radius: 20px; padding: 26px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); 
    display: flex; flex-direction: column;
}
.play-col { 
    background: linear-gradient(145deg, #10251b, #091610); 
    border-color: #e7c66b40; align-items: center; text-align: center; 
    transform: scale(1.02); z-index: 2;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(231,198,107,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
}

.dash-header { color: var(--gold); margin: 0 0 20px 0; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; border-bottom: 1px solid #1a3528; padding-bottom: 12px; }
.game-title { font-size: 52px; margin: 0; letter-spacing: 8px; color: var(--gold); text-shadow: 0 4px 15px rgba(231,198,107,0.3); font-weight: 900; }
.dash-subtitle { color: var(--muted); margin: 5px 0 30px; font-size: 14px; letter-spacing: 1px; }

.back-link { color: var(--muted); font-size: 12px; text-decoration: none; margin-bottom: 20px; display: inline-block; transition: 0.2s; }
.back-link:hover { color: var(--gold); }
.game-links { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.player-name { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 8px; }
.rank-badge { background: #1a3528; border-color: var(--gold); font-size: 13px; font-weight: 800; display: inline-block; padding: 6px 12px; margin-bottom: 25px;}

.input-label { color: var(--muted); font-size: 12px; width: 100%; text-align: left; display: block; margin-bottom: 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
.dash-input {
    width: 100%; padding: 14px; border-radius: 12px; border: 2px solid #1a3528;
    background: #040906; color: var(--gold); font-size: 16px; font-weight: 800;
    text-align: center; transition: all 0.3s; outline: none; margin-bottom: 16px;
}
.dash-input:focus { border-color: var(--gold); box-shadow: 0 0 15px rgba(231,198,107,0.15); }
.dash-input::placeholder { color: #2a463b; font-weight: 500;}
.code-input { text-transform: uppercase; margin-bottom: 0; }

.btn-primary {
    width: 100%; padding: 16px; border-radius: 14px; border: none;
    background: linear-gradient(180deg, #e7c66b, #c4a13d); color: #07130f;
    font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px;
    box-shadow: 0 8px 20px rgba(231,198,107,0.25); cursor: pointer; transition: all 0.2s;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(231,198,107,0.4); filter: brightness(1.1); }
.btn-primary:active { transform: translateY(0); }
.full-width { width: 100%; }

.public-box { width: 100%; margin-bottom: 25px; }
.private-box { width: 100%; background: #08120d; border: 1px solid #1a3528; border-radius: 16px; padding: 20px; box-shadow: inset 0 5px 15px rgba(0,0,0,0.5); }
.box-title { color: var(--muted); margin: 0 0 15px 0; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.settings-row { margin-bottom: 15px; display: flex; gap: 10px; justify-content: space-between;}
.dash-select { background: #040906; color: var(--gold); border: 1px solid #1a3528; border-radius: 8px; padding: 8px 12px; font-weight: bold; outline: none; cursor: pointer; flex: 1; }
.join-row { display: flex; gap: 10px; }
.divider { display: flex; align-items: center; text-align: center; margin: 15px 0; color: #2a463b; font-size: 11px; font-weight: bold; letter-spacing: 1px;}
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #1a3528; }
.divider span { padding: 0 10px; }

.lb-list { flex: 1; overflow-y: auto; padding-right: 5px; }
.lb-list::-webkit-scrollbar { width: 6px; }
.lb-list::-webkit-scrollbar-track { background: #08120d; border-radius: 4px; }
.lb-list::-webkit-scrollbar-thumb { background: #1a3528; border-radius: 4px; }
.loading-text { color: var(--muted); font-size: 13px; text-align: center; padding-top: 20px; font-style: italic; }
.lb-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin-bottom: 8px; background: #0a1611; border: 1px solid #1a3528; border-radius: 10px; transition: 0.2s; }
.lb-row:hover { transform: translateX(4px); border-color: #2a463b; }
.lb-rank { font-weight: 900; font-size: 15px; width: 30px; }
.lb-name { flex: 1; font-weight: bold; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px;}
.lb-mmr { font-weight: 800; color: var(--gold); background: #050a08; border: 1px solid #1a3528; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-family: monospace; }

.section-title { color: #fff; font-size: 15px; margin: 0 0 15px 0; font-weight: 800; }
.cosmetic-label { font-size: 11px; color: var(--muted); margin: 0 0 8px 0; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
.cosmetic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.cosmetic-item { aspect-ratio: 2/3; border-radius: 8px; cursor: pointer; transition: all 0.2s; box-shadow: 0 6px 12px rgba(0,0,0,0.5); border: 2px solid transparent; position: relative; overflow: hidden; }
.cosmetic-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4)); pointer-events: none; }
.cosmetic-item:hover { transform: translateY(-4px) scale(1.05); border-color: #4b705f; }
.active-skin { border-color: var(--gold) !important; box-shadow: 0 0 15px rgba(231,198,107,0.4) !important; transform: scale(1.05); }
.success-msg { color: #10b981; font-weight: bold; font-size: 12px; min-height: 16px; text-align: center; }

@media(max-width: 1050px) {
    .dash-container { grid-template-columns: 1fr; max-width: 450px; }
    #dashboard { align-items: flex-start; }
    .play-col { order: -1; transform: none; box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
}

@media(max-width: 430px) {
    #dashboard { padding: max(12px, env(safe-area-inset-top)) 10px max(24px, env(safe-area-inset-bottom)); }
    .dash-col { min-width: 0; }
    .settings-row { flex-direction: column; align-items: stretch; }
    .settings-row label, .dash-select { width: 100%; }
    .join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}

/* COSMETICS ENGINE */
.card-back { position: absolute; width: 100%; height: 100%; border-radius: 6px; box-shadow: -2px 2px 6px rgba(0,0,0,0.6); background-size: cover !important; background-position: center !important; }
.cb-default_blue { background: #0c3866 !important; background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, #072240 5px, #072240 10px) !important; border: 2px solid #ddd; }
.cb-default_red { background: #660c0c !important; background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, #400707 5px, #400707 10px) !important; border: 2px solid #ddd; }
.cb-gold_luxury { background: radial-gradient(circle, #fcd34d, #b45309) !important; border: 2px solid #fef3c7; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.cb-neon_cyber { background: repeating-linear-gradient(0deg, #020617, #020617 5px, #0f172a 5px, #0f172a 10px) !important; border: 2px solid #06b6d4; box-shadow: 0 0 8px #06b6d4; }

#table.felt-default_green, .felt-default_green { background: radial-gradient(ellipse at center, #0e7650 0, #0b5d40 46%, #073c2a 100%) !important; }
#table.felt-royal_red, .felt-royal_red { background: radial-gradient(ellipse at center, #8b0000 0, #5c0000 46%, #2d0000 100%) !important; }
#table.felt-midnight_blue, .felt-midnight_blue { background: radial-gradient(ellipse at center, #0f172a 0, #0b1120 46%, #020617 100%) !important; }
#table.felt-charcoal, .felt-charcoal { background: radial-gradient(ellipse at center, #334155 0, #1e293b 46%, #0f172a 100%) !important; }

/* NEW MODAL OVERLAY CLASS */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 600; 
    display: flex; align-items: center; justify-content: center; padding: 20px; 
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}