/* Katla Oyunları — ortak görünüm
   Oyun alanı (canvas) her oyunun kendi rengidir; üstündeki kartlar/düğmeler tek tip açık temadır. */
:root{
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --ink:#1d1d1f; --ink2:#6e6e73; --ink3:#86868b; --blue:#0071e3; --fill:#f5f5f7; --sep:rgba(0,0,0,.08);
  /* oyun içi (HUD) renkleri */
  --bg:#0b0d14; --fg:#f4f1ea; --muted:#9aa0b4; --accent:#ff7a1a; --accent2:#ffd23f;
  --ok:#3ddc84; --bad:#ff4d5e; --cyan:#5ad1ff; --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased}
/* --fk-ad: alttaki reklam şeridi (reklam.js); oyun alanı ve kartlar onun üstünde biter */
canvas.game{position:fixed;inset:0;width:100%;height:calc(100% - var(--fk-ad,0px));display:block}

.hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 0;pointer-events:none;z-index:5}
.hud .grp{display:flex;gap:12px;align-items:flex-start}
.hud .mid{text-align:center;flex:1}
.stat .v{font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .k{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-top:4px}
.stat.r{text-align:right}
.iconbtn{pointer-events:auto;width:40px;height:40px;border-radius:999px;border:0;
  background:rgba(255,255,255,.86);color:var(--ink);font-size:18px;display:grid;place-items:center;cursor:pointer;padding:0;text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 6px 20px rgba(0,0,0,.1)}
.hint{position:fixed;left:16px;right:16px;top:calc(env(safe-area-inset-top) + 74px);text-align:center;
  font-size:14px;font-weight:600;color:#fff;opacity:.95;pointer-events:none;z-index:4;
  text-shadow:0 1px 6px rgba(0,0,0,.55);transition:opacity .6s}
.hint.hide{opacity:0}

/* Kartlar (başlangıç / sonuç) */
.overlay{position:fixed;inset:0;bottom:var(--fk-ad,0px);display:none;align-items:center;justify-content:center;
  background:rgba(245,245,247,.55);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);z-index:10;padding:16px}
.overlay.show{display:flex}
.card{background:#fff;color:var(--ink);border-radius:28px;padding:26px 24px 22px;max-width:420px;width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.16);max-height:calc(100dvh - 32px - var(--fk-ad,0px));overflow:auto;touch-action:pan-y;text-align:center}
.card .art{width:84px;height:84px;margin:0 auto 14px;border-radius:20px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.card .art svg{display:block;width:100%;height:100%}
.card h1{font-size:30px;font-weight:700;line-height:1.08;margin:0 0 4px;letter-spacing:-.02em;color:var(--ink)}
.card h1 span{color:inherit}
.card h1 br{display:none}
.card h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.card p{color:var(--ink2);line-height:1.45;margin:10px 0;font-size:15px}
.card .lead{color:var(--ink2);font-size:15px;margin:0 0 14px}
.card ol{text-align:left;color:var(--ink2);line-height:1.45;padding-left:22px;margin:12px 0;font-size:15px}
.card ol li{margin:5px 0}
.card ol b{color:var(--ink);font-weight:600}
.big-emoji{display:none}
.btn{appearance:none;border:0;border-radius:999px;padding:14px 18px;font:inherit;font-weight:600;font-size:17px;
  background:var(--blue);color:#fff;width:100%;cursor:pointer;margin-top:12px;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98);opacity:.9}
.btn.ghost{background:var(--fill);color:var(--blue);border:0;font-weight:600;font-size:16px}
.row{display:flex;gap:10px}
.row .btn{flex:1}
.bigscore{font-size:60px;font-weight:700;line-height:1;margin:10px 0 4px;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sub{color:var(--ink2);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 4px}
.stats div{background:var(--fill);border-radius:14px;padding:10px 6px;text-align:center}
.stats b{display:block;font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.stats span{font-size:10px;color:var(--ink2);letter-spacing:.08em;font-weight:600}
.seg{display:flex;background:var(--fill);border-radius:12px;padding:3px;gap:3px;margin:10px 0}
.seg button{flex:1;appearance:none;border:0;background:transparent;border-radius:9px;padding:9px 6px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
@media (max-height:560px){
  .card{padding:18px 20px 16px}
  .card .art{width:60px;height:60px;margin-bottom:8px;border-radius:15px}
  .card h1{font-size:24px}
  .card ol{margin:6px 0;font-size:14px}
  .bigscore{font-size:46px}
}