/* Native keyboard metrics are isolated from the game's typography and spacing. */
[hidden] { display:none !important; }
/* Keep rapid confirmations from becoming browser zoom; retain panel scrolling. */
html,body { touch-action:manipulation;touch-action:pan-x pan-y; }
button,a,input,select,textarea { touch-action:manipulation; }
.game-shell { padding:env(safe-area-inset-top) 0 0; min-height:0; max-height:none; height:var(--game-height,100dvh); grid-template-rows:48px 48px minmax(0,1fr) 26px 58px auto; }
.topbar,.hud,.arena,.battle-note,.composer { margin-left:14px; margin-right:14px; }
.arena { min-height:0; }
.composer { padding:5px 0 9px; }
.input-wrap { position:relative; }
output#command-input { display:block; }
output#command-input:after { display:none; }
.input-caret { display:inline-block; height:22px; width:2px; background:#8fb544; vertical-align:-2px; margin-right:2px; animation:blink 1s steps(2,start) infinite; }
.input-pending { text-decoration:underline; text-underline-offset:4px; }
.keyboard-dock,.key-preview { --kb-bg:#e1e2e7; --kb-key:#fff; --kb-utility:#fff; --kb-ink:#050505; --kb-muted:#aaa; --kb-shadow:transparent; --kb-accent:#0a84ff; color:var(--kb-ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans CJK JP",sans-serif; font-weight:400; color-scheme:light; }
.keyboard-dock { --ku:.333333px; --candidate-height:54.6667px; overflow:hidden; background:var(--kb-bg); width:100%; user-select:none; -webkit-user-select:none; touch-action:manipulation; border-radius:calc(94 * var(--ku)) calc(94 * var(--ku)) 0 0; border-top:1px solid #bdbec340; box-shadow:inset 0 2px 0 #ffffff8a; }
.keyboard-dock[data-theme=dark],.key-preview[data-theme=dark] { --kb-bg:#1f1f1f; --kb-key:#434343; --kb-utility:#434343; --kb-ink:#fff; --kb-muted:#8e8e8e; color-scheme:dark; }
.keyboard-dock[data-layout=android],.key-preview[data-layout=android] { --kb-bg:#e4e4e6; --kb-key:#fcfcfe; --kb-utility:#c9c9cb; --kb-ink:#222; --kb-muted:#777; --kb-shadow:#00000014; --kb-accent:#487ad6; border-radius:0; box-shadow:none; border-top:0; }
.keyboard-dock[data-layout=android][data-theme=dark],.key-preview[data-layout=android][data-theme=dark] { --kb-bg:#010101; --kb-key:#3a3a3c; --kb-utility:#171719; --kb-ink:#f7f7f7; --kb-muted:#aaa; --kb-shadow:transparent; }
.keyboard-candidates { height:var(--candidate-height); display:flex; align-items:center; padding:0 calc(24 * var(--ku)); gap:calc(16 * var(--ku)); overflow:hidden; position:relative; }
#candidates { display:flex; align-items:center; flex:1; min-width:0; gap:calc(27 * var(--ku)); white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; touch-action:pan-x; font:400 calc(55 * var(--ku))/1.2 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans CJK JP",sans-serif; color:var(--kb-ink); }
#candidates::-webkit-scrollbar { display:none; }
.candidate { background:none; padding:0; border:0; border-radius:0; color:inherit; font:inherit; flex:none; pointer-events:none; }
.candidate.exact { background:none; font-weight:500; text-decoration:underline; text-underline-offset:5px; }
.no-candidate { color:var(--kb-muted); font:inherit; }
.candidate-expand { width:calc(104 * var(--ku)); height:calc(104 * var(--ku)); flex:none; padding:calc(18 * var(--ku)); background:none; border:0; color:var(--kb-ink); border-left:1px solid #8884; }
.candidate-expand svg { display:block; width:100%; height:100%; }
.candidate-expand .android-expand { display:none; }
.candidate-back { display:none; }
.keyboard-bed { position:relative; width:100%; height:209px; touch-action:none; -webkit-touch-callout:none; }
.native-key { appearance:none; -webkit-appearance:none; position:absolute; padding:0; margin:0; border:0; border-radius:calc(34 * var(--ku)); background:var(--kb-key); color:var(--kb-ink); font:400 calc(66 * var(--ku))/1 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans CJK JP",sans-serif; display:flex; align-items:center; justify-content:center; touch-action:none; box-shadow:none; user-select:none; -webkit-user-select:none; }
.native-key:disabled { cursor:default; opacity:1; }
.native-key.pressed { background:#b4b7c1; }
[data-theme=dark] .native-key.pressed { background:#727272; }
.native-key svg { width:calc(76 * var(--ku)); height:calc(76 * var(--ku)); pointer-events:none; }
.native-key.delete-key svg { width:calc(86 * var(--ku));height:calc(86 * var(--ku));transform:translate(calc(3 * var(--ku)),calc(1.5 * var(--ku))); }
.native-key.utility-key { font-size:calc(48 * var(--ku)); background:var(--kb-utility); }
.native-key.utility-key.pressed { background:#b4b7c1; }
[data-theme=dark] .native-key.utility-key.pressed { background:#727272; }
[data-layout=ios] .native-key.letter-key { padding-left:calc(6 * var(--ku));padding-bottom:calc(6 * var(--ku)); }
.native-key.modifier-key svg { width:100%;height:100%; }
.native-key.confirm-key:disabled { color:var(--kb-muted); }
.native-key.separator-key { color:var(--kb-muted); }
.modifier-symbols { display:flex; align-items:flex-start; font-size:calc(61 * var(--ku)); line-height:.8; transform:translateY(calc(-4 * var(--ku))); }
.modifier-symbols small { display:inline-block; font-size:calc(42 * var(--ku)); line-height:1; align-self:flex-end; margin-left:calc(-63 * var(--ku)); transform:translateY(calc(39 * var(--ku))); }
.punctuation-symbols { font-size:calc(55 * var(--ku)); transform:translateY(calc(10 * var(--ku))); }
.punctuation-symbols>span { display:inline-block; font-size:calc(65 * var(--ku)); transform:translateY(calc(-20 * var(--ku))); }
.wa-symbol { position:relative; transform:translateY(calc(-7 * var(--ku))); }
.wa-symbol small { position:absolute; top:calc(64 * var(--ku)); left:50%; transform:translateX(-50%); font-size:calc(40 * var(--ku)); }
.keyboard-footer { position:relative; height:max(var(--footer-height,72px),env(safe-area-inset-bottom)); }
.footer-key { position:absolute; top:calc(48 * var(--ku)); width:calc(88 * var(--ku)); height:calc(88 * var(--ku)); background:none; border:0; padding:0; color:var(--kb-ink); opacity:1; }
.footer-key.globe { left:calc(84 * var(--ku)); }
.footer-key.mic { right:calc(84 * var(--ku)); }
.footer-key svg { width:100%; height:100%; }
[data-layout=android] .keyboard-candidates { background:#f6f6f8; padding-bottom:calc(24 * var(--ku)); gap:calc(20 * var(--ku)); }
[data-layout=android][data-theme=dark] .keyboard-candidates { background:#171719; }
[data-layout=android] #candidates { font-size:calc(49 * var(--ku)); gap:calc(25 * var(--ku)); }
[data-layout=android] .candidate-expand { border:0; width:calc(70 * var(--ku)); font-size:calc(46 * var(--ku)); }
[data-layout=android] .candidate-back { display:grid; place-items:center; width:calc(65 * var(--ku)); height:calc(76 * var(--ku)); font-size:calc(66 * var(--ku)); flex:none; }
[data-layout=android] .candidate-back svg { width:calc(51 * var(--ku));height:calc(51 * var(--ku)); }
[data-layout=android] .candidate-expand .ios-expand { display:none; }
[data-layout=android] .candidate-expand .android-expand { display:block;opacity:.4; }
[data-layout=android] .native-key { border-radius:calc(18 * var(--ku)); font-size:calc(60 * var(--ku)); box-shadow:0 calc(3 * var(--ku)) calc(5 * var(--ku)) var(--kb-shadow); }
[data-layout=android] .native-key.letter-key { padding-top:calc(10 * var(--ku)); }
[data-layout=android] .native-key.utility-key { font-size:calc(46 * var(--ku)); }
[data-layout=android] .native-key.confirm-key { color:var(--kb-accent); font-size:calc(58 * var(--ku)); }
[data-layout=android] .native-key.confirm-key:disabled { color:var(--kb-accent); opacity:.65; }
[data-layout=android] .modifier-symbols { align-items:center; font-size:calc(60 * var(--ku)); transform:none; }
[data-layout=android] .modifier-symbols small { font-size:calc(55 * var(--ku)); transform:none; margin:0 0 0 calc(-30 * var(--ku)); }
.candidate-key-text { position:absolute; font-size:calc(34 * var(--ku)); top:24%; }
.candidate-key .candidate-key-text+svg { position:absolute; bottom:10%; width:70%; }
.key-preview { position:fixed; z-index:30; width:calc(3 * var(--cell)); height:calc(3 * var(--cell)); pointer-events:none; filter:drop-shadow(0 3px 6px #0003); }
.key-preview span { position:absolute; display:grid; place-items:center; width:var(--cell); height:var(--cell); background:var(--kb-key); color:var(--kb-ink); border:1px solid #8885; border-radius:10px; font-size:23px; }
.key-preview span[data-index="0"]{left:var(--cell);top:var(--cell)}
.key-preview span[data-index="1"]{left:0;top:var(--cell)}
.key-preview span[data-index="2"]{left:var(--cell);top:0}
.key-preview span[data-index="3"]{left:calc(2 * var(--cell));top:var(--cell)}
.key-preview span[data-index="4"]{left:var(--cell);top:calc(2 * var(--cell))}
.key-preview span.selected { background:var(--kb-accent); color:white; }
.key-preview span.empty { visibility:hidden; }
#native-input { display:block; width:100%; min-width:0; padding:0; margin:0; border:0; border-radius:0; outline:none; background:transparent; font:500 20px/1.35 -apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink); }
body[data-keyboard=native] .game-shell { grid-template-rows:48px 48px minmax(0,1fr) 26px 64px; padding-bottom:env(safe-area-inset-bottom); }
body[data-keyboard=native] { position:relative; top:var(--viewport-top,0px); min-height:0; }
body[data-keyboard=native] .composer { margin-bottom:4px; }
body[data-keyboard=native] .input-label { font-size:8px; }
body[data-keyboard=native] .confirm { width:76px; font-size:13px; }
.keyboard-mode,.keyboard-settings fieldset,#keyboard-settings fieldset { padding:0; margin:15px 0; border:0; }
#keyboard-settings legend { font-size:12px; font-weight:700; margin-bottom:10px; }
.mode-option { display:flex; gap:10px; align-items:center; padding:10px 0; cursor:pointer; }
.mode-option input { accent-color:#647a37; width:17px; height:17px; flex:none; }
.mode-option b { display:block; font-size:13px; }
.mode-option small { display:block; font-size:10px; color:#7b826f; margin-top:5px; }
.native-description { padding:12px; background:#e7eadf; border-left:3px solid #93ac6a; font-size:11px!important; }
.setting-row { display:flex; align-items:center; justify-content:space-between; margin:10px 0; font-size:11px; gap:12px; }
.setting-row select { width:60%; padding:8px 6px; border:1px solid #bac3ac; background:#fafbf4; color:#273026; border-radius:3px; font:400 12px var(--font); }
.range-setting { display:block; margin-top:16px; font-size:11px; }
.range-setting output { float:right; font:500 11px var(--font); letter-spacing:0; }
.range-setting output:after { display:none; }
.range-setting input { display:block; width:100%; accent-color:#799748; margin:12px 0; }
#custom-settings:disabled { opacity:.4; }
.settings-footnote { font-size:9px!important; }
#settings-menu h2 { margin:12px 0 0; font-size:25px; }
#menu .title-settings { margin-top:12px; font-size:10px; }
@media(min-width:600px) { .game-shell { height:var(--game-height,min(900px,100dvh)); padding-left:0; padding-right:0; border:0; } }
@media(max-height:730px) { .game-shell { grid-template-rows:40px 42px minmax(0,1fr) 24px 52px auto; padding-left:0; padding-right:0; } .topbar,.hud,.arena,.battle-note,.composer { margin-left:10px; margin-right:10px; } body[data-keyboard=native] .game-shell { grid-template-rows:40px 42px minmax(0,1fr) 24px 58px; } }
@media(max-height:500px) { .game-shell { grid-template-rows:32px 32px minmax(0,1fr) 18px 46px auto; } .brand small{display:none}.topbar .icon-button{width:26px;height:26px}.battle-note{font-size:8px}.timer strong{font-size:24px}.timer span{margin-top:2px}body[data-keyboard=native] .game-shell{grid-template-rows:32px 36px minmax(0,1fr) 20px 54px}.input-label{font-size:7px} }

/* Reference-only commands: one horizontal strip, with three lines per word. */
.keyboard-candidates { padding:0 calc(24 * var(--ku));gap:calc(14 * var(--ku)); }
#candidates { height:100%;gap:calc(25 * var(--ku));align-items:center;cursor:default; }
#candidates .candidate { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;gap:2px;min-width:calc(214 * var(--ku));height:100%;padding:0;background:none;border:0;border-radius:0;font-weight:400;text-decoration:none;pointer-events:none; }
.candidate-kind,.candidate-description { display:block;color:#83868d;line-height:1.15;white-space:nowrap;font-weight:400; }
.candidate-kind { font-size:clamp(9px,calc(29 * var(--ku)),11px);letter-spacing:.6px; }
.candidate-word { display:block;color:#6e727b;font-size:clamp(15px,calc(51 * var(--ku)),21px);line-height:1.1;font-weight:400;white-space:nowrap; }
.candidate-description { font-size:clamp(7px,calc(22 * var(--ku)),8.5px);letter-spacing:0;color:#a3a6ad; }
.candidate-readonly { flex:none;align-self:center;min-width:calc(75 * var(--ku));color:#878a91;font-size:10px;line-height:1.3;text-align:center;letter-spacing:1px;pointer-events:none; }
[data-theme=dark] .candidate-word { color:#b1b3b8; }
[data-theme=dark] .candidate-kind,[data-theme=dark] .candidate-readonly { color:#8d9097; }
[data-theme=dark] .candidate-description { color:#6e7178; }
.candidate[data-kind=strike] .candidate-kind { color:#a35c4d; }
.candidate[data-kind=throw] .candidate-kind { color:#96752e; }
.candidate[data-kind=parry] .candidate-kind { color:#43848c; }
.candidate[data-kind=move] .candidate-kind { color:#708655; }
[data-theme=dark] .candidate[data-kind=strike] .candidate-kind { color:#cf9380; }
[data-theme=dark] .candidate[data-kind=throw] .candidate-kind { color:#c6aa69; }
[data-theme=dark] .candidate[data-kind=parry] .candidate-kind { color:#82b7bf; }
[data-theme=dark] .candidate[data-kind=move] .candidate-kind { color:#a1b88b; }
#candidates .no-candidate { font-size:14px;color:#858890; }

/* Disabled confirmation keys still occupy the touch surface; root listeners cancel native zoom. */
.confirm-key,#native-confirm { touch-action:none; -webkit-touch-callout:none; }

#candidates .candidate.strong { min-width:112px; }