:root {
  --fd-cream: #fff7dc;
  --fd-gold: #f6c84f;
  --fd-gold-deep: #8f5a10;
  --fd-night: #030b14;
  --fd-panel: rgba(2, 23, 22, .91);
  --fd-panel-soft: rgba(4, 42, 35, .88);
  --fd-line: rgba(247, 198, 74, .7);
  --fd-red: #df433d;
  --fd-blue: #2976c4;
  --fd-green: #15855a;
  --fd-yellow: #bc7200;
}

#app.four-dazi-game,
#app.four-dazi-game .fd-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  overflow: hidden;
  color: var(--fd-cream);
  background: var(--fd-night);
}

#app.four-dazi-game .fd-stage {
  isolation: isolate;
}

#app.four-dazi-game .fd-room-art,
#app.four-dazi-game .fd-stage-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#app.four-dazi-game .fd-room-art {
  z-index: 0;
  background: #06111d url("four-dazi-square-table-v4.png") center center / cover no-repeat;
}

#app.four-dazi-game .fd-stage-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(1, 7, 14, .78) 0, rgba(1, 7, 14, .12) 15%, transparent 31%),
    linear-gradient(180deg, transparent 67%, rgba(0, 8, 13, .17) 83%, rgba(0, 6, 11, .8) 100%);
  box-shadow: inset 0 0 5cqw rgba(0, 0, 0, .22);
}

#app.four-dazi-game button {
  -webkit-tap-highlight-color: transparent;
}

html[data-screen="game"] .toast {
  top: clamp(126px, 27cqh, 220px);
}

#app.four-dazi-game .fd-topbar {
  position: absolute;
  z-index: 60;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  height: clamp(48px, 10cqh, 78px);
  grid-template-columns: minmax(170px, .82fr) minmax(390px, 1.45fr) minmax(240px, 1fr);
  align-items: center;
  gap: clamp(6px, 1cqw, 16px);
  padding: max(5px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(10px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(247, 198, 74, .42);
  background: linear-gradient(180deg, rgba(1, 8, 18, .96), rgba(1, 9, 17, .78));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
}

#app.four-dazi-game .fd-brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(6px, .8cqw, 12px);
}

#app.four-dazi-game .fd-brand-lockup > img {
  width: clamp(78px, 8.7cqw, 132px);
  height: auto;
  max-height: clamp(39px, 7.7cqh, 60px);
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}

#app.four-dazi-game .fd-brand-lockup > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

#app.four-dazi-game .fd-brand-lockup strong {
  color: #ffe49a;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(15px, 1.7cqw, 26px);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 8px #000;
}

#app.four-dazi-game .fd-brand-lockup i {
  color: #ff6537;
  font-style: italic;
}

#app.four-dazi-game .fd-brand-lockup span {
  overflow: hidden;
  color: #dce9e4;
  font-size: clamp(7px, .72cqw, 11px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app.four-dazi-game .fd-round-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: .82fr 1.22fr .82fr 1fr;
  gap: clamp(3px, .45cqw, 7px);
}

#app.four-dazi-game .fd-round-summary > span {
  display: grid;
  min-width: 0;
  min-height: clamp(37px, 7cqh, 55px);
  place-content: center;
  gap: 1px;
  padding: 3px 6px;
  border: 1px solid var(--fd-line);
  border-radius: clamp(6px, .7cqw, 10px);
  background: linear-gradient(180deg, rgba(7, 16, 35, .94), rgba(4, 19, 28, .88));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 5px 15px rgba(0, 0, 0, .25);
  text-align: center;
}

#app.four-dazi-game .fd-round-summary small {
  color: #d7dfdc;
  font-size: clamp(7px, .65cqw, 10px);
  line-height: 1;
}

#app.four-dazi-game .fd-round-summary b {
  overflow: hidden;
  color: #ffe163;
  font-size: clamp(10px, 1.05cqw, 16px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app.four-dazi-game .fd-tools {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  gap: clamp(3px, .45cqw, 7px);
}

#app.four-dazi-game .fd-icon-button {
  display: grid;
  width: clamp(43px, 4.6cqw, 66px);
  height: clamp(39px, 7.3cqh, 58px);
  min-width: 44px;
  min-height: 44px;
  flex: 0 1 auto;
  place-content: center;
  gap: 1px;
  padding: 3px;
  border: 1px solid rgba(247, 198, 74, .56);
  border-radius: clamp(7px, .8cqw, 12px);
  color: #fff4cc;
  background: rgba(3, 13, 22, .88);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .3);
}

#app.four-dazi-game .fd-icon-button img {
  width: clamp(15px, 1.65cqw, 23px);
  height: clamp(15px, 1.65cqw, 23px);
  margin: auto;
  filter: invert(89%) sepia(77%) saturate(1010%) hue-rotate(331deg) brightness(107%);
}

#app.four-dazi-game .fd-icon-button span {
  font-size: clamp(7px, .65cqw, 10px);
  font-weight: 900;
}

#app.four-dazi-game .fd-icon-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

#app.four-dazi-game .fd-exit-button {
  border-color: rgba(235, 102, 82, .66);
  color: #ffe2da;
  background: rgba(76, 20, 22, .87);
}

#app.four-dazi-game .fd-score-guide {
  position: absolute;
  z-index: 18;
  top: clamp(56px, 11.5cqh, 88px);
  right: max(10px, env(safe-area-inset-right));
  width: clamp(190px, 17cqw, 255px);
  padding: clamp(7px, .8cqw, 12px);
  border: 1px solid var(--fd-line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(38, 12, 4, .91), rgba(3, 20, 20, .92));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 232, 155, .08);
}

#app.four-dazi-game .fd-score-guide h2 {
  margin: 0 0 6px;
  color: #ffe39a;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(12px, 1.2cqw, 18px);
  text-align: center;
  letter-spacing: .1em;
}

#app.four-dazi-game .fd-score-guide > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}

#app.four-dazi-game .fd-score-guide span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  color: #f4eee0;
  font-size: clamp(8px, .72cqw, 11px);
}

#app.four-dazi-game .fd-score-guide b,
#app.four-dazi-game .fd-score-guide p {
  color: #ffd65d;
}

#app.four-dazi-game .fd-score-guide p {
  margin: 6px 0 0;
  border-top: 1px solid rgba(247, 198, 74, .28);
  padding-top: 5px;
  font-size: clamp(7px, .63cqw, 9px);
  line-height: 1.35;
  text-align: center;
}

#app.four-dazi-game .fd-opponent {
  position: absolute;
  z-index: 22;
  display: grid;
  pointer-events: none;
}

#app.four-dazi-game .fd-opponent-west {
  top: clamp(86px, 13cqh, 108px);
  left: 50%;
  justify-items: center;
  transform: translateX(-50%);
}

#app.four-dazi-game .fd-opponent-north {
  top: 53%;
  left: max(12px, calc(env(safe-area-inset-left) + 6px));
  grid-template-areas: "card hand";
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(5px, .7cqw, 10px);
  transform: translateY(-50%);
}

#app.four-dazi-game .fd-opponent-south {
  top: 53%;
  right: max(12px, calc(env(safe-area-inset-right) + 6px));
  grid-template-areas: "hand card";
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(5px, .7cqw, 10px);
  transform: translateY(-50%);
}

#app.four-dazi-game .fd-opponent-north .fd-opponent-card,
#app.four-dazi-game .fd-opponent-south .fd-opponent-card {
  grid-area: card;
  min-width: clamp(122px, 13.6cqw, 186px);
  border-radius: clamp(9px, 1cqw, 14px);
}

#app.four-dazi-game .fd-opponent-card {
  display: flex;
  min-width: clamp(145px, 15cqw, 210px);
  min-height: clamp(34px, 5.8cqh, 48px);
  align-items: center;
  gap: clamp(5px, .65cqw, 9px);
  padding: 4px clamp(7px, .8cqw, 11px) 4px 4px;
  border: 2px solid rgba(255, 215, 104, .84);
  border-radius: 999px;
  background: rgba(3, 14, 17, .93);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07);
}

#app.four-dazi-game .fd-opponent-card > div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0;
}

#app.four-dazi-game .fd-opponent-card strong {
  overflow: hidden;
  font-size: clamp(10px, 1cqw, 15px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app.four-dazi-game .fd-opponent-card div span {
  color: #e3e8e4;
  font-size: clamp(7px, .66cqw, 10px);
}

#app.four-dazi-game .fd-opponent-card div b {
  color: #ffd456;
  font-size: clamp(10px, 1.05cqw, 16px);
}

#app.four-dazi-game .fd-opponent-card em {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  color: #ffd86b;
  background: rgba(126, 70, 6, .58);
  font-size: clamp(7px, .64cqw, 10px);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

#app.four-dazi-game .fd-seat-avatar {
  display: grid;
  width: clamp(30px, 3.1cqw, 43px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 3px solid #fff1b9;
  border-radius: 50%;
  background: #0c3c34;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

#app.four-dazi-game .fd-seat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#app.four-dazi-game .fd-opponent.is-dealer .fd-opponent-card {
  border-color: #fff1a8;
  box-shadow: 0 0 0 3px rgba(245, 191, 54, .22), 0 7px 22px rgba(0, 0, 0, .5);
}

#app.four-dazi-game .fd-opponent.is-thinking .fd-opponent-card em {
  color: #1b1403;
  background: #f7c64e;
  animation: fd-thinking 1s ease-in-out infinite;
}

#app.four-dazi-game .fd-opponent.is-receiving .fd-opponent-card,
#app.four-dazi-game .fd-player-zone.is-receiving .fd-player-profile {
  box-shadow: 0 0 0 3px rgba(255, 218, 94, .32), 0 0 22px rgba(255, 201, 65, .7);
}

@keyframes fd-thinking {
  50% { opacity: .58; }
}

#app.four-dazi-game .fd-speech {
  position: absolute;
  bottom: calc(100% + 5px);
  min-width: 72px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: #16120b;
  background: #fffaf0;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .28);
  font-size: clamp(8px, .72cqw, 11px);
  font-weight: 900;
  text-align: center;
}

#app.four-dazi-game .fd-opponent-hand {
  display: flex;
  width: min(25cqw, 310px);
  max-width: calc(100cqw - 12px);
  justify-content: center;
  margin-top: 4px;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .42));
}

#app.four-dazi-game .fd-opponent-north .fd-opponent-hand,
#app.four-dazi-game .fd-opponent-south .fd-opponent-hand {
  --fd-side-tile-short: clamp(7px, .76cqw, 11px);
  --fd-side-tile-long: clamp(11px, 1.12cqw, 16px);
  display: grid;
  width: auto;
  max-width: none;
  height: auto;
  grid-area: hand;
  grid-auto-columns: var(--fd-side-tile-long);
  grid-auto-flow: column;
  grid-template-rows: repeat(14, var(--fd-side-tile-short));
  place-content: center;
  gap: 1px 2px;
  margin-top: 0;
}

#app.four-dazi-game .fd-opponent-north .fd-mini-tile,
#app.four-dazi-game .fd-opponent-south .fd-mini-tile {
  width: var(--fd-side-tile-short);
  height: var(--fd-side-tile-long);
  aspect-ratio: auto;
  place-self: center;
  margin: 0;
  line-height: 1;
}

#app.four-dazi-game .fd-opponent-north .fd-mini-tile { transform: rotate(90deg); }
#app.four-dazi-game .fd-opponent-south .fd-mini-tile { transform: rotate(-90deg); }

#app.four-dazi-game .fd-mini-tile {
  position: relative;
  width: clamp(8px, .92cqw, 13px);
  aspect-ratio: .72 / 1;
  flex: 0 1 auto;
  margin-left: -1px;
  overflow: hidden;
  border: 1px solid rgba(110, 72, 12, .78);
  border-radius: 3px;
  color: var(--fd-red);
  background: #f9f2dc url("tile-blank-tight.png") center / 100% 100% no-repeat;
  box-shadow: 0 2px 0 #8d671c;
  font-size: clamp(5px, .5cqw, 7px);
  font-weight: 1000;
  text-align: center;
  line-height: 1.55;
}

#app.four-dazi-game .fd-mini-tile.is-back {
  color: transparent;
  background-color: #e6bd4a;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 45%),
    url("tile-blank-tight.png");
  filter: sepia(.6) saturate(1.35);
}

#app.four-dazi-game .fd-table-center {
  position: absolute;
  z-index: 26;
  top: clamp(150px, 44cqh, 338px);
  left: 50%;
  display: grid;
  width: clamp(330px, 38cqw, 520px);
  max-height: 37cqh;
  justify-items: center;
  gap: clamp(2px, .45cqh, 5px);
  padding: clamp(7px, 1cqh, 12px) clamp(9px, 1cqw, 15px);
  border: 1px solid rgba(248, 205, 89, .76);
  border-radius: clamp(9px, 1.15cqw, 16px);
  background: linear-gradient(150deg, rgba(0, 58, 46, .94), rgba(1, 27, 27, .94));
  box-shadow: 0 12px 38px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform: translate(-50%, -18%);
  backdrop-filter: blur(7px);
}

#app.four-dazi-game .fd-deal-flight {
  --fd-flight-x: 0;
  --fd-flight-y: 0;
  position: absolute;
  z-index: 75;
  top: 54%;
  left: 50%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#app.four-dazi-game .fd-deal-flight[hidden] { display: none; }

#app.four-dazi-game .fd-deal-flight img {
  width: clamp(13px, 1.6cqw, 23px);
  height: auto;
  margin-left: clamp(-6px, -.42cqw, -3px);
  filter: sepia(.78) saturate(1.65) drop-shadow(0 4px 4px rgba(0, 0, 0, .5));
}

#app.four-dazi-game .fd-deal-flight img:first-child { margin-left: 0; }
#app.four-dazi-game .fd-deal-flight.is-to-east { --fd-flight-y: 34cqh; }
#app.four-dazi-game .fd-deal-flight.is-to-south { --fd-flight-x: 31cqw; }
#app.four-dazi-game .fd-deal-flight.is-to-west { --fd-flight-y: -34cqh; }
#app.four-dazi-game .fd-deal-flight.is-to-north { --fd-flight-x: -31cqw; }

#app.four-dazi-game .fd-deal-flight.is-flying {
  animation: fd-deal-packet 180ms cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes fd-deal-packet {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  18% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--fd-flight-x), var(--fd-flight-y)) scale(1.03); }
}

#app.four-dazi-game .fd-hub-topline {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
}

#app.four-dazi-game .fd-hub-topline span {
  color: #d9eee7;
  font-size: clamp(8px, .75cqw, 11px);
  font-weight: 900;
}

#app.four-dazi-game .fd-hub-topline b {
  display: grid;
  min-width: clamp(24px, 2.4cqw, 34px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #dfaa37;
  border-radius: 50%;
  color: #ffe171;
  background: #4b2b08;
  font-size: clamp(9px, .95cqw, 14px);
}

#app.four-dazi-game .fd-ai-auto-toggle {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 5px;
  padding: 5px 6px 5px 11px;
  border: 1px solid rgba(126, 224, 174, .76);
  border-radius: 999px;
  color: #e9fff4;
  background: rgba(9, 87, 59, .76);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}

#app.four-dazi-game .fd-ai-auto-toggle strong {
  display: grid;
  min-width: 29px;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #12331f;
  background: #8fe8b4;
  font-size: clamp(8px, .7cqw, 10px);
  line-height: 1;
}

#app.four-dazi-game .fd-ai-auto-toggle.is-off {
  border-color: rgba(255, 195, 106, .72);
  color: #ffeac6;
  background: rgba(79, 45, 14, .82);
}

#app.four-dazi-game .fd-ai-auto-toggle.is-off strong {
  color: #482307;
  background: #f5bd62;
}

#app.four-dazi-game .fd-ai-auto-toggle:disabled {
  cursor: not-allowed;
  opacity: .48;
}

#app.four-dazi-game .fd-table-center h2 {
  margin: 0;
  color: white;
  font-size: clamp(17px, 2cqw, 29px);
  line-height: 1.05;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}

#app.four-dazi-game .fd-table-center > p {
  max-width: 95%;
  margin: 0;
  overflow: hidden;
  color: #d2e9e2;
  font-size: clamp(7px, .75cqw, 11px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app.four-dazi-game .fd-dice-row {
  display: flex;
  min-height: clamp(38px, 7cqh, 58px);
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .7cqw, 10px);
}

#app.four-dazi-game .fd-die {
  position: relative;
  display: block;
  width: clamp(42px, 4.4cqw, 64px);
  aspect-ratio: 16 / 15;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .36));
  transform-origin: 50% 70%;
}

#app.four-dazi-game .fd-die img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#app.four-dazi-game .fd-dice-row.is-rolling .fd-die {
  animation: fd-dice-roll .28s ease-in-out infinite alternate;
}

#app.four-dazi-game .fd-dice-row.is-rolling .fd-die:nth-child(2) { animation-delay: -.09s; }
#app.four-dazi-game .fd-dice-row.is-rolling .fd-die:nth-child(3) { animation-delay: -.18s; }

@keyframes fd-dice-roll {
  0% { transform: translateY(-5px) rotate(-10deg) scale(.92); }
  100% { transform: translateY(3px) rotate(11deg) scale(1.04); }
}

#app.four-dazi-game .fd-ai-step {
  min-width: min(210px, 88%);
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid #ffe18b;
  border-radius: 999px;
  color: #2b1900;
  background: linear-gradient(180deg, #ffe173, #edae31);
  box-shadow: inset 0 1px rgba(255, 255, 255, .52), 0 3px 0 #875008, 0 7px 15px rgba(0, 0, 0, .28);
  font-size: clamp(10px, .95cqw, 14px);
  font-weight: 1000;
}

#app.four-dazi-game .fd-ai-step:disabled {
  cursor: wait;
  color: rgba(255, 255, 255, .56);
  background: linear-gradient(180deg, #687173, #41494b);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 3px 0 #202628;
}

#app.four-dazi-game .fd-action-dock {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, .55cqw, 8px);
}

#app.four-dazi-game .fd-action {
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 225, 141, .66);
  border-radius: clamp(7px, .75cqw, 11px);
  color: white;
  background: linear-gradient(180deg, #287bd7, #1052ac);
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 4px 0 #072f70, 0 7px 14px rgba(0, 0, 0, .3);
  font-size: clamp(9px, .9cqw, 13px);
  font-weight: 1000;
  white-space: nowrap;
}

#app.four-dazi-game .fd-action-roll {
  background: linear-gradient(180deg, #ff6843, #d52e19);
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 4px 0 #761607, 0 7px 14px rgba(0, 0, 0, .3);
}

#app.four-dazi-game .fd-action-open {
  color: #241500;
  background: linear-gradient(180deg, #ffe276, #eba92b);
  box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 4px 0 #8a5205, 0 7px 14px rgba(0, 0, 0, .3);
}

#app.four-dazi-game .fd-action-next {
  background: linear-gradient(180deg, #2b8eed, #1951cb);
}

#app.four-dazi-game .fd-action:disabled {
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .42);
  background: linear-gradient(180deg, #5a6264, #363d40);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 3px 0 #202628;
}

#app.four-dazi-game .fd-player-zone {
  position: absolute;
  z-index: 34;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(5px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(155px, 17cqw) minmax(450px, 1fr) minmax(110px, 12cqw);
  align-items: end;
  gap: clamp(6px, .8cqw, 12px);
}

#app.four-dazi-game .fd-player-profile {
  display: flex;
  min-width: 0;
  min-height: clamp(58px, 9cqh, 70px);
  align-items: center;
  gap: clamp(5px, .6cqw, 9px);
  padding: 5px 8px;
  border: 2px solid rgba(246, 200, 79, .8);
  border-radius: clamp(10px, 1.2cqw, 17px);
  color: white;
  background: rgba(3, 13, 16, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .48);
  text-align: left;
}

#app.four-dazi-game .fd-player-profile .player-avatar {
  display: grid;
  width: clamp(42px, 4.4cqw, 58px);
  height: clamp(42px, 4.4cqw, 58px);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 2px solid #ffe7a6;
  border-radius: 50%;
  background: #102b2b;
}

#app.four-dazi-game .fd-player-profile .player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#app.four-dazi-game .fd-player-profile .player-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0;
}

#app.four-dazi-game .fd-player-profile .player-copy small {
  color: #8fe2ca;
  font-size: clamp(7px, .65cqw, 9px);
  font-weight: 900;
}

#app.four-dazi-game .fd-player-profile .player-copy strong {
  overflow: hidden;
  font-size: clamp(10px, 1.05cqw, 15px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app.four-dazi-game .fd-player-profile .player-copy span {
  color: #d9e4df;
  font-size: clamp(7px, .65cqw, 10px);
}

#app.four-dazi-game .fd-player-profile .player-copy b {
  color: #ffd458;
  font-size: clamp(10px, 1.1cqw, 16px);
}

#app.four-dazi-game .fd-player-profile em {
  padding: 3px 6px;
  border-radius: 999px;
  color: #ffd765;
  background: #5f3a08;
  font-size: clamp(7px, .62cqw, 9px);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

#app.four-dazi-game .fd-hand-shell {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 2px;
}

#app.four-dazi-game .fd-player-hand {
  display: grid;
  width: max-content;
  max-width: 100%;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(1px, .18cqw, 3px);
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .5));
}

#app.four-dazi-game .fd-tile {
  position: relative;
  display: grid;
  width: clamp(27px, 3.42cqw, 47px);
  aspect-ratio: .72 / 1;
  place-items: center;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 6px;
  color: var(--fd-red);
  background: transparent;
  transform: translateY(0);
  transition: transform .13s ease, filter .13s ease;
}

#app.four-dazi-game .fd-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

#app.four-dazi-game .fd-tile.is-back > img {
  filter: sepia(.82) saturate(1.75) brightness(.92);
}

#app.four-dazi-game .fd-tile.is-back {
  filter: drop-shadow(0 3px 0 #76520e);
}

#app.four-dazi-game .fd-tile > b {
  position: relative;
  z-index: 1;
  margin-top: -4%;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(16px, 2cqw, 28px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, .75);
}

#app.four-dazi-game .fd-tile > small {
  position: absolute;
  z-index: 1;
  right: 11%;
  bottom: 9%;
  font-size: clamp(5px, .43cqw, 7px);
  font-weight: 900;
}

#app.four-dazi-game .fd-tile[data-color="红"] { color: #d32634; }
#app.four-dazi-game .fd-tile[data-color="蓝"] { color: #1769b2; }
#app.four-dazi-game .fd-tile[data-color="绿"] { color: #08794f; }
#app.four-dazi-game .fd-tile[data-color="黄"] { color: #ad6400; }

#app.four-dazi-game .fd-tile.is-selectable:hover,
#app.four-dazi-game .fd-tile.is-selected {
  z-index: 4;
  transform: translateY(clamp(-5px, -.7cqh, -3px));
  filter: drop-shadow(0 0 6px #ffcf43);
}

#app.four-dazi-game .fd-tile.is-selected::after {
  position: absolute;
  z-index: 2;
  inset: -2px;
  border: 3px solid #ffd042;
  border-radius: 7px;
  content: "";
}

#app.four-dazi-game .fd-tile.is-used {
  opacity: .43;
  filter: grayscale(.35);
}

#app.four-dazi-game .fd-hand-count {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 12px;
  color: #dae5e1;
  font-size: clamp(7px, .64cqw, 10px);
}

#app.four-dazi-game .fd-hand-count span {
  overflow: hidden;
  max-width: 65%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app.four-dazi-game .fd-hand-count b {
  color: #ffe271;
}

#app.four-dazi-game .fd-hand-count i { font-style: normal; }

#app.four-dazi-game .fd-social-tools {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

#app.four-dazi-game .fd-social-tools button {
  display: grid;
  width: clamp(48px, 5.2cqw, 70px);
  min-height: clamp(45px, 7.6cqh, 58px);
  place-content: center;
  gap: 2px;
  border: 1px solid rgba(246, 200, 79, .66);
  border-radius: 10px;
  color: #fff2c1;
  background: rgba(2, 11, 18, .9);
}

#app.four-dazi-game .fd-social-tools img {
  width: clamp(17px, 1.8cqw, 25px);
  height: clamp(17px, 1.8cqw, 25px);
  margin: auto;
  filter: invert(89%) sepia(77%) saturate(1010%) hue-rotate(331deg) brightness(107%);
}

#app.four-dazi-game .fd-social-tools span {
  font-size: clamp(7px, .62cqw, 9px);
  font-weight: 900;
}

.fd-rotate-overlay {
  display: none;
}

#app.four-dazi-game .fd-pause-overlay,
#app.four-dazi-game .fd-reconnect-overlay {
  z-index: 200;
}

html[data-paused="true"] #app.four-dazi-game .fd-stage > :not(.fd-pause-overlay) {
  animation-play-state: paused !important;
}

.four-dazi-result-summary {
  display: grid;
  gap: 12px;
}

.settlement-panel {
  width: min(900px, calc(100% - 32px));
  max-width: 900px;
  max-height: min(90cqh, 760px);
}

.four-dazi-result-summary > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid rgba(246, 200, 79, .46);
  border-radius: 12px;
  background: rgba(4, 39, 34, .78);
}

.four-dazi-result-summary > header strong {
  color: #ffe071;
  font-size: clamp(22px, 3cqw, 34px);
}

.four-dazi-rank-list {
  display: grid;
  gap: 8px;
}

.four-dazi-rank-card {
  display: grid;
  grid-template-columns: auto minmax(90px, .75fr) auto minmax(180px, 2fr) minmax(150px, auto) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(246, 200, 79, .3);
  border-radius: 10px;
  background: rgba(4, 24, 25, .78);
}

.four-dazi-rank-card.is-player {
  border-color: #f4ca59;
  background: rgba(35, 52, 28, .88);
}

.four-dazi-rank-card .fd-place {
  display: grid;
  width: 37px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #241800;
  background: #f6ca58;
  font-weight: 1000;
}

.four-dazi-rank-card .fd-result-player {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.four-dazi-rank-card .fd-result-player > span {
  display: grid;
  min-width: 0;
}

.four-dazi-rank-card .fd-result-player strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.four-dazi-rank-card .fd-result-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 2px solid rgba(255, 222, 128, .8);
  border-radius: 50%;
  background: #0b3b33;
}

.four-dazi-rank-card .fd-result-player small,
.four-dazi-rank-card .fd-result-meta,
.four-dazi-rank-card .fd-result-groups {
  color: #bcd0c9;
  font-size: 11px;
}

.four-dazi-rank-card .fd-result-score {
  color: #ffe069;
  font-size: 22px;
  font-weight: 1000;
  white-space: nowrap;
}

.four-dazi-rank-card .fd-result-groups {
  line-height: 1.45;
}

.four-dazi-rank-card .fd-result-multiplier {
  color: #ffdb5b;
  font-size: 18px;
  font-weight: 1000;
  white-space: nowrap;
}

.four-dazi-rank-card .fd-result-outcome {
  display: grid;
  min-width: 44px;
  min-height: 32px;
  place-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: #102116;
  background: #79dda9;
  font-size: 13px;
  font-weight: 1000;
  white-space: nowrap;
}

.four-dazi-rank-card.is-outcome-tie .fd-result-outcome,
.four-dazi-rank-card.is-outcome-dealer .fd-result-outcome { background: #b9c7c8; }
.four-dazi-rank-card.is-outcome-loss .fd-result-outcome { color: #39110d; background: #ef9387; }
.four-dazi-rank-card.is-outcome-sweep .fd-result-outcome { color: #3b2200; background: #ffd45a; box-shadow: 0 0 12px rgba(255, 212, 90, .42); }

@container app-viewport (max-width: 1180px) {
  #app.four-dazi-game .fd-score-guide { display: none; }
  #app.four-dazi-game .fd-topbar {
    grid-template-columns: minmax(145px, .72fr) minmax(350px, 1.6fr) minmax(200px, .9fr);
  }
}

@container app-viewport (max-aspect-ratio: 3/2) and (min-height: 561px) {
  #app.four-dazi-game .fd-opponent-west { top: 14cqh; }
  #app.four-dazi-game .fd-opponent-north,
  #app.four-dazi-game .fd-opponent-south { top: 52%; }
  #app.four-dazi-game .fd-table-center { top: 53cqh; }
}

@container app-viewport (max-height: 560px) {
  html[data-screen="game"] .toast {
    top: clamp(121px, 31cqh, 174px);
    padding: 3px 8px;
    font-size: 8px;
  }

  #app.four-dazi-game .fd-topbar {
    height: 54px;
    grid-template-columns: minmax(120px, .7fr) minmax(300px, 1.55fr) minmax(190px, .85fr);
  }

  #app.four-dazi-game .fd-brand-lockup span { display: none; }
  #app.four-dazi-game .fd-opponent-west { top: 16cqh; }
  #app.four-dazi-game .fd-opponent-north,
  #app.four-dazi-game .fd-opponent-south { top: 51%; }
  #app.four-dazi-game .fd-table-center {
    top: 43cqh;
    width: clamp(315px, 40cqw, 420px);
    gap: 1px;
    padding: 5px 8px;
  }
  #app.four-dazi-game .fd-ai-auto-toggle {
    min-height: 44px;
    padding: 5px 6px 5px 9px;
  }
  #app.four-dazi-game .fd-ai-auto-toggle strong {
    min-width: 28px;
    min-height: 28px;
  }
  #app.four-dazi-game .fd-opponent-north,
  #app.four-dazi-game .fd-opponent-south { gap: 3px; }
  #app.four-dazi-game .fd-opponent-north .fd-opponent-card,
  #app.four-dazi-game .fd-opponent-south .fd-opponent-card { min-width: 110px; }
  #app.four-dazi-game .fd-opponent-north .fd-opponent-hand,
  #app.four-dazi-game .fd-opponent-south .fd-opponent-hand {
    --fd-side-tile-short: clamp(6px, .72cqw, 8px);
    --fd-side-tile-long: clamp(9px, 1.05cqw, 12px);
  }
  #app.four-dazi-game .fd-table-center > p { display: none; }
  #app.four-dazi-game .fd-action-dock { margin-top: 1px; }
  #app.four-dazi-game .fd-player-zone {
    grid-template-columns: minmax(118px, 17cqw) minmax(390px, 1fr) minmax(92px, 12cqw);
  }
  #app.four-dazi-game .fd-player-profile {
    min-height: 45px;
    padding: 3px 5px;
  }
  #app.four-dazi-game .fd-player-profile .player-avatar {
    width: 36px;
    height: 36px;
  }
  #app.four-dazi-game .fd-player-profile em { display: none; }
}

@container app-viewport (max-width: 760px) {
  #app.four-dazi-game .fd-topbar {
    grid-template-columns: 115px minmax(250px, 1fr) 182px;
    gap: 4px;
    padding-right: max(5px, env(safe-area-inset-right));
    padding-left: max(5px, env(safe-area-inset-left));
  }
  #app.four-dazi-game .fd-brand-lockup > img { width: 70px; }
  #app.four-dazi-game .fd-brand-lockup strong { font-size: 12px; }
  #app.four-dazi-game .fd-round-summary > span { padding-inline: 2px; }
  #app.four-dazi-game .fd-round-summary small { font-size: 6px; }
  #app.four-dazi-game .fd-round-summary b { font-size: 8px; }
  #app.four-dazi-game .fd-icon-button { width: 44px; }
  #app.four-dazi-game .fd-icon-button span { font-size: 6px; }
  #app.four-dazi-game .fd-opponent-card { min-width: 126px; }
  #app.four-dazi-game .fd-opponent-north { left: max(5px, env(safe-area-inset-left)); }
  #app.four-dazi-game .fd-opponent-south { right: max(5px, env(safe-area-inset-right)); }
  #app.four-dazi-game .fd-player-zone {
    right: max(4px, env(safe-area-inset-right));
    left: max(4px, env(safe-area-inset-left));
    grid-template-columns: 112px minmax(370px, 1fr) 86px;
    gap: 4px;
  }
  #app.four-dazi-game .fd-social-tools span,
  #app.four-dazi-game .fd-player-profile .player-copy small { display: none; }
}

@media (orientation: portrait) {
  .app-viewport {
    visibility: hidden;
    pointer-events: none;
  }

  body > .fd-rotate-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    overflow: auto;
    background:
      radial-gradient(circle at 50% 42%, rgba(20, 91, 76, .48), transparent 42%),
      rgba(0, 8, 14, .97);
    backdrop-filter: blur(12px);
  }

  body > .fd-rotate-overlay > div {
    display: grid;
    width: min(88vw, 390px);
    justify-items: center;
    gap: 10px;
    padding: 28px 24px;
    border: 1px solid rgba(246, 200, 79, .72);
    border-radius: 20px;
    background: rgba(3, 18, 23, .94);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .5);
    text-align: center;
  }

  body > .fd-rotate-overlay span {
    display: grid;
    width: 68px;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid #f6c84f;
    border-radius: 18px;
    color: #ffe171;
    font-size: 42px;
    transform: rotate(-45deg);
  }

  body > .fd-rotate-overlay strong {
    color: #ffe49a;
    font-size: 25px;
  }

  body > .fd-rotate-overlay p {
    margin: 0;
    color: #d4e5df;
    font-size: 14px;
    line-height: 1.6;
  }

  body > .fd-rotate-overlay button {
    min-width: min(240px, 100%);
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid #ffe28a;
    border-radius: 12px;
    color: #251600;
    background: linear-gradient(180deg, #ffe477, #e9aa2d);
    box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 4px 0 #805009, 0 9px 20px rgba(0, 0, 0, .32);
    font-size: 15px;
    font-weight: 1000;
  }

  body > .fd-rotate-overlay button:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
  }

  body > .fd-rotate-overlay button:disabled {
    color: #17332e;
    background: #9cdcc6;
    box-shadow: none;
  }

  body > .fd-rotate-overlay small {
    max-width: 34ch;
    color: #9fb8b1;
    font-size: 11px;
    line-height: 1.5;
  }
}

@container app-viewport (max-width: 720px) {
  .four-dazi-rank-card {
    grid-template-columns: auto minmax(80px, 1fr) auto auto;
    gap: 6px;
  }
  .four-dazi-rank-card .fd-result-groups {
    grid-column: 2 / -1;
  }
  .four-dazi-rank-card .fd-result-multiplier {
    grid-column: 2 / -1;
    font-size: 13px;
  }
}

@container app-viewport (max-height: 560px) {
  .settlement-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: 900px;
    height: auto;
    max-height: calc(100cqh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: auto;
    padding: 8px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 12px;
    transform: none;
  }
  .settlement-panel .modal-head {
    top: -8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 0 5px;
    padding: 1px 0 5px;
  }
  .settlement-panel .modal-head > :first-child,
  .settlement-panel .four-dazi-result-summary > header > :first-child {
    min-width: 0;
  }
  .settlement-panel .modal-head-actions {
    min-width: 0;
    gap: 4px;
  }
  .settlement-panel .modal-head span { font-size: 7px; }
  .settlement-panel .modal-head h2 { margin: 0; font-size: 17px; }
  .settlement-panel .modal-head-actions .modal-close {
    min-width: 0;
    min-height: 44px;
    padding-block: 6px;
    padding-inline: 9px;
    font-size: 10px;
    white-space: nowrap;
  }
  .settlement-panel .four-dazi-result-summary { gap: 5px; }
  .settlement-panel .four-dazi-result-summary > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 5px 8px;
  }
  .settlement-panel .four-dazi-result-summary > header h3 { margin: 2px 0; font-size: 14px; }
  .settlement-panel .four-dazi-result-summary > header span { font-size: 8px; }
  .settlement-panel .four-dazi-result-summary > header strong {
    font-size: clamp(14px, 2.2cqw, 20px);
    white-space: nowrap;
  }
  .settlement-panel .four-dazi-rank-list { gap: 3px; }
  .settlement-panel .four-dazi-rank-card {
    min-width: 0;
    min-height: 39px;
    grid-template-columns: 28px minmax(84px, .75fr) minmax(38px, auto) minmax(0, 1.45fr) minmax(34px, auto);
    gap: 6px;
    padding: 3px 6px;
  }
  .settlement-panel .four-dazi-rank-card .fd-place { width: 28px; }
  .settlement-panel .four-dazi-rank-card .fd-result-avatar { width: 28px; height: 28px; }
  .settlement-panel .four-dazi-rank-card .fd-result-player { gap: 5px; }
  .settlement-panel .four-dazi-rank-card .fd-result-player strong { font-size: 10px; }
  .settlement-panel .four-dazi-rank-card .fd-result-player small { font-size: 8px; }
  .settlement-panel .four-dazi-rank-card .fd-result-groups { display: none; }
  .settlement-panel .four-dazi-rank-card .fd-result-score,
  .settlement-panel .four-dazi-rank-card .fd-result-multiplier { min-width: 0; }
  .settlement-panel .four-dazi-rank-card .fd-result-score { font-size: 16px; }
  .settlement-panel .four-dazi-rank-card .fd-result-multiplier {
    grid-column: auto;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }
  .settlement-panel .four-dazi-rank-card .fd-result-outcome { min-width: 34px; min-height: 26px; padding: 2px 5px; font-size: 10px; }
  .settlement-panel .formula { margin-top: 2px !important; padding: 5px; font-size: 9px; }
  .settlement-panel > .continue-button { display: none; }
}

@container app-viewport (max-height: 440px) {
  #app.four-dazi-game .fd-table-center {
    top: 40cqh;
    max-height: none;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "eyebrow timer aiControl"
      "title title aiControl"
      "dice dice dice"
      "aiStep aiStep aiStep"
      "actions actions actions";
    column-gap: 6px;
    row-gap: 1px;
    padding: 5px 8px;
  }

  #app.four-dazi-game .fd-hub-topline {
    display: contents;
  }

  #app.four-dazi-game .fd-hub-topline > span {
    grid-area: eyebrow;
    align-self: center;
    justify-self: start;
  }

  #app.four-dazi-game .fd-hub-topline > b {
    grid-area: timer;
    align-self: center;
  }

  #app.four-dazi-game .fd-ai-auto-toggle {
    grid-area: aiControl;
    align-self: center;
    justify-self: end;
  }

  #app.four-dazi-game .fd-table-center h2 {
    grid-area: title;
    justify-self: start;
    font-size: clamp(16px, 2cqw, 21px);
  }

  #app.four-dazi-game .fd-dice-row {
    grid-area: dice;
    min-height: 32px;
    margin-top: -2px;
  }

  #app.four-dazi-game .fd-die {
    width: clamp(32px, 4.15cqw, 38px);
  }

  #app.four-dazi-game .fd-ai-step {
    grid-area: aiStep;
  }

  #app.four-dazi-game .fd-action-dock {
    grid-area: actions;
    margin-top: -1px;
  }

  html[data-phase="OPENING"] #app.four-dazi-game .fd-action-dock {
    display: none;
  }

  #app.four-dazi-game .fd-player-hand {
    gap: 0 1px;
  }

  #app.four-dazi-game .fd-tile {
    width: clamp(21px, 2.55cqw, 25px);
    border-radius: 4px;
  }

  #app.four-dazi-game .fd-tile > b {
    font-size: clamp(12px, 1.55cqw, 16px);
  }

  #app.four-dazi-game .fd-tile > small {
    font-size: clamp(4px, .42cqw, 6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app.four-dazi-game *,
  #app.four-dazi-game *::before,
  #app.four-dazi-game *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}