/* ΣΚΑΚΙ & ΤΑΒΛΙ 360° — style.css */
:root {
  --bg: #14100c;
  --bg2: #1d1712;
  --panel: #241d16;
  --panel2: #2c231a;
  --border: #3a2f22;
  --text: #f3ece1;
  --muted: #b7a892;
  --gold: #d9a441;
  --gold2: #f0c674;
  --red: #c8442e;
  --red2: #e05a41;
  --accent: var(--gold);
  --light-sq: #e9d4a8;
  --dark-sq: #8a5a34;
  --sel: #d9a44166;
  --move-dot: #c8442ecc;
  --check: #e05a4188;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #241a10 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}
h1,h2,h3,h4 { line-height: 1.25; }
a { color: var(--gold2); }

/* Header */
header.top {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #1c150e, #17110b);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.top-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: conic-gradient(from 45deg, #111 0 25%, #e9d4a8 0 50%, #111 0 75%, #e9d4a8 0);
  border: 2px solid var(--gold); box-shadow: var(--shadow); flex: none;
}
.brand h1 { font-size: 1.15rem; margin: 0; letter-spacing: .5px; }
.brand small { color: var(--muted); font-weight: 400; }

nav.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
nav.tabs button {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; padding: 8px 14px; border-radius: 10px;
  font-size: .95rem; cursor: pointer; transition: .15s;
}
nav.tabs button:hover { color: var(--text); background: var(--panel); }
nav.tabs button.active {
  color: #1a130b; background: linear-gradient(180deg, var(--gold2), var(--gold));
  font-weight: 700;
}

main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 80px; }
.view { display: none; animation: fade .25s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin: 0 0 18px; box-shadow: var(--shadow);
}
.card h2 { margin-top: 0; color: var(--gold2); }
.card h3 { color: var(--gold); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 820px){ .grid2,.grid3{ grid-template-columns: 1fr; } }

.pill { display:inline-block; background: var(--panel2); border:1px solid var(--border);
  color: var(--muted); padding: 3px 10px; border-radius: 999px; font-size:.8rem; margin:2px 4px 2px 0;}
.tag-red { color: var(--red2); border-color:#5a2a20; }
.tag-gold { color: var(--gold2); border-color:#5a4420; }

.btn {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  color: var(--text); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: .92rem;
  transition: .15s;
}
.btn:hover { border-color: var(--gold); color: var(--gold2); }
.btn.primary { background: linear-gradient(180deg, var(--red2), var(--red)); color:#fff; border-color:#7a2a1c; }
.btn.primary:hover { filter: brightness(1.08); color:#fff; }
.btn.gold { background: linear-gradient(180deg, var(--gold2), var(--gold)); color:#1a130b; border:none; font-weight:700; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin: 8px 0; }

/* Sub-nav (chips) */
.subnav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.subnav button {
  background: var(--panel); border:1px solid var(--border); color: var(--muted);
  padding:7px 12px; border-radius: 999px; cursor:pointer; font-size:.88rem;
}
.subnav button.active { color:#1a130b; background: var(--gold); font-weight:700; border-color:var(--gold); }
.sub { display:none; }
.sub.active { display:block; }

/* ---------- Σκακιέρα ---------- */
.board-wrap { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.board-col { flex: 0 0 auto; }
.chessboard {
  width: min(92vw, 480px); aspect-ratio: 1/1;
  display: grid; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(8,1fr);
  border: 6px solid #2c1c10; border-radius: 8px; box-shadow: var(--shadow);
  user-select: none; touch-action: manipulation;
}
.sq { position: relative; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sq.light { background: var(--light-sq); }
.sq.dark { background: var(--dark-sq); }
.sq .piece { font-size: min(9vw, 46px); line-height:1; z-index:2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.sq .piece.w { color:#fff; text-shadow: 0 0 2px #000, 0 0 1px #000; }
.sq .piece.b { color:#1a1208; }
.sq.sel::after { content:""; position:absolute; inset:0; background: var(--sel); z-index:1; }
.sq.lastmove::before { content:""; position:absolute; inset:0; background:#d9a44133; z-index:0; }
.sq.check .kmark { position:absolute; inset:0; background: radial-gradient(circle, var(--check), transparent 70%); z-index:1; }
.sq .dot { position:absolute; width:26%; height:26%; border-radius:50%;
  background: var(--move-dot); z-index:1; }
.sq .ring { position:absolute; inset:8%; border:4px solid var(--move-dot); border-radius:50%; z-index:1; }
.sq .coord { position:absolute; font-size:.6rem; color:#00000066; font-weight:700; }
.sq .coord.file { bottom:1px; right:3px; }
.sq .coord.rank { top:1px; left:3px; }
.sq.light .coord { color:#00000055; }
.sq.dark .coord { color:#ffffff88; }

.side-panel { flex:1 1 300px; min-width: 260px; }
.status-line { font-size:1rem; padding:10px 12px; border-radius:10px; background:var(--panel2);
  border:1px solid var(--border); margin-bottom:10px; min-height: 22px; }
.status-line.turn-w { border-left:4px solid #fff; }
.status-line.turn-b { border-left:4px solid #222; }
.status-line.win { border-color: var(--gold); color: var(--gold2); font-weight:700; }
.movelist { background:#100c08; border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; max-height:230px; overflow:auto; font-family: "Consolas",monospace; font-size:.9rem; }
.movelist .mv { display:inline-block; min-width:2.5em; }
.movelist .num { color: var(--muted); }
.movelist .cur { background: var(--gold); color:#1a130b; border-radius:4px; padding:0 3px; }

.promo-pick { display:flex; gap:6px; margin-top:8px; }
.promo-pick button { font-size:1.6rem; padding:4px 10px; }

label.ck { display:flex; align-items:center; gap:8px; margin:6px 0; color:var(--muted); cursor:pointer; }
select, input[type=range] { accent-color: var(--gold); }
select { background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 8px; }

/* ---------- Τάβλι ---------- */
.bg-board {
  width: min(96vw, 640px); aspect-ratio: 16/11; margin: 0 auto;
  background: linear-gradient(180deg,#3a2414,#25160b);
  border: 10px solid #180f07; border-radius: 8px; box-shadow: var(--shadow);
  display:grid; grid-template-columns: 1fr 34px 1fr; position:relative;
}
.bg-half { display:grid; grid-template-rows:1fr 1fr; }
.bg-quad { display:grid; grid-template-columns: repeat(6,1fr); }
.bg-bar { background:#160d06; }
.point { position:relative; display:flex; flex-direction:column; align-items:center; }
.point.top { justify-content:flex-start; }
.point.bot { justify-content:flex-end; }
.tri { position:absolute; width:100%; height:82%; }
.point.top .tri { top:0; clip-path: polygon(0 0,100% 0,50% 100%); }
.point.bot .tri { bottom:0; clip-path: polygon(50% 0,0 100%,100% 100%); }
.tri.a { background:#c19a68; } .tri.b { background:#7a4a26; }
.checker { width:78%; aspect-ratio:1/1; border-radius:50%; z-index:2; margin:-6% 0;
  border:2px solid rgba(0,0,0,.5); box-shadow: inset 0 2px 4px rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
/* Χρώματα ορίζονται πιο κάτω (v2/v3) μέσω --chk-* ώστε να δουλεύουν τα θέματα */
.point .count { position:absolute; z-index:3; font-size:.7rem; background:#000a; color:#fff; padding:0 4px; border-radius:4px; }
.point.top .count { top:2px; } .point.bot .count { bottom:2px; }
.pt-num { position:absolute; font-size:.6rem; color:#000000aa; }
.point.top .pt-num { top:-14px; } .point.bot .pt-num { bottom:-14px; }

.dice { display:flex; gap:12px; align-items:center; justify-content:center; margin:12px 0; }
.die { width:52px; height:52px; border-radius:12px; background:linear-gradient(180deg,#fbf3e2,#e5d6b8);
  color:#1a130b; display:grid; place-items:center; font-size:1.8rem; font-weight:800;
  box-shadow: var(--shadow); border:2px solid #b79a63; }
.die.used { opacity:.35; }
.die-dots { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  width:38px; height:38px; }
.die-dots span { width:8px; height:8px; border-radius:50%; background:#1a130b; align-self:center; justify-self:center; }

/* ---------- Roadmap / πρόοδος ---------- */
.roadmap-step { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px dashed var(--border); }
.roadmap-step:last-child { border-bottom:none; }
.step-badge { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel2); border:1px solid var(--border); font-weight:800; color:var(--gold2); }
.progress-bar { height:14px; background:#100c08; border-radius:999px; overflow:hidden; border:1px solid var(--border); }
.progress-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--red),var(--gold)); width:0; transition:.4s; }

table.data { width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th, table.data td { border:1px solid var(--border); padding:6px 9px; text-align:left; }
table.data th { background:var(--panel2); color:var(--gold2); }
table.data tr:nth-child(even) td { background:#00000022; }

.callout { border-left:4px solid var(--gold); background:#00000026; padding:10px 14px; border-radius:8px; margin:10px 0; }
.callout.red { border-left-color: var(--red2); }
details { border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin:8px 0; background:var(--panel); }
details summary { cursor:pointer; color:var(--gold2); font-weight:600; }
ul.clean { list-style:none; padding-left:0; } ul.clean li { padding:4px 0; border-bottom:1px solid var(--border); }
.kbd { background:#000; border:1px solid var(--border); border-radius:6px; padding:1px 7px; font-family:monospace; color:var(--gold2); }
footer { text-align:center; color:var(--muted); font-size:.82rem; padding:20px; }
.hero { text-align:center; padding:26px 16px; }
.hero h2 { font-size:1.9rem; margin:.2em 0; }
.hero p { color:var(--muted); max-width:640px; margin:.4em auto; }
.big-choice { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px; margin:22px auto; }
@media(max-width:640px){ .big-choice{ grid-template-columns:1fr; } }
.choice {
  background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--border);
  border-radius:16px; padding:24px; text-align:center; cursor:pointer; transition:.18s;
}
.choice:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }
.choice .ic { font-size:3rem; }

/* ============================================================
   ΕΜΦΑΝΙΣΗ: θέματα χρωμάτων, 3D πιόνια/πούλια, ρεαλισμός, ζάρια
   ============================================================ */
:root {
  --tri-a: #d9c096; --tri-b: #2b1d12;
  --frame: #3a2414; --frame2: #180f07;
  --chk-w-hi: #fbf6ea; --chk-w-lo: #d6cbb2;
  --chk-b-hi: #5a5a63; --chk-b-lo: #0c0c10;
  --wood: url("../assets/grain.svg");
}

/* Appearance bar στο header */
.appearance {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: .84rem; color: var(--muted);
}
.appearance label { display: flex; align-items: center; gap: 6px; margin: 0; }
.appearance select { padding: 4px 8px; font-size: .84rem; }
.appearance .sep { opacity: .4; }

/* ---- Accent (χρώμα εφαρμογής) ---- */
body[data-accent="ocean"]  { --gold:#3f9bd0; --gold2:#82c3ee; --red:#2e6fc8; --red2:#4f8fe0; --sel:#3f9bd066; --move-dot:#2e6fc8cc; }
body[data-accent="forest"] { --gold:#4a9d5b; --gold2:#84cf94; --red:#2e8b57; --red2:#46a86e; --sel:#4a9d5b66; --move-dot:#2e8b57cc; }
body[data-accent="royal"]  { --gold:#9a6ad9; --gold2:#c0a0ef; --red:#7a3fc8; --red2:#9a5fe0; --sel:#9a6ad966; --move-dot:#7a3fc8cc; }
body[data-accent="rose"]   { --gold:#d96a9a; --gold2:#f09cc0; --red:#c82e6f; --red2:#e04f8f; --sel:#d96a9a66; --move-dot:#c82e6fcc; }

/* ---- Board themes (χρώματα ταμπλού/σκακιέρας) ---- */
body[data-board="green"]  { --light-sq:#eeeed2; --dark-sq:#5b8a3a; --tri-a:#cfe0a8; --tri-b:#4f7a33; --frame:#243a18; --frame2:#16240e; }
body[data-board="blue"]   { --light-sq:#dbe7f3; --dark-sq:#3a6ea5; --tri-a:#bcd2ea; --tri-b:#335f8f; --frame:#173049; --frame2:#0e1d2e; }
body[data-board="marble"] { --light-sq:#eae6df; --dark-sq:#7c7671; --tri-a:#d3ccc2; --tri-b:#6f6a64; --frame:#2b2823; --frame2:#1a1815; }
body[data-board="red"]    { --light-sq:#f0dcd2; --dark-sq:#a83228; --tri-a:#e3b3a6; --tri-b:#8f281f; --frame:#3a1410; --frame2:#210a07; }
body[data-board="purple"] { --light-sq:#e7dbf3; --dark-sq:#6a4a9a; --tri-a:#cdbce8; --tri-b:#5a3f86; --frame:#2a1c40; --frame2:#180f24; }
body[data-board="night"]  { --light-sq:#c9c2b4; --dark-sq:#33302b; --tri-a:#b3ab9a; --tri-b:#2c2925; --frame:#141210; --frame2:#0a0908; }

/* ---- Ρεαλιστική σκακιέρα ---- */
.chessboard {
  border: 12px solid var(--frame); border-radius: 8px;
  background: var(--frame);
  box-shadow: inset 0 0 0 2px #00000066, inset 0 0 16px 4px #00000055,
              0 12px 32px rgba(0,0,0,.55), 0 2px 0 #ffffff12;
}
.sq.light { background:
  radial-gradient(130% 130% at 28% 18%, #ffffff33, transparent 58%), var(--light-sq); }
.sq.dark { background:
  radial-gradient(130% 130% at 28% 18%, #ffffff1c, transparent 58%), var(--dark-sq); }

/* ---- 3D πιόνια σκακιού (εξωθημένα glyphs) ---- */
body[data-piece3d="on"] .sq .piece { transform: translateY(-6%); }
body[data-piece3d="on"] .sq .piece.w {
  color:#fdfdfd; text-shadow:
   0 1px 0 #d2d2d2,0 2px 0 #bcbcbc,0 3px 0 #a3a3a3,0 4px 0 #8a8a8a,0 6px 6px rgba(0,0,0,.55);
}
body[data-piece3d="on"] .sq .piece.b {
  color:#3d3d46; text-shadow:
   0 1px 0 #24242a,0 2px 0 #1b1b20,0 3px 0 #131317,0 4px 0 #0b0b0e,0 6px 6px rgba(0,0,0,.6);
}

/* ---- Ρεαλιστικό ταμπλό τάβλι ---- */
.bg-wrap { position: relative; }
.bg-board {
  border: 14px solid var(--frame);
  background:
    repeating-linear-gradient(90deg, #00000018 0 5px, #ffffff08 5px 10px),
    linear-gradient(180deg,#3a2414,#25160b);
  box-shadow: inset 0 0 34px #000000aa, inset 0 0 0 2px #00000066, 0 14px 36px rgba(0,0,0,.6);
}
.bg-bar { background: linear-gradient(180deg,#241608,#160d06);
  box-shadow: inset 3px 0 7px #000, inset -3px 0 7px #000; }
.tri.a { background-color: var(--tri-a); background-image: linear-gradient(180deg,#ffffff26,#00000022); }
.tri.b { background-color: var(--tri-b); background-image: linear-gradient(180deg,#ffffff18,#00000026); }
.point.top .tri, .point.bot .tri { filter: drop-shadow(0 1px 1px #0007); }
.point.psel { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 4px; }

/* ---- 3D γυαλιστερά πούλια ---- */
.checker {
  background:
    radial-gradient(circle at 34% 28%, #ffffffcc, transparent 42%),
    radial-gradient(circle at 50% 55%, var(--chk-hi), var(--chk-lo));
  box-shadow: inset 0 -3px 6px #00000066, inset 0 3px 5px #ffffff55, 0 3px 5px #0008;
  border: 1px solid #0007;
}
.checker.w { --chk-hi: var(--chk-w-hi); --chk-lo: var(--chk-w-lo); color:#5b4a2e; }
.checker.b { --chk-hi: var(--chk-b-hi); --chk-lo: var(--chk-b-lo); color:#ece6d8; }
.checker.onbar { width: 24px; margin: 2px 0; }

/* ---- Ζάρια που πέφτουν ΜΕΣΑ στο ταμπλό ---- */
.dice-tray {
  position: absolute; left: 0; right: 0; top: 6%; bottom: 6%;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  pointer-events: none; z-index: 20; perspective: 600px;
}
.dice-tray .die {
  width: 58px; height: 58px;
  background: linear-gradient(145deg,#fdf6e6,#e2d2b0);
  border: 1px solid #b79a63; border-radius: 13px;
  box-shadow: inset 0 2px 3px #ffffffcc, inset 0 -4px 6px #00000030, 0 8px 14px #0008;
}
.dice-tray .die-dots { width: 42px; height: 42px; }
.dice-tray .die-dots span { background: radial-gradient(circle at 35% 30%,#444,#000);
  box-shadow: inset 0 1px 1px #0009; width: 9px; height: 9px; }
@keyframes diceDrop {
  0%   { transform: translateY(-160px) rotateX(120deg) rotateZ(0deg) scale(.6); opacity: 0; }
  35%  { opacity: 1; }
  55%  { transform: translateY(10px) rotateX(0deg) rotateZ(340deg) scale(1.06); }
  70%  { transform: translateY(-12px) rotateZ(358deg) scale(1); }
  85%  { transform: translateY(4px) rotateZ(366deg); }
  100% { transform: translateY(0) rotateZ(360deg); }
}
.dice-tray .die.rolling { animation: diceDrop .62s cubic-bezier(.2,.8,.3,1) both; }
.dice { min-height: 20px; }

/* ---- Προαιρετική 3D κλίση (view3d) ---- */
body[data-view3d="on"] .chessboard {
  transform: perspective(1200px) rotateX(23deg); transform-origin: center 62%;
  margin-top: 26px; margin-bottom: 12px;
}
body[data-view3d="on"] .sq .piece {
  transform: rotateX(-23deg) translateY(-16%); transform-origin: center bottom;
}
body[data-view3d="on"] .bg-board {
  transform: perspective(1300px) rotateX(20deg); transform-origin: center 58%;
  margin-top: 24px; margin-bottom: 10px;
}
body[data-view3d="on"] .bg-wrap { padding: 10px 0; }

/* Κουμπί ήχου */
.mute-btn { background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.mute-btn.on { color: var(--gold2); border-color: var(--gold); }

/* ============================================================
   v3: SVG πιόνια Staunton, ρεαλιστικά πούλια, ρόμβος ταβλιέρας,
   drag&drop, doubling cube, περισσότερα χρώματα
   ============================================================ */

/* ---- SVG πιόνια σκακιού ---- */
.sq .piece.svg { width: 90%; height: 90%; display: flex; align-items: center; justify-content: center;
  text-shadow: none; filter: none; }
.piece.svg .cp { width: 100%; height: 100%; display: block; }
body[data-piece3d="on"] .piece.svg .cp { filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }

/* Χρώματα πιονιών (default = κρεμ/έβενος Staunton) */
.piece.w { --pc-hi:#fdf6e4; --pc-mid:#ecdcbb; --pc-lo:#cab083; --pc-line:#6e5326; }
.piece.b { --pc-hi:#6b6b73; --pc-mid:#33333a; --pc-lo:#101014; --pc-line:#050506; }
body[data-pieces="wood"]   .piece.w { --pc-hi:#f4e6c4; --pc-mid:#e0c48c; --pc-lo:#b98d4e; --pc-line:#7a5a2c; }
body[data-pieces="wood"]   .piece.b { --pc-hi:#9a6a3e; --pc-mid:#6a4020; --pc-lo:#38200f; --pc-line:#1c0e06; }
body[data-pieces="marble"] .piece.w { --pc-hi:#ffffff; --pc-mid:#e8e8ee; --pc-lo:#bcbcc6; --pc-line:#7a7a86; }
body[data-pieces="marble"] .piece.b { --pc-hi:#70707a; --pc-mid:#3a3a42; --pc-lo:#141418; --pc-line:#000; }
body[data-pieces="blue"]   .piece.b { --pc-hi:#7fb0ec; --pc-mid:#3768c0; --pc-lo:#16346e; --pc-line:#0a1f45; }
body[data-pieces="red"]    .piece.b { --pc-hi:#ee8f7e; --pc-mid:#c23b28; --pc-lo:#6e1810; --pc-line:#3a0c06; }
body[data-pieces="green"]  .piece.b { --pc-hi:#7fce8c; --pc-mid:#2e9b52; --pc-lo:#155e2a; --pc-line:#0a3016; }

/* Drag ghost */
.drag-ghost { position: fixed; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: min(9vw,46px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.drag-ghost .cp { width: 100%; height: 100%; }
.sq { touch-action: none; }

/* ---- Ρεαλιστικά πούλια τάβλι (γυαλιστερά + δαχτυλίδι) ---- */
.checker { position: relative; }
.checker::before { content:""; position:absolute; inset:16%; border-radius:50%;
  border:2px solid #0000002e; box-shadow: inset 0 1.5px 2px #ffffff66, inset 0 -1.5px 2px #00000055; }
.checker::after { content:""; position:absolute; inset:36%; border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #ffffff44, #00000022);
  box-shadow: inset 0 1px 2px #00000044; }
.checker.onbar::before, .checker.onbar::after { display:none; }

/* Χρώματα πουλιών */
body[data-checkers="pearl"]  { --chk-w-hi:#ffffff; --chk-w-lo:#d5d0c6; --chk-b-hi:#5a5a62; --chk-b-lo:#0c0c10; }
body[data-checkers="green"]  { --chk-w-hi:#f7f5ef; --chk-w-lo:#d0cbbc; --chk-b-hi:#74d284; --chk-b-lo:#177a2c; }
body[data-checkers="red"]    { --chk-w-hi:#fbf6ee; --chk-w-lo:#d8d0c0; --chk-b-hi:#ec7864; --chk-b-lo:#8f1e12; }
body[data-checkers="blue"]   { --chk-w-hi:#f3ede0; --chk-w-lo:#ccc4b0; --chk-b-hi:#66a4ea; --chk-b-lo:#153f86; }
body[data-checkers="amber"]  { --chk-w-hi:#ffe6b0; --chk-w-lo:#c98f3e; --chk-b-hi:#5a4636; --chk-b-lo:#1c120a; }
body[data-checkers="marble"] { --chk-w-hi:#ffffff; --chk-w-lo:#c8c8d0; --chk-b-hi:#5c5c66; --chk-b-lo:#101014; }

/* ---- Ρόμβος «μάνα» στο κέντρο κάθε πλευράς ---- */
.bg-half { position: relative; }
.bg-half::before, .bg-half::after {
  content:""; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  pointer-events:none; z-index:1; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.bg-half::before { width:26%; height:36%; background: var(--tri-a);
  background-image: linear-gradient(180deg,#ffffff2e,#00000030); box-shadow:0 2px 4px #0007; }
.bg-half::after  { width:14%; height:21%; background: var(--tri-b);
  background-image: linear-gradient(180deg,#ffffff22,#00000033); }

/* Περισσότερα θέματα ξύλου */
body[data-board="mahogany"] { --light-sq:#e7c9a0; --dark-sq:#7a3b2a; --tri-a:#d8b483; --tri-b:#5e2c1e; --frame:#3a1c12; --frame2:#210f09; }
body[data-board="oak"]      { --light-sq:#efe0c2; --dark-sq:#b98f52; --tri-a:#e2cfa4; --tri-b:#9a7038; --frame:#5a4022; --frame2:#3a2914; }

/* ---- Doubling cube trainer ---- */
.cube { width:66px; height:66px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,#fdf6e6,#e2d2b0); color:#1a130b; font-weight:800; font-size:1.9rem;
  border:2px solid #b79a63; box-shadow: inset 0 2px 3px #ffffffcc, inset 0 -4px 6px #00000030, 0 8px 14px #0007; }
.cube-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.dc-choices { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
.dc-choices button { flex:1 1 120px; padding:12px; font-size:1rem; }
.dc-feedback { margin-top:10px; }
.dc-correct { color:#6ad07f; } .dc-wrong { color:var(--red2); }

/* ============================================================
   v4: υφή ξύλου (photo-real), ζωηρά πούλια, drag πουλιών, cube in-game
   ============================================================ */

/* ---- Ξύλινη υφή στα τρίγωνα (grain overlay πάνω στο χρώμα) ---- */
.tri.a {
  background-color: var(--tri-a);
  background-image: var(--wood), linear-gradient(180deg,#ffffff30,#0000002e);
  background-size: 100% 100%, 100% 100%;
  background-blend-mode: multiply, overlay;
}
.tri.b {
  background-color: var(--tri-b);
  background-image: var(--wood), linear-gradient(180deg,#ffffff20,#00000038);
  background-size: 100% 100%, 100% 100%;
  background-blend-mode: soft-light, overlay;
}

/* ---- Ξύλινη ταβλιέρα (grain + walnut) ---- */
.bg-board {
  background-color: #5a3a22;
  background-image:
    var(--wood),
    linear-gradient(180deg,#6b452a,#3e2716);
  background-size: 50% 60%, 100% 100%;
  background-blend-mode: multiply, normal;
  border-color: var(--frame);
  box-shadow: inset 0 0 40px #000000b0, inset 0 0 0 3px #00000077,
              inset 0 0 0 6px #ffffff10, 0 16px 40px rgba(0,0,0,.62);
}
.bg-bar {
  background-color: #2a1a0d;
  background-image: var(--wood); background-size: 100% 40%;
  background-blend-mode: multiply;
  box-shadow: inset 4px 0 9px #000, inset -4px 0 9px #000;
}

/* ---- Ξύλινη σκακιέρα (grain στα τετράγωνα) ---- */
.sq.light {
  background-color: var(--light-sq);
  background-image:
    radial-gradient(130% 130% at 28% 18%, #ffffff40, transparent 60%),
    var(--wood);
  background-size: 100% 100%, 300% 300%;
  background-blend-mode: overlay, multiply;
}
.sq.dark {
  background-color: var(--dark-sq);
  background-image:
    radial-gradient(130% 130% at 28% 18%, #ffffff22, transparent 60%),
    var(--wood);
  background-size: 100% 100%, 300% 300%;
  background-blend-mode: overlay, soft-light;
}
.chessboard {
  border-color: var(--frame);
  background-color: var(--frame);
  background-image: var(--wood);
  background-size: 60% 60%;
  background-blend-mode: multiply;
}

/* ---- Ζωηρά χρώματα πουλιών ---- */
body[data-checkers="green"]  { --chk-w-hi:#ffffff; --chk-w-lo:#dcd6c8; --chk-b-hi:#4ade80; --chk-b-lo:#15803d; }
body[data-checkers="red"]    { --chk-w-hi:#ffffff; --chk-w-lo:#e6dfce; --chk-b-hi:#fb7185; --chk-b-lo:#be123c; }
body[data-checkers="blue"]   { --chk-w-hi:#fbf7ee; --chk-w-lo:#d8d0bd; --chk-b-hi:#60a5fa; --chk-b-lo:#1d4ed8; }
body[data-checkers="orange"] { --chk-w-hi:#fff7e6; --chk-w-lo:#ecd8ad; --chk-b-hi:#fb923c; --chk-b-lo:#c2410c; }
body[data-checkers="purple"] { --chk-w-hi:#faf5ff; --chk-w-lo:#ddd0ea; --chk-b-hi:#c084fc; --chk-b-lo:#7c3aed; }
body[data-checkers="amber"]  { --chk-w-hi:#ffd98a; --chk-w-lo:#c9821f; --chk-b-hi:#3a2a1a; --chk-b-lo:#120b06; }
body[data-checkers="pearl"]  { --chk-w-hi:#ffffff; --chk-w-lo:#d5d0c6; --chk-b-hi:#4a4a52; --chk-b-lo:#08080c; }
body[data-checkers="marble"] { --chk-w-hi:#ffffff; --chk-w-lo:#c8c8d0; --chk-b-hi:#5c5c66; --chk-b-lo:#101014; }
/* πιο έντονη γυαλάδα στα πούλια */
.checker { box-shadow: inset 0 -4px 7px #00000070, inset 0 3px 6px #ffffff66, 0 4px 7px #0009; }
.checker::before { border-color: #00000038; box-shadow: inset 0 2px 3px #ffffff77, inset 0 -2px 3px #00000066; }

/* ---- Drag ghost για πούλια τάβλι ---- */
.drag-checker {
  position: fixed; z-index: 9999; pointer-events: none; border-radius: 50%;
  border: 1px solid #0007; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55));
}

/* ---- In-game doubling cube ---- */
.cube.mini { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 10px; cursor: pointer; }
.cube.mini:hover { filter: brightness(1.06); }
.cube-inline { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---- Animation ολίσθησης ---- */
.fly-piece { position: fixed; z-index: 9998; pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
.fly-checker { position: fixed; z-index: 9998; pointer-events: none; }

/* ---- Highlight νόμιμων κινήσεων (τάβλι) ---- */
.point.pdest .tri { filter: brightness(1.3) saturate(1.15) drop-shadow(0 0 7px var(--gold)); }
.dest-mark { position: absolute; left: 33%; width: 34%; aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle, var(--gold2) 0%, transparent 66%);
  box-shadow: 0 0 12px var(--gold); z-index: 4; pointer-events: none;
  animation: destPulse 1s ease-in-out infinite; }
.dest-mark.top { top: 18%; } .dest-mark.bot { bottom: 18%; }
@keyframes destPulse { 0%,100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }

/* ---- Highlight μαζέματος (bear-off) ---- */
.point.pbear .tri { filter: brightness(1.2) saturate(1.1) drop-shadow(0 0 8px #34b357); }
.bear-mark { position: absolute; left: 50%; transform: translateX(-50%);
  width: 27%; aspect-ratio: 1/1; border-radius: 50%; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 800; color: #08140a;
  background: radial-gradient(circle at 40% 35%, #9ff2b0, #2fae57);
  box-shadow: 0 0 8px #34b357, inset 0 1px 2px #ffffffaa; animation: bearPulse 1s ease-in-out infinite; }
.bear-mark.top { top: 6%; } .bear-mark.bot { bottom: 6%; }
@keyframes bearPulse { 0%,100% { opacity: .7; box-shadow: 0 0 6px #34b357; } 50% { opacity: 1; box-shadow: 0 0 15px #34b357; } }

/* Το tray/controls των ζαριών να αναδιπλώνεται (double picker) */
.dice { flex-wrap: wrap; }

/* ---- Pip count meter ---- */
.pip-meter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; font-size: .9rem; }
.pip-meter span { background: var(--panel2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 13px; }
.pip-meter .act { border-color: var(--gold); color: var(--gold2); box-shadow: 0 0 9px #d9a44140; font-weight: 600; }
.pip-meter .pip-lead { background: transparent; border: none; color: var(--muted); }
.pip-meter b { color: var(--text); }

/* ---- Highlight κινούμενων πουλιών ---- */
.point.pmove .tri { filter: brightness(1.12) saturate(1.05) drop-shadow(0 0 5px var(--gold)); }
.move-mark { position: absolute; left: 50%; transform: translateX(-50%);
  width: 20%; aspect-ratio: 1/1; border-radius: 50%; border: 3px solid var(--gold2);
  z-index: 4; pointer-events: none; animation: movePulse 1.1s ease-in-out infinite; }
.move-mark.top { top: 3%; } .move-mark.bot { bottom: 3%; }
@keyframes movePulse { 0%,100% { opacity: .55; box-shadow: 0 0 5px var(--gold); } 50% { opacity: 1; box-shadow: 0 0 13px var(--gold); } }
.bg-bar.barmove { box-shadow: inset 0 0 0 3px var(--gold2), inset 3px 0 7px #000, inset -3px 0 7px #000; }

/* ---- Σκακιστικό ρολόι ---- */
.chess-clocks { display: flex; gap: 10px; margin: 10px 0; }
.clock { flex: 1; background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; text-align: center; transition: .15s; }
.clock .lbl { display: block; font-size: .78rem; color: var(--muted); }
.clock .t { display: block; font-family: "Consolas", monospace; font-size: 1.65rem; font-weight: 800;
  color: var(--text); letter-spacing: 1px; }
.clock.active { border-color: var(--gold); box-shadow: 0 0 12px #d9a44140;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.clock.active .t { color: var(--gold2); }
.clock.low .t { color: var(--red2); }
.clock.flag { border-color: var(--red2); }
.clock.flag .t { color: var(--red2); }

/* ---- Ιστορικό παρτίδων/ματς ---- */
.match-history { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow: auto; margin: 6px 0; }
.match-history:empty { display: none; }
.hist-item { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; font-size: .85rem; display: flex; justify-content: space-between; gap: 8px; }
.hist-item .who { font-weight: 600; }
.hist-item .who.w { color: var(--gold2); }
.hist-item .who.b { color: var(--muted); }
.hist-item .who.draw { color: var(--muted); }
.hist-item .det { color: var(--muted); }
.stats-box { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.stats-box:empty { display: none; }
.stat { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; font-size: .82rem; color: var(--muted); }
.stat b { color: var(--text); }
.stat.hl { border-color: var(--gold); }
.stat.hl b { color: var(--gold2); }

/* ---- Προπονητής (tutorial) ---- */
.sq.hint { box-shadow: inset 0 0 0 4px #2fd0e6; animation: hintPulse 1.2s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { box-shadow: inset 0 0 0 3px #2fd0e6; } 50% { box-shadow: inset 0 0 0 5px #2fd0e6, 0 0 9px #2fd0e6; } }
.coach-tip { background: #10333a; border: 1px solid #2fd0e6; color: #c4eef5;
  border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: .9rem; }
.coach-tip:empty { display: none; }
.coach-tip b { color: #7fe6f5; }
/* Τάβλι coach highlight */
.point.pcoach .tri { filter: brightness(1.25) drop-shadow(0 0 8px #2fd0e6); }
.coach-mark { position: absolute; left: 50%; transform: translateX(-50%);
  width: 26%; aspect-ratio: 1/1; border-radius: 50%; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: #06232a;
  background: radial-gradient(circle at 40% 35%, #9fecf5, #2fd0e6);
  box-shadow: 0 0 10px #2fd0e6; animation: bearPulse 1.1s ease-in-out infinite; }
.coach-mark.top { top: 6%; } .coach-mark.bot { bottom: 6%; }
.bg-bar.barcoach { box-shadow: inset 0 0 0 3px #2fd0e6, inset 3px 0 7px #000, inset -3px 0 7px #000; }

/* ---- Ανάλυση παρτίδας ---- */
.hist-item.an-bl { border-color: var(--red2); }
.hist-item.an-bl b { color: var(--red2); }
.hist-item.an-mi b { color: #e0a341; }
.hist-item.an-in b { color: #d9c96a; }
.an-ok { color: var(--muted); padding: 6px 4px; font-size: .88rem; }

/* ---- Λειτουργία «Εστίαση» (board πρωταγωνιστής) ---- */
#focus-toggle { position: fixed; top: 8px; right: 8px; z-index: 300; padding: 6px 12px; box-shadow: var(--shadow); }

/* Ειδοποίηση νέας έκδοσης */
#update-toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 400;
  display: none; align-items: center; gap: 10px; background: #10333a; border: 1px solid #2fd0e6;
  color: #cdeef5; padding: 8px 14px; border-radius: 12px; box-shadow: var(--shadow); font-size: .9rem;
  max-width: calc(100vw - 24px); }
#update-toast .upd-x { background: transparent; border: none; color: #cdeef5; cursor: pointer; font-size: 1rem; padding: 0 4px; }
body[data-focus="on"] header.top { display: none; }
body[data-focus="on"] .subnav { display: none; }
body[data-focus="on"] main { padding: 8px 8px 60px; max-width: 100%; }
body[data-focus="on"] #focus-toggle { background: linear-gradient(180deg, var(--red2), var(--red)); color: #fff; border-color: #7a2a1c; }
/* Τάβλι: κράτα ταμπλό + σύντομο status/pip/coach/cube */
body[data-focus="on"] #sub-t-play > .card { padding: 6px; }
body[data-focus="on"] #sub-t-play > .card > *:not(#tavli-board):not(#tavli-info):not(#tavli-pip):not(#tavli-coach-tip):not(#tavli-cube-panel) { display: none !important; }
body[data-focus="on"] .bg-board { width: min(98vw, 880px); }
/* Σκάκι: μεγάλη σκακιέρα, ελάχιστο πλάι */
body[data-focus="on"] #sub-c-play > .card > h2 { display: none; }
body[data-focus="on"] #sub-c-play .board-wrap { gap: 10px; }
body[data-focus="on"] #sub-c-play .side-panel > *:not(#play-status):not(#play-coach-tip) { display: none !important; }
body[data-focus="on"] .chessboard { width: min(94vw, 700px); }
/* Μεγαλύτερα ζάρια & πούλια/πιόνια στην Εστίαση (καλύτερη ορατότητα στο κινητό) */
body[data-focus="on"] .dice-tray .die { width: 76px; height: 76px; border-radius: 15px; }
body[data-focus="on"] .dice-tray .die-dots { width: 56px; height: 56px; }
body[data-focus="on"] .dice-tray .die-dots span { width: 13px; height: 13px; }
body[data-focus="on"] .checker { width: 88%; margin: -5% 0; }
body[data-focus="on"] .sq .piece.svg { width: 100%; height: 100%; }
body[data-focus="on"] .sq .piece:not(.svg) { font-size: min(11.5vw, 62px); }

/* ---- Οριζόντια οθόνη (landscape) — κινητό & τάμπλετ έως ~15" ----
   Το ταμπλό/σκακιέρα μεγαλώνει βάσει ΥΨΟΥΣ και τα χειριστήρια πάνε δεξιά (2 στήλες). */
@media (orientation: landscape) and (max-height: 1100px) {
  main { padding-top: 6px; }
  .appearance { display: none; }        /* κρύψε τη μπάρα εμφάνισης — χώρος για το ταμπλό */
  /* Συμπίεση κεφαλίδας ώστε το ταμπλό να μεγαλώνει σε οριζόντια θέση */
  .top-inner { padding: 4px 14px; gap: 10px; }
  .brand .logo { width: 30px; height: 30px; border-radius: 8px; }
  .brand h1 { font-size: 1rem; }
  .brand small { display: none; }
  /* Ταμπλό/σκακιέρα βάσει ύψους (χωράνε πλήρως με tabs/subnav σε tablet 1024×768) */
  body .bg-board { width: auto !important; height: min(70vh, 720px) !important; max-width: 58vw; }
  body .chessboard { width: auto !important; height: min(70vh, 720px) !important; max-width: 60vw; }

  /* ΤΑΒΛΙ: ταμπλό αριστερά (grid στήλη-1 που εκτείνεται), χειριστήρια δεξιά (στήλη-2) */
  body:not([data-focus="on"]) #sub-t-play > .card { display: grid; grid-template-columns: auto minmax(240px, 1fr); gap: 14px; align-items: start; }
  body:not([data-focus="on"]) #sub-t-play > .card > * { grid-column: 2; min-width: 0; }
  body:not([data-focus="on"]) #sub-t-play > .card > #tavli-board { grid-column: 1; grid-row: 1 / 999; align-self: start; }

  /* ΣΚΑΚΙ: σκακιέρα + πλαϊνό πάνελ δίπλα-δίπλα */
  #sub-c-play .board-wrap { flex-wrap: nowrap; align-items: flex-start; gap: 14px; }
  #sub-c-play .side-panel { min-width: 220px; max-height: 94vh; overflow: auto; }

  /* Εστίαση: κεντραρισμένο, ακόμα μεγαλύτερο */
  body[data-focus="on"] main { padding: 6px 6px 30px; }
  body[data-focus="on"] #tavli-board { display: flex; justify-content: center; }
  body[data-focus="on"] .bg-board { height: min(96vh, 820px) !important; max-width: 96vw; }
  body[data-focus="on"] .chessboard { height: min(97vh, 820px) !important; max-width: 96vw; }
}

/* ---- Κοντή οριζόντια οθόνη (κινητά σε landscape) ----
   Σε Εστίαση δείξε ΜΟΝΟ ταμπλό/ζάρια ώστε να χωράει ολόκληρο σε ύψος ~360–520px. */
@media (orientation: landscape) and (max-height: 520px) {
  body[data-focus="on"] #sub-t-play > .card > #tavli-info,
  body[data-focus="on"] #sub-t-play > .card > #tavli-pip,
  body[data-focus="on"] #sub-t-play > .card > #tavli-coach-tip,
  body[data-focus="on"] #sub-t-play > .card > #tavli-cube-panel { display: none !important; }
  body[data-focus="on"] #sub-c-play .side-panel { display: none !important; }
  body[data-focus="on"] .bg-board { height: min(82vh, 620px) !important; }
  body[data-focus="on"] .chessboard { height: min(86vh, 620px) !important; }
  /* πιο συμμαζεμένα ζάρια για να μη σπρώχνουν το ταμπλό */
  body[data-focus="on"] .dice-tray .die { width: 52px; height: 52px; border-radius: 11px; }
  body[data-focus="on"] .dice-tray .die-dots { width: 38px; height: 38px; }
  body[data-focus="on"] .dice-tray .die-dots span { width: 9px; height: 9px; }
}