:root{--text-family-base:-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;--text-size-body:1rem;--text-size-caption:.875rem;--text-size-title:1.5rem;--text-size-headline:2rem;--text-size-display:2.5rem;--line-height-body:1.6;--line-height-heading:1.3;--space-grid:.5rem;--space-inline:.75rem;--space-block:1rem;--space-card:1.5rem;--space-section:2rem;--control-height:2.75rem;--card-radius:1.5rem;--control-radius:.75rem;--pill-radius:999px;--card-shadow:0 8px 32px #22345708;--button-shadow:0 5px 12px #2855db22;--duration-fast:.15s;--easing-standard:ease;--focus-width:3px;--focus-offset:3px;--content-max-width:70rem;--preview-max-width:20rem;--arena-max-width:27rem;--arena-min-width:12rem;--arena-available-height:calc(100svh - 21rem);--glyph-choice-size:3rem;--touch-pad-height:7.5rem;--touch-canvas-width:8rem;--sidebar-width:20rem;--z-index-skip:100;--game-brand-size:2rem;--game-caption-size:.75rem;--game-touch-canvas-width:6rem;--game-touch-pad-height:6.5rem;--game-status-height:calc(3 * var(--text-size-caption) * var(--line-height-heading) + 4 * var(--space-grid) + 2px);--gray-50:#f5f7fb;--gray-100:#edf1f8;--gray-200:#d8e0ec;--gray-500:#52627c;--gray-900:#18253d;--white:#fff;--blue-50:#edf2ff;--blue-600:#2855db;--blue-700:#1b40b2;--coral-600:#b83e37;--orange-600:#9a5610;--purple-600:#8744c6;--text-primary:var(--gray-900);--text-secondary:var(--gray-500);--text-inverse:var(--white);--background-canvas:var(--gray-50);--background-surface:var(--white);--background-subtle:var(--gray-100);--background-selected:var(--blue-50);--border-default:var(--gray-200);--border-selected:var(--blue-600);--focus-ring:var(--blue-600);--interactive-background:var(--blue-600);--interactive-background-hover:var(--blue-700);--opponent-text:var(--coral-600);--dakuten-text:var(--orange-600);--handakuten-text:var(--purple-600);--status-error-text:var(--coral-600)}@supports (color:oklch(0.55 0.2 260)){:root{--gray-50:oklch(97.5% .006 260);--gray-900:oklch(27% .044 263);--blue-600:oklch(50% .214 267);--blue-700:oklch(42.5% .18 267)}}@media (prefers-contrast:more){:root{--border-default:var(--gray-500);--text-secondary:var(--gray-900);--card-shadow:none}}@media (forced-colors:active){:root{--text-primary:CanvasText;--text-secondary:CanvasText;--text-inverse:HighlightText;--background-canvas:Canvas;--background-surface:Canvas;--background-subtle:Canvas;--background-selected:Canvas;--border-default:ButtonText;--border-selected:Highlight;--focus-ring:Highlight;--interactive-background:Highlight;--interactive-background-hover:Highlight;--opponent-text:CanvasText;--status-error-text:CanvasText;--card-shadow:none;--button-shadow:none}}*,:before,:after{box-sizing:border-box}body,h1,h2,h3,p,figure,fieldset,ul{margin:0}body{background:var(--background-canvas);color:var(--text-primary);font-family:var(--text-family-base);font-size:var(--text-size-body);line-height:var(--line-height-body);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{appearance:none;color:inherit;cursor:pointer;border:1px solid var(--border-default);background:var(--background-surface);border-radius:var(--control-radius);min-block-size:var(--control-height);padding:var(--space-inline) var(--space-block);font-weight:600}button:hover{border-color:var(--border-selected);background:var(--background-selected)}button:active{background:var(--background-subtle)}button:disabled{cursor:default;opacity:.55}:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}[hidden]{display:none!important}img,canvas,svg{max-inline-size:100%;display:block}small{font-size:var(--text-size-caption);color:var(--text-secondary);font-weight:400;display:block}h1,h2,h3{line-height:var(--line-height-heading);text-wrap:balance}h1{font-size:var(--text-size-headline);letter-spacing:.01em}h2{font-size:var(--text-size-title)}h3{font-size:var(--text-size-body)}p{text-wrap:pretty}fieldset{min-inline-size:0;border:0;margin-block-start:var(--space-card);padding:0}legend{margin-block-end:var(--space-inline);padding:0;font-weight:650}hr{border:0;border-block-start:1px solid var(--border-default);margin-block:var(--space-card)}main{max-inline-size:var(--content-max-width);padding:var(--space-block) var(--space-block) var(--space-section);margin-inline:auto}.site-header{justify-content:space-between;align-items:center;gap:var(--space-block);max-inline-size:var(--content-max-width);padding:var(--space-card) var(--space-block);margin-inline:auto;display:flex}.brand{align-items:center;gap:var(--space-inline);color:var(--text-primary);font-weight:750;font-size:var(--text-size-body);text-decoration:none;display:flex}.header-note{color:var(--text-secondary);font-size:var(--text-size-caption);display:none}.hero{margin-block:var(--space-block) var(--space-section)}.hero h1{font-size:var(--text-size-display);margin-block:var(--space-inline) var(--space-block)}.hero>p:last-child{color:var(--text-secondary)}.eyebrow{color:var(--interactive-background);font-size:var(--text-size-caption);letter-spacing:.05em;font-weight:700}.lobby-layout,.preview-column{gap:var(--space-card);display:grid}.card{border:1px solid var(--border-default);border-radius:var(--card-radius);background:var(--background-surface);box-shadow:var(--card-shadow);padding:var(--space-card);min-inline-size:0}.card-heading p{color:var(--text-secondary);font-size:var(--text-size-caption);margin-block-start:var(--space-grid)}.kana-grid{gap:var(--space-grid);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.kana-grid button{min-inline-size:0;min-block-size:var(--glyph-choice-size);place-items:center;padding:0;display:grid}.kana-grid svg{inline-size:var(--glyph-choice-size);block-size:var(--glyph-choice-size)}.kana-grid button[aria-pressed=true]{border-color:var(--border-selected);background:var(--background-selected);box-shadow:inset 0 0 0 1px var(--border-selected)}.glyph-body{fill:currentColor}.glyph-dakuten{fill:var(--dakuten-text)}.glyph-handakuten{fill:var(--handakuten-text)}.kana-grid button[aria-pressed=true] .glyph-body{fill:var(--interactive-background)}.font-options{gap:var(--space-inline);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.choice{align-items:center;gap:var(--space-grid);border:1px solid var(--border-default);border-radius:var(--control-radius);padding:var(--space-block);cursor:pointer;grid-template-columns:auto 1fr;display:grid}.choice small{grid-column:1/-1}.choice:has(input:checked){background:var(--background-selected);border-color:var(--border-selected)}input[type=radio]{appearance:none;inline-size:var(--space-block);block-size:var(--space-block);border:1px solid var(--text-secondary);border-radius:var(--pill-radius);flex-shrink:0;margin:0}input[type=radio]:checked{border:var(--focus-width) solid var(--interactive-background);background:var(--background-surface)}.modifier-options,.difficulty-options{gap:var(--space-grid);flex-wrap:wrap;display:flex}.modifier-options label,.difficulty-options label{align-items:center;gap:var(--space-grid);min-block-size:var(--control-height);padding:var(--space-grid) var(--space-inline);cursor:pointer;border:1px solid var(--border-default);border-radius:var(--control-radius);font-size:var(--text-size-caption);display:flex}:is(.modifier-options label:has(input:checked),.difficulty-options label:has(input:checked)){border-color:var(--border-selected);background:var(--background-selected)}.hint{font-size:var(--text-size-caption);color:var(--text-secondary);margin-block-start:var(--space-inline)}.lobby-count{font-weight:700;font-size:var(--text-size-caption);color:var(--interactive-background);font-variant-numeric:tabular-nums;margin-block-start:var(--space-block)}.glyph-preview{margin-block:var(--space-card)}.glyph-preview canvas{inline-size:100%;max-inline-size:var(--preview-max-width);aspect-ratio:320/260;border-radius:var(--control-radius);background:var(--background-canvas);block-size:auto;margin-inline:auto}.glyph-preview figcaption{text-align:center;color:var(--text-secondary);font-size:var(--text-size-caption);margin-block-start:var(--space-inline)}.performance{border-block-start:1px solid var(--border-default);padding-block-start:var(--space-block)}.performance p+p{font-size:var(--text-size-caption);color:var(--text-secondary);margin-block-start:var(--space-inline)}.performance small{margin-block-start:var(--space-grid)}.play-card h2{margin-block-end:var(--space-block)}.play-card fieldset{margin-block-start:0}.primary,.secondary{justify-content:center;align-items:center;gap:var(--space-block);inline-size:100%;display:flex}.primary{color:var(--text-inverse);background:var(--interactive-background);border-color:var(--interactive-background);box-shadow:var(--button-shadow)}.primary:hover,.primary:active{color:var(--text-inverse);background:var(--interactive-background-hover)}.secondary{margin-block-start:var(--space-block)}.how-to{margin-block-start:var(--space-card)}.how-to ul{gap:var(--space-card);margin-block:var(--space-card);padding:0;list-style:none;display:grid}.how-to li>strong{color:var(--interactive-background)}.how-to li p{color:var(--text-secondary);font-size:var(--text-size-caption);margin-block-start:var(--space-grid)}.site-footer{max-inline-size:var(--content-max-width);padding:var(--space-card) var(--space-block);justify-content:space-between;gap:var(--space-inline);color:var(--text-secondary);font-size:var(--text-size-caption);flex-wrap:wrap;margin-inline:auto;display:flex}.center-screen{max-inline-size:var(--sidebar-width);margin:var(--space-section) auto;text-align:center}.center-screen h1{margin-block:var(--space-inline) var(--space-card)}.center-screen>button{margin-block-start:var(--space-card)}.waiting-figure{margin-block-end:var(--space-card)}.waiting-figure svg{inline-size:var(--touch-canvas-width);margin-inline:auto}.waiting-figure circle:first-child{fill:none;stroke:var(--border-default);stroke-width:4px}.waiting-figure circle:last-child{fill:var(--interactive-background)}.game-header{align-items:center;gap:var(--space-inline);flex-wrap:wrap;justify-content:space-between;margin-block-end:var(--space-block);display:flex}.game-header h1{font-size:var(--text-size-title)}.game-actions{gap:var(--space-grid);flex-wrap:wrap;display:flex}.quiet{font-size:var(--text-size-caption);padding:var(--space-grid) var(--space-inline);background:var(--background-surface)}.game-layout{gap:var(--space-block);justify-content:center;display:grid}.arena-column{inline-size:100%;min-inline-size:0;max-inline-size:var(--arena-max-width);margin-inline:auto}.scoreboard{align-items:center;gap:var(--space-grid);padding:var(--space-inline);border:1px solid var(--border-default);border-radius:var(--control-radius);background:var(--background-surface);text-align:center;grid-template-columns:1fr auto 1fr;margin-block-end:var(--space-inline);display:grid}.player-score{gap:0;display:grid}.player-score>strong{font-size:var(--text-size-caption)}.player-score output{font-size:var(--text-size-headline);line-height:var(--line-height-heading);font-weight:750}.player-score small{font-size:var(--text-size-caption)}.player-score.is-point{border-radius:var(--control-radius);background:var(--background-subtle);box-shadow:inset 0 0 0 1px}.own{color:var(--interactive-background)}.opponent{color:var(--opponent-text)}.score-middle strong,.score-middle small{font-size:var(--text-size-caption)}.court{inline-size:min(100%, calc(var(--arena-available-height) * 2 / 3));min-inline-size:min(100%, var(--arena-min-width));border:var(--focus-width) solid var(--border-default);border-radius:var(--control-radius);background:var(--background-surface);box-shadow:var(--card-shadow);margin-inline:auto;position:relative;overflow:hidden}.court canvas{aspect-ratio:2/3;touch-action:none;cursor:crosshair;block-size:auto;inline-size:100%}.point-feedback{inline-size:min(calc(100% - var(--space-card)), var(--sidebar-width));padding:var(--space-block);border:var(--focus-width) solid currentColor;border-radius:var(--card-radius);background:var(--background-surface);color:var(--interactive-background);box-shadow:var(--card-shadow);text-align:center;pointer-events:none;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.point-feedback[data-winner=opponent]{color:var(--opponent-text)}.point-feedback>strong{font-size:var(--text-size-title);line-height:var(--line-height-heading);display:block}.point-feedback>p{color:var(--text-secondary);font-size:var(--text-size-caption);margin-block-start:var(--space-inline)}.point-feedback .point-next{color:var(--text-primary);font-weight:700}.touch-controls{gap:var(--space-inline);grid-template-columns:repeat(2,minmax(0,1fr));margin-block-start:var(--space-inline);display:grid}.touch-controls.is-swapped #move-pad{order:2}.touch-pad{touch-action:none;-webkit-user-select:none;user-select:none;min-block-size:var(--touch-pad-height);justify-items:center;gap:0;padding:0;display:grid}.touch-pad canvas{inline-size:var(--touch-canvas-width);block-size:auto}.touch-pad strong{font-size:var(--text-size-caption);padding-block-end:var(--space-grid)}.touch-pad.is-active{background:var(--background-selected);border-color:var(--border-selected)}.match-sidebar{max-inline-size:var(--arena-max-width)}.match-sidebar>p{margin-block-start:var(--space-block)}.match-timer{font-size:var(--text-size-title);font-variant-numeric:tabular-nums;color:var(--interactive-background);font-weight:750}.match-loadouts{gap:var(--space-inline);border-block-start:1px solid var(--border-default);grid-template-columns:repeat(2,minmax(0,1fr));margin-block-start:var(--space-card);padding-block-start:var(--space-block);display:grid}.instructions{margin-block-start:var(--space-card)}.instructions p{font-size:var(--text-size-caption);color:var(--text-secondary);margin-block-start:var(--space-grid)}.effect-note{min-block-size:var(--space-card);color:var(--dakuten-text);font-size:var(--text-size-caption)}.result-score{font-size:var(--text-size-headline);margin-block-start:var(--space-card);font-weight:750}.notice{color:var(--status-error-text);border:1px solid var(--status-error-text);border-radius:var(--control-radius);background:var(--background-surface);padding:var(--space-block);margin-block:var(--space-block)}.notice:empty{display:none}.skip-link{z-index:var(--z-index-skip);background:var(--background-surface);color:var(--text-primary);padding:var(--space-block);position:absolute;inset-block-start:-100%;inset-inline-start:0}.skip-link:focus{inset-block-start:0}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (min-width:768px){:root{--text-size-display:3rem;--arena-available-height:calc(100svh - 14rem)}main,.site-header{padding-inline:var(--space-card)}.header-note{display:block}.lobby-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}.kana-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.how-to ul{grid-template-columns:repeat(3,minmax(0,1fr))}.game-layout{grid-template-columns:minmax(0, var(--arena-max-width)) minmax(0, var(--sidebar-width));align-items:start;gap:var(--space-card)}.match-sidebar{position:sticky;inset-block-start:var(--space-card)}.center-screen{max-inline-size:calc(var(--sidebar-width) * 1.5);padding:var(--space-section)}}@media (min-width:1025px){:root{--text-size-display:3.5rem}.hero{margin-block:var(--space-card) var(--space-section)}.selection-card{padding:var(--space-section)}.kana-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.site-header{padding-block:var(--space-section)}}@media (pointer:fine){.touch-controls{display:none}:root{--arena-available-height:calc(100svh - 14rem)}}@media (hover:none) and (pointer:coarse){.pc-movement{display:none}}@media (prefers-reduced-motion:no-preference){button,.choice{transition:background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard)}.waiting-figure svg{animation:waiting-turn calc(var(--duration-fast) * 12) linear infinite}.point-feedback{animation:point-appear calc(var(--duration-fast) * 2) var(--easing-standard)}.player-score.is-point output{animation:score-pop calc(var(--duration-fast) * 3) var(--easing-standard)}@keyframes waiting-turn{to{transform:rotate(360deg)}}@keyframes point-appear{0%{opacity:0;transform:translate(-50%,-50%)scale(.95)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes score-pop{50%{transform:scale(1.15)}}}@media (forced-colors:active){.kana-grid button[aria-pressed=true]{outline:var(--focus-width) solid Highlight}.choice:has(input:checked){outline:var(--focus-width) solid Highlight}.court canvas{forced-color-adjust:none}}@media (max-width:360px){.card{padding:var(--space-block)}.kana-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.font-options{gap:var(--space-grid)}.choice{padding:var(--space-inline)}}body[data-screen=game-screen]{grid-template-rows:auto minmax(0,1fr);block-size:100svh;display:grid}body[data-screen=game-screen] .site-header{inline-size:100%;padding-block:max(var(--space-grid), env(safe-area-inset-top))}body[data-screen=game-screen] .brand img{inline-size:var(--game-brand-size);block-size:var(--game-brand-size)}body[data-screen=game-screen] .header-note,body[data-screen=game-screen] .site-footer{display:none}body[data-screen=game-screen] main{min-block-size:0;inline-size:100%;padding-block:var(--space-grid) max(var(--space-grid), env(safe-area-inset-bottom))}body[data-screen=game-screen] #game-screen{gap:var(--space-grid);grid-template-rows:auto minmax(0,1fr);block-size:100%;min-block-size:0;display:grid}body[data-screen=game-screen] .game-header{gap:var(--space-grid);margin:0}body[data-screen=game-screen] .game-header h1{font-size:var(--text-size-body)}body[data-screen=game-screen] .game-actions{justify-content:space-between;inline-size:100%}body[data-screen=game-screen] .game-layout{place-content:stretch;gap:var(--space-grid);grid-template-rows:auto minmax(0,1fr);min-block-size:0}body[data-screen=game-screen] .arena-column{gap:var(--space-grid);grid-template-rows:auto minmax(0,1fr) auto;align-self:stretch;min-block-size:0;display:grid}body[data-screen=game-screen] .scoreboard{padding:var(--space-grid);margin:0}body[data-screen=game-screen] .player-score small,body[data-screen=game-screen] .score-middle small{font-size:var(--game-caption-size)}body[data-screen=game-screen] .court{min-block-size:0;inline-size:100%;min-inline-size:0;padding:var(--focus-width);box-shadow:none;background:0 0;border:0;place-items:center;display:grid;overflow:visible;container-type:size}body[data-screen=game-screen] .court canvas{outline:var(--focus-width) solid var(--border-default);border-radius:var(--control-radius);block-size:auto;inline-size:min(100%,66.6667cqh);max-inline-size:100%;box-shadow:var(--card-shadow)}body[data-screen=game-screen] .court canvas:focus-visible{outline-color:var(--focus-ring)}body[data-screen=game-screen] .touch-controls{--touch-canvas-width:var(--game-touch-canvas-width);--touch-pad-height:var(--game-touch-pad-height);margin:0}body[data-screen=game-screen] .match-sidebar{align-content:start;align-items:center;gap:var(--space-grid);min-block-size:var(--game-status-height);max-inline-size:none;padding:var(--space-grid) var(--space-inline);border-radius:var(--control-radius);order:-1;grid-template-columns:minmax(0,1fr) auto;display:grid}body[data-screen=game-screen] .match-sidebar h2,body[data-screen=game-screen] .match-loadouts,body[data-screen=game-screen] .instructions{display:none}body[data-screen=game-screen] .match-sidebar>p{font-size:var(--text-size-caption);margin:0}body[data-screen=game-screen] .match-sidebar .match-timer{font-size:var(--text-size-body);white-space:nowrap}body[data-screen=game-screen] .effect-note{grid-column:1/-1;min-block-size:0}body[data-screen=game-screen] .effect-note:empty,body[data-screen=game-screen] .match-timer:empty{display:none}@media (max-width:767px){body[data-screen=game-screen]{--space-grid:.25rem;--game-touch-canvas-width:3.5rem;--game-touch-pad-height:3.25rem;--game-status-height:calc(3 * var(--text-size-caption) * var(--line-height-heading) + 4 * var(--space-grid) + 2px);grid-template-rows:minmax(0,1fr)}body[data-screen=game-screen] .site-header{display:none}body[data-screen=game-screen] main{padding-inline:var(--space-grid)}body[data-screen=game-screen] .game-header h1{font-size:var(--game-caption-size)}body[data-screen=game-screen] .game-actions .quiet{padding:var(--space-grid) var(--space-grid)}body[data-screen=game-screen] .arena-column{grid-template-rows:auto minmax(6rem,1fr) auto;max-inline-size:none}body[data-screen=game-screen] .scoreboard{grid-template-columns:minmax(0, 1fr) calc(7 * var(--game-caption-size)) minmax(0, 1fr)}body[data-screen=game-screen] .player-score{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(calc(2 * var(--game-caption-size) * var(--line-height-heading)), auto) auto;column-gap:var(--space-grid);align-items:center}body[data-screen=game-screen] .player-score>strong{font-size:var(--game-caption-size);line-height:var(--line-height-heading);text-wrap:wrap;grid-column:1/-1}body[data-screen=game-screen] .player-score output{font-size:var(--text-size-title)}body[data-screen=game-screen] .player-score small,body[data-screen=game-screen] .score-middle{line-height:var(--line-height-heading)}body[data-screen=game-screen] .score-middle{align-self:end}body[data-screen=game-screen] .score-middle strong{font-size:var(--game-caption-size)}body[data-screen=game-screen] .touch-pad{justify-content:center;align-items:center;column-gap:var(--space-grid);grid-template-columns:auto auto}body[data-screen=game-screen] .touch-pad strong{padding:0}body[data-screen=game-screen] .match-sidebar{block-size:auto;padding:var(--space-grid);line-height:var(--line-height-heading);grid-template-columns:minmax(0,1fr)}body[data-screen=game-screen] .match-sidebar .match-timer{font-size:var(--text-size-caption);white-space:normal;overflow-wrap:anywhere}}@media (max-width:18rem){body[data-screen=game-screen]{--game-status-height:calc(5 * var(--text-size-caption) * var(--line-height-heading) + 4 * var(--space-grid) + 2px)}body[data-screen=game-screen] .player-score{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(calc(2 * var(--game-caption-size) * var(--line-height-heading)), auto) auto auto}body[data-screen=game-screen] .player-score>strong{grid-column:1}}@media (min-width:768px){body[data-screen=game-screen] .game-header h1{font-size:var(--text-size-title)}body[data-screen=game-screen] .game-actions{inline-size:auto}body[data-screen=game-screen] .game-layout{grid-template-rows:minmax(0,1fr);justify-content:center}body[data-screen=game-screen] .match-sidebar{block-size:auto;min-block-size:0;padding:var(--space-card);border-radius:var(--card-radius);order:0;display:block}body[data-screen=game-screen] .match-sidebar h2,body[data-screen=game-screen] .match-loadouts,body[data-screen=game-screen] .instructions{display:block}body[data-screen=game-screen] .match-loadouts{display:grid}body[data-screen=game-screen] .match-sidebar>p{font-size:var(--text-size-body);margin-block-start:var(--space-block)}body[data-screen=game-screen] .match-sidebar .match-timer{font-size:var(--text-size-title)}}