/* ============ BeyinGYM — dark navy / cream theme ============ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --ink:#1c2233; --muted:#8a8aa4; --faint:#b6b6c8; --line:#c3c3d6; --ok:#2f9e44;
  --cream:#efe9dc; --cream-soft:#f5f1e7; --cream-dim:rgba(232,227,214,.7); --cream-faint:rgba(232,227,214,.55);
  --card:#fff;
}
html,body{height:100%}
body{
  font-family:Sora,system-ui,sans-serif;color:#e8e3d6;
  background:radial-gradient(120% 90% at 50% 18%,#2b3450 0%,#1c2233 55%,#151a28 100%) fixed;
  min-height:100vh;
  overflow-x:hidden;
}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}

/* Keyboard users get a visible focus ring; pointer users don't (":focus-visible"). */
:focus-visible{outline:3px solid #7ea8ff;outline-offset:2px;border-radius:8px}

/* Respect the OS "reduce motion" setting — the site is animation-heavy. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .ld-card:hover{transform:none !important}
}

/* ---- fixed bg fx: grid + glow, sits behind everything ---- */
.app-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.app-bg::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 64px);
}
.app-bg::after{
  content:'';position:absolute;left:50%;bottom:-38%;transform:translateX(-50%);
  width:1500px;height:900px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(120,140,220,.22),transparent);
}

/* ---- global nav (persistent, every screen) ---- */
.ld-nav{
  position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
  /* max(...env...) keeps the nav clear of the iOS notch in landscape */
  padding:24px max(28px,env(safe-area-inset-right)) 24px max(28px,env(safe-area-inset-left));
  gap:12px;flex-wrap:wrap;
}
/* The pill nav is optically centred, not just "space-between"-centred: with a wide
   brand on the left and a narrow avatar on the right, space-between pushed it off
   centre. Giving both flanks an equal flex basis makes the middle land dead centre
   whatever they contain. min-width:0 lets them shrink instead of squeezing the pills. */
.ld-brand{display:flex;align-items:center;gap:11px;cursor:pointer;flex:1 1 0;min-width:0}
.ld-logo{width:32px;height:32px;border-radius:10px;background:#e8e3d6;color:#1c2233;display:grid;place-items:center;font-size:15px;font-weight:800;flex:none}
.ld-word{font-family:'Instrument Serif',serif;font-size:26px;letter-spacing:.5px;color:#e8e3d6}
.ld-pillnav{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:7px;backdrop-filter:blur(10px);flex:none}
.ld-pillnav button{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:16px;color:rgba(232,227,214,.7);cursor:pointer;transition:.15s}
.ld-pillnav button svg{width:22px;height:22px;display:block}
.ld-pillnav button:hover{color:#e8e3d6}
.ld-pillnav button.active{background:#e8e3d6;color:#1c2233}
.ld-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:1 1 0;min-width:0}
.ld-member{font-size:12px;letter-spacing:1px;color:rgba(232,227,214,.55);cursor:pointer}
.ld-member:hover{color:#e8e3d6}
.ld-avatar{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font-size:17px;cursor:pointer;backdrop-filter:blur(10px);transition:.15s}
.ld-avatar:hover{background:rgba(255,255,255,.13)}

main#screen{position:relative;z-index:1;min-height:calc(100vh - 90px)}

/* ============ Hub (landing) ============ */
.ld-hub{position:relative;min-height:calc(100vh - 90px)}
.ld-status{position:relative;z-index:4;text-align:center;padding:0 16px 24px}
.ld-status-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 16px;font-size:11.5px;letter-spacing:1.5px;color:rgba(232,227,214,.7)}
.ld-dot{width:6px;height:6px;border-radius:50%;background:#7ee0a0;flex:none}
.ld-canvas{
  position:absolute;top:56px;left:50%;width:1440px;height:760px;margin-left:-720px;
  transform-origin:top center;z-index:3;
  scale:min(1, calc(100vw / 1500px), calc((100vh - 200px) / 760px));
}
.ld-card{
  position:absolute;width:190px;height:190px;border-radius:38px;background:#efe9dc;
  box-shadow:0 26px 60px rgba(0,0,0,.45);padding:22px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  cursor:pointer;transition:transform .2s ease;border:0;text-align:center;font-family:inherit;
}
.ld-card:hover{transform:translateY(-6px) rotate(0deg) !important}
.ld-card-art{width:84px;height:84px;flex:none}
.ld-card-name{font-size:17px;font-weight:800;color:#1c2233;letter-spacing:.5px}
/* Henüz yayında olmayan oyun: solgun kart + YAKINDA rozeti. Tıklanabilir kalıyor
   (bilgi penceresi açıyor) ama oyuna girmiyor. */
.ld-card-soon{opacity:.62}
.ld-card-soon .ld-card-art{opacity:.75}
.ld-soon-badge{
  position:absolute;top:14px;right:14px;background:#23233c;color:#efe9dc;border-radius:999px;
  padding:4px 10px;font-size:9.5px;font-weight:800;letter-spacing:1px;
}
.ld-headline{position:absolute;left:290px;top:520px;width:860px;text-align:center;z-index:4}
.ld-headline h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:80px;line-height:1.05;letter-spacing:-1px;text-shadow:0 12px 40px rgba(0,0,0,.5);margin:0}
.ld-cta-wrap{position:absolute;left:0;right:0;top:660px;display:flex;align-items:center;justify-content:center;z-index:5}
.ld-cta{display:flex;align-items:center;gap:9px;background:#e8e3d6;color:#1c2233;border-radius:999px;padding:14px 30px;font-size:14px;font-weight:800;cursor:pointer;border:0;font-family:inherit;transition:transform .15s}
.ld-cta:hover{transform:translateY(-2px)}
.ld-cta:disabled{opacity:.6;cursor:default;transform:none}

@media (max-width:760px){
  .ld-hub{min-height:0}
  .ld-canvas{position:static;width:auto;height:auto;margin:20px 0 0;scale:1 !important;padding:0 20px}
  .ld-card{position:static;width:100%;height:auto;min-height:120px;flex-direction:row;align-items:center;gap:16px;transform:none !important;margin-bottom:14px;border-radius:26px}
  .ld-card-art{height:56px;width:56px;flex:none}
  .ld-headline{position:static;width:auto;margin:20px auto;padding:0 16px}
  .ld-cta-wrap{position:static;margin:0 0 40px}
}

/* ============ page shell (game / archive / profile / stats) ============ */
.page{max-width:900px;margin:0 auto;padding:0 20px max(60px,env(safe-area-inset-bottom))}
.page-wide{max-width:1200px}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-title{font-family:'Instrument Serif',serif;font-size:32px;color:#e8e3d6;display:flex;align-items:center;gap:10px}
.gh-back{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e8e3d6;display:grid;place-items:center;font-size:16px;cursor:pointer;transition:.15s;flex:none}
.gh-back:hover{background:rgba(255,255,255,.15)}

/* ---- game frame ---- */
.game-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);border-radius:26px;padding:18px;display:flex;flex-direction:column;gap:0}
.game-head{display:flex;align-items:center;justify-content:space-between;border-radius:16px;padding:6px 4px;flex-wrap:wrap;gap:10px}
.gh-left{display:flex;align-items:center;gap:10px}
.gh-title{font-size:19px;font-weight:800;color:#e8e3d6;letter-spacing:.3px}
.gh-right{display:flex;align-items:center;gap:8px}
.gh-streak{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#e8e3d6;border-radius:10px;padding:5px 10px;font-size:11px;font-weight:700}
.gh-timer{background:#e8e3d6;color:#1c2233;border-radius:10px;padding:5px 10px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.gh-help{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#e8e3d6;display:grid;place-items:center;font-size:13px;cursor:pointer;transition:.15s}
.gh-help:hover{background:rgba(255,255,255,.15)}
/* İpucu satırı: her oyunda İKİ satır. Satır sonu nerede olacağı metnin kendisinde
   belirtiliyor (her cümle bir <span>), böylece kırılma kutu genişliğine göre rastgele
   yer değiştirmiyor. text-wrap:balance, bir cümle yine de sarmak zorunda kalırsa
   (dar telefon) parçaları eşit uzunlukta tutuyor. min-height iki satır ayırıyor, ki
   oyunlar arasında geçerken tahta yukarı aşağı zıplamasın. */
.game-hint{text-align:center;font-size:12px;line-height:1.5;color:var(--cream-dim);margin:16px auto 14px;max-width:520px;min-height:3em}
.game-hint span{display:block;text-wrap:balance}
.game-body{flex:1;display:flex;flex-direction:column;align-items:center;max-width:100%;overflow-x:auto;padding-bottom:4px}
.game-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}
.act-primary{padding:10px 26px;background:#e8e3d6;color:#1c2233;border-radius:14px;font-size:14px;font-weight:700}
.act-secondary{padding:10px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--cream-dim);border-radius:14px;font-size:14px;font-weight:600}
.act-primary:hover{transform:translateY(-1px)}
.act-secondary:hover{color:#e8e3d6;background:rgba(255,255,255,.14)}

/* ---- generic draggable chip (cream surface) ---- */
.chip{
  border-radius:12px;background:var(--cream);box-shadow:0 4px 14px rgba(0,0,0,.25);
  display:grid;place-items:center;font-weight:700;color:var(--ink);cursor:grab;
  user-select:none;touch-action:none;position:relative;
}
.chip.dragging{opacity:.35}
.chip-ghost{position:fixed;z-index:99;pointer-events:none;opacity:.92;transform:translate(-50%,-50%) scale(1.06);box-shadow:0 10px 26px rgba(0,0,0,.5);cursor:grabbing}
.chip.drop-target{outline:3px solid #e8e3d6;outline-offset:2px}
.chip.glued{background:var(--ok);color:#fff;box-shadow:0 2px 8px rgba(47,158,68,.5)}
.op-chip{border-radius:50%;background:var(--cream);color:#e03131;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:2}
.op-chip.glued{background:var(--ok);color:#fff}
.shake{animation:shake .4s}
.hc-status{display:flex;justify-content:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.hc-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:5px 12px;font-size:11.5px;font-weight:700;color:#e8e3d6}

/* ---- pyramid (hecele + hesap) ---- */
.board-fit{margin:0 auto 6px;position:relative}
.pyr{position:relative;margin:0 auto 6px}
.pyr svg{position:absolute;inset:0;pointer-events:none}
.pyr-slot{
  position:absolute;border-radius:12px;border:2px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.05);display:grid;place-items:center;
  font-weight:800;color:var(--cream-faint);transition:.25s;
}
.pyr-slot.filled{border-style:solid;border-color:transparent;background:var(--ok);color:#fff;box-shadow:0 2px 8px rgba(47,158,68,.4)}
.pyr-op{position:absolute;display:grid;place-items:center;font-weight:800;font-size:18px;pointer-events:none}
.pyr line{transition:stroke .3s}

/* ---- wordle ---- */
.wd-board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;margin:0 auto}
.wd-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wd-tile{width:52px;height:52px;border-radius:9px;border:2px solid rgba(255,255,255,.15);display:grid;place-items:center;font-size:20px;font-weight:800;background:rgba(255,255,255,.06);color:#e8e3d6;transition:.2s}
.wd-tile.has{border-color:rgba(255,255,255,.4);background:var(--cream);color:var(--ink)}
.wd-tile.hit{background:#2f9e44;border-color:#2f9e44;color:#fff}
.wd-tile.near{background:#f5a623;border-color:#f5a623;color:#fff}
.wd-tile.miss{background:#565f7a;border-color:#565f7a;color:#fff}
.wd-kb{display:flex;flex-direction:column;gap:5px;margin-top:16px;align-items:center;width:100%}
.wd-krow{display:flex;gap:4px;justify-content:center;width:100%}
.wd-key{min-width:30px;height:44px;padding:0 7px;border-radius:8px;background:var(--cream);color:var(--ink);box-shadow:0 2px 5px rgba(0,0,0,.2);font-size:13px;font-weight:700}
.wd-key.wide{min-width:52px;font-size:11px}
.wd-key.hit{background:#2f9e44;color:#fff}
.wd-key.near{background:#f5a623;color:#fff}
.wd-key.miss{background:#565f7a;color:#fff}
.wd-row.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---- wordle: hard mode (aggregate counts, manual color memory) ---- */
.wd-hboard{display:grid;gap:6px;margin:0 auto}
.wd-hrow{display:grid;grid-template-columns:repeat(5,44px) repeat(3,30px);gap:5px}
.wd-hrow .wd-tile{width:44px;height:44px;font-size:17px;cursor:pointer}
.wd-tile.m-red{background:#e03131;border-color:#e03131;color:#fff}
.wd-tile.m-yellow{background:#f5a623;border-color:#f5a623;color:#fff}
.wd-tile.m-green{background:#2f9e44;border-color:#2f9e44;color:#fff}
.wd-tile.flip{animation:tileflip .5s ease}
@keyframes tileflip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.wd-count{width:30px;height:44px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);background:rgba(255,255,255,.15)}
.wd-count.show{opacity:1;transform:scale(1)}
.wd-count-green{background:#2f9e44}
.wd-count-yellow{background:#f5a623}
.wd-count-red{background:#e03131}
.wd-key.used{background:rgba(255,255,255,.12);color:var(--cream-faint)}
/* SÖZLÜK: mevcut aralıkta bu harfle başlayan kelime kalmadı — tuş kapalı */
.wd-key.off{background:rgba(255,255,255,.05);color:rgba(232,227,214,.22);box-shadow:none;cursor:default}
.wd-hlegend{display:grid;grid-template-columns:repeat(5,44px) repeat(3,30px);gap:5px;margin:0 auto 6px;font-size:10px;color:var(--cream-faint);text-align:center}

/* ---- bulmaca gönder ---- */
.gn-intro{font-size:13px;color:var(--cream-dim);margin-bottom:16px;max-width:560px}
.gn-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
@media (max-width:640px){.gn-picks{grid-template-columns:1fr}}
.gn-pick{
  background:var(--cream);border-radius:20px;padding:18px;display:flex;flex-direction:column;
  align-items:center;gap:6px;cursor:pointer;transition:transform .15s;font-family:inherit;
}
.gn-pick:hover{transform:translateY(-3px)}
.gn-pick-art{width:52px;height:52px;display:block}
.gn-pick-name{font-size:15px;font-weight:800;color:var(--ink)}
.gn-pick-sub{font-size:11px;color:var(--muted)}
.gn-formhead{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px 16px;margin-bottom:18px}
.gn-formhead b{display:block;font-size:15px;color:#e8e3d6;margin-bottom:4px}
.gn-formhead span{font-size:12px;color:var(--cream-dim);line-height:1.5}
.gn-pyr{margin:0 auto}
.gn-slot{
  border-radius:12px;border:2px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.06);
  color:#e8e3d6;font:inherit;font-size:15px;font-weight:800;text-align:center;
  transition:border-color .15s,background .15s;
}
.gn-slot:focus{outline:none;border-style:solid;border-color:#e8e3d6;background:var(--cream);color:var(--ink)}
.gn-slot.bad{border-style:solid;border-color:#e03131;background:rgba(224,49,49,.18)}
.gn-slot::placeholder{color:rgba(232,227,214,.35);font-weight:600}
.gn-op{
  border-radius:50%;background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.3);
  color:var(--cream-faint);font-weight:800;font-size:15px;cursor:pointer;display:grid;place-items:center;z-index:2;
}
.gn-op.set{background:var(--cream);border-style:solid;border-color:transparent;color:#e03131}
.gn-op.bad{border-style:solid;border-color:#e03131;color:#e03131}
.gn-opgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.gn-oppick{
  aspect-ratio:1;border-radius:14px;background:#e9e3d4;color:var(--ink);
  font-size:24px;font-weight:800;cursor:pointer;transition:transform .12s;
}
.gn-oppick:hover{transform:scale(1.06);background:#23233c;color:#fff}
.gn-problems{margin:0;padding-left:18px}
.gn-problems li{margin-bottom:4px}

/* ---- sözlük (alfabetik aralık) ---- */
.sz-board{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:420px;margin:0 auto}
.sz-row{display:flex;align-items:center;gap:10px}
.sz-tiles{display:flex;gap:6px}
.sz-tile{width:52px;height:52px;border-radius:9px;display:grid;place-items:center;font-size:20px;font-weight:800;background:#1a72c4;color:#fff}
.sz-row.bound .sz-tile{background:#2f6690}
/* AAAAA / ZZZZZ: gerçek bir tahmin değil, alfabenin ucu */
.sz-row.edge .sz-tile{background:rgba(255,255,255,.1);color:var(--cream-faint)}
.sz-row.edge .sz-badge{background:rgba(255,255,255,.12);color:var(--cream-faint)}
.sz-tile.input{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.15);color:#e8e3d6}
.sz-tile.input.has{border-color:rgba(255,255,255,.45);background:var(--cream);color:var(--ink)}
.sz-badge{
  min-width:44px;padding:5px 8px;border-radius:9px;background:#1a72c4;color:#fff;
  font-size:12px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;flex:none;
}
/* the connector between the two bounds; the dot slides toward the closer one */
.sz-mid{display:flex;align-items:center;gap:10px;margin:6px 0}
.sz-line{position:relative;width:44px;height:56px;flex:none}
.sz-line::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#2f6690;border-radius:2px}
.sz-dot{position:absolute;left:50%;width:13px;height:13px;margin-left:-6.5px;margin-top:-6.5px;border-radius:50%;background:#f5a623;transition:top .3s}
.sz-dot.close{background:#2f9e44}
.sz-meta{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.sz-history{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px;max-width:420px}
.sz-history span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:3px 8px;font-size:11px;font-weight:700;color:var(--cream-dim)}

/* ---- archive ---- */
.arc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.arc-title{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;color:#e8e3d6}
.arc-month{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:6px 12px;font-size:12px;font-weight:600;color:#e8e3d6}
.arc-more{text-align:center;font-size:11.5px;color:var(--cream-dim);margin-top:14px;text-decoration:underline;cursor:pointer}
.arc-more:hover{color:#e8e3d6}
.arc-filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.arc-filter{padding:6px 14px;border-radius:12px;font-size:11px;font-weight:700}
.arc-rows{display:flex;flex-direction:column;gap:8px}
.arc-row{display:flex;align-items:center;gap:12px;background:var(--cream);border-radius:16px;padding:12px 16px}
.arc-row.dim{background:#8f9099}
.arc-row.dim .arc-date b{color:#e8e3d6}
.arc-row.dim .arc-date span{color:rgba(232,227,214,.6)}
.arc-row.dim .arc-score{color:rgba(232,227,214,.7)}
.arc-row.dim .arc-cell.empty{border-color:rgba(232,227,214,.35)}
.arc-date{width:46px;text-align:center;flex:none}
.arc-date b{font-size:18px;font-weight:800;display:block;color:var(--ink)}
.arc-date span{font-size:9px;color:var(--muted)}
.arc-cells{flex:1;display:flex;gap:6px}
.arc-cell{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11px}
.arc-cell.empty{border:2px dashed #d6d6c8;background:none}
.arc-cell.failed{opacity:.45}
.arc-score{font-size:11px;color:var(--muted);flex:none}
.arc-btn{padding:7px 14px;border-radius:11px;font-size:11px;font-weight:700;flex:none}
/* geçmiş gün: düğme değil, sadece durum etiketi — tıklanabilir görünmemeli */
.arc-locked{background:transparent;border:1px dashed rgba(28,34,51,.28);color:rgba(28,34,51,.5);cursor:default;display:inline-block}
.arc-row.dim .arc-locked{border-color:rgba(232,227,214,.3);color:rgba(232,227,214,.6)}

/* ---- stats / profile ---- */
.st-panel{background:var(--cream);border-radius:18px;padding:16px 18px}
.st-title{font-size:13px;font-weight:800;margin-bottom:12px;color:var(--ink)}
.st-row{margin-bottom:11px;font-size:11px;color:#55556e}
.st-row-top{display:flex;justify-content:space-between;margin-bottom:4px}
.st-bar{height:5px;border-radius:3px;background:#e2ddd0;overflow:hidden}
.st-bar div{height:100%}

.pf-hero{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.pf-avatar{width:84px;height:84px;border-radius:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font-size:34px;color:#e8e3d6;flex:none}
.pf-name{font-family:'Instrument Serif',serif;font-size:30px;color:#e8e3d6}
.pf-sub{font-size:12.5px;color:var(--cream-dim);margin-top:2px}
.pf-login-cta{margin-top:10px;display:inline-flex;align-items:center;gap:8px;background:#e8e3d6;color:#1c2233;border-radius:999px;padding:10px 20px;font-size:13px;font-weight:800;cursor:pointer;transition:.15s}
.pf-login-cta:hover{transform:translateY(-1px)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
@media(max-width:640px){.pf-grid{grid-template-columns:1fr}}
.pf-stat-card{background:var(--cream);border-radius:20px;padding:18px}
.pf-stat-card b{font-size:30px;font-weight:800;color:var(--ink);display:block}
.pf-stat-card span{font-size:11.5px;color:var(--muted)}
.pf-section-title{font-size:13px;font-weight:800;letter-spacing:.5px;color:var(--cream-dim);text-transform:uppercase;margin:22px 0 10px}
.pf-streak-strip{display:flex;gap:5px}
.pf-streak-day{flex:1;height:34px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.pf-streak-day.on{background:#e8e3d6;border-color:#e8e3d6}

/* ---- popup ---- */
.overlay{position:fixed;inset:0;background:rgba(15,18,28,.6);display:grid;place-items:center;z-index:200;padding:20px;backdrop-filter:blur(4px)}
.overlay.hidden,.hidden{display:none !important}
.popup{background:var(--cream-soft);border-radius:24px;padding:26px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.5);width:min(400px,94vw);animation:popIn .25s;max-height:88vh;overflow-y:auto}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.pp-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:30px}
.pp-icon-svg{padding:11px;box-sizing:border-box}
.pp-icon-svg svg,.ld-card-art svg{display:block;width:100%;height:100%}
.pp-title{font-size:22px;font-weight:800;color:var(--ink)}
.pp-sub{font-size:12px;color:var(--muted);margin:4px 0 16px}
.pp-stats{display:flex;gap:10px;margin-bottom:16px}
.pp-stat{flex:1;border-radius:14px;padding:12px;background:#e9e3d4}
.pp-stat b{font-size:22px;font-weight:800;display:block;color:var(--ink)}
.pp-stat span{font-size:10.5px;color:var(--muted)}
.pp-actions{display:flex;flex-direction:column;gap:8px}
.pp-btn{padding:12px;border-radius:14px;font-size:14px;font-weight:700}
.pp-link{font-size:12px;color:var(--muted);text-decoration:underline;margin-top:4px;cursor:pointer}
.pp-answer{background:#e9e3d4;border-radius:14px;padding:12px;margin-bottom:12px}
.pp-answer-label{font-size:10.5px;color:var(--muted);margin-bottom:6px}
.pp-answer-tiles{display:flex;justify-content:center;gap:6px}
.pp-answer-tiles span{width:34px;height:34px;border-radius:9px;background:#2f9e44;color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.pp-help-body{text-align:left;font-size:13px;color:#55556e;line-height:1.6;margin-bottom:16px}
/* "Nasıl oynanır" metinleri madde listesi. Popup 88vh'de kayabildiği için uzun
   listeler taşmıyor; burada sadece maddelerin nefes alması sağlanıyor. */
.pp-help-body p{margin-bottom:10px}
.pp-help-list{margin:0;padding-left:18px;list-style:disc}
.pp-help-list li{margin-bottom:9px}
.pp-help-list li:last-child{margin-bottom:0}
.pp-help-list b{color:var(--ink);font-weight:800}
/* Yardım penceresi uzun. Popup'ın KENDİSİ de kayabildiği için sabit yükseklik
   verildiğinde iki iç içe kaydırma alanı oluşuyor ve alçak ekranlarda (yatay telefon)
   "Anladım" düğmesi görünmeyen kısımda kalıyordu. Bunun yerine popup dikey bir flex
   kutusu: başlık ve düğme sabit, kayan tek yer gövde. */
.popup-help{display:flex;flex-direction:column;overflow:hidden}
.popup-help > *{flex:none}
.popup-help .pp-help-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:6px}

/* ---- oynanmış bulmaca ekranı ---- */
.gh-day{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:4px 10px;font-size:11px;font-weight:700;color:var(--cream-dim)}
.done-panel{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px 8px;max-width:420px;margin:0 auto}
.done-icon{width:78px;height:78px;border-radius:50%;padding:14px;box-sizing:border-box;margin-bottom:14px}
.done-icon svg{display:block;width:100%;height:100%}
.done-title{font-size:21px;font-weight:800;color:#e8e3d6}
.done-sub{font-size:12.5px;color:var(--cream-dim);margin:6px 0 14px}
.done-note{font-size:12.5px;color:var(--muted);background:var(--cream);border-radius:14px;padding:12px 14px;line-height:1.55;margin-bottom:18px}
.done-panel .pp-actions{width:100%}

/* bitmiş bulmacanın başlık rozeti (sayaç yerine) */
.gh-done{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--cream-dim);border-radius:10px;padding:5px 10px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.gh-done.ok{background:#2f9e44;border-color:#2f9e44;color:#fff}
/* Bitmiş tahta salt okunur: sürükleme, tuş takımı ve düğmeler devre dışı. */
.board-done .chip,.board-done .op-chip{cursor:default;touch-action:auto}
.board-done .wd-tile{cursor:default}
.board-done .wd-key{opacity:.45;cursor:default}
.board-done .game-actions{display:none}
.replay-note{font-size:11.5px;color:var(--cream-faint);text-align:center;margin-top:14px}
.replay-words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px;max-width:560px}
.replay-words b{width:100%;text-align:center;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--cream-faint);font-weight:800}
.replay-words span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:700;color:var(--cream-dim);font-variant-numeric:tabular-nums}

/* arşivde sonuç hücresi de tıklanabilir (bitmiş tahtayı açar) */
.arc-cell{cursor:pointer;font-family:inherit;font-weight:700;transition:transform .12s}
.arc-cell:hover{transform:translateY(-1px)}

/* arşivde oynanabilir hücre */
.arc-cell.open{
  border:2px dashed rgba(28,34,51,.3);background:rgba(28,34,51,.06);color:rgba(28,34,51,.5);
  cursor:pointer;font-size:12px;font-weight:800;transition:.15s;
}
.arc-cell.open:hover{background:#23233c;border-color:#23233c;color:#fff;transform:translateY(-1px)}
.arc-row.dim .arc-cell.open{border-color:rgba(232,227,214,.35);color:rgba(232,227,214,.6);background:rgba(255,255,255,.06)}
.arc-row.dim .arc-cell.open:hover{background:#e8e3d6;border-color:#e8e3d6;color:#1c2233}

/* ---- yönetim: gelen bulmacalar ---- */
.ad-list{display:flex;flex-direction:column;gap:12px}
.ad-empty{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:22px;text-align:center;color:var(--cream-dim);font-size:13px}
.ad-card{background:var(--cream);border-radius:18px;padding:16px}
.ad-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;font-size:11.5px;color:var(--muted)}
.ad-type{background:#23233c;color:#fff;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:800}
.ad-who{font-weight:700;color:var(--ink)}
.ad-date{margin-left:auto}
.ad-status{border-radius:8px;padding:3px 9px;font-weight:800;font-size:10.5px;text-transform:uppercase;background:#e9e3d4;color:#8a7f70}
.ad-status.accepted{background:#d3f2df;color:#2f7a45}
.ad-status.rejected{background:#fbdde3;color:#b0455a}
.ad-sol{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.ad-sol span{background:#23233c;color:#fff;border-radius:7px;padding:4px 9px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ad-words,.ad-eqs{display:flex;flex-wrap:wrap;gap:5px}
.ad-words span{background:#e9e3d4;color:#55556e;border-radius:7px;padding:3px 8px;font-size:11.5px;font-weight:700}
.ad-eqs span{border-radius:7px;padding:3px 8px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ad-eqs .ok{background:#d3f2df;color:#2f7a45}
.ad-eqs .bad{background:#fbdde3;color:#b0455a}
.ad-warn{margin-top:8px;font-size:11.5px;color:#b0455a;font-weight:600}
.ad-ok{margin-top:8px;font-size:11.5px;color:#2f7a45;font-weight:700}
.ad-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ad-btn{border-radius:11px;padding:8px 14px;font-size:11.5px;font-weight:700;cursor:pointer;background:#e9e3d4;color:#23233c}
.ad-btn.ok{background:#2f9e44;color:#fff}
.ad-btn.no{background:#e03131;color:#fff}
.ad-btn:disabled{opacity:.5;cursor:default}

/* ---- iletişim ---- */
.il-intro{font-size:13px;color:var(--cream-dim);margin-bottom:18px;max-width:600px;line-height:1.6}
.il-socials{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
@media (max-width:640px){.il-socials{grid-template-columns:1fr}}
.il-social{
  display:flex;align-items:center;gap:12px;background:var(--cream);border-radius:18px;
  padding:14px 16px;text-decoration:none;transition:transform .15s;
}
.il-social:hover{transform:translateY(-3px)}
.il-social-ico{width:26px;height:26px;flex:none;color:var(--ink)}
.il-social-txt{display:flex;flex-direction:column;min-width:0}
.il-social-txt b{font-size:14px;font-weight:800;color:var(--ink)}
.il-social-txt span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.il-mail{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:12px 16px;margin-bottom:22px;
}
.il-mail span{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cream-faint)}
.il-mail a{font-size:14px;font-weight:700;color:#e8e3d6}
.il-formhead{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px 16px;margin-bottom:16px}
.il-formhead b{display:block;font-size:15px;color:#e8e3d6;margin-bottom:4px}
.il-formhead span{font-size:12px;color:var(--cream-dim);line-height:1.5}
.il-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.il-field label{font-size:11.5px;font-weight:700;color:var(--cream-dim)}
.il-opt{font-weight:500;color:var(--cream-faint)}
.il-field input,.il-field textarea{
  border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:14px;
  padding:11px 13px;font:inherit;font-size:14px;color:#e8e3d6;resize:vertical;
  transition:border-color .15s,background .15s;
}
.il-field input:focus,.il-field textarea:focus{outline:none;border-color:#e8e3d6;background:var(--cream);color:var(--ink)}
.il-field input.bad,.il-field textarea.bad{border-color:#e03131;background:rgba(224,49,49,.15)}
.il-field input::placeholder,.il-field textarea::placeholder{color:rgba(232,227,214,.35)}
.il-count{font-size:11px;color:var(--cream-faint);text-align:right;font-variant-numeric:tabular-nums}
/* Honeypot: görünmez ama display:none DEĞİL — bazı botlar gizli alanları atlıyor. */
.il-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- yönetim: bölüm sekmeleri + mesajlar ---- */
.ad-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ad-tab{padding:8px 16px;border-radius:13px;font-size:12px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:var(--cream-dim)}
.ad-tab.on{background:#e8e3d6;border-color:#e8e3d6;color:#1c2233}
.ad-status.read{background:#dcd7fb;color:#5a4bb0}
.ad-status.archived{background:#e2ddd0;color:#7b7365}
.ad-subject{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:6px}
.ad-body{font-size:13px;color:#55556e;line-height:1.6;white-space:pre-wrap;word-break:break-word;background:#f5f1e7;border-radius:12px;padding:11px 13px}

/* ---- hesap / avatar ---- */
.ld-avatar{overflow:hidden;padding:0;font-weight:800;font-size:15px;color:#e8e3d6}
.ld-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pf-avatar{overflow:hidden}
.pf-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pf-logout{margin-top:10px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--cream-dim);border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.pf-logout:hover{color:#e8e3d6;background:rgba(255,255,255,.14)}
/* Google'ın kendi düğmesi buraya çiziliyor (iframe) — ortala, taşmasın */
.lg-gbtn{display:flex;justify-content:center;min-height:44px;margin:6px 0 4px}
.lg-note{font-size:12px;color:var(--muted);line-height:1.55;text-align:center;margin:12px 4px 4px}
.lg-fallback{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}

/* ---- login popup ---- */
.lg-field{display:flex;flex-direction:column;gap:5px;text-align:left;margin-bottom:12px}
.lg-field label{font-size:11px;font-weight:700;color:var(--muted)}
.lg-field input{border:1.5px solid #ddd6c4;background:#fff;border-radius:12px;padding:11px 13px;font:inherit;font-size:14px;color:var(--ink)}
.lg-field input:focus{outline:2px solid var(--ink);outline-offset:1px}
.lg-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:11px}
.lg-divider::before,.lg-divider::after{content:'';flex:1;height:1px;background:#ddd6c4}
.lg-google{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:14px;background:#fff;border:1.5px solid #ddd6c4;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.lg-google:hover{background:#faf8f2}

/* ============ phone widths ============ */
@media (max-width:560px){
  /* nav must stay on one line — it used to wrap ÜYE OL + avatar onto a second row */
  .ld-nav{padding:14px max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left));gap:8px;flex-wrap:nowrap}
  .ld-word{font-size:21px}
  .ld-pillnav{padding:5px;gap:4px}
  .ld-pillnav button{width:38px;height:38px;border-radius:11px;font-size:14px}
  .ld-pillnav button svg{width:19px;height:19px}
  .ld-avatar{width:38px;height:38px;border-radius:12px;font-size:15px}
  .ld-member{display:none}
  main#screen{min-height:calc(100vh - 70px)}

  .page{padding:0 14px max(48px,env(safe-area-inset-bottom))}
  .game-panel{padding:12px;border-radius:20px}
  /* Telefonda ipucu cümlelerinin TEK satırda kalması için iki küçük ayar: bir punto
     küçültme ve panelin iç boşluğuna doğru birkaç piksel taşma. Metne dokunmadan
     ~%10 daha geniş satır kazandırıyor. */
  .game-hint{font-size:11px;margin:12px -12px 12px;padding:0 2px;max-width:none}
  .gh-title{font-size:16px}
  .gh-streak,.gh-timer{font-size:10.5px;padding:4px 8px}

  /* wordle: fit the board and the 11-key row inside 320px */
  .wd-tile{width:46px;height:46px;font-size:18px}
  .wd-hrow{grid-template-columns:repeat(5,38px) repeat(3,26px);gap:4px}
  .wd-hrow .wd-tile{width:38px;height:38px;font-size:15px}
  .wd-count{width:26px;height:38px;font-size:13px}
  .wd-hlegend{grid-template-columns:repeat(5,38px) repeat(3,26px);gap:4px}
  .wd-kb{margin-top:12px}
  .wd-krow{gap:3px}
  .wd-key{min-width:0;flex:1;padding:0 2px;height:42px;font-size:12px}
  .wd-key.wide{flex:1.6;font-size:10px}

  /* profile / archive */
  .pf-avatar{width:64px;height:64px;border-radius:20px;font-size:26px}
  .pf-name{font-size:24px}
  .pf-hero{gap:14px;margin-bottom:18px}
  .arc-row{padding:10px 12px;gap:8px}
  .arc-date{width:34px}
  .arc-cell{width:22px;height:22px}
  .arc-btn{padding:6px 10px}
  .arc-score{display:none}

  .popup{padding:20px;border-radius:20px}
  .pp-title{font-size:19px}
}
/* Beş pil + marka + avatar dar ekrana ancak sığıyor. Önce marka yazısı, sonra
   pillerin kendisi küçülüyor — nav TEK SATIRDA kalmalı (flex-wrap:nowrap). */
@media (max-width:480px){
  .ld-word{display:none}
}
@media (max-width:400px){
  .ld-pillnav{padding:4px;gap:3px}
  .ld-pillnav button{width:34px;height:34px;border-radius:10px}
  .ld-pillnav button svg{width:18px;height:18px}
  .ld-avatar{width:34px;height:34px;border-radius:11px}
}
@media (max-width:360px){
  .wd-tile{width:40px;height:40px;font-size:16px}
}

/* ---- toast ---- */
.toast{position:fixed;left:50%;top:26px;transform:translateX(-50%);background:#e8e3d6;color:#1c2233;padding:10px 20px;border-radius:14px;font-size:13px;font-weight:700;z-index:300;animation:popToast .2s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
@keyframes popToast{from{transform:scale(.9) translateX(-50%);opacity:0}to{transform:scale(1) translateX(-50%);opacity:1}}

/* ============ statik içerik sayfaları (hakkinda, gizlilik, nasil-oynanir …) ============
   Bunlar SPA'nın parçası değil, kendi başına HTML dosyaları. Sebebi arama motorları
   ve AdSense tarayıcısı: uygulama her şeyi JS ile boş bir <main> içine çizdiği için
   taranabilir metin neredeyse sıfırdı ve reklam başvurusu "içerik yok" diye reddedildi.
   Bu sayfalar JS'siz de tam okunur. */
.doc-wrap{max-width:820px;margin:0 auto;padding:0 20px max(70px,env(safe-area-inset-bottom))}
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px max(20px,env(safe-area-inset-left));max-width:860px;margin:0 auto}
.doc-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.doc-brand .ld-logo{flex:none}
.doc-back{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#e8e3d6;
  border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;text-decoration:none;transition:.15s}
.doc-back:hover{background:rgba(255,255,255,.16)}
.doc h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:44px;line-height:1.1;margin:10px 0 6px}
.doc .doc-lead{font-size:15px;color:var(--cream-dim);line-height:1.7;margin-bottom:8px}
.doc-updated{font-size:11.5px;color:var(--cream-faint);margin-bottom:26px}
.doc h2{font-size:20px;font-weight:800;color:#e8e3d6;margin:30px 0 10px}
.doc h3{font-size:15.5px;font-weight:800;color:#e8e3d6;margin:20px 0 8px}
.doc p,.doc li{font-size:14.5px;line-height:1.75;color:var(--cream-dim)}
.doc p{margin-bottom:12px}
.doc ul,.doc ol{margin:0 0 14px 20px}
.doc li{margin-bottom:7px}
.doc a{color:#e8e3d6}
.doc strong{color:#e8e3d6;font-weight:700}
.doc-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:18px 20px;margin:18px 0}
.doc-card h3{margin-top:0}
.doc-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.doc-table th,.doc-table td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);color:var(--cream-dim);vertical-align:top}
.doc-table th{color:#e8e3d6;font-weight:800;font-size:12.5px}
.doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.doc-toc a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:999px;
  padding:7px 14px;font-size:12px;font-weight:700;color:var(--cream-dim);text-decoration:none}
.doc-toc a:hover{color:#e8e3d6;background:rgba(255,255,255,.14)}

/* ---- site geneli alt bilgi (uygulamada da, statik sayfalarda da) ---- */
.site-footer{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1);margin-top:40px;
  padding:26px max(20px,env(safe-area-inset-left)) max(30px,env(safe-area-inset-bottom))}
.site-footer-in{max-width:1100px;margin:0 auto;display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between}
.site-footer p{font-size:12.5px;color:var(--cream-faint);line-height:1.7;max-width:460px;margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-start}
.site-footer a{font-size:12.5px;color:var(--cream-dim);text-decoration:none;font-weight:600}
.site-footer a:hover{color:#e8e3d6;text-decoration:underline}
.site-footer .foot-copy{font-size:11.5px;color:var(--cream-faint);width:100%;margin-top:6px}
@media (max-width:640px){
  .doc h1{font-size:32px}
  .site-footer-in{gap:16px}
}

/* ---- ana sayfa tanıtım bölümü (statik, taranabilir) ---- */
.home-intro{position:relative;z-index:2;max-width:1000px;margin:10px auto 0;
  padding:34px max(20px,env(safe-area-inset-left)) 10px}
.home-intro h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:34px;
  color:#e8e3d6;margin-bottom:12px}
.home-intro > p{font-size:14.5px;line-height:1.75;color:var(--cream-dim);max-width:700px;margin-bottom:22px}
.home-games{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.home-games{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.home-games{grid-template-columns:1fr}}
.home-games article{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:16px 18px}
.home-games h3{font-size:14px;font-weight:800;letter-spacing:1px;color:#e8e3d6;margin-bottom:7px}
.home-games p{font-size:13px;line-height:1.65;color:var(--cream-dim)}
.home-soon{background:#23233c;color:#efe9dc;border-radius:999px;padding:3px 9px;
  font-size:9px;font-weight:800;letter-spacing:1px;margin-left:6px;vertical-align:middle}
.home-more{font-size:13.5px;color:var(--cream-dim);margin-top:20px}
.home-more a{color:#e8e3d6}