:root {
  --ink: #172238;
  --cream: #fffdf5;
  --green: #1f6b55;
  --mint: #66d092;
  --yellow: #ffd35c;
  --panel: rgba(255, 253, 245, .96);
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-height: 100%; margin: 0; }
body { font-family: Inter, ui-rounded, "Segoe UI", sans-serif; color: var(--ink); background: #173b32; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.garden {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:#315c36 url("assets/enchanted-garden.png") center/cover no-repeat;
}
.garden::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,#102d2530 0%,transparent 44%,#12382060 100%); pointer-events:none; }
.atmosphere { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.atmosphere i { position:absolute; width:7px; aspect-ratio:1; border-radius:50%; background:#fff7a6; box-shadow:0 0 13px #fff7a6; animation:firefly 7s ease-in-out infinite; }
.atmosphere i:nth-child(1){left:14%;top:35%}.atmosphere i:nth-child(2){left:34%;top:24%;animation-delay:-2s}.atmosphere i:nth-child(3){left:58%;top:39%;animation-delay:-4s}.atmosphere i:nth-child(4){left:78%;top:27%;animation-delay:-1s}.atmosphere i:nth-child(5){left:88%;top:59%;animation-delay:-5s}
@keyframes firefly { 0%,100%{opacity:.15;transform:translate(0,0)}50%{opacity:1;transform:translate(18px,-32px)} }
.ground-details { display:none; }

.garden-title { position:absolute; top:14px; left:16px; display:flex; align-items:center; gap:7px; color:white; text-shadow:0 2px 10px #092219; z-index:5; padding:7px 9px; border:1px solid #ffffff42; border-radius:12px; background:#113b2b82; backdrop-filter:blur(7px); }
.garden-title-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#ffffff24; font-size:.85rem!important; text-shadow:none; }
.garden-title-copy { display:grid; grid-template-columns:auto auto; column-gap:7px; align-items:center; line-height:1.05; }
.garden-title-copy strong { grid-column:1/-1; margin-bottom:3px; font-size:clamp(.72rem,.9vw,.88rem); letter-spacing:-.01em; }
.garden-title-copy span { font-size:.5rem; font-weight:900; letter-spacing:.08em; opacity:.9; }
.garden-title-copy small { margin:0; font-size:.57rem; font-weight:750; opacity:.82; }
.board-class-menu { position:absolute; top:calc(100% + 8px); left:34px; width:max-content; min-width:170px; max-width:min(280px,calc(100vw - 44px)); max-height:260px; overflow:auto; padding:7px; border:1px solid #ffffff55; border-radius:14px; background:#fffdf5f2; box-shadow:0 16px 34px #09221966; backdrop-filter:blur(12px); }
.board-class-menu[hidden] { display:none; }
.board-class-menu button { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; border:0; border-radius:10px; padding:10px 12px; color:#24473a; background:transparent; font-size:.82rem; font-weight:850; text-align:left; }
.board-class-menu button:hover,.board-class-menu button:focus-visible { outline:none; background:#e8f5e9; }
.board-class-menu button.active { color:#fff; background:#24734f; }
.board-class-menu p { margin:4px; color:#526079; font-size:.78rem; }
.board-actions { position:absolute; z-index:20; top:22px; right:24px; display:flex; gap:10px; }
.round-button,.teacher-button { border:1px solid #ffffff88; color:white; background:#173b32c9; box-shadow:0 8px 24px #11382c3d; }
.round-button { width:44px; height:44px; border-radius:50%; font-weight:900; font-size:1.25rem; }
.teacher-button { border-radius:999px; padding:0 18px; font-weight:800; }
.back-games-button { display:grid; place-items:center; text-decoration:none; width:40px; height:40px; font-size:1.1rem; }
.board-mode .back-games-button,.board-mode #teacher-button { display:none; }

/* Demo Modu Bilgilendirme Bandı */
.garden-demo-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(90deg, #1b4d3e, #236551);
  color: #ffffff;
  padding: 6px 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.garden-demo-banner.hidden { display: none !important; }
.demo-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.demo-banner-login-btn {
  background: #ffe27b;
  color: #173b32;
  border: 0;
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 850;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.2s;
}
.demo-banner-login-btn:hover {
  background: #fff;
  transform: translateY(-1px);
}

.garden-account-button {
  background: linear-gradient(135deg, #1f5442, #163e30) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  cursor: pointer;
}
.garden-account-button.is-signed-in {
  background: linear-gradient(135deg, #2b7a5a, #1b4d3e) !important;
  color: #ffe27b !important;
}

.garden-auth-dialog .secondary-button.active {
  background: #173b32 !important;
  color: #ffffff !important;
  border-color: #173b32 !important;
}

/* Öğretmen hesabı: sade, tek adımlı ve mobil öncelikli giriş alanı */
.garden-auth-dialog { width:min(620px,calc(100% - 28px)); background:#fffdf8; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; }
.garden-auth-dialog .garden-auth-inner { width:100%; max-width:560px; margin:0 auto; }
.garden-auth-dialog .hidden { display:none !important; }
.garden-auth-header { align-items:center !important; padding-bottom:18px; border-bottom:1px solid #e5ece7; }
.garden-auth-heading { display:flex; align-items:center; gap:13px; min-width:0; }
.garden-auth-icon { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border-radius:15px; background:linear-gradient(145deg,#e8f6ed,#d6eddf); font-size:1.35rem; box-shadow:inset 0 0 0 1px #cbe4d5; }
.garden-auth-heading h2 { margin:3px 0 0; font-size:1.55rem; letter-spacing:-.025em; }
.garden-auth-heading p { margin:4px 0 0; color:#66756d; font-size:.83rem; font-weight:650; }
.garden-auth-dialog .close-button { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; padding:0 0 3px; font-size:1.45rem; transition:background .2s,transform .2s; }
.garden-auth-dialog .close-button:hover { background:#dfe9e2; transform:rotate(4deg); }
.garden-auth-privacy { display:flex; align-items:flex-start; gap:10px; margin:16px 0; padding:12px 14px; border:1px solid #cce5d8; border-radius:14px; color:#245442; background:#f1f8f4; }
.garden-auth-privacy span { margin-top:1px; }
.garden-auth-privacy p { margin:0; font-size:.82rem; line-height:1.45; }
.garden-auth-privacy strong { display:block; margin-bottom:1px; color:#173b32; }
.garden-auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:18px; padding:5px; border-radius:15px; background:#edf2ed; }
.garden-auth-tabs .secondary-button { min-height:45px; padding:9px 12px; border-color:transparent; background:transparent; box-shadow:none; font-size:.85rem; }
.garden-auth-tabs .secondary-button.active { box-shadow:0 4px 12px #173b3228; }
.garden-auth-tabs span { margin-right:5px; }
.garden-auth-panel { padding:20px; border:1px solid #dfe8e1; border-radius:20px; background:#fff; box-shadow:0 10px 30px #173b320b; }
.garden-auth-panel h3 { margin:0 0 5px; color:#173b32; font-size:1.05rem; text-align:center; }
.garden-auth-help { max-width:430px; margin:0 auto 17px; color:#66756d; font-size:.83rem; line-height:1.45; text-align:center; }
.garden-qr-content { display:flex; align-items:center; justify-content:center; gap:22px; }
.garden-qr-code { display:inline-flex; flex:0 0 auto; padding:9px; border:1px solid #dfe8e1; border-radius:15px; background:#fff; box-shadow:0 5px 16px #173b3217; }
.garden-qr-code:empty { width:132px; height:132px; background:linear-gradient(135deg,#f5f8f5,#fff); }
.garden-qr-code canvas,.garden-qr-code img { display:block; width:112px !important; height:112px !important; }
.garden-pin-card { min-width:220px; text-align:left; }
.garden-pin-card>span { color:#65766d; font-size:.7rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
#garden-qr-pin-display { margin:5px 0 8px; color:#173b32; font-size:2rem; font-weight:950; letter-spacing:.12em; line-height:1; }
#garden-qr-status { margin:0; color:#64748b; font-size:.78rem; line-height:1.4; }
#garden-qr-timer { display:inline-block; margin-left:3px; color:#1f6b55; }
.garden-auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.garden-auth-actions .secondary-button { min-height:44px; padding:10px 12px; font-size:.82rem; }
#garden-password-form { display:grid; gap:14px; }
#garden-password-form label { gap:7px; color:#354f44; font-size:.82rem; }
#garden-password-form input { min-height:48px; padding:12px 14px; border-color:#cbd9d1; border-radius:13px; outline:none; transition:border-color .2s,box-shadow .2s; }
#garden-password-form input:focus { border-color:#277a58; box-shadow:0 0 0 3px #277a5818; }
.garden-auth-message { min-height:1.2rem; margin:-2px 0; font-size:.82rem; font-weight:750; }
.garden-password-actions { display:grid; gap:9px; margin-top:2px; }
.garden-password-actions .primary-button,.garden-password-actions .secondary-button { min-height:48px; padding:12px 18px; border-radius:13px; font-size:.9rem; }
.garden-password-actions .primary-button { background:linear-gradient(135deg,#173b32,#245f4d); box-shadow:0 9px 20px #173b3230; }
.garden-access-card { display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; padding:16px; border:1px solid #cfe1d6; border-radius:16px; color:#24473a; background:#f4f9f5; text-align:left; }
.garden-access-card-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; background:#e1f2e7; }
.garden-access-card strong { display:block; color:#173b32; font-size:.92rem; }
.garden-access-card p { margin:4px 0 12px; color:#5a7065; font-size:.8rem; line-height:1.4; }
.garden-access-card .primary-button { width:auto; min-height:42px; padding:10px 16px; border-radius:12px; font-size:.82rem; box-shadow:0 7px 16px #173b3228; }
.garden-access-card .garden-auth-message { margin-top:8px; }
.garden-verification-card { display:flex; align-items:flex-start; gap:11px; margin:0 0 14px; padding:14px; border:1px solid #efcf82; border-radius:16px; color:#6f5015; background:#fff9e9; text-align:left; }
.garden-verification-card>span { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; background:#ffedbd; }
.garden-verification-card strong { display:block; color:#62450d; font-size:.9rem; }
.garden-verification-card p { margin:4px 0 11px; font-size:.77rem; line-height:1.45; }
.garden-verification-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.garden-verification-actions .primary-button,.garden-verification-actions .secondary-button { min-height:42px; padding:9px 10px; border-radius:11px; font-size:.72rem; }
.garden-security-warning { display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; padding:13px; border:1px solid #e7aaaa; border-radius:14px; color:#7d2929; background:#fff2f1; text-align:left; }
.garden-security-warning strong { display:block; font-size:.86rem; }
.garden-security-warning p { margin:3px 0 0; font-size:.75rem; line-height:1.4; }
.garden-security-warning b { overflow-wrap:anywhere; }
.garden-account-view { padding:12px 0 4px; text-align:left; }
.garden-account-profile { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:14px; border:1px solid #dce7df; border-radius:17px; background:linear-gradient(145deg,#f7fbf8,#eef6f1); }
.garden-account-avatar { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:14px; background:#dcefe3; font-size:1.25rem; }
.garden-account-profile p { margin:0; color:#6b7b72; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.garden-account-profile h3 { margin:3px 0 0; color:#173b32; font-size:1rem; overflow-wrap:anywhere; }
.garden-admin-account-badge { display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:4px 8px; border:1px solid #ead49c; border-radius:999px; color:#76520b; background:#fff6dc; font-size:.66rem; font-weight:900; }
.garden-account-view>#garden-access-approved { margin:0 0 12px !important; }
.garden-account-fold { margin:0 0 10px; border:1px solid #d8e4dc; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 5px 18px #173b3208; }
.garden-account-fold>summary { display:flex; align-items:center; gap:11px; min-height:66px; padding:11px 14px; color:#29483b; cursor:pointer; list-style:none; user-select:none; }
.garden-account-fold>summary::-webkit-details-marker { display:none; }
.garden-account-fold>summary:hover { background:#f7faf8; }
.garden-account-fold>summary:focus-visible { outline:3px solid #277a5830; outline-offset:-3px; }
.garden-account-fold>summary>div { flex:1; min-width:0; }
.garden-account-fold>summary strong { display:block; font-size:.88rem; }
.garden-account-fold>summary small { display:block; margin-top:3px; color:#718078; font-size:.72rem; font-weight:650; }
.garden-fold-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; background:#eef5f0; }
.garden-fold-icon.admin { background:#fff3d8; }
.garden-fold-chevron { flex:0 0 auto; color:#607369; font-size:1.3rem; font-weight:900; transition:transform .2s; }
.garden-fold-notice { display:grid; place-items:center; flex:0 0 auto; min-width:24px; height:24px; padding:0 7px; border-radius:999px; color:#fff; background:#c18422; font-size:.7rem; font-weight:900; }
.garden-account-fold[open] .garden-fold-chevron { transform:rotate(180deg); }
.garden-account-fold[open]>summary { background:#f7faf8; border-bottom:1px solid #e2eae5; }
.garden-fold-content { padding:14px; }
.garden-fold-toolbar,.garden-admin-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.garden-fold-toolbar p,.garden-admin-tools p { margin:0; color:#62736a; font-size:.75rem; line-height:1.4; }
.garden-fold-toolbar .secondary-button,.garden-admin-tools .secondary-button { flex:0 0 auto; padding:7px 10px; font-size:.72rem; }
.garden-admin-panel { border-color:#e4d4ad; background:#fffdf7; }
.garden-admin-badge { display:inline-block; margin-bottom:5px; color:#8a5b12; font-size:.63rem; font-weight:950; letter-spacing:.1em; }
.garden-admin-requests { margin-top:14px; font-size:.82rem; }
.garden-admin-groups { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.garden-admin-group { min-width:0; padding:11px; border:1px solid #dce8df; border-radius:13px; background:#fff; }
.garden-admin-group h5 { display:flex; justify-content:space-between; gap:8px; margin:0 0 6px; color:#385448; font-size:.78rem; }
.garden-admin-count { display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; color:#fff; background:#667a70; font-size:.68rem; }
.garden-admin-group.pending .garden-admin-count { background:#c18422; }
.garden-admin-group.approved .garden-admin-count { background:#278259; }
.garden-admin-empty { margin:8px 0 2px; color:#849087; font-size:.74rem; text-align:center; }
.garden-admin-user { display:grid; gap:7px; padding:9px 0; border-top:1px solid #e7ede9; }
.garden-admin-user:first-of-type { border-top:0; }
.garden-admin-user strong { overflow-wrap:anywhere; color:#243e34; font-size:.77rem; }
.garden-admin-user .secondary-button { width:100%; padding:7px 9px; font-size:.72rem; }
.garden-admin-user.approved .secondary-button { color:#9c3f3f; border-color:#e6caca; background:#fff5f4; }
.garden-admin-user.suspicious { margin:4px 0; padding:9px; border:1px solid #e7aaaa; border-radius:10px; background:#fff4f3; }
.garden-admin-user-warning { color:#a23c3c; font-size:.68rem; font-weight:850; }
.garden-pairing-help { margin:0 0 11px; color:#52675d; font-size:.78rem; line-height:1.45; }
.garden-pairing-form { display:grid; grid-template-columns:145px 1fr; gap:9px; }
.garden-pairing-form input { min-height:46px; background:#fff; font-size:1.05rem; font-weight:900; letter-spacing:.14em; text-align:center; }
.garden-pairing-form .primary-button { min-height:46px; padding:10px 14px; border-radius:12px; font-size:.82rem; }
.garden-device-pairing-box .garden-auth-message { margin-top:7px; }
.garden-signout-button { width:100%; margin-top:5px; padding:11px 15px; border:1px solid #e2bcbc; border-radius:13px; color:#a34242; background:#fff7f6; font-weight:850; }
.garden-signout-button:hover { color:#fff; background:#b94242; }

.welcome-card { position:absolute; z-index:12; width:min(520px,calc(100% - 36px)); left:50%; top:50%; translate:-50% -50%; text-align:center; padding:46px 44px 42px; border-radius:34px; background:var(--panel); box-shadow:0 30px 75px #123b3350; backdrop-filter:blur(12px); transition:.5s cubic-bezier(.2,.9,.2,1); }
.welcome-card.hidden { opacity:0; transform:translateY(-30px) scale(.94); pointer-events:none; }
.eyebrow { color:#f0734f; font-size:.8rem; font-weight:950; letter-spacing:.14em; }
.welcome-card h1 { margin:14px 0 6px; font-size:clamp(2.4rem,5vw,4.1rem); line-height:.95; letter-spacing:-.06em; }
.welcome-card p:not(.eyebrow) { margin:14px auto 32px; color:#526079; font-weight:650; font-size:1.08rem; max-width:390px; }
.welcome-card button,.primary-button { border:0; border-radius:18px; color:white; background:var(--ink); padding:18px 28px; font-weight:900; font-size:1.05rem; width:100%; box-shadow:0 13px 26px #16223a3b; }
.welcome-card button span { float:right; }

.creature-layer { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.creature-layer[hidden], .tree-layer[hidden], .world-switch[hidden] { display: none !important; }

/* ----------------------------------------------------
   Öğrenci Canlı Konteyneri (Doğal Yaşam Alanı & Z-Index)
---------------------------------------------------- */
.student-world {
  position: absolute;
  width: clamp(74px, 8.2vw, 118px);
  translate: -50% -75%;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  transition: left var(--move-dur, 5s) ease-in-out,
              top var(--move-dur, 5s) ease-in-out,
              transform 0.35s cubic-bezier(0.2, 1.2, 0.4, 1);
  will-change: left, top;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.student-world:hover {
  animation-play-state: paused !important;
  z-index: 9999 !important;
}
.student-world:hover .creature-real {
  animation-play-state: paused !important;
  transform: scale(calc(var(--growth, 1) * 1.08));
}

/* Yerdeki Canlılar İçin Gerçekçi Zemin Gölgesi ve Çim Bıçakları */
.ground-shadow {
  position: absolute;
  left: 14%;
  width: 72%;
  height: 15px;
  bottom: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(12, 34, 18, 0.72) 0%, rgba(12, 34, 18, 0.28) 45%, transparent 72%);
  filter: blur(2px);
  z-index: 1;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.grass-tuft {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 13px;
  height: 12px;
  background: radial-gradient(circle at 20% 100%, #2f6b2d 3.5px, transparent 4.5px),
              radial-gradient(circle at 50% 100%, #46963e 4.5px, transparent 5.5px),
              radial-gradient(circle at 80% 100%, #2c6328 3.5px, transparent 4.5px);
  z-index: 6;
  pointer-events: none;
  opacity: 0.92;
}

/* Uçan Canlılar İçin Hafif Hava Gölgesi / Süzülme Halesi */
.aerial-shadow {
  position: absolute;
  left: 22%;
  width: 56%;
  height: 14px;
  bottom: -32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(12, 34, 18, 0.22) 0%, transparent 65%);
  filter: blur(5px);
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Zıplama ve Yeme Sırasında Gölgenin Küçülmesi (Fiziksel Gerçekçilik) */
.student-world.is-munching .ground-shadow,
.student-world.is-happy .ground-shadow {
  transform: scale(0.65);
  opacity: 0.25;
}

/* ----------------------------------------------------
   Canlı Gövdesi & Büyüklük (Puana ve Derinliğe Göre)
---------------------------------------------------- */
.creature {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: auto;
}
.creature-real {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1/1.18;
  display: grid;
  place-items: end center;
  transform: scale(var(--growth, 1));
  transform-origin: bottom center;
  transition: transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.creature-real img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 8px rgba(16, 40, 24, 0.55)) saturate(var(--stage-saturation,1.05)) brightness(var(--stage-brightness,1)) hue-rotate(calc(var(--hue, 0deg) + var(--stage-hue,0deg)));
  transition: filter 0.35s, transform 0.35s;
}
.student-world.stage-1 { --stage-saturation:.82; --stage-brightness:.9; }
.student-world.stage-2 { --stage-saturation:1; --stage-brightness:1; }
.student-world.stage-3 { --stage-saturation:1.14; --stage-brightness:1.05; }
.student-world.stage-4 { --stage-saturation:1.28; --stage-brightness:1.1; }
.student-world.stage-5 { --stage-saturation:1.42; --stage-brightness:1.18; }
.evolution-accessory { position:absolute; z-index:10; left:50%; top:-5%; translate:-50% -50%; font-style:normal; line-height:1; font-size:calc(16px + var(--growth,1) * 7px); filter:drop-shadow(0 0 6px #fff) drop-shadow(0 3px 5px #173b32aa); pointer-events:none; }
.stage-2 .evolution-accessory::before { content:"🌱"; }
.stage-3 .evolution-accessory::before { content:"⭐"; }
.stage-4 .evolution-accessory::before { content:"🏅"; }
.stage-5 .evolution-accessory::before { content:"👑"; }
.student-world:hover .creature-real img {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 14px 10px rgba(16, 40, 24, 0.65)) saturate(var(--stage-saturation,1.1)) brightness(var(--stage-brightness,1)) hue-rotate(calc(var(--hue, 0deg) + var(--stage-hue,0deg)));
}

/* Aksesuar */
.accessory {
  position: absolute;
  z-index: 9;
  left: var(--acc-left, 50%);
  top: var(--acc-top, 3%);
  translate: -50% -50%;
  font-style: normal;
  font-size: var(--acc-size, clamp(24px, 3vw, 44px));
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(18, 40, 30, 0.65));
  transform: rotate(var(--acc-rotate, -5deg));
  pointer-events: none;
}

/* Büyü Halkası ve Işıltılar (Seviyeye Göre Belirginleşir) */
.magic-ring {
  position: absolute;
  z-index: 0;
  left: 10%;
  right: 10%;
  bottom: 2%;
  height: 22%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent, #66d092), white 28%);
  background: radial-gradient(ellipse, rgba(255, 247, 190, 0.45) 0, transparent 67%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent, #66d092), transparent 35%);
  opacity: 0.35;
  transform: rotateX(68deg);
  transition: opacity 0.4s ease;
}
.sparkle {
  position: absolute;
  z-index: 3;
  color: #fff5a2;
  font-style: normal;
  text-shadow: 0 0 8px white, 0 0 14px var(--accent, #ffd85d);
  opacity: 0;
  animation: sparkle 2.8s ease-in-out infinite;
}
.sparkle-a { top: 12%; left: 8%; }
.sparkle-b { top: 32%; right: 6%; animation-delay: -1.3s; }

.stage-3 .sparkle, .stage-4 .sparkle, .stage-5 .sparkle { opacity: 1; }
.stage-4 .magic-ring, .stage-5 .magic-ring { opacity: 0.85; }
.stage-5 .creature-real img {
  filter: drop-shadow(0 14px 10px rgba(16, 40, 24, 0.65)) drop-shadow(0 0 18px rgba(255, 243, 168, 1)) saturate(var(--stage-saturation)) brightness(var(--stage-brightness)) hue-rotate(calc(var(--hue, 0deg) + var(--stage-hue,0deg)));
}
@keyframes sparkle {
  0%, 100% { transform: scale(0.45) rotate(0); opacity: 0.15; }
  50% { transform: scale(1.25) rotate(90deg); opacity: 1; }
}

/* ----------------------------------------------------
   Hayvana Özel Gerçekçi Mikro-Animasyonlar
---------------------------------------------------- */
/* Tavşan: Nazik nefes, burun seğirmesi, neşeli zıplama */
.anim-rabbit { animation: rabbit-life var(--move-speed, 5.2s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes rabbit-life {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  22% { transform: translateY(0) scaleX(calc(var(--growth) * 1.02)) scaleY(calc(var(--growth) * 0.98)); }
  45% { transform: translateY(-7px) rotate(-1deg) scale(var(--growth)); }
  55% { transform: translateY(0) scale(var(--growth)); }
  75% { transform: translateY(-2px) scaleX(calc(var(--growth) * 1.02)); }
}

/* Baykuş: Tüneme ve ani gerçekçi kafa çevirme */
.anim-owl { animation: owl-perch var(--move-speed, 6.2s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes owl-perch {
  0%, 30%, 100% { transform: translateY(0) rotate(0deg) scale(var(--growth)); }
  36% { transform: translateY(-2px) rotate(-26deg) scale(var(--growth)); }
  50% { transform: translateY(-2px) rotate(-26deg) scale(var(--growth)); }
  58% { transform: translateY(0) rotate(20deg) scale(var(--growth)); }
  72% { transform: translateY(0) rotate(20deg) scale(var(--growth)); }
  78% { transform: translateY(-1px) rotate(0deg) scale(var(--growth)); }
}

/* Kaplumbağa: Ağırbaşlı, sakin nefes ve boyun uzatma */
.anim-turtle { animation: turtle-calm var(--move-speed, 7.5s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes turtle-calm {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  35% { transform: translateY(-2px) scaleX(calc(var(--growth) * 1.03)) scaleY(calc(var(--growth) * 0.97)); }
  55% { transform: translate(3px, -4px) scale(var(--growth)); }
  75% { transform: translate(1px, -1px) scale(var(--growth)); }
}

/* Kirpi: Çiçekler arasında meraklı burun koklama */
.anim-hedgehog { animation: hedgehog-sniff var(--move-speed, 4.6s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes hedgehog-sniff {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  18% { transform: translateY(-3px) rotate(2deg) scale(var(--growth)); }
  28% { transform: translateY(-1px) rotate(-2deg) scale(var(--growth)); }
  38% { transform: translateY(-4px) rotate(1deg) scale(var(--growth)); }
  65% { transform: translateY(0) scaleX(calc(var(--growth) * 1.04)) scaleY(calc(var(--growth) * 0.96)); }
}

/* Ejderha: Yüksek göklerde süzülüş */
.anim-dragon { animation: dragon-soar var(--move-speed, 6.8s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes dragon-soar {
  0%, 100% { transform: translate(-8px, -4px) rotate(-3deg) scale(var(--growth)); }
  35% { transform: translate(10px, -14px) rotate(3deg) scale(var(--growth)); }
  68% { transform: translate(4px, 4px) rotate(-1deg) scale(var(--growth)); }
}

/* Kanatlı & Peri: Çiçekler üzerinde pırpır uçuş */
.anim-winged { animation: winged-flutter var(--move-speed, 3.8s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes winged-flutter {
  0%, 100% { transform: translate(-5px, 2px) rotate(-2deg) scale(var(--growth)); }
  25% { transform: translate(4px, -10px) rotate(3deg) scale(var(--growth)); }
  55% { transform: translate(-3px, -14px) rotate(-1deg) scale(var(--growth)); }
  80% { transform: translate(5px, -4px) rotate(2deg) scale(var(--growth)); }
}

/* Bulut: Gökyüzünde zarif salınım */
.anim-cloud { animation: cloud-breathe var(--move-speed, 7.2s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes cloud-breathe {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  50% { transform: translateY(-10px) scale(calc(var(--growth) * 1.04)); }
}

/* Tüylü: Orman çimenliğinde neşeli duruş */
.anim-fluffy { animation: fluffy-life var(--move-speed, 5s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes fluffy-life {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  30% { transform: translateY(-5px) scale(var(--growth)); }
  60% { transform: translateY(0) scaleX(calc(var(--growth) * 1.03)); }
}

/* Mantar & Gözcü: Rüzgarla nazikçe eğilme */
.anim-mushroom, .anim-one-eye { animation: mushroom-sway var(--move-speed, 5.5s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes mushroom-sway {
  0%, 100% { transform: rotate(0deg) scale(var(--growth)); }
  35% { transform: rotate(3deg) translateY(-2px) scale(var(--growth)); }
  70% { transform: rotate(-3deg) translateY(0) scale(var(--growth)); }
}

/* Aslan: Cesur adımlar, neşeli kafa sallama ve hafif esneme */
.anim-lion { animation: lion-life var(--move-speed, 5.4s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes lion-life {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  25% { transform: translateY(-4px) rotate(1.5deg) scale(var(--growth)); }
  50% { transform: translateY(0) scaleX(calc(var(--growth) * 1.02)) scaleY(calc(var(--growth) * 0.98)); }
  75% { transform: translateY(-6px) rotate(-1.5deg) scale(var(--growth)); }
}

.stage-5.kind-lion .creature-real img {
  filter: drop-shadow(0 16px 12px rgba(16, 40, 24, 0.65)) drop-shadow(0 0 18px rgba(255, 195, 0, 0.95)) saturate(1.25) hue-rotate(var(--hue, 0deg));
}

/* Fil: Sevimli adımlar, hafif hortum/kulak salınımı */
.anim-elephant { animation: elephant-life var(--move-speed, 5.8s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes elephant-life {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  25% { transform: translateY(-3px) rotate(1.2deg) scale(var(--growth)); }
  50% { transform: translateY(0) scaleX(calc(var(--growth) * 1.02)) scaleY(calc(var(--growth) * 0.98)); }
  75% { transform: translateY(-4px) rotate(-1.2deg) scale(var(--growth)); }
}

.stage-5.kind-elephant .creature-real img {
  filter: drop-shadow(0 16px 12px rgba(16, 40, 24, 0.65)) drop-shadow(0 0 18px rgba(70, 185, 230, 0.95)) saturate(1.2) hue-rotate(var(--hue, 0deg));
}

/* Penguen: Paytak pıtı pıtı sallanma ve neşeli kanat çırpış */
.anim-penguin { animation: penguin-life var(--move-speed, 4.6s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes penguin-life {
  0%, 100% { transform: translateY(0) rotate(-3deg) scale(var(--growth)); }
  50% { transform: translateY(-4px) rotate(3deg) scale(var(--growth)); }
}

.stage-5.kind-penguin .creature-real img {
  filter: drop-shadow(0 16px 12px rgba(16, 40, 24, 0.65)) drop-shadow(0 0 18px rgba(100, 210, 255, 0.95)) saturate(1.25) hue-rotate(var(--hue, 0deg));
}

/* Zürafa: Zarif boyun salınımı ve huzurlu adımlar */
.anim-giraffe { animation: giraffe-life var(--move-speed, 6.2s) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes giraffe-life {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(var(--growth)); }
  30% { transform: translateY(-5px) rotate(1.5deg) scale(var(--growth)); }
  70% { transform: translateY(-2px) rotate(-1.5deg) scale(var(--growth)); }
}

.stage-5.kind-giraffe .creature-real img {
  filter: drop-shadow(0 16px 12px rgba(16, 40, 24, 0.65)) drop-shadow(0 0 18px rgba(255, 175, 45, 0.95)) saturate(1.25) hue-rotate(var(--hue, 0deg));
}

/* Kutlama Zıplaması */
.student-world.is-happy .creature-real {
  animation: happy-jump 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
@keyframes happy-jump {
  0%, 100% { transform: translateY(0) scale(var(--growth)); }
  35% { transform: translateY(-22px) rotate(-7deg) scale(var(--growth)); }
  65% { transform: translateY(-5px) rotate(6deg) scale(var(--growth)); }
}

/* ====================================================
   DİNAMİK DOLAŞMA VE TÜRE ÖZGÜ YÜRÜYÜŞ MOTORU
   ==================================================== */

/* Yön Çevirme (Yalnızca Canlı Aynalanır, İsim Etiketi Düz Kalır) */
.student-world .creature {
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform-origin: center bottom;
}
.student-world[data-facing="left"] .creature {
  transform: scaleX(-1);
}
.student-world[data-facing="right"] .creature {
  transform: scaleX(1);
}

/* Yürüyüş / Uçuş Sırasında Türe Özgü Adım & Süzülüş Animasyonları */

/* 1. Tavşan: Zıplayarak İlerleme */
.student-world.kind-long-ear.is-walking .creature-real {
  animation: rabbit-walk-hop 0.52s ease-in-out infinite alternate !important;
}
@keyframes rabbit-walk-hop {
  0% { transform: scale(var(--growth, 1)) translateY(0); }
  50% { transform: scale(calc(var(--growth, 1) * 0.94), calc(var(--growth, 1) * 1.12)) translateY(-15px) rotate(4deg); }
  100% { transform: scale(calc(var(--growth, 1) * 1.06), calc(var(--growth, 1) * 0.92)) translateY(0); }
}
.student-world.kind-long-ear.is-walking .ground-shadow {
  animation: rabbit-shadow-bounce 0.52s ease-in-out infinite alternate;
}
@keyframes rabbit-shadow-bounce {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(0.62); opacity: 0.28; }
}

/* 2. Kaplumbağa & Su Aygırı: Ağır ve Paytak Sürünüş */
.student-world.kind-turtle.is-walking .creature-real,
.student-world.kind-hippo.is-walking .creature-real {
  animation: turtle-walk-waddle 1.1s ease-in-out infinite alternate !important;
}
@keyframes turtle-walk-waddle {
  0% { transform: scale(var(--growth, 1)) rotate(-3.5deg) translateY(0); }
  50% { transform: scale(calc(var(--growth, 1) * 1.02)) translateY(-2px); }
  100% { transform: scale(var(--growth, 1)) rotate(3.5deg) translateY(0); }
}

/* 3. Kirpi, Sincap, Rakun & Maymun: Hızlı Pıtı Pıtı Adımlar */
.student-world.kind-hedgehog.is-walking .creature-real,
.student-world.kind-squirrel.is-walking .creature-real,
.student-world.kind-raccoon.is-walking .creature-real,
.student-world.kind-monkey.is-walking .creature-real {
  animation: hedgehog-walk-patter 0.26s ease-in-out infinite alternate !important;
}
@keyframes hedgehog-walk-patter {
  0% { transform: scale(var(--growth, 1)) translateY(0) rotate(1.5deg); }
  100% { transform: scale(var(--growth, 1)) translateY(-3.5px) rotate(-1.5deg); }
}

/* 4. Tüylü, Tilki, Kedi, Köpek & Ayı: Çayırda Paytak Salınış */
.student-world.kind-fluffy.is-walking .creature-real,
.student-world.kind-fox.is-walking .creature-real,
.student-world.kind-cat.is-walking .creature-real,
.student-world.kind-dog.is-walking .creature-real,
.student-world.kind-bear.is-walking .creature-real {
  animation: fluffy-walk-sway 0.65s ease-in-out infinite alternate !important;
}
@keyframes fluffy-walk-sway {
  0% { transform: scale(var(--growth, 1)) rotate(-4deg) translateY(0); }
  50% { transform: scale(calc(var(--growth, 1) * 1.02)) translateY(-4px); }
  100% { transform: scale(var(--growth, 1)) rotate(4deg) translateY(0); }
}

/* 5. Gözcü & Mantar: Neşeli Yaylanma */
.student-world.kind-one-eye.is-walking .creature-real,
.student-world.kind-mushroom.is-walking .creature-real,
.student-world.kind-panda.is-walking .creature-real,
.student-world.kind-koala.is-walking .creature-real,
.student-world.kind-deer.is-walking .creature-real {
  animation: bobble-walk-step 0.48s ease-in-out infinite alternate !important;
}
@keyframes bobble-walk-step {
  0% { transform: scale(var(--growth, 1)) translateY(0) rotate(-2deg); }
  100% { transform: scale(var(--growth, 1)) translateY(-7px) rotate(2deg); }
}

.student-world.kind-frog.is-walking .creature-real {
  animation: rabbit-walk-hop 0.62s ease-in-out infinite alternate !important;
}

/* 6. Ejderha: Görkemli Gökyüzü Süzülüşü */
.student-world.kind-dragon.is-walking .creature-real {
  animation: dragon-glide-flight 1.3s ease-in-out infinite alternate !important;
}
@keyframes dragon-glide-flight {
  0% { transform: scale(var(--growth, 1)) translateY(0) rotate(-2.5deg); }
  50% { transform: scale(calc(var(--growth, 1) * 1.04)) translateY(-10px) rotate(1deg); }
  100% { transform: scale(var(--growth, 1)) translateY(-4px) rotate(3deg); }
}

/* 7. Kanatlı / Peri / Papağan: Pırpır Çiçek Uçuşu */
.student-world.kind-winged.is-walking .creature-real,
.student-world.kind-parrot.is-walking .creature-real {
  animation: winged-fly-step 0.36s ease-in-out infinite alternate !important;
}
@keyframes winged-fly-step {
  0% { transform: scale(var(--growth, 1)) translateY(0) rotate(-2deg); }
  100% { transform: scale(var(--growth, 1)) translateY(-7px) rotate(2deg); }
}

/* 8. Baykuş: Sessiz Süzülüş & Baş Hareketi */
.student-world.kind-owl.is-walking .creature-real {
  animation: owl-glide-step 0.95s ease-in-out infinite alternate !important;
}
@keyframes owl-glide-step {
  0% { transform: scale(var(--growth, 1)) translateY(0) rotate(0deg); }
  100% { transform: scale(var(--growth, 1)) translateY(-6px) rotate(2.5deg); }
}

/* 9. Bulut: Gökyüzünde Rüzgarla Süzülüş */
.student-world.kind-cloud.is-walking .creature-real {
  animation: cloud-glide-step 1.7s ease-in-out infinite alternate !important;
}
@keyframes cloud-glide-step {
  0% { transform: scale(var(--growth, 1)) translateY(0); }
  100% { transform: scale(calc(var(--growth, 1) * 1.05)) translateY(-8px); }
}

/* 10. Penguen: Paytak Pıtı Pıtı Kutup Yürüyüşü */
.student-world.kind-penguin.is-walking .creature-real {
  animation: penguin-walk-waddle 0.36s ease-in-out infinite alternate !important;
}
@keyframes penguin-walk-waddle {
  0% { transform: scale(var(--growth, 1)) rotate(-7deg) translateY(0); }
  50% { transform: scale(calc(var(--growth, 1) * 1.02)) translateY(-4px); }
  100% { transform: scale(var(--growth, 1)) rotate(7deg) translateY(0); }
}

/* 11. Savan Canlıları: Görkemli ve Dengeli Adımlar (Aslan, Fil, Zürafa, Zebra) */
.student-world.kind-lion.is-walking .creature-real,
.student-world.kind-elephant.is-walking .creature-real,
.student-world.kind-giraffe.is-walking .creature-real,
.student-world.kind-zebra.is-walking .creature-real {
  animation: savanna-walk-step 0.58s ease-in-out infinite alternate !important;
}
@keyframes savanna-walk-step {
  0% { transform: scale(var(--growth, 1)) rotate(-2deg) translateY(0); }
  50% { transform: scale(calc(var(--growth, 1) * 1.01)) translateY(-3px); }
  100% { transform: scale(var(--growth, 1)) rotate(2deg) translateY(0); }
}

/* ====================================================
   BİRBİRLERİYLE ETKİLEŞİM & SELAMLAŞMA
   ==================================================== */
.student-world.is-greeting .creature-real {
  animation: greeting-bounce 0.85s cubic-bezier(0.2, 1.4, 0.4, 1) !important;
  filter: drop-shadow(0 0 14px rgba(255, 220, 100, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) !important;
}
@keyframes greeting-bounce {
  0%, 100% { transform: scale(var(--growth, 1)) translateY(0) rotate(0deg); }
  35% { transform: scale(calc(var(--growth, 1) * 1.16)) translateY(-16px) rotate(-5deg); }
  70% { transform: scale(calc(var(--growth, 1) * 1.05)) translateY(-3px) rotate(4deg); }
}

.greeting-burst {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  animation: greeting-float-bubble 1.4s ease-out forwards;
}
.greeting-burst span {
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 6px rgba(255, 105, 180, 0.85));
  animation: greeting-pop-scale 0.4s ease-out;
}
@keyframes greeting-float-bubble {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) translateY(0); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) translateY(-14px); }
  75% { opacity: 0.95; transform: translate(-50%, -50%) scale(1) translateY(-28px); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) translateY(-42px); }
}
@keyframes greeting-pop-scale {
  0% { transform: scale(0); }
  65% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ====================================================
   PREFERS-REDUCED-MOTION (Hassas Kullanıcı & Erişilebilirlik)
   ==================================================== */
@media (prefers-reduced-motion: reduce) {
  .student-world {
    transition: none !important;
    animation: none !important;
  }
  .creature-real,
  .creature,
  .atmosphere i,
  .ground-shadow,
  .magic-ring,
  .enchanted-rainbow {
    animation: none !important;
    transition: none !important;
  }
}

/* Etkileşim Sırasında Hareketi Durdurma (Akıllı Tahta / Tıklama Kolaylığı) */
.student-world:hover,
.student-world:focus-within,
.student-world.is-munching,
.student-world.is-happy,
.student-world.is-roulette-highlight {
  animation-play-state: paused !important;
  z-index: 9999 !important;
}

/* ----------------------------------------------------
   Besleme (Feeding) & Sevme Efekti
---------------------------------------------------- */
.feeding-burst {
  position: absolute;
  left: 50%;
  top: -12px;
  translate: -50% -50%;
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dropping-food {
  font-size: clamp(26px, 3.4vw, 44px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  animation: food-fall-bounce 0.85s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.food-score {
  background: linear-gradient(135deg, #ffd84d, #ff9b44);
  color: #2e1d00;
  padding: 3px 11px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(255, 170, 0, 0.55);
  animation: score-float-up 1.25s ease-out forwards;
}
.munch-sparkles {
  position: absolute;
  top: 10px;
  display: flex;
  gap: 12px;
}
.munch-sparkles i {
  font-style: normal;
  font-size: 1.15rem;
  animation: sparkle-burst 1s ease-out forwards;
}
@keyframes food-fall-bounce {
  0% { opacity: 0; transform: translateY(-45px) scale(0.4); }
  35% { opacity: 1; transform: translateY(18px) scale(1.2); }
  65% { transform: translateY(8px) scale(0.9); }
  100% { opacity: 0; transform: translateY(18px) scale(0.1); }
}
@keyframes score-float-up {
  0% { opacity: 0; transform: translateY(12px) scale(0.8); }
  25% { opacity: 1; transform: translateY(-8px) scale(1.1); }
  80% { opacity: 1; transform: translateY(-26px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.85); }
}
@keyframes sparkle-burst {
  0% { opacity: 0; transform: scale(0.3) translateY(0); }
  50% { opacity: 1; transform: scale(1.2) translateY(-14px); }
  100% { opacity: 0; transform: scale(0.8) translateY(-28px); }
}
.student-world.is-munching .creature-real {
  animation: munch-wiggle 0.75s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}
@keyframes munch-wiggle {
  0%, 100% { transform: scale(var(--growth)); }
  25% { transform: translateY(-8px) scale(calc(var(--growth) * 1.12)) rotate(-4deg); }
  50% { transform: translateY(-3px) scale(calc(var(--growth) * 0.95)) rotate(4deg); }
  75% { transform: translateY(-6px) scale(calc(var(--growth) * 1.08)) rotate(-2deg); }
}

/* Yıldız Kutlama Patlaması */
.celebration-burst { position: absolute; z-index: 20; left: 50%; top: 42%; width: 1px; height: 1px; pointer-events: none; }
.celebration-burst i { position: absolute; left: 0; top: 0; color: var(--burst-color); font-style: normal; font-size: clamp(12px, 1.5vw, 20px); text-shadow: 0 2px 4px rgba(23, 59, 50, 0.44), 0 0 7px white; animation: burst-star 0.95s ease-out forwards; }
@keyframes burst-star { 0% { opacity: 0; transform: rotate(var(--burst-angle)) translateX(0) scale(0.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--burst-angle)) translateX(var(--burst-distance)) scale(1.15); } }


/* ----------------------------------------------------
   Öğrenci İsim Etiketi (Doğal Ahşap/Yaprak Temalı)
---------------------------------------------------- */
.name-tag {
  position: relative;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
  background: rgba(14, 40, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.42);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: clamp(0.62rem, 0.68vw, 0.76rem);
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(8, 26, 18, 0.5);
  backdrop-filter: blur(4px);
  width: max-content;
  max-width: min(180px, 20vw);
  margin-top: 1px;
  letter-spacing: -0.01em;
  transition: max-width 0.25s ease, background 0.25s ease;
}
.name-tag span {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.08;
}
.student-world:hover .name-tag {
  max-width: min(220px, 26vw);
  background: rgba(8, 28, 18, 0.98);
  border-color: rgba(255, 245, 170, 0.85);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.65);
  z-index: 999;
}
.name-tag b {
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #204128;
  background: #ffe370;
  font-size: 0.62rem;
  flex-shrink: 0;
}
.level-dot { width: 5px; height: 5px; border-radius: 50%; background: #ffd85d; box-shadow: 0 0 6px #ffe988; flex-shrink: 0; }

.stage-5 .name-tag {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(255, 170, 0, 0.95));
  color: #173b22;
  border-color: #fff29e;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.65);
}
.stage-5 .name-tag b {
  background: #173b22;
  color: #ffd700;
}

dialog { border:0; padding:0; border-radius:28px; width:min(780px,calc(100% - 28px)); max-height:min(88vh,calc(100dvh - 28px)); overflow:hidden; color:var(--ink); box-shadow:0 35px 100px #0f292576; }
dialog::backdrop { background:#102f2abf; backdrop-filter:blur(6px); }
.panel-shell,.student-form { max-height:min(88vh,calc(100dvh - 28px)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:28px; padding-bottom:max(28px,env(safe-area-inset-bottom)); background:#fffdf8; }
.panel-shell header,.student-form header { display:flex; justify-content:space-between; align-items:flex-start; }
h2 { margin:6px 0 0; font-size:1.8rem; }
.close-button { border:0; border-radius:50%; width:42px; height:42px; font-size:1.7rem; background:#edf1e8; color:#32493e; }
.school-controls { display:grid; grid-template-columns:minmax(150px,1fr) auto auto auto minmax(150px,1fr) auto auto auto; gap:8px; align-items:end; padding:16px; margin:24px 0 8px; border-radius:18px; background:#edf5e9; }
.compact-action { min-width:42px; padding-inline:11px!important; }
.panel-toolbar { display:flex; gap:10px; align-items:end; margin:12px 0 18px; }
.data-toolbar { display:flex; justify-content:flex-end; gap:8px; margin:0 0 10px; }
.backup-reminder { align-self:center; margin-right:auto; color:#8a5b12; font-size:.82rem; font-weight:750; }
.student-search-row { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.student-search-row label { font-weight:850; color:#35504a; white-space:nowrap; }
.student-search-row input { width:100%; border:1px solid #cbd9d2; border-radius:12px; padding:11px 13px; background:white; }
.performance-mode .atmosphere,.performance-mode .ground-details { display:none!important; }
.performance-mode .student-world,.performance-mode .creature-real { animation-duration:10s!important; }
.file-button { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.bulk-management { display:grid; grid-template-columns:auto minmax(150px,1fr) auto auto; gap:8px; align-items:center; padding:10px; margin-bottom:10px; border-radius:14px; background:#f4f0df; border:1px solid #e5ddc4; }
.bulk-select-all { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.bulk-select-all input,.student-select input { width:18px; height:18px; accent-color:#24734f; }
.danger-button { border:0; border-radius:12px; padding:12px 15px; color:white; background:#b94242; font-weight:850; }
.activity-delete-button { color:#a23c3c; border-color:#e2b9b9; background:#fff2f0; }
.activity-delete-button:hover:not(:disabled) { color:white; background:#b94242; border-color:#b94242; }
.danger-button:disabled,.secondary-button:disabled { opacity:.45; cursor:not-allowed; }
label { display:grid; gap:7px; font-size:.85rem; font-weight:850; color:#536258; flex:1; }
select,input,textarea { width:100%; border:1px solid #d8e2d5; border-radius:12px; padding:12px; color:var(--ink); background:white; }
textarea { resize:vertical; min-height:180px; line-height:1.45; }
.bulk-students-wrap { display:grid; gap:8px; padding:14px; border-radius:16px; background:#edf5e9; border:1px solid #d8e6d4; }
.bulk-students-wrap>label { display:block; color:#315348; }
.bulk-students-info { display:flex; justify-content:space-between; gap:12px; color:#6e7e73; font-size:.76rem; }
.bulk-students-info strong { flex:0 0 auto; color:#1f6b55; }
.secondary-button { border:1px solid #cfd9cc; border-radius:12px; padding:12px 16px; background:#f2f6ef; font-weight:850; color:#24473a; }
.student-list { display:grid; gap:9px; max-height:44vh; overflow:auto; padding-right:5px; }
.student-row { display:grid; grid-template-columns:auto 1fr auto auto auto; gap:10px; align-items:center; background:white; border:1px solid #e1e8df; padding:11px 12px; border-radius:16px; }
.student-row.is-selected { border-color:#4ba77c; background:#eef9f2; box-shadow:0 0 0 2px #65b98b33; }
.student-select { display:grid; place-items:center; }
.student-row strong { display:block; }.student-row small { color:#788279; }
.score { min-width:66px; text-align:center; font-weight:950; color:#24734f; }
.award-button { border:0; color:white; background:#ef7757; padding:10px 14px; border-radius:11px; font-weight:850; }
.award-button:disabled { opacity:.45; cursor:not-allowed; }
.edit-button { border:1px solid #cfd9cc; color:#315348; background:#f2f6ef; padding:9px 11px; border-radius:11px; font-weight:850; }
.save-note { color:#728078; font-size:.8rem; }.save-note span { display:inline-block; width:8px; height:8px; border-radius:50%; background:#43b774; }
.history-panel { margin-top:14px; padding:12px; border-radius:16px; background:#f4f7f1; border:1px solid #dce6d9; }
.history-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.score-history-list { display:grid; gap:5px; max-height:120px; overflow:auto; }
.history-entry { display:flex; justify-content:space-between; gap:12px; padding:7px 9px; border-radius:9px; background:white; color:#536258; font-size:.78rem; }
.history-entry b { color:#24734f; }
.history-empty { color:#87948b; font-size:.8rem; padding:5px; text-align:center; }
.student-form { display:grid; gap:18px; }.student-form header { margin-bottom:4px; }.student-form .primary-button { margin-top:8px; }
.customizer-preview { min-height:160px; max-height:180px; display:flex; align-items:center; justify-content:center; gap:20px; overflow:hidden; border:1px solid #dce7d8; border-radius:20px; background:radial-gradient(circle at 50% 80%,#fff4b1 0,transparent 34%),linear-gradient(#dff4e7,#b8ddb7); }
.customizer-preview strong,.customizer-preview small { display:block; }.customizer-preview strong { font-size:1.2rem; }.customizer-preview small { margin-top:5px; color:#607066; }
.preview-creature { position:relative; width:140px; height:150px; display:grid; place-items:end center; }
.preview-creature img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 8px #183b2866) saturate(1.05) hue-rotate(var(--preview-hue,0deg)); transition:.3s; }
.preview-creature .accessory { display:none; }.preview-creature .accessory.visible { display:block; }
.species-native-select { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
.species-picker { display:grid; gap:10px; }
.species-category-tabs { display:flex; gap:7px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.species-category-tabs button { flex:0 0 auto; border:1px solid #d6e1d3; border-radius:999px; padding:7px 11px; background:#f3f7f0; color:#456054; font-size:.73rem; font-weight:850; }
.species-category-tabs button.active { color:white; background:#24734f; border-color:#24734f; }
.species-gallery { display:grid; grid-template-columns:repeat(5,minmax(72px,1fr)); gap:8px; max-height:310px; overflow:auto; padding:4px; border-radius:16px; background:#edf5e9; }
.species-card { position:relative; display:grid; grid-template-rows:78px auto; gap:3px; min-width:0; padding:7px 5px; border:2px solid transparent; border-radius:14px; background:#fff; color:#365246; font-size:.68rem; font-weight:850; text-align:center; }
.species-card img { width:100%; height:78px; object-fit:contain; filter:drop-shadow(0 5px 4px #173b3240) hue-rotate(var(--card-hue,0deg)); }
.species-card.selected { border-color:#f09a55; background:#fff8dd; box-shadow:0 4px 12px #d9874438; }
.species-card.selected::after { content:"✓"; position:absolute; top:5px; right:5px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:white; background:#24734f; }
.hidden-field { display:none; }

@media (max-width:700px) {
  dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:20px; }
  .panel-shell,.student-form { max-height:calc(100dvh - 16px); padding:18px; padding-bottom:max(18px,env(safe-area-inset-bottom)); }
  .garden-title { top:18px; left:18px; }
  .garden-title-copy strong { max-width:140px; line-height:1; }
  .board-actions { right:14px; top:14px; }
  .back-games-button { width:40px; height:40px; padding:0; }
  .teacher-button { font-size:0; width:44px; padding:0; }
  .teacher-button::after { content:"⚙"; font-size:1.1rem; }
  .welcome-card { padding:35px 24px 28px; }
  .creature-layer { inset:110px 2px 3%; }
  .panel-toolbar,.school-controls { display:grid; grid-template-columns:1fr; }
  .bulk-management { grid-template-columns:1fr 1fr; }.bulk-select-all,#move-target-class{grid-column:1/-1}
  .student-row { grid-template-columns:auto 1fr auto; }.student-row .score{grid-column:3}.award-button { grid-column:2/-1; }.edit-button{grid-column:2/-1;}
  .species-gallery { grid-template-columns:repeat(3,minmax(74px,1fr)); }
  .student-list { max-height:none; }
  .name-tag { max-width:140px; font-size:.68rem; }
  .student-world:hover .name-tag { max-width:170px; }
  .garden-auth-dialog.panel-shell { padding:18px 16px; }
  .garden-auth-heading p { display:none; }
  .garden-auth-privacy { margin:13px 0; }
  .garden-auth-tabs { margin-bottom:13px; }
  .garden-auth-panel { padding:16px 14px; }
  .garden-qr-content { gap:14px; }
  .garden-pin-card { min-width:0; }
  #garden-qr-pin-display { font-size:1.65rem; }
}

@media (max-width:430px) {
  .garden-auth-dialog { width:calc(100% - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); border-radius:22px; }
  .garden-auth-dialog.panel-shell { max-height:calc(100dvh - 12px); padding:16px 14px max(18px,env(safe-area-inset-bottom)); }
  .garden-auth-icon { width:42px; height:42px; flex-basis:42px; border-radius:13px; }
  .garden-auth-heading h2 { font-size:1.3rem; }
  .garden-auth-heading .eyebrow { font-size:.65rem; }
  .garden-auth-dialog .close-button { width:38px; height:38px; flex-basis:38px; }
  .garden-auth-privacy p { font-size:.76rem; }
  .garden-auth-tabs .secondary-button { min-height:44px; padding:8px 6px; font-size:.78rem; }
  .garden-qr-content { flex-direction:column; }
  .garden-pin-card { text-align:center; }
  .garden-qr-code canvas,.garden-qr-code img { width:104px !important; height:104px !important; }
  .garden-qr-code:empty { width:124px; height:124px; }
  .garden-auth-actions { grid-template-columns:1fr; }
  .garden-admin-groups { grid-template-columns:1fr; }
  .garden-pairing-form { grid-template-columns:1fr; }
  .garden-verification-actions { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }
.world-switch{position:absolute;z-index:21;top:78px;left:50%;translate:-50% 0;display:flex;padding:5px;border-radius:999px;background:#173b32c9}.world-switch button{border:0;border-radius:999px;padding:8px 16px;color:white;background:transparent;font-weight:900}.world-switch button.active{color:#173b32;background:#ffe279}.garden.tree-world{background-image:url("assets/forest-world.png")}.tree-layer{position:absolute;z-index:8;inset:125px 2% 2%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(3,1fr);gap:2px}.tree-layer[hidden]{display:none}.student-tree{position:relative;border:0;background:transparent;color:white;text-shadow:0 2px 6px #173b32;min-width:0;padding:0;font-weight:900}.tree-art{display:block;height:72%;position:relative}.tree-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 5px #173b3266);transform:scale(calc(.38 + var(--tree-stage,.1)))}.student-tree.stage-1{--tree-stage:.15}.student-tree.stage-2{--tree-stage:.27}.student-tree.stage-3{--tree-stage:.39}.student-tree.stage-4{--tree-stage:.5}.student-tree.stage-5{--tree-stage:.6}.tree-golden img{filter:hue-rotate(45deg) saturate(1.2) drop-shadow(0 7px 5px #173b3266)}.tree-berry img{filter:hue-rotate(310deg) saturate(1.15) drop-shadow(0 7px 5px #173b3266)}.tree-birds,.tree-flowers{position:absolute;inset:auto 0 8%;font-style:normal;font-size:12px}.student-tree strong,.student-tree small{display:block;font-size:clamp(7px,.68vw,11px)}.tree-focus{position:absolute;z-index:30;inset:4%;border-radius:30px;background:linear-gradient(#dff5e8dd,#fff9d8e8),url("assets/forest-world.png") center/cover;text-align:center;padding:20px}.tree-focus[hidden]{display:none}.tree-focus button{float:left;border:0;border-radius:999px;padding:10px 16px;background:#173b32;color:white;font-weight:900}.focus-tree{display:block;height:60vh;max-width:70%;object-fit:contain;margin:0 auto;filter:drop-shadow(0 15px 12px #173b3266)}.focus-nature{font-size:2rem}

/* ----------------------------------------------------
   Ses Butonu & Şanslı Bahçıvan Butonu
---------------------------------------------------- */
.round-button.muted {
  background: #6d2424b8;
  color: #ffb8b8;
  border-color: #ff9b9b88;
}
.lucky-button {
  background: linear-gradient(135deg, #246d51, #1d825c);
  border: 1px solid #ffd85d88;
  box-shadow: 0 4px 18px #ffd85d30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.lucky-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px #ffd85d60;
  background: linear-gradient(135deg, #2a7e5e, #239c6e);
}
.lucky-button:active {
  transform: scale(0.96);
}
.activity-quick-button {
  background: linear-gradient(135deg, #1f644e, #298563);
  border: 1px solid #7be3b7aa;
  box-shadow: 0 4px 18px #29856333;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.activity-quick-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px #29856360;
  background: linear-gradient(135deg, #26795f, #319e76);
}
.activity-quick-button:active {
  transform: scale(0.96);
}
.activity-add-button {
  background: linear-gradient(135deg, #256e52, #1b5740) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  border: 1px solid #7ae0b388 !important;
  box-shadow: 0 2px 8px #1b574033;
}
.activity-add-button:hover {
  background: linear-gradient(135deg, #2f8765, #226b50) !important;
  transform: translateY(-1px);
}

/* Çekiliş Sırasında Bahçedeki Canlıların Vurgulanması */
.student-world.is-roulette-highlight {
  transform: scale(1.3) !important;
  z-index: 100 !important;
  transition: transform 0.08s ease !important;
}
.student-world.is-roulette-highlight .magic-ring {
  opacity: 1 !important;
  border-color: #ffe066 !important;
  background: radial-gradient(ellipse, #ffe066cc 0, transparent 70%) !important;
  box-shadow: 0 0 30px #ffd700 !important;
}
.student-world.is-roulette-highlight .name-tag {
  background: #ffd700 !important;
  color: #173b32 !important;
  box-shadow: 0 0 15px #ffd700;
  font-weight: 900;
}

/* ----------------------------------------------------
   Seviye Atlama Bildirim Kutusu (Level Toast)
---------------------------------------------------- */
.level-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  animation: toast-drop 0.45s cubic-bezier(0.18, 1.25, 0.4, 1) both;
}
.level-toast[hidden] {
  display: none;
}
.level-toast-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #13392f, #1b5343);
  color: white;
  border: 2px solid #ffd85d;
  border-radius: 999px;
  box-shadow: 0 16px 40px #0c2921a6, 0 0 25px #ffd85d55;
}
.level-toast-icon {
  font-size: 2.2rem;
  animation: icon-bounce 0.8s ease infinite alternate;
}
.level-toast strong {
  display: block;
  font-size: 1.15rem;
  color: #ffd85d;
  letter-spacing: 0.08em;
}
.level-toast p {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f2faf5;
}
@keyframes toast-drop {
  0% { opacity: 0; transform: translate(-50%, -35px) scale(0.85); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes icon-bounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-4px) scale(1.15); }
}

/* ----------------------------------------------------
   Akıllı Tahta Dokunmatik Hızlı Puan Popover'ı (Quick Dialog)
---------------------------------------------------- */
.quick-dialog {
  width: min(620px, calc(100% - 24px));
}
.quick-panel {
  padding: 24px;
}
.quick-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.quick-student-card {
  display: flex;
  align-items: center;
  gap: 16px;
}
.quick-avatar {
  position: relative;
  width: 76px;
  height: 84px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 75%, #fff2b2 0, #d5edd8 65%);
  border: 1px solid #c9dec8;
  display: grid;
  place-items: end center;
  overflow: visible;
  flex-shrink: 0;
}
.quick-avatar img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 6px #17382240) hue-rotate(var(--quick-hue, 0deg));
}
.quick-avatar .accessory {
  position: absolute;
  left: var(--acc-left, 50%);
  top: var(--acc-top, 5%);
  font-size: var(--acc-size, 32px);
  translate: -50% -50%;
  pointer-events: none;
}
.quick-details h2 {
  margin: 3px 0 6px;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  color: var(--ink);
  line-height: 1.1;
}
.quick-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}
.quick-badge {
  font-size: 0.8rem;
  font-weight: 850;
  padding: 4px 10px;
  border-radius: 999px;
}
.quick-badge.level {
  background: #ffe375;
  color: #3b300a;
}
.quick-badge.score {
  background: #e3f4e8;
  color: #1a6249;
  border: 1px solid #cce8d4;
}

/* İlerleme Çubuğu */
.quick-progress-wrap {
  margin: 16px 0 14px;
  background: #f3f7f1;
  padding: 10px 14px;
  border-radius: 14px;
}
.quick-progress-track {
  width: 100%;
  height: 11px;
  border-radius: 999px;
  background: #dfe8dd;
  overflow: hidden;
}
.quick-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #43b774, #ffd85d);
  transition: width 0.35s ease;
}
.quick-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #65756a;
}

/* Etkinlik Butonları Izgarası */
.quick-activities-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
}
.quick-activities-title {
  margin: 0;
  font-weight: 900;
  color: #274537;
  display: flex;
  flex-direction: column;
}
.quick-activities-title span {
  font-size: 1rem;
}
.quick-activities-title small {
  color: #7b8c80;
  font-weight: 600;
  font-size: 0.78rem;
}
.quick-add-act-btn {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eef8f3;
  color: #175438;
  border: 1.5px dashed #2da373;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.quick-add-act-btn:hover {
  background: #2da373;
  color: #ffffff;
  border-style: solid;
  transform: translateY(-1px);
}
.quick-empty-activities {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 16px;
  background: #f7faf8;
  border: 2px dashed #cfe5db;
  border-radius: 14px;
  color: #556c60;
}
.quick-empty-activities p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
}
.quick-empty-add-btn {
  padding: 9px 20px;
  font-size: 0.92rem;
  font-weight: 850;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #1b6348, #2a8b65);
  box-shadow: 0 4px 14px #1b634840;
}
.quick-empty-add-btn:hover {
  background: linear-gradient(135deg, #237a5a, #33a579);
  transform: translateY(-2px);
}
.activity-suggestions-wrap {
  margin: 8px 0 14px;
  padding: 10px 12px;
  background: #f3f9f5;
  border-radius: 12px;
  border: 1px solid #d4ebdf;
}
.suggestions-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 850;
  color: #246349;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.suggestion-chip {
  background: #ffffff;
  border: 1px solid #b7dfcc;
  color: #1a573e;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.suggestion-chip:hover {
  background: #2b805c;
  color: #ffffff;
  border-color: #2b805c;
  transform: translateY(-1px);
}
.quick-activities-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  max-height: 38vh;
  overflow-y: auto;
  padding: 2px;
}
.quick-activity-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid #dce5da;
  border-radius: 14px;
  font-weight: 850;
  font-size: 0.95rem;
  color: #204133;
  cursor: pointer;
  min-height: 52px;
  transition: all 0.15s cubic-bezier(0.2, 0.9, 0.2, 1);
  text-align: left;
}
.quick-activity-btn:hover {
  background: #f1f8ee;
  border-color: #55b67d;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px #1b4d321f;
}
.quick-activity-btn:active {
  transform: scale(0.97);
}
.quick-activity-btn .act-pts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ef7757;
  color: white;
  font-weight: 900;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Mini Yıldız Satırı */
.quick-bonus-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.quick-mini-award {
  flex: 1;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1.5px dashed #4cb97e;
  background: #f4fbf5;
  color: #1c5e44;
  font-weight: 900;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-mini-award:hover {
  background: #3eb574;
  color: white;
  border-style: solid;
  transform: translateY(-1px);
}
.quick-mini-award:active {
  transform: scale(0.96);
}

/* Hızlı Panel Alt Aksiyonlar */
.quick-footer {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf1eb;
}
.quick-cheer-btn {
  flex: 2;
  background: linear-gradient(135deg, #fff7d6, #ffe58f);
  border: 1px solid #f2ce5f;
  color: #574004;
  font-weight: 900;
}
.quick-cheer-btn:hover {
  background: linear-gradient(135deg, #fff2be, #ffd966);
}

/* ----------------------------------------------------
   Günün Bahçıvanı Şanslı Çekiliş Dialog (Lucky Dialog)
---------------------------------------------------- */
.lucky-dialog {
  width: min(520px, calc(100% - 24px));
  max-height: min(92vh, calc(100dvh - 20px));
  position: relative;
}
.lucky-panel {
  text-align: center;
  padding: 22px 20px 20px;
  position: relative;
  overflow-y: auto !important;
  overflow-x: hidden;
  max-height: min(92vh, calc(100dvh - 20px));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd9d2 transparent;
}
.lucky-panel::-webkit-scrollbar {
  width: 6px;
}
.lucky-panel::-webkit-scrollbar-track {
  background: transparent;
}
.lucky-panel::-webkit-scrollbar-thumb {
  background: #cbd9d2;
  border-radius: 999px;
}
.lucky-confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
.lucky-confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 2.8s linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(480px) rotate(720deg); opacity: 0; }
}
.lucky-header {
  position: relative;
  z-index: 2;
}
.lucky-header h2 {
  margin: 6px 0 0;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: #173e31;
}
.lucky-badge-pill {
  display: inline-block;
  background: #fff0af;
  color: #724e03;
  padding: 5px 15px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.lucky-stage {
  position: relative;
  z-index: 2;
  margin: 12px 0 12px;
}
.lucky-creature-showcase {
  position: relative;
  width: 140px;
  height: 155px;
  margin: 0 auto 8px;
  display: grid;
  place-items: end center;
}
.lucky-sunburst {
  position: absolute;
  inset: -25px;
  background: radial-gradient(circle, #ffe668bb 15%, #ffd44755 45%, transparent 72%);
  border-radius: 50%;
  animation: lucky-glow 2.4s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes lucky-glow {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}
.lucky-creature-showcase img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 12px #163e2a5e) hue-rotate(var(--lucky-hue, 0deg));
}
.lucky-creature-showcase .accessory {
  position: absolute;
  left: var(--acc-left, 50%);
  top: var(--acc-top, 5%);
  font-size: var(--acc-size, 46px);
  translate: -50% -50%;
  z-index: 5;
  pointer-events: none;
}
.lucky-stage h3 {
  margin: 6px 0 2px;
  font-size: 1.55rem;
  font-weight: 950;
  color: #173d31;
}
.lucky-sub {
  color: #617368;
  font-weight: 800;
  font-size: 0.9rem;
  margin: 0 0 10px;
}
.lucky-assignment-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f1f8ee;
  border: 1.5px dashed #59ba7f;
  border-radius: 14px;
  text-align: left;
  color: #1a4f38;
}
.lucky-assignment-box span {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.lucky-assignment-box strong {
  font-size: 0.88rem;
  line-height: 1.35;
}
.lucky-cycle-box {
  margin-top: 10px;
  padding: 9px 12px;
  background: #f4faf6;
  border: 1px solid #cce8da;
  border-radius: 12px;
  text-align: left;
}
.lucky-cycle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lucky-cycle-badge {
  font-size: 0.88rem;
  font-weight: 850;
  color: #175438;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lucky-reset-btn {
  background: none;
  border: none;
  color: #278058;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  text-decoration: underline;
  transition: opacity 0.2s;
}
.lucky-reset-btn:hover {
  opacity: 0.7;
}
.lucky-cycle-desc {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #557564;
  line-height: 1.35;
}
.lucky-points-config {
  margin-top: 10px;
  padding: 11px 13px;
  background: #fff9ed;
  border: 1.5px solid #fedba5;
  border-radius: 14px;
  text-align: left;
}
.lucky-points-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lucky-points-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #8c4a00;
  cursor: pointer;
  margin: 0;
}
.lucky-points-icon {
  font-size: 1.15rem;
}
.lucky-points-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #7b4308;
}
.lucky-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lucky-points-input {
  width: 68px;
  padding: 5px 8px;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  border: 2px solid #f9b657;
  border-radius: 10px;
  background: #ffffff;
  color: #803a00;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lucky-points-input:focus {
  border-color: #ef7757;
  box-shadow: 0 0 0 3px rgba(239, 119, 87, 0.2);
}
.lucky-points-unit {
  font-size: 0.82rem;
  font-weight: 750;
  color: #9c601e;
}
.lucky-points-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.lucky-preset-chip {
  background: #ffffff;
  border: 1.5px solid #f6cf8a;
  color: #7b4308;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lucky-preset-chip:hover {
  background: #fff2db;
  border-color: #f7a938;
  transform: translateY(-1px);
}
.lucky-preset-chip.active {
  background: linear-gradient(135deg, #f79541, #ef7757);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(239, 119, 87, 0.35);
}
.lucky-points-hint {
  margin: 6px 0 0;
  font-size: 0.77rem;
  color: #8c6126;
  line-height: 1.35;
}
.lucky-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.lucky-give-star-btn {
  background: linear-gradient(135deg, #ef7757, #f79541);
  font-size: 1.08rem;
  padding: 14px 18px;
  box-shadow: 0 10px 24px #ef775752;
}
.lucky-give-star-btn:hover {
  background: linear-gradient(135deg, #f58466, #ffa252);
  transform: translateY(-2px);
}

@media (max-height: 780px) {
  .lucky-panel {
    padding: 16px 16px 16px;
  }
  .lucky-creature-showcase {
    width: 115px;
    height: 125px;
    margin: 0 auto 4px;
  }
  .lucky-header h2 {
    font-size: 1.45rem;
  }
  .lucky-badge-pill {
    padding: 3px 12px;
    font-size: 0.72rem;
  }
  .lucky-stage {
    margin: 6px 0 8px;
  }
  .lucky-stage h3 {
    font-size: 1.35rem;
    margin: 4px 0 2px;
  }
  .lucky-sub {
    margin: 0 0 6px;
    font-size: 0.82rem;
  }
  .lucky-assignment-box {
    padding: 7px 10px;
    gap: 8px;
  }
  .lucky-assignment-box span {
    font-size: 1.3rem;
  }
  .lucky-assignment-box strong {
    font-size: 0.8rem;
  }
  .lucky-cycle-box {
    margin-top: 6px;
    padding: 7px 10px;
  }
  .lucky-cycle-badge {
    font-size: 0.8rem;
  }
  .lucky-cycle-desc {
    font-size: 0.74rem;
  }
  .lucky-points-config {
    margin-top: 6px;
    padding: 8px 10px;
  }
  .lucky-points-presets {
    margin-top: 6px;
  }
  .lucky-preset-chip {
    padding: 3px 8px;
    font-size: 0.78rem;
  }
  .lucky-points-hint {
    margin: 4px 0 0;
    font-size: 0.72rem;
  }
  .lucky-actions {
    margin-top: 8px;
    gap: 6px;
  }
  .lucky-give-star-btn {
    padding: 11px 16px;
    font-size: 0.95rem;
  }
}

@media (max-width: 700px) {
  .quick-activities-list {
    grid-template-columns: 1fr;
  }
  .quick-header {
    flex-direction: column-reverse;
  }
  .lucky-button {
    font-size: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .lucky-button::after {
    content: "🎲";
    font-size: 1.2rem;
  }
  .activity-quick-button {
    font-size: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .activity-quick-button::after {
    content: "✨";
    font-size: 1.2rem;
  }
}

.student-tree.is-tree-award .tree-art { animation:tree-award-pop .9s cubic-bezier(.2,.9,.2,1); }
@keyframes tree-award-pop { 0%,100%{transform:scale(1)}35%{transform:translateY(-12px) scale(1.15) rotate(-2deg)}65%{transform:translateY(-3px) scale(1.07) rotate(2deg)} }
.focus-tree-wrap.tree-golden .focus-tree { filter:hue-rotate(45deg) saturate(1.2) drop-shadow(0 15px 12px #173b3266); }
.focus-tree-wrap.tree-berry .focus-tree { filter:hue-rotate(310deg) saturate(1.15) drop-shadow(0 15px 12px #173b3266); }

/* Gerçekçi orman görünümü */
.tree-layer{inset:132px 2.5% 2%;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:0 5px;perspective:1000px;background:linear-gradient(180deg,transparent 0 25%,#4f76230f 25% 33%,transparent 33% 58%,#355d1b12 58% 67%,transparent 67% 90%,#25481517 90%)}
.student-tree{display:block;position:relative;overflow:visible;text-shadow:none;transition:filter .2s,transform .2s}
.student-tree:hover{z-index:5;filter:brightness(1.08)}
.tree-art{position:absolute;inset:0 0 22px;display:grid;place-items:end center;overflow:visible}
.tree-art::after{content:"";position:absolute;z-index:1;left:12%;right:12%;bottom:-2px;height:15%;border-radius:50%;background:radial-gradient(ellipse at 50% 42%,#71502f 0 28%,#3d5425 29% 48%,#243d1b80 49% 60%,transparent 72%);box-shadow:0 6px 8px #18341645;filter:blur(.2px)}
.tree-art::before{content:"";position:absolute;z-index:3;left:18%;right:18%;bottom:1px;height:8%;border-radius:50%;background:repeating-linear-gradient(100deg,#6f9938 0 2px,#355f25 3px 5px,transparent 6px 9px);opacity:.9;clip-path:polygon(0 70%,8% 22%,15% 66%,23% 4%,30% 62%,39% 12%,47% 68%,57% 0,65% 65%,75% 18%,82% 72%,91% 8%,100% 70%,100% 100%,0 100%)}
.tree-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:none!important;filter:drop-shadow(0 7px 5px #173b325c)!important}
.student-tree.stage-1 .tree-art img{height:68%}.student-tree.stage-2 .tree-art img{height:80%}.student-tree.stage-3 .tree-art img{height:92%}.student-tree.stage-4 .tree-art img,.student-tree.stage-5 .tree-art img{height:100%}
.tree-name{position:absolute;z-index:5;left:3%;right:3%;bottom:0;display:flex;align-items:center;justify-content:center;gap:5px;min-height:25px;padding:3px 5px;border:1px solid #ffffff55;border-radius:999px;background:#173b32e8;box-shadow:0 5px 12px #173b3247;color:white}
.student-tree strong,.student-tree small{display:block;font-size:clamp(6px,.57vw,9px);line-height:1.05}.student-tree small{color:#ffe17a;white-space:nowrap}
.student-tree.depth-1{transform:scale(.82);transform-origin:center bottom}.student-tree.depth-2{transform:scale(.92);transform-origin:center bottom}.student-tree.depth-3{transform:scale(1);transform-origin:center bottom}
.student-tree:nth-child(2n) .tree-art{translate:0 3px}.student-tree:nth-child(3n) .tree-art{translate:0 -2px}
.focus-tree-wrap{height:64vh;display:grid;place-items:end center}.focus-tree{height:100%;max-width:78%;margin:0 auto;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 14px #173b326e)!important}
.focus-tree-wrap.tree-golden .focus-tree{filter:sepia(.24) saturate(1.08) drop-shadow(0 18px 14px #173b326e)!important}.focus-tree-wrap.tree-berry .focus-tree{filter:saturate(1.14) drop-shadow(0 18px 14px #173b326e)!important}
.focus-nature{font-size:1rem;font-weight:750;color:#315548}

/* ----------------------------------------------------
   1. Gökkuşağı ve Sınıf Ortak Hedefi (Bahçe Enerjisi)
---------------------------------------------------- */
.enchanted-rainbow {
  position: absolute;
  top: -8%;
  left: 6%;
  right: 6%;
  height: 52%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-25px) scale(0.96);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.enchanted-rainbow.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.rainbow-arc {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(
    ellipse at 50% 100%,
    transparent 64%,
    rgba(255, 65, 108, 0.82) 65%,
    rgba(255, 138, 61, 0.84) 69%,
    rgba(255, 220, 64, 0.88) 73%,
    rgba(77, 218, 126, 0.86) 77%,
    rgba(66, 175, 255, 0.86) 81%,
    rgba(164, 88, 245, 0.84) 85%,
    transparent 88%
  );
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 50px rgba(255, 225, 100, 0.45));
  animation: rainbow-aurora 7s ease-in-out infinite alternate;
}
.rainbow-glow {
  position: absolute;
  inset: 8% 12% 0;
  background: radial-gradient(ellipse at 50% 95%, rgba(255, 245, 200, 0.38) 0%, rgba(255, 255, 255, 0) 65%);
  filter: blur(25px);
  pointer-events: none;
}
.rainbow-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rainbow-stars i {
  position: absolute;
  font-style: normal;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  animation: rainbow-star-pulse 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}
.rainbow-stars i:nth-child(1) { left: 16%; top: 48%; animation-delay: 0s; }
.rainbow-stars i:nth-child(2) { left: 28%; top: 22%; animation-delay: -0.7s; }
.rainbow-stars i:nth-child(3) { left: 50%; top: 8%;  animation-delay: -1.4s; font-size: clamp(1.4rem, 2.2vw, 2.1rem); }
.rainbow-stars i:nth-child(4) { left: 72%; top: 22%; animation-delay: -2.1s; }
.rainbow-stars i:nth-child(5) { left: 84%; top: 48%; animation-delay: -2.8s; }
.rainbow-stars i:nth-child(6) { left: 50%; top: 26%; animation-delay: -1.0s; }

@keyframes rainbow-aurora {
  0% {
    filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 40px rgba(255, 225, 100, 0.4)) brightness(1);
  }
  100% {
    filter: drop-shadow(0 0 34px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 65px rgba(255, 180, 220, 0.6)) brightness(1.12);
  }
}
@keyframes rainbow-star-pulse {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.65; }
  50% { transform: scale(1.25) rotate(15deg); opacity: 1; }
}

/* Sınıf Ortak Hedefi Barı */
.garden-goal-wrap {
  position:absolute;
  z-index:5;
  top:67px;
  left:16px;
  margin:0;
  padding:7px 9px;
  border:1px solid rgba(255, 255, 255, 0.24);
  border-radius:11px;
  color:white;
  background:#113b2b78;
  backdrop-filter:blur(7px);
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease, filter 0.2s ease;
  min-width: 190px;
}
.garden-goal-wrap:hover {
  filter: brightness(1.18);
}
.garden-goal-wrap:active {
  transform: scale(0.98);
}
.goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.goal-label {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  color: #ffe680;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.goal-text {
  font-size: 0.74rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.goal-meter-track {
  position: relative;
  height: 9px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.goal-meter-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8d64, #ffd35c, #66d092, #54a3ff, #e06cf0);
  background-size: 200% 100%;
  transition: width 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
  animation: goal-shimmer 3s linear infinite;
  box-shadow: 0 0 10px rgba(255, 211, 92, 0.65);
}
.goal-meter-bar.is-completed {
  animation: goal-shimmer 1.5s linear infinite;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.95), 0 0 8px #ffd35c;
}
@keyframes goal-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ----------------------------------------------------
   3. Canlıyı Sevme & Okşama (Petting & Sevgi Etkileşimi)
---------------------------------------------------- */
.student-world.is-petted .creature-real,
.quick-avatar.is-petted img {
  animation: pet-squish-purr 1.25s cubic-bezier(0.25, 1.4, 0.5, 1) !important;
  filter: drop-shadow(0 0 18px rgba(255, 105, 180, 0.9)) drop-shadow(0 4px 10px rgba(25, 45, 25, 0.45)) !important;
}
@keyframes pet-squish-purr {
  0% { transform: scale(calc(var(--growth, 1) * 1)) rotate(0deg); }
  18% { transform: scale(calc(var(--growth, 1) * 1.22), calc(var(--growth, 1) * 0.82)) rotate(-5deg); }
  36% { transform: scale(calc(var(--growth, 1) * 0.88), calc(var(--growth, 1) * 1.22)) rotate(5deg); }
  54% { transform: scale(calc(var(--growth, 1) * 1.15), calc(var(--growth, 1) * 0.9)) rotate(-3deg); }
  72% { transform: scale(calc(var(--growth, 1) * 0.94), calc(var(--growth, 1) * 1.08)) rotate(2deg); }
  88% { transform: scale(calc(var(--growth, 1) * 1.04), calc(var(--growth, 1) * 0.98)) rotate(-1deg); }
  100% { transform: scale(calc(var(--growth, 1) * 1)) rotate(0deg); }
}

.petting-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
.pet-heart {
  position: absolute;
  font-style: normal;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  pointer-events: none;
  left: 50%;
  top: 35%;
  opacity: 0;
  animation: pet-heart-float 1.4s ease-out forwards;
  filter: drop-shadow(0 2px 8px rgba(255, 77, 109, 0.65));
}
@keyframes pet-heart-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--p-dx, 0px), -25px) scale(1.3) rotate(var(--p-rot, 5deg));
  }
  65% {
    opacity: 0.95;
    transform: translate(-50%, -50%) translate(calc(var(--p-dx, 0px) * 1.5), -65px) scale(1.1) rotate(calc(var(--p-rot, 5deg) * 1.8));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--p-dx, 0px) * 2), -105px) scale(0.7) rotate(calc(var(--p-rot, 5deg) * 2.5));
  }
}

.quick-pet-btn {
  background: linear-gradient(135deg, #ff5e82, #ff8ba0);
  color: white;
  box-shadow: 0 6px 18px rgba(255, 94, 130, 0.45);
  font-size: 0.98rem;
  padding: 13px 18px;
}
.quick-pet-btn:hover {
  background: linear-gradient(135deg, #ff436e, #ff758e);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 67, 110, 0.6);
}
.garden-title-copy #board-class[role="button"]{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;border-radius:8px;padding:2px 6px}.garden-title-copy #board-class[role="button"]:focus-visible{outline:3px solid #f6c453;outline-offset:2px}

/* Gelişim ve Büyüme Rehberi */
.growth-guide-dialog {
  width: min(680px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  border-radius: 24px;
}
.growth-guide-panel {
  padding: 26px 24px 22px;
  overflow-y: auto;
  max-height: calc(100dvh - 36px);
}
.growth-guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.growth-guide-header h2 {
  margin: 2px 0 0;
  font-size: 1.45rem;
  color: #173e31;
}
.growth-guide-lead {
  font-size: 0.96rem;
  color: #3b574a;
  line-height: 1.45;
  margin-bottom: 16px;
}
.growth-stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.growth-stage-card {
  padding: 12px 14px;
  background: #f7faf8;
  border: 1.5px solid #d4e7dc;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.growth-stage-card.stage-1 { border-color: #d1dfd7; }
.growth-stage-card.stage-2 { border-color: #79d39e; background: #f3fcf6; }
.growth-stage-card.stage-3 { border-color: #60c5ea; background: #f0faff; }
.growth-stage-card.stage-4 { border-color: #f7b443; background: #fffbf2; }
.growth-stage-card.stage-5 { border-color: #f37ba9; background: #fff5f9; box-shadow: 0 4px 14px #f37ba926; }
.stage-card-badge {
  font-size: 0.78rem;
  font-weight: 850;
  color: #245740;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 999px;
  width: fit-content;
  border: 1px solid #d0e4d7;
}
.growth-stage-card strong {
  font-size: 1.05rem;
  color: #17382d;
}
.growth-stage-card p {
  margin: 0;
  font-size: 0.82rem;
  color: #557063;
  line-height: 1.35;
}
.stage-perk {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #196945;
  padding-top: 4px;
  border-top: 1px dashed #d5e5db;
}
.growth-guide-tips {
  background: #f2f8f4;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid #c9e4d5;
}
.growth-guide-tips h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #1b543c;
}
.growth-guide-tips ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.85rem;
  color: #3b574a;
  line-height: 1.5;
}
.growth-guide-tips code {
  background: #ffffff;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #c9e0d3;
  font-weight: 800;
  color: #1a5e3f;
}
.growth-guide-footer button {
  width: 100%;
}
.growth-guide-link {
  background: none;
  border: none;
  color: #278058;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  text-decoration: underline;
  transition: opacity 0.2s;
}
.growth-guide-link:hover {
  opacity: 0.75;
}
.history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-reset-score-btn {
  color: #c0392b;
  border-color: #e8b4b0;
  font-size: 0.85rem;
}
.quick-reset-score-btn:hover {
  background: #fdf0ef;
  border-color: #c0392b;
}
.suggestion-chip.negative-chip {
  background: #fff0ee;
  border-color: #f5c4be;
  color: #c0392b;
}
.suggestion-chip.negative-chip:hover {
  background: #fde3df;
  border-color: #e74c3c;
}
/* ---- Bahçe Hedefi Yapılandırma Diyaloğu ---- */
.goal-config-dialog {
  width: min(440px, calc(100% - 24px));
}
.goal-config-panel {
  padding: 28px 24px 22px;
}
.goal-config-desc {
  font-size: 0.9rem;
  color: #3d6b55;
  line-height: 1.5;
  margin: 0 0 18px;
}
.goal-config-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #1e4a35;
  margin-bottom: 12px;
}
.goal-config-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goal-config-input {
  width: 110px;
  padding: 8px 12px;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  border: 2px solid #59ba7f;
  border-radius: 12px;
  background: #f4faf6;
  color: #173e31;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.goal-config-input:focus {
  border-color: #278058;
  box-shadow: 0 0 0 3px rgba(39,128,88,0.18);
}
.goal-config-unit {
  font-size: 0.9rem;
  color: #3d6b55;
  font-weight: 700;
}
.goal-config-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.goal-preset-chip {
  background: #f4faf6;
  border: 1.5px solid #9cd5b5;
  color: #1e4a35;
  font-size: 0.85rem;
  font-weight: 750;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.goal-preset-chip:hover {
  background: #e0f3ea;
  border-color: #278058;
}
.goal-preset-chip.active {
  background: linear-gradient(135deg, #3cb87a, #278058);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(39,128,88,0.3);
}
.goal-config-footer {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
/* ---- Günün Bahçıvanı Q&A Sistemi ---- */
.lucky-qa-section {
  margin-top: 14px;
  border: 1.5px solid #c8e6d4;
  border-radius: 14px;
  overflow: hidden;
  background: #f6fbf8;
}
.lucky-qa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}
.lucky-qa-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #1e4a35;
}
.lucky-qa-toggle {
  font-size: 0.78rem;
  font-weight: 750;
  padding: 4px 10px;
  background: #e8f5ee;
  border: 1.5px solid #9cd5b5;
  border-radius: 20px;
  color: #1e4a35;
  cursor: pointer;
  transition: all 0.15s;
}
.lucky-qa-toggle:hover,
.lucky-qa-toggle.active {
  background: #278058;
  color: #fff;
  border-color: transparent;
}
.lucky-qa-body {
  padding: 0 14px 14px;
  border-top: 1px solid #c8e6d4;
}
.lucky-qa-desc {
  font-size: 0.8rem;
  color: #3d6b55;
  margin: 10px 0 10px;
  line-height: 1.4;
}
.lucky-qa-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e4a35;
  margin-bottom: 10px;
}
.lucky-qa-streak-dots {
  font-size: 1rem;
  letter-spacing: 2px;
}
.lucky-qa-buttons {
  display: flex;
  gap: 10px;
}
.lucky-qa-correct-btn,
.lucky-qa-wrong-btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.lucky-qa-correct-btn {
  background: #e8f5ee;
  color: #1a7a46;
  border-color: #8dd4a8;
}
.lucky-qa-correct-btn:hover {
  background: #1a7a46;
  color: #fff;
}
.lucky-qa-wrong-btn {
  background: #fef0ee;
  color: #c0392b;
  border-color: #f5b5ae;
}
.lucky-qa-wrong-btn:hover {
  background: #c0392b;
  color: #fff;
}
.lucky-qa-status {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  min-height: 1.2em;
}
.lucky-qa-status.correct { color: #1a7a46; }
.lucky-qa-status.warning { color: #c07a00; }
.lucky-qa-status.penalty { color: #c0392b; }
/* ---- Liderlik Tablosu ---- */
.leaderboard-dialog {
  width: min(480px, calc(100% - 24px));
}
.leaderboard-panel {
  padding: 24px 20px 20px;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.leaderboard-content {
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f9fffe;
  border: 1px solid #d8efe5;
  border-radius: 12px;
  transition: background 0.15s;
}
.leaderboard-row:hover {
  background: #edfaf3;
}
.leaderboard-top {
  border-width: 2px;
}
.leaderboard-rank-1 {
  background: linear-gradient(135deg, #fff8e1, #fffde7);
  border-color: #f9d100;
}
.leaderboard-rank-2 {
  background: linear-gradient(135deg, #f5f5f5, #eceff1);
  border-color: #b0bec5;
}
.leaderboard-rank-3 {
  background: linear-gradient(135deg, #fbe9e7, #fff3e0);
  border-color: #ff8a65;
}
.lb-rank {
  font-size: 1.4rem;
  min-width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.lb-info {
  flex: 1;
  min-width: 0;
}
.lb-info strong {
  display: block;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-info small {
  font-size: 0.78rem;
  color: #557564;
}
.lb-score {
  text-align: right;
  flex-shrink: 0;
}
.lb-points {
  display: block;
  font-size: 1.2rem;
  font-weight: 900;
  color: #1a4f38;
  line-height: 1;
}
.lb-pts-label {
  font-size: 0.72rem;
  color: #557564;
}
.leaderboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #d8efe5;
  padding-bottom: 8px;
}
.leaderboard-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 750;
  border-radius: 10px;
  border: 1.5px solid #cce8da;
  background: #f4faf6;
  color: #175438;
  cursor: pointer;
  transition: all 0.15s ease;
}
.leaderboard-tab-btn:hover {
  background: #e0f3ea;
  border-color: #278058;
}
.leaderboard-tab-btn.active {
  background: linear-gradient(135deg, #278058, #175438);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(39, 128, 88, 0.25);
}
.class-compare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f9fffe;
  border: 1.5px solid #d8efe5;
  border-radius: 14px;
  margin-bottom: 8px;
  transition: transform 0.15s;
}
.class-compare-row:hover {
  transform: translateY(-1px);
}
.class-compare-group {
  margin: 0 0 18px;
}
.class-compare-group:last-child {
  margin-bottom: 0;
}
.class-compare-group-title {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #eaf7f0;
  color: #175438;
  font-size: 0.95rem;
  font-weight: 850;
}
.class-compare-rank {
  font-size: 1.5rem;
  min-width: 34px;
  text-align: center;
}
.class-compare-info {
  flex: 1;
}
.class-compare-info strong {
  display: block;
  font-size: 1rem;
  color: #173e31;
}
.class-compare-info small {
  font-size: 0.8rem;
  color: #557564;
}
.class-compare-stat {
  text-align: right;
}
.class-compare-avg {
  font-size: 1.15rem;
  font-weight: 900;
  color: #278058;
}
.class-compare-total {
  font-size: 0.75rem;
  color: #557564;
}

.quick-badges-earned {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.quick-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 12px;
  background: #eef8f2;
  color: #1a5e3c;
  border: 1px solid #bce5ce;
}
.quick-cert-btn {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #ffffff !important;
  border: none !important;
  font-weight: 750;
}
.quick-cert-btn:hover {
  background: linear-gradient(135deg, #5b4bc4, #8b83e6);
  transform: translateY(-1px);
}

.bulk-award-btn {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: #fff;
  border: none;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(230, 126, 34, 0.3);
}
.bulk-award-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e67e22, #d35400);
}
.bulk-award-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.leaderboard-empty {
  text-align: center;
  padding: 40px 20px;
  color: #557564;
  font-size: 0.9rem;
}

/* ====================================================
   GECE MODU (DARK MODE)
   ==================================================== */

body.dark-mode {
  --ink: #e8f5ee;
  --cream: #1a2d25;
  --green: #66d092;
  --mint: #3cb87a;
  --panel: rgba(22, 38, 30, 0.97);
  color-scheme: dark;
}

body.dark-mode .panel-shell {
  background: #1a2d25;
  color: #d0ead8;
  border-color: #2d4a38;
}

body.dark-mode dialog {
  background: #1a2d25;
  color: #d0ead8;
}

body.dark-mode dialog::backdrop {
  background: rgba(0, 10, 5, 0.82);
}

body.dark-mode header h2,
body.dark-mode .eyebrow {
  color: #9dd4b5;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #122218;
  color: #d0ead8;
  border-color: #2d5040;
}

body.dark-mode .secondary-button {
  background: #1e3428;
  color: #9dd4b5;
  border-color: #2d5040;
}

body.dark-mode .secondary-button:hover {
  background: #253e30;
}

body.dark-mode .student-row {
  background: #1a2d25;
  border-color: #2d4a38;
  color: #d0ead8;
}

body.dark-mode .student-row:hover {
  background: #1e3428;
}

body.dark-mode .history-entry {
  border-color: #2d4a38;
  color: #b0d4bc;
}

body.dark-mode .lucky-points-config {
  background: #1e2e22;
  border-color: #3a5a3a;
}

body.dark-mode .lucky-cycle-box {
  background: #1a2d25;
  border-color: #2d4a38;
}

body.dark-mode .quick-panel,
body.dark-mode .lucky-panel,
body.dark-mode .leaderboard-panel,
body.dark-mode .goal-config-panel,
body.dark-mode .growth-guide-panel {
  background: #1a2d25;
  color: #d0ead8;
}

body.dark-mode .leaderboard-row {
  background: #1e3428;
  border-color: #2d5040;
}

body.dark-mode .leaderboard-row:hover {
  background: #253e30;
}

body.dark-mode .leaderboard-rank-1 {
  background: linear-gradient(135deg, #2a2410, #332e14) !important;
  border-color: #8a7200 !important;
}

body.dark-mode .leaderboard-rank-2 {
  background: linear-gradient(135deg, #222a24, #1e2820) !important;
  border-color: #5a7060 !important;
}

body.dark-mode .leaderboard-rank-3 {
  background: linear-gradient(135deg, #2e1e18, #2a2014) !important;
  border-color: #7a4030 !important;
}

body.dark-mode .lb-info small,
body.dark-mode .lb-pts-label {
  color: #7da890;
}

body.dark-mode .lb-points {
  color: #66d092;
}

body.dark-mode .quick-progress-track {
  background: #1e3428;
}

body.dark-mode .garden-demo-banner {
  background: rgba(15, 30, 22, 0.9);
  border-color: #2d4a38;
}

body.dark-mode .level-toast {
  background: rgba(20, 35, 28, 0.98);
  border-color: #2d5040;
  color: #d0ead8;
}

body.dark-mode .lucky-qa-section {
  background: #1a2d25;
  border-color: #2d4a38;
}

body.dark-mode .lucky-qa-body {
  border-color: #2d4a38;
}

body.dark-mode #dark-mode-button.active {
  background: rgba(255, 220, 60, 0.2);
  border-color: #ffd35c;
}

/* ====================================================
   BAŞARI ROZETLERİ TOAST
   ==================================================== */

.achievement-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 280px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(135deg, #1a3a28, #0f2518);
  border: 2px solid #3cb87a;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(102,208,146,0.2);
  padding: 0;
  animation: achievement-slide-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes achievement-slide-in {
  from { transform: translateX(-50%) translateY(80px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.achievement-toast-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.achievement-toast-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(255,215,0,0.5));
  animation: achievement-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes achievement-pulse {
  from { transform: scale(0.95); }
  to   { transform: scale(1.08); }
}

.achievement-toast-content strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  color: #66d092;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.achievement-toast-content p {
  margin: 0;
  font-size: 0.88rem;
  color: #c0e8d0;
  line-height: 1.35;
}