:root {
  color-scheme: light;
  --ink: #294760;
  --muted: #61798a;
  --sky: #eaf8ff;
  --blue: #2997d1;
  --blue-dark: #1677af;
  --blue-light: #effaff;
  --mint: #e7f8ea;
  --green: #208b56;
  --coral: #d86164;
  --shadow: 0 16px 40px rgba(60, 125, 153, .13);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 100px 38px at 8% 17%, rgba(255,255,255,.9) 0 65%, transparent 68%),
    radial-gradient(ellipse 130px 42px at 88% 12%, rgba(255,255,255,.82) 0 65%, transparent 68%),
    radial-gradient(ellipse 120px 42px at 90% 73%, rgba(255,255,255,.7) 0 65%, transparent 68%),
    linear-gradient(180deg, #e7f7ff 0%, #effaf9 65%, #f7fbef 100%);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #f5a941; outline-offset: 4px; }
[hidden] { display: none !important; }
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 12px clamp(12px, 3vw, 30px) 14px; }
.topbar { width: min(100%, 1030px); margin: 0 auto 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; }
.home-link { color: #317797; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.home-link:hover, .footer a:hover { text-decoration: underline; }
.mini-badge { color: #478d79; background: #fff; border: 1px solid #d6f1e6; padding: 7px 13px; border-radius: 99px; white-space: nowrap; font-size: .8rem; font-weight: 800; }
.mini-badge span { color: #f4ae41; }
.game-shell { width: min(100%, 990px); margin: auto; }
.panel { background: #fff; border: 2px solid #fff; border-radius: 28px; box-shadow: var(--shadow); }
.intro, .ending { max-width: 740px; margin: auto; padding: clamp(20px, 4vw, 40px); text-align: center; }
.eyebrow { display: inline-block; background: #edf9eb; color: #32814c; font-size: .72rem; letter-spacing: .07em; font-weight: 900; border-radius: 99px; padding: 9px 14px; }
h1, h2, p { margin-top: 0; }
h1 { margin: 14px 0 8px; font-size: clamp(2.1rem, 6vw, 3.3rem); letter-spacing: -.045em; line-height: 1.12; }
h1 span, .question span { color: var(--blue); }
.lead { line-height: 1.45; color: var(--muted); max-width: 530px; margin: 0 auto 18px; font-size: clamp(.95rem, 2.5vw, 1.12rem); }
.intro-picture { width: min(100%, 480px); margin: 0 auto 15px; padding: 6px; border-radius: 21px; background: #e5f7fb; transform: rotate(-1deg); }
.intro-picture img { display: block; width: 100%; height: auto; aspect-ratio: 978 / 530; object-fit: contain; border-radius: 15px; }
.intro-facts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 15px 0 20px; font-size: .86rem; font-weight: 800; }
.intro-facts span { background: #fff7e5; border-radius: 99px; padding: 9px 14px; }
.intro-facts span + span { background: #eef5ff; }
.primary-button { border: 0; background: linear-gradient(180deg, #36aee2, #208aca); color: white; border-radius: 17px; box-shadow: 0 5px 0 #1770ab; padding: 15px 32px; min-height: 55px; font-size: 1.16rem; font-weight: 900; cursor: pointer; transition: transform .12s, filter .12s; }
.primary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #1770ab; }
.primary-button span { margin-left: 10px; }
.helper { color: #8aa1a9; font-size: .77rem; margin: 16px 0 0; }
.playing { padding: clamp(12px, 2.7vw, 26px); }
.game-topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.round-label { background: #edf7ff; color: #287ba5; padding: 9px 17px; border-radius: 99px; font-size: .9rem; white-space: nowrap; }
.round-label strong { font-size: 1.1rem; }
.icon-button { border: 1px solid #d9edf5; background: #fff; color: #43849e; min-height: 41px; padding: 8px 12px; border-radius: 13px; cursor: pointer; font-weight: 800; }
.icon-button:hover { background: #edfaff; }
.progress { margin: 14px 0 15px; background: #eaf2f8; height: 9px; border-radius: 99px; overflow: hidden; }
.progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7fd49e, #4babdb); border-radius: 99px; transition: width .35s; }
.question { text-align: center; font-size: clamp(1.33rem, 4vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 14px; }
.game-area { display: flex; flex-direction: column; gap: 12px; }
.picture-frame { padding: 7px; background: #eff7fc; border-radius: 20px; border: 1px solid #e3f0f5; }
.picture-frame img { display: block; width: 100%; height: auto; aspect-ratio: 978 / 530; object-fit: contain; border-radius: 13px; user-select: none; }
.answer-area { text-align: center; }
.answer-heading { margin: 2px 0 10px; color: #4f7587; font-weight: 800; font-size: .93rem; }
.answer-buttons { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; max-width: 540px; margin: 0 auto 12px; }
.answer-button { display: flex; align-items: center; justify-content: center; border: 2px solid #d6eaf5; background: #f6fbff; border-radius: 18px; min-height: 74px; font-size: 2.35rem; font-weight: 900; color: #277eab; cursor: pointer; box-shadow: 0 4px 0 #d9e8f0; transition: transform .12s, background .12s, border-color .12s; }
.answer-button:not(:disabled):hover { background: #e5f6ff; border-color: #87c8eb; transform: translateY(-2px); }
.answer-button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #d9e8f0; }
.answer-button:disabled { cursor: default; opacity: .5; }
.answer-button.is-correct, .answer-button.is-correct:disabled { opacity: 1; background: #e4f9e8; border-color: #62c482; color: #20844a; box-shadow: 0 4px 0 #c2eacb; }
.answer-button.is-wrong, .answer-button.is-wrong:disabled { opacity: 1; background: #fff0ed; border-color: #eda9a0; color: #b65353; box-shadow: 0 4px 0 #f2dbd6; }
.feedback { max-width: 540px; margin: 5px auto 13px; border-radius: 13px; padding: 10px 13px; font-size: .88rem; background: #eaf9ed; color: #236d43; }
.feedback.wrong { background: #fff4e9; color: #985c39; }
.feedback strong { display: block; font-size: 1.03rem; margin-bottom: 3px; }
.feedback span { display: block; }
.next-button { width: min(100%, 340px); min-height: 48px; padding: 11px 18px; font-size: 1rem; margin: 0 auto 3px; }
.ending { width: 100%; }
.end-icon { font-size: clamp(3rem, 9vw, 5rem); margin-bottom: 9px; }
.ending h2 { font-size: clamp(2.5rem, 6vw, 3.6rem); margin: 12px 0 6px; color: #229d77; }
.score-card { display: flex; flex-direction: column; width: min(100%, 280px); margin: 20px auto 16px; background: #f1faff; border: 2px solid #d3edf8; border-radius: 25px; padding: 15px; }
.score-card strong { color: var(--blue-dark); font-size: 4rem; line-height: 1.1; }
.score-card small { font-size: 1.6rem; color: #85a4b6; }
.score-card span { font-weight: 800; font-size: .91rem; color: var(--muted); }
.end-time { color: var(--muted); font-size: .88rem; }
.text-button { display: block; margin: 17px auto 0; padding: 9px; border: 0; background: transparent; color: #49819e; text-decoration: underline; cursor: pointer; font-weight: bold; }
.footer { color: #7796a1; text-align: center; margin: 13px auto 0; font-size: .76rem; line-height: 1.5; }
.footer a { color: inherit; }
.footer span { color: #e69b9c; }
@media (min-width: 760px) {
  .game-area { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(220px, .9fr); gap: 17px; align-items: center; }
  .answer-buttons { gap: 9px; }
  .answer-button { min-height: 94px; }
  .question { margin-bottom: 17px; }
}
@media (max-width: 480px) {
  .page { padding: 9px 9px 10px; }
  .topbar { margin-bottom: 8px; font-size: .78rem; }
  .mini-badge { font-size: .7rem; padding: 6px 9px; }
  .intro, .ending { padding: 22px 15px; border-radius: 22px; }
  .playing { padding: 11px; border-radius: 20px; }
  .icon-button { padding: 8px 9px; font-size: .8rem; }
  .round-label { font-size: .77rem; padding: 7px 11px; }
  .progress { margin: 11px 0 12px; }
  .question { margin-bottom: 10px; }
  .picture-frame { padding: 5px; border-radius: 15px; }
  .picture-frame img { border-radius: 10px; }
  .answer-heading { margin-bottom: 7px; font-size: .82rem; }
  .answer-buttons { gap: 8px; margin-bottom: 8px; }
  .answer-button { min-height: 65px; font-size: 2rem; border-radius: 15px; }
  .intro-facts { font-size: .75rem; gap: 6px; }
  .intro-facts span { padding: 8px 10px; }
}
@media (orientation: landscape) and (max-height: 590px) {
  .page { padding-top: 5px; padding-bottom: 5px; }
  .topbar { margin-bottom: 4px; }
  .footer { margin-top: 4px; }
  .playing { padding: 9px 13px; }
  .game-topline .icon-button { min-height: 30px; padding: 4px 10px; }
  .round-label { padding: 4px 12px; }
  .progress { margin: 7px 0; height: 6px; }
  .question { margin-bottom: 7px; font-size: 1.25rem; }
  .game-area { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(180px,.85fr); gap: 10px; align-items: center; }
  .picture-frame { padding: 4px; }
  .picture-frame img { max-height: max(135px, calc(100dvh - 145px)); width: 100%; object-fit: contain; }
  .answer-heading { margin-bottom: 5px; font-size: .8rem; }
  .answer-buttons { gap: 5px; margin-bottom: 7px; }
  .answer-button { min-height: 44px; font-size: 1.45rem; border-radius: 12px; }
  .feedback { padding: 6px 8px; margin-bottom: 7px; font-size: .76rem; }
  .feedback strong { font-size: .9rem; }
  .next-button { min-height: 38px; padding: 6px; font-size: .82rem; }
  .intro, .ending { padding: 14px 24px; }
  .intro h1 { margin: 6px 0; font-size: 1.85rem; }
  .intro .lead { margin-bottom: 7px; font-size: .87rem; }
  .intro-picture { width: min(100%, 285px); margin-bottom: 7px; }
  .intro-facts { margin: 7px 0 9px; }
  .intro .primary-button, .ending .primary-button { min-height: 40px; padding: 9px 19px; font-size: .9rem; }
  .intro .helper { margin-top: 9px; }
  .ending .end-icon { font-size: 2.2rem; margin-bottom: 2px; }
  .ending h2 { margin: 5px 0; font-size: 2rem; }
  .ending .lead { margin-bottom: 5px; }
  .ending .score-card { margin: 7px auto; padding: 6px; }
  .ending .score-card strong { font-size: 2.1rem; }
  .ending .score-card small { font-size: 1.1rem; }
  .ending .end-time { margin-bottom: 8px; }
  .ending .text-button { margin: 6px auto 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }