@import url('../portal-assets/fonts.css');

:root {
  --ink:#1c5148;
  --muted:#627c75;
  --paper:#fffaf0;
  --line:#dfd2b4;
  --green:#3fa184;
  --green-dark:#1e765f;
  --coral:#ef755f;
  --yellow:#f1bd4d;
  --shadow:0 12px 0 rgba(111,91,48,.11),0 24px 44px rgba(51,78,65,.1);
}

* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:#fbf3df radial-gradient(circle at 1px 1px,#e7d9ae 1.3px,transparent 1.4px) 0 0/22px 22px; font-family:"Nunito",Arial,sans-serif; }
button,a { font:inherit; }
button { color:inherit; }
.app { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:22px 0 54px; }
.game-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.game-brand { display:flex; align-items:center; gap:14px; min-width:0; color:inherit; text-decoration:none; }
.game-icon { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; border:3px solid #fff; border-radius:19px; background:#e2f1e4; box-shadow:0 7px 0 #d8cda9; }
.game-icon svg { width:42px; height:42px; fill:#f5d183; stroke:var(--green-dark); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.game-brand b,.game-brand small { display:block; }.game-brand b { overflow:hidden; font-size:22px; text-overflow:ellipsis; white-space:nowrap; }.game-brand small { color:var(--muted); font-size:14px; }
.age { flex:0 0 auto; padding:12px 20px; border:2px solid var(--line); border-radius:18px; background:#fffdf8; font-weight:900; }
.screen { display:none; }.screen.is-active { display:block; animation:appear .24s ease; }
@keyframes appear { from { opacity:0; transform:translateY(8px); } }

.hero { display:grid; grid-template-columns:52% 48%; min-height:520px; overflow:hidden; border:3px solid var(--line); border-radius:42px; background:var(--paper); box-shadow:var(--shadow); }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:62px 54px; }
.eyebrow { margin:0 0 12px; color:#a85d2a; font-family:Georgia,serif; font-size:15px; font-weight:900; letter-spacing:.15em; }
h1,h2 { margin:0; font-family:Georgia,serif; line-height:1.04; }
h1 { max-width:590px; font-size:clamp(52px,6vw,76px); }
.hero-copy>p:not(.eyebrow) { max-width:540px; margin:27px 0 34px; color:var(--muted); font-size:21px; line-height:1.55; }
.primary-button,.secondary-button,.hint-button,.text-button,.back-button { border:0; cursor:pointer; font-weight:900; }
.primary-button { min-height:58px; padding:16px 28px; color:#fff; border-radius:18px; background:var(--coral); box-shadow:0 8px 0 #c9513f; transition:transform .16s,background .16s,box-shadow .16s; }
.primary-button:hover { transform:translateY(-2px); }.primary-button:active { transform:translateY(5px); box-shadow:0 3px 0 #c9513f; }
.primary-button:focus-visible,.secondary-button:focus-visible,.hint-button:focus-visible,.text-button:focus-visible,.back-button:focus-visible,.strip-piece:focus-visible { outline:4px solid #286dba; outline-offset:4px; }
.hero-scene,.scene-view { position:relative; min-width:0; overflow:hidden; background:#dcebe5; }
.hero-scene { min-height:520px; }
.scene-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene-animal { position:absolute; left:12%; bottom:1%; width:76%; height:91%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 9px rgba(29,61,48,.22)); }
.hero-lines { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 4px),rgba(255,250,234,.94) calc(20% - 4px) 20%); }
.hero-strip { position:absolute; width:20%; height:100%; border:4px solid #fff8e9; border-radius:14px; box-shadow:0 11px 22px #184f4538; backdrop-filter:brightness(1.04); }
.hero-strip--one { left:40%; top:-13px; transform:rotate(2deg); }.hero-strip--two { right:0; bottom:-14px; transform:rotate(-2deg); }

.steps { display:grid; grid-template-columns:1.1fr repeat(3,1fr); gap:14px; margin-top:26px; }
.steps-title,.steps article { min-width:0; padding:23px; border:2px solid #ddcfac; border-radius:25px; background:#fffaf1; }
.steps-title { display:flex; flex-direction:column; justify-content:center; }.steps-title h2 { font-size:29px; }
.steps article { display:flex; align-items:flex-start; gap:13px; }
.steps article>span { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:14px; color:#fff; background:var(--green); font-size:20px; font-weight:1000; }
.steps b { font-size:17px; }.steps p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.4; }

.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:18px 0 26px; }
.section-heading h2 { max-width:720px; font-size:54px; }.section-heading>p { color:var(--muted); font-size:18px; text-align:right; }
.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:20px; }
.route-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:3px solid var(--line); border-radius:32px; background:var(--paper); box-shadow:var(--shadow); }
.route-preview { --strips:4; position:relative; aspect-ratio:3/2; overflow:hidden; border-bottom:3px solid var(--line); }
.route-preview .scene-view { position:absolute; inset:0; }
.route-preview::after { content:""; position:absolute; inset:0; pointer-events:none; }
.route-preview--vertical::after { background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--strips) - 3px),rgba(255,250,235,.96) calc(100% / var(--strips) - 3px) calc(100% / var(--strips))); }
.route-preview--horizontal::after { background:repeating-linear-gradient(0deg,transparent 0 calc(100% / var(--strips) - 3px),rgba(255,250,235,.96) calc(100% / var(--strips) - 3px) calc(100% / var(--strips))); }
.route-copy { display:flex; flex:1; flex-direction:column; padding:24px; }
.route-copy h3 { margin:0; font-family:Georgia,serif; font-size:31px; line-height:1.08; }.route-copy>p:not(.eyebrow) { min-height:106px; color:var(--muted); line-height:1.48; }
.route-progress { flex:0 0 10px; height:10px; margin-top:auto; overflow:hidden; border-radius:99px; background:#e4eadb; }.route-progress span,.progress-track span { display:block; height:100%; border-radius:inherit; background:var(--green); }
.route-copy .primary-button { width:100%; margin-top:18px; background:var(--green); box-shadow:0 8px 0 var(--green-dark); }
.route-copy .primary-button:active { box-shadow:0 3px 0 var(--green-dark); }
.text-button { margin-top:30px; padding:12px 0; background:none; text-decoration:underline; text-underline-offset:5px; }

.play-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin:8px 0 18px; }
.play-head h2 { font-size:45px; }.back-button { display:grid; place-items:center; width:52px; height:52px; border:2px solid var(--line); border-radius:50%; background:#fffaf1; font-size:25px; }
.counter { min-width:92px; padding:14px 18px; border:2px solid #b8dacd; border-radius:19px; background:#fff; text-align:center; white-space:nowrap; font-size:22px; font-weight:1000; }
.progress-track { height:12px; margin-bottom:20px; overflow:hidden; border-radius:99px; background:#e5eadb; }
.play-layout { display:grid; grid-template-columns:minmax(0,1fr) 286px; align-items:start; gap:20px; }
.board-card { min-width:0; padding:18px; border:3px solid var(--line); border-radius:32px; background:#fffaf1; box-shadow:var(--shadow); }
.strip-board { --strips:4; display:grid; gap:5px; aspect-ratio:3/2; overflow:hidden; border:6px solid #fff; border-radius:22px; background:#d7e9e2; box-shadow:inset 0 0 0 2px #c9b98e; }
.strip-board--vertical { grid-template-columns:repeat(var(--strips),minmax(0,1fr)); }
.strip-board--horizontal { grid-template-rows:repeat(var(--strips),minmax(0,1fr)); }
.strip-piece { position:relative; min-width:0; min-height:0; overflow:hidden; padding:0; border:0; border-radius:8px; background:#d7ebe5; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,.8); transition:transform .15s,box-shadow .15s,filter .15s; }
.strip-piece:hover:not(:disabled) { z-index:2; transform:scale(.98); box-shadow:inset 0 0 0 5px var(--yellow); }
.strip-piece.is-selected { z-index:3; box-shadow:inset 0 0 0 7px #f1a93a; }.strip-piece.is-correct { cursor:default; box-shadow:inset 0 0 0 4px #3da27e; }
.strip-piece.is-hint { z-index:4; animation:hint 1s infinite; }.strip-piece.is-wrong { animation:shake .3s; }
.strip-scene { position:absolute; overflow:hidden; }
.strip-board--vertical .strip-scene { top:0; left:calc(var(--piece) * -100%); width:calc(var(--strips) * 100%); height:100%; }
.strip-board--horizontal .strip-scene { top:calc(var(--piece) * -100%); left:0; width:100%; height:calc(var(--strips) * 100%); }
.strip-scene .scene-view { position:absolute; inset:0; }
.strip-check { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:27px; height:27px; border:3px solid #fff; border-radius:50%; color:#fff; background:#319474; font-size:14px; font-weight:1000; }
.strip-board.is-solved { gap:0; }.strip-board.is-solved .strip-piece { border-radius:0; box-shadow:none; }.strip-board.is-solved .strip-check { display:none; }
@keyframes hint { 50% { box-shadow:inset 0 0 0 8px #f2bd4f,0 0 0 4px #fff; } }
@keyframes shake { 33% { transform:translateX(-5px); } 66% { transform:translateX(5px); } }
.play-aside { display:grid; gap:14px; }
.sample-card,.status-card { overflow:hidden; border:2px solid var(--line); border-radius:23px; background:#fffaf1; }
.sample-card>span { display:block; padding:11px 15px 9px; color:#a85d2a; font-weight:1000; letter-spacing:.12em; }.sample-card>div { position:relative; aspect-ratio:3/2; overflow:hidden; }.sample-card .scene-view { position:absolute; inset:0; }
.status-card { min-height:108px; padding:18px; }.status-card b,.status-card span { display:block; }.status-card b { font-size:19px; }.status-card span { margin-top:7px; color:var(--muted); line-height:1.37; }.status-card.is-good { border-color:#72c9aa; background:#e7f6ee; }.status-card.is-warn { border-color:#efc55d; background:#fff3c9; }
.hint-button,.secondary-button { min-height:55px; padding:14px; border:2px solid #dfbb59; border-radius:18px; background:#fff0b9; }.hint-button:hover:not(:disabled) { background:#ffe591; }.hint-button:disabled { cursor:not-allowed; opacity:.55; }
.next-button { width:100%; background:var(--green); box-shadow:0 8px 0 var(--green-dark); }

.result-card { display:grid; grid-template-columns:52% 48%; align-items:stretch; overflow:hidden; border:3px solid var(--line); border-radius:38px; background:var(--paper); box-shadow:var(--shadow); }
.result-scene { position:relative; min-height:510px; overflow:hidden; background:#ddefe8; }.result-scene .scene-view { position:absolute; inset:0; }.result-copy { display:flex; flex-direction:column; justify-content:center; padding:52px; }.result-copy h2 { font-size:53px; }.result-copy>p:not(.eyebrow) { color:var(--muted); font-size:19px; line-height:1.5; }
.result-stats { display:flex; gap:12px; margin:8px 0 22px; }.result-stats span { padding:12px 15px; border:2px solid #cde1d5; border-radius:17px; background:#eef7f1; }.result-stats b { font-size:22px; }
.result-actions { display:flex; flex-wrap:wrap; gap:13px; }.secondary-button { background:#fff; border-color:var(--green); }

@media (max-width:960px) {
  .hero { grid-template-columns:1fr; }.hero-scene { min-height:390px; order:-1; }.hero-copy { padding:44px; }
  .steps { grid-template-columns:1fr 1fr; }.steps-title { grid-row:span 3; }
  .route-grid { grid-template-columns:1fr; }.route-card { display:grid; grid-template-columns:41% 59%; }.route-preview { height:100%; aspect-ratio:auto; border:0; border-right:3px solid var(--line); }.route-copy>p:not(.eyebrow) { min-height:auto; }
  .play-layout { grid-template-columns:1fr; }.play-aside { grid-template-columns:185px 1fr; }.sample-card { grid-row:span 3; }
  .result-card { grid-template-columns:1fr; }.result-scene { min-height:370px; }
}

@media (max-width:650px) {
  .app { width:min(1120px,calc(100% - 18px)); padding-top:12px; }.game-head { align-items:flex-start; }.game-brand b { max-width:230px; font-size:17px; }.game-brand small { font-size:12px; }.game-icon { flex-basis:48px; width:48px; height:48px; }.game-icon svg { width:35px; }.age { padding:9px 11px; font-size:14px; }
  .hero { min-height:0; border-radius:29px; }.hero-scene { min-height:280px; }.hero-copy { padding:31px 24px 35px; } h1 { font-size:45px; }.hero-copy>p:not(.eyebrow) { margin:20px 0 27px; font-size:18px; }
  .steps { grid-template-columns:1fr; }.steps-title { grid-row:auto; }.steps article { padding:18px; }
  .section-heading { align-items:flex-start; flex-direction:column; }.section-heading h2 { font-size:41px; }.section-heading>p { text-align:left; }
  .route-card { display:block; }.route-preview { aspect-ratio:3/2; border:0; border-bottom:3px solid var(--line); }.route-copy { padding:22px; }
  .play-head { grid-template-columns:auto 1fr; }.play-head h2 { font-size:31px; }.counter { grid-column:2; grid-row:2; justify-self:start; min-width:auto; padding:8px 12px; font-size:17px; }
  .board-card { padding:8px; border-radius:22px; }.strip-board { gap:3px; border-width:3px; border-radius:15px; }.strip-piece { border-radius:4px; }.strip-check { right:2px; bottom:2px; width:21px; height:21px; font-size:11px; }
  .play-aside { grid-template-columns:112px 1fr; gap:10px; }.sample-card { grid-row:span 2; }.status-card { min-height:82px; padding:12px; }.status-card b { font-size:16px; }.status-card span { font-size:13px; }.hint-button,.next-button { grid-column:1/-1; }
  .result-scene { min-height:285px; }.result-copy { padding:32px 24px; }.result-copy h2 { font-size:41px; }.result-actions { flex-direction:column; }.result-actions button { width:100%; }.result-stats { flex-wrap:wrap; }
}

@media (max-width:390px) {
  .game-brand b { max-width:205px; }.age { padding-inline:9px; }.hero-copy { padding-inline:20px; } h1 { font-size:42px; }.section-heading h2 { font-size:38px; }.play-head { gap:10px; }.play-head h2 { font-size:28px; }.scene-animal { left:9%; width:82%; }
}