:root {
  --zemin: #fff7e6; --yazi: #2d2a4a; --soluk: #6b6790; --kart: #fff;
  --mor: #7c5cff; --sari: #ffcc33; --pembe: #ff6fa5; --yesil: #2fbf80; --mavi: #4aa8ff;
  --golge: 0 5px 0 rgba(45, 42, 74, .12), 0 10px 22px rgba(45, 42, 74, .10);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html, body { margin: 0; height: 100%; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 12% 8%, #ffe7ad 0, transparent 38%),
              radial-gradient(circle at 92% 92%, #d5ebff 0, transparent 42%), var(--zemin);
  color: var(--yazi); display: flex; flex-direction: column; min-height: 100dvh;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }

.ust {
  display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
}
.ust h1 { flex: 1; min-width: 0; margin: 0; font-size: clamp(20px, 5vw, 30px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dugme {
  width: 56px; height: 56px; flex: none; border: 0; border-radius: 18px; background: var(--kart); box-shadow: var(--golge);
  font-size: 28px; display: grid; place-items: center; text-decoration: none; cursor: pointer;
}
.dugme:active, .kart:active, .sev:active, .kat:active, .buyuk:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(45, 42, 74, .12); }
.sure {
  font-size: clamp(20px, 5vw, 28px); font-weight: 800; background: var(--kart); padding: 8px 14px; border-radius: 16px;
  box-shadow: var(--golge); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Seçim ekranı */
#secim { flex: 1; overflow-y: auto; padding: 4px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left)); }
.seviye { display: flex; gap: 10px; justify-content: center; margin: 4px 0 12px; }
.sev {
  border: 0; background: var(--kart); border-radius: 18px; box-shadow: var(--golge); padding: 8px 14px;
  display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 800; cursor: pointer; min-height: 56px;
}
.sev.secili { background: var(--mor); color: #fff; }
.mini { display: flex; flex-direction: column; gap: 2px; width: 30px; }
.mini i { display: flex; gap: 2px; height: 12px; }
.mini b { flex: 1; background: var(--sari); border-radius: 3px; }
.sev.secili .mini b { background: #fff; }
.katlar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.katlar::-webkit-scrollbar { display: none; }
.kat {
  flex: none; border: 0; background: var(--kart); border-radius: 18px; box-shadow: var(--golge); padding: 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; min-width: 78px;
}
.kat img, .kat span { width: 40px; height: 40px; font-size: 32px; line-height: 40px; text-align: center; }
.kat small { font-size: 13px; font-weight: 700; }
.kat.secili { background: var(--sari); }
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 30vw), 1fr)); gap: 12px; }
.kart {
  position: relative; border: 0; padding: 8px 8px 6px; background: var(--kart); border-radius: 22px; box-shadow: var(--golge);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.kart canvas { width: 100%; aspect-ratio: 1; border-radius: 16px; display: block; }
.kart small { font-size: 14px; font-weight: 700; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kart .yildiz { position: absolute; top: -6px; right: -4px; font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.kart.rastgele { background: linear-gradient(135deg, #ffe08a, #ffb3d1); }
.kart.rastgele span { flex: 1; width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(48px, 12vw, 72px); }
.kart.rastgele small { color: var(--yazi); }

/* Oyun */
body.oyunda { overflow: hidden; position: fixed; inset: 0; }
#oyun { flex: 1; display: flex; min-height: 0; }
#sahne { position: relative; flex: 1; overflow: hidden; touch-action: none; }
#tahta { position: absolute; border-radius: 6px; box-shadow: 0 0 0 4px #fff, 0 12px 30px rgba(45, 42, 74, .18); }
#tahta.zipla { animation: zipla .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zipla { 0% { transform: scale(1); } 30% { transform: scale(1.08) rotate(-2deg); } 60% { transform: scale(.97) rotate(1deg); } 100% { transform: none; } }
.parca { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: center; touch-action: none; filter: drop-shadow(0 4px 4px rgba(45, 42, 74, .25)); }
.parca.tutulan { filter: drop-shadow(0 12px 12px rgba(45, 42, 74, .35)); }
.parca.oturuyor { transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); filter: none; }
.pirilti { position: absolute; z-index: 999; font-size: 28px; pointer-events: none; transform: translate(-50%, -50%); animation: pirilti .9s ease-out forwards; }
@keyframes pirilti { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }

.fisek { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

#tebrik { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(45, 42, 74, .35); padding: 16px; }
#tebrik[hidden] { display: none; }
.tebrik-kutu {
  background: var(--kart); border-radius: 32px; padding: 22px 22px 24px; text-align: center; width: min(420px, 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25); animation: belir .5s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes belir { from { transform: scale(.5); opacity: 0; } }
.tebrik-yazi { font-size: clamp(30px, 8vw, 44px); font-weight: 900; color: var(--pembe); line-height: 1.1; }
#tebrikResim { width: min(170px, 40vw); aspect-ratio: 1; border-radius: 22px; margin: 12px auto 4px; display: block; animation: sallan 1.6s ease-in-out infinite; }
@keyframes sallan { 50% { transform: rotate(4deg) scale(1.04); } }
.tebrik-ad { font-size: 26px; font-weight: 800; }
.yildizlar { font-size: 40px; letter-spacing: 4px; margin: 6px 0; }
.yildizlar span { display: inline-block; animation: belir .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.yildizlar span:nth-child(2) { animation-delay: .2s; } .yildizlar span:nth-child(3) { animation-delay: .4s; }
.tebrik-sure { font-size: 24px; font-weight: 800; color: var(--soluk); font-variant-numeric: tabular-nums; }
.rekor { display: block; color: var(--yesil); font-size: 20px; margin-top: 4px; }
.dugmeler { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.buyuk {
  width: 76px; height: 76px; border: 0; border-radius: 24px; font-size: 38px; cursor: pointer;
  background: var(--sari); box-shadow: var(--golge); display: grid; place-items: center;
}
.buyuk.ana { background: var(--yesil); }