/* =====================================================================
   Pofuduk Kutu — styles.css
   ===================================================================== */

/* ---------- 1. Tasarım değişkenleri ---------- */
:root {
  /* Renkler */
  --ink: #5B3A6E;
  --ink-soft: #8C6FA0;
  --paper: #FFF8FC;
  --sky: #9FDFFF;
  --lilac: #C9C2FF;
  --candy: #FFC9E6;
  --bubblegum: #FF5FA2;
  --sun: #FFC93C;
  --grape: #8B6CFF;
  --mint: #3FCFA8;
  --danger: #F2545B;

  /* Nadirlik renkleri (ikon + isim ile birlikte kullanılır, tek başına değil) */
  --r-normal: #2FA7E8;
  --r-normal-soft: #DDF3FF;
  --r-rare: #9254F5;
  --r-rare-soft: #EFE3FF;
  --r-super: #F23F8E;
  --r-super-soft: #FFE0EE;
  --r-legend: #F29B00;
  --r-legend-soft: #FFF3C4;

  /* Boşluk */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 26px;
  --sp-5: 36px;

  /* Köşe */
  --rad-s: 14px;
  --rad-m: 24px;
  --rad-l: 34px;
  --rad-pill: 999px;

  /* Gölge: oyuncak hissi veren kalın alt gölge */
  --shadow-toy: 0 6px 0 var(--ink);
  --shadow-toy-press: 0 2px 0 var(--ink);
  --shadow-soft: 0 12px 30px rgba(91, 58, 110, .22);

  /* Yazı */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-s: clamp(14px, 1.9vmin, 18px);
  --fs-m: clamp(17px, 2.5vmin, 24px);
  --fs-l: clamp(22px, 3.8vmin, 36px);
  --fs-xl: clamp(30px, 6vmin, 60px);
  --fs-xxl: clamp(56px, 14vmin, 150px);
  --outline: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 6px 0 var(--ink);

  /* Süreler */
  --dur-fast: .18s;
  --dur-med: .4s;
  --dur-slow: .8s;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Güvenli alanlar (çentik / ev çubuğu) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* Düzen */
  --hud-space: 290px;
  --box-size: clamp(170px, min(56vmin, calc((100vh - var(--hud-space)) * .9)), 460px);
  --char-size: clamp(170px, min(44vh, 62vw), 400px);
  --tap: 56px;
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  position: fixed;
  inset: 0;
  font-family: var(--font);
  font-weight: 800;
  color: var(--ink);
  background-color: var(--lilac);
  background-image:
    radial-gradient(rgba(255, 255, 255, .38) 3px, transparent 3.6px),
    linear-gradient(165deg, var(--sky) 0%, var(--lilac) 48%, var(--candy) 100%);
  background-size: 46px 46px, 100% 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:focus { outline: none; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 9px var(--grape); }

svg { display: block; }
[hidden] { display: none !important; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 24px; }

/* ---------- 3. Ortak butonlar ---------- */
.toy-btn {
  --btn-bg: var(--bubblegum);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 10px 26px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-m);
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: var(--shadow-toy);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.toy-btn:active { transform: translateY(4px); box-shadow: var(--shadow-toy-press); }

.icon-btn {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-toy);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.icon-btn:active { transform: translateY(4px); box-shadow: var(--shadow-toy-press); }
.icon-btn svg { width: 60%; height: 60%; }

/* ---------- 4. Ana ekran düzeni ---------- */
.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: max(12px, var(--safe-t)) max(18px, var(--safe-r)) max(14px, var(--safe-b)) max(18px, var(--safe-l));
}

.bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg-cloud {
  position: absolute;
  width: 34vmax;
  height: 14vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  animation: drift 26s ease-in-out infinite alternate;
}
.bg-cloud.c1 { top: 8%; left: -8%; }
.bg-cloud.c2 { top: 54%; right: -12%; animation-duration: 32s; animation-delay: -8s; }
.bg-cloud.c3 { bottom: -4%; left: 18%; width: 44vmax; animation-duration: 38s; animation-delay: -16s; }
@keyframes drift { to { transform: translateX(8vmax); } }

.hud-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: .9;
  font-weight: 900;
  transform: rotate(-4deg);
  transform-origin: left center;
  padding: 4px 0 0 4px;
}
.logo span { display: block; text-shadow: var(--outline); letter-spacing: .01em; }
.logo-a { color: #fff; font-size: var(--fs-l); }
.logo-b { color: var(--sun); font-size: calc(var(--fs-l) * 1.25); margin-left: .6em; }

.sound-btn .ico-off { display: none; }
.sound-btn.muted .ico-on { display: none; }
.sound-btn.muted .ico-off { display: block; }
.sound-btn.muted { background: #EDE6F3; color: var(--ink-soft); }

.hud-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: var(--sp-2);
}

.collection-btn {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  min-height: 72px;
  padding: 8px 12px 8px 12px;
  font-size: var(--fs-m);
}
.collection-btn svg { width: 46px; height: 46px; color: var(--ink); }
.pill {
  display: inline-block;
  min-width: 3.4em;
  padding: 6px 12px;
  border-radius: var(--rad-pill);
  background: var(--grape);
  color: #fff;
  font-size: var(--fs-s);
  text-align: center;
}

/* ---------- 5. Sahne ve kutu ---------- */
.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 0;
}

.event-banner {
  position: relative;
  z-index: 3;
  padding: 8px 24px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: var(--sun);
  color: #fff;
  font-size: var(--fs-l);
  font-weight: 900;
  text-shadow: var(--outline);
  box-shadow: var(--shadow-toy);
  animation: bannerIn .6s var(--ease-bounce) both, bannerBob 1.6s .6s ease-in-out infinite;
}
.event-banner[data-event="rainbow"] { background: linear-gradient(90deg, #FF9AA2, #FFCFA8, #FFF4A3, #B5EAC4, #9AD8FF, #C7B3FF); }
.event-banner[data-event="giant"] { background: var(--bubblegum); }
.event-banner[data-event="mini"] { background: var(--mint); }
.event-banner[data-event="egg"] { background: var(--grape); }
@keyframes bannerIn { from { transform: scale(0) rotate(-10deg); } to { transform: scale(1) rotate(-2deg); } }
@keyframes bannerBob { 50% { transform: scale(1.05) rotate(2deg); } 0%, 100% { transform: scale(1) rotate(-2deg); } }

.box-area {
  position: relative;
  width: var(--box-size);
  aspect-ratio: 240 / 250;
  transition: transform var(--dur-med) var(--ease-bounce);
}
.box-area.size-giant { transform: scale(1.14); margin: calc(var(--box-size) * .06) 0; }
.box-area.size-mini { transform: scale(.7); }
.box-area.enter { animation: dropIn .55s var(--ease-bounce) both; }
.box-area.size-giant.enter { animation-name: dropInGiant; }
.box-area.size-mini.enter { animation-name: dropInMini; }
@keyframes dropIn { from { transform: translateY(-70vh) scale(.8); } to { transform: none; } }
@keyframes dropInGiant { from { transform: translateY(-70vh) scale(.9); } to { transform: scale(1.14); } }
@keyframes dropInMini { from { transform: translateY(-70vh) scale(.5); } to { transform: scale(.7); } }

.pedestal {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -3%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #FFFFFF 0%, #FFE3F1 55%, #F7C3DF 100%);
  border: 4px solid var(--ink);
  box-shadow: 0 8px 0 rgba(91, 58, 110, .35);
}
.pedestal::after {
  content: "";
  position: absolute;
  inset: 12% 6%;
  border-radius: 50%;
  border: 3px dashed rgba(91, 58, 110, .25);
}

.box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--rad-l);
  transform-origin: 50% 92%;
}
.box-shake, .box-svg { width: 100%; height: 100%; }
.box-shake { transform-origin: 50% 90%; }
.box-svg { overflow: visible; transform-origin: 50% 94%; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .975); } }

.box .box-lid, .box .box-body, .box .box-glowseam, .box .box-shadow { transform-box: fill-box; }
.box .box-lid { transform-origin: 50% 100%; transition: transform .25s var(--ease-out); }
.box .box-body { transform-origin: 50% 100%; }
.box .box-glowseam { transform-origin: 50% 50%; opacity: 0; transition: opacity .3s; }
.box .box-eyes-squint { opacity: 0; }
.box.squint .box-eyes-open { opacity: 0; }
.box.squint .box-eyes-squint { opacity: 1; }

/* Dokunuş tepkileri */
.box.squish { animation: squish .22s var(--ease-out); }
@keyframes squish { 40% { transform: scale(1.06, .9); } 100% { transform: scale(1); } }

.box.shake .box-shake { animation: shake .45s ease-in-out; }
@keyframes shake {
  15% { transform: rotate(-7deg); } 35% { transform: rotate(6deg); }
  55% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } 100% { transform: none; }
}

.box.hop .box-shake { animation: shakeBig .5s ease-in-out; }
@keyframes shakeBig {
  10% { transform: translateY(-6%) rotate(-9deg); } 30% { transform: translateY(-2%) rotate(8deg); }
  50% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } 100% { transform: none; }
}
.box.ajar .box-lid { transform: translateY(-8px) rotate(-4deg); }
.box.hop .box-lid { animation: lidHop .5s var(--ease-bounce); }
@keyframes lidHop { 40% { transform: translateY(-34px) rotate(-10deg); } 100% { transform: translateY(-8px) rotate(-4deg); } }
.box.ajar .box-glowseam { opacity: 1; animation: seamFlicker .9s ease-in-out infinite; }
@keyframes seamFlicker { 50% { transform: scale(1.12, 1.25); } }

/* Yumurta çatlakları */
.egg-crack { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s var(--ease-out); }
.box.crack1 .egg-crack { stroke-dashoffset: 58; }
.box.crack2 .egg-crack { stroke-dashoffset: 0; }

/* Açılış */
.box.opened .box-svg { animation: none; }
.box.opened .box-lid { animation: lidOff .6s var(--ease-out) forwards; }
.box.opened .box-body { animation: bodyPop .55s var(--ease-out) forwards; }
.box.opened .box-glowseam { opacity: 1; animation: seamBlast .5s ease-out forwards; }
.box.opened .box-shadow { opacity: 0; transition: opacity .4s; }
@keyframes lidOff { 0% { transform: translateY(-8px) rotate(-4deg); } 100% { transform: translate(38%, -170%) rotate(40deg); opacity: 0; } }
@keyframes bodyPop { 0% { transform: scale(1); } 30% { transform: scale(1.1, .88); } 100% { transform: scale(.4, .2); opacity: 0; } }
@keyframes seamBlast { to { transform: scale(2.4, 4); opacity: 0; } }

/* Efsane gerilim sekansı */
.box.charging .box-shake { animation: charge .09s linear infinite; }
@keyframes charge {
  0% { transform: translate(-2%, 0) rotate(-3deg); } 25% { transform: translate(2%, -1%) rotate(3deg); }
  50% { transform: translate(-1%, 1%) rotate(-2deg); } 75% { transform: translate(1.5%, 0) rotate(2.5deg); } 100% { transform: none; }
}
.box.charging .box-glowseam { opacity: 1; transform: scale(1.3, 1.8); }
.box.charging .box-lid { transform: translateY(-12px) rotate(-5deg); }

.box-glow, .box-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
}
.box-glow {
  width: 170%;
  height: 170%;
  margin: -85% 0 0 -85%;
  background: radial-gradient(closest-side, rgba(255, 236, 140, .95), rgba(255, 196, 0, .45) 45%, rgba(255, 196, 0, 0));
}
.box-rays {
  width: 260%;
  height: 260%;
  margin: -130% 0 0 -130%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 238, 150, .75) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 72%);
}
.box-area.charging .box-glow { animation: glowPulse .5s ease-in-out infinite alternate; }
.box-area.charging .box-rays { opacity: 1; animation: spin 4s linear infinite; }
@keyframes glowPulse { from { opacity: .55; transform: scale(.85); } to { opacity: 1; transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(1turn); } }

.box-area.flash-rare .box-glow,
.box-area.flash-super .box-glow { animation: glowFlash .6s ease-out; }
.box-area.flash-rare .box-glow { background: radial-gradient(closest-side, rgba(200, 170, 255, .95), rgba(146, 84, 245, 0)); }
.box-area.flash-super .box-glow { background: radial-gradient(closest-side, rgba(255, 190, 220, .95), rgba(242, 63, 142, 0)); }
@keyframes glowFlash { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* Özel kutu parıltıları */
.box-shine { animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(360px) skewX(-20deg); } }

.box-twinkle {
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 2.2s ease-in-out infinite;
}
.box-twinkle.t1 { top: 18%; left: -4%; }
.box-twinkle.t2 { top: 4%; right: 2%; width: 18px; height: 18px; animation-delay: -.8s; }
.box-twinkle.t3 { top: 52%; right: -6%; width: 22px; height: 22px; animation-delay: -1.5s; }
@keyframes twinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.stage.busy .box-twinkle { display: none; }

.hint {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: #fff;
  text-shadow: var(--outline);
  letter-spacing: .02em;
  text-align: center;
  animation: hintBob 1.4s ease-in-out infinite;
  pointer-events: none;
}
.hint.bump { animation: hintBump .3s var(--ease-bounce), hintBob 1.4s .3s ease-in-out infinite; }
@keyframes hintBob { 50% { transform: translateY(-6px) scale(1.03); } }
@keyframes hintBump { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.stage.busy .hint, .stage.busy .event-banner { visibility: hidden; }

/* ---------- 6. Efekt katmanları ---------- */
.fx, .fx-top, .particles { position: fixed; inset: 0; pointer-events: none; }
.fx { z-index: 30; }
.particles { z-index: 32; }
.fx-top { z-index: 34; display: grid; place-items: center; }

.fx-dim {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
/* Efsane sahnesi arka planı: .app-scene (kutudan) ve .fx-dim (ışık küresi) — bkz. R2 bölümü */
body.legend-charge .stage { z-index: 3; }
body.legend-charge .hud-top, body.legend-charge .hud-bottom { visibility: hidden; }
/* Çift sürprizde ikinci karakter efsane ise: ışık küresi, tüm ekran karartılır */
body.legend-orb .fx-dim { opacity: 1; }

.orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--char-size);
  height: var(--char-size);
  margin: calc(var(--char-size) / -2) 0 0 calc(var(--char-size) / -2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFBE0, #FFD23F 45%, #F29B00 100%);
  border: 6px solid var(--ink);
  box-shadow: 0 0 60px 20px rgba(255, 210, 63, .7);
  color: #fff;
  font-size: calc(var(--char-size) * .45);
  font-weight: 900;
  text-shadow: var(--outline);
  opacity: 0;
  transform: scale(.3);
}
.orb.show { opacity: 1; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease-bounce); }
.orb.show.charging { animation: orbCharge .09s linear infinite; }
@keyframes orbCharge { 0% { transform: scale(.6) translate(-3%, 0); } 50% { transform: scale(.63) translate(3%, -2%); } 100% { transform: scale(.6); } }

.fx-flash { position: absolute; inset: 0; background: #FFFBEA; opacity: 0; }
.fx-top.flash .fx-flash { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: .95; } 100% { opacity: 0; } }

.legend-text {
  position: relative;
  font-size: var(--fs-xxl);
  font-weight: 900;
  color: #FFE14D;
  letter-spacing: .03em;
  text-shadow: 0 0 0 transparent, 5px 0 0 var(--ink), -5px 0 0 var(--ink), 0 5px 0 var(--ink), 0 -5px 0 var(--ink),
    4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink), 0 12px 0 var(--ink), 0 0 60px var(--lt-glow, rgba(255, 200, 0, .9));
  opacity: 0;
  transform: scale(3);
}
.legend-text.show { animation: legendSlam 1.25s var(--ease-out) forwards; }
@keyframes legendSlam {
  0% { opacity: 0; transform: scale(3) rotate(-8deg); }
  18% { opacity: 1; transform: scale(.9) rotate(-3deg); }
  28% { transform: scale(1.05) rotate(-3deg); }
  80% { opacity: 1; transform: scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: scale(1.35) rotate(-3deg); }
}

/* ---------- 7. Overlay'ler ---------- */
.overlay {
  position: fixed;
  inset: 0;
  padding: max(14px, var(--safe-t)) max(18px, var(--safe-r)) max(14px, var(--safe-b)) max(18px, var(--safe-l));
}
.reveal { z-index: 20; }
.collection { z-index: 40; }
.viewer { z-index: 45; }
.modal { z-index: 50; }
#confirm { z-index: 55; }

/* ---------- 8. Vitrin (karakter çıktı ekranı + detay) ---------- */
.showcase {
  --rc: var(--r-normal);
  --rc-soft: var(--r-normal-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.showcase[data-rarity="rare"] { --rc: var(--r-rare); --rc-soft: var(--r-rare-soft); }
.showcase[data-rarity="super"] { --rc: var(--r-super); --rc-soft: var(--r-super-soft); }
.showcase[data-rarity="legend"] { --rc: var(--r-legend); --rc-soft: var(--r-legend-soft); }

.showcase-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--rc-soft) 40%, var(--rc) 130%);
}
.showcase[data-rarity="legend"] .showcase-bg { background: radial-gradient(circle at 50% 42%, #FFF6C9 0%, #FFB938 38%, #7A3FC9 100%); }
.showcase-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 220vmax;
  height: 220vmax;
  margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .42) 0deg 9deg, transparent 9deg 20deg);
  animation: spin 40s linear infinite;
}
.showcase[data-rarity="legend"] .showcase-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 244, 180, .5) 0deg 7deg, transparent 7deg 16deg); animation-duration: 18s; }

.showcase-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 1100px;
}
.showcase-art { position: relative; display: grid; place-items: center; }
.showcase-aura {
  position: absolute;
  width: 135%;
  height: 135%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.showcase[data-rarity="rare"] .showcase-aura {
  opacity: .8;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(200, 170, 255, .5) 55%, transparent);
}
.showcase[data-rarity="super"] .showcase-aura {
  opacity: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 150, 200, .55) 0deg 12deg, rgba(255, 255, 255, .2) 12deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 75%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 75%);
  animation: spin 9s linear infinite;
}
.showcase[data-rarity="legend"] .showcase-aura {
  opacity: 1;
  width: 150%;
  height: 150%;
  background: conic-gradient(#FF9AA2, #FFCFA8, #FFF4A3, #B5EAC4, #9AD8FF, #C7B3FF, #FF9AA2);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  animation: spin 5s linear infinite;
}

.showcase-char {
  position: relative;
  width: var(--char-size);
  height: var(--char-size);
  border-radius: 50%;
}
.showcase-char .ch-svg { width: 100%; height: 100%; overflow: visible; }
.showcase.show .showcase-char { animation: popIn .7s var(--ease-bounce) both; }
@keyframes popIn { 0% { transform: scale(0) rotate(-12deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.showcase[data-rarity="legend"].show .showcase-char { animation: popInLegend 1s var(--ease-bounce) both; }
@keyframes popInLegend { 0% { transform: scale(0) rotate(-200deg); } 55% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

/* Karakter canlı durma animasyonu */
.showcase .ch-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 2.2s ease-in-out infinite; }
.showcase .ch-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 4.2s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.showcase .ch-antenna { animation: antenna 1.2s steps(2) infinite; }
@keyframes antenna { 50% { fill: #FFE14D; } }
.showcase[data-rarity="legend"] .showcase-char .ch-svg { filter: drop-shadow(0 0 18px rgba(255, 220, 90, .95)); }

/* Dokununca yapılan özel hareketler (characters.js → specialAnimation) */
.ch-svg { transform-origin: 50% 80%; }
.anim-jelly { animation: aJelly .55s ease-in-out; }
.anim-hop { animation: aHop .55s var(--ease-out); }
.anim-spin { animation: aSpin .7s var(--ease-out); }
.anim-wiggle { animation: aWiggle .55s ease-in-out; }
.anim-float { animation: aFloat .8s ease-in-out; }
.anim-twirl { animation: aTwirl .6s var(--ease-out); }
@keyframes aJelly { 25% { transform: scale(1.18, .82); } 50% { transform: scale(.88, 1.14); } 75% { transform: scale(1.06, .95); } }
@keyframes aHop { 35% { transform: translateY(-22%) scale(.95, 1.08); } 70% { transform: translateY(0) scale(1.1, .9); } }
@keyframes aSpin { 60% { transform: rotate(380deg) scale(1.12); } 100% { transform: rotate(360deg); } }
@keyframes aWiggle { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
@keyframes aFloat { 50% { transform: translateY(-14%) rotate(-4deg); } }
@keyframes aTwirl { 50% { transform: scaleX(-1) scale(1.1); } }

.showcase-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.reveal-tag {
  display: inline-block;
  padding: 6px 22px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  font-size: var(--fs-l);
  font-weight: 900;
  color: #fff;
  text-shadow: var(--outline);
  box-shadow: var(--shadow-toy);
  transform: rotate(-3deg);
}
.reveal-tag.is-new { background: var(--bubblegum); }
.reveal-tag.is-again { background: var(--mint); }
.showcase.show .reveal-tag { animation: tagIn .5s .35s var(--ease-bounce) both; }
@keyframes tagIn { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1) rotate(-3deg); } }

.showcase-name {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: #fff;
  text-shadow: var(--outline);
  line-height: 1.05;
}

.showcase-meta { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }

.rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  border: 3px solid var(--ink);
  border-radius: var(--rad-pill);
  background: var(--rc, var(--r-normal));
  color: #fff;
  font-size: var(--fs-m);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.rarity-badge .rarity-icon { width: 1.5em; height: 1.5em; }

.count-pill {
  padding: 6px 14px;
  border: 3px solid var(--ink);
  border-radius: var(--rad-pill);
  background: #fff;
  font-size: var(--fs-m);
  font-weight: 900;
}
.count-pill:empty { display: none; }

.showcase-desc {
  max-width: 30ch;
  padding: 8px 16px;
  border-radius: var(--rad-m);
  background: rgba(255, 255, 255, .78);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.35;
}

.big-btn {
  min-height: 80px;
  min-width: min(360px, 80vw);
  margin-top: var(--sp-2);
  font-size: var(--fs-l);
  --btn-bg: var(--grape);
  opacity: 0;
  transform: translateY(20px) scale(.9);
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-bounce), box-shadow var(--dur-fast);
}
.big-btn.ready { opacity: 1; transform: none; pointer-events: auto; animation: readyPulse 1.6s 1s ease-in-out infinite; }
.big-btn.ready:active { transform: translateY(4px); animation: none; }
@keyframes readyPulse { 50% { transform: scale(1.05); } }
.viewer .big-btn { opacity: 1; transform: none; pointer-events: auto; --btn-bg: var(--bubblegum); }

.reveal.intro .showcase-body, .reveal.intro .double-banner { opacity: 0; transition: opacity .2s; }

.double-banner {
  position: absolute;
  top: max(16px, var(--safe-t));
  left: 50%;
  z-index: 2;
  padding: 8px 26px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: linear-gradient(90deg, var(--bubblegum), var(--grape));
  color: #fff;
  font-size: var(--fs-l);
  font-weight: 900;
  text-shadow: var(--outline);
  box-shadow: var(--shadow-toy);
  transform: translateX(-50%) rotate(-2deg);
  animation: doubleIn .6s var(--ease-bounce) both;
}
@keyframes doubleIn { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) rotate(-2deg); } }


/* ---------- 9. Koleksiyon ---------- */
.collection {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(139, 108, 255, .12) 2.5px, transparent 3px);
  background-size: 34px 34px;
}

.col-header { display: flex; align-items: center; gap: var(--sp-3); }
.col-title { flex: 1; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.col-title h2 { font-size: var(--fs-l); font-weight: 900; color: var(--bubblegum); text-shadow: 0 3px 0 var(--ink); }
.progress { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 180px; }
.progress-bar {
  flex: 1;
  height: 24px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: #fff;
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: repeating-linear-gradient(-45deg, var(--sun) 0 12px, #FFD970 12px 24px);
  transition: transform .6s var(--ease-out);
}
.progress-text { font-size: var(--fs-m); font-weight: 900; white-space: nowrap; }

.parent-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-soft);
  opacity: .55;
}
.parent-btn svg { width: 70%; height: 70%; }

.card {
  --rc: var(--r-normal);
  --rc-soft: var(--r-normal-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border: 5px solid var(--rc);
  border-radius: var(--rad-m);
  background: #fff;
  box-shadow: 0 6px 0 var(--ink);
  overflow: hidden;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.card.r-rare { --rc: var(--r-rare); --rc-soft: var(--r-rare-soft); }
.card.r-super { --rc: var(--r-super); --rc-soft: var(--r-super-soft); }
.card.r-legend { --rc: var(--r-legend); --rc-soft: var(--r-legend-soft); background: linear-gradient(180deg, #FFFBEA, #FFF0B8); }
.card.r-legend::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 30%;
  left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-20deg);
  animation: cardShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardShine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.card.r-super.found::after, .card.r-rare.found::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: var(--rc);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--rad-s);
  background: radial-gradient(circle at 50% 55%, #fff 0%, var(--rc-soft) 70%);
  display: grid;
  place-items: center;
}
.card-art .ch-svg { width: 92%; height: 92%; }
.card.locked .card-art .ch-svg { filter: brightness(0); opacity: .14; }
.card-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(40px, 8vmin, 70px);
  font-weight: 900;
  color: #fff;
  text-shadow: var(--outline);
}
.card-name { font-size: var(--fs-s); font-weight: 900; line-height: 1.1; text-align: center; min-height: 1.2em; }
.card.locked .card-name { color: var(--ink-soft); letter-spacing: .15em; }
.card-meta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.card-meta .rarity-icon { width: 24px; height: 24px; }
.card-meta .card-rarity { font-size: 12px; font-weight: 900; color: var(--rc); }
.card-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--rad-pill);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.card.hide { display: none; }
.card.nope { animation: aWiggle .45s ease-in-out; }
.card.fresh .card-art::after {
  content: "YENİ";
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 8px;
  border-radius: var(--rad-pill);
  background: var(--bubblegum);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

/* ---------- 10. Ebeveyn ve onay pencereleri ---------- */
.modal { display: grid; place-items: center; background: rgba(58, 30, 80, .55); }
.modal-card {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 5px solid var(--ink);
  border-radius: var(--rad-l);
  background: #fff;
  box-shadow: 0 10px 0 var(--ink);
  font-weight: 700;
  animation: modalIn .35s var(--ease-bounce);
}
@keyframes modalIn { from { transform: scale(.85); opacity: 0; } }
.modal-card h2 { font-size: var(--fs-l); font-weight: 900; }
.modal-note { font-size: var(--fs-s); line-height: 1.4; color: var(--ink-soft); }
.modal-row { display: flex; gap: var(--sp-2); }
.modal-row .toy-btn { flex: 1; padding: 10px 12px; }
.modal-row .toy-btn:first-child { --btn-bg: var(--mint); }
.toy-btn.danger { --btn-bg: var(--danger); font-size: var(--fs-s); }
.modal-close { --btn-bg: var(--grape); }

.stats { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: var(--fs-s); }
.stats dt { color: var(--ink-soft); font-weight: 700; }
.stats dd { font-weight: 900; text-align: right; }

.hold-btn {
  position: relative;
  min-height: 56px;
  overflow: hidden;
  border: 3px dashed var(--danger);
  border-radius: var(--rad-pill);
  color: var(--danger);
  font-size: var(--fs-s);
  font-weight: 900;
}
.hold-fill {
  position: absolute;
  inset: 0;
  background: rgba(242, 84, 91, .22);
  transform: scaleX(0);
  transform-origin: left center;
}
.hold-btn.holding .hold-fill { transform: scaleX(1); transition: transform 3s linear; }
.hold-label { position: relative; }

/* ---------- 11. Geliştirici paneli (?debug=1) ---------- */
.debug-panel {
  position: fixed;
  right: max(8px, var(--safe-r));
  bottom: max(96px, calc(var(--safe-b) + 90px));
  z-index: 60;
  width: 250px;
  max-height: 70vh;
  overflow: auto;
  padding: 10px;
  border-radius: 14px;
  background: rgba(30, 20, 50, .88);
  color: #fff;
  font: 600 12px/1.35 system-ui, sans-serif;
}
.debug-panel b { display: block; margin-bottom: 6px; color: #FFE14D; }
.debug-panel button, .debug-panel select {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font: 600 12px system-ui, sans-serif;
}
.debug-panel pre { white-space: pre-wrap; margin-top: 6px; font: 11px/1.35 ui-monospace, monospace; }
.debug-panel.collapsed > :not(.dbg-toggle) { display: none; }

/* =====================================================================
   R2 EKLERİ — arka planlar, Büyük Sürpriz, açılış stilleri, efsane
   sahneleri, vitrin varyasyonları, tekrar çerçeveleri, 6 sayfalık albüm
   ===================================================================== */

/* ---------- R2.1 Ana ekran atmosferleri (yalnızca aktif katman hareket eder) ---------- */
.bgt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s .9s;
}
.bgt.on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.bgt::before, .bgt::after { content: ""; position: absolute; pointer-events: none; }
.bgt:not(.on)::before, .bgt:not(.on)::after { animation: none !important; }

.bgt[data-t="sweet"] { background: linear-gradient(165deg, #FFD9EC 0%, #FFEADC 50%, #FFC8DF 100%); }
.bgt[data-t="sweet"]::before {
  inset: 0;
  background-image: radial-gradient(#FF8FC0 2.5px, transparent 3px), radial-gradient(#8FD0FF 2.5px, transparent 3px), radial-gradient(#FFD65C 2.5px, transparent 3px);
  background-size: 90px 90px, 110px 110px, 70px 70px;
  background-position: 0 0, 40px 60px, 20px 30px;
  opacity: .55;
}
.bgt[data-t="meadow"] { background: linear-gradient(180deg, #CFF1FF 0%, #EAFADC 58%, #C2ECA8 100%); }
.bgt[data-t="meadow"]::before {
  left: -10%; right: -10%; bottom: -6%; height: 30%;
  background: radial-gradient(ellipse at 22% 100%, #AEE391 0 45%, transparent 46%), radial-gradient(ellipse at 78% 100%, #9FDA82 0 48%, transparent 49%);
}
.bgt[data-t="meadow"]::after {
  inset: 0;
  background-image: radial-gradient(#fff 3px, transparent 3.5px), radial-gradient(#FFB8D6 3px, transparent 3.5px);
  background-size: 130px 130px, 170px 170px;
  background-position: 30px 50px, 100px 110px;
  opacity: .55;
}
.bgt[data-t="nature"] { background: linear-gradient(170deg, #D6F8E8 0%, #BAECCD 55%, #9ADFB2 100%); }
.bgt[data-t="nature"]::before {
  inset: 0;
  background-image: radial-gradient(7px 12px at 50% 50%, rgba(79, 181, 100, .35) 90%, transparent), radial-gradient(#fff 2.5px, transparent 3px);
  background-size: 120px 110px, 80px 80px;
  background-position: 20px 30px, 60px 10px;
}
.bgt[data-t="space"] { background: linear-gradient(180deg, #1F2460 0%, #3B2F7E 60%, #5E3F92 100%); }
.bgt[data-t="space"]::before {
  inset: 0;
  background-image: radial-gradient(#fff 1.6px, transparent 2px), radial-gradient(#FFE9A8 1.2px, transparent 1.6px), radial-gradient(#BFE9FF 2px, transparent 2.5px);
  background-size: 97px 89px, 61px 73px, 151px 139px;
  background-position: 0 0, 30px 40px, 70px 20px;
}
.bgt[data-t="space"]::after {
  inset: 0;
  background-image: radial-gradient(#fff 2.4px, transparent 3px);
  background-size: 173px 157px;
  background-position: 50px 80px;
  animation: twinkleBg 2.6s ease-in-out infinite alternate;
}
@keyframes twinkleBg { from { opacity: .2; } to { opacity: 1; } }
.bgt[data-t="rainbow"] { background: linear-gradient(135deg, #FFD6E0 0%, #FFE9C9 20%, #FFF8C4 40%, #D9F6DF 60%, #D2ECFF 80%, #E6DBFF 100%); }
.bgt[data-t="rainbow"]::before {
  inset: 0;
  background: radial-gradient(circle at 50% 118%, transparent 0 38%, rgba(255, 154, 162, .35) 38% 42%, rgba(255, 207, 168, .35) 42% 46%, rgba(255, 244, 163, .4) 46% 50%, rgba(181, 234, 196, .35) 50% 54%, rgba(154, 216, 255, .35) 54% 58%, rgba(199, 179, 255, .35) 58% 62%, transparent 62%);
}
.bgt[data-t="beach"] { background: linear-gradient(180deg, #9EE0FF 0%, #CDEFFF 52%, #FFEBC2 76%, #FFD99A 100%); }
.bgt[data-t="beach"]::before {
  right: -12vmax; top: -12vmax; width: 46vmax; height: 46vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 150, .95), rgba(255, 220, 100, .35) 55%, transparent);
}
.bgt[data-t="beach"]::after {
  left: 0; right: 0; bottom: 21%; height: 18px;
  background: radial-gradient(circle at 25px -8px, transparent 18px, rgba(255, 255, 255, .7) 19px 23px, transparent 24px);
  background-size: 50px 20px;
}
.bgt[data-t="christmas"] { background: linear-gradient(180deg, #8DB6EA 0%, #C6DCF6 55%, #F2F7FF 100%); }
.bgt[data-t="christmas"]::before {
  left: 0; right: 0; top: -240px; bottom: 0;
  background-image: radial-gradient(#fff 3.2px, transparent 3.8px), radial-gradient(#fff 2px, transparent 2.6px);
  background-size: 120px 120px, 80px 80px;
  background-position: 0 0, 40px 60px;
  animation: snowFall 14s linear infinite;
}
@keyframes snowFall { to { transform: translate3d(0, 240px, 0); } }
.bgt[data-t="christmas"]::after {
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 214, 90, .6) 0 6px, transparent 7px), radial-gradient(circle, rgba(255, 95, 122, .45) 0 5px, transparent 6px), radial-gradient(circle, rgba(109, 209, 122, .5) 0 5px, transparent 6px);
  background-size: 210px 190px, 170px 230px, 250px 170px;
  background-position: 30px 40px, 120px 90px, 60px 150px;
}
.bgt[data-t="ice"] { background: linear-gradient(170deg, #F2FBFF 0%, #CDEBFF 55%, #E3F4FF 100%); }
.bgt[data-t="ice"]::before {
  inset: 0;
  background-image: linear-gradient(60deg, transparent 48%, rgba(255, 255, 255, .8) 49% 51%, transparent 52%), linear-gradient(-60deg, transparent 48%, rgba(255, 255, 255, .8) 49% 51%, transparent 52%);
  background-size: 160px 160px;
  opacity: .6;
}
.bgt[data-t="gold"] { background: radial-gradient(circle at 50% 48%, #FFF7D0 0%, #FFE08A 45%, #F7B54A 100%); }
.bgt[data-t="gold"]::before {
  left: 50%; top: 48%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax;
  background: repeating-conic-gradient(rgba(255, 255, 255, .3) 0 8deg, transparent 8deg 20deg);
  animation: spin 60s linear infinite;
}
.app[data-bg="space"] .bg-cloud { opacity: .25; }

/* ---------- R2.2 Büyük Sürpriz göstergesi ---------- */
.big-meter {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 14px 5px 7px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 0 var(--ink);
  color: var(--ink);
}
.bm-gift { width: 40px; height: 40px; flex: none; }
.bm-body { display: flex; flex-direction: column; gap: 4px; }
.bm-label { font-size: 11px; line-height: 1; letter-spacing: .06em; color: var(--grape); white-space: nowrap; }
.bm-dots { display: flex; gap: 4px; }
.bm-dots i { width: 11px; height: 11px; border-radius: 50%; background: #EDE6F6; border: 2px solid rgba(91, 58, 110, .3); transition: background .3s, transform .3s var(--ease-bounce); }
.bm-dots i.on { background: var(--sun); border-color: var(--ink); transform: scale(1.1); }
.bm-text { min-width: 2.6em; font-size: var(--fs-m); font-weight: 900; text-align: center; }
.big-meter.ready { background: linear-gradient(90deg, #FFF3B0, #FFD23F); animation: meterGlow .9s ease-in-out infinite alternate; }
.big-meter.ready .bm-gift { animation: aWiggle .9s ease-in-out infinite; }
@keyframes meterGlow { to { box-shadow: 0 4px 0 var(--ink), 0 0 22px 6px rgba(255, 210, 63, .85); } }

/* ---------- R2.3 Özel kutu afişleri ---------- */
.event-banner[data-event="big"] { background: linear-gradient(90deg, #9B6CFF, #FF5FA2); }
.event-banner[data-event="gold"] { background: linear-gradient(90deg, #FFD23F, #F2A900); }
.event-banner[data-event="xmasSurprise"] { background: linear-gradient(90deg, #E02E44, #2FA05A); }
.event-banner[data-event="starCapsule"] { background: linear-gradient(90deg, #8E6BF0, #FFC93C); }
.event-banner[data-event="iceChest"] { background: linear-gradient(90deg, #7CC8FF, #B8A6FF); }
.event-banner[data-event="spaceCapsule"] { background: linear-gradient(90deg, #262A6E, #5E66C8); }
.event-banner[data-event="partyBox"] { background: linear-gradient(90deg, #FF9AA2, #FFE08A, #9AD8FF, #C7B3FF); }
.event-banner[data-event="vacationCase"] { background: linear-gradient(90deg, #FF8A3D, #58B7FF); }

/* ---------- R2.4 Açılış stilleri (boxes.js → data-open) ---------- */
.box .box-ribbon, .box .bh, .box .zip-tab { transform-box: fill-box; transform-origin: 50% 50%; }
.box .box-ribbon { transition: transform .3s var(--ease-bounce); }
.box .bh { transition: transform .3s var(--ease-out); }
.box .zip-tab { transition: transform .45s var(--ease-out); }
.box .box-crack { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s ease; }
.box.crack1 .box-crack { stroke-dashoffset: 55; }
.box.crack2 .box-crack { stroke-dashoffset: 0; }
.box-bulb { animation: bulb 1.2s ease-in-out infinite; }
.box-bulb.b1 { animation-delay: -.4s; }
.box-bulb.b2 { animation-delay: -.8s; }
@keyframes bulb { 50% { opacity: .4; } }

/* Son dokunuş öncesi ipuçları */
.box[data-open="untie"].cue .box-ribbon { animation: ribbonLoose .6s ease-in-out infinite; }
@keyframes ribbonLoose { 0%, 100% { transform: rotate(-9deg) scale(.93); } 50% { transform: rotate(8deg) scale(.96); } }
.box[data-open="zip"].cue .zip-tab { transform: translateX(140px); }
.box[data-open="zip"].cue .box-glowseam { opacity: .8; }
.box[data-open="split"].cue .bh-l { transform: translateX(-5px) rotate(-2deg); }
.box[data-open="split"].cue .bh-r { transform: translateX(5px) rotate(2deg); }
.box[data-open="spin"].cue .box-shake { animation: spinCue .55s ease-in-out; }
@keyframes spinCue { 50% { transform: scaleX(-1); } }
.box[data-open="grow"].cue .box-svg { animation: growCue 1s ease-in-out infinite; }
@keyframes growCue { 50% { transform: scale(.95, 1.09); } }

/* Açılış animasyonları */
.box.opened[data-open="untie"] .box-ribbon { animation: ribbonOff .45s var(--ease-out) forwards; }
@keyframes ribbonOff { to { transform: translate(-60%, -180%) rotate(-50deg) scale(.6); opacity: 0; } }
.box.opened[data-open="untie"] .box-lid { animation: lidUp .6s .12s var(--ease-out) forwards; }
@keyframes lidUp { 0% { transform: translateY(-8px); } 100% { transform: translateY(-190%) scale(.9); opacity: 0; } }
.box.opened[data-open="hop"] .box-lid { animation: lidHopOff .6s var(--ease-out) forwards; }
@keyframes lidHopOff { 0% { transform: translateY(-8px); } 100% { transform: translateY(-240%) rotate(-340deg) scale(.7); opacity: 0; } }
.box.opened[data-open="split"] .box-body, .box.opened[data-open="crack"] .box-body { animation: none; }
.box.opened[data-open="split"] .bh-l { animation: halfL .55s var(--ease-out) forwards; }
.box.opened[data-open="split"] .bh-r { animation: halfR .55s var(--ease-out) forwards; }
@keyframes halfL { to { transform: translateX(-70%) rotate(-24deg); opacity: 0; } }
@keyframes halfR { to { transform: translateX(70%) rotate(24deg); opacity: 0; } }
.box.opened[data-open="split"] .box-lid { animation: lidUp .5s var(--ease-out) forwards; }
.box.opened[data-open="crack"] .bh-l { animation: crackL .6s ease-in forwards; }
.box.opened[data-open="crack"] .bh-r { animation: crackR .6s ease-in forwards; }
@keyframes crackL { 30% { transform: translateX(-12%) rotate(-10deg); } 100% { transform: translate(-50%, 40%) rotate(-40deg); opacity: 0; } }
@keyframes crackR { 30% { transform: translateX(12%) rotate(10deg); } 100% { transform: translate(50%, 40%) rotate(40deg); opacity: 0; } }
.box.opened[data-open="crack"] .box-crack { opacity: 0; }
.box.opened[data-open="crack"] .box-lid { animation: lidHopOff .6s var(--ease-out) forwards; }
.box.opened[data-open="zip"] .box-lid { transform-origin: 50% 0%; animation: lidFlip .55s var(--ease-out) forwards; }
@keyframes lidFlip { 0% { transform: scaleY(1); } 40% { transform: translateY(-30%) scaleY(-.6); } 100% { transform: translateY(-120%) scaleY(-.3); opacity: 0; } }
.box.opened[data-open="stardust"] .box-svg { animation: dustOut .42s ease-out forwards; }
@keyframes dustOut { 0% { transform: scale(1); } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.box.opened[data-open="spin"] .box-svg { animation: spinOpen .6s var(--ease-out) forwards; }
@keyframes spinOpen { 0% { transform: scaleX(1); } 25% { transform: scaleX(-1); } 50% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(.4); opacity: 0; } }
.box.opened[data-open="grow"] .box-svg { animation: growOpen .55s var(--ease-out) forwards; }
@keyframes growOpen { 45% { transform: scale(.9, 1.35); } 70% { transform: scale(1.3, .8); opacity: 1; } 100% { transform: scale(1.5, .4); opacity: 0; } }

/* Küçük sürpriz işaretleri */
.box.peek .box-glowseam { animation: peekLight .7s ease-out; }
@keyframes peekLight { 30% { opacity: 1; transform: scale(1.1, 1.5); } 100% { opacity: 0; } }
.box.peek .box-lid { animation: peekLid .5s ease-out; }
@keyframes peekLid { 40% { transform: translateY(-10px) rotate(-3deg); } }
.box.peep .box-shake { animation: peep .4s ease-out; }
@keyframes peep { 30% { transform: translateY(-4%) scale(1.03, .97); } 60% { transform: none; } }
.box.wobble .box-shake { animation: oddWobble .7s ease-in-out; }
@keyframes oddWobble { 20% { transform: skewX(7deg); } 40% { transform: skewX(-7deg) scaleY(1.05); } 60% { transform: skewX(3deg); } 80% { transform: skewX(-2deg); } }

/* ---------- R2.5 Büyük Sürpriz Kutusu ---------- */
.box-area.size-big { --big: 1.2; transform: scale(var(--big)); margin: calc(var(--box-size) * .08) 0; }
.box-area.size-big.enter { animation: dropInBig .8s var(--ease-bounce) both; }
@keyframes dropInBig { 0% { transform: translateY(-70vh) scale(1); } 70% { transform: translateY(2%) scale(calc(var(--big) * 1.05), calc(var(--big) * .93)); } 100% { transform: scale(var(--big)); } }
/* Yatay ekranda dikey alan dar: kutu yine belirgin büyük ama HUD'a taşmaz */
@media (orientation: landscape) {
  .box-area.size-big { --big: 1.1; margin: calc(var(--box-size) * .03) 0; }
}
/* İlk dokunuştan sonra afiş kalkar, kutuya yer açılır */
.stage.big-tapped .event-banner { visibility: hidden; }
.box-area.size-big .pedestal { background: radial-gradient(ellipse at 50% 35%, #FFFBEA 0%, #FFE58A 55%, #F7C44A 100%); }
.box-area.size-big .box-glow { opacity: .45; }
.box.big-shake .box-shake { animation: bigShake .6s ease-in-out; }
@keyframes bigShake { 15% { transform: translateY(-6%) rotate(-6deg); } 35% { transform: translateY(1%) rotate(5deg) scale(1.04, .96); } 55% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); } }
.box.leak .box-glowseam { opacity: 1; animation: seamFlicker .9s ease-in-out infinite; }
.box.leak .box-lid { transform: translateY(-6px); }
.box.untied .box-ribbon { animation: ribbonOff .5s var(--ease-out) forwards; }
.box.rise .box-shake { transform: translateY(-7%); transition: transform .5s var(--ease-bounce); }
.box-area.rise .box-glow { animation: glowPulse .5s ease-in-out infinite alternate; }
.box-area.rise .box-rays { opacity: .8; animation: spin 6s linear infinite; }
.box.opened[data-open="mega"] .box-lid { animation: megaLid .7s var(--ease-out) forwards; }
@keyframes megaLid { 0% { transform: translateY(-6px); } 100% { transform: translateY(-260%) rotate(-25deg) scale(1.2); opacity: 0; } }

/* ---------- R2.6 Efsane sahneleri (scenes.js → body[data-scene]) ---------- */
.scene-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(circle at 50% 50%, rgba(40, 18, 70, .55), rgba(20, 8, 40, .92));
}
.app-scene { z-index: 2; }
body.legend-charge .app-scene { opacity: 1; }
body.scene-lite.legend-charge .app-scene { opacity: .85; }
.scene-bg > i { position: absolute; display: none; }

body[data-scene="gold"] .scene-bg { background: radial-gradient(circle at 50% 48%, rgba(255, 228, 130, .8) 0%, rgba(214, 120, 20, .82) 45%, rgba(70, 24, 50, .95) 100%); }
body[data-scene="gold"] .sc-rays {
  display: block; left: 50%; top: 48%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax;
  background: repeating-conic-gradient(rgba(255, 240, 170, .3) 0 7deg, transparent 7deg 16deg);
  animation: spin 14s linear infinite;
}
body[data-scene="space"] .scene-bg { background: radial-gradient(circle at 50% 50%, #2E3C94 0%, #141A52 50%, #070A26 100%); }
body[data-scene="space"] .sc-stars {
  display: block; inset: -10%;
  background-image: radial-gradient(#fff 1.5px, transparent 2px), radial-gradient(#BFE9FF 2px, transparent 2.6px), radial-gradient(#FFC9F2 1.4px, transparent 2px);
  background-size: 73px 67px, 131px 119px, 97px 103px;
  background-position: 0 0, 40px 30px, 20px 60px;
  animation: starDrift 6s linear infinite;
}
@keyframes starDrift { to { transform: translate3d(-40px, 30px, 0) scale(1.08); } }
body[data-scene="space"] .sc-clouds {
  display: block; inset: -20%;
  background: radial-gradient(ellipse at 30% 60%, rgba(255, 120, 210, .3), transparent 40%), radial-gradient(ellipse at 72% 38%, rgba(110, 200, 255, .3), transparent 42%);
  animation: nebula 6s ease-in-out infinite alternate;
}
@keyframes nebula { to { transform: rotate(8deg) scale(1.1); } }
body[data-scene="rainbow"] .scene-bg { background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFF1FA 35%, #E6DCFF 100%); }
body[data-scene="rainbow"] .sc-rings {
  display: block; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 107, 139, .32) 0 2%, rgba(255, 154, 77, .32) 2% 4%, rgba(255, 225, 77, .36) 4% 6%, rgba(109, 209, 122, .32) 6% 8%, rgba(88, 183, 255, .32) 8% 10%, rgba(155, 108, 255, .32) 10% 12%, transparent 12% 18%);
  animation: ringsOut 1s ease-in-out infinite alternate;
}
@keyframes ringsOut { from { transform: scale(.9); } to { transform: scale(1.12); } }
body[data-scene="rainbow"] .sc-clouds {
  display: block; inset: 0;
  background: radial-gradient(ellipse at 15% 22%, rgba(255, 255, 255, .95) 0 8%, transparent 9%), radial-gradient(ellipse at 85% 28%, rgba(255, 214, 236, .95) 0 9%, transparent 10%), radial-gradient(ellipse at 18% 82%, rgba(214, 236, 255, .95) 0 10%, transparent 11%), radial-gradient(ellipse at 84% 78%, rgba(255, 246, 200, .95) 0 9%, transparent 10%);
  animation: cloudsBob 1.4s ease-in-out infinite alternate;
}
@keyframes cloudsBob { to { transform: translateY(-2%) scale(1.03); } }
body[data-scene="ice"] .scene-bg { background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #D7F1FF 45%, #7FC2EE 100%); }
body[data-scene="ice"] .sc-frost {
  display: block; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(255, 255, 255, .92) 82%), repeating-conic-gradient(from 10deg at 50% 50%, rgba(255, 255, 255, .22) 0 4deg, transparent 4deg 30deg);
}
body[data-scene="thunder"] .scene-bg { background: radial-gradient(circle at 50% 50%, #6A4CD0 0%, #3A2586 45%, #160C3A 100%); }
body[data-scene="thunder"] .sc-bolt {
  display: block; width: 15vmin; height: 22vmin; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath d='M24 2 L6 34 L19 34 L14 58 L34 22 L21 22 Z' fill='%23FFE14D' stroke='%235B3A6E' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sc-bolt.zap { animation: boltZap .36s ease-out; }
@keyframes boltZap { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 20% { opacity: 1; transform: scale(1.1) rotate(4deg); } 60% { opacity: 1; } 100% { opacity: 0; transform: none; } }
body.quake .app { animation: quake .28s ease-in-out; }
@keyframes quake { 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, -1px); } }

/* Sahneye göre kutu davranışı */
.box-area[data-scene="space"] .box-glow { background: radial-gradient(closest-side, rgba(170, 225, 255, .95), rgba(90, 120, 255, 0)); }
.box-area[data-scene="rainbow"] .box-glow { background: radial-gradient(closest-side, #fff, rgba(255, 160, 220, .6) 50%, rgba(160, 200, 255, 0)); }
.box-area[data-scene="ice"] .box-glow { background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(150, 215, 255, 0)); }
.box-area[data-scene="thunder"] .box-glow { background: radial-gradient(closest-side, rgba(255, 240, 120, .95), rgba(160, 110, 255, 0)); }
.box-area.charging[data-scene="space"] .box-rays, .box-area.charging[data-scene="ice"] .box-rays { opacity: 0; }
.box-area.charging[data-scene="rainbow"] .box-rays { background: repeating-conic-gradient(rgba(255, 154, 162, .75) 0 7deg, transparent 7deg 15deg, rgba(154, 216, 255, .75) 15deg 22deg, transparent 22deg 30deg); }
.box-area.charging[data-scene="thunder"] .box-rays { background: repeating-conic-gradient(rgba(255, 230, 90, .8) 0 4deg, transparent 4deg 24deg); animation-duration: 1.5s; }
.box-area.charging[data-scene="space"] .box { animation: levitate 1.9s ease-in-out forwards; }
@keyframes levitate { to { transform: translateY(-12%); } }
.box-area[data-scene="space"] .box.charging .box-shake { animation: floatWobble 1.1s ease-in-out infinite; }
@keyframes floatWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3%); } }
.box-area[data-scene="rainbow"] .box.charging .box-shake { animation: rainbowBounce .35s ease-in-out infinite; }
@keyframes rainbowBounce { 50% { transform: translateY(-5%) scale(1.04, .96); } }
.box-area[data-scene="ice"] .box.charging .box-shake { animation: charge .18s linear infinite; }
.box-frost {
  position: absolute;
  left: 8%; right: 8%; top: 22%; bottom: 3%;
  border: 4px solid rgba(255, 255, 255, .95);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(200, 236, 255, .6) 45%, rgba(255, 255, 255, .82));
  box-shadow: inset 0 0 30px rgba(120, 200, 255, .7);
  pointer-events: none;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .6s ease, transform .6s var(--ease-out);
}
.box-frost svg { width: 100%; height: 100%; }
.box-frost path { stroke: #6FB8EA; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .45s ease; }
.box-area.charging[data-scene="ice"] .box-frost { opacity: 1; transform: none; }
.box-area.frost-crack .box-frost path { stroke-dashoffset: 0; }

/* Sahneye göre EFSANE yazısı ve flaş */
.legend-text[data-scene="space"] { color: #D6F3FF; --lt-glow: rgba(120, 200, 255, .95); }
.legend-text[data-scene="rainbow"] { color: #FF8CC6; --lt-glow: rgba(255, 160, 220, .95); }
.legend-text.show[data-scene="rainbow"] { animation: legendSlam 1.25s var(--ease-out) forwards, rainbowText .6s linear infinite; }
@keyframes rainbowText { 0% { color: #FF6B8B; } 20% { color: #FF9A4D; } 40% { color: #FFE14D; } 60% { color: #6DD17A; } 80% { color: #58B7FF; } 100% { color: #9B6CFF; } }
.legend-text[data-scene="ice"] { color: #FFFFFF; --lt-glow: rgba(160, 225, 255, .95); }
.legend-text[data-scene="thunder"] { color: #FFE14D; --lt-glow: rgba(255, 230, 90, .95); }
.fx-top[data-scene="space"] .fx-flash { background: #E3F3FF; }
.fx-top[data-scene="rainbow"] .fx-flash { background: #FFF6FC; }
.fx-top[data-scene="ice"] .fx-flash { background: #FFFFFF; }
.fx-top[data-scene="thunder"] .fx-flash { background: #FFFBD0; }

/* ---------- R2.7 Vitrin: efsane sahneleri, girişler, idle, dünya deseni ---------- */
.showcase[data-scene="space"] .showcase-bg { background: radial-gradient(circle at 50% 42%, #5A6BE0 0%, #242A78 45%, #0D1040 100%); }
.showcase[data-scene="space"] .showcase-rays { background: radial-gradient(#fff 1.5px, transparent 2px) 0 0 / 60px 60px, radial-gradient(#BFE9FF 2px, transparent 2.5px) 30px 20px / 110px 110px; animation-duration: 90s; }
.showcase[data-scene="rainbow"] .showcase-bg { background: linear-gradient(135deg, #FFB3C6, #FFD9A8, #FFF4A3, #B8EFC8, #A8DCFF, #CDB8FF); }
.showcase[data-scene="rainbow"] .showcase-rays { background: repeating-conic-gradient(rgba(255, 255, 255, .5) 0 8deg, transparent 8deg 18deg); }
.showcase[data-scene="ice"] .showcase-bg { background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #CFEFFF 45%, #6FB8EA 100%); }
.showcase[data-scene="ice"] .showcase-rays { background: repeating-conic-gradient(rgba(255, 255, 255, .6) 0 3deg, transparent 3deg 30deg); animation-duration: 60s; }
.showcase[data-scene="thunder"] .showcase-bg { background: radial-gradient(circle at 50% 42%, #FFF6B0 0%, #9A7BFF 40%, #2C1A6E 100%); }
.showcase[data-scene="thunder"] .showcase-rays { background: repeating-conic-gradient(rgba(255, 230, 90, .45) 0 5deg, transparent 5deg 22deg); animation-duration: 10s; }
.showcase[data-scene="space"] .showcase-char .ch-svg { filter: drop-shadow(0 0 18px rgba(150, 220, 255, .95)); }
.showcase[data-scene="rainbow"] .showcase-char .ch-svg { filter: drop-shadow(0 0 18px rgba(255, 170, 230, .95)); }
.showcase[data-scene="ice"] .showcase-char .ch-svg { filter: drop-shadow(0 0 18px rgba(170, 225, 255, .95)); }
.showcase[data-scene="thunder"] .showcase-char .ch-svg { filter: drop-shadow(0 0 18px rgba(255, 230, 90, .95)); }
.showcase[data-scene="space"] .showcase-aura { background: conic-gradient(#9EE7FF, #C9B6FF, #FF9AD5, #2E3C94, #9EE7FF); }
.showcase[data-scene="ice"] .showcase-aura { background: conic-gradient(#FFFFFF, #CFF1FF, #9ED8FF, #FFFFFF, #B8A6FF, #FFFFFF); }
.showcase[data-scene="thunder"] .showcase-aura { background: conic-gradient(#FFE14D, #9B6CFF, #FFE14D, #FFFFFF, #FFE14D); }

/* Efsane girişleri (altın = R1 popInLegend) */
.showcase.show[data-scene="space"] .showcase-char { animation: floatInChar 1s var(--ease-out) both; }
@keyframes floatInChar { 0% { transform: translateY(40%) scale(.3); opacity: 0; } 60% { transform: translateY(-6%) scale(1.08); opacity: 1; } 100% { transform: none; } }
.showcase.show[data-scene="rainbow"] .showcase-char { animation: rainbowIn .9s var(--ease-bounce) both; }
@keyframes rainbowIn { 0% { transform: translateX(-60%) scale(.3) rotate(-30deg); } 60% { transform: translateX(6%) scale(1.1) rotate(6deg); } 100% { transform: none; } }
.showcase.show[data-scene="ice"] .showcase-char { animation: iceIn .9s var(--ease-out) both; }
@keyframes iceIn { 0% { transform: scale(1.6); opacity: 0; } 40% { opacity: 1; } 70% { transform: scale(.94); } 100% { transform: none; } }
.showcase.show[data-scene="thunder"] .showcase-char { animation: zapIn .75s ease-out both; }
@keyframes zapIn { 0% { transform: scale(0); } 12% { transform: scale(1.2) translate(3%, -2%); } 24% { transform: scale(.95) translate(-3%, 2%); } 36% { transform: scale(1.05) translate(2%, 1%); } 50% { transform: scale(.98); } 100% { transform: none; } }

/* Efsane olmayanlar için giriş çeşitleri */
.showcase.show[data-entrance="bounce"] .showcase-char { animation: bounceInChar .8s var(--ease-out) both; }
@keyframes bounceInChar { 0% { transform: translateY(60%) scale(.4, .6); } 45% { transform: translateY(-14%) scale(.9, 1.12); } 65% { transform: scale(1.12, .88); } 82% { transform: scale(.97, 1.03); } 100% { transform: none; } }
.showcase.show[data-entrance="spin"] .showcase-char { animation: spinInChar .8s var(--ease-out) both; }
@keyframes spinInChar { 0% { transform: scale(0) rotate(-360deg); } 70% { transform: scale(1.1) rotate(10deg); } 100% { transform: none; } }
.showcase.show[data-entrance="drop"] .showcase-char { animation: dropInChar .75s var(--ease-bounce) both; }
@keyframes dropInChar { 0% { transform: translateY(-120%) scale(.8); } 70% { transform: translateY(4%) scale(1.06, .94); } 100% { transform: none; } }
.showcase.show[data-entrance="slide"] .showcase-char { animation: slideInChar .75s var(--ease-bounce) both; }
@keyframes slideInChar { 0% { transform: translateX(-130%) rotate(-25deg); } 70% { transform: translateX(5%) rotate(5deg); } 100% { transform: none; } }

/* Efsane idle animasyonları */
.showcase[data-idle="float"] .ch-body { animation: idleFloat 3s ease-in-out infinite; }
@keyframes idleFloat { 50% { transform: translateY(-5%) rotate(2deg); } }
.showcase[data-idle="sway"] .ch-body { transform-origin: 50% 90%; animation: idleSway 2.4s ease-in-out infinite; }
@keyframes idleSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-2%); } }
.showcase[data-idle="shimmer"] .ch-body { animation: idleShimmer 2.6s ease-in-out infinite; }
@keyframes idleShimmer { 0%, 100% { transform: none; } 45% { transform: scale(1.04) rotate(-2deg); } 55% { transform: scale(1.04) rotate(2deg); } }
.showcase[data-idle="buzz"] .ch-body { animation: idleBuzz 1.8s ease-in-out infinite; }
@keyframes idleBuzz { 0%, 60%, 100% { transform: none; } 64% { transform: translateX(-2%) rotate(-3deg); } 68% { transform: translateX(2%) rotate(3deg); } 72% { transform: translateX(-1%); } }

/* Dünyaya göre hafif vitrin deseni (efsane dışı) */
.showcase:not([data-scene]) .showcase-bg::after { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none; }
.showcase[data-world="sweets"]:not([data-scene]) .showcase-bg::after { background-image: radial-gradient(#FF8FC0 3px, transparent 3.5px), radial-gradient(#FFE070 3px, transparent 3.5px); background-size: 70px 70px, 90px 90px; background-position: 0 0, 35px 45px; }
.showcase[data-world="animals"]:not([data-scene]) .showcase-bg::after { background-image: radial-gradient(#fff 6px, transparent 6.5px), radial-gradient(#fff 3px, transparent 3.5px); background-size: 110px 110px, 110px 110px; background-position: 0 0, 14px -12px; }
.showcase[data-world="sky"]:not([data-scene]) .showcase-bg::after { background-image: radial-gradient(#fff 2.5px, transparent 3px), radial-gradient(#FFF4A3 2px, transparent 2.5px); background-size: 60px 60px, 95px 95px; background-position: 0 0, 30px 40px; }
.showcase[data-world="nature"]:not([data-scene]) .showcase-bg::after { background-image: radial-gradient(7px 12px at 50% 50%, rgba(79, 181, 100, .55) 90%, transparent); background-size: 90px 90px; }
.showcase[data-world="holiday"]:not([data-scene]) .showcase-bg::after { background-image: radial-gradient(#FF5F7A 3px, transparent 3.5px), radial-gradient(#6DD17A 3px, transparent 3.5px), radial-gradient(#fff 3px, transparent 3.5px); background-size: 80px 80px, 100px 100px, 60px 60px; background-position: 0 0, 40px 30px, 20px 50px; }

/* ---------- R2.8 Tekrar kilometre taşları ---------- */
.reveal-tag.is-milestone { background: linear-gradient(90deg, #FFD23F, #FF9A3C); font-size: var(--fs-m); }
.reveal-tag.m-sparkle { background: linear-gradient(90deg, #B9A6FF, #FF8FC0); }
.reveal-tag.m-silver { background: linear-gradient(90deg, #C9D3E0, #8E9BB0); }
.reveal-tag.m-gold { background: linear-gradient(90deg, #FFD23F, #F2A900); }
.reveal-tag.m-prism { background: linear-gradient(90deg, #FF8FB8, #FFC93C, #58B7FF, #9B6CFF); }
.count-pill { display: inline-flex; align-items: center; gap: 6px; }
.tier-icon { width: 1.15em; height: 1.15em; flex: none; }
.tier-icon.t-sparkle path { fill: #FFF4B8; }
.tier-icon.t-silver path { fill: #DCE3EC; }
.tier-icon.t-gold path { fill: #FFD23F; }
.tier-icon.t-prism path { fill: #FF9AD5; }
.count-pill.tier-silver { background: linear-gradient(180deg, #FFFFFF, #DCE3EC); }
.count-pill.tier-gold { background: linear-gradient(180deg, #FFF6C2, #FFD23F); }
.count-pill.tier-prism { background: linear-gradient(90deg, #FFD6E0, #FFF4C2, #D2ECFF, #E6DBFF); }
.showcase[data-tier] .showcase-art::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--char-size) * 1.08);
  height: calc(var(--char-size) * 1.08);
  margin: calc(var(--char-size) * -.54) 0 0 calc(var(--char-size) * -.54);
  border-radius: 50%;
  pointer-events: none;
}
.showcase[data-tier="sparkle"] .showcase-art::after { border: 5px dashed rgba(255, 255, 255, .85); animation: spin 20s linear infinite; }
.showcase[data-tier="silver"] .showcase-art::after { border: 9px solid #DCE3EC; box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 4px var(--ink); }
.showcase[data-tier="gold"] .showcase-art::after { border: 9px solid #FFD23F; box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 4px var(--ink), 0 0 30px 8px rgba(255, 210, 63, .7); }
.showcase[data-tier="prism"] .showcase-art::after {
  background: conic-gradient(#FF8FB8, #FFC93C, #6DD17A, #58B7FF, #9B6CFF, #FF8FB8);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  animation: spin 4s linear infinite;
}

.card-count { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.card-meta .rarity-icon { flex: none; }
.card-count .tier-icon { width: 15px; height: 15px; }
.card.tier-sparkle .card-art::before {
  content: "";
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  background: #FFE14D;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 2.2s ease-in-out infinite;
}
.card.tier-silver { box-shadow: 0 0 0 5px #D3DBE6, 0 9px 0 5px var(--ink); }
.card.tier-gold { box-shadow: 0 0 0 5px #FFD23F, 0 0 14px 6px rgba(255, 210, 63, .55), 0 9px 0 5px var(--ink); }
.card.tier-prism { box-shadow: 0 0 0 4px #FF9AD5, 0 0 0 8px #9AD8FF, 0 0 20px 8px rgba(255, 220, 120, .7), 0 11px 0 8px var(--ink); animation: prismGlow 1.8s ease-in-out infinite alternate; }
@keyframes prismGlow { to { box-shadow: 0 0 0 4px #9AD8FF, 0 0 0 8px #FFE08A, 0 0 26px 10px rgba(255, 150, 220, .7), 0 11px 0 8px var(--ink); } }

/* ---------- R2.9 Albüm: 6 sayfalık çıkartma kitabı ---------- */
.album {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
}
.page-arrow {
  width: clamp(58px, 8.5vmin, 86px);
  height: clamp(58px, 8.5vmin, 86px);
  display: grid;
  place-items: center;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  box-shadow: var(--shadow-toy);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.page-arrow svg { width: 58%; height: 58%; }
.page-arrow:active { transform: translateY(4px); box-shadow: var(--shadow-toy-press); }
.album-page {
  --wc: #FF6FA8;
  --ws: #FFE6F1;
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) 0 calc(var(--sp-3) + 16px);
  border: 5px solid var(--ink);
  border-radius: var(--rad-l);
  background-color: var(--ws);
  background-image: radial-gradient(rgba(255, 255, 255, .75) 3px, transparent 3.5px);
  background-size: 30px 30px;
  box-shadow: 0 8px 0 var(--ink);
  overflow: hidden;
  touch-action: pan-y;
}
.album-page::before {
  content: "";
  position: absolute;
  left: 12px; top: 18px; bottom: 18px;
  border-left: 4px dashed rgba(91, 58, 110, .22);
}
.album-page[data-world="sweets"] { --wc: #FF5FA2; --ws: #FFE6F1; }
.album-page[data-world="animals"] { --wc: #FF8A2A; --ws: #FFEEDD; }
.album-page[data-world="sky"] { --wc: #4F6FF5; --ws: #E4EAFF; }
.album-page[data-world="nature"] { --wc: #2FA85D; --ws: #E0F8E7; }
.album-page[data-world="holiday"] {
  --wc: #E8323F; --ws: #FFEDE6;
  background-image: radial-gradient(#FF8F9A 3px, transparent 3.5px), radial-gradient(#6DD17A 3px, transparent 3.5px), radial-gradient(#FFD23F 3px, transparent 3.5px);
  background-size: 60px 60px, 76px 76px, 46px 46px;
  background-position: 0 0, 30px 20px, 12px 36px;
}
.album-page[data-world="legends"] { --wc: #E88A00; --ws: #FFF3C8; background-image: radial-gradient(rgba(255, 200, 40, .5) 3px, transparent 3.5px); }
.page-head { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.page-icon .world-icon { width: clamp(40px, 6vmin, 56px); height: clamp(40px, 6vmin, 56px); }
.page-title { min-width: 0; font-size: var(--fs-l); font-weight: 900; color: var(--wc); text-shadow: 0 3px 0 var(--ink); line-height: 1.05; }
.page-progress {
  margin-left: auto;
  flex: none;
  padding: 4px 14px;
  border: 4px solid var(--ink);
  border-radius: var(--rad-pill);
  background: #fff;
  font-size: var(--fs-m);
  font-weight: 900;
  white-space: nowrap;
}
.page-progress.done { background: var(--sun); }
.album-page.turn-next { animation: pageNext .38s var(--ease-out); }
.album-page.turn-prev { animation: pagePrev .38s var(--ease-out); }
@keyframes pageNext { from { transform: translateX(8%) rotate(1.5deg); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes pagePrev { from { transform: translateX(-8%) rotate(-1.5deg); opacity: .2; } to { transform: none; opacity: 1; } }

.grid {
  --cols: 3;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: var(--sp-3);
  align-content: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 10px 24px;
}
@media (orientation: landscape) { .grid { --cols: 5; } }

.page-dots { display: flex; justify-content: center; gap: var(--sp-2); padding: 2px 0 4px; flex: none; }
.page-dot {
  position: relative;
  width: clamp(52px, 7.5vmin, 68px);
  height: clamp(52px, 7.5vmin, 68px);
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 0 var(--ink);
  opacity: .72;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.page-dot .world-icon { width: 70%; height: 70%; }
.page-dot.active { opacity: 1; transform: scale(1.12); background: var(--sun); }
.page-dot.done::after {
  content: "";
  position: absolute; right: -4px; top: -4px; width: 20px; height: 20px;
  background: #FFE14D;
  border: 3px solid var(--ink);
  border-radius: 50%;
}

/* ---------- R2.10 Duyarlı düzen ---------- */
@media (max-width: 700px) {
  .bm-label { display: none; }
}
@media (max-width: 480px), (max-height: 520px) {
  .card-meta .card-rarity { display: none; }
  .card-meta { justify-content: space-between; }
  .card { padding: 6px 5px 8px; border-width: 4px; }
  .card-count { padding: 1px 6px; font-size: 11px; }
  .card-name { font-size: 13px; }
}
@media (max-width: 480px) {
  .bm-dots { display: none; }
  .bm-gift { width: 34px; height: 34px; }
  .album { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .album-page { grid-column: 1 / -1; grid-row: 1; padding-left: var(--sp-3); }
  .album-page::before { display: none; }
  .page-arrow { grid-row: 2; width: 56px; height: 56px; }
  .page-arrow.prev { justify-self: start; }
  .page-arrow.next { justify-self: end; }
  .grid { gap: var(--sp-2); padding: 8px 6px 16px; }
  .page-dot { width: 46px; height: 46px; }
  .page-dots { gap: 6px; }
}
@media (max-height: 520px) {
  .bm-label, .bm-dots { display: none; }
  .page-dot { width: 42px; height: 42px; }
  .page-head .page-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bgt::before, .bgt::after, .scene-bg > i, .box-bulb, .big-meter.ready, .big-meter.ready .bm-gift,
  .card.tier-prism, .card.tier-sparkle .card-art::before, .showcase[data-tier] .showcase-art::after,
  .showcase[data-idle] .ch-body, .box[data-open="grow"].cue .box-svg, .box[data-open="untie"].cue .box-ribbon { animation: none !important; }
  body.quake .app { animation: none; }
}

/* ---------- 12. Duyarlı düzen ---------- */

/* Yatay tablet: karakter solda, bilgi sağda */
@media (orientation: landscape) and (min-width: 700px) {
  .showcase-body { flex-direction: row; justify-content: center; gap: clamp(24px, 6vw, 90px); }
  .showcase-info { align-items: flex-start; text-align: left; max-width: 44vw; }
  .showcase-meta { justify-content: flex-start; }
  :root { --char-size: clamp(200px, min(64vh, 44vw), 470px); }
  .reveal .double-banner ~ .showcase-body { margin-top: 40px; }
}

/* Alçak ekranlar (yatay telefon) */
@media (max-height: 520px) {
  :root { --hud-space: 190px; --tap: 48px; }
  .icon-btn { width: 52px; height: 52px; }
  .collection-btn { min-height: 58px; }
  .collection-btn svg { width: 36px; height: 36px; }
  .logo-a, .logo-b { font-size: 22px; }
  .hint { font-size: 26px; }
  .stage { gap: 8px; }
  .big-btn { min-height: 62px; }
  .showcase-desc { display: none; }
  .event-banner { font-size: 18px; padding: 4px 16px; }
}

/* Dikey telefon / dar ekran */
@media (max-width: 560px) {
  .collection-label { font-size: 17px; }
  .col-title h2 { font-size: 22px; }
  .progress { min-width: 140px; }
  .icon-btn { width: 56px; height: 56px; }
}

/* Dikey tablet / telefon: kutu daha büyük olabilir */
@media (orientation: portrait) {
  :root { --box-size: clamp(170px, min(74vw, calc((100vh - var(--hud-space)) * .78)), 480px); --char-size: clamp(180px, min(40vh, 72vw), 420px); }
}

/* ---------- 13. Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-cloud, .box-svg, .hint, .box-twinkle, .showcase-rays, .showcase .ch-body, .card.r-legend::before,
  .big-btn.ready, .event-banner, .showcase-aura { animation: none !important; }
  .box.charging .box-shake, .orb.show.charging { animation-duration: .25s; }
  .box-area.charging .box-rays { animation: none; }
}

/* Rozet içindeki ikon beyaz dolgu ile rozet renginden ayrışır */
.rarity-badge .rarity-icon * { fill: #fff; stroke: rgba(91, 58, 110, .35); }