/* Oink! Mahjong — the in-game table (js/ui/table.js) and its controls (js/ui/controls.js).
   Everything is drawn in 1600x900 stage pixels. Layers, bottom to top:
   venue, table (rim + felt), compass, tiles, hud (panels, bubbles), piggies, controls, fx. */

.tt {
  --tt-rim-a: #c98a52;
  --tt-rim-b: #8d5a2f;
  --tt-rim-c: #6a3f1f;
  --tt-felt-a: #74c08e;
  --tt-felt-b: #4f9f6c;
  --tt-felt-c: #3c8759;
  --tt-felt-line: rgba(255, 255, 255, .13);
  --tt-ink: #4a2c23;
  --tt-glow: #ffd54a;
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  color: var(--tt-ink);
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  -webkit-user-select: none;
  user-select: none;
}
.tt[data-venue="teahouse"] {
  --tt-rim-a: #7a4a2c;
  --tt-rim-b: #4d2c18;
  --tt-rim-c: #2f190c;
  --tt-felt-a: #2f8f8a;
  --tt-felt-b: #1d6f6c;
  --tt-felt-c: #155653;
  --tt-felt-line: rgba(200, 255, 245, .12);
}
.tt[data-venue="palace"] {
  --tt-rim-a: #ffe08a;
  --tt-rim-b: #d9a634;
  --tt-rim-c: #8f6412;
  --tt-felt-a: #c43a4e;
  --tt-felt-b: #a3243a;
  --tt-felt-c: #7f1a2c;
  --tt-felt-line: rgba(255, 220, 160, .14);
}

.tt-venue, .tt-tiles, .tt-hud, .tt-piggies, .tt-controls, .tt-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
}
.tt-venue { z-index: 0; background: #7fa66a url("../assets/venues/meadow.jpg") center / cover no-repeat; }
.tt[data-venue="teahouse"] .tt-venue { background-color: #5b4632; background-image: url("../assets/venues/teahouse.jpg"); }
.tt[data-venue="palace"] .tt-venue { background-color: #6d2a2a; background-image: url("../assets/venues/palace.jpg"); }
/* a soft vignette keeps the scene behind the table calm */
.tt-venue::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 62% 70% at 50% 52%, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, .2) 100%);
}

/* ---- table: rim + felt (felt area = 340,94 920 wide, running off the bottom) ---- */
.tt-table {
  position: absolute;
  z-index: 1;
  left: 322px;
  top: 76px;
  width: 956px;
  height: 880px;
  border-radius: 58px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30px),
    linear-gradient(135deg, var(--tt-rim-a) 0%, var(--tt-rim-b) 45%, var(--tt-rim-a) 70%, var(--tt-rim-c) 100%);
  box-shadow:
    0 34px 60px rgba(20, 8, 0, .5),
    0 10px 20px rgba(20, 8, 0, .35),
    0 0 0 2px rgba(0, 0, 0, .22);
}
.tt-rim {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: inherit;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.tt[data-venue="palace"] .tt-rim {
  /* studded gold trim */
  background: radial-gradient(circle, rgba(255, 250, 220, .9) 0 2.2px, rgba(0, 0, 0, 0) 2.8px) 0 0 / 30px 30px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 5px;
  opacity: .5;
}
.tt-felt {
  position: absolute;
  left: 18px; top: 18px; right: 18px; bottom: 18px;
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .025) 0 2px, rgba(255, 255, 255, .02) 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .02) 0 2px, rgba(255, 255, 255, .015) 2px 4px),
    radial-gradient(ellipse 90% 80% at 50% 45%, var(--tt-felt-a) 0, var(--tt-felt-b) 60%, var(--tt-felt-c) 100%);
  box-shadow:
    inset 0 10px 22px rgba(0, 0, 0, .38),
    inset 0 0 0 2px rgba(0, 0, 0, .18),
    inset 0 0 60px rgba(0, 0, 0, .18);
}
/* a faint stitched ring behind the wall */
.tt-felt-mark {
  position: absolute;
  left: 158px; top: 44px;
  width: 604px; height: 604px;
  border-radius: 40px;
  border: 2px dashed var(--tt-felt-line);
}
.tt-felt-mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 250px; height: 250px;
  margin: -125px 0 0 -125px;
  border-radius: 50%;
  border: 2px solid var(--tt-felt-line);
  box-shadow: 0 0 0 14px rgba(255, 255, 255, .03);
}

/* ---- centre compass ---- */
.tt-compass {
  position: absolute;
  z-index: 2;
  left: 730px;
  top: 370px;
  width: 140px;
  height: 140px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #fffaf0, #f3e3c3);
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, .12),
    0 0 0 7px rgba(255, 248, 230, .55),
    0 10px 22px rgba(0, 0, 0, .35),
    inset 0 -4px 0 rgba(150, 110, 60, .25);
  opacity: 0;
  transition: opacity .4s ease;
}
.tt-compass.is-live { opacity: 1; }
.tt-cmp-core {
  position: absolute;
  left: 22px; top: 22px; right: 22px; bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(to bottom, #2c5a45, #1d4232);
  color: #fff4dc;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .6);
  text-align: center;
  line-height: 1;
}
.tt[data-venue="palace"] .tt-cmp-core { background: linear-gradient(to bottom, #6e1726, #4b0f1b); }
.tt[data-venue="teahouse"] .tt-cmp-core { background: linear-gradient(to bottom, #174d4b, #0f3534); }
.tt-cmp-round { font: 700 9.5px/1 var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.tt-cmp-glyph {
  margin: 3px 0 1px;
  font: 900 34px/1 var(--font-cn, serif);
  color: #ffd86b;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.tt-cmp-hand { font: 700 11px/1 var(--font-body, sans-serif); }
.tt-cmp-hand em { font-style: normal; color: #ffd86b; }
.tt-cmp-foot { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 4px; }
/* tiles left in the wall: the number that drives late-hand defence */
.tt-cmp-left {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 1px 5px 2px;
  border-radius: 8px;
  font: 800 17px/1 var(--font-body, sans-serif);
  font-variant-numeric: tabular-nums;
  transition: color .3s ease, background-color .3s ease;
}
.tt-cmp-left small { font: 800 9.5px/1 var(--font-body, sans-serif); letter-spacing: .04em; opacity: .8; }
.tt-cmp-left i {
  align-self: center;
  width: 8px; height: 11px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #3fbd8b 0 70%, #fff3d6 70%);
}
.tt-cmp-left.is-low { color: #ffd86b; background: rgba(255, 216, 107, .14); animation: tt-low 1.6s ease-in-out infinite; }
.tt-cmp-left.is-last { color: #ff8aa3; background: rgba(255, 138, 163, .18); animation: tt-low .9s ease-in-out infinite; }
@keyframes tt-low {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 107, 0); }
  50% { box-shadow: 0 0 8px 1px rgba(255, 216, 107, .45); }
}
.tt-dice { display: inline-flex; gap: 2px; transform: scale(.75); transform-origin: 50% 0; margin-bottom: -3px; }
.tt-compass.is-dealt .tt-dice { display: none; }
.tt-die {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 3px;
  background: #fffaf0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.tt-die b {
  position: absolute;
  width: 2.4px; height: 2.4px;
  border-radius: 50%;
  background: #3a2019;
}
.tt-die[data-n="1"] b, .tt-die[data-n="4"] b:nth-child(1) { background: #d8323f; }
.tt-die[data-n="1"] b { left: 3.6px; top: 3.6px; width: 3.6px; height: 3.6px; margin: 0; }
.tt-die[data-n="2"] b:nth-child(1), .tt-die[data-n="3"] b:nth-child(1) { left: 1.8px; top: 1.8px; }
.tt-die[data-n="2"] b:nth-child(2), .tt-die[data-n="3"] b:nth-child(3) { right: 1.8px; bottom: 1.8px; }
.tt-die[data-n="3"] b:nth-child(2) { left: 4.3px; top: 4.3px; }
.tt-die[data-n="4"] b:nth-child(1), .tt-die[data-n="5"] b:nth-child(1), .tt-die[data-n="6"] b:nth-child(1) { left: 1.8px; top: 1.8px; }
.tt-die[data-n="4"] b:nth-child(2), .tt-die[data-n="5"] b:nth-child(2), .tt-die[data-n="6"] b:nth-child(2) { right: 1.8px; top: 1.8px; }
.tt-die[data-n="4"] b:nth-child(3), .tt-die[data-n="5"] b:nth-child(3), .tt-die[data-n="6"] b:nth-child(3) { left: 1.8px; bottom: 1.8px; }
.tt-die[data-n="4"] b:nth-child(4), .tt-die[data-n="5"] b:nth-child(4), .tt-die[data-n="6"] b:nth-child(4) { right: 1.8px; bottom: 1.8px; }
.tt-die[data-n="4"] b { background: #3a2019; }
.tt-die[data-n="4"] b:nth-child(1) { background: #3a2019; }
.tt-die[data-n="5"] b:nth-child(5) { left: 4.3px; top: 4.3px; }
.tt-die[data-n="6"] b:nth-child(5) { left: 1.8px; top: 4.3px; }
.tt-die[data-n="6"] b:nth-child(6) { right: 1.8px; top: 4.3px; }

/* the four wind plates around the core; the active one glows and points at its seat */
.tt-cmp-side {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font: 900 14px/1 var(--font-cn, serif);
  color: #8a6a4a;
  transition: color .25s ease, transform .25s ease;
}
.tt-cmp-side[data-r="0"] { left: 59px; bottom: 0; }
.tt-cmp-side[data-r="1"] { right: 0; top: 59px; transform: rotate(-90deg); }
.tt-cmp-side[data-r="2"] { left: 59px; top: 0; transform: rotate(180deg); }
.tt-cmp-side[data-r="3"] { left: 0; top: 59px; transform: rotate(90deg); }
.tt-cmp-side.is-dealer { color: #c0392b; }
.tt-cmp-side::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -9px;
  width: 0; height: 0;
  margin-left: -9px;
  border: 9px solid transparent;
  border-bottom: 0;
  border-top: 9px solid var(--tt-glow);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 200, 40, .9));
  transition: opacity .25s ease;
}
.tt-cmp-side.is-active { color: #e0402f; }
.tt-cmp-side.is-active::before { opacity: 1; animation: tt-point 1s ease-in-out infinite; }
.tt-cmp-side.is-active::after {
  content: '';
  position: absolute;
  left: -40px; right: -40px; bottom: -3px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 213, 74, 0), var(--tt-glow), rgba(255, 213, 74, 0));
  box-shadow: 0 0 10px 2px rgba(255, 200, 40, .7);
}
@keyframes tt-point {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---- tiles ---- */
.tt-tiles { z-index: 3; pointer-events: none; }
.tt-tile {
  position: absolute;
  left: 0;
  top: 0;
}
/* every table tile keeps its own compositor layer (as before this round): flights and hand shifts stay
   compositor-only */
.tt-tile { will-change: transform; }
.tt-tile.tt-mine { pointer-events: auto; cursor: pointer; touch-action: none; }
.tt-tile.tt-o2 .tf > .tile-art { transform: rotate(180deg); }
.tt-tile.t-side.tt-o3 .tf > .tile-art { transform: translate(-50%, -50%) rotate(90deg); }
.tt-tile.t-wall > .tb { box-shadow: 0 1px 1px rgba(20, 10, 0, .35), 0 2px 3px rgba(20, 10, 0, .2); }
.tt-tile.t-edge > .tb { box-shadow: 0 2px 2px rgba(20, 10, 0, .3), 0 5px 8px -2px rgba(20, 10, 0, .4); }
.tt-tile.tt-revealed > .tb { animation: tt-reveal .5s cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes tt-reveal {
  0% { transform: scaleY(.1); filter: brightness(1.6); }
  100% { transform: scaleY(1); }
}
.tt-tile.is-dragging > .tb { transition: none; }
.tt-tile.is-dragging { cursor: grabbing; }
.tt-tile.is-armed > .tb {
  box-shadow: 0 0 0 2.5px #ff7a95, 0 0 18px 6px rgba(255, 111, 142, .6), 0 18px 16px -6px rgba(20, 10, 0, .4);
}
.tt-tile.tc-glow > .tb { animation: tile-win 1.4s ease-in-out infinite; }
/* hand tiles a hovered claim / kong button would use */
.tt-tile.tc-uses { --t-lift: calc(var(--th) * -.14); }
.tt-tile.tc-uses > .tb { box-shadow: var(--t-shadow), 0 0 0 2.5px #7fe0bd, 0 0 14px 4px rgba(67, 214, 177, .6); }
.tt-tile.tt-mine.is-pickable:not(.is-selected) > .tb { transition: transform .16s cubic-bezier(.3, 1.45, .55, 1), box-shadow .2s ease; }
.tt-tile.tt-mine.is-selected { z-index: 8999 !important; }

/* flower rows sit on a small tray hanging off their seat's panel (in the tile layer, under the tiles) */
.tt-flower-tray {
  position: absolute;
  z-index: 3990;
  width: 40px;
  border-radius: 12px;
  background: rgba(255, 250, 240, .88);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 8px 16px rgba(30, 12, 4, .3);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s ease, transform .3s var(--ease-pop, ease), width .3s ease;
}
.tt-flower-tray.is-on { opacity: 1; transform: none; }
.tt-flower-tray-r0 { border-radius: 12px 12px 4px 4px; transform-origin: 20% 100%; }
.tt-flower-tray-r1, .tt-flower-tray-r3 { border-radius: 4px 4px 12px 12px; transform-origin: 20% 0; }
.tt-flower-tray-r2 { border-radius: 4px 12px 12px 4px; transform-origin: 0 50%; }

/* hand-start banner: your seat wind, the dealer, and a new round */
.tt-hand-banner {
  position: absolute;
  left: 800px;
  top: 250px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 22px 11px;
  border-radius: 20px;
  background: rgba(255, 250, 240, .95);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 5px rgba(242, 182, 50, .6), 0 12px 24px rgba(30, 12, 4, .35);
  color: var(--tt-ink);
  white-space: nowrap;
  transform: translateX(-50%);
  animation: tt-banner-in .45s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.tt-hand-banner.is-leaving { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translate(-50%, -12px); }
.tt-hb-round { font: 700 30px/1 var(--font-display, "Fredoka", sans-serif); color: #d8323f; }
.tt-hb-line { font: 600 19px/1 var(--font-display, "Fredoka", sans-serif); }
@keyframes tt-banner-in {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(.8); }
  100% { opacity: 1; transform: translateX(-50%); }
}

/* ---- hud: avatar panels ---- */
.tt-hud { z-index: 4; pointer-events: none; }
.tt-panel {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 24px;
  background: linear-gradient(to bottom, rgba(255, 250, 240, .96), rgba(250, 236, 214, .96));
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .7),
    0 0 0 5px rgba(120, 80, 50, .18),
    0 12px 24px rgba(30, 12, 4, .35);
  transition: box-shadow .3s ease, transform .3s var(--ease-pop, ease);
}
.tt-panel.is-turn {
  box-shadow:
    0 0 0 3px #ffe07a,
    0 0 0 6px rgba(242, 182, 50, .55),
    0 0 26px 6px rgba(255, 200, 60, .55),
    0 12px 24px rgba(30, 12, 4, .35);
}
.tt-panel-r1, .tt-panel-r3 {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  text-align: center;
}
.tt-panel-r2 { padding: 5px 16px 5px 6px; gap: 10px; border-radius: 22px; }
.tt-avatar { position: relative; flex: none; line-height: 0; }
.tt-avatar .pig-portrait {
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--pig-color, #f7a1b8), 0 4px 10px rgba(80, 40, 30, .3);
}
.tt-panel.is-turn .tt-avatar .pig-portrait { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold, #f2b632), 0 4px 12px rgba(242, 160, 30, .5); }
.tt-pinfo { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tt-panel-r1 .tt-pinfo, .tt-panel-r3 .tt-pinfo { align-items: center; }
.tt-panel-r2 .tt-pinfo { flex-direction: row; align-items: center; gap: 10px; }
.tt-name {
  font: 600 22px/1 var(--font-display, "Fredoka", sans-serif);
  color: var(--tt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.tt-panel-r2 .tt-name { font-size: 20px; max-width: 120px; }
.tt-badges { display: flex; align-items: center; gap: 5px; }
.tt-wind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px 0 3px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #e3cfae;
  font: 800 12px/1 var(--font-body, sans-serif);
  color: var(--choc-soft, #7b5b4c);
}
.tt-wind b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #2e9e6b;
  color: #fff;
  font: 900 12px/1 var(--font-cn, serif);
}
.tt-dealer {
  display: none;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px 0 4px;
  border-radius: 12px;
  background: linear-gradient(to bottom, #ff6a5c, #d8323f);
  color: #fff;
  font: 900 14px/1 var(--font-cn, serif);
  box-shadow: 0 2px 0 #a3222d;
}
.tt-dealer small { font: 800 11px/1 var(--font-body, sans-serif); }
.tt-panel.is-dealer .tt-dealer { display: inline-flex; }
.tt-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 21px/1 var(--font-display, "Fredoka", sans-serif);
  color: #9a6a10;
  font-variant-numeric: tabular-nums;
}
.tt-panel-r2 .tt-coins { font-size: 19px; }
.tt-coin {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b8 0, #ffd24a 35%, #e0a216 75%, #b87c08 100%);
  box-shadow: 0 1px 0 #8a5c04, inset 0 0 0 2px rgba(255, 255, 255, .25);
  position: relative;
}
.tt-coin::after {
  content: '';
  position: absolute;
  left: 7px; top: 7px;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: rgba(150, 95, 6, .7);
}

/* thinking dots: a little cloud by the avatar on a bot's turn */
.tt-think {
  position: absolute;
  right: -12px; top: -6px;
  display: flex;
  gap: 3px;
  padding: 6px 7px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(40, 20, 10, .3);
  opacity: 0;
  transform: scale(.4);
  transform-origin: 0 100%;
  transition: opacity .2s ease, transform .25s var(--ease-pop, ease);
  z-index: 2;
}
.tt-think i {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #d9bfa4;
}
/* the red of the bounce is a fading layer: transform + opacity only, so the dots never repaint the HUD,
   and they only run while the cloud is shown */
.tt-think i::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background: #e5484d;
  opacity: 0;
}
.tt-panel.is-thinking .tt-think i { animation: tt-dot 1s ease-in-out infinite; }
.tt-panel.is-thinking .tt-think i::after { animation: tt-dot-red 1s ease-in-out infinite; }
.tt-panel.is-thinking .tt-think i:nth-child(2), .tt-panel.is-thinking .tt-think i:nth-child(2)::after { animation-delay: .15s; }
.tt-panel.is-thinking .tt-think i:nth-child(3), .tt-panel.is-thinking .tt-think i:nth-child(3)::after { animation-delay: .3s; }
.tt-panel.is-thinking .tt-think { opacity: 1; transform: scale(1); }
@keyframes tt-dot {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}
@keyframes tt-dot-red {
  0%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* ---- speech bubbles ---- */
.tt-bubble {
  position: absolute;
  z-index: 3;
  max-width: 280px;
  padding: 10px 16px 11px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 3px var(--pig-color, #f7a1b8), 0 10px 20px rgba(30, 12, 4, .3);
  font: 600 19px/1.2 var(--font-display, "Fredoka", sans-serif);
  color: var(--tt-ink);
  animation: tt-bubble-in .35s cubic-bezier(.2, 1.5, .4, 1) backwards;
}
.tt-bubble::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 0 var(--pig-color, #f7a1b8);
  transform: rotate(45deg);
}
.tt-bubble.is-leaving { animation: tt-bubble-out .25s ease-in forwards; }
.tt-bubble-r0 { left: 40px; bottom: 192px; transform-origin: 20% 100%; }
.tt-bubble-r0::after { left: 42px; bottom: -8px; }
.tt-bubble-r1 { right: 36px; bottom: 626px; transform-origin: 80% 100%; }
.tt-bubble-r1::after { right: 90px; bottom: -8px; }
.tt-bubble-r3 { left: 36px; bottom: 626px; transform-origin: 20% 100%; }
.tt-bubble-r3::after { left: 90px; bottom: -8px; }
.tt-bubble-r2 { right: 1016px; top: 14px; transform-origin: 100% 50%; }
.tt-bubble-r2::after { right: -8px; top: 20px; box-shadow: 3px -3px 0 0 var(--pig-color, #f7a1b8); transform: rotate(45deg); }
@keyframes tt-bubble-in {
  0% { opacity: 0; transform: scale(.4) translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@keyframes tt-bubble-out {
  to { opacity: 0; transform: scale(.85) translateY(-6px); }
}

/* coin change floating off a panel */
.tt-delta {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  font: 700 38px/1 var(--font-display, "Fredoka", sans-serif);
  -webkit-text-stroke: 7px #fff;
  paint-order: stroke fill;
  text-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  animation: tt-delta 2.4s cubic-bezier(.2, .8, .3, 1) forwards;
  white-space: nowrap;
}
.tt-delta.is-plus { color: #1f9a5e; }
.tt-delta.is-minus { color: #d8323f; }
@keyframes tt-delta {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  25% { transform: translate(-50%, -70%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* a piggy flipped one of the human's tiles: the tile's own tag is replaced by one in the fx layer */
.tt-tile.is-exposed::after { display: none; }
.tt-exposed-tag {
  position: absolute;
  padding: 6px 10px 5px;
  border: 2.5px solid #fff;
  border-radius: 10px;
  background: #e8364f;
  color: #fff;
  font: 900 15px/1 var(--font-body, sans-serif);
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%) rotate(5deg);
  animation: tt-tag-in .45s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
@keyframes tt-tag-in {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(5deg) scale(1); }
}

/* a piggy peeked at an opponent's tile */
.tt-peek {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%) rotate(-6deg);
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 3px #ff7a95, 0 12px 24px rgba(0, 0, 0, .35);
  animation: tt-peek-in .4s cubic-bezier(.2, 1.5, .4, 1) backwards;
}
.tt-peek::before {
  content: 'PEEK!';
  position: absolute;
  left: 50%; top: -16px;
  transform: translateX(-50%) rotate(4deg);
  padding: 3px 8px;
  border-radius: 8px;
  background: #e5484d;
  color: #fff;
  font: 800 12px/1 var(--font-body, sans-serif);
  white-space: nowrap;
}
.tt-peek.is-leaving { transition: opacity .3s ease, transform .3s ease; opacity: 0; transform: translate(-50%, -80%) rotate(-6deg); }
@keyframes tt-peek-in {
  0% { opacity: 0; transform: translate(-50%, -20%) rotate(-30deg) scale(.3); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
}

.tt-piggies { z-index: 5; pointer-events: none; }
.tt-fx { z-index: 7; pointer-events: none; }

/* ======================================================= controls (tc-*) */

.tt-controls { z-index: 6; pointer-events: none; }
.tt-controls > * { pointer-events: auto; }

/* toolbar, top right */
.tc-toolbar {
  position: absolute;
  right: 16px;
  top: 14px;
  display: flex;
  gap: 8px;
}
.tc-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(to bottom, #fffaf0, #f4e3c6);
  box-shadow: 0 4px 0 #d7bb8f, 0 8px 16px rgba(30, 12, 4, .3), inset 0 1px 0 #fff;
  color: var(--tt-ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tc-tool:hover { transform: translateY(-2px); }
.tc-tool:active { transform: translateY(3px); box-shadow: 0 1px 0 #d7bb8f, 0 3px 8px rgba(30, 12, 4, .3), inset 0 1px 0 #fff; }
.tc-tool:focus-visible, .tc-btn:focus-visible, .tc-hint-btn:focus-visible { outline: 3px solid #43b0ff; outline-offset: 2px; }
.tc-ico { width: 28px; height: 28px; line-height: 0; }
.tc-ico svg, .tc-hint-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tc-ico svg .fill, .tc-hint-btn svg .fill { fill: currentColor; stroke: none; }
.tc-tool-label { font: 800 10.5px/1 var(--font-body, sans-serif); letter-spacing: .02em; white-space: nowrap; }
.tc-tool.is-off { color: #a58b78; }
.tc-tool.is-locked { opacity: .6; cursor: default; }
.tc-tool.is-locked:hover { transform: none; }
.tc-tool-hints:not(.is-off) .tc-ico { color: #e3a117; }
.tc-tool-speed[data-level="1"] .tc-ico { color: #2e9e6b; }
.tc-tool-speed[data-level="2"] .tc-ico { color: #e5484d; }

/* hint / status line above the hand */
.tc-status {
  position: absolute;
  left: 346px;
  top: 734px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 908px;
  height: 44px;
  padding: 0 14px 0 6px;
  border-radius: 22px;
  background: rgba(255, 250, 240, .94);
  box-shadow: 0 6px 14px rgba(20, 8, 0, .3), 0 0 0 2px rgba(255, 255, 255, .6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.tc-status.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.tc-status-text {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  font: 700 15px/1 var(--font-body, sans-serif);
  color: var(--choc-soft, #7b5b4c);
  white-space: nowrap;
}
.tc-status.no-hint { padding-left: 14px; }
/* 'Your turn' pill at the head of the hint line (on your discard turn) */
.tc-turn-pill {
  display: none;
  flex: none;
  padding: 7px 12px 8px;
  border-radius: 16px;
  background: linear-gradient(to bottom, #ff8aa3, #e5486b);
  box-shadow: 0 2px 0 #b8304f;
  color: #fff;
  font: 600 17px/1 var(--font-display, "Fredoka", sans-serif);
  white-space: nowrap;
}
.tc-status.is-myturn .tc-turn-pill { display: block; animation: tc-pill-in .45s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.tc-status.is-myturn .tc-turn-pill + .tc-hint-btn { margin-left: -4px; }
@keyframes tc-pill-in {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.tc-shanten { font: 600 17px/1 var(--font-display, "Fredoka", sans-serif); color: var(--tt-ink); }
.tc-status[data-level="ready"] .tc-shanten { color: #1f9a5e; }
.tc-status[data-level="win"] .tc-shanten { color: #d08a00; }
.tc-status[data-level="ready"] { box-shadow: 0 6px 14px rgba(20, 8, 0, .3), 0 0 0 2.5px #43d6b1, 0 0 14px 2px rgba(67, 214, 177, .45); }
.tc-status[data-level="win"] { box-shadow: 0 6px 14px rgba(20, 8, 0, .3), 0 0 0 2.5px #ffd54a, 0 0 16px 3px rgba(255, 200, 40, .6); }
.tc-sep { color: #9a7d6a; }
.tc-dim { color: #b39b88; font-weight: 700; font-size: 13px; }
.tc-useful { display: inline-flex; align-items: center; gap: 2px; }
.tc-more { margin-left: 3px; cursor: help; }
.tc-out { display: inline-flex; align-items: center; gap: 6px; }
.tc-wait { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.tc-wait-left { font: 800 13px/1 var(--font-body, sans-serif); color: #1f7a51; }
.tc-wait.is-dead { opacity: .5; }
.tc-wait.is-dead .tc-wait-left { color: #b5313a; }
.tc-wait.is-cheap .tc-mini { filter: grayscale(1); }
.tc-wait-tag {
  padding: 2px 5px 3px;
  border-radius: 7px;
  background: #fff0c2;
  box-shadow: inset 0 0 0 1.5px #f2b632;
  font: 800 11px/1 var(--font-body, sans-serif);
  color: #8a5a00;
}
.tc-mini { vertical-align: middle; }
.tc-mini > .tb { box-shadow: 0 1px 1px rgba(40, 24, 0, .3); }

.tc-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px 0 7px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(to bottom, #ffe58a, #f2b632);
  box-shadow: 0 2px 0 #c98d14, inset 0 1px 0 rgba(255, 255, 255, .7);
  color: #6a4204;
  font: 800 14px/1 var(--font-body, sans-serif);
  cursor: pointer;
}
.tc-hint-btn svg { width: 20px; height: 20px; }
.tc-hint-btn[hidden] { display: none; }
.tc-hint-btn:hover { filter: brightness(1.05); }
.tc-hint-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #c98d14; }

/* own-turn actions: self-drawn win and kongs, centred above the hand */
.tc-actions {
  position: absolute;
  left: 0;
  width: 1600px;
  bottom: 176px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transform-origin: 50% 100%;
  transition: opacity .2s ease, transform .3s var(--ease-pop, ease), visibility 0s linear .3s;
}
.tc-actions > * { pointer-events: auto; }
.tc-actions.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--ease-pop, ease); }

/* claim panel above the hand */
.tc-claim {
  position: absolute;
  left: 0;
  width: 1600px;
  bottom: 116px;
  display: flex;
  justify-content: center;
  pointer-events: none !important;
  visibility: hidden;
}
.tc-claim.is-on { visibility: visible; }
.tc-claim-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1000px;
  padding: 10px 18px 10px 12px;
  border-radius: 28px;
  background: linear-gradient(to bottom, #fffaf0, #f8e9cf);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 7px rgba(242, 182, 50, .75),
    0 22px 44px rgba(20, 8, 0, .5);
  animation: tc-pop .38s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
@keyframes tc-pop {
  0% { opacity: 0; transform: translateY(24px) scale(.85); }
  100% { opacity: 1; transform: none; }
}
.tc-claim-tile {
  position: relative;
  padding: 6px 6px 2px;
  line-height: 0;
}
.tc-claim-tile .tc-big { --tw: 58px; --th: 78px; --td: 7px; }
.tc-claim-tile .tc-big > .tb { animation: tile-win 1.6s ease-in-out infinite; }
.tc-claim-info { display: flex; flex-direction: column; gap: 8px; }
.tc-claim-head { font: 600 18px/1.1 var(--font-display, "Fredoka", sans-serif); color: var(--tt-ink); }
/* buttons and the advice share a row when they fit */
.tc-claim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tc-claim-buttons { display: flex; align-items: stretch; gap: 10px; }
.tc-advice {
  max-width: 440px;
  padding: 7px 12px 7px 32px;
  border-radius: 12px;
  background: rgba(46, 158, 107, .12);
  font: 700 15px/1.25 var(--font-body, sans-serif);
  color: #1f6a47;
  position: relative;
}
.tc-advice::before {
  content: '';
  position: absolute;
  left: 11px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff4b0, #f2b632);
  box-shadow: 0 0 6px 1px rgba(242, 182, 50, .7);
}
.tc-advice.is-empty { display: none; }

/* big decision buttons */
.tc-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 100px;
  min-height: 72px;
  padding: 8px 16px 10px;
  border: 0;
  border-radius: 20px;
  --b1: #fffdf6; --b2: #efe0c4; --b3: #cdb48a; --bt: #4a2c23;
  background: linear-gradient(to bottom, var(--b1), var(--b2));
  box-shadow: 0 5px 0 var(--b3), 0 10px 18px rgba(20, 8, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
  color: var(--bt);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.tc-btn:hover { transform: translateY(-3px); filter: brightness(1.05); }
.tc-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--b3), 0 4px 8px rgba(20, 8, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .7); }
.tc-btn-main { font: 600 25px/1 var(--font-display, "Fredoka", sans-serif); letter-spacing: .01em; }
.tc-btn-sub { font: 800 12.5px/1 var(--font-body, sans-serif); opacity: .9; white-space: nowrap; }
.tc-btn kbd {
  position: absolute;
  right: 6px; top: 5px;
  min-width: 17px;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .14);
  font: 800 10px/1 var(--font-body, sans-serif);
  color: inherit;
  opacity: .75;
}
.tc-run { display: inline-flex; gap: 2px; }
.tc-run .tc-claimed > .tb { box-shadow: 0 0 0 2px #ff6f8e, 0 1px 1px rgba(40, 24, 0, .3); }

.tc-btn-win {
  --b1: #ffe88f; --b2: #f2b12a; --b3: #b67b06; --bt: #5a3300;
  min-width: 190px;
  min-height: 92px;
  box-shadow: 0 6px 0 var(--b3), 0 0 26px 6px rgba(255, 200, 50, .55), 0 12px 22px rgba(20, 8, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .8);
  animation: tc-win-pulse 1.3s ease-in-out infinite;
}
.tc-actions .tc-btn { min-width: 140px; min-height: 96px; }
.tc-actions .tc-btn-win { min-width: 230px; min-height: 104px; }
.tc-actions .tc-btn-win .tc-btn-main { font-size: 46px; }
.tc-btn-win .tc-btn-main { font-size: 38px; text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
.tc-btn-win .tc-cn { font: 900 28px/1 var(--font-cn, serif); }
/* Hint on a winnable turn points at HU! */
.tc-btn-win.tc-nudge { animation: tc-nudge .7s cubic-bezier(.3, 1.6, .5, 1) 2, tc-win-pulse 1.3s ease-in-out infinite; }
@keyframes tc-nudge {
  0%, 100% { transform: none; }
  40% { transform: translateY(-14px) scale(1.08); }
}
@keyframes tc-win-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.tc-btn-kong { --b1: #d9c8ff; --b2: #a88af0; --b3: #6c4fc0; --bt: #2d1766; }
.tc-btn-pung { --b1: #ffd4de; --b2: #ff8fa8; --b3: #d2506e; --bt: #6a1128; }
.tc-btn-chow { --b1: #c9f2dc; --b2: #6fcf9c; --b3: #2e9e6b; --bt: #0f4a2d; }
.tc-btn-pass { --b1: #fffdf6; --b2: #e9dcc6; --b3: #bba27c; --bt: #6b5143; min-width: 96px; }
.tc-btn-pass .tc-btn-main { font-size: 23px; }

/* 'Your turn' cue */
.tc-cue {
  position: absolute;
  left: 800px;
  top: 732px;   /* where the hint line would be: the cue only shows when hints are off */
  padding: 9px 22px 10px;
  border-radius: 22px;
  background: linear-gradient(to bottom, #ff8aa3, #e5486b);
  box-shadow: 0 0 0 3px #fff, 0 10px 20px rgba(20, 8, 0, .35);
  color: #fff;
  font: 600 24px/1 var(--font-display, "Fredoka", sans-serif);
  white-space: nowrap;
  pointer-events: none !important;
  opacity: 0;
  transform: translate(-50%, 10px) scale(.7);
  transition: opacity .25s ease, transform .25s ease;
}
.tc-cue.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .2s ease, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.tc-cue.is-win { background: linear-gradient(to bottom, #ffd766, #e9a10f); color: #5a3300; }

/* ---- fallbacks (fx.js / results.js missing) ---- */
.tt-fb-particle {
  position: absolute;
  font-size: 18px;
  color: hsl(var(--hue), 85%, 60%);
  animation: tt-fb-fly 1s ease-out forwards;
}
@keyframes tt-fb-fly {
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.tt-fb-stamp {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--tilt));
  font-family: var(--font-display, "Fredoka", sans-serif);
  font-weight: 700;
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
  white-space: nowrap;
  animation: tt-fb-stamp 1.5s ease-out forwards;
}
@keyframes tt-fb-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--tilt)) scale(2); }
  15% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tilt)) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.tt-fallback-results {
  position: absolute;
  left: 0; top: 0;
  width: 1600px; height: 900px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 14, 6, .55);
}
.tt-fr-card {
  min-width: 460px;
  padding: 28px 34px;
  border-radius: 28px;
  background: #fffaf0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.tt-fr-card h2 { margin: 0 0 12px; font: 600 34px/1.1 var(--font-display, sans-serif); }
.tt-fr-card ul { margin: 0 0 14px; padding: 0; list-style: none; }
.tt-fr-card li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 18px; }
.tt-fr-card .plus { color: #1f9a5e; }
.tt-fr-card .minus { color: #d8323f; }
.tt-fr-buttons { display: flex; justify-content: flex-end; gap: 12px; }
.tt-btn {
  padding: 12px 22px;
  border: 0;
  border-radius: 16px;
  background: #efe0c4;
  font: 600 20px/1 var(--font-display, sans-serif);
  cursor: pointer;
}
.tt-btn-gold { background: linear-gradient(to bottom, #ffe88f, #f2b12a); }

/* ---- reduced motion ---- */
.tt-reduce .tt-bubble, .tt-reduce .tt-delta, .tt-reduce .tt-peek, .tt-reduce .tc-claim-card,
.tt-reduce .tt-think i, .tt-reduce .tt-think i::after, .tt-reduce .tc-btn-win, .tt-reduce .tt-cmp-side::before, .tt-reduce .tt-tile > .tb,
.tt-reduce .tt-cmp-left, .tt-reduce .tt-hand-banner, .tt-reduce .tc-turn-pill {
  animation: none !important;
}

/* ---- effects: lite (js/ui/perf.js): the same table with its pulsing glows held still */
.fx-lite .tt-cmp-left.is-low, .fx-lite .tt-cmp-left.is-last { animation: none; box-shadow: 0 0 6px 1px rgba(255, 216, 107, .35); }
.fx-lite .tt-tile.tc-glow > .tb, .fx-lite .tc-claim-tile .tc-big > .tb { animation: none; box-shadow: var(--t-shadow), 0 0 0 2.5px #ffe27a, 0 0 16px 6px rgba(255, 196, 40, .7); }
.fx-lite .tc-btn-win { animation: none; }
.fx-lite .tc-btn-win.tc-nudge { animation: tc-nudge .7s cubic-bezier(.3, 1.6, .5, 1) 2; }
.fx-lite .tc-btn:hover { filter: none; }
.fx-lite .tt-table { box-shadow: 0 24px 40px rgba(20, 8, 0, .45), 0 0 0 2px rgba(0, 0, 0, .22); }