:root {
  color-scheme: dark;
  --app-aspect-width: 19.5;
  --app-aspect-height: 9;
  --app-aspect-ratio: 2.166666667;
  --ink: #fff7dc;
  --muted: #b8c7c2;
  --felt: #086247;
  --felt-deep: #043d31;
  --panel: rgba(5, 18, 20, .9);
  --panel-soft: rgba(11, 31, 32, .84);
  --line: rgba(238, 191, 82, .46);
  --gold: #f0bd4f;
  --gold-deep: #a96d16;
  --red: #d84b3f;
  --blue: #2f86d6;
  --green: #2a9b71;
  --shadow: 0 16px 42px rgba(0, 0, 0, .42);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #02070c;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

body {
  display: grid;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(17, 57, 62, .45), transparent 62%),
    #02070c;
  -webkit-text-size-adjust: 100%;
}

.app-viewport {
  position: relative;
  width: min(100vw, 216.666667vh);
  height: min(100vh, 46.153846vw);
  width: min(100dvw, 216.666667dvh);
  height: min(100dvh, 46.153846dvw);
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: 19.5 / 9;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint size style;
  container: app-viewport / size;
  background: #030b14;
  box-shadow: 0 0 54px rgba(0, 0, 0, .72);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 3px solid #7ad8ff;
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.game-app,
.game-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.game-stage {
  background-color: #074f3c;
  background-image: url("mahjong-room-three-ai-edge-v3.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  isolation: isolate;
}

.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 8, 10, .1);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .38);
}

.top-hud {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  display: grid;
  min-height: calc(74px + env(safe-area-inset-top));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(241, 191, 73, .28);
  background: rgba(4, 11, 17, .8);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
  backdrop-filter: blur(12px);
}

.brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 49px;
  height: 59px;
  padding: 7px 8px;
  object-fit: contain;
  border: 1px solid rgba(255, 219, 129, .74);
  border-radius: 9px;
  background-color: #fff8e5;
  background-image: url("tile-blank-tight.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .36));
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-copy strong {
  color: #ffe8a2;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(22px, 2.2cqw, 32px);
  line-height: 1;
  letter-spacing: .06em;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .7);
}

.brand-copy span {
  color: #d6eadf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.round-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(4, 31, 27, .8);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  font-size: 11px;
  white-space: nowrap;
}

.round-summary b {
  color: #ffd768;
  font-size: 14px;
}

.hud-tools {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.icon-button,
.status-footer button {
  display: grid;
  min-width: 54px;
  min-height: 52px;
  place-items: center;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid rgba(238, 191, 82, .44);
  border-radius: 12px;
  color: #fff4d0;
  background: rgba(5, 11, 17, .82);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

.icon-button img,
.status-footer button img {
  width: 20px;
  height: 20px;
  filter: invert(89%) sepia(34%) saturate(664%) hue-rotate(341deg) brightness(105%);
}

.icon-button span,
.status-footer button span {
  font-size: 10px;
  font-weight: 900;
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.icon-button[aria-pressed="true"]#pauseBtn {
  border-color: rgba(255, 220, 118, .9);
  color: #281804;
  background: #efbe4c;
  box-shadow: 0 0 0 2px rgba(239, 190, 76, .16), 0 8px 22px rgba(0, 0, 0, .34);
}

.icon-button[aria-pressed="true"]#pauseBtn img {
  filter: none;
}

.exit-game-button {
  border-color: rgba(234, 111, 96, .62);
  color: #ffe0d9;
  background: rgba(67, 24, 24, .86);
}

.exit-game-button img {
  filter: invert(83%) sepia(21%) saturate(797%) hue-rotate(315deg) brightness(111%);
}

.opponent {
  position: absolute;
  z-index: 20;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.opponent-east {
  top: calc(clamp(230px, 31%, 285px) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
}

.opponent-north {
  top: 31%;
  left: max(8px, env(safe-area-inset-left));
  justify-items: start;
}

.opponent-south {
  top: 31%;
  right: max(8px, env(safe-area-inset-right));
  justify-items: end;
}

.opponent-north,
.opponent-south {
  transform: translateY(clamp(22px, 3.2cqh, 48px));
}

.opponent-card {
  display: flex;
  min-width: 154px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 6px;
  border: 1px solid rgba(255, 217, 112, .74);
  border-radius: 999px;
  background: rgba(5, 13, 18, .86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.dealer-card {
  border-width: 2px;
  box-shadow: 0 0 22px rgba(239, 185, 62, .28), var(--shadow);
}

.opponent-card.is-thinking {
  border-color: #7ad8ff;
  animation: opponent-thinking 1s ease-in-out infinite alternate;
}

@keyframes opponent-thinking {
  from { box-shadow: 0 0 0 rgba(122, 216, 255, 0), var(--shadow); }
  to { box-shadow: 0 0 18px rgba(122, 216, 255, .5), var(--shadow); }
}

.wind-badge {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid rgba(255, 238, 185, .82);
  border-radius: 50%;
  color: #fff;
  font-size: 19px;
  font-weight: 950;
}

.wind-east { background: #ad3538; }
.wind-south { background: #b94f35; }
.wind-north { background: #3269a7; }

.opponent-card > div {
  display: grid;
  min-width: 72px;
  gap: 1px;
}

.opponent-card strong {
  font-size: 14px;
}

.opponent-card span {
  color: #c7d6d0;
  font-size: 9px;
}

.opponent-card span b {
  color: #ffd86b;
  font-size: 11px;
}

.opponent-card em {
  margin-left: auto;
  padding: 4px 6px;
  border-radius: 999px;
  color: #ffdd73;
  background: rgba(126, 68, 14, .58);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.speech {
  position: absolute;
  top: -43px;
  left: 50%;
  min-width: 92px;
  margin: 0;
  padding: 8px 10px;
  transform: translateX(-50%);
  border: 2px solid #2d261c;
  border-radius: 18px;
  color: #17130e;
  background: #fff8e9;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.opponent-east .speech,
.opponent-north .speech,
.opponent-south .speech {
  top: 2px;
  transform: none;
}

.opponent-east .speech,
.opponent-north .speech {
  left: calc(100% + 8px);
}

.opponent-south .speech {
  right: calc(100% + 8px);
  left: auto;
}

.opponent-rack {
  display: grid;
  width: max-content;
  max-width: 220px;
  justify-items: center;
  gap: 4px;
  margin: 5px auto 0;
  padding: 4px 6px 5px;
  border: 1px solid rgba(235, 196, 90, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(5, 44, 36, .9), rgba(3, 25, 22, .78));
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 229, 145, .16);
  backdrop-filter: blur(4px);
}

.opponent-rack:not(:has(.concealed-tile)):not(:has(img)) {
  display: none;
}

.opponent-open-row {
  display: flex;
  max-width: 206px;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.opponent-open-row:not(:has(img)) {
  display: none;
}

.opponent-open-row .mini-tiles:empty {
  display: none;
}

.concealed-hand {
  display: flex;
  justify-content: center;
  gap: 1px;
  margin-top: 0;
}

.opponent-east .concealed-hand {
  display: none;
}

.opponent-east .opponent-rack:not(:has(img)) {
  display: none;
}

.concealed-hand .concealed-tile:nth-child(4n):not(:last-child) {
  margin-inline-end: 2px;
}

.concealed-tile {
  display: block;
  width: 14px;
  height: 20px;
  border-radius: 3px;
  background-color: #c39127;
  background-image: url("tile-blank-tight.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .48);
  filter: sepia(.88) saturate(1.8) brightness(.76);
}

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

.discard-zone {
  position: absolute;
  width: min(20cqw, 250px);
  min-height: 58px;
  padding: 4px 6px 6px;
  border: 1px solid rgba(255, 232, 170, .14);
  border-radius: 10px;
  background: rgba(0, 49, 37, .27);
}

.discard-zone > span {
  display: block;
  margin-bottom: 3px;
  color: rgba(238, 247, 239, .68);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}

.discard-east {
  top: 45.5%;
  left: 50%;
  transform: translateX(-50%);
}

.discard-north {
  top: 53%;
  left: 23%;
}

.discard-south {
  top: 53%;
  right: 23%;
}

.discard-player {
  bottom: 27%;
  left: 50%;
  transform: translateX(-50%);
}

.discard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  justify-content: center;
}

.discard-tile,
.mini-tile {
  display: grid;
  width: 100%;
  max-width: 31px;
  aspect-ratio: .715;
  place-items: center;
  padding: 3px;
  border-radius: 4px;
  background-color: #fff8e4;
  background-image: url("tile-blank-tight.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .46);
}

.discard-tile img,
.mini-tile img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.center-hub {
  position: absolute;
  top: 55.5%;
  left: 50%;
  width: clamp(220px, 21cqw, 300px);
  padding: 10px 12px 11px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 218, 112, .62);
  border-radius: 16px;
  color: #f6fffa;
  background: rgba(3, 43, 35, .91);
  box-shadow: 0 16px 28px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 255, 255, .05);
  text-align: center;
}

.hub-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #bfe9d7;
  font-size: 9px;
  font-weight: 850;
}

.hub-topline b {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(255, 215, 104, .64);
  border-radius: 50%;
  color: #ffe17c;
  background: #422a12;
  font-size: 13px;
}

.center-hub h2 {
  margin: 2px 0 1px;
  font-size: clamp(17px, 1.8cqw, 24px);
  line-height: 1.15;
}

.center-hub p {
  margin: 0;
  color: #bed2ca;
  font-size: 9px;
  line-height: 1.3;
}

.dice-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
}

.die {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
}

.die img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.die b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b02d32;
  font-size: 15px;
  text-shadow: 0 1px #fff;
}

.gold-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 5px;
  color: #ffdf78;
  font-size: 9px;
  font-weight: 900;
}

.mini-tiles {
  display: flex;
  min-height: 0;
  align-items: center;
  gap: 2px;
}

.meld-group {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-right: 2px;
}

.gold-tiles .mini-tile {
  width: 23px;
  border: 1px solid #ffd250;
  box-shadow: 0 0 10px rgba(255, 195, 55, .38);
}

.turn-compass {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: 6px;
}

.turn-compass span {
  padding: 3px 2px;
  border-radius: 6px;
  color: #9dbdb0;
  background: rgba(0, 0, 0, .2);
  font-size: 9px;
  font-weight: 900;
}

.turn-compass span.is-current {
  color: #281b08;
  background: var(--gold);
}

.action-dock {
  position: absolute;
  right: 50%;
  bottom: calc(189px + env(safe-area-inset-bottom));
  z-index: 36;
  display: flex;
  min-width: min(680px, 78cqw);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px 7px 13px;
  transform: translateX(50%);
  border: 1px solid rgba(244, 195, 83, .58);
  border-radius: 16px;
  background: rgba(4, 18, 19, .88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  backdrop-filter: blur(10px);
}

.action-copy {
  display: grid;
  min-width: 150px;
  gap: 1px;
}

.action-copy b {
  color: #ffe08a;
  font-size: 12px;
}

.action-copy span {
  color: #aebfba;
  font-size: 9px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.action-button,
.start-button,
.continue-button,
.quick-phrases button {
  min-width: 58px;
  min-height: 46px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 225, 146, .44);
  border-radius: 11px;
  color: #fff8df;
  background: #145b47;
  box-shadow: 0 4px 0 #073b2d;
  font-weight: 950;
}

.action-button:disabled,
.start-button:disabled {
  cursor: not-allowed;
  opacity: .45;
  box-shadow: none;
}

.action-button.hu {
  min-width: 68px;
  color: #2b160c;
  background: #f1bd3f;
  box-shadow: 0 4px 0 #9b6513, 0 0 18px rgba(255, 202, 74, .28);
}

.action-button.discard {
  min-width: 78px;
  background: #d54a3e;
  box-shadow: 0 4px 0 #87261f;
}

.action-button.ting {
  background: #286fae;
  box-shadow: 0 4px 0 #18466f;
}

.action-button.pass {
  background: #39484b;
  box-shadow: 0 4px 0 #1e292b;
}

.action-button.utility {
  min-width: 120px;
  background: #8c5f1e;
  box-shadow: 0 4px 0 #57380e;
}

.player-zone {
  position: absolute;
  right: 0;
  bottom: calc(50px + env(safe-area-inset-bottom));
  left: 0;
  z-index: 34;
  height: 137px;
  pointer-events: none;
}

.player-hand {
  position: absolute;
  right: 12%;
  bottom: 7px;
  left: 12%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1px, .18cqw, 3px);
  pointer-events: auto;
}

.hand-tile {
  position: relative;
  display: grid;
  width: clamp(42px, 4.2cqw, 63px);
  aspect-ratio: .715;
  flex: 0 1 auto;
  place-items: center;
  padding: 7px 6px;
  border: 0;
  border-radius: 7px;
  background-color: #fff8e6;
  background-image: url("tile-blank-tight.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 7px 8px rgba(0, 0, 0, .5);
  transition: transform .16s ease, filter .16s ease;
}

.hand-tile img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
}

.hand-tile.is-selected {
  z-index: 2;
  transform: translateY(-14px);
  filter: drop-shadow(0 0 8px #ffe079);
}

.hand-tile.is-swap-selected {
  transform: translateY(-14px);
  filter: drop-shadow(0 0 8px #7ddcff);
}

.hand-tile.is-ting-candidate {
  box-shadow: 0 0 0 3px #61c6ff, 0 7px 8px rgba(0, 0, 0, .5);
}

.hand-tile.is-gold {
  box-shadow: 0 0 0 2px #ffd44f, 0 0 15px rgba(255, 205, 66, .62), 0 7px 8px rgba(0, 0, 0, .5);
}

.hand-tile.is-recommended {
  animation: recommend-pulse .72s ease-in-out infinite alternate;
}

.hand-tile.is-drawn {
  margin-left: 12px;
}

.player-extras {
  position: absolute;
  top: 0;
  left: max(14px, env(safe-area-inset-left));
  display: grid;
  gap: 4px;
  pointer-events: auto;
}

.player-extras > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.player-extras > div > span {
  width: 28px;
  color: #c7d9d2;
  font-size: 9px;
  font-weight: 900;
}

.player-extras .mini-tile {
  width: 26px;
}

.player-profile {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(3, 15, 18, .88);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
  pointer-events: auto;
  text-align: left;
}

.player-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid #e8c359;
  border-radius: 50%;
  background: #0c7456;
  font-size: 17px;
  font-weight: 950;
  overflow: hidden;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.player-profile strong {
  display: block;
  max-width: 116px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-profile .player-copy > span {
  color: #bdcec8;
  font-size: 9px;
}

.player-profile .player-copy b {
  color: #ffd666;
  font-size: 11px;
}

.player-profile em {
  padding: 4px 6px;
  border-radius: 999px;
  color: #bfead9;
  background: rgba(11, 90, 68, .52);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.status-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 42;
  display: grid;
  min-height: calc(50px + env(safe-area-inset-bottom));
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px max(12px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border-top: 1px solid rgba(239, 193, 87, .4);
  background: rgba(5, 9, 14, .9);
  box-shadow: 0 -7px 22px rgba(0, 0, 0, .32);
}

.status-footer p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #cae0d7;
  font-size: 10px;
  font-weight: 750;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-tools {
  display: flex;
  gap: 5px;
}

.status-footer button {
  min-width: 52px;
  min-height: 44px;
  grid-auto-flow: column;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 9px;
}

.round-intro {
  position: absolute;
  top: 54%;
  left: 50%;
  z-index: 48;
  width: min(460px, calc(100% - 32px));
  padding: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 214, 105, .72);
  border-radius: 20px;
  background: rgba(4, 24, 25, .94);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .54);
  text-align: center;
  backdrop-filter: blur(12px);
}

.intro-kicker {
  color: #ffd96a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.round-intro h2 {
  margin: 5px 0 7px;
  font-size: clamp(24px, 3cqw, 34px);
}

.round-intro p {
  margin: 0;
  color: #c5d9d2;
  font-size: 12px;
  line-height: 1.5;
}

.intro-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 13px 0 15px;
}

.intro-features span {
  padding: 5px 8px;
  border: 1px solid rgba(255, 224, 136, .3);
  border-radius: 999px;
  color: #dff4eb;
  background: rgba(10, 72, 55, .48);
  font-size: 9px;
  font-weight: 850;
}

.start-button,
.continue-button {
  min-width: 180px;
  background: #d94a3d;
  box-shadow: 0 5px 0 #88251f, 0 0 20px rgba(226, 76, 62, .25);
}

.toast {
  position: absolute;
  top: calc(84px + env(safe-area-inset-top));
  left: 50%;
  z-index: 80;
  max-width: min(520px, calc(100% - 24px));
  padding: 9px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 219, 121, .55);
  border-radius: 999px;
  color: #fff5d3;
  background: rgba(9, 30, 28, .94);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .34);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.modal-shade {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: rgba(0, 5, 10, .74);
  backdrop-filter: blur(8px);
}

.modal-panel {
  position: absolute;
  inset: max(4cqh, env(safe-area-inset-top)) max(5cqw, env(safe-area-inset-right)) max(4cqh, env(safe-area-inset-bottom)) max(5cqw, env(safe-area-inset-left));
  z-index: 100;
  width: auto;
  max-height: calc(100cqh - max(8cqh, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(246, 199, 88, .56);
  border-radius: 20px;
  color: #f7f4e9;
  background: #0b1b22;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
}

.modal-head {
  position: sticky;
  top: -20px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px 0 15px;
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(255, 215, 111, .22);
  background: #0b1b22;
}

.modal-head span {
  color: #d5b858;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.modal-head h2 {
  margin: 2px 0 0;
  font-size: clamp(21px, 3cqw, 30px);
}

.modal-close {
  min-width: 76px;
  min-height: 44px;
  border: 1px solid rgba(242, 193, 81, .54);
  border-radius: 11px;
  color: #fff1c6;
  background: #4a261b;
  font-weight: 900;
}

.rule-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.rule-tab {
  min-width: 96px;
  min-height: 44px;
  flex: 1 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(255, 216, 111, .25);
  border-radius: 10px;
  color: #c5d3d0;
  background: #152831;
  font-weight: 850;
}

.rule-tab.is-active {
  border-color: #ebbc50;
  color: #251909;
  background: #e6b54a;
}

.rule-pages article {
  color: #ccdad7;
  font-size: 13px;
  line-height: 1.6;
}

.rule-pages h3 {
  margin: 0 0 7px;
  color: #fff4ce;
  font-size: 18px;
}

.rule-pages p {
  margin: 0 0 12px;
}

.rule-pages ol {
  margin: 0;
  padding-left: 22px;
}

.rule-cards,
.tai-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rule-cards section,
.tai-grid span,
.settlement-row {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(235, 190, 86, .24);
  border-radius: 12px;
  background: #13262e;
}

.rule-cards b,
.tai-grid b {
  color: #ffdc73;
  font-size: 15px;
}

.formula {
  margin-top: 12px !important;
  padding: 12px;
  border-radius: 12px;
  color: #ffe499;
  background: #173329;
  font-weight: 900;
  text-align: center;
}

.simulator-page {
  display: grid;
  gap: 12px;
}

.simulator-page[hidden] {
  display: none;
}

.simulator-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid rgba(235, 190, 86, .28);
  border-radius: 14px;
  background: linear-gradient(135deg, #13382f, #10272c);
}

.simulator-intro p,
.simulator-footnote {
  margin: 0;
}

.simulator-run {
  min-width: 174px;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid #ffe39a;
  border-radius: 12px;
  color: #241906;
  background: linear-gradient(#ffd96f, #e7ad37);
  box-shadow: 0 5px 0 #8d611b;
  font-weight: 950;
}

.simulator-run:disabled {
  cursor: wait;
  filter: saturate(.45);
  opacity: .76;
}

.simulator-status {
  min-height: 42px;
  margin: 0 !important;
  padding: 10px 12px;
  border-left: 3px solid #e9bd54;
  border-radius: 8px;
  color: #d8e4df !important;
  background: #101f26;
}

.simulator-results {
  display: grid;
  gap: 12px;
}

.simulator-results[hidden] {
  display: none;
}

.simulator-metrics {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 8px;
  margin: 0;
}

.simulator-metrics > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(235, 190, 86, .2);
  border-radius: 11px;
  background: #13262e;
}

.simulator-metrics dt {
  color: #b8cac5;
  font-size: 11px;
  font-weight: 850;
}

.simulator-metrics dd {
  margin: 0;
  color: #ffdc73;
  font-size: clamp(18px, 2.4cqw, 25px);
  font-weight: 950;
  line-height: 1.1;
}

.simulator-metrics small {
  overflow: hidden;
  color: #8da9a3;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulator-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(235, 190, 86, .2);
  border-radius: 12px;
}

.simulator-seat-table {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  color: #dce8e4;
  background: #102229;
}

.simulator-seat-table caption {
  padding: 10px 12px;
  color: #fff0bd;
  background: #173329;
  font-weight: 900;
  text-align: left;
}

.simulator-seat-table th,
.simulator-seat-table td {
  padding: 9px 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: left;
}

.simulator-seat-table thead th {
  color: #9eb5b0;
  font-size: 10px;
  letter-spacing: .06em;
}

.simulator-seat-table tbody th,
.simulator-seat-table tbody td:last-child {
  color: #ffdc73;
  font-weight: 900;
}

.simulator-footnote {
  color: #8ea6a1 !important;
  font-size: 10px;
}

.settlement-panel,
.action-choice-panel,
.social-panel,
.exit-panel,
.register-panel,
.match-panel {
  inset: 50% auto auto 50%;
  width: min(560px, calc(100% - 24px));
  max-height: min(82cqh, 720px);
  transform: translate(-50%, -50%);
}

.register-panel {
  width: min(460px, calc(100% - 24px));
}

.exit-panel {
  width: min(430px, calc(100% - 24px));
}

.exit-panel > p {
  margin: 0;
  color: #cbd9d5;
  font-size: 13px;
  line-height: 1.65;
}

.exit-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.confirm-exit-button {
  min-width: 158px;
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 176, 159, .62);
  border-radius: 12px;
  color: #fff4ed;
  background: #9f3f35;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  font-weight: 950;
}

.register-lead {
  margin: 0 0 16px;
  color: #bfd0cb;
  font-size: 13px;
  line-height: 1.55;
}

.field-label,
.avatar-fieldset legend {
  display: block;
  margin-bottom: 7px;
  color: #ffe397;
  font-size: 11px;
  font-weight: 900;
}

.player-name-input {
  width: 100%;
  min-height: 48px;
  margin-bottom: 16px;
  padding: 10px 13px;
  border: 1px solid rgba(244, 201, 101, .42);
  border-radius: 12px;
  outline: none;
  color: #fff8e5;
  background: #07191e;
  font-size: 16px;
}

.player-name-input:focus {
  border-color: #7ad8ff;
  box-shadow: 0 0 0 3px rgba(122, 216, 255, .17);
}

.player-name-input[aria-invalid="true"] {
  border-color: #ef7367;
}

.avatar-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.avatar-picker label {
  min-width: 0;
  cursor: pointer;
}

.avatar-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.avatar-picker label > span {
  display: grid;
  min-height: 90px;
  place-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(244, 201, 101, .24);
  border-radius: 13px;
  background: #11282a;
}

.avatar-picker img {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  object-fit: cover;
}

.avatar-picker b {
  color: #d8e6e1;
  font-size: 11px;
}

.avatar-picker input:checked + span {
  border-color: #ffd56c;
  background: #234336;
  box-shadow: 0 0 0 2px rgba(255, 213, 108, .19);
}

.avatar-picker input:focus-visible + span {
  outline: 3px solid #7ad8ff;
  outline-offset: 2px;
}

.register-error {
  margin: 10px 0 0;
  color: #ff9d94;
  font-size: 11px;
  font-weight: 800;
}

.register-note {
  margin: 14px 0 10px;
  color: #8fa9a2;
  font-size: 10px;
  text-align: center;
}

.register-submit {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(255, 232, 163, .7);
  border-radius: 13px;
  color: #281804;
  background: linear-gradient(#ffd86d, #e7ad36);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .58);
  font-weight: 950;
}

.match-panel {
  width: min(520px, calc(100% - 24px));
  max-height: min(88cqh, 720px);
}

.match-room-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(244, 201, 101, .34);
  border-radius: 14px;
  background: linear-gradient(135deg, #173b33, #102930 72%);
}

.match-room-banner > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.match-room-banner span,
.match-seat-heading span {
  color: #d3b95f;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
}

.match-room-banner strong {
  overflow: hidden;
  color: #fff4cf;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-room-banner em {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(255, 222, 124, .32);
  border-radius: 999px;
  color: #ffe28a;
  background: rgba(4, 24, 25, .54);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.match-seat-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 2px 8px;
}

.match-seat-heading > div {
  display: grid;
  gap: 2px;
}

.match-seat-heading strong {
  color: #c8d8d3;
  font-size: 11px;
}

.match-seat-heading > b {
  color: #ffdc73;
  font-size: 15px;
}

.match-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.match-seat {
  display: grid;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(235, 190, 86, .22);
  border-radius: 12px;
  background: #13262e;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}

.match-seat.is-filled {
  border-color: rgba(240, 189, 79, .58);
  background: #17332f;
}

.match-seat.is-self {
  border-color: #e8bd55;
  background: #1d4236;
}

.match-seat.is-empty {
  opacity: .48;
}

.match-seat-avatar {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 148, .8);
  border-radius: 50%;
  background: #132f2e;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
}

.match-seat.is-empty .match-seat-avatar {
  box-shadow: none;
  filter: saturate(.35);
}

.match-seat.is-empty .match-seat-avatar.is-waiting-cycle {
  filter: none;
}

.match-seat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.match-seat-avatar.is-waiting-cycle img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: waiting-pfp-cycle 6s linear infinite both;
}

@keyframes waiting-pfp-cycle {
  0%, 14% { opacity: 1; transform: scale(1); }
  17%, 97% { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .match-seat-avatar.is-waiting-cycle img {
    opacity: 0;
    animation: none;
  }

  .match-seat-avatar.is-waiting-cycle img:first-child { opacity: 1; }
}

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

.match-seat-copy strong {
  overflow: hidden;
  color: #f9f2d8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-seat-copy span {
  color: #9fb5af;
  font-size: 9px;
}

.match-progress-shell {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(122, 216, 255, .2);
  border-radius: 12px;
  background: #0d242b;
}

.match-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.match-progress-copy strong {
  color: #eaf8f4;
  font-size: 11px;
}

.match-progress-copy span {
  color: #91aaa3;
  font-size: 9px;
  text-align: right;
}

.match-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #06171c;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55);
}

.match-progress-track i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--match-progress, .25));
  transform-origin: left;
  border-radius: inherit;
  background: linear-gradient(90deg, #2a9b71, #ffd86d);
  transition: transform .28s ease;
}

.match-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.match-primary,
.match-secondary {
  min-height: 50px;
  border-radius: 13px;
  font-weight: 950;
}

.match-primary {
  flex: 1 1 auto;
  border: 1px solid rgba(255, 232, 163, .7);
  color: #281804;
  background: linear-gradient(#ffd86d, #e7ad36);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .58);
}

.match-secondary {
  min-width: 108px;
  border: 1px solid rgba(122, 216, 255, .38);
  color: #dff6ff;
  background: #17303a;
}

.match-primary:disabled,
.match-close:disabled,
.match-panel .modal-close:disabled {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
}

.profile-panel,
.replay-panel {
  inset: 50% auto auto 50%;
  width: min(920px, calc(100% - 24px));
  max-height: min(90cqh, 860px);
  transform: translate(-50%, -50%);
}

.modal-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-secondary {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(122, 216, 255, .42);
  border-radius: 11px;
  color: #dff6ff;
  background: #17303a;
  font-weight: 900;
}

.profile-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(244, 201, 101, .34);
  border-radius: 16px;
  background: linear-gradient(135deg, #173b33, #102930 72%);
}

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

.profile-hero-avatar {
  display: grid;
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 2px solid #f3cb65;
  border-radius: 50%;
  background: #f7f0db;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}

.profile-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-identity small,
.section-heading span {
  color: #d3b95f;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
}

.profile-identity h3 {
  max-width: 280px;
  margin: 2px 0;
  overflow: hidden;
  color: #fff4cf;
  font-size: clamp(21px, 3cqw, 28px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity p {
  margin: 0;
  color: #bdd0ca;
  font-size: 11px;
}

.profile-identity p b {
  color: #ffda70;
  font-size: 15px;
}

.profile-storage-note {
  max-width: 190px;
  margin: 0;
  color: #a8c0b9;
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 18px;
}

.profile-stats article {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(231, 190, 91, .2);
  border-radius: 12px;
  background: #13262e;
}

.profile-stats span {
  color: #9eb4ae;
  font-size: 9px;
  font-weight: 850;
}

.profile-stats strong {
  color: #ffe184;
  font-size: 22px;
}

.history-section {
  display: grid;
  gap: 10px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.section-heading h3 {
  margin: 2px 0 0;
  color: #f8f0d8;
  font-size: 18px;
}

.section-heading > small {
  color: #91a8a2;
  font-size: 9px;
  text-align: right;
}

.history-list {
  display: grid;
  gap: 11px;
}

.history-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(236, 193, 91, .22);
  border-left-width: 4px;
  border-radius: 14px;
  background: #10232a;
}

.history-card.is-win { border-left-color: #63d7a2; }
.history-card.is-loss { border-left-color: #ed8278; }
.history-card.is-draw { border-left-color: #8aa4ad; }

.history-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}

.history-card-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.history-card-head > div strong {
  color: #fff2ca;
  font-size: 15px;
}

.history-card-head > div span {
  color: #8fa69f;
  font-size: 9px;
}

.history-outcome,
.replay-result-badge {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #071c18;
  font-size: 15px;
}

.history-outcome.is-win,
.replay-result-badge.is-win { background: #71dda9; }
.history-outcome.is-loss,
.replay-result-badge.is-loss { color: #2d0d0b; background: #ef8d83; }
.history-outcome.is-draw,
.replay-result-badge.is-draw { color: #10242a; background: #a9bcc2; }

.history-placement {
  min-width: 60px;
  padding: 7px 9px;
  border: 1px solid rgba(244, 201, 101, .36);
  border-radius: 999px;
  color: #ffdc79;
  background: #2c291d;
  font-size: 11px;
  text-align: center;
}

.history-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #abc0ba;
  font-size: 10px;
}

.history-card-summary strong,
.history-player-score em {
  color: #d1ddd9;
  font-style: normal;
  font-weight: 950;
}

.is-positive { color: #72e3ac !important; }
.is-negative { color: #ff9188 !important; }

.history-standings {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-player {
  display: grid;
  min-width: 0;
  min-height: 46px;
  grid-template-columns: 26px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(198, 222, 214, .1);
  border-radius: 10px;
  background: rgba(6, 24, 28, .68);
}

.history-player.is-self {
  border-color: rgba(244, 201, 101, .48);
  background: #18372f;
}

.history-player.is-active {
  border-color: #79d8ff;
  box-shadow: 0 0 0 2px rgba(121, 216, 255, .14);
}

.history-rank {
  color: #f3cc67;
  font-size: 15px;
  text-align: center;
}

.history-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(241, 202, 104, .5);
  border-radius: 8px;
  background: #f4eedc;
}

.history-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-player-copy,
.history-player-score {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.history-player-copy strong {
  overflow: hidden;
  color: #eff8f4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-player-copy small {
  color: #829b94;
  font-size: 8px;
}

.history-player-score {
  justify-items: end;
}

.history-player-score strong {
  color: #f7e9be;
  font-size: 11px;
}

.history-player-score em {
  font-size: 8px;
}

.history-replay-button {
  min-height: 44px;
  border: 1px solid rgba(122, 216, 255, .42);
  border-radius: 10px;
  color: #dff6ff;
  background: #173540;
  font-size: 11px;
  font-weight: 950;
}

.history-empty {
  display: grid;
  min-height: 150px;
  place-content: center;
  gap: 5px;
  padding: 22px;
  border: 1px dashed rgba(233, 196, 105, .28);
  border-radius: 14px;
  color: #91a8a1;
  background: #102128;
  text-align: center;
}

.history-empty strong {
  color: #efe3bd;
  font-size: 16px;
}

.history-empty span {
  max-width: 320px;
  font-size: 10px;
  line-height: 1.5;
}

.replay-layout {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.2fr);
  gap: 13px;
}

.replay-summary,
.replay-viewer {
  min-width: 0;
}

.replay-result {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
  padding: 12px;
  border: 1px solid rgba(240, 198, 97, .28);
  border-radius: 13px;
  background: #18342e;
}

.replay-result > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.replay-result strong { color: #fff0c0; font-size: 15px; }
.replay-result span { color: #bdd0ca; font-size: 10px; }
.replay-result small { color: #86a19a; font-size: 8px; }

.replay-progress {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.replay-progress span {
  flex: 0 0 auto;
  color: #f2ce72;
  font-size: 10px;
  font-weight: 950;
}

.replay-progress input {
  width: 100%;
  min-height: 28px;
  accent-color: #efbd4e;
}

.replay-event-card {
  display: grid;
  min-height: 300px;
  place-content: center;
  justify-items: center;
  padding: 24px;
  border: 1px solid rgba(239, 197, 94, .34);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 34%, #184f42, #0e282c 72%);
  text-align: center;
}

.replay-event-seat {
  color: #e7c666;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .06em;
}

.replay-event-tile {
  width: 70px;
  margin: 11px 0 5px;
  padding: 5px;
  border-radius: 9px;
  background: #faf6e7;
  box-shadow: 0 5px 0 #b78b35, 0 10px 20px rgba(0, 0, 0, .32);
}

.replay-event-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.replay-event-card h3 {
  margin: 10px 0 4px;
  color: #fff4d4;
  font-size: clamp(22px, 3.2cqw, 30px);
}

.replay-event-card p {
  max-width: 390px;
  margin: 0;
  color: #bdd2cb;
  font-size: 11px;
  line-height: 1.55;
}

.replay-controls {
  position: sticky;
  bottom: -20px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 13px -2px -2px;
  padding: 10px 2px 2px;
  background: linear-gradient(rgba(11, 27, 34, 0), #0b1b22 22%);
}

.replay-controls button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(230, 192, 97, .34);
  border-radius: 11px;
  color: #e6efec;
  background: #193039;
  font-weight: 950;
}

.replay-controls button.is-primary {
  border-color: rgba(255, 227, 150, .68);
  color: #2a1906;
  background: linear-gradient(#ffd76a, #e8ae38);
}

.replay-controls img {
  width: 18px;
  height: 18px;
}

.replay-controls button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.settlement-body {
  display: grid;
  gap: 8px;
}

.settlement-hero {
  padding: 14px;
  border: 1px solid rgba(255, 213, 104, .48);
  border-radius: 15px;
  color: #ffe489;
  background: #18352c;
  text-align: center;
}

.settlement-hero strong {
  display: block;
  font-size: 30px;
}

.settlement-patterns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.settlement-patterns span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(235, 190, 86, .22);
  border-radius: 10px;
  color: #e7f0ec;
  background: #13262e;
  font-size: 11px;
}

.settlement-patterns b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settlement-patterns em {
  flex: 0 0 auto;
  color: #ffda70;
  font-style: normal;
  font-weight: 900;
}

.settlement-formula {
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  color: #ffe49a;
  background: #173329;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.settlement-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.settlement-row small {
  grid-column: 1 / -1;
  color: #ffb7a9;
  font-size: 9px;
}

.continue-button {
  width: 100%;
  margin-top: 13px;
}

.action-choice-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.action-choice-option {
  display: grid;
  min-height: 76px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 216, 111, .32);
  border-radius: 12px;
  color: #fff2c8;
  background: #133329;
  box-shadow: 0 4px 0 #08251e;
  font-weight: 900;
}

.action-choice-option .mini-tiles {
  justify-content: flex-start;
}

.action-choice-option .mini-tile {
  width: 34px;
}

.quick-phrases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-phrases button {
  min-height: 52px;
}

.reconnect-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 110;
  width: min(360px, calc(100% - 28px));
  padding: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 215, 111, .72);
  border-radius: 18px;
  color: #effbf6;
  background: #0a2225;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
  text-align: center;
}

.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: max(78px, calc(env(safe-area-inset-top) + 72px)) max(16px, env(safe-area-inset-right)) max(58px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(1, 12, 14, .68);
  backdrop-filter: blur(7px) saturate(.82);
}

.pause-card {
  width: min(390px, 100%);
  padding: 26px 24px 24px;
  border: 1px solid rgba(255, 215, 111, .74);
  border-radius: 22px;
  color: #effbf6;
  background: linear-gradient(155deg, rgba(8, 45, 39, .98), rgba(5, 23, 27, .98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .08);
  text-align: center;
}

.pause-card > span {
  color: #efc45d;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .15em;
}

.pause-card h2 {
  margin: 7px 0 6px;
  color: #fff4cf;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(27px, 5cqw, 38px);
}

.pause-card p {
  margin: 0 auto 18px;
  max-width: 290px;
  color: #bdd3cc;
  font-size: 13px;
  line-height: 1.55;
}

.pause-card button {
  display: inline-flex;
  min-width: 172px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 232, 163, .7);
  border-radius: 13px;
  color: #281804;
  background: linear-gradient(#ffd86d, #e7ad36);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .58);
  font-weight: 950;
}

.pause-card button img {
  width: 19px;
  height: 19px;
}

.reconnect-overlay span { color: #efc45d; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.reconnect-overlay h2 { margin: 5px 0; font-size: 26px; }
.reconnect-overlay p { margin: 0 0 14px; color: #bdd3cc; font-size: 12px; }
.reconnect-overlay button {
  min-width: 150px;
  min-height: 46px;
  border: 1px solid rgba(255, 225, 146, .5);
  border-radius: 11px;
  color: #271707;
  background: #efbe4c;
  font-weight: 950;
}

html[data-phase="RECONNECT"] .game-stage > :not(.reconnect-overlay) {
  pointer-events: none !important;
}

html[data-paused="true"] .game-stage > :not(.pause-overlay) {
  pointer-events: none !important;
}

html[data-paused="true"] .game-stage *,
html[data-paused="true"] .game-stage *::before,
html[data-paused="true"] .game-stage *::after {
  animation-play-state: paused !important;
}

.is-dealing .concealed-tile {
  animation: deal-pulse .48s ease both;
}

.dice-row.is-rolling {
  animation: dice-shake .55s ease-in-out both;
}

@keyframes deal-pulse {
  0% { opacity: .25; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dice-shake {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-5deg) translateX(-3px); }
  65% { transform: rotate(5deg) translateX(3px); }
}

@keyframes recommend-pulse {
  from { filter: drop-shadow(0 0 2px rgba(122, 216, 255, .35)); }
  to { filter: drop-shadow(0 0 10px rgba(122, 216, 255, .95)); }
}

@container app-viewport (max-width: 1180px) {
  .player-hand { right: 7%; left: 7%; }
  .hand-tile { width: clamp(38px, 4.35cqw, 52px); }
  .discard-north { left: 18%; }
  .discard-south { right: 18%; }
}

@media (orientation: portrait) {
  .game-app,
  .game-stage {
    min-height: 0;
  }

  .game-stage {
    background-image: url("mahjong-room-three-ai-edge-portrait-v3.png");
    background-position: center top;
    background-size: cover;
  }

  .top-hud {
    min-height: calc(58px + env(safe-area-inset-top));
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding-top: max(5px, env(safe-area-inset-top));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-left: max(6px, env(safe-area-inset-left));
  }

  .brand-mark {
    width: 37px;
    height: 44px;
    padding: 5px 6px;
  }

  .brand-copy strong {
    font-size: clamp(18px, 5.8cqw, 25px);
  }

  .brand-copy span {
    font-size: 8px;
  }

  .round-summary {
    position: absolute;
    top: calc(58px + env(safe-area-inset-top));
    left: 50%;
    padding: 4px 8px;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    font-size: 9px;
  }

  #modeLabel { display: none; }
  #networkState { display: none; }

  .hud-tools { gap: 3px; }

  .icon-button {
    min-width: 44px;
    min-height: 44px;
    padding: 5px;
  }

  .icon-button img {
    width: 19px;
    height: 19px;
  }

  .icon-button span { display: none; }

  .opponent-east {
    top: calc(27.5% + env(safe-area-inset-top));
  }

  .opponent-north,
  .opponent-south {
    top: 30.5%;
  }

  .opponent-north { left: max(2px, env(safe-area-inset-left)); }
  .opponent-south { right: max(2px, env(safe-area-inset-right)); }

  .opponent-card {
    min-width: 0;
    gap: 4px;
    padding: 3px 5px 3px 3px;
  }

  .wind-badge {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .opponent-card > div { min-width: 0; }
  .opponent-card strong { font-size: 10px; }
  .opponent-card > div > span { display: block; font-size: 7px; line-height: 1; }
  .opponent-card > .wind-badge { display: grid; }
  .opponent-card em { padding: 3px 4px; font-size: 8px; }

  .concealed-hand {
    gap: 1px;
    margin-top: 0;
  }

  .concealed-tile {
    width: 7px;
    height: 11px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  }

  .opponent-rack {
    max-width: 142px;
    gap: 3px;
    margin-top: 1px;
    padding: 2px 5px 3px;
    border-radius: 6px;
  }

  .opponent-open-row {
    max-width: 132px;
    gap: 3px;
  }

  .opponent .flowers,
  .opponent .melds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .opponent .mini-tile {
    width: 13px;
    padding: 1px;
    border-radius: 2px;
  }

  .opponent-rack.is-dense .mini-tile { width: 8px; }
  .opponent-rack.is-packed .mini-tile { width: 6px; }

  .speech {
    top: -35px;
    min-width: 76px;
    padding: 6px 8px;
    font-size: 9px;
  }


  .discard-zone {
    width: 31cqw;
    min-height: 42px;
    padding: 3px;
    border-radius: 7px;
  }

  .discard-zone > span { display: none; }
  .discard-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; }
  .discard-tile { max-width: 22px; padding: 2px; }
  .discard-east { top: 40.5%; }
  .discard-north { top: 46%; left: 7%; }
  .discard-south { top: 46%; right: 7%; }
  .discard-player { bottom: 39%; }

  .center-hub {
    top: 52%;
    width: min(54cqw, 220px);
    padding: 7px 8px 8px;
    border-radius: 12px;
  }

  .center-hub h2 { font-size: clamp(14px, 4.3cqw, 18px); }
  .center-hub p { display: none; }
  .hub-topline { font-size: 9px; }
  .hub-topline b { width: 24px; height: 24px; font-size: 11px; }
  .dice-row { margin-top: 4px; }
  .die { width: 27px; height: 27px; }
  .die b { font-size: 12px; }
  .gold-row { margin-top: 3px; font-size: 9px; }
  .gold-tiles .mini-tile { width: 19px; }
  .turn-compass { margin-top: 4px; }
  .turn-compass span { padding: 2px; font-size: 8px; }

  .action-dock {
    right: 6px;
    bottom: calc(225px + env(safe-area-inset-bottom));
    left: 6px;
    min-width: 0;
    padding: 5px;
    transform: none;
    border-radius: 12px;
  }

  .action-copy { display: none; }
  .action-dock.is-idle { display: none; }
  .action-buttons { width: 100%; justify-content: center; gap: 4px; }
  .action-button { min-width: 51px; min-height: 44px; padding: 6px 9px; }
  .action-button.utility { min-width: 142px; }

  .player-zone {
    z-index: 45;
    bottom: calc(44px + env(safe-area-inset-bottom));
    height: 132px;
  }

  .player-hand {
    right: 4px;
    bottom: 4px;
    left: 4px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
  }

  .player-hand.has-drawn {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .player-hand.has-drawn .hand-tile:nth-child(9) {
    grid-column: 1;
  }

  .hand-tile {
    width: 100%;
    max-width: 48px;
    justify-self: center;
    padding: 5px 4px;
    border-radius: 5px;
  }

  .hand-tile.is-drawn {
    margin-left: 0;
    box-shadow: 0 0 0 2px #ffcb58, 0 5px 7px rgba(0, 0, 0, .48);
  }

  .hand-tile.is-selected,
  .hand-tile.is-swap-selected {
    transform: translateY(-8px);
  }

  .player-extras {
    top: -38px;
    left: max(6px, env(safe-area-inset-left));
  }

  .player-extras > div { gap: 2px; }
  .player-extras > div > span { width: 22px; font-size: 7px; }
  .player-extras .mini-tile { width: 19px; }

  .player-profile {
    position: fixed;
    z-index: 44;
    top: auto;
    right: auto;
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(6px, env(safe-area-inset-left));
    gap: 4px;
    padding: 3px 5px 3px 3px;
  }

  .player-avatar { width: 29px; height: 29px; font-size: 13px; }
  .player-profile strong { max-width: 80px; font-size: 9px; }
  .player-profile .player-copy > span { display: block; font-size: 7px; }
  .player-profile em { display: none; }

  .status-footer {
    min-height: calc(44px + env(safe-area-inset-bottom));
    padding-top: 3px;
    padding-bottom: max(3px, env(safe-area-inset-bottom));
  }

  .status-footer p { display: none; }
  .status-footer .social-tools { grid-column: 2; justify-self: end; }
  .status-footer button { min-width: 44px; min-height: 44px; padding: 4px; }
  .status-footer button span { display: none; }

  .round-intro {
    top: 54%;
    padding: 18px 16px;
  }

  .round-intro h2 { font-size: clamp(22px, 7cqw, 29px); }
  .round-intro p { font-size: 11px; }
  .toast { top: calc(67px + env(safe-area-inset-top)); font-size: 9px; }

  .modal-panel {
    inset: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    max-height: calc(100cqh - max(14px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 13px;
    border-radius: 15px;
  }

  .modal-head { top: -13px; }
  .rule-cards,
  .tai-grid,
  .action-choice-body { grid-template-columns: 1fr; }
  .settlement-panel,
  .action-choice-panel,
  .social-panel,
  .exit-panel,
  .register-panel,
  .match-panel {
    inset: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    width: auto;
    max-width: 560px;
    height: max-content;
    max-height: calc(100cqh - max(14px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: auto;
    transform: none;
  }

}

@media (orientation: portrait) and (max-width: 360px) {
  .top-hud {
    gap: 3px;
    padding-right: max(3px, env(safe-area-inset-right));
    padding-left: max(3px, env(safe-area-inset-left));
  }

  .brand-lockup { gap: 5px; }
  .brand-mark { width: 32px; height: 40px; padding: 4px 5px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy span { display: none; }
  .hud-tools { gap: 2px; }

  .opponent-rack {
    max-width: 104px;
    padding: 2px 3px 3px;
  }

  .opponent-open-row {
    max-width: 96px;
    gap: 2px;
  }

  .concealed-hand { gap: 0; }

  .concealed-tile {
    width: 5.5px;
    height: 9px;
  }

  .concealed-hand .concealed-tile:nth-child(4n):not(:last-child) {
    margin-inline-end: 1px;
  }

  .opponent .mini-tile { width: 10px; }
  .opponent-rack.is-dense .mini-tile { width: 7px; }
  .opponent-rack.is-packed .mini-tile { width: 5px; }
}

@media (orientation: portrait) and (max-height: 690px) {
  html:not([data-phase="WAITING"]):not([data-phase="SEAT_DICE"]):not([data-phase="DEALING"]) .dice-row { display: none; }
  .opponent-east { top: calc(25% + env(safe-area-inset-top)); }
  .opponent-north,
  .opponent-south { top: 28%; }
  .discard-zone { min-height: 22px; padding: 1px; }
  .discard-east { top: 31%; width: 90px; }
  .discard-north { top: 43%; left: 4px; width: 54px; }
  .discard-south { top: 43%; right: 4px; width: 54px; }
  .discard-player { display: block; top: 53%; bottom: auto; width: 82px; }
  .discard-east .discard-grid,
  .discard-player .discard-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .discard-north .discard-grid,
  .discard-south .discard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .discard-tile { max-width: 15px; padding: 1px; }
  .center-hub { top: 47%; width: min(46cqw, 190px); }
  .action-dock { bottom: calc(190px + env(safe-area-inset-bottom)); }
  .player-zone { height: 105px; }
  .player-hand { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hand-tile { max-width: 38px; padding: 4px 3px; }
  .player-extras { top: -38px; }
  .center-hub .turn-compass { display: none; }
  .round-intro { top: 49%; }
  .intro-features { margin: 9px 0 11px; }
}

@container app-viewport (max-height: 520px) {
  html:not([data-phase="WAITING"]):not([data-phase="SEAT_DICE"]):not([data-phase="DEALING"]) .dice-row { display: none; }
  .game-app,
  .game-stage { min-height: 0; }

  .game-stage { background-position: center 42%; }

  .top-hud {
    min-height: calc(52px + env(safe-area-inset-top));
    padding-top: max(4px, env(safe-area-inset-top));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: 4px;
    padding-left: max(6px, env(safe-area-inset-left));
  }

  .brand-mark { width: 34px; height: 40px; padding: 4px 5px; }
  .brand-copy strong { font-size: 18px; }
  .brand-copy span { display: none; }
  .round-summary { padding: 4px 8px; font-size: 8px; }
  .round-summary b { font-size: 11px; }
  #modeLabel { display: none; }
  #networkState { display: inline; }
  .icon-button { min-width: 44px; min-height: 44px; padding: 4px; }
  .icon-button img { width: 18px; height: 18px; }
  .icon-button span { display: none; }

  .opponent-east {
    top: calc(21% + env(safe-area-inset-top));
    left: 50%;
  }
  .opponent-north,
  .opponent-south { top: 29%; }
  .opponent-north { left: max(3px, env(safe-area-inset-left)); }
  .opponent-south { right: max(3px, env(safe-area-inset-right)); }
  .opponent-card { min-width: 0; padding: 3px 5px 3px 3px; gap: 4px; }
  .wind-badge { width: 30px; height: 30px; font-size: 14px; }
  .opponent-card > div { min-width: 0; }
  .opponent-card strong { font-size: 10px; }
  .opponent-card > div > span { display: block; font-size: 7px; line-height: 1; }
  .opponent-card > .wind-badge { display: grid; }
  .opponent-card em { padding: 3px 4px; font-size: 8px; }
  .opponent .speech { display: none !important; }
  .opponent-rack {
    max-width: 138px;
    gap: 2px;
    margin-top: 2px;
    padding: 2px 4px 3px;
  }
  .opponent-open-row { max-width: 128px; gap: 2px; }
  .opponent .mini-tile { width: 11px; }
  .concealed-hand { display: flex; gap: 1px; margin-top: 0; }
  .concealed-tile { width: 7px; height: 10px; }

  .discard-zone { width: 22cqw; min-height: 32px; padding: 2px; }
  .discard-zone > span { display: none; }
  .discard-grid { gap: 1px; }
  .discard-tile { max-width: 18px; padding: 1px; }
  .discard-east { top: 37%; }
  .discard-north { top: 45%; left: 22%; }
  .discard-south { top: 45%; right: 22%; }
  .discard-player { bottom: 35%; }

  .center-hub {
    top: 48%;
    width: min(30cqw, 200px);
    padding: 5px 7px 6px;
    border-radius: 11px;
  }
  .center-hub h2 { margin: 0; font-size: 14px; }
  .center-hub p,
  .center-hub .turn-compass { display: none; }
  .hub-topline { font-size: 7px; }
  .hub-topline b { width: 22px; height: 22px; }
  .dice-row { margin-top: 2px; }
  .die { width: 24px; height: 24px; }
  .gold-row { margin-top: 1px; font-size: 7px; }
  .gold-tiles .mini-tile { width: 16px; }

  .action-dock {
    right: 50%;
    bottom: calc(100px + env(safe-area-inset-bottom));
    min-width: 0;
    width: min(620px, calc(100% - 200px));
    padding: 4px 5px;
    transform: translateX(50%);
  }
  .action-copy { display: none; }
  .action-buttons { width: 100%; justify-content: center; gap: 4px; }
  .action-button { min-width: 48px; min-height: 44px; padding: 5px 8px; }
  .action-button.utility { min-width: 130px; }

  .player-zone {
    bottom: calc(42px + env(safe-area-inset-bottom));
    height: 65px;
  }
  .player-hand { right: 5%; bottom: 2px; left: 5%; gap: 1px; }
  .hand-tile { width: min(5.35cqw, 39px); padding: 3px; border-radius: 4px; }
  .hand-tile.is-drawn { margin-left: 5px; }
  .hand-tile.is-selected,
  .hand-tile.is-swap-selected { transform: translateY(-7px); }
  .player-extras { top: -27px; left: max(6px, env(safe-area-inset-left)); }
  .player-extras > div > span { display: none; }
  .player-extras .mini-tile { width: 17px; }
  .player-profile { top: -27px; right: max(6px, env(safe-area-inset-right)); padding: 3px 5px 3px 3px; }
  .player-avatar { width: 28px; height: 28px; font-size: 12px; }
  .player-copy { display: grid; }
  .player-profile strong { max-width: 78px; font-size: 8px; }
  .player-profile .player-copy > span { display: block; font-size: 7px; }
  .player-profile em { display: none; }

  .status-footer {
    min-height: calc(42px + env(safe-area-inset-bottom));
    padding-top: 2px;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
  .status-footer p { font-size: 8px; }
  .status-footer button { min-width: 44px; min-height: 44px; padding: 3px; }
  .status-footer button span { display: none; }

  .round-intro {
    top: 52%;
    width: min(420px, calc(100% - 120px));
    padding: 12px 15px;
  }
  .round-intro h2 { margin: 2px 0 4px; font-size: 21px; }
  .round-intro p { font-size: 9px; }
  .intro-features { margin: 7px 0 8px; }
  .intro-features span { padding: 3px 6px; font-size: 7px; }
  .start-button { min-height: 44px; }
  .toast { top: calc(58px + env(safe-area-inset-top)); }

  .modal-panel {
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    max-height: calc(100cqh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 12px;
  }
  .modal-head { top: -12px; margin-bottom: 8px; }
  .modal-head h2 { font-size: 19px; }
  .rule-tabs { margin-bottom: 8px; }
  .rule-tab { min-height: 44px; }
  .rule-pages article { font-size: 11px; }
  .rule-cards,
  .tai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-cards section,
  .tai-grid span { padding: 8px; }
  .simulator-intro { padding: 9px; }
  .simulator-run { min-width: 152px; min-height: 44px; }
  .simulator-metrics { grid-template-columns: repeat(4, minmax(110px, 1fr)); overflow-x: auto; }
  .simulator-metrics > div:last-child { grid-column: span 2; }
  .simulator-metrics > div { padding: 8px; }
  .simulator-seat-table th,
  .simulator-seat-table td { padding: 6px 9px; }
  .settlement-panel,
  .action-choice-panel,
  .social-panel,
  .exit-panel,
  .register-panel,
  .match-panel {
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    width: auto;
    max-width: 560px;
    height: max-content;
    max-height: calc(100cqh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: auto;
    transform: none;
  }

  .register-panel {
    width: min(620px, calc(100% - 12px));
    padding: 6px 12px;
  }

  .register-panel .modal-head {
    top: -6px;
    margin-bottom: 3px;
    padding-bottom: 3px;
  }

  .register-lead {
    display: none;
  }

  .field-label,
  .avatar-fieldset legend {
    margin-bottom: 3px;
    font-size: 9px;
  }

  .player-name-input {
    min-height: 38px;
    margin-bottom: 4px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .avatar-picker { gap: 5px; }

  .register-panel .avatar-picker {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .avatar-picker label > span {
    min-height: 67px;
    padding: 3px;
    border-radius: 10px;
  }

  .avatar-picker img { width: 48px; height: 48px; border-radius: 9px; }
  .avatar-picker b { font-size: 10px; }
  .register-note { display: none; }
  .register-submit { min-height: 44px; }

  .match-panel {
    width: min(620px, calc(100% - 12px));
    padding: 9px 12px;
  }

  .match-panel .modal-head { margin-bottom: 6px; padding-bottom: 6px; }
  .match-room-banner { padding: 8px 10px; }
  .match-room-banner strong { font-size: 16px; }
  .match-seat-heading { margin: 8px 2px 5px; }
  .match-roster { gap: 6px; }
  .match-seat { min-height: 58px; grid-template-columns: 36px minmax(0, 1fr); gap: 6px; padding: 6px; }
  .match-seat-avatar { width: 38px; height: 38px; padding: 0; }
  .match-progress-shell { gap: 6px; margin-top: 7px; padding: 8px 9px; }
  .match-actions { margin-top: 7px; }
  .match-primary,
  .match-secondary { min-height: 44px; }
}

@container app-viewport (max-height: 700px) {
  .game-app,
  .game-stage { min-height: 0; }
}

@container app-viewport (max-width: 680px) {
  .profile-panel,
  .replay-panel {
    inset: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    width: auto;
    max-width: 920px;
    height: max-content;
    max-height: calc(100cqh - max(14px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: auto;
    padding: 13px;
    transform: none;
  }

  .profile-overview { padding: 12px; }
  .profile-hero-avatar { width: 58px; height: 58px; }
  .profile-storage-note { max-width: 145px; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
  .profile-stats article { padding: 9px 11px; }
  .profile-stats strong { font-size: 18px; }
  .replay-layout { grid-template-columns: 1fr; }
  .replay-event-card { min-height: 230px; padding: 18px; }
  .replay-controls { bottom: -13px; }
}

@container app-viewport (max-width: 380px) {
  .profile-modal-head,
  .replay-modal-head {
    align-items: flex-start;
    gap: 7px;
  }

  .modal-head-actions { gap: 5px; }
  .modal-secondary,
  .profile-modal-head .modal-close,
  .replay-modal-head .modal-close {
    min-width: 58px;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 9px;
  }

  .profile-overview { gap: 9px; padding: 10px; }
  .profile-hero-avatar { width: 50px; height: 50px; }
  .profile-identity { gap: 8px; }
  .profile-identity h3 { max-width: 135px; font-size: 18px; }
  .profile-storage-note { display: none; }
  .profile-stats { gap: 6px; margin-top: 7px; margin-bottom: 11px; }
  .profile-stats article { padding: 7px 9px; }
  .history-card { gap: 8px; padding: 9px; }
  .history-card-head { gap: 6px; }
  .history-outcome { width: 34px; height: 34px; font-size: 13px; }
  .history-placement { min-width: 54px; padding: 6px 7px; font-size: 9px; }
  .history-card-summary { font-size: 9px; }
  .history-player { grid-template-columns: 22px 30px minmax(0, 1fr) auto; gap: 5px; padding: 4px 5px; }
  .history-avatar { width: 28px; height: 28px; }
  .history-player-score strong { font-size: 10px; }
  .replay-result { padding: 9px; }
  .replay-event-card { min-height: 210px; padding: 14px; }
  .replay-event-tile { width: 58px; }
  .replay-event-card h3 { font-size: 21px; }
  .replay-controls { gap: 5px; }
  .replay-controls button { min-height: 46px; font-size: 10px; }
}

@container app-viewport (max-height: 520px) {
  .profile-panel,
  .replay-panel {
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    width: auto;
    max-width: 940px;
    height: auto;
    max-height: calc(100cqh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: auto;
    padding: 10px;
    transform: none;
  }

  .profile-panel .modal-head,
  .replay-panel .modal-head { top: -10px; margin-bottom: 7px; padding-bottom: 6px; }
  .profile-overview { padding: 8px 11px; }
  .profile-hero-avatar { width: 48px; height: 48px; }
  .profile-identity h3 { font-size: 18px; }
  .profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 9px; }
  .profile-stats article { padding: 6px 9px; }
  .profile-stats strong { font-size: 16px; }
  .replay-layout { grid-template-columns: minmax(230px, .84fr) minmax(300px, 1.16fr); gap: 9px; }
  .history-player { min-height: 38px; padding-block: 2px; }
  .replay-result { margin-bottom: 6px; padding: 7px 9px; }
  .replay-result-badge { width: 34px; height: 34px; }
  .replay-event-card { min-height: 190px; padding: 10px 14px; }
  .replay-event-tile { width: 50px; margin-top: 6px; }
  .replay-event-card h3 { margin-top: 6px; font-size: 19px; }
  .replay-controls { bottom: -10px; margin-top: 7px; padding-top: 7px; }
  .replay-controls button { min-height: 44px; }

  .match-panel {
    inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    width: min(720px, calc(100% - 12px));
    max-width: 720px;
    height: max-content;
    max-height: calc(100cqh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: auto;
    padding: 10px;
    transform: none;
  }

  .match-panel .modal-head { top: -10px; margin-bottom: 6px; padding-bottom: 5px; }
  .match-room-banner { padding: 7px 9px; }
  .match-seat-heading { margin: 6px 2px 4px; }
  .match-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .match-seat { min-height: 56px; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; padding: 5px; }
  .match-seat-avatar { width: 36px; height: 36px; padding: 0; }
  .match-seat-copy strong { font-size: 10px; }
  .match-seat-copy span { font-size: 8px; }
  .match-progress-shell { gap: 5px; margin-top: 6px; padding: 6px 9px; }
  .match-actions { margin-top: 6px; }
  .match-primary,
  .match-secondary { min-height: 44px; }
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover,
  .status-footer button:hover,
  .action-button:hover:not(:disabled),
  .rule-tab:hover,
  .quick-phrases button:hover,
  .history-replay-button:hover,
  .modal-secondary:hover,
  .match-primary:hover:not(:disabled),
  .match-secondary:hover,
  .replay-controls button:hover:not(:disabled) {
    filter: brightness(1.12);
  }

  .hand-tile:hover {
    transform: translateY(-7px);
  }
}

@container app-viewport (max-height: 520px) and (max-width: 720px) {
  .lobby-view .match-progress-copy span { display: none; }
  .lobby-view .match-progress-copy strong {
    font-size: 9px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .match-seat,
  .match-progress-track i { transition: none; }
}

/* Full-page team lobby */
.lobby-view {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  isolation: isolate;
  background: #07151b;
}

.lobby-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #07151b;
  background-image:
    linear-gradient(90deg, rgba(2, 11, 17, .91), rgba(4, 23, 27, .48) 46%, rgba(2, 11, 17, .78)),
    linear-gradient(180deg, rgba(3, 10, 17, .38), rgba(3, 14, 18, .2) 52%, rgba(2, 10, 15, .92)),
    url("mahjong-lobby-teahouse-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(.84) contrast(1.04);
}

.lobby-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 130px rgba(0, 0, 0, .52);
}

.lobby-topbar {
  z-index: 5;
  display: flex;
  min-height: calc(78px + env(safe-area-inset-top));
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 10px max(22px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(241, 191, 73, .3);
  background: rgba(3, 10, 17, .78);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  backdrop-filter: blur(14px);
}

.lobby-leading,
.lobby-brand,
.lobby-player,
.lobby-tools {
  display: flex;
  align-items: center;
}

.lobby-leading {
  min-width: 0;
  gap: 12px;
}

.lobby-back {
  display: grid;
  min-width: 60px;
  min-height: 52px;
  place-items: center;
  gap: 1px;
  padding: 6px 9px;
  border: 1px solid rgba(238, 191, 82, .42);
  border-radius: 13px;
  color: #fff4d0;
  background: rgba(5, 16, 23, .88);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .28);
}

.lobby-back img {
  width: 20px;
  height: 20px;
  filter: invert(89%) sepia(34%) saturate(664%) hue-rotate(341deg) brightness(105%);
}

.lobby-back span {
  font-size: 9px;
  font-weight: 900;
}

.lobby-back:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.lobby-brand {
  min-width: 0;
  gap: 11px;
}

.lobby-brand > img {
  width: 45px;
  height: 54px;
  padding: 6px;
  border: 1px solid rgba(255, 225, 143, .8);
  border-radius: 9px;
  background: #fff8e5 url("tile-blank-tight.png") center / contain no-repeat;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .34);
}

.lobby-brand > img {
  object-fit: contain;
}

.lobby-player > span:first-child {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 143, .8);
  border-radius: 50%;
  background: #132f2e;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .34);
}

.lobby-player img {
  object-fit: cover;
}

.lobby-brand > div,
.lobby-player > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.lobby-brand strong {
  color: #ffe8a2;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(23px, 2.2cqw, 32px);
  letter-spacing: .05em;
}

.lobby-brand span,
.lobby-player small {
  color: #c7ddd5;
  font-size: 10px;
  font-weight: 850;
}

.lobby-tools {
  justify-content: flex-end;
  gap: 8px;
}

.lobby-player,
.lobby-tool {
  min-height: 52px;
  border: 1px solid rgba(238, 191, 82, .42);
  border-radius: 13px;
  color: #fff4d0;
  background: rgba(5, 16, 23, .88);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .28);
}

.lobby-player {
  max-width: 220px;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  text-align: left;
}

.lobby-player > span:first-child {
  width: 40px;
  height: 40px;
  padding: 0;
}

.lobby-player img {
  width: 100%;
  height: 100%;
}

.lobby-player strong {
  max-width: 125px;
  overflow: hidden;
  color: #fff5d3;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player b { color: #ffd66d; }

.lobby-tool {
  display: grid;
  min-width: 56px;
  place-items: center;
  gap: 2px;
  padding: 6px 9px;
}

.lobby-tool img {
  width: 20px;
  height: 20px;
  filter: invert(89%) sepia(34%) saturate(664%) hue-rotate(341deg) brightness(105%);
}

.lobby-tool span {
  font-size: 9px;
  font-weight: 900;
}

.lobby-layout {
  display: grid;
  min-height: 0;
  width: min(1440px, 100%);
  grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.28fr);
  align-items: center;
  gap: clamp(22px, 4cqw, 70px);
  margin: auto;
  padding: clamp(18px, 3.2cqh, 38px) max(24px, calc((100cqw - 1440px) / 2 + 24px));
}

.lobby-hero {
  display: grid;
  justify-items: start;
  align-content: center;
  min-width: 0;
  text-align: left;
}

.lobby-kicker {
  padding: 7px 11px;
  border: 1px solid rgba(245, 201, 100, .48);
  border-radius: 999px;
  color: #ffe18b;
  background: rgba(3, 33, 31, .7);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
}

.lobby-title-art {
  width: min(500px, 100%);
  margin: 15px 0 10px;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .62));
}

.lobby-hero p {
  max-width: 450px;
  margin: 0;
  color: #d8e7e2;
  font-size: clamp(13px, 1.2cqw, 17px);
  font-weight: 750;
  line-height: 1.6;
  text-shadow: 0 2px 8px #000;
}

.lobby-mode-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.lobby-mode-tags span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 226, 144, .28);
  border-radius: 8px;
  color: #e8f4ef;
  background: rgba(6, 42, 37, .72);
  font-size: 9px;
  font-weight: 850;
}

.lobby-party-card {
  position: relative;
  min-width: 0;
  padding: clamp(18px, 2.2cqw, 28px);
  overflow: hidden;
  border: 1px solid rgba(242, 196, 86, .58);
  border-radius: 22px;
  background: rgba(4, 18, 24, .92);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
}

.lobby-party-card::before {
  position: absolute;
  top: 0;
  right: 13%;
  left: 13%;
  height: 1px;
  content: "";
  background: #ffe49a;
  box-shadow: 0 0 24px rgba(255, 212, 102, .72);
}

.lobby-party-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.lobby-party-head > div {
  display: grid;
  gap: 2px;
}

.lobby-party-head span,
.party-code-copy span {
  color: #d4b85d;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
}

.lobby-party-head h2 {
  margin: 0;
  color: #fff1c5;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(27px, 3cqw, 40px);
  line-height: 1;
}

.lobby-party-head em {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(255, 222, 124, .34);
  border-radius: 999px;
  color: #ffe28a;
  background: rgba(8, 47, 42, .72);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.party-code-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 216, 255, .24);
  border-radius: 13px;
  background: #0c262c;
}

.party-code-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.party-code-copy strong {
  color: #fff2c8;
  font-size: clamp(20px, 2.1cqw, 28px);
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.party-code-actions {
  display: flex;
  gap: 6px;
}

.party-code-actions button,
.match-invite {
  min-height: 44px;
  border: 1px solid rgba(240, 189, 79, .38);
  border-radius: 10px;
  color: #f9e7af;
  background: #19383b;
  font-size: 10px;
  font-weight: 900;
}

.party-code-actions button { min-width: 64px; padding: 7px 10px; }

.party-code-actions button:disabled,
.match-invite:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.party-code-card > small {
  grid-column: 1 / -1;
  color: #a9bdb7;
  font-size: 9px;
}

.lobby-view .match-seat-heading { margin-top: 13px; }

.lobby-view .match-roster {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, 1cqw, 12px);
}

.lobby-view .match-seat {
  position: relative;
  min-height: clamp(156px, 23cqh, 230px);
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 13px 8px;
  border-color: rgba(235, 190, 86, .3);
  border-radius: 15px;
  background: rgba(15, 43, 43, .92);
  text-align: center;
}

.lobby-view .match-seat.is-filled {
  border-color: rgba(240, 189, 79, .68);
  background: rgba(24, 58, 49, .96);
}

.lobby-view .match-seat.is-self {
  box-shadow: 0 0 0 2px rgba(232, 189, 85, .18), 0 12px 28px rgba(0, 0, 0, .28);
}

.lobby-view .match-seat.is-empty { opacity: .76; }

.lobby-view .match-seat-avatar {
  width: clamp(58px, 6cqw, 78px);
  height: clamp(58px, 6cqw, 78px);
  padding: 0;
  border-radius: 50%;
}

.lobby-view .match-seat-copy { justify-items: center; }
.lobby-view .match-seat-copy strong { max-width: 100%; font-size: 12px; }
.lobby-view .match-seat-copy span { min-height: 14px; color: #b7c9c4; font-size: 9px; line-height: 1.2; }

.match-invite {
  width: 100%;
  padding: 7px 8px;
}

.lobby-view .match-progress-shell {
  margin-top: 12px;
  padding: 10px 12px;
}

.lobby-view .match-actions { justify-content: center; }

.lobby-view .match-primary {
  flex: 0 1 320px;
  min-height: 56px;
  font-size: 17px;
  letter-spacing: .08em;
}

.lobby-view .match-secondary {
  min-width: 126px;
  min-height: 56px;
}

.match-success-banner {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 20;
  display: grid;
  width: min(420px, calc(100% - 32px));
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 24px;
  transform: translate(-50%, -50%);
  border: 1px solid #f4c75e;
  border-radius: 20px;
  color: #f8fff9;
  background: rgba(4, 40, 34, .98);
  box-shadow: 0 0 0 999px rgba(1, 9, 14, .72), 0 26px 70px rgba(0, 0, 0, .66), inset 0 1px rgba(255, 255, 255, .09);
  text-align: center;
}

.match-success-banner > span {
  color: #ffd76f;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .22em;
}

.match-success-banner strong {
  color: #fff1c3;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(28px, 4cqw, 42px);
}

.match-success-banner p {
  margin: 0;
  color: #c8ddd6;
  font-size: 12px;
}

.lobby-footer {
  z-index: 4;
  display: flex;
  min-height: calc(42px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border-top: 1px solid rgba(241, 191, 73, .18);
  color: #8fa9a2;
  background: rgba(2, 9, 14, .82);
  font-size: 9px;
  text-align: center;
}

.lobby-footer span { color: #e0bd63; font-weight: 900; }
.lobby-footer strong { font-weight: 700; }

.toast {
  position: absolute;
  z-index: 140;
}

@container app-viewport (max-width: 980px) {
  .lobby-layout {
    grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
    gap: 18px;
    padding-inline: 18px;
  }

  .lobby-hero p { font-size: 12px; }
}

@media (orientation: portrait) {
  .lobby-view {
    min-height: 0;
    overflow-y: auto;
  }

  .lobby-scene {
    position: fixed;
    background-image:
      linear-gradient(180deg, rgba(2, 11, 17, .8), rgba(4, 30, 29, .43) 42%, rgba(2, 10, 15, .94)),
      url("mahjong-lobby-teahouse-portrait-v1.png");
    background-position: center top;
  }

  .lobby-topbar {
    position: sticky;
    top: 0;
    min-height: calc(62px + env(safe-area-inset-top));
    gap: 7px;
    padding: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) 6px max(7px, env(safe-area-inset-left));
  }

  .lobby-brand { gap: 6px; }
  .lobby-leading { gap: 5px; }
  .lobby-back { min-width: 44px; min-height: 44px; padding: 4px; }
  .lobby-back img { width: 18px; height: 18px; }
  .lobby-back span { display: none; }
  .lobby-brand > img { width: 34px; height: 42px; padding: 4px; }
  .lobby-brand strong { font-size: clamp(17px, 5cqw, 22px); }
  .lobby-brand span { display: none; }
  .lobby-tools { gap: 4px; }
  .lobby-player { max-width: 130px; min-height: 46px; gap: 5px; padding: 3px 7px 3px 3px; }
  .lobby-player > span:first-child { width: 36px; height: 36px; padding: 0; }
  .lobby-player strong { max-width: 76px; font-size: 9px; }
  .lobby-player small { font-size: 7px; }
  .lobby-tool { min-width: 44px; min-height: 44px; padding: 4px; }
  .lobby-tool img { width: 18px; height: 18px; }
  .lobby-tool span { display: none; }

  .lobby-layout {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px max(7px, env(safe-area-inset-right)) 12px max(7px, env(safe-area-inset-left));
  }

  .lobby-hero {
    justify-items: center;
    text-align: center;
  }

  .lobby-kicker { padding: 4px 8px; font-size: 8px; }
  .lobby-title-art { width: min(250px, 70cqw); margin: 5px 0 1px; }
  .lobby-hero p { display: none; }
  .lobby-mode-tags { justify-content: center; gap: 4px; margin-top: 2px; }
  .lobby-mode-tags span { padding: 3px 6px; font-size: 7px; }

  .lobby-party-card {
    width: min(620px, 100%);
    margin-inline: auto;
    padding: 11px;
    border-radius: 16px;
  }

  .lobby-party-head h2 { font-size: clamp(22px, 7cqw, 29px); }
  .lobby-party-head em { padding: 5px 8px; font-size: 8px; }
  .party-code-card { margin-top: 8px; padding: 6px 8px; }
  .party-code-copy { gap: 6px; }
  .party-code-copy strong { font-size: 18px; letter-spacing: .1em; }
  .party-code-actions { gap: 4px; }
  .party-code-actions button { min-width: 55px; padding-inline: 7px; }
  .party-code-card > small { display: none; }
  .lobby-view .match-seat-heading { margin: 8px 2px 5px; }
  .lobby-view .match-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lobby-view .match-seat { min-height: 112px; gap: 3px; padding: 7px 5px; border-radius: 11px; }
  .lobby-view .match-seat-avatar { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
  .lobby-view .match-seat-copy strong { font-size: 10px; }
  .lobby-view .match-seat-copy span { min-height: 10px; font-size: 7px; }
  .match-invite { min-height: 44px; padding: 5px; font-size: 9px; }
  .lobby-view .match-progress-shell { gap: 5px; margin-top: 7px; padding: 7px 8px; }
  .lobby-view .match-progress-copy strong { font-size: 10px; }
  .lobby-view .match-progress-copy span { font-size: 8px; }
  .lobby-view .match-actions { margin-top: 7px; }
  .lobby-view .match-primary,
  .lobby-view .match-secondary { min-height: 48px; }
  .lobby-view .match-primary { font-size: 14px; }
  .match-success-banner { min-height: 180px; }
  .lobby-footer { min-height: calc(36px + env(safe-area-inset-bottom)); padding-block: 6px max(6px, env(safe-area-inset-bottom)); }
}

@container app-viewport (max-width: 360px) {
  .lobby-brand > div { display: none; }
  .lobby-player small { display: none; }
  .lobby-player { max-width: 100px; }
  .lobby-title-art { width: min(210px, 66cqw); }
  .lobby-mode-tags span:nth-child(n + 3) { display: none; }
  .party-code-copy span { display: none; }
  .party-code-copy strong { font-size: 16px; }
  .party-code-actions button { min-width: 50px; font-size: 9px; }
  .lobby-view .match-seat { min-height: 104px; }
  .lobby-view .match-seat-avatar { width: 42px; height: 42px; }
  .lobby-view .match-seat.is-empty .match-seat-copy { display: none; }
  .lobby-view .match-progress-copy { align-items: flex-start; }
  .lobby-view .match-progress-copy span { display: none; }
}

@media (orientation: portrait) and (max-width: 560px) {
  .lobby-brand > div { display: none; }
}

@media (orientation: portrait) and (max-height: 650px) {
  .lobby-hero { display: none; }
}

@container app-viewport (max-aspect-ratio: 3/2) {
  .game-stage {
    background-image: url("mahjong-room-three-ai-edge-tablet-v3.png");
    background-position: center top;
  }
}

@media (orientation: portrait) and (max-aspect-ratio: 1/2) {
  .game-stage {
    background-image: url("mahjong-room-three-ai-edge-phone-v3.png");
    background-position: center top;
  }
}

@container app-viewport (max-height: 520px) {
  .lobby-view {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow-y: auto;
  }
  .lobby-topbar {
    min-height: calc(52px + env(safe-area-inset-top));
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left));
  }
  .lobby-brand > img { width: 33px; height: 40px; padding: 4px; }
  .lobby-back { min-width: 44px; min-height: 44px; padding: 4px; }
  .lobby-back span { display: none; }
  .lobby-brand strong { font-size: 18px; }
  .lobby-brand span { display: none; }
  .lobby-player { min-height: 44px; }
  .lobby-tool { min-width: 44px; min-height: 44px; }

  .lobby-layout {
    grid-template-columns: minmax(140px, .38fr) minmax(0, 1.62fr);
    align-items: center;
    gap: 12px;
    padding: 7px max(8px, env(safe-area-inset-right)) 7px max(8px, env(safe-area-inset-left));
  }

  .lobby-kicker { padding: 4px 7px; font-size: 7px; }
  .lobby-title-art { width: min(230px, 100%); margin: 6px 0 0; }
  .lobby-hero p,
  .lobby-mode-tags { display: none; }
  .lobby-party-card { padding: 9px 11px; border-radius: 14px; }
  .lobby-party-head h2 { font-size: 22px; }
  .lobby-party-head em { padding: 4px 7px; font-size: 8px; }
  .party-code-card { grid-template-columns: minmax(0, 1fr) auto; margin-top: 5px; padding: 4px 7px; }
  .party-code-copy strong { font-size: 16px; }
  .party-code-actions button { min-width: 55px; min-height: 44px; }
  .party-code-card > small { display: none; }
  .lobby-view .match-seat-heading { margin: 5px 2px 3px; }
  .lobby-view .match-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .lobby-view .match-seat { min-height: 106px; gap: 3px; padding: 5px; }
  .lobby-view .match-seat-avatar { width: 44px; height: 44px; padding: 0; }
  .lobby-view .match-seat-copy strong { font-size: 9px; }
  .lobby-view .match-seat-copy span { min-height: 8px; font-size: 7px; }
  .match-invite { min-height: 44px; font-size: 8px; }
  .lobby-view .match-progress-shell { gap: 4px; margin-top: 5px; padding: 5px 7px; }
  .lobby-view .match-actions { margin-top: 5px; }
  .lobby-view .match-primary,
  .lobby-view .match-secondary { min-height: 44px; }
  .lobby-view .match-primary { flex-basis: 240px; font-size: 13px; }
  .match-success-banner { min-height: 150px; }

  .lobby-topbar {
    height: 54px;
    min-height: 54px;
    padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left));
  }
  .lobby-player {
    height: 44px;
    min-height: 44px;
    gap: 5px;
    padding: 2px 7px 2px 2px;
  }
  .lobby-player > span:first-child {
    width: 36px;
    height: 36px;
    padding: 0;
  }
  .lobby-layout {
    gap: 10px;
    padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
  }
  .lobby-party-card {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-content: start;
    column-gap: 8px;
    row-gap: 4px;
    padding: 7px 9px;
  }
  .lobby-party-head { grid-column: 1; grid-row: 1; }
  .lobby-party-head > div { gap: 0; }
  .lobby-party-head span { font-size: 7px; }
  .lobby-party-head h2 { font-size: 20px; }
  .lobby-party-head em { padding: 4px 6px; font-size: 7px; }
  .party-code-card {
    grid-column: 2;
    grid-row: 1;
    min-height: 44px;
    margin: 0;
    padding: 2px 6px;
  }
  .party-code-copy strong { font-size: 15px; }
  .lobby-view .match-seat-heading {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
  .lobby-view .match-roster {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .lobby-view .match-seat { min-height: 100px; }
  .lobby-view .match-progress-shell {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
    padding: 5px 7px;
  }
  .lobby-view .match-actions {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
  }
  .lobby-view .match-primary {
    min-width: 0;
    flex: 1 1 0;
  }
  .lobby-view .match-secondary { min-width: 96px; }
  .lobby-footer { display: none; }
}

@container app-viewport (max-height: 360px) {
  .lobby-topbar {
    height: 52px;
    min-height: 52px;
  }

  .lobby-layout {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .lobby-party-card {
    row-gap: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .register-panel {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .register-panel .modal-head {
    top: -2px;
    margin-bottom: 1px;
    padding-bottom: 1px;
  }

  .register-panel .avatar-picker {
    gap: 4px;
  }

  .register-panel .avatar-picker label > span {
    min-height: 56px;
    padding-block: 2px;
  }

  .register-panel .avatar-picker img {
    width: 38px;
    height: 38px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .lobby-back:hover:not(:disabled),
  .lobby-player:hover,
  .lobby-tool:hover,
  .party-code-actions button:hover:not(:disabled),
  .match-invite:hover:not(:disabled) { filter: brightness(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-view *,
  .lobby-view *::before,
  .lobby-view *::after { transition: none !important; animation: none !important; }
}