/* Custom Gaming & Cyberpunk Styles */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Inter:wght@400;500;700&display=swap');

:root {
    --bg-dark: #0d0f17;
    --card-bg: rgba(22, 27, 44, 0.75);
    --neon-gold: #ffd700;
    --neon-cyan: #00f0ff;
    --neon-red: #ff2a5f;
    --neon-green: #00ff88;
    --neon-purple: #9d4edd;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: #f3f4f6;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overflow-x: hidden;
}

.font-game {
    font-family: 'Unbounded', sans-serif;
}

/* Glassmorphism Card */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card-hover:active {
    transform: scale(0.98);
}

/* Neomorphic & Glowing Borders */
.border-neon-gold {
    border-color: var(--neon-gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.border-neon-cyan {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.border-neon-red {
    border-color: var(--neon-red);
    box-shadow: 0 0 15px rgba(255, 42, 95, 0.3);
}

.border-neon-purple {
    border-color: var(--neon-purple);
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Canvas board styling */
#drawingCanvas {
    touch-action: none;
    background-color: #ffffff;
    cursor: crosshair;
}

/* Pulse animation */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

.animate-pulse-glow {
    animation: pulseGlow 2s infinite ease-in-out;
}

.party-hero { background: radial-gradient(circle at 90% 10%, rgba(0,255,136,.16), transparent 40%), linear-gradient(135deg, rgba(20,28,48,.95), rgba(9,12,21,.95)); }
.match-orb { position:absolute; width:110px; height:110px; right:-35px; top:-45px; border-radius:50%; background:#00ff88; opacity:.13; filter:blur(12px); }
.quick-play-btn, .ready-button { color:#03120b; background:linear-gradient(100deg,#00ff88,#6dffcf); box-shadow:0 10px 28px rgba(0,255,136,.2); }
.lobby-card { background:linear-gradient(110deg,rgba(25,31,49,.88),rgba(15,19,31,.9)); border:1px solid rgba(255,255,255,.07); transition:.18s ease; }
.lobby-card:active { transform:scale(.985); border-color:rgba(0,255,136,.45); }
.empty-lobbies { border:1px dashed rgba(255,255,255,.12); background:rgba(255,255,255,.025); }
.lobby-skeleton { background:linear-gradient(90deg,#151a2a,#222940,#151a2a); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.matchmaking-stage { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.radar { position:relative; width:120px; height:120px; margin-bottom:24px; border-radius:50%; border:1px solid rgba(0,255,136,.4); display:grid; place-items:center; font-size:30px; overflow:hidden; box-shadow:0 0 40px rgba(0,255,136,.12); }
.radar::before,.radar::after { content:""; position:absolute; inset:22%; border:1px solid rgba(0,255,136,.2); border-radius:50%; }
.radar::after { inset:42%; }
.radar-sweep { position:absolute; inset:-50%; background:conic-gradient(from 0deg,transparent 75%,rgba(0,255,136,.5)); animation:scan 1.8s linear infinite; }
.radar span { z-index:2; }
@keyframes scan { to { transform:rotate(360deg); } }
.player-dots { display:flex; gap:8px; margin:24px 0 10px; color:#30384f; }
.player-dots i { font-style:normal; font-size:18px; transition:.25s; }
.player-dots i.found { color:#00ff88; filter:drop-shadow(0 0 6px #00ff88); }
.ready-ring { width:110px; height:110px; border-radius:50%; display:grid; place-items:center; margin-bottom:22px; font-family:'Unbounded'; font-size:28px; color:#00ff88; border:4px solid rgba(0,255,136,.18); border-top-color:#00ff88; animation:readyPulse 1s ease-in-out infinite; }
@keyframes readyPulse { 50% { transform:scale(1.04); box-shadow:0 0 28px rgba(0,255,136,.22); } }

/* PARTYHUB 2026 visual system */
:root { color-scheme:dark; --ease-out:cubic-bezier(.16,1,.3,1); }
html, body { background:#07090f; }
body { position:relative; letter-spacing:-.01em; }
button, input, select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.world-bg { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; background:radial-gradient(circle at 50% -20%,#19243b 0,transparent 45%); }
.aurora { position:absolute; border-radius:50%; filter:blur(90px); opacity:.18; animation:auroraFloat 11s ease-in-out infinite alternate; }
.aurora-a { width:300px; height:300px; background:#5b45ff; top:8%; left:-180px; }
.aurora-b { width:270px; height:270px; background:#00efb2; right:-190px; top:46%; animation-delay:-5s; }
.noise-layer { position:absolute; inset:0; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.grid-horizon { position:absolute; left:-20%; right:-20%; bottom:-12%; height:43%; opacity:.12; transform:perspective(280px) rotateX(64deg); transform-origin:bottom; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,transparent,#000); }
@keyframes auroraFloat { to { transform:translate3d(45px,-35px,0) scale(1.16); } }

.top-shell { padding-top:max(12px,env(safe-area-inset-top)); background:linear-gradient(to bottom,rgba(7,9,15,.93),rgba(7,9,15,.58)); backdrop-filter:blur(24px); border:0; }
.avatar-chip { background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.25); }
.live-dot,.network-state i,.lobby-status i { width:5px; height:5px; border-radius:50%; display:inline-block; background:#44f2a8; box-shadow:0 0 9px #44f2a8; animation:liveBlink 2s infinite; }
@keyframes liveBlink { 50% { opacity:.35; } }
.icon-control,.reward-chip { width:34px; height:34px; border-radius:12px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); font-size:10px; }
.icon-control.muted { opacity:.38; }
.reward-chip { color:#07090f; font-size:20px; background:#fff; }
.wallet-chip { color:#f7da68; background:rgba(247,218,104,.08); border:1px solid rgba(247,218,104,.16); }
.coin-glyph { font-size:10px; transform:rotate(45deg); color:#ffe36f; text-shadow:0 0 10px #ffe36f; }

body > div:nth-of-type(3) { background:rgba(10,13,22,.62)!important; border-color:rgba(255,255,255,.06)!important; backdrop-filter:blur(20px); padding-block:7px!important; }
.game-pill { position:relative; background:transparent!important; color:rgba(255,255,255,.35)!important; box-shadow:none!important; border:0; border-radius:10px!important; transition:.3s var(--ease-out); }
.game-pill span:first-child { display:none; }
.game-pill.text-white,.game-pill.text-black { color:#fff!important; background:rgba(255,255,255,.075)!important; }
.game-pill.text-white::after,.game-pill.text-black::after { content:""; position:absolute; left:28%; right:28%; bottom:-7px; height:2px; border-radius:2px; background:#fff; box-shadow:0 0 9px #fff; }

.game-view { --accent:255,61,92; opacity:1; }
.game-view.is-entering .game-stage { animation:stageIn .55s var(--ease-out) both; }
.game-stage { position:relative; min-height:430px; margin:0 -16px; padding:18px 20px 20px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.07); background:radial-gradient(circle at 75% 42%,rgba(var(--accent),.16),transparent 36%); }
.stage-topline { display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.32); font:600 8px 'Unbounded'; letter-spacing:.2em; }
.network-state { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.55); }
.hero-copy { position:relative; z-index:3; padding-top:42px; max-width:78%; }
.hero-eyebrow,.micro-label { color:rgb(var(--accent)); font:700 8px 'Unbounded'; letter-spacing:.22em; }
.hero-copy h1 { margin:7px 0 5px; color:#fff; font:800 clamp(34px,11vw,49px)/.9 'Unbounded'; letter-spacing:-.08em; text-shadow:0 14px 34px rgba(0,0,0,.4); }
.hero-copy p { margin:0; max-width:250px; color:rgba(255,255,255,.56); font-size:12px; line-height:1.45; }
.game-art { position:absolute; width:205px; height:205px; right:-25px; top:82px; display:grid; place-items:center; perspective:600px; }
.art-core { position:relative; z-index:2; width:105px; height:132px; display:grid; place-items:center; transform:rotate(8deg); border-radius:31px; color:#fff; font:800 64px 'Unbounded'; background:linear-gradient(145deg,rgba(var(--accent),.95),rgba(var(--accent),.42)); border:1px solid rgba(255,255,255,.3); box-shadow:inset 0 1px rgba(255,255,255,.5),0 28px 70px rgba(var(--accent),.25); animation:coreFloat 4.5s ease-in-out infinite; }
.art-core::before { content:""; position:absolute; inset:8px; border-radius:24px; border:1px solid rgba(255,255,255,.14); }
.core-shadow { position:absolute; transform:translate(7px,9px); color:rgba(0,0,0,.18); filter:blur(2px); }
.orbit { position:absolute; border:1px solid rgba(var(--accent),.25); border-radius:50%; animation:orbitSpin 10s linear infinite; }
.orbit::after { content:""; position:absolute; width:7px; height:7px; top:8%; left:22%; border-radius:50%; background:rgb(var(--accent)); box-shadow:0 0 14px rgb(var(--accent)); }
.orbit-one { inset:8px; transform:rotateX(68deg) rotateZ(15deg); }
.orbit-two { inset:30px; animation-direction:reverse; animation-duration:7s; }
.particle { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 0 9px #fff; animation:particleDrift 3s ease-in-out infinite alternate; }.p1{left:10%;top:25%}.p2{right:12%;bottom:18%;animation-delay:-1s}.p3{left:26%;bottom:2%;animation-delay:-2s}
@keyframes coreFloat { 50% { transform:translateY(-8px) rotate(5deg); } }
@keyframes orbitSpin { to { transform:rotate(360deg); } }
@keyframes particleDrift { to { transform:translateY(-16px); opacity:.3; } }
@keyframes stageIn { from { opacity:0; transform:translateY(14px) scale(.985); } }

.play-main { position:absolute; z-index:5; left:20px; right:20px; bottom:24px; height:70px; display:flex; align-items:center; gap:12px; padding:0 17px; text-align:left; color:#07090f; border-radius:22px; background:linear-gradient(100deg,#fff 0%,rgb(var(--accent)) 150%); box-shadow:0 20px 50px rgba(var(--accent),.2),inset 0 1px #fff; overflow:hidden; transition:.25s var(--ease-out); }
.play-main::after { content:""; position:absolute; width:90px; height:130px; left:-100px; top:-30px; transform:rotate(24deg); background:rgba(255,255,255,.65); filter:blur(12px); animation:buttonGlint 4s 1.2s infinite; }
.play-main:active { transform:scale(.975); }
.play-main > i { margin-left:auto; font-style:normal; font-size:21px; }.play-main b{display:block;font:800 12px 'Unbounded';}.play-main small{display:block;margin-top:4px;font-size:9px;opacity:.52}.play-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#07090f;color:#fff;font-size:11px;}
@keyframes buttonGlint { 0%,78%{left:-100px} 100%{left:120%} }

.quick-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:14px 0 18px; }
.action-tile { min-width:0; height:104px; padding:12px 10px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; border-radius:18px; color:#fff; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.075); box-shadow:inset 0 1px rgba(255,255,255,.05); transition:.2s var(--ease-out); }
.action-tile:active { transform:scale(.96); background:rgba(var(--accent),.11); }
.action-tile > span { color:rgb(var(--accent)); font-size:18px; height:35px; }.action-tile b{font-size:10px;white-space:nowrap}.action-tile small{margin-top:3px;color:rgba(255,255,255,.3);font-size:8px;white-space:nowrap}
.room-code-tile { position:relative; }.room-code-tile input{width:52px;margin-top:2px;background:transparent;color:#fff;font:700 12px 'Unbounded';letter-spacing:.15em;outline:none}.room-code-tile button{position:absolute;right:7px;bottom:7px;color:rgb(var(--accent));font-size:7px;font-weight:800;}
.lobbies-panel { padding-bottom:14px; }.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:11px}.section-heading span{font:700 7px 'Unbounded';letter-spacing:.18em;color:rgb(var(--accent))}.section-heading h2{margin-top:3px;font:700 15px 'Unbounded'}.section-heading button{width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.55)}
.lobbies-list{display:flex;flex-direction:column;gap:7px}.room-line{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border-radius:17px;color:#fff;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.065);animation:roomIn .45s var(--ease-out) var(--delay) both}.room-signal{display:flex;align-items:end;gap:2px;width:25px;height:26px;padding:7px;background:rgba(var(--accent),.1);border-radius:9px}.room-signal i{width:3px;background:rgb(var(--accent));border-radius:2px}.room-signal i:nth-child(1){height:5px}.room-signal i:nth-child(2){height:9px}.room-signal i:nth-child(3){height:13px}.room-info{min-width:0;flex:1}.room-info b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-info small{display:block;margin-top:2px;color:rgba(255,255,255,.32);font-size:8px}.room-count{display:flex;align-items:center;color:rgba(255,255,255,.35);font-size:9px}.room-count b{color:#fff;font-size:12px}.room-count i{margin-left:8px;color:rgb(var(--accent));font-size:15px;font-style:normal}.rooms-empty{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;border:1px dashed rgba(255,255,255,.09);color:rgba(255,255,255,.4)}.rooms-empty>span{font-size:25px;color:rgb(var(--accent))}.rooms-empty b{display:block;color:rgba(255,255,255,.7);font-size:10px}.rooms-empty small{display:block;margin-top:3px;font-size:8px}.modern-skeleton{height:56px;border-radius:17px;background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(255,255,255,.075),rgba(255,255,255,.025));background-size:220% 100%;animation:shimmer 1.4s infinite}.modern-skeleton.short{opacity:.55}
@keyframes roomIn { from{opacity:0;transform:translateY(7px)} }
.safe-note{display:flex;justify-content:center;gap:7px;padding:8px 0 12px;color:rgba(255,255,255,.2);font-size:8px}.safe-note span{color:#44f2a8}

#gameScreenOverlay { background:radial-gradient(circle at 50% 30%,rgba(var(--accent,255,255,255),.1),transparent 36%),#07090f!important; }
#gameScreenOverlay>div:first-child{background:rgba(7,9,15,.76)!important;backdrop-filter:blur(18px);border-color:rgba(255,255,255,.06)!important;padding-top:max(12px,env(safe-area-inset-top))}.match-screen{min-height:calc(100vh - 90px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.match-screen h2{margin:9px 0 8px;font:800 30px/1.02 'Unbounded';letter-spacing:-.06em}.match-screen>p{color:rgba(255,255,255,.4);font-size:11px}.match-screen>p b{color:#fff}.match-visual{position:relative;width:180px;height:180px;display:grid;place-items:center;margin-bottom:30px}.scan-core{position:relative;z-index:2;width:76px;height:76px;display:grid;place-items:center;border-radius:25px;color:#080a10;background:rgb(var(--accent));font:800 36px 'Unbounded';box-shadow:0 0 55px rgba(var(--accent),.26);animation:coreFloat 2.8s ease-in-out infinite}.scan-wave{position:absolute;border:1px solid rgba(var(--accent),.35);border-radius:50%;animation:scanWave 2.2s ease-out infinite}.w1{inset:26px}.w2{inset:0;animation-delay:1.1s}@keyframes scanWave{from{transform:scale(.55);opacity:0}25%{opacity:1}to{transform:scale(1.2);opacity:0}}.found-slots{display:flex;gap:8px;margin:25px 0 13px}.found-slots i{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(255,255,255,.1);font-style:normal;font-size:15px;color:rgba(255,255,255,.18)}.found-slots i.filled{color:#fff;background:rgba(var(--accent),.16);border-color:rgba(var(--accent),.35);animation:slotPop .4s var(--ease-out)}@keyframes slotPop{from{transform:scale(.4);opacity:0}}.cancel-match{margin-top:26px;padding:11px 20px;border-radius:13px;color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.08);font:700 8px 'Unbounded';letter-spacing:.12em}.countdown-orb{position:relative;width:122px;height:122px;display:grid;place-items:center;margin-bottom:25px}.countdown-orb svg{position:absolute;inset:0;transform:rotate(-90deg)}.countdown-orb circle{fill:none;stroke:rgb(var(--accent));stroke-width:3;stroke-linecap:round;stroke-dasharray:300 340;animation:countdown 15s linear}.countdown-orb strong{font:800 31px 'Unbounded'}@keyframes countdown{to{stroke-dasharray:0 340}}.confirm-ready{width:100%;max-width:340px;margin-top:24px;padding:18px;border-radius:20px;color:#080a10;background:linear-gradient(100deg,#fff,rgb(var(--accent)));font:800 11px 'Unbounded';box-shadow:0 18px 45px rgba(var(--accent),.2)}.confirm-ready:disabled{filter:saturate(.2);opacity:.48}.success-mark{width:100px;height:100px;display:grid;place-items:center;border-radius:35px;color:#07100c;background:#44f2a8;font-size:48px;box-shadow:0 0 70px rgba(68,242,168,.3);animation:successPop .6s var(--ease-out)}@keyframes successPop{from{transform:scale(.3) rotate(-20deg)}}
.lobby-screen{min-height:calc(100vh - 110px);display:flex;flex-direction:column;align-items:center;padding-top:32px;text-align:center}.lobby-code{margin:10px 0 3px;font:800 52px 'Unbounded';letter-spacing:.13em;color:#fff;text-shadow:0 0 34px rgba(var(--accent),.28)}.lobby-screen>p{color:rgba(255,255,255,.3);font-size:9px}.lobby-status{width:100%;display:flex;justify-content:space-between;margin:28px 0 12px;color:rgba(255,255,255,.4);font:600 8px 'Unbounded';letter-spacing:.1em}.lobby-status span{display:flex;align-items:center;gap:7px}.lobby-status b{color:#fff}.player-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;align-content:start}.player-pod,.player-placeholder{min-height:105px;border-radius:19px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.player-pod{display:flex;flex-direction:column;align-items:center;justify-content:center;animation:roomIn .5s var(--ease-out) var(--delay) both}.player-pod>span{font-size:27px}.player-pod b{max-width:90%;margin-top:7px;overflow:hidden;text-overflow:ellipsis;font-size:9px}.player-pod small{margin-top:2px;color:rgba(255,255,255,.3);font-size:7px}.player-placeholder{opacity:.35;background:linear-gradient(120deg,rgba(255,255,255,.025),rgba(255,255,255,.06));}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modal-grid label>span,.modal-name>span{display:block;margin-bottom:5px;color:rgba(255,255,255,.35);font:600 8px 'Unbounded';letter-spacing:.12em}.modal-grid select,.modal-name input{width:100%;padding:10px;border-radius:12px;color:#fff;background:#0d111c;border:1px solid rgba(255,255,255,.09);outline:none}.modal-name{display:block}

@media (max-width:350px){.game-art{right:-55px}.hero-copy h1{font-size:31px}.quick-row{gap:5px}.action-tile{padding:10px 7px}.action-tile small{display:none}.found-slots{gap:5px}.found-slots i{width:31px;height:31px}}
@media (min-width:700px){#appRoot,.top-shell,body>div:nth-of-type(3){width:480px;margin-inline:auto}.world-bg{left:50%;width:520px;transform:translateX(-50%)}body{background:#030408}.game-stage{border-radius:0 0 30px 30px}.game-art{right:20px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Join Code Modal & Lobby Enhancements */
.big-code-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(var(--accent), 0.4);
    border-radius: 16px;
    padding: 12px 16px;
    text-align: center;
    font: 800 32px 'Unbounded';
    letter-spacing: 0.2em;
    color: #fff;
    outline: none;
    transition: 0.2s ease;
}
.big-code-input:focus {
    border-color: rgb(var(--accent));
    box-shadow: 0 0 20px rgba(var(--accent), 0.35);
}
.paste-btn {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
}
.paste-btn:active {
    transform: scale(0.95);
    background: rgba(var(--accent), 0.2);
}

.lobby-header-badge {
    font: 700 9px 'Unbounded';
    letter-spacing: 0.15em;
    color: rgb(var(--accent));
    background: rgba(var(--accent), 0.12);
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(var(--accent), 0.3);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.lobby-code-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    padding: 18px 20px;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(var(--accent), 0.18), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(var(--accent), 0.35);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 10px;
}
.lobby-code-card:active {
    transform: scale(0.97);
    border-color: rgb(var(--accent));
}
.lobby-code-label {
    display: block;
    font: 700 8px 'Unbounded';
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
}
.lobby-code-val {
    font: 800 42px 'Unbounded';
    letter-spacing: 0.2em;
    color: #fff;
    text-shadow: 0 0 25px rgba(var(--accent), 0.5);
    line-height: 1.1;
    margin: 6px 0;
}
.lobby-copy-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgb(var(--accent));
    opacity: 0.85;
    font-weight: 600;
}
.lobby-share-row {
    width: 100%;
    max-width: 320px;
    margin-bottom: 8px;
}
.share-tg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(36, 161, 222, 0.15);
    border: 1px solid rgba(36, 161, 222, 0.35);
    color: #4dc2ff;
    font: 700 11px 'Unbounded';
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: 0.2s ease;
}
.share-tg-btn:active {
    transform: scale(0.97);
    background: rgba(36, 161, 222, 0.25);
}

.player-pod {
    position: relative;
    overflow: visible;
}
.player-pod.is-host {
    border-color: rgba(255, 190, 38, 0.45);
    background: rgba(255, 190, 38, 0.06);
}
.player-pod.is-bot {
    border-color: rgba(38, 221, 255, 0.35);
    background: rgba(38, 221, 255, 0.05);
}
.host-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffbe26;
    color: #080a10;
    font: 800 7px 'Unbounded';
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(255, 190, 38, 0.4);
    z-index: 2;
    white-space: nowrap;
}
.bot-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #26ddff;
    color: #080a10;
    font: 800 7px 'Unbounded';
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(38, 221, 255, 0.4);
    z-index: 2;
    white-space: nowrap;
}

.lobby-controls-panel {
    width: 100%;
    max-width: 340px;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lobby-bot-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 8px;
}
.add-bot-btn {
    padding: 13px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font: 700 10px 'Unbounded';
    cursor: pointer;
    transition: 0.2s;
}
.add-bot-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.12);
}
.fill-bots-btn {
    padding: 13px 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 190, 38, 0.2), rgba(255, 100, 38, 0.25));
    border: 1px solid rgba(255, 190, 38, 0.45);
    color: #ffdc72;
    font: 700 10px 'Unbounded';
    cursor: pointer;
    transition: 0.2s;
}
.fill-bots-btn:active {
    transform: scale(0.96);
}
.guest-waiting-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--accent));
    box-shadow: 0 0 10px rgb(var(--accent));
    animation: pulseDot 1.4s infinite ease-in-out;
}
@keyframes pulseDot {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; }
}
.quick-match-bot-btn {
    margin-top: 14px;
    padding: 13px 20px;
    border-radius: 16px;
    background: rgba(255, 205, 59, 0.15);
    border: 1px solid rgba(255, 205, 59, 0.35);
    color: #ffcd3b;
    font: 700 10px 'Unbounded';
    cursor: pointer;
    animation: stageIn 0.3s;
}
.quick-match-bot-btn:active {
    transform: scale(0.96);
    background: rgba(255, 205, 59, 0.25);
}

/* ==================== AVATAR STUDIO & SKIN SHOP 2.0 ==================== */
.avatar-hero-stage {
    min-height: 180px;
    background: radial-gradient(circle at 50% 20%, rgba(var(--accent, 255, 190, 38), 0.15), rgba(0, 0, 0, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.avatar-stage-glow {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent, 255, 190, 38), 0.25), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}
.custom-avatar-hero {
    width: 106px;
    height: 106px;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-avatar-base {
    font-size: 58px;
    line-height: 1;
    user-select: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.hero-avatar-hat {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}
.hero-avatar-frame {
    position: absolute;
    inset: -3px;
    border-radius: 37px;
    pointer-events: none;
    z-index: 5;
}

/* Animated Frames */
.frame_aurora {
    border: 3px solid #54f1c6 !important;
    box-shadow: 0 0 22px rgba(84, 241, 198, 0.55), inset 0 0 14px rgba(84, 241, 198, 0.35) !important;
    animation: auroraBreathe 3s infinite alternate ease-in-out;
}
.frame_solar {
    border: 3px solid #ffda62 !important;
    box-shadow: 0 0 24px rgba(255, 218, 98, 0.6), inset 0 0 16px rgba(255, 218, 98, 0.35) !important;
    animation: solarGlow 2.5s infinite alternate ease-in-out;
}
.frame_void {
    border: 3px solid #b690ff !important;
    box-shadow: 0 0 28px rgba(182, 144, 255, 0.65), inset 0 0 18px rgba(182, 144, 255, 0.4) !important;
    animation: voidBreathe 2.8s infinite ease-in-out;
}
.frame_neon {
    border: 3px solid #2cf2a8 !important;
    box-shadow: 0 0 24px rgba(44, 242, 168, 0.55), inset 0 0 14px rgba(44, 242, 168, 0.35) !important;
    animation: neonFlicker 4s infinite linear;
}
.frame_flame {
    border: 3px solid #ef4444 !important;
    box-shadow: 0 0 26px rgba(239, 68, 68, 0.75), inset 0 0 16px rgba(245, 158, 11, 0.5) !important;
    animation: flamePulse 2s infinite alternate ease-in-out;
}
.frame_diamond {
    border: 3px solid #38bdf8 !important;
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.8), inset 0 0 16px rgba(255, 255, 255, 0.6) !important;
    animation: diamondShine 3s infinite ease-in-out;
}
.frame_emerald {
    border: 3px solid #10b981 !important;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.7), inset 0 0 14px rgba(16, 185, 129, 0.4) !important;
    animation: emeraldGlow 2.7s infinite alternate ease-in-out;
}
.frame_rainbow {
    border: 3px solid transparent !important;
    background-image: linear-gradient(#0f172a, #0f172a), linear-gradient(135deg, #ef4444, #f59e0b, #10b981, #06b6d4, #8b5cf6, #ec4899);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.6) !important;
    animation: rainbowSpin 4s linear infinite;
}
.frame_cyber {
    border: 3px solid #06b6d4 !important;
    box-shadow: 0 0 24px rgba(6, 182, 212, 0.65), inset 0 0 14px rgba(6, 182, 212, 0.4) !important;
    animation: cyberPulse 2.2s infinite alternate;
}
.frame_galaxy {
    border: 3px solid #a855f7 !important;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.8), inset 0 0 18px rgba(236, 72, 153, 0.45) !important;
    animation: galaxyRotate 5s infinite alternate ease-in-out;
}
.frame_golden {
    border: 3px solid #facc15 !important;
    box-shadow: 0 0 32px rgba(250, 204, 21, 0.85), inset 0 0 18px rgba(245, 158, 11, 0.6) !important;
    animation: goldenSparkle 2.6s infinite alternate ease-in-out;
}
.frame_frost {
    border: 3px solid #bae6fd !important;
    box-shadow: 0 0 24px rgba(186, 230, 253, 0.75), inset 0 0 14px rgba(255, 255, 255, 0.5) !important;
    animation: frostPulse 3.2s infinite alternate ease-in-out;
}
.frame_none {
    border: 2px solid rgba(255, 255, 255, 0.15);
}

@keyframes auroraBreathe {
    0% { box-shadow: 0 0 18px rgba(84, 241, 198, 0.4), inset 0 0 10px rgba(84, 241, 198, 0.2); }
    100% { box-shadow: 0 0 32px rgba(84, 241, 198, 0.8), inset 0 0 20px rgba(84, 241, 198, 0.5); }
}
@keyframes solarGlow {
    0% { box-shadow: 0 0 18px rgba(255, 218, 98, 0.45); }
    100% { box-shadow: 0 0 34px rgba(255, 218, 98, 0.85); }
}
@keyframes voidBreathe {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(182, 144, 255, 0.5); }
    50% { transform: scale(1.02); box-shadow: 0 0 35px rgba(182, 144, 255, 0.85); }
}
@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    40% { opacity: 0.85; }
    42% { opacity: 1; }
    70% { opacity: 0.9; }
}
@keyframes flamePulse {
    0% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.5); }
    100% { box-shadow: 0 0 36px rgba(245, 158, 11, 0.9), inset 0 0 20px rgba(239, 68, 68, 0.6); }
}
@keyframes diamondShine {
    0%, 100% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.6); }
    50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.95), inset 0 0 22px rgba(56, 189, 248, 0.7); }
}
@keyframes emeraldGlow {
    0% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.5); }
    100% { box-shadow: 0 0 34px rgba(16, 185, 129, 0.9); }
}
@keyframes rainbowSpin {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes cyberPulse {
    0% { box-shadow: 0 0 16px rgba(6, 182, 212, 0.5); }
    100% { box-shadow: 0 0 32px rgba(6, 182, 212, 0.95); }
}
@keyframes galaxyRotate {
    0% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); }
    100% { box-shadow: 0 0 38px rgba(236, 72, 153, 0.9), inset 0 0 20px rgba(168, 85, 247, 0.6); }
}
@keyframes goldenSparkle {
    0% { box-shadow: 0 0 18px rgba(250, 204, 21, 0.6); }
    100% { box-shadow: 0 0 42px rgba(250, 204, 21, 0.95), inset 0 0 24px rgba(245, 158, 11, 0.7); }
}
@keyframes frostPulse {
    0% { box-shadow: 0 0 16px rgba(186, 230, 253, 0.5); }
    100% { box-shadow: 0 0 34px rgba(186, 230, 253, 0.95); }
}

/* Background Gradients */
.bg-midnight { background: linear-gradient(135deg, #1e2b48 0%, #0e1422 100%) !important; }
.bg-mint { background: linear-gradient(135deg, #134e48 0%, #08211f 100%) !important; }
.bg-berry { background: linear-gradient(135deg, #5b21b6 0%, #2e1065 100%) !important; }
.bg-sunset { background: linear-gradient(135deg, #9a3412 0%, #431407 100%) !important; }
.bg-lava { background: linear-gradient(135deg, #991b1b 0%, #450a0a 100%) !important; }
.bg-cybercity { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #4c1d95 100%) !important; }
.bg-matrix { background: linear-gradient(135deg, #022c22 0%, #064e3b 60%, #052e16 100%) !important; }
.bg-ocean { background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #082f49 100%) !important; }
.bg-toxic { background: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #1e1b4b 100%) !important; }
.bg-cosmos { background: radial-gradient(circle at top, #312e81 0%, #0f172a 80%) !important; }

/* Tabs */
.avatar-tab-btn {
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    cursor: pointer;
    font-weight: 700;
}
.avatar-tab-btn.active {
    background: rgba(255, 190, 38, 0.2) !important;
    color: #ffdc72 !important;
    border: 1px solid rgba(255, 190, 38, 0.4) !important;
    box-shadow: 0 4px 12px rgba(255, 190, 38, 0.2);
}

.shop-filter-pill {
    padding: 7px 15px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.shop-filter-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.shop-filter-pill.active {
    background: rgba(255, 190, 38, 0.2) !important;
    color: #ffdc72 !important;
    border-color: rgba(255, 190, 38, 0.45) !important;
    box-shadow: 0 4px 14px rgba(255, 190, 38, 0.15);
}

/* Try-On Bar */
.shop-tryon-bar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.custom-avatar-tryon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101626;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    position: relative;
}
.custom-avatar-tryon span:first-child {
    font-size: 24px;
    line-height: 1;
}
.custom-avatar-tryon span:nth-child(2) {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
}

/* Rarity System */
.rarity-legendary {
    border-color: rgba(255, 190, 38, 0.4) !important;
    background: linear-gradient(135deg, rgba(255, 190, 38, 0.08), rgba(255, 255, 255, 0.02)) !important;
}
.rarity-legendary:hover {
    border-color: #ffdc72 !important;
}
.rarity-epic {
    border-color: rgba(182, 144, 255, 0.4) !important;
    background: linear-gradient(135deg, rgba(182, 144, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
}
.rarity-epic:hover {
    border-color: #b690ff !important;
}
.rarity-rare {
    border-color: rgba(38, 221, 255, 0.35) !important;
    background: linear-gradient(135deg, rgba(38, 221, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;
}
.rarity-rare:hover {
    border-color: #26ddff !important;
}
.rarity-common {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.badge-legendary {
    color: #ffdc72;
    background: rgba(255, 190, 38, 0.16);
    border: 1px solid rgba(255, 190, 38, 0.35);
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}
.badge-epic {
    color: #d8b4fe;
    background: rgba(182, 144, 255, 0.16);
    border: 1px solid rgba(182, 144, 255, 0.35);
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}
.badge-rare {
    color: #7dd3fc;
    background: rgba(38, 221, 255, 0.16);
    border: 1px solid rgba(38, 221, 255, 0.35);
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}
.badge-common {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}