:root {
  --elephant-photo: url('images/animal-elephant.jpg');
  --panda-photo: url('images/animal-red-panda.jpg');
  --tiger-photo: url('images/animal-tiger.jpg');
  --giraffe-photo: url('images/animal-giraffe.jpg');
  --lion-photo: url('images/animal-lion.jpg');
  --penguin-photo: url('images/animal-penguin.jpg');
  --koala-photo: url('images/animal-koala.jpg');
  --owl-photo: url('images/animal-owl.jpg');
  --dolphin-photo: url('images/animal-dolphin.jpg');
}
body[data-page="animal-puzzles"] {
  background:
    radial-gradient(circle at 5% 0%, rgba(116,241,213,.24), transparent 26rem),
    radial-gradient(circle at 100% 20%, rgba(255,212,95,.26), transparent 32rem),
    #f3faf7 !important;
}
.puzzle-hero {
  width: min(1160px, calc(100% - 32px)); margin: 24px auto 38px; padding: clamp(34px,7vw,70px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 35px; align-items: center; overflow: hidden;
  border: 1px solid rgba(255,255,255,.9); border-radius: 36px;
  background: linear-gradient(140deg,#e4f9f1,#fff4c9); box-shadow: var(--shadow);
}
.puzzle-kicker { margin: 0; color: #087154; font-size: .78rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.puzzle-hero h1 { margin: 10px 0 15px; font-size: clamp(3rem,7vw,6rem); line-height: .92; letter-spacing: -.055em; }
.puzzle-hero p:not(.puzzle-kicker) { max-width: 650px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.puzzle-hero a { display: inline-block; margin-top: 10px; padding: 12px 17px; color: #fff; border-radius: 14px; background: #087154; text-decoration: none; font-weight: 900; }
.hero-pieces { min-height: 290px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transform: rotate(4deg); }
.hero-pieces span { display: grid; place-items: center; border-radius: 25px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); font-size: 4rem; }
.hero-pieces span:nth-child(2),.hero-pieces span:nth-child(3){transform:translateY(18px)}
.puzzle-main { width: min(1080px, calc(100% - 32px)); margin: 0 auto 70px; }
.animal-picker { margin-bottom: 22px; padding: 26px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); }
.picker-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.picker-heading h2 { margin: 5px 0 0; font-size: 2rem; }.picker-heading > p { margin: 0; color: var(--muted); }
.animal-options { margin-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.animal-option { padding: 10px; display: grid; grid-template-columns: 82px 1fr; grid-template-rows: 1fr 1fr; gap: 0 12px; align-items: center; color: var(--ink); border: 2px solid transparent; border-radius: 18px; background: #f5f7f6; cursor: pointer; text-align: left; }
.animal-option.active { border-color: #16a77d; background: #e8f8f2; box-shadow: 0 8px 18px rgba(22,167,125,.12); }
.animal-thumb { grid-row: 1/3; width: 82px; height: 68px; display: block; border-radius: 13px; background-size: cover; background-position: center; }
.elephant-thumb{background-image:var(--elephant-photo)}.panda-thumb{background-image:var(--panda-photo)}.tiger-thumb{background-image:var(--tiger-photo)}
.giraffe-thumb{background-image:var(--giraffe-photo)}.lion-thumb{background-image:var(--lion-photo)}.penguin-thumb{background-image:var(--penguin-photo)}
.koala-thumb{background-image:var(--koala-photo)}.owl-thumb{background-image:var(--owl-photo)}.dolphin-thumb{background-image:var(--dolphin-photo)}
.animal-option strong { align-self: end; }.animal-option small { align-self: start; color: var(--muted); }
.puzzle-studio { padding: clamp(20px,4vw,34px); display: grid; grid-template-columns: 260px 1fr; gap: 28px; border: 1px solid rgba(255,255,255,.9); border-radius: 30px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.puzzle-sidebar h2 { margin: 7px 0 20px; font-size: 1.8rem; }
.difficulty-control { display: block; color: var(--muted); font-weight: 800; }
.difficulty-control select { width: 100%; min-height: 46px; margin-top: 7px; padding: 8px 10px; color: var(--ink); border: 2px solid #dce7e2; border-radius: 12px; background: #fff; font: 800 .95rem "Nunito",sans-serif; }
.puzzle-stats { margin: 18px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.puzzle-stats div { padding: 10px 5px; border-radius: 12px; background: #edf7f3; text-align: center; }
.puzzle-stats span { display: block; color: var(--muted); font-size: .7rem; text-transform: uppercase; }.puzzle-stats strong { font-size: 1.1rem; }
.puzzle-primary,.puzzle-secondary { width: 100%; min-height: 48px; margin-bottom: 9px; border: 0; border-radius: 14px; cursor: pointer; font-weight: 900; }
.puzzle-primary { color: #fff; background: linear-gradient(135deg,#16a77d,#087154); }.puzzle-secondary { color: #087154; background: #e2f7ef; border: 1px solid #bce6d8; }
.puzzle-help { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.puzzle-workspace { min-width: 0; }
.puzzle-message { min-height: 44px; margin-bottom: 12px; padding: 11px; display: grid; place-items: center; color: #087154; border-radius: 13px; background: #e2f7ef; font-weight: 900; text-align: center; }
.picture-frame { width: min(620px,100%); aspect-ratio: 1; margin: auto; position: relative; overflow: hidden; border: 8px solid #17233b; border-radius: 22px; background: #17233b; box-shadow: var(--shadow-sm); }
.animal-puzzle { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--puzzle-size,3),1fr); grid-template-rows: repeat(var(--puzzle-size,3),1fr); gap: 3px; background: #17233b; }
.puzzle-piece { min-width: 0; padding: 0; position: relative; border: 0; background-color: #dce7e2; background-repeat: no-repeat; cursor: pointer; transition: transform .16s,filter .16s; }
.puzzle-piece:hover { filter: brightness(1.08); }.puzzle-piece.selected { z-index: 2; outline: 5px solid #ffd45f; outline-offset: -5px; transform: scale(.94); }
.puzzle-piece.correct::after { content: "•"; position: absolute; right: 5px; bottom: 2px; color: rgba(255,255,255,.7); font-size: 1rem; text-shadow: 0 1px 3px #000; }
.puzzle-hint { position: absolute; inset: 0; z-index: 5; background-image: var(--current-photo); background-size: 100% 100%; opacity: .9; pointer-events: none; }
.completion-card { margin-top: 16px; padding: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border-radius: 18px; background: #fff1b9; border: 1px solid #f0cf5c; }
.completion-card > span { font-size: 2.8rem; }.completion-card h2 { margin: 0; }.completion-card p { margin: 2px 0 0; color: var(--muted); }
.completion-card button { padding: 10px 14px; color: #fff; border: 0; border-radius: 12px; background: #087154; cursor: pointer; font-weight: 900; }
.puzzle-skills { margin-top: 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.puzzle-skills div { padding: 22px; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); }
.puzzle-skills span { font-size: 2rem; }.puzzle-skills h3 { margin: 12px 0 5px; }.puzzle-skills p { margin: 0; color: var(--muted); line-height: 1.5; }
.photo-credits { margin-top: 18px; padding: 15px 18px; color: var(--muted); border-radius: 16px; background: rgba(255,255,255,.8); font-size: .82rem; line-height: 1.5; }
.photo-credits summary { cursor: pointer; color: var(--ink); font-weight: 900; }.photo-credits a { color: #087154; }
.photo-credits ul { margin: 12px 0 0; padding-left: 20px; columns: 2; column-gap: 34px; }
.photo-credits li { margin-bottom: 7px; break-inside: avoid; }
@media(max-width:820px){.puzzle-hero{grid-template-columns:1fr}.hero-pieces{min-height:200px}.puzzle-studio{grid-template-columns:1fr}.puzzle-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.puzzle-sidebar>.puzzle-kicker,.puzzle-sidebar>h2,.puzzle-help{grid-column:1/-1}.puzzle-stats{margin:0}}
@media(max-width:640px){.animal-options{grid-template-columns:1fr}.picker-heading{display:block}.picker-heading>p{margin-top:5px}.puzzle-sidebar{display:block}.puzzle-stats{margin:18px 0}.puzzle-skills{grid-template-columns:1fr}.completion-card{grid-template-columns:auto 1fr}.completion-card button{grid-column:1/-1}.hero-pieces{min-height:160px}.hero-pieces span{font-size:2.8rem}.photo-credits ul{columns:1}}