/*
 * Yellow Blast tasarımı: "şeker kil" — krem zemin üzerinde pastel lekeler, yumuşak 3B kil kartlar
 * ve alttan kalın kenarlı (basınca çöken) düğmeler. Vurgu sarı + lila; başlıklar Baloo 2, metin Nunito.
 * --blue adı eski koddan kalma; artık ana vurgu rengi (lila) demek.
 */
:root {
  --bg: #fff7ea;
  --blob-1: rgba(255, 201, 60, .34);
  --blob-2: rgba(139, 108, 255, .16);
  --blob-3: rgba(255, 111, 181, .15);
  --paint:
    radial-gradient(70vmax 46vmax at -10% -8%, var(--blob-1), transparent 62%),
    radial-gradient(56vmax 44vmax at 112% 18%, var(--blob-2), transparent 62%),
    radial-gradient(64vmax 46vmax at 30% 118%, var(--blob-3), transparent 62%),
    var(--bg);
  --surface: #ffffff;
  --text: #2b2340;
  --text-2: #6c6286;
  --text-3: #9b92b3;
  --border: #e4d9f2;
  --ledge: #eadff7;
  --fill: rgba(139, 108, 255, .09);
  --fill-2: rgba(139, 108, 255, .17);
  --blue: #6c4cf5;
  --blue-hover: #5b3ce8;
  --orange: #f0711f;
  --yellow: #ffc93c;
  --focus: 0 0 0 4px rgba(108, 76, 245, .3);
  --radius: 24px;
  --shadow: 0 5px 0 var(--ledge), 0 14px 30px rgba(87, 60, 160, .1);
  --clay: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -3px 8px rgba(87, 60, 160, .05);
  --ease: cubic-bezier(.3, .7, .4, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif;

  --board-size: min(94vw, 470px, calc((100vh - 290px) / 1.4));
  --mini: calc(var(--board-size) / 17);
  --mini-gap: 2px;
  --green: #17a865;
  --red: #f0365a;

  --btn: #ffc93c;
  --btn-hover: #ffd25c;
  --btn-active: #ffc021;
  --btn-text: #2b2340;
  --btn-ledge: #e0a100;
  --bar: rgba(255, 250, 241, .88);
  --bar-glow: rgba(255, 201, 18, .2);
  --hairline: rgba(43, 35, 64, .12);
  --hairline-soft: rgba(43, 35, 64, .06);
  --cell: #f3edfb;
  --cell-inset: inset 0 2px 3px rgba(87, 60, 160, .09);
  --sheet: #ffffff;
  --glass: rgba(255, 255, 255, .92);
  --glass-strong: rgba(255, 255, 255, .97);
  --pop-shadow: 0 5px 0 var(--ledge), 0 20px 44px rgba(87, 60, 160, .2);
  --sheet-shadow: 0 8px 0 var(--ledge), 0 30px 70px rgba(43, 35, 64, .3);
  --scrim: rgba(43, 35, 64, .45);
  --dim: rgba(255, 247, 234, .6);
  --glow: #ffffff;
  --toast: rgba(43, 35, 64, .95);
  --track: rgba(43, 35, 64, .12);
  --seg-active: #ffffff;
  --gold-bg: rgba(255, 201, 60, .3);
  --gold-text: #946500;
  --gold-text-2: #7a5300;
  --blue-tint: rgba(108, 76, 245, .1);
  --orange-tint: rgba(240, 113, 31, .12);
  --green-tint: rgba(23, 168, 101, .13);
  --red-tint: rgba(240, 54, 90, .1);
  --list-sep: rgba(43, 35, 64, .12);
}

:root[data-theme="dark"] {
  --bg: #1b1530;
  --blob-1: rgba(255, 201, 60, .1);
  --blob-2: rgba(139, 108, 255, .24);
  --blob-3: rgba(255, 111, 181, .12);
  --surface: #2a2246;
  --text: #f7f2ff;
  --text-2: #bdb2da;
  --text-3: #8d82ad;
  --border: #463b70;
  --ledge: #120c24;
  --fill: rgba(169, 150, 255, .13);
  --fill-2: rgba(169, 150, 255, .23);
  --blue: #ad9bff;
  --blue-hover: #c0b2ff;
  --orange: #ff9f5a;
  --green: #3ddc97;
  --red: #ff5c7a;
  --focus: 0 0 0 4px rgba(173, 155, 255, .4);
  --shadow: 0 5px 0 var(--ledge), 0 16px 34px rgba(0, 0, 0, .35);
  --clay: inset 0 2px 0 rgba(255, 255, 255, .07), inset 0 -3px 8px rgba(0, 0, 0, .15);

  --btn-ledge: #b98400;
  --bar: rgba(27, 21, 48, .88);
  --bar-glow: rgba(255, 201, 18, .07);
  --hairline: rgba(255, 255, 255, .12);
  --hairline-soft: rgba(255, 255, 255, .06);
  --cell: #352c58;
  --cell-inset: inset 0 2px 4px rgba(0, 0, 0, .35);
  --sheet: #2a2246;
  --glass: rgba(42, 34, 70, .92);
  --glass-strong: rgba(42, 34, 70, .97);
  --pop-shadow: 0 5px 0 var(--ledge), 0 20px 44px rgba(0, 0, 0, .5);
  --sheet-shadow: 0 8px 0 var(--ledge), 0 30px 70px rgba(0, 0, 0, .6);
  --scrim: rgba(10, 6, 24, .62);
  --dim: rgba(27, 21, 48, .55);
  --glow: #1b1530;
  --toast: rgba(62, 51, 102, .97);
  --track: rgba(255, 255, 255, .16);
  --seg-active: #3d3367;
  --gold-bg: rgba(255, 201, 60, .16);
  --gold-text: #ffd36b;
  --gold-text-2: #ffd36b;
  --blue-tint: rgba(173, 155, 255, .15);
  --orange-tint: rgba(255, 159, 90, .16);
  --green-tint: rgba(61, 220, 151, .15);
  --red-tint: rgba(255, 92, 122, .16);
  --list-sep: rgba(255, 255, 255, .1);
}

h1, h2, h3,
.score, .final-score, .countdown span, .room-code, .hud-score, .praise-main,
.game-info strong, .mode-text strong, .lobby-title, .elo-text strong, .res-elo strong, .res-player strong {
  font-family: var(--font-display);
}

.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: inline; }

@supports (height: 100dvh) {
  :root {
    --board-size: min(94vw, 470px, calc((100dvh - 290px) / 1.4));
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; overscroll-behavior: none; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--paint);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

p { margin: 0; }
img { display: block; max-width: 100%; }
.hidden, [hidden] { display: none !important; }
button { touch-action: manipulation; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font: 800 15px/1 var(--font);
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .2s, color .2s, opacity .2s;
}
.btn-sm { min-height: 32px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.btn-lg { min-height: 50px; padding: 0 24px; border-radius: 17px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-primary {
  background: var(--btn);
  color: var(--btn-text);
  box-shadow: 0 4px 0 var(--btn-ledge), inset 0 2px 0 rgba(255, 255, 255, .55);
}
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary:active {
  background: var(--btn-active);
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--btn-ledge), inset 0 2px 0 rgba(255, 255, 255, .4);
}
.btn-secondary {
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 4px 0 var(--ledge), inset 0 0 0 2px var(--fill-2);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ledge), inset 0 0 0 2px var(--fill-2); }
.btn-plain { min-height: 32px; padding: 0 8px; background: none; color: var(--blue); }
.btn-plain:hover { opacity: .75; }
.btn-danger { color: var(--red); }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn.busy { position: relative; color: transparent !important; opacity: 1; }
.btn.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: rgba(43, 35, 64, .85) rgba(43, 35, 64, .85) rgba(43, 35, 64, .2) rgba(43, 35, 64, .2);
  animation: spin .7s linear infinite;
}
.btn-secondary.busy::after, .btn-plain.busy::after {
  border-color: var(--blue) var(--blue) var(--track) var(--track);
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--track);
  border-top-color: var(--text-2);
  vertical-align: -4px;
  animation: spin .8s linear infinite;
}
.spinner.big { width: 30px; height: 30px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn:focus-visible, .icon-btn:focus-visible { outline: 0; box-shadow: var(--focus); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 3px 0 var(--ledge), inset 0 0 0 2px var(--hairline-soft);
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .2s, color .2s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge), inset 0 0 0 2px var(--hairline-soft); }
.icon-btn .off, .icon-btn.muted .on { display: none; }
.icon-btn.muted .off { display: inline; }
.icon-btn.muted { color: var(--text-2); }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.pill-accent { background: var(--orange-tint); color: var(--orange); }
.pill-good { background: var(--green-tint); color: var(--green); }
.pill-bad { background: var(--red-tint); color: var(--red); }

/* ---------- Navigation bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  flex: none;
  padding-top: env(safe-area-inset-top);
  background:
    radial-gradient(320px 130px at 150px 60%, var(--bar-glow), transparent 70%),
    var(--bar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 5px 0 var(--ledge), 0 16px 34px rgba(87, 60, 160, .12), var(--clay);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 82px;
  padding: 0 28px 0 32px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px 0 13px;
  border-radius: 15px;
  background: var(--fill);
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, transform .25s var(--bounce);
}
.nav-back:hover { background: var(--fill-2); transform: translateX(-2px); }
body.in-match .nav-back { display: none !important; }
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.logo-full, .logo-icon { flex: none; transition: transform .35s var(--bounce); }
.logo-full { width: auto; height: 54px; }
.logo-icon { display: none; width: 50px; height: 50px; }
.brand:hover .logo-full, .brand:hover .logo-icon { transform: rotate(-3deg) scale(1.04); }
.brand-text {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.brand-text small {
  --g: #f5b200;
  padding: 5px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--g) 16%, var(--surface));
  color: color-mix(in srgb, var(--g) 72%, var(--text));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g) 28%, transparent), 0 3px 0 color-mix(in srgb, var(--g) 22%, var(--ledge));
  font: 700 15px / 1.2 var(--font-display);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 21px;
  background: var(--fill);
}
.topbar-actions .icon-btn { width: 42px; height: 42px; border-radius: 15px; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex: none; }
.login-btn { min-height: 48px; padding: 0 20px 0 16px; border-radius: 17px; gap: 8px; font-size: 16px; }
.login-btn[hidden], body.in-match .login-btn { display: none; }

/* ---------- Layout ---------- */

.app {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
}
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
body.in-match .solo-only { display: none !important; }

/* ---------- Scores ---------- */

.scores {
  width: var(--board-size);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
}
.best {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold-bg);
  color: var(--gold-text);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.score-wrap { text-align: center; }
.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.score {
  font-size: clamp(38px, 10vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 var(--btn);
}
.score.bump { animation: bump .3s var(--ease); }
@keyframes bump { 40% { transform: scale(1.12); } }

/* ---------- Board ---------- */

.board-wrap { position: relative; }

.board {
  width: var(--board-size);
  height: var(--board-size);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  padding: 10px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--clay);
  transition: filter .6s;
  touch-action: none;
}
.board.over { filter: grayscale(.9) opacity(.75); }
.board.shake { animation: shake .4s; }
@keyframes shake {
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}

.cell {
  border-radius: 9px;
  background: var(--cell);
  box-shadow: var(--cell-inset);
}

.block {
  --bev: 3px;
  border-radius: 9px;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%), var(--c);
  box-shadow:
    inset 0 calc(var(--bev) * -1.3) 0 rgba(0, 0, 0, .16),
    inset 0 2px 0 rgba(255, 255, 255, .5),
    0 2px 3px rgba(43, 35, 64, .14);
}

.cell.ghost {
  background: var(--c);
  opacity: .35;
  box-shadow: none;
}

.cell.highlight {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 60%), var(--c);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 12px var(--c);
}

.cell.placed { animation: place .22s var(--ease); }
@keyframes place {
  from { transform: scale(.75); }
  to { transform: scale(1); }
}

.cell.clearing { animation: clear .45s ease-in both; }
@keyframes clear {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.12); filter: brightness(1.35); }
  100% { transform: scale(0); opacity: 0; }
}

/* ---------- Tray ---------- */

.tray {
  width: var(--board-size);
  height: calc(var(--board-size) * .36);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  touch-action: none;
}
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.slot.dragging .piece { opacity: 0; }

.piece {
  display: grid;
  transition: transform .2s var(--ease), opacity .2s, filter .2s;
}
.tray .block { --bev: 2px; border-radius: 5px; }
.slot:hover .piece:not(.unfit) { transform: scale(1.06); }
.piece.unfit { opacity: .3; filter: grayscale(1); }
.piece.appear { animation: appear .35s cubic-bezier(.2, 1.4, .4, 1) backwards; }
@keyframes appear { from { transform: scale(0); opacity: 0; } }

.drag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  will-change: transform;
}
.drag .piece {
  animation: lift .12s var(--ease);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .18));
}
@keyframes lift { from { transform: scale(.55); } }

.hint {
  max-width: var(--board-size);
  font-size: 13px;
  line-height: 1.38;
  text-align: center;
  color: var(--text-2);
  letter-spacing: 0;
}

/* ---------- Effects ---------- */

.fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float-score {
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 0 6px var(--glow), 0 0 2px var(--glow);
  font-variant-numeric: tabular-nums;
  animation: floatUp .9s var(--ease) forwards;
}
@keyframes floatUp {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -160%) scale(1); opacity: 0; }
}

.praise {
  position: absolute;
  left: 50%;
  top: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 28px;
  border-radius: 26px;
  white-space: nowrap;
  background: var(--glass-strong);
  box-shadow: var(--pop-shadow), inset 0 0 0 3px var(--btn);
  animation: praise 1.3s var(--ease) forwards;
}
.praise-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 700;
  line-height: 1.1;
}
.praise-main::before {
  content: "";
  flex: none;
  width: .8em;
  height: .8em;
  background: url("assets/favicon.png") center / contain no-repeat;
}
.praise-combo {
  font-size: 15px;
  font-weight: 800;
  color: var(--blue);
}
@keyframes praise {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { transform: translate(-50%, -55%); opacity: 1; }
  100% { transform: translate(-50%, -70%); opacity: 0; }
}

/* ---------- Game over sheet ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
  animation: sheet-fade .3s var(--ease);
}
.sheet {
  width: 100%;
  max-width: 380px;
  padding: 38px 34px 30px;
  border-radius: 30px;
  background: var(--sheet);
  text-align: center;
  box-shadow: var(--sheet-shadow), var(--clay);
  animation: sheet-in .4s var(--bounce);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes sheet-fade { from { opacity: 0; } }

.sheet .logo-mark { display: block; margin: 0 auto 16px; animation: wiggle 1.4s .3s var(--ease); }
@keyframes wiggle { 20% { transform: rotate(-10deg) scale(1.08); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(0); } }
.sheet h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
}
.final-label {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.final-score {
  font-size: 58px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 var(--btn);
}
#newBest { margin-top: 6px; }
.final-best {
  margin: 10px 0 26px;
  font-size: 15px;
  color: var(--text-2);
  letter-spacing: 0;
}

/* ---------- Install sheet ---------- */

.sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--fill);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.sheet-close:hover { background: var(--fill-2); color: var(--text); }
/* ---------- Online: alt düğmeler ---------- */

.bottom-actions {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.online-btn { box-shadow: 0 4px 0 var(--btn-ledge), 0 12px 26px rgba(255, 170, 0, .32), inset 0 2px 0 rgba(255, 255, 255, .55); }

body.in-match .scores,
body.in-match .hint,
body.in-match #restartBtn { display: none !important; }

/* ---------- Online: maç göstergesi ---------- */

.match-hud {
  width: min(94vw, 470px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 62px;
}
.hud-side { display: flex; flex-direction: column; min-width: 0; }
.hud-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-score {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hud-me .hud-name { color: var(--blue); }
.hud-center { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hud-mode {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-text);
  box-shadow: 0 2px 0 var(--btn-ledge);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.hud-timer {
  min-height: 22px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hud-timer.urgent { color: var(--red); animation: tick 1s infinite; }
.hud-lvl { display: inline-block; margin-right: 5px; vertical-align: -5px; line-height: 0; }
.hud-elo {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- ELO seviye rozeti: altıgen kalkan ---------- */

.lvl-badge { display: block; flex: none; overflow: visible; }
.lvl-badge text { font-family: var(--font-display); font-weight: 700; }
:root[data-theme="dark"] .lvl-badge > path:first-of-type { stroke: #574a8c; }

.elo-card {
  --lvl: #ffc800;
  position: relative;
  margin-top: 12px;
  padding: 16px 16px 14px;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--lvl) 24%, transparent), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow), var(--clay);
}
.elo-main { display: flex; align-items: center; gap: 14px; }
.elo-badge { line-height: 0; filter: drop-shadow(0 4px 0 rgba(43, 35, 64, .14)); }
.elo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1; }
.elo-text strong { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.elo-text small { font-family: var(--font); font-size: 12px; font-weight: 800; color: var(--text-3); letter-spacing: .08em; }
.elo-text > span {
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lvl) 28%, var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}
.elo-form { display: flex; gap: 5px; }
.form-chip {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 26px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.form-w { background: #22b573; }
.form-l { background: #f0365a; }
.form-d { background: #a39cb8; }
.elo-bar {
  height: 14px;
  margin-top: 14px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill);
  box-shadow: inset 0 2px 3px rgba(43, 35, 64, .1);
}
.elo-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px), var(--lvl);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
  transition: width .6s var(--bounce);
}
.elo-range {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.elo-range #eloNext { color: var(--text); font-weight: 800; text-align: center; }

.rank-elo { display: inline-flex; align-items: center; gap: 8px; }

.res-elo {
  --lvl: #ffc800;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--lvl) 14%, var(--fill));
}
.res-elo > span:first-child { line-height: 0; }
.res-elo strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-elo small { font-family: var(--font); font-size: 12px; font-weight: 800; color: var(--text-3); }
.res-elo .pill { font-size: 13px; }
.res-elo-level {
  flex-basis: 100%;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-2);
}
.res-elo-level.up { color: var(--text); animation: level-up .8s var(--bounce); }
@keyframes level-up { from { transform: scale(.6); opacity: 0; } }

/* ---------- Dil düğmesi ---------- */

.lang-btn { width: auto; min-width: 34px; padding: 0 9px; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
body.in-match .lang-btn { display: none; }
@keyframes tick { 50% { opacity: .55; } }

.hud-opp { flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
.hud-opp-text { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.hud-opp .hud-score { font-size: 20px; }
.hud-badge {
  margin-top: 1px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
}
.opp-view { flex: none; display: flex; }
.opp-view:empty { display: none; }
.mini-board {
  flex: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  width: 58px;
  height: 58px;
  padding: 3px;
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--ledge);
}
.mini-board span { border-radius: 2px; background: var(--cell); }
.hud-mode.my-turn { background: var(--green-tint); color: var(--green); }

/* ---------- Online: tahta üstü ---------- */

.countdown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--dim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.countdown span {
  font-size: clamp(60px, 22vw, 104px);
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 6px 0 var(--btn);
}
.countdown span.pop { animation: pop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

.conn-warn {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 6;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--toast);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.board-note {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 6;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--glass-strong);
  box-shadow: var(--pop-shadow);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  animation: note 1.8s var(--ease) forwards;
}
.board-note.attack { color: var(--orange); }
.board-note.hit { color: var(--red); }
@keyframes note {
  0% { transform: translate(-50%, -8px); opacity: 0; }
  12%, 80% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -6px); opacity: 0; }
}

.board.hit { animation: hit .45s; }
@keyframes hit {
  0% { box-shadow: var(--shadow), 0 0 0 0 rgba(227, 0, 0, .5); }
  30% { transform: translateY(3px); box-shadow: var(--shadow), 0 0 0 6px rgba(227, 0, 0, .25); }
  100% { box-shadow: var(--shadow), 0 0 0 0 rgba(227, 0, 0, 0); }
}
.cell.garbage-in { animation: garbage .4s var(--ease); }
@keyframes garbage { from { transform: scale(1.4); opacity: 0; } }

.app-toast {
  position: fixed;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 400;
  max-width: calc(100vw - 32px);
  padding: 11px 20px;
  border-radius: 18px;
  background: var(--toast);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .22), 0 14px 30px rgba(43, 35, 64, .25);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transform: translateX(-50%);
}
.app-toast.show { animation: toast .4s var(--bounce); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---------- Online: lobi ---------- */

.lobby {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  background: var(--paint);
  animation: lobby-in .4s var(--bounce);
  user-select: text;
  -webkit-user-select: text;
}
@keyframes lobby-in { from { opacity: 0; transform: translateY(24px); } }
.lobby-bar {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(82px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 28px 0;
  background: var(--bar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 5px 0 var(--ledge), 0 16px 34px rgba(87, 60, 160, .12), var(--clay);
}
.lobby-title { grid-column: 2; font-size: 26px; font-weight: 800; }
.lobby-back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px 0 13px;
  border: 0;
  border-radius: 15px;
  background: var(--fill);
  color: var(--blue);
  font: 800 15px var(--font);
  cursor: pointer;
}
.lobby .lobby-close { position: static; grid-column: 3; justify-self: end; width: 42px; height: 42px; border-radius: 15px; }
.lobby-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.lobby-view {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 20px calc(32px + env(safe-area-inset-bottom));
}
.lobby-view.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-align: center;
}
.lobby-view h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 700;
}
.lobby-logo { margin-bottom: 18px; }
.lobby-sub {
  margin: 10px auto 26px;
  max-width: 360px;
  font-size: 17px;
  color: var(--text-2);
}
.lobby-sub.left { margin: 8px 0 22px; text-align: left; }
.lobby-sub strong { color: var(--text); font-weight: 600; }
.lobby-note {
  margin: -12px 0 22px;
  padding: 11px 15px;
  border-radius: 16px;
  font-weight: 600;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 15px;
}
.lobby-foot { margin-top: 22px; font-size: 13px; color: var(--text-3); }

.auth-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 340px; }
.google-slot { width: 100%; }
.google-btn { display: flex; justify-content: center; min-height: 44px; }
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 14px;
  font-size: 13px;
  color: var(--text-3);
}
.or::before, .or::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--border); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.lobby-view > h1 + .auth-form { margin-top: 22px; }
.fields {
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--ledge);
}
.float-field { position: relative; display: block; }
.float-field + .float-field { border-top: 2px solid var(--border); }
.float-field input {
  width: 100%;
  height: 56px;
  padding: 22px 16px 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 600 17px var(--font);
}
.float-field span {
  position: absolute;
  left: 16px;
  top: 17px;
  color: var(--text-3);
  font-size: 17px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .15s var(--ease), color .15s;
}
.float-field input:focus + span,
.float-field input:not(:placeholder-shown) + span { transform: translateY(-10px) scale(.72); }
.float-field input:focus + span { color: var(--blue); }
.fields:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.float-field.has-toggle input { padding-right: 58px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .2s, color .2s;
}
.pw-toggle:hover { background: var(--fill); color: var(--blue); }
.pw-toggle .eye-off, .pw-toggle.on .eye { display: none; }
.pw-toggle.on .eye-off { display: block; }
.pw-toggle.on { color: var(--blue); }

.code-input {
  width: 100%;
  height: 66px;
  border: 2px solid var(--border);
  border-radius: 18px;
  outline: 0;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--ledge);
  color: var(--text);
  font: 600 30px var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .35em;
  text-align: center;
  text-indent: .35em;
}
.code-input:focus { border-color: var(--blue); box-shadow: var(--focus); }
.code-input::placeholder { color: var(--border); }

.form-hint { font-size: 13px; color: var(--text-3); }
.form-error {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--red-tint);
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.lobby-view.center .form-error { margin-top: 16px; text-align: center; }
.form-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; }

.profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--clay);
}
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--yellow);
  color: #2b2340;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), inset 0 2px 0 rgba(255, 255, 255, .5);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  transform: rotate(-4deg);
}
.profile-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.profile-info strong { overflow: hidden; font-family: var(--font-display); font-size: 19px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-info span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.guest-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 8px 8px 14px;
  border-radius: 16px;
  font-weight: 700;
  background: var(--gold-bg);
  color: var(--gold-text-2);
  font-size: 13px;
}

.segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 3px;
  padding: 4px;
  border-radius: 17px;
  background: var(--fill);
  box-shadow: inset 0 2px 3px rgba(43, 35, 64, .07);
}
.segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 13px;
  background: none;
  color: var(--text-2);
  font: 800 14px var(--font);
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, color .2s, transform .25s var(--bounce);
}
.segmented button:hover:not(.active) { color: var(--text); }
.segmented button.active {
  background: var(--seg-active);
  color: var(--text);
  box-shadow: 0 3px 0 var(--ledge), 0 6px 14px rgba(87, 60, 160, .12);
  transform: translateY(-1px);
}
.lobby-tabs { margin: 22px 0 6px; }
.rank-tabs { margin: 18px 0 14px; }

.sg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.sg-header::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: var(--btn);
  box-shadow: 0 2px 0 var(--btn-ledge);
  transform: rotate(45deg);
}

/* Lobi ana ekranı: solda profil ve oyun seçimi, sağda seçili oyun */
.lobby-view.lobby-home { max-width: 560px; }
.home-side .side-header { margin-top: 22px; }
.game-hero {
  --g: var(--blue);
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  padding: 18px 24px 18px 18px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(130% 160% at 100% 0%, rgba(255, 255, 255, .5), transparent 55%),
    color-mix(in srgb, var(--g) 22%, var(--surface));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--g) 35%, var(--ledge)), 0 16px 34px rgba(87, 60, 160, .12), var(--clay);
}
.hero-art {
  display: grid;
  place-items: center;
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--g) 16%, var(--surface));
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--g) 25%, transparent), inset 0 2px 0 rgba(255, 255, 255, .55);
  overflow: hidden;
}
.hero-art > div { transform: scale(1.35); }
.hero-art > .kl-art { transform: scale(1.05); }
.hero-text { display: flex; flex-direction: column; min-width: 0; }
.hero-text small {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--g);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.hero-text strong { font: 800 clamp(28px, 4vw, 38px) / 1.05 var(--font-display); }
.hero-text span { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-2); }
:root[data-theme="dark"] .game-hero {
  background:
    radial-gradient(130% 160% at 100% 0%, rgba(255, 255, 255, .06), transparent 55%),
    color-mix(in srgb, var(--g) 22%, var(--surface));
}
:root[data-theme="dark"] .hero-art { box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--g) 25%, transparent), inset 0 2px 0 rgba(255, 255, 255, .08); }
[data-view="home"][data-tab="chat"] .game-hero,
[data-view="home"][data-tab="chat"] .side-header { display: none; }

@media (min-width: 900px) {
  .lobby-view.lobby-home {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    max-width: 1140px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .home-side { position: sticky; top: 28px; }
  .home-main > .game-hero { margin-top: 0; }
}

.mode-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mode-card {
  --m: var(--blue);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px 14px;
  padding: 18px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--m) 14%, transparent), transparent 60%),
    var(--surface);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--m) 30%, var(--ledge)), 0 12px 26px rgba(87, 60, 160, .08), var(--clay);
  transition: transform .3s var(--bounce);
}
.mode-card:hover { transform: translateY(-3px); }
.mode-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--m);
  color: #fff;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .35);
  transform: rotate(-4deg);
}
.mode-text { display: flex; flex-direction: column; gap: 3px; }
.mode-text strong { font-size: 21px; font-weight: 700; line-height: 1.15; }
.mode-text span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.mode-actions { grid-column: 1 / -1; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-actions .btn { min-width: 0; padding-left: 10px; padding-right: 10px; }

.join-form { display: flex; flex-direction: column; gap: 10px; }
.join-card {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--clay);
}
.join-row { display: flex; gap: 10px; }
.room-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 2px solid var(--border);
  border-radius: 15px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font: 700 17px var(--font);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.room-input::placeholder { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.room-input:focus { border-color: var(--blue); box-shadow: var(--focus); }
.join-row .btn { min-height: 46px; }

.rank-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--clay);
}
.rank-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 17px;
  font-size: 16px;
}
.rank-row + .rank-row { margin-top: 2px; }
.rank-row:nth-child(even) { background: color-mix(in srgb, var(--fill) 55%, transparent); }
.rank-row.me { background: var(--gold-bg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--yellow) 60%, transparent); }
.rank-pos {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.rank-row:nth-child(-n + 3) .rank-pos { color: #2b2340; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .45); }
.rank-row:nth-child(1) .rank-pos { background: #ffc93c; }
.rank-row:nth-child(2) .rank-pos { background: #d9d3ea; }
.rank-row:nth-child(3) .rank-pos { background: #f4a96e; }
.rank-name { display: flex; flex-direction: column; min-width: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { font-size: 12px; font-weight: 700; color: var(--text-3); }
.rank-value { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-empty { padding: 26px 16px; color: var(--text-2); text-align: center; font-size: 15px; }
.rank-me { margin-top: 12px; color: var(--text-2); font-size: 14px; text-align: center; }

.pulse-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin-bottom: 18px;
}
.pulse-logo::before, .pulse-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(253, 199, 0, .3);
  animation: pulse 2s var(--ease) infinite;
}
.pulse-logo::after { animation-delay: 1s; }
.pulse-logo img { position: relative; animation: breathe 2s ease-in-out infinite; }
@keyframes pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(.92); } }

.room-code {
  margin: 0 0 22px;
  padding: 14px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), inset 0 0 0 3px var(--btn);
  color: var(--blue);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
  font-variant-numeric: tabular-nums;
  user-select: all;
  -webkit-user-select: all;
}
.room-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.room-wait { margin: 26px 0 8px; color: var(--text-2); font-size: 15px; }

/* ---------- Online: sonuç ---------- */

.result-sheet h2 { font-size: 32px; }
.result-sheet.won h2 { color: var(--text); text-shadow: 0 4px 0 var(--btn); }
.res-reason { margin-top: 6px; color: var(--text-2); font-size: 15px; font-weight: 600; }
.res-scores {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
  padding: 14px 10px;
  border-radius: 20px;
  background: var(--fill);
}
.res-player { display: flex; flex-direction: column; min-width: 0; }
.res-player span { overflow: hidden; font-size: 13px; font-weight: 800; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.res-player strong { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-player:first-child span { color: var(--blue); }
.res-vs { color: var(--text-3); font-size: 20px; }
.result-sheet #resRematch { margin-top: 8px; }
.res-note { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.res-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ---------- Arkadaşlar ve sohbet ---------- */

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font: 800 11px/1 var(--font);
  font-variant-numeric: tabular-nums;
}
.social-btn { position: relative; }
.social-btn .badge {
  position: absolute;
  top: -4px;
  right: -6px;
  box-shadow: 0 0 0 2px var(--bg);
}
body.in-match .social-btn { display: none; }
.btn .badge { margin-left: 2px; }
.lobby-tabs button { position: relative; }
.lobby-tabs .badge { position: absolute; top: -6px; right: 2px; box-shadow: 0 0 0 2px var(--bg); }
[data-view="home"][data-tab="chat"] .game-chips { display: none; }

.text-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 2px solid var(--border);
  border-radius: 15px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font: 600 16px var(--font);
}
.text-input::placeholder { color: var(--text-3); }
.text-input:focus, .room-input:focus { border-color: var(--blue); box-shadow: var(--focus); }

.social-locked {
  margin-top: 18px;
  padding: 22px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--clay);
  text-align: center;
}
.social-locked p { margin: 0 0 16px; color: var(--text-2); font-size: 15px; line-height: 1.45; }

[data-panel="friends"] .join-form { margin-top: 18px; }

.invite-list { display: flex; flex-direction: column; gap: 10px; }
.invite-list:not(:empty) { margin-top: 16px; }
.invite-card {
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 2px var(--fill-2);
}
.invite-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.invite-actions { display: flex; gap: 8px; }

.friend-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--clay);
}
.friend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 17px;
}
.friend-row + .friend-row { margin-top: 2px; }
.friend-row.incoming { background: var(--gold-bg); }
.friend-info { display: flex; flex-direction: column; min-width: 0; }
.friend-info strong { overflow: hidden; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.friend-info span { overflow: hidden; font-size: 13px; font-weight: 600; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.friend-info span.playing { color: var(--orange); }
.friend-row.incoming .friend-info span { color: var(--gold-text-2); }
.friend-actions { display: flex; align-items: center; gap: 6px; }
.friend-actions .btn-sm { padding: 0 12px; }
.friend-remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
.friend-remove:hover { background: var(--red-tint); color: var(--red); }
.friend-modes {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  background: var(--fill);
}
.friend-modes-label { font-size: 13px; font-weight: 800; color: var(--text-2); }
.friend-modes-row { display: flex; flex-wrap: wrap; gap: 8px; }
.friend-modes-row .btn { background: var(--surface); }
.friend-modes-hint { font-size: 12px; color: var(--text-3); }

.avatar.small { width: 40px; height: 40px; border-radius: 13px; font-size: 17px; position: relative; transform: none; }
.avatar.online::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Mesaj balonları */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px;
}
.chat-empty { margin: auto; padding: 20px 10px; color: var(--text-3); font-size: 14px; text-align: center; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; margin-top: 8px; }
.msg.grouped { margin-top: 0; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg-name {
  margin: 0 0 2px 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: 800 12px var(--font);
  cursor: pointer;
}
.msg-name:hover { text-decoration: underline; }
.msg-bubble {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2px 8px;
  padding: 8px 13px;
  border-radius: 18px 18px 18px 6px;
  background: var(--fill-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.msg.mine .msg-bubble { border-radius: 18px 18px 6px 18px; background: var(--btn); color: var(--btn-text); }
.msg-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-time { margin-left: auto; font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }

.chat-form { display: flex; gap: 8px; padding: 10px; }
.chat-form .btn { flex: none; width: 44px; min-height: 44px; padding: 0; }

.chat-box {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--clay);
}
.chat-box .chat-log { height: clamp(260px, calc(100dvh - 400px), 560px); }
.chat-box .chat-form { border-top: 1px solid var(--hairline-soft); }
.chat-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-top: 1px solid var(--hairline-soft);
  background: var(--blue-tint);
  font-size: 14px;
}
.chat-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rules { margin: 10px 4px 0; font-size: 12px; color: var(--text-3); text-align: center; }

.dm-view:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.dm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--hairline-soft);
}
.dm-view .chat-log { flex: 1; min-height: 160px; padding: 12px 2px; }
.dm-view .chat-form { padding: 10px 0 0; border-top: 1px solid var(--hairline-soft); }

/* Maç içi sohbet */
.bottom-actions { gap: 10px; }
.chat-btn { position: relative; }
.res-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.res-social .btn-plain:disabled { color: var(--text-3); }

.match-chat {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  max-height: min(70dvh, 520px);
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 26px 26px 0 0;
  background: var(--sheet);
  box-shadow: var(--sheet-shadow);
  transform: translateX(-50%);
  animation: chat-up .28s var(--ease);
}
@keyframes chat-up { from { transform: translate(-50%, 40px); opacity: 0; } }
.match-chat-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 56px 0 18px;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 16px;
}
.match-chat-bar .sheet-close { top: 11px; }
.match-chat .chat-log { flex: 1; min-height: 140px; }
.quick-chat {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 10px 0;
  scrollbar-width: none;
}
.quick-chat::-webkit-scrollbar { display: none; }
.quick-chip {
  flex: none;
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
  font: 800 13px var(--font);
  cursor: pointer;
}
.quick-chip:hover { background: var(--fill-2); }
.quick-chip:disabled { opacity: .5; }

.chat-pop {
  position: fixed;
  left: 50%;
  top: calc(62px + env(safe-area-inset-top));
  z-index: 240;
  display: flex;
  flex-direction: column;
  max-width: min(86vw, 360px);
  padding: 9px 16px;
  border-radius: 20px;
  background: var(--glass-strong);
  box-shadow: var(--pop-shadow);
  font-size: 15px;
  font-weight: 600;
  transform: translateX(-50%);
  cursor: pointer;
}
.chat-pop strong { font-size: 12px; font-weight: 800; color: var(--blue); }
.chat-pop span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.chat-pop.show { animation: pop-in .3s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } }

.notify-bar {
  position: fixed;
  left: 50%;
  top: calc(60px + env(safe-area-inset-top));
  z-index: 380;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 12px;
  width: min(calc(100vw - 24px), 460px);
  padding: 12px 14px;
  border-radius: 22px;
  background: var(--glass-strong);
  box-shadow: var(--pop-shadow), inset 0 0 0 2px var(--fill-2);
  transform: translateX(-50%);
}
.notify-bar.show { animation: toast .4s var(--bounce); }
.notify-bar p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.notify-actions { display: flex; justify-content: flex-end; gap: 8px; }
.notify-actions:empty { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 734px) {
  .topbar-inner { height: 66px; padding: 0 10px 0 14px; }
  .logo-full { height: 40px; }
  .topbar-actions { gap: 4px; padding: 4px; border-radius: 18px; }
  .topbar-actions .icon-btn { width: 38px; height: 38px; border-radius: 14px; }
  .topbar-right { gap: 8px; }
  .login-btn { min-height: 42px; padding: 0 14px 0 12px; border-radius: 15px; font-size: 15px; }
  .lobby-bar { height: calc(66px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; }
}

@media (max-width: 560px) {
  .brand-text { display: none; }
  .nav-back { min-height: 38px; padding: 0 12px; }
  .nav-back span { display: none; }
  .topbar-left { gap: 8px; }
  .topbar-inner { height: 62px; padding: 0 8px 0 12px; }
  .logo-full { height: 33px; }
  .topbar-actions .icon-btn { width: 36px; height: 36px; border-radius: 13px; }
  .topbar-right { gap: 6px; }
  .login-btn { min-height: 40px; width: 40px; padding: 0; border-radius: 14px; }
  .login-btn span { display: none; }
  body:not([data-game="hub"]) .logo-full { display: none !important; }
  body:not([data-game="hub"]) .logo-icon { display: block; width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .sheet { padding: 36px 22px 24px; }
  .lobby-tabs button { font-size: 13px; }
  .notify-bar { grid-template-columns: auto 1fr; }
  .notify-actions { grid-column: 1 / -1; }
  .friend-row { grid-template-columns: auto 1fr; }
  .friend-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .hud-score { font-size: 24px; }
  .mini-board { width: 50px; height: 50px; }
  .room-code { font-size: 36px; }
}

@media (max-height: 700px) {
  .hint { display: none; }
}

/* ---------- Açılış animasyonu (oturumda bir kez) ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    radial-gradient(60vmax 50vmax at 50% 45%, rgba(255, 201, 18, .16), transparent 60%),
    radial-gradient(50vmax 40vmax at 100% 0%, rgba(139, 108, 255, .28), transparent 60%),
    radial-gradient(50vmax 40vmax at 0% 100%, rgba(255, 111, 181, .16), transparent 60%),
    #1b1530;
  color: #ffc912;
  cursor: pointer;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }

.sp-logo { display: block; width: min(64vmin, 300px); aspect-ratio: 1; overflow: visible; }
.sp-symbol { fill: currentColor; }
.sp-core, .sp-fragment, .sp-star, .sp-wave {
  transform-box: view-box;
  transform-origin: 145.72px 141.683px;
  will-change: transform, opacity;
}
.sp-core {
  animation: sp-core-arrive 790ms cubic-bezier(.16, 1.1, .3, 1) both,
             sp-core-idle 4200ms ease-in-out 1100ms infinite;
}
.sp-fragment { animation: sp-fragment-arrive 900ms cubic-bezier(.13, 1, .3, 1) var(--delay) both; }
.sp-star {
  transform-origin: 126.999px 124.116px;
  animation: sp-star-arrive 800ms cubic-bezier(.18, 1.4, .3, 1) 340ms both,
             sp-star-twinkle 3200ms ease-in-out 1150ms infinite;
}
.sp-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  opacity: 0;
  animation: sp-shockwave 1050ms ease-out 170ms both;
}
.sp-wave.sp-two { animation-delay: 330ms; }
.sp-word {
  font: 700 clamp(30px, 8vmin, 44px) / 1 var(--font-display);
  color: #fff7ea;
  text-shadow: 0 4px 0 #ffc912;
  animation: sp-word-in 600ms var(--bounce) 650ms both;
}

@keyframes sp-core-arrive {
  0% { transform: scale(.38) rotate(-22deg); opacity: 0; }
  67% { transform: scale(1.075) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sp-core-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.027); }
}
@keyframes sp-fragment-arrive {
  0% { transform: translate(var(--from-x), var(--from-y)) scale(.2) rotate(var(--turn)); opacity: 0; }
  50% { opacity: 1; }
  76% { transform: translate(0, 0) scale(1.055) rotate(-2deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
}
@keyframes sp-star-arrive {
  0% { transform: scale(0) rotate(-65deg); opacity: 0; }
  75% { transform: scale(1.25) rotate(12deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sp-star-twinkle {
  0%, 65%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  76% { transform: scale(1.2) rotate(13deg); opacity: .75; }
  87% { transform: scale(.96) rotate(-7deg); opacity: 1; }
}
@keyframes sp-shockwave {
  0% { opacity: .65; transform: scale(.46); stroke-width: 5; }
  100% { opacity: 0; transform: scale(1.48); stroke-width: .5; }
}
@keyframes sp-word-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .sp-core, .sp-fragment, .sp-star, .sp-wave, .sp-word { animation: none !important; transform: none !important; }
  .sp-wave { opacity: 0 !important; }
}