/* İlmek — tema katmanı.
   Ortak kabuk oyun-ui.css'te; burada yalnız tema değişkenleri ve
   bu oyuna özel parçalar var. Yükleme: fonts.css → oyun-ui.css → style.css */

:root{
  --bg:#17100f;
  --ink:#f6ece4;
  --ink-a:255,235,210;

  --surface:#452d28;
  --surface-2:#2c1c19;
  --glass:rgba(46,30,28,.68);
  --glass-solid:rgba(40,26,24,.92);
  --scrim:rgba(18,11,11,.8);
  --line:rgba(255,226,200,.14);

  /* birincil: yün turuncusu */
  --accent:#ffc46b;
  --accent-2:#f2903d;
  --accent-sh:#b4601c;
  --on-accent:#3d2200;

  --tool-a:#4a322d; --tool-b:#332120; --tool-sh:#1d1211;

  --gold:#F5D547;
  --title-grad:linear-gradient(90deg,#F2A03D,#F5D547,#58C471,#3FA9C9,#8C6FD4,#E86AA6);
  --title-track:2px;
  --demo-bottom:82px;

  --bubble-bg:#fff6ea;
  --bubble-ink:#3a2420;
  --daily-bg:rgba(245,213,71,.14);
  --daily-line:rgba(245,213,71,.35);
  --daily-ink:#F5D547;
}

/* ---- oyuna özel ---- */
#progress{position:fixed;left:18px;right:18px;top:calc(var(--sat) + 54px);z-index:5;pointer-events:none}
#progress .bar{height:5px;border-radius:var(--r-pill);background:rgba(var(--ink-a),.12);overflow:hidden}
#progress .fill{
  height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#E8484A,#F2A03D,#F5D547,#58C471,#3FA9C9,#8C6FD4);
  transition:width .28s cubic-bezier(.2,.9,.3,1);
}
#progress .ptext{display:flex;justify-content:space-between;font-size:11px;opacity:.55;
  margin-top:4px;letter-spacing:.4px;font-variant-numeric:tabular-nums}

.ball{
  width:56px;height:56px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 34% 30%,#ffd9a0,#E8484A 55%,#a5222c);
  box-shadow:0 8px 20px rgba(232,72,74,.3);
  animation:roll 4s ease-in-out infinite;
}
.ball::before,.ball::after{content:"";position:absolute;inset:7px;border-radius:50%;
  border:2px solid rgba(255,235,210,.5);border-left-color:transparent;border-right-color:transparent}
.ball::after{transform:rotate(58deg)}
@keyframes roll{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(9deg) translateY(-6px)}}

.pill.chest{gap:5px;color:#ffd9a8}
.pill.chest .cico{font-size:14px}

.streak{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:2px 0 12px;font-size:15px;font-weight:600;color:#ffb86b;
  opacity:0;height:0;overflow:hidden;transition:opacity .3s;
}
.streak.on{opacity:1;height:auto}
.streak .flame{font-size:18px;animation:flick .9s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.14) rotate(3deg)}}

.chestbar{margin:2px 0 14px;text-align:left}
.cb-top{display:flex;justify-content:space-between;font-size:12px;opacity:.65;
  margin-bottom:5px;font-variant-numeric:tabular-nums}
.cb-bar{height:8px;border-radius:var(--r-pill);background:rgba(var(--ink-a),.12);overflow:hidden}
.cb-fill{height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#f2903d,#F5D547);transition:width .5s cubic-bezier(.2,.9,.3,1)}