:root {
  --ink: #111b25;
  --muted: #66717d;
  --paper: #f2f1ec;
  --panel: #fbfaf6;
  --line: #d8d8d1;
  --navy: #0d1b2b;
  --navy-2: #16283a;
  --copper: #bd713d;
  --cyan: #138ca0;
  --green: #2e7b5c;
  --danger: #b94242;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow: 0 24px 70px rgba(18, 30, 43, 0.11);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  background:
    linear-gradient(rgba(17, 27, 37, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 27, 37, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(19, 140, 160, 0.28); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.home-shell, .mode-shell, .lobby-shell, .session-shell { min-height: 100vh; padding: 0 clamp(22px, 4vw, 64px) 38px; }
.site-header { align-items: center; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; height: 82px; margin: 0 auto; max-width: 1500px; }
.wordmark { align-items: center; display: flex; font-size: 9px; font-weight: 700; gap: 9px; letter-spacing: 0.17em; line-height: 1.25; }
.wordmark > span:last-child { display: flex; flex-direction: column; }
.wordmark b { color: var(--copper); }
.wordmark-mark { align-items: center; background: var(--navy); border-radius: 50%; color: white; display: flex; font-family: Georgia, serif; font-size: 15px; height: 35px; justify-content: center; letter-spacing: 0; width: 35px; }
.back-button { align-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; display: flex; font-size: 12px; font-weight: 750; gap: 9px; justify-self: start; letter-spacing: 0.04em; padding: 10px 0; text-decoration: none; }
.back-button svg { height: 18px; width: 18px; }
.header-actions { align-items: center; display: flex; gap: 14px; justify-self: end; }
.ninth-label { color: var(--muted); font-size: 10px; font-weight: 760; justify-self: end; letter-spacing: 0.17em; }
.language-switcher { align-items: center; background: #e7e7e1; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; gap: 2px; padding: 3px; }
.language-option { align-items: center; border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 10px; font-weight: 800; gap: 6px; min-height: 30px; padding: 0 10px; text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.language-option:hover { color: var(--ink); }
.language-option.active { background: var(--navy); color: white; }
.nation-flag { border: 1px solid rgba(13, 27, 43, .16); border-radius: 2px; display: inline-block; flex: 0 0 auto; object-fit: cover; }
.language-flag { height: 12px; width: 17px; }
.flag-fallback { background: #d6d9d6; border-radius: 2px; display: inline-block; height: 12px; width: 17px; }
.eyebrow { color: var(--copper); display: block; font-size: 10px; font-weight: 850; letter-spacing: 0.2em; margin-bottom: 20px; }

.home-intro { align-items: end; display: grid; gap: clamp(35px, 8vw, 130px); grid-template-columns: 1.2fr 0.8fr; margin: 0 auto; max-width: 1360px; padding: clamp(54px, 7vw, 98px) 0 48px; }
.home-intro h1, .mode-heading h1, .lobby-entry h1, .final-shell h1, .online-final-shell h1 { font-family: "Arial Narrow", Inter, sans-serif; font-size: clamp(44px, 6.2vw, 94px); letter-spacing: -0.065em; line-height: 0.94; margin: 0; max-width: 900px; }
.intro-copy { border-left: 1px solid var(--line); padding-left: clamp(22px, 3vw, 50px); }
.intro-copy > p { color: #42505c; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; margin: 0 0 28px; max-width: 540px; }
.data-proof { display: flex; flex-wrap: wrap; gap: 22px; }
.data-proof span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.data-proof b { color: var(--ink); font-size: 17px; margin-right: 4px; }
.game-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; max-width: 1360px; }
.game-card { background: var(--navy); border: 0; border-radius: var(--radius-lg); color: white; cursor: pointer; min-height: 520px; overflow: hidden; padding: 28px; position: relative; text-align: left; transition: transform 220ms ease, box-shadow 220ms ease; }
.game-card::after { border: 1px solid rgba(255, 255, 255, 0.11); border-radius: calc(var(--radius-lg) - 5px); content: ""; inset: 6px; pointer-events: none; position: absolute; }
.game-card:hover { box-shadow: 0 26px 60px rgba(13, 27, 43, 0.22); transform: translateY(-6px); }
.game-card.copper { background: #142231; }
.game-card.cyan { background: #0e2931; }
.game-card.green { background: #152b25; }
.card-number { color: rgba(255, 255, 255, 0.58); font-family: Georgia, serif; font-size: 14px; left: 28px; position: absolute; top: 25px; }
.game-card img { height: 285px; left: 50%; object-fit: contain; position: absolute; top: 24px; transform: translateX(-50%); transition: transform 280ms ease; width: 88%; }
.game-card:hover img { transform: translateX(-50%) translateY(-5px) scale(1.025); }
.game-card-copy { bottom: 30px; display: flex; flex-direction: column; left: 28px; position: absolute; right: 50px; z-index: 1; }
.card-kicker { color: rgba(255, 255, 255, 0.48); font-size: 9px; font-weight: 800; letter-spacing: 0.18em; margin-bottom: 10px; }
.game-card-copy strong { font-family: "Arial Narrow", Inter, sans-serif; font-size: clamp(26px, 2.2vw, 38px); letter-spacing: -0.04em; line-height: 1; margin-bottom: 14px; }
/* Açıklamalar bir ya da iki satır olabiliyordu ve kart başlıkları farklı
   yüksekliklerde duruyordu. İki satırlık yer her kartta ayrılır. */
.game-card-copy > span:last-child { color: rgba(255, 255, 255, 0.62); font-size: 13px; line-height: 1.55; min-height: 40px; }
.card-arrow { bottom: 29px; font-size: 24px; position: absolute; right: 25px; }
.home-footer { color: var(--muted); display: flex; font-size: 10px; font-weight: 700; justify-content: space-between; letter-spacing: 0.08em; margin: 24px auto 0; max-width: 1360px; text-transform: uppercase; }

.mode-shell, .session-shell { --accent: var(--copper); }
.mode-shell.cyan, .session-shell.cyan { --accent: var(--cyan); }
.mode-shell.green, .session-shell.green { --accent: var(--green); }
.mode-heading { align-items: center; display: grid; gap: clamp(30px, 6vw, 90px); grid-template-columns: minmax(270px, 0.7fr) 1.3fr; margin: 0 auto; max-width: 1250px; padding: clamp(50px, 7vw, 92px) 0 42px; }
.mode-heading .eyebrow { color: var(--accent); }
.mode-heading h1 { font-size: clamp(48px, 6.5vw, 88px); }
.mode-heading p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 24px 0 0; max-width: 650px; }
.mode-asset-wrap { align-items: center; background: var(--navy); border-radius: 50%; display: flex; height: min(30vw, 350px); justify-content: center; min-height: 260px; min-width: 260px; position: relative; }
.mode-asset-wrap::before, .mode-asset-wrap::after { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 50%; content: ""; inset: -13px; position: absolute; }
.mode-asset-wrap::after { border-color: var(--line); inset: -28px; }
.mode-asset-wrap img { height: 112%; object-fit: contain; width: 112%; z-index: 1; }
.play-mode-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; max-width: 1250px; }
.play-mode-card { align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; display: grid; gap: 18px; grid-template-columns: auto 1fr; min-height: 190px; padding: 24px; position: relative; text-align: left; transition: border-color 180ms ease, transform 180ms ease; }
.play-mode-card:hover { border-color: var(--accent); box-shadow: 0 14px 32px rgba(13, 27, 43, .09); transform: translateY(-3px); }
.play-mode-card:hover .mode-icon { background: var(--accent); }
.play-mode-card:hover .card-arrow { color: var(--accent); transform: translateX(3px); }
.mode-icon { align-items: center; background: var(--navy); border-radius: 50%; color: white; display: flex; height: 48px; justify-content: center; transition: background 180ms ease; width: 48px; }
.mode-icon svg { height: 22px; width: 22px; }
.play-mode-card > span:nth-child(2) { display: flex; flex-direction: column; }
.play-mode-card small { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: 0.15em; margin: 2px 0 10px; text-transform: uppercase; }
.play-mode-card strong { font-size: 20px; letter-spacing: -0.025em; margin-bottom: 10px; }
/* Açıklama bir ya da iki satır olabiliyor ve kartların başlıkları farklı
   yüksekliklerde duruyordu; iki satırlık yer her kartta ayrılır. */
.play-mode-card > span:nth-child(2) > span { color: var(--muted); font-size: 13px; line-height: 1.5; min-height: 39px; }
.play-mode-card .card-arrow { bottom: 18px; color: var(--muted); font-size: 18px; right: 20px; transition: color 180ms ease, transform 180ms ease; }
.mode-footnote { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 22px auto 0; max-width: 1250px; text-align: center; }

.primary-button, .secondary-button { align-items: center; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 800; justify-content: center; letter-spacing: 0.04em; min-height: 48px; padding: 0 24px; transition: transform 150ms ease, background-color 150ms ease; }
.primary-button { background: var(--navy); border: 1px solid var(--navy); color: white; }
.primary-button:not(:disabled):hover, .secondary-button:not(:disabled):hover { transform: translateY(-2px); }
.secondary-button { background: transparent; border: 1px solid #aeb3b2; }
.wide { width: 100%; }

.lobby-shell { background: #eae9e3; }
.lobby-entry { align-items: center; display: grid; gap: clamp(50px, 10vw, 160px); grid-template-columns: 1fr 420px; margin: 0 auto; max-width: 1220px; min-height: calc(100vh - 130px); padding: 55px 0; }
.lobby-entry h1 { font-size: clamp(52px, 6vw, 86px); }
.lobby-entry-copy > p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 580px; }
.lobby-form, .lobby-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 30px; }
.lobby-form label, .career-answer label, .chain-builder label { display: flex; flex-direction: column; gap: 9px; }
.lobby-form label > span, .career-answer label > span, .chain-builder label > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: 0.16em; }
.lobby-form input, .career-answer input, .chain-builder input { background: white; border: 1px solid #c9cbc6; border-radius: var(--radius-sm); color: var(--ink); height: 52px; padding: 0 15px; width: 100%; }
.lobby-form .primary-button, .lobby-form .secondary-button { margin-top: 14px; }
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.or-divider { align-items: center; color: var(--muted); display: grid; font-size: 9px; font-weight: 800; gap: 12px; grid-template-columns: 1fr auto 1fr; margin: 24px 0; }
.or-divider span { background: var(--line); height: 1px; }
.form-error, .answer-message, .chain-message { background: #fff1ed; border-left: 3px solid var(--danger); border-radius: 6px; color: #823535; font-size: 12px; line-height: 1.45; margin: 14px 0 0; padding: 10px 12px; }
.transport-note { color: var(--muted); font-size: 9px; margin: 18px 0 0; text-align: center; }
.lobby-panel { margin: clamp(50px, 9vh, 100px) auto 0; max-width: 550px; text-align: center; }
.lobby-title { align-items: center; display: flex; font-size: 10px; font-weight: 850; gap: 8px; justify-content: center; letter-spacing: 0.16em; }
.status-dot { background: #3ba573; border-radius: 50%; box-shadow: 0 0 0 4px rgba(59, 165, 115, 0.12); height: 7px; width: 7px; }
.room-help { color: var(--muted); font-size: 13px; margin: 18px 0 12px; }
.room-code { align-items: center; background: #eeede7; border: 1px dashed #aeb1ab; border-radius: var(--radius-md); cursor: pointer; display: flex; height: 88px; justify-content: center; margin-bottom: 26px; width: 100%; }
.room-code span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 34px; font-weight: 850; letter-spacing: 0.2em; margin-left: 0.2em; }
.room-code svg { height: 18px; margin-left: 16px; width: 18px; }
.player-list { border-top: 1px solid var(--line); margin-bottom: 22px; max-height: 360px; overflow-y: auto; padding-top: 17px; text-align: left; }
.list-heading { color: var(--muted); display: flex; font-size: 9px; font-weight: 850; justify-content: space-between; letter-spacing: 0.14em; margin-bottom: 10px; }
.lobby-player { align-items: center; background: white; border: 1px solid #e1e1dc; border-radius: 11px; display: flex; gap: 10px; min-height: 54px; margin-bottom: 7px; padding: 8px 11px; }
.lobby-player.empty { background: transparent; border-style: dashed; color: #909791; font-size: 12px; justify-content: center; }
.lobby-player strong { font-size: 13px; }
.lobby-player small { color: var(--copper); font-size: 8px; font-weight: 850; letter-spacing: 0.1em; margin-left: auto; }
.you-label { background: var(--navy); border-radius: 4px; color: white; font-size: 8px; font-weight: 800; padding: 4px 6px; }
.mini-avatar { align-items: center; background: #dde4e7; border-radius: 50%; display: flex; font-size: 10px; font-weight: 850; height: 34px; justify-content: center; width: 34px; }
.waiting-strip { align-items: center; background: #ecece7; border-radius: var(--radius-sm); color: var(--muted); display: flex; font-size: 11px; font-weight: 700; gap: 9px; justify-content: center; min-height: 48px; padding: 10px 16px; }
.waiting-strip.compact { min-height: 40px; }
/* V282 online dayanıklılık göstergeleri. */
.online-notice { align-items: center; background: #fff4e2; border: 1px solid #f0d5a8; border-radius: var(--radius-sm); color: #7a5312; display: flex; font-size: 11px; font-weight: 750; gap: 8px; justify-content: center; margin: 0 0 10px; min-height: 36px; padding: 8px 14px; text-align: center; }
.online-advance { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.online-advance .waiting-strip { flex: 1 1 190px; }
/* Oda sahibine "acele etme" diyen satır: tur artık düğmeyle geçiyor. */
.advance-note { color: var(--muted); flex: 1 1 190px; font-size: 10px; font-weight: 700; line-height: 1.35; text-align: right; }
.text-button.leave-room { color: #9a4a35; display: block; margin: 10px auto 0; }
.lobby-player.offline { opacity: 0.55; }
.lobby-player small.offline-label { color: #b4462f; margin-left: 8px; }
/* Oda sahibinin çevrim dışı oyuncuyu çıkarma düğmesi (lobi + maç ekranı). */
/* Çıkarma düğmesi ikincil bir eylemdir: skor tahtasında dolu kırmızı bir
   blok olarak durduğunda gözü puanlardan alıyordu. Artık çerçeveli duruyor
   ve yalnız üzerine gelindiğinde doluyor. */
.kick-player { background: transparent; border: 1px solid #d8bcb4; border-radius: 7px; color: #a4442f; cursor: pointer; font-size: 9px; font-weight: 850; letter-spacing: .06em; margin-left: 8px; min-height: 28px; padding: 0 10px; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.kick-player:hover:not(:disabled) { background: #b4462f; border-color: #b4462f; color: white; }
.kick-player:disabled { cursor: default; opacity: .55; }
/* Bağlantısı kopmuş oyuncu için düğme biraz daha belirgindir. */
.kick-player.offline { border-color: #c58e7f; color: #8c3b28; }
.lobby-player .kick-player { flex: 0 0 auto; }
.online-mini-board > div.offline { opacity: .6; }
.online-mini-board .mini-offline { background: #d5432f; border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.online-mini-board .kick-player { grid-column: 1 / -1; margin: 6px 0 0; width: 100%; }
.report-score small { display: block; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; opacity: 0.75; }
/* V283 zincir: yanlış bağlantıda arama alanı kapanır ve kesilen puan
   oyuncuya tek tek gösterilir. */
.chain-reject { align-items: center; background: #fdecea; border: 1px solid #e9b4ad; border-left: 4px solid var(--danger); border-radius: var(--radius-sm); display: flex; gap: 14px; margin-bottom: 12px; padding: 14px 16px; }
.chain-reject .reject-mark { align-items: center; background: var(--danger); border-radius: 50%; color: white; display: flex; flex: 0 0 auto; font-size: 15px; font-weight: 850; height: 30px; justify-content: center; width: 30px; }
.chain-reject .reject-copy { flex: 1 1 auto; }
.chain-reject .reject-copy strong { color: var(--danger); display: block; font-size: 10px; font-weight: 850; letter-spacing: .14em; margin-bottom: 4px; }
.chain-reject .reject-copy p { color: var(--ink); font-size: 13px; line-height: 1.45; margin: 0; }
.chain-reject .reject-penalty { color: var(--danger); flex: 0 0 auto; font-family: ui-monospace, monospace; font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
.chain-score-note { align-items: center; background: #f0efe9; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 12px; padding: 10px 14px; }
.chain-score-note > span { display: flex; flex-direction: column; gap: 2px; }
.chain-score-note small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.chain-score-note strong { font-family: ui-monospace, monospace; font-size: 17px; font-weight: 850; }
.chain-score-note .chain-score-penalty strong { color: var(--danger); }
.chain-score-note .chain-score-left strong { color: var(--green); }
.chain-score-note p { color: var(--muted); flex: 1 1 160px; font-size: 11px; font-weight: 700; margin: 0; text-align: right; }
.chain-success-penalty { color: var(--danger); display: block; font-size: 11px; font-weight: 800; margin-top: 3px; }
@media (max-width: 720px) {
  .chain-score-note { gap: 8px 16px; padding: 9px 11px; }
  .chain-score-note p { flex-basis: 100%; text-align: left; }
  .chain-reject { gap: 10px; padding: 11px 12px; }
  .chain-reject .reject-penalty { font-size: 20px; }
}
.loading-dots, .loading-dots::before, .loading-dots::after { animation: pulse 1.2s infinite ease-in-out; background: var(--muted); border-radius: 50%; height: 4px; width: 4px; }
.loading-dots { animation-delay: -0.2s; position: relative; }
.loading-dots::before, .loading-dots::after { content: ""; position: absolute; top: 0; }
.loading-dots::before { animation-delay: -0.4s; left: -7px; }
.loading-dots::after { left: 7px; }
@keyframes pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

.session-shell { background: #e9e8e2; }
.session-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: 160px minmax(0, 900px); justify-content: center; margin: 0 auto; max-width: 1180px; padding: 38px 0 55px; }
.score-rail { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 22px; }
.rail-round, .rail-score { background: var(--navy); border-radius: var(--radius-md); color: white; padding: 19px; }
.rail-round small, .rail-score small { color: rgba(255, 255, 255, 0.47); display: block; font-size: 8px; font-weight: 850; letter-spacing: 0.17em; margin-bottom: 6px; }
.rail-round strong { font-size: 32px; }
.rail-round i { color: rgba(255, 255, 255, 0.42); font-size: 11px; font-style: normal; margin-left: 4px; }
.rail-score { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.rail-score small { color: var(--muted); }
.rail-score strong { font-size: 22px; }
.rail-score.bot { border-left: 3px solid var(--accent); }
.online-score-rail { min-width: 0; width: 100%; }
.online-mini-board { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.online-mini-board > div { align-items: center; border-bottom: 1px solid var(--line); display: grid; font-size: 10px; gap: 6px; grid-template-columns: 17px 1fr auto; padding: 10px; }
.online-mini-board > div:last-child { border-bottom: 0; }
.online-mini-board > div.me { background: #eef3f1; }
.online-mini-board span { color: var(--muted); }
.online-mini-board strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-mini-board b { font-size: 11px; }
.round-stage { min-width: 0; }
.round-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-height: 620px; overflow: hidden; padding: clamp(24px, 4vw, 48px); position: relative; }
.round-card::before { background: var(--accent); content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; }
.round-kicker { align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font-size: 9px; font-weight: 850; justify-content: space-between; letter-spacing: 0.16em; margin-bottom: 24px; padding-bottom: 11px; }
.round-kicker > span:first-child { align-items: center; color: var(--ink); display: inline-flex; gap: 8px; }
.round-kicker > span:first-child::before { background: var(--accent); border-radius: 2px; content: ""; height: 11px; width: 3px; }
.transfer-file-heading { align-items: center; background: var(--navy); border-left: 4px solid var(--copper); border-radius: 8px; color: white; display: inline-flex; font-size: 12px; font-weight: 850; gap: 13px; letter-spacing: .13em; margin-bottom: 28px; padding: 10px 14px 10px 12px; }
.transfer-file-heading strong { color: #e7a16e; font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: .04em; }
.player-token { align-items: center; background: #d8e1e4; border: 1px solid #bcc7ca; border-radius: 50%; color: var(--navy); display: inline-flex; flex: 0 0 auto; font-family: "Arial Narrow", Inter, sans-serif; font-size: 16px; font-weight: 850; height: 55px; justify-content: center; letter-spacing: -0.03em; position: relative; width: 55px; }
.player-token.small { font-size: 10px; height: 35px; width: 35px; }
.player-token.large { font-size: 25px; height: 86px; width: 86px; }
.player-initials { position: relative; z-index: 0; }
/* V283: kafanın tamamı çemberin içinde kalsın. Çerçeve maskeyi taşır, keskin
   kopya çerçeve içinde küçültülüp aşağı kaydırılır, bulanık kopya da altta
   köşeleri doldurur; böylece fotoğrafın kare kenarı görünmez. */
.player-portrait-frame { background: #d8e1e4; border-radius: 50%; box-shadow: 0 0 0 1px rgba(13, 27, 43, .08); height: 86%; inset: 7%; overflow: hidden; position: absolute; width: 86%; z-index: 1; }
.player-portrait-backdrop { height: 100%; inset: 0; object-fit: cover; opacity: .9; filter: blur(6px) saturate(.85); position: absolute; transform: scale(1.35); width: 100%; }
.player-portrait { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; transform: translateY(5%) scale(.86); width: 100%; }
/* V283: portrenin köşesindeki bayrak artık beyaz yuvarlağın içinde durmuyor.
   Rozet kutusu bayrağın kendi ölçüsüne indirildi ve portre çemberinin 45
   derecelik noktasına ortalandı; geriye yalnızca bayrak kalıyor. */
.token-flag { align-items: center; background: none; border: 0; border-radius: 0; display: flex; font-style: normal; height: 13px; justify-content: center; left: calc(85.355% - 10px); line-height: 1; padding: 0; pointer-events: none; position: absolute; top: calc(85.355% - 6.5px); width: 20px; }
.token-flag { z-index: 3; }
/* Beyaz ağırlıklı bayraklar açık portre üstünde kaybolmasın diye saç teli
   kalınlığında bir çerçeve ve çok hafif bir gölge kalır; yuvarlak değildir. */
.token-flag-image { border: 1px solid rgba(13, 27, 43, .3); border-radius: 2px; box-shadow: 0 1px 2px rgba(13, 27, 43, .28); height: 13px; width: 20px; }
.token-flag .flag-fallback { border-radius: 2px; box-shadow: 0 1px 2px rgba(13, 27, 43, .28); height: 13px; width: 20px; }
.player-token.small .token-flag { height: 11px; left: calc(85.355% - 8.5px); padding: 0; top: calc(85.355% - 5.5px); width: 17px; }
.player-token.small .token-flag-image, .player-token.small .token-flag .flag-fallback { height: 11px; width: 17px; }
.player-token.large .token-flag { height: 16px; left: calc(85.355% - 12px); padding: 0; top: calc(85.355% - 8px); width: 24px; }
.player-token.large .token-flag-image, .player-token.large .token-flag .flag-fallback { height: 16px; width: 24px; }
.player-meta-line { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 5px; line-height: 1.35; }
.player-meta-line i { color: #a0a6a2; font-style: normal; }
.meta-flag { height: 13px; width: 18px; }

.club-identity { align-items: center; display: inline-flex; gap: 9px; min-width: 0; }
.club-name { min-width: 0; }
.club-crest { align-items: center; background: white; border: 1px solid #d4d6d1; border-radius: 8px; display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; padding: 4px; width: 34px; }
.club-crest img { height: 100%; object-fit: contain; width: 100%; }
.club-crest.fallback { color: #6f7878; font-size: 8px; font-weight: 850; letter-spacing: -.02em; }
.club-crest.route { height: 43px; padding: 5px; width: 43px; }
.club-crest.timeline { border-radius: 7px; height: 29px; padding: 3px; width: 29px; }
.club-crest.micro { border-radius: 4px; height: 18px; padding: 2px; width: 18px; }

.transfer-player { align-items: center; display: flex; gap: 18px; margin-bottom: 33px; }
.transfer-player h2 { font-family: "Arial Narrow", Inter, sans-serif; font-size: clamp(34px, 5vw, 57px); letter-spacing: -0.055em; line-height: 0.95; margin: 0 0 8px; }
.transfer-player p { color: var(--muted); font-size: 11px; margin: 0; text-transform: uppercase; }
.club-route { align-items: center; background: #eeede7; border-radius: var(--radius-md); display: grid; gap: 18px; grid-template-columns: 1fr minmax(60px, 0.5fr) 1fr; margin-bottom: 35px; padding: 20px; }
.club-route > div:last-child { text-align: right; }
.club-route small { color: var(--muted); display: block; font-size: 8px; font-weight: 850; letter-spacing: 0.12em; margin-bottom: 7px; }
.club-route .club-identity { max-width: 100%; }
.club-route .club-name { font-size: clamp(16px, 2vw, 22px); font-weight: 800; line-height: 1.1; }
.club-route > div:last-child .club-identity { flex-direction: row-reverse; }
.route-line { background: #b8bdb8; height: 1px; position: relative; }
.route-line::after { border-right: 1px solid #8a928c; border-top: 1px solid #8a928c; content: ""; height: 7px; position: absolute; right: 0; top: -3px; transform: rotate(45deg); width: 7px; }
.route-line i { background: var(--accent); border-radius: 50%; height: 7px; left: 50%; position: absolute; top: -3px; width: 7px; }
.fee-control { margin: 0 auto; max-width: 690px; text-align: center; }
.fee-label { color: var(--muted); display: block; font-size: 9px; font-weight: 850; letter-spacing: 0.17em; }
.fee-control output { display: block; font-family: "Arial Narrow", Inter, sans-serif; font-size: clamp(54px, 9vw, 86px); font-weight: 800; letter-spacing: -0.07em; line-height: 1; margin: 12px 0 26px; }
.fee-control input[type="range"] { accent-color: var(--accent); cursor: ew-resize; width: 100%; }
.range-labels { color: var(--muted); display: flex; font-size: 8px; justify-content: space-between; margin: 8px 0 25px; }
.transfer-result { align-items: center; display: grid; gap: 35px; grid-template-columns: 180px 1fr; }
.result-score { align-items: center; background: var(--navy); border-radius: var(--radius-md); color: white; display: flex; flex-direction: column; min-height: 180px; justify-content: center; text-align: center; }
.result-score small { color: rgba(255,255,255,.5); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.result-score strong { font-size: 42px; margin: 8px 0; }
.result-score span { color: rgba(255,255,255,.68); font-size: 10px; }
.fee-bars { display: flex; flex-direction: column; gap: 17px; }
.fee-bars > div { display: grid; gap: 7px; grid-template-columns: 1fr auto; position: relative; }
.fee-bars span { color: var(--muted); font-size: 9px; font-weight: 700; }
.fee-bars b { font-size: 12px; }
.fee-bars i { background: var(--accent); border-radius: 3px; grid-column: 1 / -1; height: 10px; max-width: 100%; min-width: 8px; }
.fee-bars .actual i { background: var(--navy); }
.fee-bars .bot i { background: #8c9698; }

.career-round { padding-bottom: 38px; }
.career-direction { align-items: center; color: var(--muted); display: grid; font-size: 8px; font-weight: 850; grid-template-columns: 1fr auto 1fr; letter-spacing: .12em; margin: -9px 0 10px; text-transform: uppercase; }
.career-direction strong { color: var(--green); font-size: 9px; letter-spacing: .08em; text-align: center; }
.career-direction > span:last-child { text-align: right; }
/* Çizelge kaydırılmaz: bütün duraklar aynı anda görünür. Sütun sayısı durak
   sayısına göre app.js'te seçilir, ölçüler burada ona göre daralır. */
.career-timeline { display: grid; gap: 10px; margin-bottom: 18px; }
.career-timeline[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.career-timeline[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Duraklar arasında sürekli bir ray. Numara rozetleri rayın üstünde
   durur; çizelge "kutu listesi" değil gerçek bir zaman çizgisi okunur. */
.career-column { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.career-column::before { background: linear-gradient(180deg, transparent 0, #d3d7cd 14px, #d3d7cd calc(100% - 14px), transparent 100%); bottom: 0; content: ""; left: 24px; position: absolute; top: 0; width: 2px; z-index: 0; }
.career-timeline[data-density="tight"] .career-column::before { left: 20px; }
.career-timeline[data-density="dense"] .career-column::before { left: 17px; }
.career-column-head { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 850; letter-spacing: .1em; padding-left: 2px; }
.career-column-jump { align-self: flex-end; color: var(--green); font-size: 9px; font-weight: 850; letter-spacing: .06em; margin-top: -1px; text-transform: uppercase; }
.career-stop { align-items: center; background: #f2f1ec; border: 1px solid #dedfd9; border-radius: 10px; display: grid; gap: 11px; grid-template-columns: 32px 18px minmax(0, 1fr) auto; min-height: 49px; padding: 6px 12px 6px 8px; position: relative; transition: border-color 160ms ease, background 160ms ease; z-index: 1; }
/* Son durak "şu anki kulüp"tür: rengi ve yıl etiketi öne çıkar. */
.career-column:last-child .career-stop:last-child { background: #eef2ee; border-color: color-mix(in srgb, var(--accent) 46%, #dedfd9); box-shadow: inset 3px 0 0 var(--accent); }
.career-column:last-child .career-stop:last-child .timeline-index { background: var(--accent); }
.career-column:last-child .career-stop:last-child .timeline-period { border-color: color-mix(in srgb, var(--accent) 38%, #d7d9d4); color: var(--ink); }
.timeline-index { align-items: center; background: var(--navy); border-radius: 7px; box-shadow: 0 0 0 3px #f8f8f4; color: white; display: flex; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 850; height: 30px; justify-content: center; position: relative; z-index: 1; }
.timeline-arrow { color: var(--green); font-size: 14px; font-weight: 900; text-align: center; }
.career-stop .club-identity { display: flex; min-width: 0; }
/* Kulüp adı kesilmez; sığmazsa ikinci satıra sarar. */
.career-stop .club-name { font-size: 13px; font-weight: 800; hyphens: auto; line-height: 1.15; overflow-wrap: anywhere; }
.timeline-period { background: white; border: 1px solid #d7d9d4; border-radius: 7px; color: #3f4d58; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; padding: 7px 9px; white-space: nowrap; }

/* İki sütunda kartlar daralır, üç sütunda daha da daralır: yazı küçülür ama
   okunur kalır, yıl bloğu adın altına iner ki ikisi de tam görünsün. */
.career-timeline[data-density="tight"] .career-stop { gap: 8px; grid-template-columns: 27px 14px minmax(0, 1fr) auto; min-height: 44px; padding: 5px 9px 5px 6px; }
.career-timeline[data-density="tight"] .timeline-index { font-size: 8px; height: 26px; }
.career-timeline[data-density="tight"] .timeline-arrow { font-size: 12px; }
.career-timeline[data-density="tight"] .club-crest.timeline { height: 25px; width: 25px; }
.career-timeline[data-density="tight"] .club-name { font-size: 12px; }
.career-timeline[data-density="tight"] .timeline-period { font-size: 9px; padding: 5px 7px; }

.career-timeline[data-density="dense"] .career-stop { gap: 6px; grid-template-columns: 24px 12px minmax(0, 1fr); min-height: 40px; padding: 5px 8px 5px 5px; row-gap: 1px; }
.career-timeline[data-density="dense"] .timeline-index { font-size: 8px; height: 24px; }
.career-timeline[data-density="dense"] .timeline-arrow { font-size: 11px; }
.career-timeline[data-density="dense"] .club-crest.timeline { height: 22px; width: 22px; }
.career-timeline[data-density="dense"] .club-name { font-size: 11px; line-height: 1.1; }
.career-timeline[data-density="dense"] .timeline-period { background: transparent; border: 0; font-size: 9px; grid-column: 3; justify-self: start; padding: 0; }
.career-answer, .chain-builder { background: #edede7; border-radius: var(--radius-md); padding: 20px; position: relative; }
.answer-row { display: grid; gap: 9px; grid-template-columns: 1fr auto; }
.answer-row .secondary-button { background: white; min-height: 52px; }
.career-actions, .chain-actions { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-top: 12px; }
.career-actions span { color: var(--muted); font-size: 9px; font-weight: 750; }
/* İpucu ve "son oyuncuyu sil" gibi ikincil eylemler artık çerçeveli birer
   künye: düz yeşil yazı, tıklanabilir olduğunu yeterince belli etmiyordu. */
.career-actions button, .text-button { background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--green); cursor: pointer; font-size: 10px; font-weight: 800; padding: 8px 12px; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.career-actions button, .chain-actions .text-button { border-color: #d5dcd6; }
.career-actions button:hover:not(:disabled), .text-button:hover:not(:disabled) { background: #eaefe9; border-color: #a9bcab; }
/* Kullanılmış ipucu geri plana çekilir; çerçevesi de kaybolur. */
.career-actions button:disabled, .text-button:disabled { border-color: transparent; color: var(--muted); cursor: default; }
.career-actions { flex-wrap: wrap; }
.career-actions .career-skip { border: 1px solid #abb1ad; color: var(--ink); min-height: 36px; padding: 0 14px; }
.career-actions .career-skip:hover:not(:disabled) { background: #ecebe5; border-color: #8f9691; }
.hint-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hint-list > span { align-items: center; background: white; border: 1px solid var(--line); border-radius: 6px; display: inline-flex; font-size: 10px; gap: 5px; padding: 7px 9px; }
.hint-flag { height: 13px; width: 18px; }
.career-reveal { align-items: center; background: #e9f1ec; border: 1px solid #bdd4c7; border-radius: var(--radius-md); display: grid; gap: 18px; grid-template-columns: auto 1fr auto; padding: 21px; }
.career-reveal.wrong { background: #f5eae7; border-color: #dfc5bd; }
.career-reveal.skipped { background: #f0eee7; border-color: #d6d1c2; }
.career-reveal.skipped > strong { color: #766e60; }
.career-reveal small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.career-reveal h3 { font-family: "Arial Narrow", Inter, sans-serif; font-size: 36px; letter-spacing: -.045em; margin: 5px 0; }
.career-reveal p { color: var(--muted); font-size: 10px; margin: 0; text-transform: uppercase; }
.career-reveal > strong { color: var(--green); font-size: 30px; }

/* --- Zincir rotası ------------------------------------------------------
   Bütün ölçüler tek bir değişkenden türer: künye yüksekliği ve jeton
   yüksekliği. Bağlayıcı çizgi de aynı değişkenlerle ortalandığı için
   düğümlerin boyu değişse (başlangıç/hedef büyük, ara halkalar küçük)
   bile hiza bozulmaz. */
/* Rota kendi paneline alındı: zincir, kartın ortasında serbest duran
   ikonlar değil, okunacak tek bir şerit gibi görünüyor. */
.chain-route { --chain-token: 55px; --chain-badge: 22px; background: linear-gradient(180deg, #f8f8f4 0%, #f1f3ee 100%); border: 1px solid #e4e7df; border-radius: 14px; margin: 22px auto 20px; max-width: 100%; padding: 0 clamp(12px, 2vw, 22px); }
.chain-route-head { align-items: center; border-bottom: 1px solid #e2e5dc; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 0; padding: 12px 0 10px; }
.chain-route-label { font-size: 8px; font-weight: 850; letter-spacing: .17em; }
.chain-route-progress { color: var(--ink); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.chain-route-progress b { color: var(--cyan); font-size: 13px; margin-right: 2px; }
.chain-route-flow { font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.chain-route-flow i { color: var(--cyan); font-style: normal; }
.chain-path { align-items: flex-start; display: flex; justify-content: center; margin: 24px auto 22px; width: 100%; }
/* Düğümler kendi genişliğinde durur, ARADAKİ BAĞLAYICI esner. Böylece
   iki oyuncu varken de dört ara oyuncu varken de rota dengeli görünür;
   eskiden boşluğu düğüm kutusu yutuyor ve zincir sola yaslanıyordu. */
.chain-node-wrap { align-items: flex-start; display: flex; flex: 1 1 auto; max-width: 240px; }
.chain-node-wrap:first-child { flex: 0 0 auto; }
.chain-node { align-items: center; display: flex; flex: 0 0 auto; flex-direction: column; min-width: 85px; text-align: center; }
.chain-node-badge { align-items: center; background: #eceee9; border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 7px; font-weight: 850; height: 16px; justify-content: center; letter-spacing: .12em; margin-bottom: 6px; padding: 0 8px; white-space: nowrap; }
.chain-node.start .chain-node-badge { background: var(--navy); color: white; }
.chain-node.target .chain-node-badge { background: #dff0f2; color: #1d5d67; }
.chain-node.open .chain-node-badge { background: transparent; border: 1px dashed var(--cyan); color: #1d5d67; }
.chain-node-token { align-items: center; display: flex; height: var(--chain-token); justify-content: center; }
.chain-node strong { font-size: 10px; line-height: 1.25; margin-top: 10px; max-width: 96px; overflow-wrap: anywhere; }
.chain-node.link strong { color: #3d4a46; }
.chain-current-club { align-items: center; color: var(--muted); display: flex; font-size: 7px; gap: 4px; justify-content: center; letter-spacing: 0; margin-top: 6px; max-width: 115px; }
.chain-current-club > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-node.target .player-token { background: transparent; border-style: dashed; }
.chain-node.target:not(.open) .player-token { background: #d8e1e4; border-style: solid; }
/* Bağlayıcı: jeton satırının ortasına hizalanır ve ucunda ok vardır. */
.chain-link { align-items: center; display: flex; flex: 1 1 auto; height: var(--chain-token); margin-top: var(--chain-badge); min-width: 34px; }
.chain-link i { border-top: 2px dashed #afb6b4; display: block; flex: 1; position: relative; }
.chain-link i::after { border-bottom: 4px solid transparent; border-left: 6px solid #afb6b4; border-top: 4px solid transparent; content: ""; position: absolute; right: -1px; top: -5px; }
.chain-link.valid i { border-color: var(--cyan); border-style: solid; }
.chain-link.valid i::after { border-left-color: var(--cyan); }
.chain-builder { margin: 0 auto; max-width: 690px; position: relative; }
/* Öneri listesinin çıpası: yazı alanı. Tepesi elle ölçülmüş bir sayı
   değil, kutunun ALT KENARIDIR — üstte uyarı belirse de kaymaz. */
.chain-search { position: relative; }
.suggestions { background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 15px 40px rgba(13,27,43,.13); left: 0; max-height: 330px; overflow-x: hidden; overflow-y: auto; position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; }
.suggestions button { align-items: center; background: white; border: 0; border-bottom: 1px solid #e6e6e0; column-gap: 16px; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 9px 12px; text-align: left; width: 100%; }
.suggestions button:hover { background: #f1f3f2; }
.suggestions button:last-child { border-bottom: 0; }
.suggestions button > span:nth-child(2) { display: flex; flex-direction: column; }
.suggestions strong { font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.suggestions small { color: var(--muted); font-size: 8px; margin-top: 3px; }
.suggestions small .player-meta-line { flex-wrap: nowrap; max-width: 100%; overflow: hidden; white-space: nowrap; }
.career-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); left: auto; margin-top: 12px; max-height: 348px; position: static; right: auto; top: auto; width: 100%; }
.career-suggestions button { min-width: 0; }
.career-suggestions button:nth-child(odd) { border-right: 1px solid #e6e6e0; }
/* Öneri kabı artık boşken de DOM'da durur (yazarken yalnız içi tazelenir,
   cevap kutusuna dokunulmaz). Boş kap görünmemeli: `hidden` özniteliği
   sınıf kurallarını yenmelidir. */
.suggestions[hidden], .career-suggestions[hidden] { display: none !important; }
/* Cevap alanının hemen altındaki geri sayım — son 20 saniyede belirir. */
/* Kutu her zaman yerindedir; yalnız GÖRÜNÜRLÜĞÜ açılır. Eskiden
   `display:none` ile ortadan kalkıyordu ve son yirmi saniyede belirdiği
   anda altındaki her şey aşağı kayıyordu — oyuncu bunu "ekran itiyor"
   diye görüyordu. */
.answer-clock { background: #eef3f7; border: 1px solid #cfdce6; border-radius: 8px; color: #33566e; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 850; letter-spacing: .04em; margin: 10px auto 0; max-width: 650px; min-height: 35px; padding: 8px 12px; text-align: center; visibility: hidden; }
.answer-clock.is-visible { visibility: visible; }
.answer-clock[hidden] { display: none !important; }
.answer-clock.urgent { background: #fdecec; border-color: #f0b5b5; color: #a3272f; }
.answer-message[hidden] { display: none !important; }
.chain-message { border-left-color: var(--cyan); color: #325c63; }
.chain-hint { background: #e8f1f2; border: 1px solid #bdd6da; border-radius: 7px; color: #285a62; font-size: 10px; line-height: 1.45; margin: 10px 0 0; padding: 9px 11px; }
.chain-actions { justify-content: flex-end; }
.chain-actions .text-button:first-child { margin-right: auto; }
.chain-actions .chain-skip { min-height: 38px; padding: 0 15px; }
.chain-success { align-items: center; background: #e6f0ee; border: 1px solid #b5d1ca; border-radius: var(--radius-md); display: grid; gap: 14px; grid-template-columns: auto 1fr auto; margin: 0 auto; max-width: 650px; padding: 18px; }
.success-check { align-items: center; background: var(--green); border-radius: 50%; color: white; display: flex; height: 43px; justify-content: center; width: 43px; }
.success-check svg { height: 21px; width: 21px; }
.chain-success small { color: var(--muted); display: block; font-size: 8px; font-weight: 850; letter-spacing: .13em; margin-bottom: 5px; }
.chain-success strong { font-size: 14px; }
.chain-success > b { color: var(--green); font-size: 27px; }
.chain-success.skipped { background: #f0eee7; border-color: #d6d1c2; }
.chain-success.skipped .success-check { background: #8a8170; }
.chain-success.skipped > b { color: #766e60; }

.round-footer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 9px; margin-top: 12px; padding: 11px 14px 11px 22px; }
.round-footer-head { align-items: center; display: flex; gap: 20px; justify-content: space-between; min-height: 50px; }
.round-total small { color: var(--muted); display: block; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.round-total strong { color: var(--accent); font-size: 22px; }

/* --- PUAN KIRILIMI ------------------------------------------------------
   Turun puanı kalem kalem: taban, kesintiler, sıralama ve primler. Aynı
   şerit hem oyuncunun kendi turunda hem de tur sonu raporunda herkesin
   satırında kullanılır, böylece iki yerde farklı sayı görünmez. */
.score-breakdown { align-items: center; background: #f2f4ef; border: 1px solid #e2e5dd; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 7px 11px; }
.score-breakdown.own { background: #eef2ee; }
.score-chip { align-items: baseline; display: inline-flex; gap: 6px; white-space: nowrap; }
.score-chip small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.score-chip b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.score-chip.base b { color: var(--ink); }
.score-chip.minus b { color: #b4462f; }
.score-chip.plus b { color: #17545e; }
.score-chip.zero b, .score-chip.flat b { color: var(--muted); }
.score-chip.total { border-left: 1px solid #d7dcd2; margin-left: auto; padding-left: 11px; }
.score-chip.total b { color: var(--green); font-size: 14px; }
.score-chip-join { background: #cdd3c8; border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 3px; width: 3px; }
.round-speed-line { color: var(--green); display: block; font-size: 9px; font-weight: 800; margin-top: 2px; }
.round-comparison { align-items: center; display: flex; font-size: 10px; gap: 10px; margin-left: auto; }
.round-comparison span { color: var(--muted); }
.round-comparison b { border-radius: 5px; font-size: 9px; padding: 5px 7px; }
.round-comparison .win { background: #e3eee7; color: #2e7555; }
.round-comparison .loss { background: #f4e5e1; color: #9a4b3b; }

.online-round-report { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 12px; overflow: hidden; }
.online-report-heading { align-items: center; background: var(--navy); color: white; display: flex; justify-content: space-between; padding: 12px 16px; }
.online-report-heading span { color: rgba(255,255,255,.62); font-size: 8px; font-weight: 850; letter-spacing: .16em; }
.online-report-heading strong { font-family: ui-monospace, monospace; font-size: 11px; }
.online-answer-reveal, .online-player-reveal { align-items: center; background: #e8eee9; border-bottom: 1px solid #cfdbd2; display: flex; gap: 11px; justify-content: space-between; padding: 13px 16px; }
.online-answer-reveal small, .online-player-reveal small { color: var(--muted); display: block; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.online-answer-reveal strong { font-size: 22px; }
.online-player-reveal { justify-content: flex-start; }
.online-player-reveal > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.online-player-reveal strong { font-size: 15px; }
.online-report-list { display: flex; flex-direction: column; }
.online-report-row { border-bottom: 1px solid var(--line); padding: 9px 14px; }
.online-report-line { align-items: center; display: grid; gap: 10px; grid-template-columns: 20px 34px minmax(0,1fr) minmax(88px,auto) 54px; min-height: 48px; }
.online-report-row .score-breakdown, .online-chain-result .score-breakdown { margin-top: 7px; }
.online-report-row:last-child, .online-chain-result:last-child { border-bottom: 0; }
.online-report-row.me, .online-chain-result.me { background: #eef3f1; }
.report-rank { color: var(--muted); font-family: Georgia, serif; font-size: 13px; text-align: center; }
.online-report-line > strong { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-detail { display: flex; flex-direction: column; text-align: right; }
.report-detail b { font-size: 12px; }
.report-detail small { color: var(--muted); font-size: 8px; }
.report-score { color: var(--green); display: inline-flex; flex-direction: column; font-size: 15px; line-height: 1.05; text-align: right; }
.report-score small { color: var(--muted); font-size: 7px; font-weight: 800; margin-top: 3px; white-space: nowrap; }
.report-status { border-radius: 6px; display: flex; flex-direction: column; font-size: 9px; font-weight: 850; justify-self: end; min-width: 72px; padding: 6px 8px; text-align: center; }
.report-status small { font-size: 7px; margin-top: 2px; }
.report-status.correct { background: #dfeee7; color: #236c4f; }
.report-status.wrong { background: #f2e3df; color: #914538; }
.report-status.skipped { background: #ebe8df; color: #746c5f; }
.online-chain-result { border-bottom: 1px solid var(--line); padding: 11px 14px; }
.chain-result-owner { align-items: center; display: grid; gap: 10px; grid-template-columns: 20px 34px minmax(0,1fr) auto 54px; }
.chain-result-tags { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.chain-link-count { background: #eceee9; border-radius: 999px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .06em; padding: 3px 7px; white-space: nowrap; }
.route-unique-tag { background: #dff0f2; border: 1px solid #a9d2d8; border-radius: 999px; color: #17545e; font-size: 8px; font-weight: 850; letter-spacing: .08em; padding: 3px 7px; white-space: nowrap; }
.report-route-bonus { color: #17545e !important; }
/* Örnek çözüm: oyuncular kendi rotalarını doğrulanmış rotayla yan yana okur. */
.online-answer-reveal.chain-sample { align-items: flex-start; flex-direction: column; gap: 8px; }
.chain-sample-head { align-items: baseline; display: flex; gap: 9px; }
.chain-sample-head strong { font-size: 12px; }
.chain-report-path.sample { margin: 0; }
.chain-result-owner > strong { font-size: 11px; }
.chain-report-path { align-items: center; display: flex; gap: 7px; margin: 9px 0 0 64px; overflow-x: auto; padding-bottom: 3px; }
.chain-report-path > i { color: #8a9490; flex: 0 0 auto; font-style: normal; }
.chain-report-player { align-items: center; background: white; border: 1px solid #dcded9; border-radius: 999px; display: inline-flex; flex: 0 0 auto; gap: 7px; padding: 4px 10px 4px 4px; }
.chain-report-player b { font-size: 9px; white-space: nowrap; }
.chain-report-skipped { color: #766e60; font-size: 10px; font-weight: 800; }

.final-shell, .online-final-shell { align-items: center; background: var(--paper); display: flex; flex-direction: column; justify-content: center; min-height: 100vh; overflow: hidden; padding: 40px 22px; text-align: center; }
.final-orbit { align-items: center; background: var(--navy); border-radius: 50%; display: flex; height: 180px; justify-content: center; margin-bottom: 35px; width: 180px; }
.final-orbit img { height: 220px; object-fit: contain; width: 220px; }
.final-shell h1, .online-final-shell h1 { font-size: clamp(44px, 7vw, 84px); max-width: 880px; }
.final-score { display: flex; gap: 10px; margin: 30px 0 18px; }
.final-score > span { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 170px; padding: 18px 25px; }
.final-score small { color: var(--muted); display: block; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.final-score strong { display: block; font-size: 35px; margin-top: 5px; }
.final-shell > p { color: var(--muted); font-size: 13px; max-width: 520px; }
.final-actions { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.online-final-shell { align-items: stretch; justify-content: flex-start; overflow: auto; text-align: left; }
.online-final-head, .final-podium, .final-ranking, .online-final-shell > .final-actions { margin-left: auto; margin-right: auto; max-width: 860px; width: 100%; }
.online-final-head { align-items: center; display: grid; gap: 24px; grid-template-columns: auto 1fr; }
.online-final-head h1 { font-size: clamp(42px, 6vw, 72px); }
.online-final-head p { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.champion-seal { align-items: center; background: var(--navy); border: 6px solid #d7a65c; border-radius: 50%; color: white; display: flex; font-family: Georgia, serif; font-size: 34px; height: 94px; justify-content: center; width: 94px; }
.final-podium { align-items: end; display: grid; gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 28px; }
.podium-card { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; min-height: 150px; padding: 17px; position: relative; text-align: center; }
.podium-card.place-1 { border-top: 4px solid #d7a65c; min-height: 172px; }
.podium-card.me { background: #eef3f1; }
.podium-place { color: var(--muted); font-family: Georgia, serif; left: 13px; position: absolute; top: 11px; }
.podium-avatar { align-items: center; background: #dce4e5; border-radius: 50%; display: flex; font-size: 14px; font-weight: 850; height: 46px; justify-content: center; margin-bottom: 8px; width: 46px; }
.podium-card strong { font-size: 12px; }
.podium-card small { color: var(--muted); font-size: 7px; letter-spacing: .12em; margin-top: auto; }
.podium-card b { font-size: 22px; margin-top: 3px; }
.final-ranking { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 12px; overflow: hidden; }
.final-ranking-head { align-items: center; background: var(--navy); color: white; display: flex; justify-content: space-between; padding: 12px 16px; }
.final-ranking-head span { color: rgba(255,255,255,.62); font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.final-ranking-head strong { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; }
.final-ranking-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 24px 34px minmax(0,1fr) 86px 86px; min-height: 60px; padding: 9px 15px; }
.final-ranking-row:last-child { border-bottom: 0; }
.final-ranking-row.me { background: #eef3f1; }
.final-rank { color: var(--muted); font-family: Georgia, serif; text-align: center; }
.final-ranking-row > strong { align-items: center; display: flex; font-size: 12px; gap: 7px; min-width: 0; }
.final-ranking-row > strong small { background: var(--navy); border-radius: 4px; color: white; font-size: 7px; padding: 3px 5px; }
.final-ranking-row > span:not(.final-rank):not(.mini-avatar) { display: flex; flex-direction: column; text-align: right; }
.final-ranking-row span small { color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.final-ranking-row span b { font-size: 13px; }

.loading-screen { align-items: center; background: var(--navy); color: white; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; text-align: center; }
.loading-screen p { font-size: 16px; font-weight: 750; margin: 22px 0 6px; }
.loading-screen span { color: rgba(255,255,255,.45); font-size: 10px; }
.loading-ball { animation: loading-rotate 1.4s linear infinite; border: 2px solid rgba(255,255,255,.18); border-right-color: var(--copper); border-radius: 50%; height: 42px; width: 42px; }
@keyframes loading-rotate { to { transform: rotate(360deg); } }
.error-screen strong { font-size: 28px; }
.error-screen .primary-button { margin-top: 16px; }

/* Desktop density matches the former 75% browser-zoom composition while the
   browser remains at 100%. This keeps the full primary surface in one viewport
   on common 1080p Windows displays, including 125% OS scaling. */
@media (min-width: 981px) {
  .home-shell, .mode-shell, .lobby-shell, .session-shell { padding: 0 clamp(17px, 3vw, 48px) 28px; }
  .site-header { height: 62px; max-width: 1125px; }
  .wordmark { font-size: 7px; gap: 7px; }
  .wordmark-mark { font-size: 12px; height: 27px; width: 27px; }
  .back-button { font-size: 10px; gap: 7px; padding: 7px 0; }
  .back-button svg { height: 14px; width: 14px; }
  .header-actions { gap: 10px; }
  .ninth-label { font-size: 8px; }
  .language-switcher { padding: 2px; }
  .language-option { font-size: 8px; gap: 5px; min-height: 24px; padding: 0 8px; }
  .language-flag { height: 10px; width: 14px; }

  .home-intro { gap: clamp(28px, 6vw, 98px); max-width: 1020px; padding: clamp(30px, 4.1vw, 52px) 0 28px; }
  .home-intro h1, .mode-heading h1, .lobby-entry h1, .final-shell h1, .online-final-shell h1 { font-size: clamp(34px, 4.65vw, 70px); max-width: 675px; }
  .intro-copy { padding-left: clamp(17px, 2.25vw, 38px); }
  .intro-copy > p { font-size: clamp(12px, 1.05vw, 15px); line-height: 1.5; max-width: 405px; }
  .game-grid { gap: 11px; max-width: 1020px; }
  .game-card { border-radius: 21px; min-height: 390px; padding: 21px; }
  .game-card::after { border-radius: 17px; inset: 5px; }
  .card-number { font-size: 11px; left: 21px; top: 19px; }
  .game-card img { height: 214px; top: 18px; width: 88%; }
  .game-card-copy { bottom: 22px; left: 21px; right: 38px; }
  .card-kicker { font-size: 7px; margin-bottom: 8px; }
  .game-card-copy strong { font-size: clamp(21px, 1.65vw, 29px); margin-bottom: 10px; }
  .game-card-copy > span:last-child { font-size: 10px; line-height: 1.45; }
  .card-arrow { bottom: 22px; font-size: 18px; right: 19px; }

  .mode-heading { gap: clamp(23px, 4.5vw, 68px); grid-template-columns: minmax(203px, .7fr) 1.3fr; max-width: 938px; padding: clamp(34px, 4.2vw, 58px) 0 30px; }
  .mode-heading h1 { font-size: clamp(36px, 4.9vw, 66px); }
  .mode-heading p { font-size: 13px; line-height: 1.5; margin-top: 18px; max-width: 488px; }
  .mode-asset-wrap { height: min(22.5vw, 263px); min-height: 195px; min-width: 195px; }
  .mode-asset-wrap::before { inset: -10px; }
  .mode-asset-wrap::after { inset: -21px; }
  .play-mode-grid { gap: 9px; max-width: 938px; }
  .play-mode-card { gap: 14px; min-height: 143px; padding: 18px; }
  .mode-icon { height: 36px; width: 36px; }
  .mode-icon svg { height: 17px; width: 17px; }
  .play-mode-card small { font-size: 7px; margin: 2px 0 7px; }
  .play-mode-card strong { font-size: 15px; margin-bottom: 7px; }
  .play-mode-card > span:nth-child(2) > span { font-size: 10px; }
  .play-mode-card .card-arrow { bottom: 14px; font-size: 14px; right: 15px; }

  .primary-button, .secondary-button { font-size: 10px; min-height: 38px; padding: 0 18px; }
  .lobby-entry { gap: clamp(38px, 7.5vw, 120px); grid-template-columns: 1fr 315px; max-width: 915px; min-height: calc(100vh - 98px); padding: 38px 0; }
  .lobby-entry h1 { font-size: clamp(39px, 4.5vw, 65px); }
  .lobby-entry-copy > p { font-size: 13px; max-width: 435px; }
  .lobby-form, .lobby-panel { border-radius: 21px; padding: 23px; }
  .lobby-form label, .career-answer label, .chain-builder label { gap: 7px; }
  .lobby-form label > span, .career-answer label > span, .chain-builder label > span { font-size: 7px; }
  .lobby-form input, .career-answer input, .chain-builder input { height: 39px; padding: 0 12px; }
  .lobby-form .primary-button, .lobby-form .secondary-button { margin-top: 10px; }
  .or-divider { margin: 18px 0; }
  .lobby-panel { margin-top: clamp(38px, 6.5vh, 70px); max-width: 413px; }
  .room-code { height: 66px; margin-bottom: 19px; }
  .room-code span { font-size: 26px; }
  .player-list { margin-bottom: 16px; max-height: 300px; }
  .lobby-player { min-height: 41px; margin-bottom: 5px; padding: 6px 8px; }
  .mini-avatar { height: 27px; width: 27px; }

  .session-layout { gap: 14px; grid-template-columns: 120px minmax(0, 675px); max-width: 885px; padding: 28px 0 35px; }
  .score-rail { gap: 6px; top: 17px; }
  .rail-round, .rail-score { border-radius: 14px; padding: 14px; }
  .rail-round strong { font-size: 24px; }
  .rail-score strong { font-size: 17px; }
  .online-score-rail { width: 100%; }
  .online-mini-board > div { font-size: 8px; padding: 7px; }
  .round-card { border-radius: 21px; min-height: 465px; padding: clamp(18px, 3vw, 36px); }
  .round-kicker { font-size: 7px; margin-bottom: 22px; }
  .transfer-file-heading { font-size: 9px; gap: 10px; margin-bottom: 21px; padding: 8px 11px 8px 9px; }
  .transfer-file-heading strong { font-size: 12px; }
  .player-token { font-size: 12px; height: 42px; width: 42px; }
  .player-token.small { font-size: 8px; height: 29px; width: 29px; }
  .player-token.large { font-size: 19px; height: 65px; width: 65px; }
  .transfer-player { margin-bottom: 25px; }
  .transfer-player h2 { font-size: clamp(28px, 4vw, 42px); }
  .club-route { gap: 14px; margin-bottom: 26px; padding: 15px; }
  .club-route .club-name { font-size: clamp(12px, 1.5vw, 17px); }
  .club-crest.route { height: 34px; width: 34px; }
  .fee-control { max-width: 518px; }
  .fee-control output { font-size: clamp(41px, 6.75vw, 65px); margin: 9px 0 19px; }
  .range-labels { margin: 6px 0 19px; }
  .transfer-result { gap: 26px; grid-template-columns: 135px 1fr; }
  .result-score { min-height: 135px; }
  .result-score strong { font-size: 32px; }

  .career-round { padding-bottom: 29px; }
  .career-direction { margin-top: -7px; }
  .career-timeline { gap: 8px; margin-bottom: 14px; }
  .career-column { gap: 5px; }
  .career-stop { gap: 8px; grid-template-columns: 28px 14px minmax(0, 1fr) auto; min-height: 42px; padding: 5px 9px 5px 6px; }
  .timeline-index { height: 27px; }
  .club-crest.timeline { height: 26px; width: 26px; }
  .career-stop .club-name { font-size: 11px; }
  .timeline-period { font-size: 9px; padding: 6px 7px; }
  .career-timeline[data-density="dense"] .career-stop { grid-template-columns: 22px 11px minmax(0, 1fr); min-height: 37px; }
  .career-timeline[data-density="dense"] .club-name { font-size: 10px; }
  .career-answer, .chain-builder { padding: 15px; }
  .career-suggestions { max-height: 220px; }
  .career-suggestions button { padding: 7px 9px; }
  .career-reveal { padding: 16px; }
  .career-reveal h3 { font-size: 27px; }

  /* Jeton bu genişlikte 42 piksel; rota ölçüleri tek değişkenden gelir. */
  .chain-route { --chain-token: 42px; --chain-badge: 20px; margin: 18px auto 16px; }
  .chain-route-head { padding: 10px 0 8px; }
  .chain-path { margin: 18px auto 18px; }
  .chain-node-wrap { max-width: 190px; }
  .chain-node { min-width: 64px; }
  .chain-node strong { font-size: 8px; margin-top: 6px; max-width: 68px; }
  .chain-node-badge { font-size: 6px; height: 14px; padding: 0 6px; }
  .chain-link { min-width: 21px; }
  .chain-builder { max-width: 518px; }
  .suggestions { max-height: 248px; }
  .suggestions button { gap: 8px; padding: 7px 9px; }
  .chain-success { max-width: 488px; padding: 14px; }
  .round-footer { margin-top: 9px; min-height: 54px; padding: 8px 11px 8px 17px; }
  .online-round-report { margin-top: 9px; }
  .online-report-row { padding: 7px 11px; }
  .online-report-line { min-height: 42px; }
  .online-final-head, .final-podium, .final-ranking, .online-final-shell > .final-actions { max-width: 675px; }
  .champion-seal { border-width: 4px; font-size: 26px; height: 72px; width: 72px; }
  .podium-card { min-height: 116px; padding: 13px; }
  .podium-card.place-1 { min-height: 132px; }
  .podium-avatar { height: 35px; width: 35px; }
  .final-ranking-row { min-height: 48px; }
}

@media (min-width: 721px) and (max-width: 1120px) {
  .session-layout { grid-template-columns: 1fr; max-width: 675px; }
  .score-rail { display: grid; grid-template-columns: 120px minmax(0,1fr); position: static; width: 100%; }
  .online-score-rail .rail-round { grid-column: 1; }
  .online-score-rail .online-mini-board { grid-column: 2; }
}

@media (max-width: 980px) {
  .game-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 330px; }
  .game-card img { height: 250px; left: auto; right: 0; transform: none; width: 48%; }
  .game-card:hover img { transform: translateY(-4px) scale(1.02); }
  .game-card-copy { max-width: 52%; }
  .play-mode-grid { grid-template-columns: 1fr; }
  .play-mode-card { min-height: 135px; }
  .lobby-entry { grid-template-columns: 1fr; gap: 45px; }
  .lobby-entry-copy { text-align: center; }
  .lobby-entry-copy > p { margin-left: auto; margin-right: auto; }
  .lobby-form { margin: 0 auto; max-width: 440px; width: 100%; }
  .session-layout { grid-template-columns: 1fr; }
  .score-rail { display: grid; grid-template-columns: repeat(3, 1fr); position: static; }
  .online-score-rail { width: auto; }
  .online-mini-board { grid-column: 2 / -1; grid-row: 1; }
  .rail-round { grid-column: 1; }
}

@media (max-width: 720px) {
  .home-shell, .mode-shell, .lobby-shell, .session-shell { padding-left: 14px; padding-right: 14px; }
  .site-header { grid-template-columns: 1fr auto 1fr; grid-template-rows: 64px 42px; height: 106px; }
  .wordmark { grid-column: 2; }
  .header-actions { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .ninth-label { display: none; }
  .language-option { min-height: 28px; padding: 0 11px; }
  .home-shell .back-button { visibility: hidden; width: 30px; }
  .back-button span { display: none; }
  .home-intro { align-items: start; gap: 25px; grid-template-columns: 1fr; padding: 45px 4px 32px; }
  .home-intro h1 { font-size: clamp(44px, 13vw, 68px); }
  .intro-copy { border-left: 0; padding-left: 0; }
  .intro-copy > p { font-size: 15px; }
  .game-card { border-radius: 22px; min-height: 420px; padding: 22px; }
  .game-card img { height: 245px; left: 50%; right: auto; top: 14px; transform: translateX(-50%); width: 85%; }
  .game-card:hover img { transform: translateX(-50%) translateY(-3px); }
  .game-card-copy { bottom: 23px; left: 22px; max-width: none; right: 40px; }
  .game-card-copy strong { font-size: 28px; }
  .game-card-copy > span:last-child { font-size: 11px; }
  .home-footer { align-items: center; flex-direction: column; gap: 5px; text-align: center; }
  .mode-heading { gap: 45px; grid-template-columns: 1fr; padding: 55px 12px 35px; text-align: center; }
  .mode-heading h1 { font-size: 51px; }
  .mode-asset-wrap { height: 250px; margin: 0 auto; width: 250px; }
  .mode-heading p { font-size: 14px; }
  .play-mode-card { grid-template-columns: auto 1fr; min-height: 128px; padding: 18px; }
  .lobby-entry { padding: 45px 4px; }
  .lobby-entry h1 { font-size: 52px; }
  .lobby-panel { margin-top: 35px; padding: 22px 16px; }
  .room-code span { font-size: 29px; }
  .session-layout { padding-top: 16px; }
  .score-rail { gap: 6px; grid-template-columns: repeat(3, 1fr); }
  .rail-round, .rail-score { border-radius: 12px; padding: 11px 13px; }
  .rail-round strong { font-size: 23px; }
  .rail-score strong { font-size: 17px; }
  .online-score-rail { display: block; }
  .online-score-rail .rail-round { margin-bottom: 6px; }
  .online-mini-board { display: grid; grid-template-columns: repeat(2, 1fr); }
  .online-mini-board > div { border-bottom: 0; border-right: 1px solid var(--line); }
  .round-card { border-radius: 20px; min-height: 560px; padding: 24px 17px; }
  .transfer-player { align-items: flex-start; }
  .player-token.large { height: 70px; width: 70px; }
  .transfer-player h2 { font-size: 39px; }
  .club-route { gap: 8px; grid-template-columns: 1fr 38px 1fr; padding: 15px 12px; }
  .club-route .club-name { font-size: 13px; }
  .club-crest.route { height: 34px; padding: 4px; width: 34px; }
  .fee-control output { font-size: 64px; }
  .range-labels span:nth-child(2), .range-labels span:nth-child(4) { display: none; }
  .transfer-result { grid-template-columns: 1fr; }
  .result-score { min-height: 110px; }
  .career-direction { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .career-direction > span { display: none; }
  /* Telefonda üç sütun okunmuyor; ikiye iner ve yıl adın altına geçer. */
  .career-timeline { gap: 6px; }
  .career-timeline[data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-stop, .career-timeline[data-density="tight"] .career-stop { grid-template-columns: 26px 13px minmax(0, 1fr); row-gap: 1px; }
  .timeline-period, .career-timeline[data-density="tight"] .timeline-period { grid-column: 3; justify-self: start; margin-top: -3px; }
  .career-timeline[data-density="dense"] .career-stop { grid-template-columns: 22px 11px minmax(0, 1fr); }
  .career-timeline[data-density="dense"] .club-name { font-size: 10px; }
  .career-column-jump { font-size: 8px; }
  .answer-row { grid-template-columns: 1fr; }
  .career-suggestions { grid-template-columns: 1fr; max-height: 312px; position: static; top: auto; }
  .career-suggestions button:nth-child(odd) { border-right: 0; }
  .career-reveal { grid-template-columns: auto 1fr; }
  .career-reveal > strong { grid-column: 1 / -1; text-align: right; }
  .chain-route { margin: 16px auto 14px; padding: 0 10px; }
  .chain-route-head { gap: 6px; padding: 10px 0 8px; }
  .chain-route-flow { display: none; }
  .chain-path { justify-content: flex-start; margin: 16px -10px 14px; overflow-x: auto; padding: 0 10px 8px; }
  /* Her düğüm kendi genişliğinde kalır ki şerit yana kaysın. İki seçici de
     yazılır: `:first-child` yalın sınıfı yener, tek başına yetmez. */
  .chain-node-wrap, .chain-node-wrap:first-child { flex: 0 0 auto; }
  .chain-link { flex: 0 0 auto; width: 27px; }
  .chain-actions { align-items: stretch; flex-direction: column; }
  .chain-actions .text-button:first-child { margin-right: 0; }
  .chain-success { grid-template-columns: auto 1fr; }
  .chain-success > b { grid-column: 1 / -1; text-align: right; }
  .round-footer { padding: 12px; }
  .round-footer-head { align-items: stretch; flex-wrap: wrap; gap: 10px; }
  .round-footer .primary-button { margin-left: auto; }
  .round-comparison { margin-left: 0; }
  .online-report-row { padding: 8px; }
  .online-report-line { gap: 7px; grid-template-columns: 18px 28px minmax(0,1fr) 70px 42px; }
  .online-report-line .mini-avatar, .chain-result-owner .mini-avatar { height: 28px; width: 28px; }
  /* Dar ekranda kırılım kalemleri sarar; toplam kendi satırına iner. */
  .score-breakdown { gap: 4px 7px; padding: 6px 9px; }
  .score-chip.total { border-left: 0; margin-left: 0; padding-left: 0; }
  .report-detail b { font-size: 10px; }
  .report-status { min-width: 64px; padding: 5px; }
  .chain-result-owner { gap: 7px; grid-template-columns: 18px 28px minmax(0,1fr) 42px; }
  /* Dar ekranda künyeler kendi satırına iner; ad ve puan sıkışmaz. */
  .chain-result-tags { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
  .advance-note { flex: 1 1 100%; text-align: left; }
  .chain-report-path { margin-left: 53px; }
  .online-final-shell { padding: 28px 14px; }
  .online-final-head { gap: 15px; grid-template-columns: 58px 1fr; }
  .champion-seal { border-width: 4px; font-size: 22px; height: 58px; width: 58px; }
  .online-final-head h1 { font-size: 39px; }
  .final-podium { gap: 6px; }
  .podium-card { min-height: 130px; padding: 13px 7px; }
  .podium-card.place-1 { min-height: 145px; }
  .podium-avatar { height: 36px; width: 36px; }
  .final-ranking-row { gap: 7px; grid-template-columns: 18px 28px minmax(0,1fr) 58px; padding: 8px; }
  .final-ranking-row > span:nth-last-child(2) { display: none !important; }
  .final-score { width: 100%; }
  .final-score > span { flex: 1; min-width: 0; padding: 15px; }
  .final-actions { flex-direction: column; width: min(100%, 360px); }
}

/* Readable desktop density. Width and type are restored from the earlier
   75%-scale treatment, while viewport-height clamps keep every primary game
   surface inside a 1080p Windows browser at 100% zoom (including 125% OS
   scaling). */
@media (min-width: 981px) {
  .home-shell, .mode-shell, .lobby-shell, .session-shell { padding: 0 clamp(24px, 3.2vw, 52px) 24px; }
  .site-header { height: 68px; max-width: 1280px; }
  .wordmark { font-size: 8px; gap: 8px; }
  .wordmark-mark { font-size: 14px; height: 31px; width: 31px; }
  .back-button { font-size: 11px; gap: 8px; padding: 8px 0; }
  .back-button svg { height: 16px; width: 16px; }
  .header-actions { gap: 12px; }
  .ninth-label { font-size: 9px; }
  .language-option { font-size: 9px; min-height: 27px; padding: 0 9px; }
  .language-flag { height: 11px; width: 16px; }

  .home-intro { gap: clamp(42px, 7vw, 108px); max-width: 1180px; padding: clamp(24px, 4vh, 38px) 0 clamp(18px, 3vh, 26px); }
  .home-intro h1 { font-size: clamp(46px, 4.4vw, 68px); max-width: 760px; }
  html[lang="en"] .home-intro h1 { font-size: clamp(43px, 4.1vw, 64px); max-width: 790px; }
  .intro-copy { padding-left: clamp(22px, 2.6vw, 40px); }
  .intro-copy > p { font-size: clamp(13px, 1.05vw, 16px); max-width: 455px; }
  .game-grid { gap: 14px; max-width: 1180px; }
  .game-card { border-radius: 24px; min-height: clamp(320px, 46vh, 380px); padding: 24px; }
  .game-card::after { border-radius: 19px; inset: 5px; }
  .card-number { font-size: 12px; left: 24px; top: 20px; }
  .game-card img { height: clamp(174px, 26vh, 220px); top: 12px; }
  .game-card-copy { bottom: 21px; left: 24px; right: 42px; }
  .card-kicker { font-size: 8px; margin-bottom: 8px; }
  .game-card-copy strong { font-size: clamp(24px, 2vw, 31px); line-height: 1.02; margin-bottom: 10px; }
  html[lang="en"] .game-card-copy strong { font-size: clamp(22px, 1.8vw, 29px); }
  .game-card-copy > span:last-child { font-size: 11px; line-height: 1.45; }
  .card-arrow { bottom: 22px; font-size: 20px; right: 21px; }

  .mode-heading { gap: clamp(34px, 5vw, 76px); grid-template-columns: minmax(220px, .72fr) 1.28fr; max-width: 1080px; padding: clamp(28px, 4vh, 48px) 0 26px; }
  .mode-heading h1 { font-size: clamp(43px, 4.8vw, 70px); }
  .mode-heading p { font-size: 14px; line-height: 1.5; margin-top: 17px; max-width: 540px; }
  .mode-asset-wrap { height: min(25vw, 285px); min-height: 215px; min-width: 215px; }
  .play-mode-grid { gap: 11px; max-width: 1080px; }
  .play-mode-card { gap: 15px; min-height: 148px; padding: 19px; }
  .mode-icon { height: 40px; width: 40px; }
  .mode-icon svg { height: 19px; width: 19px; }
  .play-mode-card small { font-size: 8px; margin-bottom: 8px; }
  .play-mode-card strong { font-size: 17px; margin-bottom: 8px; }
  .play-mode-card > span:nth-child(2) > span { font-size: 11px; }

  .primary-button, .secondary-button { font-size: 11px; min-height: 42px; padding: 0 20px; }
  .lobby-entry { gap: clamp(50px, 8vw, 130px); grid-template-columns: 1fr 360px; max-width: 1050px; min-height: calc(100vh - 92px); padding: 32px 0; }
  .lobby-entry h1 { font-size: clamp(45px, 5vw, 70px); }
  .lobby-entry-copy > p { font-size: 14px; max-width: 480px; }
  .lobby-form, .lobby-panel { padding: 25px; }
  .lobby-form input, .career-answer input, .chain-builder input { font-size: 13px; height: 45px; padding: 0 13px; }

  .session-layout { gap: 16px; grid-template-columns: 140px minmax(0, 880px); max-width: 1080px; padding: 22px 0 28px; }
  .score-rail { gap: 7px; top: 18px; }
  .rail-round, .rail-score { border-radius: 16px; padding: 16px; }
  .rail-round small, .rail-score small { font-size: 8px; }
  .rail-round strong { font-size: 28px; }
  .rail-score strong { font-size: 20px; }
  .online-mini-board > div { font-size: 9px; padding: 8px; }
  .round-card { border-radius: 24px; min-height: clamp(495px, 72vh, 570px); padding: clamp(24px, 2.6vw, 34px); }
  .round-kicker { font-size: 8px; margin-bottom: 25px; }
  .transfer-file-heading { font-size: 10px; margin-bottom: 23px; }
  .transfer-file-heading strong { font-size: 13px; }
  .player-token { font-size: 15px; height: 52px; width: 52px; }
  .player-token.small { font-size: 10px; height: 34px; width: 34px; }
  .player-token.large { font-size: 23px; height: 78px; width: 78px; }
  .transfer-player { gap: 20px; margin-bottom: 27px; }
  .transfer-player h2 { font-size: clamp(34px, 4vw, 50px); }
  .transfer-player p { font-size: 10px; }
  .club-route { gap: 16px; margin-bottom: 28px; padding: 17px; }
  .club-route .club-name { font-size: clamp(14px, 1.45vw, 18px); }
  .club-crest.route { height: 38px; width: 38px; }
  .fee-control { max-width: 650px; }
  .fee-control output { font-size: clamp(50px, 6.6vw, 76px); margin: 10px 0 20px; }
  .range-labels { margin: 7px 0 20px; }

  .career-round { padding-bottom: 30px; }
  .career-direction { margin-top: -5px; }
  .career-timeline { gap: 9px; margin-bottom: 16px; }
  .career-column { gap: 6px; }
  .career-stop { gap: 9px; grid-template-columns: 31px 15px minmax(0, 1fr) auto; min-height: 48px; padding: 6px 10px 6px 7px; }
  .timeline-index { height: 30px; }
  .club-crest.timeline { height: 28px; width: 28px; }
  .career-stop .club-name { font-size: 12px; }
  .timeline-period { font-size: 10px; padding: 7px 8px; }
  .career-answer, .chain-builder { padding: 18px; }
  .career-suggestions { max-height: 250px; }
  .career-suggestions button { padding: 8px 10px; }
  .career-reveal { padding: 18px; }
  .career-reveal h3 { font-size: 31px; }

  /* Jeton bu genişlikte 52 piksel. */
  .chain-route { --chain-token: 52px; --chain-badge: 22px; margin: 20px auto 18px; }
  .chain-route-head { padding: 11px 0 9px; }
  .chain-path { margin: 20px auto 20px; }
  .chain-node-wrap { max-width: 215px; }
  .chain-node { min-width: 76px; }
  .chain-node strong { font-size: 10px; margin-top: 10px; max-width: 96px; }
  .chain-link { min-width: 24px; }
  .chain-builder { max-width: 620px; }
  .suggestions { max-height: 275px; }
  .suggestions button { column-gap: 16px; padding: 8px 10px; }
  .suggestions strong { font-size: 11px; }
  .suggestions small { font-size: 9px; }
  .chain-success { max-width: 580px; padding: 16px; }
  .round-footer { margin-top: 11px; min-height: 58px; padding: 9px 13px 9px 18px; }
}

@media (min-width: 981px) and (max-height: 760px) {
  .home-intro { padding-bottom: 18px; padding-top: 22px; }
  .game-card { min-height: 320px; }
  .game-card img { height: 174px; top: 10px; }
  .mode-heading { padding-bottom: 20px; padding-top: 24px; }
  .mode-asset-wrap { height: 215px; min-height: 215px; width: 215px; }
  .play-mode-card { min-height: 136px; }
  .session-layout { padding-bottom: 20px; padding-top: 16px; }
  .round-card { min-height: 495px; }
  .round-kicker { margin-bottom: 19px; }
  .chain-path { margin-bottom: 34px; margin-top: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Statik sürüme özgü küçük yardımcılar. */
.static-badge {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  display: inline-flex;
  font-size: 8px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.12em;
  margin-top: 14px;
  padding: 7px 10px;
  text-transform: uppercase;
}
.static-badge::before { background: #57b887; border-radius: 50%; content: ""; height: 6px; width: 6px; }
.toast {
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  bottom: 20px;
  box-shadow: 0 14px 34px rgba(13,27,43,.2);
  color: white;
  font-size: 11px;
  left: 50%;
  padding: 11px 15px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 20;
}
.source-note { color: var(--muted); font-size: 9px; margin-top: 9px; text-align: center; }
.source-note strong { color: var(--ink); }
.round-card input[type="range"] { touch-action: pan-y; }
.answer-message:empty, .chain-message:empty { display: none; }
.online-final-shell > p { color: var(--muted); margin: 8px 0 0; }
.final-shell .eyebrow, .online-final-shell .eyebrow { margin-bottom: 14px; }
.fatal-detail { color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.5; max-width: 580px; padding: 0 22px; }
.play-mode-card .offline-ready { color: var(--green); }

@media (max-width: 720px) {
  .static-badge { display: none; }
  .source-note { padding: 0 10px; }
}

/* ==========================================================================
   WOS:MATCH-SETTINGS-V298 — tur sayısı ve tur süresi ayarları.

   Aynı bileşen üç yerde kullanılır: tek oyunculu ayar ekranı, yapay zekâ
   ayar ekranı ve online lobi. Bu yüzden kurallar moda değil, sınıfa bağlı.
   ========================================================================== */

.match-settings {
  display: grid;
  gap: 18px;
  text-align: left;
}

.setting-block {
  display: grid;
  gap: 8px;
}

.setting-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.17em;
}

/*
 * Dört seçenek IZGARAYA dizilir, sarmaya bırakılmaz.
 *
 * Sarmaya bırakıldığında dar ekranda üç seçenek üstte kalıp dördüncüsü
 * tek başına alta düşüyor ve tam genişlikte, diğerlerinden farklı bir
 * kutuya dönüşüyordu (ölçüldü: "10 tur" ve "Süresiz" böyle çıkıyordu).
 * İki sütunluk ızgarada dört seçenek 2x2 oturur, hepsi aynı boyda.
 */
.setting-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Yer varsa dördü tek satıra geçer. */
@media (min-width: 620px) {
  .setting-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.setting-chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  /* Dokunma hedefi: parmakla rahat basılsın. */
  min-height: 44px;
  padding: 10px 12px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.setting-chip:hover:not(:disabled) { background: #f4f4ef; border-color: var(--accent, var(--copper)); }
/* Seçili künyede küçük bir onay işareti: hangi ayarın açık olduğu tek
   bakışta okunuyor, yalnız renk farkına bakmak gerekmiyor. */
.setting-chip.active::after { content: "\2713"; font-size: 11px; margin-left: 8px; opacity: .8; }

.setting-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Oda sahibi olmayan seçimi GÖRÜR ama değiştiremez; soluk ama okunur. */
.setting-chip:disabled { cursor: default; opacity: 0.62; }
.setting-chip.active:disabled { opacity: 0.85; }

.setting-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin: 2px 0 0;
}

/* --- Tek oyunculu / yapay zekâ ayar ekranı ------------------------------ */
.setup-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  display: grid;
  gap: 22px;
  margin: 0 auto;
  max-width: 620px;
  padding: 26px;
}

/* --- Online lobi ------------------------------------------------------- */
.lobby-settings {
  border-top: 1px solid var(--line);
  margin-bottom: 22px;
  padding-top: 17px;
  text-align: left;
}

.lobby-settings-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 13px;
}

.lobby-settings-head span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.17em;
}

.lobby-settings-head small { color: var(--muted); font-size: 11px; }

/* --- Oyun ekranındaki geri sayım --------------------------------------- */
.rail-clock {
  background: var(--navy);
  border-radius: var(--radius-md);
  color: #fff;
  padding: 19px;
}

.rail-clock small {
  color: rgba(255, 255, 255, 0.47);
  display: block;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.17em;
  margin-bottom: 6px;
}

.rail-clock strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
}

/* Son on saniye: sayı kırmızıya döner. Renk dışında hiçbir şey oynamaz —
   kutu büyüseydi yanındaki tahta her saniye kayardı. */
.rail-clock strong.urgent { color: #ff9d8a; }

/* v304: four Atlas modes, content-sized cards at every viewport. */
.home-shell .game-grid { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; }
.home-shell .game-card { display:flex; flex-direction:column; min-width:0; min-height:0; padding:24px; overflow:visible; }
.home-shell .game-card img { position:static; width:100%; height:auto; aspect-ratio:1.2; max-height:230px; object-fit:contain; transform:none; margin:12px 0 20px; }
.home-shell .game-card:hover img { transform:translateY(-4px); }
.home-shell .game-card-copy { position:static; max-width:none; min-width:0; flex:1; padding-right:10px; }
.home-shell .game-card-copy strong { font-size:clamp(24px,2vw,30px); line-height:1.15; overflow-wrap:anywhere; }
.home-shell .game-card-copy > span:last-child { font-size:14px; line-height:1.55; min-height:0; }
.home-shell .card-kicker { font-size:12px; line-height:1.4; }
.home-shell .card-arrow { position:static; align-self:flex-end; margin-top:14px; }
@media(max-width:1100px) { .home-shell .game-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:540px) { .home-shell .game-grid {grid-template-columns:1fr;} .home-shell .game-card {padding:22px;} .home-shell .game-card img {max-height:210px;} }

/* v305: fit four mode cards by viewport height without clipping content. */
.home-shell .back-button{visibility:visible;width:auto}
@media(min-width:1101px){
 .home-shell{padding-bottom:18px;min-height:100dvh}
 .home-shell .site-header{height:64px}
 .home-shell .home-intro{padding:clamp(16px,3vh,30px) 0 20px;gap:40px}
 .home-shell .home-intro h1{font-size:clamp(40px,5.7vh,64px);line-height:1.02}
 .home-shell .game-card{padding:18px}
 .home-shell .game-card img{height:clamp(110px,24vh,215px);max-height:215px;aspect-ratio:auto;margin:6px 0 12px}
 .home-shell .game-card-copy strong{font-size:clamp(23px,2vw,29px);line-height:1.12}
 .home-shell .game-card-copy > span:last-child{font-size:14px;line-height:1.45}
 .home-shell .card-arrow{margin-top:8px}
}

@media(min-width:1101px){html[lang="en"] .home-shell .home-intro h1{font-size:clamp(40px,5.7vh,64px)}}