:root{color-scheme:dark;--surface-0: #101115;--surface-1: #16171c;--surface-2: #1d1f25;--surface-3: #25282f;--surface-4: #2f323b;--surface-5: #3b3f4a;--line: rgba(255, 255, 255, .06);--line-strong: rgba(255, 255, 255, .12);--hover: rgba(255, 255, 255, .05);--scrim: rgba(8, 9, 12, .78);--text-1: #f3f4f7;--text-2: #b9bdc8;--text-3: #868b98;--text-on-accent: #ffffff;--text-on-yellow: #3b2b00;--green: #3fd65f;--green-edge: #25a044;--green-soft: rgba(63, 214, 95, .14);--blue: #2ea6ff;--blue-edge: #1877c8;--blue-soft: rgba(46, 166, 255, .14);--purple: #8b6cff;--purple-edge: #5f43d1;--purple-soft: rgba(139, 108, 255, .16);--yellow: #ffc933;--yellow-edge: #d29a00;--yellow-soft: rgba(255, 201, 51, .14);--red: #ff5262;--red-edge: #c42d3d;--red-soft: rgba(255, 82, 98, .14);--orange: #ff9a2e;--orange-edge: #cc6a0b;--pink: #ff6fb5;--rarity-common: #8e9bb5;--rarity-rare: var(--blue);--rarity-epic: var(--purple);--rarity-legendary: var(--yellow);--font-display: "Fredoka", "Nunito", system-ui, sans-serif;--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--fs-xs: .75rem;--fs-sm: .875rem;--fs-md: 1rem;--fs-lg: 1.125rem;--fs-xl: 1.375rem;--fs-2xl: 1.75rem;--fs-3xl: clamp(1.9rem, 5.5vw, 2.6rem);--fs-hero: clamp(2.6rem, 10vw, 4rem);--fw-body: 600;--fw-bold: 800;--fw-black: 900;--fw-display: 600;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--r-xs: 6px;--r-sm: 10px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--r-pill: 999px;--edge: 4px;--edge-lg: 6px;--shadow-1: 0 1px 0 rgba(0, 0, 0, .25);--shadow-2: 0 8px 24px rgba(0, 0, 0, .32);--shadow-3: 0 20px 60px rgba(0, 0, 0, .55);--focus: 0 0 0 3px var(--surface-2), 0 0 0 6px var(--blue);--ease-out: cubic-bezier(.2, .8, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-spring: cubic-bezier(.3, 1.8, .5, 1);--dur-1: 90ms;--dur-2: .18s;--dur-3: .32s;--dur-4: .6s;--sidebar-w: 248px;--aside-w: 280px;--header-h: 56px;--tabbar-h: 68px;--content-w: 760px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--surface-2);color:var(--text-1);font-family:var(--font-body);font-weight:var(--fw-body);font-size:var(--fs-md);line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed}:focus{outline:none}:focus-visible{box-shadow:var(--focus);border-radius:var(--r-sm)}::selection{background:var(--blue);color:var(--text-on-accent)}.tabular{font-variant-numeric:tabular-nums}.muted{color:var(--text-3)}.hint{color:var(--text-3);font-size:var(--fs-sm);margin:0}.eyebrow{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}.display{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-3xl);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;color:var(--text-1)}.lead{margin:0;max-width:34em;color:var(--text-2);font-size:var(--fs-lg);text-wrap:pretty}.stack{display:flex;flex-direction:column;gap:var(--sp-4)}.row{display:flex;gap:var(--sp-2);align-items:center}.row-end{display:flex;gap:var(--sp-3);justify-content:flex-end;align-items:center;flex-wrap:wrap}.grow{flex:1}.app{min-height:100%;display:flex;flex-direction:column}.page{width:100%;max-width:var(--content-w);margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-5)}.app:not(.screen-home):not(.screen-match){background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--purple) 16%,transparent),transparent 70%),radial-gradient(50% 40% at 100% 100%,color-mix(in srgb,var(--blue) 10%,transparent),transparent 70%),var(--surface-1)}.page.narrow{max-width:520px;text-align:center;align-items:center;justify-content:center;flex:1}.page.narrow form,.page.narrow .row-end{width:100%}.brand{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--text-1)}.brand-mark{display:inline-grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:var(--r-sm);background:var(--green);color:var(--text-on-accent);box-shadow:0 3px 0 var(--green-edge);font:700 1.4rem/1 var(--font-display)}.btn{--bg: var(--surface-4);--edge-c: var(--surface-0);--fg: var(--text-1);position:relative;border:0;border-radius:var(--r-md);padding:12px 20px;background:var(--bg);color:var(--fg);box-shadow:0 var(--edge) 0 var(--edge-c);font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);letter-spacing:.02em;transform:translateY(0);transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),filter var(--dur-2)}.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:active:not(:disabled){transform:translateY(var(--edge));box-shadow:0 0 0 var(--edge-c)}.btn:disabled{--bg: var(--surface-4);--edge-c: var(--surface-0);--fg: var(--text-3);filter:none}.btn:focus-visible{box-shadow:0 var(--edge) 0 var(--edge-c),var(--focus)}.btn-lg{padding:16px 24px;font-size:var(--fs-lg);width:100%;border-radius:var(--r-lg);--edge: var(--edge-lg)}.btn-sm{padding:8px 14px;font-size:var(--fs-sm);border-radius:var(--r-sm);--edge: 3px}.btn-green{--bg: var(--green);--edge-c: var(--green-edge);--fg: var(--text-on-accent)}.btn-blue{--bg: var(--blue);--edge-c: var(--blue-edge);--fg: var(--text-on-accent)}.btn-red{--bg: var(--red);--edge-c: var(--red-edge);--fg: var(--text-on-accent)}.btn-yellow{--bg: var(--yellow);--edge-c: var(--yellow-edge);--fg: var(--text-on-yellow)}.btn-purple{--bg: var(--purple);--edge-c: var(--purple-edge);--fg: var(--text-on-accent)}.btn-ghost{--bg: var(--surface-4);--edge-c: var(--surface-0);--fg: var(--text-1)}.pulse{animation:pulse .9s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.04)}}.field{display:flex;flex-direction:column;gap:var(--sp-2);text-align:left}.field label,.label{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}input{font:inherit;font-weight:var(--fw-bold);width:100%;min-width:0;padding:12px 14px;border-radius:var(--r-sm);border:2px solid var(--line-strong);background:var(--surface-1);color:var(--text-1);transition:border-color var(--dur-2),box-shadow var(--dur-2)}input::placeholder{color:var(--text-3)}input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}.pick{display:flex;align-items:center;gap:var(--sp-2);padding:6px 16px 6px 6px;border-radius:var(--r-md);border:2px solid var(--line-strong);background:var(--surface-3);color:var(--text-1);box-shadow:0 var(--edge) 0 var(--surface-0);font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);transition:transform var(--dur-1),box-shadow var(--dur-1),border-color var(--dur-2),background var(--dur-2)}.pick:hover{background:var(--surface-4)}.pick:active{transform:translateY(var(--edge));box-shadow:0 0 0 var(--surface-0)}.pick.on{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 var(--edge) 0 var(--blue-edge)}.swatch{width:52px;height:52px;border-radius:var(--r-md);border:3px solid transparent;box-shadow:0 var(--edge) 0 #00000073,inset 0 -4px #00000026;transition:transform var(--dur-2) var(--ease-bounce)}.swatch:hover{transform:translateY(-2px)}.swatch.on{border-color:var(--text-1);transform:translateY(-3px) scale(1.06)}.hero-avatar,.greet-avatar,.item-look{background:none;border:0;padding:0;border-radius:var(--r-lg)}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-1);border:1px solid var(--line);font-weight:var(--fw-black);font-size:var(--fs-sm);white-space:nowrap}button.pill{transition:background var(--dur-2)}button.pill:hover{background:var(--surface-4)}.pill.pop{animation:pop .45s var(--ease-spring)}.chip{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);background:var(--purple-soft);color:var(--purple);font-weight:var(--fw-black);font-size:var(--fs-sm)}.coin{display:inline-grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b8 0 12%,var(--yellow) 13% 100%);color:var(--text-on-yellow);box-shadow:inset 0 -3px 0 var(--yellow-edge);font:700 .72rem/1 var(--font-display)}.coin.sm{width:20px;height:20px;font-size:.5rem;box-shadow:inset 0 -2px 0 var(--yellow-edge)}.bar{flex:1;height:16px;border-radius:var(--r-pill);background:var(--surface-0);overflow:hidden;box-shadow:inset 0 2px #0000004d}.bar>span{position:relative;display:block;height:100%;min-width:16px;border-radius:inherit;background:var(--green);transition:width var(--dur-4) var(--ease-bounce)}.bar>span:after{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:var(--r-pill);background:#ffffff59}.bar.small{height:12px;flex:none;width:100%}.bar.small>span:after{top:2px;height:3px}.card,.panel{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-lg)}.section-title{margin:0 0 var(--sp-3);font-family:var(--font-display);font-weight:600;font-size:var(--fs-xl);color:var(--text-1)}.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--sp-3);width:100%}.stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-3) var(--sp-2);background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 var(--edge) 0 var(--surface-0);animation:rise .45s var(--ease-bounce) both;animation-delay:calc(var(--d, 0) * 70ms)}.stat b{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);line-height:1.1}.stat span{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);text-align:center;line-height:1.2}.stat:nth-child(1) b{color:var(--green)}.stat:nth-child(2) b{color:var(--red)}.stat:nth-child(3) b{color:var(--blue)}.stat:nth-child(4) b{color:var(--orange)}.stat:nth-child(5) b{color:var(--purple)}.seg{display:flex;gap:var(--sp-1);padding:var(--sp-1);background:var(--surface-1);border-radius:var(--r-md);border:1px solid var(--line)}.seg button{flex:1;border:0;background:none;padding:8px 6px;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:600;color:var(--text-3);transition:background var(--dur-2),color var(--dur-2)}.seg button:hover{color:var(--text-1);background:var(--hover)}.seg button.on{background:var(--surface-4);color:var(--text-1);box-shadow:0 3px 0 var(--surface-0)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-4);text-align:center;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .2s ease-out}.dialog{width:100%;max-width:400px;padding:var(--sp-6);text-align:left;background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:pop .35s var(--ease-bounce)}.dialog h2{margin:0 0 var(--sp-2);font-family:var(--font-display);font-weight:600;font-size:var(--fs-xl)}.dialog p{margin:0 0 var(--sp-5);color:var(--text-2)}.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--sp-5) + env(safe-area-inset-bottom,0px));z-index:30;transform:translate(-50%);max-width:calc(100% - 32px);padding:12px 18px;border-radius:var(--r-md);background:var(--surface-5);color:var(--text-1);border-left:4px solid var(--yellow);box-shadow:var(--shadow-2);font-weight:var(--fw-bold);animation:toast-in .35s var(--ease-bounce)}@media (min-width: 900px){.toast{bottom:var(--sp-6)}}.rays{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(color-mix(in srgb,var(--ray, var(--yellow)) 32%,transparent) 0 10deg,transparent 10deg 22.5deg);mask:radial-gradient(circle,#000 18%,transparent 68%);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);animation:rotate 18s linear infinite,fade .6s ease-out}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible}.confetti i{position:absolute;top:-10px;left:calc(var(--i) * 4.1%);width:10px;height:14px;border-radius:3px;background:var(--green);animation:fall 2.4s cubic-bezier(.3,.6,.6,1) calc(var(--i) * .05s) both}.confetti i:nth-child(5n){background:var(--blue);width:8px}.confetti i:nth-child(5n+1){background:var(--yellow);border-radius:50%;height:10px}.confetti i:nth-child(5n+2){background:var(--red)}.confetti i:nth-child(5n+3){background:var(--purple);height:8px}.confetti i:nth-child(5n+4){background:var(--pink)}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}to{transform:scale(1)}}@keyframes rise{0%{transform:translateY(14px) scale(.96);opacity:0}}@keyframes toast-in{0%{transform:translate(-50%,20px) scale(.9);opacity:0}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(420px) rotate(720deg);opacity:0}}@keyframes shake{25%{transform:translate(-8px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.rank-badge{flex-shrink:0;display:block}.avatar{display:inline-block;color:#000;flex-shrink:0}.avatar svg{overflow:visible;display:block}.avatar.flip svg{transform:scaleX(-1)}.av-body{transform-origin:60px 128px;transform-box:view-box}.arm{transform-box:view-box}.arm-l{transform-origin:26px 88px}.arm-r{transform-origin:94px 88px}.g-idle .av-body{animation:breathe 3s ease-in-out infinite}.g-cheer .av-body{animation:jump .7s var(--ease-spring) 2}.g-cheer .arm-l{animation:arm-up-l .7s ease-in-out 2}.g-cheer .arm-r{animation:arm-up-r .7s ease-in-out 2}.g-wave .arm-r{animation:wave .35s ease-in-out 4 alternate}.g-wave .av-body{animation:tilt 1.4s ease-in-out}.g-spin .av-body{animation:spin .8s cubic-bezier(.4,1.4,.5,1)}.g-spin .arm-l{animation:arm-up-l .8s ease-in-out}.g-spin .arm-r{animation:arm-up-r .8s ease-in-out}.g-clap .arm-l{animation:clap-l .25s ease-in-out 6 alternate}.g-clap .arm-r{animation:clap-r .25s ease-in-out 6 alternate}.g-clap .av-body{animation:bounce .5s ease-in-out 3}.g-hop .av-body{animation:jump .9s ease-in-out infinite}.g-sad .av-body{animation:droop .6s ease-out forwards}@keyframes breathe{50%{transform:scale(1.02,.98)}}@keyframes jump{0%,to{transform:translateY(0) scale(1)}15%{transform:translateY(0) scale(1.08,.9)}50%{transform:translateY(-22px) scale(.95,1.06)}85%{transform:translateY(0) scale(1.05,.95)}}@keyframes bounce{50%{transform:translateY(-8px)}}@keyframes arm-up-l{30%,70%{transform:rotate(150deg)}}@keyframes arm-up-r{30%,70%{transform:rotate(-150deg)}}@keyframes wave{0%{transform:rotate(-120deg)}to{transform:rotate(-165deg)}}@keyframes tilt{30%,70%{transform:rotate(-6deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes clap-l{0%{transform:rotate(60deg)}to{transform:rotate(95deg)}}@keyframes clap-r{0%{transform:rotate(-60deg)}to{transform:rotate(-95deg)}}@keyframes droop{to{transform:translateY(4px) scale(1.03,.95)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.rays{animation:none}.confetti{display:none}}.r-common{--rc: var(--rarity-common);--rc-t: var(--surface-0)}.r-rare{--rc: var(--rarity-rare);--rc-t: var(--text-on-accent)}.r-epic{--rc: var(--rarity-epic);--rc-t: var(--text-on-accent)}.r-legendary{--rc: var(--rarity-legendary);--rc-t: var(--text-on-yellow)}.rarity-chip{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;background:var(--rc, var(--surface-5));color:var(--rc-t, var(--text-2));font-size:.68rem;font-weight:var(--fw-black);letter-spacing:.08em;text-transform:uppercase}.rarity-chip.big{padding:4px 14px;font-size:var(--fs-sm);box-shadow:0 3px color-mix(in srgb,var(--rc, var(--surface-5)) 55%,#000)}.reconnect-banner{position:fixed;top:calc(var(--sp-3) + env(safe-area-inset-top,0px));left:50%;z-index:35;transform:translate(-50%);display:flex;align-items:center;gap:var(--sp-3);max-width:calc(100% - 32px);padding:10px 16px;border-radius:var(--r-md);background:var(--surface-5);color:var(--text-1);border-left:4px solid var(--orange);box-shadow:var(--shadow-2);font-weight:var(--fw-bold);animation:toast-in .35s var(--ease-bounce)}.spinner{width:16px;height:16px;flex:none;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--orange);animation:rotate .8s linear infinite}.mobile-only{display:none}.desktop-only{display:inline-flex}@media (max-width: 899px){.mobile-only{display:inline-flex}.desktop-only{display:none!important}}.shell{min-height:100%;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);background:var(--surface-2)}.sidebar{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--surface-1);border-right:1px solid var(--line)}.sidebar-head{height:var(--header-h);display:flex;align-items:center;padding:0 var(--sp-4);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1)}.nav{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4) var(--sp-2);flex:1}.nav-label{padding:0 var(--sp-2) var(--sp-2)}.nav-item{position:relative;display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-3);border:0;border-radius:var(--r-sm);background:none;color:var(--text-3);font-weight:var(--fw-bold);font-size:var(--fs-md);text-align:left;transition:background var(--dur-2),color var(--dur-2)}.nav-item svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;flex-shrink:0}.nav-item:hover{background:var(--hover);color:var(--text-1)}.nav-item.on{background:var(--surface-4);color:var(--text-1)}.nav-item.on:before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--text-1)}.net{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0;color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-bold)}.net .dot{width:10px;height:10px;border-radius:50%;background:var(--text-3);flex-shrink:0}.net.on .dot{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}.sidebar>.net{padding:var(--sp-3) var(--sp-4)}.user-panel{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--surface-0);min-height:60px}.user-panel .avatar{background:var(--surface-3);border-radius:50%;padding:2px}.user-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.user-meta b{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-meta span{font-size:var(--fs-xs);color:var(--text-3)}.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--text-2);transition:background var(--dur-2),color var(--dur-2)}.icon-btn:hover{background:var(--hover);color:var(--text-1)}.shell-main{display:flex;flex-direction:column;min-width:0}.topbar{position:sticky;top:0;z-index:5;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:0 var(--sp-4);padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--surface-2) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1)}.topbar-title{display:flex;align-items:center;gap:var(--sp-2);min-width:0}.topbar-title strong{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg)}.topbar-icon svg{width:20px;height:20px;fill:var(--text-3);stroke:var(--text-3)}.topbar-sub{padding-left:var(--sp-3);margin-left:var(--sp-1);border-left:1px solid var(--line-strong);color:var(--text-3);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-stats{display:flex;gap:var(--sp-2);align-items:center;flex-shrink:0}.topbar .icon-btn.pill{width:auto;height:auto;padding:5px 8px}.topbar .brand-mark{width:30px;height:30px;font-size:1.15rem}@media (max-width: 899px){.topbar .brand-mark{display:inline-grid}}.shell-body{display:flex;flex:1;min-height:0}.home-main{flex:1;min-width:0}.activity{width:var(--aside-w);flex-shrink:0;display:none;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);background:var(--surface-1);border-left:1px solid var(--line);position:sticky;top:var(--header-h);height:calc(100dvh - var(--header-h));overflow-y:auto}.activity .eyebrow{margin-top:var(--sp-2)}.activity-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);background:var(--surface-3);border:1px solid var(--line);text-align:left}.activity-card .row{gap:var(--sp-3)}.activity-card .grow{display:flex;flex-direction:column;line-height:1.25}.activity-big{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg)}.activity-card .muted{font-size:var(--fs-sm)}.activity-note{font-size:var(--fs-xs)!important}.activity-box{color:inherit;transition:background var(--dur-2),transform var(--dur-2) var(--ease-bounce)}.activity-box:hover{background:var(--surface-4);transform:translateY(-2px)}.activity-stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.activity-stats li{display:flex;justify-content:space-between;padding:var(--sp-2) var(--sp-1);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2)}.activity-stats b{color:var(--text-1)}@media (min-width: 1200px){.activity{display:flex}}.tabbar{display:none}@media (max-width: 899px){.shell{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.home-main{padding-bottom:calc(var(--tabbar-h) + var(--sp-6) + env(safe-area-inset-bottom,0px))}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom,0px));background:var(--surface-1);border-top:1px solid var(--line-strong)}.tabbar button{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border:0;border-radius:var(--r-md);background:none;color:var(--text-3);font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.04em;text-transform:uppercase;transition:color var(--dur-2),background var(--dur-2)}.tabbar svg{width:24px;height:24px;fill:currentColor;stroke:currentColor;transition:transform var(--dur-3) var(--ease-bounce)}.tabbar button.on{color:var(--blue);background:var(--blue-soft)}.tabbar button.on svg{transform:translateY(-2px) scale(1.12)}}@media (max-width: 480px){.pill-label{display:none}}.play-tab{display:flex;flex-direction:column;gap:var(--sp-6)}.greet{position:relative;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(120deg,color-mix(in srgb,var(--green) 22%,var(--surface-3)),var(--surface-3) 60%);border:1px solid var(--line)}.greet-copy{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}.greet .display{font-size:clamp(1.6rem,5vw,2.2rem);overflow-wrap:anywhere}.greet .net{margin-top:var(--sp-1)}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}.mode-card{--bg: var(--purple);--edge-c: var(--purple-edge);position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border:0;border-radius:var(--r-xl);overflow:hidden;background:var(--bg);color:var(--text-on-accent);text-align:left;box-shadow:0 var(--edge-lg) 0 var(--edge-c);transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),filter var(--dur-2)}.mode-card:after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:#ffffff1a;pointer-events:none}.mode-card:hover{filter:brightness(1.06)}.mode-card:active{transform:translateY(var(--edge-lg));box-shadow:0 0 0 var(--edge-c)}.mode-card:focus-visible{box-shadow:0 var(--edge-lg) 0 var(--edge-c),var(--focus)}.mode-card h2{margin:2px 0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);line-height:1.05}.mode-card .eyebrow{color:#fffc}.mode-sub{color:#ffffffd9;font-size:var(--fs-sm)}.mode-card.quick{--bg: var(--blue);--edge-c: var(--blue-edge);justify-content:space-between}.mode-card .bar{background:#00000040;box-shadow:none}.mode-card-head{display:flex;gap:var(--sp-4);align-items:center}.mode-card-head .rank-badge{filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}.mode-cta{align-self:flex-start;padding:8px 16px;border-radius:var(--r-md);background:var(--text-on-accent);color:var(--bg);font-family:var(--font-display);font-weight:600;box-shadow:0 3px #0003}.mode-card.ranked .mode-cta{color:var(--purple-edge)}.mode-card.quick .mode-cta{color:var(--blue-edge)}.bot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}.bot-btn{--accent: var(--green);--accent-edge: var(--green-edge);display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--r-md);background:var(--surface-3);color:var(--text-1);text-align:left;box-shadow:0 var(--edge) 0 var(--surface-0);transition:transform var(--dur-1),box-shadow var(--dur-1),background var(--dur-2)}.bot-btn:hover{background:var(--surface-4)}.bot-btn:active{transform:translateY(var(--edge));box-shadow:0 0 0 var(--surface-0)}.bot-btn strong{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);color:var(--accent)}.bot-btn span{font-size:var(--fs-sm);color:var(--text-3)}.bot-medium{--accent: var(--blue)}.bot-hard{--accent: var(--red)}.bot-match{--accent: var(--purple)}.shop{display:flex;flex-direction:column;gap:var(--sp-4)}.shop-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}.shop-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4);border-radius:var(--r-xl);background:var(--surface-3);border:1px solid var(--line);overflow:hidden;min-height:260px}.shop-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--yellow) 26%,transparent) 0 22%,transparent 55%);pointer-events:none}.shop-stage>:not(.shop-glow){position:relative}.shop-wallet{display:flex;align-items:center;gap:var(--sp-2);padding:6px 14px 6px 6px;border-radius:var(--r-pill);background:var(--surface-1);color:var(--text-2);font-weight:var(--fw-bold)}.shop-wallet b{color:var(--text-1);font-family:var(--font-display);font-weight:600;font-size:var(--fs-xl)}.box-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-xl);background:linear-gradient(160deg,color-mix(in srgb,var(--purple) 28%,var(--surface-3)),var(--surface-3) 70%);border:1px solid var(--line)}.box-card-head{display:flex;align-items:center;gap:var(--sp-4)}.box-card h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl)}.box-card p{margin:0}.box-card .muted{color:var(--text-2);font-size:var(--fs-sm)}.box-progress{display:flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-black);font-size:var(--fs-sm);color:var(--text-2)}.box-progress .bar{flex:1;width:auto}.box-card .btn.ready{animation:ready-glow 1.6s ease-in-out infinite}@keyframes ready-glow{50%{filter:brightness(1.12);box-shadow:0 var(--edge) 0 var(--edge-c),0 0 24px color-mix(in srgb,var(--yellow) 55%,transparent)}}.box-hint{color:var(--text-3);font-size:var(--fs-sm)}.odds-wrap{border-top:1px solid var(--line);padding-top:var(--sp-2)}.odds-wrap summary{cursor:pointer;font-weight:var(--fw-black);font-size:var(--fs-sm);color:var(--text-2);padding:var(--sp-1) 0}.odds-wrap summary:hover{color:var(--text-1)}.odds-wrap[open] summary{margin-bottom:var(--sp-2)}.odds{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:var(--sp-2)}.odds th,.odds td{padding:7px 4px;text-align:left;border-top:1px solid var(--line)}.odds thead th{border-top:0;font-size:var(--fs-xs);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}.odds td:nth-child(n+2),.odds thead th:nth-child(n+2){text-align:right}.odds td b{color:var(--rc)}.collection-title{margin:var(--sp-3) 0 0}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:var(--sp-3)}.item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-3) var(--sp-2);border-radius:var(--r-md);background:var(--surface-3);border:2px solid transparent;box-shadow:0 var(--edge) 0 var(--surface-0),inset 0 3px 0 var(--rc, transparent);transition:transform var(--dur-2) var(--ease-bounce),border-color var(--dur-2),background var(--dur-2)}.item:hover{transform:translateY(-3px);background:var(--surface-4)}.item.trying{border-color:var(--blue)}.item.equipped{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--surface-3))}.item-name{font-family:var(--font-display);font-weight:600;text-align:center;line-height:1.15}.item-tag{font-size:var(--fs-xs);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.06em;color:var(--green);padding:8px 0}.item.locked .item-look{filter:grayscale(.9) brightness(.75);opacity:.6;transition:filter var(--dur-2),opacity var(--dur-2)}.item.locked .item-look:hover{filter:none;opacity:1}.locked-tag{color:var(--text-3)}.loot-box{position:relative;width:120px;height:110px;flex:none}.loot-box.small{width:64px;height:60px}.loot-box.big{width:180px;height:164px}.loot-lid,.loot-body{position:absolute;left:0;right:0}.loot-lid{top:0;height:32%;z-index:1;border-radius:var(--r-sm) var(--r-sm) var(--r-xs) var(--r-xs);background:var(--purple);box-shadow:inset 0 -4px 0 var(--purple-edge),inset 0 3px #ffffff40}.loot-body{top:28%;bottom:0;margin:0 6%;display:grid;place-items:center;border-radius:var(--r-xs) var(--r-xs) var(--r-sm) var(--r-sm);background:var(--purple-edge);box-shadow:0 5px color-mix(in srgb,var(--purple-edge) 60%,#000);color:var(--yellow);font:700 2.6rem/1 var(--font-display)}.loot-box.small .loot-body{font-size:1.4rem;box-shadow:0 3px color-mix(in srgb,var(--purple-edge) 60%,#000)}.loot-box.big .loot-body{font-size:4rem}.loot-lid:after,.loot-body:before{content:"";position:absolute;left:50%;width:16%;top:0;bottom:0;transform:translate(-50%);background:var(--yellow)}.loot-body:before{z-index:-1}.loot-body{isolation:isolate}.box-card .loot-box{animation:box-idle 2.4s ease-in-out infinite}@keyframes box-idle{0%,to{transform:rotate(0)}8%{transform:rotate(-6deg)}16%{transform:rotate(5deg)}24%{transform:rotate(0)}}.profile{display:flex;flex-direction:column;gap:var(--sp-5)}.profile-head{position:relative;border-radius:var(--r-xl);background:var(--surface-3);border:1px solid var(--line);overflow:hidden}.profile-banner{height:84px;background:linear-gradient(120deg,var(--tier),color-mix(in srgb,var(--tier) 40%,var(--purple)))}.profile-id{display:flex;gap:var(--sp-4);align-items:flex-end;flex-wrap:wrap;padding:0 var(--sp-5) var(--sp-5);margin-top:-56px}.profile-avatar{padding:8px;border-radius:var(--r-xl);background:var(--surface-3)}.profile-id .stack{flex:1;min-width:200px;gap:var(--sp-2)}.rename{display:flex;flex-direction:column;gap:6px}.ladder ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.ladder li{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--surface-3);border:1px solid var(--line);border-left:4px solid var(--tier)}.ladder li:not(.here):not(.past){opacity:.55}.ladder li.here{background:color-mix(in srgb,var(--tier) 18%,var(--surface-3));border-color:var(--tier);box-shadow:0 var(--edge) 0 color-mix(in srgb,var(--tier) 50%,#000)}.ladder-name{flex:1;font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg)}.you-tag{width:100%;padding-left:42px;font-size:var(--fs-sm);font-weight:var(--fw-black);color:var(--text-1)}.account-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--surface-3);border:1px solid var(--line)}.account-row b{color:var(--text-1)}.reset{display:flex;justify-content:center}.reset-confirm{width:100%;padding:var(--sp-4);border-radius:var(--r-lg);background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 45%,transparent)}.reset-confirm p{margin:0 0 var(--sp-3);color:var(--text-1)}.loot-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-4);background:var(--scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .2s ease-out;overflow:hidden}.loot-stage{position:relative;display:grid;place-items:center;width:260px;height:240px}.loot-charge{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--yellow) 55%,transparent) 0,transparent 65%);animation:charge 1.4s ease-in forwards}.loot-status{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);color:var(--text-1)}.loot-sub{margin:0;color:var(--text-2);font-weight:var(--fw-bold)}.loot-box.shaking{animation:box-shake .5s ease-in-out infinite,box-swell 1.4s ease-in forwards}.loot-box.shaking .loot-lid{animation:lid-rattle .25s ease-in-out infinite alternate}@keyframes charge{0%{transform:scale(.3);opacity:.2}to{transform:scale(1.25);opacity:1}}@keyframes box-shake{0%,to{rotate:0deg}20%{rotate:-9deg;translate:0 -4px}40%{rotate:8deg}60%{rotate:-6deg;translate:0 -6px}80%{rotate:5deg}}@keyframes box-swell{to{scale:1.12}}@keyframes lid-rattle{to{transform:translateY(-8px) rotate(-4deg)}}.loot-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--rc) 60%,transparent) 40%,transparent 75%);pointer-events:none;animation:flash .6s ease-out forwards}@keyframes flash{0%{opacity:1}to{opacity:0}}.loot-confetti{inset:0 0 auto;height:0;top:0;z-index:1}.loot-reveal{position:relative;z-index:2;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-5) var(--sp-5);text-align:center;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 26%,var(--surface-3)),var(--surface-3) 55%);border:2px solid var(--rc);border-radius:var(--r-xl);box-shadow:0 var(--edge-lg) 0 color-mix(in srgb,var(--rc) 50%,#000),var(--shadow-3);animation:reveal-pop .55s var(--ease-spring)}.loot-reveal>:not(.loot-rays){position:relative}.loot-rays{position:absolute;left:50%;top:110px;width:560px;height:560px;margin:-280px 0 0 -280px;pointer-events:none;background:repeating-conic-gradient(color-mix(in srgb,var(--rc) 45%,transparent) 0 11deg,transparent 11deg 24deg);mask-image:radial-gradient(circle,#000 15%,transparent 60%);-webkit-mask-image:radial-gradient(circle,#000 15%,transparent 60%);animation:rotate 12s linear infinite}.loot-prize{animation:prize-in .6s .12s var(--ease-spring) backwards}.loot-reveal .rarity-chip{animation:pop .4s .3s var(--ease-bounce) backwards}.loot-reveal .display{font-size:var(--fs-3xl);animation:rise .4s .35s var(--ease-bounce) backwards}.loot-note{margin:0;color:var(--text-2);font-weight:var(--fw-bold);animation:rise .4s .45s var(--ease-bounce) backwards}.loot-note b{color:var(--yellow)}.loot-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-3);animation:rise .4s .55s var(--ease-bounce) backwards}.r-epic .loot-reveal,.r-legendary .loot-reveal{animation:reveal-pop .55s var(--ease-spring),rare-glow 1.4s .55s ease-in-out infinite alternate}.r-legendary .loot-rays{animation-duration:6s}@keyframes reveal-pop{0%{transform:scale(.3) rotate(-6deg);opacity:0}60%{transform:scale(1.05) rotate(1deg);opacity:1}to{transform:scale(1) rotate(0)}}@keyframes prize-in{0%{transform:scale(0) translateY(30px)}}@keyframes rare-glow{to{box-shadow:0 var(--edge-lg) 0 color-mix(in srgb,var(--rc) 50%,#000),0 0 60px 8px color-mix(in srgb,var(--rc) 55%,transparent)}}@media (prefers-reduced-motion: reduce){.loot-rays,.loot-charge,.loot-flash{animation:none}.loot-flash{display:none}}.question-card{width:100%;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-5);border-radius:var(--r-xl);background:var(--surface-3);border:1px solid var(--line);box-shadow:0 var(--edge) 0 var(--surface-0)}.question-card.pop{animation:q-in .3s var(--ease-bounce)}@keyframes q-in{0%{transform:scale(.92);opacity:.4}}.q-text{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,9vw,3.4rem);line-height:1.1;white-space:pre-line;text-align:center}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);width:100%}.tile{--bg: var(--red);--edge-c: var(--red-edge);--fg: var(--text-on-accent);position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:88px;padding:var(--sp-3) var(--sp-4);border:0;border-radius:var(--r-lg);background:var(--bg);color:var(--fg);box-shadow:0 var(--edge-lg) 0 var(--edge-c);font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,6vw,2.2rem);text-align:left;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),opacity var(--dur-2),filter var(--dur-2)}.tile:before{content:"";position:absolute;left:12px;right:12px;top:6px;height:5px;border-radius:var(--r-pill);background:#ffffff38}.tile:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 calc(var(--edge-lg) + 2px) 0 var(--edge-c)}.tile:active:not(:disabled){transform:translateY(var(--edge-lg));box-shadow:0 0 0 var(--edge-c)}.tile:focus-visible{box-shadow:0 var(--edge-lg) 0 var(--edge-c),var(--focus)}.tile:disabled{cursor:default}.tile-blue{--bg: var(--blue);--edge-c: var(--blue-edge)}.tile-yellow{--bg: var(--yellow);--edge-c: var(--yellow-edge);--fg: var(--text-on-yellow)}.tile-green{--bg: var(--green);--edge-c: var(--green-edge)}.tile-shape{width:26px;height:26px;flex-shrink:0;fill:currentColor;opacity:.85}.tile-text{flex:1;min-width:0;overflow-wrap:anywhere}.tile-key{position:absolute;top:8px;right:10px;min-width:22px;padding:1px 6px;border-radius:var(--r-xs);background:#0000002e;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-black);text-align:center}.tile.dim{opacity:.3;filter:saturate(.4)}.tile.right{box-shadow:0 var(--edge-lg) 0 var(--edge-c),0 0 0 4px var(--surface-2),0 0 0 8px var(--green);animation:pop .45s var(--ease-spring)}.tile.wrong{opacity:.55;text-decoration:line-through;animation:shake .35s}@media (hover: none){.tile-key{display:none}}@media (max-width: 480px){.tiles{gap:var(--sp-3)}.tile{min-height:76px;padding:var(--sp-3)}}.welcome{gap:var(--sp-4)}.welcome .brand{font-size:var(--fs-2xl)}.welcome .brand-mark{width:44px;height:44px;font-size:1.7rem}@media (max-width: 480px){.welcome{padding-top:calc(var(--sp-5) + env(safe-area-inset-top,0px))}.welcome .brand{font-size:clamp(var(--fs-xl),7vw,var(--fs-2xl))}.welcome .brand-mark{width:clamp(38px,11vw,44px);height:clamp(38px,11vw,44px);font-size:clamp(1.45rem,6.8vw,1.7rem)}}.hero-avatar{position:relative;margin:var(--sp-2) 0;animation:pop .6s var(--ease-spring)}.hero-avatar:before{content:"";position:absolute;top:10%;right:-10%;bottom:0;left:-10%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 28%,transparent),transparent 65%);z-index:-1}.welcome form{padding:var(--sp-5);border-radius:var(--r-xl);background:var(--surface-3);border:1px solid var(--line);box-shadow:var(--shadow-2);gap:var(--sp-5);animation:rise .5s .1s var(--ease-bounce) backwards}.welcome form .btn-lg{margin-top:var(--sp-1)}.form-error{margin:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);text-align:left;background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);color:var(--text-1);font-size:var(--fs-sm);font-weight:var(--fw-bold)}.account-links{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}.link-btn{background:none;border:0;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs);cursor:pointer;font:inherit;font-weight:var(--fw-bold);color:var(--text-2);text-decoration:underline;text-underline-offset:3px}.link-btn:hover{color:var(--text-1);background:var(--hover)}.progress-dots{display:flex;gap:var(--sp-2);width:100%;max-width:320px}.progress-dots span{flex:1;height:12px;border-radius:var(--r-pill);background:var(--surface-4);transition:background var(--dur-3);position:relative;overflow:hidden}.progress-dots span.on{background:var(--green)}.progress-dots span.on:after{content:"";position:absolute;left:6px;right:6px;top:2px;height:3px;border-radius:var(--r-pill);background:#ffffff59}.tut-art{position:relative;height:200px;width:100%;display:grid;place-items:center;border-radius:var(--r-xl);background:var(--surface-3);border:1px solid var(--line)}.tut-bubble{position:absolute;top:22px;right:calc(50% - 130px);padding:8px 14px;border-radius:var(--r-md);color:var(--text-on-accent);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);transform:rotate(6deg);animation:pop .5s .2s var(--ease-spring) backwards}.timer-bubble{background:var(--blue);box-shadow:0 var(--edge) 0 var(--blue-edge)}.lock-bubble{width:56px;height:56px;display:grid;place-items:center;padding:0;background:var(--red);box-shadow:0 var(--edge) 0 var(--red-edge)}.xp-bubble{background:var(--yellow);color:var(--text-on-yellow);box-shadow:0 var(--edge) 0 var(--yellow-edge)}.tut-ranks{position:absolute;bottom:12px;display:flex;gap:var(--sp-1)}.tut-ranks .rank-badge{animation:rise .4s var(--ease-bounce) backwards}.tut-ranks .rank-badge:nth-child(2){animation-delay:60ms}.tut-ranks .rank-badge:nth-child(3){animation-delay:.12s}.tut-ranks .rank-badge:nth-child(4){animation-delay:.18s}.tut-ranks .rank-badge:nth-child(5){animation-delay:.24s}.tut-ranks .rank-badge:nth-child(6){animation-delay:.3s}.tutorial .row-end{flex-wrap:nowrap}.tutorial .row-end .btn-lg{width:auto}.placement{text-align:left;align-items:stretch;justify-content:flex-start}.placement-top{display:flex;align-items:center;gap:var(--sp-3)}.placement-top .muted{font-weight:var(--fw-black);color:var(--text-2)}.placement-head{display:flex;align-items:center;gap:var(--sp-3)}.speech{position:relative;display:flex;flex-direction:column;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--surface-3);border:1px solid var(--line-strong);font-size:var(--fs-sm)}.speech:before{content:"";position:absolute;left:-8px;top:50%;width:14px;height:14px;background:var(--surface-3);border-left:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);transform:translateY(-50%) rotate(45deg)}.speech strong{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg)}.speech span{color:var(--text-2)}.q-meta{display:flex;justify-content:space-between;align-items:center;width:100%}.q-timer{font-family:var(--font-display);font-weight:600;font-size:var(--fs-xl);color:var(--text-3)}.q-timer.warn{color:var(--red);animation:pulse 1s ease-in-out infinite}.placed-stage{position:relative;height:240px;width:100%;display:grid;place-items:center}.placed-stage .rank-badge{position:relative;animation:badge-in .8s var(--ease-spring);filter:drop-shadow(0 8px 0 rgba(0,0,0,.35))}.placed-avatar{position:absolute;bottom:0;right:calc(50% - 150px)}.burst{position:absolute;width:300px;height:300px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--yellow) 38%,transparent) 0 10deg,transparent 10deg 22.5deg);mask-image:radial-gradient(circle,#000 20%,transparent 68%);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 68%);animation:rotate 16s linear infinite}.rank-title{font-size:var(--fs-hero);text-shadow:0 4px 0 rgba(0,0,0,.35);animation:pop .5s .3s var(--ease-spring) backwards}.placed .lead strong{color:var(--text-1)}@keyframes badge-in{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.12) rotate(4deg)}to{transform:scale(1) rotate(0)}}.searching{gap:var(--sp-4)}.radar{position:relative;width:0;height:0;top:80px}.radar span{position:absolute;left:-110px;top:-110px;width:220px;height:220px;border-radius:50%;border:3px solid var(--blue);background:radial-gradient(circle,transparent 55%,var(--blue-soft));opacity:0;animation:ring 2.4s var(--ease-out) infinite}.radar span:nth-child(2){animation-delay:.8s}.radar span:nth-child(3){animation-delay:1.6s}@keyframes ring{0%{transform:scale(.35);opacity:.9}to{transform:scale(1.25);opacity:0}}.searching .lead{padding:6px 16px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--line);color:var(--text-1);font-weight:var(--fw-bold);font-size:var(--fs-md)}.tip{max-width:420px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--surface-3);border:1px solid var(--line);color:var(--text-2);text-align:left}.tip strong{margin-right:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--yellow);color:var(--text-on-yellow);font-size:var(--fs-xs);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.06em}.screen-match{background:radial-gradient(70% 45% at 50% 0%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 70%),var(--surface-1)}.match{gap:var(--sp-4);padding-top:var(--sp-3);flex:1}.match-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}.mode-pill{padding:4px 12px;border-radius:var(--r-pill);background:var(--purple);color:var(--text-on-accent);font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.08em;text-transform:uppercase}.mode-quickplay{background:var(--blue)}.mode-bot{background:var(--orange)}.lvl{padding:4px 12px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-black)}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3) var(--sp-4);border-radius:var(--r-xl);background:var(--surface-2);border:1px solid var(--line)}.pcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.pcard-avatar{position:relative;height:104px;display:flex;align-items:flex-end}.pcard-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);font-weight:var(--fw-black);color:var(--text-2)}.pcard-score{font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1;animation:score-pop .4s var(--ease-spring)}.pcard-me .pcard-score{color:var(--green)}.pcard-opp .pcard-score{color:var(--purple)}@keyframes score-pop{40%{transform:scale(1.4)}}.streak{position:absolute;top:0;padding:2px 10px;border-radius:var(--r-pill);background:var(--orange);color:var(--text-on-accent);font-size:var(--fs-xs);font-weight:var(--fw-black);white-space:nowrap;box-shadow:0 3px 0 var(--orange-edge);animation:pop .4s var(--ease-spring)}.sparkles{position:absolute;left:50%;top:40%;pointer-events:none}.sparkles i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--yellow);transform:rotate(var(--a)) translateY(0);animation:spark .7s ease-out forwards}.sparkles i:nth-child(3n){background:var(--blue)}.sparkles i:nth-child(3n+1){background:var(--green);border-radius:2px}.plus-one{position:absolute;left:-32px;top:-44px;padding:2px 10px;border-radius:var(--r-pill);background:var(--yellow);color:var(--text-on-yellow);font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);white-space:nowrap;box-shadow:0 3px 0 var(--yellow-edge);animation:float-up .9s var(--ease-out) forwards}@keyframes spark{to{transform:rotate(var(--a)) translateY(-60px) scale(.3);opacity:0}}@keyframes float-up{0%{transform:translateY(10px) scale(.6);opacity:0}25%{transform:translateY(0) scale(1.1);opacity:1}to{transform:translateY(-34px) scale(1);opacity:0}}.clock{position:relative;width:86px;height:86px;margin-bottom:18px}.clock svg{width:100%;height:100%;transform:rotate(-90deg)}.clock-track{fill:var(--surface-3);stroke:var(--surface-0);stroke-width:10}.clock-fill{fill:none;stroke:var(--green);stroke-width:10;stroke-linecap:round;stroke-dasharray:276.5;transition:stroke-dashoffset .1s linear,stroke var(--dur-3)}.clock.hurry .clock-fill{stroke:var(--red)}.clock.hurry{animation:pulse 1s ease-in-out infinite}.clock-num{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--text-1)}.play-area{position:relative;display:flex;flex-direction:column;gap:var(--sp-4);min-height:340px}.combo{position:absolute;z-index:4;top:-18px;left:50%;display:flex;flex-direction:column;align-items:center;pointer-events:none;white-space:nowrap;transform:translate(-50%);animation:combo-in 1.3s var(--ease-spring) forwards}.combo-tier{padding:3px 12px;border-radius:var(--r-pill);background:var(--blue);color:var(--text-on-accent);font-size:var(--fs-sm);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.06em;box-shadow:0 3px 0 var(--blue-edge)}.combo-name{margin-top:2px;font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--yellow);text-transform:uppercase;text-shadow:0 4px 0 var(--surface-0),0 0 24px color-mix(in srgb,var(--yellow) 50%,transparent)}.combo-3 .combo-name{color:var(--orange);font-size:2.8rem;text-shadow:0 4px 0 var(--surface-0),0 0 24px color-mix(in srgb,var(--orange) 55%,transparent)}.combo-4 .combo-name{color:var(--red);font-size:3.2rem;text-shadow:0 4px 0 var(--surface-0),0 0 28px color-mix(in srgb,var(--red) 55%,transparent)}.combo-5 .combo-name,.combo-6 .combo-name{font-size:3.6rem;background:linear-gradient(90deg,var(--red),var(--yellow),var(--green),var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 0 var(--surface-0))}.combo-4,.combo-5,.combo-6{animation-name:combo-in-big}@keyframes combo-in{0%{transform:translate(-50%) scale(.3);opacity:0}18%{transform:translate(-50%) scale(1.15);opacity:1}30%{transform:translate(-50%) scale(1)}80%{opacity:1}to{transform:translate(-50%) translateY(-16px);opacity:0}}@keyframes combo-in-big{0%{transform:translate(-50%) scale(2.2) rotate(-8deg);opacity:0}15%{transform:translate(-50%) scale(.9) rotate(3deg);opacity:1}25%{transform:translate(-50%) scale(1.05) rotate(-2deg)}35%{transform:translate(-50%) scale(1) rotate(0)}80%{opacity:1}to{transform:translate(-50%) translateY(-16px);opacity:0}}.lockout{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-6);text-align:center;border-radius:var(--r-xl);background:var(--red-soft);border:2px solid color-mix(in srgb,var(--red) 50%,transparent);animation:shake .35s}.lock-ring{position:relative;width:92px;height:92px}.lock-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.lock-fill{fill:none;stroke:var(--red);stroke-width:10;stroke-linecap:round;stroke-dasharray:276.5}.lock-ring span{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:var(--red)}.lock-copy{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-lg);color:var(--text-2)}.lock-copy strong{font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);color:var(--red)}.lock-q{font-family:var(--font-display);font-weight:600;font-size:var(--fs-xl);color:var(--text-1)}.lock-ans{display:inline-block;padding:0 10px;border-radius:var(--r-sm);background:var(--green-soft);color:var(--green);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl)}.vs-row{display:flex;align-items:center;gap:var(--sp-4)}.vs-row .avatar:first-child{animation:slide-l .5s var(--ease-bounce)}.vs-row .avatar:last-child{animation:slide-r .5s var(--ease-bounce)}.vs{font-family:var(--font-display);font-weight:700;font-size:3rem;color:var(--yellow);transform:rotate(-8deg);text-shadow:0 4px 0 var(--yellow-edge)}.vs-names{display:flex;gap:60px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);color:var(--text-1)}.overlay .hint{padding:6px 12px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--text-2)}.count-num{font-family:var(--font-display);font-weight:700;font-size:7rem;line-height:1;color:var(--yellow);text-shadow:0 7px 0 var(--yellow-edge);animation:count .9s var(--ease-out)}@keyframes count{0%{transform:scale(2.2) rotate(-10deg);opacity:0}30%{transform:scale(1) rotate(0);opacity:1}}@keyframes slide-l{0%{transform:translate(-80px);opacity:0}}@keyframes slide-r{0%{transform:translate(80px);opacity:0}}@media (max-width: 480px){.vs-names{gap:30px}.combo-name{font-size:2rem}.combo-4 .combo-name{font-size:2.6rem}.combo-5 .combo-name,.combo-6 .combo-name{font-size:2.8rem}.scoreboard{padding-inline:var(--sp-2)}}.results{gap:var(--sp-4)}.results-stage{position:relative;width:100%;padding-top:var(--sp-4)}.results-stage .rays{--ray: var(--yellow);top:45%}.results-stage .confetti{top:-40px;right:0;bottom:0;left:0}.results-avatars{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:var(--sp-5)}.ra{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}.ra-score,.ra-dash{font-family:var(--font-display);font-weight:700;font-size:2.8rem;line-height:1}.ra:first-child .ra-score{color:var(--green)}.ra:last-child .ra-score{color:var(--purple)}.ra-dash{padding-bottom:6px;color:var(--text-3)}.results-title{font-size:var(--fs-hero);animation:pop .55s var(--ease-spring)}.outcome-win .results-title{color:var(--yellow);text-shadow:0 5px 0 var(--yellow-edge)}.outcome-loss .results-title{color:var(--text-1)}.outcome-draw .results-title{color:var(--orange);text-shadow:0 5px 0 var(--orange-edge)}.results .stat-row{grid-template-columns:repeat(4,1fr)}.reward-row{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);width:100%}.reward{display:flex;align-items:center;gap:var(--sp-3);min-width:0;padding:var(--sp-4);text-align:left;border-radius:var(--r-lg);background:var(--surface-3);border:1px solid var(--line);box-shadow:0 var(--edge) 0 var(--surface-0);animation:rise .5s .3s var(--ease-bounce) backwards}.reward.xp{flex-direction:column;justify-content:center;gap:2px;padding-inline:var(--sp-6);text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--yellow) 22%,var(--surface-3)),var(--surface-3) 70%);border-color:color-mix(in srgb,var(--yellow) 40%,transparent);box-shadow:0 var(--edge) 0 color-mix(in srgb,var(--yellow-edge) 55%,#000)}.reward.xp .coin{width:44px;height:44px;font-size:.85rem;animation:coin-flip .9s .4s var(--ease-bounce) backwards}.xp-label{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-top:var(--sp-1)}.reward.xp b{font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;color:var(--yellow)}.reward.xp span:last-child{font-size:var(--fs-xs);color:var(--text-3)}@keyframes coin-flip{0%{transform:scale(0) rotateY(0)}60%{transform:scale(1.2) rotateY(540deg)}to{transform:scale(1) rotateY(720deg)}}.reward.mmr{animation-delay:.4s}.mmr-body{flex:1;display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;font-size:var(--fs-sm)}.mmr-line{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-lg)}.mmr-line strong{font-family:var(--font-display);font-weight:600}.delta{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl)}.delta.up{color:var(--green)}.delta.down{color:var(--red)}.banner{width:100%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);color:var(--text-on-accent);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);animation:pop .6s .6s var(--ease-spring) backwards}.banner.up{background:var(--purple);box-shadow:0 var(--edge) 0 var(--purple-edge),0 0 40px color-mix(in srgb,var(--purple) 45%,transparent)}.banner.down{background:var(--surface-4);color:var(--text-2);box-shadow:0 var(--edge) 0 var(--surface-0);font-size:var(--fs-lg)}.results-actions{display:flex;flex-direction:column;gap:var(--sp-3);width:100%;margin-top:var(--sp-2)}@media (max-width: 480px){.reward-row{grid-template-columns:1fr}.reward.xp{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"coin label" "coin num" "coin note";column-gap:var(--sp-3);text-align:left;padding-inline:var(--sp-4)}.reward.xp .coin{grid-area:coin}.reward.xp .xp-label{grid-area:label}.reward.xp b{grid-area:num}.reward.xp span:last-child{grid-area:note}.results .stat-row{grid-template-columns:repeat(2,1fr)}}