.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);--score-color:#765e42;--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-target:oklch(49.088% .12818 32.299);--tile-green:oklch(41.092% .04835 162.929);--board-size:min(560px, calc(100vw - 36px), calc((100dvh - 204px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 354 / 502));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) max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left));justify-content:space-between;align-items:center;gap:12px;display:flex}@media (width>=601px){.immersive .app-header{max-width:430px;margin-inline:auto}}.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 #best-score{color:var(--accent);font:400 calc(22px * var(--best-scale,1)) / 1 var(--font-body);font-variant-numeric:tabular-nums;letter-spacing:0;display:none;transform:translateY(3px)}.immersive.is-playing .header-record{white-space:nowrap;order:-1;align-items:center;gap:8px;width:auto;min-width:44px;margin-right:auto;padding:0;display:inline-flex}.immersive.is-playing .record-crown{flex-shrink:0;width:37px;height:29px}.immersive.is-playing #best-score{display:block}.immersive:has(.practicing) #best-score{display:none}.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));margin:0 auto 38px;animation:.8s cubic-bezier(.2,.8,.2,1) both emblem-settle}.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}html:lang(en) .immersive .launch-wordmark h1{font-family:var(--font-display);gap:.16em;font-size:clamp(28px,7vw,46px)}html:lang(en) .immersive .team-choice>span:nth-child(2),html:lang(en) .immersive .team-choice small{text-align:left;display:block}@media (width<=480px){html:lang(en) .immersive dialog:has(.help-steps) h2,html:lang(en) .immersive .scene-dialog:has(.scene-back) h2{font-size:24px}html:lang(en) .immersive .scene-dialog:has(.scene-back) h2{margin-inline:44px}}.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) * 502 / 354 + 140px);margin:max(0px, calc(( 100dvh - 204px - var(--board-size) * 502 / 354 - env(safe-area-inset-top) - env(safe-area-inset-bottom) ) / 2)) auto 0;box-shadow:none;grid-template-rows:84px 36px var(--board-size) calc(var(--board-size) * 148 / 354);background:0 0;border:0;border-radius:0;padding:10px 0;display:grid}.immersive .score-row{text-align:center;justify-content:center;align-items:center;min-height:0;margin:0;padding:0}.immersive .small-label{font:12px/1.5 var(--font-body);letter-spacing:.02em;color:var(--muted)}.immersive .score{color:var(--score-color);font:400 calc(56px * var(--score-scale,1)) / 1.15 var(--font-body);letter-spacing:-.02em;font-variant-numeric:tabular-nums;max-width:none;overflow:visible}.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{width:100%;height:100%;padding:calc(var(--board-size) * 8 / 354);background:var(--border);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}.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{height:calc(var(--board-size) * 148 / 354);padding:calc(var(--board-size) * 38 / 354) 0 0;gap:0}.immersive .hand-slot{border-radius:5px;height:100%;min-height:44px;padding:0}.immersive .hand-slot:hover:not(:disabled),.immersive .hand-slot[aria-pressed=true]{background:0 0;border-color:#0000}.immersive .hand-slot[aria-pressed=true] .piece{filter:drop-shadow(0 5px 3px oklch(from var(--fg) l c h / .25))}.immersive .piece{--tile-size:calc(var(--board-size) * 20 / 354)}@media (hover:hover) and (pointer:fine){.immersive .hand-slot:hover:not(:disabled) .piece{scale:1.15}}.immersive .slot-number{display:none}.immersive .tile{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{--face:var(--tile-gold);color:var(--fg)}.immersive .tile-S{--face:var(--tile-silver);color:var(--fg)}.immersive .tile-K,.immersive .tile-Z,.immersive .tile-D,.immersive .tile-Q,.immersive .tile-M,.immersive .tile-C{color:#fff}.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:has(.record-total,.help-steps,.setting-row) h2,.immersive dialog.card-dialog h2,.immersive dialog.result-dialog h2{text-align:center}.immersive dialog.card-dialog,.immersive dialog.result-dialog{border:0}.immersive .result-dialog #modal-content{container-type:inline-size}.immersive .result-dialog .modal-header{margin:0;position:absolute;top:12px;right:22px}.immersive dialog.result-dialog h2{margin:0 28px 18px;font-size:clamp(24px,7vw,30px)}.immersive dialog:has(.help-steps){padding-bottom:20px}.immersive dialog:has(.help-steps) .modal-header{margin:0;position:absolute;top:16px;right:20px}.immersive dialog:has(.help-steps) h2{margin:0 44px 16px}.immersive dialog:has(.help-steps) .modal-actions{margin-top:14px}.immersive dialog p{font:14px/1.8 var(--font-body);color:var(--muted)}.immersive .modal-actions{gap:8px;margin-top:22px}.immersive .settings-actions,.immersive .card-dialog .modal-actions,.immersive .result-dialog .modal-actions{gap:12px}.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)}.immersive .mode-choice-frame:hover .mode-choice:not(:active){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-steps{text-align:center;color:var(--fg);margin:0;padding:0;list-style:none}.help-steps li+li{margin-top:14px}.immersive .help-steps h3{font:400 17px/1.5 var(--font-body);margin:0 0 10px}.immersive .help-steps p{text-wrap:balance;margin:8px 0 0;font-size:13px;line-height:1.65}.help-steps p span{display:inline-block}.help-diagrams{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:8px;display:grid}.help-diagrams figure{margin:0}.help-diagram{--tile-size:26px;grid-template-columns:repeat(var(--cols), var(--tile-size));grid-template-rows:repeat(var(--rows), var(--tile-size));width:max-content;margin:0 auto;display:grid}.help-board .tile-empty{visibility:visible;border:1px solid oklch(from var(--border) l c h / .35);box-shadow:none;background:0 0}.help-arrow{color:var(--accent);font-size:24px}.help-line{align-items:start}.help-line .help-diagram{--tile-size:clamp(10px, 3.4vw, 16px)}.help-line .tile{border-width:1px;font-size:10px}.help-line .help-arrow{line-height:16px}.help-diagrams figcaption{color:var(--muted);margin-top:6px;font-size:12px}.help-enclosure{grid-template-columns:repeat(2,minmax(0,1fr))}.help-gap .tile:first-child{border:2px solid var(--tile-target)}.help-gap figcaption{color:var(--tile-target)}.help-sealed figcaption{color:var(--tile-green)}.immersive .help-ending{text-align:center;color:var(--fg);margin:16px 0 0;font-size:13px}.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,.immersive .record-list strong{color:var(--score-color);font-family:var(--font-display)}.immersive .result-stats strong{color:var(--fg)}.immersive .error-note{color:var(--tile-target)!important}.immersive .tutorial-banner{text-align:center;height:90px;padding:0}.immersive .tutorial-banner h2{margin:0 0 6px;font-size:25px}.immersive .tutorial-banner p{color:var(--muted);margin:0;font-size:13px;line-height:1.6}.immersive #tutorial-dots{justify-content:center;gap:7px;height:6px;margin:0 0 12px}.immersive #tutorial-dots i{opacity:.18;background:#a97f38;border-radius:3px;flex:0 0 6px;width:6px;height:6px}.immersive #tutorial-dots i.current{opacity:1;flex-basis:18px;width:18px}.immersive #tutorial-dots i.done{opacity:.55}.tutorial-target{z-index:1;pointer-events:none;transform-origin:50%;will-change:transform, opacity;display:grid;position:absolute}.tutorial-target i{border:calc(var(--board-size) * 2 / 354) dashed #a97f38;border-radius:calc(var(--board-size) * 5 / 354);background:#e2be7929}.tutorial-target .target-empty{visibility:hidden}.tutorial-finger{z-index:6;width:calc(var(--board-size) * 30 / 354);height:calc(var(--board-size) * 30 / 354);pointer-events:none;will-change:transform, opacity;background:#3a362e1f;border-radius:50%;position:fixed;top:0;left:0}.tutorial-finger:after{content:"";background:#3a362e80;border-radius:50%;position:absolute;inset:23.3333%}.immersive .game-shell.practicing{--board-size:min(540px, calc(100vw - 36px), calc((100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 354 / 554));height:calc(var(--board-size) * 554 / 354 + 106px);grid-template-rows:90px var(--board-size) calc(var(--board-size) * 200 / 354);margin-top:0;padding:8px 0}.immersive .practicing .score-row,.immersive .practicing .combo{display:none}.immersive .practicing .hand{height:calc(var(--board-size) * 200 / 354);padding-top:calc(var(--board-size) * 50 / 354);grid-template-columns:1fr}.immersive .practicing .hand-slot:not(:first-child){display:none}.immersive .practicing .hand-slot{width:calc(var(--board-size) / 3);height:calc(var(--board-size) * 110 / 354);justify-self:center;padding:0}.immersive .practicing .piece{transition:none}.immersive .practicing .slot-number{display:none}@keyframes emblem-settle{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}@media (width<=600px){.immersive .app-header{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));gap:4px}.immersive #fullscreen-button{display:none}.immersive .game-tools{gap:0}.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 .launch-wordmark h1{gap:8px}}@media (height<=740px){.immersive{--board-size:min(480px, calc(100vw - 32px), calc((100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 354 / 502))}.immersive .game-shell{height:calc(var(--board-size) * 502 / 354 + 116px);grid-template-rows:64px 36px var(--board-size) calc(var(--board-size) * 148 / 354);margin-top:0;padding:8px 0}.immersive .score{font-size:calc(44px * var(--score-scale,1))}.immersive .game-shell.practicing{--board-size:min(480px, calc(100vw - 32px), calc((100dvh - 154px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 354 / 554));height:calc(var(--board-size) * 554 / 354 + 90px);grid-template-rows:74px var(--board-size) calc(var(--board-size) * 200 / 354);margin-top:0}.immersive .tutorial-banner{height:74px}.immersive .tutorial-banner h2{margin-bottom:4px;font-size:22px}.immersive .tutorial-banner p{font-size:12px}.immersive #tutorial-dots{margin-bottom:8px}.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;column-gap:20px;margin:0 auto;display:grid}.immersive .board-frame{grid-area:1/1/4}.immersive .score-row{grid-area:1/2}.immersive .combo{grid-area:2/2;font-size:11px}.immersive .hand,.immersive .practicing .hand{grid-area:3/2;gap:2px;height:100%;padding-top:0}.immersive .hand-slot,.immersive .practicing .hand-slot{height:80px;padding:0}.immersive .piece{--tile-size:10px}.immersive .tutorial-banner{grid-area:1/2/3;height:auto}.immersive .tutorial-banner h2{margin-bottom:3px;font-size:20px}.immersive .tutorial-banner p{font-size:12px;line-height:1.5}.immersive #tutorial-dots{margin:0 0 5px}.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}}.launch-description{color:var(--muted);text-wrap:balance;margin:14px 0 0;font-size:13px}.launch-links{justify-content:center;gap:24px}.launch-links a{color:var(--fg);padding:10px 0;font-size:12px}.launch-footer p{margin:2px 0 0}@media (height<=740px){.launch-description{margin-top:10px}.launch-actions{margin-top:20px}}@media (orientation:landscape) and (height<=540px){.launch-description{grid-column:2;margin-top:6px}.launch-actions{margin-top:10px}.launch-links a{padding:5px 0}}.launch-noscript{color:var(--muted);margin:16px 0 0;font-size:13px}.launch-inner:has(.launch-noscript) .launch-actions{display:none}