:root {
  color-scheme:light;
  --ink:#22544d;
  --muted:#6d837e;
  --paper:#fffdf7;
  --cream:#f8f4e8;
  --line:#ded4b4;
  --green:#4fa77d;
  --green-dark:#287758;
  --yellow:#f1b634;
  --coral:#e87360;
  --shadow:0 20px 48px rgba(47, 74, 65, .12);
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; scrollbar-gutter:stable; }

body {
  margin:0;
  min-width:320px;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(241, 182, 52, .17) 0 120px, transparent 121px),
    radial-gradient(circle at 92% 17%, rgba(79, 167, 125, .14) 0 155px, transparent 156px),
    radial-gradient(circle, rgba(40, 119, 88, .08) 1.2px, transparent 1.3px) 0 0 / 23px 23px,
    #f8f7ed;
  font-family:"Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

button { font:inherit; }
button:focus-visible { outline:4px solid rgba(241, 182, 52, .82); outline-offset:4px; }

.app {
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 44px;
}

.loading-card {
  width:min(430px, 100%);
  margin:28vh auto 0;
  padding:38px;
  border:2px solid var(--line);
  border-radius:30px;
  background:var(--paper);
  box-shadow:var(--shadow);
  text-align:center;
  font-size:20px;
  font-weight:900;
}

.topbar {
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0;
  border:0;
  color:var(--ink);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.brand__mark {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:2px solid #cbded3;
  border-radius:17px;
  background:#eff9f3;
  box-shadow:0 6px 14px rgba(49, 77, 67, .08);
  font-size:25px;
}

.brand strong,
.brand small,
.utility-button strong,
.utility-button small { display:block; }
.brand strong { font-size:20px; line-height:1.12; }
.brand small { margin-top:3px; color:var(--muted); font-size:11px; }
.topbar__actions { display:flex; gap:10px; }

.utility-button {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:8px 14px;
  border:2px solid #ddd2ae;
  border-radius:16px;
  color:var(--ink);
  background:rgba(255, 253, 247, .95);
  box-shadow:0 5px 14px rgba(49, 77, 67, .06);
  text-align:left;
  cursor:pointer;
}

.utility-button:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(49, 77, 67, .1); }
.utility-button strong { font-size:12px; }
.utility-button small { margin-top:2px; color:var(--muted); font-size:10px; }

.eyebrow {
  display:block;
  margin-bottom:9px;
  color:#438b6d;
  font-family:Georgia, serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  line-height:1.35;
  text-transform:uppercase;
}

h1, h2, h3, p { overflow-wrap:anywhere; }

.hero {
  display:grid;
  grid-template-columns:1fr .92fr;
  align-items:center;
  gap:38px;
  min-height:430px;
  padding:42px;
  border:2px solid #dad0ad;
  border-radius:38px;
  background:linear-gradient(135deg, #f0fff7 0%, #fffaf0 52%, #fff0e8 100%);
  box-shadow:var(--shadow);
}

.hero h1,
.section-heading h2,
.game-heading h1,
.answers-panel h2,
.result-card h1,
.collection-heading h1 {
  margin:0;
  color:var(--ink);
  font-family:"Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  letter-spacing:-.04em;
}

.hero h1 { font-size:clamp(42px, 5vw, 64px); line-height:1; }
.hero__copy > p { max-width:525px; margin:20px 0 25px; color:var(--muted); font-size:17px; font-weight:700; line-height:1.55; }

.hero__copy .primary-button,
.hero__copy .secondary-button { margin:0 8px 8px 0; }

.hero__art {
  overflow:hidden;
  padding:10px;
  border:3px solid #c9ded3;
  border-radius:31px;
  background:#fff;
  box-shadow:0 22px 36px rgba(47, 74, 65, .17);
  transform:rotate(1deg);
}

.hero__art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:21px;
}

.primary-button,
.secondary-button,
.hint-button,
.back-button,
.reset-button {
  min-height:50px;
  padding:12px 19px;
  border-radius:16px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.primary-button {
  border:0;
  color:#fff;
  background:var(--green);
  box-shadow:0 9px 0 var(--green-dark);
}

.primary-button:hover { transform:translateY(-2px); box-shadow:0 11px 0 var(--green-dark); }
.primary-button:active { transform:translateY(5px); box-shadow:0 4px 0 var(--green-dark); }

.secondary-button,
.hint-button,
.back-button {
  border:2px solid #ddd1aa;
  color:var(--ink);
  background:var(--paper);
}

.secondary-button:hover,
.hint-button:hover:not(:disabled),
.back-button:hover { transform:translateY(-2px); background:#fff8e7; }
.hint-button:disabled { cursor:default; opacity:.72; }

.section { margin-top:48px; }

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:18px;
}

.section-heading h2 { font-size:clamp(34px, 4vw, 48px); line-height:1; }
.section-heading > p { max-width:390px; margin:0 0 4px; color:var(--muted); font-size:14px; font-weight:800; line-height:1.5; text-align:right; }

.steps-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.steps-grid article {
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  padding:22px;
  border:2px solid #e2dac0;
  border-radius:23px;
  background:var(--paper);
  box-shadow:0 9px 0 rgba(215, 207, 179, .75);
}

.steps-grid article > span {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:17px;
  color:#fff;
  background:var(--green);
  font-size:22px;
  font-weight:900;
}

.steps-grid strong { display:block; margin:4px 0 6px; font-size:18px; }
.steps-grid p { margin:0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.45; }

.routes-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.route-card {
  display:flex;
  flex-direction:column;
  min-height:400px;
  padding:26px;
  border:2px solid color-mix(in srgb, var(--accent) 38%, #ded5b8);
  border-radius:28px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, #fffdf8), #fffdf8 70%);
  box-shadow:0 12px 0 rgba(211, 203, 175, .78);
}

.route-card__icon {
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  margin-bottom:24px;
  border:3px solid color-mix(in srgb, var(--accent) 45%, #fff);
  border-radius:21px;
  background:#fff;
  font-size:34px;
}

.route-card h3 { margin:0; color:var(--ink); font-size:28px; line-height:1.08; }
.route-card > p { min-height:64px; margin:12px 0 19px; color:var(--muted); font-size:14px; font-weight:700; line-height:1.5; }

.route-card__progress,
.game-progress > span {
  display:block;
  overflow:hidden;
  height:9px;
  border-radius:999px;
  background:#e4e1d5;
}

.route-card__progress span,
.game-progress i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.route-card__footer { display:flex; justify-content:space-between; gap:10px; margin:10px 0 20px; color:var(--muted); font-size:13px; font-weight:800; }
.route-card__footer b { color:var(--ink); }
.stars { color:#e8a52b; letter-spacing:.08em; }
.route-card .primary-button { width:100%; margin-top:auto; background:var(--accent); box-shadow:0 8px 0 color-mix(in srgb, var(--accent) 72%, #194b3b); }

.game-shell,
.collection-shell,
.result-card {
  padding:34px;
  border:2px solid #d9cfaa;
  border-radius:36px;
  background:var(--paper);
  box-shadow:var(--shadow);
}

.game-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:24px;
}

.game-heading h1 { font-size:clamp(36px, 4.5vw, 54px); line-height:1; }
.game-progress { display:grid; grid-template-columns:minmax(170px, 310px) auto; align-items:center; gap:14px; min-width:280px; }
.game-progress i { background:var(--accent); }
.game-progress b { font-size:17px; }

.riddle-layout {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:22px;
  align-items:stretch;
}

.riddle-card,
.answers-panel {
  border:2px solid #ddd4b8;
  border-radius:28px;
}

.riddle-card {
  display:flex;
  flex-direction:column;
  min-height:560px;
  padding:34px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 18%, transparent) 0 100px, transparent 101px),
    #fff8e8;
}

.riddle-card__book {
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  margin-bottom:34px;
  border:3px solid color-mix(in srgb, var(--accent) 45%, #fff);
  border-radius:23px;
  background:#fff;
  font-size:38px;
  transform:rotate(-3deg);
}

.riddle-card blockquote {
  margin:8px 0 30px;
  color:var(--ink);
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(27px, 3vw, 37px);
  font-weight:700;
  line-height:1.32;
}

.riddle-card__tip {
  display:grid;
  grid-template-columns:50px 1fr;
  gap:13px;
  margin-top:auto;
  padding:17px;
  border-radius:18px;
  background:#eef7f0;
}

.riddle-card__tip > span { font-size:30px; }
.riddle-card__tip p { margin:0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.4; }
.riddle-card__tip strong { display:block; margin-bottom:4px; color:var(--ink); font-size:16px; }

.answers-panel { padding:27px; background:#f7fbf7; }
.answers-panel__heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.answers-panel h2 { font-size:33px; line-height:1; }
.hint-button { flex:0 0 auto; min-height:45px; padding:9px 13px; font-size:12px; }

.hint-message {
  margin:-2px 0 15px;
  padding:13px 16px;
  border:2px solid #efca67;
  border-radius:15px;
  color:#73551a;
  background:#fff5ce;
  font-size:13px;
  font-weight:800;
  line-height:1.4;
}

.answers-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.answer-card {
  position:relative;
  min-width:0;
  min-height:215px;
  padding:18px 10px 15px;
  overflow:hidden;
  border:3px solid #e1decf;
  border-radius:24px;
  color:var(--ink);
  background:#fff;
  box-shadow:0 8px 0 #dcd8c9;
  cursor:pointer;
  transition:border-color .17s ease, box-shadow .17s ease, background .17s ease;
}

.answer-card:hover:not(:disabled) {
  border-color:var(--object);
  box-shadow:0 8px 0 color-mix(in srgb, var(--object) 35%, #dcd8c9), 0 0 0 5px color-mix(in srgb, var(--object) 12%, transparent);
}

.answer-card:disabled { cursor:default; }
.answer-card__number { position:absolute; top:10px; left:10px; display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:#fff; background:var(--object); font-size:13px; font-weight:900; }
.answer-card__picture { display:grid; place-items:center; width:108px; height:108px; max-width:80%; margin:4px auto 13px; border-radius:32px; background:color-mix(in srgb, var(--object) 12%, #fff); font-size:65px; line-height:1; }
.answer-card strong { display:block; font-size:17px; line-height:1.2; }
.answer-card__mark { position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--object); background:color-mix(in srgb, var(--object) 11%, #fff); font-weight:900; }
.answer-card.is-hint { border-color:#efbc42; box-shadow:0 8px 0 #e1b84e, 0 0 0 6px rgba(241, 182, 52, .16); }
.answer-card.is-wrong { border-color:#e58d83; background:#fff0ed; box-shadow:0 8px 0 #d8a29b; opacity:.73; }
.answer-card.is-correct { border-color:#54a87e; background:#eaf8ef; box-shadow:0 8px 0 #79a98c; }

.feedback {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:13px;
  min-height:105px;
  margin-top:22px;
  padding:18px;
  border:2px solid #d9dfd7;
  border-radius:20px;
  background:#f3f6f2;
}

.feedback__icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#fff; background:#9eaaa5; font-size:24px; font-weight:900; }
.feedback strong { display:block; margin:2px 0 4px; font-size:17px; }
.feedback p { margin:0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.45; }
.feedback .primary-button { grid-column:2; justify-self:start; margin-top:4px; }
.feedback--correct { border-color:#82ba99; background:#ebf8ef; }
.feedback--correct .feedback__icon { background:#4fa77d; }
.feedback--wrong { border-color:#e3a39c; background:#fff0ed; }
.feedback--wrong .feedback__icon { background:#dc6d61; }

.keyboard-note { margin:15px 0 0; color:var(--muted); font-size:11px; font-weight:700; text-align:center; }
kbd { display:inline-grid; place-items:center; min-width:23px; height:23px; padding:0 5px; border:1px solid #cfc8ac; border-radius:6px; background:#fff; box-shadow:0 2px 0 #d5cfba; font:inherit; font-weight:900; }
.back-button { margin-top:22px; }

.result-card {
  max-width:900px;
  margin:35px auto 0;
  padding:55px;
  text-align:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, #fffdf7), #fffdf7);
}

.result-card__icon { display:grid; place-items:center; width:88px; height:88px; margin:0 auto 24px; border:3px solid color-mix(in srgb, var(--accent) 45%, #fff); border-radius:28px; background:#fff; font-size:46px; }
.result-card h1 { font-size:clamp(42px, 6vw, 64px); line-height:1; }
.result-card > p { max-width:680px; margin:20px auto; color:var(--muted); font-size:17px; font-weight:700; line-height:1.55; }
.result-stars { margin:22px 0; color:#eaaa27; font-size:48px; letter-spacing:.08em; }
.result-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:25px 0 30px; }
.result-stats div { padding:20px; border:2px solid #d8ddcf; border-radius:20px; background:rgba(255,255,255,.72); }
.result-stats strong, .result-stats span { display:block; }
.result-stats strong { font-size:28px; }
.result-stats span { margin-top:3px; color:var(--muted); font-size:12px; font-weight:800; }
.result-actions { display:flex; justify-content:center; gap:13px; flex-wrap:wrap; }

.collection-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:25px; }
.collection-heading h1 { font-size:clamp(42px, 6vw, 62px); line-height:1; }
.collection-heading > strong { color:var(--muted); font-size:16px; }
.album-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; }

.album-card {
  position:relative;
  min-height:175px;
  padding:16px 10px;
  border:2px solid #d9ddcf;
  border-radius:21px;
  background:#f0f1ec;
  text-align:center;
}

.album-card.is-opened { border-color:color-mix(in srgb, var(--accent) 48%, #d9ddcf); background:color-mix(in srgb, var(--accent) 9%, #fff); }
.album-card__number { position:absolute; top:8px; left:8px; font-size:10px; font-weight:900; }
.album-card__picture { display:grid; place-items:center; width:82px; height:82px; margin:8px auto 10px; border-radius:24px; background:#fff; font-size:46px; }
.album-card strong, .album-card small { display:block; }
.album-card strong { font-size:13px; }
.album-card small { margin-top:4px; color:var(--muted); font-size:10px; font-weight:700; }
.collection-actions { display:flex; justify-content:space-between; gap:14px; margin-top:28px; }
.reset-button { border:2px solid #e0aaa2; color:#9b443d; background:#fff4f1; }
.page-footer { padding:36px 0 5px; color:var(--muted); font-family:Georgia, serif; font-size:13px; font-weight:800; letter-spacing:.14em; text-align:center; text-transform:uppercase; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  .hero__art { width:min(620px, 100%); justify-self:center; }
  .routes-grid { grid-template-columns:1fr; }
  .route-card { min-height:0; }
  .route-card > p { min-height:0; }
  .riddle-layout { grid-template-columns:1fr; }
  .riddle-card { min-height:360px; }
  .album-grid { grid-template-columns:repeat(4, 1fr); }
}

@media (max-width:720px) {
  .app { width:min(100% - 22px, 1120px); padding-top:10px; }
  .topbar { align-items:flex-start; }
  .topbar__actions { flex-direction:column; }
  .utility-button { min-height:43px; }
  .utility-button small { display:none; }
  .hero { padding:28px; border-radius:29px; }
  .hero h1 { font-size:43px; }
  .section-heading, .game-heading, .collection-heading { align-items:flex-start; flex-direction:column; }
  .section-heading > p { text-align:left; }
  .steps-grid { grid-template-columns:1fr; }
  .game-shell, .collection-shell { padding:22px; border-radius:28px; }
  .game-progress { width:100%; min-width:0; grid-template-columns:1fr auto; }
  .answers-panel__heading { align-items:flex-start; }
  .answers-grid { grid-template-columns:1fr; }
  .answer-card { display:grid; grid-template-columns:42px 80px 1fr 32px; align-items:center; gap:8px; min-height:104px; padding:10px; text-align:left; }
  .answer-card__number { position:static; }
  .answer-card__picture { width:76px; height:76px; max-width:none; margin:0; border-radius:20px; font-size:47px; }
  .answer-card__mark { position:static; }
  .album-grid { grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:480px) {
  .brand__mark { width:44px; height:44px; font-size:21px; }
  .brand strong { font-size:15px; }
  .brand small { font-size:9px; }
  .topbar__actions { gap:6px; }
  .utility-button { min-width:48px; justify-content:center; padding:6px 9px; }
  .utility-button span:last-child { display:none; }
  .hero { padding:23px 19px; }
  .hero h1 { font-size:38px; }
  .hero__copy > p { font-size:15px; }
  .hero__copy .primary-button, .hero__copy .secondary-button { width:100%; margin-right:0; }
  .game-shell, .collection-shell { padding:17px; }
  .game-heading h1 { font-size:34px; }
  .riddle-card { min-height:330px; padding:24px; }
  .riddle-card__book { margin-bottom:23px; }
  .riddle-card blockquote { font-size:25px; }
  .answers-panel { padding:17px; }
  .answers-panel__heading { flex-direction:column; }
  .hint-button { width:100%; }
  .feedback { grid-template-columns:42px 1fr; padding:14px; }
  .feedback .primary-button { grid-column:1 / -1; width:100%; }
  .album-grid { grid-template-columns:repeat(2, 1fr); }
  .collection-actions { flex-direction:column; }
  .result-card { padding:38px 20px; }
  .result-card h1 { font-size:39px; }
  .result-stats { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}