/* Bố cục: một cột hẹp như màn hình điện thoại, nền tuyết, khung câu hỏi viền băng,
   nút đáp án bốn màu như trong video mẫu. */
:root {
  color-scheme: light;
  --sky: #cfe3f3;
  --sky-deep: #9fc4e3;
  --ice: #eaf3fb;
  --ink: #17335a;
  --ink-soft: #4d6a8f;
  --btn-blue: #3b7dd8;
  --btn-teal: #1fb5b0;
  --btn-orange: #f29a2e;
  --btn-purple: #7b55c7;
  --ok: #25b84c;
  --bad: #e5484d;
  --gold: #f6b93b;
  --card: #f4f8fc;
  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: linear-gradient(180deg, #bcd8ee 0%, #dcebf7 55%, #f3f8fc 100%) fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
}
#snow { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; gap: 14px; }
h1, h2, .display { font-family: var(--font-display); margin: 0; line-height: 1.1; text-wrap: balance; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }