*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#130820;font-family:Arial,Helvetica,sans-serif}
body{display:grid;place-items:center}
#wrap{position:relative;width:min(100vw,1200px);aspect-ratio:16/9;max-height:100vh;overflow:hidden;background:#1b0b2d;box-shadow:0 24px 80px #000b;touch-action:none}
canvas{display:block;width:100%;height:100%}
#overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#12061d55,#09020dcc);z-index:30}
.panel{width:min(88%,520px);padding:25px;border-radius:28px;background:#24103ce9;border:2px solid #855fc0;text-align:center;color:#fff;box-shadow:0 24px 70px #000b}
.panel img{width:92px;height:92px;object-fit:contain;background:#fff;border-radius:20px;padding:4px}
.panel h1{margin:12px 0 6px;font-size:48px;line-height:.95;color:#ffd34c;text-shadow:0 4px 16px #000}
.panel p{color:#eadcff;margin:0 0 18px}
button{border:0;border-radius:16px;padding:13px 24px;font-weight:900;font-size:17px;background:linear-gradient(#ffdb55,#ff9b2e);color:#4a2400;cursor:pointer}
#toast{position:absolute;right:24px;top:150px;width:248px;padding:14px 16px;border-radius:18px;background:#261339ed;border:3px solid #8b68c2;box-shadow:0 10px 26px #0008;color:white;z-index:10;opacity:0;transform:translateY(-8px);transition:.2s}
#toast.show{opacity:1;transform:none}
#toast b{display:block;color:#ffd536;font-size:20px;margin-bottom:4px}
#touch{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:space-between;padding:0 24px;z-index:12;pointer-events:none}
.group{display:flex;gap:22px}
.ctrl{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#5b2b7bd7;border:5px solid #a37ac9;box-shadow:inset 0 0 0 3px #38204d,0 9px 22px #0007;color:white;font-size:42px;font-weight:bold;pointer-events:auto;user-select:none}
@media(min-width:900px){#touch{opacity:.78}}

#audioControls{
 position:absolute;right:14px;top:14px;z-index:20;display:flex;gap:7px;
 background:rgba(28,12,40,.78);padding:7px;border-radius:14px;
 border:1px solid rgba(255,211,74,.55);backdrop-filter:blur(5px)
}
.audioBtn{
 width:42px;height:36px;border:0;border-radius:10px;background:#4a235d;color:#fff;
 font-size:18px;cursor:pointer;box-shadow:none;padding:0;margin:0
}
.audioBtn:hover{background:#653279}
.audioBtn.muted{opacity:.55}


.volGroup{display:flex;align-items:center;gap:5px;background:rgba(15,7,24,.55);padding:4px 7px;border-radius:10px}
.volIcon{font-size:13px}
.volSlider{width:82px;accent-color:#ffd34a;cursor:pointer}
.volText{width:34px;font:700 10px Arial;color:#fff;text-align:right}
@media(max-width:720px){
 #audioControls{right:7px;top:7px;gap:4px;padding:5px}
 .audioBtn{width:34px;height:32px;font-size:15px}
 .volSlider{width:55px}
 .volText{display:none}
 .volGroup{gap:3px;padding:3px 4px}
}


#audioControls{position:absolute;right:14px;top:14px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:7px;background:transparent;padding:0;border:0;backdrop-filter:none}
#audioToggle{background:rgba(54,27,70,.92);border:1px solid rgba(255,211,74,.65)}
#audioPanel{display:none;width:255px;background:rgba(28,12,40,.94);padding:9px;border-radius:14px;border:1px solid rgba(255,211,74,.55);backdrop-filter:blur(7px)}
#audioPanel.open{display:block}
.audioRow{display:grid;grid-template-columns:36px 42px 1fr 34px;align-items:center;gap:6px}
.audioRow+.audioRow{margin-top:7px}
.audioRow .audioBtn{width:36px;height:32px;font-size:15px}
.audioLabel{font:700 11px Arial;color:#fff}
@media(max-width:720px){
 #audioControls{right:7px;top:7px}
 #audioPanel{width:215px}
 .audioRow{grid-template-columns:32px 36px 1fr 30px;gap:4px}
 .audioRow .audioBtn{width:32px;height:30px}
 .volSlider{width:100%}
 .volText{display:block;font-size:9px;width:30px}
}


/* ===== v4.7 RESPONSIVE LANDSCAPE SHELL ===== */
html,body{
 width:100%;height:100%;margin:0;overflow:hidden;background:#100718;
 overscroll-behavior:none;touch-action:none;
}
#gameShell{
 position:fixed;left:50%;top:50%;
 width:1600px;height:900px;
 transform-origin:center center;
 overflow:hidden;
 background:#100718;
}
#rotateNotice{
 display:none;position:fixed;inset:0;z-index:99999;
 align-items:center;justify-content:center;text-align:center;
 padding:28px;box-sizing:border-box;
 background:radial-gradient(circle at center,#45205d,#16091f 72%);
 color:#fff;font-family:Arial,sans-serif;
}
#rotateNotice .rotateCard{
 max-width:360px;padding:28px 24px;border-radius:22px;
 background:rgba(25,10,38,.92);border:2px solid #ffd34a;
 box-shadow:0 14px 50px #0008;
}
#rotateNotice .rotateIcon{font-size:58px;line-height:1;margin-bottom:12px}
#rotateNotice h2{margin:4px 0 8px;color:#ffd34a;font-size:25px}
#rotateNotice p{margin:0;line-height:1.45;font-size:15px}

/* Fullscreen control sits separately from the expandable audio panel. */
#fullscreenBtn{
 position:absolute;right:68px;top:14px;z-index:31;
 width:42px;height:36px;border:1px solid rgba(255,211,74,.65);
 border-radius:10px;background:rgba(54,27,70,.92);color:#fff;
 font-size:18px;cursor:pointer;padding:0;margin:0;
}
#fullscreenBtn:hover{background:#653279}

/* Touch controls: only shown on touch-capable devices. */
#touchControls{
 display:none;position:absolute;left:0;right:0;bottom:18px;z-index:24;
 pointer-events:none;padding:0 22px;box-sizing:border-box;
 justify-content:space-between;align-items:flex-end;
}
.touchCluster{display:flex;gap:12px;pointer-events:auto}
.touchBtn{
 width:72px;height:72px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
 background:rgba(39,17,53,.58);color:#fff;font-size:31px;font-weight:900;
 display:flex;align-items:center;justify-content:center;
 backdrop-filter:blur(4px);user-select:none;-webkit-user-select:none;
 box-shadow:0 5px 18px #0005;
}
.touchBtn:active{transform:scale(.93);background:rgba(108,52,132,.78)}
#jumpTouch{width:82px;height:82px;border-color:rgba(255,211,74,.75);color:#ffd34a}

@media (pointer:coarse){
 #touchControls{display:flex}
 #fullscreenBtn{width:48px;height:42px;font-size:20px}
 #audioToggle{width:48px;height:42px}
}

/* On portrait phones/tablets, stop gameplay and ask for landscape. */
@media (orientation:portrait) and (max-width:1100px){
 #rotateNotice{display:flex}
 #gameShell{visibility:hidden}
}

/* Tiny landscape devices get slightly larger practical controls. */
@media (orientation:landscape) and (max-height:520px){
 .touchBtn{width:64px;height:64px;font-size:27px}
 #jumpTouch{width:72px;height:72px}
}


/* ===== v4.8 FULL VIEWPORT RESPONSIVE OVERRIDES ===== */
#gameShell{
 left:0!important;top:0!important;
 width:100vw!important;height:100dvh!important;
 transform:none!important;transform-origin:initial!important;
 overflow:hidden!important;
 background:#100718;
}
#gameShell canvas{
 position:absolute!important;
 left:50%!important;top:50%!important;
 transform:translate(-50%,-50%)!important;
 transform-origin:center center!important;
}

/* Fill any side/top/bottom space with the same festive visual atmosphere
   rather than exposing a plain dark panel. */
#gameShell::before{
 content:"";position:absolute;inset:-30px;z-index:-2;
 background:
   radial-gradient(circle at 20% 25%,rgba(126,41,143,.28),transparent 32%),
   radial-gradient(circle at 80% 28%,rgba(239,101,35,.18),transparent 30%),
   linear-gradient(180deg,#180b26 0%,#2a102d 55%,#100718 100%);
}
#gameShell::after{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 box-shadow:inset 0 0 120px rgba(0,0,0,.55);
}

/* HUD/control elements remain attached to the actual viewport edges. */
#fullscreenBtn{position:fixed!important;right:18px!important;top:14px!important}
#audioPanel{position:fixed!important}
#touchControls{position:fixed!important}

/* Splash/end overlays should occupy the real viewport and centre naturally. */
#splash,#gameOver,#pauseOverlay{
 position:fixed!important;
 inset:0!important;
 width:100vw!important;height:100dvh!important;
}

/* On touch landscape, keep controls inside comfortable thumb-safe areas. */
@media (pointer:coarse){
 #touchControls{left:0!important;right:0!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
}


/* ===== v4.9 TRUE FULL-VIEWPORT LAYOUT ===== */
html,body{
 width:100%;height:100%;margin:0;overflow:hidden;background:#100718;
}
#gameShell{
 position:fixed!important;
 inset:0!important;
 width:100vw!important;
 height:100dvh!important;
 transform:none!important;
 overflow:hidden!important;
 background:#100718!important;
}
#wrap{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 max-height:none!important;
 aspect-ratio:auto!important;
 margin:0!important;
 overflow:hidden!important;
 box-shadow:none!important;
 background:#100718!important;
}
#game{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 transform:none!important;
 display:block!important;
}

/* All in-game overlays now use the real viewport. */
#overlay{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
}
#toast{z-index:40}

/* Audio UI attached to the actual viewport. */
#audioControls{
 position:fixed!important;
 right:16px!important;
 top:14px!important;
 z-index:100!important;
}
#audioPanel{
 position:absolute!important;
 right:0!important;
 top:48px!important;
 width:270px!important;
}
#audioPanelClose{
 width:28px;height:28px;padding:0;border-radius:8px;
 background:rgba(110,53,126,.75);color:#fff;font-size:16px;
 display:flex;align-items:center;justify-content:center;
 margin-left:auto;margin-bottom:7px;
}

/* Fullscreen is always visible beside audio. */
#fullscreenBtn{
 position:fixed!important;
 right:68px!important;
 top:14px!important;
 z-index:101!important;
}

/* Keep legacy touch controls aligned to the actual viewport. */
#touch{
 position:fixed!important;
 left:0!important;right:0!important;
 bottom:16px!important;
 width:100%!important;
 box-sizing:border-box!important;
}

/* Remove the second duplicate touch-control layer added in v4.7. */
#touchControls{display:none!important}

/* Portrait guidance remains mobile-only. */
@media (orientation:portrait) and (max-width:1100px){
 #rotateNotice{display:flex!important}
 #gameShell{visibility:hidden!important}
}
@media (orientation:landscape){
 #rotateNotice{display:none!important}
 #gameShell{visibility:visible!important}
}


/* ===== v5.2 MOBILE LANDSCAPE ADAPTIVE UI ===== */
@media (orientation:landscape) and (pointer:coarse), (orientation:landscape) and (max-height:650px){
  /* Compact splash / end panel */
  #overlay{
    place-items:center!important;
    padding:6px 54px!important;
    box-sizing:border-box!important;
    overflow:auto!important;
  }
  #overlay .panel{
    width:min(72vw,560px)!important;
    max-height:calc(100dvh - 12px)!important;
    overflow:auto!important;
    box-sizing:border-box!important;
    padding:12px 18px!important;
    border-radius:18px!important;
  }
  #overlay .panel h1{
    font-size:clamp(26px,5.2vw,38px)!important;
    line-height:.94!important;
    margin:3px 0 4px!important;
  }
  #overlay .panel p{
    font-size:11px!important;
    margin:0 0 7px!important;
    line-height:1.25!important;
  }
  #overlay .panel label{
    font-size:12px!important;
    margin-bottom:4px!important;
  }
  #playerNameInput{
    padding:8px 10px!important;
    font-size:14px!important;
    border-radius:9px!important;
  }
  #startBtn,#again{
    padding:9px 20px!important;
    border-radius:12px!important;
    font-size:14px!important;
  }
  #overlay .panel > div[style*="margin:18px"]{
    margin:8px auto 5px!important;
    max-width:270px!important;
  }

  /* Small, thumb-friendly visible controls. Touch area remains enlarged below. */
  #touch{
    position:fixed!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    left:0!important;right:0!important;
    padding:0 14px!important;
    opacity:.68!important;
    z-index:22!important;
  }
  #touch .group{gap:10px!important}
  #touch .ctrl{
    width:50px!important;height:50px!important;
    border-width:3px!important;
    box-shadow:inset 0 0 0 2px #38204d,0 5px 13px #0006!important;
    font-size:26px!important;
    position:relative!important;
  }
  /* Invisible larger hit-target around each small visible control */
  #touch .ctrl::after{
    content:"";position:absolute;inset:-13px;border-radius:50%;
  }

  /* Compact audio/fullscreen controls */
  #fullscreenBtn{
    top:8px!important;right:58px!important;
    width:38px!important;height:34px!important;font-size:16px!important;
  }
  #audioControls{top:8px!important;right:10px!important}
  #audioToggle{width:38px!important;height:34px!important;font-size:15px!important}
  #audioPanel{
    top:40px!important;right:0!important;width:210px!important;
    padding:7px!important;border-radius:11px!important;
  }

  /* Mobile information toast becomes a compact lower-centre banner. */
  #toast{
    position:fixed!important;
    left:50%!important;right:auto!important;
    top:auto!important;bottom:72px!important;
    width:min(68vw,520px)!important;
    padding:7px 11px!important;
    border-width:2px!important;border-radius:12px!important;
    font-size:11px!important;line-height:1.2!important;
    transform:translate(-50%,8px)!important;
    text-align:left!important;
    z-index:45!important;
  }
  #toast.show{transform:translate(-50%,0)!important}
  #toast b{
    display:inline!important;
    font-size:12px!important;
    margin:0 6px 0 0!important;
  }

  /* Hide duplicate newer touch layer; legacy controls are used. */
  #touchControls{display:none!important}
}

/* Very short landscape viewport (browser chrome / split view / keyboard). */
@media (orientation:landscape) and (max-height:430px){
  #overlay .panel{
    width:min(78vw,600px)!important;
    padding:7px 14px!important;
  }
  #overlay .panel h1{font-size:25px!important}
  #overlay .panel p:last-child{display:none!important}
  #touch .ctrl{width:44px!important;height:44px!important;font-size:23px!important}
  #toast{bottom:60px!important}
}


/* ===== v5.3 MOBILE PORTRAIT EDITION ===== */

/* Phones play natively in portrait; desktop/tablet landscape remain unchanged. */
@media (orientation:portrait) and (pointer:coarse), (orientation:portrait) and (max-width:900px){
  #rotateNotice{display:none!important}
  #gameShell{visibility:visible!important}

  #overlay{
    place-items:center!important;
    padding:18px 14px!important;
    box-sizing:border-box!important;
    overflow:auto!important;
  }
  #overlay .panel{
    width:min(90vw,430px)!important;
    max-height:calc(100dvh - 28px)!important;
    overflow:auto!important;
    box-sizing:border-box!important;
    padding:18px 18px!important;
    border-radius:22px!important;
  }
  #overlay .panel h1{
    font-size:clamp(34px,10vw,52px)!important;
    line-height:.92!important;
    margin:4px 0 8px!important;
  }
  #overlay .panel p{
    font-size:13px!important;
    margin:0 0 12px!important;
    line-height:1.3!important;
  }
  #overlay .panel > div[style*="margin:18px"]{
    margin:12px auto 8px!important;
    max-width:320px!important;
  }
  #overlay .panel label{
    font-size:13px!important;
    margin-bottom:5px!important;
  }
  #playerNameInput{
    padding:11px 12px!important;
    font-size:16px!important;
  }
  #startBtn,#again{
    padding:11px 22px!important;
    font-size:15px!important;
  }

  /* Portrait control placement */
  #touch{
    position:fixed!important;
    left:0!important;right:0!important;
    bottom:max(18px,env(safe-area-inset-bottom))!important;
    padding:0 20px!important;
    opacity:.74!important;
    z-index:28!important;
    align-items:flex-end!important;
  }
  #touch .group{gap:12px!important}
  #touch .ctrl{
    width:58px!important;height:58px!important;
    border-width:3px!important;
    font-size:28px!important;
    box-shadow:inset 0 0 0 2px #38204d,0 5px 14px #0007!important;
    position:relative!important;
  }
  #touch .ctrl::after{
    content:"";position:absolute;inset:-14px;border-radius:50%;
  }
  #touch .group + .ctrl{
    width:66px!important;height:66px!important;
    font-size:31px!important;
  }

  /* Audio/fullscreen */
  #fullscreenBtn{
    top:max(10px,env(safe-area-inset-top))!important;
    right:58px!important;
    width:38px!important;height:36px!important;font-size:16px!important;
  }
  #audioControls{
    top:max(10px,env(safe-area-inset-top))!important;
    right:10px!important;
  }
  #audioToggle{
    width:38px!important;height:36px!important;font-size:15px!important;
  }
  #audioPanel{
    top:42px!important;right:0!important;width:218px!important;
    padding:8px!important;border-radius:12px!important;
  }

  /* Portrait toast card: slim and non-blocking */
  #toast{
    position:fixed!important;
    left:50%!important;right:auto!important;
    top:auto!important;
    bottom:102px!important;
    width:min(86vw,420px)!important;
    padding:8px 11px!important;
    border-width:2px!important;
    border-radius:13px!important;
    font-size:11px!important;
    line-height:1.25!important;
    transform:translate(-50%,10px)!important;
    z-index:45!important;
  }
  #toast.show{transform:translate(-50%,0)!important}
  #toast b{
    display:inline!important;
    font-size:12px!important;
    margin-right:6px!important;
  }

  #touchControls{display:none!important}
}

/* Very narrow portrait phones */
@media (orientation:portrait) and (max-width:390px){
  #touch .ctrl{width:54px!important;height:54px!important}
  #touch .group + .ctrl{width:62px!important;height:62px!important}
  #toast{bottom:96px!important}
}


/* ===== v6.3 MOBILE INFO PANEL POSITION ===== */
@media (orientation:portrait) and (pointer:coarse), (orientation:portrait) and (max-width:900px){
  #toast{
    top:152px!important;
    bottom:auto!important;
    left:50%!important;
    right:auto!important;
    width:min(86vw,420px)!important;
    max-height:82px!important;
    overflow:hidden!important;
    padding:8px 11px!important;
    transform:translate(-50%,-8px)!important;
    text-align:left!important;
  }
  #toast.show{
    transform:translate(-50%,0)!important;
  }
}
@media (orientation:portrait) and (max-width:390px){
  #toast{
    top:146px!important;
    bottom:auto!important;
    width:min(88vw,360px)!important;
  }
}


#shareScore{
 background:linear-gradient(#7cff86,#35c95a)!important;
 color:#12351b!important;
}


/* v6.7: fullscreen control retired */
#fsBtn, #fullscreenBtn, .fullscreen-btn, .fullscreenBtn { display:none !important; }


/* ===== v10.2 RECORD CELEBRATIONS ===== */
.recordCelebration{margin:0 auto 12px;padding:12px 16px;border-radius:16px;text-align:center;border:2px solid #ffd34a;background:linear-gradient(135deg,rgba(79,28,104,.96),rgba(35,12,52,.96));box-shadow:0 0 28px rgba(255,211,74,.28);animation:recordPop .55s cubic-bezier(.2,.9,.25,1.2)}
.recordCelebration.global{border-color:#fff0a0;box-shadow:0 0 36px rgba(255,215,60,.46)}
.recordCelebration strong{display:block;color:#ffd34a;font-size:24px;line-height:1.05;letter-spacing:.02em;text-shadow:0 2px 12px #000}
.recordCelebration span{display:block;margin-top:5px;color:#fff;font-size:12px;font-weight:700}
.recordCelebration .recordBurst{font-size:28px;line-height:1;margin-bottom:5px;animation:recordShine 1.1s ease-in-out infinite alternate}
@keyframes recordPop{0%{opacity:0;transform:scale(.72) translateY(-10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes recordShine{from{transform:scale(1)}to{transform:scale(1.12)}}
@media(max-height:650px),(max-width:720px){.recordCelebration{padding:8px 12px;margin-bottom:7px}.recordCelebration strong{font-size:18px}.recordCelebration span{font-size:10px}.recordCelebration .recordBurst{font-size:20px}}

/* ===== v10.3 UNIVERSAL CONTROL HARDENING ===== */
html,body,#gameShell,#wrap,#game{touch-action:none!important;-ms-touch-action:none!important;overscroll-behavior:none!important}
#wrap{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
.ctrl{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.controlHint{margin:10px auto 12px;max-width:360px;padding:9px 12px;border:1px solid rgba(255,211,74,.42);border-radius:12px;background:rgba(16,7,28,.58);color:#eadcff;font-size:11px;line-height:1.35}
.controlHint b{display:block;color:#ffd34a;margin-bottom:3px;font-size:12px}
.controlHint span{display:block}.gamepadHint{display:none!important}.gamepad-connected .controlHint .touchHint{display:none!important}.gamepad-connected .controlHint .gamepadHint{display:block!important;color:#bfffc7}
@media(max-height:650px),(max-width:720px){.controlHint{margin:6px auto 7px;padding:6px 9px;font-size:9px}.controlHint b{font-size:10px}}


/* ===== v10.4 COMPETITION LOBBY ===== */
.lobbyLeaderboard{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(10,5,20,.55);border:1px solid rgba(255,211,74,.32)}
.lobbyLeaderboardTitle,.lobbyTopTitle{font-size:10px;font-weight:900;letter-spacing:.06em;color:#ffd34a}
.scoreToBeat{display:flex;align-items:center;justify-content:center;gap:10px;margin:5px 0 8px;color:#fff;font-size:15px}
.scoreToBeat strong{color:#ffd34a;font-size:17px}.scoreToBeat span{font-weight:900}
.lobbyTopTitle{color:#cdb9dd;margin-bottom:4px}
.lobbyRank{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;padding:3px 5px;border-radius:7px;text-align:left;font-size:11px;color:#fff}
.lobbyRank.me{background:rgba(255,211,74,.12);color:#ffd34a}
.lobbyRank span{text-align:center;color:#cdb9dd}.lobbyRank strong{text-align:right}
.lobbyEmpty{padding:5px;color:#cdb9dd;font-size:11px;text-align:center}
.howToPlay{max-width:340px;margin:10px auto;padding:9px 12px;border-radius:13px;background:rgba(20,8,31,.65);border:1px solid #8756aa;color:#fff}
.howToTitle{font-size:11px;font-weight:900;color:#ffd34a;margin-bottom:6px}
.howToGrid{display:grid;grid-template-columns:1fr auto;gap:3px 12px;text-align:left;font-size:10px}
.howToGrid b{text-align:right;color:#ffd34a}
.howToNote{font-size:9px;color:#cdb9dd;margin-top:6px;line-height:1.25}
@media(max-height:650px){
 .lobbyLeaderboard{padding:6px 9px;margin-top:6px}.lobbyRank{padding:1px 4px;font-size:9px}
 .scoreToBeat{margin:3px 0 5px;font-size:12px}.scoreToBeat strong{font-size:13px}
 .howToPlay{padding:6px 9px;margin:6px auto}.howToGrid{font-size:9px}.howToNote{display:none}
}


/* ===== v10.7 LIVE PRESENCE ===== */
.livePresenceStatus{
  margin-top:8px;
  min-height:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#8cff9d;
  font-weight:800;
  letter-spacing:.01em;
}
.livePresenceStatus .liveDot{font-size:9px}
.livePresenceStatus .liveSep{color:#cdb9dd}
@media(max-width:600px){
  .livePresenceStatus{font-size:9px;gap:4px}
}

/* ===== v10.8 LIVE COMPETITION ===== */
.leaderAnnouncement{
  max-width:330px;
  margin:7px auto 0;
  padding:0 10px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .22s ease,transform .22s ease,max-height .25s ease,padding .25s ease;
  border-radius:10px;
  background:rgba(255,211,74,.12);
  border:1px solid transparent;
  color:#fff;
  font-size:10px;
}
.leaderAnnouncement.show{
  max-height:55px;
  padding:7px 10px;
  opacity:1;
  transform:translateY(0);
  border-color:rgba(255,211,74,.45);
}
.leaderAnnouncement strong{
  display:block;
  color:#ffd34a;
  font-size:10px;
  letter-spacing:.05em;
}
.leaderAnnouncement span{
  display:block;
  margin-top:2px;
  font-weight:800;
}


/* ===== v10.10 PHASE 4A — VISUAL GAME LOBBY ===== */
#overlay{background:
 radial-gradient(circle at 50% 12%,rgba(255,188,48,.18),transparent 25%),
 linear-gradient(180deg,rgba(21,5,31,.38),rgba(8,2,13,.82))!important}
#overlay .lobbyPanel{
 width:min(94vw,1120px)!important;max-width:1120px!important;
 padding:16px 20px 18px!important;border-radius:30px!important;
 background:linear-gradient(145deg,rgba(49,15,65,.91),rgba(25,8,38,.94))!important;
 border:2px solid rgba(255,196,61,.55)!important;
 box-shadow:0 25px 90px #000b,0 0 45px rgba(122,50,148,.25)!important;
 overflow:hidden!important
}
.lobbyHeader{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;margin-bottom:8px}
.gameBadge{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-size:29px;background:radial-gradient(circle,#ffd85b,#d88120);box-shadow:0 0 22px rgba(255,201,62,.42)}
#overlay .lobbyHeader h1{margin:0!important;text-align:left!important;font-size:31px!important;line-height:1!important;letter-spacing:.02em}
#overlay .lobbyHeader h1 span{display:inline;color:#fff;font-size:.64em;text-shadow:none}
.lobbyHeader .livePresenceStatus{margin:0;padding:6px 10px;border:1px solid rgba(101,255,137,.24);border-radius:999px;background:rgba(13,40,24,.38);white-space:nowrap}
.lobbyStage{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(440px,1.18fr);gap:18px;align-items:stretch}
.playerZone,.competitionZone{position:relative;border-radius:22px;background:rgba(12,4,22,.46);border:1px solid rgba(151,94,185,.38)}
.playerZone{padding:14px 18px 13px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.competitionZone{padding:14px}
.playerHero{height:110px;width:190px;position:relative;display:grid;place-items:center;margin:-3px auto 2px}
.heroGlow{position:absolute;width:120px;height:76px;border-radius:50%;background:radial-gradient(circle,rgba(255,213,74,.38),rgba(123,48,151,.18) 52%,transparent 72%);filter:blur(2px)}
.heroPeacock{position:relative;font-size:82px;filter:drop-shadow(0 9px 12px #0008);animation:lobbyHero 2.8s ease-in-out infinite}
.heroSpark{position:absolute;color:#ffd34a;text-shadow:0 0 10px #ff9d2f;animation:sparkle 1.6s ease-in-out infinite alternate}.s1{left:18px;top:23px}.s2{right:22px;top:12px;animation-delay:.45s}.s3{right:34px;bottom:12px;animation-delay:.8s}
@keyframes lobbyHero{50%{transform:translateY(-5px) rotate(1deg)}}@keyframes sparkle{to{transform:scale(1.45);opacity:.45}}
.authZone{width:min(100%,330px);margin:0 auto}.googleGameBtn{width:100%!important;padding:10px 14px!important;border-radius:14px!important;background:#fff!important;color:#25102e!important;font-size:14px!important}.authStatus{min-height:15px;margin-top:5px;color:#cdb9dd;font-size:9px;font-weight:700}.quietBtn{padding:4px 10px!important;margin:2px auto 0!important;border:1px solid #77528e!important;background:transparent!important;color:#cdb9dd!important;font-size:9px!important}
.playerProfileArea{width:min(100%,350px);margin:3px auto 5px}.nicknameSetup label{display:block;color:#ffd34a;font-size:10px;font-weight:900;margin-bottom:4px}.nicknameSetup input{width:100%;padding:9px;border:2px solid #9b69c7;border-radius:10px;text-align:center;font-weight:800}.nicknameSetup button{margin-top:5px;padding:7px 16px;font-size:11px}.nicknameSetup #playerInputError{min-height:14px;color:#ff8c86;font-size:9px}
.challengePanel{padding:0!important;border:0!important;background:transparent!important}
.welcomePlayer{color:#ffd34a;font-size:15px;font-weight:900;margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.challengeTiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.challengeTile{position:relative;padding:7px 10px;border-radius:14px;background:linear-gradient(145deg,rgba(93,38,117,.7),rgba(36,13,52,.82));border:1px solid rgba(255,211,74,.28);text-align:left}
.challengeTile span{position:absolute;right:9px;top:8px;font-size:18px}.challengeTile b{display:block;color:#fff;font-size:23px;line-height:1}.challengeTile small{display:block;margin-top:3px;color:#cdb9dd;font-size:8px;font-weight:900;letter-spacing:.08em}
.challengeMessage{height:12px;overflow:hidden;font-size:8px;color:#bba6c9;margin-top:4px}
.bigStart{min-width:210px;margin:5px auto 4px!important;padding:12px 28px!important;border-radius:999px!important;font-size:20px!important;box-shadow:0 8px 25px rgba(255,157,46,.25),inset 0 1px #fff8}.bigStart span{margin-right:7px}
.visualControlHint{margin:2px auto 0!important;padding:4px 9px!important;border:0!important;background:transparent!important;font-size:9px!important;color:#bfaecb!important}.visualControlHint b{display:inline!important;margin:0!important;color:#ffd34a!important;font-size:11px!important}
.visualLeaderboard{height:100%;margin:0!important;padding:0!important;border:0!important;background:transparent!important;display:flex;flex-direction:column}
.targetCard{display:flex;align-items:center;justify-content:center;gap:12px;min-height:62px;padding:7px 12px;border-radius:17px;background:linear-gradient(135deg,rgba(115,48,139,.76),rgba(45,15,63,.84));border:1px solid rgba(255,211,74,.34);box-shadow:inset 0 0 24px rgba(255,211,74,.04)}
.targetCrown{font-size:31px;filter:drop-shadow(0 3px 6px #0008)}.targetCard small{display:block;color:#cdb9dd;font-size:8px;font-weight:900;letter-spacing:.12em;text-align:left}
.scoreToBeat{display:flex!important;justify-content:flex-start!important;gap:10px!important;margin:1px 0 0!important;font-size:13px!important}.scoreToBeat strong{font-size:15px!important;color:#fff!important}.scoreToBeat span{font-size:19px!important;color:#ffd34a!important;font-weight:900}
.globalBestGhost{display:none}
.podiumBoard{flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr .68fr;gap:7px;align-items:end;margin-top:9px}
.podiumPlayer{min-width:0;padding:8px 5px 7px;border-radius:13px 13px 7px 7px;text-align:center;background:linear-gradient(180deg,rgba(102,47,127,.82),rgba(42,15,58,.94));border:1px solid rgba(180,121,211,.34);box-shadow:0 7px 14px #0005}
.podiumPlayer.p1{grid-column:3/5;grid-row:1;padding-top:12px;border-color:rgba(255,211,74,.68);background:linear-gradient(180deg,rgba(129,76,32,.72),rgba(57,24,58,.96));transform:translateY(0)}
.podiumPlayer.p2{grid-column:1/3;grid-row:1;transform:translateY(13px)}.podiumPlayer.p3{grid-column:5/7;grid-row:1;transform:translateY(19px)}
.podiumPlayer.p4{grid-column:2/4;grid-row:2}.podiumPlayer.p5{grid-column:4/6;grid-row:2}
.podiumPlayer.me{box-shadow:0 0 0 2px #ffd34a,0 8px 20px #0006}.podiumMedal{font-size:19px;line-height:1;margin-bottom:3px}.podiumPlayer.p1 .podiumMedal{font-size:27px}
.podiumPlayer b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:11px}.podiumPlayer strong{display:block;color:#ffd34a;font-size:15px;margin-top:2px}
.rewardStrip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:9px}.rewardStrip div{padding:7px 3px;border-radius:12px;background:rgba(24,8,35,.75);border:1px solid rgba(135,86,170,.4);text-align:center}.rewardStrip span{display:block;font-size:18px;line-height:1.1}.rewardStrip b{display:block;margin-top:3px;color:#ffd34a;font-size:11px}
@media(max-width:760px),(max-height:560px){
 #overlay .lobbyPanel{width:min(96vw,900px)!important;padding:9px 12px 10px!important;border-radius:20px!important}
 .lobbyHeader{grid-template-columns:35px 1fr auto;margin-bottom:5px}.gameBadge{width:33px;height:33px;font-size:21px}
 #overlay .lobbyHeader h1{font-size:22px!important}.lobbyHeader .livePresenceStatus{font-size:8px;padding:4px 7px}
 .lobbyStage{grid-template-columns:.82fr 1.18fr;gap:9px}.playerZone,.competitionZone{padding:8px;border-radius:15px}
 .playerHero{height:65px}.heroPeacock{font-size:49px}.welcomePlayer{font-size:12px;margin-bottom:4px}
 .challengeTile{padding:5px 7px}.challengeTile b{font-size:17px}.challengeTile span{font-size:13px}.challengeMessage{display:none}
 .bigStart{min-width:160px;padding:8px 20px!important;font-size:15px!important}
 .targetCard{min-height:45px}.targetCrown{font-size:22px}.scoreToBeat span{font-size:15px!important}
 .podiumBoard{gap:4px;margin-top:5px}.podiumPlayer{padding:4px 3px}.podiumMedal{font-size:13px}.podiumPlayer.p1 .podiumMedal{font-size:18px}.podiumPlayer b{font-size:8px}.podiumPlayer strong{font-size:10px}
 .rewardStrip{gap:4px;margin-top:5px}.rewardStrip div{padding:4px 2px}.rewardStrip span{font-size:13px}.rewardStrip b{font-size:8px}
 .visualControlHint{display:none!important}
}
@media (orientation:portrait) and (max-width:900px){
 #overlay{padding:8px!important}
 #overlay .lobbyPanel{width:min(94vw,470px)!important;max-height:96dvh!important;overflow:auto!important}
 .lobbyHeader{grid-template-columns:34px 1fr}.lobbyHeader .livePresenceStatus{grid-column:1/3;justify-self:center}
 .lobbyStage{grid-template-columns:1fr}.playerHero{height:70px}.competitionZone{padding:8px}
 .targetCard{min-height:48px}.podiumBoard{min-height:150px}
 .rewardStrip span{font-size:15px}
}


/* ===== v10.10.1 LOBBY VISUAL POLISH ===== */
#overlay .lobbyPanel{
 width:min(94vw,1180px)!important;
 max-width:1180px!important;
 padding:14px 18px 16px!important;
}
.lobbyStage{grid-template-columns:minmax(360px,.95fr) minmax(500px,1.25fr);gap:14px}
.playerZone{padding:10px 16px 11px;overflow:hidden}
.competitionZone{padding:11px}
.playerHero{height:154px;width:310px;margin:-10px auto -2px}
.heroGlow{width:225px;height:120px;background:radial-gradient(circle,rgba(255,213,74,.34),rgba(74,34,119,.19) 55%,transparent 75%)}
.heroMascot{
 position:relative;z-index:1;display:block;
 width:250px;height:250px;object-fit:contain;
 filter:drop-shadow(0 12px 14px rgba(0,0,0,.55));
 transform:translateY(22px);
 animation:lobbyMascotFloat 2.8s ease-in-out infinite;
 pointer-events:none;user-select:none
}
@keyframes lobbyMascotFloat{50%{transform:translateY(16px) rotate(1deg)}}
.heroSpark{z-index:2}.s1{left:23px;top:34px}.s2{right:28px;top:18px}.s3{right:46px;bottom:16px}
.authZone{width:min(100%,350px)}
.bigStart{min-width:245px!important;padding:13px 34px!important;font-size:21px!important}
.targetCard{min-height:56px}
.podiumBoard{gap:6px;margin-top:7px}
.podiumPlayer{padding:7px 5px 6px}
.podiumPlayer.p1{padding-top:10px}
.rewardStrip{gap:5px;margin-top:7px}
.rewardStrip div{padding:6px 3px}
.rewardStrip span{font-size:17px}
.rewardStrip b{font-size:10px}

/* Short desktop / laptop displays */
@media (orientation:landscape) and (max-height:700px){
 #overlay .lobbyPanel{padding:9px 14px 10px!important}
 .lobbyHeader{margin-bottom:5px}
 .playerHero{height:104px;width:245px}
 .heroMascot{width:185px;height:185px;transform:translateY(23px)}
 @keyframes lobbyMascotFloat{50%{transform:translateY(18px) rotate(1deg)}}
 .targetCard{min-height:46px}
 .bigStart{padding:9px 27px!important;font-size:17px!important}
 .rewardStrip div{padding:4px 2px}
}

/* Portrait is composed as one game screen — never a scrolling modal. */
@media (orientation:portrait) and (max-width:900px){
 #overlay{
   padding:6px!important;
   align-items:center!important;
   overflow:hidden!important
 }
 #overlay .lobbyPanel{
   width:min(96vw,560px)!important;
   height:min(94dvh,760px)!important;
   max-height:94dvh!important;
   padding:8px 10px 9px!important;
   border-radius:20px!important;
   overflow:hidden!important;
   display:flex!important;
   flex-direction:column!important
 }
 .lobbyHeader{
   flex:0 0 auto;
   grid-template-columns:34px 1fr auto!important;
   gap:7px!important;
   margin-bottom:5px!important
 }
 .gameBadge{width:32px;height:32px;font-size:19px}
 #overlay .lobbyHeader h1{font-size:21px!important;white-space:nowrap}
 #overlay .lobbyHeader h1 span{font-size:.58em}
 .lobbyHeader .livePresenceStatus{
   grid-column:auto!important;justify-self:end!important;
   font-size:7px!important;padding:3px 6px!important
 }
 .lobbyStage{
   flex:1 1 auto;min-height:0;
   display:grid!important;
   grid-template-columns:1fr!important;
   grid-template-rows:minmax(190px,.9fr) minmax(250px,1.1fr)!important;
   gap:6px!important
 }
 .playerZone{
   min-height:0!important;
   padding:7px 9px!important;
   display:grid!important;
   grid-template-columns:128px 1fr!important;
   grid-template-rows:auto auto auto!important;
   column-gap:8px!important;
   align-content:center!important
 }
 .playerHero{
   grid-column:1;grid-row:1/4;
   width:132px!important;height:176px!important;
   margin:0!important;
   align-self:center!important
 }
 .heroGlow{width:125px;height:105px}
 .heroMascot{
   width:178px!important;height:178px!important;
   max-width:none!important;
   transform:translate(-22px,7px)!important
 }
 @keyframes lobbyMascotFloat{50%{transform:translate(-22px,2px) rotate(1deg)}}
 .heroSpark.s1{left:0;top:22px}.heroSpark.s2{right:2px;top:12px}.heroSpark.s3{right:4px;bottom:18px}
 .authZone{
   grid-column:2;grid-row:1;
   width:100%!important;margin:0!important;align-self:end
 }
 .googleGameBtn{padding:9px 7px!important;font-size:12px!important}
 .authStatus{min-height:11px!important;margin-top:3px!important;font-size:7px!important}
 .quietBtn{font-size:7px!important;padding:2px 7px!important}
 .playerProfileArea{
   grid-column:2;grid-row:1/3;
   width:100%!important;margin:0!important;align-self:center
 }
 .welcomePlayer{font-size:11px!important;margin-bottom:4px!important}
 .challengeTiles{gap:4px!important}
 .challengeTile{padding:5px 6px!important;border-radius:10px!important}
 .challengeTile b{font-size:16px!important}
 .challengeTile span{font-size:12px!important;right:5px!important;top:5px!important}
 .challengeTile small{font-size:6px!important}
 .challengeMessage{display:none!important}
 .nicknameSetup label{font-size:7px!important;margin-bottom:2px!important}
 .nicknameSetup input{padding:7px!important;font-size:11px!important}
 .nicknameSetup button{padding:5px 10px!important;font-size:8px!important}
 .bigStart{
   grid-column:2;grid-row:2;
   align-self:center!important;
   min-width:0!important;width:100%!important;
   margin:4px 0!important;padding:10px 10px!important;
   font-size:16px!important
 }
 .visualControlHint{
   grid-column:2;grid-row:3;
   display:block!important;
   margin:0!important;padding:1px!important;
   font-size:7px!important;align-self:start!important
 }
 .visualControlHint b{font-size:8px!important}
 .competitionZone{
   min-height:0!important;
   padding:6px!important;
   display:grid!important;
   grid-template-rows:minmax(0,1fr) 43px!important;
   overflow:hidden!important
 }
 .visualLeaderboard{min-height:0!important}
 .targetCard{
   flex:0 0 42px!important;min-height:42px!important;
   padding:4px 8px!important;border-radius:12px!important
 }
 .targetCrown{font-size:18px!important}
 .targetCard small{font-size:6px!important}
 .scoreToBeat{gap:6px!important}
 .scoreToBeat strong{font-size:11px!important}
 .scoreToBeat span{font-size:14px!important}
 .podiumBoard{
   min-height:0!important;
   height:auto!important;
   grid-template-rows:minmax(76px,1fr) 57px!important;
   gap:4px!important;margin-top:4px!important
 }
 .podiumPlayer{padding:4px 3px 3px!important;border-radius:9px 9px 5px 5px!important}
 .podiumPlayer.p1{padding-top:5px!important}
 .podiumPlayer.p2{transform:translateY(7px)!important}
 .podiumPlayer.p3{transform:translateY(10px)!important}
 .podiumMedal{font-size:12px!important;margin-bottom:1px!important}
 .podiumPlayer.p1 .podiumMedal{font-size:16px!important}
 .podiumPlayer b{font-size:7px!important}
 .podiumPlayer strong{font-size:9px!important;margin-top:1px!important}
 .rewardStrip{
   height:39px!important;
   gap:3px!important;margin-top:4px!important
 }
 .rewardStrip div{padding:3px 1px!important;border-radius:8px!important}
 .rewardStrip span{font-size:12px!important}
 .rewardStrip b{font-size:7px!important;margin-top:1px!important}
 .leaderAnnouncement{position:absolute!important}
}

/* Very narrow phones: keep the same one-screen composition. */
@media (orientation:portrait) and (max-width:420px){
 #overlay .lobbyPanel{width:97vw!important;padding:6px 7px!important}
 #overlay .lobbyHeader h1{font-size:18px!important}
 .lobbyHeader .livePresenceStatus{font-size:6px!important}
 .lobbyStage{grid-template-rows:minmax(180px,.88fr) minmax(238px,1.12fr)!important}
 .playerZone{grid-template-columns:112px 1fr!important}
 .playerHero{width:112px!important}
 .heroMascot{width:158px!important;height:158px!important;transform:translate(-24px,8px)!important}
 @keyframes lobbyMascotFloat{50%{transform:translate(-24px,3px) rotate(1deg)}}
}


/* ===== v10.10.2 FINAL LOBBY COMPOSITION PASS ===== */

/* Source mascot artwork is transparent; never give the image itself a tile/background. */
.heroMascot{
 background:transparent!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
}

/* DESKTOP: character-led left zone, denser competition zone */
@media (orientation:landscape) and (min-width:761px){
 #overlay .lobbyPanel{width:min(92vw,1160px)!important}
 .lobbyStage{grid-template-columns:minmax(390px,.9fr) minmax(540px,1.25fr)!important}
 .playerZone{
   min-height:300px!important;
   display:grid!important;
   grid-template-columns:190px 1fr!important;
   grid-template-rows:auto auto auto!important;
   column-gap:10px!important;
   align-items:center!important;
   padding:10px 14px!important
 }
 .playerHero{
   grid-column:1;grid-row:1/4;
   width:200px!important;height:255px!important;
   margin:0!important;align-self:center!important;
   overflow:visible!important
 }
 .heroGlow{width:180px!important;height:160px!important}
 .heroMascot{
   width:275px!important;height:275px!important;
   max-width:none!important;
   object-fit:contain!important;
   transform:translate(-40px,0)!important
 }
 @keyframes lobbyMascotFloat{50%{transform:translate(-40px,-6px) rotate(1deg)}}
 .authZone{
   grid-column:2;grid-row:1;
   width:100%!important;max-width:300px!important;
   margin:0 auto!important;align-self:end!important
 }
 .playerProfileArea{
   grid-column:2;grid-row:1/3;
   width:100%!important;max-width:300px!important;
   margin:0 auto!important;align-self:center!important
 }
 .welcomePlayer{font-size:17px!important;text-align:center!important}
 .challengeTiles{gap:7px!important}
 .challengeTile{text-align:center!important}
 .challengeTile span{position:static!important;display:block!important;font-size:17px!important;margin-bottom:2px!important}
 .challengeTile b{font-size:24px!important}
 .challengeTile small{font-size:7px!important}
 .challengeMessage{text-align:center!important}
 .bigStart{
   grid-column:2;grid-row:2;
   width:100%!important;max-width:300px!important;
   min-width:0!important;margin:5px auto!important;
   padding:12px 20px!important
 }
 .visualControlHint{
   grid-column:2;grid-row:3;
   width:100%!important;text-align:center!important;
   align-self:start!important
 }
 .competitionZone{
   min-height:300px!important;
   display:grid!important;
   grid-template-rows:1fr 48px!important;
   overflow:hidden!important
 }
 .visualLeaderboard{min-height:0!important}
 .targetCard{min-height:52px!important;flex:0 0 52px!important}
 .podiumBoard{
   min-height:185px!important;
   grid-template-rows:minmax(105px,1fr) 66px!important;
   margin-top:5px!important
 }
 .podiumPlayer.p2{transform:translateY(9px)!important}
 .podiumPlayer.p3{transform:translateY(14px)!important}
 .rewardStrip{height:44px!important;margin-top:4px!important}
}

/* MOBILE: one continuous arcade lobby rather than two tall cards */
@media (orientation:portrait) and (max-width:900px){
 #overlay{padding:4px!important;overflow:hidden!important}
 #overlay .lobbyPanel{
   width:min(97vw,540px)!important;
   height:auto!important;
   max-height:94dvh!important;
   overflow:hidden!important;
   padding:7px 8px 8px!important
 }
 .lobbyHeader{
   grid-template-columns:31px 1fr auto!important;
   gap:6px!important;margin-bottom:4px!important
 }
 .gameBadge{width:29px!important;height:29px!important;font-size:18px!important}
 #overlay .lobbyHeader h1{font-size:19px!important}
 #overlay .lobbyHeader h1 span{font-size:.55em!important}
 .lobbyHeader .livePresenceStatus{
   grid-column:auto!important;
   font-size:6px!important;padding:3px 5px!important
 }
 .lobbyStage{
   display:flex!important;
   flex-direction:column!important;
   gap:5px!important;
   min-height:0!important
 }
 .playerZone,.competitionZone{
   border-radius:14px!important;
   min-height:0!important
 }
 .playerZone{
   height:218px!important;
   display:grid!important;
   grid-template-columns:145px 1fr!important;
   grid-template-rows:1fr auto auto!important;
   column-gap:5px!important;
   padding:5px 7px!important;
   overflow:hidden!important
 }
 .playerHero{
   grid-column:1!important;grid-row:1/4!important;
   width:145px!important;height:200px!important;
   margin:0!important;overflow:visible!important;
   align-self:center!important
 }
 .heroGlow{width:135px!important;height:120px!important}
 .heroMascot{
   width:205px!important;height:205px!important;
   max-width:none!important;
   object-fit:contain!important;
   transform:translate(-31px,0)!important
 }
 @keyframes lobbyMascotFloat{50%{transform:translate(-31px,-5px) rotate(1deg)}}
 .heroSpark.s1{left:0!important;top:25px!important}
 .heroSpark.s2{right:1px!important;top:13px!important}
 .heroSpark.s3{right:4px!important;bottom:22px!important}
 .authZone{
   grid-column:2!important;grid-row:1!important;
   width:100%!important;margin:0!important;
   align-self:center!important
 }
 .googleGameBtn{padding:9px 5px!important;font-size:11px!important}
 .authStatus{
   min-height:9px!important;
   margin:2px 0 0!important;
   font-size:6px!important;
   opacity:.68!important
 }
 .quietBtn{font-size:6px!important;padding:2px 5px!important;margin:1px auto!important}
 .playerProfileArea{
   grid-column:2!important;grid-row:1/3!important;
   width:100%!important;margin:0!important;
   align-self:center!important
 }
 .welcomePlayer{
   font-size:12px!important;
   line-height:1.05!important;
   margin:0 0 5px!important;
   text-align:center!important
 }
 .challengeTiles{gap:4px!important}
 .challengeTile{
   padding:5px 3px!important;
   text-align:center!important;
   border-radius:9px!important
 }
 .challengeTile span{
   position:static!important;
   display:block!important;
   font-size:12px!important;
   line-height:1!important;
   margin-bottom:1px!important
 }
 .challengeTile b{font-size:17px!important;line-height:1!important}
 .challengeTile small{font-size:5px!important;margin-top:2px!important}
 .challengeMessage{display:none!important}
 .nicknameSetup label{font-size:6px!important}
 .nicknameSetup input{padding:6px!important;font-size:10px!important}
 .nicknameSetup button{padding:4px 8px!important;font-size:7px!important}
 .bigStart{
   grid-column:2!important;grid-row:2!important;
   width:100%!important;min-width:0!important;
   margin:3px 0!important;padding:9px 5px!important;
   font-size:15px!important
 }
 .visualControlHint{
   grid-column:2!important;grid-row:3!important;
   display:block!important;
   margin:0!important;padding:0!important;
   font-size:6px!important;text-align:center!important
 }
 .visualControlHint b{font-size:7px!important}

 .competitionZone{
   height:310px!important;
   padding:5px!important;
   display:grid!important;
   grid-template-rows:262px 39px!important;
   overflow:hidden!important
 }
 .visualLeaderboard{
   display:grid!important;
   grid-template-rows:42px 1fr!important;
   min-height:0!important
 }
 .targetCard{
   min-height:0!important;height:40px!important;
   padding:3px 7px!important;border-radius:11px!important
 }
 .targetCrown{font-size:17px!important}
 .targetCard small{font-size:5px!important}
 .scoreToBeat strong{font-size:10px!important}
 .scoreToBeat span{font-size:14px!important}
 .podiumBoard{
   height:216px!important;
   min-height:0!important;
   grid-template-columns:repeat(6,1fr)!important;
   grid-template-rows:132px 74px!important;
   gap:4px!important;margin-top:4px!important;
   align-items:end!important
 }
 .podiumPlayer{
   padding:5px 2px 4px!important;
   border-radius:9px 9px 5px 5px!important
 }
 .podiumPlayer.p1{padding-top:7px!important}
 .podiumPlayer.p2{transform:translateY(9px)!important}
 .podiumPlayer.p3{transform:translateY(13px)!important}
 .podiumMedal{font-size:13px!important}
 .podiumPlayer.p1 .podiumMedal{font-size:18px!important}
 .podiumPlayer b{font-size:7px!important}
 .podiumPlayer strong{font-size:10px!important}
 .rewardStrip{
   height:36px!important;
   gap:3px!important;margin-top:2px!important
 }
 .rewardStrip div{
   height:36px!important;padding:3px 1px!important;
   border-radius:8px!important
 }
 .rewardStrip span{font-size:12px!important}
 .rewardStrip b{font-size:7px!important}
}

/* Small-height phones: scale the two content zones, never introduce scrolling. */
@media (orientation:portrait) and (max-height:720px){
 .playerZone{height:195px!important}
 .playerHero{height:180px!important}
 .heroMascot{width:185px!important;height:185px!important}
 .competitionZone{height:278px!important;grid-template-rows:231px 39px!important}
 .podiumBoard{height:185px!important;grid-template-rows:111px 65px!important}
}


/* ===== v10.10.3 LOBBY MICRO-POLISH ===== */
.headerActions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.headerActions .livePresenceStatus{margin:0!important}
.headerSignOut{
 display:inline-flex;align-items:center;justify-content:center;
 margin:0!important;padding:4px 7px!important;
 border:1px solid rgba(203,183,219,.28)!important;
 border-radius:999px!important;
 background:rgba(26,8,37,.55)!important;
 color:#cdb9dd!important;
 font-size:7px!important;font-weight:700!important;
 line-height:1!important;cursor:pointer
}
.authCompatSignOut{display:none!important}
.authStatus.signedInAuthHidden{display:none!important}

/* Mobile: pull the podium directly under the leader target. */
@media (orientation:portrait) and (max-width:900px){
 .lobbyHeader{grid-template-columns:31px 1fr auto!important}
 .headerActions{gap:4px}
 .headerActions .livePresenceStatus{font-size:6px!important;padding:3px 5px!important}
 .headerSignOut{font-size:6px!important;padding:3px 5px!important}

 .competitionZone{
   height:246px!important;
   grid-template-rows:199px 39px!important
 }
 .visualLeaderboard{
   grid-template-rows:42px 153px!important
 }
 .podiumBoard{
   height:149px!important;
   grid-template-rows:84px 57px!important;
   margin-top:3px!important;
   align-items:end!important
 }
 .podiumPlayer.p2{transform:translateY(5px)!important}
 .podiumPlayer.p3{transform:translateY(8px)!important}
 .podiumPlayer.p4,.podiumPlayer.p5{align-self:end!important}
 .rewardStrip{margin-top:2px!important}
}

/* Extra-short portrait screens stay compact without introducing scrolling. */
@media (orientation:portrait) and (max-height:720px){
 .competitionZone{
   height:224px!important;
   grid-template-rows:177px 39px!important
 }
 .visualLeaderboard{grid-template-rows:40px 133px!important}
 .podiumBoard{
   height:129px!important;
   grid-template-rows:72px 49px!important
 }
}


/* ===== v10.10.4 FINAL LOBBY POLISH ===== */

/* Title: full game name only */
.lobbyHeader{grid-template-columns:1fr auto!important}
#overlay .lobbyHeader h1{
 text-align:left!important;
 white-space:nowrap!important;
 letter-spacing:.01em!important
}
#overlay .lobbyHeader h1 span{display:inline!important}

/* Sign-out must remain comfortably tappable/clickable */
.headerSignOut{
 min-width:54px!important;
 min-height:30px!important;
 padding:7px 10px!important;
 font-size:9px!important;
 position:relative!important;
 z-index:8!important
}

/* Signed-in PLAY becomes the visual call-to-action.
   Disabled/sign-in state stays subdued via the existing inline opacity. */
.bigStart:not([disabled]){
 position:relative!important;
 overflow:visible!important;
 opacity:1!important;
 background:linear-gradient(180deg,#ffe766 0%,#ffc529 48%,#ff9f1f 100%)!important;
 color:#351427!important;
 border:2px solid #fff0a0!important;
 box-shadow:
   0 0 0 1px rgba(255,191,34,.5),
   0 0 18px rgba(255,190,38,.72),
   0 0 38px rgba(255,137,26,.38),
   inset 0 2px 0 rgba(255,255,255,.72)!important;
 animation:vetriPlayPulse 1.85s ease-in-out infinite!important;
 transform-origin:center!important
}
.bigStart:not([disabled])::after{
 content:"";
 position:absolute;
 inset:-6px;
 border-radius:999px;
 border:2px solid rgba(255,218,88,.42);
 opacity:0;
 animation:vetriPlayRing 1.85s ease-out infinite;
 pointer-events:none
}
@keyframes vetriPlayPulse{
 0%,100%{transform:scale(1);filter:brightness(1)}
 50%{transform:scale(1.025);filter:brightness(1.09)}
}
@keyframes vetriPlayRing{
 0%{transform:scale(.98);opacity:.55}
 70%,100%{transform:scale(1.08);opacity:0}
}

/* Subtle festive ambience behind the lobby — intentionally low contrast */
#overlay::before,#overlay::after{
 content:"";
 position:absolute;
 pointer-events:none;
 z-index:0;
 border-radius:50%;
 opacity:.24
}
#overlay::before{
 width:5px;height:5px;left:14%;top:28%;
 background:#ffd75a;
 box-shadow:
  11vw 7vh 0 #ffb443, 23vw -9vh 0 #ffe9a0, 36vw 15vh 0 #ffb54a,
  49vw -5vh 0 #ffd95e, 61vw 11vh 0 #fff0a8, 73vw -7vh 0 #ffbb45;
 animation:vetriFestiveDrift 8s ease-in-out infinite alternate
}
#overlay::after{
 width:4px;height:4px;right:10%;top:38%;
 background:#fff0a6;
 box-shadow:
  -9vw 13vh 0 #ffd34a, -22vw -6vh 0 #ffb33f, -34vw 18vh 0 #ffe995,
  -48vw 3vh 0 #ffc34d, -62vw 16vh 0 #fff1ad;
 animation:vetriFestiveDrift2 10s ease-in-out infinite alternate
}
#overlay .lobbyPanel{position:relative!important;z-index:2!important}
@keyframes vetriFestiveDrift{
 from{transform:translate3d(0,0,0);opacity:.16}
 to{transform:translate3d(7px,-10px,0);opacity:.34}
}
@keyframes vetriFestiveDrift2{
 from{transform:translate3d(0,0,0);opacity:.12}
 to{transform:translate3d(-8px,9px,0);opacity:.29}
}

/* Fix signed-in desktop collision: explicit non-overlapping player grid */
@media (orientation:landscape) and (min-width:761px){
 .playerZone{
   grid-template-columns:190px minmax(210px,1fr)!important;
   grid-template-rows:minmax(150px,1fr) 58px 24px!important;
 }
 .playerProfileArea{
   grid-column:2!important;
   grid-row:1!important;
   align-self:end!important;
   margin:0 auto 8px!important
 }
 .authZone{
   grid-column:2!important;
   grid-row:1!important;
   align-self:center!important
 }
 .bigStart{
   grid-column:2!important;
   grid-row:2!important;
   align-self:center!important;
   position:relative!important;
   z-index:5!important;
   margin:0 auto!important
 }
 .visualControlHint{
   grid-column:2!important;
   grid-row:3!important;
   align-self:start!important;
   margin-top:2px!important
 }
}

/* Mobile title/actions + comfortable Sign out */
@media (orientation:portrait) and (max-width:900px){
 .lobbyHeader{
   grid-template-columns:minmax(0,1fr) auto!important;
   gap:5px!important
 }
 #overlay .lobbyHeader h1{font-size:19px!important}
 .headerActions{gap:4px!important}
 .headerSignOut{
   min-width:50px!important;
   min-height:28px!important;
   padding:6px 8px!important;
   font-size:8px!important
 }
 .bigStart:not([disabled]){animation-duration:1.7s!important}
}

/* Respect reduced-motion accessibility */
@media (prefers-reduced-motion:reduce){
 .bigStart:not([disabled]),.bigStart:not([disabled])::after,
 #overlay::before,#overlay::after,.heroMascot,.heroSpark{
   animation:none!important
 }
}


/* ===== v10.13 PHASE 4C — RESULTS & REPLAY ===== */
.resultPanel{
 width:min(92vw,560px)!important;max-width:560px!important;
 padding:18px 20px!important;border-radius:28px!important;
 background:linear-gradient(155deg,rgba(51,15,67,.96),rgba(24,7,37,.97))!important;
 border:2px solid rgba(255,202,61,.52)!important;
 box-shadow:0 24px 80px #000b,0 0 38px rgba(127,51,154,.25)!important;
 text-align:center!important
}
.resultAchievement{
 display:inline-flex;align-items:center;gap:7px;
 padding:7px 13px;margin-bottom:8px;border-radius:999px;
 border:1px solid rgba(255,211,74,.58);
 background:rgba(84,39,99,.72);
 color:#ffd34a;font-size:12px;font-weight:900;
 animation:resultFloat 2.4s ease-in-out infinite
}
.resultAchievement span{font-size:18px}.resultAchievement.global{box-shadow:0 0 20px rgba(255,201,55,.18)}
@keyframes resultFloat{50%{transform:translateY(-2px)}}
.resultEyebrow{font-size:9px;font-weight:900;letter-spacing:.18em;color:#bca8ca}
.resultPlayer{margin-top:2px;font-size:15px;font-weight:900;color:#ffd34a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultScore{margin-top:4px;font-size:58px;line-height:.95;font-weight:1000;color:#fff;text-shadow:0 4px 18px #0008}
.resultScoreLabel{margin-top:3px;font-size:8px;font-weight:900;letter-spacing:.2em;color:#bba8c9}
.resultMilestones{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 8px}
.resultMilestones>div{padding:8px 4px;border-radius:13px;background:rgba(25,8,37,.7);border:1px solid rgba(135,86,170,.42)}
.resultMilestones span{display:block;font-size:17px}.resultMilestones b{display:block;margin-top:1px;font-size:17px;color:#fff}.resultMilestones small{display:block;margin-top:2px;font-size:6px;font-weight:900;letter-spacing:.08em;color:#bdaacb}
.resultQuickStats{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:8px}
.resultQuickStats>div{padding:6px 2px;border-radius:10px;background:rgba(19,6,29,.62);border:1px solid rgba(123,78,154,.3)}
.resultQuickStats span{display:block;font-size:14px;line-height:1}.resultQuickStats b{display:block;margin-top:3px;font-size:9px;color:#ffd34a;white-space:nowrap;overflow:hidden}
.resultTop5{text-align:left;background:rgba(15,5,24,.66);border:1px solid rgba(126,79,158,.28);border-radius:13px;padding:7px 12px;margin:7px 0}
.resultTop5Title{text-align:center;color:#ffd34a;font-size:9px;font-weight:900;margin-bottom:2px}
.resultActions{display:grid;grid-template-columns:1.45fr .8fr;gap:8px;margin-top:9px}
.resultActions button{margin:0!important}
.resultReplay{
 position:relative!important;overflow:visible!important;
 background:linear-gradient(180deg,#ffe766,#ffc529 48%,#ff9f1f)!important;
 color:#351427!important;border:2px solid #fff0a0!important;
 box-shadow:0 0 18px rgba(255,190,38,.55),inset 0 2px rgba(255,255,255,.65)!important;
 animation:resultReplayPulse 1.9s ease-in-out infinite
}
@keyframes resultReplayPulse{50%{transform:scale(1.025);filter:brightness(1.07)}}
.resultShare{background:rgba(102,54,132,.82)!important;border:1px solid #9869b8!important;color:#fff!important}

@media (orientation:portrait) and (max-width:700px){
 .resultPanel{width:94vw!important;max-height:94dvh!important;overflow:hidden!important;padding:11px 12px!important;border-radius:21px!important}
 .resultAchievement{padding:5px 10px;margin-bottom:5px;font-size:9px}.resultAchievement span{font-size:14px}
 .resultPlayer{font-size:12px}.resultScore{font-size:47px}
 .resultMilestones{gap:4px;margin:8px 0 5px}.resultMilestones>div{padding:5px 2px}.resultMilestones span{font-size:13px}.resultMilestones b{font-size:13px}
 .resultQuickStats{gap:3px;margin-bottom:5px}.resultQuickStats>div{padding:4px 1px}.resultQuickStats span{font-size:11px}.resultQuickStats b{font-size:7px}
 .resultTop5{padding:5px 9px;margin:5px 0;font-size:9px}
 .resultActions{gap:5px;margin-top:6px}.resultActions button{padding:9px 5px!important;font-size:10px!important}
}
@media (prefers-reduced-motion:reduce){
 .resultAchievement,.resultReplay{animation:none!important}
}


/* ===== v10.13.2 — AUDIO CONTROL / RANK SEPARATION =====
   The live control is #audioControls/#audioToggle, not #muteBtn.
   Keep it physically separate from the top-right rank HUD.
*/
#audioControls{
  right:14px!important;
  top:78px!important;
  z-index:30!important;
}
@media (orientation:landscape){
  #audioControls{
    right:14px!important;
    top:78px!important;
  }
}
@media (orientation:portrait){
  #audioControls{
    right:12px!important;
    top:66px!important;
  }
}


/* ===== v10.13.3 — SIMPLE TOP-HUD AUDIO TOGGLE =====
   One control only: mute / unmute. No second row and no expandable mixer.
*/
#audioControls{
  position:absolute!important;
  right:10px!important;
  top:10px!important;
  z-index:31!important;
  display:block!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  margin:0!important;
}
#audioToggle{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  margin:0!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  font-size:18px!important;
}
#audioPanel{display:none!important}

@media (orientation:portrait){
  /* Rank chip occupies the top-right HUD. Audio stays on that same row,
     immediately to its left instead of wrapping underneath it. */
  #audioControls{
    right:112px!important;
    top:10px!important;
  }
}
@media (orientation:landscape){
  #audioControls{
    right:160px!important;
    top:14px!important;
  }
}


/* ===== v10.13.4 — FUNCTIONAL + ALIGNED SINGLE AUDIO BUTTON ===== */
#audioControls{
 position:absolute!important;
 z-index:31!important;
 display:block!important;
 padding:0!important;margin:0!important;
 background:transparent!important;border:0!important;
 width:42px!important;height:48px!important;
 top:10px!important;
 right:116px!important;
}
#audioToggle{
 width:42px!important;height:48px!important;
 min-width:42px!important;min-height:48px!important;
 padding:0!important;margin:0!important;
 border-radius:13px!important;
 display:grid!important;place-items:center!important;
 font-size:18px!important;line-height:1!important;
 box-sizing:border-box!important;
}
#audioPanel{display:none!important}

@media (orientation:landscape){
 #audioControls{
   top:16px!important;
   right:178px!important;
   height:64px!important;
 }
 #audioToggle{height:64px!important;min-height:64px!important}
}
@media (orientation:portrait){
 #audioControls{
   top:10px!important;
   right:116px!important;
   height:48px!important;
 }
 #audioToggle{height:48px!important;min-height:48px!important}
}

/* v10.14 canvas-integrated audio HUD */
#audioControls{display:none!important}

/* ===== v10.15 — PHASE 6A RANDOM BATTLE MATCHMAKING ===== */
.battleStart{
  width:100%;margin-top:8px;padding:12px 16px;border-radius:15px;
  border:1px solid rgba(255,205,65,.7);background:rgba(42,15,60,.86);
  color:#fff;font-weight:900;letter-spacing:.04em;font-size:15px;cursor:pointer;
}
.battleStart:not(:disabled):hover{background:rgba(65,24,88,.94)}
.battleMatchPanel{
  margin-top:10px;padding:12px 14px;border-radius:15px;
  border:1px solid rgba(255,205,65,.42);background:rgba(24,8,36,.88);
  text-align:center;
}
.battleMatchPanel[hidden]{display:none!important}
.battleMatchStatus{font-weight:900;color:#ffd96a;font-size:14px}
.battleMatchOpponent{margin-top:5px;color:#fff;font-weight:800;font-size:17px}
.battleCancelBtn{
  margin-top:9px;min-height:38px;padding:7px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:#fff;font-weight:800;cursor:pointer;
}

/* ===== v10.16 — PHASE 6B SYNCHRONIZED BATTLE START ===== */
.battleReadyState{margin-top:7px;color:#d9cce3;font-size:13px;font-weight:800}
.battleReadyBtn{
  margin-top:10px;min-height:42px;padding:8px 24px;border-radius:13px;
  border:1px solid rgba(255,213,72,.85);background:linear-gradient(180deg,#ffd85b,#e6a919);
  color:#31122d;font-weight:1000;font-size:15px;cursor:pointer;
  box-shadow:0 0 18px rgba(255,202,49,.18)
}
.battleReadyBtn:disabled{opacity:.55;cursor:not-allowed}
.battleCountdown{
  margin:10px auto 2px;font-size:42px;line-height:1;font-weight:1000;
  color:#ffe16e;text-shadow:0 0 18px rgba(255,209,52,.35)
}

/* ===== v10.16.1 — READY BUTTON MOBILE VISIBILITY HOTFIX =====
   Keep the matched battle card compact enough that READY/CANCEL are always visible. */
.battleMatchPanel{
  position:relative;
  z-index:8;
  overflow:visible;
}
.battleReadyBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:min(190px,78%);
  min-height:46px;
  margin:10px auto 4px;
}
.battleReadyBtn[hidden]{display:none!important}

@media (max-width:700px){
  .battleMatchPanel{
    padding:10px 10px 9px;
    margin-top:7px;
  }
  .battleMatchStatus{font-size:13px;line-height:1.15}
  .battleMatchOpponent{margin-top:4px;font-size:16px;line-height:1.15}
  .battleReadyState{margin-top:5px;font-size:12px;line-height:1.15}
  .battleReadyBtn{
    min-height:42px;
    margin-top:7px;
    padding:7px 18px;
    font-size:14px;
  }
  .battleCancelBtn{
    min-height:34px;
    margin-top:5px;
    padding:5px 13px;
    font-size:12px;
  }
}

/* ===== v10.16.2 — BATTLE LAYOUT ROOT FIX =====
   The battle controls were auto-placing inside the fixed-height portrait
   player grid. Put RANDOM BATTLE in an explicit row and show MATCH FOUND
   as a centered overlay card so READY/CANCEL can never be clipped. */

@media (orientation:portrait) and (max-width:900px){
 .playerZone{
   grid-template-rows:auto auto auto auto!important;
 }
 .bigStart{
   grid-column:2!important;
   grid-row:2!important;
   margin:2px 0!important;
   padding:8px 9px!important;
 }
 .battleStart{
   grid-column:2!important;
   grid-row:3!important;
   width:100%!important;
   min-width:0!important;
   margin:2px 0!important;
   padding:8px 8px!important;
   min-height:36px!important;
   font-size:12px!important;
   border-radius:12px!important;
   align-self:center!important;
 }
 .visualControlHint{
   grid-column:2!important;
   grid-row:4!important;
   align-self:start!important;
 }

 .battleMatchPanel:not([hidden]){
   display:block!important;
   position:fixed!important;
   z-index:10050!important;
   left:50%!important;
   top:50%!important;
   transform:translate(-50%,-50%)!important;
   width:min(86vw,360px)!important;
   max-height:min(70dvh,430px)!important;
   overflow:visible!important;
   box-sizing:border-box!important;
   margin:0!important;
   padding:18px 16px 14px!important;
   border:2px solid rgba(255,205,65,.72)!important;
   border-radius:20px!important;
   background:rgba(31,9,45,.98)!important;
   box-shadow:0 18px 60px rgba(0,0,0,.72),0 0 28px rgba(255,205,65,.15)!important;
 }
 .battleMatchStatus{font-size:17px!important;line-height:1.15!important}
 .battleMatchOpponent{margin-top:8px!important;font-size:20px!important;line-height:1.2!important}
 .battleReadyState{margin-top:10px!important;font-size:14px!important;line-height:1.25!important}
 .battleReadyBtn{
   display:flex!important;
   width:min(220px,90%)!important;
   min-height:48px!important;
   margin:14px auto 5px!important;
   padding:9px 18px!important;
   font-size:16px!important;
 }
 .battleReadyBtn[hidden]{display:none!important}
 .battleCancelBtn{
   display:block!important;
   min-height:38px!important;
   margin:7px auto 0!important;
   padding:6px 18px!important;
   font-size:12px!important;
 }
 .battleCountdown{font-size:48px!important;margin-top:13px!important}
}

/* ===== v10.16.4 — STRUCTURAL PLAYER CONTROLS FIX =====
   Stats and action controls now share one normal-flow container. This removes
   grid overlap rather than compensating with button offsets. */
.playerProfileArea{box-sizing:border-box!important}
.playerActions{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:8px}
.playerActions .bigStart,.playerActions .battleStart{position:relative!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box!important}
.playerActions .visualControlHint{position:relative!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;margin:0!important;text-align:center!important}

@media (orientation:portrait) and (max-width:900px){
 .playerZone{grid-template-rows:1fr!important;align-content:center!important}
 .playerProfileArea{
   grid-column:2!important;grid-row:1!important;
   align-self:center!important;width:100%!important;margin:0!important;
   display:block!important
 }
 .playerActions{gap:5px!important;margin-top:7px!important}
 .playerActions .bigStart{min-height:44px!important;padding:9px 8px!important;font-size:16px!important}
 .playerActions .battleStart{min-height:36px!important;padding:7px 8px!important;font-size:12px!important}
 .playerActions .visualControlHint{display:block!important;padding:1px!important;font-size:7px!important}
}

@media (orientation:landscape) and (min-width:761px){
 .playerZone{grid-template-rows:1fr!important}
 .playerProfileArea{
   grid-column:2!important;grid-row:1!important;
   align-self:center!important;margin:0 auto!important;
   width:100%!important;max-width:320px!important
 }
 .playerActions{margin-top:10px!important;gap:7px!important}
}

.lobbyHeader h1 small{display:block;font-size:10px;letter-spacing:2px;margin-top:7px;color:#f3b65e;font-weight:800}.rewardStrip b{font-size:10px!important}