@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/rubik-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url('/rubik-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Renkler app.v1.css ile aynı (mevcut tema). */
:root{--ink:#f4f7ff;--muted:#a9b9d3;--red:#B3363B;--blue:#2F6CC4;--lobby-bg:#3D1408;--panel:#121824;--action:#286CC2;--gold:#83BFFF}
*{box-sizing:border-box}
html{min-height:100%;background:#120905}
body{margin:0;min-height:100vh;color:var(--ink);font-family:Rubik,"Segoe UI",system-ui,-apple-system,sans-serif}
/* Ajan karargâhı arka planı: sabit katman (iOS sabit arka plan özelliğini desteklemez), üstte karartma ve film greni. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(18,9,5,.05) 0%,rgba(18,9,5,.25) 50%,rgba(18,9,5,.75) 100%),radial-gradient(ellipse 90% 80% at 50% 42%,transparent 45%,rgba(0,0,0,.45) 100%),url('/bg/hq-desktop.jpg') center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(max-aspect-ratio:3/4){body::before{background:linear-gradient(180deg,rgba(18,9,5,.15) 0%,rgba(18,9,5,.45) 45%,rgba(18,9,5,.9) 100%),url('/bg/hq-mobile.jpg') center top/cover no-repeat}}

.top{display:flex;align-items:center;padding:18px clamp(18px,4vw,56px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:1.5px;font-size:20px;color:inherit;text-decoration:none}
.brandmark{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--action);color:#fff}

.games{max-width:1100px;margin:0 auto;padding:clamp(16px,4vw,48px) clamp(18px,4vw,56px) 48px}
.games h1{font-size:clamp(32px,4.4vw,56px);letter-spacing:-1.5px;margin:0 0 24px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

.game-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:280px;padding:24px;border-radius:18px;
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .15s,filter .15s}
a.game-card:hover{transform:translateY(-3px);filter:brightness(1.08)}
a.game-card:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.codenames{background:linear-gradient(135deg,var(--red),var(--blue))}
.yalan{background:linear-gradient(135deg,#2f7d5b,#1e2c52)}
.game-name{font-size:28px;font-weight:800}
.game-desc{font-size:15px;opacity:.9}
.game-meta{font-size:13px;font-weight:600;opacity:.8}

@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  /* Dikey görselde harita üst yarıda; kartlar altındaki koyu alana iner. */
  .games{padding-top:30svh}
  .game-card{min-height:150px;padding:20px}
}
@media (prefers-reduced-motion: reduce){
  .game-card{transition:none}
  a.game-card:hover{transform:none}
}