/* Royal Game of Ur. The board is 3 rows x 8 columns and a container, so
   pieces and numbers scale with it (cqw), as in Reversi. 8 columns fit a
   390px phone at ~44px a square, so there is no vertical layout. A piece
   sizes itself in em from its own font-size. */
.ur { width: min(34rem, 100%); }

.ur-sides { display: flex; gap: 0.6rem; margin: 0 0 0.6rem; }
.ur-side {
  flex: 1; min-width: 0; padding: 0.35rem 0.5rem; border-radius: var(--radius);
  background: var(--paper-2); border: 1px solid var(--line);
}
.ur-side.turn { outline: 2px solid var(--accent); }
.ur-name { display: flex; align-items: center; gap: 0.35rem; font-size: 1rem; min-width: 0; }
.ur-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-you { color: var(--ink-soft); font-size: 0.85rem; }
.ur-name .ur-piece { font-size: 1.3rem; flex: none; }

.ur-tray {
  display: flex; flex-wrap: wrap; gap: 0.15rem; align-items: center; min-height: 1.7rem;
  margin-top: 0.25rem; padding: 0.1rem 0.25rem; border-radius: 6px; font-size: 1.1rem;
}
.ur-tray.done { background: rgb(0 0 0 / 0.06); }
.ur-tray.waiting::before, .ur-tray.done::before {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); margin-right: 0.2rem;
}
.ur-tray.waiting::before { content: "Waiting"; }
.ur-tray.done::before { content: "Home"; }
button.ur-tray {
  border: 0; font: inherit; color: inherit; background: transparent; cursor: pointer;
}
button.ur-tray.legal { background: var(--paper); box-shadow: 0 0 0 3px var(--accent); }
/* Only what can move lights under the pointer: a phone keeps :hover after a
   tap, and a stuck piece that lit up would look picked. */
button.ur-tray.legal:hover { background: #fff; }
button.ur-tray:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Pieces: red solid, blue with a pale centre, so colour isn't the only cue. */
.ur-piece {
  display: inline-block; position: relative; box-sizing: border-box;
  width: 0.7em; height: 0.7em; border-radius: 50%; font-size: 1em;
  box-shadow: 0 0.06em 0.1em rgb(0 0 0 / 0.4);
}
.ur-piece.p0 { background: radial-gradient(circle at 35% 30%, #e0645a, var(--x) 65%); border: 0.05em solid #7d261f; }
.ur-piece.p1 { background: radial-gradient(circle at 35% 30%, #5b9bd3, var(--o) 65%); border: 0.05em solid #1c4466; }
.ur-piece.p1::after {
  content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #f4efe3;
}

/* The dice row is always there, exactly the Roll button's height (both
   fixed, not minimums: a minimum let the button's padding grow the row by a
   sliver), so the board below it never moves (RoyalGameOfUr.Dice). */
.ur-roll { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; height: 3rem; }
.ur-dice { display: flex; gap: 0.35rem; }
/* A die is a tetrahedron's tip seen from above: a triangle, dotted if marked. */
.ur-die {
  position: relative; width: 1.7rem; height: 1.5rem; background: #e8dfc9;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 2px var(--line);
}
.ur-die.marked { background: var(--ink); }
.ur-die.marked::after {
  content: ""; position: absolute; left: 50%; top: 58%; width: 0.4rem; height: 0.4rem;
  margin: -0.2rem 0 0 -0.2rem; border-radius: 50%; background: #fff;
}
.ur-rolled { font-weight: 700; }
.ur-rollbtn {
  margin: 0; padding: 0 2.2rem; font: inherit; font-size: 1.2rem; font-weight: 700; line-height: 1;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: pointer; height: 3rem; box-sizing: border-box;
}
.ur-rollbtn:hover { filter: brightness(1.08); }
.ur-rollbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Counters: each player's at their side, the Pool between, one fixed-height
   row under the dice (RoyalGameOfUr.CounterRow). A number the last move
   changed lifts for a moment. */
.ur-counters {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  height: 2rem; margin: 0; font-size: 0.95rem;
}
/* What the last move did to the counters: the tablet's line and the count.
   Room for the longest (the Swallow's lines) is kept, blank or not, so the
   board doesn't move; a minimum, so a long name grows it rather than
   running into the board. */
.ur-said {
  margin: 0.15rem 0 0.5rem; font-size: 0.85rem; color: var(--ink-soft);
  min-height: 2.9em; min-height: 2lh;
}
@media (max-width: 30rem) { .ur-said { min-height: 4.4em; min-height: 3lh; } }
/* The line before, while no newer move has touched the counters
   (`Counters.earlier`): kept so the room isn't a hole, dimmed so it reads
   as earlier. Not fainter, so it stays readable for older eyes. */
.ur-said.earlier { opacity: 0.55; }
.ur-held { display: flex; align-items: center; gap: 0.3rem; min-width: 0; flex: 1 1 0; }
.ur-held.right { justify-content: flex-end; }
.ur-held .ur-piece { font-size: 1.1rem; flex: none; }
.ur-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.ur-held b, .ur-pool b { font-variant-numeric: tabular-nums; }
.ur-pool {
  flex: none; padding: 0.15rem 0.7rem; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line); white-space: nowrap;
}
.ur-counters .moved b { animation: ur-counted 1.2s ease-out; display: inline-block; }
@keyframes ur-counted {
  0% { transform: scale(1.5); color: var(--accent); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ur-counters .moved b { animation: none; } }

.ur-board {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(8, 1fr);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  user-select: none; -webkit-user-select: none; background: var(--paper);
}
.ur-gap { aspect-ratio: 1; }

.ur-sq {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; box-sizing: border-box; min-width: 0;
  margin: 0; padding: 0; border: 0; font: inherit; color: inherit; line-height: 1;
  background-color: #d9c79c;
  box-shadow: inset 0 0 0 0.35cqw #8a6d3b;
}
.ur-sq.own.p0 { background-color: #e6c9b8; }
.ur-sq.own.p1 { background-color: #bcd0e0; }
.ur-sq.shared { background-color: #ead9ab; }
/* Square numbers (what the labels call them), from data-n. */
.ur-sq::before {
  content: attr(data-n); position: absolute; top: 0.6cqw; left: 0.9cqw;
  font-size: 2.3cqw; font-weight: 700; opacity: 0.55; pointer-events: none;
}
/* A rosette, drawn after the ones inlaid on the board in the British
   Museum: eight pointed petals in a ring round a dot, red and blue by
   turns as the red limestone and lapis are there (Jason: "bright red and
   blue alternating ... to differentiate the function of the rosettes"),
   so they stand out from the one-ink inlays. It fills its square, as there, so a piece (70%
   of a square) covers only the middle and the ring and petal tips still
   show which squares are rosettes, the safe one in the middle row
   included. Jason, 091: "are the rosettes big enough to be seen under the
   pieces?" in the physical game; they are, and ours (a small ✿) weren't. */
.ur-sq.rosette::after {
  content: ""; position: absolute; inset: 4%; pointer-events: none; opacity: 0.85;
  background: center / contain no-repeat url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle r='45.5' fill='none' stroke='%23b5532a' stroke-width='2.6'/><g fill-opacity='.78' stroke='%23f4efe3' stroke-width='1.6' stroke-linejoin='round'><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%23b8432f' transform='rotate(0)'/><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%232b4f9a' transform='rotate(45)'/><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%23b8432f' transform='rotate(90)'/><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%232b4f9a' transform='rotate(135)'/><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%23b8432f' transform='rotate(180)'/><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%232b4f9a' transform='rotate(225)'/><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%23b8432f' transform='rotate(270)'/><path d='M0-41Q11-20.5 0 0Q-11-20.5 0-41Z' fill='%232b4f9a' transform='rotate(315)'/></g><circle r='6.5' fill='%23b8432f' stroke='%23f4efe3' stroke-width='1.6'/></svg>");
}
/* The other squares' inlays (RoyalGameOfUr.inlay), modern line versions
   of the eyes, rings and five-dot designs on the British Museum's board,
   in one soft ink, lighter than the rosettes and kept off the corner
   number, so the squares that matter for play still stand out. */
.ur-sq[class*=" inlay-"]::after {
  content: ""; position: absolute; inset: 15%; pointer-events: none; opacity: 0.32;
  background: center / contain no-repeat var(--inlay);
}
.ur-sq.inlay-eyes { --inlay: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%235a4632' stroke-width='2.6' stroke-linejoin='round'><path d='M-39-22Q-22-36-5-22Q-22-8-39-22Z'/><path d='M5-22Q22-36 39-22Q22-8 5-22Z'/><path d='M-39 22Q-22 8-5 22Q-22 36-39 22Z'/><path d='M5 22Q22 8 39 22Q22 36 5 22Z'/><path d='M0-7L7 0L0 7L-7 0Z'/></g><g fill='%235a4632'><circle cx='-22' cy='-22' r='4'/><circle cx='22' cy='-22' r='4'/><circle cx='-22' cy='22' r='4'/><circle cx='22' cy='22' r='4'/></g></svg>"); }
.ur-sq.inlay-rings { --inlay: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%235a4632' stroke-width='2.6'><circle cx='-25' cy='-25' r='9'/><circle cx='25' cy='-25' r='9'/><circle r='9'/><circle cx='-25' cy='25' r='9'/><circle cx='25' cy='25' r='9'/></g><g fill='%235a4632'><circle cx='-25' cy='-25' r='3.5'/><circle cx='25' cy='-25' r='3.5'/><circle r='3.5'/><circle cx='-25' cy='25' r='3.5'/><circle cx='25' cy='25' r='3.5'/></g></svg>"); }
.ur-sq.inlay-quarters { --inlay: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%235a4632' stroke-width='2.6' stroke-linecap='round'><path d='M0-40V40M-40 0H40'/><rect x='-40' y='-40' width='80' height='80' rx='4'/></g><g fill='%235a4632'><circle cx='-28' cy='-28' r='3'/><circle cx='-12' cy='-28' r='3'/><circle cx='-20' cy='-20' r='3'/><circle cx='-28' cy='-12' r='3'/><circle cx='-12' cy='-12' r='3'/><circle cx='-28' cy='12' r='3'/><circle cx='-12' cy='12' r='3'/><circle cx='-20' cy='20' r='3'/><circle cx='-28' cy='28' r='3'/><circle cx='-12' cy='28' r='3'/><circle cx='12' cy='-28' r='3'/><circle cx='28' cy='-28' r='3'/><circle cx='20' cy='-20' r='3'/><circle cx='12' cy='-12' r='3'/><circle cx='28' cy='-12' r='3'/><circle cx='12' cy='12' r='3'/><circle cx='28' cy='12' r='3'/><circle cx='20' cy='20' r='3'/><circle cx='12' cy='28' r='3'/><circle cx='28' cy='28' r='3'/></g></svg>"); }
.ur-sq.inlay-grid { --inlay: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%235a4632' stroke-width='2.4' stroke-linejoin='round'><rect x='-37' y='-37' width='22' height='22' rx='3'/><rect x='-37' y='-11' width='22' height='22' rx='3'/><rect x='-37' y='15' width='22' height='22' rx='3'/><rect x='-11' y='-37' width='22' height='22' rx='3'/><rect x='-11' y='-11' width='22' height='22' rx='3'/><rect x='-11' y='15' width='22' height='22' rx='3'/><rect x='15' y='-37' width='22' height='22' rx='3'/><rect x='15' y='-11' width='22' height='22' rx='3'/><rect x='15' y='15' width='22' height='22' rx='3'/></g><g fill='%235a4632'><circle cx='-26' cy='-26' r='3.2'/><circle cx='-26' cy='0' r='3.2'/><circle cx='-26' cy='26' r='3.2'/><circle cx='0' cy='-26' r='3.2'/><circle cx='0' cy='0' r='3.2'/><circle cx='0' cy='26' r='3.2'/><circle cx='26' cy='-26' r='3.2'/><circle cx='26' cy='0' r='3.2'/><circle cx='26' cy='26' r='3.2'/></g></svg>"); }
.ur-sq.inlay-star { --inlay: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%235a4632' stroke-width='2.6' stroke-linejoin='round'><rect x='-29' y='-29' width='58' height='58'/><rect x='-29' y='-29' width='58' height='58' transform='rotate(45)'/></g><g fill='%235a4632'><circle cx='-10' cy='-10' r='3.5'/><circle cx='10' cy='-10' r='3.5'/><circle cx='0' cy='0' r='3.5'/><circle cx='-10' cy='10' r='3.5'/><circle cx='10' cy='10' r='3.5'/></g></svg>"); }
/* The Ziggurat, the safe rosette in the middle (095): the same flower,
   crowned with a second ring, fuller petals and a gold ground, so it reads
   as the special one from across the table. Not lapis, as on the real
   board: blue is the second player's colour here. */
.ur-sq.shared.safe { background-color: #ecd27e; }
.ur-sq.rosette.safe::after {
  opacity: 0.95;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle r='46.5' fill='none' stroke='%23b5532a' stroke-width='2.6'/><circle r='40.5' fill='none' stroke='%23b5532a' stroke-width='2.6'/><g fill-opacity='.78' stroke='%23f4efe3' stroke-width='1.6' stroke-linejoin='round'><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%23b8432f' transform='rotate(0)'/><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%232b4f9a' transform='rotate(45)'/><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%23b8432f' transform='rotate(90)'/><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%232b4f9a' transform='rotate(135)'/><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%23b8432f' transform='rotate(180)'/><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%232b4f9a' transform='rotate(225)'/><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%23b8432f' transform='rotate(270)'/><path d='M0-36Q10.5-18 0 0Q-10.5-18 0-36Z' fill='%232b4f9a' transform='rotate(315)'/></g><circle r='6.5' fill='%23b8432f' stroke='%23f4efe3' stroke-width='1.6'/></svg>");
}
.ur-sq.last { box-shadow: inset 0 0 0 0.35cqw #8a6d3b, inset 0 0 0 1cqw var(--accent); }
.ur-sq .ur-piece { font-size: 12.5cqw; z-index: 2; } /* over the route's arrow */

/* What the mover can act on: the piece that moves, and where it lands. */
.ur-sq.legal { cursor: pointer; box-shadow: inset 0 0 0 0.35cqw #8a6d3b, inset 0 0 0 0.9cqw var(--good); }
.ur-sq.legal:not(:has(.ur-piece))::before { color: var(--ink); opacity: 0.9; }
button.ur-sq.legal:hover { filter: brightness(1.12); }
button.ur-sq:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* Landing squares and movable pieces glow, so a kid can see "these" at once. */
.ur-sq.legal { background-image: radial-gradient(circle, rgb(58 138 92 / 0.45) 0 30%, transparent 62%); animation: ur-glow 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ur-sq.legal { animation: none; } }
@keyframes ur-glow { 50% { filter: brightness(1.15); } }

.ur-path { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* The route (091): a solid triangle on each edge a square's route leaves
   by, straddling the seam with the next (`RoyalGameOfUr.RouteMarks`), a
   third see-through: own rows in their owner's colour, the shared row in
   --ink-soft; the shared row's last square has two, one turning up and one
   down. The gaps say where pieces come IN and go OFF. On the seams a piece
   never covers the way out of a square. */
.ur-gap { position: relative; }
.ur-way {
  position: absolute; z-index: 1; width: 3.6cqw; height: 3.6cqw;
  pointer-events: none; opacity: 0.67; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-50%, -50%) rotate(var(--turn, 0deg));
}
.ur-way.left  { left: 0; top: 50%; --turn: 180deg; }
.ur-way.right { left: 100%; top: 50%; --turn: 0deg; }
.ur-way.up    { left: 50%; top: 0; --turn: -90deg; }
.ur-way.down  { left: 50%; top: 100%; --turn: 90deg; }
.ur-way.p0 { color: var(--x); }
.ur-way.p1 { color: var(--o); }
.ur-way.shared { color: var(--ink-soft); }
.ur-gate {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.3cqw; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* The IN gap's ghostly piece: a waiting piece's stand-in on the board, when
   one can come in (RoyalGameOfUr.Gap). Half clear, so it reads as "one of
   those waiting" and not as a piece on a square. */
button.ur-gap {
  display: flex; align-items: center; justify-content: center; min-width: 0; box-sizing: border-box;
  margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: transparent;
}
button.ur-gap:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.ur-gap .ur-piece { font-size: 12.5cqw; z-index: 2; }
.ur-piece.ghost { opacity: 0.5; }

/* Dragging (094, Public/js/drag.js). The piece lifts and its square stays:
   the ghost is the piece alone, a little larger, sized by its own width
   (container-type), since off the board there is no board to size by; the
   square it left keeps its colours with the piece faded. While a piece is
   up only the square it may land on is lit and the rest of the glow rests,
   so "there" reads at once. */
.ur .gn-dragging { opacity: 1; }
.ur .gn-dragging .ur-piece { opacity: 0.3; }
body.gn-drag-active .ur-sq.legal:not(.gn-drop-ready) {
  animation: none; background-image: none; box-shadow: inset 0 0 0 0.35cqw #8a6d3b;
}
.ur-sq.gn-drop-ready { outline: none; box-shadow: inset 0 0 0 0.35cqw #8a6d3b, inset 0 0 0 1cqw var(--accent); }
.ur-gap.gn-drop-ready { outline: none; background: rgb(224 117 45 / 0.15); box-shadow: inset 0 0 0 1cqw var(--accent); }
.ur-sq.gn-drop-over { box-shadow: inset 0 0 0 0.35cqw #8a6d3b, inset 0 0 0 1.6cqw var(--accent); }
.ur-gap.gn-drop-over { background: rgb(224 117 45 / 0.25); box-shadow: inset 0 0 0 1.6cqw var(--accent); }
/* !important: the square's own colours (.ur-sq.own.p0, .legal) outrank a
   ghost rule, and the ghost is the piece alone. */
.gn-drag-ghost.ur-sq, .gn-drag-ghost.ur-gap {
  container-type: inline-size; background: none !important; box-shadow: none !important; animation: none;
}
.gn-drag-ghost.ur-sq::before, .gn-drag-ghost.ur-sq::after { content: none; }
.gn-drag-ghost .ur-way, .gn-drag-ghost .ur-gate { display: none; }
.gn-drag-ghost .ur-piece { font-size: 110cqw; opacity: 1; }

/* The betting house rule on the proposal form (`RoyalGameOfUr.configFields`),
   as every game's house-rule box. */
.ur-config { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.ur-config label { display: block; padding: 0.15rem 0; }