:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: rgba(255,255,255,.075);
  --panel-strong: rgba(255,255,255,.12);
  --text: #f5f7fb;
  --muted: #aeb8ca;
  --line: rgba(255,255,255,.12);
  --accent: #b78cff;
  --accent-2: #69e4cf;
  --danger: #ff7878;
  --board-light: #e8d8bf;
  --board-dark: #7c4c2e;
  --board-legal: #62e6a8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(183,140,255,.28), transparent 30rem),
    radial-gradient(circle at top right, rgba(105,228,207,.18), transparent 28rem),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  background: rgba(11,16,32,.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 900; letter-spacing: -.03em; font-size: 1.2rem; }
.brand-mark { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: .7rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #101321; }
.main-nav { display: flex; gap: .75rem; margin-left: auto; }
.main-nav a, .nav-link, .nav-button { color: var(--muted); padding: .55rem .75rem; border-radius: 999px; border: 0; background: transparent; font: inherit; cursor: pointer; }
.main-nav a:hover, .nav-link:hover, .nav-button:hover { color: var(--text); background: var(--panel); }
.auth-nav { display: flex; align-items: center; gap: .35rem; }
.inline-form { display: inline; }
.nav-cta { background: var(--panel-strong); color: var(--text); }
.page-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 1.4rem; align-items: stretch; padding: 2rem 0; }
.hero-copy, .hero-card, .panel, .board-panel, .side-panel, .ad-slot, .game-card { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.25); border-radius: 1.6rem; }
.hero-copy { padding: clamp(1.5rem, 4vw, 3rem); }
.hero h1, .section-head h1, .section-head h2 { font-size: clamp(2rem, 5vw, 4rem); line-height: .98; letter-spacing: -.06em; margin: .2rem 0 1rem; }
.lead { color: var(--muted); font-size: 1.1rem; line-height: 1.65; max-width: 65ch; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .78rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.button { border: 1px solid var(--line); border-radius: 999px; padding: .75rem 1rem; font-weight: 800; cursor: pointer; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #111827; }
.button.secondary { background: var(--panel-strong); color: var(--text); }
.hero-card { padding: 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.dice-logo { width: 6rem; height: 6rem; display: grid; place-items: center; border-radius: 1.5rem; background: linear-gradient(135deg, #1c2545, #41236c); color: #fff; font-size: 2rem; font-weight: 950; border: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.stat-grid div { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 1rem; padding: .9rem; }
.stat-grid strong { display: block; font-size: 1.8rem; }
.stat-grid span { color: var(--muted); font-size: .85rem; }
.ad-slot { padding: 1rem 1.2rem; margin: 1rem 0 2rem; }
.ad-slot span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.ad-slot.compact { box-shadow: none; border-radius: 1rem; }
.section-head { margin: 2rem 0 1rem; }
.section-head.wide, .panel.wide { max-width: none; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.game-card { padding: 1.2rem; min-height: 13rem; display: flex; flex-direction: column; }
.game-card.playable { outline: 1px solid rgba(105,228,207,.25); }
.game-tag { color: var(--accent-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.game-card p { color: var(--muted); line-height: 1.55; }
.card-link { margin-top: auto; color: var(--text); font-weight: 800; }
.panel { padding: 1.4rem; }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.checklist div { padding: .9rem; border-radius: 1rem; background: rgba(0,0,0,.18); border: 1px solid var(--line); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.board-panel, .side-panel { padding: 1.2rem; }
.board-panel { overflow: hidden; }
.board-frame { width: min(100%, 640px); margin: 1rem auto; }
.game-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.game-header h1 { margin: .2rem 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.05em; }
.controls { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
select { background: rgba(0,0,0,.25); color: var(--text); border: 1px solid var(--line); border-radius: .8rem; padding: .65rem .8rem; }
.chess-board { width: min(100%, 640px); max-width: calc(100vw - 2rem); aspect-ratio: 1 / 1; margin: 1rem auto; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,.18); touch-action: manipulation; }
.square { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; display: grid; place-items: center; font-size: clamp(1.8rem, 7vw, 4rem); line-height: 1; cursor: pointer; position: relative; color: #15100c; appearance: none; }
.square.light { background: var(--board-light); }
.square.dark { background: var(--board-dark); color: #120d09; }
.square.selected { outline: inset 0 0 0 4px var(--accent); }
.square.legal::after { content: ''; width: 32%; height: 32%; border-radius: 50%; background: rgba(98,230,168,.78); box-shadow: 0 0 0 .25rem rgba(98,230,168,.24); position: absolute; }
.square.legal:not(:empty)::after { width: 82%; height: 82%; background: transparent; border: .25rem solid rgba(98,230,168,.85); }
.mobile-hint, .plain-list, .info-list, .side-panel p { color: var(--muted); }
.info-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; font-weight: 800; text-align: right; }
.data-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.data-table th, .data-table td { padding: .85rem; border-bottom: 1px solid var(--line); text-align: left; }
.data-table th { color: var(--accent-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.admin-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; }
.footer { border-top: 1px solid var(--line); color: var(--muted); padding: 1.5rem clamp(1rem, 4vw, 3rem); }
code { background: rgba(0,0,0,.24); padding: .15rem .35rem; border-radius: .35rem; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
  .hero, .game-layout { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-header { flex-direction: column; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .page-shell { width: min(100% - 1rem, 1180px); padding-top: 1rem; }
  .game-grid, .checklist, .stat-grid { grid-template-columns: 1fr; }
  .hero-copy, .hero-card, .panel, .board-panel, .side-panel { border-radius: 1.1rem; }
  .board-frame, .chess-board { width: min(100%, calc(100vw - 1.5rem)); }
}

/* DiceTribe V0.7 Reversi and board fixes */
.reversi-board {
  width: min(100%, 640px);
  max-width: calc(100vw - 2rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: #073b2c;
  touch-action: manipulation;
}
.reversi-square {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(145deg, #0f6b4c, #0a4c38);
  cursor: pointer;
  appearance: none;
}
.reversi-square.legal::after {
  content: '';
  width: 28%;
  height: 28%;
  border-radius: 999px;
  background: rgba(105,228,207,.9);
  box-shadow: 0 0 0 .25rem rgba(105,228,207,.2);
  position: absolute;
}
.reversi-disc {
  width: 72%;
  height: 72%;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: inset 0 .35rem .65rem rgba(255,255,255,.18), 0 .45rem .9rem rgba(0,0,0,.38);
  z-index: 1;
}
.reversi-disc.black { background: radial-gradient(circle at 35% 28%, #4b5563, #050505 60%); }
.reversi-disc.white { background: radial-gradient(circle at 35% 28%, #ffffff, #d9d3c7 70%); }

/* DiceTribe V0.2/V0.7 non-ranked module styles */
.backgammon-table {
  width: min(96vw, 820px);
  margin: 1rem auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .35rem;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(124,76,46,.38), rgba(30,20,14,.88));
}
.bg-point {
  min-height: clamp(7rem, 18vw, 12rem);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .8rem;
  background: rgba(255,255,255,.06);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: .35rem;
  cursor: pointer;
}
.bg-point.top { flex-direction: column-reverse; }
.bg-point.selected { outline: 3px solid var(--accent); }
.bg-point.legal { box-shadow: inset 0 0 0 3px rgba(105,228,207,.75); }
.bg-label { color: var(--muted); font-size: .75rem; font-weight: 800; }
.bg-stack { display: flex; flex-direction: column; align-items: center; gap: .18rem; }
.checker { width: clamp(1.25rem, 3.5vw, 2rem); height: clamp(1.25rem, 3.5vw, 2rem); border-radius: 999px; display: block; border: 2px solid rgba(255,255,255,.35); }
.checker.white { background: #f5f1e6; }
.checker.black { background: #191919; }
.checker.empty { display: none; }
.checker-count { font-size: .75rem; font-weight: 900; color: var(--accent-2); }
.card-module .card-table-zone {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}
.card-row, .meld-zone {
  min-height: 5.5rem;
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(0,0,0,.2);
}
.playing-card {
  width: 3.2rem;
  height: 4.6rem;
  border-radius: .55rem;
  border: 1px solid rgba(0,0,0,.22);
  background: #fffdf5;
  display: grid;
  place-items: center;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  cursor: pointer;
}
.playing-card.red { color: #b91c1c; }
.playing-card.black { color: #111827; }
.playing-card.back { color: #fff; background: linear-gradient(135deg, #4c1d95, #0891b2); }
.mini-hand {
  min-width: 7.5rem;
  padding: .75rem;
  border-radius: .8rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
}
.mini-hand strong, .mini-hand span { display: block; }
.mini-hand span { color: var(--muted); margin-top: .25rem; }
.meld-hint { color: var(--muted); font-weight: 700; }
@media (max-width: 620px) {
  .backgammon-table { grid-template-columns: repeat(6, 1fr); }
  .bg-point { min-height: 6.8rem; }
  .playing-card { width: 2.75rem; height: 4rem; font-size: .9rem; }
}


/* DiceTribe V0.7 Gomoku */
.gomoku-frame { width: min(100%, 720px); }
.gomoku-board {
  width: min(100%, 720px);
  max-width: calc(100vw - 2rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: repeat(15, minmax(0, 1fr));
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: #c89a57;
  touch-action: manipulation;
}
.gomoku-point {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(75,45,20,.38);
  display: grid;
  place-items: center;
  position: relative;
  background:
    linear-gradient(rgba(80,48,20,.45), rgba(80,48,20,.45)) center/1px 100% no-repeat,
    linear-gradient(90deg, rgba(80,48,20,.45), rgba(80,48,20,.45)) center/100% 1px no-repeat,
    linear-gradient(145deg, #d7ad68, #bb823e);
  cursor: pointer;
  appearance: none;
}
.gomoku-point.legal:hover::after {
  content: '';
  width: 34%;
  height: 34%;
  border-radius: 999px;
  background: rgba(105,228,207,.9);
  box-shadow: 0 0 0 .2rem rgba(105,228,207,.18);
  position: absolute;
}
.gomoku-point.last { box-shadow: inset 0 0 0 3px rgba(183,140,255,.9); z-index: 1; }
.gomoku-stone {
  width: 78%;
  height: 78%;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: inset 0 .35rem .65rem rgba(255,255,255,.18), 0 .42rem .8rem rgba(0,0,0,.42);
  z-index: 2;
}
.gomoku-stone.black { background: radial-gradient(circle at 35% 28%, #4b5563, #050505 60%); }
.gomoku-stone.white { background: radial-gradient(circle at 35% 28%, #ffffff, #d9d3c7 70%); }
@media (max-width: 620px) {
  .gomoku-board { max-width: calc(100vw - 1.5rem); }
  .gomoku-stone { width: 82%; height: 82%; }
}


/* DiceTribe V0.7 Four in a Row */
.connect-four-frame { width: min(100%, 680px); }
.connect-four-board {
  width: min(100%, 680px);
  max-width: calc(100vw - 2rem);
  aspect-ratio: 7 / 6;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(.2rem, .7vw, .5rem);
  padding: clamp(.35rem, 1vw, .75rem);
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, #164e63, #1d4ed8);
  box-shadow: inset 0 0 0 .25rem rgba(255,255,255,.08), 0 1rem 2.5rem rgba(0,0,0,.25);
  touch-action: manipulation;
}
.connect-four-cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(10,18,35,.78) 0 54%, rgba(255,255,255,.12) 55% 100%);
  cursor: pointer;
  appearance: none;
  position: relative;
}
.connect-four-cell.legal:hover { outline: 3px solid rgba(105,228,207,.85); }
.connect-four-cell.last { box-shadow: 0 0 0 3px rgba(183,140,255,.95); z-index: 1; }
.connect-four-disc {
  width: 78%;
  height: 78%;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: inset 0 .35rem .65rem rgba(255,255,255,.18), 0 .42rem .8rem rgba(0,0,0,.42);
  z-index: 2;
}
.connect-four-disc.red { background: radial-gradient(circle at 35% 28%, #fca5a5, #b91c1c 65%); }
.connect-four-disc.yellow { background: radial-gradient(circle at 35% 28%, #fde68a, #d97706 70%); }
@media (max-width: 620px) {
  .connect-four-board { max-width: calc(100vw - 1.5rem); }
  .connect-four-disc { width: 82%; height: 82%; }
}

/* DiceTribe V0.7 Backgammon server-validated board refinements */
.backgammon-scoreline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: 1rem auto .25rem;
  color: var(--muted);
  font-weight: 800;
}
.backgammon-scoreline span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .7rem;
  background: rgba(255,255,255,.06);
}
.backgammon-table {
  position: relative;
  grid-template-rows: repeat(2, minmax(7rem, 1fr));
}
.backgammon-table.locked { opacity: .88; }
.bg-point.can-move { outline: 2px solid rgba(183,140,255,.75); }
.bg-point.legal { background: rgba(105,228,207,.14); }
.bg-bearoff {
  grid-column: 1 / -1;
  border: 1px dashed rgba(105,228,207,.7);
  border-radius: 1rem;
  padding: .75rem 1rem;
  background: rgba(105,228,207,.12);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.bg-bearoff:hover { background: rgba(105,228,207,.2); }

/* DiceTribe V0.7 Draughts / Dam */
.draughts-frame { width: min(100%, 640px); }
.draughts-board {
  width: min(100%, 640px);
  max-width: calc(100vw - 2rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  touch-action: manipulation;
}
.draughts-square {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  appearance: none;
}
.draughts-square.light { background: var(--board-light); cursor: default; }
.draughts-square.dark { background: var(--board-dark); }
.draughts-square.can-move { box-shadow: inset 0 0 0 3px rgba(183,140,255,.6); }
.draughts-square.selected { box-shadow: inset 0 0 0 4px rgba(183,140,255,.95); }
.draughts-square.forced { box-shadow: inset 0 0 0 4px rgba(255,222,89,.95); }
.draughts-square.legal::after {
  content: '';
  width: 34%;
  height: 34%;
  border-radius: 999px;
  background: rgba(105,228,207,.9);
  box-shadow: 0 0 0 .24rem rgba(105,228,207,.2);
  position: absolute;
}
.draughts-piece {
  width: 76%;
  height: 76%;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: clamp(1.45rem, 5.5vw, 3.2rem);
  line-height: 1;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: inset 0 .35rem .65rem rgba(255,255,255,.18), 0 .45rem .9rem rgba(0,0,0,.38);
  z-index: 1;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", system-ui, sans-serif;
}
.draughts-piece.white { color: #111827; background: radial-gradient(circle at 35% 28%, #ffffff, #d9d3c7 70%); }
.draughts-piece.black { color: #f8fafc; background: radial-gradient(circle at 35% 28%, #4b5563, #050505 60%); }
.draughts-piece.king { outline: 3px double rgba(255,222,89,.8); }
@media (max-width: 620px) {
  .draughts-board { max-width: calc(100vw - 1.5rem); }
  .draughts-piece { width: 82%; height: 82%; }
}

/* DiceTribe V1.0 Morris / Kvarn */
.morris-frame { width: min(100%, 640px); }
.morris-board {
  width: min(100%, 640px);
  max-width: calc(100vw - 2rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  position: relative;
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(105,228,207,.08), transparent 33%),
    linear-gradient(145deg, #2b1b12, #6b3f24 55%, #2b1b12);
  box-shadow: inset 0 0 0 .35rem rgba(255,255,255,.06), 0 1rem 2.5rem rgba(0,0,0,.28);
  touch-action: manipulation;
}
.morris-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.morris-lines line {
  stroke: rgba(232,216,191,.72);
  stroke-width: .9;
  stroke-linecap: round;
}
.morris-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(2rem, 8.4vw, 4.3rem);
  height: clamp(2rem, 8.4vw, 4.3rem);
  border-radius: 999px;
  border: 2px solid rgba(232,216,191,.9);
  background: radial-gradient(circle at 35% 28%, #f8e5b9, #a16207 78%);
  display: grid;
  place-items: center;
  cursor: pointer;
  appearance: none;
  z-index: 2;
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.34);
}
.morris-point.can-move { outline: 3px solid rgba(183,140,255,.72); }
.morris-point.selected { outline: 4px solid rgba(183,140,255,.95); }
.morris-point.legal { box-shadow: 0 0 0 .35rem rgba(105,228,207,.24), 0 .35rem .9rem rgba(0,0,0,.34); }
.morris-point.legal::after {
  content: '';
  width: 38%;
  height: 38%;
  border-radius: 999px;
  background: rgba(105,228,207,.95);
  box-shadow: 0 0 0 .25rem rgba(105,228,207,.2);
  position: absolute;
}
.morris-point.capture { outline: 4px solid rgba(255,120,120,.92); }
.morris-stone {
  width: 78%;
  height: 78%;
  border-radius: 999px;
  display: block;
  color: transparent;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: inset 0 .35rem .65rem rgba(255,255,255,.18), 0 .42rem .8rem rgba(0,0,0,.42);
  z-index: 3;
}
.morris-stone.white { background: radial-gradient(circle at 35% 28%, #ffffff, #d9d3c7 70%); }
.morris-stone.black { background: radial-gradient(circle at 35% 28%, #4b5563, #050505 60%); }
@media (max-width: 620px) {
  .morris-board { max-width: calc(100vw - 1.5rem); }
  .morris-point { width: clamp(1.7rem, 9vw, 3.4rem); height: clamp(1.7rem, 9vw, 3.4rem); }
}

/* DiceTribe V1.0 Pasour */
.pasour-scorebar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1rem 0;
}
.pasour-scorebar span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .75rem;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 800;
}
.pasour-table-zone h2 {
  margin: .35rem 0 0;
  font-size: 1rem;
  color: var(--muted);
}
.playing-card.selected {
  outline: 4px solid rgba(105,228,207,.86);
  transform: translateY(-.2rem);
}
.playing-card.legal-capture {
  box-shadow: 0 0 0 .28rem rgba(183,140,255,.26), 0 10px 24px rgba(0,0,0,.25);
}

/* DiceTribe V1.1 Hokm */
.select-label {
  display: block;
  color: var(--muted);
  font-weight: 800;
  font-size: .85rem;
}
.select-control {
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: .65rem .8rem;
  font-weight: 800;
}
.hokm-scorebar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1rem 0;
}
.hokm-scorebar span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .75rem;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 800;
}
.hokm-table-zone h2 {
  margin: .35rem 0 0;
  font-size: 1rem;
  color: var(--muted);
}
.hokm-played-card {
  display: grid;
  gap: .35rem;
  justify-items: center;
}
.hokm-played-card span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}
.playing-card.disabled-card {
  opacity: .42;
  cursor: not-allowed;
}

/* DiceTribe V1.2 Rami / Rim */
.rami-scorebar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1rem 0;
}
.rami-scorebar span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .75rem;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 800;
}
.rami-table-zone h2 {
  margin: .35rem 0 0;
  font-size: 1rem;
  color: var(--muted);
}
.playing-card.suggested-meld {
  box-shadow: 0 0 0 .28rem rgba(255,222,89,.24), 0 10px 24px rgba(0,0,0,.25);
}
.rami-meld-box {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: .65rem;
  background: rgba(255,255,255,.045);
  display: grid;
  gap: .45rem;
}
.rami-meld-box > strong {
  color: var(--muted);
  font-size: .85rem;
}

/* DiceTribe V1.4 Shelem */
.shelem-module .playing-card.selected-card {
  outline: 4px solid rgba(105,228,207,.9);
  transform: translateY(-.25rem);
}
.playing-card.card-back {
  color: #fff;
  background: linear-gradient(135deg, #4c1d95, #0891b2);
  border-color: rgba(255,255,255,.25);
}
.compact-controls {
  margin-top: .75rem;
  align-items: center;
}

/* DiceTribe V1.4 Bridge */
.bridge-contract-controls {
    gap: .55rem;
    align-items: end;
}
.bridge-scorebar {
    margin-top: 1rem;
}
.dummy-hand {
    border: 1px dashed rgba(99, 102, 241, .35);
    border-radius: 1rem;
    padding: .75rem;
    background: rgba(99, 102, 241, .06);
}
.bridge-table-zone .playing-card.disabled-card {
    opacity: .66;
}
.bridge-table-zone .playing-card.legal-capture {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .35);
    transform: translateY(-2px);
}


/* DiceTribe V1.6 Lobby */
.lobby-layout .board-panel { min-height: 28rem; }
.lobby-form { display: grid; gap: .8rem; margin: 1rem 0; }
.lobby-form label { color: var(--muted); font-weight: 800; }
.lobby-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.lobby-room, .empty-state {
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: rgba(0,0,0,.2);
  padding: 1rem;
}
.lobby-room-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.lobby-room-head h2 { margin: .1rem 0 .6rem; letter-spacing: -.04em; }
.lobby-status { border: 1px solid var(--line); border-radius: 999px; padding: .4rem .65rem; font-weight: 900; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lobby-status.ready { color: var(--accent-2); border-color: rgba(105,228,207,.45); }
.lobby-status.full { color: var(--accent); border-color: rgba(183,140,255,.45); }
.lobby-meta { display: flex; flex-wrap: wrap; gap: .55rem; color: var(--muted); font-size: .9rem; }
.lobby-players { list-style: none; padding: 0; margin: .9rem 0; display: grid; gap: .45rem; }
.lobby-players li { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem .65rem; border-radius: .75rem; background: rgba(255,255,255,.055); }
.lobby-players span { color: var(--muted); font-size: .88rem; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.lobby-actions button:disabled { opacity: .45; cursor: not-allowed; }
.empty-state { color: var(--muted); }
.empty-state.danger { color: var(--danger); }
.panel-note { margin-top: 1.2rem; color: var(--muted); }
.panel-note h3 { color: var(--text); }
@media (max-width: 900px) { .lobby-grid { grid-template-columns: 1fr; } }

.pvp-banner {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255,255,255,.055);
}
.pvp-banner span { color: var(--muted); }
.pvp-banner strong { color: var(--text); }
.lobby-actions a.button { text-decoration: none; }

/* DiceTribe V1.8 portal maturity/status UI */
.split-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.portal-health-card .stat-grid, .compact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; }
.game-tag.status { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .35rem .6rem; border: 1px solid var(--line); color: var(--text); }
.game-tag.status::before { content: ''; width: .55rem; height: .55rem; border-radius: 999px; background: var(--accent-2); }
.game-tag.status.training::before { background: #69e4cf; }
.game-tag.status.pvp::before { background: #facc15; }
.game-tag.status.chance::before { background: #fb923c; }
.game-tag.status.planned::before { background: #94a3b8; }
.game-card.training { outline: 1px solid rgba(105,228,207,.25); }
.game-card.pvp { outline: 1px solid rgba(250,204,21,.28); }
.game-card.chance { outline: 1px solid rgba(251,146,60,.24); }
.game-card.planned { opacity: .86; }
.game-mode { color: var(--muted); font-size: .8rem; font-weight: 800; }
.status-detail { border-left: 3px solid rgba(105,228,207,.45); padding-left: .75rem; }
.progress-wrap, .table-progress { width: 100%; height: .55rem; border-radius: 999px; background: rgba(0,0,0,.28); overflow: hidden; border: 1px solid rgba(255,255,255,.08); margin: .35rem 0 .7rem; }
.progress-wrap div, .table-progress div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.table-progress { width: 7rem; display: inline-block; vertical-align: middle; margin: 0 .5rem 0 0; }
.mini-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .75rem 0; }
.mini-meta div { background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: .75rem; padding: .55rem; }
.mini-meta dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.mini-meta dd { margin: .15rem 0 0; font-weight: 850; }
.next-step { color: var(--muted); font-size: .9rem; line-height: 1.45; margin: .4rem 0 1rem; }
.portal-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.status-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.status-row strong { color: var(--accent-2); }
.status-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 1rem; }
.filter-note { margin: 1rem 0; color: var(--muted); line-height: 1.55; }
.status-table td { vertical-align: middle; }
@media (max-width: 1000px) {
  .status-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .split-head, .portal-columns { display: block; }
  .portal-columns .panel { margin-bottom: 1rem; }
  .mini-meta, .portal-health-card .stat-grid, .compact-stats, .status-summary { grid-template-columns: 1fr; }
  .game-card-top { align-items: flex-start; flex-direction: column; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
}