:root{color-scheme:dark;--ink:#0b1028;--text:#f3f2ff;--muted:#b6bce7;--line:#6574bd;--violet:#bc92ff;--panel:rgba(14,21,48,.88);font-family:ui-rounded,"Segoe UI",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,a,input{touch-action:manipulation}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fff09a;outline-offset:4px}
[hidden]{display:none!important}
svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
a{color:inherit;text-decoration:none}
button{color:inherit}
em{color:#c795ff;font-style:normal}
.app{height:100svh;min-height:560px;position:relative;background:var(--ink) url('../assets/images/cosmic-background.webp') center/cover no-repeat;overflow:hidden}
.toolbar{height:76px;display:flex;align-items:center;gap:30px;padding:0 clamp(18px,4vw,70px);border-bottom:1px solid rgba(118,139,226,.3);background:rgba(7,11,32,.68);position:relative;z-index:2}
.brand,.logo{font-weight:950;letter-spacing:-.06em;color:#fff;text-shadow:0 3px 0 #b39bfa,0 6px 10px #47238d;transform:rotate(-5deg)}
.brand{font-size:48px;line-height:1}
.brand-caption{font-size:10px;letter-spacing:.35em;color:var(--muted)}
.controls{margin-left:auto;display:flex;gap:12px}
.outline{border:1px solid #798adb;border-radius:24px;background:rgba(15,22,48,.65);padding:12px 23px;display:inline-flex;justify-content:center;align-items:center;gap:10px;font-size:15px;font-weight:600;transition:background .15s,transform .15s}
.outline:hover{background:#263056}
.outline:active,.primary:active{transform:scale(.96)}
.control{padding:10px 18px}
.control[aria-pressed=false]{opacity:.55}
.primary{min-height:58px;border:1px solid #e3cbff;border-radius:20px;padding:16px 40px;display:inline-flex;align-items:center;justify-content:center;gap:30px;background:linear-gradient(135deg,#ead5ff,#bb92ff);color:#26164d;font-size:21px;font-weight:850;box-shadow:0 5px 0 #7256a6,0 10px 35px #9067ee30;transition:transform .15s}
.primary:hover{background:linear-gradient(135deg,#faf0ff,#d2b6ff)}
.text-button{border:0;background:transparent;padding:10px;color:#ccd1f5;font-size:14px;font-weight:600}
.text-button:hover{color:#fff;text-decoration:underline}
.screen{position:relative;z-index:1}
.welcome{height:calc(100% - 76px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.logo{font-size:clamp(90px,10vw,155px);line-height:1.05;margin:0 0 12px}
.welcome h2{font-size:clamp(24px,3vw,40px);letter-spacing:-.03em;margin:8px 0 12px}
.intro{font-size:16px;line-height:1.65;color:#c6cae9;margin:0 0 27px}
.welcome-art{position:absolute;inset:0;pointer-events:none;z-index:-1}
.welcome-art .token{position:absolute;width:clamp(100px,13vw,180px);height:clamp(100px,13vw,180px);animation:float 5s ease-in-out infinite}
.welcome-art .token-star{top:16%;left:15%;transform:rotate(-15deg)}
.welcome-art .token-heart{top:18%;right:15%;animation-delay:-1.5s}
.welcome-art .token-diamond{bottom:14%;right:12%;animation-delay:-3s}
.welcome-art .token-square{bottom:18%;left:10%;animation-delay:-2.5s}
.modes{display:flex;gap:12px;margin:0 0 26px}
.mode{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px 21px;min-width:225px;border-radius:16px;border:1px solid #586591;background:#111a35d9}
.mode strong{font-size:18px}
.mode span{font-size:12px;color:#bac1e7}
.mode.active{border-color:#c399ff;background:#8c65d430;box-shadow:inset 0 0 0 1px #c399ff}
.welcome>.primary{min-width:310px}
.personal-best{font-size:13px;color:#b5bee5;display:flex;gap:14px;align-items:center;margin:25px 0 5px}
.personal-best strong{font-size:22px;color:#ffdd8c}
.welcome-links{display:flex;align-items:center;gap:6px}
.playing{height:calc(100% - 76px);display:flex;flex-direction:column;align-items:center;padding:0 3vw 20px}
.game-title{font-size:clamp(27px,4vw,62px);letter-spacing:-.04em;text-align:center;margin:28px 0 25px;line-height:1.15}
.arena{display:grid;grid-template-columns:minmax(135px,225px) minmax(350px,750px) minmax(140px,225px);gap:28px;width:100%;max-width:1440px;align-items:start;justify-content:center}
.rail{border:1px solid #6672b4;border-radius:24px;background:linear-gradient(145deg,#191e44dd,#0b142ce8);padding:30px;box-shadow:0 16px 40px #0002}
.metric{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid #59639580;display:flex;flex-direction:column;gap:7px}
.metric>span,.metric-label,.combo-box>span{font-size:12px;font-weight:650;letter-spacing:.19em;color:#c5ccff}
.metric>strong{font-size:clamp(34px,3.5vw,54px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.record-metric>strong{font-size:34px}
.level-metric{border:0;margin:0;padding-bottom:18px}
.metric small,.fever-section small{color:#bbc5f5;font-size:12px;line-height:1.4}
.progress{height:12px;width:100%;border-radius:20px;border:1px solid #6c7acc;background:#0c1330;overflow:hidden;margin-top:10px}
.progress>i{display:block;height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,#ae85ff,#e6d8ff);box-shadow:0 0 15px #ae85ff;transition:width .15s linear}
.combo-box{border-top:1px solid #59639580;padding-top:20px;display:flex;flex-direction:column;gap:7px}
.combo-box>strong{font-size:30px;color:#ffd883}
.combo-box>small{font-size:11px;color:var(--muted)}
.combo-box.hot strong{color:#f2bbff;text-shadow:0 0 16px #d45ce999}
.board-wrap{position:relative;min-width:0}
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;border:1px solid #5974a4;padding:9px;border-radius:22px;background:#061124cc;box-shadow:0 12px 55px #0004}
.tile{position:relative;aspect-ratio:1.06;border:0;border-radius:50%;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .14s;overflow:visible;user-select:none;contain:layout style;isolation:isolate}
.tile:hover{transform:scale(1.06)}
.tile:before{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(ellipse,#d9abff55,transparent 70%);opacity:0;transition:opacity .15s;z-index:-1;pointer-events:none}
.tile.selected{transform:scale(1.08)}
.tile.selected:before{background:radial-gradient(ellipse,#ffe38799,transparent 70%);opacity:1}
.tile.selected .symbol{filter:drop-shadow(0 0 8px #ffdc70a0)}
.tile:hover:before{opacity:.6}
.tile.popping{animation:pop-out .24s ease-in forwards;pointer-events:none}
.tile.morphing{animation:morph .32s ease-out}
.tile .ice-shell{position:absolute;inset:-3%;width:106%;opacity:0;visibility:hidden;z-index:2;filter:drop-shadow(0 0 5px #6ecbff55);pointer-events:none}
.tile.ice .ice-shell{opacity:.62;visibility:visible}
.tile.ice .symbol{scale:.79;filter:saturate(.85) drop-shadow(0 1px 2px #0005)}
.tile.cracked .ice-shell{opacity:.42}
.tile.cracked:after{content:"";position:absolute;inset:23%;background:#d9faffb0;clip-path:polygon(44% 0,50% 32%,36% 45%,53% 56%,42% 100%,61% 61%,45% 44%,60% 31%);z-index:3;pointer-events:none}
.tile .life{position:absolute;bottom:5px;left:20%;width:60%;height:2px;border-radius:3px;background:#a8bbfb80;transform:scaleX(var(--life,1));transform-origin:left center;will-change:transform}
.tile.selected .life{background:#ffed8e}
.tile.critical .life{background:#ed96b7}
.token{display:block;background:url('../assets/images/symbols.webp') 0 0/400% 400% no-repeat;width:100%;aspect-ratio:1;flex-shrink:0}
.tile .token{width:100%;pointer-events:none;filter:drop-shadow(0 3px 3px #0005)}
.token-star{background-position:0% 0%}
.token-heart{background-position:33.3333% 0%}
.token-circle{background-position:66.6667% 0%}
.token-square{background-position:100% 0%}
.token-triangle{background-position:0% 33.3333%}
.token-diamond{background-position:33.3333% 33.3333%}
.token-hexagon{background-position:66.6667% 33.3333%}
.token-cloud{background-position:100% 33.3333%}
.token-sun{background-position:0% 66.6667%}
.token-moon{background-position:33.3333% 66.6667%}
.token-crown{background-position:66.6667% 66.6667%}
.token-joker{background-position:100% 66.6667%}
.token-freeze{background-position:0% 100%}
.token-resonance{background-position:33.3333% 100%}
.token-ice{background-position:66.6667% 100%}
.token-sparkle{background-position:100% 100%}
.time-section{text-align:center}
.timer-ring{--angle:360deg;position:relative;width:100%;aspect-ratio:1;max-width:170px;margin:18px auto 28px;border-radius:50%;background:conic-gradient(from -90deg,#d5b8ff,#9476ff var(--angle),#303b78 var(--angle));padding:12px;box-shadow:0 0 22px #8175fb20}
.timer-ring:before{content:"";position:absolute;inset:12px;border-radius:50%;background:#0e1635;box-shadow:inset 0 0 20px #0006}
.timer-ring strong{position:relative;display:flex;align-items:baseline;justify-content:center;top:50%;transform:translateY(-50%);font-size:54px;font-weight:800;font-variant-numeric:tabular-nums}
.timer-ring small{font-size:24px;margin-left:3px}
.timer-ring.urgent{background:conic-gradient(from -90deg,#ffbabb,#ee678c var(--angle),#542d4c var(--angle))}
.fever-section{margin-bottom:23px}
.fever-progress{height:15px;margin:14px 0 8px}
.fever-progress>i{background:linear-gradient(90deg,#cc55ff,#fbc1ff)}
.status{margin:0;padding-top:23px;border-top:1px solid #59639580;font-size:13px;line-height:1.7;color:#dbe1ff}
.game-footer{display:flex;gap:22px;margin-top:26px}
.game-footer .outline{min-width:200px;padding:15px 24px}
.burst{position:absolute;pointer-events:none;inset:0;display:grid;place-items:center;z-index:4;font-size:clamp(28px,6vw,75px);font-weight:950;font-style:italic;color:#fff8af;text-shadow:0 4px 0 #532374,0 0 20px #d461ff;opacity:0}
.burst.show{animation:burst .95s ease-out forwards}
.app.fever .board{border-color:#e6a3ff;box-shadow:0 0 40px #cf5ef755,inset 0 0 45px #7b37c022}
.app.frozen .board{border-color:#91eeff;box-shadow:0 0 45px #75dffb35}
.app.fever .game-title em{color:#ffb2fa}
.score-pop{animation:score-pop .3s}
.particle{position:fixed;width:7px;height:7px;border-radius:3px;background:var(--color);z-index:12;pointer-events:none;animation:particle .6s ease-out forwards}
.point-popup{position:fixed;font-size:23px;font-weight:900;color:#fff0a0;z-index:12;pointer-events:none;text-shadow:0 3px 0 #332056;animation:points .85s ease-out forwards}
.board.shake{animation:shake .25s}
dialog{background:#101830;color:var(--text);border:1px solid #7985b3;border-radius:27px;padding:0;max-width:620px;width:calc(100% - 32px);max-height:calc(100svh - 35px);box-shadow:0 25px 100px #0009}
dialog::backdrop{background:#04081caa;backdrop-filter:blur(8px)}
.dialog-content{padding:38px;position:relative}
dialog h2{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:0 0 15px}
dialog p{color:#bec6e7;line-height:1.65;font-size:14px}
.close{position:absolute;right:12px;top:12px;background:#ffffff10;border:0;border-radius:50%;width:32px;height:32px;font-size:23px;line-height:1}
.pause-content,.result-content{text-align:center;display:flex;flex-direction:column;align-items:center}
.pause-content>button,.result-content>.primary{width:100%;margin-top:12px}
.dialog-symbol{color:#c39bff;font-size:45px;margin-bottom:20px}
.rule-pair{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0}
.rule-pair .token{width:75px}
.rule-pair strong{color:#d6b4ff;font-size:27px;transform:rotate(-7deg)}
.rules{padding-left:18px;color:#bfc8e6;line-height:1.6;font-size:13px}
.rules li{padding-bottom:10px}
.rules strong{color:#fff}
.power-rules{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.power-rules>div{display:flex;align-items:center;background:#192442;border-radius:12px;padding:4px 9px}
.power-rules .token{width:58px}
.power-rules p{font-size:11px;line-height:1.45}
.power-rules strong{display:block;color:#f4efff;font-size:13px;margin-bottom:3px}
.keyboard-note{font-size:11px!important;border-top:1px solid #52607a;padding-top:15px}
.dialog-content>.primary{margin-top:12px}
.result-star{width:95px;margin:-12px 0 8px}
.result-content h2{margin-bottom:4px}
.result-content p{margin:5px 0 13px}
.result-score{font-size:68px;line-height:1.1;font-variant-numeric:tabular-nums;color:#e3c6ff}
.result-stats{display:flex;justify-content:space-around;width:100%;border-top:1px solid #4a567d;border-bottom:1px solid #4a567d;padding:19px 0;margin:22px 0}
.result-stats>div{display:flex;flex-direction:column;gap:6px}
.result-stats strong{font-size:23px}
.result-stats span{font-size:11px;color:#b6c0e7}
.name-label{font-size:12px;color:#bcc7ee;align-self:flex-start;margin-bottom:9px}
#name-form{display:flex;gap:8px;width:100%}
input{background:#060e26;border:1px solid #7282b5;border-radius:12px;padding:11px 14px;color:#fff;min-width:0;width:100%;font-size:16px}
#name-form button{padding:10px 16px;border-radius:12px;font-size:13px}
.sync-status{font-size:12px!important;color:#bfcced;min-height:20px}
.score-tabs{display:flex;border-bottom:1px solid #59638a;margin-top:20px}
.score-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;padding:13px 14px;font-size:13px;color:#bfc5e6}
.score-tabs button.active{color:#e1c3ff;border-color:#d0a3ff}
.section-note{font-size:12px!important;color:#a4b1d8!important}
.leaderboard,.history{list-style:none;padding:0;margin:10px 0}
.leaderboard li,.history li{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid #3c496a;font-size:13px}
.leaderboard .rank{color:#c59cff;width:27px;font-weight:800}
.leaderboard .name{flex:1;overflow:hidden;text-overflow:ellipsis}
.leaderboard strong{color:#ffe1a3;font-variant-numeric:tabular-nums}
.history small{display:block;color:#92a1cd;margin-top:3px;font-size:10px}
.history strong{font-size:15px}
.local-metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px 0}
.local-metrics>div{display:flex;flex-direction:column;gap:7px}
.local-metrics strong{font-size:30px;color:#e0c5ff}
.local-metrics span{font-size:12px;color:#abb9df}
h3{font-size:15px;margin:15px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes float{50%{translate:0 -14px;rotate:6deg}
}
@keyframes pop-out{45%{transform:scale(1.15);filter:brightness(1.5)}
100%{transform:scale(.1);opacity:0}
}
@keyframes morph{0%{transform:scale(.6);opacity:.4}
70%{transform:scale(1.05)}
100%{transform:scale(1)}
}
@keyframes burst{0%{opacity:0;transform:scale(.4) rotate(-12deg)}
20%{opacity:1;transform:scale(1.1) rotate(-5deg)}
75%{opacity:1;transform:scale(1) rotate(-5deg)}
100%{opacity:0;transform:scale(1.2) translateY(-20px)}
}
@keyframes particle{to{transform:translate(var(--tx),var(--ty)) scale(.1) rotate(180deg);opacity:0}
}
@keyframes points{to{transform:translateY(-65px) scale(1.2);opacity:0}
}
@keyframes score-pop{50%{transform:scale(1.1);color:#ffe79b}
}
@keyframes shake{25%{translate:-4px 0}
75%{translate:4px 0}
}
@media(min-width:1000px) and (max-height:850px){.toolbar{height:65px}
.playing,.welcome{height:calc(100% - 65px)}
.game-title{margin:18px 0;font-size:39px}
.arena{grid-template-columns:180px minmax(350px,min(59vw,calc((100svh - 215px)*1.21))) 180px;gap:22px}
.rail{padding:24px}
.metric{padding-bottom:15px;margin-bottom:15px}
.metric>strong{font-size:37px}
.record-metric>strong{font-size:28px}
.timer-ring{max-width:132px;margin:14px auto 20px;padding:9px}
.timer-ring:before{inset:9px}
.timer-ring strong{font-size:45px}
.game-footer{margin-top:18px}
.game-footer .outline{padding:10px 20px}
.combo-box{padding-top:14px}
.fever-section{margin-bottom:17px}
.status{padding-top:16px}
.tile{border-radius:12px}
.board{border-radius:17px;gap:7px;padding:7px}
}
@media(max-width:999px){.toolbar{height:64px;padding:0 22px;gap:20px}
.brand{font-size:39px}
.brand-caption{font-size:8px;letter-spacing:.2em}
.control{padding:8px 12px;font-size:12px}
.playing,.welcome{height:calc(100% - 64px)}
.playing{padding:0 16px 15px}
.game-title{font-size:33px;margin:20px 0}
.arena{grid-template-columns:120px minmax(310px,540px) 125px;gap:13px}
.rail{padding:17px;border-radius:18px}
.metric{padding-bottom:15px;margin-bottom:15px}
.metric>span,.metric-label,.combo-box>span{font-size:9px;letter-spacing:.1em}
.metric>strong{font-size:29px}
.record-metric>strong{font-size:23px}
.metric small,.fever-section small{font-size:10px}
.combo-box{padding-top:15px}
.combo-box>strong{font-size:25px}
.combo-box>small{font-size:9px}
.timer-ring{padding:8px;margin:15px auto 20px}
.timer-ring:before{inset:8px}
.timer-ring strong{font-size:34px}
.timer-ring small{font-size:17px}
.status{font-size:11px;padding-top:15px}
.board{gap:6px;padding:6px;border-radius:16px}
.tile{border-radius:12px}
.game-footer{margin-top:20px}
.game-footer .outline{font-size:13px;padding:11px 18px;min-width:170px}
.welcome-art .token-star{left:4%;top:13%}
.welcome-art .token-heart{right:4%;top:12%}
.welcome-art .token-square{left:3%}
.welcome-art .token-diamond{right:3%}
}
@media(max-width:720px){.app{min-height:520px}
.toolbar{height:58px;padding:0 15px;gap:10px}
.brand{font-size:34px}
.brand-caption{display:none}
.controls{gap:7px}
.control{padding:9px;width:38px;height:36px;border-radius:12px}
.control span{display:none}
.control svg{width:19px;height:19px}
.playing,.welcome{height:calc(100% - 58px)}
.playing{padding:0 13px 12px}
.game-title{font-size:25px;margin:19px 0 17px;letter-spacing:-.04em}
.arena{display:flex;flex-direction:column;gap:11px;max-width:520px}
.rail{background:#121c3bd9;border-color:#62719d;border-radius:16px}
.score-rail{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 15px}
.metric{border:0;margin:0;padding:0;gap:3px}
.metric>span{font-size:8px;letter-spacing:.13em}
.metric>strong{font-size:27px}
.record-metric>strong{font-size:21px}
.level-metric>strong{font-size:22px}
.level-metric .progress,.level-metric small{display:none}
.combo-box{border:0;padding:0;gap:3px;text-align:right}
.combo-box>span{font-size:8px}
.combo-box>strong{font-size:22px}
.combo-box small{display:none}
.board-wrap{width:100%;order:2}
.board{gap:5px;padding:6px;border-radius:16px}
.tile{border-radius:10px;aspect-ratio:.99}
.tile .life{bottom:4px;height:2px}
.time-rail{order:1;width:100%;display:flex;align-items:center;gap:16px;padding:10px 14px;border:0;background:transparent}
.time-section{display:flex;align-items:center;gap:8px}
.time-section>.metric-label{display:none}
.timer-ring{width:55px;flex-shrink:0;margin:0;padding:4px}
.timer-ring:before{inset:4px}
.timer-ring strong{font-size:23px}
.timer-ring small{font-size:12px;margin-left:2px}
.fever-section{flex:1;margin:0}
.fever-section .metric-label{font-size:9px;letter-spacing:.15em}
.fever-progress{margin:5px 0;height:10px}
.fever-section small{font-size:9px}
.status{display:none}
.game-footer{margin:17px 0 0;gap:10px}
.game-footer .outline{padding:10px 14px;min-width:0;font-size:12px;border-radius:15px;gap:7px}
.game-footer svg{width:18px;height:18px}
.welcome{padding:15px;justify-content:center}
.logo{font-size:103px;margin:0 0 15px}
.welcome h2{font-size:25px;margin:6px 0 12px;white-space:nowrap}
.intro{font-size:13px;margin-bottom:23px}
.modes{gap:9px;margin-bottom:22px;width:100%;max-width:420px}
.mode{padding:15px 12px;min-width:0;flex:1;gap:5px}
.mode strong{font-size:16px}
.mode span{font-size:10px;line-height:1.5}
.welcome>.primary{min-width:260px}
.welcome-art .token{width:70px;height:70px;opacity:.85}
.welcome-art .token-star{top:4%;left:5%}
.welcome-art .token-heart{top:5%;right:5%}
.welcome-art .token-square{bottom:6%;left:2%}
.welcome-art .token-diamond{bottom:7%;right:3%}
.welcome-links{gap:0}
.welcome-links .text-button{font-size:11px;padding:8px}
.personal-best{margin-top:22px;font-size:12px}
.personal-best strong{font-size:20px}
.dialog-content{padding:32px 23px 24px}
dialog h2{font-size:25px}
.power-rules{gap:7px}
.power-rules .token{width:46px}
.power-rules>div{padding:4px}
.power-rules p{font-size:10px}
.result-star{width:77px}
.result-score{font-size:58px}
.result-stats{margin:17px 0;padding:15px 0}
.result-content p{font-size:13px}
.score-tabs button{padding:12px 8px;font-size:12px}
.rule-pair .token{width:62px}
.primary{font-size:18px;min-height:52px}
.pause-content>.text-button{font-size:12px}
}
@media(max-width:720px) and (max-height:710px){.game-title{font-size:22px;margin:12px 0}
.arena{gap:7px;max-width:min(100%,calc((100svh - 251px)*1.18))}
.score-rail{padding:9px 12px}
.time-rail{padding:4px 6px}
.timer-ring{width:44px}
.timer-ring strong{font-size:20px}
.board{gap:4px;padding:4px}
.game-footer{margin-top:12px}
.game-footer .outline{padding:8px 13px}
.welcome .logo{font-size:76px;margin-bottom:5px}
.welcome h2{font-size:23px}
.intro{margin-bottom:15px}
.modes{margin-bottom:17px}
.mode{padding:11px}
.welcome>.primary{min-height:48px;padding:11px 30px}
.personal-best{margin-top:16px}
.welcome-art .token{width:55px;height:55px}
.welcome-art .token-square,.welcome-art .token-diamond{display:none}
}
.arena{grid-template-columns:minmax(135px,260px) minmax(350px,850px) minmax(140px,260px);max-width:1460px}
@media(min-width:1000px) and (max-height:850px){.arena{grid-template-columns:180px minmax(350px,min(59vw,calc((100svh - 215px)*1.21))) 180px}
}
@media(max-width:999px) and (min-width:721px){.arena{grid-template-columns:120px minmax(310px,540px) 125px}
}
.metric>strong.large-value{font-size:28px}
.result-score.large-value{font-size:40px}
@media(max-width:720px){.metric>strong.large-value{font-size:20px}
.result-score.large-value{font-size:36px}
}
.welcome-name{display:flex;align-items:center;gap:12px;color:#bdc5e8;font-size:12px;margin:0 0 18px;width:310px}
.welcome-name input{font-size:13px;padding:10px 12px;flex:1;width:180px}
.welcome-name~.primary{flex-shrink:0}
@media(max-width:720px){.welcome-name{width:260px;font-size:11px;margin-bottom:15px}
.welcome-name input{font-size:13px;padding:8px 10px}
.welcome h2{white-space:normal}
.welcome-art .token-star,.welcome-art .token-heart{top:2%}
}
@media(min-width:721px) and (max-height:550px){.app{min-height:0}
.toolbar{height:48px}
.brand{font-size:32px}
.brand-caption{font-size:8px}
.control{padding:6px 13px;font-size:11px}
.welcome,.playing{height:calc(100% - 48px)}
.playing{padding:9px 15px}
.game-title{display:none}
.arena{grid-template-columns:120px minmax(260px,calc((100svh - 108px)*1.18)) 145px;gap:15px}
.rail{padding:12px;border-radius:16px}
.metric{padding:0 0 8px;margin-bottom:8px;gap:2px}
.metric>strong{font-size:25px}
.metric>span,.metric-label,.combo-box>span{font-size:8px}
.record-metric>strong{font-size:20px}
.level-metric .progress,.level-metric small,.status{display:none}
.combo-box{padding-top:8px}
.combo-box>strong{font-size:22px}
.combo-box>small{font-size:8px}
.timer-ring{max-width:90px;margin:10px auto 14px;padding:6px}
.timer-ring:before{inset:6px}
.timer-ring strong{font-size:30px}
.fever-section{margin:0}
.fever-section small{font-size:9px}
.fever-progress{margin:8px 0}
.board{padding:4px;gap:4px}
.tile{border-radius:9px}
.game-footer{margin-top:10px;gap:10px}
.game-footer .outline{min-width:150px;padding:6px 14px;font-size:11px}
.game-footer svg{width:16px;height:16px}
.welcome{display:grid;grid-template-columns:1fr 1fr;align-content:center;column-gap:40px;padding:20px 80px}
.welcome .logo{font-size:75px;grid-row:1/3;grid-column:1;align-self:end;justify-self:center}
.welcome h2{grid-column:1;font-size:24px;margin:4px 0}
.welcome .intro{grid-column:1;font-size:12px;margin:0}
.welcome .modes{grid-column:2;grid-row:1/3;margin:0 0 10px;gap:8px}
.mode{min-width:0;flex:1;padding:11px}
.mode strong{font-size:14px}
.mode span{font-size:9px}
.welcome-name{grid-column:2;grid-row:3;width:auto;margin:8px 0 12px}
.welcome>.primary{grid-column:2;grid-row:4;min-width:0;min-height:42px;font-size:16px;padding:10px}
.welcome #continue{grid-column:2;grid-row:5;font-size:10px;padding:7px}
.welcome .personal-best{grid-column:1;grid-row:4;margin:10px 0 0;justify-content:center;font-size:11px}
.welcome .welcome-links{grid-column:1;grid-row:5;justify-content:center}
.welcome-links .text-button{font-size:10px}
.welcome-art .token{display:none}
}
/* The forms are the buttons: no individual cards, with a halo for selection. */
.tile,.tile:hover,.tile.selected{border:0;background:transparent;box-shadow:none;border-radius:50%;min-width:0;min-height:0}
.tile .symbol{transform-origin:50% 60%;transition:filter .15s}
.tile.critical .symbol{animation:imminent .24s ease-in-out infinite;animation-delay:var(--phase)}
.tile.nova:before{opacity:.75;background:radial-gradient(ellipse,#c967ff66,transparent 70%)}
.tile.nova .symbol{filter:drop-shadow(0 0 7px #e686ff80)}
.tile .symbol.ice-cracking{animation:ice-crack .4s ease-out}
.ice-shard{width:11px;height:15px;border:1px solid #ddfaff;background:#99e5ff99;clip-path:polygon(0 0,100% 28%,68% 100%,18% 70%)}
.fever-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:18px}
#fever-countdown{font-size:16px;color:#fff2ad;font-variant-numeric:tabular-nums;line-height:1}
.fever-progress{height:18px;position:relative;overflow:visible}
.fever-progress>i{max-width:100%}
.fever-aura{position:absolute;inset:-18px;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:35px;background:radial-gradient(ellipse at center,#d152ff33,transparent 72%);box-shadow:0 0 60px #d258ed33}
.app.fever .fever-aura{opacity:1;animation:fever-breathe 1.6s ease-in-out infinite}
.app.fever .time-rail{border-color:#de99ff;background:linear-gradient(145deg,#52255be0,#1b1744ed);box-shadow:0 0 30px #df75ef33}
.app.fever .fever-heading .metric-label{color:#ffe9a1;letter-spacing:.1em;font-weight:900}
.app.fever .fever-section small{color:#ffdcff;font-size:10px;font-weight:700}
.app.fever .fever-progress{border-color:#f3c0ff;box-shadow:0 0 8px #de86ff,0 0 25px #b552fb66;animation:meter-pulse .8s ease-in-out infinite}
.app.fever .fever-progress>i{background:repeating-linear-gradient(110deg,#ffe8a8 0%,#ffa9f5 15%,#c979ff 30%,#ffe8a8 45%);background-size:200% 100%;box-shadow:0 0 13px #ffd2fb;animation:fever-flow .85s linear infinite}
.app.fever .tile .symbol{filter:drop-shadow(0 0 6px #e79bff66) saturate(1.15)}
.app.fever .tile.selected .symbol{filter:drop-shadow(0 0 10px #ffe987b0)}
.app.fever .life,.app.frozen .life{background:#a8efff80}
.board{position:relative;grid-template-columns:repeat(6,minmax(0,1fr))}
.board.fever-entry{animation:fever-kick .7s ease-out}
.board.power-surge{animation:power-kick .5s ease-out}
.board.nova-surge:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:linear-gradient(90deg,transparent calc(var(--nova-x) - 2%),#ffd0ffcc var(--nova-x),transparent calc(var(--nova-x) + 2%)),linear-gradient(0deg,transparent calc(100% - var(--nova-y) - 2%),#ffd0ffcc calc(100% - var(--nova-y)),transparent calc(100% - var(--nova-y) + 2%));animation:nova-cross .65s ease-out forwards}
.app.paused .tile,.app.paused .symbol,.app.paused .fever-aura,.app.paused .fever-progress,.app.paused .fever-progress>i{animation-play-state:paused}
@keyframes imminent{0%,100%{transform:rotate(-3deg) scale(.98)}50%{transform:rotate(3deg) scale(1.025)}}
@keyframes ice-crack{20%,60%{transform:translateX(-3px) rotate(-5deg)}40%,80%{transform:translateX(3px) rotate(5deg)}}
@keyframes fever-flow{to{background-position:200% 0}}
@keyframes meter-pulse{50%{box-shadow:0 0 14px #ffcefa,0 0 30px #cf65ff80}}
@keyframes fever-breathe{50%{box-shadow:0 0 80px #d258ed55;scale:1.018}}
@keyframes fever-kick{20%{transform:scale(1.025)}40%{transform:scale(.99)}65%{transform:scale(1.012)}}
@keyframes power-kick{30%{transform:scale(1.015)}}
@keyframes nova-cross{0%{opacity:0;filter:blur(10px)}25%{opacity:1;filter:blur(2px)}100%{opacity:0;filter:blur(14px)}}
@media(max-width:720px){.fever-heading{min-height:12px}#fever-countdown{font-size:13px}.fever-progress{height:12px}.app.fever .time-rail{border-radius:15px;background:#632c5933;box-shadow:0 0 20px #df75ef20}.app.fever .fever-section small{font-size:8px}.fever-aura{inset:-9px}}
@media(min-width:721px) and (max-height:550px){#fever-countdown{font-size:12px}.fever-progress{height:14px}.app.fever .fever-section small{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition:none!important}
.tile.critical .symbol{animation:none;filter:drop-shadow(0 0 6px #ed96b7)}
.app.fever .fever-aura,.app.fever .fever-progress,.app.fever .fever-progress>i{animation:none}
.welcome-art .token{animation:none}
.particle{display:none}
}