:root{--bg-0: #0b0a1e;--bg-1: #14123a;--bg-2: #1b1850;--ink-0: #f4eefe;--ink-1: #d8d2ef;--ink-2: #9d97c0;--ink-3: #6c6792;--gold-0: #f5c46b;--gold-1: #f7e5a8;--violet-0: #a17df0;--violet-1: #d6a8ff;--danger: #ff6b8a;--ok: #6ee7a8;--card: rgba(255, 255, 255, .04);--card-strong: rgba(255, 255, 255, .07);--line: rgba(255, 255, 255, .09);--shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .6);--r-sm: 10px;--r-md: 14px;--r-lg: 22px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg-0);color:var(--ink-0);overscroll-behavior:none}button{font-family:inherit}.app-root{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(1100px 600px at 50% -10%,rgba(161,125,240,.18),transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(245,196,107,.1),transparent 60%),var(--bg-0)}.app-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:max(env(safe-area-inset-top),18px) 16px max(env(safe-area-inset-bottom),18px);width:100%;max-width:520px;margin:0 auto}.brand{font-weight:900;letter-spacing:-.02em;line-height:1;background:linear-gradient(135deg,var(--gold-0) 0%,var(--gold-1) 45%,var(--violet-1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-xl{font-size:clamp(2.6rem,9vw,3.4rem)}.brand-lg{font-size:2rem}.tagline{margin:8px 0 0;color:var(--ink-2);font-size:.95rem;text-align:center;letter-spacing:.01em}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;backdrop-filter:blur(8px);box-shadow:var(--shadow-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card-strong);color:var(--ink-0);font-weight:700;font-size:.95rem;cursor:pointer;transition:transform 80ms ease,background .12s ease,border-color .12s ease;width:100%}.btn:hover{background:#ffffff1a}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(135deg,var(--gold-0),var(--violet-0));color:#1a1238;border-color:transparent;box-shadow:0 18px 40px -16px #a17df0b3}.btn.primary:hover{filter:brightness(1.05);background:linear-gradient(135deg,var(--gold-0),var(--violet-0))}.btn.ghost{background:transparent}.btn.danger{color:var(--danger);border-color:#ff6b8a4d}.btn.compact{padding:9px 12px;font-size:.85rem;width:auto}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin:14px 0 10px}.hud .pill{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px}.hud .pill .label{color:var(--ink-3);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.hud .pill .value{color:var(--ink-0);font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}.toolbar{display:flex;gap:8px;width:100%;margin:6px 0 14px}.toolbar .btn{width:100%;padding:11px 8px;font-size:.85rem}.board-wrap{width:100%;max-width:460px;margin:0 auto;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}.board{display:grid;gap:0;width:100%;aspect-ratio:1 / 1;border-radius:14px;overflow:hidden;background:#00000040}.cell{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;outline:1px solid rgba(0,0,0,.18);transition:background-color .14s ease}.cell .crown-svg{width:70%;height:70%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));animation:crownPop .22s cubic-bezier(.34,1.56,.64,1)}.cell .x-mark{width:36%;height:36%;opacity:.55;stroke:#140e32d9;stroke-width:2.4;stroke-linecap:round;fill:none}.cell.violation:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,107,138,.55),rgba(255,107,138,.15) 70%,transparent);animation:violationPulse .9s ease-in-out infinite;pointer-events:none}.cell.hint:before{content:"";position:absolute;inset:4px;border-radius:8px;box-shadow:0 0 0 3px #d6a8fff2,0 0 24px #f5c46bb3;animation:hintPulse 1.4s ease-in-out infinite;pointer-events:none;z-index:2}@keyframes hintPulse{0%,to{box-shadow:0 0 0 3px #d6a8fff2,0 0 18px #f5c46b80}50%{box-shadow:0 0 0 4px #d6a8ff,0 0 36px #f5c46be6}}.cell.region-edge-t{border-top:2px solid rgba(20,14,50,.55)}.cell.region-edge-b{border-bottom:2px solid rgba(20,14,50,.55)}.cell.region-edge-l{border-left:2px solid rgba(20,14,50,.55)}.cell.region-edge-r{border-right:2px solid rgba(20,14,50,.55)}@keyframes crownPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:1}}@keyframes violationPulse{0%,to{opacity:.6}50%{opacity:1}}.row-list{display:flex;flex-direction:column;gap:10px;width:100%}.row-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;text-align:left;color:var(--ink-0);width:100%;transition:background .12s ease,transform 80ms ease}.row-item:hover{background:var(--card-strong)}.row-item:active{transform:scale(.99)}.row-item .title{font-weight:800;font-size:.98rem}.row-item .meta{color:var(--ink-2);font-size:.78rem;margin-top:2px}.row-item .chev{margin-left:auto;color:var(--ink-3)}.section-title{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-size:.7rem;font-weight:800;margin:18px 4px 8px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 8px;text-align:center}.stat .label{color:var(--ink-3);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.stat .value{color:var(--ink-0);font-weight:800;font-size:1.05rem;margin-top:4px;font-variant-numeric:tabular-nums}.overlay{position:fixed;inset:0;z-index:50;background:#08061ab3;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px}.overlay-panel{width:100%;max-width:420px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto}.overlay-panel h3{margin:0 0 10px;font-size:1.1rem}.overlay-panel p{color:var(--ink-1);font-size:.9rem;line-height:1.5}.countdown{display:inline-flex;gap:4px;align-items:baseline;font-variant-numeric:tabular-nums;color:var(--gold-1);font-weight:800}.tut-root{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:12px}.tut-progress{display:flex;gap:6px}.tut-pip{width:36px;height:4px;border-radius:2px;background:#ffffff1a;transition:background .4s ease}.tut-pip.on{background:linear-gradient(135deg,var(--gold-0),var(--violet-0))}.tut-label{color:var(--gold-1);font-weight:800;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}.tut-title{font-size:1.25rem;font-weight:900;text-align:center;margin:0}.tut-sub{color:var(--ink-2);font-size:.85rem;text-align:center;margin:0;max-width:360px}.tut-tip{background:#d6a8ff14;border:1px solid rgba(214,168,255,.28);border-radius:14px;padding:10px 16px;font-size:.86rem;color:var(--ink-0);text-align:center;max-width:340px;animation:tutFade .32s ease}.tut-tip.success{background:#6ee7a81a;border-color:#6ee7a859;color:var(--ok)}@keyframes tutFade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tut-celebrate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a07188c;border-radius:18px;z-index:5;animation:tutFade .32s ease}.tut-celebrate span{font-size:64px;animation:tutPop .6s cubic-bezier(.34,1.56,.64,1)}@keyframes tutPop{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.tut-demo-board{position:relative;width:100%;max-width:320px;margin:0 auto;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}.tut-demo-grid{display:grid;gap:0;width:100%;aspect-ratio:1 / 1;border-radius:14px;overflow:hidden;background:#00000040}.tut-demo-cell{position:relative;display:flex;align-items:center;justify-content:center;outline:1px solid rgba(0,0,0,.18);transition:filter .2s ease,box-shadow .2s ease}.tut-demo-cell .crown-svg{width:70%;height:70%;animation:crownPop .28s cubic-bezier(.34,1.56,.64,1)}.tut-demo-cell.hl-row{box-shadow:inset 0 0 0 4px #f5c46bb3;z-index:1}.tut-demo-cell.hl-col{box-shadow:inset 0 0 0 4px #d6a8ffb3;z-index:1}.tut-demo-cell.hl-region{filter:brightness(1.18) saturate(1.12)}.tut-demo-cell.hl-row.hl-col{box-shadow:inset 0 0 0 4px #f5c46bcc,inset 0 0 0 8px #d6a8ffb3}.tut-demo-cell .x-mark{width:36%;height:36%;opacity:.55;stroke:#140e32d9;stroke-width:2.4;stroke-linecap:round;fill:none;animation:xFadeIn .42s ease}@keyframes xFadeIn{0%{opacity:0;transform:scale(.6)}to{opacity:.55;transform:scale(1)}}.tut-cell-demo{width:140px;height:140px;display:flex;align-items:center;justify-content:center;background:#f8d7a7;border-radius:18px;cursor:pointer;position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation;box-shadow:0 0 0 3px #d6a8ffd9,0 0 36px #f5c46b8c;animation:hintPulse 1.4s ease-in-out infinite}.htp-anim-board{position:relative}.htp-anim-board .crown-svg{width:70%;height:70%;animation:crownPop .28s cubic-bezier(.34,1.56,.64,1)}.htp-tips{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:14px}.htp-tip{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#ffffff08;border:1px solid var(--line);color:var(--ink-2);font-size:.85rem;opacity:.6;transition:all .3s ease}.htp-tip.active{background:#d6a8ff1a;border-color:#d6a8ff59;color:var(--ink-0);opacity:1}.htp-tip .icon{font-size:1.1rem}.center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.row{display:flex;gap:10px;align-items:center}.spacer{flex:1}.muted{color:var(--ink-2)}.small{font-size:.82rem}.daily-icon-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s ease}.daily-icon-btn:hover{transform:scale(1.05)}.daily-icon-tile{position:relative;width:76px;height:76px;border-radius:18px;background:radial-gradient(120% 100% at 50% 0%,rgba(245,196,107,.22),transparent 60%),linear-gradient(135deg,#f5c46b29,#a17df029);border:1px solid rgba(245,196,107,.45);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px #a17df047}.daily-icon-tile.glow{animation:dailyGlow 2.2s ease-in-out infinite}@keyframes dailyGlow{0%,to{box-shadow:0 8px 26px #a17df047,0 0 #f5c46b00}50%{box-shadow:0 10px 30px #a17df066,0 0 24px 4px #f5c46b59}}.daily-bob{animation:dailyBob 2.4s ease-in-out infinite;transform-origin:center}@keyframes dailyBob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-2deg)}}.daily-new-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,var(--gold-0),var(--violet-0));border:2px solid var(--bg-0);border-radius:8px;padding:2px 6px;color:#1a1238;font-weight:900;font-size:.58rem;letter-spacing:.5px;line-height:1.3;white-space:nowrap}.daily-done-check{position:absolute;bottom:-4px;right:-4px;width:22px;height:22px;border-radius:11px;background:var(--ok);border:2px solid var(--bg-0);color:#0b0a1e;font-weight:900;font-size:.72rem;display:flex;align-items:center;justify-content:center;line-height:1}.daily-day-pill{position:absolute;left:-6px;bottom:-6px;min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:linear-gradient(135deg,#2a1f55,#1a1238);border:2px solid var(--gold-0);color:var(--gold-1);font-weight:900;font-size:.7rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0006}.daily-icon-label{color:var(--gold-1);font-weight:800;font-size:.82rem;letter-spacing:.3px}.daily-icon-sub{color:var(--ink-3);font-weight:600;font-size:.66rem}.start-screen{flex:1;display:flex;align-items:flex-start;justify-content:center;width:100%;padding:20px 16px max(env(safe-area-inset-bottom),20px)}.start-card{background:linear-gradient(145deg,var(--bg-1),var(--bg-2));border:1px solid var(--line);border-radius:24px;padding:28px 24px;text-align:center;max-width:420px;width:100%;box-shadow:0 32px 80px #00000080,0 0 0 1px #a17df01f;display:flex;flex-direction:column;gap:0}.auth-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:nowrap}.auth-bar .user-info{flex:1;min-width:0;text-align:left}.auth-bar .user-name{font-weight:700;font-size:.92rem;color:var(--ink-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-bar .user-league{font-size:.66rem;margin-top:1px;white-space:nowrap}.btn-signin{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:var(--r-md);border:1px solid var(--gold-0);background:transparent;color:var(--gold-0);font-weight:700;font-size:.82rem;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s ease}.btn-signin:hover{background:#f5c46b1a}.game-title{font-size:2.4rem;font-weight:900;letter-spacing:-.02em;line-height:1;background:linear-gradient(135deg,var(--gold-0) 0%,var(--gold-1) 45%,var(--violet-1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 4px}.game-subtitle{color:var(--ink-3);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}.how-to-blurb{background:#ffffff0a;border-radius:var(--r-sm);padding:12px 16px;margin-bottom:18px;font-size:.85rem;color:var(--ink-2);line-height:1.6;text-align:center}.mode-buttons{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.mode-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;border:none;border-radius:var(--r-sm);color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;letter-spacing:.3px;transition:opacity .15s,transform .12s}.mode-btn:hover{opacity:.92;transform:translateY(-1px)}.mode-btn:active{transform:translateY(0);opacity:.85}.mode-btn .badge{background:#ffffff38;border-radius:20px;padding:2px 10px;font-size:.72rem;font-weight:700}.sec-buttons{display:flex;gap:8px;margin-top:8px}.sec-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:#ffffff0f;color:var(--ink-1);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,transform .12s}.sec-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.sec-btn:active{transform:translateY(0)}.mp-panel{max-width:360px!important}.mp-section{background:#ffffff0a;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px}.mp-section-label{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}.mp-section-note{font-size:.72rem;color:var(--ink-3);text-align:center}.mode-row{display:flex;gap:8px;width:100%}.mode-row .btn{flex:1}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:16px;border-bottom:1px solid var(--line)}.auth-tab{padding:9px 0;font-size:.9rem;font-weight:700;color:var(--ink-3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease}.auth-tab.active{color:var(--gold-0);border-bottom-color:var(--gold-0)}.screen-panel{width:100%;display:flex;flex-direction:column;gap:0}.screen-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.screen-panel-header h2{margin:0;font-size:1.2rem;font-weight:900}.screen-section-label{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:14px 2px 6px}.screen-section-label:first-child{margin-top:0}.arcade-badge{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;color:#1a1238;flex-shrink:0;background:linear-gradient(135deg,var(--gold-0),var(--gold-1));border:1px solid rgba(0,0,0,.12);box-shadow:0 4px 12px #f5c46b40}.arcade-badge[data-tier=medium]{background:linear-gradient(135deg,var(--gold-0),var(--violet-1))}.arcade-badge[data-tier=hard]{background:linear-gradient(135deg,var(--violet-0),#6e3fa8);color:#fff;box-shadow:0 4px 14px #a17df059}.score-name-input::placeholder{color:var(--muted)}.score-name-input:focus{border-color:#f0c040;box-shadow:0 0 0 3px #f0c0402e}