/* ============================================================
   Oyun Odası — PİKSEL / RETRO tasarım sistemi (OLED siyah)
   ============================================================ */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p-latin-ext-400-normal.woff2') format('woff2');
  font-display: swap;
  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;
}
@font-face {
  font-family: 'VT323';
  src: url('/fonts/vt323-latin-400-normal.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323';
  src: url('/fonts/vt323-latin-ext-400-normal.woff2') format('woff2');
  font-display: swap;
  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;
}

:root {
  --bg: #000;
  --panel: #0a0818;
  --panel-2: #12102e;
  --text: #f4f1ff;
  --muted: #8f8bc4;
  --line: #2a2468;

  --purple: #8b6cff;
  --cyan: #2ee6ff;
  --pink: #ff4fa3;
  --yellow: #ffd23f;
  --green: #3ddc6a;
  --orange: #ff8a2b;
  --red: #ff4b4b;

  --bc: #4a3fd0; /* piksel kenarlık rengi */
  --px: 'Press Start 2P', ui-monospace, monospace;
  --body: 'VT323', ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { color-scheme: dark; background: #000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  min-height: 100vh; min-height: 100dvh;
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
/* CRT tarama çizgileri */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .22;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px);
}

#scene { position: fixed; left: 0; top: 0; pointer-events: none; z-index: -1; image-rendering: pixelated; image-rendering: crisp-edges; opacity: .92; background: #000; }

a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--px); font-weight: 400; line-height: 1.5; text-transform: uppercase; }
.sprite, canvas.avatar { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.muted { color: var(--muted); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* -------------------------------------------------- yerleşim */
.container { width: min(1120px, 100% - 32px); margin: 0 auto; }

.topbar { position: sticky; top: 0; z-index: 20; background: #000; border-bottom: 4px solid #1d1660; }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 24px, var(--yellow) 24px 48px, var(--green) 48px 72px, var(--cyan) 72px 96px, var(--purple) 96px 120px);
}
.topbar .container { display: flex; align-items: center; gap: 14px; height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--px); font-size: .8rem; text-transform: uppercase; line-height: 1.4; }
.logo .sprite { animation: bob 1s steps(2) infinite; }
.logo b { color: var(--yellow); font-weight: 400; text-shadow: 3px 3px 0 #7a3a00; }
.logo i { color: var(--cyan); font-style: normal; text-shadow: 3px 3px 0 #08506a; }
.spacer { flex: 1; }

/* -------------------------------------------------- butonlar */
.btn {
  --f: #2a2370; --bd: var(--purple);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 4px; padding: 14px 18px; border: 0; border-radius: 0;
  background: var(--f); color: #fff; cursor: pointer; text-decoration: none;
  font: 400 .66rem/1.4 var(--px); text-transform: uppercase; letter-spacing: 0;
  box-shadow: 0 -4px 0 0 var(--bd), 0 4px 0 0 var(--bd), -4px 0 0 0 var(--bd), 4px 0 0 0 var(--bd),
    inset 4px 4px 0 0 rgba(255, 255, 255, .28), inset -4px -4px 0 0 rgba(0, 0, 0, .4);
  transition: transform .06s steps(2), filter .1s;
}
.btn:hover:not(:disabled) { filter: brightness(1.25); transform: translateY(-2px); }
.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 -4px 0 0 var(--bd), 0 4px 0 0 var(--bd), -4px 0 0 0 var(--bd), 4px 0 0 0 var(--bd),
    inset 4px 4px 0 0 rgba(0, 0, 0, .4), inset -4px -4px 0 0 rgba(255, 255, 255, .15);
}
.btn:focus-visible { outline: 4px dashed var(--yellow); outline-offset: 6px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { --f: #2fc457; --bd: #0b5a25; color: #03210c; text-shadow: 1px 1px 0 rgba(255, 255, 255, .35); }
.btn-danger { --f: #d62f45; --bd: #6e0f1e; }
.btn-ghost { --f: transparent; --bd: #3a3480; box-shadow: 0 -4px 0 0 var(--bd), 0 4px 0 0 var(--bd), -4px 0 0 0 var(--bd), 4px 0 0 0 var(--bd); }
.btn-sm { padding: 10px 12px; font-size: .56rem; }
.btn-block { width: calc(100% - 8px); }

.input {
  width: 100%; padding: 12px 14px; margin: 4px 0; border: 0; border-radius: 0;
  background: #03020c; color: var(--text); font: 400 1.35rem var(--body); outline: none;
  box-shadow: 0 -4px 0 0 var(--bc), 0 4px 0 0 var(--bc), -4px 0 0 0 var(--bc), 4px 0 0 0 var(--bc), inset 4px 4px 0 0 rgba(0, 0, 0, .8);
  caret-color: var(--yellow);
}
.input:focus { --bc: var(--cyan); }
.input::placeholder { color: #55508c; text-transform: uppercase; }
select.input {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd23f' d='M0 0h8v1H7v1H6v1H5v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 10px;
}
select.input option { background: #0a0818; }
input[type='number'].input { appearance: textfield; -moz-appearance: textfield; }
input[type='number'].input::-webkit-inner-spin-button, input[type='number'].input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* -------------------------------------------------- kartlar & çipler */
.card {
  --bc: #3b30b0;
  position: relative; margin: 4px; padding: 22px;
  background: rgba(8, 6, 22, .96);
  box-shadow: 0 -4px 0 0 var(--bc), 0 4px 0 0 var(--bc), -4px 0 0 0 var(--bc), 4px 0 0 0 var(--bc),
    inset 4px 4px 0 0 rgba(255, 255, 255, .06), inset -4px -4px 0 0 rgba(0, 0, 0, .55);
}
.card h2 { font-size: .72rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; color: var(--yellow); text-shadow: 2px 2px 0 #5a3000; }
.card h2::before { content: ''; width: 10px; height: 10px; background: var(--pink); box-shadow: 4px 4px 0 #6a1040; flex: none; }
.card h2 .count { margin-left: auto; font-size: .56rem; color: var(--muted); text-shadow: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px; padding: 7px 9px;
  font: 400 .5rem/1.2 var(--px); text-transform: uppercase; color: var(--muted); background: #0e0b26;
  box-shadow: 0 -2px 0 0 #3a3480, 0 2px 0 0 #3a3480, -2px 0 0 0 #3a3480, 2px 0 0 0 #3a3480;
}
.chip.live { color: var(--green); background: #06200f; box-shadow: 0 -2px 0 0 #1a8a40, 0 2px 0 0 #1a8a40, -2px 0 0 0 #1a8a40, 2px 0 0 0 #1a8a40; }
.chip.warn { color: var(--yellow); background: #261d03; box-shadow: 0 -2px 0 0 #a07d0c, 0 2px 0 0 #a07d0c, -2px 0 0 0 #a07d0c, 2px 0 0 0 #a07d0c; }
.chip.off { color: #ff8a9a; background: #260811; box-shadow: 0 -2px 0 0 #a02040, 0 2px 0 0 #a02040, -2px 0 0 0 #a02040, 2px 0 0 0 #a02040; }

.avatar {
  width: 40px; height: 40px; flex: none; margin: 2px;
  box-shadow: 0 -2px 0 0 #5a4fe0, 0 2px 0 0 #5a4fe0, -2px 0 0 0 #5a4fe0, 2px 0 0 0 #5a4fe0;
}

/* -------------------------------------------------- toast */
#toasts { position: fixed; z-index: 100; right: 20px; bottom: calc(90px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
.toast {
  --bc: var(--purple); padding: 14px 18px; background: #0a0818; max-width: 340px; font-size: 1.2rem;
  box-shadow: 0 -4px 0 0 var(--bc), 0 4px 0 0 var(--bc), -4px 0 0 0 var(--bc), 4px 0 0 0 var(--bc), inset -4px -4px 0 0 rgba(0, 0, 0, .5);
  animation: toast-in .25s steps(4);
}
.toast.error { --bc: var(--red); }
.toast.success { --bc: var(--green); }
.toast.out { opacity: 0; transition: opacity .3s steps(3); }
@keyframes toast-in { from { transform: translateY(24px); opacity: 0; } }

/* -------------------------------------------------- modal */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(0, 0, 0, .88); animation: fade .15s steps(3); }
.modal {
  --bc: var(--purple); width: min(460px, 100%); padding: 28px; background: #0a0818; animation: pop .25s steps(4);
  box-shadow: 0 -4px 0 0 var(--bc), 0 4px 0 0 var(--bc), -4px 0 0 0 var(--bc), 4px 0 0 0 var(--bc), 0 -8px 0 0 #000, 0 8px 0 0 #000, -8px 0 0 0 #000, 8px 0 0 0 #000,
    inset 4px 4px 0 0 rgba(255, 255, 255, .06), inset -4px -4px 0 0 rgba(0, 0, 0, .55);
}
.modal h2 { font-size: .9rem; margin-bottom: 10px; color: var(--yellow); text-shadow: 3px 3px 0 #5a3000; }
.modal p { color: var(--muted); margin: 0 0 16px; font-size: 1.3rem; }
.modal .row { display: flex; gap: 10px; margin-top: 14px; }
.modal .row .btn { flex: 1; }
.modal-icon { width: 80px; height: 80px; display: grid; place-items: center; margin-bottom: 16px; background: #05040f; box-shadow: 0 -4px 0 0 var(--bc), 0 4px 0 0 var(--bc), -4px 0 0 0 var(--bc), 4px 0 0 0 var(--bc); }
.field-error { color: #ff8a9a; min-height: 1.3em; margin-top: 10px; font-size: 1.2rem; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(16px) scale(.9); opacity: 0; } }

/* -------------------------------------------------- ana sayfa */
.hero { text-align: center; padding: 40px 0 20px; }
.hero .eyebrow { display: inline-block; padding: 10px 14px; margin-bottom: 24px; font: 400 .52rem/1.6 var(--px); text-transform: uppercase; color: var(--cyan); background: #031a22; box-shadow: 0 -4px 0 0 #0a6a82, 0 4px 0 0 #0a6a82, -4px 0 0 0 #0a6a82, 4px 0 0 0 #0a6a82; }
.hero h1 { font-size: clamp(1.25rem, 4.4vw, 2.6rem); line-height: 1.55; color: #fff; text-shadow: 4px 4px 0 var(--pink); }
.hero h1 .hl { color: var(--yellow); text-shadow: 4px 4px 0 #b5520a; }
.hero p { max-width: 620px; margin: 20px auto 0; color: #c9c5f5; font-size: 1.6rem; }
.press-start { margin: 22px 0 0; font: 400 .8rem var(--px); color: var(--green); text-shadow: 3px 3px 0 #0b5a25; animation: blink 1s steps(2) infinite; }

.steps { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.step { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; font: 400 .56rem/1.3 var(--px); text-transform: uppercase; color: #c9c5f5; background: #0a0818; box-shadow: 0 -4px 0 0 #2a2468, 0 4px 0 0 #2a2468, -4px 0 0 0 #2a2468, 4px 0 0 0 #2a2468; }
.step b { width: 26px; height: 26px; display: grid; place-items: center; font-weight: 400; font-size: .6rem; color: #000; background: var(--yellow); box-shadow: inset -3px -3px 0 #c98a00; }
.step:nth-child(2) b { background: var(--cyan); box-shadow: inset -3px -3px 0 #0a8aa6; }
.step:nth-child(3) b { background: var(--pink); box-shadow: inset -3px -3px 0 #b02068; }
.step:nth-child(4) b { background: var(--green); box-shadow: inset -3px -3px 0 #1a8a40; }

.section-title { display: flex; align-items: center; gap: 14px; margin: 34px 0 22px; }
.section-title h2 { font-size: .95rem; color: #fff; text-shadow: 3px 3px 0 var(--purple); }
.section-title .line { flex: 1; height: 4px; background: repeating-linear-gradient(90deg, #3a3480 0 8px, transparent 8px 16px); }

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 26px; padding: 4px 4px 48px; }
.game-card {
  --c: #8b6cff;
  position: relative; text-align: left; cursor: pointer; padding: 22px; color: inherit; font-family: inherit; border: 0;
  background: color-mix(in srgb, var(--c) 7%, #07061a);
  box-shadow: 0 -4px 0 0 var(--c), 0 4px 0 0 var(--c), -4px 0 0 0 var(--c), 4px 0 0 0 var(--c),
    inset 4px 4px 0 0 rgba(255, 255, 255, .07), inset -4px -4px 0 0 rgba(0, 0, 0, .55), 8px 8px 0 0 color-mix(in srgb, var(--c) 35%, #000);
  display: flex; flex-direction: column; gap: 14px; animation: card-in .4s steps(5) both;
  transition: transform .12s steps(3);
}
.game-card:hover { transform: translate(-4px, -6px); box-shadow: 0 -4px 0 0 var(--c), 0 4px 0 0 var(--c), -4px 0 0 0 var(--c), 4px 0 0 0 var(--c), inset 4px 4px 0 0 rgba(255, 255, 255, .1), inset -4px -4px 0 0 rgba(0, 0, 0, .55), 12px 14px 0 0 color-mix(in srgb, var(--c) 45%, #000); }
.game-card:active { transform: translate(0, 2px); }
.game-card:focus-visible { outline: 4px dashed var(--yellow); outline-offset: 8px; }
.game-icon {
  width: 88px; height: 88px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 16%, #03020a);
  box-shadow: 0 -4px 0 0 color-mix(in srgb, var(--c) 70%, #000), 0 4px 0 0 color-mix(in srgb, var(--c) 70%, #000), -4px 0 0 0 color-mix(in srgb, var(--c) 70%, #000), 4px 0 0 0 color-mix(in srgb, var(--c) 70%, #000);
}
.game-card:hover .game-icon .sprite { animation: bob .5s steps(2) infinite; }
.game-card h3 { font-size: .86rem; color: #fff; text-shadow: 3px 3px 0 color-mix(in srgb, var(--c) 70%, #000); line-height: 1.5; }
.game-card p { margin: 0; color: #b8b4e8; font-size: 1.3rem; flex: 1; }
.game-meta { display: flex; flex-wrap: wrap; gap: 2px; }
.game-play { display: flex; align-items: center; gap: 10px; font: 400 .66rem var(--px); text-transform: uppercase; color: var(--c); filter: brightness(1.4); }
.game-play::after { content: ''; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; animation: blink .8s steps(2) infinite; }
@keyframes card-in { from { opacity: 0; transform: translateY(20px); } }

.join-box { display: flex; gap: 14px; max-width: 560px; margin: 0 auto 10px; align-items: center; }
.join-hint { text-align: center; color: #ff8a9a; min-height: 1.2em; margin: 8px 0 0; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); grid-column: 1 / -1; }

footer.site { text-align: center; padding: 40px 16px 120px; color: #6c67a8; font: 400 .5rem/2 var(--px); text-transform: uppercase; }

/* -------------------------------------------------- oda sayfası */
.room-wrap { padding: 30px 0 120px; }
.room-title { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; }
.room-title .gi { width: 44px; height: 44px; display: grid; place-items: center; flex: none; background: #05040f; box-shadow: 0 -3px 0 0 #3a3480, 0 3px 0 0 #3a3480, -3px 0 0 0 #3a3480, 3px 0 0 0 #3a3480; }
.room-title h1 { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-shadow: 2px 2px 0 var(--purple); }
.code { letter-spacing: .1em; color: var(--yellow); }

#conn-banner { background: #5a1a0a; color: #ffc9a0; text-align: center; padding: 10px; font-size: 1.3rem; border-bottom: 4px solid #a03a12; }

.lobby-grid { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
/* Dar ekranda tek sütun: oyuncular → davet linki → ayarlar → başlat → sohbet */
@media (max-width: 860px) {
  .lobby-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lobby-grid .stack { display: contents; }
  .c-players { order: 1; } .c-invite { order: 2; } .c-settings { order: 3; } .c-start { order: 4; } .c-chat { order: 5; }
}
.stack { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.player { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #0e0b26; box-shadow: inset 4px 4px 0 rgba(255, 255, 255, .05), inset -4px -4px 0 rgba(0, 0, 0, .4); animation: card-in .3s steps(4) both; }
.player.me { background: #0a1c2c; box-shadow: 0 -2px 0 0 var(--cyan), 0 2px 0 0 var(--cyan), -2px 0 0 0 var(--cyan), 2px 0 0 0 var(--cyan); }
.player.offline { opacity: .5; }
.player .nm { flex: 1; min-width: 0; font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.player .dot { width: 10px; height: 10px; background: var(--green); flex: none; box-shadow: 0 0 0 2px #06200f; animation: blink 1.6s steps(2) infinite; }
.player.offline .dot { background: var(--yellow); animation: none; }
.slot { background: transparent; color: #55508c; justify-content: center; font-size: 1.2rem; padding: 18px; box-shadow: none; border: 4px dashed #2a2468; }

.invite-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.invite-row .input { font-size: 1.15rem; flex: 1 1 200px; min-width: 0; }
.invite-status { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }
.mt-14 { margin-top: 14px; }
.hint { color: var(--muted); font-size: 1.15rem; margin: 12px 0 0; }

.setting { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 0; flex-wrap: wrap; }
.setting label { font-size: 1.35rem; }
.setting .input { width: 170px; max-width: 100%; padding: 8px 12px; }
.setting .val { font: 400 .62rem var(--px); color: var(--yellow); }
.switch { position: relative; width: 56px; height: 28px; flex: none; margin: 4px; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: #1a1640; box-shadow: 0 -3px 0 0 #3a3480, 0 3px 0 0 #3a3480, -3px 0 0 0 #3a3480, 3px 0 0 0 #3a3480; }
.switch span::after { content: ''; position: absolute; width: 20px; height: 20px; top: 4px; left: 4px; background: #8f8bc4; transition: transform .1s steps(2); }
.switch input:checked + span { background: #0b3a1a; box-shadow: 0 -3px 0 0 #1a8a40, 0 3px 0 0 #1a8a40, -3px 0 0 0 #1a8a40, 3px 0 0 0 #1a8a40; }
.switch input:checked + span::after { transform: translateX(28px); background: var(--green); }

.start-card { text-align: center; }
.start-card .btn-primary { padding: 20px; font-size: .8rem; }

.chat { display: flex; flex-direction: column; height: 320px; min-width: 0; }
.chat form .input { min-width: 0; }
.chat.game-chat { height: auto; margin-top: 26px; }
.game-chat h2 { margin-bottom: 14px; }
.game-chat .chat-log { height: 180px; flex: none; }
.game-chat form { display: flex; gap: 10px; align-items: center; }
.game-chat.collapsed h2 { margin-bottom: 0; }
.game-chat.collapsed #game-chat-body { display: none; }
.chat-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; cursor: pointer; font: inherit; color: inherit; text-shadow: inherit; text-transform: inherit; }
.chat-toggle:focus-visible { outline: 4px dashed var(--yellow); outline-offset: 4px; }
.chat-toggle .chev { margin-left: auto; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--yellow); transition: transform .1s steps(2); }
.game-chat:not(.collapsed) .chat-toggle .chev { transform: rotate(180deg); }
.chat-toggle .chip { text-shadow: none; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; margin-bottom: 12px; background: #03020c; box-shadow: inset 4px 4px 0 rgba(0, 0, 0, .8), 0 0 0 2px #1d1860; }
.msg { font-size: 1.3rem; word-break: break-word; }
.msg b { color: var(--cyan); font-weight: 400; }
.msg.me b { color: var(--pink); }
.msg.sys { color: var(--muted); font-size: 1.15rem; }
.msg.sys::before { content: '* '; color: var(--yellow); }
.chat form { display: flex; gap: 10px; align-items: center; }
.chat-log::-webkit-scrollbar { width: 10px; }
.chat-log::-webkit-scrollbar-thumb { background: #3a3480; }
.chat-log::-webkit-scrollbar-track { background: #03020c; }

/* oyun görünümü */
.game-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.game-bar .pl { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.pchip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; font-size: 1.2rem; background: #0e0b26; box-shadow: 0 -2px 0 0 #3a3480, 0 2px 0 0 #3a3480, -2px 0 0 0 #3a3480, 2px 0 0 0 #3a3480; margin: 2px; }
.pchip .avatar { width: 28px; height: 28px; margin: 0; box-shadow: none; }
.pchip .sprite { margin-left: 2px; }
.pchip.offline { opacity: .45; }
.game-stage { padding: 30px 18px; min-height: 340px; }
.game-bar .pl { min-width: 0; }
.pchip .chip { margin: 0 2px; }
.pchip .pchip-kick { margin: 0 0 0 4px; padding: 6px 10px; min-height: 0; font-size: .46rem; }
.pchip .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.result {
  --bc: var(--yellow);
  position: relative; margin: 30px 4px 4px; text-align: center; padding: 30px 22px; background: #0f0b04;
  box-shadow: 0 -4px 0 0 var(--bc), 0 4px 0 0 var(--bc), -4px 0 0 0 var(--bc), 4px 0 0 0 var(--bc), 0 -8px 0 0 #7a5a00, 0 8px 0 0 #7a5a00, -8px 0 0 0 #7a5a00, 8px 0 0 0 #7a5a00,
    inset 4px 4px 0 0 rgba(255, 255, 255, .08), inset -4px -4px 0 0 rgba(0, 0, 0, .55);
  animation: pop .3s steps(4);
}
.result .trophy { display: block; margin: 0 auto; animation: bob .7s steps(2) infinite; }
.result .trophy .sprite { margin: 0 auto; }
.result h2 { display: block; font-size: 1rem; margin: 18px 0 10px; color: var(--yellow); text-shadow: 3px 3px 0 #7a3a00; line-height: 1.6; }
.result h2::before { display: none; }
.result p { color: #d8d3a8; margin: 0 0 18px; font-size: 1.4rem; }
.result .scores { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.result .btn-row { justify-content: center; }

.center-screen { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 20px; }
.center-screen .card { max-width: 460px; }
.center-screen .big { display: block; margin: 0 auto 18px; animation: bob 1s steps(2) infinite; }
.center-screen .big .sprite { margin: 0 auto; }
.center-screen h1, .center-screen h2 { justify-content: center; font-size: .9rem; color: #fff; text-shadow: 3px 3px 0 var(--pink); margin-bottom: 14px; }
.center-screen h2::before { display: none; }
.center-screen p { color: var(--muted); font-size: 1.4rem; }

.spinner { width: 32px; height: 32px; margin: 0 auto 22px; background: var(--yellow); box-shadow: inset -8px -8px 0 #e07a10, 0 -4px 0 0 #6b3a05, 0 4px 0 0 #6b3a05, -4px 0 0 0 #6b3a05, 4px 0 0 0 #6b3a05; animation: coinflip .8s steps(4) infinite; }
@keyframes coinflip { 0%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.5); } 50% { transform: scaleX(.12); } }

@media (max-width: 560px) {
  body { font-size: 20px; }
  .container { width: calc(100% - 20px); }
  .card { padding: 16px 14px; }
  .room-wrap { padding: 18px 0 90px; }
  .chat { height: 260px; }
  .chat.game-chat { height: auto; margin-top: 18px; }
  .game-bar { flex-wrap: nowrap; margin-bottom: 14px; gap: 8px; }
  .game-bar .pl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
  .game-bar .pl::-webkit-scrollbar { display: none; }
  .pchip { flex: none; max-width: 70%; }
  .game-bar .btn { flex: none; margin: 0 4px; }
  .game-stage { min-height: 0; }
  .toast { max-width: none; }
  .hero { padding-top: 40px; }
  .topbar .container { height: 60px; }
  .btn-text-hide { display: none; }
  .topbar .container { gap: 8px; }
  .room-title { gap: 6px; flex: 1 1 auto; }
  .room-title h1 { display: none; }
  .room-title .gi { width: 36px; height: 36px; }
  .room-title .chip { font-size: .42rem; padding: 6px 7px; }
  #leave-btn { flex: none; margin: 0; }
  .game-stage { padding: 20px 8px; }
  .join-box { flex-direction: column; align-items: stretch; }
  #toasts { right: 10px; left: 10px; }
}

/* -------------------------------------------------- katılma (davet) sayfası */
.invite-card { width: min(460px, 100%); text-align: left; }
.invite-card .modal-icon { --bc: var(--c, var(--purple)); }
.invite-card .eyebrow-sm { margin: 0 0 8px; color: var(--muted); font-size: 1.3rem; }
.invite-card h1 { font-size: 1.05rem; margin: 0 0 16px; color: #fff; text-shadow: 3px 3px 0 var(--c, var(--purple)); }
.invite-card .btn-row { margin-bottom: 18px; }
.invite-card .fail-icon { margin-bottom: 14px; }
.center-screen .card.fail { text-align: center; }

/* -------------------------------------------------- oyun modülleri için ortak piksel bileşenleri
   Oyunlar bunları doğrudan kullanabilir: .px-status .px-rows .px-row .px-bar .px-pill .pbox */
.pbox {
  --bc: #3a3480; margin: 4px; background: #0e0b26;
  box-shadow: 0 -4px 0 0 var(--bc), 0 4px 0 0 var(--bc), -4px 0 0 0 var(--bc), 4px 0 0 0 var(--bc),
    inset 4px 4px 0 0 rgba(255, 255, 255, .06), inset -4px -4px 0 0 rgba(0, 0, 0, .45);
}
.px-status { min-height: 1.6em; font: 400 .62rem/1.6 var(--px); text-transform: uppercase; color: var(--muted); text-align: center; }
.px-status.mine { color: var(--yellow); text-shadow: 2px 2px 0 #5a3000; animation: blink 1s steps(2) infinite; }
.px-head { font: 400 .6rem/1.6 var(--px); text-transform: uppercase; color: var(--cyan); text-shadow: 2px 2px 0 #08506a; text-align: center; }
.px-rows { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.px-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px; font-size: 1.4rem; background: #0e0b26;
  box-shadow: inset 4px 4px 0 rgba(255, 255, 255, .05), inset -4px -4px 0 rgba(0, 0, 0, .4);
}
.px-row.me { background: #0a1c2c; box-shadow: 0 -2px 0 0 var(--cyan), 0 2px 0 0 var(--cyan), -2px 0 0 0 var(--cyan), 2px 0 0 0 var(--cyan); }
.px-row .nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-row .score { font: 400 .7rem var(--px); color: var(--yellow); min-width: 2ch; text-align: right; }
.px-bar { width: 100%; height: 16px; background: #03020c; box-shadow: 0 -3px 0 0 #3a3480, 0 3px 0 0 #3a3480, -3px 0 0 0 #3a3480, 3px 0 0 0 #3a3480; }
.px-bar i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, var(--orange) 0 12px, #b5520a 12px 16px); }
.px-bar.reveal i { background: repeating-linear-gradient(90deg, var(--cyan) 0 12px, #0a8aa6 12px 16px); }
.px-pill {
  display: flex; align-items: center; gap: 10px; margin: 4px; padding: 8px 14px 8px 10px; font-size: 1.35rem; background: #0e0b26; opacity: .55;
  box-shadow: 0 -3px 0 0 #3a3480, 0 3px 0 0 #3a3480, -3px 0 0 0 #3a3480, 3px 0 0 0 #3a3480; transition: opacity .1s steps(2);
}
.px-pill.active { opacity: 1; --pc: var(--yellow); box-shadow: 0 -3px 0 0 var(--pc), 0 3px 0 0 var(--pc), -3px 0 0 0 var(--pc), 3px 0 0 0 var(--pc); transform: translateY(-3px); }
@keyframes px-pop { from { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.2); } }
@keyframes px-flash { 50% { filter: brightness(1.8); } }

/* ==========================================================
   Duyarlı yerleşim: dokunmatik, güvenli alan, kısa ekranlar
   ========================================================== */
:root {
  /* Oyun alanına ayrılabilecek yükseklik (üst çubuk, oyuncu çubuğu ve kenar boşlukları düşülmüş). Oyunlar bunu kullanır. */
  --chrome: 250px;
  --avail: calc(100vh - var(--chrome));
}
@supports (height: 100dvh) { :root { --avail: calc(100dvh - var(--chrome)); } }
@media (max-width: 560px) { :root { --chrome: 210px; } }
#game-root { container-type: inline-size; }

.topbar { padding-top: env(safe-area-inset-top); }
.room-wrap, footer.site { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

/* Parmakla rahat basılsın: en az ~44px hedef */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .btn-sm { min-height: 44px; }
  .input { min-height: 48px; }
  .switch { width: 64px; height: 34px; }
  .switch span::after { width: 26px; height: 26px; }
  .switch input:checked + span::after { transform: translateX(30px); }
  .game-card, .step { touch-action: manipulation; }
  .btn:hover:not(:disabled), .game-card:hover { transform: none; filter: none; }
}
button, .btn, .game-card, .g-ttt-cell, .g-c4-col, .g-rps-btn, .g-rx-pad { touch-action: manipulation; }

@media (max-width: 400px) {
  .room-title .gi { display: none; }
  .modal { padding: 20px 16px; }
  .btn { padding: 12px 12px; }
  .hero .eyebrow { font-size: .46rem; }
}

/* Telefon yatay / çok kısa ekran: üst çubuk ve boşluklar küçülür, oyun tek ekrana sığar */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --chrome: 124px; }
  .topbar .container { height: 46px; }
  .topbar::after { height: 3px; bottom: -6px; }
  .logo .sprite { width: 24px; height: auto; }
  .room-wrap { padding: 14px 0 28px; }
  .game-bar { margin-bottom: 8px; flex-wrap: nowrap; }
  .game-bar .pl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pchip { flex: none; }
  .game-stage { padding: 10px 12px; min-height: 0; }
  .result { margin-top: 18px; padding: 18px 14px; }
  .center-screen { min-height: 60vh; }
  .hero { padding: 18px 0 8px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero p { margin-top: 10px; font-size: 1.3rem; }
  .steps { margin-top: 14px; }
  .modal { padding: 18px 20px; }
  .modal-icon { width: 56px; height: 56px; margin-bottom: 8px; }
  .modal-icon .sprite { transform: scale(.7); }
}

/* -------------------------------------------------- SEO bölümü ve oyun sayfaları */
.seo { padding: 10px 0 20px; color: #b8b4e8; }
.seo h2 { font-size: .8rem; color: #fff; text-shadow: 3px 3px 0 var(--purple); margin-bottom: 14px; }
.seo p { max-width: 860px; font-size: 1.35rem; margin: 0 0 14px; }
.seo-games { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px 22px; font-size: 1.25rem; }
.seo-games a { color: var(--cyan); text-decoration: none; }
.seo-games a:hover { text-decoration: underline; }
.game-page { padding: 34px 0 20px; }
.game-page h1 { font-size: clamp(1rem, 3.6vw, 1.7rem); color: #fff; text-shadow: 4px 4px 0 var(--purple); margin: 14px 0 18px; }
.game-page .lead { max-width: 820px; font-size: 1.55rem; color: #c9c5f5; margin: 0 0 16px; }
.game-page .game-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 22px; }
.game-page .card { margin: 26px 4px; }
.crumbs { font-size: 1.15rem; color: var(--muted); }
.crumbs a { color: var(--cyan); text-decoration: none; }
.steps-list { margin: 0; padding-left: 26px; font-size: 1.35rem; display: flex; flex-direction: column; gap: 8px; }
footer.site a { color: var(--cyan); }

/* -------------------------------------------------- dil butonu (sağ üst) */
.lang-switch { display: inline-flex; flex: none; margin: 0 4px; box-shadow: 0 -3px 0 0 #3a3480, 0 3px 0 0 #3a3480, -3px 0 0 0 #3a3480, 3px 0 0 0 #3a3480; background: #05040f; }
.lang-opt { min-width: 40px; min-height: 30px; padding: 6px 8px; border: 0; background: transparent; color: var(--muted); font: 400 .55rem var(--px); cursor: pointer; text-transform: uppercase; }
.lang-opt:hover { color: #fff; background: #1a1650; }
.lang-opt.on { background: var(--yellow); color: #000; cursor: default; }
.lang-opt:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 3px; }
@media (pointer: coarse) { .lang-opt { min-height: 40px; min-width: 44px; } }
@media (max-width: 400px) { .lang-opt { min-width: 32px; padding: 6px 5px; font-size: .5rem; } .lang-switch { margin: 0 2px; } #room-status { display: none; } }