/* A little 2048: an open, pale-green field with floating abstract tiles. */
@property --zc-board{syntax:'<length>';inherits:true;initial-value:0px}
/* Registered angles so the board's slow drift and hover parallax interpolate smoothly. */
@property --zc-drift-x{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --zc-drift-y{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --zc-par-x{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --zc-par-y{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  /* Platform tokens (Ink, light) until the SDK theme arrives. */
  --zc-background:#f4f1e9;--zc-surface:#fcfaf4;--zc-ink:#293b32;--zc-muted:#68776b;--zc-accent:#375c47;--zc-accent-ink:#fafcf4;--zc-border:#d8ded2;--zc-soft:#e7ebe0;--zc-radius:12px;--zc-font:Georgia,serif;
  --zc-step1:#e8e9de;--zc-step2:#dbe3cf;--zc-step3:#c8d4b8;--zc-step4:#aebf98;--zc-step5:#91aa7c;--zc-step6:#759164;--zc-step7:#5d8054;--zc-step8:#466d48;--zc-step9:#bb925c;--zc-step10:#b27748;--zc-step11:#a9533e;--zc-step12:#81432f;--zc-on-step-low:#293b32;--zc-on-step-high:#fffdf5;

  /* Soft sage and paper, gently tinted by the host palette. */
  --zc-hue-a:var(--zc-step6);
  --zc-hue-b:var(--zc-step8);
  --zc-lum-ivory:#f6f8ef;
  --zc-lum-mint:var(--zc-soft);
  --zc-lum-gold:var(--zc-soft);
  --zc-space-0:var(--zc-background);
  --zc-space-1:color-mix(in oklab,var(--zc-soft) 12%,var(--zc-background));
  --zc-space-ink:var(--zc-ink);
  --zc-space-muted:var(--zc-muted);
  --zc-glass:color-mix(in oklab,#ffffff 18%,transparent);
  --zc-glass-strong:color-mix(in oklab,#ffffff 40%,transparent);
  --zc-glass-line:color-mix(in oklab,var(--zc-space-ink) 17%,transparent);
  --zc-ambient-glow:color-mix(in oklab,#fff 42%,transparent);
  --zc-tile-ink:var(--zc-space-ink);
  --zc-display:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --zc-numerals:Georgia,"Times New Roman",serif;
}
:root[data-mode="dark"]{--zc-glass:color-mix(in oklab,var(--zc-ink) 7%,transparent);--zc-glass-strong:color-mix(in oklab,var(--zc-ink) 13%,transparent);--zc-ambient-glow:color-mix(in oklab,var(--zc-ink) 7%,transparent)}

*{box-sizing:border-box}
html,body,#app{height:100%}
html,body{margin:0;overflow:hidden;background:var(--zc-space-0)}
body{color:var(--zc-space-ink);color-scheme:light;font:14px/1.4 var(--zc-display);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
:root[data-mode="dark"] body{color-scheme:dark}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- Layout: portrait / narrow first ---------- */
.game{
  --zc-pad:clamp(10px,2.4vmin,30px);
  --zc-pad-t:max(var(--zc-pad),env(safe-area-inset-top));--zc-pad-r:max(var(--zc-pad),env(safe-area-inset-right));
  --zc-pad-b:max(var(--zc-pad),env(safe-area-inset-bottom));--zc-pad-l:max(var(--zc-pad),env(safe-area-inset-left));
  position:relative;isolation:isolate;height:100%;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto minmax(150px,1fr) auto auto auto auto auto;
  grid-template-areas:"ident footer" "score score" "stage stage" "status status" "controls controls" "pad pad" "speed speed" "notice notice";
  align-items:center;column-gap:10px;
  padding:var(--zc-pad-t) var(--zc-pad-r) var(--zc-pad-b) var(--zc-pad-l);
  overflow:hidden auto;overscroll-behavior:contain;
  background:
    radial-gradient(75% 55% at 25% 25%,var(--zc-ambient-glow),transparent 70%),
    radial-gradient(95% 70% at 85% 95%,color-mix(in oklab,var(--zc-lum-mint) 24%,transparent),transparent 75%),
    linear-gradient(180deg,var(--zc-space-0),var(--zc-space-1));
}
.panel{display:contents}
.panel>*{position:relative;z-index:3;min-width:0}
.game-heading{grid-area:ident}
.game-footer{grid-area:footer}
.score-row{grid-area:score;margin-top:clamp(6px,1.4vh,14px)}
.board-wrap{grid-area:stage;margin-block:clamp(8px,1.8vh,18px)}
.status-row{grid-area:status}
.main-controls{grid-area:controls;margin-top:10px}
.direction-pad{grid-area:pad;margin-top:8px}
.speed-row{grid-area:speed;margin-top:8px}
.notice{grid-area:notice;margin-top:8px}
.eyebrow,.hint{display:none}
.game[data-mode="manual"] .speed-row{display:none}

/* The bounded light buffer becomes soft tonal variations in the pale field. */
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;filter:invert(1);opacity:0;transition:opacity 1.8s ease}
.atmosphere[data-state="ready"]{opacity:.32}
:root[data-mode="dark"] .atmosphere{mix-blend-mode:screen;filter:none}
.atmosphere canvas{display:block;width:100%;height:100%}

/* ---------- Stage and board ---------- */
.board-wrap{position:relative;z-index:1;align-self:stretch;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
.thinking-slogan{
  position:absolute;top:calc(50% + var(--zc-board-size,66.667vmin) / 2 + 18px);left:12px;right:12px;
  display:flex;align-items:center;justify-content:center;height:3.2em;margin:0;
  color:var(--zc-space-muted);font:400 clamp(16px,2.3vmin,24px)/1.6 Georgia,"Songti SC","STSong","SimSun",serif;
  letter-spacing:.015em;text-align:center;text-wrap:balance;pointer-events:none;opacity:0;
}
.thinking-slogan[data-active="true"]{opacity:1}
.thinking-slogan:lang(zh){letter-spacing:.12em}
.thinking-slogan:lang(ja),.thinking-slogan:lang(ko){letter-spacing:.04em}
/*
 * The tilt wrapper floats slowly around two to three degrees, with generous breathing room.
 * fitBoard (src/layout.ts) sizes the board to leave room for the projected corners; keep its constants in step.
 */
.board-tilt{
  --zc-board:var(--zc-board-size,min(66.667vmin,calc(min(100cqw,100cqh - 8px) / 1.022)));
  position:relative;width:var(--zc-board);height:var(--zc-board);border-radius:calc(var(--zc-board)*.045);
  transform:perspective(calc(var(--zc-board)*2.8)) rotateX(calc(var(--zc-drift-x) + var(--zc-par-x))) rotateY(calc(var(--zc-drift-y) + var(--zc-par-y)));
  animation:zc-drift-x 10s ease-in-out -5s infinite alternate,zc-drift-y 13s ease-in-out -6.5s infinite alternate;
  transition:--zc-par-x 1.8s cubic-bezier(.22,.7,.2,1),--zc-par-y 1.8s cubic-bezier(.22,.7,.2,1);
}
.board-tilt[data-three-pose]{animation:none}
.game:not([data-state="running"]) .board-tilt,.game:not([data-state="running"]) .board-tilt::after{animation-play-state:paused}
.board{
  --zc-gap:calc(var(--zc-board)*.045);
  --zc-cell:calc((var(--zc-board) - var(--zc-gap)*5)/4);
  --zc-tile-r:calc(var(--zc-cell)*.22);
  position:relative;width:var(--zc-board);height:var(--zc-board);border-radius:calc(var(--zc-board)*.045);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  background:transparent;
}
.board:focus-visible{outline:1px solid var(--zc-glass-line);outline-offset:6px}
.cells,.tiles{position:absolute;inset:var(--zc-gap)}
.cells{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--zc-gap)}
.cells>div{border-radius:var(--zc-tile-r);background:color-mix(in oklab,var(--zc-space-ink) 2.2%,transparent)}

/* Flat washes of sage: no bevels, glossy faces, or tray around the grid. */
.tile{
  position:absolute;left:0;top:0;width:var(--zc-cell);height:var(--zc-cell);display:grid;place-items:center;
  border-radius:var(--zc-tile-r);
  /* Individual translate/scale properties: pop animations scale in place without scaling the cell offset. */
  translate:calc(var(--zc-x,0)*(var(--zc-cell) + var(--zc-gap))) calc(var(--zc-y,0)*(var(--zc-cell) + var(--zc-gap)));
  transition:translate var(--zc-move-duration,560ms) cubic-bezier(.3,.55,.25,1);
  color:var(--zc-t-ink,var(--zc-tile-ink));
  font:400 calc(var(--zc-cell)*.40)/1.08 var(--zc-numerals);letter-spacing:-.045em;
  /* Oldstyle numerals retain Georgia's x-height, ascenders and descenders. */
  font-variant-numeric:oldstyle-nums proportional-nums;font-feature-settings:"onum" 1,"pnum" 1;
  will-change:translate;user-select:none;
}
.tile-face,.tile-surface{width:100%;height:100%;display:grid;place-items:center;border-radius:inherit;transform-style:preserve-3d}
.tile-surface{position:relative;background:color-mix(in oklab,var(--zc-t-face) 65%,transparent);backface-visibility:hidden}
.tile-number{display:block}
.tile:is([data-level="1"],[data-level="2"]){font-size:calc(var(--zc-cell)*.34)}
.tile:is([data-level="3"],[data-level="4"]){font-size:calc(var(--zc-cell)*.44)}
.tile[data-digits="3"]{font-size:calc(var(--zc-cell)*.31)}
.tile[data-digits="4"]{font-size:calc(var(--zc-cell)*.27)}
.tile[data-level="9"]{font-size:calc(var(--zc-cell)*.35)}
.tile:is([data-level="11"],[data-level="12"])[data-digits="4"]{font-size:calc(var(--zc-cell)*.31)}
.tile[data-digits="5"]{font-size:calc(var(--zc-cell)*.27)}
.tile[data-digits="6"]{font-size:calc(var(--zc-cell)*.225)}
.tile:is([data-digits="7"],[data-digits="8"],[data-digits="9"],[data-digits="10"],[data-digits="11"],[data-digits="12"],[data-digits="13"]){font-size:calc(var(--zc-cell)*.19)}
[data-level="1"]{--zc-t-face:var(--zc-step1)}
[data-level="2"]{--zc-t-face:var(--zc-step2)}
[data-level="3"]{--zc-t-face:var(--zc-step3)}
[data-level="4"]{--zc-t-face:var(--zc-step4)}
[data-level="5"]{--zc-t-face:var(--zc-step5)}
[data-level="6"]{--zc-t-face:var(--zc-step6)}
[data-level="7"]{--zc-t-face:var(--zc-step7)}
[data-level="8"]{--zc-t-face:var(--zc-step8)}
[data-level="9"]{--zc-t-face:var(--zc-step9)}
[data-level="10"]{--zc-t-face:var(--zc-step10)}
[data-level="11"]{--zc-t-face:var(--zc-step11)}
[data-level="12"]{--zc-t-face:var(--zc-step12)}

.spawn-pop{animation:zc-spawn 1.6s cubic-bezier(.22,.68,.18,1) both}
.board-message{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:12%;text-align:center;border-radius:inherit;background:color-mix(in oklab,var(--zc-space-0) 80%,transparent);backdrop-filter:blur(5px);font:400 calc(var(--zc-board)*.058)/1.25 var(--zc-font);color:var(--zc-space-ink)}
.board-message[hidden]{display:none}

/* ---------- Identity ---------- */
.game-heading{min-width:0}
.eyebrow{font:400 10px/1.2 var(--zc-display);letter-spacing:.3em;color:var(--zc-space-muted);margin-bottom:10px}
.heading-line{display:flex;align-items:center;gap:10px;min-width:0}
.game h1{margin:0;min-width:0;font:400 clamp(20px,6.4cqi,38px)/1.15 var(--zc-font);color:var(--zc-space-ink)}
/* Narrow layouts show the short product name; the full heading stays in the accessibility tree. */
.brand{min-width:0;font:400 clamp(17px,4.8vw,21px)/1.15 var(--zc-font);color:var(--zc-space-ink);white-space:nowrap}
.game h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.run-light{flex:none;width:6px;height:6px;border-radius:50%;background:var(--zc-space-muted)}
.game[data-state="running"] .run-light{animation:zc-breathe 4.8s ease-in-out infinite}
.game[data-state="paused"] .run-light{opacity:.4}
.game[data-state="over"] .run-light{background:var(--zc-space-muted);box-shadow:none}
.hint{margin:0;font-size:13px;line-height:1.5;color:var(--zc-space-muted)}

/* ---------- Score: the loudest thing on the page after the board ---------- */
.score-row{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:14px}
/* The score column is its own container, so its size follows the width left beside the stats, not the whole row. */
.score-main{position:relative;min-width:0;container:score/inline-size}
.stat-label{display:block;font:400 10.5px/1.2 var(--zc-display);letter-spacing:.2em;text-transform:uppercase;color:var(--zc-space-muted)}
.stats .stat-label{letter-spacing:.16em}
#score{
  /* Optimistic estimate (tabular digits are about half an em); app.ts measures the real text and applies --zc-fit. */
  --zc-score-size:min(calc(100cqi / (var(--zc-chars,1) * .5 + .08)),16vw,10vh);
  display:block;width:max-content;max-width:100%;margin-top:.1em;padding-right:.04em;
  font:400 calc(var(--zc-score-size) * var(--zc-fit,1))/.95 var(--zc-numerals);letter-spacing:-.06em;font-variant-numeric:oldstyle-nums proportional-nums;white-space:nowrap;
  color:var(--zc-space-ink);transform-origin:0 100%;
}
.score-gain{position:absolute;top:0;right:0;opacity:0;pointer-events:none;font:400 clamp(14px,4.4cqi,32px)/1 var(--zc-numerals);color:var(--zc-space-muted);font-variant-numeric:tabular-nums}
.stats{display:grid;gap:6px;justify-items:end;text-align:right}
.stat{display:flex;align-items:center;gap:10px}
.stat strong{font:400 clamp(18px,5.6vw,24px)/1 var(--zc-numerals);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--zc-space-ink)}
.stat .tile-chip{display:inline-grid;place-items:center;min-width:2.1em;padding:.2em .42em .24em;border-radius:.34em;color:var(--zc-t-ink,var(--zc-tile-ink));
  background:color-mix(in oklab,var(--zc-lum-mint) 22%,transparent)}
.stat .tile-chip:is([data-digits="4"],[data-digits="5"],[data-digits="6"]){letter-spacing:-.06em}

/* ---------- Status and controls ---------- */
.status-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font:500 12px/1.4 var(--zc-display);color:var(--zc-space-muted)}
#status{color:var(--zc-space-ink);font-weight:400}
button{
  min-height:44px;padding:9px 14px;border:1px solid var(--zc-glass-line);border-radius:999px;cursor:pointer;
  background:var(--zc-glass);color:var(--zc-space-ink);font:400 13px/1.1 var(--zc-display);letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,box-shadow .2s,transform .12s;
}
button:hover{background:var(--zc-glass-strong);border-color:color-mix(in oklab,var(--zc-lum-mint) 45%,transparent)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.4;cursor:wait}
.primary{border-color:transparent;color:var(--zc-space-ink);background:color-mix(in oklab,var(--zc-lum-mint) 45%,transparent)}
.primary:hover{background:color-mix(in oklab,var(--zc-lum-mint) 65%,transparent);border-color:transparent}
:focus-visible{outline:2px solid var(--zc-lum-mint);outline-offset:3px}
.main-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.main-controls button{padding:6px 6px;white-space:normal;text-wrap:balance}
.direction-pad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.direction-pad[hidden]{display:none}
.direction-pad button{font-size:22px;min-height:48px;border-radius:16px}
.speed-row{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--zc-space-muted)}
.speed-row input{flex:1;min-width:0;accent-color:var(--zc-lum-mint);height:28px}
.speed-row input[type="range"]{appearance:none;background:transparent;cursor:pointer}
.speed-row input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:color-mix(in oklab,var(--zc-space-ink) 20%,transparent)}
.speed-row input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--zc-accent);border:0}
.speed-row input::-moz-range-track{height:2px;border-radius:2px;background:color-mix(in oklab,var(--zc-space-ink) 20%,transparent)}
.speed-row input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--zc-accent);border:0}
#speed-value{min-width:3.2ch;text-align:right;font:750 14px/1 var(--zc-display);color:var(--zc-space-ink);font-variant-numeric:tabular-nums}
.game-footer{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.text-button{min-height:36px;padding:6px 10px;border:0;border-radius:10px;background:none;color:var(--zc-space-muted);font-size:12.5px}
.text-button:hover{background:var(--zc-glass);color:var(--zc-space-ink)}
.notice{margin:0;padding:10px 12px;border-radius:12px;background:var(--zc-glass);border:1px solid var(--zc-glass-line);border-left:3px solid var(--zc-lum-gold);font-size:12.5px;line-height:1.55;color:var(--zc-space-ink)}
.notice:empty{display:none}

/* ---------- Dialogs ---------- */
dialog{
  width:min(92vw,440px);max-height:min(88vh,640px);padding:clamp(18px,4vw,28px);color:var(--zc-space-ink);
  background:linear-gradient(180deg,color-mix(in oklab,var(--zc-space-1) 90%,#fff),var(--zc-space-0));
  border:1px solid var(--zc-glass-line);border-radius:22px;
  box-shadow:0 24px 80px color-mix(in oklab,#213d28 14%,transparent);
}
dialog::backdrop{background:color-mix(in oklab,#000 58%,transparent);backdrop-filter:blur(6px)}
dialog h2{margin:0 0 12px;font:400 clamp(22px,5vw,28px)/1.2 var(--zc-font)}
dialog p{margin:0 0 16px;line-height:1.65;color:var(--zc-space-muted)}
dialog textarea{background:color-mix(in oklab,#000 35%,transparent);border:1px solid var(--zc-glass-line);border-radius:12px;padding:10px;margin-bottom:12px;font-size:12px}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
.motion-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--zc-glass-line)}
.motion-setting select{max-width:66%;padding:8px;border:1px solid var(--zc-glass-line);border-radius:8px;background:var(--zc-space-0)}
.appearance-note{font-size:12px;line-height:1.5;margin:8px 0 0;color:var(--zc-space-muted)}
.check{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--zc-glass-line);line-height:1.45;cursor:pointer}
.check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--zc-lum-mint)}
.settings-backup{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--zc-glass-line)}
.settings-backup p{margin:0;font-size:13px}
.settings-backup button{flex:none}
.technical{margin-top:14px;font-size:12.5px;line-height:1.7;color:var(--zc-space-muted)}
.technical summary{cursor:pointer;color:var(--zc-space-ink)}
.technical p{margin:6px 0}

/* ---------- Landscape and desktop: board takes the full height, a narrow panel holds the score ---------- */
@media (min-aspect-ratio:21/20){
  .game{
    --zc-gutter:clamp(16px,3.2vw,60px);--zc-panel-min:250px;--zc-panel-max:600px;
    --zc-avail:calc(100dvh - var(--zc-pad-t) - var(--zc-pad-b));
    grid-template-columns:min(var(--zc-avail),calc(100% - var(--zc-panel-min) - var(--zc-gutter))) minmax(var(--zc-panel-min),var(--zc-panel-max));
    grid-template-rows:minmax(0,1fr);grid-template-areas:"stage panel";
    justify-content:center;align-items:stretch;column-gap:var(--zc-gutter);overflow:hidden;
  }
  .board-wrap{margin:0}
  /* Auto margins centre the panel when it fits and collapse when it overflows, so scrolling always starts at the top. */
  .panel{grid-area:panel;position:relative;z-index:3;display:flex;flex-direction:column;gap:clamp(10px,2.1vh,22px);min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 2px;container:panel/inline-size;scrollbar-width:thin}
  .panel::before,.panel::after{content:"";flex:none}
  .panel::before{margin-top:auto}
  .panel::after{margin-bottom:auto}
  .panel>*{margin:0;flex:none}
  .eyebrow{display:block}
  .hint{display:block;margin-top:-6px}
  .game h1{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
  .brand{display:none}
  .score-row{grid-template-columns:minmax(0,1fr);row-gap:clamp(10px,2.4vh,24px)}
  .stat-label{font-size:11px}
  #score{--zc-score-size:min(calc(100cqi / (var(--zc-chars,1) * .52 + .1)),25cqi,17vh)}
  .stats .stat-label{letter-spacing:.24em}
  .stats{display:flex;gap:clamp(20px,6cqi,44px);justify-items:start;text-align:left}
  .stat{display:grid;gap:8px;justify-items:start}
  .stat strong{font-size:clamp(22px,6.6cqi,44px)}
  .status-row{font-size:13px}
  .game-footer{justify-content:flex-start;margin-left:-10px}
  .game[data-mode="manual"] .speed-row{display:flex}
}
@supports not (height:100dvh){@media (min-aspect-ratio:21/20){.game{--zc-avail:calc(100vh - var(--zc-pad-t) - var(--zc-pad-b))}}}
@container panel (max-width:430px){.main-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Short landscape (phones on their side): keep two columns, compact identity, stats beside the score. */
@media (min-aspect-ratio:21/20) and (max-height:520px){
  .eyebrow,.hint{display:none}
  .panel{gap:clamp(4px,1.8vh,9px);padding-block:2px}
  .game h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .brand{display:block}
  .score-row{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px}
  #score{--zc-score-size:min(calc(100cqi / (var(--zc-chars,1) * .5 + .08)),19vh)}
  .stats{display:grid;gap:4px;justify-items:end;text-align:right}
  .stat{display:flex;align-items:center;gap:8px}
  .stat-label,.stats .stat-label{font-size:9.5px;letter-spacing:.16em}
  .stat strong{font-size:clamp(16px,4.6cqi,22px)}
  .status-row{font-size:11.5px}
  button{min-height:36px;padding-block:6px}
  .main-controls{gap:6px}
  .text-button{min-height:32px}
  .direction-pad{gap:6px}
  .direction-pad button{min-height:38px;font-size:19px}
  .speed-row input{height:22px}
}
/* Very small portrait phones. */
@media (max-aspect-ratio:21/20) and (max-width:360px){
  .main-controls{gap:6px}
  .main-controls button{font-size:11.5px;padding:5px 4px}
  .text-button{padding:6px 7px}
}

/* ---------- Motion ---------- */
/* The app coordinates the outgoing/incoming card turn and growing numerals. */
@keyframes zc-spawn{0%{scale:.88;opacity:0;filter:blur(3px)}100%{scale:1;opacity:1;filter:blur(0)}}
@keyframes zc-breathe{50%{opacity:.45}}
@keyframes zc-drift-x{from{--zc-drift-x:-2.5deg}to{--zc-drift-x:2.5deg}}
@keyframes zc-drift-y{from{--zc-drift-y:3.1deg}to{--zc-drift-y:-3.1deg}}
[data-motion="reduced"] *,[data-motion="reduced"] *::before,[data-motion="reduced"] *::after{animation:none!important;transition:none!important}
[data-motion="reduced"] .board-tilt{transform:none}