/* School Life Fun Park 3 – 3. sınıf Tema 1 oyunları (akıllı tahta, 16:9, dokunmatik) */
:root {
  --ink:#22314f; --muted:#6b7a95; --navy:#243b6b; --card:#fff; --line:#dfe6f2;
  --red:#ff5d5d; --orange:#ff9f1c; --yellow:#ffd23f; --green:#2ec27e; --blue:#3a86ff; --purple:#8e5cf7; --pink:#ff5fa2; --teal:#19c3b5;
  --sky1:#8fd8ff; --sky2:#e3f7ff; --grass:#86d95f;
  --r:2.4vmin; --shadow:0 .8vmin 0 rgba(34,49,79,.12);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--sky2); color:var(--ink);
  font-family:'Andika','Comic Sans MS','Segoe UI',sans-serif; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
button { font-family:inherit; color:inherit; cursor:pointer; }
img { -webkit-user-drag:none; }

/* ---------- üst çubuk */
.top { position:fixed; inset:0 0 auto 0; height:8.5vh; min-height:52px; z-index:20; display:flex; align-items:center; gap:1.4vmin;
  padding:0 1.8vmin; background:var(--navy); color:#fff; box-shadow:0 .4vmin 1.2vmin rgba(0,0,0,.18); }
.top h1 { flex:1; margin:0; font-size:3.6vmin; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbtn { border:0; background:rgba(255,255,255,.15); color:#fff; border-radius:1.6vmin; height:6vh; min-height:40px; padding:0 2vmin;
  font-size:2.6vmin; display:inline-flex; align-items:center; gap:1vmin; }
.tbtn:hover { background:rgba(255,255,255,.26); }
.tbtn.icon { width:6vh; min-width:40px; justify-content:center; padding:0; font-size:3.4vmin; }
.tbtn img { width:3.4vmin; height:3.4vmin; }
.teams { display:flex; gap:1vmin; }
.team { border:0; border-radius:5vmin; padding:.8vmin 2.2vmin; font-size:2.6vmin; font-weight:700; background:rgba(255,255,255,.12); color:#fff; border:.4vmin solid transparent; transition:transform .2s; }
.team.on { background:#fff; color:var(--c); border-color:var(--c); transform:scale(1.08); }
.team.bump { animation:bump .5s; }
.team.reset { font-size:2.2vmin; padding:.8vmin 1.4vmin; }

main#stage { position:fixed; top:8.5vh; left:0; right:0; bottom:0; overflow:hidden; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vmin; padding:2vmin 3vmin; }

/* ---------- ortak butonlar */
.btn { border:0; border-radius:2.4vmin; padding:1.5vmin 3.2vmin; font-size:3vmin; font-weight:700; color:#fff; background:var(--blue);
  box-shadow:0 .7vmin 0 rgba(0,0,0,.18); display:inline-flex; align-items:center; gap:1.2vmin; transition:transform .08s; white-space:nowrap; }
.btn:active { transform:translateY(.5vmin); box-shadow:0 .2vmin 0 rgba(0,0,0,.18); }
.btn img { width:4vmin; height:4vmin; }
.btn.green { background:var(--green); } .btn.orange { background:var(--orange); } .btn.red { background:var(--red); }
.btn.purple { background:var(--purple); } .btn.gray { background:#8f9bb3; } .btn.pink { background:var(--pink); } .btn.teal { background:var(--teal); }
.btn.big { font-size:4vmin; padding:2vmin 5vmin; border-radius:3vmin; }
.btn.small { font-size:2.3vmin; padding:1vmin 2vmin; }
.row { display:flex; gap:1.8vmin; align-items:center; justify-content:center; flex-wrap:wrap; }
.chip { background:#fff; border-radius:5vmin; padding:.8vmin 2.4vmin; font-size:2.4vmin; box-shadow:var(--shadow); }
.progress { display:flex; gap:1vmin; }
.progress i { width:2.4vmin; height:2.4vmin; border-radius:50%; background:#d5deec; display:block; }
.progress i.on { background:var(--green); }
.progress i.now { background:var(--yellow); box-shadow:0 0 0 .5vmin rgba(255,210,63,.35); }

/* ---------- resimler */
.art { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
/* images/ görselleri GORSELLERI_HAZIRLA ile şeffaf ve kırpılmış hâle getirilir.
   Küçük yuvarlak alanlarda kişi görselinin yalnızca üst kısmı (baş–bel) gösterilir. */
.balloon .pic, .wheel .seg-pic, .hide-top .who, .say-bubble .mini .over { overflow:hidden; }
.say-bubble .mini .over { border-radius:50%; background:#fff; border:.5vmin solid #fff; box-shadow:0 .4vmin 1vmin rgba(0,0,0,.2); }
.balloon .pic img.person, .wheel .seg-pic img.person, .hide-top .who img.person, .say-bubble .mini .over img.person {
  object-fit:cover; object-position:50% 0; }
.art.combo { display:flex; align-items:flex-end; justify-content:center; }
.art.combo img { width:62%; height:62%; object-fit:contain; }
.pic { display:flex; align-items:center; justify-content:center; }
.pic > svg { width:100%; height:100%; }
.ic { width:1.2em; height:1.2em; vertical-align:-.2em; }

/* ---------- ana sayfa */
.home { justify-content:flex-start; padding:0; gap:0; }
.home-bg { position:absolute; inset:0; background-size:cover; background-position:center 70%; }
.home-bg.nobg { background:linear-gradient(var(--sky1), var(--sky2) 70%); }
.home-bg .grass { position:absolute; left:0; right:0; bottom:0; height:14vh; background:var(--grass); border-radius:50% 50% 0 0 / 30% 30% 0 0; }
.home-shade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 52%, rgba(36,59,107,.18) 100%); }
.cloud { position:absolute; background:#fff; border-radius:10vmin; opacity:.9; animation:drift linear infinite; }
.cloud::before, .cloud::after { content:""; position:absolute; background:#fff; border-radius:50%; }
.cloud::before { width:45%; height:160%; left:15%; top:-70%; } .cloud::after { width:35%; height:130%; right:15%; top:-50%; }
@keyframes drift { from { transform:translateX(-30vw); } to { transform:translateX(130vw); } }

.hero { position:relative; z-index:2; width:100%; padding:2.6vmin 5vw 0; display:flex; }
.hero-card { background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(1.2vmin); backdrop-filter:blur(1.2vmin);
  border-radius:4vmin; padding:2.2vmin 3.6vmin 2.4vmin; box-shadow:0 1.4vmin 4vmin rgba(36,59,107,.18); border:.3vmin solid rgba(255,255,255,.9);
  animation:heroIn .6s ease-out backwards; }
.kicker { display:inline-block; font-size:1.9vmin; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(90deg, #ff7f86, #ffb54d); padding:.4vmin 1.8vmin; border-radius:3vmin; }
.hero-card h2 { margin:.8vmin 0 .2vmin; font-size:6.4vmin; line-height:1.05; color:var(--navy); letter-spacing:-.01em; }
.hero-card h2 span { color:#ff5d8f; }
.hero-card p { margin:0 0 1.6vmin; font-size:2.4vmin; color:#51607d; }
.seg { display:inline-flex; background:rgba(36,59,107,.08); border-radius:5vmin; padding:.5vmin; }
.seg button { border:0; background:transparent; font-size:2.4vmin; padding:.8vmin 2.4vmin; border-radius:5vmin; display:flex; align-items:center; gap:.8vmin; color:var(--navy); }
.seg button.on { background:#fff; font-weight:700; box-shadow:0 .4vmin 1.2vmin rgba(36,59,107,.18); }
.seg button img { width:2.8vmin; height:2.8vmin; }

.panel { position:relative; z-index:2; margin:auto auto 2.6vmin; width:min(92vw, 164vmin); padding:2.2vmin 2.2vmin 1.2vmin;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(1.4vmin); backdrop-filter:blur(1.4vmin);
  border-radius:4.4vmin; border:.3vmin solid rgba(255,255,255,.85); box-shadow:0 2vmin 5vmin rgba(36,59,107,.22); }
.gamegrid { display:grid; grid-template-columns:repeat(6, 1fr); gap:1.8vmin; }
.gcard { position:relative; overflow:hidden; border:0; border-radius:3.2vmin; height:23vmin; padding:1.4vmin 1vmin 1.6vmin;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.3vmin; color:#fff; text-align:center;
  background:linear-gradient(160deg, var(--c1), var(--c2)); box-shadow:0 .9vmin 0 rgba(0,0,0,.14), 0 1.6vmin 2.6vmin rgba(36,59,107,.18);
  animation:cardIn .55s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay:calc(var(--i) * 45ms + 150ms);
  transition:transform .15s ease, box-shadow .15s ease; }
.gcard::before { content:""; position:absolute; width:70%; height:70%; right:-18%; top:-22%; border-radius:50%; background:rgba(255,255,255,.18); }
.gcard::after { content:""; position:absolute; width:40%; height:40%; left:-12%; bottom:-14%; border-radius:50%; background:rgba(0,0,0,.06); }
.gcard:hover { transform:translateY(-.8vmin) scale(1.03); box-shadow:0 1.2vmin 0 rgba(0,0,0,.14), 0 2.4vmin 3.4vmin rgba(36,59,107,.24); }
.gcard:active { transform:translateY(.5vmin) scale(.98); box-shadow:0 .3vmin 0 rgba(0,0,0,.14); }
.gicon { position:relative; z-index:1; width:11vmin; height:11vmin; margin-bottom:auto; margin-top:1.8vmin; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 .7vmin 1.6vmin rgba(0,0,0,.16); transition:transform .25s; }
.gicon img { width:68%; height:68%; }
.gcard:hover .gicon { transform:rotate(-8deg) scale(1.06); }
.gcard b { position:relative; z-index:1; font-size:2.9vmin; line-height:1.05; text-shadow:0 .3vmin 0 rgba(0,0,0,.15); }
.gcard small { position:relative; z-index:1; font-size:1.8vmin; opacity:.9; }
.gtag { position:absolute; z-index:1; top:1vmin; left:1vmin; font-size:1.45vmin; font-weight:700; padding:.25vmin 1.1vmin; border-radius:2vmin;
  background:rgba(255,255,255,.26); color:#fff; font-family:'Segoe UI',Arial,sans-serif; white-space:nowrap; }
.credit { text-align:center; font-family:'Segoe UI',Arial,sans-serif; font-size:1.35vmin; color:#44506a; opacity:.75; margin-top:1.1vmin; }
@keyframes cardIn { from { opacity:0; transform:translateY(4vmin) scale(.92); } }
@keyframes heroIn { from { opacity:0; transform:translateY(-2vmin); } }

/* ana sayfada maskot sağ üstte, büyük */
body.on-hub .pip { left:auto; right:5vw; top:calc(8.5vh + 1.5vmin); bottom:auto; width:25vmin; height:25vmin; }
body.on-hub .pip-bubble { left:auto; right:22vmin; bottom:13vmin; transform-origin:bottom right; }
body.on-hub .pip-bubble::after { left:auto; right:-1.4vmin; border:1.4vmin solid transparent; border-left-color:#fff; border-right:0; }

/* ---------- Pip maskot */
.pip { position:fixed; left:1.5vmin; bottom:1vmin; z-index:30; width:19vmin; height:19vmin; pointer-events:none; transition:transform .3s, opacity .3s; }
.pip.hidden { transform:translateY(25vmin); opacity:0; }
.pip.big { width:30vmin; height:30vmin; }
.pip-body { width:100%; height:100%; animation:bob 2.6s ease-in-out infinite; }
.pip-body img { width:100%; height:100%; object-fit:contain; object-position:50% 100%; }
.pip-body svg { width:100%; height:100%; overflow:visible; }
.pip.jump .pip-body { animation:hop .6s ease-out 2; }
.pip.shake .pip-body { animation:shake .5s; }
.pip.dance .pip-body { animation:dance .5s ease-in-out infinite alternate; }
.pip.frozen .pip-body { animation:none; filter:saturate(.3) brightness(1.15) drop-shadow(0 0 1.5vmin #9fe3ff); }
.pip-bubble { position:absolute; left:17vmin; bottom:13vmin; background:#fff; border-radius:3vmin; padding:1.3vmin 2.4vmin; font-size:3vmin; font-weight:700; white-space:nowrap;
  box-shadow:0 .6vmin 1.6vmin rgba(0,0,0,.15); opacity:0; transform:scale(.6); transform-origin:bottom left; transition:all .2s; }
.pip-bubble.on { opacity:1; transform:scale(1); }
.pip-bubble::after { content:""; position:absolute; left:-1.4vmin; bottom:1.4vmin; border:1.4vmin solid transparent; border-right-color:#fff; border-left:0; }
.pip.big .pip-bubble { left:28vmin; bottom:22vmin; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1vmin); } }
@keyframes hop { 0%,100% { transform:translateY(0) scale(1); } 40% { transform:translateY(-5vmin) scale(1.05,.95); } }
@keyframes dance { from { transform:rotate(-10deg) translateY(0); } to { transform:rotate(10deg) translateY(-2vmin); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-1.4vmin); } 40%,80% { transform:translateX(1.4vmin); } }
@keyframes bump { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1.08); } }
@keyframes pop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.1); opacity:1; } 100% { transform:scale(1); } }
@keyframes wobble { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-8deg); } 75% { transform:rotate(8deg); } }
.shake { animation:shake .45s; }
.popin { animation:pop .4s ease-out; }
.pip svg .eye-l, .pip svg .eye-r { transform-box:fill-box; transform-origin:center; animation:blink 4s infinite; }
@keyframes blink { 0%,92%,100% { transform:scaleY(1); } 95% { transform:scaleY(.1); } }
.pip svg .wing-l, .pip svg .wing-r { transform-box:fill-box; transition:transform .3s; }
.pip svg .wing-l { transform-origin:top right; } .pip svg .wing-r { transform-origin:top left; }
.pip.jump svg .wing-l, .pip.dance svg .wing-l { transform:rotate(55deg); }
.pip.jump svg .wing-r, .pip.dance svg .wing-r { transform:rotate(-55deg); }

/* ---------- efektler */
#fx { position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.confetti { position:absolute; width:1.6vmin; height:2.4vmin; border-radius:.3vmin; animation:fall linear forwards; }
@keyframes fall { to { transform:translate(var(--dx), 110vh) rotate(var(--rot)); } }
.burst { position:absolute; width:2.2vmin; height:2.2vmin; border-radius:50%; animation:burst .6s ease-out forwards; }
@keyframes burst { to { transform:translate(var(--dx), var(--dy)) scale(.2); opacity:0; } }
.toast { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); background:var(--green); color:#fff; font-size:7vmin; font-weight:700;
  padding:2vmin 6vmin; border-radius:5vmin; box-shadow:0 1vmin 3vmin rgba(0,0,0,.2); animation:toast 1.3s ease-out forwards; }
@keyframes toast { 0% { transform:translate(-50%,-50%) scale(.5); opacity:0; } 15% { transform:translate(-50%,-50%) scale(1.1); opacity:1; } 25% { transform:translate(-50%,-50%) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-60%) scale(1); } }
.sticker-pop { position:fixed; inset:0; z-index:45; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(36,59,107,.55); pointer-events:auto; animation:fadein .3s; }
.sticker-pop .rays { position:absolute; width:80vmin; height:80vmin; background:repeating-conic-gradient(rgba(255,230,120,.55) 0 10deg, transparent 10deg 20deg); border-radius:50%; animation:spin 8s linear infinite; }
.sticker-pop .st { position:relative; width:34vmin; height:34vmin; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.4vmin dashed var(--yellow); animation:pop .6s ease-out; }
.sticker-pop .st img { width:70%; height:70%; }
.sticker-pop h3 { position:relative; color:#fff; font-size:6vmin; margin:3vmin 0 1vmin; text-shadow:0 .5vmin 0 rgba(0,0,0,.25); }
.sticker-pop p { position:relative; color:#fff; font-size:2.6vmin; margin:0; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadein { from { opacity:0; } }

/* ---------- kart / seçenek */
.opt { background:#fff; border:.6vmin solid var(--line); border-radius:3vmin; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.6vmin; box-shadow:var(--shadow); }
.opt.ok { border-color:var(--green); background:#e9fbf2; }
.opt.bad { border-color:var(--red); }

/* ---------- Balon */
.sky { position:absolute; inset:0; background:linear-gradient(#6cc7ff, #d8f3ff); overflow:hidden; }
.balloon { position:absolute; width:26vmin; height:38vmin; border:0; background:none; padding:0; will-change:transform; }
.balloon svg.shape { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.balloon .pic { position:absolute; left:10%; top:6%; width:80%; height:55%; border-radius:50%; background:rgba(255,255,255,.95); padding:.4vmin; }
.balloon.wob { animation:wobble .4s; }
.bal-hud { position:absolute; top:1.6vmin; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:1.6vmin; align-items:center; }
.bal-target { background:#fff; border-radius:4vmin; padding:1vmin 3vmin; font-size:3.6vmin; font-weight:700; box-shadow:var(--shadow); display:flex; align-items:center; gap:1.4vmin; }

/* ---------- Canavar */
.mon-wrap { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; background:linear-gradient(#fff6e5, #ffe7c2); }
.monster { display:flex; flex-direction:column; align-items:center; gap:1vmin; border:0; background:none; }
.monster svg { width:32vmin; height:36vmin; overflow:visible; transition:transform .3s; }
.monster .lbl { font-size:4.4vmin; font-weight:800; letter-spacing:.1em; padding:.6vmin 3vmin; border-radius:4vmin; color:#fff; background:var(--c); display:flex; align-items:center; gap:1vmin; }
.monster .lbl img { width:5vmin; height:5vmin; }
.monster .mouth { transform-box:fill-box; transform-origin:center; transition:transform .2s; }
.monster.open .mouth { transform:scaleY(2.2); }
.monster.munch .mouth { animation:munch .18s 4 alternate; }
@keyframes munch { from { transform:scaleY(2.2); } to { transform:scaleY(.3); } }
.monster.yuck svg { animation:shake .5s; }
.monster.dance svg { animation:dance .45s ease-in-out infinite alternate; }
.mon-center { display:flex; flex-direction:column; align-items:center; gap:2vmin; }
.feed-card { width:40vmin; height:40vmin; background:#fff; border-radius:3vmin; border:.7vmin solid #ffd08a; box-shadow:0 1vmin 0 #f2b35e; padding:1vmin; touch-action:none; cursor:grab; position:relative; z-index:6; }
.feed-card.drag { cursor:grabbing; box-shadow:0 2.4vmin 3vmin rgba(0,0,0,.2); transition:none; }
.feed-card.fly { transition:transform .45s ease-in, opacity .45s; }
.feed-card .w { position:absolute; left:0; right:0; bottom:-6vmin; text-align:center; font-size:3.4vmin; font-weight:700; }

/* ---------- El feneri */
.dark { position:absolute; inset:0; background:linear-gradient(#3b4a7a, #26335a); overflow:hidden; cursor:none; touch-action:none; }
.dark .room { position:absolute; inset:0; background:
  linear-gradient(transparent 70%, rgba(0,0,0,.18) 70%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 6vmin, transparent 6vmin 12vmin); }
.hid { position:absolute; z-index:1; width:28vmin; height:28vmin; background:#fff; border-radius:3vmin; padding:.8vmin; transform:rotate(var(--r)); box-shadow:0 .8vmin 1.6vmin rgba(0,0,0,.25); }
.hid.found { outline:.8vmin solid var(--yellow); animation:pop .4s; }
.hid .lbl { position:absolute; left:50%; bottom:-6vmin; font-size:3.2vmin !important; transform:translateX(-50%); background:var(--yellow); padding:.3vmin 1.6vmin; border-radius:2vmin; font-size:2.4vmin; font-weight:700; white-space:nowrap; }
.shade { position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 19vmin, rgba(8,12,30,.965) 23vmin); transition:opacity 1.2s; }
.shade.off { opacity:0; }
.flash-hud { position:absolute; top:1.6vmin; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:1.4vmin; align-items:center; }
.flash-q { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); font-size:6vmin; font-weight:700; color:#fff; text-shadow:0 .5vmin 1vmin rgba(0,0,0,.4); z-index:6; pointer-events:none; }

/* ---------- Saklambaç */
.hall { position:absolute; inset:0; background:linear-gradient(#ffe9c9 0 72%, #c58b52 72% 100%); background-size:cover; background-position:center; }
.hall.hasbg { background-image:var(--bg); }
.hide-top { position:absolute; top:1.4vmin; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:2vmin; background:#fff; padding:1vmin 3vmin 1vmin 1vmin; border-radius:5vmin; box-shadow:var(--shadow); z-index:5; }
.hide-top .who { width:13vmin; height:13vmin; background:#eef6ff; border-radius:50%; padding:.4vmin; }
.hide-top .q { font-size:4.2vmin; font-weight:700; }
.hide-top .hint { font-size:2vmin; color:var(--muted); }
.doors { position:absolute; left:50%; top:17vmin; transform:translateX(-50%); display:grid; grid-template-columns:repeat(3, 27vmin); gap:1.2vmin 9vmin; justify-items:center; }
.door-slot { display:flex; flex-direction:column; align-items:center; gap:.6vmin; }
.sign { min-width:20vmin; height:5.4vmin; background:#fff; border-radius:1.6vmin; border:.4vmin solid #d7b48a; display:flex; align-items:center; justify-content:center; padding:0 1.6vmin; box-shadow:0 .4vmin 0 rgba(0,0,0,.12); }
.sign span { font-size:3vmin; font-weight:700; white-space:nowrap; }
.door { position:relative; width:27vmin; height:30vmin; border:0; padding:0; background:#3b2a1d; border-radius:1.4vmin 1.4vmin 0 0; perspective:140vmin; }
.door .inside { position:absolute; inset:.8vmin .8vmin 0; background:#fff; border-radius:1vmin 1vmin 0 0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.door .inside .room { position:absolute; inset:0; padding:.6vmin; }
.door .inside .seeker { position:absolute; bottom:0; width:92%; height:92%; transform:scale(0); transition:transform .45s cubic-bezier(.3,1.6,.5,1) .35s; }
.door.found .inside .seeker { transform:scale(1); }
.door .leaf { position:absolute; inset:.8vmin .8vmin 0; background:var(--c); border-radius:1vmin 1vmin 0 0; transform-origin:left center; transition:transform .7s cubic-bezier(.4,.1,.3,1); box-shadow:inset 0 0 0 .6vmin rgba(255,255,255,.25); }
.door .leaf .poster { position:absolute; left:8%; right:8%; top:5%; height:74%; background:#fff; border-radius:1.6vmin; padding:.4vmin; box-shadow:inset 0 0 0 .5vmin rgba(0,0,0,.08); }
.door .leaf::after { content:""; position:absolute; right:6%; top:84%; width:2.2vmin; height:2.2vmin; border-radius:50%; background:#ffd23f; box-shadow:0 .3vmin 0 #c9a21f; }
.door.open .leaf { transform:rotateY(78deg); }
.door.found { outline:1vmin solid var(--yellow); }

/* ---------- Sohbet */
.chat { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; background:linear-gradient(#e9f6ff, #fdf4ff); }
.chat .side { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vmin; padding:3vmin; position:relative; }
.speaker { width:40vmin; height:46vmin; }
.chat .side.has-mini .speaker { height:28vmin; }
.speaker.hop { animation:hop .6s ease-out; }
.say-bubble { position:relative; background:#fff; border-radius:3.4vmin; padding:2vmin 3vmin; font-size:4.4vmin; font-weight:700; box-shadow:var(--shadow); display:flex; align-items:center; gap:1.6vmin; max-width:46vw; }
.say-bubble.has-mini { flex-direction:column; padding:1.6vmin 3vmin 2vmin; }
.say-bubble .mini { width:34vmin; height:34vmin; flex:none; position:relative; }
.say-bubble .mini .over { position:absolute; right:-2vmin; bottom:-1vmin; width:45%; height:45%; }
.say-bubble .cal { background:#fff; border:.6vmin solid var(--line); border-radius:2.4vmin; width:30vmin; text-align:center; overflow:hidden; font-size:5.4vmin; }
.say-bubble .cal b { display:block; background:var(--red); color:#fff; font-size:3vmin; padding:.6vmin; }
.say-bubble .cal span { display:block; padding:3vmin .4vmin; }
.replies { display:flex; flex-direction:column; gap:2vmin; width:min(44vw, 80vmin); }
.reply { border:0; text-align:left; background:#fff; border-radius:3vmin; padding:2vmin 3vmin; font-size:3.8vmin; font-weight:700; box-shadow:0 .8vmin 0 #c9d6ea; display:flex; align-items:center; gap:2vmin; }
.reply .n { width:5.4vmin; height:5.4vmin; border-radius:50%; background:var(--c); color:#fff; display:flex; align-items:center; justify-content:center; font-size:3vmin; flex:none; }
.reply.ok { background:#e9fbf2; box-shadow:0 .8vmin 0 var(--green); }
.reply.bad { background:#ffecec; }
.me { display:flex; align-items:center; gap:1.6vmin; font-size:2.6vmin; color:var(--muted); }
.me .pic { width:12vmin; height:12vmin; }

/* ---------- Çark */
.wheel-wrap { --W:min(80vmin, 52vw); position:relative; width:var(--W); height:var(--W); }
.wheel { position:absolute; inset:0; border-radius:50%; border:1.4vmin solid #fff; box-shadow:0 1.4vmin 3vmin rgba(0,0,0,.2), inset 0 0 0 .6vmin rgba(0,0,0,.08); transition:transform 5s cubic-bezier(.215,.61,.355,1); }
.wheel .seg-pic { position:absolute; left:50%; top:50%; width:calc(var(--W) * .25); height:calc(var(--W) * .25); margin:calc(var(--W) * -.125) 0 0 calc(var(--W) * -.125); background:rgba(255,255,255,.95); border-radius:50%; padding:.5vmin; }
.wheel-pointer { position:absolute; left:50%; top:-3vmin; transform:translateX(-50%); width:0; height:0; border-left:3.6vmin solid transparent; border-right:3.6vmin solid transparent; border-top:6.4vmin solid var(--red); filter:drop-shadow(0 .5vmin .4vmin rgba(0,0,0,.25)); z-index:3; }
.wheel-hub { position:absolute; left:50%; top:50%; width:15vmin; height:15vmin; margin:-7.5vmin 0 0 -7.5vmin; border-radius:50%; background:#fff; border:0; box-shadow:0 .6vmin 1.4vmin rgba(0,0,0,.2); font-size:3.2vmin; font-weight:800; color:var(--red); z-index:2; }
.modal { position:absolute; inset:0; background:rgba(36,59,107,.55); display:flex; align-items:center; justify-content:center; z-index:10; animation:fadein .25s; }
.modal .box { background:#fff; border-radius:4vmin; padding:3vmin 5vmin; display:flex; flex-direction:column; align-items:center; gap:2vmin; animation:pop .4s; }
.modal .box .pic { width:52vmin; height:52vmin; }
.modal .q { font-size:5vmin; font-weight:700; }
.modal .a { font-size:4.4vmin; font-weight:700; color:var(--green); min-height:6vmin; }

/* ---------- Tren */
.rail { position:absolute; inset:0; background:linear-gradient(#bfe9ff 0 64%, #9adf7a 64% 100%); overflow:hidden; }
.track { position:absolute; left:0; right:0; top:79%; height:2.4vmin; background:repeating-linear-gradient(90deg, #7a5230 0 2vmin, transparent 2vmin 5vmin), linear-gradient(transparent 35%, #6b6b6b 35% 55%, transparent 55%); }
.train { position:absolute; left:2vmin; top:52%; display:flex; align-items:flex-end; gap:.8vmin; transition:transform 3.5s cubic-bezier(.5,0,.7,.4); }
.train.go { transform:translateX(130vw); }
.train.back { transition:none; transform:translateX(-130vw); }
.loco { width:min(24vmin, 17vw); height:min(20vmin, 14vw); }
.wagon { position:relative; width:17vmin; height:13vmin; border-radius:1.8vmin 1.8vmin .8vmin .8vmin; background:#fff; border:.6vmin dashed #9fb3cf; display:flex; align-items:center; justify-content:center; font-size:2.4vmin; font-weight:800; color:#9fb3cf; }
.wagon::before, .wagon::after { content:""; position:absolute; bottom:-3.2vmin; width:5vmin; height:5vmin; border-radius:50%; background:#40475a; border:1vmin solid #9aa3b8; }
.wagon::before { left:1.6vmin; } .wagon::after { right:1.6vmin; }
.wagon.full { border:0; color:#fff; background:var(--c); box-shadow:inset 0 -1.6vmin 0 rgba(0,0,0,.14); }
.wagon.today { outline:1vmin solid var(--yellow); animation:bump .6s; }
.wagon.missing { background:#fff; border:.6vmin dashed var(--red); color:var(--red); font-size:6vmin; }
.pile { position:absolute; top:4vmin; left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; gap:1.6vmin; justify-content:center; width:92vw; }
.car { border:0; color:#fff; font-size:3.4vmin; font-weight:800; padding:1.8vmin 3vmin; border-radius:2vmin; box-shadow:0 .7vmin 0 rgba(0,0,0,.2); background:var(--c); }
.smoke { position:absolute; width:4vmin; height:4vmin; border-radius:50%; background:#fff; opacity:.8; animation:smoke 1.4s ease-out forwards; }
@keyframes smoke { to { transform:translate(-6vmin, -14vmin) scale(3); opacity:0; } }
.train-ctl { position:absolute; bottom:2vmin; left:50%; transform:translateX(-50%); display:flex; gap:1.6vmin; }
.train-q { position:absolute; top:4vmin; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2vmin; }

/* ---------- Tekerleme */
.tw-list { display:grid; grid-template-columns:repeat(4, 1fr); gap:2vmin; width:min(94vw, 160vmin); }
.tw-card { border:0; background:#fff; border-radius:3vmin; padding:2vmin; box-shadow:0 .8vmin 0 var(--c); display:flex; flex-direction:column; align-items:center; gap:1vmin; font-size:2.4vmin; font-weight:700; text-align:center; }
.tw-card img { width:9vmin; height:9vmin; }
.tw-card.on { outline:.7vmin solid var(--c); }
.tw-card .done { font-size:2.2vmin; }
.tw-text { font-size:6.4vmin; font-weight:700; text-align:center; line-height:1.35; max-width:92vw; background:#fff; border-radius:4vmin; padding:3vmin 4vmin; box-shadow:var(--shadow); }
.tw-text span { display:inline-block; padding:0 .6vmin; border-radius:1.4vmin; transition:background .1s, transform .1s; }
.tw-text span.now { background:var(--yellow); transform:translateY(-.6vmin) scale(1.08); }
.tw-text .sa { color:var(--red); } .tw-text .sb { color:var(--blue); }
.speeds { display:flex; gap:1.6vmin; }
.speed { border:0; background:#fff; border-radius:3vmin; padding:1.2vmin 2.6vmin; font-size:3vmin; font-weight:700; box-shadow:var(--shadow); display:flex; align-items:center; gap:1vmin; }
.speed img { width:5vmin; height:5vmin; }
.speed.on { background:var(--c); color:#fff; }
.speed .star { width:3vmin; height:3vmin; opacity:.2; }
.speed.did .star { opacity:1; }
.turnbar { width:60vmin; height:2.4vmin; background:#e3eaf5; border-radius:2vmin; overflow:hidden; }
.turnbar i { display:block; height:100%; width:0; background:var(--green); }

/* ---------- Hafıza / Eşleştir / Harfler / Kartlar / Dans */
.mem { --S:min(27vmin, 15vw); display:grid; grid-template-columns:repeat(6, var(--S)); gap:1.8vmin; }
.mc { width:var(--S); height:var(--S); border:0; padding:0; background:none; perspective:80vmin; }
.mc .in { position:relative; width:100%; height:100%; transition:transform .4s; transform-style:preserve-3d; }
.mc.flip .in, .mc.done .in { transform:rotateY(180deg); }
.mc .f, .mc .b { position:absolute; inset:0; border-radius:2.4vmin; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; }
.mc .f { background:linear-gradient(135deg, var(--purple), #b18cff); box-shadow:0 .7vmin 0 #6b3fd1; }
.mc .f img { width:50%; height:50%; opacity:.9; }
.mc .b { background:#fff; border:.5vmin solid var(--line); transform:rotateY(180deg); padding:.6vmin; font-size:min(3.8vmin, 2.1vw); overflow-wrap:break-word; font-weight:700; text-align:center; }
.mc .b .pic { width:100%; height:100%; }
.mc.done .b { border-color:var(--green); background:#e9fbf2; }
.bigpic { width:44vmin; height:44vmin; }
.slots, .pool { display:flex; gap:1.2vmin; flex-wrap:wrap; justify-content:center; }
.slot, .lt { width:8.6vmin; height:9.6vmin; border-radius:1.8vmin; font-size:5.2vmin; font-weight:700; display:flex; align-items:center; justify-content:center; border:0; }
.slot { background:#fff; border:.5vmin dashed #b8c2cf; }
.slot.full { border-style:solid; border-color:var(--navy); }
.slots.ok .slot { border-color:var(--green); background:#e9fbf2; }
.lt { background:#fff4d6; border:.5vmin solid #e8c35c; box-shadow:0 .6vmin 0 #e8c35c; }
.lt.used { visibility:hidden; }
.match { display:flex; flex-direction:column; align-items:center; gap:5vmin; }
.mrow { display:flex; gap:3vmin; justify-content:center; }
.mp, .mw { background:#fff; border:.7vmin solid var(--line); border-radius:3vmin; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:var(--shadow); }
.mp { width:min(34vmin, 21vw); height:min(34vmin, 21vw); padding:.8vmin; }
.mw { min-width:min(34vmin, 21vw); height:11vmin; font-size:4.2vmin; padding:0 2vmin; }
.mp .pic { width:100%; height:100%; }
.mp.sel, .mw.sel { border-color:var(--blue); box-shadow:0 0 0 .8vmin rgba(58,134,255,.25); }
.mp.ok, .mw.ok { border-color:var(--pc, var(--green)); background:#f4fbf7; box-shadow:0 0 0 .8vmin var(--pc, var(--green)); }
.dance-stage { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vmin; background:radial-gradient(circle at 50% 60%, #ffe38a, #ff9ecf 60%, #a58bff); transition:background .4s; }
.dance-stage.freeze { background:radial-gradient(circle at 50% 60%, #e8fbff, #9fe3ff 60%, #5aa9ff); }
.dance-word { font-size:15vmin; font-weight:800; color:#fff; text-shadow:0 1vmin 0 rgba(0,0,0,.18); letter-spacing:.05em; }
.dance-stage.freeze .dance-word { color:#fff; text-shadow:0 0 3vmin #5aa9ff, 0 1vmin 0 rgba(0,0,0,.15); }
.cmd-card { display:flex; align-items:center; gap:3vmin; background:#fff; border-radius:4vmin; padding:2vmin 5vmin; font-size:7vmin; font-weight:800; box-shadow:0 1vmin 0 rgba(0,0,0,.15); animation:pop .4s; }
.cmd-card img { width:12vmin; height:12vmin; }
.note { position:absolute; font-size:6vmin; animation:float 2.4s ease-out forwards; }
@keyframes float { to { transform:translate(var(--dx), -40vh) rotate(30deg); opacity:0; } }
.flake { position:absolute; top:-5vmin; color:#fff; font-size:4vmin; animation:fall linear forwards; }

.help { font-family:'Segoe UI',Arial,sans-serif; font-size:1.8vmin; color:var(--muted); text-align:center; max-width:90vw; }

/* ---------- 4:3 ve dar ekranlar (ör. 1024×768 akıllı tahtalar) */
@media (max-aspect-ratio: 3/2) {
  .gamegrid { grid-template-columns:repeat(4, 1fr); gap:1.4vmin; }
  .gcard { height:17.5vmin; }
  .gicon { width:8.4vmin; height:8.4vmin; margin-top:.8vmin; }
  .gcard b { font-size:2.6vmin; }
  .hero-card h2 { font-size:5.4vmin; }
  .pip { width:15vmin; height:15vmin; }
  .pip-bubble { left:14vmin; bottom:10vmin; }
  body.on-hub .pip { width:20vmin; height:20vmin; right:3vw; }
  body.on-hub .pip-bubble { right:18vmin; bottom:11vmin; }
}

/* =====================================================================
   3. sınıf ekleri
   ===================================================================== */
/* ana sayfa – 3. sınıf */
.hero { align-items:stretch; gap:2.4vmin; padding-top:3vmin; }
.home .panel { margin-bottom:1.6vmin; padding:1.8vmin 1.8vmin 1vmin; }
.hero-card { padding:1.8vmin 3.4vmin 2vmin; }
.hero-card h2 { font-size:5.8vmin; }
.hero-card p { margin-bottom:1.3vmin; }
.bunting { position:absolute; z-index:1; left:0; right:0; top:0; height:6vmin; display:flex; justify-content:space-around; pointer-events:none;
  background:linear-gradient(transparent 0 .35vmin, rgba(36,59,107,.35) .35vmin .6vmin, transparent .6vmin); }
.bunting i { width:3.6vmin; height:4.6vmin; background:var(--f); clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:50% 0;
  animation:flag 2.4s ease-in-out infinite alternate; animation-delay:var(--d); filter:drop-shadow(0 .3vmin .2vmin rgba(0,0,0,.15)); }
@keyframes flag { from { transform:rotate(-6deg); } to { transform:rotate(6deg); } }
.today { position:relative; width:19vmin; border:0; padding:0 0 1.4vmin; border-radius:3vmin; background:#fff; overflow:visible;
  display:flex; flex-direction:column; align-items:center; box-shadow:0 1.4vmin 4vmin rgba(36,59,107,.18), 0 .8vmin 0 var(--c);
  animation:heroIn .6s ease-out .15s backwards; transition:transform .15s; }
.today:hover { transform:translateY(-.6vmin) rotate(-1.5deg); }
.today.wig { animation:wobble .5s; }
.today b { width:100%; background:var(--c); color:#fff; font-size:1.9vmin; letter-spacing:.2em; padding:1.3vmin 0 .7vmin; border-radius:3vmin 3vmin 0 0; }
.today .rings { position:absolute; top:-1.2vmin; left:0; right:0; display:flex; justify-content:space-around; padding:0 3.5vmin; }
.today .rings i { width:1.6vmin; height:3vmin; border-radius:1vmin; background:#dfe6f2; border:.4vmin solid #9aa3b8; }
.today .pic { width:10vmin; height:10vmin; margin:1vmin 0 .4vmin; }
.today strong { font-size:3vmin; color:var(--c); line-height:1; }
.gamegrid.g3 { grid-template-columns:repeat(6, 1fr); gap:1.6vmin; }
.g3 .gcard { height:16vmin; padding:1vmin .8vmin 1.2vmin; }
.g3 .gicon { width:8.4vmin; height:8.4vmin; margin-top:1.6vmin; }
.g3 .gcard b { font-size:2.7vmin; }
.g3 .gcard small { font-size:1.6vmin; }
.g3 .gtag { font-size:1.35vmin; max-width:calc(100% - 5vmin); overflow:hidden; text-overflow:ellipsis; }
.g3 .gdot { position:absolute; z-index:1; top:1.1vmin; right:1.1vmin; width:1.8vmin; height:1.8vmin; border-radius:50%; background:var(--g); border:.35vmin solid #fff; box-shadow:0 .2vmin .5vmin rgba(0,0,0,.2); }
.legend { display:flex; justify-content:center; flex-wrap:wrap; gap:.6vmin 2.6vmin; margin-top:1vmin; font-size:1.75vmin; font-weight:700; color:#44506a; }
.legend span { display:inline-flex; align-items:center; gap:.7vmin; }
.legend i { width:1.6vmin; height:1.6vmin; border-radius:50%; background:var(--c); border:.3vmin solid #fff; box-shadow:0 .2vmin .5vmin rgba(0,0,0,.2); }
.seg.mini { position:absolute; top:1.4vmin; right:2vmin; z-index:4; }
.seg.mini button { font-size:2.2vmin; padding:.6vmin 1.8vmin; }

/* ay takvim yaprağı */
.calpage { width:100%; height:100%; background:#fff; border:.6vmin solid var(--c); border-radius:2.4vmin; overflow:hidden; display:flex; flex-direction:column; }
.calpage b { background:var(--c); color:#fff; text-align:center; font-size:min(4.2vmin, 2.6vw); padding:.6vmin .4vmin; white-space:nowrap; }
.calpage .pic { flex:1; min-height:0; padding:8%; }
.mc .b .calpage b { font-size:min(3vmin, 1.8vw); }
.say-bubble .cal { width:30vmin; height:30vmin; border:0; overflow:visible; position:relative; background:none; }
.say-bubble .cal .calpage b { display:block; font-size:3.6vmin; }
.cal-cake { position:absolute; right:-3vmin; bottom:-2vmin; width:13vmin; height:13vmin; filter:drop-shadow(0 .5vmin .6vmin rgba(0,0,0,.2)); }
.count-grid { display:flex !important; flex-wrap:wrap; align-content:center; gap:1vmin; }
.count-grid .pic { width:30%; height:30%; }

/* selamlaşma kuklaları */
.greet { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4vmin; background:linear-gradient(#fff7e6, #ffe9f3); }
.gscene { position:relative; width:min(70vmin, 60vw); height:36vmin; border-radius:4vmin; background:linear-gradient(var(--s1, #8fd8ff), var(--s2, #e3f7ff)); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; gap:5vmin; transition:background .6s; overflow:hidden; }
.gscene::after { content:""; position:absolute; left:0; right:0; bottom:0; height:22%; background:rgba(60,160,80,.55); }
.gscene.night::after { background:rgba(20,40,60,.6); }
.gclock { position:relative; z-index:1; width:24vmin; height:24vmin; border-radius:50%; background:#fff; border:1vmin solid var(--navy); display:flex; align-items:center; justify-content:center; font-size:7.5vmin; font-weight:800; color:var(--navy); box-shadow:0 .8vmin 0 rgba(0,0,0,.15); }
.gact { position:relative; z-index:1; width:20vmin; height:20vmin; }
.glbl { position:absolute; z-index:2; top:2vmin; left:50%; transform:translateX(-50%); font-size:5vmin; font-weight:800; color:#fff; text-shadow:0 .5vmin 1vmin rgba(0,0,0,.35); }
.puppets { display:flex; gap:2.4vmin; }
.puppet { width:min(25vmin, 20vw); border:0; background:#fff; border-radius:3vmin; padding:1.4vmin; box-shadow:0 .8vmin 0 #e5c7d8; display:flex; flex-direction:column; align-items:center; gap:.4vmin; }
.puppet .pic { width:14vmin; height:14vmin; }
.puppet b { font-size:3vmin; }
.puppet span { font-size:2.2vmin; color:var(--muted); }
.puppet.ok { background:#e9fbf2; box-shadow:0 .8vmin 0 var(--green); }
.puppet.bad { background:#ffecec; }
.puppet.hop { animation:hop .6s ease-out; }

/* bil bakalım */
.riddle { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.6vmin; background:linear-gradient(#e6fbf8, #eef4ff); }
.clue { display:flex; align-items:center; gap:2vmin; background:#fff; border-radius:4vmin; padding:2vmin 3vmin; font-size:4.6vmin; font-weight:700; box-shadow:var(--shadow); max-width:90vw; }
.clue > img { width:8vmin; height:8vmin; }
.clue .blur { filter:blur(1.4vmin); }
.ropts { display:grid; grid-template-columns:repeat(4, min(30vmin, 21vw)); gap:2.4vmin; margin-bottom:3vmin; }
.ropt { position:relative; height:min(30vmin, 21vw); border:.7vmin solid var(--line); background:#fff; border-radius:3vmin; padding:1.2vmin; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ropt .pic { width:100%; flex:1; min-height:0; }
.ropt span { font-size:2.8vmin; font-weight:700; }
.ropt .nm { position:absolute; bottom:-5vmin; background:var(--yellow); padding:.3vmin 1.6vmin; border-radius:2vmin; font-size:3vmin; white-space:nowrap; }
.ropt.ok { border-color:var(--green); background:#e9fbf2; animation:pop .4s; }
.ropt.bad { border-color:var(--red); opacity:.6; }

/* zar at */
.rollw { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.6vmin; background:linear-gradient(#f3ecff, #fff4e0); }
.dice { display:flex; align-items:center; gap:4vmin; }
.die { width:34vmin; height:38vmin; background:#fff; border-radius:4vmin; border:1vmin solid var(--purple); box-shadow:0 1.2vmin 0 #6b3fd1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2vmin; gap:1vmin; }
.die:last-child { border-color:var(--green); box-shadow:0 1.2vmin 0 #1b8a57; }
.die .pic { width:100%; flex:1; min-height:0; }
.die b { font-size:3.6vmin; min-height:4.4vmin; }
.die.spin { animation:diceroll .22s linear infinite; }
@keyframes diceroll { 0% { transform:rotate(-8deg) scale(.96); } 50% { transform:rotate(8deg) scale(1.03); } 100% { transform:rotate(-8deg) scale(.96); } }
.plus { font-size:9vmin; font-weight:800; color:var(--navy); }
.rsent { font-size:5vmin; font-weight:800; color:var(--navy); min-height:6.5vmin; background:#fff; padding:0 3vmin; border-radius:3vmin; }
.rsent:empty { background:none; }

/* kurallar */
.rulew { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.6vmin; background:linear-gradient(#fff3f0, #eefaf3); }
.rcard { position:relative; width:min(84vmin, 80vw); background:#fff; border-radius:4vmin; border:1vmin solid var(--line); box-shadow:var(--shadow); padding:2.4vmin; display:flex; flex-direction:column; align-items:center; gap:2vmin; }
.rcard .pic { width:40vmin; height:36vmin; }
.rcard .rs { font-size:5vmin; font-weight:700; text-align:center; }
.rcard .gap { color:#b8c2cf; }
.rcard .m { color:var(--green); } .rcard .mn { color:var(--red); }
.rcard.good { border-color:var(--green); } .rcard.nogo { border-color:var(--red); }
.rcard .stamp { position:absolute; top:2vmin; right:2vmin; width:12vmin; height:12vmin; }
.rcard .stamp:not(:empty) { animation:pop .4s; }
.rbtn { min-width:30vmin; justify-content:center; font-size:5vmin; }

/* kaç tane / doğum günü */
.countw, .bdayw { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2vmin; background:linear-gradient(#e9f6ff, #f5fff0); }
.bdayw { background:linear-gradient(#fff0f7, #fff8e6); }
.cq, .bq { display:flex; align-items:center; gap:2vmin; background:#fff; border-radius:4vmin; padding:1.4vmin 3vmin; font-size:5vmin; font-weight:700; box-shadow:var(--shadow); }
.cscene { width:min(90vmin, 70vw); height:40vmin; display:flex; align-items:center; justify-content:center; }
.scatter { width:100%; height:100%; background:#fff; border-radius:4vmin; box-shadow:var(--shadow); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2vmin; padding:2vmin; }
.scatter .pic { width:15vmin; height:15vmin; transform:rotate(var(--r)); }
.place { position:relative; width:52vmin; height:40vmin; background:#fff; border-radius:4vmin; box-shadow:var(--shadow); padding:1.6vmin; }
.place .over { position:absolute; right:-4vmin; bottom:-2vmin; width:20vmin; height:20vmin; background:#fff; border-radius:50%; border:.6vmin solid #fff; box-shadow:0 .5vmin 1.2vmin rgba(0,0,0,.2); overflow:hidden; }
.place .over img.person { object-fit:cover; object-position:50% 0; }
.place .plbl { position:absolute; left:2vmin; top:-2.6vmin; background:var(--navy); color:#fff; font-size:3vmin; font-weight:700; padding:.4vmin 2vmin; border-radius:2vmin; }
.replies.wide { flex-direction:row; flex-wrap:wrap; justify-content:center; width:min(96vw, 180vmin); }
.replies.wide .reply { font-size:3.4vmin; }
.bstage { height:44vmin; display:flex; align-items:center; justify-content:center; }
.cakebox { width:46vmin; height:44vmin; }
svg.cake { width:100%; height:100%; overflow:visible; }
.cake .flame { transform-box:fill-box; transform-origin:50% 100%; animation:flicker .35s ease-in-out infinite alternate; }
.cake .puff { opacity:0; }
.cake .cndl.out .flame { animation:none; opacity:0; transition:opacity .15s; }
.cake .cndl.out .puff { animation:puff 1s ease-out forwards; }
@keyframes flicker { from { transform:scale(1, 1) rotate(-3deg); } to { transform:scale(.9, 1.12) rotate(3deg); } }
@keyframes puff { 0% { opacity:.8; transform:translateY(0); } 100% { opacity:0; transform:translateY(-14px); } }
.calbig { position:relative; width:40vmin; height:40vmin; }
.calbig .cal-cake { width:16vmin; height:16vmin; right:-6vmin; }
.mini .cake { width:100%; height:100%; }

/* aylar treni: 12 vagon */
.rail.months .train { left:1vmin; gap:.5vmin; top:auto; bottom:calc(21% + 1.2vmin); }
.rail.months .loco { margin-bottom:-2.6vmin; }
.rail.months .wagons { display:flex; gap:.5vmin; align-items:flex-end; }
.rail.months .wagon { width:min(9.6vmin, 6.4vw); height:17vmin; font-size:2.2vmin; border-radius:1.4vmin 1.4vmin .6vmin .6vmin; }
.rail.months .wagon::before, .rail.months .wagon::after { width:3.2vmin; height:3.2vmin; border-width:.7vmin; bottom:-2.4vmin; }
.rail.months .wagon::before { left:.6vmin; } .rail.months .wagon::after { right:.6vmin; }
.rail.months .wagon span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:min(2.6vmin, 1.8vw); letter-spacing:.02em; }
.rail.months .wagon.full { cursor:pointer; }
.rail.months .loco { width:min(19vmin, 12vw); height:min(16vmin, 10vw); }
.rail.months .car { font-size:3vmin; padding:1.4vmin 2.4vmin; }
.sp-day { position:absolute; z-index:3; left:50%; top:30%; transform:translateX(-50%); background:#fff; border-radius:3vmin; padding:.8vmin 2.6vmin; font-size:2.8vmin; font-weight:700; box-shadow:var(--shadow); opacity:0; transition:opacity .3s; white-space:nowrap; }
.sp-day.on { opacity:1; }

@media (max-aspect-ratio: 3/2) {
  .gamegrid.g3 { grid-template-columns:repeat(6, 1fr); gap:1.2vmin; }
  .g3 .gcard { height:13.5vmin; } .g3 .gicon { width:6.6vmin; height:6.6vmin; margin-top:.6vmin; }
  .g3 .gcard b { font-size:2.2vmin; } .g3 .gcard small { display:none; }
  .today { width:16vmin; } .today .pic { width:7vmin; height:7vmin; } .today strong { font-size:2.4vmin; }
  .ropts { grid-template-columns:repeat(2, 26vmin); }
  .ropt { height:26vmin; }
}
/* maskot sol altta cevap düğmelerini kapatmasın */
.countw, .bdayw, .greet, .riddle, .rulew { padding:0 3vmin 0 20vmin; }
.legend em { font-style:normal; font-weight:400; font-size:1.35vmin; opacity:.6; font-family:'Segoe UI',Arial,sans-serif; align-self:center; }