@import url('data:text/css,');

:root {
  --ink: #263b31;
  --forest: #315d45;
  --forest-dark: #244936;
  --cream: #fffaf0;
  --gold: #f2b84b;
  --orange: #df7840;
  --rust: #bd4d32;
  --green: #79a45f;
  --shadow: 0 18px 45px rgba(72, 55, 31, .18);
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #f7d47b; }
body { min-height: 100dvh; touch-action: manipulation; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.screen { position: fixed; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; animation: screen-in .42s ease both; }
@keyframes screen-in { from { opacity: 0; transform: scale(.985); } }

/* Home */
.home-screen { overflow-y: auto; background: linear-gradient(180deg, #bde5e3 0%, #e9f4cf 42%, #f7d47b 100%); padding: clamp(20px, 3vw, 54px) clamp(24px, 6vw, 120px) 32px; }
.home-screen::before, .home-screen::after { content: ""; position: fixed; border-radius: 50%; filter: blur(2px); opacity: .42; pointer-events: none; }
.home-screen::before { width: 44vw; height: 32vw; background: #fff4b4; top: -18vw; right: -8vw; }
.home-screen::after { width: 35vw; height: 28vw; background: #9bd6c5; left: -16vw; bottom: -18vw; }
.sky-bubbles { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 18%, rgba(255,255,255,.55) 0 7px, transparent 8px), radial-gradient(circle at 92% 38%, rgba(255,255,255,.48) 0 9px, transparent 10px), radial-gradient(circle at 72% 11%, rgba(255,255,255,.35) 0 5px, transparent 6px); }
.home-header { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; max-width: 1500px; margin: 0 auto clamp(20px, 3vh, 42px); }
.eyebrow { margin: 0 0 6px; color: #bb6237; font-weight: 900; font-size: clamp(.72rem, 1vw, .9rem); letter-spacing: .2em; text-transform: uppercase; }
.home-header h1 { margin: 0; color: var(--forest-dark); font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .95; letter-spacing: -.035em; }
.intro { margin: 10px 0 0; color: #507263; font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 600; }
.header-actions { display: flex; gap: 12px; }
.round-button { width: clamp(50px, 4vw, 66px); aspect-ratio: 1; border: 0; border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: 0 8px 22px rgba(51,83,67,.14); display: grid; place-items: center; cursor: pointer; transition: transform .2s, background .2s; }
.round-button:hover, .round-button:focus-visible { transform: translateY(-3px) scale(1.04); background: white; outline: 4px solid rgba(49,93,69,.18); }
.round-button svg { width: 46%; fill: none; stroke: var(--forest); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-button { background: var(--forest); }
.admin-button svg { stroke: white; }

.game-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); max-width: 1500px; margin: 0 auto; }
.game-grid.single-game { grid-template-columns:1fr;max-width:1000px; }
.game-grid.single-game .game-card.playable { grid-column:auto;grid-row:auto;min-height:clamp(380px,58vh,500px); }
.game-card { border-radius: 30px; overflow: hidden; min-height: 190px; box-shadow: var(--shadow); background: rgba(255,255,255,.77); backdrop-filter: blur(10px); }
.game-card.playable { grid-column: span 2; grid-row: span 2; min-height: 420px; position: relative; cursor: pointer; display: grid; grid-template-columns: 58% 42%; transition: transform .25s, box-shadow .25s; outline: 0; }
.game-card.playable:hover, .game-card.playable:focus-visible { transform: translateY(-7px); box-shadow: 0 25px 55px rgba(72,55,31,.24); }
.card-art { background: linear-gradient(145deg, #f1c557, #d8733f); display: grid; place-items: center; overflow: hidden; }
.card-art svg { width: 112%; height: 100%; filter: drop-shadow(0 9px 8px rgba(95,51,23,.18)); }
.card-art .hill { fill: #638550; }
.card-art .trunk { fill: #77503a; }
.card-art .crown { fill: #c94f2e; }
.card-art .c1 { animation: sway 5s ease-in-out infinite alternate; transform-origin: 105px 125px; }
.card-art .leaf-shape { fill: #b7432d; transform-origin: center; animation: float 3.4s ease-in-out infinite; }
.card-art .l2 { fill: #f2b638; animation-delay: -1.4s; }
.mark-glow { fill: #fff8d7; stroke: white; stroke-width: 8; }
.sun-mark { fill: #e6a720; }
.card-copy { padding: clamp(28px, 3vw, 55px) clamp(22px, 3vw, 48px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #fffdf7; }
.card-kicker { color: var(--rust); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.card-copy h2 { margin: 13px 0 27px; font-family: Georgia, serif; color: var(--forest-dark); font-size: clamp(1.8rem, 3.2vw, 3.5rem); line-height: 1.03; }
.play-pill { display: inline-flex; align-items: center; gap: 14px; padding: 13px 18px 13px 23px; border-radius: 999px; color: white; background: var(--forest); font-weight: 900; }
.play-pill b { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--forest); background: white; font-size: 1.7rem; line-height: 1; }
.game-card.coming { display: flex; align-items: center; gap: clamp(13px, 1.6vw, 24px); padding: clamp(15px, 1.5vw, 25px); transition: transform .2s; }
.game-card.coming:hover { transform: translateY(-3px); }
.mini-art { flex: 0 0 clamp(78px, 7vw, 112px); border-radius: 24px; overflow: hidden; }
.mini-art svg { display: block; width: 100%; }
.mini-art svg * { stroke-linecap: round; stroke-linejoin: round; }
.coming h2 { margin: 9px 0 0; color: #3d584c; font-family: Georgia, serif; font-size: clamp(1rem, 1.55vw, 1.5rem); line-height: 1.05; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #ecdbc0; color: #896f53; font-size: .65rem; letter-spacing: .06em; font-weight: 900; text-transform: uppercase; }
.flashlight .mini-art { background: #596d7b; }.flashlight svg rect { fill: #344657; }.flashlight svg circle { fill: #fae699; opacity: .92; }.flashlight svg path { fill: #f5b24b; }
.balloons .mini-art { background: #dff3ec; }.balloons svg path:first-child { fill: #e8795c; }.balloons svg path:nth-child(2) { fill: #f2bb47; }.balloons svg path:nth-last-child(-n+2) { fill: none; stroke: #517e6a; stroke-width: 3; }
.memory .mini-art { background: #f7e1b4; }.memory svg rect { fill: #578b73; }.memory svg path { fill: #f6cc5e; }
.train .mini-art { background: #dcece8; }.train svg path { fill: #db7653; stroke: #633f32; stroke-width: 3; }.train svg circle { fill: #405c51; }
.search .mini-art { background: #efd6bd; }.search svg circle { fill: #fff5d7; stroke: #537766; stroke-width: 8; }.search svg path:first-of-type { fill: none; stroke: #537766; stroke-width: 11; }.search svg path:last-child { fill: #e6a93f; }
.home-footer { position: relative; z-index: 1; max-width: 850px; margin: 22px auto 0; display: flex; align-items: center; gap: 18px; justify-content: center; color: #527260; font-weight: 700; font-size: .84rem; letter-spacing: .06em; }
.home-footer p { display:flex;align-items:center;justify-content:center;gap:10px;margin:0;white-space:nowrap; }
.home-footer .footer-line { height:1px;flex:1;background:rgba(66,103,82,.3); }
.footer-logo { width:clamp(112px,12vw,156px);height:auto;filter:drop-shadow(0 3px 3px rgba(49,93,69,.13)); }

/* Shared toolbar and admin */
.toolbar { min-height: 110px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px clamp(22px, 5vw, 80px); position: relative; z-index: 10; }
.light-toolbar { background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(49,93,69,.12); }
.light-toolbar > div { text-align: center; }
.light-toolbar h1 { font-family: Georgia, serif; margin: 0; color: var(--forest-dark); font-size: clamp(1.6rem, 3vw, 2.6rem); }
.toolbar-button { justify-self: start; border: 0; background: transparent; display: flex; align-items: center; gap: 7px; min-width: 64px; min-height: 54px; cursor: pointer; font-weight: 800; color: var(--forest); }
.toolbar-button:last-child { justify-self: end; }
.toolbar-button svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.admin-screen { background: #f6f0e4; overflow-y: auto; }
.admin-content { max-width: 1420px; margin: auto; padding: 34px clamp(22px, 5vw, 78px) 80px; }
.admin-intro { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 24px; }
.admin-intro h2 { font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 5px; }
.admin-intro p { margin: 0; color: #66786f; }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.save-names-button svg { width:23px;height:23px;margin-right:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round; }
.reset-marks-button { border-color:#d6a493;color:#9b4937;background:#fff8f4; }.reset-marks-button svg { width:23px;height:23px;margin-right:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.primary-button, .secondary-button { min-height: 52px; padding: 13px 21px; border-radius: 16px; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 900; }
.primary-button { color: white; background: var(--forest); box-shadow: 0 8px 18px rgba(49,93,69,.22); }
.secondary-button { background: white; border: 2px solid #d6ded5; color: var(--forest); }
.upload-button input, .import-button input { display: none; }
.selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-radius: 19px; background: #e6eee3; margin-bottom: 25px; }
.selection-bar p { margin: 0; color: #5f7668; font-size: .9rem; }
.selection-mode { display:flex;align-items:center;gap:14px; }
.segmented-control { display:inline-flex;padding:4px;border-radius:14px;background:#cad8c7;box-shadow:inset 0 1px 3px rgba(35,70,48,.13); }
.segmented-control label { cursor:pointer; }
.segmented-control input { position:absolute;opacity:0;pointer-events:none; }
.segmented-control span { display:grid;place-items:center;min-width:105px;min-height:42px;padding:7px 18px;border-radius:11px;color:#50675a;font-weight:900;transition:.18s; }
.segmented-control input:checked + span { background:white;color:var(--forest-dark);box-shadow:0 3px 9px rgba(35,70,48,.17); }
.segmented-control input:focus-visible + span { outline:3px solid rgba(49,93,69,.28);outline-offset:2px; }
.marks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.mark-card { position: relative; border-radius: 23px; padding: 14px; background: white; box-shadow: 0 8px 24px rgba(72,55,31,.09); border: 3px solid transparent; transition: .2s; }
.mark-card.excluded { opacity: .46; filter: grayscale(.7); }
.mark-card.selected { border-color: #7da26a; }
.mark-image-wrap { aspect-ratio: 1; border-radius: 17px; overflow: hidden; background: #f4eee2; display: grid; place-items: center; }
.mark-image-wrap img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mark-name { width:calc(100% - 31px);margin-top:9px;border:2px solid #dbe3d8;border-radius:11px;background:#f7faf5;padding:8px 7px;color:var(--ink);font-weight:800;text-align:center;outline:0;transition:.2s; }
.mark-name:hover { border-color:#9eb495; }.mark-name:focus { border-color:var(--forest);background:white;box-shadow:0 0 0 4px rgba(49,93,69,.13); }
.mark-select { position: absolute; top: 23px; right: 23px; width: 32px; height: 32px; accent-color: var(--forest); cursor: pointer; }
.delete-mark { position:absolute;right:10px;bottom:11px;width:31px;height:31px;border:0;border-radius:50%;color:#af503c;background:#f9e6df;cursor:pointer;font-size:1.1rem; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; transform: translate(-50%, 30px); opacity: 0; padding: 13px 20px; color: white; background: var(--forest-dark); border-radius: 99px; font-weight: 800; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Game */
.game-screen { background: linear-gradient(#f7c867 0 30%, #93ae62 59%, #628550 100%); }
.forest-sky { position: absolute; inset: 0 0 45% 0; background: linear-gradient(#f8c979 0%, #f6d99b 60%, #d9d29c 100%); overflow: hidden; }
.sunset { position: absolute; top: 12%; right: 25%; width: 9vw; min-width: 90px; aspect-ratio: 1; border-radius: 50%; background: #ffefaa; box-shadow: 0 0 55px #fff1aa; opacity: .85; }
.cloud { position: absolute; width: 180px; height: 45px; border-radius: 50px; background: rgba(255,255,255,.32); filter: blur(1px); animation: cloud-drift 22s linear infinite alternate; }
.cloud::before, .cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { width: 75px; height:75px; left: 35px; bottom: 0; }.cloud::after { width:90px; height:65px; right:25px; bottom:0; }
.c-one { top: 22%; left: 30%; }.c-two { top: 42%; right: 13%; transform: scale(.7); animation-delay: -11s; }
.forest-back { position: absolute; inset: 0; pointer-events: none; }
.forest-back svg { width: 100%; height: 100%; }
.tree-trunk, .branch { fill: #73503e; }.canopy.gold { fill: #e8aa38; }.canopy.rust { fill: #b94d31; }.canopy.orange { fill: #d96d31; }
.tree-a, .tree-b { transform-box: fill-box; transform-origin: bottom; animation: sway 7s ease-in-out infinite alternate; }.tree-b { animation-delay: -3s; }
.game-toolbar { position: relative; z-index: 30; min-height: 106px; padding: 13px clamp(14px, 2vw, 34px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(180deg, rgba(34,63,43,.84), rgba(34,63,43,.58) 75%, transparent); color: white; }
.toolbar-cluster { display: flex; align-items: center; gap: 10px; }.toolbar-cluster.right { justify-content: flex-end; }
.game-tool { min-width: 72px; height: 64px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; background: rgba(30,62,43,.58); color: white; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-weight: 800; backdrop-filter: blur(8px); }
.game-tool:hover, .game-tool:focus-visible { background: rgba(255,255,255,.19); outline: 3px solid rgba(255,255,255,.28); }
.game-tool svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.game-tool.icon-only { min-width: 58px; width: 58px; padding: 0; }
.sound-off { display: none; }.muted .sound-on { display:none; }.muted .sound-off { display:block; }
.game-title { text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.2); }.game-title p { margin: 0; letter-spacing: .2em; font-size: .7rem; font-weight: 900; }.game-title h1 { margin: -2px 0 0; font: 700 clamp(1.7rem, 3vw, 2.7rem)/1 Georgia,serif; }
.found-counter { height: 63px; min-width: 112px; padding: 5px 11px; border-radius: 17px; background: rgba(255,251,225,.94); color: var(--forest); display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; font-size: 1.4rem; font-weight: 900; }
.found-counter small { grid-column: 1 / -1; font-size: .62rem; margin-top: -7px; letter-spacing: .08em; text-transform: uppercase; }.found-counter i { font-style: normal; opacity:.5; }
.leaf-tally { height:63px; min-width:76px; padding:7px 12px; border-radius:17px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:900; }
.leaf-tally span { font-size:1.45rem; line-height:1; }.leaf-tally small { margin-top:3px; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.found-strip { position: relative; z-index: 27; height: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.found-mini { width: 54px; height: 54px; margin-top: 3px; border-radius: 50%; border: 4px solid white; object-fit: cover; box-shadow: 0 5px 14px rgba(0,0,0,.22); animation: pop-in .45s cubic-bezier(.2,1.8,.4,1); }
.found-result { position:relative; width:62px; height:62px; margin-top:3px; animation:pop-in .45s cubic-bezier(.2,1.8,.4,1); }
.found-result img { width:100%; height:100%; border-radius:50%; border:4px solid white; object-fit:cover; box-shadow:0 5px 14px rgba(0,0,0,.22); }
.found-result b { position:absolute; right:-3px; bottom:-3px; min-width:25px; height:25px; padding:0 4px; display:grid; place-items:center; border-radius:99px; background:var(--gold); color:var(--forest-dark); border:2px solid white; font-size:.75rem; }
.game-field { position: absolute; z-index: 10; inset: 17% 7% 4% 7%; touch-action:pinch-zoom; }
.mark-spot { position: absolute; width: var(--spot-size); aspect-ratio: 1; transform: translate(-50%,-50%); display: grid; place-items: center; }
.challenge-spot { filter:drop-shadow(0 18px 25px rgba(43,53,24,.22)); }
.challenge-spot .hidden-mark { width:88%; border-radius:28%; }
.hidden-mark { width: 82%; aspect-ratio: 1; border: 7px solid white; border-radius: 24%; padding: 2%; background: white; object-fit: cover; box-shadow: 0 9px 22px rgba(42,45,22,.35); filter: saturate(.8) brightness(.86); transform: scale(.88); transition: .4s; pointer-events: none; }
.mark-spot.revealed .hidden-mark { filter: none; transform: scale(1); pointer-events: auto; cursor: pointer; animation: reveal-pulse 1.3s ease-in-out infinite; }
.mark-spot.found .hidden-mark { pointer-events:none; animation: mark-found .72s cubic-bezier(.2,1.6,.4,1) both; }
.cover-leaf, .empty-leaf { position:absolute;left:50%;top:50%;width:54%;aspect-ratio:1.25;border:0;padding:0;background:transparent;cursor:pointer;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot));transform-origin:center;filter:drop-shadow(0 6px 4px rgba(74,45,18,.25));touch-action:pinch-zoom;clip-path:polygon(4% 78%,7% 58%,14% 37%,28% 20%,48% 10%,73% 7%,94% 11%,92% 31%,82% 53%,65% 71%,43% 85%,20% 90%); }
.cover-leaf svg, .empty-leaf svg { width:100%;height:100%;overflow:hidden;pointer-events:none; }.cover-leaf path:first-child, .empty-leaf path:first-child { fill:var(--leaf-color); }.cover-leaf path:last-child, .empty-leaf path:last-child { fill:none;stroke:#79502c;stroke-width:4;stroke-linecap:round;opacity:.75; }
.cover-leaf:hover { filter: brightness(1.08) drop-shadow(0 8px 5px rgba(74,45,18,.3)); }
.cover-leaf.fly, .empty-leaf.fly { pointer-events:none; animation: leaf-fly .85s cubic-bezier(.18,.75,.34,1) forwards; }
.cover-leaf.added-leaf { animation:penalty-leaf-in .52s cubic-bezier(.16,1.45,.35,1) both;filter:drop-shadow(0 0 9px rgba(255,242,139,.95)) drop-shadow(0 7px 4px rgba(74,45,18,.3)); }
.cover-leaf.added-leaf.fly { animation:leaf-fly .85s cubic-bezier(.18,.75,.34,1) forwards; }
.empty-leaf { position: absolute; width: clamp(75px, 8vw, 135px); z-index: 14; }
.guess-button { position:absolute; z-index:45; left:50%; bottom:clamp(28px,4vh,52px); transform:translateX(-50%); min-width:clamp(230px,24vw,340px); min-height:76px; padding:12px 26px; border:0; border-radius:24px; background:#d5d8c4; color:#7d877e; box-shadow:0 12px 30px rgba(31,54,36,.22); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:not-allowed; transition:.25s; }
.guess-button span { font:700 clamp(1.35rem,2.2vw,2rem)/1 Georgia,serif; }.guess-button small { margin-top:5px; font-size:.72rem; font-weight:800; }
.guess-button.ready { color:white; background:var(--forest); cursor:pointer; animation:guess-pulse 1.8s ease-in-out infinite; }.guess-button.ready:hover,.guess-button.ready:focus-visible { transform:translateX(-50%) translateY(-4px) scale(1.03); outline:4px solid rgba(255,255,255,.5); }
.guess-button.choices-open { visibility:hidden; }
.falling-leaf { position: absolute; z-index: 5; width: 45px; height: 34px; border-radius: 100% 0 100% 0; background: var(--leaf-color); opacity: .85; pointer-events:none; animation: falling var(--duration) linear infinite; animation-delay: var(--delay); }
.ground-details { position:absolute; inset:0; pointer-events:none; z-index:11; }.mushrooms { position:absolute; width:clamp(100px,10vw,180px); left:2%; bottom:2%; }.mushrooms path:nth-child(-n+2) { fill:#f4d7a6; }.mushrooms path:nth-child(n+3) { fill:#b84c34; }.mushrooms circle { fill:#fff2ce; }.hedgehog { position:absolute; width:clamp(130px,15vw,250px); right:1%; bottom:-2%; animation: hedgehog-peek 8s ease-in-out infinite; }.spines { fill:#724735; }.face { fill:#dba874; }.hedgehog circle, .winner-hedgehog circle { fill:#2d3026; }.hedgehog path:last-child, .winner-hedgehog path:last-child { fill:none; stroke:#633e33; stroke-width:4; stroke-linecap:round; }

/* Modals */
.modal { position: absolute; z-index: 100; inset: 0; display: none; place-items: center; padding: 18px; background: rgba(26,45,34,.6); backdrop-filter: blur(9px); }
.modal.open { display: grid; animation: fade-in .25s ease; }
.modal-card { position:relative; width:min(670px,94vw); padding: clamp(28px,4vw,52px); border-radius: 35px; background: #fffaf0; text-align:center; box-shadow: 0 28px 80px rgba(31,31,15,.32); animation: pop-in .48s cubic-bezier(.2,1.35,.4,1); overflow:hidden; }
.modal-card h2 { margin: 3px 0 6px; font: 700 clamp(2rem,5vw,3.7rem)/1 Georgia,serif; color: var(--forest-dark); }.modal-card > p:not(.eyebrow) { margin:0 0 25px; color:#6b786f; font-weight:600; }
.difficulty-options { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.difficulty-options button { min-height: 145px; border:3px solid #e6dfd1; border-radius:24px; background:white; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }.difficulty-options button:hover,.difficulty-options button:focus-visible { border-color:var(--gold); transform:translateY(-5px); outline:0; box-shadow:0 12px 25px rgba(93,68,29,.14); }.difficulty-options b { font-size:1.15rem; margin:8px 0 2px; }.difficulty-options small { color:#7d877f; }.difficulty-dots { display:flex; gap:3px; height:30px; align-items:flex-end; }.difficulty-dots i { width:18px; height:22px; background:var(--green); border-radius:60% 10% 60% 10%; transform:rotate(-18deg); }.difficulty-options button:nth-child(2) i { background:var(--gold); }.difficulty-options button:nth-child(3) i { background:var(--rust); }
.text-button { margin-top:18px; padding:12px; border:0; background:transparent; color:#718078; font-weight:800; cursor:pointer; }
.answer-bar { position:absolute;z-index:46;left:50%;bottom:clamp(28px,4vh,52px);transform:translateX(-50%);display:none;width:min(940px,calc(100% - 28px));height:76px; }
.answer-bar.open { display:block;animation:answer-bar-in .3s cubic-bezier(.2,1.25,.4,1); }
.answer-options { height:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px; }
.answer-option { min-width:0;height:100%;padding:4px 5px;border:3px solid rgba(255,255,255,.82);border-radius:20px;background:#fffaf0;box-shadow:0 10px 25px rgba(31,54,36,.25);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.2s;color:var(--forest-dark); }
.answer-option:hover,.answer-option:focus-visible { border-color:var(--gold); transform:translateY(-5px) scale(1.03); outline:0; }.answer-option img { width:45px;height:45px;border-radius:11px;object-fit:cover; }.answer-option b { width:100%;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem; }
.answer-option.wrong { border-color:#c65440; background:#fbe4dc; animation:wrong-shake .35s ease; }.answer-option.correct { border-color:#5e9562; background:#e4f2df; transform:scale(1.06); }
.answer-feedback { position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);min-width:max-content;padding:7px 15px;border-radius:99px;background:rgba(255,250,240,.95);box-shadow:0 5px 16px rgba(31,54,36,.18);font-weight:900;pointer-events:none; }.answer-feedback:empty { display:none; }.wrong-feedback { color:#b54f3b; }.correct-feedback { color:#3c7850; }
.guess-wow { display:none;position:absolute;z-index:1000;inset:0;overflow:hidden;place-items:center;background:radial-gradient(circle,rgba(255,250,213,.98),rgba(70,113,77,.96)); }
.guess-wow.show { display:grid;animation:wow-fade .25s ease both; }.wow-rays { position:absolute;width:900px;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,218,77,.42) 0 9deg,transparent 10deg 21deg);animation:wow-spin 12s linear infinite; }.wow-content { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--forest-dark);animation:wow-pop .65s cubic-bezier(.15,1.55,.35,1) both; }.wow-content>span { color:var(--rust);font-weight:1000;letter-spacing:.2em;font-size:clamp(1rem,2vw,1.45rem); }.wow-content img { width:clamp(145px,20vw,220px);aspect-ratio:1;margin:8px;border:10px solid white;border-radius:28%;object-fit:cover;background:white;box-shadow:0 0 0 13px #f5c84b,0 22px 50px rgba(44,58,31,.3);animation:wow-bounce .7s ease-in-out .65s infinite alternate; }.wow-content h3 { margin:16px 0 0;font:700 clamp(3rem,7vw,6.5rem)/.9 Georgia,serif;color:white;text-shadow:0 5px 0 var(--forest),0 9px 20px rgba(0,0,0,.3); }.wow-content b { margin-top:12px;padding:7px 18px;border-radius:99px;background:white;font-size:clamp(1.1rem,2vw,1.6rem); }.wow-content small { margin-top:7px;color:white;font-weight:900;font-size:.9rem; }.wow-confetti { position:absolute;inset:0;z-index:1; }.wow-confetti i { position:absolute;left:var(--x);top:-35px;width:14px;height:25px;border-radius:4px;background:var(--c);animation:wow-confetti 1.9s linear calc(var(--i) * -0.07s) infinite; }
.win-card { padding-top:125px; }.winner-hedgehog { position:absolute; width:190px; left:50%; top:-25px; transform:translateX(-50%); animation: winner-bounce .8s ease-in-out infinite alternate; }.winner-hedgehog svg { width:100%; }.win-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }.win-actions button { min-width:180px; }
.score-summary { display:flex; justify-content:center; gap:12px; margin:0 0 25px; flex-wrap:wrap; }.score-summary div { min-width:130px; padding:13px 17px; border-radius:18px; background:#edf2e7; display:flex; flex-direction:column; }.score-summary strong { font:700 2rem/1 Georgia,serif; color:var(--forest); }.score-summary span { margin-top:5px; color:#6a796f; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }.confetti-piece { position:absolute; top:-30px; width:15px; height:25px; border-radius:4px; background:var(--color); left:var(--left); animation:confetti-fall var(--time) linear var(--delay) infinite; }

@keyframes sway { to { transform: rotate(1.6deg); } }
@keyframes float { 50% { transform: translateY(-12px) rotate(8deg); } }
@keyframes cloud-drift { to { transform: translateX(130px); } }
@keyframes screen-in { from { opacity:0; transform:scale(.985); } }
@keyframes fade-in { from { opacity:0; } }
@keyframes pop-in { from { opacity:0; transform:scale(.6); } }
@keyframes reveal-pulse { 50% { transform:scale(1.05); box-shadow:0 0 0 10px rgba(255,238,141,.28),0 12px 25px rgba(42,45,22,.3); } }
@keyframes mark-found { 45% { transform:scale(1.34) rotate(-4deg); } 100% { transform:scale(.76); opacity:.35; } }
@keyframes leaf-fly { to { transform:translate(calc(var(--dx) + var(--fly-x)),calc(var(--dy) - 70vh)) rotate(calc(var(--rot) + 650deg)) scale(.7); opacity:0; } }
@keyframes penalty-leaf-in { from { opacity:0;transform:translate(-50%,-50%) translate(var(--dx),calc(var(--dy) - 80px)) rotate(var(--rot)) scale(.2); } 70% { transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.15); } }
@keyframes falling { from { transform:translate(0,-12vh) rotate(0); } 45% { transform:translate(55px,48vh) rotate(230deg); } to { transform:translate(-30px,105vh) rotate(520deg); } }
@keyframes hedgehog-peek { 0%,65%,100% { transform:translateY(32%); } 72%,91% { transform:translateY(0); } }
@keyframes winner-bounce { to { transform:translateX(-50%) translateY(-9px) rotate(2deg); } }
@keyframes confetti-fall { to { transform:translateY(110vh) rotate(720deg); } }
@keyframes guess-pulse { 50% { box-shadow:0 12px 30px rgba(31,54,36,.22),0 0 0 10px rgba(255,250,220,.2); } }
@keyframes wrong-shake { 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }
@keyframes answer-bar-in { from { opacity:0;transform:translateX(-50%) translateY(18px) scale(.94); } }
@keyframes wow-fade { from { opacity:0; } } @keyframes wow-spin { to { transform:rotate(360deg); } } @keyframes wow-pop { from { transform:scale(.2) rotate(-8deg);opacity:0; } } @keyframes wow-bounce { to { transform:translateY(-12px) rotate(3deg) scale(1.04); } } @keyframes wow-confetti { to { transform:translateY(110vh) rotate(720deg); } }

@media (max-width: 1000px) {
  .home-screen { overflow-y:auto; }.game-grid { grid-template-columns:repeat(2,1fr); }.game-card.playable { min-height:350px; }.game-card.coming { min-height:145px; }
  .game-title { display:none; }.game-toolbar { grid-template-columns:1fr 1fr; }.toolbar-cluster.right { grid-column:2; }.game-field { inset:15% 5% 3%; }
}
@media (max-width: 700px) {
  .home-screen { padding:20px 15px 30px; }.home-header { align-items:center; }.header-actions .round-button:first-child { display:none; }.game-grid { grid-template-columns:1fr; }.game-card.playable { grid-column:auto; grid-row:auto; grid-template-columns:1fr; min-height:430px; }.card-art { min-height:230px; }.card-copy { padding:22px; }.card-copy h2 { margin:7px 0 16px; }.game-card.coming { min-height:130px; }
  .admin-intro,.selection-bar { align-items:flex-start; flex-direction:column; }.selection-mode { align-items:flex-start;flex-direction:column;gap:8px; }.segmented-control span { min-width:98px; }.admin-actions { justify-content:flex-start; }.toolbar { padding:10px 12px; }.toolbar-button span { display:none; }
  .game-toolbar { padding:8px; min-height:82px; }.game-tool { min-width:52px; width:52px; height:54px; padding:0; }.game-tool span { display:none; }.game-tool.icon-only { min-width:50px; width:50px; }.found-counter { height:54px; min-width:72px; font-size:1.1rem; }.leaf-tally { height:54px; min-width:58px; padding:5px 8px; }.difficulty-options { grid-template-columns:1fr; }.difficulty-options button { min-height:85px; flex-direction:row; gap:11px; }.difficulty-options b { margin:0; }.difficulty-options small { display:none; }.modal-card { max-height:95vh; overflow:auto; }.guess-button,.answer-bar { bottom:18px;height:65px; }.answer-option { border-radius:14px;padding:3px 2px; }.answer-option img { width:36px;height:36px;border-radius:8px; }.answer-option b { font-size:.58rem; }.guess-button { min-height:65px; }.guess-button small { display:none; } #fullscreen-game { display:none; }
  .game-field { inset:12% 3% 2%; }.ground-details .mushrooms { opacity:.6; }.found-strip { justify-content:flex-start; padding-left:80px; overflow:hidden; }.found-mini { width:44px; height:44px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }