:root {
  color-scheme: dark;
  --ink: #f7f1dc;
  --muted: #aebcc2;
  --gold: #e4bd68;
  --gold-hi: #ffe5a5;
  --teal: #46d6c1;
  --navy: #07151b;
  --navy-deep: #040b0f;
  --line: rgba(238, 197, 106, .2);
  --light-square: #e7c78f;
  --dark-square: #8a5735;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy-deep); }
body {
  min-height: 100vh; margin: 0; color: var(--ink);
  background: linear-gradient(180deg, rgba(3, 12, 16, .38), rgba(3, 12, 16, .92)), url("/static/assets/arena-felt.png") center top / max(720px, 100vw) auto fixed, var(--navy-deep);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100%, 690px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 28px; }
.topbar { display: flex; align-items: center; gap: 11px; padding: 4px 2px 18px; }
.brand-mark { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid rgba(242, 204, 112, .64); border-radius: 13px; color: var(--gold-hi); font: 27px Georgia, serif; background: linear-gradient(145deg, #24414a, #07161b); box-shadow: inset 0 1px #ffffff22, 0 8px 22px #0005; }
.eyebrow { margin: 0; color: #cda85d; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
h1, h2, p { margin-top: 0; }
h1 { margin: 1px 0 0; font: 700 22px/1.05 Georgia, "Times New Roman", serif; letter-spacing: .01em; }
h2 { margin: 1px 0 0; color: #fff7e6; font: 700 20px/1.15 Georgia, "Times New Roman", serif; }
.online-dot { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px #46d6c121, 0 0 16px var(--teal); }

.welcome-card, .game-lounge, .arena-actions { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(19, 52, 60, .92), rgba(5, 24, 31, .94)); box-shadow: 0 18px 50px #0006, inset 0 1px #ffffff12; }
.welcome-card { display: flex; justify-content: space-between; align-items: center; min-height: 74px; margin-bottom: 14px; padding: 14px 17px; }
#identity { margin: 2px 0 0; color: #f4ead0; font-size: 15px; font-weight: 600; }
.welcome-glyph { color: var(--gold); font-size: 34px; text-shadow: 0 0 22px #e4bd6888; }
.game-lounge { padding: 18px 14px 14px; }
.section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 4px 14px; }
.section-heading.compact { padding-bottom: 12px; }
.ai-badge { border: 1px solid #48cdb878; border-radius: 20px; padding: 5px 9px; color: #82f1df; background: #47c8b518; font-size: 11px; font-weight: 700; white-space: nowrap; }

.game-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
.game-tab { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 70px; border: 1px solid #c59e5142; border-radius: 15px; color: #ecdfc1; background: linear-gradient(160deg, #1a3b45, #0b222a); font-size: 12px; font-weight: 750; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.game-tab:active { transform: scale(.97); }
.game-tab .tab-icon { color: var(--gold-hi); font: 25px/1 Georgia, serif; }
.game-tab.active { border-color: var(--gold-hi); color: #fff7e4; background: linear-gradient(160deg, #31515a, #14353d); box-shadow: inset 0 0 0 1px #f8d27a55, 0 6px 18px #0005; }

.table-stage { overflow: hidden; border: 1px solid #e6c17061; border-radius: 18px; padding: 12px; background: linear-gradient(145deg, #0a252d, #06171d); box-shadow: inset 0 1px #ffffff12, inset 0 0 35px #0007; }
.table-stage.preview-mode { border-color: #e4bd689e; box-shadow: inset 0 1px #ffffff12, inset 0 0 35px #0007, 0 0 0 1px #e4bd6838; }
.stage-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 46px; }
.game-title { display: block; color: #f9e9bf; font: 700 17px/1.1 Georgia, serif; }
#game-status { max-width: 390px; margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.icon-button { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #d9b86b55; border-radius: 11px; color: var(--gold-hi); background: #ffffff0d; font-size: 21px; }
.board { width: min(100%, 540px); margin: 10px auto 0; user-select: none; }
.table-footnote { margin: 10px 0 1px; color: #8ca9ad; text-align: center; font-size: 11px; }.spark { color: var(--gold); }

.grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; overflow: hidden; border: 7px solid #3a241a; border-radius: 12px; background: #3a241a; box-shadow: 0 0 0 1px #f2cf8161, 0 14px 28px #0009, inset 0 0 0 1px #160d09; }
.square { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; aspect-ratio: 1; border: 0; border-radius: 0; padding: 0; overflow: hidden; background: var(--light-square); }.square.dark { background: var(--dark-square); }
.square::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, #ffffff16, transparent 45%, #00000019); pointer-events: none; }
.square.selected { z-index: 1; box-shadow: inset 0 0 0 4px #ffe078, inset 0 0 22px #fff2a48f; }
.piece { position: relative; z-index: 1; font: clamp(30px, 10vw, 63px)/.9 "Times New Roman", Georgia, serif; transform: translateY(-1px); }
.piece.white-piece { color: #fff7dd; text-shadow: 0 1px #57341e, 0 2px #57341e, 0 3px 3px #0009, 0 0 1px #5c3921; }.piece.black-piece { color: #142128; text-shadow: 0 1px #e4ba6a5c, 0 2px 2px #0009; }
.coord-rank, .coord-file { position: absolute; z-index: 2; font: 700 9px/1 ui-monospace, monospace; opacity: .7; pointer-events: none; }.coord-rank { top: 3px; left: 4px; color: #6a4027; }.dark .coord-rank { color: #f5d291; }.coord-file { right: 4px; bottom: 3px; color: #6a4027; }.dark .coord-file { color: #f5d291; }
.checker-piece { position: relative; z-index: 1; width: 66%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 5px 6px #ffffff35, inset 0 -5px 7px #0008, 0 3px 2px #0008; }.checker-piece.white-piece { border: 2px solid #6e4430; background: radial-gradient(circle at 36% 27%, #fffbe9 0 13%, #e3bf80 42%, #8d5738 100%); }.checker-piece.black-piece { border: 2px solid #390f19; background: radial-gradient(circle at 36% 27%, #f5746c 0 8%, #b43243 40%, #4f1020 100%); }
.checker-piece.king::after { content: "♛"; position: absolute; inset: 0; display: grid; place-items: center; color: #fce5a5; font: 700 clamp(17px, 5vw, 31px)/1 Georgia, serif; text-shadow: 0 2px #4c161a; }

.backgammon-shell { overflow: hidden; border: 7px solid #402518; border-radius: 13px; background: #3a2118; box-shadow: 0 0 0 1px #f0cb7b5c, 0 14px 28px #0009; }.dice { display: flex; justify-content: center; gap: 7px; align-items: center; margin: 0; padding: 9px; color: #f7e7bf; background: #1f383c; font-weight: 750; font-size: 12px; }.die { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #412720; background: #f6dfab; box-shadow: inset 0 -2px #b58a50, 0 2px #0006; font: 800 15px Georgia, serif; }
.backgammon { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); min-width: 0; aspect-ratio: 1.5 / 1; padding: 6px; background: linear-gradient(145deg, #7a4630, #3c2118); }.backgammon-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) clamp(20px, 6vw, 32px) repeat(6, minmax(0, 1fr)); min-height: 0; }.point { position: relative; min-width: 0; min-height: 0; border: 0; border-radius: 0; padding: 0; color: #261612; background: none; overflow: hidden; }.point::before { content: ""; position: absolute; z-index: 0; top: 0; right: 1px; left: 1px; height: 86%; opacity: .96; background: #e7c784; clip-path: polygon(7% 0, 93% 0, 50% 100%); }.point.point-dark::before { background: #7b3340; }.point.bottom::before { top: auto; bottom: 0; clip-path: polygon(50% 0, 93% 100%, 7% 100%); }.point.selected { z-index: 2; box-shadow: inset 0 0 0 2px #ffe078, inset 0 0 17px #fff2a477; }.point.legal-target { z-index: 2; background: radial-gradient(circle at center, #ffe17a88 0 18%, transparent 20%); }.point.legal-target::after { content: ""; position: absolute; z-index: 3; top: 50%; left: 50%; width: min(66%, 25px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid #ffe17a; border-radius: 50%; box-shadow: 0 0 0 3px #4c331866, 0 0 14px #ffe17a99; pointer-events: none; }.point-number { position: absolute; z-index: 4; top: 3px; left: 50%; transform: translateX(-50%); color: #fff0c7; font: 700 8px/1 ui-monospace, monospace; text-shadow: 0 1px #000; }.point.bottom .point-number { top: auto; bottom: 3px; }.target-cue { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff1bc; font: 800 8px/1 ui-sans-serif, system-ui, sans-serif; text-shadow: 0 1px #3b2115; pointer-events: none; }.point-stack { position: absolute; z-index: 2; top: 5px; left: 50%; display: flex; flex-direction: column; align-items: center; width: 88%; transform: translateX(-50%); }.point.bottom .point-stack { top: auto; bottom: 5px; flex-direction: column-reverse; }.backgammon-checker { display: grid; place-items: center; width: min(100%, 28px); aspect-ratio: 1; margin-top: -36%; border: 1px solid #704625; border-radius: 50%; color: #3f251e; background: radial-gradient(circle at 36% 27%, #fffdf1 0 12%, #e9c486 44%, #9b613a 100%); box-shadow: inset 0 2px #fff8, inset 0 -3px #8b5c3b, 0 2px 2px #0008; font-size: 10px; font-weight: 900; }.backgammon-checker:first-child { margin-top: 0; }.backgammon-checker.black { color: #fae7bb; border-color: #071619; background: radial-gradient(circle at 36% 27%, #71969a 0 10%, #2d545a 43%, #0a1a1d 100%); box-shadow: inset 0 2px #8aacad, inset 0 -3px #051317, 0 2px 2px #0008; }.board-bar { position: relative; display: grid; place-items: center; min-width: 0; background: linear-gradient(90deg, #2b180f, #7a492a 35%, #392015 72%); box-shadow: inset 1px 0 #d3a26542, inset -1px 0 #120904aa; }.board-bar .backgammon-checker { width: 82%; margin: 0; }.board-bar::after { content: "БАР"; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%) rotate(-90deg); color: #f1cc83a8; font-size: 7px; font-weight: 800; letter-spacing: .08em; }

.arena-actions { margin-top: 14px; padding: 17px 16px; }.action-row { display: flex; gap: 9px; }.gold-button, .ghost-button { min-height: 45px; border-radius: 13px; font-size: 13px; font-weight: 800; }.gold-button { flex: 1; border: 1px solid #ffe2a282; color: #172229; background: linear-gradient(135deg, #f7d98b, #c4933e); box-shadow: inset 0 1px #fff7db, 0 8px 18px #0006; }.gold-button span { margin-right: 4px; font-size: 17px; }.gold-button b { margin-left: 3px; white-space: nowrap; }.ghost-button { padding: 0 14px; border: 1px solid #d8b66b5c; color: #f1ddaf; background: #ffffff0b; }.hint { margin: 11px 0; color: var(--muted); font-size: 11px; }.tournament { border-top: 1px solid #e7c4742b; padding: 12px 0 2px; }.tournament strong { color: #fff3d5; font: 700 16px/1.2 Georgia, serif; }.tournament p { margin: 5px 0 10px; color: var(--muted); font-size: 12px; }.tournament button { min-height: 35px; border: 1px solid #53d5c26e; border-radius: 10px; padding: 0 12px; color: #d3fff7; background: #2bb09d26; font-weight: 750; } footer { margin: 18px 12px 0; color: #8ba5aa; text-align: center; font-size: 10px; }
@media (min-width: 560px) { .app-shell { padding-left: 22px; padding-right: 22px; }.game-lounge { padding: 20px; }.table-stage { padding: 16px; } }
@media (max-width: 360px) { .app-shell { padding-left: 10px; padding-right: 10px; }.game-lounge { padding: 14px 10px 10px; }.piece { font-size: clamp(26px, 10vw, 50px); }.table-stage { padding: 9px; } }