:root {
  --ink: #2d504d;
  --muted: #6c817c;
  --paper: #fffdf7;
  --cream: #fff5d8;
  --green: #4f9876;
  --green-dark: #34735c;
  --blue: #5aa5c8;
  --yellow: #e8af48;
  --coral: #df735f;
  --line: #ded6ba;
  --shadow: 0 22px 54px rgba(45, 71, 61, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 15%, rgba(241, 191, 99, .18) 0 78px, transparent 79px),
    radial-gradient(circle at 92% 8%, rgba(97, 169, 139, .14) 0 98px, transparent 99px),
    #f5f3df;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
}
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 4px solid rgba(75, 133, 177, .35); outline-offset: 3px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

.app {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 48px;
}
.game-bar {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 9px 13px;
  border: 1px solid rgba(111, 104, 75, .18);
  border-radius: 24px;
  background: rgba(255, 253, 247, .91);
  box-shadow: 0 12px 28px rgba(58, 75, 63, .08);
}
.game-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.game-brand:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.game-brand > span:last-child { display: grid; gap: 2px; }
.game-brand strong { font-size: 18px; line-height: 1.05; }
.game-brand small { color: var(--muted); font-size: 12px; }
.game-icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #e8f3e8, #d9ece4);
  box-shadow: inset 0 0 0 2px rgba(73, 125, 101, .12);
}
.game-icon svg { width: 42px; height: 42px; }
.icon-water { fill: none; stroke: #4f98bd; stroke-width: 4; stroke-linecap: round; }
.icon-bank { fill: none; stroke: #6d9a6b; stroke-width: 5; stroke-linecap: round; }
.icon-bridge { fill: none; stroke: #b8793f; stroke-width: 4; stroke-linecap: round; }
.age-pill { padding: 9px 13px; border-radius: 999px; color: #735c37; background: #fff0c2; font-size: 12px; font-weight: 900; white-space: nowrap; }

.screen { display: none; }
.screen.is-active { display: block; }
.eyebrow { margin-bottom: 8px; color: #7a704f; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.primary-button, .secondary-button, .hint-button, .next-button {
  min-height: 50px;
  padding: 0 21px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .17s ease, box-shadow .17s ease, background .17s ease;
}
.primary-button, .next-button { border: 0; color: #fff; background: linear-gradient(180deg, #58a281, #3f896a); box-shadow: 0 8px 16px rgba(55, 125, 94, .19); }
.primary-button:hover, .next-button:hover { transform: translateY(-2px); box-shadow: 0 11px 20px rgba(55, 125, 94, .24); }
.primary-button:active, .next-button:active { transform: translateY(1px); }
.secondary-button { border: 2px solid #90ad9d; color: var(--green-dark); background: #fafff9; }
.hint-button { border: 2px solid #e0b250; color: #745c28; background: #fff2c9; }
.hint-button:hover { background: #ffe9a8; }
.next-button { background: linear-gradient(180deg, #5b92ba, #477ea6); }
.primary-button:disabled, .hint-button:disabled { cursor: default; opacity: .58; transform: none; box-shadow: none; }

.home-screen {
  position: relative;
  display: none;
  min-height: 650px;
  overflow: hidden;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 36px;
  background: linear-gradient(135deg, #fffaf0 0 48%, #e8f0db 48% 100%);
  box-shadow: var(--shadow);
}
.home-screen.is-active { display: grid; }
.hero-scene { position: relative; min-height: 492px; overflow: hidden; isolation: isolate; }
.hero-scene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.05), rgba(228,240,219,.35)); }
.hero-water { position: absolute; z-index: 0; left: -10%; right: -6%; top: 31%; height: 42%; border-radius: 48% 52% 42% 58%; background: linear-gradient(180deg, #8dccd9, #56a0bc); transform: rotate(-10deg); box-shadow: inset 0 0 0 7px rgba(255,255,255,.24); }
.hero-water::after { content: ""; position: absolute; inset: 18% 7%; border-top: 3px dashed rgba(255,255,255,.55); border-bottom: 3px dashed rgba(255,255,255,.34); border-radius: 50%; }
.hero-island { position: absolute; z-index: 1; display: block; border: 6px solid #746244; border-radius: 48%; background: #84a95d; box-shadow: inset 0 8px rgba(224,239,184,.5), 0 7px 0 rgba(84,72,48,.28); }
.island-one { left: 2%; bottom: 12%; width: 35%; height: 22%; transform: rotate(8deg); }
.island-two { left: 43%; top: 36%; width: 27%; height: 19%; transform: rotate(-8deg); }
.island-three { right: -4%; top: 11%; width: 33%; height: 22%; transform: rotate(7deg); }
.hero-bridge { position: absolute; z-index: 4; left: 29%; top: 49%; width: 31%; filter: drop-shadow(0 10px 8px rgba(47, 56, 37, .24)); transform: rotate(-9deg); }
.hero-beaver { position: absolute; z-index: 5; left: 5%; bottom: 14%; width: 32%; height: 34%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(47,56,37,.2)); }
.hero-hedgehog { position: absolute; z-index: 4; right: 2%; top: 5%; width: 28%; height: 30%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(47,56,37,.17)); transform: scaleX(-1); }
.hero-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: 62px 54px 150px 34px; }
.hero-copy h1 { max-width: 470px; margin-bottom: 17px; font-size: clamp(43px, 5vw, 65px); line-height: .99; letter-spacing: -.045em; }
.hero-copy > p:not(.eyebrow) { max-width: 475px; margin-bottom: 21px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.hero-facts span { padding: 8px 11px; border: 1px solid rgba(75,121,98,.14); border-radius: 999px; background: rgba(255,255,255,.72); font-size: 12px; font-weight: 900; }
.how-strip { position: absolute; z-index: 8; left: 38px; right: 38px; bottom: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.how-strip article { display: flex; min-width: 0; min-height: 82px; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,247,.94); box-shadow: 0 9px 18px rgba(57,72,58,.07); }
.how-strip b { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border-radius: 13px; color: #fff; background: var(--coral); }
.how-strip span { display: grid; gap: 3px; min-width: 0; }
.how-strip strong { font-size: 14px; }.how-strip small { color: var(--muted); font-size: 12px; line-height: 1.25; }

.routes-screen, .play-screen { padding: 31px; border: 1px solid var(--line); border-radius: 32px; background: rgba(255,251,242,.96); box-shadow: var(--shadow); }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-title h2 { margin: 0; font-size: 43px; letter-spacing: -.035em; }
.section-title > p { margin: 0 0 8px; color: var(--muted); font-weight: 850; }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.route-card { display: flex; min-width: 0; min-height: 414px; flex-direction: column; padding: 16px; border: 1px solid color-mix(in srgb, var(--route-color) 29%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--route-color) 8%, #fffaf0); }
.route-art { position: relative; height: 158px; overflow: hidden; border-radius: 18px; background-position: center; background-size: cover; isolation: isolate; }
.route-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(232,245,223,.06), rgba(33,72,61,.2)); }
.route-art .mini-water { position: absolute; z-index: 1; left: -8%; right: -8%; bottom: 15%; height: 44%; border-radius: 50%; background: rgba(78,159,187,.82); transform: rotate(-7deg); }
.route-art .mini-island { position: absolute; z-index: 2; left: 33%; bottom: 19%; width: 29%; height: 25%; border: 3px solid #756449; border-radius: 50%; background: #8cad63; }
.route-art img { position: absolute; z-index: 4; right: 3%; bottom: 1%; width: 37%; height: 72%; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(35,48,37,.2)); transform: var(--friend-flip); }
.route-art .mini-bridge { position: absolute; z-index: 4; left: 13%; bottom: 17%; width: 40%; transform: rotate(-8deg); }
.route-number { margin: 19px 0 8px; color: #806d49; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.route-card h3 { margin-bottom: 8px; font-size: 23px; }.route-card > p { min-height: 61px; margin-bottom: 15px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.route-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; margin-bottom: 11px; color: color-mix(in srgb,var(--route-color) 84%,#233); font-size: 12px; font-weight: 850; }
.route-progress { height: 8px; margin-bottom: 17px; overflow: hidden; border-radius: 999px; background: rgba(51,81,68,.11); }.route-progress i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--route-color); }
.route-button { display: flex; min-height: 49px; align-items: center; justify-content: space-between; padding: 0 17px; border: 0; border-radius: 14px; color: #fff; background: var(--route-color); cursor: pointer; font-weight: 900; }
.route-button:hover { filter: brightness(1.04); transform: translateY(-1px); }.route-button:active { transform: translateY(1px); }
.back-link { margin-top: 25px; padding: 8px 0; border: 0; color: var(--green-dark); background: transparent; cursor: pointer; font-weight: 850; }

.task-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.task-head h2 { margin: 0; font-size: 38px; letter-spacing: -.035em; }
.round-button { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; cursor: pointer; font-size: 20px; }
.counter { padding: 10px 14px; border-radius: 999px; background: #e7f0e8; font-size: 13px; font-weight: 900; }
.route-progress-line { height: 8px; margin: 15px 0 17px; overflow: hidden; border-radius: 999px; background: rgba(49,91,75,.12); }.route-progress-line i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--route-color, var(--green)); transition: width .25s ease; }
.mission-strip { display: grid; grid-template-columns: 94px 1fr auto; min-height: 124px; align-items: center; gap: 18px; margin-bottom: 16px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(100deg,#edf5e7,#fff7e8); }
.mission-strip > img { width: 94px; height: 94px; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(50,62,47,.13)); transform: scaleX(-1); }
.mission-strip div > span { color: #806c47; font-size: 11px; font-weight: 900; letter-spacing: .12em; }.mission-strip h3 { margin: 5px 0; font-size: 24px; }.mission-strip p { margin: 0; color: var(--muted); font-size: 14px; }
.mission-strip > b { padding: 10px 13px; border-radius: 999px; color: #fff; background: #718665; font-size: 12px; white-space: nowrap; }

.crossing-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 25px; background: #fffdf6; }
.crossing-board { position: relative; width: 100%; max-width: 860px; margin: 0 auto; overflow: hidden; border-radius: 20px; background-image: linear-gradient(rgba(66,137,160,.55),rgba(66,137,160,.55)), var(--board-bg); background-position: center; background-size: cover; box-shadow: inset 0 0 0 2px rgba(255,255,255,.36); isolation: isolate; }
.crossing-board::after { content: ""; position: absolute; z-index: 0; inset: 0; background: repeating-linear-gradient(170deg, transparent 0 18px, rgba(255,255,255,.13) 19px 21px, transparent 22px 38px); pointer-events: none; }
.board-grid { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); }
.map-cell { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; }
.stone-tile::before, .start-cell::before, .goal-cell::before { content: ""; position: absolute; z-index: 0; width: 74%; height: 57%; border: 3px solid #726e61; border-radius: 52% 48% 46% 54%; background: linear-gradient(150deg, #e1ded0, #aaa89f); box-shadow: inset 0 4px rgba(255,255,255,.42), 0 5px 0 rgba(57,72,69,.26); transform: rotate(var(--stone-angle, -4deg)); }
.stone-tile:nth-child(3n)::before { --stone-angle: 5deg; background: linear-gradient(150deg,#d7d5c7,#999e99); }
.stone-tile:nth-child(4n)::before { --stone-angle: -8deg; width: 68%; background: linear-gradient(150deg,#e5d8bb,#a99e86); }
.start-cell img, .goal-cell img { position: relative; z-index: 4; width: 88%; height: 92%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(39,54,47,.2)); }
.start-cell img { transform: scaleX(-1); }.goal-cell img { transform: scaleX(-1); }
.bridge-slot { position: relative; z-index: 4; width: 76%; height: 68%; padding: 0; border: 3px dashed rgba(255,250,218,.95); border-radius: 18px; background: rgba(255,255,235,.2); cursor: pointer; box-shadow: 0 0 0 3px rgba(63,123,144,.16); }
.bridge-slot::before { content: "+"; display: grid; position: absolute; inset: 19%; place-items: center; border-radius: 12px; color: #fff9d5; background: rgba(51,112,134,.62); font-size: clamp(18px, 3vw, 28px); font-weight: 900; }
.bridge-slot:hover { background: rgba(255,247,195,.35); transform: translateY(-1px); }
.bridge-slot.is-selected { border-style: solid; border-color: #6f4f36; background: #b7783c; box-shadow: 0 5px 0 rgba(74,52,36,.32), 0 0 0 4px rgba(255,245,204,.68); }
.bridge-slot.is-selected::before { inset: 10% 9%; border-radius: 8px; background: repeating-linear-gradient(90deg,#e5ad5b 0 16%,#925b32 17% 20%); box-shadow: inset 0 0 0 2px rgba(89,57,34,.55); content: ""; }
.bridge-slot.is-hinted { animation: hint-pulse .75s ease 2; box-shadow: 0 0 0 6px rgba(255,211,81,.5); }
.bridge-slot.is-missing { animation: missing-shake .4s ease; box-shadow: 0 0 0 6px rgba(224,112,83,.45); }
.bridge-slot:disabled { cursor: default; }
@keyframes hint-pulse { 50% { transform: scale(1.11); } }
@keyframes missing-shake { 25% { translate: -3px 0; } 55% { translate: 4px 0; } 80% { translate: -2px 0; } }
.traveler { position: absolute; z-index: 8; left: calc(var(--x) * 100% / var(--cols)); top: calc(var(--y) * 100% / var(--rows)); display: grid; width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); place-items: center; pointer-events: none; transition: left .18s linear, top .18s linear; }
.traveler img { width: 87%; height: 91%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(34,52,43,.24)); transform: scaleX(var(--facing, -1)); }
.crossing-board.is-running .start-cell img { opacity: 0; }
.board-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 13px 4px 2px; color: var(--muted); font-size: 12px; font-weight: 800; }
.board-legend span { display: inline-flex; align-items: center; gap: 7px; }.board-legend i { display: block; width: 24px; height: 15px; }
.legend-stone { border-radius: 50%; background: #b8b7ad; box-shadow: inset 0 2px #e5e2d6; }.legend-slot { border: 2px dashed #74a5b5; border-radius: 5px; background: #eef8f4; }.legend-bridge { border: 2px solid #785037; border-radius: 4px; background: repeating-linear-gradient(90deg,#e5ad5b 0 18%,#925b32 19% 23%); }

.builder-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(180px, .52fr) minmax(250px, .9fr); gap: 15px; align-items: stretch; margin-top: 16px; }
.builder-copy, .bridge-meter, .feedback { padding: 17px 18px; border: 1px solid var(--line); border-radius: 19px; background: #fffdf7; }
.builder-copy h3 { margin-bottom: 7px; font-size: 23px; }.builder-copy > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bridge-meter { display: flex; flex-direction: column; justify-content: center; gap: 7px; }.bridge-meter > span { color: var(--muted); font-size: 12px; font-weight: 800; }.bridge-meter strong { font-size: 21px; }.bridge-meter i { display: block; height: 9px; overflow: hidden; border-radius: 999px; background: rgba(65,108,91,.12); }.bridge-meter i b { display: block; width: var(--meter); height: 100%; border-radius: inherit; background: var(--route-color,var(--green)); transition: width .2s ease; }
.feedback { display: grid; align-content: center; gap: 4px; border-left: 6px solid #d7aa4e; background: #fff2cf; }.feedback b { font-size: 14px; }.feedback span { color: #5d706b; font-size: 12px; line-height: 1.4; }.feedback[data-tone="error"] { border-left-color: #cc7258; background: #ffe7df; }.feedback[data-tone="hint"] { border-left-color: #5a8bad; background: #e9f1f8; }.feedback[data-tone="success"] { border-left-color: #428568; background: #e3f1e7; }
.control-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 9px; }.control-actions button { width: 100%; }
.task-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin-top: 16px; }.task-tab { min-height: 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: #f6f1e5; cursor: pointer; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }.task-tab.is-active { color: #fff; border-color: var(--route-color); background: var(--route-color); }.task-tab.is-solved { color: var(--green-dark); background: #e1efe5; }

.result-screen { grid-template-columns: 1fr 1fr; min-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: #fffaf0; box-shadow: var(--shadow); }
.result-screen.is-active { display: grid; }
.result-scene { position: relative; min-height: 500px; overflow: hidden; background: linear-gradient(#dceccf,#a6cf92); isolation: isolate; }
.result-water { position: absolute; z-index: 0; left: -13%; right: -13%; top: 39%; height: 39%; border-radius: 50%; background: #65adc5; transform: rotate(-8deg); box-shadow: inset 0 0 0 8px rgba(255,255,255,.2); }
.result-island { position: absolute; z-index: 1; right: -5%; bottom: 4%; width: 50%; height: 30%; border: 7px solid #74644b; border-radius: 50%; background: #8caf65; }
.result-bridge { position: absolute; z-index: 3; left: 31%; bottom: 29%; width: 42%; filter: drop-shadow(0 10px 8px rgba(37,51,40,.22)); transform: rotate(-8deg); }
.result-beaver, .result-friend { position: absolute; z-index: 4; bottom: 4%; width: 40%; height: 44%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(37,51,40,.2)); }.result-beaver { left: 1%; transform: scaleX(-1); }.result-friend { right: 1%; transform: scaleX(-1); }
.result-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; }.result-copy h2 { margin-bottom: 17px; font-size: 46px; line-height: 1.04; letter-spacing: -.04em; }.result-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.55; }.result-facts { display: flex; gap: 9px; margin: 8px 0 27px; }.result-facts span { padding: 10px 13px; border-radius: 12px; background: #e5efe7; font-size: 13px; font-weight: 900; }.result-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.qa-report { margin-top: 16px; padding: 18px; border: 2px solid #5f9979; border-radius: 20px; background: #f3fbf5; }.qa-report h2 { margin-bottom: 10px; font-size: 25px; }.qa-report p { margin: 5px 0; font-size: 13px; }.qa-report .qa-fail { color: #a64e43; }

@media (max-width: 900px) {
  .hero-copy { padding-right: 34px; }.builder-panel { grid-template-columns: 1fr 1fr; }.feedback { grid-column: 1 / -1; }.control-actions { grid-template-columns: 1fr 1fr; }.control-actions .next-button { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .app { width: min(1120px, calc(100% - 20px)); padding-top: 14px; }
  .game-bar { min-height: 62px; padding: 8px 11px; border-radius: 18px; }.game-icon { width: 41px; height: 41px; flex-basis: 41px; }.game-icon svg { width: 35px; height: 35px; }.game-brand small { display: none; }
  .home-screen.is-active { display: flex; flex-direction: column; }.home-screen { min-height: 890px; }.hero-scene { min-height: 350px; order: 2; }.hero-copy { order: 1; padding: 35px 25px 16px; }.hero-copy h1 { font-size: 46px; }.hero-copy > p:not(.eyebrow) { font-size: 16px; }.how-strip { position: relative; left: auto; right: auto; bottom: auto; order: 3; grid-template-columns: 1fr; margin: 4px 20px 22px; }.how-strip article { min-height: 66px; }
  .routes-screen, .play-screen { padding: 20px 14px; border-radius: 25px; }.section-title { align-items: flex-start; }.section-title h2 { font-size: 35px; }.section-title > p { max-width: 116px; text-align: right; }.route-grid { grid-template-columns: 1fr; }.route-card { min-height: 394px; }.route-card > p { min-height: auto; }
  .task-head { gap: 10px; }.task-head h2 { font-size: 28px; }.round-button { width: 43px; height: 43px; }.counter { padding-inline: 9px; font-size: 12px; }
  .mission-strip { grid-template-columns: 76px 1fr; gap: 12px; }.mission-strip > img { width: 76px; height: 76px; }.mission-strip > b { grid-column: 1 / -1; justify-self: start; margin-top: -5px; }.mission-strip h3 { font-size: 21px; }
  .crossing-card { padding: 8px; }.crossing-board { border-radius: 15px; }.bridge-slot { width: 80%; height: 72%; border-width: 2px; border-radius: 10px; }.stone-tile::before, .start-cell::before, .goal-cell::before { border-width: 2px; box-shadow: inset 0 3px rgba(255,255,255,.42), 0 3px 0 rgba(57,72,69,.26); }
  .builder-panel { grid-template-columns: 1fr; }.feedback { grid-column: auto; }.control-actions { grid-column: auto; grid-template-columns: 1fr; }.control-actions .next-button { grid-column: auto; }
  .task-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }.result-screen.is-active { grid-template-columns: 1fr; }.result-scene { min-height: 310px; }.result-copy { padding: 32px 26px; }.result-copy h2 { font-size: 37px; }
}
@media (max-width: 430px) {
  .game-brand strong { font-size: 15px; }.age-pill { padding: 8px 9px; font-size: 11px; }.hero-copy h1 { font-size: 39px; }.hero-scene { min-height: 305px; }.hero-bridge { top: 48%; width: 34%; }.hero-beaver { width: 35%; }.hero-hedgehog { width: 31%; }
  .section-title { display: block; }.section-title > p { max-width: none; margin-top: 8px; text-align: left; }.route-art { height: 143px; }
  .task-head h2 { font-size: 23px; }.mission-strip { padding: 10px; }.mission-strip > img { width: 66px; height: 66px; }.mission-strip p { font-size: 12px; }.board-legend { gap: 10px; font-size: 10px; }.board-legend i { width: 20px; height: 13px; }
  .builder-copy, .bridge-meter, .feedback { padding: 14px; }.builder-copy h3 { font-size: 21px; }.result-scene { min-height: 275px; }.result-copy h2 { font-size: 32px; }.result-actions { display: grid; }.result-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}