/* Kelime oyunları — ortak bileşenler. Renkler her sürümde :root[data-mod="es|zit"] altında tanımlanır. */
:root{
 --font-baslik:"Comic Sans MS",system-ui,sans-serif;
 --font-kelime:"Andika","Comic Sans MS",system-ui,sans-serif;
 --zemin:#e9f6ff;--yazi:#1d3557;
 --ust-yazi:var(--yazi);
 --panel:#fff;--panel-yazi:#1d3557;--cerceve:#ffffff88;--satir:#0000000d;
 --perde:#0003;
 --vurgu:#ffb703;--vurgu-yazi:#3a2600;--vurgu-golge:#d08c00;
 --ikincil:#e6f1fa;--ikincil-yazi:#1d3557;--ikincil-golge:#b8d2e6;
 --ray:#0000001f;--top:#fff;
 --arti:#14a44d;--eksi:#e5383b;--odak:#ff9f1c;
 --ust-h:72px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-baslik);color:var(--yazi);background:var(--zemin);overflow:hidden;
 -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--odak);outline-offset:3px}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Eş ↔ zıt geçişi: yeni görünüm, düğmedeki güneş/aydan büyüyen bir daireyle açılır (ortak.js) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------- üst bar ---------- */
#ust{position:fixed;inset:0 0 auto;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:8px 14px;padding:10px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));color:var(--ust-yazi);background:var(--ust,transparent)}
.marka{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:800;font-size:clamp(1.15rem,2.3vw,1.55rem);perspective:400px}
.marka .logo{font-size:1.45em;line-height:1}
.marka .ad{display:inline-block}
.marka.takla .ad{animation:takla .9s cubic-bezier(.45,-.35,.35,1.35)}
.marka.takla .logo{animation:takla .9s .08s cubic-bezier(.45,-.35,.35,1.35)}
@keyframes takla{to{transform:rotateX(360deg)}}

#mod{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--mod-zemin,#ffffff8c);
 box-shadow:inset 0 2px 5px #0002;transition:opacity .3s}
#mod .mod-ad{border:0;background:none;border-radius:999px;padding:8px 12px;min-height:44px;font-weight:800;font-size:1.02rem;opacity:.5;transition:opacity .3s}
#mod .mod-ad[aria-checked="true"]{opacity:1}
#mod .ray{position:relative;width:66px;height:36px;padding:0;border:0;border-radius:999px;background:var(--ray);flex:none}
#mod .top{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:var(--top);display:grid;place-items:center;
 font-size:19px;box-shadow:0 2px 4px #0003;transition:transform .6s cubic-bezier(.5,1.6,.45,1)}
#mod .top::before{content:"☀️"}
:root[data-mod="zit"] #mod .top{transform:translateX(30px) rotate(360deg)}
:root[data-mod="zit"] #mod .top::before{content:"🌙"}
.oyunda #mod{opacity:.45;pointer-events:none}

#hud{display:flex;align-items:center;gap:6px}
.rozet{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;background:var(--rozet,#ffffffb3);font-weight:800;font-size:1.1rem;min-width:4.2em;justify-content:center}
.rozet b{font-variant-numeric:tabular-nums}
.yuvarlak{width:44px;height:44px;border-radius:50%;border:0;background:var(--rozet,#ffffffb3);font-size:20px;display:grid;place-items:center;padding:0}
#cik{display:none}
.oyunda #cik{display:grid}
.oyunda #tablo-ac{display:none}
#puan.zipla{animation:zipla .35s}
@keyframes zipla{50%{transform:scale(1.45)}}
.az-kaldi #sure-rozet{background:var(--eksi);color:#fff;animation:nabiz 1s infinite}
@keyframes nabiz{50%{transform:scale(1.1)}}
#sure-cubuk{position:absolute;left:0;right:0;bottom:0;height:6px;background:#0000001a;opacity:0;transition:opacity .3s}
#sure-cubuk i{display:block;height:100%;background:var(--vurgu);transform-origin:left;transition:transform .12s linear}
.oyunda #sure-cubuk{opacity:1}
.az-kaldi #sure-cubuk i{background:var(--eksi)}

@media (max-width:760px){
 #ust{justify-content:center}
 #mod{order:3;width:100%;justify-content:center}
 .marka .ad{font-size:.95em}
}
@media (max-width:420px){
 .rozet{min-width:0;padding:6px 9px;font-size:1rem}
 .yuvarlak{width:40px;height:40px}
 #mod .mod-ad{padding:8px 8px;font-size:.95rem}
}

/* ---------- perdeler (başlangıç, sonuç, skor tablosu) ---------- */
.perde{position:fixed;inset:var(--ust-h) 0 0;z-index:40;display:grid;place-items:center;padding:14px;background:var(--perde);overflow:auto}
.perde[hidden]{display:none}
.oyunda #kapi,.oyunda #son{display:none}
.kart{width:min(440px,100%);margin:auto;padding:22px clamp(18px,4vw,34px) 24px;border-radius:30px;text-align:center;
 background:var(--panel);color:var(--panel-yazi);box-shadow:0 0 0 5px var(--cerceve),0 22px 50px #0003;animation:kart-gel .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes kart-gel{from{transform:translateY(24px) scale(.94);opacity:0}}
.kart h2{margin:.05em 0 0;font-size:clamp(1.8rem,5.5vw,2.4rem);line-height:1.1}
.buyuk-simge{font-size:62px;line-height:1.1}
.mod-cip{display:inline-block;margin:8px 0 0;padding:4px 14px;border-radius:999px;background:var(--satir);font-weight:800}
.nasil{margin:12px auto 16px;max-width:30ch;font-size:1.15rem;line-height:1.45}
#kapi-form{display:grid;gap:12px}
#ad{width:100%;padding:12px 16px;border-radius:18px;border:3px solid var(--satir);background:var(--girdi,#fff);color:var(--girdi-yazi,#1d3557);
 font:inherit;font-size:1.25rem;text-align:center;user-select:text;-webkit-user-select:text}
#ad:focus{border-color:var(--vurgu);outline:none}
.hata{margin:0;color:var(--eksi);font-weight:800}
.salla{animation:salla .45s}
@keyframes salla{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.btn{border:0;border-radius:20px;padding:14px 22px;font-size:1.3rem;font-weight:800;background:var(--vurgu);color:var(--vurgu-yazi);
 box-shadow:0 6px 0 var(--vurgu-golge);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--vurgu-golge)}
.btn.ikincil{background:var(--ikincil);color:var(--ikincil-yazi);box-shadow:0 6px 0 var(--ikincil-golge)}
.btn.ikincil:active{box-shadow:0 1px 0 var(--ikincil-golge)}
.dugmeler{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.ara-baslik{margin:18px 0 4px;font-size:1.05rem}

.liste{list-style:none;margin:8px 0 0;padding:0;text-align:left}
.liste li{display:grid;grid-template-columns:2.4em 1fr auto;align-items:center;gap:8px;padding:7px 12px;border-radius:14px;font-size:1.08rem}
.liste li:nth-child(odd){background:var(--satir)}
.liste li.yeni{background:var(--vurgu);color:var(--vurgu-yazi);animation:parla .8s ease-in-out 3 alternate}
@keyframes parla{to{transform:scale(1.04)}}
.liste .sira{text-align:center;font-weight:800}
.liste .isim{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.liste .puan{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.liste .puan small{display:block;font-size:.72em;font-weight:400;opacity:.75}
.liste li.ayrac{background:none;justify-content:center;display:block;text-align:center;opacity:.6;padding:0}
.bos-tablo{margin:10px 0;opacity:.8}

.sonuc{margin:10px 0 4px;font-size:1.3rem;line-height:1.4}
.sira-mesaj{margin:4px 0 8px;font-size:1.1rem;font-weight:800}
.ciftler{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.cift{font-family:var(--font-kelime);padding:4px 11px;border-radius:999px;background:var(--satir);font-size:1rem}

.sekmeler{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}
.sekmeler button{border:0;border-radius:999px;padding:8px 14px;font-weight:800;background:var(--satir);opacity:.6}
.sekmeler button[aria-selected="true"]{opacity:1;background:var(--vurgu);color:var(--vurgu-yazi)}
.sil{border:0;background:none;text-decoration:underline;opacity:.7;font-size:.95rem;padding:10px}

/* ---------- geri sayım, öğrenme şeridi, uçan yazılar, parçacıklar ---------- */
#geri{position:fixed;inset:0;z-index:45;display:grid;place-items:center;pointer-events:none;font-weight:800;
 font-size:min(28vw,200px);color:var(--vurgu);-webkit-text-stroke:6px var(--panel);paint-order:stroke fill;text-shadow:0 10px 30px #0004}
#geri[hidden]{display:none}
#geri.pop{animation:sayi .75s cubic-bezier(.2,1.6,.4,1)}
@keyframes sayi{from{transform:scale(.2);opacity:0}60%{opacity:1}to{transform:scale(1)}}

#ogren{position:fixed;left:50%;top:calc(var(--ust-h) + 12px);z-index:26;display:flex;align-items:center;gap:.45em;padding:6px 20px;border-radius:999px;
 background:var(--panel);color:var(--panel-yazi);font-family:var(--font-kelime);font-size:clamp(1.25rem,3vw,1.75rem);box-shadow:0 8px 20px #0002;
 transform:translateX(-50%);opacity:0;pointer-events:none;white-space:nowrap}
#ogren .isaret{font-family:var(--font-baslik);font-weight:800;color:var(--vurgu-golge)}
#ogren.goster{animation:ogren 2.6s ease-out forwards}
@keyframes ogren{0%{opacity:0;transform:translateX(-50%) scale(.6)}10%{opacity:1;transform:translateX(-50%) scale(1.08)}18%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}

#fx{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.ucan{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:1.7rem;white-space:nowrap;
 -webkit-text-stroke:4px var(--panel);paint-order:stroke fill}
.ucan.arti{color:var(--arti)}.ucan.eksi{color:var(--eksi)}.ucan.sure,.ucan.bonus{color:var(--vurgu-golge);font-size:1.9rem}
.parca{position:absolute;font-size:22px;line-height:1}

/* ---------- diğer sürümler ---------- */
#diger{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:41;display:flex;gap:2px;padding:4px;
 border-radius:999px;background:var(--panel);box-shadow:0 6px 18px #0003}
#diger a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-size:22px;text-decoration:none}
#diger a[aria-current="page"]{background:var(--vurgu)}
.oyunda #diger{display:none}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 #ogren.goster{animation:none!important;opacity:1}
}