/* Minik Bilgin — tek görünüm: gün ışığı oyun odası (bilinçli olarak tek tema).
   Düzen: tam ekran tek sayfa uygulama; üst çubuk + oyun sahnesi; her şey dokunmaya göre büyük. */
:root {
  color-scheme: light;
  --sky: #dff1ff;          /* zemin üst */
  --cream: #fff7e8;        /* zemin alt */
  --ink: #2d3a4f;          /* koyu çizgi/yazı */
  --card: #ffffff;
  --accent: #ff7a59;       /* mercan: ana vurgu */
  --good: #34c77b;
  --gold: #ffc531;
  --shadow: 0 6px 0 rgba(45,58,79,.14), 0 14px 28px rgba(45,58,79,.12);
  --r: 28px;
  --tap: clamp(64px, 11vmin, 120px);
  --f-display: "Segoe UI Variable Display", "Segoe UI Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; font-family: var(--f-display); color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, var(--cream) 78%);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible { outline: 5px solid var(--accent); outline-offset: 4px; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); }
.emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }

/* ---------- arka plan bulutları ---------- */
.clouds { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.clouds i { position: absolute; background: #fff; border-radius: 999px; opacity: .85; animation: drift linear infinite; }
.clouds i::before, .clouds i::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.clouds i::before { width: 55%; height: 160%; left: 15%; top: -70%; }
.clouds i::after { width: 40%; height: 120%; right: 12%; top: -45%; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }

/* ---------- başlangıç ---------- */
#start { align-items: center; justify-content: center; gap: 3vmin; }
#start .owl { width: min(42vmin, 300px); }
.bigplay { width: min(30vmin, 220px); aspect-ratio: 1; border-radius: 50%; background: var(--good);
  box-shadow: 0 10px 0 #1f9a59, 0 20px 40px rgba(31,154,89,.35); display: grid; place-items: center;
  animation: pulse 1.6s ease-in-out infinite; }
.bigplay svg { width: 46%; margin-left: 8%; }
.bigplay:active { transform: translateY(6px); box-shadow: 0 4px 0 #1f9a59; }
@keyframes pulse { 50% { transform: scale(1.07); } }

/* ---------- baykuş maskot ---------- */
.owl { display: block; }
.owl .beak { transform-origin: 50% 30%; }
.owl.talk { animation: bob .5s ease-in-out infinite; }
.owl.talk .beak { animation: beak .22s ease-in-out infinite alternate; }
.owl .lid { transform-origin: center; transform: scaleY(0); animation: blink 5s infinite; }
@keyframes bob { 50% { transform: translateY(-4%) rotate(-2deg); } }
@keyframes beak { to { transform: scaleY(.55); } }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }

/* ---------- ana menü ---------- */
#home { gap: 1.6vmin; }
.homebar { display: flex; align-items: center; gap: 2vmin; padding-top: 1.6vmin; }
.homebar .owl { width: clamp(70px, 13vmin, 130px); flex: none; }
.spacer { flex: 1; }
.pill { display: flex; align-items: center; gap: .4em; background: var(--card); border-radius: 999px;
  padding: .35em .8em; font-weight: 800; font-size: clamp(22px, 4vmin, 40px); box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums; }
.iconbtn { width: var(--tap); height: var(--tap); border-radius: 24px; background: var(--card);
  box-shadow: var(--shadow); display: grid; place-items: center; font-size: calc(var(--tap) * .55); flex: none;
  transition: transform .1s; }
.iconbtn:active { transform: translateY(4px) scale(.97); }
.iconbtn.small { width: calc(var(--tap) * .7); height: calc(var(--tap) * .7); font-size: calc(var(--tap) * .38); opacity: .55; box-shadow: none; background: rgba(255,255,255,.5); }
.gear { position: relative; }
.gear svg.ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.gear svg.ring circle { fill: none; stroke: var(--accent); stroke-width: 6; stroke-dasharray: 300; stroke-dashoffset: 300; }
.gear.holding svg.ring circle { transition: stroke-dashoffset 3s linear; stroke-dashoffset: 0; }

.tiles { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: clamp(12px, 2.2vmin, 26px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 21vmin, 220px), 1fr)); align-content: start;
  padding: 1vmin .5vmin 3vmin; scrollbar-width: none; }
.tile { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r); background: var(--c);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 70%, #000 30%), 0 16px 30px rgba(45,58,79,.15);
  display: grid; place-items: center; transition: transform .12s; animation: popin .45s backwards; }
.tile:nth-child(odd) { animation-delay: .05s; }
.tile .emoji { font-size: clamp(56px, 11vmin, 120px); filter: drop-shadow(0 4px 0 rgba(0,0,0,.12)); }
.tile:active { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 70%, #000 30%); }
.tile .stars { position: absolute; bottom: 8%; left: 0; right: 0; display: flex; justify-content: center; gap: 2px;
  font-size: clamp(12px, 2.2vmin, 20px); }
.tile .stars span { opacity: .25; } .tile .stars span.on { opacity: 1; }
@keyframes popin { from { transform: scale(.4); opacity: 0; } }

/* ---------- oyun ekranı ---------- */
#game { gap: 1.2vmin; }
.gamebar { display: flex; align-items: center; gap: 1.6vmin; padding-top: 1.4vmin; }
.gamebar .owl { width: clamp(56px, 10vmin, 100px); flex: none; }
.dots { display: flex; gap: 1vmin; }
.dots i { width: clamp(14px, 2.4vmin, 24px); aspect-ratio: 1; border-radius: 50%; background: rgba(45,58,79,.15); transition: background .3s, transform .3s; }
.dots i.on { background: var(--gold); transform: scale(1.15); }
.stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3vmin; padding-bottom: 2vmin; }
.row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(12px, 3vmin, 40px); }
.choice { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); display: grid; place-items: center;
  width: clamp(110px, 21vmin, 220px); aspect-ratio: 1; transition: transform .15s; animation: popin .4s backwards; }
.choice:nth-child(2) { animation-delay: .06s; } .choice:nth-child(3) { animation-delay: .12s; }
.choice:nth-child(4) { animation-delay: .18s; } .choice:nth-child(5) { animation-delay: .24s; } .choice:nth-child(6) { animation-delay: .3s; }
.choice:active { transform: scale(.95); }
.choice .emoji { font-size: clamp(64px, 13vmin, 140px); }
.choice svg { width: 72%; height: 72%; }
.bare { background: none; box-shadow: none; }
.shake { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-12px) rotate(-3deg); } 40%, 80% { transform: translateX(12px) rotate(3deg); } }
.glow { animation: glow 1s ease-in-out infinite !important; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,197,49,.9), var(--shadow); transform: scale(1); }
  50% { box-shadow: 0 0 0 18px rgba(255,197,49,0), var(--shadow); transform: scale(1.08); } }
.win { animation: win .6s; }
@keyframes win { 40% { transform: scale(1.2) rotate(6deg); } }
.locked { pointer-events: none; }
.hero { font-size: clamp(110px, 24vmin, 260px); filter: drop-shadow(0 8px 0 rgba(45,58,79,.12)); animation: popin .5s; }
.heroCard { background: var(--card); border-radius: 40px; box-shadow: var(--shadow); padding: 2vmin 5vmin; display: grid; place-items: center; }

/* balonlar */
.balloons { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vmin, 40px); }
.balloon { width: clamp(90px, 17vmin, 180px); animation: float 3s ease-in-out infinite; transform-origin: 50% 100%; }
.balloon:nth-child(2n) { animation-delay: -1.1s; } .balloon:nth-child(3n) { animation-delay: -2s; }
.balloon svg { width: 100%; display: block; overflow: visible; }
.balloon.popped { animation: popout .35s forwards; }
.balloon.glow { animation: glowb 1s infinite !important; }
@keyframes glowb { 50% { transform: scale(1.12); filter: drop-shadow(0 0 18px #ffc531); } }
@keyframes float { 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes popout { to { transform: scale(1.6); opacity: 0; } }

/* sayma */
.countbox { background: rgba(255,255,255,.75); border-radius: 36px; padding: 2.5vmin; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 1.6vmin; max-width: min(92vw, 900px); box-shadow: var(--shadow); }
.countbox button { position: relative; font-size: clamp(48px, 9vmin, 96px); transition: transform .15s; }
.countbox button.counted { transform: scale(.85); }
.countbox button .tag { position: absolute; top: -10%; right: -10%; background: var(--accent); color: #fff; font-size: .3em;
  font-weight: 900; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); }
.numcard { display: flex; flex-direction: column; gap: 4%; }
.numcard b { font-size: clamp(54px, 10vmin, 110px); line-height: 1; font-weight: 900; color: var(--accent); }
.numcard .pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 80%; }
.numcard .pips i { width: clamp(8px, 1.6vmin, 15px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); opacity: .7; }

/* hafıza */
.memgrid { display: grid; gap: clamp(8px, 2vmin, 22px); }
.card { aspect-ratio: 3 / 4; perspective: 800px; }
.card .in { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.card.open .in { transform: rotateY(180deg); }
.card .f, .card .b { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; display: grid; place-items: center; box-shadow: var(--shadow); }
.card .b { background: repeating-linear-gradient(45deg, #9c7cff 0 14px, #b39dff 14px 28px); font-size: 3em; color: #fff; }
.card .f { background: var(--card); transform: rotateY(180deg); }
.card .f .emoji { font-size: 4.6em; }
.card.done .f { box-shadow: 0 0 0 6px var(--good), var(--shadow); }

/* yapboz */
.puzzle { position: absolute; inset: 0; }
.board { position: absolute; border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: var(--shadow); overflow: hidden; }
.board canvas.ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; filter: grayscale(.4); }
.board .slot { position: absolute; border: 2px dashed rgba(45,58,79,.25); }
.piece { position: absolute; border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,.25); touch-action: none; cursor: grab; transition: transform .15s; }
.piece.drag { transform: scale(1.08); box-shadow: 0 16px 30px rgba(0,0,0,.3); z-index: 50; cursor: grabbing; transition: none; }
.piece.placed { box-shadow: none; border-radius: 0; pointer-events: none; }
.piece.back { transition: left .35s, top .35s; }

/* gölge */
.shadow .emoji { filter: brightness(0) opacity(.82); }

/* boyut */
.plates { display: flex; gap: clamp(16px, 6vmin, 80px); flex-wrap: wrap; justify-content: center; }
.plate { width: clamp(150px, 32vmin, 340px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 55%, #e8eef6 56%, #fff 70%);
  box-shadow: var(--shadow); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px; padding: 16%; }
.plate .emoji { font-size: clamp(26px, 5.4vmin, 58px); }

/* örüntü */
.seq { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.5vmin, 18px); background: rgba(255,255,255,.75);
  border-radius: 30px; padding: 2vmin 3vmin; box-shadow: var(--shadow); }
.seq span { font-size: clamp(42px, 9vmin, 96px); }
.seq .q { width: 1.15em; height: 1.15em; border-radius: 20px; border: 5px dashed var(--accent); display: grid; place-items: center;
  color: var(--accent); font-weight: 900; font-size: clamp(42px, 9vmin, 96px); font-family: var(--f-display); animation: pulse 1.4s infinite; }
.seq .q.filled { border-style: solid; animation: win .6s; }

/* hayvan evleri */
.homes { display: flex; gap: clamp(12px, 3vmin, 40px); flex-wrap: wrap; justify-content: center; }
.homecard { width: clamp(140px, 26vmin, 280px); aspect-ratio: 1 / 1.05; border-radius: var(--r); box-shadow: var(--shadow);
  display: grid; place-items: center; font-size: clamp(70px, 13vmin, 140px); }
.homecard.ciftlik { background: linear-gradient(#bfe6ff 55%, #8fd16a 55%); }
.homecard.orman { background: linear-gradient(#c8f0d0, #4caf6a); }
.homecard.deniz { background: linear-gradient(#bfe6ff 30%, #2f8fd8 30%); }

/* müzik */
.xylo { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.4vmin, 16px); width: min(96vw, 1000px); height: min(58vh, 520px);
  padding: 3vmin; background: linear-gradient(#a1724e, #7a5233); border-radius: 30px; box-shadow: var(--shadow); }
.bar { flex: 1; border-radius: 16px; position: relative; box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 4px 0 rgba(0,0,0,.25); transition: transform .08s, filter .08s; }
.bar::before, .bar::after { content: ""; position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #dcdcdc; box-shadow: inset 0 -2px 0 #999; }
.bar::before { top: 8%; } .bar::after { bottom: 8%; }
.bar.hit { transform: scale(.96) translateY(4px); filter: brightness(1.35) saturate(1.2); }
.modes { display: flex; gap: 2vmin; }
.modes .iconbtn.on { box-shadow: 0 0 0 6px var(--accent), var(--shadow); }

/* resim */
.art { width: 100%; flex: 1; min-height: 0; display: flex; gap: 1.6vmin; }
.canvasWrap { position: relative; flex: 1; min-width: 0; background: #fff; border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.canvasWrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvasWrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvasWrap svg .f { cursor: pointer; transition: fill .2s; }
.tools { display: flex; flex-direction: column; gap: 1.2vmin; overflow-y: auto; scrollbar-width: none; flex: none; padding: 4px; }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1vmin; }
.sw { width: clamp(42px, 7vmin, 70px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.2); border: 3px solid #fff; }
.sw.on { box-shadow: 0 0 0 5px var(--ink); transform: scale(1.08); }
.tools .iconbtn { width: clamp(52px, 8vmin, 84px); height: clamp(52px, 8vmin, 84px); font-size: clamp(26px, 4.4vmin, 44px); border-radius: 18px; }
.tools .iconbtn.on { box-shadow: 0 0 0 5px var(--accent), var(--shadow); }
.toolrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1vmin; }
.pages { display: flex; flex-wrap: wrap; gap: 2vmin; justify-content: center; }
.pages .choice svg { width: 86%; height: 86%; }
.gallery { display: flex; flex-wrap: wrap; gap: 2vmin; justify-content: center; overflow-y: auto; }
.gallery img { width: clamp(140px, 24vmin, 260px); border-radius: 16px; box-shadow: var(--shadow); background: #fff; }
@media (orientation: portrait) {
  .art { flex-direction: column-reverse; }
  .tools { flex-direction: row; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .swatches { grid-template-columns: repeat(10, 1fr); } .toolrow { grid-template-columns: repeat(8, auto); }
}

/* ---------- katmanlar ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(35,48,70,.45);
  backdrop-filter: blur(4px); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: var(--card); border-radius: 40px; padding: 4vmin 6vmin; display: flex; flex-direction: column; align-items: center; gap: 3vmin;
  box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: popin .45s cubic-bezier(.2,1.6,.4,1); max-width: 92vw; }
.sheet .big { font-size: clamp(110px, 26vmin, 240px); animation: spin 1.2s ease-out; }
@keyframes spin { from { transform: rotate(-200deg) scale(.2); } }
.sheet .btns { display: flex; gap: 4vmin; }
.go { background: var(--good); color: #fff; box-shadow: 0 8px 0 #1f9a59; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 11vmin, 110px), 1fr)); gap: 2vmin; width: min(88vw, 900px);
  max-height: 60vh; overflow-y: auto; padding: 1vmin; }
.album span { aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center; font-size: clamp(40px, 7vmin, 72px); background: #fff4d6; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
.album span.empty { background: #eef2f7; color: rgba(45,58,79,.2); font-size: clamp(22px, 4vmin, 40px); font-family: var(--f-display); font-weight: 900; }
.restring { width: min(40vmin, 260px); }
.restring circle.p { fill: none; stroke: var(--good); stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

/* ebeveyn paneli (yazılı — yetişkin içindir) */
.parent { background: var(--card); border-radius: 28px; padding: 28px; width: min(560px, 92vw); max-height: 90vh; overflow-y: auto;
  font: 16px/1.5 "Segoe UI", system-ui, sans-serif; display: flex; flex-direction: column; gap: 14px; }
.parent h2 { margin: 0; font-size: 22px; }
.parent label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.parent select, .parent input[type=range] { font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid #c9d3e0; }
.parent .btn { background: #eef2f7; padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.parent .btn.danger { background: #ffe3dd; color: #b3261e; }
.parent .btn.primary { background: var(--ink); color: #fff; }
.parent table { border-collapse: collapse; font-size: 14px; width: 100%; font-variant-numeric: tabular-nums; }
.parent td { padding: 3px 6px; border-bottom: 1px solid #eef2f7; }
.parent small { color: #5d6b80; }

/* konfeti */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 200; width: 100vw; height: 100vh; }
.flystar { position: fixed; z-index: 210; font-size: 54px; pointer-events: none; transition: all .8s cubic-bezier(.5,-0.3,.6,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.owl.sleep .lid { transform: scaleY(1); animation: none; }
/* geniş yatay ekranda 13 oyun iki dengeli satıra sığsın */
@media (orientation: landscape) and (min-width: 900px) { .tiles { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 520px) { .gamebar .owl { display: none; } .gamebar { gap: 8px; } .dots { gap: 5px; } }
@media (orientation: portrait) {
  .swatches, .toolrow { display: flex; flex-wrap: wrap; justify-content: center; }
  .tools { gap: 8px; }
}
.tile svg.icon { width: clamp(56px, 11vmin, 120px); filter: drop-shadow(0 4px 0 rgba(0,0,0,.12)); }