.immersive{--bg:oklch(95.902% .01554 86.425);--surface:oklch(88.788% .02491 83.415);--fg:oklch(23.319% .01272 77.995);--muted:oklch(50.922% .01719 80.649);--border:oklch(80.743% .02963 84.589);--accent:oklch(62.378% .10212 77.989);--paper:var(--bg);--ink:var(--fg);--line:var(--border);--font-display:"Marcellus", "Songti SC", "Noto Serif CJK SC", serif;--font-body:"Archivo", "PingFang SC", "Microsoft YaHei", sans-serif;--tile-gold:oklch(81.777% .0966 82.877);--tile-silver:oklch(88.723% .01576 248.005);--tile-ink:oklch(33.757% .02304 77.846);--tile-target:oklch(49.088% .12818 32.299);--tile-violet:oklch(47.932% .11576 305.205);--tile-green:oklch(41.092% .04835 162.929);--board-size:min(560px, calc(100vw - 40px), calc(100dvh - 332px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));background:var(--bg);height:100dvh;color:var(--fg);font:15px/1.75 var(--font-body);overscroll-behavior:none;margin:0;padding:0}.immersive h1,.immersive h2,.immersive h3{font-family:var(--font-display);letter-spacing:0;font-weight:400;line-height:1.35}.immersive button{letter-spacing:.02em}.immersive button:focus-visible,.immersive a:focus-visible,.immersive input:focus-visible{outline:2px solid var(--fg);outline-offset:4px}.immersive button:disabled{opacity:.4}.immersive .app-header{height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 32px 0;justify-content:space-between;align-items:center;gap:12px;display:flex}.home-link{font:400 22px/1.35 var(--font-display);background:0 0;border:0;flex-shrink:0;align-items:center;gap:12px;min-height:44px;padding:0;display:inline-flex}.immersive .brand-mark{background:var(--accent);grid-template-columns:repeat(3,8px)}.immersive .brand-mark i{background:var(--tile-gold);width:8px;height:8px}.immersive .brand-mark i:nth-child(5){background:var(--tile-silver)}.mode-label{color:var(--muted);font-size:13px}.immersive .game-tools{gap:4px}.immersive .icon-button{width:44px;height:44px;color:var(--fg);border-radius:4px}.immersive .icon-button:hover{background:var(--surface);color:var(--fg)}.immersive .icon-button:active{transform:translateY(1px)}.immersive .icon-button svg{width:20px;height:20px}.immersive-main{height:calc(100dvh - 64px - env(safe-area-inset-top));display:flow-root}.launch-screen{text-align:center;height:100%;padding:24px 24px calc(24px + env(safe-area-inset-bottom));grid-template-rows:1fr auto;display:grid}.launch-inner{place-self:center;width:min(100%,430px);padding-bottom:32px}.launch-emblem{width:clamp(90px,13vh,128px);filter:drop-shadow(3px 7px 3px oklch(from var(--fg) l c h / .12));grid-template-columns:repeat(3,1fr);margin:0 auto 38px;animation:.8s cubic-bezier(.2,.8,.2,1) both emblem-settle;display:grid}.launch-emblem .tile{border-width:5px}.launch-wordmark{justify-content:center;align-items:baseline;gap:10px;display:flex}.immersive .launch-wordmark h1{font-family:"Brand", var(--font-display);gap:12px;margin:0;font-size:clamp(52px,8vw,72px);display:flex}.immersive .word-gold{color:var(--accent);text-shadow:none}.immersive .word-clad{color:var(--tile-target)}.immersive .word-silver{color:oklch(from var(--tile-silver) .55 c h)}.launch-actions{gap:10px;width:min(290px,100%);margin:36px auto 0;display:grid}.immersive .button{border-color:var(--border);min-height:52px;color:var(--fg);background:var(--bg);box-shadow:0 3px 0 var(--surface);filter:none;border-radius:4px;padding:12px 22px;font-size:15px}.immersive .button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg);box-shadow:0 4px 0 oklch(from var(--fg) calc(l - .06) c h)}.immersive .button:hover{background:var(--surface);color:var(--fg);border-color:var(--muted)}.immersive .button.primary:hover{background:oklch(from var(--fg) calc(l - .08) c h);color:var(--bg);border-color:var(--fg)}.immersive .button:active{box-shadow:none;transform:translateY(3px)}.immersive .text-button{white-space:normal;min-height:44px;color:var(--muted);padding:10px 8px;font-size:13px;line-height:1.5}.immersive .text-button:hover{color:var(--fg);text-underline-offset:5px;text-decoration:underline}.launch-footer{color:var(--muted);letter-spacing:.02em;margin:0;font-size:12px}.immersive .game-shell{width:var(--board-size);max-width:calc(100vw - 32px);height:calc(var(--board-size) + 266px);margin:max(0px, calc(( 100dvh - 64px - var(--board-size) - 266px - env(safe-area-inset-top) - env(safe-area-inset-bottom) ) / 2)) auto 0;box-shadow:none;grid-template-rows:68px 24px var(--board-size) 110px 44px;background:0 0;border:0;border-radius:0;padding:10px 0;display:grid}.immersive .score-row{align-items:center;min-height:0;margin:0;padding:0 3px}.immersive .small-label{font:12px/1.5 var(--font-body);letter-spacing:.02em;color:var(--muted)}.immersive .score{color:var(--fg);font:400 calc(40px * var(--score-scale,1)) / 1.15 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;max-width:none;overflow:visible}.immersive .best-score{padding:0}.immersive .best-score strong{color:var(--fg);font:400 calc(24px * var(--best-scale,1)) / 1.3 var(--font-display);margin:2px 0 0}.immersive .best-score .small-label{color:var(--muted)}.immersive .combo{letter-spacing:.01em;height:24px;min-height:0;color:var(--muted);padding:1px 0;font-size:12px;line-height:20px}.immersive .combo.live{color:var(--tile-target)}.immersive .board-frame{background:var(--border);width:100%;height:100%;box-shadow:inset 0 2px 3px oklch(from var(--fg) l c h / .2), 0 1px 0 oklch(from var(--bg) calc(l + .02) c h), 0 8px 24px oklch(from var(--fg) l c h / .05);border-radius:5px;padding:5px}.immersive .board{width:100%;height:100%}.immersive .board-cell{min-height:0}.immersive .board-cell:hover{background:oklch(from var(--fg) l c h / .04)}.immersive .board-cell:focus-visible{outline:2px solid var(--fg);outline-offset:-3px}.immersive .hand{gap:10px;height:110px;padding:8px 0 0}.immersive .hand-slot{border-radius:5px;height:100px;padding:4px 4px 14px}.immersive .hand-slot:hover:not(:disabled),.immersive .hand-slot[aria-pressed=true]{background:oklch(from var(--surface) l c h / .55);border-color:var(--border)}.immersive .hand-slot[aria-pressed=true]{border-color:var(--muted)}.immersive .piece{--tile-size:clamp(14px, calc(var(--board-size) / 20), 26px)}.immersive .slot-number{color:var(--muted);font:12px/1.4 var(--font-body);border:0;bottom:1px}.immersive .game-bottom{min-height:44px;font:12px/1.5 var(--font-body);color:var(--muted);letter-spacing:.01em}.immersive .game-bottom .text-button{color:var(--fg);flex-shrink:0;padding-right:0}.immersive .tile{--face:var(--tile-gold);color:var(--bg);border-top-color:oklch(from var(--face) calc(l + .13) c h);border-left-color:oklch(from var(--face) calc(l + .05) c h);border-right-color:oklch(from var(--face) calc(l - .08) c h);border-bottom-color:oklch(from var(--face) calc(l - .14) c h);letter-spacing:.06em}.immersive .tile-G,.immersive .tile-D{--face:var(--tile-gold);color:var(--fg)}.immersive .tile-S,.immersive .tile-Z{--face:var(--tile-silver);color:var(--fg)}.immersive .tile-K{--face:var(--tile-ink)}.immersive .tile-C{--face:var(--tile-target)}.immersive .tile-Q{--face:var(--tile-violet)}.immersive .tile-M{--face:var(--tile-green)}.immersive dialog{background:var(--bg);width:min(440px,100vw - 32px);color:var(--fg);border-color:var(--border);box-shadow:0 20px 80px oklch(from var(--fg) l c h / .18);border-radius:8px;padding:20px 28px 28px}.immersive dialog::backdrop{background:oklch(from var(--fg) l c h / .26);backdrop-filter:blur(5px)}.immersive dialog h2{margin:0 0 24px;font-size:30px}.immersive dialog p{font:14px/1.8 var(--font-body);color:var(--muted)}.immersive .modal-actions{gap:8px;margin-top:22px}.immersive dialog.scene-dialog{width:min(496px,100vw - 40px);max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));background:var(--bg);box-shadow:none;border:0;border-radius:0;margin:max(80px,50dvh - 330px) auto auto;padding:20px 12px 12px;overflow:auto}.immersive dialog.scene-dialog::backdrop{background:var(--bg);backdrop-filter:none}.immersive .scene-dialog .modal-header{display:none}.immersive .scene-dialog h2{text-align:center;margin:0 0 26px;font-size:36px}.immersive .mode-choices{gap:20px}.immersive .mode-choice{background:oklch(from var(--bg) calc(l + .02) c h);border:1px solid var(--border);width:100%;min-height:132px;box-shadow:0 4px 0 var(--surface);border-radius:8px;gap:24px;padding:24px}.immersive .mode-choice:hover{background:var(--surface);color:var(--fg);border-color:var(--muted);transform:translateY(-2px)}.immersive .mode-choice:active{box-shadow:0 1px 0 var(--surface);transform:translateY(3px)}.immersive .mode-choice strong{font:400 24px/1.4 var(--font-display);letter-spacing:0;margin:0 0 5px}.immersive .mode-choice small{text-wrap:balance;color:var(--muted);font-size:13px;display:block}.immersive .mode-choice:hover small{color:var(--fg)}.immersive .mode-choice .rule-grid{width:66px;transition:transform .32s cubic-bezier(.2,.8,.2,1)}.immersive .mode-choice:is(:hover,:focus-visible) .rule-grid{transform:rotate(6deg)}.immersive .mode-choice .rule-grid i{height:22px;font-size:12px}.choice-arrow{margin-left:auto;font-size:24px}.immersive .scene-back{margin:0;position:absolute;top:20px;left:12px}.immersive .faction-list{gap:8px}.immersive .faction-button{gap:10px;padding:10px 3px 8px}.immersive .faction-button .tile{border-width:6px;width:clamp(40px,11vw,58px);height:auto;font-size:30px;transition:transform .2s}.immersive .faction-button small{color:var(--muted);font-size:13px}.immersive .faction-button:hover{border-color:var(--border);background:var(--surface)}.immersive .faction-button:hover small{color:var(--fg)}.immersive .faction-button:hover .tile{transform:translateY(-3px)rotate(-3deg)}.immersive .faction-button[aria-pressed=true]{border-color:var(--fg);background:var(--surface)}.immersive .faction-button[aria-pressed=true] small{color:var(--fg)}.immersive .team-choice{border-color:var(--border);min-height:66px;color:var(--fg);background:0 0;justify-content:flex-start;gap:16px;margin-top:14px;padding:12px 16px}.immersive .team-choice[aria-pressed=true],.immersive .team-choice:hover{background:var(--surface);border-color:var(--fg)}.immersive .team-choice>span:nth-child(2){align-items:baseline;gap:12px;font-size:16px;display:flex}.immersive .team-choice small{color:var(--muted);font-size:12px}.immersive .team-tiles .tile{width:23px;height:23px;font-size:13px}.selection-check{opacity:0;margin-left:auto}[aria-pressed=true] .selection-check{opacity:1}.move-preview{justify-items:center;margin:18px 0 0;display:grid}.preview-crop{aspect-ratio:1;border-radius:4px;width:clamp(130px,100dvh - 480px,240px);position:relative;overflow:clip}.preview-crop canvas{width:142%;height:142%;position:absolute;top:-21%;left:-21%}.immersive .move-preview figcaption{color:var(--muted);margin-top:12px;font-size:13px;line-height:1.6}.immersive .scene-dialog:has(.move-preview) .modal-actions{margin-top:20px}.immersive .scene-dialog .modal-actions .text-button{min-height:44px;padding:6px}.immersive .help-points{color:var(--fg);padding-left:22px;font-size:15px}.immersive .help-points p{margin:5px 0 16px}.immersive .diagram-pair{margin:20px 0}.immersive .diagram-pair figcaption{color:var(--muted);font-size:13px}.immersive .setting-row{min-height:60px;color:var(--fg);border-color:var(--border)}.immersive .switch{background:var(--border);outline-offset:6px}.immersive .switch:checked{background:var(--fg)}.immersive .switch:after{background:var(--bg)}.immersive .result-score,.immersive .record-total span{color:var(--fg);font-family:var(--font-display)}.immersive .record-list strong,.immersive .result-stats strong{color:var(--fg)}.immersive .error-note{color:var(--tile-target)!important}.immersive .tutorial-banner{text-align:left;height:112px;padding:0 2px 14px}.tutorial-meta{color:var(--muted);justify-content:space-between;font-size:12px;display:flex}.immersive .tutorial-banner h2{margin:8px 0 3px;font-size:24px}.immersive .tutorial-banner p{color:var(--muted);margin:0 0 10px;font-size:13px;line-height:1.6}.immersive #tutorial-dots{gap:5px}.immersive #tutorial-dots i{background:var(--border);border-radius:0;width:100%;height:3px}.immersive #tutorial-dots i.current,.immersive #tutorial-dots i.done{background:var(--fg)}.immersive .game-shell.practicing{--board-size:min(540px, calc(100vw - 40px), calc(100dvh - 352px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));height:calc(var(--board-size) + 286px);grid-template-rows:112px var(--board-size) 110px 44px;margin-top:max(0px, calc(( 100dvh - 64px - var(--board-size) - 286px - env(safe-area-inset-top) - env(safe-area-inset-bottom) ) / 2))}.immersive .practicing .score-row,.immersive .practicing .combo{display:none}.immersive .practicing .hand{grid-template-columns:1fr}.immersive .practicing .hand-slot:not(:first-child){display:none}.immersive .practicing .hand-slot{justify-self:center;width:130px}.immersive .practicing .slot-number{display:none}.immersive .practicing .game-bottom{justify-content:center}@keyframes emblem-settle{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}@media (width<=600px){.immersive .app-header{padding-left:16px;padding-right:12px}.immersive .mode-label,.immersive #fullscreen-button{display:none}.immersive .game-tools{gap:0}.immersive .home-link{gap:9px;font-size:20px}.immersive .scene-dialog{padding-left:0;padding-right:0}.immersive .faction-list{gap:3px}.immersive .faction-button .tile{border-width:5px;font-size:25px}.immersive .team-choice{gap:12px;padding:10px}.immersive .team-choice>span:nth-child(2){gap:8px}.immersive .team-tiles .tile{width:21px;height:21px;font-size:12px}.immersive .game-bottom{font-size:11px}.immersive .launch-wordmark h1{gap:8px}}@media (height<=740px){.immersive{--board-size:min(480px, calc(100vw - 32px), calc(100dvh - 282px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}.immersive .game-shell{height:calc(var(--board-size) + 216px);grid-template-rows:56px 20px var(--board-size) 80px 44px;margin-top:0;padding:8px 0}.immersive .score{font-size:calc(32px * var(--score-scale,1))}.immersive .hand{height:80px}.immersive .hand-slot{height:76px;padding-bottom:12px}.immersive .piece{--tile-size:clamp(13px, calc(var(--board-size) / 22), 20px)}.immersive .game-bottom{min-height:44px}.immersive .game-shell.practicing{--board-size:min(480px, calc(100vw - 32px), calc(100dvh - 306px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));height:calc(var(--board-size) + 240px);grid-template-rows:100px var(--board-size) 80px 44px;margin-top:0}.immersive .tutorial-banner{height:100px}.immersive .tutorial-banner h2{font-size:22px}.immersive .tutorial-banner p{font-size:12px}.immersive dialog.scene-dialog{margin-top:calc(64px + env(safe-area-inset-top));padding-top:8px}.immersive .scene-dialog h2{margin-bottom:14px;font-size:30px}.immersive .faction-button{gap:5px;padding:6px 2px}.immersive .team-choice{min-height:52px;margin-top:8px}.move-preview{margin-top:10px}.preview-crop{width:clamp(114px,100dvh - 452px,200px)}.immersive .move-preview figcaption{margin-top:6px}.immersive .scene-dialog:has(.move-preview) .modal-actions{gap:4px;margin-top:12px}.immersive .scene-dialog:has(#resume-arena) .preview-crop{width:clamp(80px,100dvh - 540px,180px)}.immersive .scene-back{top:8px;left:0}.launch-actions{margin-top:28px}.launch-inner{padding-bottom:12px}.launch-emblem{width:80px;margin-bottom:20px}}@media (orientation:landscape) and (height<=540px){.immersive{--board-size:min(calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc(100vw - 272px))}.immersive .app-header{height:calc(56px + env(safe-area-inset-top))}.immersive-main{height:calc(100dvh - 56px - env(safe-area-inset-top))}.immersive .game-shell,.immersive .game-shell.practicing{--board-size:min(calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc(100vw - 272px));width:calc(var(--board-size) + 204px);height:calc(var(--board-size) + 16px);grid-template-columns:var(--board-size) 184px;grid-template-rows:56px 24px 1fr 44px;column-gap:20px;margin:0 auto;display:grid}.immersive .board-frame{grid-area:1/1/5}.immersive .score-row{grid-area:1/2}.immersive .combo{grid-area:2/2;font-size:11px}.immersive .hand{grid-area:3/2;gap:2px;height:100%;padding-top:0}.immersive .hand-slot{height:80px}.immersive .piece{--tile-size:10px}.immersive .game-bottom{flex-wrap:wrap;grid-area:4/2;justify-content:center}.immersive #input-hint{display:none}.immersive .tutorial-banner{grid-area:1/2/3;height:auto}.immersive .tutorial-banner h2{font-size:20px}.immersive .tutorial-banner p{font-size:12px}.immersive #tutorial-dots{margin-top:6px}.immersive dialog.scene-dialog{width:min(680px,100vw - 48px);max-height:calc(100dvh - 40px);margin-top:24px;padding:8px;overflow:auto}.immersive .scene-dialog:has(.move-preview) #modal-content{grid-template-columns:1fr 200px;gap:10px 28px;display:grid}.immersive .scene-dialog:has(.move-preview) .faction-list{grid-column:1}.immersive .team-choice{grid-column:1;margin:0}.move-preview{grid-area:1/2/4;align-content:center;margin:0}.immersive .scene-dialog:has(.move-preview) .modal-actions{grid-column:1;margin:0}.immersive .mode-choices{grid-template-columns:1fr 1fr}.immersive .mode-choice{gap:12px;padding:16px}.immersive .mode-choice strong{font-size:22px}.launch-inner{grid-template-columns:110px 1fr;column-gap:24px;width:min(100%,580px);padding:0;display:grid}.launch-emblem{grid-row:1/4;align-self:center;margin:0}.immersive .launch-wordmark h1{font-size:46px}.launch-actions{grid-column:2;margin-top:16px}.launch-footer{font-size:11px}}@media (prefers-reduced-motion:reduce){.immersive .mode-choice:is(:hover,:focus-visible) .rule-grid{transform:rotate(-5deg)}.immersive *,.immersive :before,.immersive :after{transition:none!important;animation:none!important}}@media (width<=380px){.immersive .mode-choice{gap:16px;min-height:112px;padding:16px}.immersive .mode-choice strong{white-space:nowrap;font-size:22px}.immersive .mode-choice .rule-grid{width:54px}.immersive .mode-choice .rule-grid i{height:18px}}