/* =====================================================================
   Dama (Türk Daması) — web client styles.
   Theme: deep indigo/navy + amber. Board: dark wood / amber. Pieces: cream
   (seat 0 = you) vs red-brown (seat 1 = opponent). No purple.
   Shell (screens/buttons/lists/overlays) mirrors the sibling web clients; the
   board + piece visuals are ported from the approved prototype
   (birkartoyunu-ios/prototypes/dama/index.html).
   ===================================================================== */
:root {
  --navy-0:  #0b1030;
  --navy-1:  #111b44;
  --navy-2:  #1a2a5e;
  --navy-3:  #243a7a;
  --navy-line:#2c3f7e;

  --amber:   #f5a623;
  --amber-1: #ffbf4d;
  --amber-2: #e08a12;

  --board-frame: #2a1a0d;
  --sq-light: #cda062;
  --sq-dark:  #7a4a29;

  --cream:   #f4ead6;
  --ink:     #eaf0ff;
  --ink-dim: #9fb0d8;
  --ink-soft:#c7d3f0;

  --good:    #4bd07a;
  --bad:     #ff6b6b;

  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: radial-gradient(130% 90% at 50% 0%, #16224e 0%, var(--navy-0) 58%, #05070f 100%);
  background-attachment: fixed;
  color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body { touch-action: manipulation; }
button { font-family: inherit; }

/* ---------- Screen router ---------- */
.screen {
  display: none; flex-direction: column;
  max-width: 460px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--safe-t) + 12px) 18px calc(var(--safe-b) + 20px);
}
.screen.show { display: flex; }

/* ---------- Headers ---------- */
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.page-head--sub { justify-content: space-between; }
.brand { text-decoration: none; color: inherit; }
.brand.center { text-align: center; flex: 1; }
.eyebrow { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 2px; font-weight: 700; }
.page-title { font-size: 30px; font-weight: 800; margin: 0; letter-spacing: 0.5px; }
.sub-title { font-size: 19px; font-weight: 800; margin: 0; }
.head-actions { margin-left: auto; }
.ghost-btn, .icon-btn {
  border: 1px solid var(--navy-line); background: rgba(255,255,255,0.06);
  color: var(--ink); border-radius: 12px; padding: 8px 12px; font-size: 15px;
  font-weight: 700; cursor: pointer; min-width: 44px; min-height: 40px;
}
.icon-btn { font-size: 18px; }
.ghost-btn:active, .icon-btn:active { filter: brightness(1.2); }
.icon-btn.spinning { animation: spin 0.6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.hub-back { align-self: flex-start; color: var(--ink-dim); text-decoration: none; font-size: 13px; margin: 2px 0 10px; }
.home-tag { font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; margin: 4px 2px 18px; }

/* ---------- Home actions ---------- */
.home-actions { display: flex; flex-direction: column; gap: 12px; }
.big-btn {
  display: flex; align-items: center; gap: 14px; text-align: left;
  border: 1px solid var(--navy-line); border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--navy-2), var(--navy-1));
  color: var(--ink); padding: 16px 16px; cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.big-btn:active { transform: scale(0.985); }
.big-btn.primary { background: linear-gradient(160deg, var(--amber-1), var(--amber-2)); color: #2a1a05; border-color: transparent; box-shadow: 0 8px 20px rgba(245,166,35,0.28); }
.bb-emoji { font-size: 26px; flex: 0 0 auto; }
.bb-text { display: flex; flex-direction: column; }
.bb-text b { font-size: 16.5px; font-weight: 800; }
.bb-text span { font-size: 12.5px; opacity: 0.85; }
.big-btn.primary .bb-text span { color: #4a3410; }

.join-row { display: flex; gap: 8px; margin: 18px 0 6px; }
.code-input {
  flex: 1; text-transform: uppercase; letter-spacing: 3px; text-align: center;
  font-size: 18px; font-weight: 800; padding: 14px; border-radius: var(--r-sm);
  border: 1px solid var(--navy-line); background: rgba(0,0,0,0.25); color: var(--ink);
}
.home-err { color: var(--bad); font-size: 13px; min-height: 18px; margin: 6px 2px; }
.footer-mark { margin-top: auto; text-align: center; font-size: 11.5px; color: var(--ink-dim); padding-top: 20px; }

/* ---------- Buttons ---------- */
.btn {
  border: none; border-radius: var(--r-md); padding: 15px 18px; font-size: 16px;
  font-weight: 800; cursor: pointer; min-height: 52px;
}
.btn:active { transform: translateY(1px); }
.btn.full { width: 100%; }
.btn-confirm { background: linear-gradient(160deg, var(--amber-1), var(--amber-2)); color: #2a1a05; box-shadow: 0 8px 20px rgba(245,166,35,0.28); }
.btn-ghost { background: rgba(255,255,255,0.06); color: var(--ink); box-shadow: inset 0 0 0 1px var(--navy-line); }
.btn-danger { background: linear-gradient(160deg, #ff8080, #d64545); color: #2a0808; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Lists (rooms / recent) ---------- */
.list-panel { margin-top: 6px; }
.data-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.data-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--navy-line); border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--navy-2), var(--navy-1)); padding: 12px 14px;
}
.rAvatar { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(150deg, var(--navy-3), #16224e); flex: 0 0 auto; }
.rMeta { flex: 1; min-width: 0; }
.rTitle { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rSub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.rCode { color: var(--amber-1); font-weight: 700; }
.rJoin { padding: 10px 16px; min-height: 40px; }
.list-empty { text-align: center; color: var(--ink-dim); font-size: 13.5px; padding: 26px 10px; }
.list-empty.hide { display: none; }
/* INVARIANT: recent-winners list is height-CAPPED and scrolls its OWN overflow, so
   the page never grows past the viewport no matter how many matches are returned.
   Scoped to #recentList only — the shared .data-list / .list-panel classes (also used
   by the public room browser) must stay uncapped. */
#recentList {
  max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

/* ---------- Name / code cards ---------- */
.name-card { border: 1px solid var(--navy-line); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--navy-2), var(--navy-1)); padding: 22px; margin-top: 10px; }
.name-sub { font-size: 14px; color: var(--ink-dim); margin: 0 0 14px; }
.text-input { width: 100%; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--navy-line); background: rgba(0,0,0,0.25); color: var(--ink); font-size: 16px; }
.code-card {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 16px;
  border: 1px solid var(--navy-line); border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--navy-2), var(--navy-1)); padding: 14px 16px;
}
.cc-meta { flex: 1; }
.cc-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-dim); }
.cc-code { font-size: 26px; font-weight: 800; letter-spacing: 4px; color: var(--amber-1); }
.cc-share { padding: 12px 16px; min-height: 44px; }

/* ---------- Lobby ---------- */
.lobby-players { margin-top: 6px; }
.section-head h2 { font-size: 15px; margin: 8px 0; }
.muted { color: var(--ink-dim); font-weight: 600; font-size: 13px; }
.seat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.seat-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--navy-line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--navy-2), var(--navy-1)); padding: 12px 14px; }
.seat-row.me { border-color: rgba(245,166,35,0.5); }
.seat-row.empty { opacity: 0.55; border-style: dashed; }
.pAvatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; background: linear-gradient(150deg, var(--navy-3), #16224e); flex: 0 0 auto; }
.pName { flex: 1; font-size: 15px; font-weight: 700; }
.badge { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--ink-soft); }
.badge.host { background: linear-gradient(160deg, var(--amber-1), var(--amber-2)); color: #2a1a05; }

/* ---------- Active-rule badges (lobby + game) ---------- */
.rule-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 2px; }
.rule-badges--game { margin: 2px 0 0; }
.rule-badges:empty { display: none; }
.rule-chip { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(245,166,35,0.14); color: var(--amber-1); border: 1px solid rgba(245,166,35,0.28); white-space: nowrap; }
.lobby-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.wait-hint { text-align: center; color: var(--ink-dim); font-size: 13.5px; }

/* ---------- Game / matchbar ---------- */
.game-screen { padding-left: 10px; padding-right: 10px; }
.matchbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 4px; }
.mp { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.mp.you { flex-direction: row-reverse; text-align: right; }
.mp-ava { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px; background: linear-gradient(150deg, var(--navy-3), #16224e); }
.mp.turn .mp-ava { box-shadow: 0 0 0 2px var(--amber-1), 0 0 12px rgba(245,166,35,0.5); }
.mp-info { min-width: 0; }
.mp-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-cap { font-size: 11px; color: var(--ink-dim); display: flex; align-items: center; gap: 4px; }
.mp.you .mp-cap { justify-content: flex-end; }
.cap-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cap-dot.you { background: radial-gradient(circle at 35% 30%, #fbf1dd, #d3b686); }
.cap-dot.bot { background: radial-gradient(circle at 35% 30%, #c8583b, #6d2214); }
.vs { font-size: 12px; font-weight: 800; color: var(--amber-1); flex: 0 0 auto; }

.play-wrap { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: 6px; }
.board-col { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

/* ---------- Board (ported from prototype) ---------- */
.board { position: relative; width: min(94vw, 420px); aspect-ratio: 1/1; border-radius: 16px; padding: 8px; background: linear-gradient(150deg, #3a2414, var(--board-frame)); box-shadow: 0 16px 34px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.05); }
.cells { position: absolute; inset: 8px; display: grid; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(8,1fr); border-radius: 8px; overflow: hidden; }
.cell { position: relative; }
.cell.lt { background: var(--sq-light); }
.cell.dk { background: var(--sq-dark); }
.cell::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -2px 4px rgba(0,0,0,0.12); pointer-events: none; }
.cell.target { cursor: pointer; }
.cell.target::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(75,208,122,0.95), rgba(75,208,122,0.35)); box-shadow: 0 0 10px rgba(75,208,122,0.7); animation: tgpulse 1s ease-in-out infinite; }
.cell.target.cap::after { background: radial-gradient(circle, rgba(255,107,107,0.2), rgba(255,107,107,0.15) 55%, rgba(255,107,107,0) 60%); width: 78%; height: 78%; border: 3px solid rgba(255,107,107,0.9); box-shadow: 0 0 12px rgba(255,107,107,0.65); }
.cell.lastfrom::before { box-shadow: inset 0 0 0 3px rgba(245,166,35,0.4); }
.cell.lastto::before { box-shadow: inset 0 0 0 3px rgba(245,166,35,0.7); }
/* "Show this move" highlight (tap a row in the history). Pure pseudo-element
   styling — the cell's ::before has pointer-events: none, so piece/cell selection
   is never blocked by the highlight overlay. */
.cell.showpath::before { box-shadow: inset 0 0 0 3px rgba(245,166,35,0.55); }
.cell.showfrom::before { box-shadow: inset 0 0 0 3px rgba(245,166,35,0.7); }
.cell.showto::before { box-shadow: inset 0 0 0 4px rgba(245,166,35,0.98); }
@keyframes tgpulse { 0%,100%{opacity:0.75;} 50%{opacity:1;} }

.pieces { position: absolute; inset: 8px; pointer-events: none; }
.piece { position: absolute; width: 12.5%; height: 12.5%; padding: 1.3%; pointer-events: auto; cursor: default; transition: left 0.26s cubic-bezier(0.3,0.7,0.3,1), top 0.26s cubic-bezier(0.3,0.7,0.3,1), transform 0.3s ease, opacity 0.28s ease; z-index: 2; }
.piece .disc { position: relative; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 5px rgba(0,0,0,0.45), inset 0 -3px 6px rgba(0,0,0,0.28), inset 0 3px 4px rgba(255,255,255,0.25); }
.piece.you .disc { background: radial-gradient(circle at 35% 28%, #fdf4e2, #eddcbb 52%, #cbae82 100%); }
.piece.bot .disc { background: radial-gradient(circle at 35% 28%, #d1674a, #a63a24 50%, #6d2214 100%); }
.piece .disc::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.16); }
.piece.king .disc::after { content: "\265B"; font-size: 62%; line-height: 1; color: var(--amber-2); text-shadow: 0 1px 1px rgba(0,0,0,0.35); }
.piece.bot.king .disc::after { color: #ffcf7a; }
.piece.movable { cursor: pointer; }
.piece.movable .disc { box-shadow: 0 3px 5px rgba(0,0,0,0.45), inset 0 -3px 6px rgba(0,0,0,0.28), 0 0 0 2px rgba(245,166,35,0.55); }
.piece.sel .disc { box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 0 0 3px var(--amber-1), 0 0 16px rgba(245,166,35,0.7); }
.piece.sel { z-index: 4; }
.piece.dead { transform: scale(0.15); opacity: 0; z-index: 5; }

.status-bar { text-align: center; font-size: 14.5px; font-weight: 700; min-height: 20px; color: var(--ink-soft); padding: 0 16px; }
.status-bar.your-turn { color: var(--amber-1); }
.status-bar.bot-turn { color: #d1674a; }

/* Turn countdown badge (under the status line). Neutral until the final 10s,
   then amber (warn) → red (danger). Hidden entirely on a bot's turn. */
/* INVARIANT: the turn-timer occupies a FIXED-HEIGHT slot that is ALWAYS in the
   layout flow. Showing/hiding the countdown only toggles `.is-hidden`
   (visibility), never `display`/`hidden`, so the board's vertical position is
   pixel-stable (CLS = 0). The 26px height reserves room for the pill regardless
   of state (empty, "my turn", opponent, or a bot's "düşünüyor…" think time). */
.turn-timer { box-sizing: border-box; height: 26px; margin: 6px auto 0; display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--ink-soft); border: 1px solid rgba(255,255,255,0.12); font-variant-numeric: tabular-nums; }
/* hidden state keeps the reserved slot (visibility, not display) → no reflow. */
.turn-timer.is-hidden { visibility: hidden; }
/* warn/danger only recolor (bg/border-color) + pulse OPACITY — border stays 1px
   and no scale/transform, so the slot size is invariant across states. */
.turn-timer.warn { color: var(--amber-1); background: rgba(245,166,35,0.14); border-color: rgba(245,166,35,0.3); }
.turn-timer.danger { color: #ff6a52; background: rgba(255,90,70,0.16); border-color: rgba(255,90,70,0.36); animation: timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------- Capture-chain animation (hop-by-hop) ---------- */
/* The moving piece scales up + glows while it jumps; each victim flashes red as
   it is taken, then dies — so a multi-jump reads hop by hop, never a teleport. */
.piece .disc { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.piece.hopping { z-index: 6; }
.piece.hopping .disc { transform: scale(1.16); box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 0 3px var(--amber-1), 0 0 22px rgba(245,166,35,0.85); }
.piece.capthit { z-index: 5; }
.piece.capthit .disc { animation: captflash 0.28s ease; box-shadow: 0 0 0 3px rgba(255,107,107,0.95), 0 0 18px rgba(255,107,107,0.85); }
@keyframes captflash { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
.piece.promopulse .disc { animation: promopulse 0.6s ease; }
@keyframes promopulse { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* ---------- Move history panel ---------- */
.moves-panel {
  width: 100%; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--navy-line); border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--navy-2), var(--navy-1));
}
.moves-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: rgba(255,255,255,0.04); color: var(--ink);
  padding: 11px 14px; cursor: pointer; font-family: inherit; text-align: left;
}
.moves-head:active { filter: brightness(1.15); }
.moves-title { font-size: 13.5px; font-weight: 800; letter-spacing: 0.3px; }
.moves-count { font-size: 11px; font-weight: 800; color: var(--ink-dim); background: rgba(255,255,255,0.08); border-radius: 999px; padding: 2px 9px; }
.moves-chev { margin-left: auto; font-size: 12px; color: var(--ink-dim); transition: transform 0.2s ease; }
.moves-panel.collapsed .moves-chev { transform: rotate(-90deg); }
/* INVARIANT: the list is height-CAPPED and scrolls its OWN overflow, so appending
   moves never grows the panel — the page height stays fixed no matter how long the
   game runs (moveLog is also server-capped at 200 entries). */
.moves-list {
  list-style: none; margin: 0; padding: 6px 8px; overflow-y: auto;
  max-height: 168px; display: flex; flex-direction: column; gap: 3px;
  -webkit-overflow-scrolling: touch;
}
.moves-panel.collapsed .moves-list { display: none; }
.move-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.move-row:hover { background: rgba(255,255,255,0.05); }
.move-row:active { background: rgba(245,166,35,0.12); }
.move-row.current { background: rgba(245,166,35,0.16); box-shadow: inset 0 0 0 1px rgba(245,166,35,0.42); }
.mv-n { font-size: 11px; font-weight: 700; color: var(--ink-dim); min-width: 26px; text-align: right; }
.mv-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3); }
.mv-dot.you { background: radial-gradient(circle at 35% 30%, #fbf1dd, #d3b686); }
.mv-dot.bot { background: radial-gradient(circle at 35% 30%, #c8583b, #6d2214); }
.mv-txt { font-weight: 700; letter-spacing: 0.5px; }
.mv-cap { font-size: 11.5px; font-weight: 800; color: var(--bad); }
.mv-crown { font-size: 12px; }
.moves-empty-row { list-style: none; text-align: center; color: var(--ink-dim); font-size: 12.5px; padding: 14px 10px; }

/* Wide screens (>= 1000px so a 250px rail anchored at 50%+240px clears the
   viewport edge): lift the moves panel OUT of flow into a FIXED rail ANCHORED to
   the centered board — its left edge sits just right of the board's right side
   (50% + half-board), NOT pinned to the viewport edge. This keeps the board
   visually centered and the rail hugging it (no huge right-hand gap / "board
   crammed left" feel). INVARIANT: a fixed-position, max-height-bounded panel can
   NEVER grow the page height — it scrolls internally. Below this width we fall
   back to the mobile behavior (collapsible, in-flow under the board). */
@media (min-width: 1000px) {
  .game-screen { max-width: 860px; }
  .moves-panel {
    position: fixed; top: 50%; left: calc(50% + 240px); right: auto;
    transform: translateY(-50%);
    width: 250px; max-height: min(72vh, 460px); z-index: 40;
  }
  .moves-list { max-height: none; flex: 1 1 auto; }
  .moves-panel.collapsed .moves-list { display: flex; }
  .moves-head { cursor: default; }
  .moves-chev { display: none; }
}

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,9,20,0.82); backdrop-filter: blur(5px); z-index: 120; padding: 26px; }
.overlay.show { display: flex; }
.modal { width: 100%; max-width: 340px; border: 1px solid var(--navy-line); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--navy-2), var(--navy-1)); padding: 24px; box-shadow: 0 24px 55px rgba(0,0,0,0.6); animation: pop 0.3s cubic-bezier(0.2,1.3,0.4,1); }
/* Taller modals (the create form with rule options) scroll INSIDE the overlay
   instead of overflowing the viewport on small screens. */
.modal.modal--scroll { max-height: calc(100vh - 52px); max-height: calc(100dvh - 52px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-dim); margin: 0 0 4px; font-weight: 700; }
.modal h2 { font-size: 21px; margin: 0 0 14px; }
.modal p { font-size: 14px; color: var(--ink-dim); line-height: 1.5; }
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 12px 0 6px; }
.field-hint { font-size: 12px; color: var(--ink-dim); margin: 6px 0 0; }
.seg-row { display: flex; gap: 6px; background: rgba(0,0,0,0.28); padding: 5px; border-radius: 12px; }
.seg { flex: 1; border: none; background: transparent; color: var(--ink-dim); font-weight: 700; font-size: 14px; padding: 10px 6px; border-radius: 9px; cursor: pointer; }
.seg.active { background: linear-gradient(160deg, var(--amber-1), var(--amber-2)); color: #3a2508; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }
.modal-actions .btn.full { flex: 1 1 100%; }

.big-result { font-size: 28px; font-weight: 800; text-align: center; margin: 6px 0 8px; }
.big-result.win { color: var(--good); }
.big-result.lose { color: var(--bad); }
.result-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.result-table td { padding: 8px 6px; font-size: 15px; border-top: 1px solid var(--navy-line); }
.result-table td.n { text-align: right; font-weight: 800; }
.result-table tr.total td { color: var(--amber-1); }
.match-format-line { text-align: center; font-size: 13px; color: var(--ink-dim); margin: 0 0 6px; }

/* ---------- Toast + connection banner ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 24px); transform: translate(-50%, 20px); background: rgba(10,16,40,0.95); border: 1px solid var(--navy-line); color: var(--ink); font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 200; transition: opacity 0.25s ease, transform 0.25s ease; box-shadow: 0 10px 26px rgba(0,0,0,0.5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.conn-banner { position: fixed; top: 0; left: 0; right: 0; display: none; align-items: center; justify-content: center; gap: 10px; background: #d64545; color: #fff; font-size: 13px; font-weight: 700; padding: calc(var(--safe-t) + 8px) 12px 8px; z-index: 300; }
.conn-banner.show { display: flex; }
.conn-banner.ok { background: var(--good); color: #06210f; }
.conn-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .piece { transition: none; }
  .piece .disc { transition: none; }
  .piece.hopping .disc, .piece.capthit .disc, .piece.promopulse .disc { animation: none; transform: none; }
  .cell.target::after { animation: none; }
}

/* ===== Google AdSense yerleşimleri — yalnızca boş kenar/üst/alt alanlar; oyun tahtasını asla itmez/örtmez ===== */
.ad-slot { width: 100%; max-width: 460px; margin: 16px auto 0; text-align: center; overflow: hidden; }
.ad-slot--header { min-height: 90px; margin-top: 14px; }
.ad-slot--footer { min-height: 90px; margin-top: 18px; }
.ad-slot .adsbygoogle { display: block; width: 100%; }
.ad-rail { position: fixed; top: 50%; transform: translateY(-50%); width: 160px; height: 600px; max-height: calc(100vh - 40px); z-index: 90; display: none; overflow: hidden; }
.ad-rail--left { left: 12px; }
.ad-rail--right { right: 12px; }
.ad-rail .adsbygoogle { display: block; width: 160px; height: 600px; }
/* Oyun ekranında hamle paneli masaüstünde 50%+490px'e kadar uzanır (min-width:1000px);
   reyonların onu ASLA örtmemesi için eşiği 1340px'e çektik. */
@media (min-width: 1340px) { .ad-rail { display: block; } }