:root {
  color-scheme: light;
  --paper: #f4f4ef;
  --ink: #202b30;
  --muted: #727a7c;
  --line: #d8ddd9;
  --blue: #246695;
  --blue-tint: #eaf3f9;
  --orange: #a45b19;
  --orange-tint: #fbf0e0;
  --accent: var(--blue);
  --accent-tint: var(--blue-tint);
  --radius: 16px;
  --gap: clamp(8px, 1.4vh, 16px);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #347ba7; outline-offset: -3px; }
button:disabled { opacity: .35; cursor: default; }
button { transition: background-color 130ms ease, box-shadow 130ms ease; }
button:active:not(:disabled) { filter: brightness(.95); }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: var(--icon-size, 22px); height: var(--icon-size, 22px); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.digits { font-family: "Bahnschrift", "DIN Alternate", "Arial", sans-serif; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum"; }
.app {
  height: var(--viewport-height, 100dvh); width: 100%;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: 44px 84px 80px 90px minmax(80px, 1fr) 120px;
  grid-template-areas: "header header" "players timer" "players tools" "players editor" "players keypad" "attack keypad";
}
.app > *, .player > *, .editor > *, .attack > *, .timer > * { min-width: 0; min-height: 0; }
.masthead { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 4px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { font-family: "Bahnschrift", sans-serif; font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -6px; padding-right: 6px; }
.brand-mark > span { color: var(--orange); }
h1 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: .08em; }
.brand-subtitle { display: block; font-size: 8px; letter-spacing: .19em; color: var(--muted); margin-top: 3px; }
.masthead-hint { display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--muted); }
.status-dot { height: 6px; width: 6px; border-radius: 50%; background: #628372; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.players { grid-area: players; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.player { --player-color: var(--blue); --player-tint: var(--blue-tint); display: flex; flex-direction: column; background: var(--player-tint); border: 1px solid #d2e0e7; border-radius: var(--radius); overflow: hidden; }
.player-two { --player-color: var(--orange); --player-tint: var(--orange-tint); border-color: #e8dcca; }
.player-heading { display: flex; justify-content: space-between; align-items: center; gap: 2px; padding: 14px 16px 0; flex-shrink: 0; }
.player-name { display: flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; }
.player-name i { width: 7px; height: 7px; border-radius: 50%; background: var(--player-color); }
.player-code { margin-left: 3px; font: 10px "Bahnschrift", sans-serif; color: var(--player-color); opacity: .65; }
.score { display: flex; align-items: center; justify-content: center; gap: 8px; width: 72px; min-width: 66px; max-width: 50%; min-height: 44px; border-radius: 9px; background: #ffffff90; padding: 6px 10px; }
.score > span { font-size: 11px; color: #616c72; }
.score strong { font-size: 22px; min-width: 0; white-space: nowrap; }
.lp-target { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(8px, 2vh, 24px); width: 100%; background: transparent; color: var(--player-color); border-radius: 12px; padding: 8px 10px; overflow: hidden; }
.lp-label { display: flex; align-items: center; gap: 8px; letter-spacing: .2em; font-size: 9px; opacity: .75; }
.lp-label > span { font-weight: 700; letter-spacing: 0; padding-left: 8px; border-left: 1px solid currentColor; }
.lp-number { width: 100%; white-space: nowrap; font-size: clamp(70px, 10.7vw, 240px); font-weight: 600; letter-spacing: -.055em; line-height: 1.02; }
.lp-hint { font-size: 10px; opacity: .6; letter-spacing: .09em; min-height: 15px; }
.counter-row { display: flex; align-items: stretch; border-top: 1px solid #aebac03d; margin: 0 16px; padding: 9px 0; min-height: 62px; flex-shrink: 0; }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; flex: 1; border-radius: 9px; padding: 0 8px; overflow: hidden; }
.counter > span { font-size: 12px; color: #58696e; white-space: nowrap; }
.counter strong { font-size: 25px; font-weight: 600; min-width: 0; white-space: nowrap; }
.icon-button { width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 9px; background: transparent; flex-shrink: 0; color: #647477; }
.counter-reset { margin-left: 5px; opacity: .75; }
.target[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--player-color, var(--accent)); }
.lp-target[aria-pressed="true"] { background: #ffffff38; }
.timer { grid-area: timer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px 12px; }
/* Caption and time share a column so narrow side panels cannot push time under the controls. */
.timer-display { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; background: transparent; border-radius: 8px; height: 100%; padding: 0 8px; }
.timer-caption { display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.4; white-space: nowrap; color: #657174; }
.timer-caption .icon { --icon-size: 18px; }
.timer-number { font-size: clamp(28px, 3.1vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
.timer-toggle { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 75px; padding: 10px; border-radius: 9px; font-size: 12px; }
.timer-toggle .icon { --icon-size: 14px; stroke-width: 2; }
.timer.is-running .timer-caption { color: #397c56; }
.timer.is-expired { border-color: #c3563d; background: #fff6f2; }
.timer.is-expired .timer-number, .timer.is-expired .timer-caption { color: #a73929; }
.attack { grid-area: attack; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; padding: 18px 24px; --player-color: #3c7666; }
.attack-copy { display: flex; flex: 1; flex-direction: column; gap: 13px; overflow: hidden; }
.section-label { font-size: 13px; font-weight: 600; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.section-note { font-size: 10px; color: var(--muted); font-weight: 400; }
.attack-expression { font-size: 22px; white-space: nowrap; overflow: auto; scrollbar-width: none; color: #697578; }
.attack-expression.is-placeholder { font-family: inherit; font-size: 12px; }
.attack-answer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-shrink: 0; width: 42%; max-width: 50%; }
.attack-equals { font-size: 24px; color: #8f9b99; }
#attack-result { font-size: 44px; letter-spacing: -.035em; font-weight: 600; white-space: nowrap; }
.tools { grid-area: tools; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tool { border: 1px solid var(--line); border-radius: 12px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 2px 4px; }
.tool-label { display: flex; align-items: center; gap: 7px; font-size: 11px; white-space: nowrap; color: #657174; }
.tool-label .icon { --icon-size: 17px; }
.tool-result { font-size: 25px; line-height: 1; font-weight: 600; }
.cycle-mark { font-size: 14px; color: #8a9594; }
.death-tool.is-active { background: #edf4ed; border-color: #89a18d; }
.death-tool.is-active .tool-result { color: #3b6d48; }
.reset-tool { background: transparent; color: #667174; font-size: 12px; gap: 6px; }
.editor { grid-area: editor; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border-color: #b9ccd8; background: #fafdff; }
.editor[data-tone="orange"] { --accent: var(--orange); background: #fffaf2; border-color: #dcc6ad; }
.editor[data-tone="neutral"] { --accent: #3c7666; background: #fafdfb; border-color: #bad1c9; }
.editor-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; line-height: 1.3; }
.editor-target { font-size: 12px; font-weight: 650; color: var(--accent); white-space: nowrap; }
.editor-status { font-size: 10px; color: #748080; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor.has-error { border-color: #bf4c39; }
.editor.has-error .editor-status { color: #a93929; }
.editor-expression { font-size: 32px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: auto; scrollbar-width: none; min-height: 1.2em; }
.editor-expression.is-empty { color: #829295; }
.time-fields { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.time-field { display: flex; align-items: baseline; gap: 6px; min-width: 66px; min-height: 32px; padding: 1px 7px; border-radius: 6px; background: #e9efec; }
.time-field[aria-pressed="true"] { background: #deeee8; box-shadow: inset 0 -2px #3c7666; }
.time-field .digits { font-size: 28px; }
.time-field > span:last-child { font-size: 10px; }
.time-editor-note { font-size: 10px; color: #748080; margin-left: auto; }
.keypad { grid-area: keypad; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(44px, 1fr)); gap: 8px; }
.key { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 12px; padding: 0; min-width: 0; min-height: 44px; font-size: clamp(25px, 3vw, 42px); }
.number, .operator { font-family: "Bahnschrift", "Arial", sans-serif; }
.zero { grid-column: span 2; }
.operator { background: #e6eceb; color: #344b51; border-color: #ced8d5; }
.action-key { font-size: 13px; color: #657174; background: #eeefea; }
.confirm-key { background: var(--ink); border-color: var(--ink); color: #fff; padding: 0 6px; font-size: 14px; font-weight: 600; }
@media (hover: hover) {
  .key:hover:not(:disabled) { background: #f2f5f2; }
  .operator:hover:not(:disabled) { background: #d9e4e0; }
  .key.confirm-key:hover:not(:disabled) { background: #3a4a4f; }
  .tool:hover, .icon-button:hover { background: #e9efeb; }
  .lp-target:hover { background: #ffffff50; }
}

/* Tall screens: the reading order matches the natural flow down the page. */
@media (max-width: 760px) and (min-height: 501px), (max-aspect-ratio: 4/5) {
  :root { --gap: 8px; --radius: 14px; }
  .app { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); grid-template-columns: minmax(0, 1fr); grid-template-rows: 32px 60px minmax(130px, 1fr) 68px 62px 72px clamp(188px, 30vh, 280px); grid-template-areas: "header" "timer" "players" "attack" "tools" "editor" "keypad"; }
  .masthead { padding: 0 3px; }
  .brand { gap: 9px; }
  .brand-mark { font-size: 29px; letter-spacing: -4px; }
  h1 { font-size: 13px; }
  .brand-subtitle { font-size: 6px; }
  .masthead-hint { font-size: 9px; gap: 7px; }
  .player-heading { padding: 6px 8px 0; }
  .player-name { font-size: 11px; gap: 4px; }
  .player-name i { width: 5px; height: 5px; }
  .player-code { display: none; }
  .score { gap: 5px; padding: 4px 6px; min-width: 53px; min-height: 34px; }
  .score strong { font-size: 20px; }
  .score > span { font-size: 10px; }
  .lp-target { gap: 5px; padding: 4px 5px; }
  .lp-label { font-size: 7px; letter-spacing: .12em; }
  .lp-number { font-size: clamp(58px, 18vw, 155px); }
  .lp-hint { font-size: 8px; min-height: 10px; }
  .counter-row { margin: 0 8px; min-height: 44px; padding: 0; }
  .counter { padding: 0 4px; }
  .counter > span { font-size: 10px; }
  .counter strong { font-size: 21px; }
  .counter-reset { margin-left: 0; }
  .counter-reset .icon { --icon-size: 16px; }
  .timer { padding: 3px 6px; }
  .timer-display { padding: 0 6px; }
  .timer-number { font-size: 32px; }
  .timer-caption { font-size: 10px; gap: 4px; }
  .timer-caption .icon { --icon-size: 16px; }
  .timer-toggle { min-width: 62px; }
  .attack { padding: 8px 12px; gap: 8px; }
  .attack-copy { gap: 6px; }
  .section-label { font-size: 11px; gap: 8px; }
  .section-note { font-size: 9px; }
  .attack-expression { font-size: 17px; }
  .attack-expression.is-placeholder { font-size: 10px; }
  .attack-answer { gap: 7px; }
  .attack-equals { font-size: 18px; }
  #attack-result { font-size: 30px; }
  .tools { gap: 6px; }
  .tool { gap: 4px; border-radius: 10px; }
  .tool-label { font-size: 10px; gap: 4px; }
  .tool-result { font-size: 22px; }
  .tool-label .icon { --icon-size: 14px; }
  .reset-tool { flex-direction: row; font-size: 11px; }
  .reset-tool .icon { --icon-size: 17px; }
  .editor { padding: 8px 12px; gap: 5px; }
  .editor-target { font-size: 11px; }
  .editor-status { font-size: 9px; }
  .editor-expression { font-size: 27px; }
  .keypad { gap: 6px; }
  .key { font-size: 30px; border-radius: 10px; }
  .action-key, .confirm-key { font-size: 12px; }
}

/* Small phones keep every control in the viewport; no browser keyboard is needed. */
@media (max-width: 760px) and (min-height: 501px) and (max-height: 780px) {
  :root { --gap: 5px; --radius: 11px; }
  .app { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); grid-template-rows: 20px 44px minmax(126px, 1fr) 44px 44px 48px 188px; }
  .brand-mark { font-size: 22px; }
  h1 { font-size: 11px; }
  .brand-subtitle, .lp-label, .lp-hint, .status-dot { display: none; }
  .masthead-hint { font-size: 8px; }
  .player-heading { padding-top: 0; }
  .score { min-height: 30px; }
  .lp-number { font-size: clamp(60px, 18vw, 120px); }
  .lp-target { padding: 0 3px; }
  .counter-row { min-height: 36px; }
  .counter-reset { min-height: 36px; }
  .counter strong { font-size: 18px; }
  .timer { padding: 0 4px; gap: 2px; }
  .timer-toggle, .timer-reset { min-height: 40px; }
  .timer-toggle { min-width: 54px; padding: 4px; }
  .timer-number { font-size: 27px; }
  .timer-caption { font-size: 9px; }
  .timer-caption .icon { display: none; }
  .attack { padding: 4px 10px; }
  .attack-copy { gap: 2px; }
  .section-label { font-size: 10px; }
  .section-note { font-size: 8px; }
  .attack-expression { font-size: 14px; }
  #attack-result { font-size: 26px; }
  .tool { flex-direction: row; gap: 8px; }
  .tool-label .icon, .cycle-mark { display: none; }
  .tool-result { font-size: 19px; }
  .editor { padding: 4px 10px; gap: 2px; }
  .editor-target { font-size: 10px; }
  .editor-status { font-size: 8px; }
  .editor-expression { font-size: 22px; }
  .time-fields { min-height: 25px; gap: 6px; }
  .time-field { min-height: 24px; padding: 0 5px; }
  .time-field .digits { font-size: 22px; }
  .time-editor-note { font-size: 8px; }
  .keypad { gap: 4px; }
  .key { border-radius: 9px; font-size: 27px; }
  .action-key, .confirm-key { font-size: 11px; }
}

/* Short landscape: LP on the left, the entire keypad on the right. */
@media (min-aspect-ratio: 1/1) and (max-height: 620px) {
  :root { --gap: 6px; --radius: 11px; }
  .app { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 44px 44px 48px minmax(90px, 1fr) 54px; grid-template-areas: "header timer" "players tools" "players editor" "players keypad" "attack keypad"; }
  .brand { gap: 9px; }
  h1 { font-size: 13px; }
  .brand-mark { font-size: 30px; }
  .brand-subtitle { font-size: 6px; }
  .masthead-hint { display: none; }
  .player-heading { padding: 3px 6px 0; }
  .player-name { font-size: 10px; gap: 4px; }
  .player-name i { width: 5px; height: 5px; }
  .player-code { display: none; }
  .score { min-height: 34px; min-width: 51px; gap: 4px; padding: 4px 5px; }
  .score > span { font-size: 9px; }
  .score strong { font-size: 20px; }
  .lp-target { gap: 7px; padding: 3px; }
  .lp-label { font-size: 7px; }
  .lp-number { font-size: clamp(54px, 9vw, 120px); }
  .lp-hint { font-size: 8px; }
  .counter-row { min-height: 44px; padding: 0; margin: 0 6px; }
  .counter { padding: 0 4px; }
  .counter > span { font-size: 10px; }
  .counter strong { font-size: 20px; }
  .counter-reset { width: 36px; margin: 0; }
  .counter-reset .icon { --icon-size: 16px; }
  .timer { padding: 0 3px; gap: 2px; }
  .timer-display { padding: 0 4px; }
  .timer-caption { font-size: 9px; }
  .timer-caption .icon { display: none; }
  .timer-number { font-size: 25px; }
  .timer-toggle { min-height: 38px; min-width: 47px; gap: 4px; padding: 4px; font-size: 10px; }
  .timer-reset { width: 34px; min-height: 38px; }
  .timer-reset .icon { --icon-size: 17px; }
  .tools { gap: 4px; }
  .tool { border-radius: 9px; gap: 5px; flex-direction: row; }
  .tool-label { font-size: 10px; }
  .tool-label .icon, .cycle-mark { display: none; }
  .tool-result { font-size: 19px; }
  .reset-tool { gap: 4px; font-size: 10px; }
  .reset-tool .icon { --icon-size: 15px; }
  .editor { padding: 4px 9px; gap: 2px; }
  .editor-target { font-size: 10px; }
  .editor-status { font-size: 8px; }
  .editor-expression { font-size: 22px; }
  .time-fields { min-height: 25px; gap: 5px; }
  .time-field { min-height: 24px; padding: 0 5px; }
  .time-field .digits { font-size: 21px; }
  .time-editor-note { display: none; }
  .keypad { gap: 4px; }
  .key { border-radius: 9px; font-size: 27px; }
  .action-key, .confirm-key { font-size: 11px; }
  .attack { padding: 5px 10px; gap: 7px; }
  .attack-copy { gap: 4px; }
  .section-label { font-size: 10px; gap: 6px; }
  .section-note { font-size: 8px; }
  .attack-expression { font-size: 15px; }
  .attack-expression.is-placeholder { font-size: 10px; }
  .attack-answer { gap: 6px; }
  .attack-equals { font-size: 16px; }
  #attack-result { font-size: 28px; }
}

.reset-dialog { width: min(420px, calc(100vw - 24px)); max-height: calc(var(--viewport-height, 100dvh) - 20px); border: 1px solid #d7dcd6; border-radius: 18px; padding: 22px; color: var(--ink); background: #fafbf7; box-shadow: 0 20px 80px #13232330; }
.reset-dialog::backdrop { background: #202b3060; backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.dialog-heading h2 { font-size: 20px; margin: 0; }
.dialog-close { background: transparent; width: 36px; height: 36px; font-size: 25px; border-radius: 9px; }
#reset-description { font-size: 12px; color: #748080; margin: 5px 0 18px; }
.reset-options { display: grid; gap: 8px; }
.reset-option { display: flex; gap: 12px; align-items: center; padding: 13px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }
.reset-option:has(input:checked) { border-color: var(--blue); background: #eff7fc; }
.reset-option input { accent-color: var(--blue); flex: 0 0 auto; }
.reset-option strong { display: block; font-size: 14px; margin-bottom: 4px; }
.reset-option small { display: block; font-size: 11px; line-height: 1.5; color: #667174; }
.dialog-actions { display: flex; gap: 10px; margin-top: 18px; }
.dialog-actions button { min-height: 44px; border-radius: 9px; flex: 1; font-size: 13px; }
.dialog-cancel { background: #e9ede7; }
.dialog-confirm { background: var(--ink); color: white; }
@media (max-height: 450px) {
  .reset-dialog { width: min(500px, calc(100vw - 20px)); padding: 12px 18px; }
  .dialog-heading h2 { font-size: 17px; }
  #reset-description { margin: 0 0 7px; }
  .reset-options { gap: 5px; }
  .reset-option { padding: 7px 10px; }
  .reset-option strong { font-size: 12px; margin: 0; }
  .reset-option small { font-size: 10px; }
  .dialog-actions { margin-top: 8px; }
  .dialog-actions button { min-height: 38px; }
}
/* Browser chrome can leave an unusually short phone viewport. */
@media (max-width: 760px) and (max-height: 550px) and (max-aspect-ratio: 1/1) {
  :root { --gap: 3px; --radius: 9px; }
  .app { padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); grid-template-columns: minmax(0, 1fr); grid-template-rows: 18px 40px minmax(100px, 1fr) 40px 40px 44px 153px; grid-template-areas: "header" "timer" "players" "attack" "tools" "editor" "keypad"; }
  .brand-mark { font-size: 20px; }
  h1 { font-size: 10px; }
  .brand-subtitle, .lp-label, .lp-hint, .status-dot, .timer-caption .icon, .tool-label .icon, .cycle-mark { display: none; }
  .masthead-hint { font-size: 8px; }
  .player-heading { padding: 0 6px; }
  .score { min-height: 28px; }
  .lp-target { padding: 0 3px; gap: 0; }
  .lp-number { font-size: 58px; }
  .counter-row, .counter-reset { min-height: 32px; }
  .counter strong { font-size: 17px; }
  .timer { padding: 0 3px; }
  .timer-caption { font-size: 9px; }
  .timer-number { font-size: 25px; }
  .timer-toggle, .timer-reset { min-height: 36px; }
  .timer-toggle { padding: 4px; min-width: 52px; }
  .attack { padding: 3px 8px; }
  .attack-copy { gap: 1px; }
  .section-label { font-size: 10px; }
  .section-note { font-size: 8px; }
  .attack-expression { font-size: 13px; }
  #attack-result { font-size: 24px; }
  .tool { flex-direction: row; min-height: 36px; gap: 7px; }
  .tool-result { font-size: 18px; }
  .editor { padding: 3px 8px; gap: 1px; }
  .editor-target { font-size: 10px; }
  .editor-status { font-size: 8px; }
  .editor-expression { font-size: 21px; }
  .time-fields, .time-field { min-height: 24px; }
  .time-field .digits { font-size: 20px; }
  .keypad { gap: 3px; grid-template-rows: repeat(4, minmax(36px, 1fr)); }
  .key { min-height: 36px; font-size: 24px; }
  .action-key, .confirm-key { font-size: 10px; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 359px) {
  .app { grid-template-rows: 36px 36px 44px minmax(70px, 1fr) 46px; }
  .timer-toggle, .timer-reset, .tool { min-height: 34px; }
  .timer-toggle { min-width: 40px; }
  .timer-caption { font-size: 8px; }
  .timer-number { font-size: 22px; }
  .keypad { grid-template-rows: repeat(4, minmax(36px, 1fr)); }
  .key { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }