/* Tavla — premium klasik tema: ceviz ahşap, krem ve siyah pullar, altın detaylar */
:root {
  --bg: #100b07;
  --bg2: #1a120c;
  --panel-1: #2c1d13;
  --panel-2: #1b120b;
  --line: rgba(212, 169, 79, .32);
  --line-strong: rgba(212, 169, 79, .7);
  --text: #f3e9d6;
  --muted: #b5a385;
  --gold: #d4a94f;
  --gold-light: #f3d98f;
  --gold-dark: #8a6224;
  --cream: #f4e7c8;
  --green-1: #46a253;
  --green-2: #1d6430;
  --red-1: #c2402f;
  --red-2: #7c1a11;
  --blue-1: #3a6fc0;
  --blue-2: #1c3a73;
  --serif: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --tap: 46px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120, 70, 30, .28), transparent 70%),
    url("../assets/ui/bg-pattern.svg"),
    linear-gradient(180deg, #160f0a, var(--bg));
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.icon { width: 20px; height: 20px; flex: none; fill: currentColor; vertical-align: middle; }
.icon.gold { color: var(--gold); }

/* ---------- Ekranlar ---------- */
.screen { display: none; min-height: 100dvh; }
.screen.active { display: flex; animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } }
#home, #setup-ai, #online, #leaderboard, #rules { align-items: center; justify-content: center; padding: 16px; }

/* Ahşap panel */
.menu-card, .modal-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 30%),
    url("../assets/ui/wood-panel.svg") center / 100% 100% no-repeat,
    var(--panel-1);
  border-radius: 22px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 2px var(--line);
}
.menu-card::before, .modal-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 12, 7, .55), rgba(12, 7, 4, .78));
}
.menu-card > *, .modal-card > * { position: relative; }
.menu-card {
  width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-card.wide { max-width: 660px; }

.brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 4px; }
.brand-logo { width: 96px; height: 96px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.title {
  margin: 6px 0 0; font: 700 46px/1 var(--serif); letter-spacing: 1px;
  background: linear-gradient(180deg, #fff1c4, #e2b65b 55%, #a8772a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.card-title {
  margin: 0; font: 700 24px/1.2 var(--serif); color: var(--gold-light);
  display: flex; align-items: center; gap: 10px;
}
.card-title .icon { width: 24px; height: 24px; }
h3 { margin: 12px 0 2px; font: 700 16px var(--serif); color: var(--gold); }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
.gold-hint { color: var(--gold-light); text-align: center; }
.error { color: #ff9a85; min-height: 1em; margin: 0; font-size: 14px; }
.rules p, .rules li { color: #e2d6bf; font-size: 15px; }
.rules ul { margin: 4px 0; padding-left: 20px; }

.field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--muted); letter-spacing: .3px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .icon { position: absolute; left: 13px; color: var(--gold); opacity: .8; }
.field input, .join-row input {
  width: 100%; min-height: var(--tap);
  background: rgba(0, 0, 0, .38); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 16px; color: var(--text); outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
  transition: border-color .15s, box-shadow .15s;
}
.input-wrap input { padding-left: 42px; }
.field input:focus, .join-row input:focus { border-color: var(--gold); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(212, 169, 79, .2); }

/* ---------- Butonlar ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 10px 18px; border-radius: 13px; cursor: pointer;
  font-weight: 700; letter-spacing: .2px; color: var(--cream);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #4a3222, #2a1b11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 3px 0 #0c0704, 0 8px 18px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  transition: transform .08s, filter .15s, box-shadow .08s, opacity .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 #0c0704, 0 4px 10px rgba(0, 0, 0, .4); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-green { background: linear-gradient(180deg, var(--green-1), var(--green-2)); }
.btn-red { background: linear-gradient(180deg, var(--red-1), var(--red-2)); }
.btn-blue { background: linear-gradient(180deg, var(--blue-1), var(--blue-2)); }
.btn-gold {
  background: linear-gradient(180deg, #f6dc92, #cf9f45 55%, #a87a2e);
  color: #2b1a06; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); border-color: #f3d98f;
}
.btn.big { min-height: 56px; font-size: 18px; }
.btn.big .icon { width: 24px; height: 24px; }
.btn > .icon { position: absolute; left: 16px; margin: 0; }
.btn { white-space: normal; line-height: 1.25; }

.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
  border-radius: 14px; cursor: pointer; color: var(--cream); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3);
  transition: background .15s, border-color .15s, transform .08s;
}
.tile .icon { width: 26px; height: 26px; color: var(--gold); }
.tile:hover { background: rgba(212, 169, 79, .1); border-color: var(--line-strong); }
.tile:active { transform: scale(.97); }

.back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px 4px 0; font-size: 15px;
  min-height: 36px;
}
.back:hover { color: var(--gold-light); }
.back .icon { width: 18px; height: 18px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: rgba(0, 0, 0, .35); border-radius: 14px; padding: 5px; border: 1px solid var(--line); }
.seg button {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px;
  border: 1px solid transparent; background: none; padding: 6px; border-radius: 10px;
  cursor: pointer; color: var(--muted); transition: background .15s, color .15s;
}
.seg button b { font-size: 16px; }
.seg button small { font-size: 11px; opacity: .8; }
.seg button .stars { color: var(--gold); letter-spacing: 1px; }
.seg button.on {
  background: linear-gradient(180deg, #f6dc92, #c99a40); color: #2b1a06; border-color: #f3d98f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.seg button.on .stars { color: #7a2a12; }

.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: 700; }

#lobbyWait { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
#lobbyWait[hidden], #roomBox[hidden], #lobbyMain[hidden] { display: none; }
#lobbyMain { display: flex; flex-direction: column; gap: 12px; }
.code { font: 800 40px var(--serif); letter-spacing: 8px; margin: 0; color: var(--gold-light); text-shadow: 0 2px 10px rgba(212, 169, 79, .35); }
#roomBox { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid rgba(212, 169, 79, .2); border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Rekor tablosu ---------- */
.table-wrap { max-height: 58dvh; overflow: auto; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); }
table.lb { width: 100%; border-collapse: collapse; font-size: 15px; }
.lb th, .lb td { padding: 10px 8px; text-align: right; }
.lb th:nth-child(2), .lb td:nth-child(2) { text-align: left; }
.lb th:first-child, .lb td:first-child { text-align: center; width: 44px; }
.lb thead th { position: sticky; top: 0; background: #22160e; color: var(--gold); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; border-bottom: 1px solid var(--line); }
.lb tbody tr { border-bottom: 1px solid rgba(212, 169, 79, .08); }
.lb tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.lb td:nth-child(3) { font-weight: 700; color: var(--gold-light); }
.lb tr.me td { color: var(--gold-light); font-weight: 700; background: rgba(212, 169, 79, .1); }
.lb td.empty { text-align: center; color: var(--muted); padding: 28px; }
.medal {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 13px var(--serif); color: #2b1a06; box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.medal.m1 { background: linear-gradient(180deg, #fbe39b, #c9962f); }
.medal.m2 { background: linear-gradient(180deg, #f2f2f2, #9da3a8); }
.medal.m3 { background: linear-gradient(180deg, #f0b98a, #a45f2a); }

/* ---------- Oyun ekranı ---------- */
#game {
  flex-direction: column; height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.game-top, .game-bottom { display: flex; align-items: center; gap: 10px; padding: 8px 12px; flex: none; }
.game-top { justify-content: space-between; }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: 12px; flex: none; cursor: pointer;
  display: grid; place-items: center; color: var(--gold-light);
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, #3e2a1c, #22160e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 10px rgba(0, 0, 0, .4);
}
.icon-btn .icon { width: 22px; height: 22px; }

.player {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 5px 10px; border-radius: 14px;
  border: 1px solid transparent; transition: border-color .25s, background .25s, box-shadow .25s;
}
.player.me { justify-content: flex-end; text-align: right; }
.pinfo { min-width: 0; display: flex; flex-direction: column; }
.player .pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.player .pip { color: var(--muted); font-size: 12px; }
.avatar { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.player.active { border-color: var(--line-strong); background: rgba(212, 169, 79, .1); box-shadow: 0 0 18px rgba(212, 169, 79, .18); }
.player.active .avatar { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); } }

.scoreboard {
  display: flex; align-items: center; gap: 6px; flex: none; padding: 5px 7px; border-radius: 14px;
  background: url("../assets/ui/score-panel.svg") center / 100% 100% no-repeat, linear-gradient(180deg, #3b2718, #1f140c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 2px var(--line), 0 6px 14px rgba(0, 0, 0, .45);
}
.score-tile {
  min-width: 40px; height: 40px; padding: 0 6px; display: grid; place-items: center; border-radius: 9px;
  font: 700 24px/1 var(--serif); border: 1.5px solid var(--gold);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .4);
}
.score-tile.c0 { background: linear-gradient(180deg, #fff6df, #e2cfa4); color: #2a1b0c; }
.score-tile.c1 { background: linear-gradient(180deg, #2c2826, #0f0d0c); color: var(--cream); }
.score-tile.bump { animation: bump .6s ease-out; }
@keyframes bump { 30% { transform: scale(1.25); box-shadow: 0 0 18px var(--gold); } }
.score-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.score-rosette { width: 18px; height: 18px; }
#matchText { color: var(--muted); font-size: 10px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

.board-wrap { flex: 1; min-height: 0; padding: 2px 8px; display: flex; align-items: center; justify-content: center; }

.game-bottom { justify-content: space-between; }
.ctrl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 118px; min-height: 50px; padding: 8px 16px; border-radius: 26px; cursor: pointer;
  font-weight: 700; color: var(--cream); border: 1.5px solid var(--line-strong);
  background: linear-gradient(180deg, #4a3222, #24170e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 #0c0704, 0 8px 16px rgba(0, 0, 0, .45);
  transition: transform .08s, opacity .2s, filter .15s;
}
.ctrl-btn .icon { width: 22px; height: 22px; color: var(--gold-light); }
.ctrl-btn.primary { background: linear-gradient(180deg, var(--green-1), var(--green-2)); }
.ctrl-btn.primary .icon { color: #fff; }
.ctrl-btn.primary.ready { animation: ready 1.6s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 #0c0704, 0 0 22px rgba(120, 220, 120, .55); } }
.ctrl-btn:hover:not(:disabled) { filter: brightness(1.12); }
.ctrl-btn:active:not(:disabled) { transform: translateY(2px); }
.ctrl-btn:disabled { opacity: .38; cursor: default; animation: none; }

.status { flex: 1; min-width: 0; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.25; }
#statusText { color: var(--text); }
.turn-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .4); color: var(--cream);
}
.turn-pill[hidden] { display: none; }
.turn-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #888; }
.turn-pill.me { background: linear-gradient(180deg, #2f7a3b, #1a4d24); border-color: #6fcf7f; }
.turn-pill.me .dot { background: #b8ffbf; box-shadow: 0 0 8px #8dff9b; animation: blink 1.2s infinite; }
.turn-pill.opp { background: linear-gradient(180deg, #2c2a2a, #141212); }
.turn-pill.opp .dot { background: transparent; border: 1.5px solid var(--cream); }
.turn-pill.roll { background: linear-gradient(180deg, #9a2c20, #5e140c); border-color: #e08a6c; }
.turn-pill.roll .dot { background: #fff; border-radius: 2px; animation: spin .6s linear infinite; }
@keyframes blink { 50% { opacity: .35; } }
.timer { font-size: 12px; color: var(--muted); }
.timer.low { color: #ff9a85; font-weight: 700; }

/* ---------- Tahta (SVG) ---------- */
svg.board { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
svg.board .pnum { fill: #e2c27a; font: 600 10.5px var(--serif); text-anchor: middle; dominant-baseline: central; opacity: .72; }

svg.board .ck { will-change: transform; }
svg.board .ck-body { transition: transform .18s ease-out; }
svg.board .ck-body.lifted { transform: scale(1.1); }
svg.board .ck.dragging .ck-body { transform: scale(1.18); }
svg.board .slab { display: none; }
svg.board .ck.off .face { display: none; }
svg.board .ck.off .slab { display: inline; }

svg.board .badge-text { fill: #2b1a06; font: 700 15px var(--serif); text-anchor: middle; dominant-baseline: central; }
svg.board .tray-count { fill: var(--gold-light); font: 700 15px var(--serif); text-anchor: middle; dominant-baseline: central; }

svg.board .ring { fill: none; pointer-events: none; }
svg.board .ring.src { stroke: #ffc53d; stroke-width: 3.5; opacity: .95; animation: srcPulse 1.6s ease-in-out infinite; }
svg.board .ring.sel { stroke: #ffe08a; stroke-width: 4.5; }
@keyframes srcPulse { 50% { opacity: .5; stroke-width: 2.5; } }
svg.board .target-pt { fill: #ffe08a; opacity: .22; pointer-events: none; animation: tpulse 1.2s ease-in-out infinite; }
svg.board .target-tray { fill: #ffe08a; opacity: .28; pointer-events: none; animation: tpulse 1.2s ease-in-out infinite; }
svg.board .ghost { opacity: .42; pointer-events: none; }
svg.board .target { fill: none; stroke: #8dff9b; stroke-width: 3; stroke-dasharray: 6 5; pointer-events: none; animation: dash 1.2s linear infinite; }
svg.board .target.focused { fill: rgba(255, 224, 138, .28); stroke: #fff1b8; stroke-width: 5; filter: url(#fGlow); }
svg.board .target-tray.focused { opacity: .65; stroke: #fff1b8; stroke-width: 3; }
@keyframes tpulse { 50% { opacity: .08; } }
@keyframes dash { to { stroke-dashoffset: -22; } }

/* Hareket efektleri: iniş halkası ve iz (board.js gFx) */
svg.board .fx-ripple { fill: none; stroke: #fff; stroke-width: 3; pointer-events: none; }
svg.board .fx-ripple.hit { stroke: #ffb3a7; stroke-width: 4; }
svg.board .fx-trail { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; pointer-events: none; opacity: 0; }
/* Kulüp teması: altın hamle vurgusu (rapor: cardgames/247 standardı), kabuktan bağımsız */
html svg.board.theme-club .ring.src { stroke: #f2c94c; }
html svg.board.theme-club .ring.sel { stroke: #ffe08a; }
html svg.board.theme-club .target-pt, html svg.board.theme-club .target-tray { fill: #f2c94c; }
html svg.board.theme-club .target { stroke: #f2c94c; }
html svg.board.theme-club .fx-ripple { stroke: #fff; }
html svg.board.theme-club .fx-ripple.hit { stroke: #e25b4a; }
html svg.board.theme-club .fx-trail { stroke: #fff; }
html svg.board.theme-club .badge circle { fill: #2e1a0f; stroke: #f3ebdc; }
html svg.board.theme-club .badge-text { fill: #f3ebdc; }
html svg.board.theme-club .tray-count { fill: #f3ebdc; }
svg.board .die.used { opacity: .32; filter: grayscale(.6); transition: opacity .25s; }
svg.board.roll-ready .die { cursor: pointer; }
svg.board .roll-prompt { cursor: pointer; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .55)); transform-box: fill-box; transform-origin: center; }
svg.board .roll-prompt rect { stroke: #e0bd68; stroke-width: 2; }
svg.board .roll-prompt.light rect { fill: #f3e5c3; }
svg.board .roll-prompt.dark rect { fill: #211b18; }
svg.board .roll-prompt text { fill: #8a6224; font: 700 30px var(--serif); pointer-events: none; }
svg.board .roll-prompt.dark text { fill: #f3d98f; }
svg.board .roll-prompt-label { fill: #f3d98f; font: 700 15px system-ui, sans-serif; letter-spacing: 1.5px; pointer-events: none; }
svg.board.roll-ready .roll-prompt { animation: rollReady 1.3s ease-in-out infinite; }
@keyframes rollReady { 50% { filter: drop-shadow(0 0 10px rgba(243, 217, 143, .9)); } }

/* ---------- Pencere ---------- */
.modal {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at center, rgba(10, 6, 3, .55), rgba(5, 3, 1, .82));
  animation: fade .2s;
}
.modal[hidden] { display: none; }
.modal-card {
  width: 100%; max-width: 380px; max-height: calc(100dvh - 32px); margin: auto; padding: 26px 22px 22px; text-align: center;
  overflow-y: auto; overscroll-behavior: contain;
  animation: pop .32s cubic-bezier(.2, .9, .3, 1.3);
}
.modal-card h2 { margin: 0 0 6px; font: 700 26px var(--serif); color: var(--gold-light); }
.modal-card p { color: #e2d6bf; margin: 8px 0; }
.modal-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.modal-actions .btn { width: 100%; min-height: 48px; flex: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.88) translateY(10px); } }

.score-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 12px 0 6px; }
.score-row .score-tile { min-width: 56px; height: 56px; font-size: 32px; }
.score-row .vs { color: var(--muted); font: 600 14px var(--serif); }
.score-row figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-row figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.mars-badge {
  display: inline-block; margin: 4px 0; padding: 3px 12px; border-radius: 999px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(180deg, #f6dc92, #c99a40); color: #3a1f05; font-size: 13px;
}
.points-earned { color: var(--gold-light) !important; font-weight: 700; }

/* Oyun sonu */
.go-art { position: relative; height: 96px; margin: -6px auto 4px; width: 140px; }
.go-art[hidden] { display: none; }
.go-art .laurel { position: absolute; inset: 0; width: 140px; height: 140px; top: -20px; opacity: .9; }
.go-art .crown { position: absolute; left: 35px; top: 14px; width: 70px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); animation: crownIn .7s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes crownIn { from { transform: translateY(-30px) scale(.4) rotate(-20deg); opacity: 0; } }
.modal-card.win {
  background: radial-gradient(ellipse at top, rgba(120, 200, 120, .25), transparent 60%), linear-gradient(180deg, #1f5a30, #0f2d18);
  box-shadow: var(--shadow), inset 0 0 0 2px var(--gold), 0 0 50px rgba(212, 169, 79, .25);
}
.modal-card.lose {
  background: radial-gradient(ellipse at top, rgba(120, 140, 200, .18), transparent 60%), linear-gradient(180deg, #1f2740, #0d111d);
  box-shadow: var(--shadow), inset 0 0 0 2px #8a93a8;
}
.modal-card.win::before, .modal-card.lose::before { display: none; }
.modal-card.win h2 { font-size: 38px; background: linear-gradient(180deg, #fff1c4, #e2b65b 60%, #a8772a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-card.lose h2 { font-size: 34px; color: #e8ecf5; }
.modal-card.lose .go-art .crown { filter: grayscale(1) brightness(1.4) drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.modal-card.lose .go-art .laurel { filter: grayscale(1) brightness(1.2); opacity: .5; }

/* Ayarlar */
.settings-card { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.settings-card .card-title { justify-content: center; }
.settings-card .modal-actions { position: sticky; bottom: -22px; z-index: 2; padding: 10px 0 2px; background: linear-gradient(180deg, rgba(36, 23, 15, 0), rgba(36, 23, 15, .96) 35%); }
#settingsClose { display: flex; align-items: center; justify-content: center; color: #2b1a06; }
#settingsClose span { position: relative; z-index: 3; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); cursor: pointer;
}
.setting-row > span:first-child { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.setting-row .icon { color: var(--gold); }
.toggle { position: relative; width: 52px; height: 30px; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle i {
  position: absolute; inset: 0; border-radius: 999px; background: #3a2a20; border: 1px solid var(--line);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); transition: background .2s; pointer-events: none;
}
.toggle i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: url("../assets/checkers/checker-light.svg") center / 125%; box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  transition: transform .2s cubic-bezier(.3, .7, .3, 1.3);
}
.toggle input:checked + i { background: linear-gradient(180deg, var(--green-1), var(--green-2)); }
.toggle input:checked + i::after { transform: translateX(22px); }
.toggle input:focus-visible + i { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.setting-label { display: block; font-weight: 600; margin-bottom: 8px; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-sw {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 112px; padding: 6px 4px 8px; border-radius: 12px;
  cursor: pointer; background: rgba(0, 0, 0, .3); border: 1.5px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 600;
}
.theme-sw span { display: block; max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
.theme-sw.on { border-color: var(--gold-light); color: var(--gold-light); box-shadow: 0 0 12px rgba(212, 169, 79, .35); }
.theme-sw i {
  position: relative; display: block; width: 100%; aspect-ratio: 1.15; border-radius: 6px; overflow: hidden;
  border: 3px solid #3b2213; box-shadow: inset 0 0 0 1px var(--gold-dark);
}
.theme-sw i::before, .theme-sw i::after {
  content: ""; position: absolute; top: 0; width: 34%; height: 62%; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.theme-sw i::before { left: 10%; background: linear-gradient(180deg, #f4e4bf, #c6a978); }
.theme-sw i::after { left: 56%; }
.t-classic i { background: url("../assets/board/board-classic.svg") center / cover; }
.t-classic i::after { background: linear-gradient(180deg, #93301f, #4d150b); }
.t-dark i { background: url("../assets/board/board-dark.svg") center / cover; }
.t-dark i::after { background: linear-gradient(180deg, #2b2523, #0b0908); }
.t-green i { background: url("../assets/board/board-green.svg") center / cover; }
.t-green i::after { background: linear-gradient(180deg, #8e2a1c, #4d150b); }
.t-blue i { background: url("../assets/board/board-blue.svg") center / cover; }
.t-blue i::after { background: linear-gradient(180deg, #141a2b, #04060c); }
.t-moon i { background: url("../assets/board/board-moon.svg") center / cover; }
.t-moon i::after { background: linear-gradient(180deg, #d7b354, #742014); }

/* ---------- Bildirim ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px;
  max-width: calc(100vw - 32px); font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #2a5ea8, #173a70); border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px); transition: .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: linear-gradient(180deg, #2f8a3e, #1a5424); }
.toast.error { background: linear-gradient(180deg, #a83324, #6a170e); }
.toast.gold { background: linear-gradient(180deg, #c99a40, #8a6224); color: #fff8e6; }

/* ---------- Duyarlı ---------- */
@media (max-width: 560px) {
  .game-top { gap: 6px; padding: 6px 8px; }
  .player { gap: 6px; padding: 4px 6px; }
  .avatar { width: 28px; height: 28px; }
  .player .pname { font-size: 13px; }
  .player .pip { font-size: 11px; }
  .score-tile { min-width: 32px; height: 34px; font-size: 19px; }
  .scoreboard { gap: 4px; padding: 4px 5px; }
  .score-rosette { width: 14px; height: 14px; }
  #matchText { display: none; }
  .player { padding: 4px 5px; }
  .icon-btn { width: 40px; height: 40px; }
  .ctrl-btn { min-width: 0; padding: 8px 14px; min-height: 48px; }
  .game-bottom { gap: 6px; padding: 6px 8px 8px; }
  .status { font-size: 13px; }
}
@media (max-width: 380px) {
  .modal { padding: 8px; }
  .modal-card { max-height: calc(100dvh - 16px); padding: 20px 14px 18px; }
  .menu-card { max-height: calc(100dvh - 16px); padding: 20px 14px; }
  .ctrl-btn span { display: none; }
  .ctrl-btn { width: 52px; padding: 0; }
  .title { font-size: 40px; }
}
/* Dik telefon: tahta üst çubuğun hemen altında, durum yazısı tahtanın altında, düğmeler en altta */
@media (orientation: portrait) and (max-width: 700px) {
  #game.active {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "top top" "board board" "status status" "left right";
  }
  .game-top { grid-area: top; }
  #game .board-wrap { grid-area: board; aspect-ratio: 15 / 12.3; width: 100%; padding: 6px 6px 0; }
  .game-bottom { display: contents; }
  .game-bottom .status { grid-area: status; align-self: start; justify-content: flex-start; padding: 12px 16px 0; min-height: 0; }
  .game-bottom .left { grid-area: left; display: flex; gap: 10px; padding: 8px 12px; align-self: end; }
  .game-bottom .right { grid-area: right; display: flex; gap: 10px; align-items: center; padding: 8px 12px; align-self: end; }
}
/* Yatay telefon: oyuncu/skor solda, kontroller sağda; tahta tüm yüksekliği kullanır */
@media (max-height: 500px) and (orientation: landscape) {
  #game.active { display: grid; grid-template-columns: minmax(130px, 170px) 1fr minmax(120px, 150px); grid-template-rows: 100%; }
  .game-top, .game-bottom { flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; padding: 8px; }
  .game-top .icon-btn { align-self: flex-start; width: 40px; height: 40px; }
  .player, .player.me { flex: none; justify-content: flex-start; text-align: left; padding: 5px 7px; }
  .player.me { flex-direction: row-reverse; justify-content: flex-end; }
  .avatar { width: 28px; height: 28px; }
  .scoreboard { align-self: center; }
  .score-tile { height: 34px; min-width: 34px; font-size: 20px; }
  #matchText { display: none; }
  .board-wrap { padding: 4px; }
  .ctrl-btn { min-width: 0; width: 100%; min-height: 46px; padding: 6px 10px; }
  .ctrl-btn span { display: inline; }
  .status { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Uluslararası sürüm: küp, koç, dürüst zar, ifadeler, bayrak ---------- */
svg.board .cube-face { fill: #f3e6c6; stroke: #8a6224; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
svg.board .cube-text { fill: #2b1a06; font: 800 17px var(--serif); }
svg.board .cube-die.offered .cube-face { stroke: #ffc53d; stroke-width: 3; animation: cubePulse 1s ease-in-out infinite; }
@keyframes cubePulse { 50% { filter: drop-shadow(0 0 10px #ffc53d); } }
svg.board .hint-path { fill: none; stroke: #6fd3ff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 6; animation: dash 1s linear infinite; opacity: .95; pointer-events: none; }
svg.board .hint-arrow { fill: #6fd3ff; }
svg.board .hint-badge circle { fill: #0e2a3a; stroke: #6fd3ff; stroke-width: 2; }
svg.board .hint-badge text { fill: #e6f7ff; font: 700 12px system-ui, sans-serif; }
svg.board .hint { pointer-events: none; }

.lang-switch { display: flex; gap: 6px; justify-content: center; }
.lang-switch button {
  min-height: 34px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--muted);
}
.lang-switch button.on { background: var(--gold); color: #2b1a06; border-color: var(--gold-light); }
.top-right { position: absolute; top: 14px; right: 14px; z-index: 2; }

.field select {
  width: 100%; min-height: var(--tap); background: rgba(0, 0, 0, .38); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font-size: 16px; color: var(--text); outline: none; appearance: none; -webkit-appearance: none;
}
.field select:focus { border-color: var(--gold); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flag { font-size: 1.15em; line-height: 1; }
.pinfo .meta { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.player.me .meta { justify-content: flex-end; }
.rating-pill { font-weight: 700; color: var(--gold-light); }

.game-tools { display: flex; align-items: center; gap: 6px; }
.fair-badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #b8ffbf; background: rgba(40, 110, 60, .35); border: 1px solid rgba(111, 207, 127, .5);
}
.fair-badge .icon { width: 15px; height: 15px; }
.fair-badge.verified { background: rgba(40, 140, 70, .6); }
.fair-badge.failed { color: #ffb3a7; background: rgba(140, 40, 30, .5); border-color: #ff8f7a; }
.fair-body { text-align: left; font-size: 13px; }
.fair-body dt { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; margin-top: 10px; }
.fair-body dd { margin: 2px 0 0; word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #e2d6bf; }
.fair-body .dice-list { font-family: inherit; font-size: 14px; letter-spacing: 2px; }
.fair-result { margin-top: 10px; padding: 8px 10px; border-radius: 10px; font-weight: 600; }
.fair-result.ok { background: rgba(40, 140, 70, .35); color: #b8ffbf; }
.fair-result.fail { background: rgba(140, 40, 30, .4); color: #ffb3a7; }
.fair-how { color: var(--muted); font-size: 11px; margin-top: 8px; }

.coach-line {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  animation: fade .25s;
}
.coach-line[hidden] { display: none; }
.coach-line.clickable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.last-move { font-size: 12px; color: var(--muted); }
.last-move:empty { display: none; }
.coach-line.good { background: rgba(40, 140, 70, .35); color: #b8ffbf; }
.coach-line.minor { background: rgba(200, 160, 40, .3); color: #ffe6a0; }
.coach-line.error { background: rgba(200, 100, 30, .35); color: #ffc9a0; }
.coach-line.blunder { background: rgba(170, 40, 30, .45); color: #ffb3a7; }
.coach-report { text-align: left; }
.coach-report .acc { font: 800 40px var(--serif); color: var(--gold-light); text-align: center; margin: 4px 0; }
.coach-report .acc small { font: 600 13px system-ui, sans-serif; color: var(--muted); display: block; }
.coach-report ul { margin: 6px 0 0; padding-left: 18px; color: #e2d6bf; font-size: 14px; }

.ctrl-btn.secondary { min-width: 0; padding: 8px 12px; }
.ctrl-btn.cube { background: linear-gradient(180deg, #f6dc92, #c99a40); color: #2b1a06; border-color: #f3d98f; }
.ctrl-btn.cube .icon { color: #2b1a06; }
.game-bottom .left, .game-bottom .right { display: flex; gap: 6px; align-items: center; }

.emote-bar { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.emote-bar button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); cursor: pointer; font-size: 20px;
  transition: transform .1s;
}
.emote-bar button:active { transform: scale(.9); }
.emote-bar button:disabled { opacity: .35; }
.emote-bubble {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px;
  background: #fff8e6; color: #2b1a06; font-weight: 700; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  animation: bubbleIn .25s cubic-bezier(.2, .9, .3, 1.3); pointer-events: none; white-space: nowrap;
}
.emote-bubble.opp { top: 56px; left: 60px; }
.emote-bubble.me { top: 56px; right: 60px; }
.emote-bubble .e { font-size: 22px; }
.emote-bubble.out { animation: bubbleOut .3s forwards; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@keyframes bubbleOut { to { opacity: 0; transform: translateY(-8px); } }
.emote-btn { font-size: 18px; }
#game { position: relative; }

.variant-seg button b { font-size: 15px; }
.lb td .flag { margin-right: 6px; }
.rating-delta.up { color: #8dff9b; } .rating-delta.down { color: #ff9a85; }

@media (max-width: 560px) {
  .game-bottom .left .ctrl-btn span, .game-bottom .right .ctrl-btn span { display: none; }
  .game-bottom .ctrl-btn { width: 46px; min-width: 46px; padding: 0; }
  .fair-badge span { display: none; }
  .fair-badge { padding: 3px 8px; }
}
[hidden] { display: none !important; }
.t-club i { background: #dcc8a6; border-color: #4a2a18; }
.t-club i::before { background: linear-gradient(180deg, #fbf4e6, #f2e7d2); } .t-club i::after { background: linear-gradient(180deg, #b4493a, #9d3a2d); }
.t-modern i { background: #faf7f0; border-color: #e9e2d3; }
.t-modern i::before { background: #d8d0bf; } .t-modern i::after { background: #5b7a8c; }
.t-night i { background: #2a3038; border-color: #1f232b; }
.t-night i::before { background: #4b5563; } .t-night i::after { background: #c08a3e; }
.themes { grid-template-columns: repeat(4, 1fr); }

/* Dürüst zar sayfası */
.dice-stats p { margin: 6px 0; }
.dbars { display: grid; gap: 4px; margin: 6px 0 2px; }
.dbar { display: grid; grid-template-columns: 18px 1fr 52px; align-items: center; gap: 8px; font-size: 13px; }
.dbar .bar { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .25); overflow: hidden; }
.dbar .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.dbar .val { text-align: right; font-variant-numeric: tabular-nums; }
.fair-details { margin-top: 12px; font-size: 13px; }
.fair-details summary { cursor: pointer; color: var(--gold-light); font-weight: 600; }
.fair-last { min-height: 20px; font-weight: 600; }
.fair-last.ok, .fair-line.ok { color: #b8ffbf; } .fair-last.fail, .fair-line.fail { color: #ffb3a7; }
.fair-line { font-weight: 600; margin: 6px 0; }
#fairdice .btn.big { margin-top: 10px; }
html.ui-modern .fair-last.ok, html.ui-modern .fair-line.ok { color: #1f8f42; }
html.ui-modern .dbar .bar { background: #eee6d6; }

/* Günün bulmacası */
.daily-status { font-weight: 700; font-size: 16px; margin: 4px 0 8px; }
.daily-streak { color: var(--gold-light); font-weight: 600; margin: 10px 0 0; }
#daily .btn.big { margin-top: 6px; }
html.ui-modern .daily-streak { color: #8a6224; }