:root {
  color-scheme: dark;
  --ink: #f6f0df;
  --muted: #aebdb2;
  --paper: #f4ead1;
  --paper-edge: #cdbb92;
  --gold: #d8ad58;
  --gold-light: #f4d992;
  --red: #b93d35;
  --deep: #071b17;
  --green-950: #08271f;
  --green-900: #0c3329;
  --green-800: #104537;
  --green-700: #176048;
  --felt: #17614b;
  --line: rgba(229, 211, 166, 0.2);
  --shadow: 0 22px 70px rgba(1, 12, 9, 0.42);
  font-family:
    "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--deep);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 0%, rgba(35, 106, 81, 0.32), transparent 36rem),
    radial-gradient(circle at 90% 90%, rgba(145, 101, 37, 0.16), transparent 34rem),
    linear-gradient(145deg, #071b17 0%, #0a2921 54%, #071d18 100%);
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.page-texture {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.app-header {
  width: min(1280px, calc(100% - 48px));
  height: 94px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(239, 223, 182, 0.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 54px;
  padding: 4px 4px 7px;
  display: grid;
  place-items: center;
  color: #9b2f2b;
  font-family: SimSun, serif;
  font-size: 25px;
  font-weight: 900;
  background: linear-gradient(145deg, #fffdf3, #e8dcc0);
  border: 1px solid #fff7df;
  border-radius: 7px;
  box-shadow:
    0 6px 0 #a6906b,
    0 10px 20px rgba(0, 0, 0, 0.28);
  transform: rotate(-2deg);
}

.brand-mark span {
  border: 1px solid rgba(141, 43, 39, 0.35);
  width: 31px;
  height: 35px;
  display: grid;
  place-items: center;
}

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  font-family: STKaiti, KaiTi, serif;
  font-size: 23px;
  letter-spacing: 0.12em;
}

.brand-copy small {
  color: #8fa59a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.connection-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  color: #9fb3a8;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(5, 26, 21, 0.6);
  backdrop-filter: blur(10px);
}

.connection-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dbb057;
  box-shadow: 0 0 0 4px rgba(219, 176, 87, 0.1);
}

.connection-pill[data-status="online"] .connection-dot {
  background: #61d09b;
  box-shadow: 0 0 0 4px rgba(97, 208, 155, 0.1);
}

.connection-pill[data-status="offline"] .connection-dot {
  background: #d75d54;
  box-shadow: 0 0 0 4px rgba(215, 93, 84, 0.1);
}

.app-main {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.landing-view {
  min-height: calc(100vh - 94px);
  padding: 64px 2vw 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 460px);
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
}

.hero-copy {
  max-width: 700px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 27px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.eyebrow span {
  width: 30px;
  height: 1px;
  background: var(--gold);
}

.hero-copy h1 {
  margin: 0;
  font-family: STKaiti, KaiTi, serif;
  font-size: clamp(56px, 7vw, 100px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-shadow: 0 10px 45px rgba(0, 0, 0, 0.22);
}

.hero-copy h1 em {
  color: var(--gold-light);
  font-style: normal;
}

.hero-copy > p {
  max-width: 570px;
  margin: 34px 0 38px;
  color: #b6c5bb;
  font-size: 17px;
  line-height: 1.9;
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 29px;
  color: #d5dfd8;
  font-size: 13px;
}

.feature-row span {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.feature-row i {
  color: #7f9a8d;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: normal;
}

.entry-card {
  position: relative;
  padding: 36px;
  border: 1px solid rgba(238, 218, 168, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(18, 63, 50, 0.9), rgba(7, 35, 28, 0.94)),
    var(--green-900);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.entry-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  top: -105px;
  right: -85px;
  border: 1px solid rgba(229, 195, 119, 0.19);
  border-radius: 50%;
  box-shadow: 0 0 0 27px rgba(229, 195, 119, 0.025);
}

.entry-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.mini-tile {
  width: 45px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #173f34;
  font-family: SimSun, serif;
  font-size: 23px;
  font-weight: 900;
  border-radius: 6px;
  background: #f1e7cf;
  box-shadow: 0 5px 0 #a9946d;
}

.entry-card-head p,
.entry-card-head h2 {
  margin: 0;
}

.entry-card-head p {
  margin-bottom: 4px;
  color: #8fa79b;
  font-size: 11px;
  letter-spacing: 0.22em;
}

.entry-card-head h2 {
  font-family: STKaiti, KaiTi, serif;
  font-size: 28px;
  font-weight: 500;
}

.field-label {
  display: block;
  margin: 19px 0 9px;
  color: #b8c8bf;
  font-size: 12px;
  font-weight: 700;
}

.input-wrap {
  height: 53px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(3, 25, 20, 0.55);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.input-wrap:focus-within {
  border-color: rgba(241, 209, 134, 0.62);
  box-shadow: 0 0 0 3px rgba(216, 173, 88, 0.08);
}

.input-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  font-family: KaiTi, serif;
  border: 1px solid rgba(216, 173, 88, 0.42);
  border-radius: 50%;
}

input {
  width: 100%;
  color: var(--ink);
  border: 0;
  background: transparent;
}

input::placeholder {
  color: #678074;
}

input:focus {
  outline: 0;
}

.primary-button,
.secondary-button,
.ghost-button,
.action-button {
  border: 0;
  cursor: pointer;
  transition:
    transform 150ms ease,
    filter 150ms ease,
    background 150ms ease,
    border-color 150ms ease;
}

.primary-button {
  width: 100%;
  min-height: 53px;
  margin-top: 20px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #19392f;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1d58d, #c99745);
  box-shadow: 0 12px 25px rgba(5, 22, 17, 0.25);
}

.primary-button:hover,
.secondary-button:hover,
.action-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.primary-button:disabled,
.secondary-button:disabled,
.action-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.55);
  opacity: 0.5;
  transform: none;
}

.primary-button.compact {
  max-width: 210px;
  margin: 26px auto 0;
  justify-content: center;
}

.divider {
  position: relative;
  margin: 28px 0 19px;
  text-align: center;
}

.divider::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.divider span {
  position: relative;
  padding: 0 12px;
  color: #708a7e;
  font-size: 11px;
  background: #0d382d;
}

.join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 10px;
}

.room-code-input {
  height: 51px;
  padding: 0 16px;
  color: var(--gold-light);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.22em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(3, 25, 20, 0.55);
  text-transform: uppercase;
}

.secondary-button {
  color: #f3e9ce;
  font-weight: 700;
  border: 1px solid rgba(238, 212, 149, 0.35);
  border-radius: 10px;
  background: rgba(200, 151, 69, 0.12);
}

.entry-note {
  margin: 22px 0 0;
  color: #6f8b7e;
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

/* Room */
.room-view {
  padding: 24px 0 60px;
}

.room-toolbar {
  min-height: 58px;
  margin-bottom: 16px;
  padding: 8px 10px 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(229, 211, 166, 0.14);
  border-radius: 13px;
  background: rgba(5, 29, 23, 0.68);
  backdrop-filter: blur(13px);
}

.room-identity {
  display: flex;
  align-items: center;
  gap: 13px;
}

.toolbar-label {
  color: #849c90;
  font-size: 11px;
}

.room-code-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  color: var(--gold-light);
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}

.room-code-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.room-code-button strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.18em;
}

.room-code-button span {
  color: #82998e;
  font-size: 10px;
}

.toolbar-actions {
  display: flex;
  gap: 5px;
}

.ghost-button {
  padding: 9px 13px;
  color: #b7c7be;
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}

.ghost-button:hover {
  color: #fff7e5;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.ghost-button.danger:hover {
  color: #f5a49c;
  border-color: rgba(219, 93, 83, 0.2);
  background: rgba(164, 48, 40, 0.08);
}

.board-scroller {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #517266 transparent;
}

.table-board {
  position: relative;
  isolation: isolate;
  min-width: 1020px;
  height: 720px;
  padding: 19px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  grid-template-rows: 142px minmax(0, 1fr) 190px;
  grid-template-areas:
    ". top ."
    "left center right"
    ". bottom .";
  gap: 10px;
  border: 1px solid rgba(244, 220, 163, 0.27);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(213, 179, 103, 0.14), transparent 26%),
    radial-gradient(circle at center, #1b7157, #12503f 68%, #0b3429 100%);
  box-shadow:
    inset 0 0 0 9px #0a2c24,
    inset 0 0 0 11px rgba(220, 190, 121, 0.24),
    inset 0 0 70px rgba(0, 0, 0, 0.2),
    var(--shadow);
  overflow: hidden;
}

.table-board::before {
  content: "";
  position: absolute;
  inset: 15px;
  z-index: -1;
  border: 1px dashed rgba(236, 218, 174, 0.1);
  border-radius: 23px;
  pointer-events: none;
}

.ornament {
  position: absolute;
  z-index: -1;
  color: rgba(236, 215, 164, 0.035);
  font-family: STKaiti, KaiTi, serif;
  font-size: 260px;
  line-height: 1;
  pointer-events: none;
}

.ornament-one {
  left: 55px;
  bottom: -40px;
}

.ornament-two {
  right: 55px;
  top: -35px;
}

.seat-zone {
  min-width: 0;
  border-radius: 17px;
}

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

.seat-left {
  grid-area: left;
}

.seat-right {
  grid-area: right;
}

.seat-bottom {
  grid-area: bottom;
}

.seat-card {
  position: relative;
  height: 100%;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(4, 38, 29, 0.48);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.seat-card.is-current {
  border-color: rgba(247, 216, 141, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(247, 216, 141, 0.08),
    0 0 30px rgba(225, 178, 79, 0.12);
}

.seat-card.is-offline {
  opacity: 0.56;
  filter: saturate(0.55);
}

.seat-card.empty-seat {
  align-items: center;
  justify-content: center;
  color: rgba(230, 239, 233, 0.4);
  border-style: dashed;
  font-size: 12px;
}

.seat-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.avatar {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #24493d;
  font-family: KaiTi, serif;
  font-size: 16px;
  font-weight: 900;
  border-radius: 9px;
  background: linear-gradient(145deg, #f2e8d1, #cfbd96);
  box-shadow: 0 3px 0 #97815c;
}

.avatar::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid #154b3c;
  border-radius: 50%;
  background: #5fd39c;
}

.is-offline .avatar::after {
  background: #7b8a82;
}

.player-meta {
  min-width: 0;
  flex: 1;
}

.player-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.player-name {
  max-width: 110px;
  overflow: hidden;
  color: #f7f0dc;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-score {
  margin-top: 2px;
  color: #9bb0a5;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
}

.badge {
  padding: 2px 5px;
  color: #392713;
  font-size: 9px;
  font-weight: 900;
  border-radius: 4px;
  background: var(--gold-light);
}

.badge.me {
  color: #e6f4ec;
  background: #3b7c64;
}

.float-badge {
  margin-left: auto;
  color: #ffda91;
  font-family: KaiTi, serif;
  font-size: 12px;
}

.hidden-hand {
  min-height: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tile-back {
  width: 17px;
  height: 24px;
  margin-left: -5px;
  border: 1px solid rgba(242, 222, 176, 0.42);
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 42%, rgba(242, 222, 176, 0.15) 43%, transparent 58%),
    #0b3b30;
  box-shadow: 0 2px 0 #062a22;
}

.hand-count {
  margin-left: 8px;
  color: #8fa99c;
  font-size: 9px;
}

.meld-row,
.discard-row,
.own-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.meld-row {
  min-height: 26px;
}

.meld-group {
  display: flex;
  gap: 1px;
  padding: 2px;
  border: 1px solid rgba(236, 218, 174, 0.13);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
}

.discard-row {
  min-height: 28px;
  align-content: flex-start;
  overflow: hidden;
}

.seat-left .seat-card,
.seat-right .seat-card {
  justify-content: flex-start;
}

.seat-left .discard-row,
.seat-right .discard-row {
  max-height: 260px;
}

.seat-bottom .seat-card {
  padding: 10px 14px 12px;
}

.seat-bottom .seat-head {
  position: absolute;
  left: 13px;
  top: 10px;
  z-index: 2;
}

.seat-bottom .meld-row {
  min-height: 35px;
  padding-left: 165px;
  justify-content: flex-start;
}

.seat-bottom .discard-row {
  min-height: 34px;
  max-height: 34px;
  padding-left: 150px;
  justify-content: flex-start;
}

.own-hand {
  margin-top: auto;
  gap: 4px;
  flex-wrap: nowrap;
}

.tile {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 48px;
  padding: 4px 3px 7px;
  display: inline-grid;
  place-items: center;
  color: #1d493c;
  font-family: SimSun, serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
  border: 1px solid #fffdf2;
  border-radius: 6px;
  background:
    linear-gradient(148deg, rgba(255, 255, 255, 0.98), transparent 35%),
    linear-gradient(160deg, #fffaf0 0%, #f1e7cf 62%, #d9c69f 100%);
  box-shadow:
    0 4px 0 #26715a,
    0 5px 0 #164b3c,
    0 8px 11px rgba(0, 0, 0, 0.24);
  overflow: visible;
  user-select: none;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 2px 2px 4px;
  z-index: 0;
  border: 1px solid rgba(114, 94, 59, 0.1);
  border-radius: 4px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.72),
    inset -1px -1px 0 rgba(99, 75, 35, 0.05);
  pointer-events: none;
}

.tile-face {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

button.tile {
  cursor: pointer;
}

button.tile:hover {
  transform: translateY(-9px);
  border-color: #fff3bd;
  box-shadow:
    0 5px 0 #2b765e,
    0 6px 0 #174c3c,
    0 13px 16px rgba(0, 0, 0, 0.28);
}

button.tile:active {
  transform: translateY(-5px);
}

.wan-face {
  grid-template-rows: 1.08fr 0.92fr;
  align-items: center;
  font-family: STKaiti, KaiTi, SimSun, serif;
  line-height: 0.85;
}

.wan-number {
  align-self: end;
  color: #174f78;
  font-size: 1.55em;
  font-weight: 900;
  text-shadow: 0 0.5px 0 #0b314c;
}

.wan-suit {
  align-self: start;
  color: #b1282e;
  font-size: 1.08em;
  font-weight: 900;
  text-shadow: 0 0.5px 0 #74161b;
}

.honor-face {
  font-family: STKaiti, KaiTi, SimSun, serif;
}

.honor-glyph {
  font-size: 2.2em;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

.wind-face {
  color: #183f5b;
  text-shadow:
    0 0.6px 0 #0c283c,
    0 0 5px rgba(28, 77, 109, 0.09);
}

.dragon-red {
  color: #bd292e;
  text-shadow: 0 0.6px 0 #7d1419;
}

.dragon-green {
  color: #168056;
  text-shadow: 0 0.6px 0 #0b5438;
}

.white-frame {
  position: relative;
  width: 68%;
  height: 73%;
  display: block;
  border: 2px solid #246b91;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(40, 126, 164, 0.28),
    0 0 0 1px rgba(17, 73, 101, 0.1);
}

.white-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(32, 110, 145, 0.52);
}

.tong-face,
.bamboo-face,
.bird-tile-face {
  overflow: hidden;
}

.pip {
  position: absolute;
  left: var(--pip-x);
  top: var(--pip-y);
  width: 19%;
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 0 0 2px rgba(3, 33, 34, 0.15),
    0 0.4px 0.8px rgba(30, 50, 42, 0.28);
}

.pip::before {
  content: "";
  position: absolute;
  inset: 26%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(11, 54, 66, 0.18);
}

.pip-blue {
  background: radial-gradient(circle at 38% 32%, #39a6d4, #17678f 64%, #0e486c);
}

.pip-green {
  background: radial-gradient(circle at 38% 32%, #53bb88, #1a7c57 64%, #0e513c);
}

.pip-red {
  background: radial-gradient(circle at 38% 32%, #e06a66, #b52f32 64%, #7f1b20);
}

.pip-multi {
  width: 53%;
  background:
    radial-gradient(circle, #f8e8bb 0 12%, #bd2b31 13% 25%, transparent 26%),
    repeating-conic-gradient(
      from 10deg,
      #187b58 0deg 28deg,
      #e5d28b 29deg 43deg,
      #1b6f9d 44deg 72deg,
      #e5d28b 73deg 87deg
    );
  box-shadow:
    inset 0 0 0 2px #17644d,
    inset 0 0 0 4px rgba(245, 225, 167, 0.7),
    0 1px 2px rgba(18, 55, 46, 0.35);
}

.pip-multi::before {
  inset: 36%;
  border-color: #f2d88f;
  box-shadow: none;
}

.bamboo-stick {
  --stem-base: #24815a;
  --stem-light: #64b789;
  --stem-dark: #105c40;
  position: absolute;
  left: var(--bamboo-x);
  top: var(--bamboo-y);
  width: 13%;
  height: 27%;
  display: block;
  border-radius: 45% 45% 34% 34%;
  background: linear-gradient(
    90deg,
    var(--stem-dark) 0 15%,
    var(--stem-light) 32%,
    var(--stem-base) 55% 77%,
    var(--stem-dark) 100%
  );
  box-shadow:
    inset 0 0 0 0.5px rgba(4, 52, 38, 0.55),
    0 0.5px 1px rgba(17, 63, 48, 0.26);
  transform: translate(-50%, -50%) rotate(var(--bamboo-angle));
}

.bamboo-stick::before,
.bamboo-stick::after {
  content: "";
  position: absolute;
  left: -18%;
  width: 136%;
  height: 12%;
  border-radius: 999px;
  background: var(--stem-dark);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.33);
}

.bamboo-stick::before {
  top: 28%;
}

.bamboo-stick::after {
  top: 66%;
}

.bamboo-blue {
  --stem-base: #237aa3;
  --stem-light: #68b3d2;
  --stem-dark: #145272;
}

.bamboo-red {
  --stem-base: #bd3c3b;
  --stem-light: #df7771;
  --stem-dark: #7f2325;
}

.bamboo-bird {
  width: 92%;
  height: 96%;
  overflow: visible;
}

.bird-tail {
  fill: #2b8c63;
  stroke: #12553e;
  stroke-width: 3;
  stroke-linejoin: round;
}

.tail-center {
  fill: #257aa0;
  stroke: #174e6c;
}

.tail-right {
  fill: #4a9e67;
}

.tail-eye {
  fill: #d4b85e;
  stroke: #ad3032;
  stroke-width: 4;
}

.bird-body,
.bird-head {
  fill: #228158;
  stroke: #10543c;
  stroke-width: 3;
}

.bird-wing {
  fill: #287da4;
  stroke: #14516e;
  stroke-width: 3;
}

.bird-eye {
  fill: #172e28;
}

.bird-beak {
  fill: #be3434;
}

.bird-crest,
.bird-legs {
  fill: none;
  stroke: #a52e31;
  stroke-width: 4;
  stroke-linecap: round;
}

.tile.is-caishen {
  border-color: #f5d272;
  box-shadow:
    0 4px 0 #a6782e,
    0 5px 0 #6d4c18,
    0 0 0 2px rgba(241, 202, 105, 0.35),
    0 7px 12px rgba(0, 0, 0, 0.26);
}

.tile-mark {
  position: absolute;
  right: -3px;
  top: -5px;
  z-index: 5;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  color: #2c210e;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 8px;
  border-radius: 999px;
  background: #f0c65e;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.tile-mark.substitute {
  color: #e8f7ef;
  background: #397a62;
}

.tile.compact-tile {
  width: 25px;
  height: 34px;
  padding: 2px 2px 5px;
  font-size: 9px;
  border-radius: 4px;
  box-shadow:
    0 2px 0 #26715a,
    0 3px 0 #164b3c;
}

.tile.mini-discard {
  width: 22px;
  height: 29px;
  padding: 2px 1px 4px;
  font-size: 8px;
  border-radius: 3px;
  box-shadow:
    0 1px 0 #26715a,
    0 2px 0 #164b3c;
}

.tile.compact-tile::before,
.tile.mini-discard::before {
  inset: 1px 1px 3px;
  border-radius: 2px;
}

.tile.mini-discard .tile-mark,
.tile.compact-tile .tile-mark {
  right: -2px;
  top: -3px;
  min-width: 11px;
  height: 11px;
  padding: 0 2px;
  font-size: 6px;
}

.seat-bottom .tile:not(.compact-tile):not(.mini-discard) {
  width: 44px;
  height: 61px;
  font-size: 17px;
}

.table-center {
  grid-area: center;
  min-width: 0;
  display: grid;
  place-items: center;
}

.center-idle,
.center-state {
  text-align: center;
}

.center-seal {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: rgba(241, 220, 168, 0.55);
  font-family: STKaiti, KaiTi, serif;
  font-size: 38px;
  border: 1px solid rgba(241, 220, 168, 0.3);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(241, 220, 168, 0.035);
}

.center-idle p {
  color: #9db2a7;
  font-size: 12px;
  letter-spacing: 0.18em;
}

.center-state {
  width: min(100%, 430px);
  min-height: 240px;
  padding: 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(243, 220, 165, 0.16);
  border-radius: 24px;
  background: rgba(5, 44, 34, 0.32);
  box-shadow: inset 0 0 55px rgba(0, 0, 0, 0.08);
}

.center-overline {
  margin-bottom: 10px;
  color: #acc0b5;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.indicator-wrap {
  display: flex;
  align-items: center;
  gap: 17px;
}

.indicator-wrap .tile {
  width: 51px;
  height: 69px;
  font-size: 20px;
}

.indicator-copy {
  text-align: left;
}

.indicator-copy strong {
  display: block;
  color: var(--gold-light);
  font-family: KaiTi, serif;
  font-size: 22px;
  font-weight: 500;
}

.indicator-copy small {
  display: block;
  max-width: 185px;
  margin-top: 5px;
  color: #8da599;
  font-size: 9px;
  line-height: 1.5;
}

.center-divider {
  width: min(100%, 280px);
  height: 1px;
  margin: 20px 0 14px;
  background: linear-gradient(90deg, transparent, rgba(239, 219, 169, 0.25), transparent);
}

.turn-message {
  margin: 0;
  color: #f4ecd8;
  font-size: 13px;
}

.center-stats {
  margin-top: 12px;
  display: flex;
  gap: 20px;
  color: #8fa69b;
  font-size: 10px;
}

.center-stats b {
  color: #dce6df;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
}

.reaction-clock {
  margin-top: 12px;
  color: var(--gold-light);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}

.result-center h2 {
  margin: 3px 0 5px;
  color: var(--gold-light);
  font-family: STKaiti, KaiTi, serif;
  font-size: 34px;
  font-weight: 500;
}

.result-center p {
  margin: 4px 0;
  color: #c4d2ca;
  font-size: 12px;
}

.result-score {
  margin: 9px 0 0;
  color: #f3d47f;
  font-family: Georgia, serif;
  font-size: 24px;
}

.action-dock {
  min-height: 78px;
  margin-top: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(235, 214, 164, 0.15);
  border-radius: 15px;
  background: rgba(5, 29, 23, 0.68);
  backdrop-filter: blur(12px);
}

.action-prompt {
  margin-right: 8px;
  color: #a8bbb1;
  font-size: 12px;
}

.action-prompt strong {
  color: #f5edd9;
}

.action-button {
  min-width: 65px;
  min-height: 42px;
  padding: 0 17px;
  color: #f3ead3;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(239, 217, 164, 0.25);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
}

.action-button.primary-action {
  color: #27391e;
  border-color: #eccb79;
  background: linear-gradient(135deg, #f0d389, #c99b4c);
}

.action-button.hu-action {
  color: #fff4dd;
  border-color: #cf6d5f;
  background: linear-gradient(135deg, #b84338, #8d2d28);
}

.action-button.pass-action {
  color: #9eb2a8;
}

.game-feed {
  margin-top: 14px;
  padding: 17px 20px 18px;
  border: 1px solid rgba(229, 211, 166, 0.12);
  border-radius: 15px;
  background: rgba(4, 25, 20, 0.5);
}

.feed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.feed-heading > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.feed-heading span {
  font-size: 12px;
  font-weight: 700;
}

.feed-heading small {
  color: #688276;
  font-size: 9px;
}

.room-status {
  padding: 4px 8px;
  color: #9bb4a8;
  font-size: 9px !important;
  border-radius: 999px;
  background: rgba(72, 129, 104, 0.18);
}

.event-list {
  max-height: 116px;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.event-item {
  display: flex;
  gap: 10px;
  color: #93aa9f;
  font-size: 10px;
  line-height: 1.5;
}

.event-item time {
  flex: 0 0 auto;
  color: #557268;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.event-item.highlight span {
  color: #e5cb8a;
}

.event-item.win span {
  color: #f1d174;
  font-weight: 800;
}

.empty-feed {
  padding: 12px 0 3px;
  color: #5f7b6f;
  font-size: 10px;
  text-align: center;
}

/* Modals */
.modal {
  width: min(700px, calc(100% - 32px));
  padding: 0;
  color: var(--ink);
  border: 1px solid rgba(238, 214, 157, 0.26);
  border-radius: 20px;
  background: linear-gradient(145deg, #123d31, #08271f);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);
}

.modal::backdrop {
  background: rgba(1, 12, 9, 0.75);
  backdrop-filter: blur(7px);
}

.modal form {
  position: relative;
  padding: 34px;
}

.modal-close {
  position: absolute;
  right: 16px;
  top: 13px;
  width: 34px;
  height: 34px;
  color: #8da399;
  font-size: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.modal-kicker {
  margin: 0 0 5px;
  color: var(--gold-light);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.modal h2 {
  margin: 0 0 25px;
  font-family: STKaiti, KaiTi, serif;
  font-size: 30px;
  font-weight: 500;
}

.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.rules-grid article {
  position: relative;
  min-height: 145px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(2, 25, 19, 0.32);
}

.rules-grid article > span {
  position: absolute;
  right: 13px;
  top: 10px;
  color: rgba(237, 211, 148, 0.18);
  font-family: Georgia, serif;
  font-size: 28px;
}

.rules-grid h3 {
  margin: 0 0 9px;
  color: #efe5cc;
  font-size: 13px;
}

.rules-grid p,
.rules-footnote {
  margin: 0;
  color: #91a79c;
  font-size: 11px;
  line-height: 1.75;
}

.rules-footnote {
  margin-top: 17px;
  color: #6f897d;
  text-align: center;
}

.result-modal {
  width: min(500px, calc(100% - 32px));
  text-align: center;
}

.result-emblem {
  width: 76px;
  height: 76px;
  margin: 2px auto 17px;
  display: grid;
  place-items: center;
  color: #402d11;
  font-family: STKaiti, KaiTi, serif;
  font-size: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f5d985, #bd8839);
  box-shadow: 0 10px 35px rgba(186, 132, 49, 0.24);
}

.result-modal h2 {
  margin-bottom: 5px;
}

.result-modal p {
  margin: 5px 0;
  color: #9bb0a6;
  font-size: 12px;
}

.result-modal .big-score {
  margin: 17px 0 7px;
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 34px;
}

.winning-hand {
  margin-top: 21px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

.badge.contract-badge {
  color: #fff0bc;
  border: 1px solid rgba(255, 209, 106, 0.58);
  background: linear-gradient(145deg, #9d401f, #5e2117);
  box-shadow: 0 0 10px rgba(214, 99, 45, 0.24);
}

.contract-console {
  min-width: 158px;
  margin: 8px auto 0;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #b5c8c2;
  font-size: 9px;
  border: 1px solid rgba(213, 176, 91, 0.18);
  border-radius: 5px;
  background: rgba(7, 15, 18, 0.72);
}

.contract-console.is-active {
  color: #ffe6aa;
  border-color: rgba(224, 138, 70, 0.42);
  background: linear-gradient(90deg, rgba(94, 33, 23, 0.88), rgba(31, 21, 18, 0.82));
}

.contract-console p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.contract-console p i {
  color: #c89c4e;
  font-style: normal;
}

.contract-console small {
  color: #8ea49d;
  white-space: nowrap;
}

.contract-console.is-active small {
  color: #dcb978;
}

.contract-seal {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  color: #38230f;
  font-family: STKaiti, KaiTi, serif;
  font-size: 12px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f2d27e, #b67a34);
}

.result-contract,
.center-contract-result {
  color: #f1c878 !important;
  font-weight: 700;
}

.event-item.contract span {
  color: #f0c778;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 100;
  max-width: min(420px, calc(100% - 30px));
  padding: 12px 18px;
  color: #f5edda;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  border: 1px solid rgba(239, 215, 159, 0.2);
  border-radius: 10px;
  background: rgba(7, 35, 28, 0.95);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.is-error {
  border-color: rgba(221, 100, 88, 0.35);
  background: rgba(92, 28, 25, 0.96);
}

@media (max-width: 900px) {
  .app-header,
  .app-main {
    width: min(100% - 28px, 1280px);
  }

  .landing-view {
    grid-template-columns: 1fr;
    padding: 48px 0 70px;
  }

  .hero-copy {
    text-align: center;
  }

  .eyebrow,
  .feature-row {
    justify-content: center;
  }

  .hero-copy > p {
    margin-right: auto;
    margin-left: auto;
  }

  .entry-card {
    width: min(100%, 480px);
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .app-header {
    height: 78px;
  }

  .brand-mark {
    width: 38px;
    height: 45px;
    font-size: 21px;
    box-shadow: 0 4px 0 #a6906b;
  }

  .brand-mark span {
    width: 26px;
    height: 29px;
  }

  .brand-copy strong {
    font-size: 19px;
  }

  .brand-copy small {
    font-size: 7px;
  }

  .connection-pill {
    padding: 7px 9px;
    font-size: 10px;
  }

  .landing-view {
    min-height: calc(100vh - 78px);
    padding-top: 37px;
    gap: 43px;
  }

  .hero-copy h1 {
    font-size: clamp(50px, 16vw, 72px);
  }

  .hero-copy > p {
    margin: 26px 0 29px;
    font-size: 14px;
  }

  .feature-row {
    gap: 10px 17px;
    font-size: 11px;
  }

  .entry-card {
    padding: 27px 21px;
    border-radius: 17px;
  }

  .room-view {
    padding-top: 14px;
  }

  .room-toolbar {
    padding-left: 12px;
  }

  .toolbar-label,
  .room-code-button span {
    display: none;
  }

  .room-code-button {
    padding-left: 0;
  }

  .room-code-button strong {
    font-size: 15px;
  }

  .ghost-button {
    padding: 8px;
    font-size: 10px;
  }

  .action-dock {
    min-height: 70px;
    padding: 11px;
    flex-wrap: wrap;
  }

  .action-prompt {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
  }

  .feed-heading small {
    display: none;
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .modal form {
    padding: 29px 21px;
  }
}

/* Runtime performance profile: keeps gameplay feedback while removing
   continuously composited decoration on constrained mobile browsers. */
.seat-zone {
  contain: layout style;
}

.event-list {
  contain: content;
}

.is-pending-action {
  transform: translateY(2px) scale(0.97) !important;
  opacity: 0.72;
}

.performance-lite * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.performance-lite .page-texture,
.performance-lite .stage-light,
.performance-lite .stage-lattice,
.performance-lite .result-radiance,
.performance-lite .stage-backdrop::before,
.performance-lite .stage-backdrop::after {
  display: none !important;
}

.performance-lite .game-stage .turn-lamp,
.performance-lite .game-stage .action-button.hu-action,
.performance-lite .seat-card.is-current,
.performance-lite .table-board::before,
.performance-lite .table-board::after {
  animation: none !important;
}

.performance-lite .effect-rays i:nth-child(n + 7),
.performance-lite .effect-particles i:nth-child(n + 9) {
  display: none;
}

.performance-lite .tile,
.performance-lite .tile-back {
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3)) !important;
  transition-duration: 120ms !important;
}

.performance-lite .seat-card,
.performance-lite .game-stage .action-dock,
.performance-lite .game-feed,
.performance-lite .room-toolbar {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
}

.performance-lite .game-call-effect,
.performance-lite .effect-rays i,
.performance-lite .effect-particles i,
.performance-lite .effect-seat-pulse,
.performance-lite .effect-discard-impact,
.performance-lite .effect-draw-glint {
  animation-duration: min(var(--effect-duration, 520ms), 520ms) !important;
}

/* --------------------------------------------------------------------------
   Game feedback: procedural audio controls and cinematic call effects
   -------------------------------------------------------------------------- */

.sound-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sound-icon {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  color: #f1d28a;
  border: 1px solid rgba(229, 193, 116, 0.4);
  border-radius: 50%;
  background: rgba(230, 191, 106, 0.08);
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 9px rgba(222, 179, 88, 0.08);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

.sound-button.is-active .sound-icon {
  color: #fff0bd;
  border-color: rgba(239, 204, 128, 0.62);
  background: rgba(220, 174, 78, 0.16);
  box-shadow: 0 0 11px rgba(226, 176, 74, 0.18);
}

.sound-button.is-muted {
  color: #75837f;
}

.sound-button.is-muted .sound-icon {
  color: #77837f;
  border-color: rgba(131, 148, 142, 0.24);
  background: rgba(82, 96, 92, 0.08);
  box-shadow: none;
}

.game-effect-layer {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms linear;
}

.game-effect-layer.is-active {
  opacity: 1;
}

.game-call-effect {
  --fx-color: #f0c86e;
  --fx-soft: rgba(240, 200, 110, 0.34);
  --fx-deep: rgba(92, 57, 17, 0.84);
  --origin-x: 0px;
  --origin-y: 18px;
  position: relative;
  min-width: 330px;
  min-height: 154px;
  padding: 23px 34px 23px 27px;
  display: grid;
  grid-template-columns: 112px minmax(150px, 1fr);
  align-items: center;
  gap: 22px;
  color: #fff9e9;
  border: 1px solid color-mix(in srgb, var(--fx-color) 46%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(112deg, rgba(7, 12, 15, 0.94), rgba(14, 20, 23, 0.85)),
    radial-gradient(circle at 30% 40%, var(--fx-soft), transparent 58%);
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 42px var(--fx-soft);
  isolation: isolate;
  animation: game-call-cinematic var(--effect-duration, 900ms)
    cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.game-effect-layer.origin-left .game-call-effect {
  --origin-x: -92px;
  --origin-y: 0px;
}

.game-effect-layer.origin-right .game-call-effect {
  --origin-x: 92px;
  --origin-y: 0px;
}

.game-effect-layer.origin-top .game-call-effect {
  --origin-x: 0px;
  --origin-y: -58px;
}

.game-call-effect::before,
.game-call-effect::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.game-call-effect::before {
  inset: 5px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--fx-color) 18%, transparent);
  border-radius: 3px;
}

.game-call-effect::after {
  top: 0;
  bottom: 0;
  left: 128px;
  width: 1px;
  background: linear-gradient(transparent, var(--fx-color), transparent);
  opacity: 0.42;
  box-shadow: 0 0 15px var(--fx-color);
}

.theme-jade {
  --fx-color: #79e0bd;
  --fx-soft: rgba(74, 208, 169, 0.3);
  --fx-deep: rgba(10, 76, 65, 0.88);
}

.theme-gold,
.theme-win {
  --fx-color: #f2cc78;
  --fx-soft: rgba(229, 177, 70, 0.35);
  --fx-deep: rgba(94, 60, 16, 0.9);
}

.theme-impact {
  --fx-color: #f0e0bd;
  --fx-soft: rgba(236, 202, 138, 0.38);
  --fx-deep: rgba(74, 49, 24, 0.92);
}

.theme-float {
  --fx-color: #ffd66c;
  --fx-soft: rgba(255, 184, 47, 0.42);
  --fx-deep: rgba(111, 56, 6, 0.9);
}

.theme-danger,
.theme-crimson {
  --fx-color: #ff9b7c;
  --fx-soft: rgba(225, 61, 34, 0.4);
  --fx-deep: rgba(111, 21, 15, 0.92);
}

.theme-system {
  --fx-color: #aacbc6;
  --fx-soft: rgba(101, 164, 157, 0.25);
  --fx-deep: rgba(18, 52, 50, 0.88);
}

.effect-crest {
  position: relative;
  z-index: 3;
  min-width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  color: #fff8df;
  border: 1px solid color-mix(in srgb, var(--fx-color) 72%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.17), transparent 29%),
    radial-gradient(circle, var(--fx-deep), rgba(6, 10, 12, 0.92) 72%);
  font-family: "STKaiti", "KaiTi", "Yu Mincho", serif;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.08em;
  text-indent: -0.08em;
  line-height: 0.9;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.7),
    0 0 15px var(--fx-color);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 0 5px rgba(0, 0, 0, 0.22),
    0 0 32px var(--fx-soft);
  animation: effect-crest-strike var(--effect-duration, 900ms)
    cubic-bezier(0.15, 0.8, 0.2, 1) both;
}

.effect-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.effect-copy small {
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--fx-color) 86%, white);
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.effect-copy strong {
  color: #fff8e6;
  font-family: "STKaiti", "KaiTi", "Yu Mincho", serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.effect-copy span {
  max-width: 210px;
  margin-top: 7px;
  overflow: hidden;
  color: #aebfba;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.effect-rays,
.effect-particles {
  position: absolute;
  inset: 50%;
  z-index: 0;
  pointer-events: none;
}

.effect-rays i {
  position: absolute;
  top: -1px;
  left: -170px;
  width: 340px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--fx-color), transparent);
  transform: rotate(calc(var(--ray) * 30deg)) scaleX(0.3);
  animation: effect-ray 700ms calc(var(--ray) * 12ms) ease-out both;
}

.effect-particles i {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: var(--fx-color);
  box-shadow: 0 0 9px var(--fx-color);
  transform: rotate(calc(var(--particle) * 25.714deg)) translateY(-26px);
  animation: effect-particle 760ms calc(var(--particle) * 17ms) ease-out both;
}

.fx-actor-pulse .seat-head,
.fx-actor-call .seat-head {
  animation: effect-seat-pulse 520ms ease-out both !important;
}

.fx-actor-call .seat-head {
  --actor-glow: rgba(244, 204, 117, 0.55);
}

.fx-discard-impact {
  position: relative;
  z-index: 25 !important;
  animation: effect-discard-impact 480ms cubic-bezier(0.14, 0.76, 0.25, 1.25)
    both !important;
}

.fx-draw-glint {
  animation: effect-draw-glint 460ms ease-out both !important;
}

.table-board.fx-table-tap {
  animation: effect-table-tap 240ms ease-out both;
}

.table-board.fx-table-impact {
  animation: effect-table-impact 620ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

.result-modal[open] form {
  position: relative;
  overflow: hidden;
  animation: result-cinematic-in 540ms cubic-bezier(0.16, 0.82, 0.22, 1) both;
}

.result-radiance {
  position: absolute;
  inset: 48% 50%;
  z-index: -1;
  pointer-events: none;
}

.result-radiance i {
  position: absolute;
  top: -1px;
  left: -260px;
  width: 520px;
  height: 2px;
  opacity: 0.16;
  background: linear-gradient(90deg, transparent, #efc86f, transparent);
  animation: result-radiance-turn 7s linear infinite;
}

.result-radiance i:nth-child(2) { animation-delay: -1.75s; }
.result-radiance i:nth-child(3) { animation-delay: -3.5s; }
.result-radiance i:nth-child(4) { animation-delay: -5.25s; }

.result-modal[open] .result-emblem {
  animation: result-emblem-strike 720ms 100ms cubic-bezier(0.12, 0.8, 0.22, 1.2)
    both;
}

.result-modal[open] .big-score {
  animation: result-score-rise 580ms 280ms cubic-bezier(0.18, 0.8, 0.24, 1)
    both;
}

.result-pattern-ribbon {
  width: max-content;
  margin: 6px auto 9px;
  padding: 3px 12px 4px;
  color: #f4d68f;
  border: 1px solid rgba(234, 197, 114, 0.3);
  border-radius: 999px;
  background: rgba(190, 132, 43, 0.08);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  box-shadow: inset 0 0 12px rgba(242, 196, 97, 0.06);
  animation: result-ribbon-arrive 520ms 210ms ease-out both;
}

.result-contract {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.result-contract-stamp {
  width: 27px;
  height: 27px;
  display: inline-grid;
  flex: 0 0 27px;
  place-items: center;
  color: #ffe8ac;
  border: 1px solid rgba(255, 208, 105, 0.62);
  border-radius: 50%;
  background: linear-gradient(145deg, #a23e27, #571813);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 0 15px rgba(212, 62, 31, 0.3);
  animation: result-contract-stamp 620ms 420ms cubic-bezier(0.12, 0.8, 0.18, 1.25)
    both;
}

.result-modal[data-pattern="caishenHead"] .result-emblem,
.result-modal[data-pattern="robGang"] .result-emblem,
.result-modal.has-contract-result .result-emblem {
  color: #ffe2b5;
  background: radial-gradient(circle at 35% 28%, #d66943, #6f1d18 70%);
  box-shadow: 0 0 32px rgba(217, 73, 44, 0.34);
}

.result-modal[data-pattern="gangBloom"] .result-emblem {
  color: #e7fff1;
  background: radial-gradient(circle at 35% 28%, #5cae8d, #174b42 70%);
  box-shadow: 0 0 32px rgba(70, 188, 147, 0.3);
}

@keyframes game-call-cinematic {
  0% {
    opacity: 0;
    transform: translate3d(var(--origin-x), var(--origin-y), 0) scale(0.7)
      rotate(-1.5deg);
    filter: blur(7px) brightness(1.6);
  }
  16% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.035) rotate(0deg);
    filter: blur(0) brightness(1.14);
  }
  28%,
  76% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) brightness(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--origin-x) * -0.12), -10px, 0) scale(1.03);
    filter: blur(2px) brightness(1.1);
  }
}

@keyframes effect-crest-strike {
  0% { opacity: 0; transform: scale(1.8) rotate(-8deg); }
  19% { opacity: 1; transform: scale(0.91) rotate(2deg); }
  31%, 78% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes effect-ray {
  0% { opacity: 0; transform: rotate(calc(var(--ray) * 30deg)) scaleX(0.15); }
  30% { opacity: 0.4; }
  100% { opacity: 0; transform: rotate(calc(var(--ray) * 30deg)) scaleX(1.15); }
}

@keyframes effect-particle {
  0% { opacity: 0; transform: rotate(calc(var(--particle) * 25.714deg)) translateY(-22px) scale(0.4); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--particle) * 25.714deg)) translateY(-155px) scale(0.05); }
}

@keyframes effect-seat-pulse {
  0% { filter: brightness(1); }
  24% { filter: brightness(1.48) drop-shadow(0 0 13px var(--actor-glow, rgba(132, 232, 201, 0.48))); }
  100% { filter: brightness(1); }
}

@keyframes effect-discard-impact {
  0% { transform: translateY(-18px) scale(1.16); filter: brightness(1.65) drop-shadow(0 0 9px #f4d68b); }
  36% { transform: translateY(2px) scale(0.94); }
  58% { transform: translateY(-2px) scale(1.03); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes effect-draw-glint {
  0% { filter: brightness(1); transform: translateY(0); }
  35% { filter: brightness(1.55) drop-shadow(0 0 8px rgba(111, 230, 193, 0.72)); transform: translateY(-7px); }
  100% { filter: brightness(1); transform: translateY(0); }
}

@keyframes effect-table-tap {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(0, 1px, 0); }
  62% { transform: translate3d(0, -0.5px, 0); }
}

@keyframes effect-table-impact {
  0%, 100% { transform: translate3d(0, 0, 0); }
  12% { transform: translate3d(-2px, 1px, 0); }
  24% { transform: translate3d(2px, -1px, 0); }
  36% { transform: translate3d(-1.5px, -0.5px, 0); }
  50% { transform: translate3d(1px, 0.5px, 0); }
  68% { transform: translate3d(-0.5px, 0, 0); }
}

@keyframes result-cinematic-in {
  0% { opacity: 0; transform: translateY(24px) scale(0.94); filter: blur(6px); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.008); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-emblem-strike {
  0% { opacity: 0; transform: scale(2.1) rotate(-9deg); filter: blur(8px); }
  48% { opacity: 1; transform: scale(0.9) rotate(2deg); filter: blur(0); }
  70% { transform: scale(1.06) rotate(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes result-score-rise {
  0% { opacity: 0; transform: translateY(16px) scale(0.82); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-ribbon-arrive {
  0% { opacity: 0; transform: scaleX(0.35); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes result-contract-stamp {
  0% { opacity: 0; transform: scale(2.4) rotate(-18deg); }
  62% { opacity: 1; transform: scale(0.88) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes result-radiance-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .sound-label {
    display: none;
  }

  .sound-button {
    min-width: 30px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .game-call-effect {
    min-width: 290px;
    min-height: 140px;
    padding: 19px 27px 19px 22px;
    grid-template-columns: 96px minmax(140px, 1fr);
    gap: 18px;
  }

  .effect-crest {
    min-width: 90px;
    height: 90px;
    font-size: 48px;
  }

  .game-call-effect::after {
    left: 111px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-call-effect,
  .effect-crest,
  .effect-rays i,
  .effect-particles i,
  .fx-actor-pulse .seat-head,
  .fx-actor-call .seat-head,
  .fx-discard-impact,
  .fx-draw-glint,
  .table-board.fx-table-tap,
  .table-board.fx-table-impact,
  .result-modal[open] form,
  .result-modal[open] .result-emblem,
  .result-modal[open] .big-score,
  .result-pattern-ribbon,
  .result-contract-stamp,
  .result-radiance i {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Engraved tile-face pass · ornate circles and calligraphic bamboo sprigs
   -------------------------------------------------------------------------- */

.tong-face,
.bamboo-face,
.bird-tile-face {
  width: 112%;
  height: 108%;
  overflow: visible;
  transform: translateY(-1%);
}

.pip {
  --pip-deep: #0d4d70;
  --pip-base: #1d83a8;
  --pip-light: #74c2d0;
  position: absolute;
  left: var(--pip-x);
  top: var(--pip-y);
  width: 24%;
  aspect-ratio: 1;
  display: block;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter:
    saturate(1.08)
    drop-shadow(0 0.8px 0 rgba(255, 255, 255, 0.42))
    drop-shadow(0 0.8px 0.6px rgba(21, 47, 48, 0.34));
  transform: translate(-50%, -50%);
}

.pip::before,
.pip::after {
  display: none;
}

.pip-rosette {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pip-rim {
  fill: var(--pip-deep);
  stroke: #ceb879;
  stroke-width: 4;
}

.pip-inlay {
  fill: #efe2bc;
  stroke: var(--pip-light);
  stroke-width: 5;
}

.pip-petals path {
  fill: var(--pip-base);
  stroke: var(--pip-deep);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.pip-heart-ring {
  fill: #ead9a8;
  stroke: var(--pip-deep);
  stroke-width: 4;
}

.pip-heart {
  fill: var(--pip-base);
  stroke: var(--pip-deep);
  stroke-width: 2;
}

.pip-glint {
  fill: rgba(255, 255, 255, 0.78);
}

.pip-blue {
  --pip-deep: #0b476c;
  --pip-base: #167da8;
  --pip-light: #72bfd0;
}

.pip-green {
  --pip-deep: #07553e;
  --pip-base: #14835c;
  --pip-light: #75bea0;
}

.pip-red {
  --pip-deep: #7c1720;
  --pip-base: #c03a3d;
  --pip-light: #e39486;
}

.pip-multi {
  --pip-deep: #075849;
  --pip-base: #18846a;
  --pip-light: #70bba0;
}

.pip-multi .pip-rim {
  fill: #096454;
  stroke: #bd8b36;
  stroke-width: 5;
}

.pip-multi .pip-inlay {
  fill: #ead8a7;
  stroke: #126c5a;
  stroke-width: 6;
}

.pip-multi .pip-petals path:nth-child(2n) {
  fill: #247fa1;
}

.pip-multi .pip-petals path:nth-child(3n) {
  fill: #b62f34;
}

.pip-multi .pip-heart-ring {
  fill: #d9bc65;
  stroke: #0b5448;
}

.pip-multi .pip-heart {
  fill: #b52d32;
  stroke: #702027;
}

.tong-face.rank-1 .pip {
  width: 66%;
}

.tong-face.rank-2 .pip {
  width: 34%;
}

.tong-face.rank-3 .pip {
  width: 31%;
}

.tong-face.rank-4 .pip,
.tong-face.rank-5 .pip {
  width: 27%;
}

.tong-face.rank-6 .pip,
.tong-face.rank-7 .pip,
.tong-face.rank-8 .pip,
.tong-face.rank-9 .pip {
  width: 25.5%;
}

.bamboo-stick {
  --stem-deep: #07543b;
  --stem-base: #16815a;
  --stem-light: #83c5a0;
  position: absolute;
  left: var(--bamboo-x);
  top: var(--bamboo-y);
  width: 19%;
  height: 31%;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter:
    saturate(1.08)
    drop-shadow(0 0.8px 0 rgba(255, 255, 255, 0.36))
    drop-shadow(0 0.8px 0.7px rgba(9, 55, 40, 0.34));
  transform: translate(-50%, -50%) rotate(var(--bamboo-angle));
  transform-origin: center;
}

.bamboo-stick::before,
.bamboo-stick::after {
  display: none;
}

.bamboo-cast {
  fill: var(--stem-deep);
  opacity: 0.62;
  transform: translate(1.5px, 1.5px);
}

.bamboo-segment {
  fill: var(--stem-base);
  stroke: var(--stem-deep);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.segment-middle {
  fill: color-mix(in srgb, var(--stem-base) 88%, var(--stem-light));
}

.bamboo-band {
  fill: var(--stem-deep);
  stroke: var(--stem-deep);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.bamboo-shine {
  fill: none;
  stroke: var(--stem-light);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.92;
}

.bamboo-side-leaf {
  fill: var(--stem-light);
  stroke: var(--stem-deep);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.leaf-right {
  fill: var(--stem-base);
}

.bamboo-blue {
  --stem-deep: #0a4d6d;
  --stem-base: #1c7fa3;
  --stem-light: #83bed1;
}

.bamboo-red {
  --stem-deep: #791d24;
  --stem-base: #bd3b3d;
  --stem-light: #e59385;
}

.bamboo-face.rank-2 .bamboo-stick,
.bamboo-face.rank-3 .bamboo-stick {
  width: 27%;
  height: 34%;
}

.bamboo-face.rank-4 .bamboo-stick,
.bamboo-face.rank-5 .bamboo-stick {
  width: 24%;
  height: 30%;
}

.bamboo-face.rank-6 .bamboo-stick,
.bamboo-face.rank-7 .bamboo-stick,
.bamboo-face.rank-9 .bamboo-stick {
  width: 21.5%;
  height: 27.5%;
}

.bamboo-face.rank-8 .bamboo-stick {
  width: 21.5%;
  height: 20.5%;
}

.bird-tile-face {
  width: 116%;
  height: 112%;
}

.bamboo-bird {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    saturate(1.06)
    drop-shadow(0 0.8px 0 rgba(255, 255, 255, 0.35))
    drop-shadow(0 1px 0.8px rgba(18, 57, 45, 0.28));
}

.tail-plume {
  fill: #237d61;
  stroke: #0b4d3b;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.plume-mid-left {
  fill: #287c9e;
  stroke: #124d68;
}

.plume-mid-right {
  fill: #2b936b;
}

.plume-right {
  fill: #1e6d91;
  stroke: #104a66;
}

.plume-eye ellipse {
  fill: #d6b658;
  stroke: #9c292f;
  stroke-width: 3;
}

.plume-eye circle {
  fill: #155f78;
  stroke: #f0dda1;
  stroke-width: 1.5;
}

.peacock-neck,
.peacock-head {
  fill: #16805a;
  stroke: #074f38;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.peacock-wing {
  fill: #267e9f;
  stroke: #104d68;
  stroke-width: 2.5;
}

.wing-feather {
  fill: none;
  stroke: #d1ac4c;
  stroke-width: 2;
  stroke-linecap: round;
}

.peacock-eye {
  fill: #172922;
}

.peacock-beak {
  fill: #b62f34;
  stroke: #761a20;
  stroke-width: 1.5;
}

.peacock-crest,
.peacock-feet {
  fill: none;
  stroke: #a4282f;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Premium client scene · arcade / Japanese digital-mahjong visual language
   -------------------------------------------------------------------------- */

body.is-in-room {
  --scene-gold: #d9b974;
  --scene-gold-bright: #f4dd9f;
  --scene-ice: #8ed4d3;
  --scene-panel: rgba(10, 14, 21, 0.9);
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(72, 116, 139, 0.23), transparent 44rem),
    radial-gradient(ellipse at 8% 82%, rgba(118, 69, 35, 0.16), transparent 38rem),
    linear-gradient(150deg, #05070b 0%, #0a0d14 48%, #05070b 100%);
}

.is-in-room .page-texture {
  opacity: 0.3;
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, 0.017) 1px, transparent 1px),
    linear-gradient(30deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 52px 90px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 83%);
}

.is-in-room .app-header,
.is-in-room .app-main {
  width: min(1600px, calc(100% - 24px));
}

.is-in-room .app-header {
  height: 52px;
  border-bottom: 0;
}

.is-in-room .brand {
  gap: 10px;
}

.is-in-room .brand-mark {
  width: 30px;
  height: 35px;
  padding: 2px 2px 4px;
  font-size: 16px;
  border-color: rgba(255, 244, 211, 0.7);
  border-radius: 4px;
  box-shadow:
    0 3px 0 #22604e,
    0 6px 14px rgba(0, 0, 0, 0.36);
}

.is-in-room .brand-mark span {
  width: 22px;
  height: 24px;
}

.is-in-room .brand-copy strong {
  font-size: 17px;
  letter-spacing: 0.16em;
}

.is-in-room .brand-copy small {
  font-size: 7px;
  letter-spacing: 0.32em;
}

.is-in-room .connection-pill {
  padding: 6px 10px;
  color: #8c9ba1;
  font-size: 10px;
  border-color: rgba(183, 203, 213, 0.11);
  background: rgba(6, 9, 14, 0.58);
}

.is-in-room .room-view {
  padding: 0 0 10px;
}

.room-toolbar {
  position: relative;
  z-index: 40;
  min-height: 52px;
  margin: 0 0 6px;
  padding: 5px 8px 5px 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid rgba(218, 190, 131, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(30, 36, 46, 0.95), rgba(9, 12, 18, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 8px 24px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px) saturate(120%);
}

.room-toolbar::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 195, 124, 0.48), transparent);
}

.match-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.match-sigil {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #f3d693;
  font-family: STKaiti, KaiTi, serif;
  font-size: 18px;
  border: 1px solid rgba(225, 190, 116, 0.46);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 242, 194, 0.16), transparent 33%),
    linear-gradient(145deg, #493a25, #17130e);
  box-shadow:
    inset 0 0 0 3px rgba(6, 8, 12, 0.52),
    0 3px 9px rgba(0, 0, 0, 0.34);
}

.match-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.match-copy small {
  color: #6f8088;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0.22em;
}

.match-copy strong {
  color: #d9e2df;
  font-family: STKaiti, KaiTi, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.room-identity {
  justify-self: center;
  gap: 7px;
  padding: 1px 5px 1px 11px;
  border: 1px solid rgba(202, 217, 221, 0.09);
  border-radius: 5px;
  background: rgba(4, 7, 11, 0.38);
}

.toolbar-label {
  color: #738289;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.room-code-button {
  gap: 7px;
  padding: 3px 7px;
}

.room-code-button strong {
  color: var(--scene-gold-bright);
  font-size: 15px;
  letter-spacing: 0.22em;
  text-shadow: 0 0 15px rgba(230, 188, 99, 0.25);
}

.room-code-button span {
  color: #6c7c83;
  font-size: 8px;
}

.toolbar-actions {
  justify-self: end;
  gap: 2px;
}

.ghost-button {
  min-height: 32px;
  padding: 7px 10px;
  color: #96a5aa;
  font-size: 10px;
  border-radius: 4px;
}

.ghost-button:hover,
.ghost-button.is-active {
  color: #f3dfad;
  border-color: rgba(224, 192, 124, 0.23);
  background: rgba(221, 188, 118, 0.065);
}

.fullscreen-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fullscreen-icon {
  color: #cbb375;
  font-size: 13px;
  line-height: 1;
}

.game-stage {
  position: relative;
  isolation: isolate;
  height: clamp(620px, calc(100svh - 120px), 860px);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(210, 185, 131, 0.22);
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(54, 116, 126, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(20, 28, 39, 0.86), rgba(5, 8, 13, 0.98));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 90px rgba(0, 0, 0, 0.4);
}

.game-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 4, 7, 0.74), transparent 18%, transparent 82%, rgba(2, 4, 7, 0.74)),
    linear-gradient(180deg, rgba(1, 3, 6, 0.36), transparent 22%, transparent 73%, rgba(1, 3, 6, 0.78));
}

.game-stage::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(from 198deg at 50% 45%, transparent 0 20%, rgba(255, 240, 198, 0.026) 24%, transparent 30% 66%, rgba(98, 204, 208, 0.024) 72%, transparent 79%);
  animation: stage-sheen 18s linear infinite;
}

.stage-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(220, 202, 159, 0.035) 50%, transparent 50.1%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 76px),
    linear-gradient(180deg, #111923 0%, #0a1018 58%, #05080c 100%);
}

.stage-backdrop::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -38%;
  height: 68%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at center, rgba(218, 186, 117, 0.035) 0 1px, transparent 1px 34px),
    radial-gradient(ellipse at center, rgba(77, 110, 119, 0.16), transparent 64%);
  transform: perspective(600px) rotateX(67deg);
}

.stage-light {
  position: absolute;
  top: -22%;
  width: 34%;
  height: 72%;
  opacity: 0.44;
  filter: blur(18px);
  background: linear-gradient(165deg, rgba(224, 204, 159, 0.2), transparent 69%);
  transform: skewX(-12deg);
}

.stage-light.light-left {
  left: 6%;
  animation: ambient-light-left 9s ease-in-out infinite alternate;
}

.stage-light.light-right {
  right: 4%;
  background: linear-gradient(195deg, rgba(81, 162, 169, 0.2), transparent 69%);
  transform: skewX(13deg);
  animation: ambient-light-right 11s ease-in-out infinite alternate;
}

.stage-lattice {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  opacity: 0.23;
  background-image:
    linear-gradient(90deg, rgba(196, 171, 120, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(196, 171, 120, 0.16) 1px, transparent 1px);
  background-size: 48px 100%, 100% 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 84%);
}

.lattice-left {
  left: 0;
}

.lattice-right {
  right: 0;
  transform: scaleX(-1);
}

.stage-caption {
  position: absolute;
  left: 50%;
  top: 11px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(164, 181, 185, 0.54);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0.23em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.stage-caption i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--scene-gold);
  box-shadow: 0 0 8px rgba(219, 183, 109, 0.55);
}

.game-stage .board-scroller {
  position: absolute;
  inset: 31px 14px 83px;
  z-index: 6;
  width: auto;
  padding: 10px 10px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  scrollbar-color: rgba(151, 124, 74, 0.55) transparent;
  perspective: 1600px;
}

.game-stage .table-board {
  width: min(1320px, calc(100% - 28px));
  min-width: 1080px;
  height: calc(100% - 4px);
  min-height: 520px;
  max-height: 725px;
  margin: auto;
  padding: 26px;
  grid-template-columns: 210px minmax(0, 1fr) 210px;
  grid-template-rows: 140px minmax(0, 1fr) 180px;
  gap: 0;
  border: 13px solid #15171b;
  border-radius: 38px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(92, 201, 189, 0.18), transparent 29%),
    radial-gradient(ellipse at 50% 51%, #175e5c 0%, #104a4b 48%, #0a3539 78%, #06272c 100%);
  box-shadow:
    0 0 0 1px #8b7045,
    0 0 0 5px #2b2118,
    0 0 0 8px #080a0e,
    0 24px 58px rgba(0, 0, 0, 0.64),
    0 8px 18px rgba(0, 0, 0, 0.54),
    inset 0 0 0 2px rgba(233, 207, 150, 0.19),
    inset 0 0 0 8px rgba(2, 22, 25, 0.48),
    inset 0 0 120px rgba(0, 0, 0, 0.39);
  transform: rotateX(0.7deg);
  transform-origin: 50% 84%;
}

.game-stage .table-board::before {
  inset: 8px;
  z-index: 0;
  border: 1px solid rgba(232, 202, 139, 0.32);
  border-radius: 19px;
  background: transparent;
  box-shadow:
    0 0 0 3px rgba(2, 21, 24, 0.65),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 0 30px rgba(0, 0, 0, 0.28);
}

.game-stage .table-board::after {
  inset: 18px;
  z-index: 1;
  border-radius: 13px;
  opacity: 0.75;
  background:
    linear-gradient(90deg, transparent 49.92%, rgba(236, 221, 185, 0.045) 50%, transparent 50.08%),
    linear-gradient(transparent 49.92%, rgba(236, 221, 185, 0.045) 50%, transparent 50.08%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 46%, rgba(139, 231, 218, 0.07), transparent 34%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.22);
}

.table-hardware {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.table-hardware i {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid #9a7b46;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 46%, rgba(48, 37, 20, 0.9) 47% 53%, transparent 54%),
    radial-gradient(circle at 35% 28%, #e0c789, #785d31 68%, #322717);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.table-hardware i:nth-child(1) { left: 8px; top: 8px; }
.table-hardware i:nth-child(2) { right: 8px; top: 8px; }
.table-hardware i:nth-child(3) { right: 8px; bottom: 8px; }
.table-hardware i:nth-child(4) { left: 8px; bottom: 8px; }

.game-stage .ornament {
  z-index: 1;
  display: block;
  color: rgba(228, 211, 171, 0.036);
  font-size: clamp(130px, 13vw, 220px);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.018),
    -1px -1px 0 rgba(0, 0, 0, 0.12);
}

.game-stage .ornament-one {
  left: 6%;
  bottom: -2%;
}

.game-stage .ornament-two {
  right: 6%;
  top: 1%;
}

.game-stage .seat-zone,
.game-stage .table-center {
  z-index: 3;
}

.game-stage .seat-head {
  width: 172px;
  min-height: 47px;
  padding: 6px 9px 6px 7px;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(173, 200, 205, 0.19);
  border-left: 3px solid #3e8588;
  border-radius: 4px;
  background:
    linear-gradient(105deg, rgba(45, 58, 67, 0.96), rgba(12, 18, 24, 0.96) 68%),
    #10161c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 7px 18px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  animation: hud-arrive 380ms cubic-bezier(0.22, 0.84, 0.32, 1) both;
}

.game-stage .seat-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(135, 218, 219, 0.55), rgba(255, 255, 255, 0.07), transparent);
}

.game-stage .seat-card.is-current .seat-head {
  border-color: rgba(240, 205, 131, 0.58);
  border-left-color: #f0c66f;
  background:
    linear-gradient(105deg, rgba(78, 65, 38, 0.97), rgba(18, 21, 24, 0.97) 66%),
    #14171a;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 214, 0.12),
    0 0 0 1px rgba(240, 198, 111, 0.12),
    0 0 28px rgba(238, 188, 83, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.46);
}

.game-stage .seat-card.is-current .seat-head::after {
  content: "YOUR TURN";
  position: absolute;
  right: -23px;
  bottom: 2px;
  color: rgba(244, 215, 151, 0.09);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  transform: rotate(-35deg);
}

.game-stage .avatar {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  color: #202927;
  font-size: 15px;
  border: 1px solid rgba(255, 248, 220, 0.65);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fff7dc, #c7ad75 70%);
  box-shadow:
    0 0 0 3px rgba(114, 146, 145, 0.18),
    0 3px 5px rgba(0, 0, 0, 0.4);
}

.game-stage .avatar::after {
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border: 2px solid #131b20;
  background: #58d5a0;
  box-shadow: 0 0 8px rgba(88, 213, 160, 0.6);
}

.game-stage .is-offline .avatar::after {
  background: #b44d48;
  box-shadow: none;
}

.game-stage .player-name {
  max-width: 75px;
  color: #edf5f2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.game-stage .player-score {
  margin-top: 2px;
  color: #9bb1b3;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.game-stage .seat-wind {
  color: #f3d48d;
  border-color: rgba(237, 201, 124, 0.45);
  background: linear-gradient(145deg, rgba(221, 180, 96, 0.14), rgba(19, 21, 22, 0.24));
  box-shadow: inset 0 0 5px rgba(233, 188, 92, 0.08);
}

.game-stage .seat-top .seat-head { left: -16px; top: -1px; }
.game-stage .seat-left .seat-head { left: -7px; top: -1px; }
.game-stage .seat-right .seat-head { right: -7px; top: -1px; }
.game-stage .seat-bottom .seat-head { left: -198px; bottom: 6px; }

.game-stage .seat-card.empty-seat {
  width: 168px;
  height: 52px;
  border: 1px solid rgba(158, 191, 194, 0.19);
  border-left: 3px solid rgba(63, 133, 136, 0.52);
  border-radius: 4px;
  background: linear-gradient(110deg, rgba(27, 39, 46, 0.72), rgba(8, 15, 20, 0.66));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.game-stage .hidden-hand {
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.43));
}

.game-stage .hidden-hand::before {
  left: -11px;
  right: -11px;
  bottom: -9px;
  height: 10px;
  border: 1px solid rgba(178, 139, 76, 0.35);
  background: linear-gradient(180deg, #5a422a, #1c1510 76%);
  box-shadow:
    0 4px 7px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 230, 175, 0.12);
}

.game-stage .tile-back {
  width: 20px;
  height: 30px;
  margin-left: -4px;
  border: 1px solid rgba(235, 214, 169, 0.65);
  border-radius: 3px;
  background:
    radial-gradient(circle at center, transparent 0 25%, rgba(234, 195, 113, 0.19) 26% 30%, transparent 31%),
    linear-gradient(135deg, transparent 45%, rgba(230, 192, 112, 0.18) 46% 53%, transparent 54%),
    linear-gradient(145deg, #174758, #071f2c);
  box-shadow:
    0 2px 0 #06131a,
    inset 0 0 0 2px rgba(10, 52, 65, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.game-stage .seat-bottom .own-hand {
  bottom: 2px;
  padding: 0 9px;
  gap: 3px;
  filter: drop-shadow(0 10px 11px rgba(0, 0, 0, 0.48));
}

.game-stage .seat-bottom .own-hand::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -17px;
  height: 23px;
  z-index: -2;
  border: 1px solid rgba(211, 171, 99, 0.3);
  border-radius: 3px 3px 9px 9px;
  background: linear-gradient(180deg, #6f5030 0 16%, #322218 17% 59%, #130f0c 100%);
  box-shadow:
    0 8px 12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 235, 190, 0.16);
}

.game-stage .seat-bottom .own-hand::after {
  left: 1%;
  right: 1%;
  bottom: -10px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: rgba(222, 181, 104, 0.14);
  box-shadow: 0 0 11px rgba(227, 183, 100, 0.12);
}

.game-stage .seat-bottom .tile:not(.compact-tile):not(.mini-discard) {
  width: 47px;
  height: 68px;
  border-radius: 6px;
  animation: tile-deal-in 360ms cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.game-stage .seat-bottom .own-hand .tile:nth-child(2) { animation-delay: 18ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(3) { animation-delay: 36ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(4) { animation-delay: 54ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(5) { animation-delay: 72ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(6) { animation-delay: 90ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(7) { animation-delay: 108ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(8) { animation-delay: 126ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(9) { animation-delay: 144ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(10) { animation-delay: 162ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(11) { animation-delay: 180ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(12) { animation-delay: 198ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(13) { animation-delay: 216ms; }
.game-stage .seat-bottom .own-hand .tile:nth-child(14) { animation-delay: 234ms; }

.game-stage .tile {
  border: 1px solid #fffef5;
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.99) 0 15%, rgba(255, 255, 255, 0.16) 36%, transparent 48%),
    linear-gradient(158deg, #fffdf3 0%, #f3ead8 63%, #d5c099 100%);
  box-shadow:
    0 4px 0 #2b755f,
    0 6px 0 #133f35,
    0 9px 13px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.game-stage button.tile:hover {
  transform: translateY(-13px) scale(1.04);
  filter: brightness(1.07) saturate(1.06);
  box-shadow:
    0 5px 0 #2f8268,
    0 7px 0 #16493c,
    0 15px 22px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(134, 218, 204, 0.14);
}

.game-stage .tile.is-caishen {
  border-color: #f5cf73;
  box-shadow:
    0 4px 0 #b27f2c,
    0 6px 0 #674716,
    0 0 0 2px rgba(245, 205, 115, 0.45),
    0 0 21px rgba(244, 184, 62, 0.34),
    0 10px 14px rgba(0, 0, 0, 0.4);
}

.game-stage .tile-mark {
  right: -5px;
  top: -7px;
  color: #fff5d5;
  border: 1px solid #f1c478;
  background: linear-gradient(145deg, #ce5139, #75211d);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.42),
    0 0 9px rgba(209, 65, 44, 0.22);
}

.game-stage .discard-row .tile:last-child {
  animation: discard-land 260ms cubic-bezier(0.16, 0.86, 0.3, 1.2) both;
}

.game-stage .discard-row .tile.mini-discard {
  width: 25px;
  height: 34px;
  border-radius: 3px;
  box-shadow:
    0 2px 0 #225c4d,
    0 4px 6px rgba(0, 0, 0, 0.33);
}

.game-stage .discard-row {
  grid-template-columns: repeat(6, 25px);
  grid-auto-rows: 34px;
  gap: 3px;
}

.game-stage .seat-left .discard-row,
.game-stage .seat-right .discard-row {
  grid-template-columns: repeat(4, 25px);
}

.game-stage .center-state.japanese-center {
  width: 324px;
  min-height: 332px;
}

.game-stage .center-scoreboard {
  width: 252px;
  height: 252px;
  flex-basis: 252px;
  border: 1px solid #a48651;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 47%, rgba(71, 129, 133, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(47, 59, 67, 0.96), rgba(8, 12, 17, 0.98) 58%);
  box-shadow:
    0 0 0 2px #17191b,
    0 0 0 6px rgba(166, 132, 76, 0.32),
    0 0 0 9px rgba(4, 15, 19, 0.76),
    0 17px 35px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 44px rgba(0, 0, 0, 0.52);
}

.game-stage .center-scoreboard::before {
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(transparent, rgba(211, 188, 139, 0.16) 18% 82%, transparent);
}

.game-stage .center-scoreboard::after {
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211, 188, 139, 0.16) 18% 82%, transparent);
}

.game-stage .center-core {
  width: 94px;
  height: 112px;
  gap: 3px;
  border: 1px solid rgba(232, 202, 137, 0.43);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 35%, rgba(95, 163, 161, 0.14), transparent 46%),
    linear-gradient(145deg, #263036, #080d12 75%);
  box-shadow:
    0 0 0 3px rgba(4, 8, 11, 0.74),
    0 8px 17px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.game-stage .fixed-joker-label {
  color: #aababc;
  font-size: 8px;
  letter-spacing: 0.17em;
}

.game-stage .remaining-count {
  color: #809497;
  letter-spacing: 0.1em;
}

.game-stage .remaining-count b {
  color: #f1ce82;
  text-shadow: 0 0 9px rgba(238, 195, 107, 0.3);
}

.game-stage .center-score {
  width: 132px;
  height: 36px;
  padding: 3px 7px;
  border: 1px solid rgba(170, 199, 201, 0.15);
  border-radius: 4px;
  background: linear-gradient(110deg, rgba(36, 47, 53, 0.98), rgba(11, 16, 21, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 4px 9px rgba(0, 0, 0, 0.4);
}

.game-stage .center-score.is-turn {
  border-color: rgba(243, 204, 122, 0.66);
  background: linear-gradient(110deg, #544327, #171b1e 73%);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 213, 0.1),
    0 0 20px rgba(235, 188, 86, 0.26);
}

.game-stage .center-score strong {
  font-size: 11px;
  letter-spacing: 0.03em;
}

.game-stage .score-name {
  font-size: 8px;
}

.game-stage .score-left { left: -42px; }
.game-stage .score-right { right: -42px; }

.game-stage .turn-console {
  width: 312px;
  min-height: 45px;
  margin-top: 17px;
  padding: 7px 13px;
  border: 1px solid rgba(213, 187, 132, 0.27);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(34, 43, 50, 0.97), rgba(8, 13, 18, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 9px 21px rgba(0, 0, 0, 0.39);
}

.game-stage .turn-lamp {
  background: #f0c35f;
  box-shadow:
    0 0 0 3px rgba(240, 195, 95, 0.12),
    0 0 13px rgba(240, 195, 95, 0.65);
  animation: turn-lamp-pulse 1.35s ease-in-out infinite alternate;
}

.game-stage .turn-console .turn-message {
  color: #edf4f2;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.game-stage .wall-brief {
  color: #71868a;
  letter-spacing: 0.05em;
}

.game-stage[data-phase="lobby"] .table-center .center-state {
  width: 250px;
  padding: 27px 28px;
  border: 1px solid rgba(220, 190, 127, 0.32);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 18%, rgba(78, 148, 147, 0.13), transparent 46%),
    linear-gradient(145deg, rgba(35, 45, 51, 0.96), rgba(8, 14, 18, 0.96));
  box-shadow:
    0 0 0 4px rgba(4, 21, 24, 0.52),
    0 16px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.game-stage[data-phase="lobby"] .center-seal {
  color: #f3d58e;
  border: 1px solid rgba(234, 197, 119, 0.5);
  background: linear-gradient(145deg, #4d3c24, #18130e);
  box-shadow:
    inset 0 0 0 3px rgba(4, 8, 11, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.4);
}

.game-stage .action-dock {
  position: absolute;
  right: 18px;
  bottom: 13px;
  z-index: 30;
  width: auto;
  max-width: min(760px, calc(100% - 390px));
  min-height: 56px;
  margin: 0;
  padding: 7px 9px 7px 15px;
  justify-content: flex-end;
  gap: 7px;
  border: 1px solid rgba(211, 183, 124, 0.29);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(34, 41, 51, 0.94), rgba(8, 11, 17, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 28px rgba(0, 0, 0, 0.47);
  backdrop-filter: blur(16px) saturate(130%);
  animation: dock-arrive 320ms cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.game-stage .action-dock:empty {
  display: none;
}

.game-stage .action-prompt {
  margin-right: 5px;
  color: #94a7aa;
  font-size: 10px;
  white-space: nowrap;
}

.game-stage .action-prompt strong {
  color: #f3e4bd;
}

.game-stage .action-button {
  min-width: 72px;
  min-height: 40px;
  padding: 0 16px;
  color: #e6edeb;
  font-size: 12px;
  letter-spacing: 0.07em;
  border: 1px solid #5c6a70;
  border-radius: 4px;
  background: linear-gradient(180deg, #3b4850, #161d23 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 9px rgba(0, 0, 0, 0.38);
  transition:
    transform 120ms ease,
    filter 120ms ease,
    box-shadow 120ms ease;
}

.game-stage .action-button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 7px 13px rgba(0, 0, 0, 0.48);
}

.game-stage .action-button.primary-action {
  color: #251e12;
  border-color: #f2cf7d;
  background: linear-gradient(180deg, #f5dda0, #bc8739 74%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 17px rgba(224, 173, 70, 0.18),
    0 4px 9px rgba(0, 0, 0, 0.4);
}

.game-stage .action-button.hu-action {
  color: #fff6e8;
  border-color: #ed8d72;
  background: linear-gradient(180deg, #d65e43, #7b211c 76%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 20px rgba(211, 65, 41, 0.3),
    0 4px 9px rgba(0, 0, 0, 0.4);
  animation: hu-button-pulse 1.15s ease-in-out infinite alternate;
}

.game-stage .game-feed {
  position: absolute;
  left: 18px;
  bottom: 13px;
  z-index: 30;
  width: 330px;
  min-height: 56px;
  margin: 0;
  padding: 7px 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(174, 197, 202, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(29, 37, 46, 0.91), rgba(6, 10, 15, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px) saturate(125%);
  transition:
    width 180ms ease,
    height 180ms ease,
    padding 180ms ease;
}

.game-stage .feed-heading {
  min-height: 20px;
  padding: 0 0 5px;
  justify-content: flex-start;
  gap: 7px;
  border-bottom-color: rgba(255, 255, 255, 0.065);
}

.game-stage .feed-heading > div {
  min-width: 0;
  flex: 1;
  gap: 7px;
}

.game-stage .feed-heading span {
  color: #c7d2d0;
  font-size: 9px;
  letter-spacing: 0.07em;
}

.game-stage .feed-heading small {
  color: #5d7076;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 6px;
  letter-spacing: 0.15em;
}

.feed-toggle {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #a99873;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  border: 1px solid rgba(210, 184, 127, 0.22);
  border-radius: 3px;
  background: rgba(2, 5, 9, 0.42);
}

.game-stage .room-status {
  padding: 2px 6px;
  color: #a9c6c3;
  font-size: 7px !important;
  border: 1px solid rgba(93, 168, 162, 0.16);
  background: rgba(57, 127, 122, 0.13);
}

.game-stage .event-list {
  max-height: 24px;
  margin: 6px 0 0;
  gap: 3px;
  overflow: hidden;
}

.game-stage .event-item {
  min-width: 0;
  gap: 7px;
  color: #91a5a8;
  font-size: 8px;
  line-height: 1.35;
}

.game-stage .event-item:nth-last-child(n + 2) {
  display: none;
}

.game-stage .event-item time {
  color: #586a70;
  font-size: 7px;
}

.game-stage .event-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-stage .game-feed.is-collapsed {
  width: 36px;
  min-height: 36px;
  padding: 8px;
}

.game-stage .game-feed.is-collapsed .feed-heading {
  padding: 0;
  border-bottom: 0;
}

.game-stage .game-feed.is-collapsed .feed-heading > div,
.game-stage .game-feed.is-collapsed .room-status,
.game-stage .game-feed.is-collapsed .event-list {
  display: none;
}

.stage-corner-mark {
  position: absolute;
  right: 17px;
  top: 44px;
  z-index: 4;
  width: 48px;
  height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  color: rgba(224, 201, 150, 0.18);
  border: 1px solid rgba(219, 191, 131, 0.11);
  border-radius: 3px;
  background: rgba(5, 9, 13, 0.16);
  transform: rotate(2deg);
  pointer-events: none;
}

.stage-corner-mark small {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 5px;
  letter-spacing: 0.2em;
}

.stage-corner-mark strong {
  font-family: STKaiti, KaiTi, serif;
  font-size: 19px;
  font-weight: 500;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
}

.room-view:fullscreen {
  width: 100%;
  height: 100%;
  padding: 8px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(67, 111, 132, 0.24), transparent 48rem),
    #05070b;
}

.room-view:fullscreen .room-toolbar {
  min-height: 50px;
}

.room-view:fullscreen .game-stage {
  height: calc(100vh - 64px);
  max-height: none;
}

@keyframes stage-sheen {
  to { transform: rotate(360deg); }
}

@keyframes ambient-light-left {
  from { opacity: 0.28; transform: translateX(-4%) skewX(-12deg); }
  to { opacity: 0.5; transform: translateX(4%) skewX(-9deg); }
}

@keyframes ambient-light-right {
  from { opacity: 0.24; transform: translateX(4%) skewX(13deg); }
  to { opacity: 0.46; transform: translateX(-4%) skewX(10deg); }
}

@keyframes hud-arrive {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dock-arrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tile-deal-in {
  from { opacity: 0; transform: translateY(24px) rotateX(-16deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes discard-land {
  from { opacity: 0; transform: translateY(-16px) scale(1.16); filter: brightness(1.35); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes turn-lamp-pulse {
  from { opacity: 0.65; filter: brightness(0.9); }
  to { opacity: 1; filter: brightness(1.25); }
}

@keyframes hu-button-pulse {
  from { filter: brightness(0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 12px rgba(211, 65, 41, 0.18), 0 4px 9px rgba(0, 0, 0, 0.4); }
  to { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 25px rgba(225, 71, 44, 0.4), 0 4px 9px rgba(0, 0, 0, 0.4); }
}

@media (min-width: 901px) and (min-height: 780px) {
  body.is-in-room {
    overflow: hidden;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  .game-stage {
    height: calc(100svh - 112px);
    min-height: 560px;
  }

  .game-stage .board-scroller {
    inset: 28px 10px 75px;
    padding-top: 7px;
  }

  .game-stage .table-board {
    min-height: 480px;
    padding: 21px;
    grid-template-columns: 200px minmax(0, 1fr) 200px;
    grid-template-rows: 112px minmax(0, 1fr) 148px;
  }

  .game-stage .center-state.japanese-center {
    min-height: 282px;
  }

  .game-stage .center-scoreboard {
    width: 216px;
    height: 216px;
    flex-basis: 216px;
  }

  .game-stage .center-core {
    width: 82px;
    height: 100px;
  }

  .game-stage .center-score {
    width: 116px;
    height: 32px;
  }

  .game-stage .score-left { left: -39px; }
  .game-stage .score-right { right: -39px; }

  .game-stage .turn-console {
    width: 284px;
    min-height: 40px;
    margin-top: 12px;
  }

  .game-stage .seat-bottom .tile:not(.compact-tile):not(.mini-discard) {
    width: 42px;
    height: 60px;
  }

  .game-stage .seat-bottom .seat-head {
    bottom: 1px;
  }
}

@media (max-width: 900px) {
  .is-in-room .app-header,
  .is-in-room .app-main {
    width: min(100% - 12px, 1600px);
  }

  .room-toolbar {
    grid-template-columns: auto 1fr auto;
  }

  .match-copy {
    display: none;
  }

  .room-identity {
    justify-self: start;
    margin-left: 8px;
  }

  .game-stage {
    height: 720px;
    min-height: 720px;
  }

  .game-stage .board-scroller {
    justify-content: flex-start;
  }

  .game-stage .action-dock {
    max-width: calc(100% - 72px);
  }

  .game-stage .game-feed {
    width: 36px;
    min-height: 36px;
    padding: 8px;
  }

  .game-stage .game-feed .feed-heading {
    padding: 0;
    border-bottom: 0;
  }

  .game-stage .game-feed .feed-heading > div,
  .game-stage .game-feed .room-status,
  .game-stage .game-feed .event-list {
    display: none;
  }
}

@media (max-width: 600px) {
  .is-in-room .app-header {
    height: 48px;
  }

  .is-in-room .brand-copy small,
  .fullscreen-label {
    display: none;
  }

  .room-toolbar {
    min-height: 47px;
  }

  .match-identity {
    display: none;
  }

  .room-toolbar {
    grid-template-columns: 1fr auto;
  }

  .room-identity {
    margin-left: 0;
  }

  .game-stage {
    height: 690px;
    min-height: 690px;
    border-radius: 10px;
  }

  .stage-caption {
    font-size: 6px;
  }

  .game-stage .board-scroller {
    right: 0;
    left: 0;
  }

  .game-stage .action-dock {
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 56px);
    min-height: 48px;
    padding: 6px 7px;
    overflow-x: auto;
  }

  .game-stage .action-prompt {
    display: none;
  }

  .game-stage .action-button {
    min-width: 58px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 10px;
  }

  .game-stage .game-feed {
    left: 8px;
    bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-stage::after,
  .stage-light,
  .game-stage .seat-head,
  .game-stage .seat-bottom .tile,
  .game-stage .discard-row .tile:last-child,
  .game-stage .turn-lamp,
  .game-stage .action-dock,
  .game-stage .action-button.hu-action {
    animation: none !important;
  }
}

/* GPT Image 2 material pass: deterministic faces over generated 3D tile bases. */
.tile {
  padding: 5px 5px 9px;
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/tiles/mahjong-tile-front-web.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.35));
}

.tile::before {
  display: none;
}

.tile.compact-tile,
.tile.mini-discard {
  padding: 4px 3px 7px;
  border-radius: 0;
  box-shadow: none;
}

.game-stage .seat-bottom .tile:not(.compact-tile):not(.mini-discard) {
  padding: 7px 7px 13px;
  border-radius: 0;
  background: transparent url("/assets/tiles/mahjong-tile-front-web.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.center-joker .tile {
  padding: 4px 4px 8px;
  border-radius: 0;
}

.game-stage button.tile:hover {
  box-shadow: none;
  filter:
    brightness(1.08)
    saturate(1.06)
    drop-shadow(0 11px 6px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 7px rgba(133, 219, 205, 0.18));
}

.game-stage .tile.is-caishen {
  border: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 5px 2px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 5px rgba(244, 187, 65, 0.72));
}

.tile-back,
.game-stage .tile-back {
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/tiles/mahjong-tile-back-web.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.42));
}

.wan-number,
.wan-suit,
.honor-glyph {
  filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.36));
}

.wan-number {
  color: #155781;
  text-shadow:
    0 0.65px 0 #0a314b,
    0 1px 1px rgba(12, 44, 63, 0.22);
}

.wan-suit,
.dragon-red {
  color: #b6252a;
  text-shadow:
    0 0.65px 0 #761318,
    0 1px 1px rgba(92, 17, 20, 0.2);
}

.dragon-green {
  color: #0d7b53;
  text-shadow:
    0 0.65px 0 #08492f,
    0 1px 1px rgba(8, 71, 46, 0.2);
}

.wind-face {
  color: #193e5c;
  text-shadow:
    0 0.65px 0 #0a273b,
    0 1px 1px rgba(13, 48, 70, 0.2);
}

.white-frame {
  filter: saturate(1.08) contrast(1.04);
}

.tile-face-image {
  position: relative;
  z-index: 1;
  width: 118%;
  height: 114%;
  max-width: none;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: translateY(-1.5%);
  filter:
    saturate(1.04)
    contrast(1.03)
    drop-shadow(0 0.55px 0 rgba(255, 255, 255, 0.34))
    drop-shadow(0 0.65px 0.45px rgba(28, 42, 38, 0.24));
}

.tile.compact-tile .tile-face-image,
.tile.mini-discard .tile-face-image {
  width: 122%;
  height: 118%;
}

.tile[data-type="tiao-1"] .tile-face-image {
  width: 132%;
  height: 128%;
}

@media (max-width: 600px) {
  .game-stage .table-board {
    min-width: 1000px;
    height: 580px;
    min-height: 580px;
    padding: 22px;
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    grid-template-rows: 100px minmax(0, 1fr) 135px;
  }

  .game-stage .center-state.japanese-center {
    width: 272px;
    min-height: 254px;
  }

  .game-stage .center-scoreboard {
    width: 210px;
    height: 210px;
    flex-basis: 210px;
  }

  .game-stage .center-core {
    width: 78px;
    height: 94px;
  }

  .game-stage .center-score {
    width: 112px;
    height: 31px;
  }

  .game-stage .score-left { left: -38px; }
  .game-stage .score-right { right: -38px; }

  .game-stage .turn-console {
    width: 264px;
    min-height: 38px;
    margin-top: 10px;
  }

  .game-stage .seat-bottom .tile:not(.compact-tile):not(.mini-discard) {
    width: 39px;
    height: 57px;
    padding: 6px 6px 11px;
  }

  .game-stage .seat-bottom .own-hand {
    gap: 1px;
  }

  .game-stage .seat-bottom .seat-head {
    left: -180px;
  }

  .game-stage .action-dock:not(.has-action-buttons) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Japanese digital-mahjong inspired table skin
   -------------------------------------------------------------------------- */

body.is-in-room {
  background:
    radial-gradient(circle at 50% -20%, rgba(55, 91, 104, 0.3), transparent 42rem),
    radial-gradient(circle at 10% 80%, rgba(105, 71, 40, 0.16), transparent 34rem),
    linear-gradient(160deg, #070a0e 0%, #0c1118 48%, #080b10 100%);
}

.is-in-room .page-texture {
  opacity: 0.42;
  background-image:
    linear-gradient(30deg, rgba(255, 255, 255, 0.012) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.012) 87.5%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.012) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.012) 87.5%);
  background-size: 42px 72px;
}

.is-in-room .app-header,
.is-in-room .app-main {
  width: min(1480px, calc(100% - 30px));
}

.is-in-room .app-header {
  height: 66px;
  border-bottom-color: rgba(207, 171, 105, 0.19);
}

.is-in-room .brand-mark {
  width: 36px;
  height: 42px;
  padding: 3px;
  font-size: 19px;
  border-radius: 5px;
  box-shadow:
    0 4px 0 #22604e,
    0 7px 16px rgba(0, 0, 0, 0.32);
}

.is-in-room .brand-mark span {
  width: 25px;
  height: 28px;
}

.is-in-room .brand-copy strong {
  font-size: 19px;
}

.room-view {
  padding: 12px 0 46px;
}

.room-toolbar {
  min-height: 50px;
  margin-bottom: 8px;
  padding: 6px 10px 6px 16px;
  border-color: rgba(202, 167, 103, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(32, 38, 47, 0.94), rgba(12, 16, 22, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 7px 22px rgba(0, 0, 0, 0.28);
}

.room-code-button strong {
  color: #edce8e;
  text-shadow: 0 0 14px rgba(230, 187, 99, 0.18);
}

.ghost-button {
  border-radius: 5px;
}

.board-scroller {
  padding: 10px 8px 20px;
}

.table-board {
  min-width: 1100px;
  height: 760px;
  padding: 25px;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  grid-template-rows: 170px minmax(0, 1fr) 205px;
  gap: 0;
  border: 12px solid #181b20;
  border-radius: 28px;
  background:
    radial-gradient(circle at center, rgba(56, 150, 144, 0.15), transparent 35%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #165a58, #0d4142 52%, #0a3437 100%);
  box-shadow:
    0 0 0 2px #725c3f,
    0 0 0 7px #080a0d,
    0 24px 70px rgba(0, 0, 0, 0.52),
    inset 0 0 0 2px rgba(231, 200, 140, 0.18),
    inset 0 0 85px rgba(0, 0, 0, 0.34);
}

.table-board::before {
  inset: 10px;
  border: 1px solid rgba(229, 198, 135, 0.22);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 4px rgba(3, 28, 29, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

.table-board::after {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(235, 221, 184, 0.032) 50%, transparent 50.15%),
    linear-gradient(transparent 49.85%, rgba(235, 221, 184, 0.032) 50%, transparent 50.15%);
  pointer-events: none;
}

.ornament {
  display: none;
}

.seat-zone {
  position: relative;
  overflow: visible;
  border-radius: 0;
}

.seat-card,
.seat-card.is-current {
  position: relative;
  height: 100%;
  padding: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.seat-card.empty-seat {
  width: 148px;
  height: 48px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #81999b;
  border: 1px dashed rgba(187, 211, 207, 0.18);
  border-radius: 7px;
  background: rgba(4, 22, 25, 0.35);
}

.seat-head {
  position: absolute;
  z-index: 9;
  width: 158px;
  min-height: 43px;
  padding: 6px 8px;
  gap: 7px;
  border: 1px solid rgba(186, 199, 197, 0.17);
  border-left: 3px solid #436c70;
  border-radius: 5px;
  background:
    linear-gradient(110deg, rgba(31, 39, 45, 0.96), rgba(12, 18, 23, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 15px rgba(0, 0, 0, 0.35);
}

.seat-card.is-current .seat-head {
  border-color: rgba(237, 195, 111, 0.54);
  border-left-color: #efc56f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(239, 197, 111, 0.12),
    0 0 23px rgba(239, 190, 86, 0.16);
  animation: current-player-glow 1.8s ease-in-out infinite alternate;
}

@keyframes current-player-glow {
  from { filter: brightness(0.96); }
  to { filter: brightness(1.12); }
}

.seat-top .seat-head {
  left: 0;
  top: 0;
}

.seat-bottom .seat-head {
  left: -205px;
  top: auto;
  bottom: 8px;
}

.seat-left .seat-head {
  left: 0;
  top: 0;
}

.seat-right .seat-head {
  right: 0;
  top: 0;
}

.avatar {
  flex-basis: 29px;
  width: 29px;
  height: 29px;
  color: #202b2b;
  font-size: 14px;
  border-radius: 4px;
  background: linear-gradient(145deg, #f3e6c8, #bca77d);
  box-shadow: 0 2px 0 #726142;
}

.avatar::after {
  right: -2px;
  bottom: -2px;
  width: 7px;
  height: 7px;
  border-color: #171e22;
}

.player-name-row {
  gap: 4px;
}

.seat-wind {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 19px;
  color: #efd18d;
  font-family: STKaiti, KaiTi, serif;
  font-size: 12px;
  border: 1px solid rgba(231, 199, 127, 0.37);
  border-radius: 3px;
  background: rgba(215, 170, 78, 0.08);
}

.player-name {
  color: #edf4f1;
  font-size: 11px;
}

.player-score {
  color: #91aaa7;
  font-size: 9px;
}

.badge {
  padding: 1px 4px;
  color: #2a2112;
  border-radius: 3px;
  background: #dfb763;
}

.badge.me {
  background: #397c79;
}

.float-badge {
  position: absolute;
  right: -2px;
  top: -17px;
  padding: 2px 7px;
  color: #ffe0a0;
  font-size: 10px;
  border: 1px solid rgba(235, 183, 84, 0.32);
  border-radius: 999px;
  background: #583720;
}

.hidden-hand {
  position: absolute;
  z-index: 4;
  min-height: 29px;
  justify-content: center;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
}

.hidden-hand::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -7px;
  height: 8px;
  z-index: -1;
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(#6d5437, #2b2118);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
}

.tile-back {
  width: 18px;
  height: 27px;
  margin-left: -4px;
  border-color: rgba(226, 214, 180, 0.56);
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 35%, rgba(230, 192, 112, 0.22) 36% 42%, transparent 43%),
    linear-gradient(145deg, #183e50, #0b2533);
  box-shadow:
    0 2px 0 #071820,
    inset 0 0 0 2px rgba(227, 194, 121, 0.07);
}

.seat-top .hidden-hand {
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
}

.seat-bottom .own-hand {
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: 6;
  margin: 0;
  padding: 0 7px;
  gap: 3px;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.34));
}

.seat-bottom .own-hand::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -11px;
  height: 12px;
  z-index: -1;
  border: 1px solid #1b1511;
  border-radius: 2px 2px 7px 7px;
  background: linear-gradient(#73583a, #2c2017 75%);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.45);
}

.seat-left .hidden-hand {
  left: 43px;
  top: 54%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.seat-right .hidden-hand {
  right: 43px;
  top: 54%;
  transform: translate(50%, -50%) rotate(-90deg);
}

.hand-count {
  position: absolute;
  right: -30px;
  bottom: 4px;
  margin: 0;
  color: #aec1bd;
  white-space: nowrap;
}

.seat-left .hand-count,
.seat-right .hand-count {
  display: none;
}

.discard-row {
  position: absolute;
  z-index: 3;
  min-height: 0;
  max-height: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 24px);
  grid-auto-rows: 32px;
  align-content: start;
  justify-content: center;
  gap: 2px;
  overflow: visible;
}

.seat-top .discard-row {
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
}

.seat-bottom .discard-row {
  left: 50%;
  top: 28px;
  min-height: 0;
  max-height: none;
  padding: 0;
  transform: translateX(-50%);
}

.seat-left .discard-row {
  right: 4px;
  top: 52%;
  grid-template-columns: repeat(4, 24px);
  transform: translateY(-50%);
}

.seat-right .discard-row {
  left: 4px;
  top: 52%;
  grid-template-columns: repeat(4, 24px);
  transform: translateY(-50%);
}

.discard-row .tile.mini-discard {
  width: 24px;
  height: 32px;
  font-size: 8px;
  box-shadow:
    0 1px 0 #25604f,
    0 2px 3px rgba(0, 0, 0, 0.25);
}

.meld-row {
  position: absolute;
  z-index: 5;
  min-height: 0;
  padding: 0;
  gap: 4px;
}

.seat-top .meld-row {
  right: 0;
  top: 3px;
}

.seat-bottom .meld-row {
  right: -205px;
  bottom: 8px;
  min-height: 0;
  padding: 0;
}

.seat-left .meld-row {
  left: 2px;
  bottom: 2px;
}

.seat-right .meld-row {
  right: 2px;
  bottom: 2px;
}

.meld-group {
  padding: 3px;
  border-color: rgba(222, 202, 157, 0.22);
  background: rgba(3, 20, 22, 0.58);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.22);
}

.seat-bottom .tile:not(.compact-tile):not(.mini-discard) {
  width: 45px;
  height: 64px;
  font-size: 17px;
  border-radius: 5px;
}

.tile {
  border-color: #fffef4;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(160deg, #fffdf6 0%, #f3ead7 60%, #d7c39d 100%);
  box-shadow:
    0 4px 0 #2b755f,
    0 5px 0 #174a3d,
    0 8px 11px rgba(0, 0, 0, 0.3);
}

button.tile {
  transition:
    transform 120ms ease,
    filter 120ms ease,
    box-shadow 120ms ease;
}

button.tile:hover {
  transform: translateY(-12px) scale(1.035);
  filter: brightness(1.05);
}

.tile.is-caishen {
  border-color: #e9bc5e;
  box-shadow:
    0 4px 0 #a87428,
    0 5px 0 #6c4817,
    0 0 0 2px rgba(239, 190, 84, 0.4),
    0 0 18px rgba(244, 184, 62, 0.26);
}

.tile-mark {
  right: -4px;
  top: -6px;
  color: #fff3cf;
  background: linear-gradient(145deg, #c74632, #80251f);
  border: 1px solid #f0b56e;
}

.table-center {
  position: relative;
  z-index: 4;
}

.center-state.japanese-center {
  width: 310px;
  min-height: 336px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.center-scoreboard {
  position: relative;
  width: 244px;
  height: 244px;
  flex: 0 0 244px;
  border: 2px solid #8b7451;
  border-radius: 9px;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.025), transparent 55%),
    #10171b;
  box-shadow:
    0 0 0 5px rgba(5, 23, 26, 0.55),
    0 13px 28px rgba(0, 0, 0, 0.36),
    inset 0 0 34px rgba(0, 0, 0, 0.4);
}

.center-scoreboard::before,
.center-scoreboard::after {
  content: "";
  position: absolute;
  background: rgba(207, 182, 130, 0.12);
}

.center-scoreboard::before {
  left: 50%;
  top: 7px;
  bottom: 7px;
  width: 1px;
}

.center-scoreboard::after {
  left: 7px;
  right: 7px;
  top: 50%;
  height: 1px;
}

.center-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 88px;
  height: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(225, 196, 134, 0.31);
  border-radius: 6px;
  background: linear-gradient(145deg, #20292d, #0b1115);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translate(-50%, -50%);
}

.fixed-joker-label {
  color: #aebdba;
  font-size: 8px;
  letter-spacing: 0.13em;
}

.center-joker .tile {
  width: 30px;
  height: 41px;
  padding: 3px 2px 6px;
  font-size: 11px;
  border-radius: 4px;
}

.center-joker .tile-mark {
  min-width: 13px;
  height: 13px;
  font-size: 6px;
}

.remaining-count {
  color: #8fa4a2;
  font-size: 8px;
}

.remaining-count b {
  color: #f0cc7e;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
}

.center-score {
  position: absolute;
  z-index: 2;
  width: 126px;
  height: 34px;
  padding: 3px 7px;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  color: #adbfbd;
  border: 1px solid rgba(177, 195, 192, 0.12);
  border-radius: 4px;
  background: rgba(23, 31, 35, 0.94);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28);
}

.center-score.is-turn {
  color: #fff4d2;
  border-color: rgba(235, 193, 105, 0.6);
  background: linear-gradient(110deg, #40341f, #181c1e);
  box-shadow: 0 0 14px rgba(235, 186, 83, 0.2);
}

.score-wind {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: #ebc877;
  font-family: STKaiti, KaiTi, serif;
  font-size: 14px;
  border: 1px solid rgba(231, 196, 119, 0.35);
  border-radius: 3px;
}

.score-name {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.center-score strong {
  color: #eef5f2;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
}

.score-top {
  left: 50%;
  top: 7px;
  transform: translateX(-50%) rotate(180deg);
}

.score-bottom {
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
}

.score-left {
  left: -39px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.score-right {
  right: -39px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.turn-console {
  width: 300px;
  min-height: 43px;
  margin-top: 16px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(202, 178, 126, 0.24);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(25, 33, 38, 0.95), rgba(10, 16, 20, 0.95));
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
}

.turn-lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e9bc5d;
  box-shadow:
    0 0 0 3px rgba(233, 188, 93, 0.1),
    0 0 10px rgba(233, 188, 93, 0.45);
}

.turn-console .turn-message {
  color: #edf3ef;
  font-size: 11px;
  text-align: left;
}

.wall-brief {
  grid-column: 2;
  color: #738c89;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  text-align: left;
}

.japanese-center .reaction-clock {
  margin-top: 8px;
  padding: 4px 10px;
  color: #ffe09d;
  border: 1px solid rgba(234, 188, 92, 0.28);
  border-radius: 999px;
  background: rgba(43, 31, 17, 0.76);
}

.center-state.result-center {
  border-color: rgba(222, 185, 107, 0.35);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(34, 42, 47, 0.94), rgba(10, 17, 20, 0.92));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.action-dock {
  width: min(1100px, 100%);
  min-height: 66px;
  margin: 3px auto 0;
  padding: 10px 16px;
  gap: 8px;
  border-color: rgba(196, 164, 103, 0.27);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(28, 34, 41, 0.96), rgba(9, 13, 18, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 27px rgba(0, 0, 0, 0.34);
}

.action-prompt {
  color: #96aaa7;
  font-size: 11px;
}

.action-button {
  min-width: 76px;
  min-height: 44px;
  padding: 0 17px;
  color: #e6efeb;
  font-size: 13px;
  border: 1px solid #596568;
  border-radius: 5px;
  background: linear-gradient(180deg, #323c42, #171e23);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.3);
}

.action-button.primary-action {
  color: #2d2314;
  border-color: #e6bd68;
  background: linear-gradient(180deg, #f3d387, #b98639);
}

.action-button.hu-action {
  color: #fff5e3;
  border-color: #dd755d;
  background: linear-gradient(180deg, #c4523d, #7f261f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 15px rgba(190, 58, 40, 0.22);
}

.game-feed {
  width: min(1100px, 100%);
  margin: 8px auto 0;
  padding: 12px 16px 13px;
  border-color: rgba(185, 166, 125, 0.15);
  border-radius: 7px;
  background: rgba(8, 12, 17, 0.72);
}

.event-list {
  max-height: 76px;
}

.room-status {
  color: #c2d0cc;
  background: rgba(66, 115, 111, 0.2);
}

.modal {
  border-color: rgba(220, 182, 107, 0.35);
  border-radius: 12px;
  background: linear-gradient(145deg, #20282e, #0c1217);
}

.rules-grid article {
  border-radius: 7px;
  background: rgba(5, 12, 16, 0.45);
}

@media (max-width: 900px) {
  .is-in-room .app-header,
  .is-in-room .app-main {
    width: min(100% - 18px, 1480px);
  }

  .board-scroller {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  .is-in-room .app-header {
    height: 58px;
  }

  .table-board {
    min-width: 1030px;
    height: 720px;
    grid-template-columns: 205px minmax(0, 1fr) 205px;
    grid-template-rows: 155px minmax(0, 1fr) 195px;
  }

  .room-toolbar {
    min-height: 44px;
  }

  .action-dock,
  .game-feed {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Readability pass: larger type with guarded spacing and truncation
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 13px;
}

.hero-copy > p {
  max-width: 650px;
  font-size: 17px;
  line-height: 1.8;
}

.feature-row span {
  font-size: 13px;
}

.entry-card-head p,
.field-label {
  font-size: 14px;
}

.entry-card-head h2 {
  font-size: 27px;
}

.input-wrap input,
.room-code-input,
.primary-button,
.secondary-button {
  font-size: 16px;
}

.entry-note {
  font-size: 12.5px;
  line-height: 1.65;
}

.is-in-room .brand-copy strong {
  font-size: 22px;
  letter-spacing: 0.13em;
}

.is-in-room .brand-copy small {
  font-size: 8.5px;
}

.is-in-room .connection-pill {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.room-toolbar {
  min-height: 56px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.match-copy small {
  font-size: 8.5px;
}

.match-copy strong {
  font-size: 15px;
}

.toolbar-label {
  font-size: 10px;
}

.room-code-button strong {
  font-size: 17px;
  letter-spacing: 0.17em;
}

.room-code-button span {
  font-size: 11px;
}

.toolbar-actions {
  gap: 4px;
}

.ghost-button {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.15;
  white-space: nowrap;
}

.sound-icon,
.fullscreen-icon {
  font-size: 14px;
}

.game-stage .seat-card.empty-seat {
  width: 174px;
  height: 58px;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  line-height: 1.25;
}

.game-stage .seat-card.empty-seat small {
  font-size: 11.5px;
}

.game-stage .seat-head {
  width: 194px;
  min-height: 54px;
  padding: 7px 9px;
  gap: 8px;
}

.game-stage .avatar {
  width: 33px;
  height: 33px;
  flex-basis: 33px;
  font-size: 16px;
}

.game-stage .player-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.game-stage .player-name-row {
  min-width: 0;
  gap: 4px;
  flex-wrap: nowrap;
}

.game-stage .seat-wind {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 14px;
}

.game-stage .player-name {
  min-width: 0;
  max-width: 86px;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.2;
}

.game-stage .player-score {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.25;
}

.game-stage .badge {
  flex: 0 0 auto;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1.15;
}

.game-stage .float-badge {
  top: -20px;
  padding: 3px 8px;
  font-size: 11.5px;
}

.game-stage .hand-count {
  font-size: 11px;
}

.game-stage .center-state.japanese-center {
  width: 338px;
  min-height: 356px;
}

.game-stage .center-scoreboard {
  width: 254px;
  height: 254px;
  flex-basis: 254px;
}

.game-stage .center-core {
  width: 96px;
  height: 116px;
  gap: 4px;
}

.game-stage .fixed-joker-label {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.game-stage .remaining-count {
  font-size: 10px;
}

.game-stage .remaining-count b {
  font-size: 12px;
}

.game-stage .center-score {
  width: 138px;
  height: 40px;
  padding: 4px 8px;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  gap: 5px;
}

.game-stage .score-wind {
  width: 23px;
  height: 23px;
  font-size: 15px;
}

.game-stage .score-name {
  min-width: 0;
  font-size: 11px;
}

.game-stage .center-score strong {
  font-size: 12px;
}

.game-stage .score-top {
  top: 8px;
}

.game-stage .score-bottom {
  bottom: 8px;
}

.game-stage .score-left {
  left: -45px;
}

.game-stage .score-right {
  right: -45px;
}

.game-stage .turn-console {
  width: 326px;
  min-height: 52px;
  margin-top: 15px;
  padding: 8px 13px;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
}

.game-stage .turn-console .turn-message {
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.game-stage .wall-brief {
  font-size: 10.5px;
  line-height: 1.3;
}

.game-stage .center-state:not(.japanese-center) .turn-message {
  font-size: 15px;
}

.game-stage .center-overline,
.game-stage .reaction-clock {
  font-size: 11.5px;
}

.game-stage .contract-console {
  min-width: 190px;
  padding: 7px 11px;
  gap: 7px;
  font-size: 12px;
  line-height: 1.25;
}

.game-stage .contract-console p {
  min-width: 0;
  gap: 6px;
}

.game-stage .contract-console p b {
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-stage .contract-console small {
  font-size: 10.5px;
}

.game-stage .contract-seal {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 13px;
}

.game-stage .action-dock {
  min-height: 74px;
  padding: 10px 18px;
  gap: 9px;
  flex-wrap: wrap;
}

.game-stage .action-prompt {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.4;
}

.game-stage .action-button {
  min-width: 84px;
  min-height: 48px;
  padding: 0 18px;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}

.game-stage .feed-heading > div > span {
  font-size: 13px;
}

.game-stage .feed-heading small {
  font-size: 9px;
}

.game-stage .room-status {
  padding: 4px 9px;
  font-size: 10.5px !important;
}

.game-stage .event-list {
  max-height: 88px;
}

.game-stage .event-item {
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.55;
}

.game-stage .event-item time {
  font-size: 10.5px;
}

.game-stage .event-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modal-kicker {
  font-size: 12px;
}

.rules-modal h2,
.result-modal h2 {
  font-size: 27px;
  line-height: 1.3;
}

.rules-grid article {
  padding: 20px;
}

.rules-grid article h3 {
  font-size: 16px;
  line-height: 1.3;
}

.rules-grid article p,
.rules-footnote,
.result-modal p {
  font-size: 13.5px;
  line-height: 1.7;
}

.rules-grid article > span {
  font-size: 24px;
}

.modal .primary-button.compact {
  min-height: 48px;
  font-size: 15px;
}

.result-pattern-ribbon {
  font-size: 17px;
}

.result-contract {
  font-size: 14px !important;
}

.effect-copy small {
  font-size: 10px;
}

.effect-copy strong {
  font-size: 34px;
}

.effect-copy span {
  font-size: 12.5px;
}

.toast {
  font-size: 13.5px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .room-toolbar {
    min-height: 54px;
  }

  .ghost-button {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 12px;
  }

  .rules-grid article p,
  .rules-footnote,
  .result-modal p {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .is-in-room .brand-copy strong {
    font-size: 21px;
  }

  .is-in-room .connection-pill {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .room-toolbar {
    min-height: 50px;
    padding: 5px 6px;
  }

  .game-stage {
    height: 760px;
    min-height: 760px;
  }

  .game-stage .board-scroller {
    bottom: 132px;
  }

  .room-code-button strong {
    font-size: 16px;
  }

  .toolbar-actions {
    gap: 1px;
  }

  .ghost-button {
    min-height: 34px;
    padding: 7px 6px;
    font-size: 11.5px;
  }

  .game-stage .action-button {
    min-width: 68px;
    min-height: 42px;
    padding: 0 12px;
    font-size: 13px;
  }

  .game-stage .action-dock {
    max-height: 116px;
    overflow-y: auto;
    align-content: center;
  }

  .game-call-effect {
    grid-template-columns: 96px minmax(150px, 1fr);
  }

  .effect-copy strong {
    font-size: 30px;
  }

  .effect-copy span {
    font-size: 11.5px;
  }

  .rules-modal h2,
  .result-modal h2 {
    font-size: 23px;
  }

  .rules-grid article {
    padding: 17px;
  }

  .rules-grid article h3 {
    font-size: 15px;
  }

  .rules-grid article p,
  .rules-footnote,
  .result-modal p {
    font-size: 13px;
    line-height: 1.65;
  }
}