/* =====================================================================
   Pofuduk Kutu — r3.css (R3)
   Dünya menüleri, mini oyunlar, odalar, maskot, etkileşimli açılışlar,
   görev/rozet pencereleri. R1/R2 görsel dilini (kalın kontur, pastel,
   oyuncak butonlar) sürdürür. Animasyonlar transform/opacity ağırlıklı.
   ===================================================================== */

/* ---------- Ekranlar ---------- */
body:not([data-screen="box"]) #app { visibility: hidden; }
body:not([data-screen="box"]) #app * { animation-play-state: paused !important; }
.screen {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: max(12px, var(--safe-t)) max(18px, var(--safe-r)) max(14px, var(--safe-b)) max(18px, var(--safe-l));
  overflow: hidden;
}
.s-top { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.s-top h2 { flex: 1; min-width: 0; font-size: var(--fs-l); font-weight: 900; color: #fff; text-shadow: var(--outline); }
.logo.small { transform: rotate(-4deg); flex: none; }
.logo.small .logo-a { font-size: calc(var(--fs-l) * .85); }
.logo.small .logo-b { font-size: var(--fs-l); }
.s-top .icon-btn.back svg, .box-back svg { width: 60%; height: 60%; }
.box-back { flex: none; }
body[data-screen="box"] .hud-top .logo { display: none; }

/* ---------- Yıldız barı ---------- */
.star-bar {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px 18px 6px 8px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: #fff;
  box-shadow: 0 4px 0 var(--ink);
  font-size: var(--fs-m);
  font-weight: 900;
  white-space: nowrap;
}
.star-bar .ic { width: 38px; height: 38px; }
.star-bar.ready { background: linear-gradient(90deg, #FFF3B0, #FFD23F); animation: meterGlow .9s ease-in-out infinite alternate; }
.star-bar.bump .ic-star { animation: starBump .6s var(--ease-bounce); }
@keyframes starBump { 40% { transform: scale(1.5) rotate(20deg); } }
.ic { display: inline-block; width: 1.4em; height: 1.4em; flex: none; vertical-align: middle; }

/* ---------- Ana menü ---------- */
.home { background: linear-gradient(165deg, #BFE8FF 0%, #D9D2FF 50%, #FFD3EA 100%); }
.home::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .45) 3px, transparent 3.6px); background-size: 46px 46px; pointer-events: none; }
.h-actions { position: relative; display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; flex: none; }
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 6px 18px 6px 10px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: #fff;
  box-shadow: 0 5px 0 var(--ink);
  font-size: var(--fs-s);
  font-weight: 900;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.pill-btn .ic, .pill-btn svg { width: 40px; height: 40px; }
.pill-btn small { padding: 2px 9px; border-radius: var(--rad-pill); background: var(--ink); color: #fff; font-size: 13px; }
.pill-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.pill-btn.ready { background: linear-gradient(90deg, #FFF3B0, #FFD9EC); animation: readyPulse 1.6s ease-in-out infinite; }
.pill-btn:disabled { opacity: .6; }
.pill-btn.shards.ready { background: linear-gradient(90deg, #E3D6FF, #FFD9EC); }

.world-cards {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--sp-3);
  padding: 4px 4px 10px;
}
.world-card {
  --wa: #FFE6F1; --wb: #FF9CC6;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  padding: 12px;
  border: 5px solid var(--ink);
  border-radius: var(--rad-l);
  background: radial-gradient(circle at 50% 35%, #fff 0%, var(--wa) 45%, var(--wb) 120%);
  box-shadow: 0 8px 0 var(--ink);
  overflow: hidden;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.world-card:active { transform: translateY(5px) scale(.98); box-shadow: 0 3px 0 var(--ink); }
.world-card[data-world="animals"] { --wa: #FFEEDD; --wb: #FFB266; }
.world-card[data-world="sky"] { --wa: #D6DEFF; --wb: #6F7ACC; }
.world-card[data-world="nature"] { --wa: #DDF7E4; --wb: #6DD17A; }
.world-card[data-world="holiday"] { --wa: #FFE4E4; --wb: #EF6A74; }
.world-card[data-world="legends"] { --wa: #FFF3C4; --wb: #F2B84A; }
.world-card.done { box-shadow: 0 0 0 5px #FFD23F, 0 10px 0 5px var(--ink); }
.wc-icon .world-icon { width: clamp(60px, 13vmin, 130px); height: clamp(60px, 13vmin, 130px); filter: drop-shadow(0 4px 0 rgba(91, 58, 110, .25)); }
.world-card:hover .wc-icon, .world-card:focus-visible .wc-icon { animation: aHop .55s var(--ease-out); }
.wc-name { font-size: var(--fs-m); font-weight: 900; color: #fff; text-shadow: var(--outline); text-align: center; line-height: 1.1; }
.wc-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wc-stats > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border: 3px solid var(--ink); border-radius: var(--rad-pill); background: #fff; font-size: 15px; font-weight: 900; }
.wc-stats .ic { width: 26px; height: 26px; }
.wc-weekly { position: absolute; top: 10px; left: -34px; padding: 3px 40px; background: var(--bubblegum); color: #fff; font-size: 12px; font-weight: 900; transform: rotate(-24deg); box-shadow: 0 2px 0 var(--ink); }
.world-card.weekly { animation: weeklyGlow 1.8s ease-in-out infinite alternate; }
@keyframes weeklyGlow { to { box-shadow: 0 8px 0 var(--ink), 0 0 26px 6px rgba(255, 95, 162, .55); } }
.wc-crown { position: absolute; top: 8px; right: 10px; }
.wc-crown .ic { width: 38px; height: 38px; animation: aWiggle 1.6s ease-in-out infinite; }

/* ---------- Dünya ekranı ---------- */
.world { background: transparent; }
.world::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .35), transparent 70%); pointer-events: none; }
.world.done::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 230, 120, .22) 0 8deg, transparent 8deg 20deg); }
body[data-screen="world"] #app { visibility: visible; }
body[data-screen="world"] #app > :not(.bg) { visibility: hidden; }
.w-title { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.w-title .world-icon { width: 56px; height: 56px; }
.w-title h2 { flex: 0 1 auto; }
.w-prog { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 6px; border: 4px solid var(--ink); border-radius: var(--rad-pill); background: #fff; font-weight: 900; }
.w-prog .ic { width: 30px; height: 30px; }
.w-main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-4); align-items: center; }
.w-open {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: min(100%, 44vmin);
  padding: var(--sp-3);
  border: 6px solid var(--ink);
  border-radius: var(--rad-l);
  background: linear-gradient(180deg, #FFFFFF, #FFE6F4);
  box-shadow: 0 9px 0 var(--ink);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.w-open:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--ink); }
.w-open-art { width: 88%; aspect-ratio: 240 / 250; }
.w-open-art .box-svg { width: 100%; height: 100%; overflow: visible; animation: breathe 2.4s ease-in-out infinite; }
.w-open b { font-size: var(--fs-xl); font-weight: 900; color: #fff; text-shadow: var(--outline); }
.w-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-content: center; }
.w-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: clamp(110px, 20vmin, 180px);
  padding: 10px;
  border: 5px solid var(--ink);
  border-radius: var(--rad-l);
  background: #fff;
  box-shadow: 0 7px 0 var(--ink);
  font-size: var(--fs-s);
  font-weight: 900;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.w-btn .ic { width: clamp(52px, 9vmin, 84px); height: clamp(52px, 9vmin, 84px); }
.w-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }

/* ---------- Mini oyunlar ---------- */
.game { background: linear-gradient(170deg, #E9E2FF 0%, #FFE6F4 100%); }
.game-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); }
.game-body.picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; }
.game-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 0; padding: 12px; border: 5px solid var(--ink); border-radius: var(--rad-l);
  background: #fff; box-shadow: 0 7px 0 var(--ink); font-size: var(--fs-m); font-weight: 900;
}
.game-card.featured { grid-row: span 2; background: linear-gradient(180deg, #FFF6C8, #FFD9EC); }
.game-card .g-ic .ic { width: clamp(56px, 11vmin, 110px); height: clamp(56px, 11vmin, 110px); }
.game-card.featured .g-ic .ic { width: clamp(90px, 20vmin, 190px); height: clamp(90px, 20vmin, 190px); }
.game-card small { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
.game-card:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }

.g-chooser { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.g-choice { width: clamp(110px, 20vmin, 180px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 5px solid var(--ink); border-radius: var(--rad-l); background: #fff; box-shadow: 0 7px 0 var(--ink); }
.g-choice.lv1 { background: #DDF7E4; } .g-choice.lv2 { background: #FFF3C4; } .g-choice.lv3 { background: #FFE0EE; }
.g-choice-n { font-size: var(--fs-xl); font-weight: 900; }
.g-choice-stars { color: #F2A900; font-size: 22px; letter-spacing: 2px; }

.mem-grid { display: grid; gap: var(--sp-2); width: min(100%, 900px); }
.mem-grid.n6 { grid-template-columns: repeat(3, 1fr); max-width: min(560px, calc((100vh - 150px) * 1.45)); }
.mem-grid.n8 { grid-template-columns: repeat(4, 1fr); max-width: min(700px, calc((100vh - 150px) * 1.9)); }
.mem-grid.n12 { grid-template-columns: repeat(4, 1fr); max-width: min(640px, calc((100vh - 150px) * 1.3)); }
.mem-card { position: relative; aspect-ratio: 1; perspective: 600px; justify-self: center; width: 100%; }
.mem-back, .mem-front { position: absolute; inset: 0; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: var(--rad-m); backface-visibility: hidden; transition: transform .35s var(--ease-out); box-shadow: 0 5px 0 var(--ink); }
.mem-back { background: repeating-linear-gradient(45deg, #B79CFF 0 12px, #C9B6FF 12px 24px); }
.mem-back svg { width: 46%; height: 46%; }
.mem-front { background: #fff; transform: rotateY(180deg); padding: 6%; }
.mem-front .ch-svg, .mem-front .box-svg { width: 100%; height: 100%; overflow: visible; }
.mem-card.up .mem-back { transform: rotateY(180deg); }
.mem-card.up .mem-front { transform: rotateY(360deg); }
.mem-card.matched .mem-front { background: #DDF7E4; animation: aJelly .5s ease-in-out; }

.pz-wrap { display: flex; gap: var(--sp-4); align-items: center; justify-content: center; width: 100%; height: 100%; }
.pz-board { position: relative; display: grid; grid-template-columns: repeat(var(--c), 1fr); grid-template-rows: repeat(var(--r), 1fr); width: min(52vh, 46vw); aspect-ratio: var(--c) / var(--r); border: 5px solid var(--ink); border-radius: var(--rad-m); background: #fff; box-shadow: 0 7px 0 var(--ink); overflow: hidden; }
.pz-ghost { position: absolute; inset: 0; opacity: .12; display: grid; place-items: center; }
.pz-ghost svg, .pz-img svg { width: 100%; height: 100%; }
.pz-slot { position: relative; border: 2px dashed rgba(91, 58, 110, .25); }
.pz-board.done { animation: aJelly .6s ease-in-out; box-shadow: 0 0 0 6px #FFD23F, 0 10px 0 6px var(--ink); }
.pz-board.done .pz-slot { border-color: transparent; }
.pz-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; max-width: 42vw; }
.pz-piece { position: relative; width: calc(min(52vh, 46vw) / var(--c)); aspect-ratio: 1 / 1; overflow: hidden; border: 3px solid var(--ink); border-radius: 10px; background: #fff; touch-action: none; cursor: grab; box-shadow: 0 4px 0 rgba(91, 58, 110, .5); }
.pz-board .pz-piece { position: absolute; inset: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; }
.pz-img { position: absolute; }
.pz-board[style*="--r:2"] .pz-piece, .pz-board[style*="--r:2"] ~ .pz-tray .pz-piece { aspect-ratio: auto; }
.pz-tray .pz-piece { height: calc(min(52vh, 46vw) / var(--c) * var(--c) / var(--c)); }

.dd-wrap { display: flex; flex-direction: column; gap: var(--sp-5); width: 100%; align-items: center; }
.dd-row { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.dd-item, .dd-target { width: clamp(90px, 17vmin, 170px); aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--rad-m); }
.dd-item { border: 4px solid var(--ink); background: #fff; box-shadow: 0 5px 0 var(--ink); touch-action: none; cursor: grab; padding: 6px; }
.dd-item.small { width: clamp(76px, 13vmin, 130px); }
.dd-item svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dd-target { border: 4px dashed rgba(91, 58, 110, .45); background: rgba(255, 255, 255, .6); padding: 8px; }
.dd-target.shadow svg { width: 100%; height: 100%; filter: brightness(0); opacity: .3; }
.dd-target.shadow.filled svg { filter: none; opacity: 1; animation: aJelly .5s; }
.dd-target.zone { width: clamp(120px, 22vmin, 210px); border: 6px solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0%, var(--zc) 70%); box-shadow: 0 6px 0 var(--ink); }
.dd-target.zone span { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 70%; }
.dd-target.zone i { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); animation: aHop .4s; }
.dragging { z-index: 20; position: relative; cursor: grabbing; }

.pop-top { display: flex; align-items: center; gap: var(--sp-3); width: 100%; justify-content: center; flex: none; }
.pop-target { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; border: 4px solid var(--ink); border-radius: var(--rad-pill); background: #fff; font-weight: 900; font-size: var(--fs-s); }
.pop-target svg { width: 44px; height: 44px; }
.pop-count { padding: 6px 16px; border: 4px solid var(--ink); border-radius: var(--rad-pill); background: var(--sun); font-size: var(--fs-m); font-weight: 900; }
.pop-time { width: min(90%, 700px); height: 16px; border: 3px solid var(--ink); border-radius: var(--rad-pill); background: #fff; overflow: hidden; flex: none; }
.pop-time i { display: block; height: 100%; background: linear-gradient(90deg, #6DD17A, #FFC93C); transform-origin: left; animation: timeBar linear forwards; }
@keyframes timeBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.pop-field { position: relative; flex: 1; width: 100%; overflow: hidden; border-radius: var(--rad-l); background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .7)); }
.pop-obj { position: absolute; bottom: -90px; width: clamp(64px, 11vmin, 100px); aspect-ratio: 1; animation: floatUp linear forwards; touch-action: manipulation; }
.pop-obj svg { width: 100%; height: 100%; pointer-events: none; }
@keyframes floatUp { to { transform: translateY(calc(-100vh + 60px)); } }
.pop-obj.popped { animation-play-state: paused; opacity: 0; transform-origin: center; transition: opacity .2s, scale .2s; scale: 1.5; }
.pop-obj.nope svg { animation: aWiggle .4s; }
.pop-field.over .pop-obj { animation-play-state: paused; opacity: .5; }

.sk-top { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sk-dot { padding: 6px 14px; border: 3px solid var(--ink); border-radius: var(--rad-pill); background: #fff; font-weight: 900; font-size: 15px; opacity: .6; }
.sk-dot.on { background: #DDF7E4; opacity: 1; }
.sk-dot.cur { background: var(--sun); opacity: 1; transform: scale(1.1); }
.sk-stage { flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
.sk-area { width: min(52vh, 60vw); }
.sk-area .box { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-hint { font-size: var(--fs-xl); font-weight: 900; color: #fff; text-shadow: var(--outline); flex: none; }

/* ---------- Oda ---------- */
.roomscr { background: linear-gradient(180deg, #E9E2FF, #FFE6F4); }
.room-host { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.room {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: calc((100vh - 250px) * 1.7);
  border: 6px solid var(--ink);
  border-radius: var(--rad-l);
  box-shadow: 0 8px 0 var(--ink);
  overflow: hidden;
  background: #fff;
  touch-action: none;
}
.room-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-layer, .room-slots { position: absolute; inset: 0; pointer-events: none; }
.room-layer > * { pointer-events: auto; }
.room-char, .room-dec, .room-stk { position: absolute; transform: translate(-50%, -100%); touch-action: none; cursor: grab; }
.room-char { width: clamp(64px, 12%, 140px); aspect-ratio: 1; }
.room-char .ch-svg { width: 100%; height: 100%; overflow: visible; }
.room-char .ch-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 2.6s ease-in-out infinite; }
.room-char.boing { animation: roomBoing .6s var(--ease-bounce); }
@keyframes roomBoing { 30% { transform: translate(-50%, -125%) rotate(-8deg); } 60% { transform: translate(-50%, -100%) scale(1.1, .9); } }
.room-dec { width: clamp(56px, 10%, 120px); aspect-ratio: 1; }
.room-dec.k-ceiling { transform: translate(-50%, 0); }
.room-dec.k-floor { transform: translate(-50%, -100%); width: clamp(64px, 13%, 150px); }
.room-dec.k-wall { transform: translate(-50%, -50%); }
.room-dec.k-table { transform: translate(-50%, -100%); width: clamp(44px, 8%, 90px); }
.room-dec.boing { animation: aJelly .5s; }
.dec-svg, .stk-svg { width: 100%; height: 100%; display: block; }
.room-stk { width: clamp(36px, 6%, 64px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-6deg); }
.slot-mark { position: absolute; width: 44px; height: 14px; margin-left: -22px; margin-top: -7px; border-radius: 50%; border: 3px dashed rgba(91, 58, 110, .5); opacity: 0; transition: opacity .2s; }
.slot-mark.d { border-color: rgba(242, 155, 0, .7); }
.room.show-c .slot-mark.c, .room.drop-char .slot-mark.c { opacity: .55; }
.room.show-d .slot-mark.d, .room.drop-decor .slot-mark.d { opacity: .7; }
.room.dropping .slot-mark { animation: slotPulse .8s ease-in-out infinite alternate; }
@keyframes slotPulse { to { transform: scale(1.3); } }
.lifted { opacity: .35; }
.drag-ghost { position: fixed; z-index: 70; transform: translate(-50%, -60%) scale(1.15); pointer-events: none; filter: drop-shadow(0 8px 6px rgba(91, 58, 110, .35)); }
.drag-ghost .ch-svg, .drag-ghost svg { width: 100%; height: 100%; overflow: visible; }
.room-tray { flex: none; width: 100%; max-width: 1100px; display: flex; gap: var(--sp-2); align-items: center; padding: 8px; border: 4px solid var(--ink); border-radius: var(--rad-l); background: #fff; box-shadow: 0 5px 0 var(--ink); }
.tray-tabs { display: flex; flex-direction: column; gap: 6px; flex: none; }
.tray-tab { min-height: 40px; padding: 4px 14px; border: 3px solid var(--ink); border-radius: var(--rad-pill); background: #F3EEFA; font-weight: 900; font-size: 15px; }
.tray-tab.on { background: var(--sun); }
.tray-items { flex: 1; display: flex; gap: 10px; overflow-x: auto; padding: 4px; min-height: 90px; align-items: center; scrollbar-width: none; }
.tray-item { flex: none; width: 84px; height: 84px; display: grid; place-items: center; border: 3px dashed rgba(91, 58, 110, .35); border-radius: var(--rad-m); background: #FFF8FC; touch-action: none; cursor: grab; }
.tray-item .ch-svg, .tray-item svg { width: 88%; height: 88%; overflow: visible; }
.tray-empty { font-weight: 800; color: var(--ink-soft); padding: 0 12px; }

/* ---------- Maskot Pofi ---------- */
.pofi-host { position: fixed; left: max(10px, var(--safe-l)); bottom: max(10px, var(--safe-b)); z-index: 36; pointer-events: none; }
.pofi { position: relative; width: clamp(84px, 13vmin, 130px); pointer-events: auto; }
body[data-screen="box"] .pofi, body[data-screen="game"] .pofi, body[data-screen="room"] .pofi { width: clamp(64px, 9vmin, 90px); }
body[data-screen="box"] .pofi:not(.talking) { opacity: 0; transform: translateY(110%); }
.pofi { transition: opacity .3s, transform .4s var(--ease-bounce); }
.pofi-art { animation: pofiIdle 3s ease-in-out infinite; transform-origin: 50% 100%; }
.pofi-svg { width: 100%; height: auto; overflow: visible; }
@keyframes pofiIdle { 50% { transform: scale(1.03, .97); } }
.pofi-bubble {
  position: absolute; left: 70%; bottom: 82%; min-width: 150px; max-width: 260px;
  padding: 8px 16px; border: 4px solid var(--ink); border-radius: 22px 22px 22px 6px;
  background: #fff; box-shadow: 0 4px 0 var(--ink); font-size: var(--fs-s); font-weight: 900; white-space: nowrap;
}
.pofi-bubble.pop { animation: bubbleIn .4s var(--ease-bounce); }
@keyframes bubbleIn { from { transform: scale(0); transform-origin: 0 100%; } }
.pofi .pofi-eyes-shut, .pofi .pofi-wink, .pofi .pofi-mouth-o, .pofi .pofi-zz,
.pop-pofi .pofi-eyes-shut, .pop-pofi .pofi-wink, .pop-pofi .pofi-mouth-o, .pop-pofi .pofi-zz { display: none; }
.m-hop .pofi-art, .pop-pofi.m-hop .pofi-svg { animation: aHop .6s var(--ease-out); }
.m-clap .pofi-arm.l { animation: clapL .25s ease-in-out 3 alternate; transform-box: fill-box; transform-origin: 100% 50%; }
.m-clap .pofi-arm.r { animation: clapR .25s ease-in-out 3 alternate; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes clapL { to { transform: translate(24px, -10px) rotate(-20deg); } }
@keyframes clapR { to { transform: translate(-24px, -10px) rotate(20deg); } }
.m-surprise .pofi-mouth, .pop-pofi.m-surprise .pofi-mouth { display: none; }
.m-surprise .pofi-mouth-o, .pop-pofi.m-surprise .pofi-mouth-o { display: inline; }
.m-surprise .pofi-art { animation: surprise .5s var(--ease-bounce); }
@keyframes surprise { 30% { transform: translateY(-12%) scale(1.08); } }
.m-cheer .pofi-art, .pop-pofi.m-cheer .pofi-svg { animation: cheer .9s var(--ease-out); }
@keyframes cheer { 20% { transform: translateY(-18%) rotate(-8deg); } 45% { transform: translateY(0); } 65% { transform: translateY(-10%) rotate(8deg); } }
.m-cheer .pofi-eyes-open, .pop-pofi.m-cheer .pofi-eyes-open { display: none; }
.m-cheer .pofi-eyes-shut, .pop-pofi.m-cheer .pofi-eyes-shut { display: inline; }
.m-sleep .pofi-eyes-open { display: none; }
.m-sleep .pofi-eyes-shut, .m-sleep .pofi-zz { display: inline; }
.m-sleep .pofi-art { animation: pofiIdle 4s ease-in-out infinite; }
.m-wink .pofi-eye-r { display: none; }
.m-wink .pofi-wink { display: inline; }
.pofi-ear { transform-box: fill-box; transform-origin: 50% 100%; }
.m-hop .pofi-ear.l, .m-cheer .pofi-ear.l { animation: earL .5s ease-in-out 2; }
.m-hop .pofi-ear.r, .m-cheer .pofi-ear.r { animation: earR .5s ease-in-out 2; }
@keyframes earL { 50% { transform: rotate(-14deg); } }
@keyframes earR { 50% { transform: rotate(14deg); } }

/* ---------- Etkileşimli açılış katmanı ---------- */
.mech-layer { position: absolute; inset: 0; z-index: 6; touch-action: none; cursor: grab; }
.mech-layer.done { pointer-events: none; opacity: 0; transition: opacity .2s; }
.mech-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mech-guide { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 14; opacity: .9; }
.mech-arrow { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 #5B3A6E); }
.mech-layer.dragging .mech-guide, .mech-layer.dragging .mech-arrow { opacity: .35; }
.mech-string { fill: none; stroke: #FF5FA2; stroke-width: 7; stroke-linecap: round; }
.mech-handle { fill: #FFE14D; stroke: #5B3A6E; stroke-width: 4; animation: handlePulse .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes handlePulse { to { transform: scale(1.18); } }
.mech-teeth { stroke: #5B3A6E; stroke-width: 6; stroke-dasharray: 3 3; }
.mech-open { stroke: #FFF4B8; stroke-width: 8; stroke-linecap: round; }
.mech-cutline { fill: none; stroke: #fff; stroke-width: 5; stroke-dasharray: 8 7; filter: drop-shadow(0 2px 0 #5B3A6E); }
.mech-cuts path { fill: none; stroke: #5B3A6E; stroke-width: 6; stroke-linecap: round; }
.mech-scissors { pointer-events: none; }
.mech-spot circle { fill: rgba(255, 244, 180, .75); stroke: #fff; stroke-width: 4; animation: spotPulse .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.mech-spot path { stroke: #5B3A6E; stroke-width: 3; stroke-linecap: round; }
.mech-spot.hit { display: none; }
@keyframes spotPulse { to { transform: scale(1.25); } }
.mech-cracks polyline { fill: none; stroke: #5B3A6E; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mech-ring { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 8; stroke-dasharray: 3 12; stroke-linecap: round; }
.mech-ringfill { fill: none; stroke: #FFE14D; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 120px 50%; transform-box: view-box; }
.box-shake.mech-jolt { animation: shake .35s ease-in-out; }
.mech-hand { position: absolute; width: 17%; aspect-ratio: 1; left: 50%; top: 40%; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 0 rgba(91, 58, 110, .4)); }
.mech-hand svg { width: 100%; height: 100%; }
.mech-layer.nudge .mech-hand { animation: handUp 1.6s ease-in-out 2; }
.mech-layer[data-hand="right"].nudge .mech-hand { top: 50%; left: 25%; animation-name: handRight; }
.mech-layer[data-hand="pull"].nudge .mech-hand { top: 26%; left: 68%; animation-name: handPull; }
.mech-layer[data-hand="tap"].nudge .mech-hand { top: 55%; left: 26%; animation-name: handTap; }
.mech-layer[data-hand="spin"].nudge .mech-hand { top: 30%; left: 80%; animation-name: handSpin; }
.mech-layer.dragging .mech-hand { opacity: 0 !important; animation: none; }
@keyframes handUp { 10% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateY(-110%); } 100% { opacity: 0; transform: translateY(-110%); } }
@keyframes handRight { 10% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateX(230%); } 100% { opacity: 0; transform: translateX(230%); } }
@keyframes handPull { 10% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translate(80%, -60%); } 100% { opacity: 0; } }
@keyframes handTap { 10%, 40%, 70% { opacity: 1; transform: scale(1); } 25%, 55%, 85% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; } }
@keyframes handSpin { 0% { opacity: 1; transform: none; } 30% { transform: translate(-150%, 150%); } 60% { transform: translate(-350%, 0); } 90% { opacity: 1; transform: translate(-150%, -150%); } 100% { opacity: 0; } }

/* ---------- Yapışan çıkartma efekti + damga ---------- */
.stick-fly { position: fixed; left: 50%; top: 50%; z-index: 38; pointer-events: none; animation: stickFly 1s cubic-bezier(.5, 0, .5, 1) forwards; }
.sf-card { width: 130px; height: 130px; margin: -65px 0 0 -65px; padding: 10px; border: 5px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 6px 0 var(--ink); }
.sf-card .ch-svg { width: 100%; height: 100%; }
@keyframes stickFly {
  0% { transform: scale(.4) rotate(-20deg); opacity: 0; }
  20% { transform: scale(1.1) rotate(4deg); opacity: 1; }
  35% { transform: scale(1) rotate(-3deg); }
  100% { transform: translate(var(--tx), var(--ty)) scale(.25) rotate(12deg); opacity: .9; }
}
.collection-btn.stamp { animation: stamp .45s var(--ease-bounce); }
@keyframes stamp { 30% { transform: scale(1.15, .9); } 60% { transform: scale(.95, 1.05); } }

/* ---------- Albüm: dünya kilidi + sticker ---------- */
.collection.world-lock .page-arrow, .collection.world-lock .page-dots { visibility: hidden; }
.album-stickers { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.a-stk { position: absolute; width: 52px; height: 52px; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: auto; animation: stickIn .4s var(--ease-bounce); }
@keyframes stickIn { from { transform: translate(-50%, -50%) scale(1.8) rotate(20deg); opacity: 0; } }
.stk-btn { width: 50px; height: 50px; flex: none; }
.stk-bar { position: absolute; left: 50%; bottom: 10px; z-index: 4; display: flex; gap: 6px; padding: 8px; transform: translateX(-50%); border: 4px solid var(--ink); border-radius: var(--rad-pill); background: #fff; box-shadow: 0 5px 0 var(--ink); max-width: 94%; overflow-x: auto; }
.stk-bar button { width: 52px; height: 52px; flex: none; }

/* ---------- Popup ve listeler ---------- */
.pop-card, .list-card { position: relative; align-items: center; text-align: center; max-height: 92vh; overflow-y: auto; }
.list-card { width: min(560px, 100%); }
.list-card.wide { width: min(760px, 100%); }
.pop-pofi { width: 120px; margin-top: -10px; }
.pop-card h2 { font-size: var(--fs-l); color: var(--bubblegum); text-shadow: 0 3px 0 var(--ink); }
.pop-card p { font-size: var(--fs-m); font-weight: 900; }
.pop-items, .h-rew { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rw { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 3px solid var(--ink); border-radius: var(--rad-pill); background: #FFF8E0; font-weight: 900; }
.rw .ic { width: 34px; height: 34px; }
.rw.sm { padding: 2px; border-radius: 12px; }
.rw.sm svg { width: 40px; height: 40px; }
.list-card h2 { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: var(--fs-l); }
.list-card h2 .ic { width: 44px; height: 44px; }
.list-card h3 { font-size: var(--fs-m); align-self: flex-start; }
.quest-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.quest { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 4px solid var(--ink); border-radius: var(--rad-m); background: #fff; text-align: left; }
.quest.weekly { background: #FFF0F6; }
.quest.done { background: #E6FAEA; }
.q-icon .ic, .q-icon .world-icon { width: 48px; height: 48px; }
.q-body { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-s); }
.q-bar { height: 14px; border: 3px solid var(--ink); border-radius: var(--rad-pill); overflow: hidden; background: #F3EEFA; }
.q-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6DD17A, #3FCFA8); transform-origin: left; transition: transform .5s var(--ease-out); }
.q-reward { display: flex; gap: 4px; align-items: center; }
.q-reward .ic { width: 34px; height: 34px; }
.rm { display: inline-flex; align-items: center; font-weight: 900; }
.rm .ic { width: 28px; height: 28px; }
.rm svg { width: 30px; height: 30px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; width: 100%; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 3px solid var(--ink); border-radius: var(--rad-m); background: #F3EEFA; font-size: 13px; opacity: .45; filter: grayscale(1); }
.badge.got { opacity: 1; filter: none; background: linear-gradient(180deg, #FFFBEA, #FFE8A3); }
.b-art .ic, .b-art .world-icon { width: 56px; height: 56px; }
.own-row { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.own { width: 50px; height: 50px; opacity: .25; filter: grayscale(1); }
.own.got { opacity: 1; filter: none; }
.big-count { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xl); font-weight: 900; }
.big-count .ic { width: 60px; height: 60px; }
.goal-track { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.goal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 4px solid var(--ink); border-radius: var(--rad-m); background: #fff; }
.goal .ic { width: 40px; height: 40px; }
.goal b { flex: 1; text-align: left; }
.goal.ready { background: linear-gradient(90deg, #FFF3B0, #FFD9EC); animation: readyPulse 1.4s ease-in-out infinite; }
.goal.got { opacity: .55; }
.goal-at { display: inline-flex; align-items: center; font-weight: 900; }
.goal-at .ic { width: 28px; height: 28px; }
.goal-ok { color: #2FA05A; font-size: 28px; font-weight: 900; }
.goal-left { font-size: 13px; color: var(--ink-soft); }
.toy-btn.claim { min-height: 48px; padding: 6px 18px; --btn-bg: var(--bubblegum); }
.goal-bar { width: 100%; height: 16px; border: 3px solid var(--ink); border-radius: var(--rad-pill); overflow: hidden; background: #F3EEFA; }
.goal-bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--sun) 0 12px, #FFD970 12px 24px); transform-origin: left; }

/* ---------- Bildirimler ---------- */
.toasts { position: fixed; top: max(12px, var(--safe-t)); left: 50%; z-index: 65; display: flex; flex-direction: column; gap: 8px; align-items: center; transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border: 4px solid var(--ink); border-radius: var(--rad-pill); background: #fff; box-shadow: 0 5px 0 var(--ink); font-weight: 900; font-size: var(--fs-s); animation: toastIn .45s var(--ease-bounce); transition: opacity .4s, transform .4s; }
.toast .ic, .toast svg { width: 36px; height: 36px; }
.toast.out { opacity: 0; transform: translateY(-20px); }
.toast.t-badge { background: linear-gradient(90deg, #FFF3B0, #FFE08A); }
@keyframes toastIn { from { transform: translateY(-30px) scale(.8); opacity: 0; } }

/* ---------- Duyarlı düzen ---------- */
@media (orientation: portrait) {
  .world-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--sp-3); }
  .w-open { width: min(72vw, 38vh); }
  .game-body.picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-card.featured { grid-column: span 2; grid-row: auto; }
  .pz-wrap { flex-direction: column; }
  .pz-board { width: min(70vw, 42vh); }
  .pz-piece { width: calc(min(70vw, 42vh) / var(--c)); }
  .pz-tray { max-width: 96vw; }
  .room { max-width: 100%; aspect-ratio: 4 / 5; flex: 0 1 auto; }
}
@media (max-width: 700px) {
  .s-top h2 { font-size: 22px; }
  .star-bar { min-height: 46px; padding: 4px 12px 4px 6px; font-size: 16px; }
  .star-bar .ic { width: 30px; height: 30px; }
  .pill-btn { min-height: 50px; padding: 4px 12px 4px 6px; font-size: 14px; }
  .pill-btn .ic, .pill-btn svg { width: 30px; height: 30px; }
  .logo.small { display: none; }
  .w-grid { gap: var(--sp-2); }
  .w-btn { min-height: 96px; font-size: 14px; }
  .wc-stats > span { font-size: 13px; }
  .tray-tabs { flex-direction: row; }
  .room-tray { flex-direction: column; align-items: stretch; }
}
@media (max-height: 520px) {
  .h-actions .pill-btn small { display: none; }
  .w-btn { min-height: 70px; }
  .w-btn .ic { width: 40px; height: 40px; }
  .wc-icon .world-icon { width: 46px; height: 46px; }
  .world-card { padding: 6px; }
  .pofi { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-card.weekly, .star-bar.ready, .pill-btn.ready, .pofi-art, .mech-handle, .mech-spot circle, .goal.ready,
  .room-char .ch-body, .wc-crown .ic, .w-open-art .box-svg { animation: none !important; }
}

/* Ana menüde maskot başlıkta durur, kartları kapatmaz */
body[data-screen="home"] .pofi-host { top: max(6px, var(--safe-t)); bottom: auto; left: max(190px, calc(var(--safe-l) + 190px)); }
body[data-screen="home"] .pofi { width: 76px; }
body[data-screen="home"] .pofi-bubble { bottom: auto; top: 20%; left: 100%; border-radius: 6px 22px 22px 22px; }
@media (max-width: 700px) {
  body[data-screen="home"] .pofi-host { left: max(12px, var(--safe-l)); }
  body[data-screen="home"] .pofi { width: 60px; }
}
.pz-ph { visibility: hidden; }

/* Yapboz: renkli, desenli zemin — her parça farklı görünür, çocuk yerini bulur */
.pz-img, .pz-ghost {
  background:
    radial-gradient(circle at 20% 25%, #FFE14D 0 7%, transparent 7.5%),
    radial-gradient(circle at 80% 20%, #7CC8FF 0 8%, transparent 8.5%),
    radial-gradient(circle at 15% 80%, #FF8FC0 0 9%, transparent 9.5%),
    radial-gradient(circle at 85% 82%, #6DD17A 0 8%, transparent 8.5%),
    linear-gradient(160deg, #D9F0FF 0%, #F1E3FF 50%, #FFE3EF 100%);
}
.pz-ghost { opacity: .18; }

/* Oyun ve oda ekranında maskot sadece konuşurken görünür (tepsiyi/kartları kapatmaz) */
body[data-screen="game"] .pofi:not(.talking), body[data-screen="room"] .pofi:not(.talking) { opacity: 0; transform: translateY(110%); pointer-events: none; }

/* Pencerelerde TAMAM düğmesi hep görünür */
.list-card .modal-close { position: sticky; bottom: 0; }

/* Kısa ekranlar (yatay telefon) */
@media (max-height: 520px) {
  .screen { gap: 6px; padding-top: max(6px, var(--safe-t)); padding-bottom: max(6px, var(--safe-b)); }
  .s-top .icon-btn { width: 46px; height: 46px; }
  .h-actions .pill-btn { min-height: 42px; }
  .world-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; justify-items: start; column-gap: 10px; row-gap: 4px; padding: 6px 10px; }
  .wc-icon { grid-row: span 2; }
  .wc-name { font-size: 18px; text-align: left; }
  .wc-stats { justify-content: flex-start; }
  .wc-stats > span { font-size: 12px; padding: 1px 8px 1px 2px; }
  .wc-stats .ic { width: 20px; height: 20px; }
  .wc-weekly { font-size: 9px; top: 6px; }
  .w-open { width: min(100%, 34vh + 60px); padding: 8px; gap: 2px; }
  .w-open-art { width: 58%; }
  .w-open b { font-size: var(--fs-l); }
  .list-card { padding: 12px 16px; gap: 8px; }
  .quest { padding: 4px 10px; }
  .q-icon .ic, .q-icon .world-icon { width: 34px; height: 34px; }
  .big-count { font-size: var(--fs-l); }
  .big-count .ic { width: 40px; height: 40px; }
  .goal { padding: 4px 10px; }
  .mem-grid { gap: 6px; }
  .room { max-width: calc((100vh - 170px) * 1.7); }
  .room-tray { padding: 4px; }
  .tray-item { width: 64px; height: 64px; }
  .tray-items { min-height: 68px; }
  .tray-tabs { gap: 3px; }
  .tray-tab { min-height: 30px; padding: 2px 10px; font-size: 13px; }
}