:root {
  color-scheme: light;
  --ink: #234f46;
  --muted: #627b75;
  --paper: #fffaf0;
  --line: #dfcfaa;
  --mint: #dff1e7;
  --green: #3e9d7d;
  --green-dark: #26765e;
  --coral: #f17363;
  --yellow: #f8bf49;
  font-family: Inter, Nunito, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: radial-gradient(circle at 12px 12px, rgba(224,198,142,.22) 0 2px, transparent 2.5px) 0 0/28px 28px, #fbf6e8; }
button, a { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.app { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 42px; }
.screen { display: none; }
.screen.is-active { display: block; animation: appear .25s ease both; }
@keyframes appear { from { opacity: 0; transform: translateY(7px); } }
.game-topbar, .play-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 5px 0 rgba(179,151,91,.22); font-size: 25px; }
.brand b, .brand small { display: block; }
.brand b { font-size: 20px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.album-button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border: 2px solid #cbded4; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 rgba(65,114,96,.16); cursor: pointer; }
.album-button b { padding: 4px 8px; border-radius: 99px; background: var(--mint); }
.eyebrow { display: block; color: #9b6a29; font: 800 13px/1.3 Georgia, serif; letter-spacing: .14em; }
.hero-card { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); min-height: 448px; overflow: hidden; border: 3px solid var(--line); border-radius: 40px; background: var(--paper); box-shadow: 0 15px 0 rgba(182,151,86,.14), 0 26px 45px rgba(71,66,46,.12); }
.hero-copy { padding: 66px 46px 52px; }
.hero-copy h1, .play-heading h1, .result-card h1 { margin: 12px 0 20px; font: 800 clamp(48px,6vw,76px)/.96 Georgia, serif; letter-spacing: -.03em; }
.hero-copy p { max-width: 610px; margin: 0; color: #4f6964; font-size: 21px; line-height: 1.55; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.hero-facts span { padding: 10px 14px; border-radius: 99px; background: #fff; box-shadow: 0 5px 15px rgba(55,73,63,.08); font-weight: 700; }
.hero-scene { position: relative; overflow: hidden; background: linear-gradient(145deg,#d6ece1 0 58%,#a7cfa0 58%); }
.hero-scene::before { content:""; position:absolute; right:-90px; bottom:-65px; width:360px; height:250px; border-radius:50%; background:#78b274; }
.hero-animal { position: absolute; z-index: 2; display: grid; place-items: center; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.78); box-shadow: 0 12px 0 rgba(49,105,80,.14); }
.hero-animal img { width: 190px; height: 190px; object-fit: contain; }
.hero-animal--fox { left: 28px; bottom: 27px; }
.hero-animal--otter { right: -5px; top: 38px; width: 180px; height: 180px; }
.hero-animal--otter img { width: 155px; height: 155px; }
.hero-glass { position: absolute; z-index: 4; left: 185px; top: 45px; display: grid; place-items: center; width: 145px; height: 145px; border: 15px solid #f6bd4d; border-radius: 50%; background: rgba(255,255,255,.78); color: #8068b3; font: 800 64px Georgia,serif; box-shadow: 9px 12px 0 rgba(51,94,75,.16); transform: rotate(-8deg); }
.hero-glass::after { content:""; position:absolute; width:82px; height:24px; right:-62px; bottom:-37px; border-radius:20px; background:#e47460; transform:rotate(48deg); }
.routes-section { margin-top: 58px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:20px; }
.section-heading h2 { margin:5px 0 0; font:800 clamp(34px,5vw,50px)/1.05 Georgia,serif; }
.section-heading p { margin:0 0 6px; color:var(--muted); }
.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.route-card { overflow:hidden; border:2px solid var(--line); border-radius:28px; background:#fffaf2; box-shadow:0 9px 0 rgba(185,153,83,.15); }
.route-preview { display:flex; justify-content:center; align-items:end; height:185px; padding:18px 20px 0; background:var(--route-bg); }
.route-preview img { width:105px; height:132px; margin:0 -15px; object-fit:contain; filter:drop-shadow(0 8px 4px rgba(46,78,63,.14)); }
.route-preview img:nth-child(2) { z-index:2; width:125px; height:150px; }
.route-body { padding:24px; }
.route-body > span { color:var(--route-accent); font-weight:900; letter-spacing:.1em; font-size:12px; }
.route-body h3 { margin:7px 0 8px; font:800 28px/1.1 Georgia,serif; }
.route-body p { min-height:72px; margin:0; color:var(--muted); line-height:1.5; }
.route-progress { height:8px; margin:18px 0; overflow:hidden; border-radius:99px; background:#eee8d8; }
.route-progress i { display:block; height:100%; border-radius:inherit; background:var(--route-accent); }
.route-body button, .hint-button, .feedback button, .result-actions button { min-height:50px; border:0; border-radius:16px; background:var(--green); color:#fff; box-shadow:0 5px 0 var(--green-dark); font-weight:800; cursor:pointer; }
.route-body button { display:flex; justify-content:space-between; width:100%; padding:0 16px; align-items:center; }
.play-heading { flex:1; }
.play-heading span { color:#9b6a29; font-weight:900; letter-spacing:.1em; font-size:12px; }
.play-heading h1 { margin:3px 0 0; font-size:clamp(31px,4vw,47px); }
.round-button { width:50px; height:50px; border:2px solid #cbded4; border-radius:50%; background:#fff; box-shadow:0 4px 0 rgba(65,114,96,.16); font-size:25px; cursor:pointer; }
.round-counter { display:grid; place-items:center; min-width:78px; min-height:64px; padding:7px 14px; border:2px solid #cbded4; border-radius:18px; background:#fff; }
.round-counter b { font-size:22px; }.round-counter span { font-size:12px; color:var(--muted); }
.progress-track { height:10px; margin:-6px 0 22px; overflow:hidden; border-radius:99px; background:#e6e1d4; }
.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4eac91,#f2b84b); transition:width .3s; }
.detective-layout { display:grid; grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr); gap:20px; align-items:start; }
.clue-board, .suspects-panel { border:2px solid var(--line); border-radius:30px; background:#fffaf2; box-shadow:0 10px 0 rgba(185,153,83,.14); }
.clue-board { padding:25px; }
.clue-board__head { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.clue-board__head strong { color:var(--green-dark); font-size:13px; }
.mystery-card { position:relative; display:grid; place-items:center; height:170px; margin:18px 0; overflow:hidden; border:2px dashed #bbd0c3; border-radius:24px; background:linear-gradient(135deg,#e7f2ea,#f7efd9); }
.mystery-card .paw { font-size:70px; opacity:.32; transform:rotate(-10deg); }.mystery-card b { position:absolute; bottom:18px; letter-spacing:.18em; }.mystery-card i { position:absolute; right:24px; top:18px; width:38px; height:38px; border:5px solid #f4bc4b; border-radius:50%; }
.clue-list { display:grid; gap:10px; }
.clue { display:grid; grid-template-columns:38px 1fr; align-items:center; min-height:66px; padding:10px 13px; border:2px solid #e2dac5; border-radius:18px; background:#f0ede4; color:#89928e; }
.clue span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#d8d7d1; color:#fff; font-weight:900; }
.clue p { margin:0; line-height:1.4; }
.clue.is-open { border-color:#b9d8c8; background:#eff8f1; color:var(--ink); }.clue.is-open span { background:var(--green); }
.hint-button { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:16px; padding:0 14px; background:#fff3ca; color:#72551a; box-shadow:0 5px 0 #d9b75d; }
.suspects-panel { padding:25px; }
.suspects-panel header { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:17px; }
.suspects-panel h2 { margin:4px 0 0; font:800 34px Georgia,serif; }.suspects-panel header p { margin:0 0 4px; color:var(--muted); }
.suspect-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.suspect-card { padding:9px 9px 13px; border:2px solid #cbded4; border-radius:20px; background:#fff; box-shadow:0 5px 0 rgba(65,114,96,.15); cursor:pointer; transition:transform .15s,border-color .15s; }
.suspect-card:hover { transform:translateY(-3px); border-color:#62aa91; }.suspect-card:focus-visible { outline:4px solid rgba(62,157,125,.3); outline-offset:2px; }
.suspect-card span { display:grid; place-items:center; aspect-ratio:1/1; border-radius:15px; background:#f5f1e7; overflow:hidden; }.suspect-card img { width:94%; height:94%; object-fit:contain; }.suspect-card b { display:block; margin-top:8px; font-size:16px; }
.suspect-card.is-wrong { border-color:#ef8e82; animation:shake .25s; }.suspect-card.is-correct { border-color:#42a47d; background:#e7f5eb; box-shadow:0 5px 0 #328165; }
@keyframes shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.feedback { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-top:20px; padding:20px 22px; border:2px solid #f0a79d; border-radius:24px; background:#fff0ed; }
.feedback.is-success { border-color:#9ed2b8; background:#e8f6ed; }.feedback-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:#fff; font-size:27px; }.feedback b { font-size:20px; }.feedback p { margin:4px 0 0; color:var(--muted); line-height:1.45; }.feedback button { min-width:170px; padding:0 16px; }
.result-card { max-width:820px; margin:40px auto; padding:60px 50px; border:3px solid var(--line); border-radius:38px; background:#fffaf2; text-align:center; box-shadow:0 14px 0 rgba(185,153,83,.14); }.result-seal { display:grid; place-items:center; width:94px; height:94px; margin:0 auto 20px; border-radius:50%; background:#fff0b9; font-size:48px; }.result-card .eyebrow { text-align:center; }.result-card h1 { font-size:clamp(44px,6vw,70px); }.result-card > p { max-width:650px; margin:0 auto; color:var(--muted); font-size:19px; line-height:1.55; }.result-stats { display:flex; justify-content:center; gap:14px; margin:28px 0; }.result-stats span { min-width:160px; padding:17px; border-radius:20px; background:#eef6ef; }.result-stats b,.result-stats small { display:block; }.result-stats b { font-size:30px; }.result-actions { display:flex; justify-content:center; gap:12px; }.result-actions button { padding:0 22px; }.result-actions .secondary { border:2px solid #cbded4; background:#fff; color:var(--ink); box-shadow:0 5px 0 #d7d9cf; }
.album-dialog { width:min(1040px,calc(100% - 28px)); max-height:88vh; padding:28px; border:3px solid var(--line); border-radius:30px; background:#fffaf2; color:var(--ink); box-shadow:0 25px 80px rgba(21,47,40,.3); }.album-dialog::backdrop { background:rgba(27,52,45,.58); backdrop-filter:blur(5px); }.album-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }.album-head h2 { margin:4px 0 0; font:800 38px Georgia,serif; }.album-head button { width:46px; height:46px; border:0; border-radius:50%; background:#e8efe9; font-size:28px; cursor:pointer; }.album-dialog > p { color:var(--muted); }.album-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }.album-card { min-width:0; padding:10px; border:2px solid #e1d7bf; border-radius:19px; background:#f3eee2; opacity:.75; }.album-card.is-open { background:#fff; opacity:1; }.album-card > span { display:grid; place-items:center; aspect-ratio:1/1; border-radius:14px; background:#e6e2d9; }.album-card.is-open > span { background:#edf6ef; }.album-card img { width:95%; height:95%; object-fit:contain; }.album-card > span > b { font:800 38px Georgia,serif; }.album-card h3 { margin:8px 0 4px; font:800 17px Georgia,serif; }.album-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.35; }
@media (max-width:900px) { .hero-card { grid-template-columns:1fr; }.hero-scene { min-height:330px; }.route-grid { grid-template-columns:1fr; }.route-card { display:grid; grid-template-columns:280px 1fr; }.route-body p { min-height:0; }.detective-layout { grid-template-columns:1fr; }.suspect-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.album-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) { .app { width:min(100% - 20px,1120px); padding-top:16px; }.game-topbar { align-items:flex-start; }.brand small,.album-button > span:nth-child(2),.section-heading p { display:none; }.hero-card { border-radius:27px; }.hero-copy { padding:38px 25px 32px; }.hero-copy h1 { font-size:46px; }.hero-copy p { font-size:18px; }.hero-scene { min-height:285px; }.hero-animal { width:165px; height:165px; }.hero-animal img { width:145px; height:145px; }.hero-animal--otter { width:130px; height:130px; }.hero-animal--otter img { width:115px; height:115px; }.hero-glass { left:40%; width:105px; height:105px; border-width:11px; font-size:45px; }.route-card { display:block; }.route-preview { height:155px; }.route-preview img { height:115px; }.play-header { gap:10px; }.play-heading h1 { font-size:27px; }.round-counter { min-width:64px; }.clue-board,.suspects-panel { padding:16px; border-radius:24px; }.clue-board__head { align-items:flex-start; flex-direction:column; }.mystery-card { height:125px; }.suspects-panel header { align-items:flex-start; flex-direction:column; }.suspects-panel header p { display:none; }.suspect-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.feedback { grid-template-columns:auto 1fr; }.feedback button { grid-column:1/-1; width:100%; }.result-card { padding:42px 20px; }.result-stats,.result-actions { flex-direction:column; }.album-dialog { padding:18px; }.album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:390px) { .hero-copy h1 { font-size:41px; }.hero-facts { display:grid; }.suspect-card b { font-size:14px; }.clue p { font-size:14px; }.album-card p { display:none; } }