/* ------------------------------------------------------------------ */
/* The table's board: the styles board.js draws with                  */
/* ------------------------------------------------------------------ */

/* Taken from the book's components.css as it stood when the table was
   shaped, as board.js was taken from tablescene.js — so the book can
   restyle its own table without moving anything here. The tiles
   themselves (tiles.css, the tile lab) are still shared. */

/* a discard dropping in, the last one's dot, and the winds in the middle */
.tile.fresh { animation: drop 0.55s var(--ease) both; }
@keyframes drop {
  from { opacity: 0; translate: 0 -55%; scale: 1.18; }
}
.tile.last::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--w) * -0.32);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  translate: -50% 0;
}
.wind {
  position: absolute;
  font-family: var(--kanji);
  font-weight: 700;
  font-size: 4.4cqw;
  line-height: 1;
  color: var(--ink-3);
  opacity: 0.6;
  transition: color 0.5s var(--ease), opacity 0.5s var(--ease);
}
.wind.on { color: var(--red); opacity: 1; }
.w0 { left: 50%; bottom: 1.6cqw; transform: translateX(-50%); }
.w1 { right: 1.6cqw; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.w2 { left: 50%; top: 1.6cqw; transform: translateX(-50%) rotate(180deg); }
.w3 { left: 1.6cqw; top: 50%; transform: translateY(-50%) rotate(90deg); }

/* what the next beat will move, picked out during the words */
.board .cue {
  outline: max(2px, 0.42cqw) solid color-mix(in srgb, var(--red) 85%, transparent);
  outline-offset: max(2px, 0.3cqw);
  animation: cue 1.8s var(--ease-soft) infinite;
}
.board .tile.cue:not(.lift) { translate: 0 calc(var(--th) * -0.12); }
.b-wall.on .stk.cue { translate: 0 -0.6cqw; transition-delay: 0s; }
.b-wall.on .stk.one.cue { translate: 0 calc(var(--dp) - 0.6cqw); }
.b-rack i.cue { outline-offset: max(1px, 0.2cqw); }
@keyframes cue { 50% { outline-color: color-mix(in srgb, var(--red) 45%, transparent); } }

/* curved arrows drawn on the table: whose turn it is, whose was skipped */
.b-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.b-arrows path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.b-arrows .arr { opacity: 0; transition: opacity 0.4s var(--ease); }
.b-arrows .arr.on { opacity: 1; }
.b-arrows .skip path { stroke: var(--ink-3); stroke-width: 0.26; }
.b-arrows .skip .x { stroke: var(--red); stroke-width: 0.4; }
.b-arrows .next path { stroke: var(--red); stroke-width: 0.3; }
.b-arrows .on .ln { animation: arr-draw 0.9s var(--ease) forwards; }
.b-arrows .on .hd { animation: arr-draw 0.3s var(--ease) 0.75s forwards; }
.b-arrows .on .x { animation: arr-draw 0.25s var(--ease) 1.05s forwards; }
.b-arrows .on .x + .x { animation-delay: 1.25s; }
.b-arrows .next.on .ln { animation-delay: 1.5s; }
.b-arrows .next.on .hd { animation-delay: 2.25s; }
@keyframes arr-draw { to { stroke-dashoffset: 0; } }

.ts-wrap {
  position: relative;
  width: var(--ts-w, min(100%, 470px));
  max-width: 100%;
  padding: 26px;
  container-type: inline-size;
}

/* All sizes are fractions of the table's width, so it can grow. The wall
   is a pinwheel of four 17-stack sides; ponds sit inside it, hands outside. */
.board {
  --tw: 4.1cqw;
  --th: calc(var(--tw) * var(--tile-ratio, 1.34));
  --dp: calc(var(--tw) * var(--tile-depth, 0.13));
  --sg: 0.12cqw;
  --L: calc(var(--tw) * 17 + var(--sg) * 16);
  --D: calc(var(--th) + var(--dp) * 2);
  --a: calc((var(--L) + var(--D)) / 2);
  --C: 23cqw;
  --hand-y: calc(var(--a) + 2.2cqw);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4cqw;
  background: color-mix(in srgb, var(--paper-deep) 55%, var(--paper));
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 rgba(255, 255, 255, 0.7);
}
.board .tile {
  box-shadow:
    inset 0 0 0 0.5px rgba(70, 50, 20, 0.12),
    0 calc(var(--w) * var(--tile-lip, 0.055)) 0 0 var(--tile-edge),
    0 calc(var(--w) * var(--tile-depth, 0.13)) 0 0 var(--tile-back),
    0 calc(var(--w) * (var(--tile-depth, 0.13) + 0.01)) calc(var(--w) * 0.2) rgba(60, 40, 15, var(--tile-shadow, 0.14));
  transition: translate 0.5s var(--ease), opacity 0.4s var(--ease);
}
.b-side { position: absolute; inset: 0; pointer-events: none; }
.b-side.s1 { rotate: -90deg; }
.b-side.s2 { rotate: 180deg; }
.b-side.s3 { rotate: 90deg; }
.b-side .tile { pointer-events: auto; }

.b-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--C);
  height: var(--C);
  translate: -50% -50%;
  border-radius: 2.4cqw;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.b-center .wind { font-size: 3.4cqw; }
.b-center .w0 { bottom: 1.4cqw; }
.b-center .w1 { right: 1.4cqw; }
.b-center .w2 { top: 1.4cqw; }
.b-center .w3 { left: 1.4cqw; }

/* discards: in front of each player, inside the wall */
.b-pond {
  position: absolute;
  left: calc(50% - var(--C) / 2);
  top: calc(50% + var(--C) / 2 + 1.1cqw);
  display: grid;
  gap: 0.45cqw;
}
.b-pond .row { display: flex; gap: 0.15cqw; align-items: flex-end; }
.board .tile.hl {
  outline: max(1.5px, 0.32cqw) solid color-mix(in srgb, var(--red) 75%, transparent);
  outline-offset: max(1.5px, 0.3cqw);
  animation: hl 2.6s var(--ease-soft) 0.6s infinite;
}
.board .tile.hl.fresh { animation: drop 0.55s var(--ease) both, hl 2.6s var(--ease-soft) 0.6s infinite; }
@keyframes hl { 50% { outline-color: color-mix(in srgb, var(--red) 30%, transparent); } }

/* the wall */
.b-wall {
  position: absolute;
  left: calc(50% - var(--a));
  top: calc(50% + var(--a) - var(--D));
  display: flex;
  gap: var(--sg);
}
.stk {
  position: relative;
  flex: none;
  width: var(--tw);
  height: var(--th);
  border-radius: calc(var(--tw) * var(--tile-radius, 0.15));
  background: linear-gradient(175deg, var(--tile-back-hi), var(--tile-back));
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.1),
    0 calc(var(--tw) * var(--tile-lip, 0.055)) 0 0 var(--tile-back-edge),
    0 var(--dp) 0 0 var(--tile-edge),
    0 calc(var(--dp) + var(--tw) * var(--tile-lip, 0.055)) 0 0 var(--tile-back-edge),
    0 calc(var(--dp) * 2) 0 0 var(--tile-edge),
    0 calc(var(--dp) * 2 + 0.3cqw) 0.9cqw rgba(60, 40, 15, var(--tile-shadow, 0.14));
  opacity: 0;
  translate: 0 -1cqw;
  transition: opacity 0.35s var(--ease), translate 0.45s var(--ease), margin 0.7s var(--ease);
}
.b-wall.on .stk { opacity: 1; translate: 0 0; transition-delay: calc(var(--k) * 9ms); }
.b-wall:not(.on) .stk { transition-delay: calc((67 - var(--k)) * 5ms); }
/* top tile taken: the one underneath sits a tile's thickness lower */
.b-wall.on .stk.one {
  translate: 0 var(--dp);
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.1),
    0 calc(var(--tw) * var(--tile-lip, 0.055)) 0 0 var(--tile-back-edge),
    0 var(--dp) 0 0 var(--tile-edge),
    0 calc(var(--dp) + 0.3cqw) 0.9cqw rgba(60, 40, 15, var(--tile-shadow, 0.14));
  transition-delay: 0s;
}
.b-wall.on .stk.gone { opacity: 0; transition-delay: 0s; }
/* opened: a small gap where the taking starts */
.b-wall.broken .stk:first-child { margin-left: -1.4cqw; }
.b-wall.broken .stk:nth-child(13) { margin-left: 1.4cqw; }
.stk.next::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.5cqw;
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 50%;
  background: var(--red);
  translate: -50% 0;
  animation: next-dot 2.2s var(--ease-soft) infinite;
}
@keyframes next-dot { 50% { translate: -50% -0.5cqw; opacity: 0.55; } }

/* hands: yours face up, the others' as a row of tile-tops */
.b-hand, .b-rack {
  position: absolute;
  left: calc(50% - 40cqw);
  display: flex;
  align-items: flex-end;
}
.b-hand { top: calc(50% + var(--hand-y)); gap: 0.15cqw; }
.b-hand .tile.drawn { margin-left: 1.3cqw; }
.b-hand .tile.lift { translate: 0 calc(var(--th) * -0.24); }
.b-rack { left: calc(50% - 26cqw); top: calc(50% + var(--a) + 3.6cqw); gap: 0.35cqw; transition: translate 0.6s var(--ease); }
.b-rack i {
  width: calc(var(--tw) * 0.9);
  height: calc(var(--tw) * (var(--tile-depth) * 4));
  border-radius: calc(var(--tw) * var(--tile-radius) * 0.9);
  background: linear-gradient(var(--tile-back) 0 46%, var(--tile-face) 46%);
  box-shadow: 0 1px 1.5px rgba(60, 40, 15, 0.2);
}
.b-rack i.drawn { margin-left: 1.3cqw; }
.b-side.on .b-rack { translate: 0 -0.7cqw; }

/* called sets, from your right-hand corner inwards */
.b-melds {
  position: absolute;
  right: calc(50% - 46cqw);
  top: calc(50% + var(--hand-y));
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 1.2cqw;
}
.b-meld { position: relative; display: flex; align-items: flex-end; gap: 0.15cqw; transition: translate 0.6s var(--ease); }
/* a kan added to a pon: its fourth tile lies on the sideways one */
.b-stack { display: flex; flex-direction: column; gap: 0.15cqw; }
.b-meld.pending { translate: 0 calc(-1 * (var(--th) + 2.6cqw)); }
.b-meld .tile.slot { outline-width: max(1px, 0.25cqw); }

.b-callout {
  position: absolute;
  right: calc(100% + 1.6cqw);
  bottom: 22%;
  font-size: 3.4cqw;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--red);
  pointer-events: none;
  animation: callout 0.7s cubic-bezier(.2,1.4,.4,1) 0.25s both;
}
@keyframes callout {
  from { opacity: 0; scale: 0.4; rotate: -10deg; }
  to { opacity: 1; scale: 1; rotate: -4deg; }
}

/* a riichi stick, just inside the middle on your side */
.b-stick {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% + var(--C) / 2 - 7.2cqw);
  width: 12cqw;
  height: 1.3cqw;
  translate: -50% 0;
  border-radius: 1cqw;
  background: linear-gradient(#fffdf8, #ede5d6);
  box-shadow: 0 0.25cqw 0 #dcd2bf, 0 0.6cqw 1.4cqw rgba(60, 40, 15, 0.16);
  opacity: 0;
  scale: 0.85;
  transition: opacity 0.5s var(--ease), scale 0.6s var(--ease), translate 0.6s var(--ease);
}
.b-stick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7cqw;
  height: 0.7cqw;
  border-radius: 50%;
  background: var(--red);
  translate: -50% -50%;
}
.b-stick.on { opacity: 1; scale: 1; }
.board.locked .b-hand .tile { filter: saturate(0.82) brightness(0.98); }

/* a won hand, laid out in its sets */
.b-group { display: flex; align-items: flex-end; gap: 0.15cqw; margin-right: 1.1cqw; }

/* "closed" over your hand, "open" over your called sets */
.b-label {
  position: absolute;
  top: calc(50% + var(--hand-y) - 2.6cqw);
  font: 500 max(8px, 1.25cqw) / 1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  translate: 0 0.6cqw;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}
.b-label.closed { left: calc(50% - 40cqw); }
.b-label.open { right: calc(50% - 46cqw); color: var(--red); }
.board.labels .b-label { opacity: 1; translate: 0 0; }

.b-callout.free {
  right: auto;
  bottom: auto;
  left: calc(50% + 15cqw);
  top: calc(50% + var(--hand-y) - 6.4cqw);
  animation: none;
  opacity: 0;
}
.b-callout.free.on { animation: callout 0.7s cubic-bezier(.2,1.4,.4,1) 0.15s both; }

/* things in flight between places */
.b-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.b-fx > * { position: absolute; left: 0; top: 0; margin: 0; will-change: transform; }

@media (max-width: 560px) {
  .ts-wrap { padding: 22px; }
}