:root {
  --ink: #30323a;
  --muted: #70727b;
  --line: #eadfe4;
  --paper: #fffdfb;
  --aqua: #cef4f8;
  --aqua-strong: #55b9c7;
  --rose: #fed3d9;
  --rose-strong: #d66d86;
  --amber: #fdf0d7;
  --amber-strong: #d5a642;
  --green: #c5ebd5;
  --green-strong: #4da875;
  --violet: #d1cceb;
  --violet-strong: #8177bd;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: linear-gradient(145deg, #fff8f7 0%, #f7fcfc 48%, #fffaf0 100%); color: var(--ink); font-family: "Source Sans 3", sans-serif; margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.topbar { align-items: center; background: rgba(255,253,251,.92); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 12px clamp(18px,4vw,52px); position: relative; z-index: 20; }
.brand { align-items: center; color: inherit; display: flex; gap: 11px; text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font: 900 21px/1 Nunito,sans-serif; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.back-link { background: var(--amber); border: 1px solid #eadbbd; border-radius: 999px; color: var(--ink); font: 900 13px Nunito,sans-serif; padding: 9px 15px; text-decoration: none; }

main { padding: 42px clamp(14px,4vw,52px) 58px; }
.hero { margin: 0 auto 25px; max-width: 1050px; text-align: center; }
.eyebrow, .modal-kicker, .mission-kind { color: #8a6924; font: 900 12px Nunito,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { font: 900 clamp(34px,5vw,61px)/1.05 Nunito,sans-serif; letter-spacing: -.035em; margin: 8px 0 13px; }
.hero h1 em { color: var(--rose-strong); font-style: normal; }
.hero > p { color: var(--muted); font-size: clamp(16px,2vw,20px); margin: 0 auto; max-width: 760px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.hero-pills span { background: rgba(255,255,255,.76); border: 1px solid var(--line); border-radius: 999px; font: 800 13px Nunito,sans-serif; padding: 7px 12px; }

.game-shell { background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 25px; box-shadow: 0 24px 65px rgba(66,52,60,.12); margin: 0 auto; max-width: 1120px; overflow: hidden; position: relative; }
main > .teacher-guide { max-width: 1120px; }
.toolbar { align-items: center; background: rgba(255,255,255,.96); display: flex; gap: 18px; justify-content: space-between; padding: 13px 17px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stats span { background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font: 900 9px Nunito,sans-serif; letter-spacing: .08em; min-width: 72px; padding: 7px 10px; text-align: left; }
.stats strong { color: var(--ink); display: block; font-size: 17px; letter-spacing: 0; margin-top: 1px; }
#livesStat { color: var(--rose-strong); letter-spacing: .08em; }
.tools { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.tools button { background: #fff; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); font: 900 12px Nunito,sans-serif; padding: 9px 11px; }
.tools button:hover { background: var(--aqua); border-color: #acdce2; }
.round-progress { background: #f1ecee; height: 5px; }
.round-progress span { background: linear-gradient(90deg,var(--aqua-strong),var(--violet-strong),var(--rose-strong)); display: block; height: 100%; transition: width .35s ease; width: 0; }

.mission-panel { background: linear-gradient(110deg,rgba(206,244,248,.72),rgba(255,255,255,.88),rgba(253,240,215,.72)); padding: 20px 22px 14px; text-align: center; }
.mission-panel h2 { font: 900 clamp(23px,3.3vw,37px)/1.12 Nunito,sans-serif; margin: 5px 0 4px; }
.mission-panel p { color: var(--muted); font-weight: 700; margin: 0; min-height: 24px; }
.timer-track { background: rgba(255,255,255,.8); border-radius: 999px; height: 7px; margin: 13px auto 0; max-width: 520px; overflow: hidden; }
.timer-track span { background: linear-gradient(90deg,var(--green-strong),var(--aqua-strong)); border-radius: inherit; display: block; height: 100%; transition: width .05s linear; width: 100%; }
.timer-track span.urgent { background: linear-gradient(90deg,var(--amber-strong),var(--rose-strong)); }

.layer { align-items: center; background: rgba(255,250,248,.97); display: none; inset: 0; justify-content: center; overflow-y: auto; padding: 22px; position: absolute; z-index: 30; }
.layer.show { display: flex; }
.modal { background: #fffaf8; border: 1px solid #fff; border-radius: 25px; box-shadow: 0 28px 80px rgba(26,27,32,.28); max-width: 670px; padding: 29px; text-align: center; width: 100%; }
.modal h2 { font: 900 clamp(27px,4vw,38px)/1.12 Nunito,sans-serif; margin: 6px 0 8px; }
.modal > p { color: var(--muted); font-size: 16px; line-height: 1.45; margin: 0 auto 19px; max-width: 520px; }
.modal-orb { align-items: center; background: linear-gradient(145deg,#fff,#dff4f6); border: 2px solid #badcdf; border-radius: 50%; box-shadow: 0 9px 20px rgba(56,96,103,.14); display: flex; height: 67px; justify-content: center; margin: 0 auto 10px; position: relative; width: 67px; }
.modal-orb span { background: #666872; border: 3px solid #fff; border-radius: 50%; height: 14px; margin: -15px 3px 0; width: 14px; }
.modal-orb b { bottom: 8px; color: var(--rose-strong); font: 900 22px Nunito,sans-serif; left: 0; position: absolute; right: 0; }
.choice-set { border: 0; margin: 13px 0 0; padding: 0; text-align: left; }
.choice-set legend { color: var(--muted); font: 900 12px Nunito,sans-serif; letter-spacing: .08em; margin-bottom: 7px; text-transform: uppercase; }
.segmented { display: grid; gap: 8px; grid-template-columns: repeat(3,1fr); }
.segmented label { cursor: pointer; position: relative; }
.segmented input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.segmented span { background: #fff; border: 1px solid var(--line); border-radius: 13px; display: flex; flex-direction: column; min-height: 67px; padding: 10px 11px; transition: .18s ease; }
.segmented b { font: 900 15px Nunito,sans-serif; }
.segmented small { color: var(--muted); font-size: 12px; line-height: 1.2; margin-top: 2px; }
.segmented input:checked + span { background: linear-gradient(135deg,var(--aqua),#fff,var(--amber)); border-color: #93cdd5; box-shadow: 0 5px 14px rgba(64,150,162,.13); }
.segmented input:focus-visible + span { outline: 4px solid rgba(85,185,199,.3); }
.primary-action,.secondary-action { border: 0; border-radius: 13px; font: 900 15px Nunito,sans-serif; padding: 12px 19px; }
.primary-action { background: linear-gradient(135deg,#bfeaf0,#f6e7c9); color: #24484d; }
.setup-modal > .primary-action { margin-top: 20px; width: 100%; }
.secondary-action { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.celebration { color: var(--amber-strong); font-size: 38px; }
.final-stats { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }
.final-stats span { background: #fff; border: 1px solid var(--line); border-radius: 13px; min-width: 96px; padding: 9px 13px; }
.final-stats b { display: block; font: 900 21px Nunito,sans-serif; }
.final-stats small { color: var(--muted); }
.finish-actions { display: flex; gap: 9px; justify-content: center; }

.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 14px 22px; justify-content: center; padding: 17px; }
footer a { color: inherit; text-decoration: none; }


.cookie-arena { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:24px; min-height:470px; padding:24px 28px 30px; background:linear-gradient(150deg,#f4fbfc,#fffaf0); }
.monster-side { text-align:center; position:relative; }
.monster { width:min(100%,350px); aspect-ratio:1; position:relative; margin:auto; transform-origin:50% 80%; }
.monster > img { height:100%; width:100%; object-fit:contain; display:block; user-select:none; pointer-events:none; }
.mouth { position:absolute; width:32%; height:20%; left:32%; top:55%; border-radius:50%; }
.monster.ready .mouth { outline:3px dashed rgba(255,255,255,.8); outline-offset:4px; background:rgba(255,255,255,.06); }
.monster.ready { filter:drop-shadow(0 0 12px rgba(85,185,199,.4)); }
.monster.chewing { animation:chew .26s ease-in-out 4; }
.monster > .cat-closed { position:absolute; inset:0; opacity:0; mask-image:radial-gradient(ellipse 19% 16% at 47% 63%,#000 85%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 19% 16% at 47% 63%,#000 85%,transparent 100%); }
.monster.chewing > .cat-closed { animation:mouthChomp .26s steps(1,end) 4; }
@keyframes mouthChomp { 0%,42%,100% { opacity:0; } 43%,85% { opacity:1; } }
.monster > .cat-refusing { position:absolute; inset:0; opacity:0; transition:opacity .12s ease; }
.monster.refusing { animation:none; }
.monster.refusing > img:first-child { opacity:0; }
.monster.refusing > .cat-refusing { opacity:1; }
.monster.refusing-right > .cat-refusing { transform:scaleX(-1); }
.speech { display:inline-block; background:white; border:1px solid var(--line); border-radius:18px 18px 18px 4px; padding:9px 20px; font:900 20px Nunito,sans-serif; color:#368197; min-width:150px; box-shadow:0 5px 16px rgba(50,70,80,.07); }
.monster-note { margin:0; color:var(--muted); font-size:14px; }
.animal-kindness { color:#55786d; font-size:14px; line-height:1.5; margin:14px auto 0; max-width:330px; }
.tray-side { min-width:0; }
.tray-heading { margin:0 0 12px 8px; }
.tray-heading span { display:block; font:900 10px Nunito,sans-serif; letter-spacing:.12em; color:#8a6924; }
.tray-heading strong { font:900 20px Nunito,sans-serif; }
.cookie-tray { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; border:2px solid #e2d4bc; border-radius:28px; padding:20px 14px; background:linear-gradient(140deg,#f5ead6,#fffcf5); box-shadow:inset 0 0 0 6px rgba(255,255,255,.6),0 12px 25px rgba(125,97,49,.08); min-height:284px; }
.cookie { border:0; background:transparent; position:relative; display:block; width:100%; aspect-ratio:1; padding:0; touch-action:none; user-select:none; -webkit-user-select:none; filter:drop-shadow(0 5px 3px rgba(115,72,23,.12)); cursor:grab; }
.cookie img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.cookie b { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font:900 clamp(23px,3vw,36px)/1 Nunito,sans-serif; color:#4d3023; text-shadow:0 1px 0 rgba(255,248,221,.8); pointer-events:none; }
.cookie:hover:not(:disabled) { transform:translateY(-4px) rotate(-3deg); }
.cookie:focus-visible { outline:3px solid var(--aqua-strong); outline-offset:3px; border-radius:50%; }
.cookie:disabled { cursor:default; }
.cookie.eaten { visibility:hidden; }
.cookie.wrong { animation:refuse .4s ease; }
.cookie.wrong::after { content:''; position:absolute; width:60%; height:60%; left:20%; top:20%; background:url('assets/games/target-hunt/mathlooq-wrong-hit-cross.png?v=20260917-2') center/contain no-repeat; }
.cookie-ghost { position:fixed; z-index:120; pointer-events:none; margin:0; cursor:grabbing; }
.cookie-ghost.flying { transition:left .32s ease-in,top .32s ease-in,transform .32s ease-in,opacity .32s ease-in; }
.cookie-ghost.swallowed { transform:translate(-50%,-50%) scale(.12) rotate(40deg); opacity:0; }
.crumbs { position:absolute; inset:0; pointer-events:none; }
.crumb { position:absolute; left:48%; top:65%; width:12px; height:12px; background:url('assets/games/cat-feeding/food.png') center/cover; border-radius:3px; animation:crumbFall .65s ease-out forwards; }
.setup-monster { display:block; width:125px; height:125px; object-fit:contain; margin:-10px auto 4px; }
.table-label { display:block; font:900 14px Nunito,sans-serif; margin:18px 0 8px; }
.mode-options { margin-top:15px; }
.segmented span { min-height:59px; }
#feedback.good { color:var(--green-strong); } #feedback.bad { color:var(--rose-strong); }
[hidden] { display:none!important; }
@keyframes chew { 0%,100% { transform:translateY(0); } 50% { transform:translateY(2px) rotate(-.6deg); } }
@keyframes refuse { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-8px) rotate(-3deg); } 75% { transform:translateX(8px) rotate(3deg); } }
@keyframes crumbFall { 0% { opacity:1; transform:translate(0,0) rotate(0); } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--spin)); } }
.game-shell:fullscreen { display:flex; flex-direction:column; border:0; border-radius:0; height:100dvh; max-width:none; overflow:auto; background:var(--paper); }
.game-shell:fullscreen .cookie-arena { flex:1; min-height:350px; }
.game-shell:fullscreen .monster { max-width:min(40vh,400px); }
@media(max-width:760px) { main { padding:28px 10px 40px; } .toolbar { flex-direction:column; gap:9px; } .stats { width:100%; justify-content:center; } .stats span { flex:1; min-width:0; } .tools { justify-content:center; } .cookie-arena { gap:12px; padding:20px 12px; } .cookie-tray { gap:7px; padding:15px 8px; min-height:210px; } .cookie b { font-size:25px; } .speech { font-size:17px; } .monster-note { font-size:12px; } .monster { max-width:285px; } .modal { padding:20px 16px; } }
@media(max-width:540px) { .brand small { display:none; } .back-link { font-size:11px; padding:8px 10px; } .hero h1 { font-size:35px; } .hero > p { font-size:16px; } .cookie-arena { grid-template-columns:1fr; gap:14px; } .monster { width:220px; } .monster-note { display:none; } .speech { padding:6px 18px; font-size:16px; } .cookie-tray { max-width:380px; min-height:220px; margin:auto; gap:6px; padding:10px 18px; } .tray-heading { text-align:center; margin-bottom:6px; } .tray-heading span { display:none; } .tray-heading strong { font-size:17px; } .cookie { max-width:105px; margin:auto; } .cookie b { font-size:29px; } .mission-panel { padding:14px 8px; } .mission-panel h2 { font-size:26px; } .mission-panel p { font-size:14px; } .layer { padding:12px; } .setup-monster { width:85px; height:85px; } .modal h2 { font-size:28px; } .modal > p { font-size:14px; margin-bottom:8px; } .segmented b { font-size:13px; } .segmented small { font-size:11px; } .finish-actions { flex-direction:column; } .game-shell:fullscreen .cookie-arena { grid-template-columns:1fr 1fr; } .game-shell:fullscreen .monster { width:100%; max-width:220px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* A shallow oval food bowl with scattered treats. */
.cookie-arena { grid-template-columns:1fr 1.4fr; background:radial-gradient(ellipse at 28% 60%,rgba(206,244,248,.3),transparent 50%),linear-gradient(180deg,#fffdf9,#f8efdd); }
.cookie-tray { position:relative; display:block; height:355px; min-height:0; padding:0; background:transparent; border:0; box-shadow:none; border-radius:0; }
.cookie-tray .cookie { position:absolute; width:90px; height:90px; margin:0; max-width:none; transform:translate(-50%,-50%) rotate(var(--tilt)); }
.cookie-tray .cookie:hover:not(:disabled) { transform:translate(-50%,-50%) rotate(var(--tilt)) scale(1.05); }
.cookie-tray .cookie.wrong { animation:foodRefuse .4s ease; }
.cookie b { left:42%; }
@keyframes foodRefuse { 0%,100% { transform:translate(-50%,-50%) rotate(var(--tilt)); } 25% { transform:translate(calc(-50% - 5px),-50%) rotate(var(--tilt)); } 75% { transform:translate(calc(-50% + 5px),-50%) rotate(var(--tilt)); } }
@media(max-width:760px) { .cookie-tray .cookie { width:72px; height:72px; } .cookie-tray { height:320px; } }
@media(max-width:540px) { .cookie-arena { grid-template-columns:1fr; } .cookie-tray { max-width:380px; height:255px; } .cookie-tray .cookie { width:68px; height:68px; } .cookie b { font-size:25px; } }

.cookie-tray { border:3px solid #c1d9d5; border-radius:50%; background:radial-gradient(ellipse at 50% 43%,#fffcf4 0%,#f3e9d4 68%,#dcebe7 70%); box-shadow:inset 0 0 0 8px #edf5f0,inset 0 -12px 0 12px #c6ded6,0 12px 0 -3px #b8cfc7,0 22px 22px -12px rgba(91,103,77,.2); }
@media(max-width:540px) { .cookie-tray .cookie { width:62px; height:62px; } .cookie b { font-size:23px; } }

.cookie-ghost.wrong { animation:foodRefuse .4s ease; }