/* The Royal Game of Ur. Copyright (C) 2026 MrSuttonmann. GNU AGPL-3.0 or later; see LICENSE. */

/* The board: its slab and squares, route numbers, landing rings, move arrows, safe roses and the board key. */

/* board */
.slab {
  position: relative; align-self: center; padding: 12px; border: 2px solid var(--ink); border-radius: 18px 26px 16px 24px / 24px 16px 26px 18px;
  background:
    radial-gradient(ellipse 45% 70% at 15% 30%, rgba(135,159,102,.7), transparent 70%),
    radial-gradient(ellipse 40% 60% at 85% 75%, rgba(135,159,102,.6), transparent 70%),
    radial-gradient(ellipse 35% 55% at 55% 15%, rgba(214,165,64,.45), transparent 70%),
    radial-gradient(ellipse 30% 50% at 40% 90%, rgba(61,93,142,.25), transparent 70%),
    var(--paper-deep);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6.5px var(--ink-soft), 0 14px 30px -18px rgba(59,42,27,.7);
}
.slab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: multiply; opacity: .9;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='9'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .25 0 0 0 .35 -.05'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}
.board { position: relative; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell); gap: 4px; }
.cell { position: relative; }
.cell svg.tile { position: absolute; inset: -3%; width: 106%; height: 106%; overflow: visible; }
.cell.gap { display: grid; place-items: center; text-align: center; font-family: var(--f-note); font-style: italic; color: var(--ink); font-size: clamp(11px, calc(var(--cell) * .24), 15px); line-height: 1.1; }
.cell.gap.g1 { grid-column: span 2; }
.cell .num {
  position: absolute; top: -5px; left: -4px; z-index: 2; min-width: 17px; padding: 0 3px; text-align: center;
  font-family: var(--f-note); font-size: 12px; line-height: 16px; color: var(--ink); font-variant-numeric: tabular-nums;
  background: var(--bone); border: 1px solid var(--ink-soft); border-radius: 8px 6px 9px 5px;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.show-route .cell .num { opacity: 1; }
/* where the two sides number a cell differently (Masters' route), each number wears its side's colour */
.cell .num.num-sun { border-color: var(--c-sun); color: var(--c-sun); }
.cell .num.num-moon { left: auto; right: -4px; border-color: var(--c-moon); color: var(--c-moon); }
.slot { position: absolute; inset: 0; display: grid; place-items: center; }
.cell.lastto::before {
  content: ""; position: absolute; inset: 2px; border-radius: 40%; pointer-events: none;
  background: radial-gradient(circle, rgba(214,165,64,.7), rgba(214,165,64,0) 70%);
}
.cell.target::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50% 46% 52% 44%; border: 2.5px dashed var(--ink); pointer-events: none;
}
.cell.target.capture::after { border: 3px solid var(--vermilion); }

/* move arrows: dots that march from the counter towards its landing square */
.arrow-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 45; }
.arrow-layer { filter: drop-shadow(0 0 1.5px #fffaf0) drop-shadow(0 0 1px #fffaf0); }
.move-arrow { fill: none; stroke: var(--vermilion); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 7; animation: march .9s linear infinite; }
@keyframes march { to { stroke-dashoffset: -17; } }
@media (prefers-reduced-motion: reduce) { .move-arrow { animation: none; } }
.move-arrowhead { fill: var(--vermilion); }
/* the centre rose is the one safe square: a gold ring sets it apart from the other roses */
.cell.safe-sq { border-radius: 7px; box-shadow: 0 0 0 2.5px var(--ochre), 0 0 0 4px var(--ink); }

/* board key: the painted icons with what each one does */
.key { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 14px; border: 1.5px dashed var(--ink-soft); border-radius: var(--hand); }
.key-title { font-family: var(--f-display); font-size: 17px; flex-basis: 100%; }
.key-item { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.25; min-width: 0; }
.key-item b { font-weight: 600; }
.key-item small { display: block; font-family: var(--f-note); font-style: italic; font-size: 13px; color: var(--ink-soft); }
.key-icons { display: flex; gap: 3px; flex-shrink: 0; }
.key-tile { position: relative; width: 30px; height: 30px; flex-shrink: 0; }
.key-tile svg.tile { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.key-tile.safe-sq { border-radius: 5px; box-shadow: 0 0 0 2px var(--ochre), 0 0 0 3.5px var(--ink); }

.cell .tile .art { transition: opacity .25s; }
.cell.occupied .tile .art { opacity: .28; }

/* in variants where the centre rose isn't safe, it loses its gold ring */
.no-safe .safe-sq { box-shadow: none; }