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

:root { --ink:#184f45; --muted:#607c75; --paper:#fffaf0; --line:#dfd1ad; --mint:#dff1e8; --green:#3ca181; --green-dark:#18745f; --coral:#f57661; --yellow:#f3bc4b; --shadow:0 12px 0 rgba(91,77,42,.12),0 24px 42px rgba(62,72,55,.1); }
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:#fbf4e2 radial-gradient(circle at 1px 1px,#eadcaf 1.4px,transparent 1.5px) 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; }
.brand { display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none; }
.brand-icon { display:grid; place-items:center; width:58px; height:58px; border:3px solid #fff; border-radius:19px; background:#dff2e8; box-shadow:0 7px 0 #d9cdaa; }
.brand-icon svg { width:39px; fill:none; stroke:var(--green-dark); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.brand b,.brand small { display:block; }.brand b { font-size:22px; }.brand small { color:var(--muted); font-size:14px; }
.age { 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 .25s ease; }
@keyframes appear { from { opacity:0; transform:translateY(8px); } }
.hero { min-height:520px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:3px solid var(--line); border-radius:42px; background:var(--paper); box-shadow:var(--shadow); }
.hero-copy { align-self:center; padding:68px 56px; }
.eyebrow { margin:0 0 12px; color:#a95d2a; font-family:Georgia,serif; font-weight:900; letter-spacing:.16em; font-size:15px; }
h1,h2 { margin:0; font-family:Georgia,serif; line-height:1.03; }
h1 { font-size:clamp(54px,6.3vw,84px); max-width:610px; }
.hero-copy>p:not(.eyebrow) { max-width:520px; margin:28px 0 34px; color:var(--muted); font-size:22px; line-height:1.55; }
.primary,.secondary,.hint-button,.text-button,.back-button { border:0; cursor:pointer; font-weight:900; }
.primary { min-height:58px; padding:16px 28px; color:#fff; background:var(--coral); border-radius:18px; box-shadow:0 8px 0 #c64f3d; }
.primary:hover { transform:translateY(-2px); }.primary:active { transform:translateY(5px); box-shadow:0 3px 0 #c64f3d; }
.hero-art { position:relative; min-height:520px; background:#dcefea; overflow:hidden; }
.hero-art img { width:100%; height:100%; object-fit:cover; }
.hero-art:after { content:""; position:absolute; inset:20px; border:2px dashed rgba(255,255,255,.78); border-radius:28px; }
.hero-piece { position:absolute; width:31%; height:34%; border:8px solid #fff8e8; border-radius:20px; box-shadow:0 12px 24px #184f4530; background-image:url('../assets/scene-library/backgrounds/stream-bridge.webp'); background-size:323% 294%; }
.hero-piece--one { right:9%; top:12%; background-position:100% 0; transform:rotate(5deg); }.hero-piece--two { left:12%; bottom:11%; background-position:0 100%; transform:rotate(-5deg); }
.howto { display:flex; gap:22px; align-items:center; margin-top:28px; padding:26px 34px; border:2px dashed #d9c28c; border-radius:28px; background:#fffaf1; }
.howto-icon { font-size:42px; }.howto h2 { font-size:31px; }.howto p:last-child { margin:8px 0 0; color:var(--muted); font-size:18px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:18px 0 26px; }
.section-heading h2 { font-size:58px; }.section-heading>p { color:var(--muted); font-size:18px; }
.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.route-card { display:flex; flex-direction:column; overflow:hidden; min-width:0; border:3px solid var(--line); border-radius:32px; background:var(--paper); box-shadow:var(--shadow); }
.route-card img { width:100%; aspect-ratio:3/2; object-fit:cover; border-bottom:3px solid var(--line); }
.route-card__body { display:flex; flex:1; flex-direction:column; padding:25px; }
.route-card h3 { margin:0; font-family:Georgia,serif; font-size:32px; line-height:1.08; }.route-card__body>p:not(.eyebrow) { min-height:108px; color:var(--muted); line-height:1.5; }
.route-progress { height:10px; margin-top:auto; overflow:hidden; border-radius:99px; background:#e4eadb; }.route-progress span,.progress span { display:block; height:100%; background:var(--green); border-radius:inherit; }
.route-card button { width:100%; margin-top:18px; background:var(--green); box-shadow:0 8px 0 var(--green-dark); }
.text-button { margin:30px 0 0; 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:46px; }.back-button { width:52px; height:52px; border:2px solid var(--line); border-radius:50%; background:#fffaf1; font-size:25px; }
.counter { white-space:nowrap; min-width:92px; padding:14px 18px; border:2px solid #b8dacd; border-radius:19px; background:#fff; text-align:center; font-weight:1000; font-size:22px; }
.progress { height:12px; margin-bottom:20px; overflow:hidden; border-radius:99px; background:#e5eadb; }
.play-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start; }
.puzzle-card { padding:20px; border:3px solid var(--line); border-radius:32px; background:#fffaf1; box-shadow:var(--shadow); }
.puzzle-board { display:grid; gap:6px; aspect-ratio:3/2; overflow:hidden; border:6px solid #fff; border-radius:22px; background:#cfe5dd; box-shadow:inset 0 0 0 2px #c9b98e; }
.puzzle-piece { position:relative; min-width:0; border:0; border-radius:9px; cursor:pointer; background-color:#d7ebe5; background-repeat:no-repeat; box-shadow:inset 0 0 0 2px rgba(255,255,255,.8); transition:transform .15s,box-shadow .15s,filter .15s; }
.puzzle-piece:hover:not(:disabled) { transform:scale(.98); box-shadow:inset 0 0 0 5px #f2bd4f; z-index:2; }.puzzle-piece.is-selected { box-shadow:inset 0 0 0 7px #f2a93b; z-index:3; }.puzzle-piece.is-hint { animation:hint 1s infinite; z-index:4; }
.puzzle-piece.is-correct { box-shadow:inset 0 0 0 4px #42a47e; cursor:default; }.puzzle-piece.is-wrong { animation:shake .3s; }
.puzzle-piece__check { position:absolute; right:7px; bottom:7px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#fff; background:#319474; border:3px solid #fff; font-weight:1000; }
@keyframes hint { 50% { box-shadow:inset 0 0 0 8px #f2bd4f,0 0 0 5px #fff; } } @keyframes shake { 33% { transform:translateX(-5px); } 66% { transform:translateX(5px); } }
.puzzle-aside { display:grid; gap:15px; }.sample-card,.status-card { border:2px solid var(--line); border-radius:24px; background:#fffaf1; overflow:hidden; }
.sample-card span { display:block; padding:12px 15px 9px; font-weight:1000; letter-spacing:.12em; color:#a95d2a; }.sample-card img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.status-card { min-height:98px; 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.35; }.status-card.is-good { border-color:#72c9aa; background:#e7f6ee; }.status-card.is-warn { border-color:#efc55d; background:#fff3c9; }
.hint-button,.secondary { min-height:55px; padding:14px; border:2px solid #e2bd57; border-radius:18px; background:#fff0b9; }.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:1fr 1fr; align-items:center; overflow:hidden; border:3px solid var(--line); border-radius:38px; background:var(--paper); box-shadow:var(--shadow); }.result-art { height:100%; min-height:510px; background:#ddefe8; }.result-art img { width:100%; height:100%; object-fit:cover; }.result-card>div:last-child { padding:55px; }.result-card h2 { font-size:58px; }.result-card p:not(.eyebrow) { color:var(--muted); font-size:20px; line-height:1.5; }.result-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }.secondary { background:#fff; border-color:var(--green); }
@media (max-width:900px) { .hero { grid-template-columns:1fr; }.hero-art { min-height:390px; order:-1; }.hero-copy { padding:42px; }.route-grid { grid-template-columns:1fr; }.route-card { display:grid; grid-template-columns:42% 58%; }.route-card img { height:100%; aspect-ratio:auto; border:0; border-right:3px solid var(--line); }.route-card__body>p:not(.eyebrow) { min-height:auto; }.play-layout { grid-template-columns:1fr; }.puzzle-aside { grid-template-columns:180px 1fr; }.sample-card { grid-row:span 3; }.result-card { grid-template-columns:1fr; }.result-art { min-height:360px; } }
@media (max-width:620px) { .app { width:min(100% - 18px,1120px); padding-top:12px; }.game-head { align-items:flex-start; }.brand b { font-size:17px; }.brand small { font-size:12px; }.brand-icon { width:48px; height:48px; }.age { padding:9px 11px; font-size:14px; }.hero { min-height:0; border-radius:28px; }.hero-art { min-height:275px; }.hero-copy { padding:30px 24px 34px; } h1 { font-size:44px; }.hero-copy>p:not(.eyebrow) { margin:20px 0 27px; font-size:18px; }.howto { align-items:flex-start; padding:22px; }.section-heading { align-items:flex-start; flex-direction:column; }.section-heading h2 { font-size:43px; }.route-card { display:block; }.route-card img { height:auto; aspect-ratio:3/2; border:0; border-bottom:3px solid var(--line); }.play-head { grid-template-columns:auto 1fr; }.play-head h2 { font-size:32px; }.counter { grid-column:2; grid-row:2; justify-self:start; min-width:auto; padding:8px 12px; font-size:17px; }.puzzle-card { padding:9px; border-radius:22px; }.puzzle-board { gap:3px; border-width:3px; border-radius:15px; }.puzzle-piece { border-radius:5px; }.puzzle-piece__check { width:21px; height:21px; right:3px; bottom:3px; font-size:12px; }.puzzle-aside { grid-template-columns:110px 1fr; gap:10px; }.status-card { min-height:80px; padding:12px; }.status-card b { font-size:16px; }.status-card span { font-size:13px; }.hint-button,.next-button { grid-column:1/-1; }.result-card>div:last-child { padding:32px 24px; }.result-card h2 { font-size:42px; }.result-art { min-height:280px; } }