/* ================= Evcil hayvan · "Oyun zamanı" teması ================= */
/* İkindi güneşli oda: sıcak krem ve bal tonları, pembe vurgu (kalp, burun) (wiki/experience-plan.md 14) */
:root {
  --bg: #5A3E30;
  --bg-deep: #2E1E16;
  --pink: #FFB3C1;        /* vurgu: burun pembesi */
  --pink-deep: #F28AA0;
  --mint: #FFE9C4;
  --lilac: #FFD9B0;
  --cream: #FFF3E0;
  --gold: #FFD27A;
  --text: #FFFBF3;
  --muted: rgba(255, 246, 232, .86);
}
.headline, .label, .sub { text-shadow: 0 2px 16px rgba(40, 20, 10, .75), 0 0 3px rgba(40, 20, 10, .55); }
.headline .accent { text-shadow: 0 2px 14px rgba(40, 20, 10, .9), 0 0 4px rgba(40, 20, 10, .7); }   /* pembe yazı açık duvarda: koyu gölge */
.btn.primary {
  background: linear-gradient(180deg, #FFD0DA 0%, #F28AA0 100%); color: #3A1018;
  box-shadow: 0 12px 34px -10px rgba(242, 138, 160, .75), inset 0 1px 0 rgba(255, 255, 255, .6);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 12px 34px -10px rgba(242, 138, 160, .75), 0 0 0 0 rgba(255, 208, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 12px 34px -10px rgba(242, 138, 160, .75), 0 0 0 14px rgba(255, 208, 218, 0), inset 0 1px 0 rgba(255, 255, 255, .6); }
}
.btn:disabled { opacity: .45; filter: saturate(.6); cursor: default; }
.flash { background: radial-gradient(circle at 50% 50%, #FFF6F8 0%, #FFD6E0 30%, rgba(255, 190, 210, .3) 60%, rgba(255, 190, 210, 0) 80%); }
.loader { background: radial-gradient(90% 70% at 50% 45%, #8A5E46 0%, #2E1E16 70%); }
.preview-pill { color: #3A1018; background: rgba(255, 208, 218, .92); }
.grain { display: none; }
/* Üstte koyu geçiş: açık duvar kâğıdı üstündeki başlık okunsun */
.vignette { background: linear-gradient(180deg, rgba(46, 24, 14, .7) 0%, rgba(46, 24, 14, .46) 25%, rgba(46, 24, 14, 0) 44%), radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(30, 14, 8, .55) 100%); }
#scene { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ad-badge { background: #FFD0DA; color: #3A1018; }
.card-row { flex-wrap: wrap; }

/* Okşama kılavuzu: sırtın üstünde yay ve üstünde ileri geri kayan nokta */
.stroke-guide, .flick-guide {
  position: fixed; left: 0; top: 0; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .5s ease; z-index: 4;
  will-change: transform; filter: drop-shadow(0 2px 6px rgba(40, 20, 10, .6));
}
.stroke-guide { width: 220px; height: 100px; margin: -50px 0 0 -110px; }
.flick-guide { width: 80px; height: 200px; margin: -100px 0 0 -40px; }
.stroke-guide.on, .flick-guide.on { opacity: 1; }
.sk-track { fill: none; stroke: rgba(255, 243, 224, .55); stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; }
.sk-dot { fill: #FFF3E0; offset-path: path('M-80 10 Q0 -30 80 10'); animation: skMove 1.8s ease-in-out infinite alternate; }
@keyframes skMove { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.fg-move { animation: fgUp 1.5s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes fgUp { 0% { transform: translateY(40px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }

/* Okşama ilerlemesi: sağ üstte dolan kalp */
.love-meter { position: fixed; right: 18px; top: calc(70px + env(safe-area-inset-top, 0px)); width: 44px; height: 40px; opacity: 0; transition: opacity .4s ease; z-index: 5; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(40, 20, 10, .5)); }
.love-meter.on { opacity: 1; }
.love-meter svg { width: 100%; height: 100%; }
.lm-bg { fill: rgba(255, 243, 224, .25); stroke: rgba(255, 243, 224, .85); stroke-width: 2; }
.lm-fill { fill: #FF8FA8; }
.btn.holding { box-shadow: 0 0 0 10px rgba(255, 208, 218, .22), 0 0 40px rgba(242, 138, 160, .55); }
.btn.small { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }