:root{color-scheme:light;--ink:#203d38;--green:#235e4e;--muted:#71847a;--line:#e1eae1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 90% 0,#e5f4e8,transparent 45%),#f7f8f4;color:var(--ink);font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif}button,a{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:3px solid #57a47a;outline-offset:3px}a{color:inherit;text-decoration:none}.wrap{max-width:1100px;margin:auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}.brand{font-weight:850;font-size:21px;letter-spacing:-.7px}.brand span{display:inline-grid;place-items:center;background:var(--green);color:#fce6aa;width:43px;height:43px;border-radius:15px;margin-right:8px}.home,.soft{background:white;border:1px solid var(--line);border-radius:14px;padding:11px 15px;color:var(--green);font-weight:750}.intro{margin:0 0 20px}.eyebrow{color:#588e77;font-weight:850;font-size:11px;letter-spacing:.13em;text-transform:uppercase}h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.04em;margin:6px 0}.intro p,.hint{color:var(--muted);line-height:1.5;margin:0}.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}.panel,.board{background:#fff;border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:0 16px 45px #315c4010}.panel h2,.board h2{font-size:16px;margin:0 0 12px}.panel h2:not(:first-child){margin-top:23px}.choices{display:flex;flex-wrap:wrap;gap:8px}.choice{border:1px solid var(--line);background:#f8faf7;border-radius:13px;padding:10px 12px;color:var(--ink);font-weight:750;min-height:44px}.choice.selected{border-color:#67ae87;background:#e5f5e9;box-shadow:inset 0 0 0 1px #a6d5b2}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.color{width:100%;aspect-ratio:1;border:4px solid white;outline:1px solid #dce6dd;border-radius:50%;background:var(--color);min-width:36px}.color.selected{outline:3px solid #3d8262;outline-offset:2px}.board{text-align:center;min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}.drawing{width:min(100%,480px);height:min(47vh,420px);min-height:260px}.drawing svg{width:100%;height:100%;overflow:visible}.drawing [data-region]{fill:#fff;stroke:#263b35;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;cursor:pointer;transition:fill .12s}.drawing [data-region]:focus{outline:none}.drawing [data-region]:focus-visible{outline:none;stroke:#519d71;stroke-width:7}.drawing .detail{fill:none;stroke:#263b35;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.drawing .eye{fill:#263b35;pointer-events:none}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.primary{border:0;border-radius:14px;background:var(--green);color:white;font-weight:800;padding:12px 20px;min-height:46px}.status{min-height:25px;margin:0;color:#438466;font-size:14px;font-weight:750}.target{width:150px;height:150px;border-radius:30px;background:#ecf6eb;display:grid;place-items:center;font-size:84px}.question{font-weight:800;font-size:20px;margin:0}.shadow-options,.shape-options,.slots{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.shadow-option,.shape-option,.slot{width:130px;height:130px;border-radius:22px;border:2px solid #dceade;background:#f8fbf6;display:grid;place-items:center;padding:16px}.shadow-option svg,.shape-option svg,.slot svg{width:100%;height:100%}.shadow-option svg{fill:#53685f}.shadow-option:hover,.shape-option:hover,.slot:hover{background:#edf8ee}.shadow-option.correct,.slot.correct{border-color:#6eb78d;background:#e6f6e9}.shape-option.selected{border-color:#5aa87b;background:#e5f5e9}.shape-option[disabled]{opacity:.35}.slot svg{fill:none;stroke:#8ca497;stroke-width:4;stroke-dasharray:7 5}.slot.correct svg{stroke:none}.shape-option{touch-action:none}.hint{font-size:13px}.progress{font-size:13px;color:var(--muted);font-weight:750}.celebrate{font-size:22px;color:var(--green);font-weight:850}.roadnote{font-size:12px;color:#8b9b91;text-align:center;margin:20px 0 0}@media(max-width:700px){.wrap{padding-top:max(12px,env(safe-area-inset-top))}header{margin-bottom:15px}.layout{grid-template-columns:1fr}.intro{margin-bottom:12px}.panel,.board{padding:16px;border-radius:22px}.board{min-height:0}.drawing{height:min(40dvh,350px);min-height:210px}.palette{grid-template-columns:repeat(8,1fr)}.shadow-option,.shape-option,.slot{width:clamp(72px,25vw,110px);height:clamp(72px,25vw,110px);padding:12px}.target{width:112px;height:112px;font-size:62px}.panel h2:not(:first-child){margin-top:14px}.question{font-size:18px}}@media(max-width:420px){.palette{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.color{width:44px;height:44px;justify-self:center}.home{padding:10px}.brand{font-size:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Dokunma vurgusu, çizimlerin üzerinde gri bir kutu oluşturmasın. */
.drawing svg,.drawing [data-region]{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}

/* Oyun alanını telefon ve tabletin görünen ekranına sığdır. */
@media (max-width:900px), (hover:none) and (max-width:1366px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .wrap{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;margin:0;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;overflow:hidden}
  header{flex:none;margin-bottom:5px;min-height:40px}
  .brand{font-size:18px}.brand span{width:36px;height:36px;border-radius:12px}.home{padding:8px 12px}
  main{display:flex;flex:1;min-height:0;flex-direction:column}
  .intro{flex:none;margin:0 0 5px}.intro h1{font-size:20px;line-height:1.2;margin:2px 0}.intro .eyebrow,.intro p,.roadnote{display:none}
  .layout{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .panel,.board{border-radius:18px;padding:10px}
  .panel{flex:none}.panel h2{font-size:13px;line-height:1.1;margin:0 0 5px}.panel h2:not(:first-child){margin-top:7px}.panel .hint{display:none}
  .choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.choice{min-width:0;min-height:38px;padding:5px 2px;font-size:clamp(10px,3vw,13px)}
  .palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.color{min-width:0;width:min(100%,40px);height:auto;aspect-ratio:1;justify-self:center;border-width:3px}
  .board{flex:1;min-height:0;height:100%;gap:clamp(4px,1dvh,10px);overflow:hidden;touch-action:none}
  .drawing{flex:1;width:100%;height:auto;min-height:0;max-height:100%;touch-action:none}
  .drawing svg{width:100%;height:100%;overflow:hidden}
  .status{flex:none;min-height:18px;font-size:12px;line-height:1.25}.actions{flex:none}.soft,.primary{min-height:38px;padding:7px 13px}
  .board h2{flex:none;margin:0;font-size:15px}.board .hint{flex:none;font-size:12px;line-height:1.25}
  .target{flex:none;width:clamp(60px,17dvh,115px);height:clamp(60px,17dvh,115px);font-size:clamp(38px,10dvh,68px);border-radius:20px}
  .question{flex:none;font-size:16px;line-height:1.2}.progress{flex:none}
  .shadow-options,.shape-options,.slots{flex:none;display:flex;flex-wrap:nowrap;gap:clamp(4px,2vw,10px);width:100%}
  .shadow-option,.shape-option,.slot{flex:none;width:min(21vw,15dvh,110px);height:min(21vw,15dvh,110px);min-width:0;min-height:0;padding:clamp(5px,1.4vw,12px);border-radius:16px}
}
@media (orientation:landscape) and (max-height:550px){
  .wrap{padding-top:max(3px,env(safe-area-inset-top));padding-bottom:max(3px,env(safe-area-inset-bottom))}
  header{min-height:34px;margin-bottom:2px}.brand span{width:30px;height:30px}.intro h1{font-size:16px;margin:0}.intro{margin-bottom:2px}
  .layout{display:grid;grid-template-columns:minmax(170px,34%) minmax(0,1fr);gap:6px}
  .panel{min-height:0;padding:8px}.choices{grid-template-columns:repeat(2,minmax(0,1fr))}.choice{min-height:32px}
  .palette{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.color{width:min(100%,32px)}
  .board{padding:6px;gap:4px}.board h2{font-size:13px}.board .hint{font-size:11px}
  .target{width:clamp(40px,17dvh,70px);height:clamp(40px,17dvh,70px);font-size:clamp(25px,10dvh,46px)}
  .shadow-option,.shape-option,.slot{width:min(12vw,16dvh,72px);height:min(12vw,16dvh,72px)}
  .status{min-height:14px;font-size:11px}.soft,.primary{min-height:32px;padding:5px 10px}
}

/* Sürüklenirken yalnızca şekil parmağı veya fareyi takip eder. */
.drag-ghost{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-70%);filter:drop-shadow(0 4px 5px #0003)}
.drag-ghost svg{display:block;width:100%;height:100%}
.shape-option.is-dragging svg{opacity:.15}

/* Hayvan seçeneklerini ekranı büyütmeden sayfala. */
.animal-pages{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px;color:var(--muted);font-size:13px;font-weight:750}
.animal-pages button{border:1px solid var(--line);border-radius:9px;background:#f8faf7;color:var(--green);font-size:22px;line-height:1;width:40px;height:32px}
.animal-pages button:disabled{opacity:.35;cursor:default}
@media (orientation:landscape) and (max-height:550px){.animal-pages{margin-top:3px}.animal-pages button{height:27px}}