:root {
  --mj-felt: #123b36;
  --mj-felt-deep: #071a1d;
  --mj-ivory: #fff8e8;
  --mj-ivory-hi: #fffdf5;
  --mj-ivory-lo: #dfc58e;
  --mj-jade: #1b8f78;
  --mj-jade-lo: #0e5f54;
  /* Jade deep enough for ivory text on top (5:1); --mj-jade stays bright for tile edges. */
  --mj-jade-fill: #167a69;
  --mj-lantern: #f0c66a;
  --mj-red: #c95050;
  --mj-blue-ink: #1f4fa8;
  --mj-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mj-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --mj-fast: 140ms;
  --mj-normal: 220ms;
  --mj-slow: 320ms;
}

.mj-arena-shell,
.mj-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.mj-hero-card {
  color: var(--mj-ivory);
  background:
    radial-gradient(circle at 80% 10%, #f0c66a33, transparent 28rem),
    linear-gradient(135deg, #123b36, #081b21);
  background-color: #081b21;
}

.mj-hero-card .eyebrow {
  color: var(--mj-lantern);
}

.mj-hero-card .button {
  align-self: flex-start;
}

.rating {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  color: var(--mj-lantern);
}

.mj-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.mj-invite input {
  flex: 1;
  min-width: min(28rem, 100%);
}

.mj-lobby-seats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: .75rem;
}

.mj-lobby-seats b { overflow-wrap: anywhere; }

.mj-table-heading { margin-bottom: 0; }

.mj-lobby-seats article {
  display: grid;
  gap: .2rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 1rem;
  background: #fffaf0;
}

.mj-join input {
  padding: .75rem;
  border: 1px solid var(--mj-ivory-lo);
  border-radius: .8rem;
  font: inherit;
}

.mj-table {
  --t: clamp(1.2rem, calc((100cqi - 3rem) / 15.2), 3.2rem);
  --p: calc(var(--t) * .62);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(2.7rem, auto) minmax(0, 1fr) minmax(2.7rem, auto);
  grid-template-areas:
    "top top top"
    "left center right"
    "you you you";
  gap: clamp(.45rem, 1.6cqi, 1rem);
  min-height: min(74dvh, 46rem);
  padding: clamp(.65rem, 1.5cqi, 1rem);
  overflow: hidden;
  color: var(--mj-ivory);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 50% 43%, #1d5a4f, var(--mj-felt) 46%, var(--mj-felt-deep)),
    linear-gradient(135deg, #143c36, #071a1d);
  box-shadow:
    inset 0 0 0 1px #ffffff22,
    inset 0 0 4rem #0008,
    0 1.5rem 4rem #0004;
}

.mj-table::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1rem;
  border: 1px solid #f0c66a4d;
  border-radius: 1.35rem;
}

.mj-seat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: .35rem;
}

.mj-seat-top {
  grid-area: top;
}

.mj-seat-left {
  grid-area: left;
  align-self: center;
}

.mj-seat-right {
  grid-area: right;
  align-self: center;
}

.mj-player {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .45rem;
  padding: .25rem .45rem;
  border: 1px solid #ffffff18;
  border-radius: 999px;
  background: #071a1db3;
  box-shadow: 0 .55rem 1.2rem #0004;
}

.mj-player-name {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.mj-player-name strong {
  max-width: 9rem;
  overflow: hidden;
  font-size: .85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mj-player-name .caption {
  color: #c6e2dd;
  font-size: .68rem;
}

.mj-avatar {
  position: relative;
  display: grid;
  flex: none;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(150deg, #4c8dff, #2a4fa8);
  box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 2px #ffffff14;
  transition: box-shadow var(--mj-normal) var(--mj-ease-out);
}

.mj-avatar.tag-bot {
  background: linear-gradient(150deg, #8fa3c8, #4f6185);
}

.mj-avatar.tag-guest {
  background: linear-gradient(150deg, #b073ff, #6a3fb8);
}

.mj-avatar.tag-you {
  background: linear-gradient(150deg, var(--mj-jade-fill), var(--mj-jade-lo));
}

.turn .mj-avatar {
  box-shadow:
    inset 0 1px 0 #ffffff40,
    0 0 0 2px var(--mj-lantern),
    0 0 1.25rem color-mix(in srgb, var(--mj-lantern) 55%, transparent);
}

.mj-ring {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  rotate: -90deg;
}

.mj-ring circle {
  fill: none;
  stroke: var(--mj-lantern);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  animation: mj-timer var(--turn) linear var(--turn-delay, 0s) forwards;
}

.mj-untimed .mj-ring circle {
  animation: none;
}

.mj-backs {
  display: flex;
  gap: 2px;
  max-width: min(100%, calc(var(--p) * 14));
  filter: drop-shadow(0 .35rem .5rem #0007);
}

.mj-seat-left .mj-backs,
.mj-seat-right .mj-backs {
  flex-direction: column;
  max-height: calc(var(--p) * 7.6);
  gap: 0;
}

.mj-back {
  width: var(--p);
  height: calc(var(--p) * 1.1);
  border-radius: calc(var(--p) * .16);
  background:
    radial-gradient(70% 55% at 40% 30%, #ffffff26, transparent 70%),
    linear-gradient(170deg, #45b597 0%, var(--mj-jade) 35%, var(--mj-jade-lo) 100%);
  box-shadow:
    inset 0 1px 0 #ffffff50,
    inset 0 -3px 0 var(--mj-ivory-lo),
    0 3px 6px #0007;
  animation: mj-rise var(--mj-slow) var(--mj-ease-out) both;
  animation-delay: calc(var(--k) * 10ms);
}

.mj-seat-left .mj-back,
.mj-seat-right .mj-back {
  width: calc(var(--p) * 1.1);
  height: calc(var(--p) * .52);
  box-shadow:
    inset 0 1px 0 #ffffff50,
    inset -3px 0 0 var(--mj-ivory-lo),
    0 2px 4px #0007;
}

.mj-seat-right .mj-back {
  box-shadow:
    inset 0 1px 0 #ffffff50,
    inset 3px 0 0 var(--mj-ivory-lo),
    0 2px 4px #0007;
}

.mj-melds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
}

.mj-meld {
  display: inline-flex;
  gap: 1px;
  padding: .12rem;
  border-radius: .45rem;
  background: #06141699;
  box-shadow: inset 0 0 0 1px #ffffff12;
}

.mj-center {
  z-index: 0;
  grid-area: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    ". ptop ."
    "pleft compass pright"
    ". pbottom .";
  align-items: center;
  justify-items: center;
  min-width: 0;
  gap: clamp(.25rem, 1.2cqi, .75rem);
}

.mj-pond {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  min-height: calc(var(--p) * 1.32);
  gap: 2px;
}

.mj-pond-top {
  grid-area: ptop;
  max-width: calc(var(--p) * 7.2);
}

.mj-pond-bottom {
  grid-area: pbottom;
  max-width: calc(var(--p) * 7.2);
}

.mj-pond-left {
  grid-area: pleft;
  justify-self: end;
  max-width: calc(var(--p) * 3.8);
}

.mj-pond-right {
  grid-area: pright;
  justify-self: start;
  max-width: calc(var(--p) * 3.8);
}

.mj-compass {
  position: relative;
  grid-area: compass;
  width: clamp(5.4rem, 15cqi, 6.7rem);
  aspect-ratio: 1;
  border-radius: 22%;
  background: radial-gradient(circle at 50% 35%, #173a40, #081619 75%);
  box-shadow:
    inset 0 0 0 1px #ffffff18,
    inset 0 -6px 14px #0008,
    0 8px 20px #0009;
}

.mj-wind {
  position: absolute;
  color: #8fa3c880;
  font: 700 .95rem / 1 "Songti SC", "Noto Serif CJK SC", serif;
  transition:
    color var(--mj-normal) var(--mj-ease-out),
    text-shadow var(--mj-normal) var(--mj-ease-out),
    transform var(--mj-normal) var(--mj-ease-out);
}

.mj-wind.on {
  color: var(--mj-lantern);
  text-shadow: 0 0 .6rem var(--mj-lantern);
  transform: scale(1.08);
}

.mj-wind-top {
  top: 8%;
  left: 50%;
  translate: -50% 0;
}

.mj-wind-bottom {
  bottom: 8%;
  left: 50%;
  translate: -50% 0;
}

.mj-wind-left {
  top: 50%;
  left: 9%;
  translate: 0 -50%;
}

.mj-wind-right {
  top: 50%;
  right: 9%;
  translate: 0 -50%;
}

.mj-wall-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.05;
}

.mj-wall-count strong {
  font-size: clamp(1rem, 4.5cqi, 1.45rem);
  font-variant-numeric: tabular-nums;
}

.mj-wall-count span {
  color: #b6d4ce;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mj-you {
  z-index: 1;
  grid-area: you;
  display: grid;
  justify-items: center;
  min-width: 0;
  gap: .55rem;
}

.mj-you-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: .45rem 1rem;
}

.mj-you-melds {
  max-width: min(100%, 30rem);
}

.mj-log {
  min-height: 1.3em;
  margin: 0;
  color: #c6e2dd;
  font-size: .85rem;
  text-align: center;
}

.mj-hand {
  display: flex;
  justify-content: center;
  max-width: 100%;
  gap: 2px;
  padding: calc(var(--t) * .3) .2rem 0;
  border-radius: 1rem;
  background: #06141699;
  box-shadow: inset 0 0 0 1px #ffffff12, 0 .8rem 1.6rem #0005;
}

.mj-htile {
  position: relative;
  display: grid;
  flex: none;
  width: var(--t);
  height: calc(var(--t) * 1.32);
  padding: 0;
  margin: 0;
  appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: calc(var(--t) * .14);
  background: linear-gradient(170deg, var(--mj-ivory-hi), var(--mj-ivory) 55%, var(--mj-ivory-lo));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 3px #0000001a,
    0 2px 0 #b58d5a,
    0 4px 0 #8d683f,
    0 6px 0 var(--mj-jade),
    0 8px 0 var(--mj-jade-lo),
    0 12px 14px #000a;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--mj-fast) var(--mj-ease-out),
    box-shadow var(--mj-fast) var(--mj-ease-out),
    filter var(--mj-fast) ease;
}

.mj-htile .mj-art {
  position: absolute;
  top: 6%;
  left: 8%;
  width: 84%;
  height: 88%;
}

.mj-htile .mj-corner {
  position: absolute;
  top: 3%;
  left: 9%;
  color: #1c3852;
  font-size: calc(var(--t) * .17);
  font-weight: 900;
}

.mj-htile:disabled {
  cursor: default;
}

.mj-htile:not(:disabled):active {
  transform: scale(.97);
  transition-duration: 100ms;
}

@media (hover: hover) and (pointer: fine) {
  .mj-htile:not(:disabled):not(.picked):hover {
    transform: translateY(-8%);
  }
}

.mj-htile.picked {
  transform: translateY(-24%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 2px #7dd7ff,
    0 0 1.1rem #7dd7ff88,
    0 2px 0 #b58d5a,
    0 6px 0 var(--mj-jade),
    0 18px 18px #000a;
}

.mj-htile.drawn {
  margin-left: calc(var(--t) * .35);
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: translateY(-10%);
  animation: mj-draw 360ms var(--mj-ease-out) both;
}

.mj-htile:focus-visible {
  outline: 2px solid #7dd7ff;
  outline-offset: 2px;
}

/* Display-only tiles keep the tile shape instead of the app's 44px button height. */
.mj-htile.mj-small,
.mj-htile.mj-mini {
  min-height: 0;
  opacity: 1;
}

.mj-htile.mj-small {
  --t: var(--p);
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #b58d5a,
    0 2px 0 #8d683f,
    0 3px 0 var(--mj-jade),
    0 4px 0 var(--mj-jade-lo),
    0 6px 8px #0008;
  animation: mj-toss var(--mj-slow) var(--mj-ease-out) both;
}

.mj-htile.mj-learn-tile {
  --t: clamp(2.5rem, 12vw, 3rem);
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #b58d5a,
    0 2px 0 #8d683f,
    0 3px 0 var(--mj-jade),
    0 4px 0 var(--mj-jade-lo),
    0 8px 12px #0004;
}

.mj-htile.mj-last {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 2px var(--mj-lantern),
    0 0 .9rem color-mix(in srgb, var(--mj-lantern) 60%, transparent),
    0 4px 8px #0008;
}

/* Claims and the discard prompt sit between your bar and your tiles, so they are on screen with the hand. */
.mj-you-bar { order: 0; }
.mj-hand { order: 2; }

.mj-actions {
  order: 1;
  display: grid;
  min-height: 3rem;
  place-items: center;
}

.mj-clock {
  min-width: 2.6em;
  padding: 2px .5rem;
  border-radius: 99px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #f0c66a38;
  color: var(--mj-lantern);
}

.mj-clock.low {
  background: #c9505066;
  color: #ffd7cf;
}

.mj-actions .caption {
  margin: 0;
  color: #c6e2dd;
}

.mj-claim {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: min(100%, 38rem);
  padding: .55rem .65rem;
  overflow: hidden;
  color: var(--mj-ivory);
  border-radius: 1rem;
  background: #071a1df2;
  box-shadow: 0 .75rem 2rem #000a, inset 0 0 0 1px #ffffff14;
  animation: mj-rise 240ms var(--mj-ease-out) both;
}

.mj-claim .button,
.mj-claim button {
  min-height: 2.45rem;
}

.mj-claim-tile .mj-small {
  --p: 2rem;
}

.mj-claim-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--mj-lantern);
  transform-origin: left;
  animation: mj-drain var(--claim) linear var(--claim-delay, 0s) forwards;
}

.mj-win {
  color: #2a1406;
  border-color: transparent;
  background: linear-gradient(150deg, var(--mj-lantern), #e2683a);
}

.mj-result-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin: .75rem 0;
}

.mj-learn-grid {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  align-items: start;
}

.mj-coach {
  display: grid;
  gap: 1rem;
}

.mj-coach > .button {
  justify-self: start;
}

.mj-coach-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: .75rem 1rem;
}

.mj-coach-head h2,
.mj-coach-head p {
  margin: 0;
}

.mj-coach-tools {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.mj-lesson-list {
  display: grid;
  gap: .45rem;
}

.mj-lesson-progress {
  display: grid;
  gap: .35rem;
}

.mj-progress-track {
  height: .55rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--elevated);
}

.mj-progress-track span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mj-jade), var(--mj-lantern));
  transition: width var(--mj-normal) var(--mj-ease-out);
}

.mj-step-card {
  display: grid;
  gap: .9rem;
}

.mj-step-tiles,
.mj-mini-tiles,
.mj-winning-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .35rem;
}

.mj-set-group {
  display: inline-flex;
  gap: 2px;
  padding: .35rem;
  border-radius: .8rem;
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 20%, transparent);
}

.mj-exercise-card {
  display: grid;
  gap: .75rem;
  padding: .9rem;
  border-radius: 1rem;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 .5rem 1.5rem color-mix(in srgb, var(--shadow-deep) 12%, transparent);
}

.mj-exercise-card .eyebrow,
.mj-exercise-card h3 {
  color: var(--ink);
}

.mj-exercise-card .mj-set-group {
  background: color-mix(in srgb, var(--sea) 12%, var(--elevated));
}

.mj-answer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.mj-answer {
  min-width: 8rem;
}

.mj-feedback {
  margin: 0;
}

.mj-coach-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .42fr);
  gap: 1rem;
  align-items: start;
}

.mj-coach-panel {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  color: var(--mj-ivory);
  border-radius: 1.25rem;
  background: linear-gradient(160deg, #123b36, #071a1d);
  box-shadow: inset 0 0 0 1px #ffffff18, 0 1rem 2rem #0003;
}

.mj-coach-panel h3,
.mj-coach-panel p {
  margin: 0;
}

.mj-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}

.mj-toggle input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--mj-jade);
}

.mj-table-frame {
  container-type: inline-size;
  min-width: 0;
}

/* Phones: 14 hand tiles, the drawn-tile gap and the table padding fill the width, so tiles stay big enough to tap. */
@container (max-width: 34rem) {
  .mj-table {
    --t: clamp(1.12rem, calc((100cqi - 2rem) / 14.25), 2.4rem);
    --p: calc(var(--t) * .6);
    grid-template-columns: 3.05rem minmax(0, 1fr) 3.05rem;
    gap: .28rem;
    min-height: min(76dvh, 35.5rem);
    padding: .45rem;
    border-radius: 1.2rem;
    scroll-margin-bottom: 5.5rem;
  }

  .mj-table::before {
    inset: .5rem;
    border-radius: .85rem;
  }

  .mj-player {
    gap: .25rem;
    padding: .18rem .25rem;
  }

  .mj-seat-left .mj-player,
  .mj-seat-right .mj-player {
    flex-direction: column;
    text-align: center;
  }

  .mj-seat-left .mj-player-name .caption,
  .mj-seat-right .mj-player-name .caption,
  .mj-seat-left .mj-player-name strong,
  .mj-seat-right .mj-player-name strong {
    display: none;
  }

  .mj-avatar {
    width: 2rem;
    height: 2rem;
    font-size: .78rem;
  }

  .mj-backs {
    max-width: calc(var(--p) * 11);
  }

  .mj-seat-left .mj-backs,
  .mj-seat-right .mj-backs {
    max-height: calc(var(--p) * 6.1);
  }

  .mj-center {
    gap: .18rem;
    grid-template-columns: minmax(1.2rem, 1fr) auto minmax(1.2rem, 1fr);
  }

  .mj-compass {
    width: 4.8rem;
  }

  .mj-wind {
    font-size: .78rem;
  }

  .mj-wall-count span {
    font-size: .48rem;
  }

  /* Discards stay readable on a phone: pond tiles keep a floor even when the hand tiles shrink. */
  .mj-center {
    --p: max(calc(var(--t) * .6), 1.05rem);
  }

  .mj-pond-top,
  .mj-pond-bottom {
    max-width: calc(var(--p) * 6.1);
  }

  .mj-pond-left,
  .mj-pond-right {
    max-width: calc(var(--p) * 1.35);
  }

  .mj-you-bar {
    gap: .3rem .5rem;
  }

  .mj-log {
    order: 3;
    flex-basis: 100%;
    font-size: .75rem;
  }

  .mj-hand {
    gap: 1px;
    padding-inline: .12rem;
    scroll-margin-bottom: 5.5rem;
  }

  .mj-htile.drawn {
    margin-left: calc(var(--t) * .18);
  }

  .mj-claim {
    max-width: 100%;
    padding: .45rem;
    overflow-x: auto;
    border-radius: .8rem;
  }

  .mj-claim .button,
  .mj-claim button {
    min-height: 2.1rem;
    padding-inline: .65rem;
    white-space: nowrap;
  }

  .mj-coach-layout {
    grid-template-columns: 1fr;
  }

  .mj-lessons {
    position: static;
  }
}

@container (max-width: 24rem) {
  .mj-table {
    --t: clamp(1rem, calc((100cqi - 1.6rem) / 14.25), 1.75rem);
    grid-template-columns: 2.65rem minmax(0, 1fr) 2.65rem;
    min-height: 32rem;
  }

  .mj-compass {
    width: 4.25rem;
  }

  .mj-avatar {
    width: 1.7rem;
    height: 1.7rem;
  }
}

@keyframes mj-rise {
  from {
    opacity: 0;
    transform: translateY(.55rem);
  }
}

@keyframes mj-toss {
  from {
    opacity: 0;
    transform: translateY(-55%) scale(1.18) rotate(-6deg);
  }
}

@keyframes mj-draw {
  from {
    transform: translateY(-45%) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(-10%) scale(1);
  }
}

@keyframes mj-timer {
  to {
    stroke-dashoffset: 113.1;
  }
}

@keyframes mj-drain {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 44rem) {
  .mj-learn-grid {
    display: flex;
    flex-direction: column;
  }

  .mj-lesson-card {
    order: 1;
  }

  .mj-lessons {
    order: 2;
    position: static;
    width: 100%;
  }

  .mj-coach {
    order: 3;
    width: 100%;
  }

  .mj-coach-layout {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  .mj-table *,
  .mj-table *::before,
  .mj-table *::after,
  .mj-learn-grid *,
  .mj-learn-grid *::before,
  .mj-learn-grid *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .mj-ring circle {
    animation-duration: var(--turn) !important;
    animation-delay: var(--turn-delay, 0s) !important;
  }

  .mj-claim-bar {
    animation-duration: var(--claim) !important;
    animation-delay: var(--claim-delay, 0s) !important;
  }
}

/* Rule sets: picker, table ribbon, seat badges, flowers, riichi and void choice. */
.mj-rules-panel {
  gap: .6rem;
}

.mj-rules-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.mj-rule {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.6rem;
  padding: .45rem .95rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px;
  background: var(--elevated, #fffaf0);
  font-weight: 800;
  transition:
    background var(--mj-fast) var(--mj-ease-out),
    color var(--mj-fast) var(--mj-ease-out),
    transform var(--mj-fast) var(--mj-ease-out);
}

.mj-rule:active {
  transform: scale(.97);
}

.mj-rule.on {
  color: var(--mj-ivory);
  border-color: transparent;
  background: linear-gradient(150deg, var(--mj-jade-fill), var(--mj-jade-lo));
  box-shadow: 0 .4rem 1rem #0e5f5440;
}

.mj-rule-rating {
  padding: .05rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mj-lantern) 35%, transparent);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.mj-rule-blurb {
  margin: 0;
  max-width: 62ch;
}

.mj-table {
  position: relative;
}

.mj-ribbon {
  position: absolute;
  z-index: 2;
  top: clamp(.5rem, 1.6cqi, 1rem);
  left: clamp(.5rem, 1.6cqi, 1rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  max-width: 34%;
  pointer-events: none;
}

.mj-ribbon-name,
.mj-dora,
.mj-sticks {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .5rem;
  border: 1px solid #f0c66a4d;
  border-radius: 999px;
  background: #071a1dcc;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.mj-ribbon-name {
  color: var(--mj-lantern);
  text-transform: uppercase;
}

.mj-ribbon-label {
  color: #b6d4ce;
  text-transform: uppercase;
}

.mj-sticks i {
  display: inline-block;
  width: 1.3rem;
  height: .3rem;
  border-radius: 999px;
  background: radial-gradient(circle, var(--mj-red) 30%, var(--mj-ivory) 34%);
}

.mj-htile.mj-mini {
  --t: clamp(.95rem, 3.2cqi, 1.35rem);
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #b58d5a,
    0 2px 0 var(--mj-jade),
    0 3px 5px #0008;
}

.mj-flowers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

.mj-badge {
  flex: none;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}

.mj-badge-riichi {
  color: #fff;
  background: var(--mj-red);
  animation: mj-rise 240ms var(--mj-ease-out) both;
}

.mj-badge-void {
  color: #2a1406;
  background: var(--mj-lantern);
}

.mj-badge-won {
  color: #2a1406;
  background: linear-gradient(150deg, var(--mj-lantern), #e2683a);
}

.mj-won-hand {
  max-width: 100%;
}

.mj-htile.locked {
  filter: saturate(.4) brightness(.78);
}

.mj-htile.riichi-ok {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 2px #ff8a7a,
    0 0 1rem #ff8a7a88,
    0 2px 0 #b58d5a,
    0 6px 0 var(--mj-jade),
    0 12px 14px #000a;
}

.mj-discard-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.mj-riichi {
  min-height: 2.45rem;
  font-weight: 900;
}

.mj-riichi.on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(150deg, #e2683a, var(--mj-red));
}

.mj-void-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  max-width: min(100%, 38rem);
  padding: .65rem .8rem;
  border-radius: 1rem;
  background: #071a1df2;
  box-shadow: 0 .75rem 2rem #000a, inset 0 0 0 1px #f0c66a4d;
  animation: mj-rise 240ms var(--mj-ease-out) both;
}

.mj-void-title {
  flex-basis: 100%;
  color: #c6e2dd;
  font-size: .85rem;
  text-align: center;
}

.mj-void-choice {
  min-height: 2.6rem;
  gap: .35rem;
}

.mj-void-glyph {
  color: var(--mj-red);
  font-weight: 900;
}

/* Hand result: one card per winner, then settlements and score changes. */
.mj-hand-summary {
  display: grid;
  gap: .7rem;
  width: min(100%, 26rem);
  text-align: left;
}

.mj-hand-summary h2 {
  margin: 0;
  text-align: center;
}

.mj-win-card {
  display: grid;
  gap: .3rem;
  padding: .75rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--mj-jade) 9%, transparent);
}

.mj-win-card p {
  margin: 0;
}

.mj-win-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}

.mj-limit {
  color: #b5462f;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mj-yaku {
  font-size: .9rem;
}

.mj-value {
  font-variant-numeric: tabular-nums;
}

.mj-hand-summary .mj-result-hand {
  justify-content: flex-start;
  gap: 1px;
  margin: .25rem 0 0;
  /* A full 14-tile winning hand fits one row of the card. */
  --p: clamp(1rem, calc((min(100vw, 24rem) - 5.5rem) / 16.2), 1.7rem);
}

.mj-hand-summary .mj-result-hand .mj-small {
  --t: var(--p);
}

.mj-result-meld {
  display: inline-flex;
  margin-left: .2rem;
}

.mj-result-meld .mj-meld {
  padding: 0;
  background: none;
  box-shadow: none;
}

.mj-settlements {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .9rem;
}

.mj-deltas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mj-deltas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 .5rem;
  min-width: 0;
  padding: .45rem .6rem;
  border-radius: .8rem;
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-variant-numeric: tabular-nums;
}

.mj-deltas li > span:first-child {
  grid-column: 1 / -1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mj-hand-summary > h2:first-child {
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.mj-win-who strong,
.mj-win-who .caption {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mj-deltas li.up b {
  color: #1b8f78;
}

.mj-deltas li.down b {
  color: #b5462f;
}

/* Rule guide on /mahjong/learn. */
.mj-guide {
  margin-top: 1rem;
}

.mj-guide-tagline {
  max-width: 62ch;
  margin: 0;
}

.mj-guide-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .5rem;
  margin: 0;
}

.mj-guide-facts div {
  padding: .6rem .75rem;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--mj-jade) 9%, transparent);
}

.mj-guide-facts dt {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}

.mj-guide-facts dd {
  margin: 0;
  font-weight: 800;
}

.mj-guide-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.mj-guide-sections h3 {
  margin: 0 0 .3rem;
}

.mj-guide-sections ul {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding-left: 1.1rem;
}

.mj-guide-scoring {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mj-guide-scoring li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem .8rem;
  padding: .55rem .7rem;
  border-radius: .8rem;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.mj-guide-scoring b {
  color: var(--mj-jade-lo);
  white-space: nowrap;
}

.mj-guide-scoring .mj-winning-hand {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.mj-guide-scoring .mj-htile.mj-learn-tile {
  --t: clamp(1.5rem, 6vw, 1.9rem);
}

@container (max-width: 34rem) {
  .mj-ribbon {
    max-width: 46%;
  }

  .mj-sticks,
  .mj-dora .mj-ribbon-label {
    display: none;
  }
}

/* /mahjong/learn: rule tip, tabs, word list and the phone layout. */
.mj-rules-tip {
  margin: 0;
}

.mj-link {
  min-height: 0;
  /* Taller hit area without loosening the sentence's line spacing. */
  padding: .25rem 0;
  margin-block: -.25rem;
  border: 0;
  background: none;
  color: var(--sea);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.mj-learn-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .25rem;
  margin: 1rem 0;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.mj-learn-tabs button {
  min-height: 2.75rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
  transition:
    background var(--mj-fast) var(--mj-ease-out),
    color var(--mj-fast) var(--mj-ease-out),
    transform var(--mj-fast) var(--mj-ease-out);
}

.mj-learn-tabs button:active {
  transform: scale(.97);
}

.mj-learn-tabs button.on {
  color: var(--mj-ivory);
  background: linear-gradient(150deg, var(--mj-jade-fill), var(--mj-jade-lo));
}

.mj-lesson-num {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: .3rem;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.mj-native {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mj-jade) 12%, transparent);
  color: var(--mj-jade-lo);
  font-size: .75rem;
  font-style: italic;
  white-space: nowrap;
}

.mj-words h3 {
  margin: .5rem 0 0;
}

.mj-word-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .5rem;
  margin: 0;
}

.mj-word-list div {
  padding: .65rem .8rem;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--mj-jade) 8%, transparent);
}

.mj-word-list dt {
  font-weight: 800;
}

.mj-word-list dd {
  margin: .15rem 0 0;
}

@media (max-width: 44rem) {
  .mj-learn-tabs {
    position: sticky;
    z-index: 5;
    top: .5rem;
    margin: .75rem 0;
    box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--shadow-deep, #000) 12%, transparent);
  }

  .mj-learn-tabs button {
    padding: 0 .25rem;
    font-size: .85rem;
  }

  .mj-rules-picker {
    flex-wrap: nowrap;
    margin-inline: -1rem;
    padding: .1rem 1rem .3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mj-rules-picker::-webkit-scrollbar {
    display: none;
  }

  .mj-rule {
    flex: none;
  }

  .mj-lesson-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mj-lesson-list button {
    justify-content: flex-start;
    min-height: 2.75rem;
    padding-inline: .6rem;
    text-align: left;
    font-size: .85rem;
  }

  .mj-guide-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mj-guide-facts div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .mj-answer {
    flex: 1 1 8rem;
    min-width: 0;
  }

  /* The practice table and the Arena table run edge to edge so the hand gets the whole width. */
  .mj-table-frame {
    margin-inline: calc(-1 * var(--s4, 1rem));
  }

  .mj-table-frame > .mj-table {
    border-radius: 0;
  }
}

/* .mj-count: opponents' concealed tiles as a number; the phone layout shows it instead of a column of backs. */
.mj-count {
  display: none;
}

/*
 * Phone table. One screen, no scrolling: opponents are compact badges (tile count, small melds), and every pond is an
 * upright 6-wide grid in a 2x2 ring that follows turn order: you (bottom left), right (bottom right), across (top
 * right), left (top left). Your hand stays the biggest thing on screen; the newest discard glows.
 */
@container (max-width: 34rem) {
  .mj-table {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "rib rib"
      "left top"
      "pleft ptop"
      "compass right"
      "pbottom pright"
      "you you";
    align-items: start;
    gap: .3rem .4rem;
    min-height: 0;
    padding: .45rem .3rem .5rem;
    /* Fourteen tiles and the drawn tile span the full width. */
    --t: clamp(1.12rem, calc((100cqi - .9rem) / 14.6), 2.6rem);
  }

  .mj-table::before {
    display: none;
  }

  .mj-ribbon {
    position: static;
    grid-area: rib;
    max-width: none;
  }

  .mj-center {
    display: contents;
    /* Six pond tiles per row fill half the table. */
    --p: clamp(1.05rem, calc((100cqi - 2.4rem) / 14), 1.9rem);
  }

  .mj-seat,
  .mj-seat-left,
  .mj-seat-right {
    align-self: end;
    align-items: stretch;
    gap: .2rem;
    --p: clamp(.8rem, calc((100cqi - 2.4rem) / 22), 1.2rem);
  }

  .mj-seat-left .mj-player,
  .mj-seat-right .mj-player {
    flex-direction: row;
    text-align: left;
  }

  .mj-seat-left .mj-player-name .caption,
  .mj-seat-right .mj-player-name .caption,
  .mj-seat-left .mj-player-name strong,
  .mj-seat-right .mj-player-name strong {
    display: block;
  }

  .mj-player {
    min-width: 0;
    border-radius: .8rem;
  }

  .mj-player-name {
    flex: 1;
  }

  .mj-player-name {
    min-width: 0;
  }

  .mj-player-name strong,
  .mj-player-name .caption {
    overflow: hidden;
    max-width: none;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mj-player-name strong {
    font-size: .8rem;
  }

  .mj-seat .mj-badge {
    padding-inline: .3rem;
    font-size: .62rem;
  }

  .mj-avatar {
    width: 1.9rem;
    height: 1.9rem;
  }

  .mj-count {
    display: grid;
    flex: none;
    min-width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    padding-inline: .25rem;
    border-radius: .35rem;
    color: var(--mj-ivory);
    font-size: .8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(170deg, #45b597, var(--mj-jade) 40%, var(--mj-jade-lo));
    box-shadow: inset 0 1px 0 #ffffff50, inset 0 -2px 0 var(--mj-ivory-lo);
  }

  .mj-backs {
    display: none;
  }

  .mj-seat .mj-melds {
    justify-content: flex-start;
  }

  .mj-pond,
  .mj-pond-top,
  .mj-pond-bottom,
  .mj-pond-left,
  .mj-pond-right {
    display: grid;
    grid-template-columns: repeat(6, var(--p));
    align-content: start;
    justify-content: start;
    justify-self: stretch;
    max-width: none;
    min-height: calc(var(--p) * 1.45);
    gap: 3px 2px;
    padding: .3rem;
    border-radius: .6rem;
    background: #0614164d;
    box-shadow: inset 0 0 0 1px #ffffff10;
  }

  /* Long ponds switch to eight smaller columns so the table never grows past three rows a pond. */
  .mj-pond:has(> :nth-child(19)) {
    --p: clamp(.95rem, calc((100cqi - 3.4rem) / 17.6), 1.5rem);
    grid-template-columns: repeat(8, var(--p));
  }

  .mj-pond-top { grid-area: ptop; }
  .mj-pond-left { grid-area: pleft; }
  .mj-pond-right { grid-area: pright; }
  .mj-pond-bottom { grid-area: pbottom; }

  .mj-pond .mj-htile.mj-last {
    z-index: 1;
    transform: translateY(-2px) scale(1.12);
  }

  /* The compass becomes one strip over your own pond with the wall count. */
  .mj-compass {
    grid-area: compass;
    align-self: end;
    display: flex;
    align-items: center;
    gap: .4rem;
    width: auto;
    aspect-ratio: auto;
    padding: .3rem .55rem;
    border-radius: .8rem;
  }

  .mj-wind {
    display: none;
  }

  .mj-wall-count {
    position: static;
    display: flex;
    align-items: baseline;
    gap: .3rem;
  }

  .mj-wall-count strong {
    font-size: 1.05rem;
  }

  .mj-wall-count span {
    font-size: .6rem;
  }

  .mj-you {
    gap: .35rem;
  }

  /* Your name and the latest move share one line. */
  .mj-you-bar {
    justify-content: flex-start;
  }

  .mj-you-bar .mj-player {
    flex: none;
  }

  .mj-log {
    order: 0;
    flex: 1 1 8rem;
    min-width: 0;
    text-align: left;
  }

  .mj-actions {
    min-height: 2.6rem;
  }
}