/* Floating game HUD: the original plum glass and gold rewards. */
:root{--bar-height:92px;--hud-shift:51px;--hud-edge:34px;--hud-plum:#533770;--hud-line:#d7b8f16b;--hud-gold:#ffdf8a}
.topbar{position:fixed;top:20px;left:var(--hud-edge);right:var(--hud-edge);height:64px;padding:0;gap:16px;z-index:5;background:none;border:0;justify-content:flex-start}
.hud-home{height:68px;display:flex;align-items:center;gap:22px;padding:0 20px 0 17px;border:2px solid var(--hud-line);border-radius:21px;background:linear-gradient(135deg,#78539beF,#402852f5);box-shadow:inset 0 2px 0 #ffffff24,0 5px 0 #3c254d,0 10px 22px #51316c29;flex-shrink:0}
.topbar .brand{gap:10px;color:#fff6ff;flex-shrink:0}
.ribbon-stat{display:flex;gap:10px;align-items:center;min-width:0;position:relative}
.ribbon-stat>div{min-width:0}
.ribbon-stat small{display:block;color:#d2bce6;font-size:8px;line-height:1.4;font-weight:900;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.ribbon-stat small span{font-size:6px;letter-spacing:.5px;opacity:.7;margin-left:4px}
.ribbon-stat strong{display:block;font:500 25px/1.05 Fredoka,sans-serif;letter-spacing:.2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff6ff;margin-top:3px}
.pool-stat{padding-left:21px;border-left:1px solid #d7b8f138;gap:10px;min-width:180px}
.pool-stat small{color:#d2efa9}
.pool-stat strong{font-size:30px;color:var(--hud-gold);text-shadow:0 2px 0 #523528,0 0 18px #ffd16622}
.pool-coin{width:42px;height:42px;flex-shrink:0;border-radius:50%;filter:drop-shadow(0 3px 0 #241e4055) drop-shadow(0 0 8px #c8f16925);transform:rotate(-12deg)}
.pool-spark{position:absolute;right:-9px;top:0;color:#ffe6a0;font-size:13px;transform:rotate(10deg)}
.topbar nav{display:flex;align-items:center;gap:10px;height:auto;margin:0 0 0 auto}
.topbar nav .hud-button,.topbar .icon-button,.topbar .auto-toggle{height:45px;border-radius:14px;border:2px solid #d4b5f065;background:linear-gradient(#8763a8,#664581);color:#f7eaff;box-shadow:inset 0 2px 0 #ffffff23,0 4px 0 #49305e,0 8px 15px #56327217;opacity:1;display:flex;align-items:center;justify-content:center;gap:7px;position:relative;padding:0 12px;transition:transform .16s,box-shadow .16s,filter .16s}
.topbar nav .hud-button:hover,.topbar .icon-button:hover,.topbar .auto-toggle:hover{transform:translateY(-2px);filter:brightness(1.1)}
.topbar nav .hud-button:hover>svg{animation:hud-icon-hop .35s ease-out}
@keyframes hud-icon-hop{0%,100%{transform:rotate(0)}35%{transform:translateY(-3px) rotate(-9deg)}70%{transform:rotate(5deg)}}
.topbar nav .hud-button:active,.topbar .icon-button:active,.topbar .auto-toggle:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #ffffff18,0 1px 0 #49305e}
.topbar nav .hud-button span{font:500 15px Fredoka,sans-serif;letter-spacing:.15px;margin:0}
.topbar .hud-button svg{width:29px;height:29px;flex-shrink:0;filter:drop-shadow(0 2px 0 #3b225330)}
.topbar nav .leaderboard-button{background:linear-gradient(#ffe9a6,#f6cb70);border-color:#fff2c4;color:#684628;box-shadow:inset 0 2px 0 #fff7d8,0 4px 0 #bd8a49,0 8px 18px #65402022}
.topbar nav .leaderboard-button:active{box-shadow:inset 0 2px 0 #fff7d8,0 1px 0 #bd8a49}
.topbar nav .help-button{width:40px;padding:0;border-radius:50%}
.topbar nav #how-button:before{display:none}
.topbar .help-button svg{width:26px;height:26px}
.topbar .top-actions{gap:8px;flex-shrink:0}
.topbar .auto-toggle{font-size:7px;letter-spacing:.7px;gap:0;padding:0 11px;background:linear-gradient(#684b87,#493160);border-color:#bc9cd24d;color:#e8d7f5}
.topbar .auto-toggle i{width:6px;height:6px;background:#b6edb0;box-shadow:0 0 9px #b6edb04d}
.topbar .auto-toggle[aria-pressed=false] i{background:#b8a3c8;box-shadow:none}
.auto-icon{width:27px;height:27px;display:none}
.auto-play{display:none}.auto-toggle[aria-pressed=false] .auto-pause{display:none}.auto-toggle[aria-pressed=false] .auto-play{display:block}
.topbar .icon-button{width:40px;padding:7px;border-radius:50%;color:#ead5ff}
.topbar .icon-button>svg{width:26px;height:26px;overflow:visible}
.topbar .sound-slash{position:absolute;left:50%;top:50%;width:24px;height:2px;border-radius:2px;background:#ffbbd3;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 1px 0 #604579}
.stats-ribbon{position:fixed;top:101px;left:var(--hud-edge);right:var(--hud-edge);height:52px;z-index:4;display:flex;align-items:stretch;gap:12px;padding:0;color:#fff6ff;pointer-events:none}
.stats-ribbon .ribbon-stat{height:52px;padding:7px 15px 7px 10px;min-width:185px;border:1.5px solid #d7b8f16b;border-radius:15px;background:linear-gradient(120deg,#725191ee,#48305cf5);box-shadow:inset 0 1px 0 #ffffff20,0 4px 0 #472d596b,0 7px 16px #66427a15;pointer-events:auto}
.stat-icon{width:36px;height:36px;flex-shrink:0;filter:drop-shadow(0 2px 0 #2f1d4628)}
.stats-ribbon .prize-stat{background:linear-gradient(115deg,#fff1bf,#f7d581);border-color:#fff6d6;box-shadow:inset 0 1px 0 #fff,0 4px 0 #c29a587a,0 7px 16px #66427a15;min-width:232px}
.prize-stat small{color:#86603b}.prize-stat strong{color:#63422d;text-shadow:0 1px #fff5c5}
.prize-caption{font-size:6px;font-weight:900;letter-spacing:.7px;color:#9c764a;line-height:1.5;max-width:52px;margin-left:auto;padding-left:12px}
.stats-ribbon .burn-stat{border-color:#f4b18a80;background:linear-gradient(110deg,#875376f0,#573252f5);min-width:212px}
.burn-stat small{color:#ffd0bc}.burn-stat strong{color:#ffdc9b}.burn-stat .stat-icon{transform:rotate(-7deg);filter:drop-shadow(0 0 6px #ff9d4326)}
.stats-context{display:flex;flex-direction:column;justify-content:center;gap:3px;margin-left:auto;min-width:0;text-align:right;align-items:flex-end;pointer-events:auto}
.stats-context>span:first-child{font-size:6px;font-weight:900;letter-spacing:.7px;color:#765689;background:#f6effcbf;border:1px solid #fff7;border-radius:6px;padding:5px 7px}
.stats-context #stats-token-market,.stats-context a{color:#715587;font-size:8px;font-weight:800;text-decoration:none}
.stats-context a{text-decoration:underline;text-underline-offset:3px}
body[data-stage="2"]:not([data-phase="lobby"]) .stats-context a,body[data-stage="2"]:not([data-phase="lobby"]) #stats-token-market{color:#edd1ff}
.round-card{top:calc(119px + var(--hud-shift))}.headline{top:calc(121px + var(--hud-shift))}.feed-card{top:calc(126px + var(--hud-shift))}.arena-label{top:calc(345px + var(--hud-shift))}.arena-toast{top:calc(228px + var(--hud-shift))}.burn-news{top:calc(119px + var(--hud-shift))}body[data-phase=lobby][data-burn-news=yes] .feed-card{top:calc(345px + var(--hud-shift))}
.loading,.winner-overlay,.qualification-overlay{inset:calc(var(--bar-height) + var(--hud-shift) + 18px) 0 0}.vault-preview{display:none}
@media(min-width:1600px){:root{--hud-edge:55px}.round-card,.headline{top:calc(130px + var(--hud-shift))}.feed-card{top:calc(137px + var(--hud-shift))}}
@media(max-width:1240px){.hud-home{gap:15px;padding:0 15px}.pool-stat{padding-left:15px;min-width:169px}.pool-stat strong{font-size:27px}.pool-coin{width:37px;height:37px}.topbar{gap:12px}.topbar nav{gap:8px}.topbar nav .hud-button span{font-size:13px}.topbar nav .hud-button{padding:0 9px}.topbar nav .help-button{padding:0}.topbar .auto-toggle>span,.topbar .auto-toggle>i{display:none}.topbar .auto-toggle{width:40px;padding:0;border-radius:50%}.auto-icon{display:block}}
@media(max-width:1000px){:root{--hud-edge:22px;--bar-height:76px;--hud-shift:70px}.topbar{top:18px;gap:10px}.hud-home{height:63px}.topbar nav{gap:8px}.topbar nav .hud-button{width:45px;padding:0}.topbar nav .hud-button span{display:none}.topbar nav .help-button{width:37px}.topbar .top-actions{gap:7px}.topbar .icon-button,.topbar .auto-toggle{width:37px}.stats-ribbon{top:100px;gap:9px}.stats-ribbon .ribbon-stat{min-width:0;flex:1;padding-right:10px;gap:7px}.prize-caption{display:none}.stats-ribbon .ribbon-stat strong{font-size:23px}.stats-context{flex:0 1 152px}.stats-context>span:first-child{font-size:5px;letter-spacing:.5px}.round-card{top:calc(100px + var(--hud-shift))}.headline{top:calc(110px + var(--hud-shift))}.arena-label{top:calc(320px + var(--hud-shift))}.arena-toast{top:calc(205px + var(--hud-shift))}.burn-news{top:calc(310px + var(--hud-shift))}}
@media(min-width:641px) and (max-width:760px){.hud-home{padding:0 12px;gap:12px}.topbar .brand{gap:7px}.pool-stat{padding-left:12px;min-width:148px}.pool-stat strong{font-size:25px}.pool-coin{width:32px;height:32px}.topbar nav{gap:5px}.topbar nav .hud-button{width:38px;height:40px}.topbar nav .help-button{width:32px}.topbar .icon-button,.topbar .auto-toggle{height:40px;width:32px}.topbar .top-actions{gap:5px}.stat-icon{width:29px;height:29px}.stats-ribbon .ribbon-stat strong{font-size:21px}.ribbon-stat small{font-size:7px}.ribbon-stat small span{font-size:5px;margin-left:2px}.stats-context{flex-basis:132px}.stats-context>span:first-child{font-size:4.5px}}
@media(max-width:640px){
 :root{--hud-edge:12px;--bar-height:66px;--hud-shift:124px}
 .topbar{top:10px;height:44px;gap:8px;z-index:5;justify-content:space-between}
 .hud-home{display:contents}
 .topbar .brand{gap:7px;color:#654580}
 body[data-stage="2"]:not([data-phase="lobby"]) .brand{color:#fff3ff}
 .topbar nav{position:static;display:flex;height:auto;gap:6px;margin:0 0 0 auto;background:none;border:0}
 .topbar nav .hud-button{width:35px;height:36px;border-radius:11px;padding:0}.topbar nav .hud-button svg{width:26px;height:26px}.topbar nav #how-button{width:29px;height:34px;border-radius:50%;background:linear-gradient(#8763a8,#664581)}.topbar nav #how-button svg{width:22px;height:22px}
 .topbar .top-actions{gap:6px}.topbar .icon-button,.topbar .auto-toggle{width:29px;height:34px;padding:0}.topbar .icon-button>svg,.topbar .auto-icon{width:22px;height:22px}
 .pool-stat{position:fixed;top:69px;left:var(--hud-edge);width:calc(50% - 16px);height:54px;padding:7px 10px;gap:8px;border:1.5px solid #d7b8f180;border-radius:14px;background:linear-gradient(120deg,#77519ceF,#48305cf5);box-shadow:inset 0 1px 0 #ffffff25,0 4px 0 #472d596b,0 7px 16px #66427a15;min-width:0}
 .pool-coin{width:34px;height:34px}.pool-spark{right:8px;top:5px;font-size:10px}.ribbon-stat small{font-size:7px;letter-spacing:.35px}.ribbon-stat small span{font-size:5px;margin-left:3px}.pool-stat strong{font-size:24px}
 .stats-ribbon{top:69px;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:54px 51px auto;gap:9px 8px;align-items:stretch}
 .stats-ribbon .ribbon-stat{height:auto;min-width:0;border-radius:14px;padding:7px 10px;gap:8px}.stats-ribbon .prize-stat{grid-column:2}.stats-ribbon .reserve-stat{grid-column:1}.stat-icon{width:31px;height:31px}.stats-ribbon .ribbon-stat strong{font-size:22px}.stats-ribbon .burn-stat strong{font-size:21px}
 .stats-context{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 7px;margin:0}.stats-context>span:first-child{font-size:5px;letter-spacing:.6px;padding:2px 5px}.stats-context #stats-token-market,.stats-context a{font-size:6px}
 .round-card{top:calc(84px + var(--hud-shift))}.headline{top:calc(90px + var(--hud-shift))}.arena-label{top:calc(242px + var(--hud-shift))}.arena-toast{top:calc(278px + var(--hud-shift))}.burn-news{top:calc(230px + var(--hud-shift))}
}
@media(max-width:370px){.topbar{gap:5px}.topbar nav{gap:4px}.topbar .top-actions{gap:4px}.topbar nav .hud-button{width:32px}.topbar nav #how-button{width:27px}.topbar .icon-button,.topbar .auto-toggle{width:27px}.pool-stat{gap:6px}.pool-coin{width:29px;height:29px}.pool-stat strong{font-size:22px}.stats-ribbon .ribbon-stat{gap:6px;padding:7px 8px}.stats-ribbon .ribbon-stat strong{font-size:20px}.stats-ribbon .burn-stat strong{font-size:19px}.stat-icon{width:27px;height:27px}}
@media(max-height:650px) and (min-width:641px){:root{--bar-height:64px;--hud-shift:73px}.topbar{top:10px;height:56px}.hud-home{height:56px}.stats-ribbon{top:80px}.round-card,.headline{top:calc(84px + var(--hud-shift))}.feed-card{top:calc(90px + var(--hud-shift))}.arena-label{top:calc(275px + var(--hud-shift))}.arena-toast{top:calc(183px + var(--hud-shift))}}

/* Winners and payouts sheet. */
#stats-dialog{width:800px;max-width:94vw;max-height:88vh;padding:30px 34px;overflow:hidden}#stats-dialog[open]{display:flex;flex-direction:column}#stats-dialog> :not(.score-list){flex-shrink:0}#stats-dialog h2{font-size:34px;margin:17px 0 10px}#stats-dialog .mini-tag{align-self:flex-start;font-size:7px}#stats-subtitle{margin:0 0 17px;font-size:11px;line-height:1.6;padding-right:15px}.stats-tabs{display:flex;gap:9px;padding-bottom:18px}.stats-tabs button{padding:10px 18px;border-radius:11px;background:#f0e6f6;font-size:12px;font-weight:900;color:#91739c}.stats-tabs button.selected{background:#ffe7a8;color:#866735;box-shadow:0 3px 0 #dec08a44}.stats-tools{display:flex;align-items:center;gap:18px}.stats-tools .search-label{flex:1;margin:0}.stats-tools #stats-filter{display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:10px;font-weight:800;color:#846992}.stats-tools input[type=checkbox]{accent-color:#b581a7}.stats-status-line{display:flex;align-items:center;gap:10px;min-height:35px}.stats-status-line #stats-status{font-size:9px;margin:10px 0;color:#997fa3}.stats-status-line button{font-size:10px;border-radius:7px;padding:5px 10px;background:#eee2f5}
.score-list{margin:0;padding:0 4px 3px 0;list-style:none;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:8px}.score-row{display:flex;align-items:center;gap:13px;border:1px solid #eadfed;background:#f4edf7;border-radius:14px;padding:12px 14px;min-height:71px}.score-row.podium{background:linear-gradient(100deg,#fff4d8,#fbf0f4);border-color:#f0dfb5}.score-rank{font:500 19px Fredoka,sans-serif;color:#bb91ae;min-width:27px}.podium .score-rank{color:#c8a055}.score-avatar.mini-bean{width:34px;height:41px;transform:rotate(-5deg);margin:0 3px}.score-avatar.mini-bean:after{width:9px;height:7px;box-shadow:19px 0 var(--bean-tint,#ae90c7)}.score-who{min-width:0;flex:1}.score-who>strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#70577f}.score-who>small{display:block;font-size:9px;color:#ab91b5;margin-top:4px}.score-result{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.score-result>b{font:500 22px Fredoka,sans-serif;color:#9d719a}.score-result:has(.payment-chip)>b{font-size:15px;color:#846c92}.score-result>small{font-size:9px;color:#a78caf}.score-follow{padding:7px 11px;font-size:9px;font-weight:900;border-radius:9px;background:#fffaf3;color:#a17da4;margin-left:5px;border:1px solid #eadbe8}.payment-chip{font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;border-radius:5px;padding:4px 7px;background:#eee0f5;color:#a080b2}.payment-chip.paid{background:#d6ecdf;color:#508969}.payment-chip.pending,.payment-chip.review{background:#ffe8bc;color:#ad803f}.payment-chip.forfeit,.payment-chip.off{background:#eae4ec;color:#a195a7}.score-tx{font-size:9px;color:#9b789d;text-decoration:none}.score-tx:hover{text-decoration:underline}.stats-empty{padding:28px 18px;text-align:center;background:#f2eaf6;border-radius:14px;font-size:12px!important;margin:0!important}.stats-history-note{font-size:8px!important;line-height:1.5;margin:14px 0 0!important;padding-top:12px;border-top:1px solid #ece1ed;color:#a188aa!important}

@media(max-width:640px){#stats-dialog{padding:24px 16px;max-height:91vh}#stats-dialog h2{font-size:27px;padding-right:12px}#stats-subtitle{font-size:10px;margin-bottom:13px}.stats-tabs{gap:7px;padding-bottom:14px}.stats-tabs button{font-size:10px;padding:9px 12px}.stats-tools{gap:8px}.stats-tools .search-label{padding:7px 10px}.stats-tools .search-label input{font-size:11px}.stats-tools #stats-filter{font-size:8px}.score-row{gap:8px;padding:11px 9px;min-height:68px}.score-rank{font-size:16px;min-width:19px}.score-avatar.mini-bean{width:27px;height:33px;margin:0}.score-avatar.mini-bean:after{display:none}.score-who>strong{font-size:10px}.score-who>small{font-size:7px}.score-result>b{font-size:20px}.score-result:has(.payment-chip)>b{font-size:12px}.score-follow{font-size:7px;margin-left:0;padding:6px}.payment-chip{font-size:6px;padding:3px 5px}.score-tx{font-size:8px}.stats-status-line #stats-status{font-size:8px}.stats-history-note{font-size:7px!important}}


/* Brand mark: the owner's logo in the top-left panel. */
.topbar .brand-logo{display:block;width:84px;height:84px;margin:-9px -6px -9px -8px;filter:drop-shadow(0 3px 0 #2f1d4666);transition:transform .18s}
.topbar .brand:hover .brand-logo{transform:rotate(-4deg) scale(1.04)}
@media(max-width:1240px){.topbar .brand-logo{width:78px;height:78px}}
@media(max-width:760px){.topbar .brand-logo{width:70px;height:70px}}
@media(max-width:640px){.topbar .brand-logo{width:58px;height:58px;margin:-8px 0 -6px -4px;filter:drop-shadow(0 2px 0 #7a5d9a40)}}

/* Title card: the lobby and stage headline on its own card, never over the arena or the side panels.
   Tall screens: under the stats ribbon, between the round card and the feed. Shorter desktop screens: in the top bar,
   between the brand panel and the buttons (the arena starts too high for a card under the ribbon). Phones: beside the round card. */
.headline{--title-size:29px;--subtitle-size:12px;top:calc(119px + var(--hud-shift));left:50%;transform:translateX(-50%);width:max-content;max-width:min(640px,calc(100vw - 2*var(--hud-edge) - 472px));
  padding:14px 28px 9px;text-align:center;background:linear-gradient(155deg,#fffdf9,#fff8ec);border:2px solid #fff;border-radius:20px;
  box-shadow:0 5px 0 #9876b728,0 14px 34px #65487917,inset 0 1px #fff;z-index:2}
.headline .mini-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:7px;letter-spacing:1.6px;padding:4px 10px;
  background:#ffe99d;border:2px solid #fff;border-radius:8px;color:#715339;box-shadow:0 2px 0 #d9bd6540}
.headline h1,body[data-phase=playing] .headline h1,body[data-stage="2"]:not([data-phase="lobby"]) .headline h1{font-size:var(--title-size);line-height:1.05;letter-spacing:-.8px;margin:0 0 4px;max-width:none;color:#655080;text-shadow:none;text-wrap:balance}
.headline p,body[data-phase=playing] .headline p,body[data-stage="2"]:not([data-phase="lobby"]) .headline p{font-size:var(--subtitle-size);line-height:1.45;margin:0;max-width:none;color:#8e79a7}
body[data-stage="2"] .headline .mini-tag{color:#715339}
@media(min-width:1600px){.headline{--title-size:32px;top:calc(130px + var(--hud-shift))}}
@media(min-width:1001px) and (max-height:1009px){
  .headline{--title-size:23px;--subtitle-size:10.5px;top:18px;left:calc(var(--hud-edge) + 325px);right:calc(var(--hud-edge) + 401px);width:fit-content;max-width:none;margin:0 auto;transform:none;
    min-height:68px;display:flex;flex-direction:column;justify-content:center;padding:6px 22px 5px;border-radius:21px}
  .headline .mini-tag{top:-8px}
  .headline h1,body[data-phase=playing] .headline h1,body[data-stage="2"]:not([data-phase="lobby"]) .headline h1{margin-bottom:2px}.headline p,body[data-phase=playing] .headline p,body[data-stage="2"]:not([data-phase="lobby"]) .headline p{line-height:1.3}
}
@media(min-width:1600px) and (max-height:999px){.headline{left:calc(var(--hud-edge) + 325px)}}
@media(min-width:1001px) and (max-width:1240px) and (max-height:1009px){.headline{--title-size:19px;--subtitle-size:10px;left:calc(var(--hud-edge) + 294px);right:calc(var(--hud-edge) + 362px);padding:6px 16px 5px}}
@media(min-width:1001px) and (max-height:650px){.headline{--title-size:20px;--subtitle-size:9.5px;top:10px;min-height:56px;padding:5px 18px 4px}}
@media(max-width:1000px){.headline{--title-size:24px;--subtitle-size:10px;left:50%;max-width:calc(100vw - 2*var(--hud-edge) - 392px);padding:13px 18px 9px}}
@media(max-height:650px) and (min-width:641px) and (max-width:1000px){.headline{top:calc(92px + var(--hud-shift))}}
/* 800-1000 wide, except tall portrait tablets: under the ribbon the card covers the arena rim, so it goes into the top bar as on shorter desktops. */
@media(min-width:800px) and (max-width:1000px) and (min-aspect-ratio:4/5){
  .headline{--title-size:17px;--subtitle-size:9.5px;top:18px;left:calc(var(--hud-edge) + 294px);right:calc(var(--hud-edge) + 202px);width:fit-content;max-width:none;margin:0 auto;transform:none;
    min-height:63px;display:flex;flex-direction:column;justify-content:center;padding:11px 14px 5px;border-radius:21px}
  .headline .mini-tag{top:-8px}
  .headline h1,body[data-phase=playing] .headline h1,body[data-stage="2"]:not([data-phase="lobby"]) .headline h1{margin-bottom:2px}.headline p,body[data-phase=playing] .headline p,body[data-stage="2"]:not([data-phase="lobby"]) .headline p{line-height:1.3}
}
@media(min-width:800px) and (max-width:1000px) and (min-aspect-ratio:4/5) and (max-height:650px){.headline{--title-size:16px;--subtitle-size:9px;top:10px;min-height:56px;padding:11px 12px 4px}}
@media(max-width:640px){
  .headline{--title-size:21px;--subtitle-size:9px;top:calc(84px + var(--hud-shift));left:154px;right:var(--hud-edge);transform:none;width:auto;max-width:none;padding:12px 12px 8px;text-align:left;border-radius:14px}
  .headline .mini-tag{top:-7px;left:12px;transform:none;font-size:5px;letter-spacing:1px;padding:3px 6px;border-radius:6px}
  .headline h1,body[data-phase=playing] .headline h1,body[data-stage="2"]:not([data-phase="lobby"]) .headline h1{line-height:1.02;letter-spacing:-.5px;margin-bottom:2px}.headline p,body[data-phase=playing] .headline p,body[data-stage="2"]:not([data-phase="lobby"]) .headline p{line-height:1.3}
}

/* Zoom: +, - and reset beside the highlight button; the arena itself takes wheel, pinch and drag. */
#world{touch-action:none}
body[data-zoomed=yes] #world{cursor:grab}
#world.panning{cursor:grabbing}
.zoom-controls{display:flex;gap:2px;padding-right:4px;margin-right:1px;border-right:1px solid #b6a1cc40}
.camera-controls .zoom-button{width:33px;height:33px;padding:0;display:grid;place-items:center;border-radius:8px;color:#8a70a0}
.zoom-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.camera-controls .zoom-button:hover{background:#fffdf8;color:#705685}
.camera-controls .zoom-button[aria-disabled=true]{opacity:.5;pointer-events:none}
.camera-controls #highlight-button{color:#76608d}
body[data-stage="2"] .camera-controls .zoom-button{color:#705685}
body[data-stage="2"] .camera-controls{background:#fff9eff0}
@media(max-width:640px){.camera-controls .zoom-button{width:29px;height:29px}.zoom-button svg{width:15px;height:15px}.camera-controls #highlight-button>span{display:none}.camera-controls{bottom:168px}}
/* Zoomed in, the arena fills the screen behind the HUD: the bare labels get a backing (a spread shadow, so nothing moves). */
body[data-zoomed=yes] :is(.arena-label,.follow-card,.feed-card,.camera-controls>span,.ready-caption,#play-caption,footer>span){--backing:#fffaf2e6;background:var(--backing);box-shadow:0 0 0 9px var(--backing);border-radius:5px}
body[data-zoomed=yes] :is(.camera-controls>span,.ready-caption,#play-caption,footer>span){box-shadow:0 0 0 4px var(--backing)}
body[data-zoomed=yes] .camera-controls{background:#fffaf2e6}
body[data-zoomed=yes][data-stage="2"]:not([data-phase="lobby"]) :is(.arena-label,.follow-card,.feed-card,.camera-controls>span,.ready-caption,#play-caption,footer>span){--backing:#3b2438e6}

/* Results podium: 1st in the middle with the crown, 2nd and 3rd at its sides. */
.winner-card .podium{position:relative;display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:end;gap:8px;width:min(400px,100%);height:212px;margin:-8px auto 16px}
#podium-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.podium-spot{display:flex;flex-direction:column;align-items:center;min-width:0}
.podium-spot.empty{visibility:hidden}
.podium-guy{display:flex;justify-content:center;margin-bottom:8px}
.podium[data-mode="3d"] .podium-guy{display:none}
/* 2D fallback: the crown over the winner (the 3D podium draws its own). */
.podium .winner-crown{font-size:38px;margin-bottom:-2px}.podium[data-mode="3d"] .winner-crown{display:none}
.podium-step{width:100%;display:flex;justify-content:center;padding-top:14px;border-radius:14px 14px 7px 7px;font:600 25px/1 Fredoka,sans-serif}
.podium-step[data-place="1"]{height:80px;background:linear-gradient(#ffe7a0,#f4c565);color:#8a5d22;box-shadow:inset 0 9px 0 #fff3c4,inset 0 -3px 0 #e6b04f,0 4px 0 #cf9d4f}
.podium-step[data-place="2"]{height:58px;background:linear-gradient(#f1eafb,#d8cbed);color:#7a5e98;box-shadow:inset 0 9px 0 #fbf8ff,inset 0 -3px 0 #c8b7e2,0 4px 0 #b9a5d6}
.podium-step[data-place="3"]{height:44px;background:linear-gradient(#ffe5d3,#f3b996);color:#9a5a39;box-shadow:inset 0 9px 0 #fff3ea,inset 0 -3px 0 #e8a47e,0 4px 0 #d49473}
.podium-handle{margin-top:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:900;color:#765a88}
#podium-1 .podium-handle{color:#c75a91;font-size:12px}
.winner-card #next-round{display:flex;align-items:center;justify-content:center;gap:9px;font:600 15px/1.2 Fredoka,sans-serif;color:#6e5387;font-variant-numeric:tabular-nums;padding:11px 14px;margin:14px 0 4px}
.winner-card #next-round:before{content:'';flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#77bbaa;box-shadow:0 0 0 4px #77bbaa33;animation:next-lobby-dot 1.1s ease-in-out infinite alternate}
@keyframes next-lobby-dot{to{box-shadow:0 0 0 7px #77bbaa10}}
@media(max-width:640px){
  .winner-card .podium{height:176px;gap:6px;margin:-4px auto 10px}
  .podium-step{padding-top:11px;font-size:21px}
  .podium-step[data-place="1"]{height:64px}.podium-step[data-place="2"]{height:47px}.podium-step[data-place="3"]{height:36px}
  .podium-handle{font-size:10px;margin-top:7px}#podium-1 .podium-handle{font-size:11px}.podium .winner-crown{font-size:30px}
  .winner-card #next-round{font-size:13px;padding:9px 12px}
}

/* Payout rows: the receiving wallet (explorer address page) and the payment transaction on their own line. */
.score-row{flex-wrap:wrap;flex-shrink:0}
.score-links{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-3px 0 0 53px}
.score-links>*{font-size:10px;font-weight:900;line-height:1;border-radius:7px;padding:6px 9px;text-decoration:none;white-space:nowrap}
.score-links .score-wallet{background:#fffaf3;border:1px solid #e6d5e6;color:#72568a;font-variant-numeric:tabular-nums}
.score-links .score-tx{background:#d6ecdf;border:1px solid #bddfca;color:#3f7a5a;font-size:10px}
.score-links a:hover{text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.score-links{margin-left:35px;gap:5px}.score-links>*{font-size:9px;padding:5px 7px}.score-links .score-tx{font-size:9px}}

/* Phones: the survivors grid shrinks so the break countdown under it always shows inside the card. */
@media(max-width:640px){.qualification-card{display:flex;flex-direction:column;align-items:center}#qualified-grid{min-height:0;align-self:stretch}.qualification-card .transition-track{align-self:stretch}}

/* Short phones: the arena starts higher than the phone HUD ends. The reward pool goes back into the top bar (as on desktop), the other three
   stats share one row, the round and title cards move up, and during the race the favourite and camera panels sit in the space under the arena. */
@media(max-width:640px) and (max-height:760px){
  :root{--hud-shift:44px}
  .pool-stat{top:10px;left:74px;width:calc(100% - 240px);height:44px;padding:5px 8px;gap:6px}.pool-coin{width:24px;height:24px}.pool-spark{right:4px}.pool-stat strong{font-size:18px}
  .stats-ribbon{top:62px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:44px auto;gap:5px 6px}
  .stats-ribbon .prize-stat,.stats-ribbon .reserve-stat,.stats-ribbon .burn-stat{grid-column:auto;grid-row:1}
  .stats-ribbon .ribbon-stat{padding:5px 7px;gap:4px}.stat-icon{width:20px;height:20px}.stats-ribbon .ribbon-stat strong,.stats-ribbon .burn-stat strong{font-size:16px}
  .ribbon-stat small{font-size:6px;letter-spacing:0}.ribbon-stat small span{font-size:4.5px;letter-spacing:.2px;margin-left:2px}
  .remaining{margin:5px 0}.stage-progress{margin-top:6px}
  body:not([data-phase=lobby]):not([data-phase=countdown]) :is(.follow-card,.camera-controls){bottom:80px}
}
@media(max-width:370px) and (max-height:760px){.pool-stat{width:calc(100% - 225px)}}

/* 641-870 wide and taller: the centred "Open fomo" button is wider than the gap between the favourite and camera panels, so the panels sit under it. */
@media(min-width:641px) and (max-width:870px) and (min-height:651px){.follow-card,.camera-controls{bottom:48px}}