html, body {
  margin: 0;
  height: 100%;
  background: #f2ede1;
  overflow: hidden;
}

/* Kâğıt gerçek bir 3D düzlem: perspektif gövdede, eğilme #stage'de (JS fareyle sürer) */
body { perspective: 1500px; }
#stage {
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* mobil tarayıcıda adres çubuğu hesaba katılsın */
  transform-origin: 50% 55%;
  will-change: transform;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hand { font-family: 'Caveat', 'Comic Sans MS', cursive; }

.btn { cursor: pointer; }

/* ── Taşlar ─────────────────────────────────────────────────────────────── */
/* Nefes: ayaklar yerde, gövde çok hafif uzayıp kısalır */
.bob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(.985, 1.025); } }

.bob.lift { animation: none; transform: translateY(-7px); transition: transform 150ms; }

/* Sprite boil: taşın yalnızca o anki çizim karesi görünür (data-f JS'ten değişir) */
.pc .v { display: none; }
.pc[data-f="0"] .v0, .pc[data-f="1"] .v1, .pc[data-f="2"] .v2 { display: inline; }

/* Taç, anten, boynuz: gövdeden bağımsız sallanır (her taşın fazı --d ile farklı) */
.acc { animation: acc 1.9s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes acc { from { transform: rotate(-7deg); } to { transform: rotate(6deg) translateY(-.6px); } }

/* Endişeli kaşlar: yalnızca tehdit altındayken */
.brow { display: none; }
.worried .brow { display: inline; }

/* Göz hâlleri: açık / kırpma-uyku / mutlu */
.ec, .eh { display: none; }
.blink .eo, .asleep .eo, .happy .eo { display: none; }
.blink .ec, .asleep .ec { display: inline; }
.happy .ec { display: none; }
.happy .eh { display: inline; }

/* Kulenin bayrağı rüzgârda */
.flag { transform-origin: 0 -21px; animation: flag 1.6s ease-in-out infinite; }
@keyframes flag { 50% { transform: scaleX(.75) skewY(-6deg); } }

/* Tehdit altındaki taşın ter damlaları */
.sweat { display: none; }
.worried .sweat { display: inline; }
.worried .sweat path { animation: drip 1.4s ease-in infinite; transform-box: fill-box; }
.worried .sweat .d2 { animation-delay: .6s; }
@keyframes drip {
  0% { transform: translateY(-3px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(7px); opacity: 0; }
}

/* Kavga sırasında iki taş da sarsılır (kare kare, adım adım) */
.bob.scuffle { animation: scuffle 160ms steps(2) infinite; }
@keyframes scuffle {
  0% { transform: translate(-3px, -2px) rotate(-9deg); }
  50% { transform: translate(3px, 1px) rotate(8deg); }
  100% { transform: translate(-1px, -4px) rotate(-4deg); }
}

/* ── Çizim efektleri ────────────────────────────────────────────────────── */
@keyframes draw { to { stroke-dashoffset: 0; } }

.fadein { animation: fadein 300ms 200ms both; }
.fadein-fast { animation: fadein 120ms both; }
.fadein-slow { animation: fadein 700ms ease-out both; }
@keyframes fadein { from { opacity: 0; } }
.fadeout { animation: fadeout 180ms forwards; }
@keyframes fadeout { to { opacity: 0; } }

.dot { animation: dot 200ms both; }
@keyframes dot { from { opacity: 0; r: 0; } }

.puff { transform-box: fill-box; transform-origin: center; animation: puff 750ms ease-out both; }
@keyframes puff {
  0% { transform: scale(.3); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(1.4) translateY(-6px); opacity: 0; }
}

.spark { animation: spark 850ms ease-out forwards; }
@keyframes spark {
  from { transform: translate(0, 0) scale(.4) rotate(0deg); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(1) rotate(160deg); opacity: 0; }
}

.popin { animation: popin 450ms cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes popin { from { transform: scale(0); } }

/* İsim kartı (HTML: metin girişi SVG'de yok) */
.name-dialog {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(242, 237, 225, .65);
  animation: fadein 200ms both;
}
.name-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(420px, 100%);
  padding: 26px 24px 22px;
  background: #fbf4cf;
  border: 1.5px solid #8a7d60;
  box-shadow: 5px 7px 0 rgba(58, 48, 32, .08);
  transform: rotate(-1.5deg);
  font-family: 'Caveat', cursive;
  color: #2d2a2e;
  animation: popin-card 380ms cubic-bezier(.3, 1.4, .5, 1) both;
}
.name-card label { font-size: 44px; }
.name-card input {
  width: 100%;
  font: 600 34px 'Caveat', cursive;
  color: #c8423a;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 2px dashed #8a7d60;
  outline: none;
  padding: 4px 0;
}
.name-card input::placeholder { color: #b9ad8f; }
.name-card small { font-size: 19px; color: #8a7d60; }
.name-card button {
  margin-top: 6px;
  font: 600 28px 'Caveat', cursive;
  color: #3c46b0;
  background: none;
  border: 2px solid #3c46b0;
  border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; /* elle çizilmiş halka gibi */
  padding: 2px 26px;
  cursor: pointer;
}
/* Hesap kartı: sekmeler, formlar, profil */
.name-card.acc { gap: 8px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.acc h2 { margin: 0; font-size: 46px; font-weight: 700; color: #c8423a; line-height: 1; }
.acc h2 .b { color: #3c46b0; }
.acc h2 small { display: block; font-size: 24px; font-weight: 500; color: #8a7d60; margin-top: 4px; }
.acc h3 { margin: 10px 0 0; font-size: 26px; }
.acc .tabs { display: flex; gap: 16px; margin: 4px 0 2px; }
.acc .tabs button {
  border: none; border-radius: 0; padding: 0 2px; margin: 0;
  font: 600 25px 'Caveat', cursive; color: #8a7d60;
  border-bottom: 2px solid transparent;
}
.acc .tabs button.on { color: #c8423a; border-bottom: 2px solid #c8423a; }
.acc form { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.acc [hidden] { display: none !important; } /* .google gibi display tanımlı öğeleri de gizlesin */
.acc input { font-size: 28px; }
.acc .err { min-height: 22px; margin: 0; font-size: 20px; color: #c8423a; text-align: center; }
.acc .google { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.acc .google > span { font-size: 20px; color: #8a7d60; }
.acc .check { color: #3f7a32; }
/* Google düğmesi: Google'ın marka kuralına uygun beyaz zemin + renkli G */
.acc button.gsi {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 16px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1f1f1f; background: #fff;
  border: 1px solid #747775; border-radius: 20px;
  padding: 9px 18px; margin: 0;
}
.acc button.gsi:hover { background: #f7f8f8; }
.acc .muted { margin: 0; font-size: 20px; color: #8a7d60; }
.acc table { border-collapse: collapse; font-size: 22px; margin-top: 4px; }
.acc th { font-weight: 600; color: #8a7d60; padding: 0 8px; }
.acc td { padding: 1px 8px; text-align: center; border-top: 1px dashed #d8cda8; }
.acc td:first-child { text-align: left; }
.acc .recent { list-style: none; margin: 0; padding: 0; width: 100%; font-size: 21px; }
.acc .recent li { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; border-top: 1px dashed #d8cda8; }
.acc .recent li.win b { color: #3f7a32; }
.acc .recent li.loss b { color: #c8423a; }
.acc .recent li.draw b { color: #8a7d60; }
.acc .row { display: flex; gap: 14px; }
.acc button.ghost { color: #8a7d60; border-color: #8a7d60; }
.acc button:disabled { opacity: .5; }

/* Profil mantarı dikkat çekme: zıplayıp sallanır, yıldızlar parlar */
.chip-av { transform-box: fill-box; transform-origin: 50% 100%; }
.attn .chip-av { animation: chiphop 2.4s ease-in-out infinite; }
@keyframes chiphop {
  0%, 55%, 100% { transform: none; }
  62% { transform: translateY(-9px) rotate(-8deg); }
  70% { transform: translateY(0) scale(1.08, .9); }
  78% { transform: translateY(-4px) rotate(6deg); }
  86% { transform: none; }
}
.chip-hint text { paint-order: stroke; stroke: #f2ede1; stroke-width: 7px; stroke-linejoin: round; } /* çizimlerin üstünde okunsun */
.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

/* ── Mantar Kafe girişi ── */
.sign-swing { animation: signswing 5s ease-in-out infinite alternate; }
@keyframes signswing { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.steam { animation: steam 2.6s ease-in-out infinite; opacity: 0; }
.steam.s2 { animation-delay: 1.3s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-10px); } }
.table .lift-on-hover { transition: transform 200ms ease-out; }
.table.btn:hover .lift-on-hover { transform: translateY(-8px); }
.table.soon { opacity: .78; }
body.leaving #stage { transition: opacity 250ms; opacity: 0; }

/* Avatar seçimi */
.acc .avgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; }
.acc button.av {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  border: 2px solid transparent; border-radius: 14px; padding: 4px 2px; margin: 0;
  background: transparent; font: 500 17px 'Caveat', cursive; color: #6b6355;
}
.acc button.av.on { border-color: #c8423a; background: rgba(200, 66, 58, .07); color: #c8423a; }
.acc button.av:hover { background: rgba(0, 0, 0, .04); }

/* Panelim */
.name-card.dash { width: min(560px, 100%); align-items: stretch; text-align: left; gap: 6px; }
.dash header { display: flex; gap: 14px; align-items: center; }
.dash header h2 { font-size: 40px; }
.dash .avbtn { display: flex; flex-direction: column; align-items: center; border: none; background: none; padding: 0; margin: 0; color: #8a6a2a; font: 500 17px 'Caveat', cursive; }
.dash .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dash .chip { font-size: 20px; padding: 0 10px; border: 1.5px solid #c9bb8f; border-radius: 30% 40% 35% 45% / 50%; background: #fff9de; }
.dash .chip b { color: #c8423a; font-size: 24px; }
.dash section { border-top: 1.5px dashed #d8cda8; padding-top: 4px; }
.dash table { width: 100%; }
.dash .form { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0; }
.dash .form i { width: 14px; height: 14px; border-radius: 50% 45% 55% 40%; border: 1.5px solid #4a3420; }
.dash .form i.win { background: #7cbf6a; }
.dash .form i.loss { background: #e8574a; }
.dash .form i.draw { background: #d8cda8; }
.dash .opps { list-style: none; margin: 0; padding: 0; font-size: 22px; }
.dash .opps li { display: grid; grid-template-columns: 1fr auto 70px; gap: 10px; border-top: 1px dashed #e4dab9; }
.dash .opps li small { color: #8a7d60; font-size: 18px; text-align: right; }
.dash .wld b.win { color: #3f7a32; } .dash .wld b.loss { color: #c8423a; } .dash .wld b.draw { color: #8a7d60; }
.dash .row { justify-content: center; margin-top: 6px; }

.shake { animation: shake 300ms; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Mod menüsü kartı: kâğıda yapıştırılır gibi belirir */
.popin-card { animation: popin-card 380ms cubic-bezier(.3, 1.4, .5, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes popin-card { from { transform: scale(.85) rotate(4deg); opacity: 0; } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.wiggle { animation: wiggle 450ms ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes wiggle { 30% { transform: rotate(4deg) scale(1.05); } 60% { transform: rotate(-2deg); } }

/* ── Ortam ──────────────────────────────────────────────────────────────── */
/* Girlanttaki yıldızlar asıldıkları noktadan sarkaç gibi sallanır */
.swing { animation: swing 2.8s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

.sway { animation: sway 3.6s ease-in-out infinite alternate; }
.palma { animation-duration: 4.2s; } .palmb { animation-duration: 3.4s; animation-delay: -1.2s; } .palmc { animation-duration: 3.9s; animation-delay: -2.1s; }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

.spin-slow { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.drift { animation: drift 9s ease-in-out infinite alternate; }
.drift-b { animation-duration: 12s; animation-delay: -4s; }
@keyframes drift { to { transform: translateX(14px); } }

.zz { animation: zz 2.4s ease-in-out infinite; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -6px); } }

.bobble { transform-box: fill-box; transform-origin: center; animation: bobble 3.2s ease-in-out infinite; }
.bobble-b { animation-delay: -1.4s; }
@keyframes bobble { 50% { transform: translateY(-2px) rotate(-4deg); } }

.spout { animation: spout 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes spout { 50% { transform: scaleY(.85); opacity: .7; } }

/* Balinadaki uyuyanlar yavaşça horlar */
.snore { transform-box: fill-box; transform-origin: 50% 100%; animation: snore 3.8s ease-in-out infinite; }
@keyframes snore { 50% { transform: scale(1.04, .96); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}