/* ------------------------------------------------------------------ */
/* A tile: ivory face, a sliver of edge, a jade back peeking under.    */
/* Size is driven by --tw (tile width) inherited from any ancestor.    */
/* Its shape and colours come from the theme (src/tile-theme.js):      */
/* the body numbers are fractions of the tile's width.                 */
/* ------------------------------------------------------------------ */

:root {
  --tile-ratio: 1.34;   /* height ÷ width */
  --tile-radius: 0.15;  /* corner radius */
  --tile-lip: 0.055;    /* the face-coloured band under the face */
  --tile-depth: 0.13;   /* visible thickness, back colour included */
  --tile-shadow: 0.14;  /* soft drop shadow strength */
}

.tile {
  --w: var(--tw, 40px);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--w);
  height: calc(var(--w) * var(--tile-ratio));
  margin: 0 0 calc(var(--w) * var(--tile-depth));
  padding: 0;
  border: 0;
  border-radius: calc(var(--w) * var(--tile-radius));
  background: linear-gradient(175deg, var(--tile-face) 30%, var(--tile-face-lo));
  box-shadow:
    inset 0 0 0 0.5px rgba(70, 50, 20, 0.12),
    0 calc(var(--w) * var(--tile-lip)) 0 0 var(--tile-edge),
    0 calc(var(--w) * var(--tile-depth)) 0 0 var(--tile-back),
    0 calc(var(--w) * (var(--tile-depth) + 0.05)) calc(var(--w) * 0.3) rgba(60, 40, 15, var(--tile-shadow));
  vertical-align: bottom;
  transition:
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease),
    opacity 0.45s var(--ease),
    filter 0.45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.tile .face { position: absolute; inset: 0; display: block; }
.tile svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tile .idx {
  font: 650 9px var(--sans);
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
html.hints .tile .idx { opacity: 0.5; }

/* sideways — a called tile, or a riichi discard */
.tile.side { width: calc(var(--w) * var(--tile-ratio)); height: var(--w); }
.tile.side .face {
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: calc(var(--w) * var(--tile-ratio));
  translate: -50% -50%;
  rotate: -90deg;
}

/* face down */
.tile.back,
.tile.as-back {
  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),
    inset 0 0 0 calc(var(--w) * 0.07) rgba(255, 255, 255, 0.06),
    0 calc(var(--w) * var(--tile-lip)) 0 0 var(--tile-back-edge),
    0 calc(var(--w) * var(--tile-depth)) 0 0 var(--tile-edge),
    0 calc(var(--w) * (var(--tile-depth) + 0.05)) calc(var(--w) * 0.3) rgba(60, 40, 15, var(--tile-shadow));
}
.tile.as-back .face { opacity: 0; }

/* an empty place where a tile should go */
.tile.slot {
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed var(--ink-3);
  outline-offset: -1.5px;
  animation: slot 3.2s var(--ease-soft) infinite;
}
@keyframes slot {
  0%, 100% { outline-color: color-mix(in srgb, var(--ink-3) 90%, transparent); }
  50% { outline-color: color-mix(in srgb, var(--ink-3) 35%, transparent); }
}

/* ------------------------------------------------------------------ */
/* Rows of tiles                                                       */
/* ------------------------------------------------------------------ */

.hand {
  --g: max(2px, calc(var(--tw, 40px) * 0.06));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  column-gap: calc(var(--tw, 40px) * 0.42);
  row-gap: calc(var(--tw, 40px) * 0.5);
}
.hand .group { display: inline-flex; align-items: flex-end; gap: var(--g); position: relative; }
.hand .group.win { margin-left: calc(var(--tw, 40px) * 0.12); }
/* the winning tile: a small red dot above it */
.hand .group.win::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--tw, 40px) * -0.3);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  translate: -50% 0;
  opacity: 0.8;
}
.hand .group.hl::after,
.hand .group.open::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: calc(var(--tw, 40px) * -0.3);
  height: 1.5px;
  border-radius: 2px;
  background: var(--red);
  opacity: 0.55;
}
.hand .group.open::after { background: var(--ink-3); opacity: 0.4; }
.hand.tight { column-gap: var(--g); }

/* a labelled row (1…9) */
.row-labels {
  display: flex;
  justify-content: center;
  gap: var(--g, 4px);
  margin-top: 10px;
}
.row-labels span {
  width: var(--tw);
  flex: none;
  text-align: center;
  font: 500 11px/1.3 var(--sans);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.row-labels .jp { display: block; font-style: normal; font-size: 14px; color: var(--ink-2); margin-bottom: 2px; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Pressable tiles                                                     */
/* ------------------------------------------------------------------ */

button.tile { cursor: pointer; }
button.tile:hover:not(:disabled) {
  transform: translateY(calc(var(--w) * -0.1));
  box-shadow:
    inset 0 0 0 0.5px rgba(70, 50, 20, 0.12),
    0 calc(var(--w) * var(--tile-lip)) 0 0 var(--tile-edge),
    0 calc(var(--w) * var(--tile-depth)) 0 0 var(--tile-back),
    0 calc(var(--w) * (var(--tile-depth) + 0.23)) calc(var(--w) * 0.42) rgba(60, 40, 15, calc(var(--tile-shadow) * 0.93));
}
button.tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
button.tile:disabled { cursor: default; }
.tile.dim { opacity: 0.38; filter: saturate(0.6); }
.tile.lift { transform: translateY(calc(var(--w) * -0.22)); }

/* ------------------------------------------------------------------ */
/* Ambient: arrival + breathing                                        */
/* ------------------------------------------------------------------ */

.js .in .tile:not(.settled) {
  animation: tile-arrive 0.75s var(--ease) backwards;
  animation-delay: calc(var(--ti, 0) * 34ms + 160ms);
}
@keyframes tile-arrive {
  from { opacity: 0; translate: 0 calc(var(--w) * -0.22); rotate: -1.5deg; }
}

.breathe .tile {
  animation: tile-breathe var(--p, 9s) ease-in-out var(--d, 0s) infinite;
}
.js .in.breathe .tile:not(.settled),
.js .in .breathe .tile:not(.settled) {
  animation:
    tile-breathe var(--p, 9s) ease-in-out var(--d, 0s) infinite,
    tile-arrive 0.75s var(--ease) calc(var(--ti, 0) * 34ms + 160ms) backwards;
}
@keyframes tile-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(-1.2px * var(--alive)); }
}

/* a single tile, now and then, settling in its place */
.tile.nudge { animation: nudge 1.6s var(--ease-soft); }
@keyframes nudge {
  30% { rotate: calc(0.9deg * var(--alive)); }
  70% { rotate: calc(-0.35deg * var(--alive)); }
}