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

:root {
  --ink:#1d5148;
  --muted:#657d76;
  --paper:#fffaf0;
  --line:#decfab;
  --green:#42a184;
  --green-dark:#23745f;
  --coral:#ee735e;
  --yellow:#f2bd4f;
  --shadow:0 12px 0 rgba(111,91,48,.1),0 24px 44px rgba(51,78,65,.1);
  --piece-shape:polygon(0 0,40% 0,40% 8%,60% 8%,60% 0,100% 0,100% 38%,92% 38%,92% 62%,100% 62%,100% 100%,60% 100%,60% 92%,40% 92%,40% 100%,0 100%,0 62%,8% 62%,8% 38%,0 38%);
}

* { 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-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; }
.game-icon { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; border:3px solid #fff; border-radius:19px; background:#fff1bf; box-shadow:0 7px 0 #d8cda9; }
.game-icon svg { width:41px; height:41px; fill:#f2c75a; stroke:var(--green-dark); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.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); } }
.eyebrow { margin:0 0 11px; 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; }

.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,.choice-button:focus-visible { outline:4px solid #286dba; outline-offset:4px; }

.hero { display:grid; grid-template-columns:50% 50%; min-height:510px; 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:58px 50px; }
.hero-copy h1 { max-width:590px; font-size:clamp(50px,5.7vw,72px); }
.hero-copy>p:not(.eyebrow) { max-width:520px; margin:26px 0 33px; color:var(--muted); font-size:20px; line-height:1.52; }
.hero-art { position:relative; min-height:510px; overflow:hidden; background:#dcebe5; }
.hero-scene.scene-view { position:absolute; inset:34px 25px 96px; overflow:hidden; border:9px solid #fff9eb; border-radius:30px; box-shadow:0 15px 30px #28594c38; transform:rotate(1deg); }
.scene-view { position:relative; overflow:hidden; background:#dcebe5; }
.scene-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene-object { position:absolute; left:20%; bottom:2%; width:60%; height:90%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 9px rgba(29,61,48,.2)); }
.hero-hole { position:absolute; left:40%; top:31%; width:28%; height:39%; clip-path:var(--piece-shape); background:#fff6df; box-shadow:inset 0 0 0 5px #d6b769; }
.hero-patch { position:absolute; display:grid; place-items:center; width:114px; height:90px; overflow:hidden; clip-path:var(--piece-shape); background:#fff9e9; filter:drop-shadow(0 9px 8px #28594c40); }
.hero-patch img { width:96%; height:96%; object-fit:contain; }.hero-patch--one { left:15%; bottom:23px; transform:rotate(-7deg); }.hero-patch--two { left:40%; bottom:15px; transform:rotate(5deg); }.hero-patch--three { right:9%; bottom:25px; transform:rotate(-4deg); }

.steps { display:grid; grid-template-columns:1.08fr 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:760px; font-size:52px; }.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 { position:relative; aspect-ratio:3/2; overflow:hidden; border-bottom:3px solid var(--line); }
.route-preview .scene-view { position:absolute; inset:0; }.route-preview .missing-hole { box-shadow:inset 0 0 0 4px #d6b769; }
.route-copy { display:flex; flex:1; flex-direction:column; padding:24px; }.route-copy h3 { margin:0; font-family:Georgia,serif; font-size:30px; line-height:1.08; }.route-copy>p:not(.eyebrow) { min-height:104px; 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:43px; }
.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,1.65fr) minmax(340px,1fr); align-items:start; gap:20px; }
.picture-card { position:relative; min-width:0; aspect-ratio:3/2; overflow:hidden; border:10px solid #fffaf0; border-radius:34px; background:#d8ebe4; box-shadow:0 0 0 3px var(--line),var(--shadow); }
.picture-card .scene-view { position:absolute; inset:0; }
.missing-hole { position:absolute; clip-path:var(--piece-shape); background:#fff5dc repeating-linear-gradient(45deg,transparent 0 8px,#ead7aa 8px 10px); filter:drop-shadow(0 0 4px rgba(76,70,45,.25)); }
.missing-hole::after { content:""; position:absolute; inset:7px; clip-path:var(--piece-shape); border:3px dashed #b88f3e; }
.missing-hole.is-hint { animation:holeGlow 1s infinite; }
@keyframes holeGlow { 50% { filter:drop-shadow(0 0 10px #f0b72d); } }
.choice-panel { padding:22px; border:3px solid var(--line); border-radius:31px; background:var(--paper); box-shadow:var(--shadow); }
.choice-heading h3 { margin:0 0 17px; font-family:Georgia,serif; font-size:31px; }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.choice-button { min-width:0; padding:9px; border:3px solid #d9caab; border-radius:18px; background:#fff; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }
.choice-button:hover:not(:disabled) { transform:translateY(-3px); border-color:var(--yellow); background:#fff8df; }.choice-button:disabled { cursor:default; }
.choice-button.is-wrong { opacity:.54; border-color:#df7b6b; background:#ffebe5; }.choice-button.is-hint { border-color:#edae28; background:#fff0b5; animation:choiceGlow 1s infinite; }.choice-button.is-correct { border-color:#43a27e; background:#e4f5ec; }
@keyframes choiceGlow { 50% { box-shadow:0 0 0 5px #f3c65a70; } }
.choice-crop { position:relative; display:block; width:100%; overflow:hidden; clip-path:var(--piece-shape); background:#d9ebe4; }.crop-scene { position:absolute; overflow:hidden; }.crop-scene .scene-background,.crop-scene .scene-object { position:absolute; }
.choice-index { display:grid; place-items:center; width:27px; height:27px; margin:7px auto 0; border-radius:9px; color:#fff; background:#799c91; font-size:14px; font-weight:1000; }.choice-button.is-correct .choice-index { background:var(--green); }.choice-button.is-wrong .choice-index { background:#cc796b; }
.status-card { min-height:105px; margin-top:15px; padding:17px; border:2px solid var(--line); border-radius:21px; background:#fffdf7; }.status-card b,.status-card span { display:block; }.status-card b { font-size:18px; }.status-card span { margin-top:6px; color:var(--muted); line-height:1.37; }.status-card.is-warn { border-color:#e8bd4d; background:#fff3c8; }.status-card.is-good { border-color:#70c7a7; background:#e7f6ee; }
.choice-actions { display:grid; gap:10px; margin-top:14px; }.hint-button,.secondary-button { min-height:53px; padding:13px; border:2px solid #dfbb59; border-radius:17px; background:#fff0b9; }.hint-button:hover:not(:disabled) { background:#ffe591; }.hint-button:disabled { cursor:not-allowed; opacity:.55; }.next-button { width:100%; min-height:53px; background:var(--green); box-shadow:0 7px 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-gallery { display:grid; grid-template-columns:1fr 1fr; min-height:510px; padding:18px; gap:10px; background:#ddefe8; }.result-thumb { position:relative; min-width:0; overflow:hidden; border:5px solid #fff; border-radius:20px; box-shadow:0 7px 14px #315c4d25; }.result-thumb .scene-view { position:absolute; inset:0; }
.result-copy { display:flex; flex-direction:column; justify-content:center; padding:50px; }.result-copy h2 { font-size:51px; }.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-art { min-height:400px; 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; }.choice-panel { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.choice-heading,.choice-actions { grid-column:1/-1; }.choice-grid { align-self:start; }.status-card { margin:0; }
  .result-card { grid-template-columns:1fr; }.result-gallery { min-height:390px; }
}

@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:34px; }.age { padding:9px 11px; font-size:14px; }
  .hero { min-height:0; border-radius:29px; }.hero-art { min-height:315px; }.hero-scene { inset:18px 15px 77px; }.hero-patch { width:82px; height:66px; }.hero-copy { padding:31px 24px 35px; }.hero-copy h1 { font-size:44px; }.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:40px; }.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:30px; }.counter { grid-column:2; grid-row:2; justify-self:start; min-width:auto; padding:8px 12px; font-size:17px; }
  .picture-card { border-width:5px; border-radius:22px; }.choice-panel { display:block; padding:16px; border-radius:24px; }.choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.status-card { margin-top:13px; }.choice-actions { margin-top:12px; }
  .result-gallery { min-height:315px; padding:10px; }.result-copy { padding:31px 24px; }.result-copy h2 { font-size:40px; }.result-actions { flex-direction:column; }.result-actions button { width:100%; }.result-stats { flex-wrap:wrap; }
}

@media (max-width:390px) {
  .game-brand b { max-width:202px; }.age { padding-inline:9px; }.hero-copy h1 { font-size:41px; }.section-heading h2 { font-size:37px; }.play-head { gap:10px; }.play-head h2 { font-size:27px; }.choice-button { padding:6px; }.choice-index { width:24px; height:24px; margin-top:5px; }
}