/* =========================================================================
 * style.css  —  Color Flow Puzzle görsel katmanı (mobil-öncelikli, dikey)
 * ========================================================================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --tube-w: 52px;
  --tube-h: 160px;
  --radius: 16px;
  --ink: #f4f1ff;
  --muted: #b9b3d6;
  --card: rgba(20, 16, 46, 0.92);
  --glass-border: rgba(255,255,255,0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html, body { height: 100%; margin: 0; }
body {
  color: var(--ink);
  background: radial-gradient(circle at 50% 0%, #2d1b52, #1a1440 70%);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  transition: background 0.6s ease;
}
button { font-family: inherit; cursor: pointer; border: none; color: var(--ink); }

#app { height: 100%; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; position: relative; z-index: 1; }

/* ---- Prosedürel arka plan (aurora blob + kabarcık) ---- */
#bgfx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#bgfx .blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
  mix-blend-mode: screen; will-change: transform;
}
#bgfx .b1 { width: 60vw; height: 60vw; left: -15vw; top: -10vh;
  background: radial-gradient(circle, #7c4dff, transparent 65%); animation: drift1 22s ease-in-out infinite; }
#bgfx .b2 { width: 55vw; height: 55vw; right: -18vw; top: 25vh;
  background: radial-gradient(circle, #00b8d4, transparent 65%); animation: drift2 26s ease-in-out infinite; }
#bgfx .b3 { width: 50vw; height: 50vw; left: 10vw; bottom: -15vh;
  background: radial-gradient(circle, #f50057, transparent 65%); animation: drift3 30s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: translate(12vw, 8vh) scale(1.15); } }
@keyframes drift2 { 50% { transform: translate(-10vw, -6vh) scale(1.1); } }
@keyframes drift3 { 50% { transform: translate(8vw, -10vh) scale(1.2); } }

#bgfx .bubbles { position: absolute; inset: 0; }
#bgfx .bubbles span {
  position: absolute; bottom: -40px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0.05));
  animation: rise linear infinite; opacity: 0;
}
#bgfx .bubbles span:nth-child(1){ left: 8%;  width: 10px; height: 10px; animation-duration: 14s; animation-delay: 0s; }
#bgfx .bubbles span:nth-child(2){ left: 20%; width: 18px; height: 18px; animation-duration: 19s; animation-delay: 3s; }
#bgfx .bubbles span:nth-child(3){ left: 33%; width: 8px;  height: 8px;  animation-duration: 12s; animation-delay: 6s; }
#bgfx .bubbles span:nth-child(4){ left: 46%; width: 22px; height: 22px; animation-duration: 23s; animation-delay: 1s; }
#bgfx .bubbles span:nth-child(5){ left: 58%; width: 12px; height: 12px; animation-duration: 16s; animation-delay: 4s; }
#bgfx .bubbles span:nth-child(6){ left: 70%; width: 9px;  height: 9px;  animation-duration: 13s; animation-delay: 7s; }
#bgfx .bubbles span:nth-child(7){ left: 82%; width: 16px; height: 16px; animation-duration: 20s; animation-delay: 2s; }
#bgfx .bubbles span:nth-child(8){ left: 90%; width: 11px; height: 11px; animation-duration: 17s; animation-delay: 5s; }
#bgfx .bubbles span:nth-child(9){ left: 62%; width: 7px;  height: 7px;  animation-duration: 11s; animation-delay: 8s; }
@keyframes rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-105vh) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #bgfx .blob, #bgfx .bubbles span { animation: none; }
}
/* Üretilmiş (AI) arka plan varsa: blob'ları kıs + okunurluk için hafif karartma */
body.has-genbg #bgfx .blob { opacity: 0.2; }
body.has-genbg #bgfx::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
  pointer-events: none;
}

/* ---- Üst bar ---- */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0) + 10px) 14px 10px;
  gap: 8px;
}
.topbtn {
  background: rgba(255,255,255,0.12); border-radius: 12px;
  width: 42px; height: 42px; font-size: 20px; position: relative;
  backdrop-filter: blur(6px);
}
.topbtn:active { transform: scale(0.92); }
.top-right { display: flex; gap: 8px; }
.coin-pill {
  background: linear-gradient(180deg, #ffd740, #ffab00); color: #4a2e00;
  font-weight: 800; padding: 8px 16px; border-radius: 20px; font-size: 16px;
  box-shadow: 0 4px 12px rgba(255,171,0,0.35);
}
.badge-dot {
  position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
  background: #ff5252; border-radius: 50%; display: none;
  box-shadow: 0 0 0 2px #1a1440; animation: pulse 1.2s infinite;
}
@keyframes pulse { 50% { transform: scale(1.35); } }

/* ---- Ekran ---- */
.screen { flex: 1; overflow-y: auto; padding: 8px 16px 20px; }

/* ---- Harita ---- */
.map-header { text-align: center; margin: 10px 0 6px; }
.logo { width: 92px; height: 92px; display: block; margin: 2px auto 8px;
  border-radius: 22px; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45)); }
.title {
  font-size: 40px; margin: 0; font-weight: 900; letter-spacing: -1px;
  background: linear-gradient(180deg, #fff, #b388ff); -webkit-background-clip: text;
  background-clip: text; color: transparent; line-height: 1;
}
.title span { display: block; font-size: 22px; background: linear-gradient(90deg,#40c4ff,#69f0ae);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { color: var(--muted); font-size: 14px; margin-top: 6px; }

.btn {
  background: rgba(255,255,255,0.12); border-radius: 14px; padding: 14px 18px;
  font-size: 16px; font-weight: 700; width: 100%; margin-top: 12px;
  transition: transform 0.08s ease, filter 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: linear-gradient(180deg, #7c4dff, #6200ea); box-shadow: 0 8px 20px rgba(98,0,234,0.4); }
.btn.big { font-size: 20px; padding: 18px; }
.btn.ghost { background: rgba(255,255,255,0.09); }
.btn.danger { background: linear-gradient(180deg,#ff5252,#c62828); }
.btn.reward-ad { background: linear-gradient(180deg,#00c853,#009624); }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.row-btns .btn { flex: 1 1 40%; margin-top: 10px; font-size: 15px; padding: 12px 10px; }
.row-btns .btn small { opacity: 0.7; font-weight: 700; }

.level-path { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 0 40px; }
.level-node {
  width: 62px; height: 62px; border-radius: 50%; font-weight: 800;
  background: linear-gradient(180deg, #7c4dff, #4a1e9e);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; flex: 0 0 auto;
}
.level-node .num { font-size: 18px; }
.level-node .stars { font-size: 9px; color: #ffd740; letter-spacing: -1px; margin-top: 1px; }
.level-node.locked { background: rgba(255,255,255,0.08); color: var(--muted); box-shadow: none; }
.level-node.done { background: linear-gradient(180deg,#00c853,#00863a); }
.level-node:active:not(.locked) { transform: scale(0.9); }

/* ---- Oyun ekranı ---- */
.game-screen { display: flex; flex-direction: column; padding: 0 12px 12px; }
.game-top { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.icon-btn {
  background: rgba(255,255,255,0.12); border-radius: 12px; width: 44px; height: 44px;
  font-size: 22px; font-weight: 700;
}
.icon-btn:active { transform: scale(0.9); }
.hud { flex: 1; display: flex; justify-content: space-around;
  background: rgba(0,0,0,0.2); border-radius: 14px; padding: 8px; }
.hud-item { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.hud-lbl { font-size: 11px; color: var(--muted); }
.hud-item span:last-child { font-size: 17px; font-weight: 800; }

/* ---- Tahta / tüpler ---- */
.board {
  flex: 1; display: flex; flex-wrap: wrap; align-content: center;
  justify-content: center; gap: 14px 18px; position: relative;
  padding: 20px 4px; min-height: 340px;
}
.tube {
  width: var(--tube-w); height: var(--tube-h); position: relative;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
}
/* test tüpü ağız kenarı (eliptik rim) */
.tube::before {
  content: ""; position: absolute; top: -3px; left: -1px; right: -1px; height: 11px;
  border-radius: 50%; box-sizing: border-box; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04));
  border: 2px solid var(--glass-border);
}
.glass {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  display: flex; flex-direction: column-reverse;
  border: 3px solid var(--glass-border);
  border-top: none;
  border-radius: 6px 6px calc(var(--tube-w) / 2) calc(var(--tube-w) / 2);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.08), 0 6px 14px rgba(0,0,0,0.3);
}
/* cam parlaması */
.glass::after {
  content: ""; position: absolute; top: 0; left: 6px; width: 8px; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05));
  border-radius: 8px; pointer-events: none; z-index: 2;
}
/* ikincil ince yansıma (sağ) */
.glass::before {
  content: ""; position: absolute; top: 4px; right: 5px; width: 3px; height: 92%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  border-radius: 4px; pointer-events: none; z-index: 2;
}
.layer {
  width: 100%; transition: height 0.34s cubic-bezier(.22,1,.36,1);
  position: relative;
}
/* dökülürken kaynağın üstünde boşalan hayalet katmanlar */
.layer.draining { transition: height 0.46s cubic-bezier(.5,0,.6,.25); z-index: 1; }
/* renk körlüğü modu: her katmanda ayırt edici sembol */
.layer .sym {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--tube-w) * 0.4); line-height: 1; font-weight: 800; z-index: 2;
  color: rgba(255,255,255,0.96); pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.7);
}
/* her katmanda yatay cam parlaması (parlak sıvı hissi) */
.layer::before {
  content: ""; position: absolute; top: 8%; left: 10%; right: 10%; height: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0));
  border-radius: 50%; pointer-events: none;
}
/* alt katmanları ayıran ince gölge çizgisi */
.layer::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: rgba(0,0,0,0.10); pointer-events: none;
}
/* en üstteki sıvı yüzeyi: kavisli meniscus + hafif boşta dalga */
.layer.top {
  box-shadow: inset 0 5px 8px rgba(255,255,255,0.28);
  overflow: visible;
}
.layer.top::after {
  height: 7px; bottom: auto; top: -3px; left: 6%; right: 6%;
  background: rgba(255,255,255,0.45);
  border-radius: 50%; filter: blur(0.6px);
  animation: meniscus 3.2s ease-in-out infinite;
}
@keyframes meniscus {
  0%,100% { transform: translateY(0) scaleX(1); opacity: 0.85; }
  50%     { transform: translateY(1.5px) scaleX(0.94); opacity: 0.6; }
}
.tube.selected { transform: translateY(-18px) scale(1.04); }
.tube.selected .glass { border-color: #ffd740; box-shadow: 0 0 18px rgba(255,215,64,0.6); }
.tube.complete .glass { border-color: #69f0ae; }
.tube.pouring { transform: translateY(-26px) rotate(var(--tilt, -14deg)); z-index: 4;
  transition: transform 0.28s ease-in-out; }
.tube.glow .glass { animation: tubeGlow 0.7s ease; }
@keyframes tubeGlow {
  0%,100% { box-shadow: 0 0 0 rgba(105,240,174,0); }
  50% { box-shadow: 0 0 28px rgba(105,240,174,0.9); border-color: #69f0ae; }
}
.tube.wobble { animation: wob 0.4s ease; }
@keyframes wob { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.tube.hint-from .glass { animation: hintPulse 0.7s infinite; border-color: #ffd740; }
.tube.hint-to .glass { animation: hintPulse 0.7s infinite; border-color: #40c4ff; }
@keyframes hintPulse { 50% { box-shadow: 0 0 20px currentColor; } }

/* SVG akış yayı (kaynaktan hedefe akan sıvı) */
.pour-svg {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.35));
}
.pour-svg path { opacity: 0.95; }
/* hedef ağzındaki sıçrama damlaları */
.droplet {
  position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  z-index: 7; pointer-events: none; opacity: 0; animation: droplet 0.55s ease-out forwards;
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
}
@keyframes droplet {
  0% { opacity: 0.95; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--ddx), var(--ddy)) scale(0.3); }
}
.confetti {
  position: absolute; width: 8px; height: 8px; border-radius: 2px; z-index: 6;
  animation: confetti 0.9s ease-out forwards; pointer-events: none;
}
@keyframes confetti {
  to { transform: translate(var(--dx), var(--dy)) rotate(360deg); opacity: 0; }
}

/* ---- Booster bar ---- */
.booster-bar { display: flex; gap: 8px; padding: 10px 0 4px; }
.booster {
  flex: 1; background: rgba(255,255,255,0.1); border-radius: 14px;
  padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.booster:active { transform: scale(0.94); }
.bicon { font-size: 20px; }
.bname { font-size: 11px; color: var(--muted); }
.bcount { font-size: 12px; font-weight: 800; background: rgba(0,0,0,0.35);
  padding: 1px 7px; border-radius: 10px; min-width: 20px; text-align: center; }
.bcount.buy { color: #ffd740; }

/* ---- Modal ---- */
#modal-root {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-inner { width: 100%; max-width: 420px; animation: pop 0.25s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.modal-card {
  background: var(--card); border-radius: 22px; padding: 20px;
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.modal-card.scroll { max-height: 82vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 22px; }
.modal-card h3 { color: var(--muted); font-size: 14px; margin: 16px 0 8px; }
.note { color: var(--muted); font-size: 12px; margin-top: 12px; text-align: center; }

/* ---- Kazanma ---- */
.win-card {
  background: var(--card); border-radius: 24px; padding: 28px 22px; text-align: center;
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.win-card h2 { margin: 0 0 12px; font-size: 24px; }
.win-stars { font-size: 44px; margin: 6px 0; }
.win-stars .ws { color: rgba(255,255,255,0.2); display: inline-block; }
.win-stars .ws.on { color: #ffd740; animation: starPop 0.4s ease backwards; text-shadow: 0 0 16px rgba(255,215,64,0.8); }
.win-stars .ws.on:nth-child(2) { animation-delay: 0.12s; }
.win-stars .ws.on:nth-child(3) { animation-delay: 0.24s; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } }
.win-reward { font-size: 28px; font-weight: 900; color: #ffd740; margin: 8px 0; }
.win-meta { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.win-actions { display: flex; gap: 8px; margin-top: 10px; }
.win-actions .btn { margin-top: 0; }

/* ---- Reklam (sahte) ---- */
.ad-card { background: var(--card); border-radius: 20px; padding: 20px; text-align: center; }
.ad-tag { font-size: 11px; color: var(--muted); text-align: left; margin-bottom: 8px; }
.ad-body {
  height: 200px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#3d5afe,#7c4dff); border-radius: 14px;
  font-size: 18px; margin-bottom: 14px;
}

/* ---- Mağaza ---- */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-item {
  background: rgba(255,255,255,0.09); border-radius: 14px; padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative;
}
.shop-item.small { flex-direction: row; justify-content: space-between; }
.shop-item.wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 10px; }
.shop-item:active { transform: scale(0.96); }
.si-coins { font-size: 18px; font-weight: 800; }
.si-price { background: linear-gradient(180deg,#00c853,#009624); padding: 4px 12px; border-radius: 12px; font-weight: 800; font-size: 14px; }
.si-badge { position: absolute; top: -8px; font-size: 10px; background: #ff5252; padding: 2px 8px; border-radius: 8px; }

/* ---- Ayarlar ---- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.toggle-row input { display: none; }
.switch { width: 48px; height: 28px; background: rgba(255,255,255,0.2); border-radius: 20px; position: relative; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle-row input:checked ~ .switch { background: #00c853; }
.toggle-row input:checked ~ .switch::after { transform: translateX(20px); }
.mode-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; }
.seg { display: flex; background: rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; }
.seg button { padding: 8px 16px; background: transparent; font-weight: 700; }
.seg button.on { background: #7c4dff; }

/* ---- Günlük ---- */
.days-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.day-cell { background: rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 4px; text-align: center; position: relative; }
.day-cell.claimed { opacity: 0.5; }
.day-cell.today { background: linear-gradient(180deg,#7c4dff,#6200ea); box-shadow: 0 0 16px rgba(124,77,255,0.6); }
.day-num { font-size: 12px; color: var(--muted); }
.day-rew { font-size: 14px; font-weight: 800; margin-top: 4px; }
.day-check { position: absolute; top: 4px; right: 6px; color: #69f0ae; font-weight: 800; }

/* ---- Başarımlar ---- */
.ach-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,0.07); opacity: 0.55; }
.ach-row.done { opacity: 1; }
.ach-icon { font-size: 26px; width: 34px; text-align: center; }
.ach-txt { flex: 1; display: flex; flex-direction: column; }
.ach-txt b { font-size: 15px; }
.ach-txt span { font-size: 12px; color: var(--muted); }
.ach-state { font-size: 18px; }

/* ---- Yükleme + toast ---- */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(10,8,26,0.85); z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: var(--ink); font-size: 15px;
}
.spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,0.2); border-top-color: #7c4dff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(20,16,46,0.96); padding: 12px 22px; border-radius: 20px; font-weight: 700;
  z-index: 300; opacity: 0; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); max-width: 90%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Mağaza satırları (coin / reklam) + banner ---- */
.shop-row { display: flex; align-items: center; gap: 8px; padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sr-name { flex: 1; font-size: 14px; }
.sr-name i { color: var(--muted); font-size: 11px; font-style: normal; }
.buy-coin { background: linear-gradient(180deg,#ffd740,#ffab00); color:#4a2e00; font-weight:800;
  padding:9px 13px; border-radius:12px; font-size:13px; white-space:nowrap; }
.buy-coin:active { transform: scale(0.95); }
.buy-coin.done, .buy-coin:disabled { background: rgba(255,255,255,0.12); color: var(--muted); }
.shop-ad { background: linear-gradient(180deg,#00c853,#009624); font-weight:800;
  padding:9px 13px; border-radius:12px; font-size:13px; white-space:nowrap; }
.shop-ad:active { transform: scale(0.95); }
.shop-ad.locked { background: rgba(255,255,255,0.08); color: var(--muted); }
/* gerçek-para (Google Play) butonu — mavi, ayırt edici */
.iap-btn { background: linear-gradient(180deg,#1a73e8,#1257c7); color:#fff; font-weight:800;
  padding:9px 14px; border-radius:12px; font-size:13px; white-space:nowrap;
  box-shadow: 0 3px 10px rgba(26,115,232,0.4); }
.iap-btn:active { transform: scale(0.95); }
.iap-body { text-align:center; padding:16px 8px; }
.iap-icon { font-size:52px; }
.iap-name { font-size:18px; font-weight:800; margin-top:6px; }
.iap-price { font-size:24px; font-weight:900; color:#8ab4f8; margin:4px 0; }
.iap-note { font-size:12px; color:var(--muted); margin-top:6px; }
.cd { font-variant-numeric: tabular-nums; }
.ad-actions { display: flex; gap: 8px; justify-content: center; }
.ad-actions .btn { margin-top: 0; }
.ad-id { font-size: 9px; opacity: 0.55; display: block; margin-top: 2px; word-break: break-all; }
.banner-ad { position: sticky; bottom: 0; margin: 18px -16px -20px; padding: 10px;
  text-align: center; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: var(--muted);
  display: flex; flex-direction: column; gap: 2px; z-index: 5; }
.banner-ad .ad-tag { text-align: center; margin: 0; font-size: 10px; }

/* ---- Koleksiyon ---- */
.col-card { background: rgba(255,255,255,0.06); border-radius: 16px; padding: 12px; margin-bottom: 12px; }
.col-card.done { box-shadow: inset 0 0 0 2px rgba(105,240,174,0.55); }
.col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; }
.col-count { color: var(--muted); font-size: 13px; }
.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.col-item { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: rgba(0,0,0,0.25); border-radius: 12px; }
.col-item.on { background: rgba(255,255,255,0.12); }
.col-item:not(.on) { opacity: 0.35; filter: grayscale(1); font-size: 22px; }

/* kazanma ekranı koleksiyon satırı */
.win-collect { font-size: 15px; font-weight: 700; margin: 4px 0 8px; color: #b9f6ca; }
.win-collect .ci { font-size: 22px; vertical-align: middle; }
.win-collect.done { color: #ffd740; }
.win-reward.small { font-size: 18px; color: var(--muted); }

/* ---- Tüp temaları (skinler) ---- */
/* Neon */
[data-skin="neon"] .glass { border-color: #00e5ff;
  box-shadow: 0 0 16px rgba(0,229,255,0.55), inset 0 0 14px rgba(0,229,255,0.28);
  background: rgba(0,22,32,0.35); }
[data-skin="neon"] .tube::before { border-color: #00e5ff; box-shadow: 0 0 10px rgba(0,229,255,0.6);
  background: linear-gradient(180deg, rgba(0,229,255,0.35), rgba(0,229,255,0.05)); }
/* Buz */
[data-skin="ice"] .glass { border-color: #b3e5fc;
  box-shadow: 0 0 14px rgba(179,229,252,0.5), inset 0 0 16px rgba(255,255,255,0.28);
  background: rgba(200,240,255,0.1); }
[data-skin="ice"] .tube::before { border-color: #e1f5fe;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(179,229,252,0.15)); }
/* Ahşap */
[data-skin="wood"] .glass { border-color: #a1663b; border-width: 4px;
  box-shadow: inset 0 0 12px rgba(90,54,24,0.5), 0 6px 14px rgba(0,0,0,0.35); }
[data-skin="wood"] .tube::before { border-color: #7a4a24;
  background: linear-gradient(180deg, #c68a5a, #7a4a24); }
[data-skin="wood"] .glass::after { opacity: 0.3; }
/* Altın */
[data-skin="gold"] .glass { border-color: #ffd54f;
  box-shadow: 0 0 12px rgba(255,213,79,0.5), inset 0 0 14px rgba(255,213,79,0.22); }
[data-skin="gold"] .tube::before { border-color: #ffca28;
  background: linear-gradient(180deg, #fff3c4, #ffb300); }
/* Gökkuşağı (animasyonlu kenar) */
[data-skin="rainbow"] .glass { animation: rainbowEdge 3.2s linear infinite; }
[data-skin="rainbow"] .tube::before { animation: rainbowEdge 3.2s linear infinite; }
@keyframes rainbowEdge {
  0% { border-color: #ff5252; } 20% { border-color: #ffd740; } 40% { border-color: #69f0ae; }
  60% { border-color: #40c4ff; } 80% { border-color: #b388ff; } 100% { border-color: #ff5252; }
}

/* Tema ekranı */
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skin-card { background: rgba(255,255,255,0.06); border-radius: 16px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.skin-card.sel { box-shadow: inset 0 0 0 2px #7c4dff; }
.skin-prev { --tube-w: 30px; --tube-h: 78px; height: 90px; display: flex; align-items: center;
  justify-content: center; pointer-events: none; }
.skin-prev .tube { cursor: default; }
.skin-name { font-size: 13px; font-weight: 700; }
.skin-card .buy-coin, .skin-card .shop-ad { padding: 7px 12px; font-size: 12px; }

/* küçük ekran ayarı */
@media (max-height: 720px) { :root { --tube-w: 46px; --tube-h: 138px; } }
@media (min-width: 480px) { :root { --tube-w: 58px; --tube-h: 176px; } }