/* MİMARLAB Kule Ustası (public/kule.html, public/js/kule.js): giriş, oyun alanı (canvas + yan panel) ve sonuç. lab.css ve quiz.css'in üzerine.
   Aktivite rengi teal (--lab-kule). Oyun alanı sade: yıldızlı mor gece göğünde renkli izometrik katlar; kontrol tek dokunuş. Oyun sırasında üst
   menü yapışkan değildir (lab.css body.is-playing). "Hareketi azalt"ta hareketli süsler kapalıdır (canvas içindeki sarsıntı ve parıltı kule.js'te). */
.qz-act-kule{--c:var(--lab-kule); --ci:var(--lab-kule-ink); --t:var(--lab-kule-tint);}

/* ---------- Giriş ---------- */
.kl-record-height{font-size:clamp(34px, 5vw, 52px); letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}

/* ---------- Oyun ---------- */
.kl-play{padding:16px 0 40px;}
.kl-game{display:grid; grid-template-columns:minmax(0, min(520px, calc((100vh - 150px) * 0.656))) minmax(240px, 300px); justify-content:center; align-items:start; gap:24px;}
@supports (height:100svh){ .kl-game{grid-template-columns:minmax(0, min(520px, calc((100svh - 150px) * 0.656))) minmax(240px, 300px);} }
.kl-stage{
  position:relative; width:100%; aspect-ratio:21 / 32; overflow:hidden; border-radius:26px; background:#2f2d6b;
  box-shadow:0 0 0 3px #1B1A47, 0 10px 0 -2px #1B1A47; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:pointer;
}
.kl-canvas{display:block; width:100%; height:100%;}
.kl-side{display:flex; flex-direction:column; gap:14px; min-width:0;}
.kl-stats{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; padding:16px; border-radius:22px; background:var(--lab-kule-tint);}
.kl-stat{display:flex; flex-direction:column; gap:2px; min-width:0;}
.kl-stat-l{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.kl-stat-v{font-size:26px; line-height:1.1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.kl-stat-floor .kl-stat-v{color:var(--lab-kule-ink); font-size:32px;}
.kl-chips{display:flex; flex-wrap:wrap; gap:8px; min-height:30px;}
.kl-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:100px; background:var(--lab-board-tint); color:var(--lab-board-ink); font-size:13px; font-weight:800;}
.kl-chip[hidden]{display:none;}
.kl-controls-small{display:flex; gap:10px;}
.kl-small{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; font-size:14px;}
.kl-keys{margin:0; font-size:12.5px; color:var(--ink-soft);}
.kl-keys kbd{padding:1px 7px; border-radius:6px; border:1px solid var(--line); background:var(--paper-card); font:inherit; font-weight:800;}
.kl-banner{position:absolute; left:50%; top:30%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; width:84%; padding:14px 18px; border-radius:22px; background:rgba(20, 16, 56, 0.82); color:#fff; text-align:center; pointer-events:none; opacity:0;}
.kl-banner strong{font-size:clamp(24px, 6vw, 34px); letter-spacing:-0.02em; line-height:1.1;}
.kl-banner span{font-size:14px; font-weight:600; color:rgba(255, 255, 255, 0.85);}
.kl-banner.is-on{animation:kl-banner 2.4s ease both;}
.kl-hint{position:absolute; left:50%; bottom:9%; transform:translateX(-50%); padding:10px 20px; border-radius:100px; background:rgba(255, 255, 255, 0.92); color:#2a2766; font-size:15px; font-weight:800; pointer-events:none; opacity:0; transition:opacity .3s ease; white-space:nowrap;}
.kl-hint.is-on{opacity:1; animation:kl-nudge 1.5s ease-in-out infinite;}
/* Ekran okuyucu bildirimleri görünmez; oyun içi duyuru banner'dadır. */
.kl-toast{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); padding:0; opacity:0;}
.kl-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20, 16, 56, 0.6); cursor:default;}
.kl-overlay[hidden]{display:none;}
.kl-overlay-card{display:flex; flex-direction:column; align-items:center; gap:10px; max-width:320px; padding:26px 24px; border-radius:24px; background:var(--paper-card); color:var(--ink); text-align:center; animation:kl-pop-c .25s ease both;}
.kl-overlay-title{font-size:26px; letter-spacing:-0.02em;}
.kl-overlay-card p{margin:0; color:var(--ink-soft); font-size:15px;}
.kl-overlay-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px;}
@keyframes kl-banner{0%{opacity:0; transform:translateX(-50%) scale(.7);} 12%{opacity:1; transform:translateX(-50%) scale(1.04);} 20%{transform:translateX(-50%) scale(1);} 82%{opacity:1;} 100%{opacity:0; transform:translateX(-50%) translateY(-10px) scale(.98);}}
@keyframes kl-pop-c{from{opacity:0; transform:scale(.88);} to{opacity:1; transform:none;}}
@keyframes kl-nudge{0%, 100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-5px);}}

/* ---------- Sonuç ---------- */
.kl-result{padding:36px 0 56px;}
.kl-res-grid{display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:36px; align-items:start;}
.kl-res-snap{margin:0; border-radius:24px; overflow:hidden; box-shadow:0 0 0 3px #1B1A47, 0 8px 0 -2px #1B1A47; background:#2f2d6b;}
.kl-res-snap img{display:block; width:100%; height:auto;}
.kl-res-snap figcaption{padding:8px 12px; background:#1B1A47; color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-align:center;}
.kl-res-title{margin:0 0 20px; font-size:clamp(34px, 5vw, 56px); line-height:var(--lh-display); letter-spacing:-0.03em; font-weight:800;}
.kl-res-stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 20px;}
.kl-res-stat{position:relative; padding:12px 14px; border-radius:18px; background:var(--lab-kule-tint); min-width:0;}
.kl-res-stat dt{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
.kl-res-stat dd{margin:3px 0 0; font-size:22px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.kl-res-stat.is-new{box-shadow:inset 0 0 0 2px var(--lab-board);}
.kl-new{position:absolute; top:-9px; right:8px; padding:2px 8px; border-radius:100px; background:var(--lab-board); color:#3a2a00; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; animation:kl-pop-c .5s ease both;}
.kl-res-points{max-width:520px; margin:0 0 16px; padding:16px 20px; border-radius:22px; background:var(--paper-card); border:1px solid var(--line);}
.kl-res-points ul{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px;}
.kl-res-points li{display:flex; justify-content:space-between; gap:12px; font-size:15px; color:var(--ink-soft);}
.kl-res-points li strong{color:var(--ink); font-variant-numeric:tabular-nums;}
.kl-res-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; border-top:2px solid var(--ink);}
.kl-res-total span{font-size:14px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;}
.kl-res-total strong{font-size:38px; letter-spacing:-0.03em; color:var(--lab-kule-ink); font-variant-numeric:tabular-nums;}
.kl-res-note{margin:0 0 16px; max-width:560px; font-size:15px; line-height:1.55; color:var(--ink-soft);}
.kl-res-stages{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px;}
.kl-stage-pill{padding:5px 13px; border-radius:100px; background:var(--lab-board); color:#3a2a00; font-size:13px; font-weight:800;}
.kl-res-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px;}

/* ---------- Telefon / tablet ---------- */
@media (max-width:980px){ .kl-res-stats{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:860px){
  .kl-play{padding:8px 0 28px;}
  /* Sayılar canvas'ın üstünde, duraklat/bitir altında; oyunun kendisi tüm ekrana dokunuşla oynanır. */
  .kl-game{display:flex; flex-direction:column; align-items:center; gap:10px;}
  .kl-side{display:contents;}
  .kl-stats{order:1; width:100%; max-width:520px; grid-template-columns:repeat(4, minmax(0, 1fr)); padding:10px 12px; gap:6px; border-radius:18px;}
  .kl-stat-l{font-size:9.5px; letter-spacing:.08em;}
  .kl-stat-v{font-size:19px;} .kl-stat-floor .kl-stat-v{font-size:22px;}
  .kl-chips{order:2; min-height:0; width:100%; max-width:520px;}
  .kl-stage{order:3; width:min(100%, calc((100svh - 230px) * 0.656)); min-width:240px; border-radius:20px;}
  .kl-controls{order:4; width:100%; max-width:520px;}
  .kl-keys{display:none;}
  .kl-res-grid{grid-template-columns:minmax(0, 1fr); gap:22px;}
  .kl-res-snap{max-width:260px; margin:0 auto;}
}
@media (max-width:640px){
  .kl-res-actions .btn{flex:1 1 140px;}
}
@media (prefers-reduced-motion:reduce){
  .kl-banner.is-on, .kl-hint.is-on, .kl-overlay-card, .kl-new{animation:none;}
  .kl-banner.is-on{opacity:1;}
}