/* =========================================================
   RENKLİ KELİME — design tokens
   Palette: a premium identity in warm ivory (Gündüz / day) with
   one antique-gold accent that carries every interactive and
   decorative highlight (chips, buttons, progress fills, the
   wordmark). No rainbow, no night mode — single fixed palette.
   Type: Playfair Display (serif display, editorial/luxury)
         + Manrope (body) + IBM Plex Mono (data/pronunciation)
   ========================================================= */
:root{
  --bg:#f7f2e6;
  --card:#fffdf7;
  --card-line:#e6dbbf;
  --ink:#22190c;
  --muted:#71634a;
  --border:#e1d3ab;
  --accent:#b8863a;
  --accent-dark:#8a611f;
  --accent-soft:#f4e6c4;
  --accent-ink:#7a5420;
  --on-accent:#221909;
  --green:#2f8f5b;
  --green-soft:#e3f3e8;
  --red:#c14a3f;
  --red-soft:#fbe6e2;
  --amber:#a3701f;
  --amber-soft:#f6e8cd;
  --radius:14px;
  --shadow:0 6px 22px rgba(40,32,16,0.12);
  --font-display:"Playfair Display","Georgia",serif;
  --font-body:"Manrope","Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ring:linear-gradient(135deg,#fdf6e3 0%,#f0dfb0 45%,#d9b168 75%,#b8863a 100%);
  --ribbon:linear-gradient(90deg,#b8863a,#e6c579,#b8863a);
  --fc-front-ink:#2a2010;
  --banner-bg:linear-gradient(135deg,#fbf3df,#f3e6c4);
  --pp-gray:#ddd4bc;
  --pp-gray-ink:#8a7c5c;
  --pp-yellow:#f4c93e;
  --pp-yellow-ink:#3a2c05;
  --pp-orange:#e2892e;
  --pp-orange-ink:#fffaf0;
}

body, .card, .stat-box, .mode-card, .chip, .tab-btn, .filterbar, .tabs, .btn, .fc-face, .match-item, .opt-btn{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
[hidden]{display:none!important;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}

#app{max-width:1080px;margin:0 auto;padding:0 16px 60px;}

/* ---------- GİRİŞ / KAYIT ---------- */
.auth-screen{
  position:fixed;inset:0;z-index:1000;overflow-y:auto;background:var(--bg);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.auth-card{
  position:relative;width:100%;max-width:400px;background:var(--card);border:1px solid var(--card-line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px;
  border-top:3px solid transparent;border-image:var(--ribbon) 1;
}
.auth-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--card-line);background:var(--bg);color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.auth-close:hover{color:var(--ink);border-color:var(--accent);}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;}
.auth-brand .brand-mark{width:36px;height:36px;border-radius:11px;overflow:hidden;background:var(--ring);padding:2px;flex-shrink:0;}
.auth-brand .brand-mark img{width:100%;height:100%;border-radius:9px;display:block;object-fit:cover;}
.auth-brand .brand-text{
  font-family:var(--font-display);font-size:22px;font-weight:800;
  background-image:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-tabs{display:flex;gap:4px;background:var(--bg);padding:5px;border-radius:11px;margin-bottom:20px;border:1px solid var(--card-line);}
.auth-tab{
  flex:1;border:none;background:transparent;padding:9px;border-radius:8px;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--muted);transition:.15s;
}
.auth-tab.active{background:var(--accent);color:var(--on-accent);}
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;}
.auth-form input{
  font-family:var(--font-body);font-size:14px;padding:10px 12px;border-radius:9px;
  border:1.5px solid var(--border);background:var(--bg);color:var(--ink);
}
.auth-form input:focus{outline:none;border-color:var(--accent);}
.auth-submit{width:100%;margin-top:4px;}
.auth-error{
  background:var(--red-soft);color:var(--red);border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:600;line-height:1.4;
}
.auth-note{margin:20px 0 0;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5;}
.auth-guest-btn{width:100%;margin-top:14px;}

/* ---------- KULLANICI KUTUSU ---------- */
.user-box{display:flex;align-items:center;gap:10px;}
.user-name{font-size:13px;font-weight:700;color:var(--muted);}

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex;flex-direction:column;
  gap:14px;padding:22px 4px 10px;
}
.topbar-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px;
}
.topbar-row .user-box{margin-left:auto;}
.brand{
  font-family:var(--font-display);font-size:26px;font-weight:800;
  letter-spacing:.01em;display:flex;align-items:center;gap:10px;
}
.brand-text{
  background-image:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .brand-mark{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;overflow:hidden;
  background:var(--ring);padding:2px;box-shadow:var(--shadow);
}
.brand .brand-mark img{width:100%;height:100%;border-radius:9px;display:block;object-fit:cover;}
.tabs{display:flex;flex-wrap:wrap;gap:4px;background:var(--card);padding:6px;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--card-line);}
.tab-btn{
  border:none;background:transparent;padding:9px 14px;border-radius:9px;
  font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;transition:.15s;
}
.tab-btn:hover{background:var(--accent-soft);color:var(--accent-ink);}
.tab-btn.active{background:var(--accent);color:var(--on-accent);}

.tab-btn:focus-visible, .chip:focus-visible, .btn:focus-visible, .mode-card:focus-visible, .match-item:focus-visible, .opt-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---------- FILTER BAR ---------- */
.filterbar{
  background:var(--card);border:1.5px solid var(--card-line);border-radius:18px;
  box-shadow:0 12px 28px -18px rgba(42,33,26,.22);
  padding:13px 20px;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;
}
.filter-group{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.filter-group-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.filter-label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.1em;}
.bulk-actions{display:flex;align-items:center;gap:6px;}
.bulk-btn{
  background:transparent;border:none;padding:0;font-family:var(--font-body);font-size:11px;font-weight:700;
  color:var(--accent-dark);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.bulk-btn:hover{color:var(--accent);}
.bulk-sep{color:var(--border);font-size:11px;}
.chip-row{display:flex;flex-wrap:wrap;gap:7px;}
.chip{
  border:1.5px solid var(--border);background:var(--bg);padding:6px 14px;border-radius:999px;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;cursor:pointer;color:var(--muted);transition:.15s;
}
.chip:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px);}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.filter-count{margin-left:auto;align-self:center;font-size:12.5px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;background:var(--bg);border:1px solid var(--card-line);border-radius:999px;padding:5px 12px;white-space:nowrap;}

/* ---------- GENERIC ---------- */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;}
.section-title{font-family:var(--font-display);font-size:21px;font-weight:700;margin:0 0 14px;text-wrap:balance;}
.muted{color:var(--muted);}
.btn{
  border:none;border-radius:10px;padding:10px 18px;font-family:var(--font-body);font-weight:700;font-size:14px;
  cursor:pointer;transition:.15s;
}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--ink);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-ink);}
.btn-green{background:var(--green);color:var(--on-accent);}
.btn-red{background:var(--red);color:var(--on-accent);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- HOME ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px;}
.stat-box{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-align:center;position:relative;overflow:hidden;}
.stat-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ribbon);}
.stat-box .num{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--accent-dark);font-variant-numeric:tabular-nums;}
.stat-box .lbl{font-size:12px;color:var(--muted);font-weight:700;margin-top:4px;letter-spacing:.04em;}

.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.mode-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;cursor:pointer;transition:.15s;border:1.5px solid var(--card-line);
}
.mode-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 34px rgba(201,162,74,.22);}
.mode-card .icon{font-size:28px;margin-bottom:10px;}
.mode-card h3{margin:0 0 6px;font-family:var(--font-display);font-size:18px;font-weight:700;}
.mode-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;}

.review-banner{
  background:var(--banner-bg);color:var(--ink);border-radius:var(--radius);
  padding:18px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px;
  border:1px solid var(--card-line);border-left:3px solid var(--accent);
}
.review-banner h3{margin:0 0 4px;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--accent-ink);}
.review-banner p{margin:0;opacity:.85;font-size:13px;}
.review-banner .btn{background:var(--accent);color:var(--on-accent);}
.review-banner .btn:hover{background:var(--accent-dark);}

/* ---------- KELİME KARTLARI — HAZIRLIK EKRANI ---------- */
.fc-eyebrow{background:var(--amber-soft);color:var(--accent-dark);}
.fc-setup-pill{font-size:12px;font-weight:700;color:var(--accent-ink);background:var(--amber-soft);border-radius:999px;padding:6px 13px;}
.fc-setup-preview{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fc-setup-mini{
  border-radius:14px;padding:18px 16px;min-height:104px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
}
.fc-setup-mini-front{
  background:var(--ring);color:var(--fc-front-ink);
  box-shadow:0 10px 24px -14px rgba(42,33,26,.5);
}
.fc-setup-mini-word{font-family:var(--font-display);font-size:20px;font-weight:700;}
.fc-setup-mini-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;opacity:.9;}
.fc-setup-mini-back{background:var(--bg);border:1px solid var(--card-line);}
.fc-setup-mini-tr{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--accent-dark);}
.fc-setup-mini-ex{font-size:11px;font-style:italic;color:var(--muted);line-height:1.4;}
.fc-setup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.fc-setup-stat{
  background:var(--bg);border:1px solid var(--card-line);border-radius:12px;padding:12px 8px;text-align:center;
  display:flex;flex-direction:column;gap:3px;
}
.fc-setup-stat b{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--accent-dark);font-variant-numeric:tabular-nums;}
.fc-setup-stat span{font-size:9px;font-weight:800;letter-spacing:.09em;color:var(--muted);}
.fc-setup-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;}
.am-start-cta.fc-start-cta{background:var(--accent-dark);}
.am-start-cta.fc-start-cta:hover{background:var(--accent);}
.am-start-cta.fc-due-cta{
  background:var(--amber-soft);color:var(--accent-ink);border:1.5px solid var(--accent);font-size:14px;padding:13px 20px;
}
.am-start-cta.fc-due-cta:hover{background:#f0e2c4;}
.fc-end-btn{margin-bottom:16px;}
@media (max-width:640px){
  .fc-setup-preview{grid-template-columns:1fr;}
}

/* ---------- OYUN BAŞLIK ŞERİDİ (game-header, tüm oyunlarda ortak) ---------- */
.game-header{
  position:relative;overflow:hidden;border-radius:20px;padding:14px 20px 16px;
  color:#fcf4e5;margin-bottom:14px;
}
.game-header-decor-a{position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(240,201,122,.14);}
.game-header-decor-b{position:absolute;right:20px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:rgba(0,0,0,.14);}
.game-header-row{position:relative;display:flex;justify-content:flex-start;margin-bottom:10px;}
.game-back-btn{
  position:relative;background:rgba(252,244,229,.14);border:1.5px solid rgba(252,244,229,.32);color:#fcf4e5;
  border-radius:999px;padding:5px 13px;font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;transition:.15s;
}
.game-back-btn:hover{background:rgba(252,244,229,.24);transform:translateY(-1px);}
.game-header-main{position:relative;display:flex;align-items:center;gap:13px;}
.game-header-avatar{
  width:40px;height:40px;min-width:40px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:18px;font-weight:600;color:#fff9ee;box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.game-header-tag{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#e5d6be;}
.game-header-title{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.01em;margin-top:1px;}

/* Oynanmakta olan bir oyunun ekranında, süre/tur bitmeden de çıkabilmeyi
   sağlayan ortak "Oyunu Terk Et" düğmesi (bkz. gameQuitBtnHtml/quitCurrentGame).
   display:block + width:max-content + margin-left:auto üçlüsü, düğmeyi
   içine konduğu kapsayıcı ister flex-column ister düz blok olsun sağ üste
   hizalar — her oyun ekranında aynı satırı tekrarlamaya gerek kalmaz. */
.game-quit-btn{
  display:block;width:max-content;margin:0 0 12px auto;
  background:transparent;border:1.5px solid var(--border);color:var(--muted);
  border-radius:999px;padding:7px 16px;font-family:var(--font-body);font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.15s;
}
.game-quit-btn:hover{border-color:var(--red);color:var(--red);}
.kk-tv .game-quit-btn{
  position:relative;border-color:var(--kk-line);color:var(--kk-text-dim);margin-bottom:10px;
}
.kk-tv .game-quit-btn:hover{border-color:var(--kk-red);color:var(--kk-red);}

/* Uygulama içi onay penceresi (tarayıcının confirm() kutusu yerine — bkz.
   showConfirmDialog: sandbox'lı iframe'lerde confirm() yok sayılıyor). */
.app-confirm-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(34,25,12,.45);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:appConfirmFade .15s ease;
}
@keyframes appConfirmFade{from{opacity:0;}to{opacity:1;}}
.app-confirm-dialog{
  width:100%;max-width:400px;background:var(--card);border:1.5px solid var(--card-line);
  border-radius:20px;padding:26px 26px 22px;box-shadow:0 30px 60px -30px rgba(42,33,26,.6);
  animation:appConfirmPop .18s ease;
}
@keyframes appConfirmPop{from{transform:translateY(8px) scale(.98);opacity:0;}to{transform:none;opacity:1;}}
.app-confirm-title{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);}
.app-confirm-text{margin:10px 0 20px;font-size:14px;line-height:1.55;color:var(--muted);}
.app-confirm-actions{display:flex;gap:10px;justify-content:flex-end;}

/* ---------- FLASHCARDS ---------- */
.fc-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;}
.fc-progress-track{width:100%;max-width:420px;height:6px;border-radius:99px;background:var(--card-line);overflow:hidden;}
.fc-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:99px;transition:width .3s;}
.fc-progress{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--muted);font-weight:700;}
.fc-progress-count{font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
.fc-pill{background:var(--card);border:1px solid var(--card-line);border-radius:99px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--muted);}
.flashcard{
  width:100%;max-width:420px;height:230px;perspective:1200px;cursor:pointer;
}
.flashcard-inner{
  position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d;
}
.flashcard.flipped .flashcard-inner{transform:rotateY(180deg);}
.fc-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;box-shadow:0 14px 30px -14px rgba(42,33,26,.28);border:1px solid var(--card-line);
  overflow:hidden;
}
/* Not: burada position:relative TANIMLANMAZ — .fc-face zaten position:absolute
   (inset:0) ve onu ezersek kart yüzü kutuyu doldurmuyor. Dekoratif daireler
   için gereken kapsayıcıyı absolute konum zaten sağlıyor. */
.fc-front{background:var(--ring);color:var(--fc-front-ink);border-color:transparent;}
.fc-front-decor-a{position:absolute;left:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08);}
.fc-front-decor-b{position:absolute;right:-30px;bottom:-40px;width:110px;height:110px;border-radius:50%;background:rgba(0,0,0,.1);}
.fc-back{background:var(--card);transform:rotateY(180deg);}
.fc-word{position:relative;font-family:var(--font-display);font-size:32px;font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.5);}
.fc-type{position:relative;font-family:var(--font-mono);font-size:11px;opacity:.9;margin-top:10px;text-transform:uppercase;letter-spacing:.08em;}
.fc-tr{font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--accent-dark);}
.fc-example{margin-top:12px;font-size:14px;color:var(--ink);font-style:italic;}
.fc-example-tr{margin-top:4px;font-size:13px;color:var(--muted);}
.fc-hint{position:relative;font-size:11px;color:var(--muted);margin-top:8px;font-family:var(--font-mono);letter-spacing:.02em;}
.fc-actions{display:flex;gap:10px;}
.fc-nav{display:flex;gap:10px;align-items:center;}
.fc-donecard{align-items:center;text-align:center;border-radius:22px;}

/* ---------- MATCHING ---------- */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:640px;margin:0 auto;}
.match-col{display:flex;flex-direction:column;gap:8px;}
.match-item{
  background:transparent;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;
  cursor:pointer;font-weight:700;font-size:14px;transition:.15s;text-align:center;color:var(--ink);
}
.match-item:hover{border-color:var(--accent);}
.match-item.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);}
.match-item.correct{border-color:var(--green);background:var(--green-soft);color:var(--green);cursor:default;}
.match-item.wrong{border-color:var(--red);background:var(--red-soft);animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
@media (prefers-reduced-motion:reduce){ .match-item.wrong{animation:none;} .flashcard-inner{transition:none;} }
.match-status{text-align:center;margin-bottom:16px;font-weight:700;color:var(--muted);}

/* ---------- TEST ---------- */
.test-progress{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;}
.progress-bar{height:8px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:20px;}
.progress-bar-fill{height:100%;background:var(--ribbon);transition:width .3s;}
.q-box{text-align:center;margin-bottom:22px;}
.q-label{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.08em;}
.q-text{font-family:var(--font-display);font-size:24px;font-weight:700;margin-top:8px;text-wrap:balance;}
.q-sentence{font-size:15px;color:var(--muted);margin-top:10px;font-style:italic;}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 auto;}
.opt-btn{
  background:transparent;border:1.5px solid var(--border);border-radius:12px;padding:14px;
  font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:.15s;color:var(--ink);
}
.opt-btn:hover{border-color:var(--accent);}
.opt-btn.correct{background:var(--green-soft);border-color:var(--green);color:var(--green);}
.opt-btn.wrong{background:var(--red-soft);border-color:var(--red);color:var(--red);}
.opt-btn:disabled{cursor:default;}
.test-result{text-align:center;}
.test-result .big-num{font-family:var(--font-display);font-size:54px;font-weight:700;color:var(--accent-dark);font-variant-numeric:tabular-nums;}

/* ---------- STATS ---------- */
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.bar-label{width:150px;font-size:13px;font-weight:700;flex-shrink:0;}
.bar-track{flex:1;height:12px;background:var(--border);border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;background:var(--ribbon);border-radius:99px;}
.bar-val{width:70px;text-align:right;font-size:13px;color:var(--muted);font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums;}

.badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.03em;}
.badge-new{background:var(--border);color:var(--muted);}
.badge-learning{background:var(--amber-soft);color:var(--amber);}
.badge-known{background:var(--green-soft);color:var(--green);}

.empty-state{text-align:center;padding:50px 20px;color:var(--muted);}
.empty-state .icon{font-size:40px;margin-bottom:10px;}

@media (max-width:640px){
  .options-grid{grid-template-columns:1fr;}
  .match-grid{gap:12px;}
  .user-box{gap:8px;}
  .user-box .btn{padding:8px 10px;font-size:12px;}
}

/* ---------- PASSAPAROLA — BAŞLANGIÇ EKRANI ---------- */
.pp-start-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;}
.pp-wrap-start{padding:0;}
.pp-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.pp-title-plain{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--accent-dark)!important;font-size:clamp(28px,6cqw,42px);}
.pp-legend{display:flex;align-items:center;gap:18px;padding-top:2px;font-size:12.5px;color:var(--muted);}
.pp-legend-item{display:flex;align-items:center;gap:6px;}
.pp-legend-dot{width:8px;height:8px;border-radius:999px;display:block;}
.pp-letter.pp-letter-demo{
  background:var(--accent-dark);color:#fffdf8;box-shadow:0 8px 22px -10px rgba(168,113,42,.7);
  animation:ppPulse 2.4s ease-in-out infinite;
}
@keyframes ppPulse{0%,100%{box-shadow:0 8px 22px -10px rgba(168,113,42,.7);}50%{box-shadow:0 8px 26px -6px rgba(168,113,42,.9);}}
.pp-settings-card{
  display:flex;flex-direction:column;gap:26px;background:var(--card);border:1px solid var(--card-line);
  border-radius:24px;padding:34px 32px;box-shadow:0 18px 50px -32px rgba(42,33,26,.4);
}
.pp-duration-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pp-dur-btn{
  cursor:pointer;font-family:var(--font-body);font-size:14px;font-weight:700;padding:13px 0;
  border-radius:11px;background:var(--card);color:var(--muted);border:1.5px solid var(--border);transition:.15s;
}
.pp-dur-btn:hover{border-color:var(--accent);color:var(--accent-ink);}
.pp-dur-btn.active{background:var(--ink);color:var(--card);border-color:var(--ink);}
.pp-stat-rows{display:flex;flex-direction:column;gap:12px;}
.pp-stat-row{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;color:var(--muted);}
.pp-stat-row b{font-family:var(--font-display);font-size:23px;font-weight:600;color:var(--ink);}
.pp-howto{display:flex;flex-direction:column;gap:8px;background:var(--amber-soft);border-radius:14px;padding:16px 18px;}
.pp-howto-title{font-size:12.5px;font-weight:800;color:var(--accent-ink);}
.pp-howto-text{font-size:13px;line-height:1.55;color:var(--muted);}
@media (max-width:900px){
  .pp-start-grid{grid-template-columns:1fr;}
  .pp-settings-card{padding:26px 24px;}
}

/* ---------- PASSAPAROLA ---------- */
.pp-wrap{display:flex;justify-content:center;padding:10px 0 30px;}
.pp-circle{
  position:relative;width:520px;max-width:100%;aspect-ratio:1/1;
  margin:0 auto;
}
.pp-letter{
  position:absolute;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:19px;
  background:var(--pp-gray);color:var(--pp-gray-ink);
  box-shadow:var(--shadow);border:2px solid var(--card);
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
  user-select:none;
  transform:translate(-50%,-50%);
}
.pp-letter.pp-green{background:var(--green);color:var(--on-accent);}
.pp-letter.pp-red{background:var(--red);color:var(--on-accent);}
.pp-letter.pp-orange{background:var(--pp-orange);color:var(--pp-orange-ink);}
.pp-letter.pp-active{
  background:var(--pp-yellow);color:var(--pp-yellow-ink);
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 4px var(--accent-soft), var(--shadow);
  z-index:2;
}

.pp-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:300px;text-align:center;background:var(--card);
  border:1px solid var(--card-line);border-radius:50%;
  height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:24px;box-shadow:var(--shadow);
}
.pp-title{font-family:var(--font-display);font-size:25px;font-weight:800;
  background-image:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pp-desc{font-size:13.5px;color:var(--muted);line-height:1.4;margin:0;padding:0 10px;}
.pp-duration-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.pp-dur-btn{font-size:12px;padding:6px 10px;}
.pp-timer{font-family:var(--font-mono);font-size:23px;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums;}
.pp-scoremini{font-size:13px;color:var(--muted);font-weight:700;}
.pp-active-letter{font-family:var(--font-display);font-size:40px;font-weight:800;color:var(--ink);line-height:1;}
.pp-clue{font-size:15px;font-weight:700;color:var(--accent-ink);padding:0 12px;min-height:40px;display:flex;align-items:center;justify-content:center;}
.pp-input{
  width:88%;border:1.5px solid var(--border);border-radius:9px;
  padding:8px 10px;font-size:14px;font-family:var(--font-body);
  background:var(--bg);color:var(--ink);text-align:center;
}
.pp-input:focus{outline:none;border-color:var(--accent);}
.pp-key-hint{font-size:9.5px;color:var(--muted);letter-spacing:.01em;}
.pp-actions{display:flex;gap:6px;}
.pp-actions .btn{font-size:12px;padding:7px 11px;}
.pp-result{border-radius:50%;}
.pp-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 4px;width:100%;}
.pp-result-num{font-family:var(--font-mono);font-size:19px;font-weight:800;color:var(--ink);}
.pp-result-lbl{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.02em;}

.pp-letter.pp-clickable{cursor:pointer;}
.pp-letter.pp-clickable:hover{transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.08);}

.pp-review{max-width:640px;margin:22px auto 0;}
.pp-review-item{
  display:flex;align-items:flex-start;gap:12px;padding:10px 6px;
  border-bottom:1px solid var(--border);
  transition:background-color .5s ease;
}
.pp-review-item:last-child{border-bottom:none;}
.pp-review-item.pp-flash{background:var(--accent-soft);}
.pp-review-badge{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:13px;
  margin-top:2px;
}
.pp-review-badge.pp-red{background:var(--red);color:var(--on-accent);}
.pp-review-badge.pp-orange{background:var(--pp-orange);color:var(--pp-orange-ink);}
.pp-review-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.pp-review-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pp-review-status{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:var(--muted);width:44px;flex-shrink:0;
}
.pp-review-word{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink);flex-shrink:0;min-width:100px;}
.pp-review-tr{font-size:13px;color:var(--muted);}
.pp-review-your{font-size:12.5px;color:var(--red);}
.pp-review-your strong{font-family:var(--font-mono);}

@media (max-width:640px){
  .pp-circle{width:380px;}
  .pp-letter{width:38px;height:38px;font-size:14.5px;}
  .pp-letter.pp-active{transform:translate(-50%,-50%) scale(1.15);}
  .pp-center{width:215px;height:215px;padding:14px;gap:5px;}
  .pp-title{font-size:19px;}
  .pp-desc{font-size:11.5px;}
  .pp-active-letter{font-size:28px;}
  .pp-clue{font-size:12.5px;min-height:30px;}
  .pp-timer{font-size:18px;}
  .pp-key-hint{font-size:9px;}
  .pp-review-top{gap:6px;}
  .pp-review-word{min-width:0;}
}

/* Çok dar ekranlarda (küçük telefonlar) çember küçüldüğü için orta
   panel ve harfleri orantılı biçimde daha da küçültüyoruz — aksi halde
   harfler orta panelle çakışabilir. */
@media (max-width:400px){
  .pp-letter{width:30px;height:30px;font-size:12px;}
  .pp-center{width:160px;height:160px;padding:10px;gap:3px;}
  .pp-title{font-size:15px;}
  .pp-desc{font-size:10px;padding:0 4px;}
  .pp-duration-row{gap:4px;}
  .pp-dur-btn{font-size:10.5px;padding:5px 8px;}
  .pp-active-letter{font-size:21px;}
  .pp-clue{font-size:10.5px;min-height:24px;padding:0 6px;}
  .pp-timer{font-size:14px;}
  .pp-scoremini{font-size:10.5px;}
  .pp-input{font-size:12px;padding:6px 8px;}
  .pp-key-hint{font-size:8px;}
  .pp-actions .btn{font-size:10.5px;padding:6px 8px;}
}

/* Seviye chip grubunun altında gösterilen kısa açıklama (bkz. gameLevelNoteHtml) */
.am-level-note{margin:10px 0 0;font-size:12.5px;color:var(--muted);}

/* Seviye seçilmeden "Başlat"a basılınca chip satırını vurgulayan uyarı
   (bkz. requireGameLevels). outline kullanılıyor: yerleşimi kaydırmaz. */
.chip-row-warn{
  outline:2px solid var(--red);outline-offset:7px;border-radius:12px;
  animation:chipWarnShake .45s ease;
}
@keyframes chipWarnShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-4px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}
/* Hata metni yalnızca doluyken kutu görünümü alsın */
.wd-error:not(:empty),.ha-error:not(:empty){
  margin-top:12px;background:var(--red-soft);border-radius:10px;padding:9px 12px;line-height:1.45;
}

/* ---------- WORDLE — BAŞLANGIÇ EKRANI ---------- */
.wd-info-sub{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--muted);margin:4px 0 0;}
.wd-legend2{display:grid;margin:26px 0 0;border-top:1px solid var(--card-line);}
.wd-legend2-item{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--card-line);font-size:14.5px;color:var(--ink);}
.wd-legend2-badge{width:26px;height:26px;min-width:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-body);font-weight:800;font-size:12px;color:#fff9ee;}
.wd-legend2-green{background:var(--green);}
.wd-legend2-amber{background:var(--accent-dark);}
.wd-legend2-gray{background:var(--pp-gray);color:var(--pp-gray-ink);}
.wd-preview-pill{font-size:12px;font-weight:700;color:var(--accent-ink);background:var(--amber-soft);border-radius:999px;padding:6px 13px;}
.wd-preview-grid{display:flex;flex-direction:column;gap:6px;align-items:center;background:var(--card);}
.wd-preview-row{display:flex;gap:6px;}
.wd-preview-tile{
  width:38px;height:38px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:800;font-size:15px;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--card-line);
}
.wd-preview-green{background:var(--green);color:#fff9ee;border-color:var(--green);}
.wd-preview-amber{background:var(--accent-dark);color:#fff9ee;border-color:var(--accent-dark);}
.wd-preview-gray{background:var(--pp-gray);color:var(--pp-gray-ink);border-color:var(--pp-gray);}
.wd-preview-outline{background:transparent;border-color:var(--accent-dark);color:var(--ink);}

/* ---------- WORDLE ---------- */
.wd-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 0 30px;}
.wd-start{max-width:460px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.wd-legend{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:4px 0;}
.wd-legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.wd-tile-mini{width:16px;height:16px;border-radius:4px;flex-shrink:0;display:inline-block;}
.wd-tile-mini.wd-green{background:var(--green);}
.wd-tile-mini.wd-yellow{background:var(--amber);}
.wd-tile-mini.wd-gray{background:var(--pp-gray);}

.wd-info{display:flex;gap:18px;font-size:13px;font-weight:700;color:var(--muted);}
.wd-hint{font-size:14px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:8px 16px;border-radius:99px;text-align:center;}
.wd-hint strong{font-family:var(--font-display);}

.wd-board{display:flex;flex-direction:column;gap:6px;max-width:100%;overflow-x:auto;padding:2px;}
.wd-row{display:flex;gap:6px;justify-content:center;flex-shrink:0;}
.wd-tile{
  width:44px;height:44px;border-radius:8px;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:20px;
  background:var(--card);color:var(--ink);
  text-transform:uppercase;
}
.wd-tile.wd-green{background:var(--green);border-color:var(--green);color:var(--on-accent);}
.wd-tile.wd-yellow{background:var(--amber);border-color:var(--amber);color:var(--on-accent);}
.wd-tile.wd-gray{background:var(--pp-gray);border-color:var(--pp-gray);color:var(--pp-gray-ink);}

/* Yazma efekti: canlı (henüz gönderilmemiş) satırdaki kutucuklar kesikli
   çerçeveyle bekler, harf yazıldıkça dolar ve hafif bir "pop" ile büyür. */
.wd-tile-live{border-style:dashed;border-color:var(--accent);background:var(--accent-soft);}
.wd-tile-filled{border-style:solid;border-color:var(--accent);background:var(--card);color:var(--ink);}
@keyframes wd-tile-pop{
  0%{transform:scale(.94);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}
.wd-tile.wd-pop{animation:wd-tile-pop .14s ease;}

/* Gönderilen bir tahminin harfleri, soldan sağa hafif gecikmeli bir
   "reveal" animasyonuyla belirir. */
@keyframes wd-tile-reveal{
  0%{transform:scale(.8) translateY(6px);opacity:0;}
  60%{transform:scale(1.08) translateY(-2px);opacity:1;}
  100%{transform:scale(1) translateY(0);}
}
.wd-tile.wd-reveal{animation:wd-tile-reveal .32s ease both;}

/* Geçersiz uzunlukta bir tahmin gönderilirse canlı satır kısaca sallanır. */
@keyframes wd-shake{
  0%, 100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.wd-row.wd-shake{animation:wd-shake .35s ease;}
@media (prefers-reduced-motion: reduce){
  .wd-tile.wd-pop, .wd-tile.wd-reveal, .wd-row.wd-shake{animation:none;}
}

.wd-input-row{display:flex;gap:8px;align-items:center;}
.wd-input{
  border:1.5px solid var(--border);border-radius:9px;padding:9px 14px;
  font-size:16px;font-family:var(--font-mono);letter-spacing:.06em;
  background:var(--bg);color:var(--ink);text-align:center;text-transform:uppercase;
  width:220px;max-width:60vw;
}
.wd-input:focus{outline:none;border-color:var(--accent);}
.wd-error{color:var(--red);font-size:12.5px;font-weight:700;min-height:16px;}

.wd-keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;}
.wd-kb-row{display:flex;gap:5px;}
.wd-key{
  width:30px;height:36px;border-radius:6px;background:var(--pp-gray);color:var(--pp-gray-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;font-size:12.5px;
  opacity:.55;
}
.wd-key.wd-gray{opacity:1;background:var(--muted);color:#fff;}
.wd-key.wd-yellow{opacity:1;background:var(--amber);color:var(--on-accent);}
.wd-key.wd-green{opacity:1;background:var(--green);color:var(--on-accent);}

.wd-result{max-width:460px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.wd-answer{font-size:15px;font-weight:700;color:var(--ink);}
.wd-answer strong{font-family:var(--font-display);font-size:18px;color:var(--accent-ink);}
.wd-example{font-size:13px;color:var(--muted);line-height:1.5;}

@media (max-width:640px){
  .wd-tile{width:34px;height:34px;font-size:16px;border-radius:6px;}
  .wd-row{gap:5px;}
  .wd-board{gap:5px;}
  .wd-key{width:23px;height:30px;font-size:10.5px;}
  .wd-kb-row{gap:4px;}
  .wd-input{width:170px;font-size:14px;}
  .wd-hint{font-size:12.5px;padding:7px 12px;}
}
@media (max-width:380px){
  .wd-tile{width:27px;height:27px;font-size:13px;border-radius:5px;}
  .wd-key{width:19px;height:26px;font-size:9px;}
}

/* ---------- HARF ALAYIM — BAŞLANGIÇ EKRANI ---------- */
.ha-eyebrow{background:var(--red-soft);color:var(--red);}
.ha-rule-num{font-family:var(--font-mono);font-size:10px;letter-spacing:-.02em;}
.ha-preview-timer{
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent-ink);
  background:var(--amber-soft);border-radius:999px;padding:6px 13px;font-variant-numeric:tabular-nums;
}
.ha-preview-box{
  background:var(--bg);border:1px solid var(--card-line);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.ha-preview-meta{font-size:12.5px;color:var(--muted);}
.ha-preview-clue{
  display:inline-flex;align-items:center;gap:10px;background:var(--amber-soft);border-radius:999px;
  padding:9px 18px;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);
}
.ha-preview-clue-label{font-family:var(--font-body);font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);}
.ha-preview-points{font-size:12px;color:var(--muted);}
.ha-preview-slots{display:flex;gap:8px;}
.ha-preview-slot{
  width:38px;height:44px;border-radius:8px;display:grid;place-items:center;
  background:var(--card);border:1.5px solid var(--card-line);
  font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);
}
.ha-preview-slot-open{background:var(--amber-soft);border-color:var(--accent);}
.ha-preview-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.ha-preview-input{
  background:var(--card);border:1.5px solid var(--card-line);border-radius:10px;padding:10px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--pp-gray-ink);
}
.ha-preview-btn{
  border-radius:10px;padding:10px 16px;font-size:12.5px;font-weight:700;
  background:var(--card);border:1.5px solid var(--card-line);color:var(--ink);
}
.ha-preview-btn-primary{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff9ee;}

/* ---------- HARF ALAYIM ---------- */
.ha-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 30px;}
.ha-start{max-width:480px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
.ha-legend{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:700;}

.ha-info{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:13px;font-weight:700;color:var(--muted);align-items:center;}
.ha-info strong{color:var(--ink);}
.ha-timer{font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--accent-ink);background:var(--accent-soft);padding:3px 10px;border-radius:99px;font-variant-numeric:tabular-nums;}

.ha-hint{font-size:14px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:8px 16px;border-radius:99px;text-align:center;max-width:520px;}
.ha-possible{font-size:12.5px;color:var(--muted);font-weight:700;}
.ha-possible strong{color:var(--green);font-family:var(--font-mono);}

.ha-boxes{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:640px;}
.ha-box{
  width:38px;height:44px;border-radius:8px;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:18px;
  background:var(--card);color:var(--ink);
}
.ha-box.ha-filled{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);}

/* Wordle'daki gibi efektler: harf alınca kutu "pop" eder, soru bitince
   kalan kutular soldan sağa kısa gecikmeli "reveal" ile açılır, yanlış
   cevapta kutular sallanır, süre azalınca sayaç yanıp söner. */
@keyframes ha-pop-anim{
  0%{transform:scale(.94);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}
.ha-box.ha-pop{animation:ha-pop-anim .2s ease;}
.ha-possible-value{display:inline-block;animation:ha-pop-anim .22s ease;}

@keyframes ha-reveal-anim{
  0%{transform:scale(.8) translateY(6px);opacity:0;}
  60%{transform:scale(1.08) translateY(-2px);opacity:1;}
  100%{transform:scale(1) translateY(0);}
}
.ha-box.ha-reveal{animation:ha-reveal-anim .32s ease both;}

@keyframes ha-shake-anim{
  0%, 100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.ha-boxes.ha-shake{animation:ha-shake-anim .35s ease;}

@keyframes ha-banner-in-anim{
  0%{transform:scale(.92) translateY(4px);opacity:0;}
  100%{transform:scale(1) translateY(0);opacity:1;}
}
.ha-banner.ha-banner-in{animation:ha-banner-in-anim .28s ease both;}

@keyframes ha-timer-warn-anim{
  0%, 100%{opacity:1;}
  50%{opacity:.45;}
}
.ha-timer.ha-timer-warn{background:var(--red-soft);color:var(--red);animation:ha-timer-warn-anim 1s ease-in-out infinite;}

.ha-input.ha-input-pop{animation:ha-pop-anim .16s ease;}

@media (prefers-reduced-motion: reduce){
  .ha-box.ha-pop, .ha-box.ha-reveal, .ha-boxes.ha-shake, .ha-banner.ha-banner-in,
  .ha-timer.ha-timer-warn, .ha-possible-value, .ha-input.ha-input-pop{animation:none;}
}

.ha-banner{font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:10px;text-align:center;max-width:520px;}
.ha-banner strong{font-family:var(--font-display);}
.ha-banner-correct{background:var(--green-soft);color:var(--green);}
.ha-banner-fail{background:var(--red-soft);color:var(--red);}

.ha-input-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.ha-input{
  border:1.5px solid var(--border);border-radius:9px;padding:9px 14px;
  font-size:16px;font-family:var(--font-mono);letter-spacing:.06em;
  background:var(--bg);color:var(--ink);text-align:center;text-transform:uppercase;
  width:220px;max-width:60vw;
}
.ha-input:focus{outline:none;border-color:var(--accent);}
.ha-error{color:var(--red);font-size:12.5px;font-weight:700;min-height:16px;text-align:center;}

.ha-result{max-width:600px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.ha-total-score{font-family:var(--font-display);font-size:38px;font-weight:800;color:var(--accent-ink);}
.ha-total-score span{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.05em;margin-left:4px;}
.ha-table-wrap{width:100%;overflow-x:auto;}
.ha-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.ha-table th, .ha-table td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--border);}
.ha-table th{color:var(--muted);font-weight:800;text-transform:uppercase;font-size:10.5px;letter-spacing:.02em;}
.ha-table td:nth-child(2){font-family:var(--font-display);font-weight:800;}
.ha-points-cell{font-family:var(--font-mono);font-weight:800;color:var(--accent-ink);}

@media (max-width:640px){
  .ha-box{width:30px;height:36px;font-size:14px;border-radius:6px;}
  .ha-hint{font-size:12.5px;padding:7px 12px;}
  .ha-input{width:170px;font-size:14px;}
  .ha-table{font-size:11px;}
}

/* ---------- KİM KELİME ÖĞRENMEK İSTER (Kim Milyoner Olmak İster stilinde) ---------- */
/* ---------- TETRİS / DÖRT KÖŞE / KELİME AVI / LABİRENT — BAŞLANGIÇ EKRANLARI ----------
   Hepsi ortak düzeni (am-start-grid + am-info-card + am-preview-card) kullanır;
   aşağıdakiler yalnızca her oyuna özgü önizleme kutusunun görselleridir. */

/* -- Kelime Tetris -- */
.tt-eyebrow{background:#e2edf5;color:#2f5d7d;}
.tt-rule-icon-brick{background:#e2edf5;color:#2f5d7d;}
.tt-preview-pill{font-size:12px;font-weight:700;color:#2f5d7d;background:#e2edf5;border-radius:999px;padding:6px 13px;}
.tt-preview-field{
  position:relative;height:170px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--bg),#efe6d0);border:1px solid var(--card-line);
}
.tt-preview-block{
  position:absolute;padding:7px 12px;border-radius:8px;font-family:var(--font-mono);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#2f5d7d;
  background:var(--card);border:1.5px solid #c3d6e4;box-shadow:0 4px 10px -6px rgba(42,33,26,.5);
}
.tt-preview-block-hot{background:#3E6D8E;border-color:#3E6D8E;color:#f4fbff;}
.tt-preview-penalty{
  position:absolute;left:0;right:0;bottom:0;height:22px;
  background:repeating-linear-gradient(90deg,#d9c9a5 0 22px,#cbb98f 22px 24px);
  border-top:2px solid var(--accent-dark);
}
.tt-preview-clue{
  text-align:center;background:var(--bg);border:1px solid var(--card-line);border-radius:12px;
  padding:11px;font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);
}
.am-start-cta.tt-start-cta{background:#3E6D8E;}
.am-start-cta.tt-start-cta:hover{background:#335974;}

/* -- Dört Köşe -- */
.dk-eyebrow{background:var(--amber-soft);color:var(--accent-dark);}
.dk-preview-pill{font-size:12px;font-weight:700;color:var(--red);background:var(--red-soft);border-radius:999px;padding:6px 13px;}
.dk-preview-arena{
  position:relative;height:210px;border-radius:16px;background:var(--bg);
  border:1px solid var(--card-line);padding:12px;
}
.dk-preview-corner{
  position:absolute;padding:7px 11px;border-radius:9px;background:var(--card);
  border:1.5px solid var(--card-line);font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--ink);
}
.dk-preview-tl{left:12px;top:12px;}
.dk-preview-tr{right:12px;top:12px;}
.dk-preview-bl{left:12px;bottom:30px;}
.dk-preview-br{right:12px;bottom:30px;}
.dk-preview-corner-hot{background:#B0793C;border-color:#B0793C;color:#fff9ee;box-shadow:0 6px 16px -8px rgba(176,121,60,.9);}
.dk-preview-center{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.dk-preview-clue{
  background:var(--amber-soft);border-radius:999px;padding:7px 16px;
  font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink);
}
.dk-preview-runner{font-size:20px;}
.dk-preview-timer{
  position:absolute;left:12px;right:12px;bottom:12px;height:6px;border-radius:99px;background:var(--card-line);overflow:hidden;
}
.dk-preview-timer span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-dark));}
.am-start-cta.dk-start-cta{background:#B0793C;}
.am-start-cta.dk-start-cta:hover{background:#96652f;}

/* -- Kelime Avı -- */
.ka-eyebrow{background:var(--green-soft);color:var(--green);}
.ka-preview-pill{font-size:12px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:999px;padding:6px 13px;}
.ka-preview-box{
  background:var(--bg);border:1px solid var(--card-line);border-radius:16px;padding:18px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.ka-preview-grid{display:grid;grid-template-columns:repeat(6,30px);gap:4px;}
.ka-preview-cell{
  width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--card-line);
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--muted);
}
.ka-preview-cell-found{background:var(--green);border-color:var(--green);color:#fff9ee;}
.ka-preview-targets{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.ka-preview-target{
  background:var(--card);border:1.5px solid var(--card-line);border-radius:999px;
  padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--muted);
}
.ka-preview-target-done{background:var(--green-soft);border-color:var(--green);color:var(--green);text-decoration:line-through;}
.am-start-cta.ka-start-cta{background:#4E7A52;}
.am-start-cta.ka-start-cta:hover{background:#416644;}

/* -- Kelime Labirenti -- */
.lb-eyebrow{background:#dceceb;color:#2f5b58;}
.lb-rule-icon-block{background:#dceceb;color:#2f5b58;}
.lb-preview-pill{font-size:12px;font-weight:700;color:var(--red);background:var(--red-soft);border-radius:999px;padding:6px 13px;}
.lb-preview-box{
  background:var(--bg);border:1px solid var(--card-line);border-radius:16px;padding:18px;
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
}
.lb-preview-maze{display:grid;grid-template-columns:repeat(4,34px);border:2px solid var(--accent-dark);border-radius:4px;}
.lb-preview-cell{
  width:34px;height:34px;border:2px solid transparent;display:grid;place-items:center;
  background:var(--card);font-size:15px;
}
.lb-preview-side{display:flex;flex-direction:column;gap:10px;min-width:0;}
.lb-preview-clue{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);}
.lb-preview-paths{display:flex;flex-direction:column;gap:6px;}
.lb-preview-path{
  background:var(--card);border:1.5px solid var(--card-line);border-radius:9px;padding:7px 11px;
  font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;
}
.lb-preview-path-hot{background:#3F6E6B;border-color:#3F6E6B;color:#f2fbfa;}
.am-start-cta.lb-start-cta{background:#3F6E6B;}
.am-start-cta.lb-start-cta:hover{background:#345a58;}
@media (max-width:640px){
  .lb-preview-box{grid-template-columns:1fr;justify-items:center;}
  .ka-preview-grid{grid-template-columns:repeat(6,26px);}
  .ka-preview-cell{width:26px;height:26px;font-size:11px;}
}

/* ---------- KİM KELİME ÖĞRENMEK İSTER — BAŞLANGIÇ EKRANI ----------
   Sayfa düzeni diğer oyunlarla aynı (sol bilgi kartı + sağ önizleme kartı),
   ama sağdaki önizleme kutusu oyunun kendi koyu lacivert-altın yarışma
   sahnesini taklit eder. */
.kk-eyebrow{background:#efe6ff;color:#4b2fa8;}
.kk-info-title{font-size:36px;}
.kk-start-note{
  margin:14px 0 0;background:var(--amber-soft);border-radius:12px;padding:12px 14px;
  font-size:12.5px;line-height:1.55;color:var(--accent-ink);
}
.kk-rule-icon-star{background:#f7ebd3;color:#a37a12;}
.kk-preview-pill{font-size:12px;font-weight:700;color:#4b2fa8;background:#efe6ff;border-radius:999px;padding:6px 13px;}
.kk-preview-stage{
  position:relative;overflow:hidden;border-radius:16px;padding:18px 16px 20px;
  background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(122,86,255,.4), transparent 65%),
             linear-gradient(180deg,#160c42,#050318 75%);
  box-shadow:inset 0 0 40px rgba(122,86,255,.18);
  display:flex;flex-direction:column;gap:14px;
}
.kk-preview-jokers{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;}
.kk-preview-joker{
  border:1px solid #4a5bc4;border-radius:999px;padding:5px 11px;
  font-size:10.5px;font-weight:700;color:#e6e1ff;background:rgba(74,91,196,.18);
}
.kk-preview-qbar{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  border:1px solid #31377f;border-radius:12px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(42,21,104,.9),rgba(22,12,66,.9));
}
.kk-preview-qlabel{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffd35c;}
.kk-preview-qword{font-family:var(--font-display);font-size:20px;font-weight:700;color:#f3f0ff;}
.kk-preview-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.kk-preview-opt{
  display:flex;align-items:center;gap:8px;border:1px solid #31377f;border-radius:9px;
  padding:8px 10px;font-size:11px;color:#e6e1ff;
  background:linear-gradient(180deg,rgba(42,21,104,.75),rgba(10,6,34,.75));
}
.kk-preview-opt-letter{
  width:18px;height:18px;min-width:18px;border-radius:999px;display:grid;place-items:center;
  background:#ffd35c;color:#3a2400;font-size:9.5px;font-weight:800;
}
.kk-preview-opt-hot{
  border-color:#ffd35c;background:linear-gradient(180deg,#ff8a1f,#ff5f1f);color:#fff8e6;
}
.kk-preview-opt-hot .kk-preview-opt-letter{background:#3a2400;color:#ffd35c;}
.kk-start-ladder{display:flex;flex-wrap:wrap;gap:6px;}
.kk-start-rung{
  display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--card-line);
  border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg);
}
.kk-start-rung b{font-family:var(--font-mono);font-size:10px;color:var(--pp-gray-ink);}
.kk-start-rung-check{border-color:var(--accent);color:var(--accent-dark);background:var(--amber-soft);}
.kk-start-rung-grand{border-color:#c99b2f;background:linear-gradient(180deg,#ffd35c,#f5a800);color:#3a2400;}
.kk-start-rung-grand b{color:#5c4200;}
.kk-start-rung-locked{opacity:.45;}
.am-start-cta.kk-start-cta{background:linear-gradient(180deg,#2a1568,#160c42);color:#ffd35c;box-shadow:0 10px 26px -14px rgba(42,21,104,.8);}
.am-start-cta.kk-start-cta:hover{background:linear-gradient(180deg,#3a1f8a,#1e1057);}
@media (max-width:640px){
  .kk-info-title{font-size:28px;}
  .kk-preview-options{grid-template-columns:1fr;}
}

.kk-tv{
  --kk-navy-1:#050318; --kk-navy-2:#160c42; --kk-navy-3:#2a1568;
  --kk-line:#4a5bc4; --kk-line-soft:#31377f;
  --kk-gold:#ffd35c; --kk-gold-2:#f5a800; --kk-gold-ink:#3a2400;
  --kk-text:#f3f0ff; --kk-text-dim:#a9a3d6;
  --kk-orange-1:#ff8a1f; --kk-orange-2:#ff5f1f;
  --kk-green:#39d97a; --kk-green-soft:rgba(57,217,122,.18);
  --kk-red:#ff5b5b; --kk-red-soft:rgba(255,91,91,.18);
  position:relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(122,86,255,.35), transparent 65%),
    linear-gradient(180deg, var(--kk-navy-2), var(--kk-navy-1) 70%);
  border-radius:20px;
  padding:26px 18px 30px;
  box-shadow:0 0 0 1px var(--kk-line-soft), inset 0 0 60px rgba(122,86,255,.12), var(--shadow);
  color:var(--kk-text);
  max-width:880px;
  margin:0 auto;
  overflow:hidden;
}
.kk-tv::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:20px;
  background:radial-gradient(circle at 50% 0%, rgba(255,211,92,.10), transparent 45%);
}

/* ---- Giriş ekranı ---- */
.kk-tv-start{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:560px;margin:0 auto;}
.kk-tv-start .kk-tv-emblem{margin-bottom:2px;}
.kk-tv-start .section-title{color:var(--kk-gold);font-family:var(--font-display);text-shadow:0 0 18px rgba(255,211,92,.4);}
.kk-tv-start p{color:var(--kk-text-dim);}
.kk-tv-start p strong{color:var(--kk-text);}
.kk-tv-note{background:rgba(255,211,92,.1);border:1px solid rgba(255,211,92,.35);color:var(--kk-gold);border-radius:10px;padding:9px 14px;font-weight:600;font-size:13px !important;}
.kk-tv-legend{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--kk-text-dim);font-weight:700;margin:2px 0;}
.kk-tv-start .btn-primary{
  background:linear-gradient(180deg, var(--kk-orange-1), var(--kk-orange-2));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 20px rgba(255,95,31,.45);
  color:#fff;
}

/* ---- Amblem (dairesel logo) ---- */
.kk-tv-emblem{display:flex;flex-direction:column;align-items:center;gap:10px;}
.kk-tv-emblem-ring{
  width:92px;height:92px;border-radius:50%;
  background:conic-gradient(from 0deg, var(--kk-gold), var(--kk-line), var(--kk-gold-2), var(--kk-line), var(--kk-gold));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px rgba(255,211,92,.35), 0 0 0 3px rgba(255,255,255,.06);
  animation:kk-tv-ring-spin 8s linear infinite;
}
@keyframes kk-tv-ring-spin{to{transform:rotate(360deg);}}
.kk-tv-emblem-core{
  width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 40% 30%, var(--kk-navy-3), var(--kk-navy-1));
  display:flex;align-items:center;justify-content:center;font-size:32px;
  animation:kk-tv-ring-spin 8s linear infinite reverse;
}
.kk-tv-emblem-title{
  font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.06em;
  color:var(--kk-gold);text-transform:uppercase;text-shadow:0 0 14px rgba(255,211,92,.45);line-height:1.5;
}

/* ---- Üst bilgi çubuğu (aktif soru ekranı) ---- */
.kk-tv-topbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:16px;position:relative;}
.kk-tv-info{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--kk-text-dim);text-transform:uppercase;}
.kk-tv-reward-banner{background:var(--kk-green-soft);color:var(--kk-green);font-weight:800;font-size:12.5px;border-radius:99px;padding:6px 14px;border:1px solid rgba(57,217,122,.4);}
.kk-tv-checkpoint-flag{
  text-align:center;font-weight:800;font-size:12.5px;letter-spacing:.02em;border-radius:99px;
  padding:7px 16px;margin:0 auto 14px;display:table;
  background:rgba(255,211,92,.12);color:var(--kk-gold);border:1px solid rgba(255,211,92,.4);
}
.kk-tv-checkpoint-flag.kk-tv-checkpoint-grand{background:rgba(255,138,31,.16);color:var(--kk-orange-1);border-color:rgba(255,138,31,.5);}

/* ---- Oyun gövdesi: soru alanı + merdiven ---- */
.kk-tv-body{display:flex;gap:22px;align-items:flex-start;position:relative;}
.kk-tv-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px;}

.kk-tv-qbar{width:100%;max-width:600px;position:relative;}
.kk-tv-qbar-inner{
  clip-path:polygon(1.5% 50%, 5% 0%, 95% 0%, 98.5% 50%, 95% 100%, 5% 100%);
  background:linear-gradient(180deg, #1c1052, #100933);
  border:1px solid var(--kk-line);
  padding:16px 34px;text-align:center;
  font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.5;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.kk-tv-qlabel{display:block;font-family:var(--font-body);font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--kk-gold);text-transform:uppercase;margin-bottom:6px;}
.kk-tv-qsub{display:block;font-family:var(--font-body);font-size:13px;font-weight:500;font-style:italic;color:var(--kk-text-dim);margin-top:8px;}

.kk-tv-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:600px;}
.kk-tv-opt{
  clip-path:polygon(2% 50%, 7% 0%, 93% 0%, 98% 50%, 93% 100%, 7% 100%);
  background:linear-gradient(180deg, #1a2a6b, #0f1a4a);
  border:1px solid var(--kk-line);
  color:var(--kk-text);
  padding:11px 22px;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  font-family:var(--font-body);font-size:14.5px;font-weight:700;
  cursor:pointer;text-align:left;transition:.15s;
}
.kk-tv-opt:hover:not(:disabled){background:linear-gradient(180deg, #24369a, #142063);}
.kk-tv-opt:disabled{cursor:default;}
.kk-tv-opt-row{display:flex;align-items:center;gap:10px;}
.kk-tv-opt-letter{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(180deg, var(--kk-gold), var(--kk-gold-2));color:var(--kk-gold-ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;
}
.kk-tv-opt-text{flex:1;}
.kk-tv-opt.kk-tv-correct{background:linear-gradient(180deg, #1f8a4c, #0f5c30) !important;border-color:var(--kk-green);}
.kk-tv-opt.kk-tv-correct .kk-tv-opt-letter{background:var(--kk-green);color:#06210f;}
.kk-tv-opt.kk-tv-wrong{background:linear-gradient(180deg, #9c2f2f, #6b1c1c) !important;border-color:var(--kk-red);}
.kk-tv-opt.kk-tv-wrong .kk-tv-opt-letter{background:var(--kk-red);color:#2b0707;}
.kk-tv-opt.kk-tv-opt-removed{
  background:rgba(255,255,255,.03) !important;border:1px dashed var(--kk-line-soft);
  color:var(--kk-text-dim);opacity:.45;cursor:default;
}
.kk-tv-opt.kk-tv-opt-removed .kk-tv-opt-letter{background:transparent;border:1px solid var(--kk-line-soft);color:var(--kk-text-dim);}

/* Seyirciye Sor joker'i: orijinal Milyoner ekranındaki gibi dikey çubuk
   grafik — üstte yüzde, ortada gümüş metalik çubuk, altta harf, en altta
   kartın alt kenarına taşan yuvarlak "seyirci" rozeti. */
.kk-tv-audience-panel{
  width:100%;max-width:340px;margin:6px auto 26px;position:relative;
  background:linear-gradient(180deg, #16224f, #0c1638);
  border:2px solid #2f4a9e;border-radius:16px;
  padding:18px 20px 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 0 30px rgba(80,110,220,.12);
}
.kk-tv-audience-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;width:100%;height:120px;}
.kk-tv-audience-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%;gap:6px;}
.kk-tv-audience-pct{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--kk-text);min-height:19px;}
.kk-tv-audience-bar-track{width:32px;flex:1;display:flex;align-items:flex-end;}
.kk-tv-audience-bar{
  width:100%;border-radius:4px 4px 0 0;min-height:2px;
  background:linear-gradient(90deg, #6b7480, #e4e9ee 42%, #aeb6bf 58%, #4d545e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  transition:height .7s cubic-bezier(.2,.8,.2,1);
}
.kk-tv-audience-letter{
  font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--kk-text);
  border-top:2px solid rgba(255,255,255,.3);width:100%;text-align:center;padding-top:6px;
}
.kk-tv-audience-icon{
  position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(180deg, #1c2c60, #101a40);border:2px solid #2f4a9e;
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#aac0ff;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}

/* ---- Joker çubuğu ---- */
.kk-tv-jokers{display:flex;gap:10px;justify-content:center;margin-bottom:14px;}
.kk-tv-joker{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(180deg, #241259, #160c42);
  border:1px solid var(--kk-line);border-radius:99px;
  color:var(--kk-text);padding:7px 14px 7px 8px;
  font-family:var(--font-body);font-size:12px;font-weight:700;
  cursor:pointer;transition:.15s;
}
.kk-tv-joker-icon{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(180deg, var(--kk-gold), var(--kk-gold-2));color:var(--kk-gold-ink);
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.kk-tv-joker:hover:not(:disabled){background:linear-gradient(180deg, #322070, #1d1152);border-color:var(--kk-gold);}
.kk-tv-joker:disabled{opacity:.35;cursor:default;}
.kk-tv-joker:disabled .kk-tv-joker-icon{filter:grayscale(1);}

/* ---- Telefon joker paneli (arkadaş seçimi / cevap) ---- */
.kk-tv-phone-panel{
  width:100%;max-width:600px;background:rgba(255,255,255,.05);border:1px solid var(--kk-line-soft);
  border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:10px;
}
.kk-tv-phone-title{font-size:12.5px;font-weight:800;color:var(--kk-gold);letter-spacing:.03em;}
.kk-tv-phone-friends{display:flex;flex-direction:column;gap:8px;}
.kk-tv-phone-friend{
  background:linear-gradient(180deg, #1a2a6b, #0f1a4a);border:1px solid var(--kk-line);border-radius:10px;
  color:var(--kk-text);padding:9px 14px;text-align:left;cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;gap:2px;font-family:var(--font-body);
}
.kk-tv-phone-friend:hover{background:linear-gradient(180deg, #24369a, #142063);}
.kk-tv-phone-friend strong{font-size:13.5px;}
.kk-tv-phone-friend span{font-size:11.5px;color:var(--kk-text-dim);}
.kk-tv-phone-reveal{background:rgba(255,211,92,.08);border-color:rgba(255,211,92,.35);}
.kk-tv-phone-quote{font-size:14px;font-style:italic;color:var(--kk-text);}
.kk-tv-phone-quote strong{color:var(--kk-gold);font-style:normal;}

/* ---- Sağdaki soru/seviye merdiveni ---- */
.kk-tv-ladder{display:flex;flex-direction:column-reverse;gap:4px;width:180px;flex-shrink:0;}
.kk-tv-step{
  display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--kk-text-dim);
  border:1px solid transparent;transition:.2s;
}
.kk-tv-step-num{width:18px;text-align:right;color:inherit;opacity:.8;}
.kk-tv-step-label{flex:1;letter-spacing:.03em;}
.kk-tv-step-checkpoint{color:var(--kk-gold);font-weight:800;}
.kk-tv-step-checkpoint .kk-tv-step-num{color:var(--kk-gold);}
.kk-tv-step-grand{color:var(--kk-orange-1);font-weight:800;}
.kk-tv-step-done{color:var(--kk-green);opacity:.75;}
.kk-tv-step-current{
  background:linear-gradient(90deg, var(--kk-orange-1), var(--kk-orange-2));
  color:#fff;border-color:rgba(255,255,255,.3);
  box-shadow:0 3px 14px rgba(255,95,31,.4);
  transform:scale(1.04);
}
.kk-tv-step-current .kk-tv-step-num{color:#fff;opacity:1;}
.kk-tv-step-locked{color:var(--kk-text-dim);opacity:.4;border:1px dashed var(--kk-line-soft);}

/* ---- Sonuç ekranı ---- */
.kk-tv-result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px;margin:0 auto;}
.kk-tv-result .section-title{font-family:var(--font-display);font-size:26px;color:var(--kk-gold);text-shadow:0 0 18px rgba(255,211,92,.4);}
.kk-tv-result p{color:var(--kk-text-dim);}
.kk-tv-answer-review{
  background:rgba(255,255,255,.05);border:1px solid var(--kk-line-soft);border-radius:10px;padding:12px 18px;
  font-size:13.5px;display:flex;flex-direction:column;gap:5px;color:var(--kk-text);
}
.kk-tv-correct-answer{color:var(--kk-green);}
.kk-tv-wrong-answer{color:var(--kk-red);}
.kk-tv-final-score{font-size:13px;color:var(--kk-text-dim);font-weight:700;}
.kk-tv-result .btn-primary{
  background:linear-gradient(180deg, var(--kk-orange-1), var(--kk-orange-2));
  border:1px solid rgba(255,255,255,.25);color:#fff;
  box-shadow:0 6px 20px rgba(255,95,31,.45);
}

@media (max-width:760px){
  .kk-tv-body{flex-direction:column-reverse;}
  .kk-tv-ladder{width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;}
  .kk-tv-step{padding:5px 8px;font-size:10.5px;border-radius:99px;}
  .kk-tv-step-num{width:auto;}
}
@media (max-width:520px){
  .kk-tv{padding:20px 12px 24px;border-radius:16px;}
  .kk-tv-emblem-ring{width:76px;height:76px;}
  .kk-tv-emblem-core{width:64px;height:64px;font-size:26px;}
  .kk-tv-options{grid-template-columns:1fr;}
  .kk-tv-opt{clip-path:polygon(0.5% 50%, 3% 0%, 97% 0%, 99.5% 50%, 97% 100%, 3% 100%);padding:10px 18px;}
  .kk-tv-qbar-inner{padding:14px 22px;font-size:15px;clip-path:polygon(0.5% 50%, 3% 0%, 97% 0%, 99.5% 50%, 97% 100%, 3% 100%);}
  .kk-tv-jokers{flex-wrap:wrap;gap:8px;}
  .kk-tv-joker{font-size:11px;padding:6px 12px 6px 6px;}
}

@media (prefers-reduced-motion: reduce){
  .kk-tv-emblem-ring, .kk-tv-emblem-core{animation:none;}
}

/* ---------- KELİME TETRİS ---------- */
.tt-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.tt-result{max-width:480px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.tt-hud{
  display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;
  background:var(--card);border:1px solid var(--card-line);border-radius:99px;
  padding:9px 18px;box-shadow:var(--shadow);font-weight:800;font-size:13px;color:var(--accent-dark);
  font-variant-numeric:tabular-nums;
}
.tt-field{
  position:relative;width:100%;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(180deg,#f6efdc,#efe4c4);
  border:1px solid var(--card-line);box-shadow:inset 0 2px 10px rgba(80,60,20,.12), var(--shadow);
}
.tt-block{
  position:absolute;transform:translateX(-50%);
  min-width:78px;max-width:92%;padding:9px 12px;border-radius:10px;text-align:center;
  background:linear-gradient(180deg,#fffaf0,#f0e2bd);border:1px solid var(--card-line);
  box-shadow:0 4px 10px rgba(80,60,20,.18);
  font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--accent-dark);
  cursor:pointer;transition:background .15s,border-color .15s,transform .1s;
  white-space:nowrap;
}
.tt-block:hover{transform:translateX(-50%) scale(1.04);border-color:var(--accent);}
.tt-block-correct{background:linear-gradient(180deg,#ddf5e6,#b9e8c9)!important;border-color:var(--green)!important;color:var(--green)!important;}
.tt-block-wrong{background:linear-gradient(180deg,#fbdedb,#f2bcb4)!important;border-color:var(--red)!important;color:var(--red)!important;}
.tt-penalty-stack{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column-reverse;}
.tt-penalty-row{height:14px;background:repeating-linear-gradient(135deg,var(--red),var(--red) 8px,#a83a30 8px,#a83a30 16px);border-top:1px solid rgba(255,255,255,.35);}
.tt-meaning-bar{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 20px;text-align:center;
}
.tt-meaning-main{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.4;}
.tt-sentence-bar .tt-meaning-main{font-family:var(--font-body);font-size:16px;font-style:italic;}
.tt-meaning-sub{font-size:12.5px;margin-top:6px;}

@media (max-width:520px){
  .tt-hud{font-size:11.5px;gap:6px 10px;padding:8px 12px;}
  .tt-block{min-width:64px;font-size:12.5px;padding:7px 9px;}
  .tt-meaning-main{font-size:16px;}
  .tt-sentence-bar .tt-meaning-main{font-size:14px;}
}

@media (prefers-reduced-motion: reduce){
  .tt-block{transition:none;}
}

/* ---------- DÖRT KÖŞE ---------- */
.dk-wrap-outer{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.dk-field{
  position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;
  border-radius:var(--radius);background:linear-gradient(160deg,#f6efdc,#efe4c4);
  border:1px solid var(--card-line);box-shadow:inset 0 2px 10px rgba(80,60,20,.12), var(--shadow);
}
.dk-corner{
  position:absolute;width:38%;max-width:150px;padding:10px 8px;border-radius:10px;text-align:center;
  background:linear-gradient(180deg,#fffaf0,#f0e2bd);border:1px solid var(--card-line);
  box-shadow:0 4px 10px rgba(80,60,20,.18);
  font-family:var(--font-mono);font-weight:700;font-size:12.5px;color:var(--accent-dark);
  cursor:pointer;transition:background .15s,border-color .15s,transform .1s;z-index:3;
}
.dk-corner:hover{transform:scale(1.05);border-color:var(--accent);}
.dk-corner-tl{top:4%;left:4%;}
.dk-corner-tr{top:4%;right:4%;}
.dk-corner-bl{bottom:4%;left:4%;}
.dk-corner-br{bottom:4%;right:4%;}
.dk-corner-correct{background:linear-gradient(180deg,#ddf5e6,#b9e8c9)!important;border-color:var(--green)!important;color:var(--green)!important;}
.dk-corner-wrong{background:linear-gradient(180deg,#fbdedb,#f2bcb4)!important;border-color:var(--red)!important;color:var(--red)!important;}
.dk-player{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:28px;z-index:5;pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.dk-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62%;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2;text-align:center;
}
.dk-timer{width:74px;height:6px;background:rgba(80,60,20,.15);border-radius:99px;overflow:hidden;}
.dk-timer-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--red));transition:width .1s linear;}
.dk-timer-num{font-family:var(--font-mono);font-weight:800;font-size:13px;color:var(--accent-dark);}
.dk-question{background:var(--card);border:1px solid var(--card-line);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);}
.dk-question-main{font-family:var(--font-display);font-weight:700;font-size:14.5px;line-height:1.35;}
.dk-question-sentence .dk-question-main{font-family:var(--font-body);font-style:italic;font-size:13px;}
.dk-question-sub{font-size:11px;margin-top:4px;}

@media (max-width:520px){
  .dk-corner{font-size:11px;padding:8px 6px;}
  .dk-player{font-size:22px;}
  .dk-question-main{font-size:13px;}
  .dk-question-sentence .dk-question-main{font-size:12px;}
}

@media (prefers-reduced-motion: reduce){
  .dk-player{transition:none!important;}
}

/* ---------- OYUN İSTATİSTİKLERİ ---------- */
.game-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.game-stat-card{display:flex;flex-direction:column;gap:12px;}
.game-stat-head{display:flex;align-items:center;gap:10px;}
.game-stat-icon{font-size:24px;line-height:1;}
.game-stat-head h3{margin:0;font-family:var(--font-display);font-size:16px;font-weight:700;}
.game-stat-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.game-stat-metric{background:var(--bg2, rgba(184,134,58,.07));border-radius:10px;padding:10px 8px;text-align:center;}
.game-stat-metric .num{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--accent-dark);font-variant-numeric:tabular-nums;}
.game-stat-metric .lbl{font-size:10.5px;color:var(--muted);font-weight:700;margin-top:2px;letter-spacing:.03em;}
.game-stat-empty p{margin:0;font-size:13px;}

/* ---------- KELİME AVI ---------- */
.ka-wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.ka-timer{width:100%;height:8px;background:rgba(80,60,20,.12);border-radius:99px;overflow:hidden;}
.ka-timer-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--red));transition:width 1s linear;}
.ka-timer-num{text-align:center;font-family:var(--font-mono);font-weight:800;font-size:13px;color:var(--accent-dark);}
.ka-body{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;justify-content:center;}
.ka-grid{
  display:grid;gap:2px;background:var(--card-line);border:1px solid var(--card-line);border-radius:10px;
  padding:4px;box-shadow:var(--shadow);width:min(100%,420px);aspect-ratio:1/1;touch-action:none;user-select:none;
}
.ka-cell{
  background:var(--card);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;border-radius:3px;cursor:pointer;
  color:var(--accent-dark);font-size:clamp(9px,2.6vw,15px);
}
.ka-cell-selected{background:linear-gradient(180deg,#ffe9b0,#f3cf76);}
.ka-cell-found{background:linear-gradient(180deg,#ddf5e6,#b9e8c9);color:var(--green);}
.ka-cell-wrong{background:linear-gradient(180deg,#fbdedb,#f2bcb4);color:var(--red);}
.ka-cell-reveal{background:linear-gradient(180deg,#ffe0c2,#f5b984);color:var(--orange, #a3541f);}
.ka-cell-result{cursor:default;}
.ka-targets{flex:1;min-width:180px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;}
.ka-targets-title{font-family:var(--font-display);font-weight:700;font-size:14px;margin-bottom:8px;}
.ka-legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:10px;flex-wrap:wrap;}
.ka-legend-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;}
.ka-legend-found{background:linear-gradient(180deg,#ddf5e6,#b9e8c9);border:1px solid var(--green);}
.ka-legend-missed{background:linear-gradient(180deg,#ffe0c2,#f5b984);border:1px solid var(--orange, #a3541f);}
.ka-target-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.ka-target-list li{font-size:13.5px;font-weight:600;color:var(--ink,#3a2e14);padding:5px 9px;border-radius:8px;background:rgba(184,134,58,.07);}
.ka-target-list li.ka-target-found{color:var(--green);text-decoration:line-through;background:rgba(47,143,91,.1);}
.ka-target-list li.ka-target-missed{color:var(--orange, #a3541f);background:rgba(163,84,31,.08);}
.ka-target-word{font-weight:800;letter-spacing:.02em;}

@media (max-width:560px){
  .ka-body{flex-direction:column;align-items:stretch;}
  .ka-grid{width:100%;max-width:100%;margin:0 auto;}
}

/* ---------- ADAM ASMACA — BAŞLANGIÇ EKRANI ---------- */
.am-start-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch;}
.am-info-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:24px;padding:40px 40px 34px;
  box-shadow:0 18px 40px -26px rgba(42,33,26,.35);
}
.am-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);background:var(--amber-soft);border-radius:999px;padding:7px 14px;
}
.am-info-title{font-family:var(--font-display);font-size:42px;line-height:1.06;font-weight:600;margin:20px 0 0;letter-spacing:-.01em;text-wrap:balance;}
.am-info-desc{font-family:var(--font-display);font-size:18px;line-height:1.5;color:var(--muted);margin:14px 0 0;max-width:32ch;}
.am-rule-list{display:grid;margin:28px 0 0;border-top:1px solid var(--card-line);}
.am-rule{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--card-line);}
.am-rule-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:800;}
.am-rule-icon-x{background:var(--red-soft);color:var(--red);}
.am-rule-icon-check{background:var(--green-soft);color:var(--green);}
.am-rule-icon-mult{background:var(--amber-soft);color:var(--amber);}
.am-rule-icon-info{background:var(--border);color:var(--muted);}
.am-rule-text{font-size:14.5px;line-height:1.55;color:var(--ink);}

.am-preview-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:24px;padding:32px 32px 28px;
  display:flex;flex-direction:column;gap:22px;box-shadow:0 18px 40px -26px rgba(42,33,26,.35);
}
.am-preview-head{display:flex;align-items:center;justify-content:space-between;}
.am-preview-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.am-preview-dots{display:flex;gap:6px;}
.am-preview-dots span{width:9px;height:9px;border-radius:999px;background:var(--accent);display:block;}
.am-preview-dots .am-preview-dot-off{background:transparent;border:1px solid var(--border);}
.am-preview-box{background:var(--bg);border:1px solid var(--card-line);border-radius:16px;padding:22px 24px;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:center;}
.am-preview-gallows{position:relative;width:64px;height:88px;color:var(--accent-dark);}
.am-preview-gallows span{position:absolute;display:block;border-radius:2px;}
.am-pg-base{left:2px;bottom:0;width:38px;height:4px;background:var(--accent-dark);}
.am-pg-pole{left:14px;bottom:0;width:4px;height:84px;background:var(--accent-dark);}
.am-pg-beam{left:14px;top:2px;width:34px;height:4px;background:var(--accent-dark);}
.am-pg-brace{left:44px;top:2px;width:4px;height:12px;background:var(--accent-dark);}
.am-pg-head{left:38px;top:14px;width:16px;height:16px;border-radius:999px;border:3px solid var(--ink);background:transparent;}
.am-pg-body{left:44px;top:30px;width:4px;height:24px;background:var(--ink);}
.am-preview-word{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink);}
.am-preview-slots{display:flex;gap:6px;margin-top:10px;}
.am-preview-slot{width:30px;height:38px;display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--ink);background:var(--amber-soft);border-bottom:3px solid var(--accent-dark);border-radius:5px 5px 0 0;}
.am-preview-slot-empty{background:transparent;border-bottom:3px solid var(--card-line);}
.am-preview-keys{display:flex;gap:6px;flex-wrap:wrap;}
.am-preview-key{width:30px;height:30px;border-radius:7px;background:var(--card);border:1px solid var(--card-line);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink);}
.am-preview-key-used{background:var(--border);color:var(--muted);}
.am-preview-key-hit{background:var(--green-soft);border-color:var(--green);color:var(--green);}
.am-divider{height:1px;background:var(--card-line);}
.am-level-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.am-start-cta{
  margin-top:auto;width:100%;background:var(--ink);color:var(--card);border:none;border-radius:14px;
  padding:16px 22px;font-family:var(--font-body);font-weight:700;font-size:15.5px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;
}
.am-start-cta:hover{background:var(--accent-dark);transform:translateY(-1px);}
@media (max-width:900px){
  .am-start-grid{grid-template-columns:1fr;}
  .am-info-card,.am-preview-card{padding:26px 24px 24px;}
  .am-info-title{font-size:32px;}
}

/* ---------- ADAM ASMACA ---------- */
.am-wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.am-body{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px;}
.am-hangman{flex:0 0 auto;color:var(--accent-dark);}
.am-hangman-svg{width:100px;height:120px;display:block;}
.am-main{flex:1 1 220px;min-width:220px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.am-meaning{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink,#3a2e14);}
.am-boxes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.am-letter-box{
  width:32px;height:38px;border-bottom:3px solid var(--accent-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:800;font-size:18px;color:var(--accent-dark);
}
.am-letter-revealed{border-bottom-color:var(--green);color:var(--green);}
.am-round-banner{font-weight:700;font-size:14px;padding:8px 14px;border-radius:10px;}
.am-round-win{background:rgba(47,143,91,.12);color:var(--green);}
.am-round-lose{background:rgba(200,60,50,.12);color:var(--red);}
.am-keyboard{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:520px;margin:0 auto;}
.am-key{
  width:34px;height:38px;border-radius:8px;border:1px solid var(--card-line);background:var(--card);
  font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--ink,#3a2e14);cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .1s ease;
}
.am-key:hover:not(:disabled){transform:translateY(-1px);}
.am-key:disabled{cursor:default;opacity:.55;}
.am-key-correct{background:linear-gradient(180deg,#ddf5e6,#b9e8c9);color:var(--green);border-color:var(--green);}
.am-key-wrong{background:linear-gradient(180deg,#fbdedb,#f2bcb4);color:var(--red);border-color:var(--red);}

@media (max-width:560px){
  .am-body{padding:16px 12px;gap:14px;}
  .am-hangman-svg{width:78px;height:94px;}
  .am-letter-box{width:26px;height:32px;font-size:15px;}
  .am-key{width:28px;height:34px;font-size:12.5px;}
}
@media (prefers-reduced-motion: reduce){
  .am-key{transition:none;}
}

/* ---------- KELİME LABİRENTİ ---------- */
.lb-wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.lb-maze-wrap{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.lb-maze{
  position:relative;display:grid;width:min(100%,340px);aspect-ratio:1/1;
  background:var(--card);border-radius:8px;overflow:hidden;
}
.lb-cell{
  position:relative;box-sizing:border-box;
  border-style:solid;border-width:2.5px;
  background:var(--bg,#faf6ea);transition:background .3s ease;
  display:flex;align-items:center;justify-content:center;font-size:clamp(9px,2.4vw,15px);
}
.lb-cell-visited{background:var(--accent-soft);}
.lb-cell-start{background:var(--green-soft);}
.lb-cell-exit{background:linear-gradient(135deg,#ffe9b0,#f3cf76);}
.lb-cell-peek{background:var(--red-soft);}
.lb-runner{
  position:absolute;transform:translate(-50%,-50%);font-size:20px;z-index:5;
  transition:left .38s ease, top .38s ease;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
  pointer-events:none;
}
.lb-progress-label{font-family:var(--font-mono);font-weight:700;font-size:12.5px;color:var(--accent-dark);}
.lb-reward-banner{background:var(--green-soft);color:var(--green);font-weight:700;font-size:13.5px;text-align:center;padding:9px 14px;border-radius:10px;}
.lb-recovery-banner{background:var(--red-soft);color:var(--red);font-weight:700;font-size:13.5px;text-align:center;padding:9px 14px;border-radius:10px;}
.lb-junction{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;transition:border-color .25s ease;}
.lb-junction-recovery{border-color:var(--red);}
.lb-junction-walk{padding:16px 20px;gap:6px;}
.lb-junction-icon{font-size:26px;}
.lb-question-main{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);}
.lb-question-sentence .lb-question-main{font-family:var(--font-body);font-weight:600;font-size:16.5px;line-height:1.5;}
.lb-question-sub{font-size:12.5px;margin-top:4px;}
.lb-paths{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;}
.lb-path-btn{
  display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:1.5px solid var(--card-line);
  background:var(--accent-soft);font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--accent-ink);
  cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.lb-path-btn:hover:not(:disabled){transform:translateY(-2px);}
.lb-path-btn:disabled{cursor:default;}
.lb-path-arrow{font-size:16px;opacity:.7;}
.lb-path-hint{border-color:var(--accent-dark);box-shadow:0 0 0 3px rgba(184,134,58,.25);}
.lb-path-correct{background:linear-gradient(180deg,#ddf5e6,#b9e8c9);border-color:var(--green);color:var(--green);}
.lb-path-wrong{background:linear-gradient(180deg,#fbdedb,#f2bcb4);border-color:var(--red);color:var(--red);}
.lb-path-correct-reveal{border-color:var(--green);box-shadow:0 0 0 2px rgba(47,143,91,.25);}

@media (max-width:560px){
  .lb-junction{padding:16px 12px;}
  .lb-path-btn{padding:10px 14px;font-size:12.5px;}
  .lb-runner{font-size:16px;}
}
@media (prefers-reduced-motion: reduce){
  .lb-path-btn{transition:none;}
  .lb-runner{transition:none;}
  .lb-cell{transition:none;}
}

/* ---------- ANA SAYFA & ÜST MENÜ (rk-*) ---------- */
/* Genel amaçlı "kaldırma" hover efektleri — hem ana sayfada hem tek tek
   oyun ekranlarında (kartlar, düğmeler) yeniden kullanılır. */
.scp4{transition:transform .15s ease;}
.scp4:hover{transform:translateY(-2px);}
.scp6{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.scp6:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(42,33,26,.32);border-color:#d8c4a4;}
.rk-header{max-width:1120px;margin:0 auto;padding:0;}
.rk-header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;}
.rk-brand{display:flex;align-items:center;gap:12px;}
.rk-logo-bars{display:flex;gap:3px;}
.rk-logo-bars span{width:13px;height:26px;border-radius:4px;display:block;}
.rk-logo-bars span:nth-child(1){background:#C8873B;}
.rk-logo-bars span:nth-child(2){background:#B4533A;}
.rk-logo-bars span:nth-child(3){background:#4E7A52;}
.rk-brand-text{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);}
.user-box{display:flex;align-items:center;gap:16px;}
.rk-user-chip{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);}
.rk-user-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:11px;font-weight:800;}
.rk-btn-dark{border:1px solid var(--ink);background:var(--ink);color:#fbf6ec;font-family:var(--font-body);font-size:13px;font-weight:700;padding:10px 18px;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .15s;}
.rk-btn-dark:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(42,33,26,.22);}
.rk-btn-outline{border:1.5px solid var(--border);background:transparent;color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer;}
.rk-btn-outline:hover{border-color:var(--accent);color:var(--accent-ink);}
.rk-header-divider{max-width:1120px;margin:0 auto;height:1px;background:linear-gradient(90deg,rgba(42,33,26,.14),rgba(42,33,26,0));}
.rk-nav{max-width:1120px;margin:0 auto;padding:16px 0 18px;display:flex;align-items:center;gap:10px;position:relative;z-index:40;flex-wrap:wrap;}
.rk-menu-wrap{position:relative;}
.rk-menu-btn{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:12px 16px;font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--card-line);min-width:230px;justify-content:space-between;}
.rk-menu-btn:hover{border-color:var(--accent);}
.rk-menu-btn-label{display:flex;align-items:center;gap:10px;}
.rk-menu-dot{width:9px;height:9px;border-radius:2px;background:var(--accent);display:inline-block;}
.rk-menu-caret{font-size:11px;color:var(--muted);transition:transform .15s;}
.rk-menu-btn.open .rk-menu-caret{transform:rotate(180deg);}
.rk-menu-panel{position:absolute;top:56px;left:0;width:min(560px,90vw);background:var(--card);border:1.5px solid var(--border);border-radius:18px;box-shadow:0 26px 60px -18px rgba(42,33,26,.34);padding:14px;max-height:70vh;overflow:auto;z-index:50;}
.rk-menu-group{margin-bottom:6px;}
.rk-menu-group-title{padding:8px 8px 4px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.rk-menu-group-items{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;}
.rk-menu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:11px;padding:9px 10px;cursor:pointer;font-family:var(--font-body);transition:background .12s,border-color .12s;}
.rk-menu-item:hover{background:var(--accent-soft);border-color:var(--card-line);}
.rk-menu-item-mark{width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;font-family:var(--font-display);font-size:15px;font-weight:600;color:#fff9ee;}
.rk-menu-item-name{font-size:13.5px;font-weight:700;color:var(--ink);}
.rk-nav-link{background:transparent;border:1.5px solid transparent;border-radius:14px;padding:12px 16px;font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;}
.rk-nav-link:hover{background:rgba(184,134,58,.08);}
.rk-nav-link.active{background:var(--card);border-color:var(--card-line);color:var(--ink);}
.rk-streak-badge{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--accent-soft);border:1.5px solid #f0dcae;border-radius:999px;padding:9px 16px 9px 12px;}
.rk-flame{font-size:16px;animation:rkFlame 2.4s ease-in-out infinite;display:inline-block;}
@keyframes rkFlame{0%,100%{transform:scale(1) rotate(0deg);}50%{transform:scale(1.14) rotate(-4deg);}}
.rk-streak-badge span:last-child{font-size:13.5px;font-weight:800;color:var(--accent-ink);}

/* ---------- Ana sayfa: hero + ilerleme + filtre ---------- */
.home-hero-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch;}
.home-hero-card{border-radius:26px;padding:34px 36px;color:#fcf4e5;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.home-hero-card::before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(240,201,122,.14);}
.home-hero-card::after{content:"";position:absolute;right:24px;bottom:-60px;width:140px;height:140px;border-radius:50%;background:rgba(180,83,58,.24);}
.home-hero-eyebrow{position:relative;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#e0bc85;}
.home-hero-title{position:relative;font-family:var(--font-display);font-size:38px;line-height:1.08;font-weight:600;margin:12px 0 10px;letter-spacing:-.02em;}
.home-hero-desc{position:relative;font-size:15px;line-height:1.55;color:#e5d6be;max-width:42ch;margin:0 0 22px;}
.home-hero-actions{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.btn-hero-primary{background:#f0c97a;color:#2e2419;border:none;border-radius:999px;padding:13px 24px;font-family:var(--font-body);font-size:14.5px;font-weight:800;cursor:pointer;transition:transform .15s;}
.btn-hero-primary:hover{transform:translateY(-2px);}
.btn-hero-secondary{background:rgba(252,244,229,.1);color:#fcf4e5;border:1.5px solid rgba(252,244,229,.3);border-radius:999px;padding:13px 20px;font-family:var(--font-body);font-size:14.5px;font-weight:700;cursor:pointer;}
.btn-hero-secondary:hover{background:rgba(252,244,229,.2);}
.home-side-col{display:grid;grid-template-rows:auto 1fr;gap:18px;}
.home-progress-card,.home-filter-card{background:var(--card);border:1.5px solid var(--card-line);border-radius:22px;padding:20px 22px;}
.home-card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.home-card-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a89076;}
.home-progress-fraction{font-family:var(--font-display);font-size:14px;color:var(--muted);}
.home-progress-bar{height:10px;border-radius:999px;background:#efe4d0;overflow:hidden;display:flex;}
.home-progress-bar span{display:block;height:100%;}
.home-progress-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.home-progress-num{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--ink);}
.home-progress-lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a89076;margin-top:2px;}
.home-clear-link{background:none;border:none;font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--accent-dark);cursor:pointer;padding:0;}
.home-clear-link:hover{text-decoration:underline;}
.home-filter-count{margin-top:14px;font-size:12.5px;color:var(--muted);}

/* ---------- Ana sayfa: oyun kataloğu ---------- */
.home-games-section{max-width:1120px;margin:38px auto 0;}
.home-games-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap;}
.home-games-head h2{font-family:var(--font-display);font-size:26px;font-weight:600;margin:0;letter-spacing:-.015em;color:var(--ink);}
.home-cat-pills{display:flex;gap:6px;background:var(--accent-soft);padding:4px;border-radius:999px;flex-wrap:wrap;}
.home-cat-pill{font-family:var(--font-body);font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:999px;border:none;cursor:pointer;background:transparent;color:var(--muted);}
.home-cat-pill.active{background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(42,33,26,.14);}
.home-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.home-game-card{text-align:left;background:var(--card);border:1.5px solid var(--card-line);border-radius:20px;padding:22px;cursor:pointer;font-family:var(--font-body);display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s,border-color .18s;}
.home-game-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(42,33,26,.32);border-color:#d8c4a4;}
.home-game-card-top{display:flex;align-items:center;justify-content:space-between;}
.home-game-avatar{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-family:var(--font-display);font-size:20px;font-weight:600;color:#fff9ee;}
.home-game-tag{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a89076;}
.home-game-name{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.home-game-desc{margin:0;font-size:13.5px;line-height:1.55;color:#7c6a56;flex:1;}
.home-game-cta{margin-top:2px;font-size:13px;font-weight:800;color:var(--accent-dark);}

@media (max-width:640px){
  .rk-header-row{flex-wrap:wrap;gap:12px;}
  .rk-nav{gap:8px;}
  .rk-menu-btn{min-width:0;flex:1 1 auto;}
  .rk-menu-panel{width:min(360px,92vw);}
  .rk-menu-group-items{grid-template-columns:1fr;}
  .rk-streak-badge{margin-left:0;order:5;width:100%;justify-content:center;}
  .home-hero-grid{grid-template-columns:1fr;}
  .home-game-grid{grid-template-columns:1fr;}
  .home-hero-title{font-size:30px;}
  .home-games-head{align-items:flex-start;}
}
@media (prefers-reduced-motion: reduce){
  .rk-flame{animation:none;}
  .home-hero-card::before,.home-hero-card::after{display:none;}
}