/* ================= "Ağacı süsle" teması: şarap rengi oda, çam yeşili, altın ve kızılcık (wiki/experience-plan.md 15) ================= */
:root {
  --bg: #2A1418;
  --bg-deep: #0E0709;
  --pink: #FFD27A;        /* vurgu: altın */
  --pink-deep: #E0A33A;
  --mint: #F6D7A0;
  --lilac: #F3DDB8;
  --cream: #FFF4DC;
  --gold: #FFD27A;
  --text: #FFF8EE;
  --muted: rgba(255, 244, 228, .8);
}
.headline, .label, .sub { text-shadow: 0 2px 16px rgba(20, 6, 8, .8), 0 0 3px rgba(20, 6, 8, .6); }
.headline .accent { text-shadow: 0 0 26px rgba(255, 196, 90, .5), 0 2px 12px rgba(20, 6, 8, .85); }
.btn.primary {
  background: linear-gradient(180deg, #FFE6A8 0%, #F2B64A 100%); color: #2A1402;
  box-shadow: 0 12px 34px -10px rgba(242, 182, 74, .75), inset 0 1px 0 rgba(255, 255, 255, .65);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 12px 34px -10px rgba(242, 182, 74, .75), 0 0 0 0 rgba(255, 214, 130, .45), inset 0 1px 0 rgba(255, 255, 255, .65); }
  50% { box-shadow: 0 12px 34px -10px rgba(242, 182, 74, .75), 0 0 0 14px rgba(255, 214, 130, 0), inset 0 1px 0 rgba(255, 255, 255, .65); }
}
.flash { background: radial-gradient(circle at 50% 30%, #FFFBEA 0%, #FFE2A0 30%, rgba(255, 210, 120, .35) 60%, rgba(255, 210, 120, 0) 80%); }
.loader { background: radial-gradient(90% 70% at 50% 45%, #3A1C22 0%, #0E0709 70%); }
.preview-pill { color: #2A1402; background: rgba(255, 214, 130, .92); }
.ad-badge { background: #FFD27A; color: #2A1402; }
.grain { display: none; }
/* Üstte koyu geçiş: başlık duvarın ve ışık zincirinin üstünde okunsun */
.vignette { background: linear-gradient(180deg, rgba(14, 6, 8, .72) 0%, rgba(14, 6, 8, .4) 22%, rgba(14, 6, 8, 0) 40%), radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 45%, rgba(10, 4, 6, .6) 100%); }
#scene { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card-row { flex-wrap: wrap; }

/* İlerleme: altı küçük nokta (beş süs + yıldız); asılan süsün rengiyle dolar */
.dots {
  position: fixed; left: 50%; bottom: calc(7px + var(--sb, 0px)); z-index: 6; transform: translateX(-50%);
  display: flex; gap: 9px; opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.dots.on { opacity: 1; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 236, 200, .75); background: transparent; transition: background .35s ease, transform .35s ease; }
.dots i.full { transform: scale(1.15); border-color: rgba(255, 240, 210, .95); }
.dots i.star { border-radius: 0; border: 0; width: 13px; height: 13px; background: rgba(255, 236, 200, .35); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.dots i.star.full { background: #FFD27A; }

/* Sürükleme kılavuzu: kutudan ağaca kayan parlak nokta ve iz */
.drag-guide { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; opacity: 0; }
.drag-guide i {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 220, .95) 0 30%, rgba(255, 220, 150, .35) 55%, rgba(255, 220, 150, 0) 72%);
  box-shadow: 0 0 0 2px rgba(255, 240, 210, .55);
}