/* ─── Теми: всяка е набор променливи върху body[data-theme]. По подразбиране — „Санторини“. ─── */
:root, body[data-theme="santorini"] {
  --bg: #e9e5db; --bg2: #d9d3c4;
  --panel: #f7f4ed; --panel-edge: #c9ad6a;
  --text: #1f2f52; --muted: #5d6b86;
  --accent: #1f3f7a; --accent-text: #f7f1e2; --gold: #b8964f;
  --btn: #efeae0; --btn-edge: #cfc3a6;
  --frame: #f2eee5; --frame-edge: #c9ad6a;
  --field: #f8f6f0; --middle: #eef1f4;
  --pt-light: #fcfbf8; --pt-dark: #2f5ea8; --pt-edge: rgba(47,94,168,.35);
  --bar: #dcd7c9; --tray: #e5e0d3;
  --w: #f3eee2; --w-stroke: #c2b799; --b: #1e3f7c; --b-stroke: #0f2452;
  --sel: #e0a458; --target: #4cc07a;
  --die-w: #fbfaf6; --die-w-pip: #1e3f7c; --die-w-edge: #b9b1a0;
  --die-b: #1e3f7c; --die-b-pip: #f5f0e4; --die-b-edge: #0f2452;
  --cube: #fbfaf6; --cube-text: #1f2f52; --cube-edge: #b9b1a0;
  --pnum: rgba(31,47,82,.45); --count: #1f2f52; --overlay: rgba(31,47,82,.55);
  --tex-opacity: .35;
  color-scheme: light;
}
body[data-theme="marble"] {
  --bg: #0b0b0d; --bg2: #151518; --panel: #16161a; --panel-edge: #8f7a45; --text: #efe6d2; --muted: #a89a80;
  --accent: #c9a961; --accent-text: #15120a; --gold: #c9a961; --btn: #26231d; --btn-edge: #4a4031;
  --frame: #141417; --frame-edge: #b8964f; --field: #1c1c21; --middle: #1c1c21;
  --pt-light: #b89a5a; --pt-dark: #2b2b31; --pt-edge: rgba(184,150,79,.25); --bar: #0f0f12; --tray: #111114;
  --w: #efe6d2; --w-stroke: #c9b78e; --b: #151518; --b-stroke: #b8964f;
  --sel: #ffd166; --target: #6fdc8c;
  --die-w: #efe6d2; --die-w-pip: #15120a; --die-w-edge: #b8a77e; --die-b: #1b1b1f; --die-b-pip: #c9a961; --die-b-edge: #b8964f;
  --cube: #c9a961; --cube-text: #15120a; --cube-edge: #8f742f; --pnum: rgba(239,230,210,.35); --count: #fff; --overlay: rgba(0,0,0,.65);
  --tex-opacity: .5; color-scheme: dark;
}
body[data-theme="walnut"] {
  --bg: #1e150e; --bg2: #2a1c12; --panel: #2b1d12; --panel-edge: #8a6a3a; --text: #f1e7d6; --muted: #b39b80;
  --accent: #e0a458; --accent-text: #1e150e; --gold: #c9a961; --btn: #3b2818; --btn-edge: #5a3f2a;
  --frame: #5a3a21; --frame-edge: #a5884a; --field: #8b5a2b; --middle: #86562a;
  --pt-light: #d9b77c; --pt-dark: #6f4123; --pt-edge: rgba(0,0,0,.2); --bar: #3d2716; --tray: #4a3019;
  --w: #f3e9d6; --w-stroke: #b8a184; --b: #3a2314; --b-stroke: #1d1109;
  --sel: #ffd166; --target: #7be495;
  --die-w: #f7f1e4; --die-w-pip: #1e150e; --die-w-edge: #a08e76; --die-b: #3a2314; --die-b-pip: #f1e7d6; --die-b-edge: #1d1109;
  --cube: #f5f0e6; --cube-text: #1e150e; --cube-edge: #8a7a66; --pnum: rgba(255,255,255,.35); --count: #fff; --overlay: rgba(0,0,0,.6);
  --tex-opacity: .55; color-scheme: dark;
}
body[data-theme="forest"] {
  --bg: #0c1611; --bg2: #14241b; --panel: #16261d; --panel-edge: #8f7a45; --text: #ece4cf; --muted: #9fb3a2;
  --accent: #c9a961; --accent-text: #0c1611; --gold: #c9a961; --btn: #21362a; --btn-edge: #3a5a46;
  --frame: #142219; --frame-edge: #b8964f; --field: #1f3a2b; --middle: #1c3427;
  --pt-light: #c9b27a; --pt-dark: #122619; --pt-edge: rgba(201,178,122,.2); --bar: #0f1c14; --tray: #142419;
  --w: #efe6d2; --w-stroke: #c9b78e; --b: #2f6b4a; --b-stroke: #1b4430;
  --sel: #ffd166; --target: #8ee6a4;
  --die-w: #efe6d2; --die-w-pip: #0c1611; --die-w-edge: #b8a77e; --die-b: #1f3a2b; --die-b-pip: #efe6d2; --die-b-edge: #c9a961;
  --cube: #c9a961; --cube-text: #0c1611; --cube-edge: #8f742f; --pnum: rgba(236,228,207,.35); --count: #fff; --overlay: rgba(0,0,0,.65);
  --tex-opacity: .5; color-scheme: dark;
}
body[data-theme="royal"] {
  --bg: #1f0709; --bg2: #2e0c10; --panel: #35100f; --panel-edge: #b08a4a; --text: #f4e6cf; --muted: #c9a48f;
  --accent: #d9b76a; --accent-text: #2a0b0e; --gold: #d9b76a; --btn: #4a1a17; --btn-edge: #7a3a2e;
  --frame: #4a1218; --frame-edge: #d4b06a; --field: #7d1f27; --middle: #74202a;
  --pt-light: #d4b06a; --pt-dark: #4a1218; --pt-edge: rgba(212,176,106,.25); --bar: #3a0e13; --tray: #451116;
  --w: #f4e6cf; --w-stroke: #c9b08a; --b: #5a1620; --b-stroke: #2c0a10;
  --sel: #ffd166; --target: #8ee6a4;
  --die-w: #f4e6cf; --die-w-pip: #2a0b0e; --die-w-edge: #b8a07a; --die-b: #5a1620; --die-b-pip: #d9b76a; --die-b-edge: #d4b06a;
  --cube: #d9b76a; --cube-text: #2a0b0e; --cube-edge: #9a7b3a; --pnum: rgba(244,230,207,.35); --count: #fff; --overlay: rgba(0,0,0,.65);
  --tex-opacity: .5; color-scheme: dark;
}
body[data-theme="graphite"] {
  --bg: #08080a; --bg2: #141416; --panel: #141416; --panel-edge: #5a5a62; --text: #f2f2f2; --muted: #9a9aa2;
  --accent: #e6e6ea; --accent-text: #0b0b0c; --gold: #c9c9cc; --btn: #1f1f23; --btn-edge: #3a3a40;
  --frame: #151517; --frame-edge: #7a7a82; --field: #202024; --middle: #1d1d21;
  --pt-light: #c9c9cc; --pt-dark: #3a3a3e; --pt-edge: rgba(255,255,255,.12); --bar: #0e0e10; --tray: #121214;
  --w: #f2f2f2; --w-stroke: #b9b9bd; --b: #111113; --b-stroke: #6a6a72;
  --sel: #ffd166; --target: #7be495;
  --die-w: #f2f2f2; --die-w-pip: #111113; --die-w-edge: #b9b9bd; --die-b: #1b1b1e; --die-b-pip: #f2f2f2; --die-b-edge: #6a6a72;
  --cube: #f2f2f2; --cube-text: #111113; --cube-edge: #8a8a90; --pnum: rgba(255,255,255,.35); --count: #fff; --overlay: rgba(0,0,0,.65);
  --tex-opacity: .45; color-scheme: dark;
}

body[data-theme="parchment"] {
  --bg: #d9c7a3; --bg2: #c8b48c; --panel: #efe3c6; --panel-edge: #9a7b4a; --text: #3b2a14; --muted: #7a6242;
  --accent: #7a3e1d; --accent-text: #f7ecd4; --gold: #9a7b4a; --btn: #e6d7b5; --btn-edge: #b89c6e;
  --frame: #e9dcbb; --frame-edge: #9a7b4a; --field: #f2e8cf; --middle: #eadfc2;
  --pt-light: #f6efdb; --pt-dark: #8b5a2b; --pt-edge: rgba(90,60,20,.3); --bar: #c9b48c; --tray: #d6c39d;
  --w: #f6f0dc; --w-stroke: #b39d6c; --b: #4a2e14; --b-stroke: #2a1808;
  --sel: #c0392b; --target: #4c9a5a;
  --die-w: #f8f2e0; --die-w-pip: #3b2a14; --die-w-edge: #b39d6c; --die-b: #4a2e14; --die-b-pip: #f6f0dc; --die-b-edge: #2a1808;
  --cube: #f8f2e0; --cube-text: #3b2a14; --cube-edge: #9a7b4a; --pnum: rgba(59,42,20,.45); --count: #3b2a14; --overlay: rgba(59,42,20,.55);
  --tex-opacity: .5; color-scheme: light;
}
body[data-theme="sea"] {
  --bg: #0f5f6b; --bg2: #0b4650; --panel: #14717f; --panel-edge: #f4c26b; --text: #f3fbfb; --muted: #b7dfe3;
  --accent: #ff7a59; --accent-text: #fff; --gold: #f4c26b; --btn: #1a8593; --btn-edge: #2aa4b3;
  --frame: #0e5c68; --frame-edge: #f4c26b; --field: #e8f6f5; --middle: #d7efee;
  --pt-light: #ffffff; --pt-dark: #1fa3b5; --pt-edge: rgba(15,95,107,.35); --bar: #bfe3e2; --tray: #cdeceb;
  --w: #fff7ea; --w-stroke: #d9c39a; --b: #ff7a59; --b-stroke: #b84a30;
  --sel: #f4c26b; --target: #59d98c;
  --die-w: #ffffff; --die-w-pip: #0f5f6b; --die-w-edge: #b9d2d2; --die-b: #ff7a59; --die-b-pip: #fff; --die-b-edge: #b84a30;
  --cube: #ffffff; --cube-text: #0f5f6b; --cube-edge: #b9d2d2; --pnum: rgba(15,95,107,.5); --count: #0f5f6b; --overlay: rgba(11,70,80,.6);
  --tex-opacity: .3; color-scheme: dark;
}
body[data-theme="neon"] {
  --bg: #07060f; --bg2: #0f0c22; --panel: #130f2a; --panel-edge: #7c3aed; --text: #f2ecff; --muted: #a897d6;
  --accent: #22d3ee; --accent-text: #06111a; --gold: #f0abfc; --btn: #1c1640; --btn-edge: #3b2f78;
  --frame: #0d0a1f; --frame-edge: #22d3ee; --field: #141033; --middle: #120e2e;
  --pt-light: #f0abfc; --pt-dark: #312e81; --pt-edge: rgba(34,211,238,.35); --bar: #09071a; --tray: #0f0c26;
  --w: #f2ecff; --w-stroke: #22d3ee; --b: #1a1040; --b-stroke: #f0abfc;
  --sel: #facc15; --target: #4ade80;
  --die-w: #f2ecff; --die-w-pip: #7c3aed; --die-w-edge: #22d3ee; --die-b: #1a1040; --die-b-pip: #f0abfc; --die-b-edge: #f0abfc;
  --cube: #facc15; --cube-text: #06111a; --cube-edge: #a16207; --pnum: rgba(242,236,255,.4); --count: #fff; --overlay: rgba(7,6,15,.7);
  --tex-opacity: .25; color-scheme: dark;
}
body[data-theme="neon"] .checker.w, body[data-theme="neon"] .checker.b { filter: drop-shadow(0 0 4px var(--frame-edge)); }
body[data-theme="neon"] .point.light { filter: drop-shadow(0 0 3px rgba(240,171,252,.5)); }

/* ─── Основа ─── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { --serif: 'Cinzel', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
        --body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
        --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--ui); -webkit-tap-highlight-color: transparent; }
html { height: 100%; background: var(--bg); overflow-x: clip; }
body { min-height: 100dvh; overscroll-behavior-x: none; position: relative; overflow-x: clip;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--panel) 40%, transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.014' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.33 0 0 0 0 0.3 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment: fixed; }

/* Маслинови клонки по ъглите — само в лобито и на широк екран */
.olive { position: fixed; pointer-events: none; z-index: 0; width: min(38vw, 250px); opacity: .95; display: none; }
.olive.tl { top: 6px; left: 4px; transform: scaleY(-1); }
.olive.tr { top: 6px; right: 4px; transform: scaleY(-1); }
.olive.bl { bottom: 4px; left: 4px; }
.olive.br { bottom: 4px; right: 4px; }
body.in-lobby .olive { display: block; }
body[data-theme]:not([data-theme="santorini"]) .olive { opacity: .55; filter: sepia(.4) saturate(.7); }

.screen { max-width: 560px; margin: 0 auto; padding: 12px 14px 20px; position: relative; z-index: 1; }

/* ─── Лоби ─── */
.hero { text-align: center; padding: 22px 0 6px; }
.hero h1 { font-family: var(--serif); font-weight: 700; font-size: 54px; letter-spacing: 6px; margin: 2px 0; color: var(--text);
  text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.motto { font-family: var(--serif); font-weight: 500; letter-spacing: 4px; text-transform: uppercase; font-size: 12px; color: var(--muted); }
.rule-line { width: 120px; height: 1px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.foot-motto { font-family: var(--serif); text-align: center; letter-spacing: 3px; text-transform: uppercase; font-size: 11px; color: var(--muted); margin: 18px 0 6px; }
h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; }
.card { position: relative; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px; padding: 16px; margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), inset 0 0 0 1px color-mix(in srgb, var(--panel) 60%, #fff); }
.card::after { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--panel-edge) 45%, transparent); border-radius: 12px; pointer-events: none; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > input, .row > select { flex: 1; min-width: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; }
.field { display: block; margin: 8px 0 16px; color: var(--muted); font-size: 13px; }
.field > span { font-family: var(--serif); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; }
.field input { display: block; width: 100%; margin-top: 6px; }
.name-field input { font-family: var(--body); font-size: 22px; font-weight: 600; text-align: center; letter-spacing: 1px;
  background: transparent; border: 0; border-bottom: 1px solid var(--panel-edge); border-radius: 0; padding: 8px 6px; }
.name-field input:focus { outline: none; border-bottom-color: var(--accent); }
.opt { margin-bottom: 12px; }
.opt-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 10px; align-items: baseline; }
.seg { display: flex; border: 1px solid var(--btn-edge); border-radius: 12px; overflow: hidden; background: var(--btn); }
.seg button { flex: 1; border: 0; border-radius: 0; background: transparent; min-height: 42px; padding: 8px 6px; font-size: 15px; font-weight: 600; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--btn-edge); }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.switch { width: 54px; height: 30px; min-height: 30px; padding: 0; border-radius: 15px; background: var(--btn); border: 1px solid var(--btn-edge); position: relative; }
.switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: left .18s, background .18s; }
.switch.on { background: color-mix(in srgb, var(--accent) 35%, var(--btn)); border-color: var(--accent); }
.switch.on span { left: 27px; background: var(--accent); }

input, select { font: inherit; font-size: 17px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--btn-edge);
  background: var(--panel); color: var(--text); }
#code { font-family: var(--serif); text-transform: uppercase; letter-spacing: 6px; font-weight: 700; text-align: center; }
button { font: inherit; font-size: 16px; font-weight: 600; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--btn-edge);
  background: var(--btn); color: var(--text); cursor: pointer; min-height: 46px; transition: transform .08s, filter .12s; }
button.primary { font-family: var(--serif); letter-spacing: 1.5px; text-transform: uppercase; font-size: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); color: var(--accent-text); border-color: var(--gold);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
button:active { transform: translateY(1px); filter: brightness(.95); }
button[disabled] { opacity: .45; cursor: default; }
button.icon { min-width: 42px; min-height: 42px; padding: 6px; font-size: 18px; line-height: 1; border-radius: 50%; }
button.wide { width: 100%; }
.msg { color: var(--muted); text-align: center; min-height: 1.2em; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--btn-edge);
  background: var(--btn); color: var(--text); font-size: 12px; cursor: pointer; min-height: 0; }
.theme-chip svg { width: 100%; height: auto; border-radius: 6px; }
.theme-chip.on { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ─── Игра: дъската на цял екран, всичко друго в менюто ─── */
#game { position: relative; z-index: 1; min-height: var(--app-h, 100dvh); display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; min-height: 56px; }
.tb-center { flex: 1; min-width: 0; text-align: center; }
.tb-line1 { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.tb-player { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 40%; }
.tb-player span:not(.dot) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-player.turn span:not(.dot) { color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.tb-score { font-variant-numeric: tabular-nums; letter-spacing: 1px; font-size: 17px; }
.tb-line2 { font-family: var(--body); font-weight: 600; font-size: 16px; color: var(--muted); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #8a8a8a; display: inline-block; flex: none; }
.dot.on { background: #4cc07a; }
.dot.turn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.pips { color: var(--muted); font-size: 12px; white-space: nowrap; font-family: var(--serif); letter-spacing: 1px; }
button.menu { position: relative; font-size: 22px; }
.badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: #d9534f; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; }

#stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 6px calc(8px + env(safe-area-inset-bottom)); min-height: 0; }
#board-wrap { position: relative; width: 100%; max-width: min(100%, calc((var(--app-h, 100dvh) - 80px) * 0.8)); margin: 0 auto; }
#board { width: 100%; height: auto; display: block; touch-action: manipulation; user-select: none; overflow: visible;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28)); }

/* Балонче за чата над дъската */
.bubble { position: absolute; left: 50%; transform: translateX(-50%); max-width: 80%; background: var(--panel); color: var(--text); border: 1px solid var(--panel-edge);
  border-radius: 16px; padding: 8px 14px; font-family: var(--body); font-weight: 600; font-size: 17px; box-shadow: 0 8px 20px rgba(0,0,0,.3); z-index: 3;
  animation: rise .2s ease-out; pointer-events: none; }
.bubble b { font-family: var(--serif); font-size: 12px; letter-spacing: 1px; color: var(--muted); display: block; margin-bottom: 2px; }
.bubble.top { top: 34%; }
.bubble.bottom { bottom: 34%; }
.bubble::after { content: ''; position: absolute; left: 50%; width: 12px; height: 12px; background: var(--panel); border: 1px solid var(--panel-edge); border-width: 0 1px 1px 0; }
.bubble.top::after { top: -7px; transform: translateX(-50%) rotate(-135deg); }
.bubble.bottom::after { bottom: -7px; transform: translateX(-50%) rotate(45deg); }

/* Страничното меню */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 6; animation: fadein .2s; }
.drawer { position: fixed; top: 0; right: 0; height: var(--app-h, 100dvh); width: min(88vw, 380px); background: var(--panel); border-left: 1px solid var(--panel-edge);
  box-shadow: -12px 0 40px rgba(0,0,0,.35); z-index: 7; transform: translateX(105%); transition: transform .25s ease, visibility 0s linear .25s; visibility: hidden; overflow-y: auto;
  padding: calc(8px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); }
.drawer.open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.drawer-head .motto { font-size: 14px; letter-spacing: 5px; color: var(--text); }
.dsec { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--panel-edge) 45%, transparent); }
.dsec .row button { flex: 1; min-width: 0; padding: 10px 8px; font-size: 15px; }
.dplayers { display: flex; flex-direction: column; gap: 6px; }
.dp { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 700; }
.dp .pips { margin-left: auto; }
.dsmall { color: var(--muted); font-size: 13px; margin-top: 8px; }
.code { font-family: var(--serif); letter-spacing: 4px; font-size: 18px; color: var(--text); }
.chat-log { max-height: 34dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 4px 2px; }
.chat-log .m { max-width: 85%; padding: 6px 10px; border-radius: 12px; background: var(--btn); border: 1px solid var(--btn-edge); font-size: 15px; align-self: flex-start; }
.chat-log .m.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, var(--btn)); }
.chat-log .m b { font-family: var(--serif); font-size: 11px; letter-spacing: 1px; color: var(--muted); display: block; }
#chat-form input { flex: 1; min-width: 0; }
#chat-form button { padding: 10px 12px; }

@media (min-width: 900px) and (min-aspect-ratio: 5/6) {
  .drawer { width: 400px; }
  body.in-game .olive { display: block; opacity: .6; }
}

/* Дъска */
.frame { fill: var(--frame); }
.frame-tex { opacity: var(--tex-opacity); mix-blend-mode: multiply; pointer-events: none; }
.halo { pointer-events: none; animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.frame-edge { fill: none; stroke: var(--frame-edge); stroke-width: 2.2; }
.frame-edge.thin { stroke-width: .8; opacity: .8; }
.field { fill: var(--field); }
.field-tex { opacity: calc(var(--tex-opacity) * .5); mix-blend-mode: multiply; pointer-events: none; }
.middle { fill: var(--middle); }
.bar { fill: var(--bar); }
.tray { fill: var(--tray); }
.tray.target { fill: var(--target); fill-opacity: .35; stroke: var(--target); stroke-width: 3; animation: pulse 1.1s ease-in-out infinite; }
.point { stroke: var(--pt-edge); stroke-width: 1; transition: fill .15s; }
.point.light { fill: var(--pt-light); }
.point.dark { fill: var(--pt-dark); }
.point.target { fill: var(--target); fill-opacity: .85; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { fill-opacity: .55; } 50% { fill-opacity: .95; } }
.pnum { fill: var(--pnum); font-size: 9px; font-family: var(--serif); }
.chk { filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); transition: transform .12s ease; }
.checker.w { fill: var(--w); stroke: var(--w-stroke); stroke-width: 1.4; }
.checker.b { fill: var(--b); stroke: var(--b-stroke); stroke-width: 1.4; }
.rim { fill: none; stroke: rgba(0,0,0,.22); stroke-width: 1.6; }
.chk.w .rim { stroke: rgba(120,100,60,.28); } .chk.b .rim { stroke: rgba(0,0,0,.4); }
.ring { fill: none; stroke: rgba(0,0,0,.14); stroke-width: 1; }
.chk.w .ring { stroke: rgba(0,0,0,.13); } .chk.b .ring { stroke: rgba(255,255,255,.16); }
.gloss { pointer-events: none; }
.chk.pinned { opacity: .6; } .checker.pinned { stroke-dasharray: 3 3; }
.checker.src { stroke: var(--sel); stroke-width: 2.4; }
.chk.sel { transform: scale(1.14); filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)) drop-shadow(0 0 6px var(--sel)); }
.checker.sel { stroke: var(--sel); stroke-width: 3.5; }
.chk.flying { filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); transform: scale(1.08); }
.chk.ghost { opacity: .45; filter: none; pointer-events: none; animation: ghost 1.2s ease-in-out infinite; }
.chk.ghost .checker { stroke-dasharray: 4 3; stroke: var(--sel); }
@keyframes ghost { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
.coin circle { fill: var(--gold); stroke: rgba(0,0,0,.35); stroke-width: 1; }
.coin text { fill: #1e150e; font-family: var(--serif); font-weight: 800; font-size: 10px; }
svg.intro .chk { animation: drop .5s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes drop { from { transform: translateY(-40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.count { fill: var(--count); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; font-family: var(--ui); }
.count.on-w { fill: #1e150e; stroke: none; }
.count.on-b { fill: #fff; stroke: none; }
.offchip.w { fill: var(--w); stroke: var(--w-stroke); stroke-width: 1; }
.offchip.b { fill: var(--b); stroke: var(--b-stroke); stroke-width: 1; }
.cube rect { fill: var(--cube); stroke: var(--cube-edge); stroke-width: 2; }
.cube text { fill: var(--cube-text); font-size: 15px; font-weight: 800; font-family: var(--serif); }
.cube { transition: transform .4s ease; }
.cube.offered { animation: cubeflip .8s ease-in-out; }
@keyframes cubeflip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(180deg) scale(1.25); } 100% { transform: rotateY(360deg) scale(1); } }
.cube.offered rect { stroke: var(--sel); stroke-width: 3; animation: glow 1s ease-in-out infinite; }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 2px var(--sel)); } 50% { filter: drop-shadow(0 0 9px var(--sel)); } }
.die { transition: transform .12s ease-out; }
.die .die-shadow { fill: rgba(0,0,0,.35); stroke: none; filter: blur(2px); }
.die.rolling .die-shadow { fill: rgba(0,0,0,.25); }
.spark line { stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: sparkle .7s ease-out forwards; }
@keyframes sparkle { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.burst circle { fill: var(--gold); }
.burst.off circle { fill: var(--target); }
.lastmoves { animation: fadein .35s ease-out; }
.pipn.fc { fill: var(--accent); }
.die.w rect { fill: var(--die-w); stroke: var(--die-w-edge); stroke-width: 1.4; }
.die.w circle { fill: var(--die-w-pip); }
.die.b rect { fill: var(--die-b); stroke: var(--die-b-edge); stroke-width: 1.4; }
.die.b circle { fill: var(--die-b-pip); }
.die rect.die-shade { stroke: none; pointer-events: none; }
.die.used { opacity: .78; filter: grayscale(.7) brightness(.92); }
.die.last { opacity: .6; }
.die.rolling { transition: none; }
.midart { opacity: .96; }
.hit { fill: transparent; }
.rollbtn { cursor: pointer; }
.actbtn { cursor: pointer; }
.actbtn rect { fill: var(--panel); stroke: var(--gold); stroke-width: 1.6; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.actbtn.primary rect { fill: var(--accent); }
.actbtn text { fill: var(--text); font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: 2px; pointer-events: none; }
.actbtn.primary text { fill: var(--accent-text); }
.rollbtn rect { fill: var(--accent); stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); animation: breathe 2.2s ease-in-out infinite; transform-origin: center; }
.rollbtn text { fill: var(--accent-text); font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: 3px; pointer-events: none; }
@keyframes breathe { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }

.status { text-align: center; min-height: 1.5em; margin: 2px 0; font-size: 16px; font-family: var(--body); font-weight: 600; font-size: 18px; }
.controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 48px; }
.controls button { min-width: 120px; }
.share { margin-top: 6px; }
.share p { margin: 0 0 8px; color: var(--muted); }
.share .hint { margin: 8px 0 0; font-size: 14px; }
.share b { font-family: var(--serif); letter-spacing: 4px; font-size: 20px; color: var(--text); }
.tiny { text-align: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.tiny a { color: var(--muted); }
.rules-link { color: var(--muted); font-size: 12px; }

.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 5;
  backdrop-filter: blur(3px); animation: fadein .2s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.panel { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 18px; padding: 24px; max-width: 400px; width: 100%; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: rise .25s ease-out; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel h2 { color: var(--text); font-size: 24px; text-transform: none; letter-spacing: 1px; margin-top: 6px; }
.panel p { color: var(--muted); font-family: var(--body); font-size: 18px; font-weight: 500; }
.panel button { width: 100%; margin-top: 8px; }
.panel.rules { text-align: left; max-width: 460px; max-height: 85dvh; overflow: auto; }
.panel.rules h2 { text-align: center; }
.panel.rules ul { padding-left: 18px; color: var(--text); font-size: 15px; line-height: 1.45; font-family: var(--ui); }
.panel.rules li { margin-bottom: 8px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--panel); color: var(--text);
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--panel-edge); font-size: 15px; max-width: 90vw; z-index: 10; animation: rise .2s ease-out; }

@media (max-height: 700px) and (max-width: 639px) {
  .hero { padding-top: 8px; } .hero h1 { font-size: 40px; }
  .olive { width: 30vw; }
}

/* Класация */
.rank-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rank-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 10px; background: var(--btn); border: 1px solid var(--btn-edge); font-size: 14px; }
.rank-row.me { outline: 2px solid var(--gold); }
.rank-row .n { font-family: var(--serif); font-weight: 700; color: var(--muted); }
.rank-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .r { font-family: var(--serif); font-weight: 700; }
.rank-row .s { color: var(--muted); font-size: 12px; white-space: nowrap; }
.rank-h2h { margin-top: 10px; font-size: 14px; }
.rank-h2h .t { font-family: var(--serif); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.rank-h2h .h { display: flex; justify-content: space-between; padding: 4px 2px; border-bottom: 1px solid color-mix(in srgb, var(--btn-edge) 60%, transparent); }
.rank-h2h .h b { font-family: var(--serif); }
#d-h2h b { font-family: var(--serif); font-size: 15px; color: var(--text); }

.hub-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-family: var(--serif); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text); text-decoration: none; padding: 9px 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5); margin: 2px 0 6px; }
.hub-link:hover { color: var(--accent); border-color: var(--accent); }
.hub-link:active { transform: translateY(1px); }

.pips .pipn { fill: var(--text); font-family: var(--serif); font-weight: 700; font-size: 14px; }
.pips .pipl { fill: var(--muted); font-family: var(--serif); font-size: 8px; letter-spacing: 1px; }

/* Моите стаи */
.rooms { display: flex; flex-direction: column; gap: 8px; }
.room-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--btn); border: 1px solid var(--btn-edge); }
.room-row b { font-family: var(--serif); letter-spacing: 2px; }
.room-row .s { color: var(--muted); font-size: 13px; }
.room-row .turn { color: var(--accent); font-weight: 700; }
.room-row button { padding: 8px 12px; min-height: 38px; font-size: 14px; }
.install { margin-top: 8px; text-align: center; }

/* Реакции */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--btn-edge); background: var(--btn); color: var(--text); font-size: 14px; min-height: 0; }
.react-pop { position: fixed; top: calc(60px + env(safe-area-inset-top)); right: 10px; z-index: 6; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px;
  padding: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.35); display: flex; flex-wrap: wrap; gap: 6px; max-width: min(92vw, 360px); animation: rise .18s ease-out; }
.react-pop .chip { font-size: 15px; }

/* История на ходовете */
.move-log { display: flex; flex-direction: column; gap: 4px; max-height: 26dvh; overflow-y: auto; font-size: 13px; }
.move-log .t { display: flex; gap: 8px; padding: 4px 6px; border-radius: 8px; background: var(--btn); }
.move-log .t b { font-family: var(--serif); min-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-log .t span { color: var(--muted); }

/* Настройки */
.pref { margin-bottom: 10px; gap: 10px; }
.pref > span { display: flex; flex-direction: column; font-size: 15px; }
.pref small { color: var(--muted); font-size: 12px; }

/* Последният ход на противника */
.lastmove { fill: none; stroke: var(--sel); stroke-width: 3; stroke-linecap: round; opacity: .85; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.lastmove-head { fill: var(--sel); }
.lastmove-dot { fill: var(--sel); opacity: .9; }

/* ─── Проход B: аватари, сегменти, меню-карти, bottom sheet ─── */
.avatars { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: -6px 0 14px; }
.avatars button { width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; background: var(--panel); }
.avatars button.on { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
.av { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; line-height: 1;
  background: var(--panel); border: 1.5px solid var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.25); flex: none; }
.av.sm { width: 30px; height: 30px; font-size: 16px; }
.av .dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid var(--bg); box-shadow: none; }
.tb-player { display: inline-flex; align-items: center; gap: 8px; max-width: 42%; }
.tb-player .pn { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tb-player.right .pn { align-items: flex-end; }
.tb-player .pn span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; font-size: 14px; }
.tb-player.turn .av { animation: avpulse 1.6s ease-in-out infinite; }
@keyframes avpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } }
.segs { display: inline-flex; gap: 3px; margin-top: 2px; }
.segs i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; display: inline-block; }
.segs i.on { background: var(--gold); }
.dot.warn { background: #e0a458; } .dot.off { background: #c9534f; }
.clockwrap { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 3px; }
.clock { height: 4px; width: 46%; background: color-mix(in srgb, var(--muted) 25%, transparent); border-radius: 2px; overflow: hidden; }
.clock i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width 1s linear; }
.clockwrap.warn .clock i { background: #c9534f; }
.clockwrap.warn #clock-text { color: #c9534f; font-weight: 700; }
#clock-text { font-family: var(--serif); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 34px; text-align: left; }

.dcard { background: var(--btn); border: 1px solid var(--btn-edge); border-radius: 14px; padding: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--btn-edge); }
.dcard h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dcard h2 .ico, .dnav .ico { font-size: 18px; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--gold) 18%, transparent); }
.dnav { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font-size: 16px; }
.dnav span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.dnav small { color: var(--muted); font-size: 12px; font-weight: 400; }
.dnav .chev { color: var(--muted); font-size: 22px; }
.dback { margin: 6px 0 10px; padding: 8px 12px; min-height: 40px; font-size: 15px; }
.drawer[data-page="settings"] .dmain { display: none; }
.theme-preview { margin-bottom: 10px; }
.theme-preview svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.seg.small button { min-height: 34px; font-size: 13px; padding: 6px 4px; }
.pref .seg { min-width: 160px; }
.drawer .pref > span { flex: 1; }

.react-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--panel); border-top: 1px solid var(--panel-edge); border-radius: 22px 22px 0 0;
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 40px rgba(0,0,0,.35); animation: sheet .22s ease-out; }
@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--muted); opacity: .5; margin: 2px auto 10px; }
.sheet-title { font-family: var(--serif); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 8px; }
.react-sheet .chips { justify-content: center; }
.react-sheet .chip { font-size: 17px; padding: 10px 14px; }
.react-sheet .chip.recent { border-color: var(--gold); }

.bubble { display: flex; align-items: center; gap: 10px; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--panel) 85%, transparent); }
.bubble .av { width: 32px; height: 32px; font-size: 18px; }
.bubble b { margin: 0; }
.bubble .txt { display: flex; flex-direction: column; }

/* ─── Край на партия като събитие ─── */
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.endpanel { position: relative; overflow: hidden; }
.bigword { font-family: var(--serif); font-weight: 800; font-size: clamp(34px, 12vw, 56px); letter-spacing: 6px; line-height: 1;
  background: linear-gradient(180deg, #fff2c2, var(--gold) 55%, #9a7420); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25)); margin: 4px 0 6px; animation: pop .5s cubic-bezier(.2,.8,.3,1.3) both; }
.bigword.lose { background: linear-gradient(180deg, #d9d9d9, #8a8a8a); -webkit-background-clip: text; background-clip: text; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; }
.stats div { background: var(--btn); border: 1px solid var(--btn-edge); border-radius: 10px; padding: 8px 4px; }
.stats b { display: block; font-family: var(--serif); font-size: 18px; }
.stats span { color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.ov-row { margin-top: 8px; } .ov-row button { flex: 1; margin-top: 0; }

/* ─── Преходи между екраните ─── */
#lobby, #game { animation: screen .28s ease-out both; }
@keyframes screen { from { opacity: 0; } to { opacity: 1; } } /* без transform: иначе fixed менюто се закача за #game */
.drawer .dsettings, .drawer .dmain { animation: fadein .2s ease-out; }