@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2')}

:root{color-scheme:dark;--bg:#10151f;--paper:#191f2a;--ink:#f2f2eb;--muted:#8791a1;--line:#2a3240;--accent:#f3b45e;--mint:#8ecfc2;--sans:'DM Sans','Segoe UI',sans-serif;--display:'Manrope',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{background:#090d14;color:var(--ink);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0;transition:background .16s,transform .16s,border-color .16s}button:disabled{cursor:default}button:active:not(:disabled){transform:scale(.98)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}svg{display:block}[data-icon] svg{width:19px;height:19px}button svg{width:18px;height:18px}[hidden]{display:none!important}.app-shell{display:flex;flex-direction:column;width:100%;max-width:500px;height:100dvh;min-height:600px;margin:0 auto;background:var(--bg);overflow:hidden;border-inline:1px solid #202735;box-shadow:0 0 100px #0005}.topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:17px 21px 14px;padding-top:max(17px,env(safe-area-inset-top));gap:15px}.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;letter-spacing:-1px;font-size:26px;line-height:1}.brand small{display:block;font-family:var(--sans);font-weight:500;font-size:7px;letter-spacing:2.9px;color:#8690a1;margin-top:7px}.brand-mark{height:32px;width:30px;display:block;position:relative;transform:rotate(-34deg);flex-shrink:0}.brand-mark i{position:absolute;display:block;background:var(--accent);width:11px;height:11px;border-radius:50%;left:1px;top:2px}.brand-mark i:nth-child(2){left:17px;top:20px}.brand-mark i:nth-child(3){width:31px;height:5px;left:0;top:15px;border-radius:0}.topbar-right{display:flex;align-items:center;gap:5px}.coin-balance{display:flex;align-items:center;gap:6px;border:1px solid #39372f;background:#24241f;padding:7px 10px;border-radius:8px;color:#f3c97b;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;margin-right:4px}.coin-balance svg{width:16px;height:16px}.icon-button{display:grid;place-items:center;width:36px;height:36px;background:none;border-radius:9px;color:#8e98a9;flex-shrink:0}.icon-button:hover{background:#232b38;color:#e3e9ef}.icon-button svg{width:18px;height:18px}.sound-label{display:none}main{min-height:0;flex:1;overflow:hidden;padding:0 17px 12px}#arena-view{height:100%;display:flex;flex-direction:column}.game-heading{display:flex;align-items:center;justify-content:space-between;padding:7px 2px 13px;flex-shrink:0;gap:10px}.game-heading>div{display:flex;align-items:center;gap:7px}.game-heading h1{font-size:9px;font-weight:700;letter-spacing:1.2px;margin:0}.mode-dot{width:5px;height:5px;background:var(--mint);border-radius:50%;box-shadow:0 0 8px #8ecfc244}.mode-tag{font-size:7px;letter-spacing:.6px;border:1px solid #2f3945;padding:3px 5px;border-radius:4px;color:#7f8b9a}.text-button{display:flex;align-items:center;gap:6px;padding:5px 0;font-size:10px;background:none;color:var(--muted)}.text-button svg{width:13px;height:13px}.text-button:hover{color:var(--accent)}.game-heading .text-button{font-size:9px}.play-layout{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}.arena-panel{border:1px solid #34434b;border-radius:15px;background:#18232c;display:flex;flex-direction:column;min-height:200px;overflow:hidden;flex:1;box-shadow:0 6px 24px #0002}.arena-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px 0;color:#748b94;font-size:7px;letter-spacing:1.1px;font-weight:600;flex-shrink:0}.arena-name>span{color:#4e6873;margin-left:3px}.round-label{display:flex;align-items:center;gap:5px;font-size:7px;letter-spacing:.8px;color:#97a6ac}.round-label svg{width:10px;height:10px}.battle-hud{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 16px 12px;flex-shrink:0}.fighter-hud{flex:1;min-width:0}.fighter-title{display:flex;align-items:center;justify-content:space-between;gap:5px}.fighter-title strong{font-size:10px;letter-spacing:.8px;font-weight:650}.fighter-title>span{font-size:6px;letter-spacing:.8px;color:#89b8ad}.opponent-hud .fighter-title>span{color:#c59687}.health-track{height:5px;background:#2d3b43;border-radius:5px;overflow:hidden;margin-top:7px}.health-fill{width:100%;height:100%;background:#8ecfc2;border-radius:5px;transition:width .12s;box-shadow:0 0 10px #8ecfc238}.health-fill.enemy{margin-left:auto;background:#d69a85;box-shadow:0 0 10px #d69a8522}.hp-text{display:block;font-size:7px;color:#758d97;margin-top:5px;font-variant-numeric:tabular-nums}.opponent-hud .hp-text{text-align:right}.scoreboard{display:grid;grid-template-columns:1fr 16px 1fr;min-width:63px;justify-items:center;align-items:center;font-size:24px;font-family:var(--display);font-weight:800;line-height:1}.scoreboard i{font-style:normal;font-size:17px;color:#526775}.scoreboard small{grid-column:1/-1;font-family:var(--sans);font-size:5px;letter-spacing:1px;font-weight:500;color:#6b818c;margin-top:7px}.court-wrap{position:relative;flex:1;min-height:100px;background:#14232c;border:1px solid #2a424b;border-radius:9px;overflow:hidden;margin:0 10px;isolation:isolate}.court-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.court-corner{position:absolute;width:13px;height:13px;border-style:solid;border-color:#547d83;opacity:.65;pointer-events:none}.top-left{left:10px;top:10px;border-width:1px 0 0 1px}.bottom-right{right:10px;bottom:10px;border-width:0 1px 1px 0}.court-label{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:5px;font-weight:600;letter-spacing:1.6px;color:#4c6d79;pointer-events:none;white-space:nowrap}.arena-status{display:flex;align-items:center;gap:5px;position:absolute;bottom:11px;left:12px;color:#729f9f;font-size:6px;font-weight:600;letter-spacing:1px;pointer-events:none}.arena-status>span{height:4px;width:4px;border-radius:50%;background:currentColor}.arena-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px 11px;font-size:8px;color:#728a95;flex-shrink:0}.arena-footer>span:first-child{display:flex;align-items:center;gap:6px}.arena-footer svg{width:11px;height:11px;color:#678e93}.pause-button{position:absolute;right:10px;bottom:9px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #3a5964;background:#1d3540;color:#a5c6c6;z-index:4}.pause-button svg{width:13px;height:13px}.paused-overlay{position:absolute;inset:0;z-index:3;background:#101c28d9;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}.paused-overlay strong{font-family:var(--display);font-size:29px;font-weight:800;letter-spacing:-1px}.paused-overlay span{font-size:11px;color:#8da4b2}
.draft-panel{flex-shrink:0;position:relative;background:#171e29;border:1px solid #2a3443;border-radius:14px;padding:14px;overflow:hidden}.draft-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:1.1px;color:#7e8b9e;font-weight:600}.round-badge{font-size:7px;letter-spacing:.5px;color:#c1b194;background:#2a2926;border-radius:4px;padding:3px 6px}h2{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.7px;margin:6px 0 11px;line-height:1.25}.draft-copy,.draft-footnote{display:none}.draft-options{display:flex;gap:9px}.fighter-option{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:5px 6px 9px;border:1px solid #303949;background:#1d2532;border-radius:10px;isolation:isolate}.fighter-option:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#819bb210,transparent 70%);z-index:-1}.fighter-option:hover{background:#28313d;border-color:#616b74}.fighter-option.selected{border-color:var(--accent);background:#2b2a28;box-shadow:inset 0 0 0 1px #f3b45e55,0 0 16px #f3b45e08}.fighter-option.selected:before{background:radial-gradient(ellipse at 50% 40%,#eab66116,transparent 75%)}.fighter-option .ball-art{height:66px;width:87px;max-width:100%}.fighter-option>span:not(.selection-radio){width:100%;min-width:0}.option-name{display:block;font-family:var(--display);font-size:12px;font-weight:750;letter-spacing:-.1px;margin-top:1px}.selection-radio{position:absolute;right:6px;top:6px;width:11px;height:11px;border:1px solid #465161;border-radius:50%}.selected .selection-radio{background:var(--accent);border-color:var(--accent)}.selected .selection-radio:after{content:'';position:absolute;width:3px;height:5px;left:3px;top:1px;border:solid #48301b;border-width:0 1px 1px 0;transform:rotate(45deg)}.selection-ability{font-size:9px;line-height:1.4;color:#a0abbb;margin:10px 0 0;min-height:13px}.draft-bottom{padding-top:11px}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:13px 16px;background:var(--accent);border-radius:9px;box-shadow:0 3px 0 #946738,inset 0 1px 0 #ffe6b15c;color:#2f2316;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.2px}.primary-button:hover{background:#ffc777}.primary-button svg{width:17px;height:17px}.secondary-button{display:flex;justify-content:center;align-items:center;gap:7px;background:#222d3d;border:1px solid #354258;border-radius:8px;padding:10px 14px;font-size:11px;color:#b2c0d0}.secondary-button svg{width:14px;height:14px}.secondary-button:hover{background:#2b3a4d}.bottom-nav{display:flex;justify-content:space-evenly;flex-shrink:0;border-top:1px solid #283141;background:#131a25;padding:8px 20px max(9px,env(safe-area-inset-bottom));gap:10px}.nav-item{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;min-width:70px;min-height:43px;padding:3px 14px;background:none;color:#647286;font-size:8px;letter-spacing:.5px;font-weight:600}.nav-item svg{width:20px;height:20px}.nav-item.active{color:var(--accent)}.nav-item.active:before{content:'';position:absolute;top:-9px;height:2px;width:20px;left:50%;transform:translateX(-50%);background:var(--accent);box-shadow:0 0 12px #f3b45e66}.nav-item:hover{color:#ced6df}.nav-item.active:hover{color:var(--accent)}.live-fighter{display:flex;align-items:center;gap:10px}.live-fighter>.ball-art{width:65px;height:62px;flex-shrink:0}.live-fighter h2{font-size:21px;margin:4px 0}.live-fighter>div>p{margin:4px 0;font-size:7px;color:#77909e;letter-spacing:.7px}.live-fighter>.icon-button{margin-left:auto;border:1px solid #334154}.battle-meta{display:flex;align-items:center;justify-content:space-between;padding-top:6px}.battle-meta>span{font-size:7px;color:#6e7d91;letter-spacing:.8px}.round-tracker{display:flex;gap:5px}.round-token{width:20px;height:20px;border-radius:50%;border:1px solid #344254;background:#1e2937;display:grid;place-items:center;font-size:7px;color:#66798f}.round-token.won{background:#243e3c;border-color:#426961;color:#a0d4c6}.round-token.lost{background:#3e2f32;border-color:#67464a;color:#d7a1a0}.battle-feed{margin-top:9px;padding-top:8px;border-top:1px solid #293445;height:25px;overflow:hidden}.feed-item{display:flex;gap:7px;align-items:center;font-size:9px;line-height:1.5;color:#8a9daf}.feed-item time{color:#586f83;font-variant-numeric:tabular-nums;flex-shrink:0}.feed-item strong{font-weight:600;color:#b3c6d4}.result-overlay{position:absolute;inset:0;z-index:2;background:#122630d9;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:fade-up .25s ease}.result-stamp{display:grid;place-items:center;width:46px;height:46px;border:1px solid #5b938d;border-radius:50%;color:var(--mint);margin-bottom:13px;box-shadow:0 0 28px #89cbb511}.result-stamp svg{width:23px;height:23px}.eyebrow{font-size:8px;font-weight:600;letter-spacing:1.5px;color:#8094a8}.result-overlay .eyebrow{font-size:7px;color:#7fa6ad}.result-overlay h3{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:-1.2px;margin:8px 0}.result-overlay p{font-size:10px;line-height:1.7;color:#9bb6c0;margin:0;padding:0 20px;max-width:340px}.result-overlay.loss{background:#271e2adf}.result-overlay.loss .result-stamp{border-color:#9b7076;color:#e1a5ab}.result-overlay.loss .eyebrow,.result-overlay.loss p{color:#bc99a6}.countdown{position:absolute;inset:0;display:grid;place-items:center;background:#14232c88;font-family:var(--display);font-size:72px;font-weight:800;color:var(--accent);text-shadow:0 0 50px #f3b45e40}.battle-end-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:11px 0 0}.stat-block{border-radius:7px;background:#202a38;padding:10px 7px}.stat-block strong{font-family:var(--display);font-size:20px;font-weight:750;letter-spacing:-.7px;white-space:nowrap}.stat-block span{display:block;font-size:5px;letter-spacing:.3px;color:#7f91a8;margin-top:4px}.draft-panel:has(.battle-end-stats) h2{margin-bottom:5px}.draft-panel:has(.battle-end-stats) .draft-copy{display:block;font-size:10px;color:#8d9eb3;line-height:1.6;margin:0}.is-playing .game-heading{padding-bottom:10px}
#collection-view{height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#354052 transparent}.collection-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 0}.collection-heading h1{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-1px;margin:7px 0}.collection-heading h1>span{color:var(--accent)}.collection-intro{font-size:11px;color:#8392a5;margin:4px 2px 20px}.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-card{border:1px solid #2e3846;border-radius:12px;overflow:hidden;background:#191f2b}.collection-stage{height:143px;display:grid;place-items:center;position:relative;background:var(--tile-bg)}.collection-stage:after{content:'';position:absolute;inset:0;box-shadow:inset 0 -25px 40px #15192322;pointer-events:none}.collection-stage .ball-art{width:154px;height:143px;max-width:100%}.tile-number{position:absolute;top:12px;left:12px;font-size:6px;letter-spacing:1.1px;color:#9b9b9c}.collection-info{padding:14px 13px}.collection-info .eyebrow{font-size:6px;letter-spacing:.8px;color:#858a9a}.collection-info h2{font-size:23px;margin:6px 0 8px}.collection-info p{font-size:10px;line-height:1.7;min-height:103px;color:#939eaf}.stat-row{display:flex;align-items:center;gap:7px;font-size:8px;color:#8595ab;margin:9px 0}.stat-row>span:first-child{width:43px}.stat-bars{display:flex;flex:1;gap:3px}.stat-bars i{flex:1;height:4px;border-radius:1px;background:#303b4b}.stat-bars .filled{background:#92b6b0}.collection-info .text-button{font-size:9px;color:#bbcece;margin-top:12px;text-align:left}.collection-info .text-button svg{width:12px;height:12px;flex-shrink:0}dialog{width:min(430px,calc(100vw - 28px));max-height:90dvh;overflow-y:auto;border:1px solid #3d4a5a;border-radius:18px;padding:29px;background:#181f2c;color:var(--ink);box-shadow:0 20px 100px #0008}dialog::backdrop{background:#030811c9;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:10px;top:10px}.dialog-art{height:157px;display:grid;place-items:center;margin:18px 0 22px;border-radius:10px;background:var(--tile-bg,#252f40)}.dialog-art .ball-art{width:181px;height:164px}dialog h2{font-size:28px;letter-spacing:-1px;margin:8px 0 13px}dialog p{font-size:12px;line-height:1.8;color:#a0aec1}.weakness{font-size:10px!important;line-height:1.6!important;background:#242e3e;border-radius:8px;padding:12px;margin:20px 0}.how-step{display:flex;gap:15px;padding:16px 0;border-top:1px solid #303a4a}.how-step>span{color:var(--accent);font-size:10px;font-weight:600;padding-top:3px}.how-step strong{font-family:var(--display);font-size:13px;font-weight:750}.how-step p{font-size:11px;line-height:1.7;margin:5px 0 0}.dialog-note{font-size:10px!important;color:#7d8da4!important}.toast{position:fixed;bottom:85px;left:50%;z-index:20;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#293a46;color:#d6e9e7;border:1px solid #45616d;border-radius:9px;padding:12px 17px;font-size:11px;max-width:calc(100vw - 30px);text-align:center;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes fade-up{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:600px){body{background:radial-gradient(ellipse at 50% 25%,#1b2633 0,#090d14 65%)}.app-shell{border-inline-color:#2b3544}.topbar{padding-inline:24px}main{padding-inline:20px}.fighter-option .ball-art{height:75px;width:94px}.draft-panel{padding:16px}.option-name{font-size:13px}.court-label{font-size:6px}}
@media(max-height:760px){.topbar{padding-top:max(11px,env(safe-area-inset-top));padding-bottom:10px}.brand{font-size:23px}.brand small{font-size:6px;letter-spacing:2.8px;margin-top:5px}.game-heading{padding-top:4px;padding-bottom:9px}.fighter-option .ball-art{height:51px}.draft-panel{padding:12px}.draft-panel h2{font-size:19px;margin:5px 0 9px}.selection-ability{margin-top:8px;font-size:8px}.draft-bottom{padding-top:8px}.primary-button{min-height:42px;padding:11px 14px}.battle-hud{padding:12px 14px 9px}.arena-topline{padding-top:9px}.arena-footer{padding-block:8px}.bottom-nav{padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.bottom-nav .nav-item{min-height:39px;font-size:7px}.nav-item.active:before{top:-7px}.live-fighter>.ball-art{height:47px;width:53px}.battle-feed{margin-top:7px;padding-top:6px;height:22px}.battle-end-stats{margin-top:8px}.stat-block{padding:8px 6px}.stat-block strong{font-size:18px}.result-overlay h3{font-size:28px}.result-stamp{width:37px;height:37px;margin-bottom:10px}.result-overlay p{font-size:9px}.result-overlay .eyebrow{font-size:6px}}
@media(max-width:360px){.topbar{padding-inline:16px}.brand{font-size:22px}.brand small{font-size:6px;letter-spacing:2px}.brand-mark{transform:rotate(-34deg) scale(.85);width:25px}.topbar-right{gap:1px}.icon-button{width:32px;height:34px}.coin-balance{padding:6px 7px;font-size:10px}.coin-balance svg{width:13px;height:13px}main{padding-inline:12px}.draft-options{gap:7px}.fighter-option{padding-inline:4px}.option-name{font-size:11px}.battle-hud{gap:12px}.fighter-title strong{font-size:8px}.arena-footer{font-size:7px}.arena-name{font-size:6px}.round-label{font-size:6px}.collection-info{padding:12px 10px}.collection-info p{font-size:9px;min-height:110px}.collection-stage{height:118px}.collection-stage .ball-art{height:123px;width:132px}.collection-info .eyebrow{font-size:5px}.collection-info .text-button{font-size:8px}.stat-row{font-size:7px;gap:5px}.stat-row>span:first-child{width:36px}}
@media(max-height:640px){.app-shell{min-height:560px}.game-heading{display:none}.topbar{padding-top:9px;padding-bottom:10px}.draft-kicker{display:none}.fighter-option .ball-art{height:43px}.fighter-option{padding-bottom:7px}.draft-panel h2{font-size:17px;margin:0 0 7px}.selection-ability{font-size:8px;margin-top:6px}.primary-button{min-height:38px;padding-block:9px}.bottom-nav .nav-item{min-height:33px}.nav-item svg{height:17px;width:17px}.draft-panel:has(.battle-end-stats) .draft-copy{display:none}.result-stamp{display:none}.arena-topline{font-size:6px}.battle-hud{padding-top:10px}.court-label{display:none}}
@media(orientation:landscape) and (max-height:560px){.app-shell{max-width:none;min-height:0}.topbar{padding:8px 18px}.brand{font-size:20px}.brand small{display:none}.brand-mark{transform:rotate(-34deg) scale(.8);height:25px}.game-heading,.bottom-nav{display:none}main{padding-bottom:12px}.play-layout{flex-direction:row}.arena-panel{flex:1}.draft-panel{width:240px;overflow-y:auto}.draft-options{gap:6px}.fighter-option .ball-art{height:52px}.selection-ability{margin-top:9px}.draft-panel h2{font-size:19px;margin-bottom:13px}.draft-bottom{padding-top:15px}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
/* "Can't reach the arena": covers the game while it connects and whenever the server can't be reached. */
.offline-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#050c20b8;backdrop-filter:blur(3px)}
.offline-screen[data-state="connecting"]{background:#090d14}
.offline-screen[data-state="connecting"] .offline-card,.offline-screen:not([data-state="connecting"]) .offline-connecting,.offline-screen:not([data-state="ended"]) .when-ended,.offline-screen[data-state="ended"] .when-offline{display:none}
.offline-connecting{display:flex;align-items:center;gap:10px;font:400 18px 'Lilita One',sans-serif;letter-spacing:.5px;color:#fff1d0}
.offline-spinner{width:20px;height:20px;border-radius:50%;border:3px solid #ffd57140;border-top-color:#ffd571;animation:offline-spin .8s linear infinite}
@keyframes offline-spin{to{transform:rotate(360deg)}}
.offline-card{position:relative;width:min(360px,100%);margin-top:56px;padding:30px 20px 20px;border:2px solid #e2b553;border-radius:20px;text-align:center;background:radial-gradient(ellipse 90% 45% at 50% 0,#2a5fd0,transparent 70%),linear-gradient(180deg,#1a3f9a,#11307a 45%,#0c2460);box-shadow:0 0 0 2px #081028,0 0 0 4px #c9922d,0 14px 40px #000c}
.offline-badge{width:92px;height:92px;margin:-74px auto 12px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3a73e0,#0f2a6e 75%);border:3px solid #e2b553;box-shadow:0 0 0 3px #081028,0 6px 14px #0009}
.offline-badge svg{width:54px;height:54px}
.offline-card h2{margin:0 0 8px;font:400 27px/1.05 'Lilita One',sans-serif;letter-spacing:.5px;color:#fff1d0;-webkit-text-stroke:1.5px #6b3508;paint-order:stroke fill;text-shadow:0 3px 0 #b9661c,0 4px 0 #6b3508}
.offline-card p{margin:0 0 6px;font:700 14px/1.4 var(--sans);color:#e3ebff}
.offline-card .offline-safe{margin-bottom:18px;font-size:12px;font-weight:600;color:#a9c4f5}
.offline-retry{width:100%;min-height:54px;border-radius:14px;font:400 24px 'Lilita One',sans-serif;letter-spacing:1px;color:#fff1d0;background:linear-gradient(180deg,#fff39a,#ffcf1f 45%,#ffad00);border:2px solid #fff6b0;box-shadow:0 0 0 2px #c06f05,0 5px 0 2px #6b3508;-webkit-text-stroke:1.5px #753414;paint-order:stroke fill;text-shadow:0 2px 0 #b9661c,0 3px 0 #74300f}
.offline-retry:disabled{filter:saturate(.5) brightness(.85)}
.offline-card .offline-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 0;font-size:11px;font-weight:600;color:#8fb0e6}
.offline-note>span:first-child{width:7px;height:7px;border-radius:50%;background:#ffd571;box-shadow:0 0 7px #ffc752}
.offline-link{margin-top:14px;padding:6px 10px;background:none;font:700 13px var(--sans);color:#ffd571;text-decoration:underline;text-underline-offset:3px}
.offline-link:disabled,.offline-retry:disabled{opacity:.6}
/* The new pop-up message: slides down from the top with an icon, a bold line and an optional second line. */
/* The pop-up banner (owner art in assets/inbox): blue with a gold rim and a cut right end, the big gold icon tile
   hanging over its left edge, a gold arrow when tapping it opens something, a green dot for "you're live". */
#toast.toast{top:max(14px,env(safe-area-inset-top));bottom:auto;z-index:45;display:flex;align-items:center;gap:10px;width:min(360px,calc(100vw - 40px));min-height:58px;max-width:none;margin-left:6px;padding:4px 10px 4px 50px;border:0 solid;border-radius:0;box-shadow:none;background:none;border-image:url('/assets/inbox/banner.webp') 44 48 44 40 fill/16px 17px 16px 14px stretch;filter:drop-shadow(0 6px 10px #000a);text-align:left;color:#fff;transform:translate(-50%,-18px) scale(.94)}
#toast.toast.visible{transform:translate(-50%,0)}
.toast-icon{position:absolute;left:-14px;top:50%;width:58px;height:58px;transform:translateY(-50%) rotate(-4deg);display:grid;place-items:center;font-style:normal;font-size:28px;line-height:1;border-radius:15px;background:radial-gradient(circle at 40% 30%,#fff2b0,#ffc531 55%,#d98a0c);border:2px solid #fff3b0;box-shadow:inset 0 -4px #a85f05,0 0 0 2px #6b3508,0 4px 6px #0007}
.toast-icon.has-art{background:none;border:0;box-shadow:none;filter:drop-shadow(0 4px 4px #0007)}
.toast-icon img{width:100%;height:100%;object-fit:contain}
.toast-icon.has-trophy img{width:76%;height:76%}
.toast-icon.has-coin{background:radial-gradient(circle at 50% 35%,#2d5fc4,#13306f 70%,#0b1a45);border-color:#ffd76a;box-shadow:inset 0 -4px #071233,0 0 0 2px #6b3508,0 4px 6px #0007}
.toast-icon.has-coin svg{width:72%;height:72%;filter:drop-shadow(0 2px 2px #0008)}
.toast-text{flex:1;min-width:0}
.toast strong{display:block;font:400 18px/1.1 'Lilita One',sans-serif;letter-spacing:.4px;color:#fff1c4;-webkit-text-stroke:1.5px #0a1a4a;paint-order:stroke fill;text-shadow:0 2px 0 #0a1a4a}
.toast-text>span{display:block;margin-top:2px;font:700 12px/1.3 var(--sans);color:#fff}
.toast-arrow{flex:0 0 auto;height:22px;width:auto;margin-right:2px;filter:drop-shadow(0 2px 0 #3a1a05)}
.toast-live{flex:0 0 12px;height:12px;margin-right:4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d4ffb0,#4fd12a 60%,#1f8a10);box-shadow:0 0 0 2px #0a3a12,0 0 10px #6dff3a;animation:toast-live 1.2s ease-in-out infinite}
@keyframes toast-live{50%{box-shadow:0 0 0 2px #0a3a12,0 0 2px #6dff3a}}
.reduce-motion .toast-live{animation:none}
/* The slim pop-up (inbox notices): one bold line on a thinner banner with a smaller icon. On Home it sits level with
   the bell and stops short of it (.beside-bell), so the logo stays clear. */
#toast.toast.is-slim{width:auto;max-width:min(360px,calc(100vw - 40px));min-height:38px;gap:6px;padding:2px 12px 2px 36px}
#toast.toast.is-slim.beside-bell{max-width:min(360px,calc(100vw - 76px));margin-left:-16px}
.is-slim .toast-icon{left:-10px;width:40px;height:40px;font-size:20px;border-radius:11px}
.is-slim .toast-body{gap:6px}
.is-slim strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:min(15px,4.2vw);letter-spacing:0}
.is-slim .toast-text>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.is-slim .toast-arrow{height:16px}
/* The inbox bell under the settings gear on Home. */
.home-hud .home-bell{position:absolute;right:0;top:calc(100% + 10px);margin:0;display:grid;place-items:center;padding:5px}
.home-bell svg{filter:drop-shadow(0 2px 0 #112241)}
.home-bell b{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:linear-gradient(#ff5a5a,#d81f2e);border:2px solid #fff;font:400 11px/15px 'Lilita One',sans-serif;color:#fff;text-align:center;box-shadow:0 2px 0 #6b0a12}
/* The inbox panel (inside the Settings-style dialog; owner art in assets/inbox): the gold tray breaks through the
   top rim, a glossy X closes it, and each message is a dark card with a gold icon tile. */
#info-dialog.inbox-mode>.dialog-close,#info-dialog.customize-mode>.dialog-close,#info-dialog.league-mode>.dialog-close{z-index:5;top:12px;right:12px;width:38px;height:37px;padding:0;border:0;border-radius:0;background:url('/assets/inbox/close.webp') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 3px 0 #0b1631)}
#info-dialog.inbox-mode>.dialog-close>*,#info-dialog.customize-mode>.dialog-close>*,#info-dialog.league-mode>.dialog-close>*{display:none}
.inbox-tray{position:absolute;top:-46px;left:50%;width:92px;transform:translateX(-50%);filter:drop-shadow(0 4px 0 #6b3508) drop-shadow(0 6px 8px #0008);pointer-events:none}
@media(max-height:460px){.inbox-tray{top:-30px;width:64px}}
#inbox-panel h2{font-size:42px}
.inbox-tabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:#0b1631aa}
.inbox-tabs button{flex:1;padding:9px 0;border-radius:10px;background:#142a63;border:1.5px solid #2f4c95;color:#9fb8e8;font:400 14px 'Lilita One',sans-serif;letter-spacing:.3px}
.inbox-tabs button[aria-selected="true"]{background:linear-gradient(#ffe98f,#f4b91c 60%,#e09a0c);border-color:#fff3b0;color:#5a2a05;box-shadow:0 3px 0 #8a5a05}
.inbox-list{display:grid;align-content:start;gap:8px;height:min(52dvh,420px,calc(80dvh - 190px));overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:#ffd76a #0b163166}
.inbox-list::-webkit-scrollbar{width:5px}
.inbox-list::-webkit-scrollbar-thumb{border-radius:3px;background:#ffd76a}
.inbox-list::-webkit-scrollbar-track{border-radius:3px;background:#0b163166}
.inbox-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:14px;background:linear-gradient(#11245a,#0b1a45);border:1.5px solid #2c4a90;box-shadow:inset 0 1px #ffffff14}
.inbox-item.is-new{border:2px solid #ffd76a;box-shadow:0 0 10px #ffc94a55,inset 0 1px #ffffff14}
.inbox-item.is-done{opacity:.62}
.inbox-icon{flex:0 0 46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px;line-height:1;background:radial-gradient(circle at 40% 30%,#fff2b0,#ffc531 55%,#d98a0c);border:1.5px solid #fff3b0;box-shadow:inset 0 -3px #a85f05,0 0 0 1.5px #6b3508}
.inbox-icon.has-art{background:none;border:0;box-shadow:none;filter:drop-shadow(0 2px 2px #0007)}
.inbox-icon img{width:100%;height:100%;object-fit:contain}
.inbox-league img{width:74%;height:74%}
.inbox-text{flex:1;min-width:0}
.inbox-text strong{display:block;font:400 16px/1.15 'Lilita One',sans-serif;color:#fff;overflow-wrap:anywhere}
.inbox-text small{display:block;margin-top:2px;font:600 11px/1.3 var(--sans);color:#b5c9f0}
.inbox-text em{display:block;margin-top:2px;font:600 10px var(--sans);font-style:normal;color:#7f97c8}
.inbox-claim,.inbox-go{flex:0 0 auto;padding:8px 12px;border-radius:11px;font:400 15px 'Lilita One',sans-serif;white-space:nowrap}
.inbox-claim{background:linear-gradient(#8ef05a,#3fbf2a);border:2px solid #c9ff9e;box-shadow:0 3px 0 #1f6e14;color:#fff;-webkit-text-stroke:.8px #1f5a10;paint-order:stroke fill}
.inbox-go{min-width:52px;background:linear-gradient(#ffe98f,#f4b91c 60%,#e09a0c);border:2px solid #fff3b0;box-shadow:0 3px 0 #8a5a05;color:#5a2a05}
.inbox-done{flex:0 0 30px;height:30px}
.inbox-soon{margin:0;padding:14px 12px;border-radius:12px;border:1.5px dashed #d9b25a88;background:#0b163166;text-align:center;font:700 12px var(--sans);color:#c9d6ff}
/* The pop-up lives in the browser's top layer (popover), so the defaults for popovers are reset. */
.toast[popover]{inset:auto;top:max(12px,env(safe-area-inset-top));left:50%;right:auto;bottom:auto;margin:0;overflow:visible;height:auto}
/* A pop-up that does something when tapped (say, opens the inbox). */
.toast.is-tappable.visible{pointer-events:auto}
/* Any pop-up can be swiped up to put it away (app.js), so a shown one takes touches; while a finger drags it, it
   follows without easing. The small tab with an up arrow under its middle says it can be swiped. */
#toast.toast.visible{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
#toast.toast.is-dragging{transition:none}
.toast-swipe{position:absolute;left:50%;bottom:-12px;width:38px;height:16px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#0b1f4dd9;box-shadow:0 0 0 1.5px #ffd76a99;pointer-events:none}
.toast-swipe:before{content:'';position:absolute;left:50%;top:5px;width:8px;height:8px;border:solid #ffd76a;border-width:2px 0 0 2px;transform:translateX(-50%) rotate(45deg)}
#toast.toast.visible .toast-swipe:before{animation:toast-swipe 1.4s ease-in-out .6s 2}
@keyframes toast-swipe{50%{transform:translate(-50%,-3px) rotate(45deg)}}
.reduce-motion #toast.toast.visible .toast-swipe:before{animation:none}
.is-slim .toast-swipe{bottom:-10px;width:30px;height:13px}
.is-slim .toast-swipe:before{top:4px;width:6px;height:6px}
.toast[popover]:not(:popover-open){display:none}
.toast-body{display:flex;align-items:center;gap:10px;align-self:stretch;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
/* The bell rings when a new message arrives. */
.home-bell.is-ringing{animation:bell-ring .9s ease-in-out;box-shadow:0 0 0 3px #ffd76a,0 0 16px #ffb21e,inset 0 1px 0 #d4e7ff,inset 0 -3px 0 #0b234c}
@keyframes bell-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg) scale(1.12)}30%{transform:rotate(14deg) scale(1.12)}45%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
.reduce-motion .home-bell.is-ringing{animation:none}
/* While there are unread messages the bell keeps wiggling and its number bounces, the same rhythm as the Rewards
   chest, until everything is read and every gift is claimed (the same count as the badge). */
.home-bell:has(#bell-count:not([hidden])) svg{animation:chest-wiggle 2.6s ease-in-out infinite;transform-origin:50% 12%}
.home-bell #bell-count:not([hidden]){animation:badge-bounce 2.6s cubic-bezier(.3,1.6,.5,1) infinite}
.reduce-motion .home-bell:has(#bell-count:not([hidden])) svg,.reduce-motion .home-bell #bell-count:not([hidden]){animation:none}