:root {
  --ivory: #f3e9d2; --gold: #ffd76a;
  --cell: clamp(44px, 9vmin, 72px);
  --tile: linear-gradient(150deg, #efe4c6, #ded0a4);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse at 50% 22%, #2a3556, #0f1220 72%);
  color: var(--ivory); font-family: Georgia, 'Times New Roman', serif;
}
h1 { font-weight: normal; letter-spacing: .14em; margin: 18px 0 2px; font-size: clamp(20px, 4vmin, 32px); }
#status { min-height: 1.5em; margin: 4px 0 10px; font-style: italic; color: #e8d9b0; text-align: center; }
.play-main { width: 100%; display: flex; flex-direction: column; align-items: center; }
#layout { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 0 16px 24px; }

#boardWrap { position: relative; padding: 72px 0; }
/* Three separately-framed sections (left block, bridge, right block) sit in a
   row with real gaps above and below the bridge — the artifact's dumbbell shape. */
#board {
  display: flex; align-items: center;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
/* Seamless: the three sections share one continuous lapis surface with no
   frames, so they read as a single inlaid board in the dumbbell shape. */
.block, .bridge {
  position: relative;
  display: grid; gap: 5px; padding: 7px;
  grid-template-rows: repeat(3, var(--cell));
  background: linear-gradient(160deg, #3a4f9c, #23356e);
}
.block { grid-template-columns: repeat(var(--cols), var(--cell)); }
.left  { --cols: 4; border-radius: 9px 0 0 9px; }
.right { --cols: 2; border-radius: 0 9px 9px 0; }
.bridge {
  grid-template-columns: repeat(2, var(--cell)); grid-template-rows: var(--cell);
  padding-left: 0; padding-right: 0;
}
/* dotted shell-inlay line traced around the whole dumbbell outline */
#boardOutline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
#boardOutline polygon {
  fill: none; stroke: rgba(233,220,192,.72); stroke-width: 3;
  stroke-linecap: round; stroke-dasharray: 0.1 7.5;
}
.sq {
  border-radius: 3px; position: relative;
  background: var(--tile);
  box-shadow: inset 0 0 0 1.5px #2b2113, inset 0 2px 4px rgba(255,255,255,.45), inset 0 -3px 5px rgba(120,90,40,.28);
}
.sq.m0 { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%232b2113' stroke-width='3'><circle cx='50' cy='50' r='12'/><circle cx='25' cy='25' r='12'/><circle cx='75' cy='25' r='12'/><circle cx='25' cy='75' r='12'/><circle cx='75' cy='75' r='12'/></g><g fill='%2333478f'><circle cx='50' cy='50' r='4.5'/><circle cx='25' cy='25' r='4.5'/><circle cx='75' cy='25' r='4.5'/><circle cx='25' cy='75' r='4.5'/><circle cx='75' cy='75' r='4.5'/></g></svg>"), var(--tile); }
.sq.m1 { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%2333478f' stroke='%232b2113' stroke-width='2'><circle cx='50' cy='50' r='11'/><circle cx='26' cy='26' r='11'/><circle cx='74' cy='26' r='11'/><circle cx='26' cy='74' r='11'/><circle cx='74' cy='74' r='11'/></g></svg>"), var(--tile); }
.sq.m2 { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%232b2113' stroke-width='3'><rect x='16' y='16' width='68' height='68' rx='2'/><rect x='30' y='30' width='40' height='40' rx='2' stroke='%2333478f'/></g><rect x='42' y='42' width='16' height='16' fill='%239e4832' stroke='%232b2113' stroke-width='2.5'/><g transform='translate(50,50) rotate(45)'><rect x='-27' y='-27' width='54' height='54' fill='none' stroke='%2333478f' stroke-width='2'/></g></svg>"), var(--tile); }
.sq.m3 { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g stroke='%232b2113' stroke-width='2.5' fill='none'><path d='M18 18H82M18 50H82M18 82H82M18 18V82M50 18V82M82 18V82'/></g><g fill='%2333478f'><circle cx='18' cy='18' r='4'/><circle cx='50' cy='18' r='4'/><circle cx='82' cy='18' r='4'/><circle cx='18' cy='50' r='4'/><circle cx='50' cy='50' r='4.6'/><circle cx='82' cy='50' r='4'/><circle cx='18' cy='82' r='4'/><circle cx='50' cy='82' r='4'/><circle cx='82' cy='82' r='4'/></g></svg>"), var(--tile); }
.sq.rosette { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g transform='translate(50,50)'><g fill='%2333478f' stroke='%232b2113' stroke-width='3'><ellipse rx='10' ry='33'/><ellipse rx='10' ry='33' transform='rotate(45)'/><ellipse rx='10' ry='33' transform='rotate(90)'/><ellipse rx='10' ry='33' transform='rotate(135)'/></g><circle r='14' fill='%239e4832' stroke='%232b2113' stroke-width='3'/><circle r='5' fill='%23efe4c6'/></g></svg>"), var(--tile); }
.sq.m0, .sq.m1, .sq.m2, .sq.m3 { background-size: 76% auto, cover; background-position: center; background-repeat: no-repeat; }
.sq.rosette { background-size: 84% auto, cover; background-position: center; background-repeat: no-repeat; }
.sq.hint { outline: 3px solid var(--gold); outline-offset: -3px; z-index: 1; }

.piece {
  position: absolute; left: 0; top: 0; width: calc(var(--cell) * .64); height: calc(var(--cell) * .64);
  border-radius: 50%; transition: transform .45s cubic-bezier(.4,.2,.2,1); z-index: 2;
  background-repeat: no-repeat; background-position: center; background-size: 62%, cover;
  box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.28);
}
.piece.p0 { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%2322336e'><circle cx='50' cy='50' r='8.5'/><circle cx='28' cy='28' r='8.5'/><circle cx='72' cy='28' r='8.5'/><circle cx='28' cy='72' r='8.5'/><circle cx='72' cy='72' r='8.5'/></g></svg>"), radial-gradient(circle at 36% 30%, #fbf3dd, #d0b98a 74%); }
.piece.p1 { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23e9dcc0'><circle cx='50' cy='50' r='8.5'/><circle cx='28' cy='28' r='8.5'/><circle cx='72' cy='28' r='8.5'/><circle cx='28' cy='72' r='8.5'/><circle cx='72' cy='72' r='8.5'/></g></svg>"), radial-gradient(circle at 36% 30%, #5b6572, #232a33 76%); }
.piece.movable { cursor: pointer; box-shadow: 0 0 0 3px var(--gold), 0 3px 8px rgba(0,0,0,.55); }
.piece.home { opacity: .6; }
.piece.no-anim { transition: none; }

@media (max-width: 480px) {
  :root { --cell: clamp(22px, 8.4vw, 56px); }
  .block, .bridge { gap: 3px; padding: 4px; }
  .bridge { padding-left: 0; padding-right: 0; }
  #boardWrap { padding: 58px 0; }
}

#panel { display: flex; flex-direction: column; gap: 14px; min-width: 230px; }
.card { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 12px 14px; }
.row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0; gap: 10px; }
#dice { display: flex; gap: 10px; align-items: center; height: 40px; margin-bottom: 8px; }
.die {
  width: 26px; height: 24px; background: #e8d9b0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* Marked dice: the tip itself is coloured — as the real inlaid tetrahedra
   were. A hard-stopped gradient on the clipped triangle fills the top of the
   die solidly, so there's no seam between the colour and the die's edges. */
.die.marked { background: linear-gradient(to bottom, #7c3f16 0 8px, #e8d9b0 8px 100%); }
#rollTotal { font-size: 26px; margin-left: 6px; min-width: 24px; }
button, select {
  font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid #8a6a3c;
  background: linear-gradient(145deg, #caa15f, #a97f42); color: #2b1d12; cursor: pointer;
}
button:disabled { opacity: .45; cursor: default; }
button { width: 100%; }

/* --- shared site chrome (nav + taglines), used on every page --- */
.nav {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: rgba(10, 13, 25, .72); border-bottom: 1px solid rgba(255,215,106,.28);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
}
.nav .brand { display: flex; align-items: center; gap: 10px; color: var(--ivory); text-decoration: none;
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.brand-mark { width: 22px; height: 22px; flex: 0 0 auto;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g transform='translate(50,50)'><g fill='%23ffd76a' stroke='%232b2113' stroke-width='3'><ellipse rx='10' ry='33'/><ellipse rx='10' ry='33' transform='rotate(45)'/><ellipse rx='10' ry='33' transform='rotate(90)'/><ellipse rx='10' ry='33' transform='rotate(135)'/></g><circle r='14' fill='%239e4832' stroke='%232b2113' stroke-width='3'/></g></svg>") center/contain no-repeat; }
.nav-links { display: flex; gap: clamp(12px, 3vw, 28px); }
.nav-links a { color: #d9c79a; text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; padding: 4px 2px; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ivory); }
.nav-links a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.nav a:focus-visible, .btn:focus-visible, .legend button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tagline { text-align: center; color: #cdbe97; font-style: italic; margin: 0 0 14px; padding: 0 16px; }
@media (max-width: 480px) { .nav { flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- content pages (History, Rules) --- */
.page { max-width: 820px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 32px) 64px; }
.page h1 { font-size: clamp(26px, 5vw, 40px); }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; color: var(--gold); font-size: 13px; margin: 0 0 6px; }
.lead { font-size: clamp(17px, 2.4vw, 21px); line-height: 1.6; color: #ece0c2; }
.panel { background: rgba(243,233,210,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: clamp(16px, 3vw, 26px); margin: 18px 0; }
.panel h2 { margin: 0 0 10px; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(18px, 3vw, 23px); font-weight: normal; }
.panel p { line-height: 1.7; color: #e7dcc0; max-width: 66ch; }
.panel p + p { margin-top: 12px; }
.btn { display: inline-block; font: inherit; padding: 11px 22px; border-radius: 9px; border: 1px solid #8a6a3c;
  background: linear-gradient(145deg, #caa15f, #a97f42); color: #2b1d12; text-decoration: none; cursor: pointer; letter-spacing: .04em; }
.btn:hover { filter: brightness(1.06); }
/* timeline */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: rgba(255,215,106,.35); }
.tl-item { position: relative; padding: 0 0 18px 30px; }
.tl-item::before { content: ''; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #9e4832 75%); box-shadow: 0 0 0 3px rgba(15,18,32,.9); }
.tl-date { color: var(--gold); font-weight: bold; letter-spacing: .04em; }
.tl-item p { margin: 3px 0 0; color: #e7dcc0; line-height: 1.55; }
/* video card (self-contained, links out) */
.video-card { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit;
  background: linear-gradient(160deg, #3a4f9c, #23356e); border: 1px solid rgba(255,215,106,.3); border-radius: 12px; padding: 16px; }
.video-card:hover { border-color: var(--gold); }
.video-card .play { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(15,18,32,.7);
  display: grid; place-items: center; }
.video-card .play::before { content: ''; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--gold); margin-left: 4px; }
.video-card .vc-title { color: var(--ivory); font-size: 16px; margin: 0 0 3px; }
.video-card .vc-sub { color: #cdbe97; font-size: 13px; }
/* sources + footer */
.sources { font-size: 14px; color: #cdbe97; }
.sources li { margin: 7px 0; line-height: 1.5; }
.sources a { color: var(--gold); }
.site-foot { text-align: center; color: #9a8f75; font-size: 13px; padding: 26px 16px 8px; }

/* --- rules page --- */
.diagram-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.diagram { width: 100%; max-width: 560px; height: auto; }
.diagram .cell { fill: #efe4c6; stroke: #2b2113; stroke-width: 1.5; }
.diagram .rosette-cell { fill: #e7d7ae; }
.diagram .route { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.diagram .route.p0 { stroke: #b9a06a; } .diagram .route.p1 { stroke: #4a86c8; }
/* Marks annotate the board by default (usable without interaction). A legend
   button isolates its feature by dimming the rest; routes reveal on demand. */
.diagram .mark { opacity: 1; transition: opacity .2s; }
.diagram.focus .mark { opacity: .15; }
.diagram.focus-path .route { opacity: 1; }
.diagram.focus-rosette .r-mark { opacity: 1; }
.diagram.focus-safe .s-mark { opacity: 1; }
.diagram.focus-ends .e-mark { opacity: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.legend button { font: inherit; font-size: 14px; cursor: pointer; color: #e7dcc0; width: auto;
  background: rgba(243,233,210,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; }
.legend button:hover, .legend button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }
.odds { font-variant-numeric: tabular-nums; color: #ece0c2; }
.odds b { color: var(--gold); }

/* --- game controls: sound toggle + wins tally --- */
.sound-toggle {
  width: auto; font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,215,106,.35); color: var(--ivory);
  border-radius: 999px; padding: 4px 10px;
}
.sound-toggle:hover { border-color: var(--gold); }
.sound-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tally-row { color: #cdbe97; font-size: 14px; }
#tally { color: var(--gold); font-variant-numeric: tabular-nums; }

/* --- win overlay --- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(6, 9, 18, .72); backdrop-filter: blur(3px); animation: overlayIn .25s ease; padding: 16px; }
.overlay[hidden] { display: none; }
.overlay-card { background: linear-gradient(160deg, #26325a, #141a30); border: 1px solid rgba(255,215,106,.4);
  border-radius: 16px; padding: 30px 34px; max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.overlay-title { font-size: clamp(24px, 5vw, 34px); letter-spacing: .04em; color: var(--gold); margin-bottom: 8px; }
.overlay-tally { color: #d9c79a; font-size: 15px; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.overlay-actions { display: flex; gap: 10px; }
.overlay-actions button { flex: 1; width: auto; }
.ghost-btn { font: inherit; padding: 11px 22px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.25); color: var(--ivory); }
.ghost-btn:hover { border-color: var(--gold); color: var(--gold); }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }