/* 基底：重設、版面骨架（UIUX 第 4 節）、無障礙（第 12 節）。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: var(--t-body); }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
input, textarea { user-select: text; -webkit-user-select: text; font: inherit; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled, [aria-disabled="true"] { cursor: default; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
svg { display: block; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding-left: 1.2em; }
[hidden] { display: none !important; }

#app {
  position: relative;
  max-width: 560px; margin: 0 auto;
  height: 100vh; height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}
.screen-host { position: absolute; inset: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 0 var(--s4);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  min-width: 0;
}
.screen--enter { animation: screen-in var(--d-slow) var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.content { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) 0 var(--s4); }
.scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0 var(--s4); }
.actions-row { display: flex; gap: var(--s2); }
.actions-row > * { flex: 1 1 0; min-width: 0; }

.screen-title { font: var(--t-title); }
.sec-title { font: var(--t-head); margin-top: var(--s2); }
.small { font: var(--t-small); color: var(--muted); }
.placeholder { font: var(--t-small); color: var(--muted); text-align: center; padding: var(--s8) 0; }
.num, .prow-score, .timenum, .big-score { font-family: var(--font-num); font-variant-numeric: tabular-nums; }