/* RUCKUS — menü ekranları + ortak UI stili (v3 "modern oyun menüsü", DESIGN §12). Oyun içi HUD: hud.css.
   Temel: css/tokens.css (renk, yazı, şekil, hareket token'ları) — bu dosya ÖNCE onu bekler (index.html sırası).
   Dil: koyu zemin, cam paneller (ince 1px çizgi + üstte aydınlık kenar), Barlow Condensed 800 italik BÜYÜK HARF başlıklar,
   tek vurgu rengi (volt sarı), SVG ikonlar, eğik (paralelkenar) butonlar, 120-320 ms ease-out hareket (zıplama yok).
   Performans: cam bulanıklığı (backdrop-filter) sadece fare/masaüstü ya da 'high' kalitede; telefonda opak cam. */

/* ------------------------------------------------------------------ yerel değişkenler (token'lara ek, düzen) */
:root {
  --gap: clamp(8px, 1.4vmin + 2px, 18px);
  --panel-w: clamp(300px, 34vw, 420px);
  --side-w: clamp(300px, 40vw, 470px);
  --panel-bg: linear-gradient(180deg, rgba(20, 26, 41, .92) 0%, rgba(11, 15, 25, .94) 100%);
  --panel-blur: none;
  --field-bg: rgba(5, 8, 14, .55);
  --card-bg: rgba(255, 255, 255, .035);
  --card-bg-hover: rgba(255, 255, 255, .065);
  --gold: #ffcf33;
  --silver: #cdd6e4;
  --bronze: #e08d4f;
  --wood: #b07a45;
  --wood-d: #6b4424;
  --wood-l: #ffe2bf;
}
body:not(.is-touch), body[data-q="high"] {
  --panel-bg: linear-gradient(180deg, rgba(20, 26, 41, .78) 0%, rgba(11, 15, 25, .84) 100%);
  --panel-blur: blur(var(--glass-blur)) saturate(1.15);
}
body[data-q="low"] { --panel-blur: none; }

/* ------------------------------------------------------------------ temel */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
}
body {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--tx-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.in-game { touch-action: none; }
input, textarea, .invite-link, .ic-url { -webkit-user-select: text; user-select: text; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
p { margin: 0; }
img { -webkit-user-drag: none; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hidden { display: none !important; }
.top-spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------------ katmanlar */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  display: none;
  background: var(--bg-vignette), var(--bg-grad), var(--bg-0);
}
body.no-webgl #bg { display: block; }
.bg-ray {
  position: absolute;
  top: -20vh;
  width: 18vw;
  height: 140vh;
  background: linear-gradient(180deg, rgba(160, 190, 255, .09), rgba(160, 190, 255, 0) 70%);
  filter: blur(18px);
  transform-origin: 50% 0;
}
.bg-ray.r1 { left: 12%; transform: rotate(18deg); }
.bg-ray.r2 { left: 48%; transform: rotate(-6deg); background: linear-gradient(180deg, rgba(255, 207, 51, .07), rgba(255, 207, 51, 0) 65%); }
.bg-ray.r3 { right: 8%; transform: rotate(-22deg); }

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: var(--bg-0);
  touch-action: none;
}
body.no-webgl #gl { visibility: hidden; }

#menu-labels {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}
body.in-game #menu-labels { display: none; }

#screens {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
/* okunaklılık için kenar karartma + çok hafif gren (tek statik katman) */
#screens::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at 50% 42%, rgba(4, 6, 10, 0) 55%, rgba(4, 6, 10, .55) 100%),
    linear-gradient(180deg, rgba(4, 6, 10, .45) 0%, rgba(4, 6, 10, 0) 18%, rgba(4, 6, 10, 0) 78%, rgba(4, 6, 10, .5) 100%);
}
#screens::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  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");
}
body[data-q="low"] #screens::after { display: none; }
body.in-game #screens { display: none; }
/* §15 "EKRANA DOKUN" kapağı açıkken menü arayüzü gizli: arkada sadece 3D vitrin (başlık ekranı); dokununca süzülür */
#screens, #menu-labels { transition: opacity .5s var(--ease); }
body.cover-on #screens, body.cover-on #menu-labels { opacity: 0; }
#screens > .screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  gap: var(--gap);
  pointer-events: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
  padding:
    max(var(--gap), var(--safe-t))
    max(var(--gap), var(--safe-r))
    max(var(--gap), var(--safe-b))
    max(var(--gap), var(--safe-l));
}
#screens > .screen.active { display: flex; animation: screenIn var(--dur-3) var(--ease) both; }

#game {
  position: fixed;
  inset: 0;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
}
#game.active { visibility: visible; pointer-events: auto; }
#touch {
  position: absolute;
  inset: 0;
  z-index: 1;
  touch-action: none;
}
#hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ------------------------------------------------------------------ paneller */
.panel {
  position: relative;
  color: var(--tx-0);
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), var(--shadow-inset-hi);
}
/* üst kenarda ince aydınlık çizgi */
.panel::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sec-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; min-height: 28px; }
.sec-head h3, .card-sec h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.sec-ic { display: grid; place-items: center; color: var(--accent); }
.count-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--stroke);
}
.card-sec { margin: 0 0 16px; }
.card-sec h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--tx-1);
  margin: 0 0 8px;
}
.card-sec h4 .ic { color: var(--accent); }
.card-sec h4 .chip { margin-left: auto; }

/* ------------------------------------------------------------------ çip, madalya, seviye rozeti */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tx-1);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--stroke);
}
.chip-accent { color: var(--accent); background: var(--accent-soft); border-color: var(--stroke-accent); }
.chip-muted { color: var(--tx-2); background: rgba(255, 255, 255, .03); }

.medal { position: relative; display: inline-grid; place-items: center; color: var(--tx-2); }
.medal b {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--tx-2);
}
.medal.m1, .medal.m2, .medal.m3 { filter: drop-shadow(0 0 6px currentColor); }
.medal.m1 { color: var(--gold); }
.medal.m2 { color: var(--silver); }
.medal.m3 { color: var(--bronze); }
.medal.m1 b, .medal.m2 b, .medal.m3 b {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

.lvl-badge {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 50px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: .9;
  font-family: var(--font-display);
  color: var(--tx-0);
}
.lvl-badge::before, .lvl-badge::after {
  content: '';
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.lvl-badge::before { inset: 0; background: linear-gradient(160deg, #ffe27a, var(--accent) 45%, var(--accent-2)); z-index: -2; }
.lvl-badge::after { inset: 2px; background: linear-gradient(180deg, #1f2739, #0e131e); z-index: -1; }
.lvl-badge small { font-weight: 700; font-size: 9px; letter-spacing: .18em; color: var(--accent); margin-bottom: 2px; padding-left: .18em; }
.lvl-badge b { font-weight: 800; font-style: italic; font-size: 23px; font-variant-numeric: tabular-nums; }
.lvl-badge.small { width: 42px; height: 48px; }
.lvl-badge.small b { font-size: 19px; }
.lvl-badge.pop { animation: badgePop var(--dur-4) var(--ease-snap); }

.xp-bar {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.xp-bar.big { height: 10px; }
.xp-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent) 70%, #ffe680);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width .8s var(--ease);
}
.xp-text { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--tx-2); white-space: nowrap; }

/* ------------------------------------------------------------------ butonlar
   .btn: eğik (paralelkenar) zemin ::before'da → metin düz kalır, ışıma/gölge çalışır. */
.btn {
  --h: 44px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--h);
  padding: 0 18px;
  border-radius: var(--r-sm);
  color: var(--tx-0);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: skewX(var(--skew));
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}
.btn-label { display: inline-block; padding-right: .05em; }
.btn-ic { flex: none; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: default; }
.btn:focus-visible { box-shadow: none; }
.btn:focus-visible::before { box-shadow: var(--focus-ring); }

.btn-primary { color: var(--accent-ink); }
.btn-primary::before {
  background: var(--accent-grad);
  box-shadow: 0 8px 22px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .16);
}
.btn-secondary::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
  border: 1px solid var(--stroke-2);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 16px -10px rgba(0, 0, 0, .6);
}
.btn-ghost { color: var(--tx-1); }
.btn-ghost::before { background: transparent; border: 1px solid transparent; }
.btn-danger { color: #fff; }
.btn-danger::before {
  background: linear-gradient(180deg, #ff6b7a, var(--danger) 55%, #d93246);
  box-shadow: 0 8px 20px -10px rgba(255, 77, 94, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* eski tür adları (başka modüller / eski çağrılar) */
.btn-blue, .btn-green, .btn-purple { color: var(--tx-0); }
.btn-blue::before, .btn-green::before, .btn-purple::before { background: rgba(255, 255, 255, .07); border: 1px solid var(--stroke-2); }
.btn-gold { color: var(--accent-ink); }
.btn-gold::before { background: var(--accent-grad); }
.btn-red { color: #fff; }
.btn-red::before { background: var(--danger); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled)::before { box-shadow: 0 0 0 1px rgba(255, 224, 102, .6), 0 10px 30px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .6); filter: brightness(1.05); }
  .btn-secondary:hover:not(:disabled)::before { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .26); }
  .btn-ghost:hover:not(:disabled) { color: var(--tx-0); }
  .btn-ghost:hover:not(:disabled)::before { background: rgba(255, 255, 255, .06); border-color: var(--stroke); }
  .btn-danger:hover:not(:disabled)::before { filter: brightness(1.08); }
}

.btn-lg { --h: 54px; font-size: 21px; padding: 0 24px; gap: 10px; }
.btn-sm { --h: 40px; font-size: 14px; padding: 0 13px; gap: 6px; letter-spacing: .04em; }
.btn-wide { width: 100%; }
.btn.loading { pointer-events: none; }
.btn.loading > * { visibility: hidden; }
.btn.loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn.pulse::before { animation: ctaPulse .9s var(--ease) 2; }

/* sadece ikon */
.btn-icon {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--tx-1);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-inset-hi);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-icon-glass { background: rgba(255, 255, 255, .07); border-color: var(--stroke-2); color: var(--tx-0); }
.btn-icon:active:not(:disabled) { transform: scale(.94); }
.btn-icon:disabled { opacity: .4; }
.btn-icon.loading .ic { animation: spin .8s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .btn-icon:hover:not(:disabled) { color: var(--tx-0); background: rgba(255, 255, 255, .09); border-color: var(--stroke-2); }
}
.dice.roll .ic { animation: diceRoll .5s var(--ease-snap); }
:where(body.is-touch) .btn-icon { width: 48px; height: 48px; }
:where(body.is-touch) .btn:where(:not(.btn-sm):not(.btn-lg)) { --h: 48px; }
:where(body.is-touch) .btn-lg { --h: 56px; }

/* ------------------------------------------------------------------ form parçaları */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tx-2);
}
.field-hint { display: block; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--tx-2); }
.name-row { display: flex; gap: 8px; align-items: stretch; }
.name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: var(--field-bg);
  color: var(--tx-0);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .01em;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.name-input:focus { border-color: var(--stroke-accent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 3px var(--accent-soft); }
.name-input::placeholder { color: var(--tx-2); }
.name-input.big { height: 54px; font-size: 24px; }
.name-input.shake { animation: shake .4s; }
.name-row .btn-icon { height: auto; min-height: 46px; }
.name-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--tx-2); }
.name-hint .ic { flex: none; }
.name-hint.attn { color: var(--accent); }
.name-hint.attn .ic { animation: softPulse 2.2s ease-in-out infinite; }

/* segment */
.segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--field-bg);
  border: 1px solid var(--stroke);
}
.seg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 9px;
  color: var(--tx-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.seg-main { display: inline-flex; align-items: center; gap: 6px; }
.seg-label { white-space: nowrap; }
.seg-btn small { font-family: var(--font-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--tx-2); }
.seg-btn.on {
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: 0 6px 16px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.seg-btn.on small { color: rgba(11, 14, 22, .72); }
.seg-btn:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .seg-btn:not(.on):not(:disabled):hover { background: rgba(255, 255, 255, .06); color: var(--tx-0); }
}
.segmented.disabled .seg-btn:not(.on) { opacity: .45; }
.segmented.disabled .seg-btn.on { filter: saturate(.7) brightness(.9); }
.seg-rounds .seg-btn { font-size: 20px; font-style: italic; font-weight: 800; }
.seg-quality .seg-btn, .seg-fps .seg-btn { min-height: 50px; }

/* anahtar */
.switch-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  text-align: left;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.switch-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-2);
  background: rgba(255, 255, 255, .05);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.switch-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.switch-label b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.switch-label small { font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--tx-2); }
.switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  transition: background var(--dur-2) var(--ease);
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dfe5f2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.switch-row.on { border-color: rgba(255, 207, 51, .25); }
.switch-row.on .switch-track { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.switch-row.on .switch-knob { transform: translateX(18px); background: var(--accent-ink); }
.switch-row.on .switch-ic { color: var(--accent); background: var(--accent-soft); }
.switch-row.disabled { opacity: .6; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .switch-row:not(.disabled):hover { background: var(--card-bg-hover); }
}
.switch-list { display: flex; flex-direction: column; gap: 8px; }

/* kaydırıcı */
.slider-list { display: flex; flex-direction: column; gap: 4px; }
.slider-row { display: grid; grid-template-columns: minmax(104px, auto) 1fr 44px; align-items: center; gap: 12px; min-height: 44px; }
.slider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-1);
}
.slider-label .ic { color: var(--tx-2); }
.slider-val { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.slider {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) 0 var(--p), rgba(255, 255, 255, .12) var(--p) 100%);
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3f5fa;
  border: 0;
  box-shadow: 0 0 0 4px rgba(255, 207, 51, .25), 0 2px 6px rgba(0, 0, 0, .5);
}
.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3f5fa;
  border: 0;
  box-shadow: 0 0 0 4px rgba(255, 207, 51, .25), 0 2px 6px rgba(0, 0, 0, .5);
}

/* renk kutucukları */
.swatches { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 5px; margin: -5px; }
.swatches::-webkit-scrollbar { display: none; }
.swatch {
  position: relative;
  flex: none;
  width: clamp(24px, calc((100% - 60px) / 11), 32px);
  height: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sw, #5d6a86);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 2px 3px rgba(255, 255, 255, .25), 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.swatch::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.swatch-ic { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.swatch.on { transform: scale(1.08); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25), 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent), 0 0 14px var(--accent-glow); }

/* şapka çipleri */
.hat-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 3px 2px 12px;
  margin: -3px -2px -6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
}
.hat-chips::-webkit-scrollbar { display: none; }
.hat-chip {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  width: 68px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px 7px;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  text-align: center;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hat-name { font-size: 10px; font-weight: 700; line-height: 1.1; color: var(--tx-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hat-lock {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  align-items: center;
  gap: 3px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--tx-1);
  background: #1b2233;
  border: 1px solid var(--stroke-2);
}
.hat-chip.locked { background: rgba(0, 0, 0, .25); }
.hat-chip.locked .hat-thumb { filter: grayscale(1) brightness(.55); }
.hat-chip.locked .hat-name { opacity: .5; }
.hat-chip.locked .hat-lock { display: inline-flex; }
.hat-chip.on { background: var(--accent-soft); border-color: var(--stroke-accent); box-shadow: 0 0 0 1px var(--stroke-accent), 0 0 16px -4px var(--accent-glow); }
.hat-chip.on .hat-name { color: var(--accent); }
.hat-chip.shake { animation: shake .4s; }
@media (hover: hover) and (pointer: fine) {
  .hat-chip:not(.on):hover { background: var(--card-bg-hover); border-color: var(--stroke-2); }
}

/* portre kutuları (3D küçük resim; gelene kadar renkli ikon) */
.avatar, .hat-thumb {
  --av: 40px;
  position: relative;
  flex: none;
  width: var(--av);
  height: var(--av);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--av) * .26);
  color: var(--cc, var(--tx-2));
  background: linear-gradient(180deg, #1c2436, #121826);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.avatar {
  background:
    radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--cc, #5d6a86) 45%, transparent), transparent 70%),
    linear-gradient(180deg, #1c2436, #121826);
}
.avatar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--cc, #5d6a86);
  opacity: .9;
}
.hat-thumb { color: var(--tx-2); background: radial-gradient(90% 90% at 50% 40%, #222b40, #121826); }
.avatar-fb { opacity: .85; transition: opacity var(--dur-2) var(--ease); }
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.avatar-img.in { opacity: 1; }
.has-img > .avatar-fb { opacity: 0; }
.empty-av { --cc: transparent; color: var(--tx-2); background: rgba(255, 255, 255, .03); box-shadow: none; border: 1px dashed rgba(255, 255, 255, .22); }
.empty-av::after { display: none; }

/* karakter ızgarası (profil modalı) */
.char-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.char-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 4px 6px;
  min-height: 84px;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.char-cell-name { font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center; color: var(--tx-1); }
.char-cell.on { background: var(--accent-soft); border-color: var(--stroke-accent); box-shadow: 0 0 16px -6px var(--accent-glow); }
.char-cell.on .char-cell-name { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .char-cell:not(.on):hover { background: var(--card-bg-hover); }
}

/* ------------------------------------------------------------------ toast */
#toast-root {
  position: fixed;
  top: calc(var(--safe-t) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  width: min(92vw, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
body:has(#conn-banner.show) #toast-root { top: calc(var(--safe-t) + 64px); }
body.in-game #toast-root { top: calc(var(--safe-t) + 70px); }
body[data-screen="lobby"] #toast-root { top: calc(var(--safe-t) + 74px); }
.toast {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 44px;
  padding: 7px 16px 7px 8px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(12, 16, 27, .94);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-2), var(--shadow-inset-hi);
  color: var(--tx-0);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  animation: toastIn var(--dur-3) var(--ease-snap) both;
}
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc, var(--cyan)); }
.toast-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tc, var(--cyan));
  background: var(--tcs, var(--cyan-soft));
}
.toast-text { min-width: 0; }
.toast-success { --tc: var(--success); --tcs: var(--success-soft); }
.toast-error { --tc: var(--danger); --tcs: var(--danger-soft); }
.toast-warn { --tc: var(--warn); --tcs: rgba(255, 159, 28, .14); }
.toast.out { animation: toastOut var(--dur-2) var(--ease) forwards; }
.toast.bump { animation: toastBump var(--dur-3) var(--ease); }

/* ------------------------------------------------------------------ modal */
#modal-root { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--safe-b)) max(12px, var(--safe-l));
  background: var(--scrim);
  animation: fadeIn var(--dur-2) var(--ease) both;
}
.modal-backdrop.out { animation: fadeOut var(--dur-2) var(--ease) forwards; pointer-events: none; }
.modal-backdrop.out .modal-card { animation: modalOut var(--dur-2) var(--ease) forwards; }
.modal-card {
  position: relative;
  width: min(460px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 18px;
  color: var(--tx-0);
  background: linear-gradient(180deg, #171d2c 0%, #0e131e 100%);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), var(--shadow-inset-hi);
  animation: modalIn var(--dur-3) var(--ease-snap) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.modal-card::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  width: 56px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.modal-small { width: min(400px, 100%); }
.modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 52px 16px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(22px, 1.2vmin + 18px, 28px);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.modal-title-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--stroke-accent);
  font-style: normal;
}
.modal-x { position: absolute; top: 12px; right: 12px; z-index: 1; }
.modal-body { display: flex; flex-direction: column; gap: 14px; }
.modal-text { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--tx-1); }
.modal-text b { color: var(--tx-0); font-weight: 700; }
.modal-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--warn); }
.modal-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 10px -20px -18px;
  padding: 10px 20px 18px;
  background: linear-gradient(180deg, rgba(14, 19, 30, 0), #0e131e 26%);
}
.modal-actions .btn { flex: 1 1 auto; }
.code-inline { font-family: var(--font-display); font-weight: 800; font-style: italic; letter-spacing: .14em; color: var(--accent); }

/* katıl */
.join-body { display: flex; flex-direction: column; gap: 14px; }
.code-boxes { position: relative; display: flex; justify-content: center; gap: clamp(8px, 2.5vw, 12px); padding: 4px 0; }
.code-box {
  position: relative;
  width: clamp(52px, 13vw, 64px);
  height: clamp(62px, 15.5vw, 76px);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(36px, 9vw, 48px);
  line-height: 1;
  color: var(--tx-0);
  background: var(--field-bg);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.code-box::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.code-box.filled { background: linear-gradient(180deg, rgba(255, 207, 51, .1), rgba(255, 207, 51, .03)); border-color: var(--stroke-accent); animation: boxIn var(--dur-2) var(--ease-snap); }
.code-box.filled::after { background: var(--accent); }
.code-box.cursor { border-color: var(--accent); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 3px var(--accent-soft); }
.code-box.cursor:not(.filled)::before {
  content: '';
  width: 3px;
  height: 44%;
  border-radius: 2px;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
  color: transparent;
  background: transparent;
  caret-color: transparent;
  text-transform: uppercase;
  cursor: text;
}
.code-boxes.shake { animation: shake .42s; }
.join-err { min-height: 20px; text-align: center; font-weight: 600; font-size: 14px; color: #ff8a95; }
.join-err:empty { min-height: 0; }
.join-as {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 8px;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--stroke);
}
.join-as-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.join-as-text small { font-size: 12px; font-weight: 500; color: var(--tx-2); }
.join-as-text b { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* yardım */
.modal-help { width: min(720px, 100%); }
.help-body { display: flex; flex-direction: column; gap: 12px; }
.seg-help .seg-btn { min-height: 40px; }
.help-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.help-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--stroke); }
.help-ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
}
.help-item b { display: block; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 16px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.help-item p { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--tx-1); line-height: 1.4; }

/* davet + QR */
.modal-invite { width: min(620px, 100%); }
.invite-body { display: flex; flex-direction: column; gap: 14px; }
.invite-body.has-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.invite-info { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.invite-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: var(--field-bg);
  border: 1px dashed rgba(255, 255, 255, .22);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  word-break: break-all;
  cursor: pointer;
  color: var(--tx-0);
}
.invite-link .ic { flex: none; color: var(--accent); }
.invite-code { display: flex; align-items: baseline; gap: 10px; }
.invite-code small { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tracking-label); color: var(--tx-2); }
.invite-code b { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; letter-spacing: .16em; color: var(--accent); }
.btn-whatsapp .ic { color: var(--success); }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; flex: none; }
.qr-frame {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 30px rgba(0, 0, 0, .45);
}
.qr-frame::before, .qr-frame::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
  pointer-events: none;
}
.qr-frame::before { left: -7px; top: -7px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.qr-frame::after { right: -7px; bottom: -7px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.qr-img { display: block; width: var(--qr, 150px); height: var(--qr, 150px); image-rendering: pixelated; }
.qr-box.loading .qr-img { background: linear-gradient(90deg, #eceff4 25%, #fff 50%, #eceff4 75%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.qr-cap { font-size: 12px; color: var(--tx-2); }

/* profil + ayarlar */
.profile-edit { display: flex; flex-direction: column; gap: 16px; }
.modal-profile { width: min(560px, 100%); }
.modal-settings { width: min(760px, 100%); }
.settings-body { display: flex; flex-direction: column; gap: 16px; }
.settings-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.settings-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.settings-sec { display: flex; flex-direction: column; gap: 8px; }
.settings-switches { display: flex; flex-direction: column; gap: 8px; }
.settings-links { display: flex; flex-direction: column; gap: 4px; }
.settings-links .btn { justify-content: flex-start; }
.settings-audio-test { text-decoration: none; }
.settings-audio-test .ic { color: var(--accent); }
.settings-foot { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; font-weight: 500; color: var(--tx-2); }
.settings-logo { display: block; height: 14px; width: auto; opacity: .75; }
.modal-actions .act-help { flex: 0 1 auto; margin-right: auto; }

/* ------------------------------------------------------------------ bağlantı şeridi */
#conn-banner {
  position: fixed;
  top: calc(var(--safe-t) + 10px);
  left: 50%;
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  height: 44px;
  padding: 0 18px 0 8px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(12, 16, 27, .95);
  border: 1px solid rgba(255, 77, 94, .45);
  box-shadow: var(--shadow-2), 0 0 24px -8px rgba(255, 77, 94, .5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-0);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -140%);
  transition: transform var(--dur-3) var(--ease-snap), opacity var(--dur-2) var(--ease);
}
#conn-banner.show { transform: translate(-50%, 0); opacity: 1; }
.conn-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--danger); background: var(--danger-soft); }
.conn-txt { overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ yan çevir */
#rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--tx-0);
  background: var(--bg-vignette), var(--bg-grad), var(--bg-0);
}
@media (orientation: portrait) {
  body.is-touch.in-game #rotate-overlay { display: flex; }
}
.rotate-phone {
  width: 64px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 2px solid var(--tx-1);
  color: var(--accent);
  box-shadow: 0 0 30px -6px var(--accent-glow);
  animation: rotatePhone 2.6s var(--ease-in-out) infinite;
}
.rotate-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 28px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.rotate-sub { max-width: 300px; font-size: 15px; font-weight: 500; color: var(--tx-1); }

/* ------------------------------------------------------------------ açılış */
#boot {
  position: fixed;
  inset: 0;
  z-index: 300;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  color: var(--tx-0);
  text-align: center;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
/* zemin ayrı katmanda: kapak modunda hafifçe açılır, arkadaki 3D vitrin görünür */
#boot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-vignette), var(--bg-grad), var(--bg-0);
  transition: opacity .7s var(--ease);
}
#boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
#boot.tap { cursor: pointer; touch-action: manipulation; }
#boot.tap::before { opacity: .8; }
#boot:focus-visible { box-shadow: none; }
#boot.tap .boot-bar, #boot.tap .boot-msg { display: none; }
.boot-tap { display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; }
#boot.tap .boot-tap { display: flex; animation: fadeIn .5s var(--ease) both; }
.tap-orb {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 32px -10px var(--accent-glow);
  animation: tapPress 2.4s var(--ease-in-out) infinite;
}
.tap-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: tapRing 2.4s var(--ease) infinite;
}
.tap-ring.r2 { animation-delay: .6s; }
.tap-label {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(24px, 3vmin + 14px, 36px);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-0);
  background: linear-gradient(100deg, var(--tx-0) 38%, #fff3b8 50%, var(--tx-0) 62%) 0 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tapSweep 3.4s var(--ease-in-out) 1s infinite;
}
.tap-sub { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--tx-2); }
.boot-logo {
  display: block;
  width: min(62vw, 380px);
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5));
  animation: bootIn .6s var(--ease-snap) both;
}
.boot-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-2);
  animation: fadeIn .6s .15s var(--ease) both;
}
.boot-bar { position: relative; width: 160px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .1); margin-top: 6px; }
.boot-bar i { position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: bootBar 1.1s var(--ease-in-out) infinite; }
.boot-msg { font-size: 13px; font-weight: 500; color: var(--tx-2); }
.boot-fail { display: none; font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--tx-1); }
.boot-fail button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--accent-grad);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#boot.failed .boot-fail { display: block; }
#boot.failed .boot-bar, #boot.failed .boot-msg { display: none; }
.noscript { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--bg-0); color: var(--tx-0); font-size: 18px; padding: 24px; text-align: center; }

/* ================================================================== ANA EKRAN */
.home-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.home-top { flex: none; display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-wrap { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand { margin: 0; line-height: 0; flex: none; }
.brand-logo { display: block; height: clamp(30px, 4.6vmin + 10px, 62px); width: auto; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .5)); }
.brand-tagline {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--stroke-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(12px, .5vmin + 10px, 16px);
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.top-league { display: inline-flex; align-items: center; justify-content: center; width: auto !important; gap: 8px; padding: 0 14px 0 12px; }
.top-league .ic { color: var(--accent); }
.top-league-lbl { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-0); }
/* telefondan gir çipi (sunucu bilgisayarında, #83) */
.lan-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 4px 12px 4px 5px;
  border-radius: var(--r-md);
  background: rgba(61, 220, 255, .08);
  border: 1px solid rgba(61, 220, 255, .3);
  text-align: left;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.lan-chip:active { transform: scale(.97); }
.lan-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--cyan); background: var(--cyan-soft); }
.lan-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.05; }
.lan-txt small { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: var(--tracking-label); color: var(--cyan); }
.lan-txt b { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .lan-chip:hover { background: rgba(61, 220, 255, .14); border-color: rgba(61, 220, 255, .5); }
}
.name-prompt { display: flex; flex-direction: column; gap: 14px; }
.modal-name .modal-text b { color: var(--accent); }

.home-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
}
.home-left {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(120px, 1fr) auto auto;
  gap: 8px;
}

.stage { position: relative; min-width: 0; min-height: 0; }
.home-stage { touch-action: pan-y; cursor: grab; }
.stage-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tx-0);
  background: rgba(12, 16, 27, .6);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.stage-arrow.left { left: 4px; }
.stage-arrow.right { right: 4px; }
.stage-arrow:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .stage-arrow:hover { background: rgba(255, 207, 51, .14); border-color: var(--stroke-accent); color: var(--accent); }
}
.stage-taunt {
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 2;
  max-width: 80%;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: rgba(12, 16, 27, .9);
  border: 1px solid var(--stroke-2);
  border-left: 3px solid var(--char, var(--accent));
  box-shadow: var(--shadow-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(15px, .8vmin + 12px, 20px);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-snap);
}
.stage-taunt.show { opacity: 1; transform: translate(-50%, 0); }
.stage-hint {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tx-1);
  background: rgba(12, 16, 27, .66);
  border: 1px solid var(--stroke);
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.stage-hint .ic { color: var(--accent); }
.stage-hint .sep { width: 1px; height: 12px; background: var(--stroke-2); margin: 0 4px; }
.stage-hint.gone { opacity: 0; }

.char-info { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; }
.char-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--tx-2);
}
.char-idx { color: var(--accent); font-variant-numeric: tabular-nums; }
.char-name {
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(24px, 1.8vmin + 16px, 38px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .6);
}
.char-name.pop { animation: nameIn var(--dur-3) var(--ease-snap); }
.char-tag { max-width: 100%; font-size: clamp(12px, .4vmin + 10px, 15px); font-weight: 500; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-strip-wrap { position: relative; display: flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 6px; }
.char-strip {
  display: flex;
  gap: 6px;
  min-width: 0;
  padding: 4px 2px 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.char-strip::-webkit-scrollbar { display: none; }
.char-strip-wrap.overflow .char-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent);
}
.strip-nav {
  flex: none;
  width: 30px;
  height: 44px;
  display: none;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tx-1);
  background: rgba(12, 16, 27, .62);
  border: 1px solid var(--stroke);
  transition: opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.strip-nav:active { transform: scale(.92); }
.char-strip-wrap.overflow .strip-nav { display: grid; }
.strip-nav.off { opacity: .28; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .strip-nav:hover { color: var(--accent); border-color: var(--stroke-accent); }
}
.char-pick {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  opacity: .55;
  scroll-snap-align: center;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* taşmıyorsa ortala; taşıyorsa baştan kaydırılabilir (flex "center" taşmada başı keser) */
.char-pick:first-child { margin-left: auto; }
.char-pick:last-child { margin-right: auto; }
.stage-all {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 11px 0 9px;
  border-radius: var(--r-pill);
  background: rgba(12, 16, 27, .72);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-0);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.stage-all::before { content: ''; position: absolute; inset: -6px; }
.stage-all .ic { color: var(--accent); }
.stage-all:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .stage-all:hover { border-color: var(--stroke-accent); background: rgba(255, 207, 51, .12); }
}
.modal-chars { width: min(680px, 100%); }
.chars-body { min-width: 0; }
.modal-chars .char-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .modal-chars .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.modal-chars .char-cell-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; padding-top: 2px; } /* Ö/İ/Ü noktaları kırpılmasın */
.char-pick .avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.char-pick.on { opacity: 1; transform: translateY(-2px); }
.char-pick.on .avatar { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px var(--accent), 0 0 16px -2px var(--accent-glow); }
@media (hover: hover) and (pointer: fine) {
  .char-pick:not(.on):hover { opacity: .9; }
}

.games-strip { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.games-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tracking-label); color: var(--tx-2); padding-left: 2px; }
.games-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 1px; }
/* oyun resmi (common.gameArt): oyunun renkli zemini + küçük SVG sahne */
.game-art {
  position: relative;
  flex: none;
  width: var(--gs, 48px);
  height: var(--gs, 48px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-sm);
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(20, 28, 46, .95), rgba(8, 11, 19, .95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.game-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 90% at 20% 110%, var(--ga, var(--cyan)), transparent 62%), radial-gradient(80% 80% at 100% 0%, var(--gb, var(--violet)), transparent 60%);
  opacity: .38;
}
.game-art svg { position: relative; width: 90%; height: 90%; display: block; }
.game-card {
  position: relative;
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 36px 8px 8px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--panel-bg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-1), var(--shadow-inset-hi);
  text-align: left;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 150% at 0% 100%, var(--ga), transparent 62%), radial-gradient(90% 130% at 100% 0%, var(--gb), transparent 62%);
  opacity: .07;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease);
}
.game-card > * { position: relative; }
.game-card:active { transform: scale(.98); }
.game-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.game-text small { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: var(--tracking-label); color: var(--tx-2); }
.game-text b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tx-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-meta { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; font-weight: 500; color: var(--tx-2); white-space: nowrap; }
.game-meta .ic { flex: none; }
.game-meta .gm-pl, .game-meta .gm-sep { flex: none; }
.game-meta .gm-short { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.game-card .game-art { filter: saturate(.7) brightness(.85); transition: filter var(--dur-3) var(--ease); }
.game-check {
  position: absolute !important;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-snap);
}
.game-tag { position: absolute !important; top: 6px; right: 6px; height: 18px; font-size: 9.5px; padding: 0 6px; }
.game-card.on {
  border-color: var(--stroke-accent);
  box-shadow: 0 0 0 1px rgba(255, 207, 51, .16), 0 10px 30px -12px rgba(255, 207, 51, .35), var(--shadow-inset-hi);
}
.game-card.on::before { opacity: .24; }
.game-card.on .game-art { filter: none; }
.game-card.on .game-text b { color: var(--tx-0); }
.game-card.on .game-text small { color: var(--accent); }
.game-card.on .game-check { opacity: 1; transform: none; }
.game-card.on .game-new { display: none; }
.game-card.on::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: sweep 5s var(--ease-in-out) 1.2s infinite;
  pointer-events: none;
}
.game-card.picked { animation: gamePick .45s var(--ease-snap); }
@media (hover: hover) and (pointer: fine) {
  .game-card:not(.on):hover { border-color: var(--stroke-2); }
  .game-card:not(.on):hover .game-art { filter: none; }
  .game-card.on:hover { border-color: var(--accent); }
}

.home-panel {
  align-self: center;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
  animation: panelIn var(--dur-4) var(--ease-snap) both;
}
.profile-card { display: flex; align-items: center; gap: 12px; }
.profile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.xp-row { display: flex; align-items: center; gap: 10px; }
.xp-row .xp-bar { flex: 1 1 auto; }
.main-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.main-actions .btn { width: 100%; }

/* ================================================================== LOBİ */
.lobby-top { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.room-code {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 5px 12px 5px 14px;
  border-radius: var(--r-md);
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-1), var(--shadow-inset-hi);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease);
}
.room-code:active { transform: scale(.98); }
.room-code small {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: var(--tracking-label);
  color: var(--tx-2);
  text-align: left;
}
.code-tiles { display: flex; gap: 4px; }
.code-tile {
  width: clamp(30px, 2.4vmin + 22px, 42px);
  height: clamp(38px, 2.8vmin + 28px, 50px);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(26px, 2.4vmin + 18px, 38px);
  line-height: 1;
  color: var(--tx-0);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--stroke-2);
  border-bottom: 2px solid var(--accent);
  border-radius: 6px;
  animation: tileIn var(--dur-3) var(--ease-snap) both;
}
.code-tile:nth-child(2) { animation-delay: 40ms; }
.code-tile:nth-child(3) { animation-delay: 80ms; }
.code-tile:nth-child(4) { animation-delay: 120ms; }
.code-copy { display: grid; place-items: center; color: var(--tx-2); transition: color var(--dur-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .room-code:hover { border-color: var(--stroke-accent); }
  .room-code:hover .code-copy { color: var(--accent); }
}
.invite-btn .ic { color: var(--accent); }
/* oyun rozeti (v4): herkes seçili oyunu görür */
.lgame {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 5px 14px 5px 6px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-1), var(--shadow-inset-hi);
  text-align: left;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease);
}
.lgame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 150% at 0% 100%, var(--ga, var(--cyan)), transparent 65%), radial-gradient(80% 140% at 100% 0%, var(--gb, var(--violet)), transparent 60%);
  opacity: .16;
  pointer-events: none;
}
.lgame > * { position: relative; }
.lgame:active { transform: scale(.98); }
.lgame-art { display: grid; }
.lgame-art .game-art { width: 42px; height: 42px; }
.lgame-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.05; }
.lgame-txt small { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: var(--tracking-label); color: var(--tx-2); }
.lgame-txt b {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lgame.flash { animation: lgameFlash 1s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .lgame:hover { border-color: var(--stroke-accent); }
}

.lobby-banner {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 159, 28, .12);
  border: 1px solid rgba(255, 159, 28, .45);
  color: #ffd19a;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, .6vmin + 11px, 17px);
  letter-spacing: .03em;
  text-align: center;
}
.lobby-banner .ic { flex: none; color: var(--warn); }

.lobby-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
}
.lobby-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.lobby-stage { flex: 1 1 auto; min-height: 150px; }

/* emote çubuğu (emote = içerik → emoji, şık yuvarlak butonlarda) */
.emote-bar { position: relative; flex: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.emote-btn {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 16, 27, .72);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-1), var(--shadow-inset-hi);
  transition: transform var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.emote-btn::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.emote-btn:active { transform: scale(.9); }
.emote-ico { font-size: 22px; line-height: 1; }
.emote-ico.txt { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 24px; color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  .emote-btn:hover { border-color: var(--stroke-accent); background: rgba(255, 207, 51, .1); transform: translateY(-2px); }
}
.emote-bar.cooldown .emote-btn { opacity: .45; pointer-events: none; }
.emote-bar.cooldown::after {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform-origin: left center;
  animation: cooldownBar var(--cd, 1.2s) linear forwards;
}
.emote-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--accent-grad);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lobby-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; animation: panelIn var(--dur-4) var(--ease-snap) both; }
.lobby-sec + .lobby-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }

/* sekmeler (sadece kısa yatay ekranda, #85) */
.panel-tabs { display: none; gap: 4px; padding: 8px 8px 0; flex: none; border-bottom: 1px solid var(--stroke); }
.panel-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--tx-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
}
.panel-tab::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease);
}
.panel-tab.on { color: var(--tx-0); }
.panel-tab.on::after { transform: scaleX(1); }
.panel-tab.on > .ic { color: var(--accent); }
.tab-label { overflow: hidden; text-overflow: ellipsis; }
.tab-count:empty { display: none; }
.tab-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .08);
  color: var(--tx-1);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tab-target { gap: 3px; }
.tab-target .tab-count { background: none; padding: 0; height: auto; }
.tab-target-ic { display: grid; place-items: center; color: var(--accent); }

.settings-summary {
  display: none;
  width: 100%;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .2);
  border: 1px dashed rgba(255, 255, 255, .16);
  text-align: left;
}
.ss-item.off { color: var(--tx-2); }
.ss-item .ic { color: var(--accent); }
.ss-item.off .ic { color: var(--tx-2); }
.ss-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

/* oyuncu kartları */
.players { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.players.teams { grid-template-columns: minmax(0, 1fr); }
/* V22: iki sütun ancak isimlere yer varsa (panel ≥ 380px); dar panelde tek sütun, isimler kesilmesin */
@container (min-width: 380px) {
  .players.teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 560px) {
  .players:not(.teams) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 340px) {
  .swap-txt { display: none; }
}
.team-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015) 60%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 14%, transparent), rgba(255, 255, 255, .015) 70%);
  border: 1px solid var(--stroke);
  border-top: 2px solid var(--tc);
}
.team-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tc);
}
.team-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--tc); box-shadow: 0 0 8px var(--tc); transform: rotate(45deg); }
.team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-n {
  flex: none;
  min-width: 20px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .08);
  color: var(--tx-1);
  font-style: normal;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.team-join {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--tc);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--stroke-2);
  transition: background var(--dur-2) var(--ease);
}
.team-join::before { content: ''; position: absolute; inset: -8px; }
.team-join:active { transform: scale(.92); }
.team-empty { font-size: 13px; font-weight: 500; color: var(--tx-2); text-align: center; padding: 10px 0; }

.pcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 6px 10px 6px 12px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  text-align: left;
  animation: cardIn var(--dur-3) var(--ease-snap) both;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pcard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--pc, var(--tx-2));
  box-shadow: 0 0 8px var(--pc, transparent);
}
.pc-av-wrap { position: relative; flex: none; display: grid; }
.pc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pc-name {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-badges { flex: none; display: inline-flex; gap: 3px; color: var(--tx-2); }
.pc-badge.off { color: var(--danger); }
.pc-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; font-weight: 500; color: var(--tx-2); }
.pc-lvl { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--tx-1); }
.pc-tap { color: var(--accent); }
.pc-me {
  flex: none;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 12px;
  letter-spacing: .08em;
}
.pc-kick { flex: none; display: grid; place-items: center; width: 24px; color: var(--tx-2); transition: color var(--dur-2) var(--ease); }
.pc-crown {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  box-shadow: 0 0 0 2px var(--bg-1);
}
.pc-crown.champ { background: var(--accent); color: var(--accent-ink); }
.pc-crown.spoon { background: var(--wood); color: var(--wood-l); }
.pc-host {
  position: absolute;
  left: -5px;
  bottom: -5px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-style: normal;
  border-radius: 50%;
  background: #f3f5fa;
  color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--bg-1);
}
.pc-title {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .08em;
  line-height: 1;
}
.pc-title.champ { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--stroke-accent); }
.pc-title.spoon { background: rgba(176, 122, 69, .18); color: #e7b988; border: 1px solid rgba(176, 122, 69, .5); }
.pcard.me { background: linear-gradient(90deg, rgba(255, 207, 51, .12), rgba(255, 207, 51, .04)); border-color: var(--stroke-accent); cursor: pointer; }
.pcard.me:active, .pcard.kickable:active { transform: scale(.985); }
.pcard.t-champ:not(.me) { background: linear-gradient(90deg, rgba(255, 207, 51, .07), var(--card-bg) 60%); }
.pcard.kickable { cursor: pointer; }
.pcard.offline { opacity: .55; }
.pcard.offline .avatar { filter: grayscale(.8); }
.players.teams .pc-me, .players.teams .pc-tap { display: none; }
.pcard.empty { border-style: dashed; background: transparent; cursor: pointer; }
.pcard.empty::before { display: none; }
.pcard.empty .pc-name { color: var(--tx-1); }
@media (hover: hover) and (pointer: fine) {
  .pcard.kickable:hover { background: var(--card-bg-hover); border-color: rgba(255, 77, 94, .35); }
  .pcard.kickable:hover .pc-kick { color: var(--danger); }
  .pcard.me:hover { border-color: var(--accent); }
  .pcard.empty:hover { border-color: var(--stroke-accent); }
}

/* izleyiciler */
.spectators { margin-top: 10px; padding: 9px 10px; border-radius: var(--r-md); background: rgba(0, 0, 0, .18); border: 1px dashed rgba(255, 255, 255, .14); }
.spec-head { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: var(--tracking-label); color: var(--tx-2); }
.spec-n { margin-left: 2px; height: 18px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: var(--r-xs); background: rgba(155, 107, 255, .2); color: #cbb6ff; font-size: 12px; letter-spacing: 0; }
.spec-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px 2px 2px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.spec-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.spec-chip .avatar { border-radius: 6px; }
.spec-chip.me { background: var(--accent-soft); }
.spec-chip b { font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; color: var(--accent); }
.spec-note { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; color: var(--tx-2); }

/* davet kartı (sunucu bilgisayarında QR, #83) */
.invite-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(61, 220, 255, .12), transparent 60%),
    var(--card-bg);
  border: 1px solid rgba(61, 220, 255, .28);
}
.invite-card .qr-frame { padding: 5px; border-radius: var(--r-sm); }
.invite-card .qr-frame::before, .invite-card .qr-frame::after { width: 12px; height: 12px; }
.ic-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding-right: 30px; }
.ic-text small { display: flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-label); color: var(--cyan); }
.ic-url { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.1; word-break: break-all; }
.ic-sub { font-size: 12px; font-weight: 500; color: var(--tx-2); }
.ic-text .btn { margin-top: 4px; }
.ic-x { position: absolute; top: 6px; right: 6px; width: 32px !important; height: 32px !important; border-radius: var(--r-sm); }
.ic-x::before { content: ''; position: absolute; inset: -6px; }

/* ayarlar bölümü */
.settings-note { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--accent); }
/* oyun seçimi (v4 §15: host seçer, diğerleri görür) */
.game-field { margin-bottom: 12px; }
.game-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-pick {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  text-align: left;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease);
}
.game-pick::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 150% at 0% 100%, var(--ga), transparent 62%), radial-gradient(90% 130% at 100% 0%, var(--gb), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease);
}
.game-pick > * { position: relative; }
.game-pick > .mode-check { position: absolute; top: 4px; left: 38px; right: auto; width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--bg-1); }
.game-pick:active:not(.ro) { transform: scale(.97); }
.game-pick .game-art { width: 40px; height: 40px; }
.gp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-text b {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-text small { font-size: 11.5px; font-weight: 500; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-pick.on { border-color: var(--stroke-accent); box-shadow: 0 0 0 1px var(--stroke-accent), 0 10px 26px -14px var(--accent-glow); }
.game-pick.on::before { opacity: .2; }
.game-pick.on .gp-text small { color: var(--tx-1); }
.game-pick.on .mode-check { opacity: 1; transform: none; }
.game-pick.ro { cursor: help; }
.game-pick.ro:not(.on) { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .game-pick:not(.ro):not(.on):hover { background: var(--card-bg-hover); border-color: var(--stroke-2); }
}
/* Parti Yarışı parkurları (bilgi kartları, dokunulmaz) */
.course-cards { margin-top: 0; }
.course-card { cursor: default; }
.course-card .mode-ic { color: #ff7ab8; background: rgba(255, 95, 162, .1); border-color: rgba(255, 95, 162, .32); }
.course-card .mode-desc { color: var(--tx-1); }
.ss-game { gap: 6px; }
.ss-game .ss-art { width: 18px; height: 18px; border-radius: 4px; box-shadow: none; }
.mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 12px; }
.mode-card {
  position: relative;
  min-width: 0;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px 10px;
  border-radius: var(--r-md);
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  text-align: center;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.mode-card:active:not(.ro):not(.course-card) { transform: scale(.97); }
.mode-ic {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tx-1);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--stroke);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.mode-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mode-desc {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tx-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mode-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-snap);
}
.mode-card.on { background: linear-gradient(180deg, rgba(255, 207, 51, .14), rgba(255, 207, 51, .04)); border-color: var(--stroke-accent); box-shadow: 0 0 0 1px var(--stroke-accent), 0 10px 26px -14px var(--accent-glow); }
.mode-card.on .mode-ic { color: var(--accent); background: var(--accent-soft); border-color: var(--stroke-accent); }
.mode-card.on .mode-desc { color: var(--tx-1); }
.mode-card.on .mode-check { opacity: 1; transform: none; }
.mode-card.ro { cursor: help; }
.mode-card.ro:not(.on) { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .mode-card:not(.ro):not(.on):hover { background: var(--card-bg-hover); border-color: var(--stroke-2); }
}
.mode-rule {
  display: block;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .2);
  border-left: 2px solid var(--accent);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tx-1);
}
.mode-rule .rule-ic { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--accent); }
.mode-rule b { font-family: var(--font-display); font-weight: 800; font-style: italic; letter-spacing: .03em; text-transform: uppercase; color: var(--tx-0); }
.mode-rule.flash { animation: ruleFlash .6s var(--ease); }
.round-hint { line-height: 1.35; }
.lobby-sec .field + .field, .lobby-sec .field + .switch-list { margin-top: 14px; }
.host-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.host-tools .btn { flex: 1 1 150px; }
.host-tools .ic { color: var(--accent); }

.lobby-footer {
  flex: none;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .22));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.start-row { display: flex; gap: 8px; }
.start-row .start-btn { flex: 1 1 auto; min-width: 0; }
.start-btn { width: 100%; overflow: visible; }
.start-btn:not(:disabled)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: skewX(var(--skew));
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  animation: sweepBg 3.2s var(--ease-in-out) infinite;
  pointer-events: none;
}
.quick-bot { flex: 0 0 auto; padding: 0 14px; gap: 2px; }
.quick-bot .ic { color: var(--accent); }
.qb-plus { margin-left: -2px; margin-top: -10px; }
.start-hint { margin-top: 8px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--tx-2); }
.start-hint.tap-bot { color: var(--accent); cursor: pointer; }
.wait-box { text-align: center; padding: 4px 6px; }
.wait-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.wait-ic { display: grid; place-items: center; color: var(--accent); }
.wait-ic .ic { animation: hourglass 2.4s var(--ease-in-out) infinite; }
.wait-host { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--tx-2); }
.dots { display: inline-flex; gap: 3px; align-self: flex-end; margin-bottom: 5px; }
.dots i { width: 4px; height: 4px; border-radius: 1px; background: var(--accent); animation: dotBlink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }

/* ================================================================== PODYUM */
.podium-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-top: 2px; }
.podium-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  border: 1px solid var(--stroke-accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kicker-ic { display: grid; place-items: center; }
.podium.bot-won .podium-kicker { background: var(--cyan-soft); border-color: rgba(61, 220, 255, .45); color: var(--cyan); }
.podium-title {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(30px, 3.6vmin + 18px, 64px);
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--win, var(--tx-0));
  text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
  overflow-wrap: anywhere;
  padding: 0 .12em;
}
.podium.reveal .podium-title { animation: titleIn var(--dur-4) var(--ease-snap) both; }
.podium.reveal .podium-title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  animation: sweepOnce 1.2s .25s var(--ease-in-out) both;
  pointer-events: none;
}
.podium-sub { font-size: clamp(13px, .5vmin + 11px, 16px); font-weight: 500; color: var(--tx-1); }
.podium-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
}
.podium-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.podium-stage { flex: 1 1 auto; min-height: 170px; }
.podium-emotes { flex: none; }
.podium-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; animation: panelIn var(--dur-4) var(--ease-snap) both; }
.podium-timer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid var(--stroke);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--tx-2);
}
.podium-timer .ic { color: var(--accent); }
.podium-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .22));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.podium-footer > .btn-lg { flex: 1 1 0; min-width: 0; padding: 0 .8em; }
.podium-footer .wait-box { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.podium-footer .wait-text { font-size: 15px; justify-content: flex-start; }
.podium-footer .wait-text, .podium-footer .wait-host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium-footer .wait-host { justify-content: flex-start; }
.want-rematch { flex: 1 1 auto !important; min-width: max-content !important; }
.want-rematch.voted { opacity: .8; }
.podium-exit { flex: none; }
.vote-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: var(--r-xs);
  background: var(--accent-ink);
  color: var(--accent);
  font-style: normal;
  font-size: 13px;
}

.standings { display: flex; flex-direction: column; gap: 4px; }
.st-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 34px 30px 30px 46px 58px;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--r-sm);
  background: var(--card-bg);
  border: 1px solid transparent;
  box-shadow: inset 3px 0 0 var(--pc, transparent);
  animation: rowIn var(--dur-3) var(--ease-snap) both;
  animation-delay: var(--d, 0s);
}
.st-head {
  min-height: 24px;
  background: none;
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tx-2);
  animation: none;
}
.st-head > span { display: flex; justify-content: center; }
.st-head > .st-hname { justify-content: flex-start; }
.st-row.win { background: linear-gradient(90deg, rgba(255, 207, 51, .12), rgba(255, 207, 51, .03)); }
.st-row.me { border-color: rgba(255, 255, 255, .22); }
.st-rank { display: grid; place-items: center; }
.st-name { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: nowrap; }
.st-name b { min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-av { border-radius: 7px; }
.st-bot { flex: none; display: grid; color: var(--tx-2); }
.st-lvup {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 16px;
  padding: 0 4px 0 2px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  background: var(--success-soft);
  color: var(--success);
}
.st-num { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--tx-1); }
.st-num.strong { color: var(--accent); font-weight: 800; font-size: 18px; }
.st-xp { display: flex; flex-direction: column; gap: 3px; }
.st-xp small { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--success); text-align: right; font-variant-numeric: tabular-nums; }
.st-xpbar { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.st-xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--success), #a8ffcf); transition: width 1.3s var(--ease); }

.spoon-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 12px 14px;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(90% 140% at 0% 50%, rgba(176, 122, 69, .26), transparent 65%),
    var(--card-bg);
  border: 1px solid rgba(176, 122, 69, .45);
}
.spoon-medal {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--wood-l);
  background: radial-gradient(circle at 35% 30%, #d09a62, var(--wood) 50%, var(--wood-d));
  box-shadow: 0 0 0 3px rgba(176, 122, 69, .25), inset 0 -3px 6px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .25);
}
.spoon-card.me .spoon-medal { animation: glowPulse 2.4s var(--ease-in-out) infinite; }
.spoon-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spoon-text small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-label); color: #e7b988; }
.spoon-text b { display: flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 21px; line-height: 1.1; text-transform: uppercase; overflow: hidden; }
.spoon-you { height: 18px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: var(--r-xs); background: var(--accent); color: var(--accent-ink); font-size: 11px; letter-spacing: .08em; font-style: normal; }
.spoon-bot { color: var(--tx-2); }
.spoon-text > span { font-size: 12.5px; font-weight: 500; color: var(--tx-1); }

.xp-card {
  position: relative;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: var(--r-md);
  background: radial-gradient(90% 140% at 100% 0%, rgba(255, 207, 51, .1), transparent 60%), var(--card-bg);
  border: 1px solid var(--stroke);
}
.xp-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.xp-card-title { flex: none; display: flex; flex-direction: column; gap: 2px; }
.xp-card-title small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-label); color: var(--tx-2); }
.xp-gain { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 30px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 20px var(--accent-glow); }
.xp-card-bar { flex: 1 1 140px; min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
.levelup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  height: 38px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--accent-grad);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 19px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 26px -6px var(--accent-glow);
}
.levelup::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
  transform: translateX(-120%);
}
.levelup.pop { animation: bandIn var(--dur-4) var(--ease-snap) both; }
.levelup.pop::after { animation: sweepOnce 1s .15s var(--ease-in-out) both; }
.new-hats:empty { display: none; }
.new-hat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--stroke-accent);
}
.new-hat.pop { animation: cardIn var(--dur-4) var(--ease-snap) both; }
.new-hat .hat-thumb { box-shadow: 0 0 0 1px var(--stroke-accent), 0 0 16px -4px var(--accent-glow); }
.new-hat-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.new-hat-text small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-label); color: var(--accent); }
.new-hat-text b { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 19px; line-height: 1.05; text-transform: uppercase; }

.grudge-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  box-shadow: inset 2px 0 0 var(--danger);
  font-size: 14px;
  font-weight: 600;
}
.grudge-line b { min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.garrow { color: var(--danger); flex: none; }
.gn { margin-left: auto; flex: none; font-family: var(--font-display); font-weight: 800; font-style: italic; color: #ff9aa3; white-space: nowrap; }
.hat-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 5px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--card-bg); }
.hat-line > b { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.hat-line-list { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.hat-line-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tx-1); }
.hat-line-item .hat-thumb { border-radius: 6px; }

/* ================================================================== LİG */
.league-top { flex: none; display: flex; align-items: center; gap: 12px; }
.league-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.league-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 2vmin + 18px, 44px);
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.league-cup { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-soft); border: 1px solid var(--stroke-accent); font-style: normal; }
.league-sub { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tx-2); }
.league-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
}
.lg-main { container-type: inline-size; animation: panelIn var(--dur-4) var(--ease-snap) both; }
.lg-side { animation: panelIn var(--dur-4) 60ms var(--ease-snap) both; }
.lg-main, .lg-side {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.lg-me {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1em;
}
.lg-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background:
    radial-gradient(80% 160% at 0% 50%, rgba(255, 207, 51, .18), transparent 60%),
    var(--card-bg);
  border: 1px solid var(--stroke-accent);
}
.lg-hero-crown {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: 0 0 0 3px rgba(255, 207, 51, .2), 0 0 24px -4px var(--accent-glow);
}
.lg-hero-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lg-hero-text small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: var(--tracking-label); color: var(--accent); }
.lg-hero-text b {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 26px;
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lg-hero-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 600; color: var(--tx-1); }
.lg-hero-stats > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lg-hero-stats .ic { color: var(--tx-2); }
.lg-award-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  height: 26px;
  padding: 0 10px 0 3px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--stroke-accent);
  font-size: 12px;
  font-weight: 700;
  color: var(--tx-0);
}
.award-medal { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); font-style: normal; font-size: 12px; line-height: 1; }
.lg-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -4px; padding: 0 4px 4px; }
.lg-table { display: flex; flex-direction: column; gap: 4px; min-width: 560px; }
.lg-row {
  display: grid;
  grid-template-columns: 34px minmax(110px, 1.6fr) 36px 78px 70px 50px 50px 52px 38px;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--card-bg);
  border: 1px solid transparent;
  animation: rowIn var(--dur-3) var(--ease-snap) both;
  animation-delay: var(--d, 0s);
}
.lg-head {
  min-height: 26px;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-2);
  animation: none;
}
.lg-head > span { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.lg-head > .c-name { justify-content: flex-start; }
.lg-row > span { text-align: center; }
.lg-row > .c-name { text-align: left; display: flex; align-items: center; gap: 6px; min-width: 0; }
.c-name b { min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-lvl-inline { display: none; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--tx-2); }
.c-rank { display: grid; place-items: center; }
.c-num { font-family: var(--font-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--tx-1); }
.c-num small { font-size: 12px; color: var(--tx-2); font-weight: 600; }
.c-num.strong { color: var(--accent); font-weight: 800; font-size: 18px; }
.c-spoon { color: var(--tx-2); }
.c-spoon.has { color: #e7b988; }
.lg-head .c-spoon { color: #e7b988; }
.lg-lvl { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 5px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .07); border: 1px solid var(--stroke); font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--tx-1); }
.lg-weapon { display: inline-grid; place-items: center; color: var(--tx-1); }
.lg-weapon.none { font-size: 14px; color: var(--tx-2); }
.lg-row.top1 { background: linear-gradient(90deg, rgba(255, 207, 51, .14), rgba(255, 207, 51, .02)); }
.lg-row.top2 { background: linear-gradient(90deg, rgba(205, 214, 228, .12), rgba(205, 214, 228, .02)); }
.lg-row.top3 { background: linear-gradient(90deg, rgba(224, 141, 79, .14), rgba(224, 141, 79, .02)); }
.lg-row.me { border-color: var(--stroke-accent); }
.lg-side-note { margin: -4px 0 12px; font-size: 13px; font-weight: 500; color: var(--tx-2); }
.lg-grudges { display: flex; flex-direction: column; gap: 6px; }
.grudge-item {
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--card-bg);
  box-shadow: inset 2px 0 0 var(--danger);
  animation: rowIn var(--dur-3) var(--ease-snap) both;
  animation-delay: var(--d, 0s);
}
.grudge-names { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.grudge-names b { min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grudge-bar { margin-top: 7px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.grudge-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--warn), var(--danger)); transition: width 1.1s var(--ease); }
.lg-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; text-align: center; }
.lg-state.small { padding: 18px 8px; }
.lg-state b { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 21px; letter-spacing: .03em; text-transform: uppercase; }
.lg-state p { margin: 0; max-width: 340px; font-size: 14px; font-weight: 500; color: var(--tx-1); }
.lg-state-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--stroke-accent); }
.lg-state.small .lg-state-ico { width: 44px; height: 44px; }
.lg-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--accent); animation: spin .8s linear infinite; }

/* ================================================================== 3D ETİKETLER (#menu-labels) */
.m3d-label {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}
.m3d-name {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 170px;
  overflow: hidden;
  padding: 3px 10px 4px 9px;
  border-radius: 6px;
  background: rgba(10, 13, 22, .84);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 3px 0 0 var(--lc, var(--tx-2)), 0 6px 16px rgba(0, 0, 0, .4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  color: var(--tx-0);
}
.m3d-ic { display: block; }
.m3d-badge { flex: none; display: grid; place-items: center; color: var(--tx-1); }
.m3d-badge.champ, .m3d-badge.host { color: var(--accent); }
.m3d-badge.spoon { color: #e7b988; }
.m3d-badge.medal.m1 { color: var(--gold); }
.m3d-badge.medal.m2 { color: var(--silver); }
.m3d-badge.medal.m3 { color: var(--bronze); }
.m3d-rank { flex: none; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 13px; color: var(--tx-2); }
.m3d-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3d-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: rgba(10, 13, 22, .75);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--tx-1);
}
.m3d-label.me .m3d-name { border-color: var(--stroke-accent); box-shadow: inset 3px 0 0 var(--accent), 0 0 18px -4px var(--accent-glow), 0 6px 16px rgba(0, 0, 0, .4); }
.m3d-label.me .m3d-sub { background: var(--accent); color: var(--accent-ink); }
.m3d-label.offline { opacity: .5; }
.m3d-label.below { translate: -50% 0; }
.m3d-label.emote .m3d-name { animation: labelPing .5s var(--ease); }
.m3d-label.podium .m3d-name { font-size: 16px; max-width: 220px; }
.m3d-label.podium.rank1 .m3d-name { font-size: 18px; padding: 4px 12px 5px 10px; }
.m3d-sub.king { background: var(--accent); color: var(--accent-ink); }
.m3d-sub.spoon { background: var(--wood-d); color: var(--wood-l); }
.m3d-label.loser .m3d-name { filter: saturate(.7); }
.m3d-empty {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 7px;
  border-radius: 6px;
  background: rgba(10, 13, 22, .7);
  border: 1px dashed rgba(255, 255, 255, .35);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--tx-1);
  animation: softPulse 2.6s ease-in-out infinite;
}
.m3d-empty .m3d-ic { color: var(--accent); }
.m3d-label.hidden { display: none; }

/* ================================================================== DUYARLI DÜZEN */

/* dar yatay telefon: ~844×390, 740×360, 667×375 */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --gap: 8px; --panel-w: clamp(280px, 41vw, 372px); --side-w: clamp(296px, 48vw, 430px); }
  #screens > .screen { gap: 6px; }
  body[data-screen="lobby"] #toast-root { top: calc(var(--safe-t) + 58px); }

  .brand-logo { height: 26px; }
  .brand-wrap { gap: 12px; }
  .brand-tagline { font-size: 11px; padding-left: 12px; letter-spacing: .12em; }
  .top-actions { gap: 6px; }
  .home-left { grid-template-rows: minmax(90px, 1fr) auto auto; gap: 4px; }
  .char-kicker, .char-strip-wrap { display: none; }
  .stage-all { height: 32px; bottom: 2px; right: 2px; font-size: 14px; }
  .char-name { font-size: 22px; }
  .char-tag { font-size: 11.5px; }
  .stage-arrow { width: 44px; height: 44px; margin-top: -22px; }
  .stage-taunt { font-size: 14px; top: 0; }
  .stage-hint { bottom: 2px; font-size: 11px; padding: 3px 10px; }
  .games-title { display: none; }
  .games-row { gap: 6px; }
  .game-card { min-height: 48px; padding: 4px 30px 4px 5px; gap: 8px; }
  .games-row .game-art { width: 40px; height: 40px; }
  .game-text small, .game-meta { display: none; }
  .game-text b { font-size: 16px; }
  .game-check, .game-tag { top: 50%; margin-top: -10px; right: 7px; }
  .game-tag { margin-top: -9px; }

  .lgame { min-height: 46px; padding: 3px 10px 3px 4px; gap: 7px; }
  .lgame-art .game-art { width: 36px; height: 36px; }
  .lgame-txt small { font-size: 8.5px; }
  .lgame-txt b { font-size: 15px; }
  .game-field { margin-bottom: 10px; }
  .game-pick { min-height: 48px; padding: 5px 8px 5px 5px; gap: 8px; }
  .game-pick > .mode-check { top: 2px; left: 31px; }
  .game-pick .game-art { width: 36px; height: 36px; }
  .gp-text b { font-size: 14.5px; }
  .gp-text small { font-size: 10.5px; }
  .modal-chars .char-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .modal-chars .char-cell-name { display: -webkit-box; font-size: 10px; }

  .home-panel { gap: 9px; padding: 10px 12px 12px; align-self: stretch; }
  .profile-card { gap: 10px; }
  .profile-main { gap: 5px; }
  .profile-main > .field-label { display: none; }
  .lvl-badge { width: 44px; height: 50px; }
  .lvl-badge b { font-size: 20px; }
  .name-input { height: 42px; font-size: 19px; }
  .name-row .btn-icon { min-height: 42px; width: 42px; height: auto; }
  .name-hint { font-size: 11px; }
  .field { gap: 5px; }
  .field-label { font-size: 10px; }
  .swatches {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 5px 5px 6px; margin: -5px -5px -6px; gap: 7px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
  }
  .swatches::-webkit-scrollbar { display: none; }
  .swatch { width: 28px; height: 28px; }
  .hat-chip { width: 50px; min-height: 50px; padding: 4px 3px; }
  .hat-chip .hat-thumb { --av: 30px !important; }
  .hat-name { display: none; }
  .hat-lock { font-size: 9px; padding: 0 3px; gap: 2px; bottom: -6px; }
  .main-actions {
    position: sticky;
    bottom: -12px;
    z-index: 3;
    flex-direction: row;
    gap: 8px;
    margin: auto -12px -12px;
    padding: 8px 12px 12px;
    background: linear-gradient(180deg, rgba(11, 15, 25, 0), rgba(11, 15, 25, .96) 34%);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .main-actions .btn-lg { flex: 1 1 0; min-width: 0; --h: 48px; font-size: clamp(16px, 2.2vw, 19px); padding: 0 .6em; gap: 6px; }

  .lobby-top { gap: 6px; flex-wrap: nowrap; }
  .room-code { min-height: 46px; padding: 3px 9px 3px 10px; gap: 8px; }
  .room-code small { font-size: 8.5px; }
  .code-tile { width: 28px; height: 36px; font-size: 25px; }
  .lobby-banner { font-size: 13px; padding: 4px 12px; }
  .emote-bar {
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 2px 4px 7px;
    margin: 0 auto;
    max-width: 100%;
  }
  .emote-bar::-webkit-scrollbar { display: none; }
  .emote-btn { flex: none; width: 42px; height: 42px; }
  .emote-btn::before { inset: -2px; }
  .emote-ico { font-size: 20px; }
  .emote-bar.cooldown::after { bottom: 2px; }
  .lobby-stage { min-height: 110px; }
  .panel-scroll { padding: 10px 12px; }
  .mode-card { min-height: 92px; padding: 8px 4px 7px; gap: 3px; }
  .mode-ic { width: 36px; height: 36px; }
  .mode-ic .ic { width: 24px; height: 24px; }
  .mode-ic.has-art .ca { --ca-s: 36px; }
  .mode-name { font-size: 14px; }
  .mode-desc { font-size: 10.5px; }
  .mode-rule { font-size: 12px; padding: 7px 10px; margin-bottom: 10px; }
  /* sekmeli panel: oyuncular | maç ayarları (#85) */
  .panel-tabs { display: flex; }
  .lobby-panel.tab-players .sec-settings, .lobby-panel.tab-settings .sec-players { display: none; }
  .lobby-sec + .lobby-sec { margin-top: 0; padding-top: 0; border-top: 0; }
  .sec-players > .sec-head, .sec-settings > .sec-head { display: none; }
  .settings-summary { display: flex; }
  .players { gap: 5px; }
  .pcard { min-height: 46px; padding: 4px 8px 4px 9px; gap: 7px; }
  .pcard .avatar { --av: 34px !important; }
  .pc-sub, .pc-me { display: none; }
  .pc-name { font-size: 16px; }
  .pc-kick { width: 16px; }
  .pc-kick .ic { width: 14px; height: 14px; }
  .pc-crown, .pc-host { width: 17px; height: 17px; }
  .team-col { padding: 5px; gap: 4px; }
  .team-head { font-size: 13px; min-height: 28px; gap: 5px; }
  .team-col .pcard { padding-right: 6px; }
  .spectators { margin-top: 6px; padding: 6px 8px; }
  .spec-note { display: none; }
  .invite-card { margin-top: 8px; padding: 8px; gap: 10px; }
  .invite-card .qr-img { --qr: 88px; }
  .ic-url { font-size: 15px; }
  .ic-sub { display: none; }
  .lobby-footer, .podium-footer { padding: 8px 10px 10px; }
  .lobby-footer .btn-lg, .podium-footer .btn-lg { --h: 48px; font-size: 19px; }
  .start-hint { margin-top: 5px; font-size: 11px; }
  .wait-text { font-size: 15px; }
  .wait-host { font-size: 12px; }

  .podium-head { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; }
  .podium-kicker { height: 22px; font-size: 12px; }
  .podium-title { font-size: clamp(22px, 2.6vw + 8px, 32px); }
  .podium-sub { font-size: 12px; }
  .podium-stage { min-height: 110px; }
  .xp-card { padding: 9px 10px; }
  .xp-gain { font-size: 24px; }
  .podium-footer .wait-text { font-size: 13px; }
  .podium-footer .wait-host { font-size: 11px; }
  .podium-footer { gap: 7px; }
  .podium-timer { font-size: 11.5px; padding: 4px 10px; }
  .spoon-card { padding: 9px 11px; gap: 11px; }
  .spoon-medal { width: 44px; height: 44px; }
  .spoon-text b { font-size: 18px; }
  .card-sec { margin-bottom: 12px; }

  .league-title { font-size: 26px; }
  .league-cup { width: 32px; height: 32px; }
  .league-sub { display: none; }
  .lg-main, .lg-side { padding: 10px 12px; }
  .lg-hero { padding: 8px 10px; margin-bottom: 10px; gap: 10px; }
  .lg-hero-crown { width: 42px; height: 42px; }
  .lg-hero-text b { font-size: 20px; }

  .m3d-name { font-size: 13px; padding: 2px 8px 3px 7px; max-width: 128px; }
  .m3d-sub { font-size: 9.5px; height: 14px; }
  .m3d-label.podium .m3d-name { max-width: 160px; font-size: 14px; }
  .m3d-label.podium.rank1 .m3d-name { font-size: 15px; }

  .modal-card { padding: 14px 16px; }
  .modal-card::before { left: 16px; }
  .modal-title { font-size: 21px; margin-bottom: 10px; }
  .modal-title-icon { width: 30px; height: 30px; }
  .modal-x { top: 8px; right: 8px; }
  .modal-actions { bottom: -14px; margin: 6px -16px -14px; padding: 8px 16px 14px; }
  .modal-body { gap: 10px; }
  .modal-join { width: min(580px, 100%); }
  .modal-join .join-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: center; }
  .modal-join .join-body > .modal-text, .modal-join .join-err, .modal-join .code-boxes { grid-column: 1 / -1; }
  .code-box { width: 50px; height: 58px; font-size: 34px; }
  .join-as { grid-column: 1; }
  .modal-join .join-body > .join-go { grid-column: 2; }
  .modal-settings .settings-body { gap: 10px; }
  .settings-col, .settings-cols { gap: 12px; }
  .modal-settings .switch-row { min-height: 46px; padding: 5px 10px 5px 6px; }
  .modal-settings .switch-label small { display: none; }
  .modal-settings .field-hint, .settings-foot { display: none; }
  .modal-settings .seg-btn { min-height: 42px; }
  .modal-settings .slider-row { min-height: 34px; }
  .slider-row { min-height: 38px; }
  .modal-invite .qr-img { width: min(170px, calc(100vh - 170px)); height: min(170px, calc(100vh - 170px)); }
  .modal-invite .invite-info { gap: 8px; }
  .invite-code b { font-size: 24px; }
  .modal-help .help-list { grid-template-columns: 1fr 1fr; }
  .help-item { padding: 9px; gap: 10px; }
  .help-ico { width: 34px; height: 34px; }
  .help-item p { font-size: 12px; }
  .char-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .char-cell { min-height: 0; padding: 5px 2px; }
  .char-cell-name { display: none; }
  .char-cell .avatar { --av: 44px !important; }
}

/* çok kısa yatay (≤ 390) */
@media (orientation: landscape) and (max-height: 390px) {
  .home-left { grid-template-rows: minmax(80px, 1fr) auto auto; }
  .char-tag, .stage-hint { display: none; }
  .brand-tagline { display: none; }
  .home-panel { gap: 7px; }
  .name-hint:not(.attn) { display: none; }
  .lobby-banner { font-size: 12px; padding: 3px 10px; }
  .podium-sub { display: none; }
  .podium-kicker { font-size: 11px; }
  .xp-text { font-size: 11px; }
}
/* çok kısa ve dar yatay (≤ 340 yükseklik: 568×320) */
@media (orientation: landscape) and (max-height: 340px) {
  .brand-logo { height: 22px; }
  .home-top .btn-icon, .home-top .btn { --h: 40px; width: auto; height: 40px; min-width: 40px; }
  .home-top .btn-icon { width: 40px; }
  .lvl-badge { width: 38px; height: 44px; }
  .lvl-badge b { font-size: 17px; }
  .name-input { height: 40px; font-size: 17px; }
  .name-row .btn-icon { min-height: 40px; width: 40px; }
  .room-code { min-height: 40px; }
  .code-tile { width: 25px; height: 32px; font-size: 22px; }
  .panel-tab { min-height: 36px; }
  .start-hint { display: none; }
  .lobby-footer, .podium-footer { padding: 6px 8px 8px; }
  .lobby-footer .btn-lg, .podium-footer .btn-lg { --h: 44px; font-size: 17px; }
  .podium-timer { padding: 3px 8px; }
  .xp-row { gap: 6px; }
  .field-label { display: none; }
  .home-panel .field { gap: 0; }
  .hat-chip { width: 44px; min-height: 44px; }
  .hat-chip .hat-thumb { --av: 26px !important; }
  .main-actions .btn-lg { --h: 44px; font-size: 16px; }
  .char-name { font-size: 19px; }
  .game-card { min-height: 42px; }
  .games-row .game-art { width: 32px; height: 32px; }
  .lgame { min-height: 40px; }
  .lgame-art .game-art { width: 30px; height: 30px; }
  .lgame-txt small { display: none; }
  .boot-logo { width: min(48vw, 300px); }
  #boot { gap: 10px; }
  .tap-orb { width: 54px; height: 54px; }
}

/* dikey (portre) telefon ve dar pencereler: ekran dikey kayar */
@media (orientation: portrait), (max-width: 620px) and (min-height: 541px) {
  :root { --gap: 10px; }
  .home-layout { flex: none; }
  .home-top { flex-wrap: wrap; row-gap: 6px; }
  .brand-wrap { flex-direction: column; align-items: flex-start; gap: 4px; }
  .brand-logo { height: clamp(28px, 8vw, 40px); }
  .brand-tagline { padding-left: 2px; border-left: 0; font-size: 11px; }
  .top-league-lbl { display: none; }
  .top-league { padding: 0 !important; }
  .top-league.btn-icon { width: 48px !important; }
  .home-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; flex: none; }
  .home-left { display: contents; }
  .home-stage { order: 1; height: clamp(220px, 34vh, 400px); }
  .char-info { order: 2; margin-top: -4px; }
  .games-strip { order: 3; }
  .home-panel { order: 4; align-self: stretch; max-height: none; overflow: visible; }
  .game-card { min-height: 58px; padding: 6px 28px 6px 6px; gap: 9px; }
  .games-row .game-art { width: 42px; height: 42px; }
  .game-text b { font-size: 16px; }
  .game-text small, .game-meta .ic, .gm-pl, .gm-sep { display: none; }
  /* ana butonlar ilk ekranda: panelin altına yapışık şerit (#84) */
  .home-panel .main-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex-direction: row;
    gap: 10px;
    margin: 2px -16px -16px;
    padding: 12px 14px max(14px, var(--safe-b));
    background: linear-gradient(180deg, rgba(11, 15, 25, 0), rgba(11, 15, 25, .97) 30%);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .main-actions .btn-lg { flex: 1 1 0; min-width: 0; padding: 0 .5em; font-size: clamp(17px, 4.8vw, 22px); gap: 6px; }
  /* 16 karakter: 8×2 ızgara (hepsi görünür, kaydırma yok) */
  .char-strip-wrap { width: 100%; max-width: 440px; }
  .char-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; width: 100%; overflow: visible; padding: 4px 0 2px; }
  .char-strip-wrap .strip-nav { display: none !important; }
  .char-strip-wrap.overflow .char-strip { -webkit-mask-image: none; mask-image: none; }
  .char-pick { width: auto; height: auto; aspect-ratio: 1 / 1; margin: 0 !important; }
  .char-pick .avatar { --av: 100% !important; border-radius: 26%; }

  .lobby-top .hide-xs { display: none; }

  .lobby-top { gap: 6px; }
  .lobby-top .top-spacer { display: none; }
  .room-code { order: -1; flex: 1 1 100%; justify-content: center; }
  .lobby-top > .btn { flex: 1 1 auto; }
  .lgame-txt small { display: none; }
  .lgame-txt b { font-size: 16px; }
  .lobby-top > .lobby-exit, .lobby-top > .invite-btn { flex: 0 0 auto; width: 48px; padding: 0; justify-content: center; }
  .lobby-top > .lgame { flex: 1 1 auto; min-height: 48px; padding: 3px 10px 3px 4px; }
  .lobby-top .lgame-art .game-art { width: 38px; height: 38px; }
  .lobby-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; flex: none; }
  .lobby-stage { flex: none; height: clamp(210px, 34vh, 380px); }
  .lobby-panel { overflow: visible; }
  .lobby-panel .panel-scroll { overflow: visible; }
  .lobby-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-bottom: max(14px, var(--safe-b));
    background: linear-gradient(180deg, #121827, #0c111b);
  }

  .podium-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; flex: none; }
  .podium-stage { flex: 1 1 auto; height: clamp(210px, 31vh, 380px); }
  .podium-panel { overflow: visible; }
  .podium-panel .panel-scroll { overflow: visible; }
  .podium-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-bottom: max(14px, var(--safe-b));
    background: linear-gradient(180deg, #121827, #0c111b);
  }

  .league-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; flex: none; }
  .lg-main, .lg-side { overflow: visible; }

  .settings-cols { grid-template-columns: minmax(0, 1fr); }
  .invite-body.has-qr { display: flex; flex-direction: column; align-items: stretch; }
  .invite-body.has-qr > .qr-box { align-self: center; }
}

/* dar kutuda lig tablosunda daha az sütun (V21: başlıklar tek satır, sadece ikon) */
@container (max-width: 560px) {
  .lg-table { min-width: 0; }
  .lg-row { grid-template-columns: 30px minmax(92px, 1fr) 60px 44px 46px 38px 30px; gap: 3px; padding: 4px 6px; }
  .lg-row .c-lvl, .lg-row .c-rounds { display: none; }
  .lg-head .lg-hl { display: none; }
  .lg-head .c-kd .lg-hl, .lg-head .c-fav .lg-hl { display: inline; }
  .c-lvl-inline { display: inline; }
  .c-name { flex-wrap: nowrap; }
  .c-name b { font-size: 16px; }
  .c-num { font-size: 14px; }
  .c-num.strong { font-size: 16px; }
  .lg-weapon .ic { width: 22px; height: 22px; }
}
@container (min-width: 380px) {
  .lobby-panel.tab-players .players:not(.teams) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 360px) {
  .st-row .st-av, .st-xpbar { display: none; }
  .gp-text small { display: none; }
}
@container (max-width: 420px) {
  .st-row { grid-template-columns: 24px minmax(90px, 1fr) 30px 26px 26px 52px; gap: 3px; padding: 4px 6px 4px 4px; }
  .st-row > .st-dmg { display: none; }
  .st-name { gap: 5px; }
  .st-name b { font-size: 15px; }
  .st-av { --av: 22px !important; }
}
/* lig: çok dar kutuda K/D gizli, kaşık sütunu ekranda kalsın (#95) */
@container (max-width: 400px) {
  .lg-row { grid-template-columns: 26px minmax(96px, 1fr) 54px 40px 34px 28px; }
  .lg-row .c-kd { display: none; }
  .lg-head .c-fav .lg-hl { display: none; }
}
@media (max-width: 380px) {
  .hide-xs { display: none; }
  .lobby-exit, .invite-btn { padding: 0 12px; }
}
@media (max-width: 440px) {
  .emote-bar { flex-wrap: nowrap; justify-content: space-between; gap: 4px; max-width: 400px; width: 100%; margin: 0 auto; }
  .emote-btn { flex: 0 1 44px; width: auto; min-width: 40px; height: auto; aspect-ratio: 1 / 1; }
  .emote-ico { font-size: 20px; }
  .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* KATIL butonu yazısı dar yatay ekranda sığsın (#97) */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 760px) {
  .main-actions .btn-ic { display: none; }
  .top-league-lbl { display: none; }
  .top-league { padding: 0 !important; width: 44px !important; }
  body.is-touch .top-league { width: 48px !important; }
  .lobby-exit .hide-xs { display: none; }
  .lobby-exit { padding: 0 12px; }
  .brand-tagline { display: none; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 700px) {
  .main-actions .lbl-long { display: none; }
  .invite-btn .hide-xs { display: none; }
  .invite-btn { padding: 0 12px; }
}
@media (max-width: 600px) {
  .players { grid-template-columns: minmax(0, 1fr); }
}

/* büyük ekran: daha ferah */
@media (min-width: 1100px) and (min-height: 700px) {
  /* sunucu bilgisayarının ekranından telefonla okutulacak: QR büyük olsun */
  .invite-card .qr-img { width: 150px; height: 150px; }
}
@media (min-width: 1200px) and (min-height: 700px) {
  :root { --panel-w: 420px; --side-w: clamp(470px, 36vw, 540px); }
  .home-panel { padding: 20px; gap: 16px; }
  .pcard { min-height: 62px; }
  .game-card { min-height: 72px; }
}

/* ------------------------------------------------------------------ v7 (§18): ÜÇ oyun kartı + Mini Oyun Şöleni lobisi
   Ana ekran şeridi ve lobi oyun seçimi GAME_IDS kadar sütun (--gn; home.js / lobby.js verir). Üç kartta isim iki satıra
   kırılabilir, seçim işareti resmin köşesinde; 667×375'te üç kart taşmadan tek sırada (solen README §13.6). */
.games-row { grid-template-columns: repeat(var(--gn, 2), minmax(0, 1fr)); }
.game-picks { grid-template-columns: repeat(var(--gn, 2), minmax(0, 1fr)); }
.games-n3 .game-card { gap: 10px; padding-right: 10px; }
.games-n3 .game-text b { white-space: normal; font-size: 16px; line-height: 1.02; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; padding: 1px 0; }
.games-n3 .game-meta .ic, .games-n3 .gm-pl, .games-n3 .gm-sep { display: none; }
.games-n3 .game-check { top: 4px; left: 4px; right: auto; width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--bg-1); }
.games-n3 .game-tag { top: 4px; right: 4px; height: 16px; font-size: 9px; padding: 0 5px; }
.game-picks-n3 .game-pick { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 6px; padding: 8px 6px 7px; }
.game-picks-n3 .gp-text { align-items: center; max-width: 100%; }
.game-picks-n3 .gp-text b { white-space: normal; font-size: 14.5px; line-height: 1.02; }
.game-picks-n3 .gp-text small { display: none; }
.game-picks-n3 .game-pick > .mode-check { top: 5px; right: 5px; left: auto; }
/* Mini Oyun Şöleni: beş mini oyun bilgi kartı (dokunulmaz; ikon rengi = mini oyunun rengi) */
.mini-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mini-card { min-height: 0; padding: 9px 3px 8px; gap: 4px; cursor: default; }
.mode-card.mini-card:active { transform: none; }
.mini-card .mode-ic { width: 38px; height: 38px; color: var(--mc, var(--accent)); background: color-mix(in srgb, var(--mc, #ffcf33) 12%, transparent); border-color: color-mix(in srgb, var(--mc, #ffcf33) 38%, transparent); }
.mini-card .mode-ic .ic { width: 24px; height: 24px; }
.mini-card .mode-name { font-size: 12.5px; line-height: 1.04; letter-spacing: .02em; overflow-wrap: anywhere; }
.mini-card .mode-desc { font-size: 10px; line-height: 1.2; color: var(--tx-1); }
@media (min-width: 1200px) and (min-height: 700px) {
  .mini-card .mode-name { font-size: 14px; }
  .mini-card .mode-desc { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .games-n3 .game-card { min-height: 46px; padding: 4px 6px 4px 5px; gap: 7px; }
  .games-n3.games-row .game-art { width: 36px; height: 36px; }
  .games-n3 .game-text b { font-size: 13.5px; }
  .games-n3 .game-check { top: 2px; left: 2px; margin-top: 0; width: 16px; height: 16px; }
  .games-n3 .game-tag { display: none; }
  .game-picks-n3 .game-pick { min-height: 0; padding: 6px 4px 6px; gap: 4px; }
  .game-picks-n3 .game-pick .game-art { width: 32px; height: 32px; }
  .game-picks-n3 .gp-text b { font-size: 12.5px; }
  .game-picks-n3 .game-pick > .mode-check { top: 3px; right: 3px; left: auto; width: 16px; height: 16px; }
  .mini-cards { gap: 4px; }
  .mini-card { min-height: 0; padding: 6px 2px 6px; gap: 3px; }
  .mini-card .mode-ic { width: 30px; height: 30px; }
  .mini-card .mode-ic .ic { width: 20px; height: 20px; }
  .mini-card .mode-ic.has-art { width: 32px; height: 32px; }
  .mini-card .mode-ic.has-art .ca { --ca-s: 32px; }
  .mini-card .mode-name { font-size: 11px; }
  .mini-card .mode-desc { display: none; }
}
@media (orientation: landscape) and (max-height: 340px) {
  .games-n3 .game-card { min-height: 40px; }
  .games-n3.games-row .game-art { width: 30px; height: 30px; }
}
@media (orientation: portrait), (max-width: 620px) and (min-height: 541px) {
  .games-n3 .game-card { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 6px; min-height: 0; padding: 8px 4px 7px; }
  .games-n3 .game-text { align-items: center; max-width: 100%; }
  .games-n3 .game-text b { font-size: 13.5px; }
  .games-n3 .game-meta { display: none; }
  .games-n3 .game-tag { top: 3px; right: 3px; }
  .mini-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .mini-card .mode-name { font-size: 11px; }
  .mini-card .mode-desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================== ANİMASYONLAR (kısa, ease-out; zıplama/sallanma yok) */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes toastBump { 0%, 100% { box-shadow: var(--shadow-2), var(--shadow-inset-hi); } 40% { box-shadow: var(--shadow-2), 0 0 0 1px var(--tc, var(--cyan)); } }
@keyframes nameIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes ctaPulse { 0%, 100% { box-shadow: 0 8px 22px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .6); } 45% { box-shadow: 0 0 0 3px rgba(255, 207, 51, .35), 0 0 34px -2px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .6); } }
@keyframes diceRoll { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
@keyframes boxIn { from { background-color: rgba(255, 207, 51, .25); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes tileIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes sweep { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }
@keyframes sweepBg { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
@keyframes sweepOnce { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes cooldownBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes dotBlink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes softPulse { 50% { opacity: .55; } }
@keyframes hourglass { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
@keyframes titleIn { from { opacity: 0; transform: translateY(10px); letter-spacing: .08em; } to { opacity: 1; transform: none; } }
@keyframes bandIn { from { opacity: 0; transform: scaleX(.6); } to { opacity: 1; transform: none; } }
@keyframes badgePop { 0% { transform: scale(1); } 40% { transform: scale(1.12); filter: drop-shadow(0 0 10px var(--accent-glow)); } 100% { transform: scale(1); } }
@keyframes glowPulse { 50% { box-shadow: 0 0 0 3px rgba(176, 122, 69, .4), 0 0 22px rgba(176, 122, 69, .6), inset 0 -3px 6px rgba(0, 0, 0, .35); } }
@keyframes ruleFlash { 0% { background: rgba(255, 207, 51, .22); } 100% { background: rgba(0, 0, 0, .2); } }
@keyframes labelPing { 0% { transform: translateY(0); } 35% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
@keyframes rotatePhone { 0%, 25% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes bootIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bootBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes gamePick { 0% { transform: scale(.97); } 100% { transform: none; } }
@keyframes lgameFlash { 0% { box-shadow: 0 0 0 2px var(--accent), 0 0 26px -2px var(--accent-glow); } 100% { box-shadow: var(--shadow-1), var(--shadow-inset-hi); } }
@keyframes tapRing { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(2.15); opacity: 0; } }
/* metin dolgusu: 250% genişlikte gradyan hep metni örter (0%↔100%) — parlak şerit metnin üstünden geçer */
@keyframes tapSweep { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }
@keyframes tapPress { 0%, 58%, 100% { transform: scale(1); } 66% { transform: scale(.9); } 76% { transform: scale(1); } }

/* ------------------------------------------------------------------ v8 (docs/v8-platform.md §9-§11): 5 oyunlu site
   ≤ 3 oyun: v7 kart düzeni AYNEN (etiket gizli). ≥ 4 oyun: tek satır KARO şeridi — seçili karo iki kat geniş ve tam adı
   gösterir (telefon), diğerleri resim + kısa etiket; orta ekranda eşit karolar (no + ad), büyük ekranda satır kartları.
   "YENİ" rozeti (status new, cihaz oynayana dek), DEV çipi (?dev=1 ile görünen kapalı oyun) — DEV çipi YENİ rozetinin yerinde
   (sağ üst; karoda o rozet gizlenir): alt ortadaki etiketle aynı satırı paylaşmaz. */
.game-text .gt-tag, .gp-text .gp-tag { display: none; }
.game-dev {
  position: absolute !important;
  right: 3px;
  top: 3px;
  height: 14px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid var(--stroke-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--tx-1);
  pointer-events: none;
}
.game-card.dev, .game-pick.dev { border-style: dashed; }
/* ana ekran karo şeridi (≥ 4 oyun) — orta ekran varsayılanı: eşit karolar, resim 36 + no + ad (2 satır, 13.5 px) */
.games-row.games-tiles { display: flex; gap: 6px; }
.games-tiles .game-card {
  flex: 1 1 0;
  min-width: 56px;
  min-height: 50px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 6px 4px 5px;
  transition: flex-grow 160ms var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.games-tiles .game-card .game-art, .games-tiles.games-row .game-art { width: 36px; height: 36px; }
.games-tiles .game-text { align-items: center; max-width: 100%; }
.games-tiles .game-text .gt-no { display: block; font-size: 10px; }
.games-tiles .game-text .gt-name { white-space: normal; font-size: 13.5px; line-height: 1.04; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; overflow-wrap: anywhere; padding: 1px 0; }
.games-tiles .game-meta, .games-tiles .game-check { display: none; }
.games-tiles .game-text .gt-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tx-1);
}
.games-tiles .game-card.on .gt-tag, .games-tiles .game-card.on .gt-name { color: var(--accent); }
.games-tiles .game-new { top: 3px; right: 3px; height: 15px; padding: 0 4px; font-size: 10px; font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; margin-top: 0; }
.games-tiles .game-card.on .game-new { display: inline-flex; }
.game-card.dev .game-new, .games-tiles .game-card.dev.on .game-new { display: none; }
@media (min-width: 1200px) and (min-height: 700px) {
  /* büyük ekran: satır kartları (resim 42 solda, no + ad 2 satır 15 px, meta yok) */
  .games-tiles .game-card { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; padding: 8px; min-height: 64px; }
  .games-tiles .game-card .game-art, .games-tiles.games-row .game-art { width: 42px; height: 42px; }
  .games-tiles .game-text { align-items: flex-start; }
  .games-tiles .game-text .gt-name { font-size: 15px; }
}
/* telefon (yatay ≤ 540 px yükseklik) ve dikey: karo = resim + etiket; SEÇİLİ karo 2× geniş, resim solda + tam ad (12 px, 2 satır) */
@media (orientation: landscape) and (max-height: 540px), (orientation: portrait), (max-width: 620px) and (min-height: 541px) {
  .games-tiles .game-card { min-height: 50px; padding: 5px 3px 4px; gap: 3px; }
  .games-tiles .game-card .game-art, .games-tiles.games-row .game-art { width: 28px; height: 28px; }
  .games-tiles .game-text .gt-no, .games-tiles .game-text .gt-name { display: none; }
  .games-tiles .game-text .gt-tag { display: block; }
  .games-tiles .game-card.on { flex-grow: 2; flex-direction: row; justify-content: flex-start; text-align: left; gap: 5px; padding: 4px 5px 4px 4px; }
  .games-tiles .game-card.on .game-text { align-items: flex-start; min-width: 0; }
  .games-tiles .game-card.on .game-text .gt-tag { display: none; }
  .games-tiles .game-card.on .game-text .gt-name {
    display: -webkit-box;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
    font-size: 12px;
    line-height: 1.08;
    letter-spacing: .02em;
    color: var(--accent);
  }
}
@media (orientation: portrait), (max-width: 620px) and (min-height: 541px) {
  .games-tiles .game-card .game-art, .games-tiles.games-row .game-art { width: 30px; height: 30px; }
}
/* lobi oyun seçimi (≥ 4 oyun): karo — resim 26 + etiket 11.5 px; ad ≥ 900 px genişlikte (tam ad kural satırında) */
.game-picks.game-picks-tiles { gap: 6px; }
.game-picks-tiles .game-pick { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; min-height: 0; padding: 6px 3px 5px; }
.game-picks-tiles .game-pick .game-art { width: 26px; height: 26px; }
.game-picks-tiles .gp-text { align-items: center; max-width: 100%; }
.game-picks-tiles .gp-text b, .game-picks-tiles .gp-text small { display: none; }
.game-picks-tiles .gp-text .gp-tag {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tx-1);
}
.game-picks-tiles .game-pick.on .gp-tag { color: var(--accent); }
.game-picks-tiles .game-pick > .mode-check { top: 3px; right: 3px; left: auto; width: 14px; height: 14px; }
@media (min-width: 900px) {
  .game-picks-tiles .game-pick { padding: 7px 4px 6px; }
  .game-picks-tiles .game-pick .game-art { width: 30px; height: 30px; }
  .game-picks-tiles .gp-text b { display: -webkit-box; white-space: normal; font-size: 12.5px; line-height: 1.02; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .game-picks-tiles .gp-text .gp-tag { display: none; }
}
/* lobi bilgi kartları (meta lobby.cards): renkli kartlar mini kart sunumu; sütun sayısı --ic (≤ 5 → n, fazlası 2 satır) */
.info-cards.mini-cards { grid-template-columns: repeat(var(--ic, 5), minmax(0, 1fr)); }
.info-cards { position: relative; }
.info-title { margin: 2px 0 6px; }
.mode-card.has-badge { position: relative; }
.info-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1;
}
.info-more, .cards-peek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: -4px 0 12px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--stroke-2);
  color: var(--tx-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.info-more.hidden, .cards-peek.hidden { display: none; }
.modal-more { width: min(560px, 100%); }
.more-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.more-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--stroke); }
.more-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); color: var(--accent); }
.more-item b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; }
.more-item p { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--tx-1); line-height: 1.35; }
/* v9 kart sanatı (docs/v9-card-art.md §8.4/§8.5): karo kendi çerçevesini ve rengini taşır → ikon kabının zemini/çerçevesi kalkar */
.mode-ic.has-art, .mode-card.on .mode-ic.has-art, .mini-card .mode-ic.has-art, .course-card .mode-ic.has-art, .more-ic.has-art {
  background: none;
  border-color: transparent;
  border-radius: 22%;
  color: inherit;
}
.mode-ic.has-art { border-width: 0; }
.mode-ic.has-art .ca { --ca-s: 40px; box-shadow: 0 5px 12px -5px rgba(0, 0, 0, .7); }
.mini-card .mode-ic.has-art .ca { --ca-s: 38px; }
.more-ic.has-art { width: 40px; height: 40px; }
.more-ic.has-art .ca { --ca-s: 40px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .7); }
.modal-cards .more-ic.has-art { width: 52px; height: 52px; }
.modal-cards .more-ic.has-art .ca { --ca-s: 52px; }
.modal-cards .more-item { align-items: center; }
/* KARTLAR görüntüleyicisi düğmesi (kart anahtarının altında): 3 üst üste binen küçük karo + "21 KART" + ok */
.cards-peek { margin: 0; align-self: flex-start; padding-left: 7px; }
.cards-peek__tiles { display: inline-flex; align-items: center; }
.cards-peek__tiles .ca + .ca { margin-left: -8px; }
.cards-peek__tiles .ca { box-shadow: 0 0 0 1.5px var(--bg-1, #0d111b); }
/* tek kart anahtarı kabı (akışı bozmasın) + BOT ZORLUĞU */
.cards-sw-wrap { display: contents; }
.bot-field.hidden { display: none; }
.seg-botlevel .seg-btn { min-height: 38px; }
/* yardım: oyun başlık satırı ("AD · kısa") */
.help-game { margin: -4px 0 0; font-size: 13px; font-weight: 500; color: var(--tx-2); }
.help-game b { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--tx-0); }
/* lig: oyun süzgeci + oyun görünümünde kullanılmayan sütunlar (hizayı korur) */
.lg-filter { margin: 0 0 8px; }
.seg-league .seg-btn { min-height: 34px; font-size: 13px; }
.lg-row > .c-off { visibility: hidden; }
/* fix-v9: DOKUN rozeti mini oyun çizimini örtmesin — küçük yatay ekranda yalnız ikon (sağ üst köşe); ad çizimin altında kalsın */
@media (orientation: landscape) and (max-height: 540px) {
  .mini-card .info-badge { top: 2px; right: 2px; height: 14px; padding: 0 2px; }
  .mini-card .info-badge span { display: none; }
  .mini-card .mode-ic.has-art { margin-bottom: 3px; }
}
.more-sep { margin: 8px 2px 2px; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .1em; color: var(--tx-2); }