:root{
  --paper:#EFF4EF; --card:#F6F3EA; --ink:#123B2E; --ink-soft:#4F6A5E;
  --moss:#0F4C3A; --moss-light:#DCEAE2; --amber:#E2963A; --amber-deep:#8A5514;
  --coral:#D85A30; --line:#D8E2DA; --radius:16px; --stage-color:#0F4C3A;
  --paper-veil:rgba(239,244,239,.78);
  --neu-light:rgba(255,255,255,.8); --neu-dark:rgba(31,42,26,.16);
  /* 3B "keycap" dili: üst parlama (hi), alt kalın kenar (edge), masaya düşen gölge (cast) */
  --card-hi:rgba(255,255,255,.85); --card-edge:#D6CFBC;
  --key-face:#FBFAF3; --key-edge:#CFC8B4;
  --cast:rgba(72,50,24,.28);
  --tray-a:#A6C7AC; --tray-b:#DCDFC6; --tray-c:#F0EAD3; --tray-edge:#8CA590;
}
:root[data-theme="dark"]{
  --paper:#12201A; --card:#22342A; --ink:#EAF3EC; --ink-soft:#9FB8AA;
  --moss:#2FBE86; --moss-light:#24392E; --amber:#F0A94E; --amber-deep:#FFC876;
  --coral:#FF7A54; --line:#2A3B32;
  --paper-veil:rgba(18,32,26,.84);
  --neu-light:rgba(255,255,255,.05); --neu-dark:rgba(0,0,0,.5);
  --card-hi:rgba(255,255,255,.07); --card-edge:#0D1812;
  --key-face:#283C31; --key-edge:#121F18;
  --cast:rgba(0,0,0,.55);
  --tray-a:#1E3A2C; --tray-b:#26402F; --tray-c:#2F4734; --tray-edge:#0C1911;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --paper:#12201A; --card:#22342A; --ink:#EAF3EC; --ink-soft:#9FB8AA;
    --moss:#2FBE86; --moss-light:#24392E; --amber:#F0A94E; --amber-deep:#FFC876;
    --coral:#FF7A54; --line:#2A3B32;
    --paper-veil:rgba(18,32,26,.86);
    --neu-light:rgba(255,255,255,.05); --neu-dark:rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
html,body{margin:0; padding:0;}
body{
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;
  background-color:var(--paper);
  background-image:linear-gradient(var(--paper-veil), var(--paper-veil)), url('img/wood-bg.jpg');
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  color:var(--ink);
  min-height:100vh; padding:calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.wrap{max-width:520px; margin:0 auto;}
.onboard{
  position:fixed; inset:0; background:var(--paper); z-index:9000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 28px; text-align:center;
}
.ob-slide{max-width:400px;}
.ob-emoji{font-size:72px; margin-bottom:18px;}
.ob-slide h2{font-size:22px; margin:0 0 10px; color:var(--ink);}
.ob-slide p{font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0;}
.ob-games{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
.ob-games div{
  background:var(--card); border:none; border-radius:14px;
  padding:12px 8px; font-size:13px; font-weight:650; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--card-edge), 0 8px 14px -7px var(--cast);
}
.ob-games div span{font-size:20px; font-weight:800; color:var(--moss);}
.ob-dots{display:flex; gap:7px; margin:28px 0 22px;}
.ob-dot{width:7px; height:7px; border-radius:99px; background:var(--line);}
.ob-dot.on{background:var(--moss); width:20px; transition:width .3s ease;}
.ob-nav{display:flex; align-items:center; gap:16px; width:100%; max-width:320px;}
.ob-nav .primary{flex:1;}
.ob-skip{background:none; border:none; color:var(--ink-soft); font-size:14px; cursor:pointer; padding:10px;}
header{padding:40px 4px 20px; display:flex; align-items:baseline; justify-content:space-between;}
.logo{font-size:30px; font-weight:700; letter-spacing:-0.5px; margin:0; display:flex; align-items:center; gap:4px;}
.logoZ{position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 80%, white), var(--moss)); color:#fff; border-radius:10px; font-size:23px; font-weight:800; padding-right:7px; flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 color-mix(in srgb, var(--moss) 50%, black), 0 8px 12px -5px var(--cast);}
.logoZ i{position:absolute; right:6px; bottom:7px; width:6px; height:6px; border-radius:50%; background:var(--amber);}
.tagline{font-size:13px; color:var(--ink-soft); margin:4px 0 0;}
.streakpill{
  font-size:13px; font-weight:700; color:var(--amber-deep);
  background:linear-gradient(180deg,#FBEDD8,#F3E2C2); padding:8px 14px; border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 #D9C29B, 0 10px 14px -6px var(--cast);
}
.sndbtn{
  font-size:15px; border:none; color:var(--moss);
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  padding:8px 12px; border-radius:999px; cursor:pointer;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 10px 14px -6px var(--cast);
  transition:box-shadow .12s ease, transform .12s ease;
}
.sndbtn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 5px 8px -4px var(--cast);}
.hdr-right{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.avatarpill{
  position:relative;
  display:flex; align-items:center; gap:5px; font-size:13px; font-weight:800;
  color:var(--moss); padding:6px 12px 6px 8px;
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  border-radius:999px; cursor:pointer;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 10px 14px -6px var(--cast);
  transition:box-shadow .12s ease, transform .12s ease;
}
.avatarpill:active{transform:translateY(2px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 5px 8px -4px var(--cast);}
.avatarpill span{
  width:24px; height:24px; border-radius:50%; padding:2px; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--stage-color); transition:border-color .4s ease;
}

/* ============================================================
   Zihni maskotu — tek katmanlı SVG karakter (core.js: zihniSvgMarkup).
   data-stage (1–12) parça/renk görünürlüğünü, data-emotion + .emo-*
   tepki animasyonunu belirler. Yüz ifadesi aşamaya göre çok farklı
   şekiller aldığından (damla/çekirdek/beyin), tepkiler yüz değiştirmek
   yerine tüm gövdeye uygulanan hareket/filtre ile veriliyor — güvenilir
   ve her aşamada aynı şekilde çalışır.
   ============================================================ */
.zihni-svg{width:100%; height:100%; display:block; overflow:visible;}
img.zihni-svg{object-fit:contain; filter:drop-shadow(0 4px 5px rgba(30,20,10,.28));}
/* Not: sürekli çalışan "float" animasyonu kasıtlı olarak kaldırıldı —
   ekranda her zaman en az bir maskot görünür durumda ve boşta sürekli
   hareket etmesi hem performans hem sadelik açısından gereksizdi.
   Parıltı/dönme sadece ileri aşamalarda (nadir, az sayıda öğe) kalıyor. */
@keyframes zihniGlowPulse{0%,100%{opacity:.2; transform:scale(.95);} 50%{opacity:.7; transform:scale(1.05);}}
@keyframes zihniSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
.zihni-svg .st-glow{transform-origin:center; animation:zihniGlowPulse 2s ease-in-out infinite; opacity:0;}
.zihni-svg .st-galaxy{transform-origin:center; animation:zihniSpin 15s linear infinite; opacity:0;}
.zihni-svg .part-cell,.zihni-svg .part-core,.zihni-svg .part-brain-base,.zihni-svg .part-crown,
.zihni-svg .eyes-baby,.zihni-svg .eyes-normal,.zihni-svg .eyes-cute,.zihni-svg .eyes-cool,
.zihni-svg .part-spark,.zihni-svg .part-lines-small,.zihni-svg .part-lines-dense,
.zihni-svg .part-folds-light,.zihni-svg .part-folds-dense{opacity:0; transition:opacity .4s ease;}

.zihni-svg[data-stage="1"] .part-cell,.zihni-svg[data-stage="1"] .eyes-baby{opacity:1;}
.zihni-svg[data-stage="2"] .part-cell,.zihni-svg[data-stage="2"] .eyes-baby,.zihni-svg[data-stage="2"] .part-spark{opacity:1;}
.zihni-svg[data-stage="3"] .part-core,.zihni-svg[data-stage="3"] .eyes-normal,.zihni-svg[data-stage="3"] .part-lines-small{opacity:1;}
.zihni-svg[data-stage="4"] .part-core,.zihni-svg[data-stage="4"] .eyes-normal,.zihni-svg[data-stage="4"] .part-lines-dense,.zihni-svg[data-stage="4"] .part-spark{opacity:1;}
.zihni-svg[data-stage="5"] .part-brain-base,.zihni-svg[data-stage="5"] .eyes-cute,.zihni-svg[data-stage="5"] .part-folds-light{opacity:1;}
.zihni-svg[data-stage="6"] .part-brain-base,.zihni-svg[data-stage="6"] .eyes-cute,.zihni-svg[data-stage="6"] .part-folds-dense{opacity:1;}
.zihni-svg[data-stage="7"] .part-brain-base,.zihni-svg[data-stage="7"] .eyes-cool,.zihni-svg[data-stage="7"] .part-folds-dense,.zihni-svg[data-stage="7"] .st-glow{opacity:1;}
.zihni-svg[data-stage="8"] .part-brain-base,.zihni-svg[data-stage="8"] .eyes-cool,.zihni-svg[data-stage="8"] .part-folds-dense,.zihni-svg[data-stage="8"] .st-glow,.zihni-svg[data-stage="8"] .st-galaxy{opacity:1;}
/* Ustalık Yolu (9–12): aynı galaksi görünümü, artan renk kayması ile ayrışır */
.zihni-svg[data-stage="9"] .part-brain-base,.zihni-svg[data-stage="9"] .eyes-cool,.zihni-svg[data-stage="9"] .part-folds-dense,.zihni-svg[data-stage="9"] .st-glow,.zihni-svg[data-stage="9"] .st-galaxy,
.zihni-svg[data-stage="10"] .part-brain-base,.zihni-svg[data-stage="10"] .eyes-cool,.zihni-svg[data-stage="10"] .part-folds-dense,.zihni-svg[data-stage="10"] .st-glow,.zihni-svg[data-stage="10"] .st-galaxy,
.zihni-svg[data-stage="11"] .part-brain-base,.zihni-svg[data-stage="11"] .eyes-cool,.zihni-svg[data-stage="11"] .part-folds-dense,.zihni-svg[data-stage="11"] .st-glow,.zihni-svg[data-stage="11"] .st-galaxy,
.zihni-svg[data-stage="12"] .part-brain-base,.zihni-svg[data-stage="12"] .eyes-cool,.zihni-svg[data-stage="12"] .part-folds-dense,.zihni-svg[data-stage="12"] .st-glow,.zihni-svg[data-stage="12"] .st-galaxy{opacity:1;}
.zihni-svg[data-stage="9"]{filter:hue-rotate(15deg) drop-shadow(0 4px 5px rgba(30,20,10,.28));}
.zihni-svg[data-stage="10"]{filter:hue-rotate(30deg) saturate(1.15) drop-shadow(0 4px 5px rgba(30,20,10,.28));}
.zihni-svg[data-stage="11"]{filter:hue-rotate(45deg) saturate(1.3) brightness(1.05) drop-shadow(0 4px 5px rgba(30,20,10,.28));}
.zihni-svg[data-stage="12"]{filter:saturate(1.15) brightness(1.05) drop-shadow(0 0 6px rgba(255,200,87,.6));}
.zihni-svg[data-stage="12"] .part-crown{opacity:1;}

/* Duygu tepkisi: yüz yerine gövdeye uygulanan hareket/filtre */
.zihni-svg.emo-sevinc{animation:zihniPop .5s cubic-bezier(.34,1.56,.64,1);}
.zihni-svg.emo-coscu{animation:zihniPop .55s cubic-bezier(.34,1.56,.64,1) 2;}
.zihni-svg.emo-uzuntu{animation:zihniDroop .5s ease; filter:saturate(.6) brightness(.92);}
.zihni-svg.emo-cesaret{animation:zihniPop .4s ease;}
.zihni-svg.emo-rekor{animation:zihniPop .6s cubic-bezier(.34,1.56,.64,1) 2; filter:drop-shadow(0 0 10px rgba(255,200,87,.7));}
.zihni-svg.emo-saskin{animation:zihniDroop .3s ease-in-out 2 alternate;}
@keyframes zihniPop{0%{transform:scale(1);} 40%{transform:scale(1.22) rotate(-4deg);} 70%{transform:scale(.94) rotate(2deg);} 100%{transform:scale(1) rotate(0);}}
@keyframes zihniDroop{0%{transform:translateY(0) rotate(0);} 50%{transform:translateY(4px) rotate(-3deg);} 100%{transform:translateY(0) rotate(0);}}
@keyframes swing{
  0%{transform:rotate(0deg);} 20%{transform:rotate(8deg);} 45%{transform:rotate(-6deg);}
  70%{transform:rotate(4deg);} 90%{transform:rotate(-2deg);} 100%{transform:rotate(0deg);}
}
#hangMan.dead{animation:swing 1.8s ease-in-out 2; transform-origin:80px 12px;}
#hangMan.dead line, #hangMan.dead circle{stroke:var(--coral);}

@keyframes popBounce{
  0%{transform:scale(1);}
  35%{transform:scale(1.4);}
  60%{transform:scale(0.9);}
  80%{transform:scale(1.08);}
  100%{transform:scale(1);}
}
.pop-bounce{animation:popBounce .5s cubic-bezier(.34,1.56,.64,1); display:inline-block;}

@keyframes flashGoodBg{
  0%{background-color:transparent;}
  30%{background-color:var(--moss-light);}
  100%{background-color:transparent;}
}
.flash-good{animation:flashGoodBg .55s ease-out;}

@keyframes confettiFall{
  0%{transform:translate(0,0) rotate(0deg); opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0;}
}
.sad-face{
  position:fixed; transform:translate(-50%,-50%) scale(0.5); font-size:38px;
  z-index:9999; pointer-events:none;
  animation:sadIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
.sad-face.sad-out{ animation:sadOut .4s ease forwards; }
@keyframes sadIn{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.3) rotate(-10deg);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);}
}
@keyframes sadOut{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1) translateY(0);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.8) translateY(15px);}
}
.motivation-banner{
  position:fixed; top:38%; left:50%; transform:translate(-50%,-50%) scale(0.7);
  font-size:30px; font-weight:800; color:#fff; text-align:center; white-space:normal;
  max-width:86vw; line-height:1.3;
  background:linear-gradient(135deg, var(--moss), #1E8362);
  padding:16px 28px; border-radius:20px; z-index:10000;
  box-shadow:0 12px 30px rgba(15,76,58,.4);
  animation:mbIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events:none;
}
.motivation-banner.mb-out{
  animation:mbOut .5s ease forwards;
}
@keyframes mbIn{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(-8deg);}
  60%{opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(2deg);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);}
}
@keyframes mbOut{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.85) translateY(-20px);}
}
.confetti-piece{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  animation-name:confettiFall; animation-timing-function:ease-out; animation-fill-mode:forwards;
}

/* Zihni artık oyun içinde kalıcı bir karakter olarak durmuyor — sadece
   seviye geçişinde konuşma balonu ve sonuç ekranında görünüyor
   (sadeleştirme kararı). */

/* Zihni — orta sahne: doğal duraklarda (seviye geçişi vb.) beliren
   konuşma balonu. pointer-events:none — oyun dokunuşlarını asla engellemez. */
.zihni-bubble{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 14px); left:50%;
  transform:translate(-50%,-14px) scale(.9); opacity:0;
  background:var(--ink); color:var(--paper); font-size:13.5px; font-weight:650;
  padding:9px 16px; border-radius:999px; max-width:82vw; text-align:center;
  pointer-events:none; z-index:8000; box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:opacity .22s ease, transform .22s ease;
}
.zihni-bubble.show{transform:translate(-50%,0) scale(1); opacity:1;}
.cards{display:grid; gap:18px;}
.gamecard{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, white), var(--card));
  border:none; border-radius:26px;
  padding:20px 22px; cursor:pointer; display:flex; align-items:center; gap:16px;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 4px 0 var(--card-edge), 0 18px 26px -10px var(--cast);
}
.gamecard:active{transform:translateY(3px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--card-edge), 0 8px 12px -6px var(--cast);}
.badge{
  width:56px; height:56px; border-radius:17px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:25px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bd) 62%, white), var(--bd));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 color-mix(in srgb, var(--bd) 72%, #241a0c), 0 10px 14px -6px var(--cast);
  transition:box-shadow .15s ease, transform .12s ease;
}
.gamecard:active .badge{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 color-mix(in srgb, var(--bd) 72%, #241a0c), 0 6px 8px -4px var(--cast);
}
.b-mem{--bd:#AFD2B7; color:var(--moss);}
.b-str{--bd:#F0BEAD; color:#B0421D;}
.b-mth{--bd:#EDD29B; color:var(--amber-deep);}
.gamecard h2{font-size:18px; margin:0 0 3px; font-weight:750; letter-spacing:-.2px;}
.gamecard p{font-size:13px; color:var(--ink-soft); margin:0;}
.gamecard .rec{margin-left:auto; text-align:right; font-size:12.5px; color:var(--ink-soft); flex-shrink:0;}
.gamecard .rec b{display:block; font-size:20px; color:var(--ink); font-weight:800;}
.panel{display:none;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:40px 0 18px;}
.backbtn{
  border:none; color:var(--ink);
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  font-size:14px; font-weight:650; padding:10px 16px; border-radius:999px; cursor:pointer;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 10px 14px -6px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease;
}
.backbtn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 5px 8px -4px var(--cast);}
.gtitle{font-size:16px; font-weight:750;}
.difbtn{
  font-size:12px; font-weight:700; padding:7px 13px; border-radius:999px;
  border:none; color:var(--ink-soft); cursor:pointer;
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 8px 12px -5px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease;
}
.difbtn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 4px 6px -3px var(--cast);}
.difbtn.hard{
  background:linear-gradient(180deg, color-mix(in srgb, var(--coral) 80%, white), var(--coral)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 color-mix(in srgb, var(--coral) 55%, black), 0 8px 12px -5px var(--cast);
}
.hud{display:flex; gap:20px; align-items:baseline; margin-bottom:16px;}
.hud .stat{font-size:13px; color:var(--ink-soft);}
.hud .stat b{font-size:22px; color:var(--ink); font-weight:700; margin-left:4px;}
.primary{
  margin-left:auto; border:none; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 80%, white), var(--moss));
  font-size:14px; font-weight:700; padding:12px 22px; border-radius:999px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 0 color-mix(in srgb, var(--moss) 50%, black), 0 12px 16px -6px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease;
}
.primary:active{transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 color-mix(in srgb, var(--moss) 50%, black), 0 6px 8px -4px var(--cast);}
#memGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:360px; margin:0 auto;}
.tile{
  aspect-ratio:1; border-radius:16px; border:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--key-face) 96%, white), var(--key-face));
  cursor:pointer; transition:background .15s, transform .1s, box-shadow .1s;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 4px 0 var(--key-edge), 0 10px 14px -6px var(--cast);
}
.tile.lit{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 75%, white), var(--moss));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 color-mix(in srgb, var(--moss) 50%, black), 0 10px 14px -6px var(--cast), 0 0 14px rgba(46,190,134,.45);
}
.tile.you{
  background:var(--moss-light); transform:translateY(3px);
  box-shadow:inset 0 2px 5px rgba(10,50,35,.25), 0 1px 0 var(--key-edge), 0 5px 8px -4px var(--cast);
}
.msg{text-align:center; font-size:14px; color:var(--ink-soft); margin:18px 0 0; min-height:22px;}
#strWord{text-align:center; font-size:clamp(30px, 11vw, 52px); font-weight:800; letter-spacing:1px; min-height:80px; padding:18px 10px;}
.optgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media(min-width:420px){.optgrid{grid-template-columns:repeat(4,1fr);}}
.optbtn{
  border:none; color:var(--ink);
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  font-size:15px; font-weight:700; padding:16px 8px; border-radius:16px; cursor:pointer;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 4px 0 var(--key-edge), 0 12px 16px -7px var(--cast);
  transition:transform .08s ease, box-shadow .08s ease;
}
.optbtn:active{
  transform:translateY(3px); background:var(--moss-light);
  box-shadow:inset 0 2px 5px rgba(10,50,35,.2), 0 1px 0 var(--key-edge), 0 5px 8px -4px var(--cast);
}
#mthQ{text-align:center; font-size:clamp(26px, 8vw, 44px); font-weight:800; min-height:66px; padding:10px 0; white-space:nowrap;}
.b-mat{--bd:#D2C4EC; color:#5B3FA8;}
.b-shl{--bd:#BFD3E7; color:#20527F;}
#matchGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:360px; margin:0 auto;}
#matLegend{
  max-width:360px; margin:0 auto 10px; padding:8px 10px;
  background:var(--card); border:none; border-radius:14px; text-align:center;
  font-size:20px; letter-spacing:6px;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--card-edge), 0 10px 14px -7px var(--cast);
}
.mcard{
  aspect-ratio:1; border-radius:14px; border:none;
  background:linear-gradient(135deg,#1A7457,#0F4C3A); cursor:pointer;
  font-size:42px; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s, box-shadow .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 #06231A, 0 10px 14px -6px var(--cast);
}
.mcard:active{transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 0 #06231A, 0 5px 8px -4px var(--cast);}
.mcard.open{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, white), var(--card));
  box-shadow:inset 0 1px 0 var(--card-hi), 0 4px 0 var(--card-edge), 0 10px 14px -6px var(--cast);
}
.mcard.done{
  background:var(--moss-light); cursor:default;
  box-shadow:inset 0 2px 5px rgba(10,50,35,.22), 0 1px 0 color-mix(in srgb, var(--moss-light) 70%, black);
}
#shellArea{position:relative; height:170px; max-width:380px; margin:14px auto 0;}
.cup{
  position:absolute; top:44px; height:78px;
  background:linear-gradient(145deg, #229470 0%, #15654D 30%, #0F4C3A 66%, #0A3A2C 100%);
  border-radius:16px 16px 30px 30px; cursor:pointer;
  overflow:hidden;
  box-shadow:
    0 12px 18px rgba(11,45,35,.42),
    inset 0 3px 3px rgba(255,255,255,.35),
    inset 0 -10px 14px rgba(0,0,0,.3);
  transition:transform .4s cubic-bezier(.32,1.65,.55,1);
}
.cup::before{
  content:'';
  position:absolute; top:-6%; left:0; right:0; height:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-radius:50%;
  pointer-events:none;
}
.cup::after{
  content:'';
  position:absolute; top:6%; left:12%;
  width:20%; height:78%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  transform:rotate(8deg);
  border-radius:50%;
  pointer-events:none;
}
.cup-shine2{
  position:absolute; top:14%; right:16%;
  width:9%; height:30%;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 70%);
  border-radius:50%;
  pointer-events:none;
}
.cup-rim{
  position:absolute; left:8%; right:8%; bottom:5px; height:8px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.42), rgba(0,0,0,0) 75%);
  border-radius:50%;
  pointer-events:none;
}
.cup-shadow{
  position:absolute; top:118px; height:14px;
  background:radial-gradient(ellipse at center, rgba(11,45,35,.32), rgba(11,45,35,0) 72%);
  border-radius:50%; pointer-events:none;
  transition:transform .4s cubic-bezier(.32,1.65,.55,1), opacity .4s ease;
}
.ball{
  position:absolute; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F2B45E, var(--amber));
  top:96px; display:none;
}
.b-hng{--bd:#EDC0D6; color:#A3325B;}
.goalcard{
  background:linear-gradient(110deg, var(--tray-a), var(--tray-b) 55%, var(--tray-c));
  border:none; border-radius:24px; padding:18px 16px 16px; margin-bottom:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 var(--tray-edge), 0 18px 28px -10px var(--cast);
}
.goalbar{
  height:14px; background:rgba(10,30,20,.32); border-radius:999px; overflow:hidden; margin-bottom:10px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.4);
}
#goalFill{
  height:100%; width:0; background:linear-gradient(180deg,#1E8362,var(--moss));
  border-radius:999px; transition:width .4s ease;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.28), 0 0 10px rgba(46,190,134,.45);
}
#goalTxt{font-size:13.5px; color:var(--ink); font-weight:650;}
.wo{display:flex; gap:12px; margin-top:14px;}
.wochip{
  flex:1; border:none; border-radius:14px;
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 88%, #8a8264));
  padding:11px 4px 10px; text-align:center; font-size:11.5px; font-weight:750; cursor:pointer; color:var(--ink);
  box-shadow:inset 0 1px 0 var(--card-hi), 0 4px 0 var(--key-edge), 0 12px 16px -7px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease;
}
.wochip:active{transform:translateY(3px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 6px 8px -4px var(--cast);}
.wochip .we{font-size:20px; display:block; margin-bottom:3px;}
.wochip.done{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss-light) 75%, white), var(--moss-light));
  color:var(--moss); transform:translateY(3px);
  box-shadow:inset 0 2px 5px rgba(10,50,35,.28), 0 1px 0 color-mix(in srgb, var(--moss-light) 70%, black), 0 5px 8px -4px var(--cast);
}
.profcard{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, white), var(--card));
  border:none; border-radius:22px; padding:18px; display:grid; gap:11px;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 4px 0 var(--card-edge), 0 16px 24px -10px var(--cast);
}
.pfHero{
  background:linear-gradient(160deg, var(--moss), #15654D); color:#fff;
  border-radius:24px; padding:26px 20px 22px; text-align:center; margin-bottom:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 5px 0 #06251A, 0 20px 30px -10px var(--cast);
}
.pfHeroLabel{font-size:11px; font-weight:800; letter-spacing:2px; opacity:.7; margin-bottom:2px;}
.pfHeroE{
  width:98px; height:98px; margin:0 auto; padding:8px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:3px solid var(--stage-color); background:rgba(255,255,255,.08); overflow:hidden;
  transition:border-color .4s ease;
}
.pfMasteryTag{
  display:inline-block; margin-top:6px; font-size:10.5px; font-weight:800; letter-spacing:.5px;
  color:#3a2405; background:var(--stage-color); padding:3px 10px; border-radius:999px;
}
@keyframes stagePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,200,87,0);}
  50%{box-shadow:0 0 20px 5px rgba(255,200,87,.55);}
}
body.zihni-mastery .pfHeroE, body.zihni-mastery .zihni-char{
  animation:stagePulse 2.2s ease-in-out infinite;
}
.pfHeroName{font-size:18px; font-weight:700; margin-top:6px;}
.pfHeroZP{font-size:14px; opacity:.85; margin-top:2px; font-weight:600;}
.pfNextBarWrap{height:8px; background:rgba(255,255,255,.25); border-radius:99px; margin-top:16px; overflow:hidden;}
.pfNextBarWrap i{display:block; height:100%; width:4%; background:var(--amber); border-radius:99px; transition:width .6s ease;}
.pfNextTxt{font-size:12px; opacity:.9; margin-top:8px;}
.pfrow{display:flex; align-items:center; gap:10px;}
.pfrow .pfn{font-size:12.5px; font-weight:650; width:104px; flex-shrink:0;}
.pfbar{flex:1; height:9px; background:var(--moss-light); border-radius:99px; overflow:hidden;}
.pfbar i{display:block; height:100%; background:var(--moss); border-radius:99px; transition:width .6s ease;}
.pfrow .pfv{font-size:12px; font-weight:700; width:64px; text-align:right; flex-shrink:0; color:var(--ink);}
.pfnote{font-size:11.5px; color:var(--ink-soft); line-height:1.5; margin-top:1px;}
.pfempty{font-size:13px; color:var(--ink-soft); text-align:center; padding:6px 0;}
.proglist{display:grid; gap:8px;}
.prow{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, white), var(--card));
  border:none; border-radius:16px;
  padding:11px 14px; display:flex; align-items:center; gap:12px;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--card-edge), 0 10px 16px -8px var(--cast);
}
.prow .pn{font-size:12px; font-weight:650; width:86px; flex-shrink:0;}
.spark{display:flex; align-items:flex-end; gap:3px; height:32px; flex:1;}
.spark i{display:block; width:7px; background:var(--moss); border-radius:2px 2px 0 0; min-height:3px; opacity:.85;}
.spark i.last{background:var(--amber); opacity:1;}
.prow .pv{font-size:12px; font-weight:700; color:var(--ink); width:44px; text-align:right; flex-shrink:0;}
.pempty{font-size:13px; color:var(--ink-soft); text-align:center; padding:14px; background:var(--card); border:1px dashed var(--line); border-radius:12px;}
.shelftitle{font-size:15px; margin:26px 4px 10px; font-weight:650;}
.themepicker{display:flex; gap:8px; margin-bottom:8px;}
.themepicker button{
  flex:1; padding:12px 0; border-radius:14px; border:none;
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  color:var(--ink-soft); font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 10px 14px -6px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease;
}
.themepicker button.on{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 78%, white), var(--moss)); color:#fff;
  transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.22), 0 1px 0 color-mix(in srgb, var(--moss) 50%, black);
}
.shelf{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.bchip{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 8px; text-align:center;}
.bchip .be{font-size:22px;}
.bchip .bn{font-size:11px; font-weight:650; margin-top:4px;}
.bchip .bd{font-size:10px; color:var(--ink-soft); margin-top:2px;}
.bchip.locked{opacity:.38; filter:grayscale(1);}

/* Beyin Haritası — rozet sisteminin evrimi: her oyun bir bölge,
   kademe (sinaps/nöron ağı/miyelin) gameScore()'dan türer. */
.brainmap{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:8px;}
.regionchip{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 8px; text-align:center;}
.regionchip .re{font-size:22px;}
.regionchip .rn{font-size:11px; font-weight:700; margin-top:4px;}
.regionchip .ra{font-size:9.5px; color:var(--ink-soft); margin-top:1px; line-height:1.3;}
.regionchip .rt{font-size:10px; font-weight:650; margin-top:5px; padding:2px 6px; border-radius:999px; display:inline-block;}
.regionchip.t-none{opacity:.4; filter:grayscale(1);}
.regionchip.t-none .rt{background:var(--paper); color:var(--ink-soft);}
.regionchip.t-sinaps .rt{background:var(--moss-light); color:var(--moss);}
.regionchip.t-ag .rt{background:#DDEAF7; color:#1E5C8A;}
.regionchip.t-miyelin .rt{background:#F7E8CF; color:var(--amber-deep);}
.brainmap-note{font-size:11.5px; color:var(--ink-soft); line-height:1.5; margin:2px 4px 0;}

/* Zihni'nin Evrim Yolu — profilde tüm aşamaları kaç ZP'de açıldığıyla
   birlikte gösteren yatay kaydırmalı şerit. */
.evoroad{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:4px; -webkit-overflow-scrolling:touch;}
.evocard{
  flex:0 0 auto; width:84px; background:var(--card); border:1px solid transparent; border-radius:16px;
  padding:10px 6px; text-align:center; opacity:.45; filter:grayscale(.6); transition:opacity .3s ease, filter .3s ease, border-color .3s ease;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--card-edge), 0 8px 14px -7px var(--cast);
}
.evocard.reached{opacity:1; filter:none;}
.evocard.current{border-color:var(--ec); border-width:2px; box-shadow:0 0 0 3px color-mix(in srgb, var(--ec) 20%, transparent);}
.evoE{width:48px; height:48px; margin:0 auto 6px;}
.evoN{font-size:11px; font-weight:700; line-height:1.25; min-height:28px; display:flex; align-items:center; justify-content:center;}
.evoZP{font-size:10.5px; color:var(--ink-soft); margin-top:3px; font-weight:650;}
.inter{position:fixed; inset:0; background:rgba(18,59,46,.45); display:none; align-items:center; justify-content:center; z-index:50; padding:24px;}
.interbox{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, white), var(--card));
  border-radius:24px; padding:28px 24px; max-width:340px; width:100%; text-align:center;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 5px 0 var(--card-edge), 0 24px 44px -10px rgba(0,0,0,.4);
}
#interEmoji{
  width:92px; height:92px; margin:0 auto; padding:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:3px solid var(--stage-color); background:rgba(0,0,0,.03);
}
.interbox h2{margin:12px 0 4px; font-size:20px;}
.interbox p{margin:0 0 16px; font-size:14px; color:var(--ink-soft);}
.adslot{
  background:color-mix(in srgb, var(--paper) 94%, black); border:none; border-radius:14px;
  padding:14px; font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.45;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.12), 0 1px 0 var(--card-hi);
}

/* Zihni — büyük sahne: sonuç ekranının yıldızı Zihni'nin kendisi.
   #interEmoji artık Zihni'nin duygu durumunu gösterir; bu satır onun
   altında konuşma balonu gibi durur. */
.interbox p.zihni-inter-line{
  display:inline-block; margin:8px auto 2px; max-width:88%;
  background:var(--moss-light); color:var(--moss); font-size:13px; font-weight:650;
  padding:7px 14px; border-radius:999px; line-height:1.35;
}

.duel-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(135deg, var(--moss), #15654D);
  color:#fff; border-radius:18px; padding:12px 16px; margin-bottom:14px;
  font-size:14px; line-height:1.4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 #06251A, 0 14px 22px -8px var(--cast);
}
.duel-banner button{
  background:linear-gradient(180deg,#F0B45E,var(--amber)); color:#3a2405; border:none; border-radius:12px;
  padding:9px 14px; font-weight:700; font-size:13px; white-space:nowrap; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 #8A5514, 0 8px 12px -5px var(--cast);
}
.duel-result{
  background:var(--moss-light); border-radius:12px; padding:14px; margin-bottom:14px;
  font-size:15px; font-weight:700; color:var(--ink); text-align:center; line-height:1.5;
}
#duelBtn{
  background:linear-gradient(180deg,#F0B45E,var(--amber)); color:#3a2405; margin-bottom:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 #8A5514, 0 12px 16px -6px var(--cast);
}
.interbox .primary{margin:0 auto; display:block;}
#toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 28px); transform:translateX(-50%) translateY(120px); background:var(--ink); color:#fff; font-size:14px; font-weight:600; padding:11px 18px; border-radius:999px; transition:transform .3s ease; z-index:60; max-width:88vw; text-align:center;}
#toast.show{transform:translateX(-50%) translateY(0);}
#hangSvg{display:block; margin:0 auto;}
#hCat{
  display:table; margin:8px auto 10px; padding:9px 20px; text-align:center;
  font-size:15px; font-weight:800; color:var(--ink); letter-spacing:.3px;
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  border-radius:999px;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 8px 12px -6px var(--cast);
}
#hCat:empty{display:none;}
/* Yeni kelimede kategoriyi büyükçe duyuran geçici banner (ui.js gösterir) */
.hcat-banner{
  position:fixed; top:40%; left:50%; transform:translate(-50%,-50%);
  z-index:10000; pointer-events:none; text-align:center;
  background:linear-gradient(135deg, var(--moss), #1E8362); color:#fff;
  padding:20px 36px; border-radius:22px;
  box-shadow:0 5px 0 #06251A, 0 20px 40px rgba(15,76,58,.45);
  animation:mbIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
.hcat-banner.mb-out{animation:mbOut .5s ease forwards;}
.hcat-banner span{display:block; font-size:12px; font-weight:800; letter-spacing:3px; opacity:.75; margin-bottom:4px;}
.hcat-banner b{font-size:30px; font-weight:800; letter-spacing:.5px;}
#hWordEl{text-align:center; font-size:clamp(20px,7vw,30px); font-weight:800; letter-spacing:5px; min-height:42px; padding:6px 0 10px;}
#hKeys{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-width:420px; margin:0 auto;}
.key{
  border:none; color:var(--ink);
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  font-size:14px; font-weight:700; padding:11px 0; border-radius:11px; cursor:pointer;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 8px 12px -6px var(--cast);
  transition:transform .08s ease, box-shadow .08s ease;
}
.key:active{transform:translateY(2px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 4px 6px -3px var(--cast);}
.key.ok{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss-light) 70%, white), var(--moss-light));
  color:var(--moss); transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(10,50,35,.22), 0 1px 0 color-mix(in srgb, var(--moss-light) 70%, black);
}
.key.no{
  background:#E9C4BA; color:#9C4A33; opacity:.9; transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(80,30,15,.25), 0 1px 0 #C49A8D;
}
.key:disabled{cursor:default;}
/* Nasıl oynanır? — "?" butonu ve öğretici popup */
.helpbtn{
  width:36px; height:36px; border:none; border-radius:50%; cursor:pointer;
  font-size:17px; font-weight:800; color:var(--moss);
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 8px 12px -6px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease; flex-shrink:0;
}
.helpbtn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 4px 6px -3px var(--cast);}
.matdif-opts{display:grid; gap:12px; margin:6px 0 4px;}
.matdif-btn{
  border:none; border-radius:18px; padding:14px 12px; cursor:pointer;
  font-size:16px; font-weight:750; color:var(--ink);
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  box-shadow:inset 0 1px 0 var(--card-hi), 0 4px 0 var(--key-edge), 0 12px 16px -7px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease;
}
.matdif-btn:active{transform:translateY(3px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 6px 8px -4px var(--cast);}
.matdif-btn span{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-top:4px;}
.matdif-btn.hard{
  color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--coral) 80%, white), var(--coral));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 0 color-mix(in srgb, var(--coral) 55%, black), 0 12px 16px -7px var(--cast);
}
.matdif-btn.hard span{color:rgba(255,255,255,.85);}
.howto-zihni{width:108px; height:108px; margin:0 auto;}
#howtoTitle{margin:8px 0 2px; font-size:19px;}
.howto-steps{display:grid; gap:14px; margin:16px 0 20px; text-align:left;}
.howto-step{display:flex; gap:12px; align-items:flex-start;}
.howto-step .he{font-size:24px; flex-shrink:0; line-height:1.2;}
.howto-step .ht{font-size:14px; line-height:1.5; color:var(--ink);}
.howto-step .ht b{color:var(--moss);}
footer{margin-top:36px; text-align:center; font-size:12px; color:var(--ink-soft);}
.ftr-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px;}
.ftr-btn{
  border:none; color:var(--ink);
  background:linear-gradient(180deg, var(--key-face), color-mix(in srgb, var(--key-face) 90%, #8a8264));
  font-size:13px; font-weight:650; padding:10px 15px; border-radius:999px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  box-shadow:inset 0 1px 0 var(--card-hi), 0 3px 0 var(--key-edge), 0 8px 12px -6px var(--cast);
  transition:transform .1s ease, box-shadow .1s ease;
}
.ftr-btn:active{transform:translateY(2px); box-shadow:inset 0 1px 0 var(--card-hi), 0 1px 0 var(--key-edge), 0 4px 6px -3px var(--cast);}
.ftr-btn.share{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 80%, white), var(--moss)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 color-mix(in srgb, var(--moss) 50%, black), 0 8px 12px -6px var(--cast);
}
.ftr-btn.danger{color:var(--coral);}
.ftr-ver{margin-top:8px; opacity:.8;}