@font-face {
  font-family: 'Ma Shan Zheng';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('./backup/fonts/MaShanZheng-subset.woff2') format('woff2'),
    url('./backup/fonts/NaPecZTRCLxvwo41b4gvzkXaRMQ.ttf') format('truetype');
}

@media (orientation: portrait) {
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack {
    position: relative !important;
    display: grid !important;
    grid-template-areas:
      "core"
      "last" !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack {
    position: relative !important;
    display: grid !important;
    grid-template-areas:
      "label"
      "fan"
      "last" !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack > .seat-name-fixed {
    grid-area: label !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .opponent-fan-wrap {
    grid-area: fan !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: start !important;
    width: calc(var(--card-w) * 2.7) !important;
    max-width: 100% !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-core,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-core {
    grid-area: core !important;
    display: grid !important;
    grid-template-areas:
      "label"
      "fan" !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 4px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-core > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-core > .seat-name-fixed {
    grid-area: label !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-core > .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-core > .opponent-fan-wrap {
    grid-area: fan !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    justify-self: center !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play {
    position: relative !important;
    grid-area: last !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    justify-self: center !important;
    align-self: start !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play {
    position: relative !important;
    grid-area: last !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 2px 0 0 !important;
    transform: none !important;
    overflow: visible !important;
    justify-self: center !important;
    align-self: start !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play .seat-played,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play .seat-played,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play .seat-played,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play .opponent-open-scale,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play .opponent-open-scale,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play .opponent-open-scale {
    width: max-content !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .closed-count-pill,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .closed-count-pill,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .closed-count-pill {
    right: 0 !important;
    bottom: 0 !important;
  }
}
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('./backup/fonts/NotoSerifTC-400-subset.woff2') format('woff2'),
    url('./backup/fonts/XLYzIZb5bJNDGYxLBibeHZ0BnHwmuanx8cUaGX9aMOpD.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url('./backup/fonts/NotoSerifTC-700-subset.woff2') format('woff2'),
    url('./backup/fonts/XLYzIZb5bJNDGYxLBibeHZ0BnHwmuanx8cUaGX-9N-pD.ttf') format('truetype');
}

:root {
  /* Core theme tokens */
  --ui-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang HK', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --avatar-bg: #d9dce3;
  --bg-a: #071a2f;
  --bg-b: #0f4469;
  --bg-c: #15808f;
  --text: #f4f9fb;
  --muted: #c3d8de;
  --accent: #f4a259;
  --danger: #ef476f;
  --ok: #52d273;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-2: rgba(7, 22, 34, 0.62);
  --ui-card-grad:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(145deg, var(--panel-2), var(--bg-b));
  --table-a: #17334f;
  --table-b: #1f4468;
  --table-c: #1c4262;
  --seat-a: rgba(17, 44, 70, .82);
  --seat-b: rgba(9, 33, 55, .78);
  --line-a: rgba(126, 177, 215, .6);
  --line-b: rgba(126, 177, 215, .35);
  --center-a: rgba(19, 88, 49, .92);
  --center-b: rgba(12, 63, 35, .9);
  --retro-gold: #c9a66b;
  --card-w: clamp(36px, 6vmin, 52px);
  --card-h: calc(var(--card-w) * 1.392857);
  --side-box-h: calc(var(--card-h) * 4.8);
  --card-scale: 1;
  --table-tilt: 0deg;
  --open-card-scale: 0.9;
  --card-radius: clamp(3px, calc(var(--card-w) * 0.096), 6px);
  --closed-tighten-threshold: 6;
  /* Game badge tokens */
  --game-seat-name-text-size: .74rem;
  --game-seat-subline-size: .73rem;
  --game-seat-badge-gap: 6px;
  --game-seat-count-size: 18px;
  --game-seat-count-font-size: .72rem;
  --game-round-wins-min-h: 18px;
  --game-round-wins-pad-x: 7px;
  --game-round-wins-font-size: .68rem;
  --game-round-wins-icon-size: .72rem;
  --game-round-wins-bg:
    linear-gradient(180deg, rgba(255, 220, 128, .32), rgba(184, 136, 34, .26));
  --game-round-wins-border: rgba(255, 220, 146, .42);
  --game-round-wins-text: #ffe8a8;
  --game-round-wins-icon: #ffd56a;
  --playful-sheen:
    linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,0) 34% 66%, rgba(255,255,255,.14));
  --playful-shadow: 0 12px 28px rgba(0,0,0,.26);
  --playful-pop: cubic-bezier(.2,.9,.2,1);
  /* Shared UI system tokens */
  --ui-radius-lg: 18px;
  --ui-radius-md: 14px;
  --ui-radius-sm: 11px;
  --ui-border-soft: 1px solid rgba(255,255,255,.16);
  --ui-border-strong: 1px solid rgba(255,255,255,.24);
  --ui-surface:
    linear-gradient(130deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    rgba(6, 18, 30, .48);
  --ui-surface-strong:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(11, 38, 60, .95), rgba(8, 27, 43, .96));
  --ui-shadow-soft: 0 12px 32px rgba(0,0,0,.22);
  --ui-shadow-strong: 0 18px 44px rgba(0,0,0,.35);
  --ui-inset-highlight: inset 0 1px 0 rgba(255,255,255,.12);
}
html {
  scrollbar-gutter: auto;
  background-color: #0d2b2d;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--ui-font);
  background:
    linear-gradient(rgba(13, 43, 45, 0.8), rgba(13, 43, 45, 0.8)),
    url('./backup/images/home-bg-desktop.jpg');
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
  overflow-y: auto;
}
body[data-screen='home'] {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 211, 118, .16), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(73, 196, 186, .12), transparent 26%),
    linear-gradient(rgba(13, 43, 45, 0.72), rgba(13, 43, 45, 0.76)),
    url('./backup/images/home-bg-desktop.jpg');
  background-size: auto, auto, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
@media (max-width: 1080px) {
  body {
    background:
      linear-gradient(rgba(13, 43, 45, 0.8), rgba(13, 43, 45, 0.8)),
      url('./backup/images/home-bg-tablet.jpg');
    background-size: cover;
    background-position: center;
  }
  body[data-screen='home'] {
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 211, 118, .14), transparent 28%),
      radial-gradient(circle at 82% 8%, rgba(73, 196, 186, .1), transparent 26%),
      linear-gradient(rgba(13, 43, 45, 0.74), rgba(13, 43, 45, 0.78)),
      url('./backup/images/home-bg-tablet.jpg');
    background-size: auto, auto, cover, cover;
    background-position: center, center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  }
}
@media (max-width: 700px) {
  body {
    background:
      linear-gradient(rgba(13, 43, 45, 0.8), rgba(13, 43, 45, 0.8)),
      url('./backup/images/home-bg-mobile.jpg');
    background-size: cover;
    background-position: center;
  }
  body[data-screen='home'] {
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 211, 118, .12), transparent 28%),
      radial-gradient(circle at 82% 8%, rgba(73, 196, 186, .08), transparent 26%),
      linear-gradient(rgba(13, 43, 45, 0.76), rgba(13, 43, 45, 0.82)),
      url('./backup/images/home-bg-mobile.jpg');
    background-size: auto, auto, cover, cover;
    background-position: center, center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  }
}
#app {
  width: min(1320px, 100%);
  min-height: 100dvh;
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding: 10px;
}
body[data-screen='game'] {
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(20, 55, 68, .42), transparent 38%),
    linear-gradient(rgba(6, 20, 32, .74), rgba(11, 34, 49, .84)),
    url('./backup/images/home-bg-desktop.jpg');
  background-color: #061420;
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
body[data-screen='game'] #app {
  touch-action: manipulation;
  height: 100dvh;
  max-height: 100dvh;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  touch-action: manipulation;
}
body[data-screen='game'] .game-shell,
body[data-screen='game'] .main-zone,
body[data-screen='game'] .topbar {
  margin-top: 0 !important;
}
/* Collapsed game log: lock layout to viewport height to avoid page overflow scrollbar. */
body[data-screen='game'][data-log-open='0'] {
  overflow: visible !important;
}
body[data-screen='game'][data-log-open='0'] #app {
  box-sizing: border-box;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}
body[data-screen='game'][data-log-open='0'] .game-shell {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-rows: minmax(0,1fr) auto !important;
  gap: 0 !important;
}
body[data-screen='game'][data-log-open='0'] .main-zone {
  min-height: 0 !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  gap: 0 !important;
}
body[data-screen='game'][data-log-open='0'] .table {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
body[data-screen='game'][data-log-open='0'] .action-zone,
body[data-screen='game'][data-log-open='0'] .action-strip {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed,
body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed .log-side-card.collapsed {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Desktop/tablet: keep expanded/collapsed shell metrics identical to avoid visual jump on log toggle. */
@media (min-width: 861px) {
  body[data-screen='game'][data-log-open='0'] .game-shell {
    grid-template-rows: minmax(0,1fr) !important;
    gap: 8px !important;
  }
  body[data-screen='game'][data-log-open='0'] .main-zone {
    grid-template-rows: auto minmax(0,1fr) auto !important;
    gap: 7px !important;
  }
}
body[data-screen='game'] .game-shell {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
h1, h2, h3, p { margin: 0; }
.game-title {
  font-family: var(--ui-font);
  font-size: clamp(2.2rem, 5.1vw, 3.55rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  color: #f1d084;
  text-shadow:
    -1px -1px 0 rgba(39, 24, 9, .9),
    1px -1px 0 rgba(39, 24, 9, .9),
    -1px 1px 0 rgba(39, 24, 9, .9),
    1px 1px 0 rgba(39, 24, 9, .9);
}
.title-d-lower {
  display: inline-block;
  transform: translateY(.08em);
}
.game-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.room-top-meta {
  display: inline-grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 5px 7px;
  min-width: 88px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6, 17, 12, .34);
  font-size: 10.5px;
  line-height: 1.05;
  color: rgba(232, 242, 237, .88);
  transform: none;
  box-sizing: border-box;
}
.room-top-meta-panel {
  position: absolute;
  right: 58px;
  top: 5px;
  z-index: 8;
}
.room-top-meta.room-top-meta-inline {
  position: static;
  transform: none;
  z-index: auto;
}
@media (max-width: 860px) and (orientation: portrait) {
  .room-top-meta-center {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 8;
  }
}

@media (orientation: landscape) {
  body[data-screen='game'][data-orientation='landscape'] .east .seat-pack,
  body[data-screen='game'][data-orientation='landscape'] .west .seat-pack,
  body[data-screen='game'][data-orientation='landscape'] .north .seat-pack {
    padding-top: 0 !important;
    position: relative !important;
    z-index: 5 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .east .seat-section,
  body[data-screen='game'][data-orientation='landscape'] .west .seat-section,
  body[data-screen='game'][data-orientation='landscape'] .north .seat-section {
    padding-top: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .east .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .west .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .north .opponent-fan {
    margin-top: 46px !important;
  }
}
.room-top-meta .room-top-item {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
}
.room-top-meta .room-top-label {
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(214, 226, 220, .72);
}
.room-top-meta strong {
  font-size: 10.5px;
  font-weight: 800;
  color: #f6d991;
}
.game-logo-block {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.game-logo-block .title-logo-game {
  margin-bottom: -6px;
}
.game-logo-block .game-flag {
  position: absolute;
  left: 78%;
  bottom: 3px;
  transform: translateX(calc(-50% + 64px));
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  pointer-events: none;
}
.game-logo-block .game-flag {
  display: none;
}
.title-logo-picture {
  display: inline-block;
  line-height: 0;
}
.title-logo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.title-logo-home {
  width: min(50vw, 360px);
  transform: scale(1.25);
  transform-origin: left center;
  filter:
    drop-shadow(-.6px 0 0 rgba(0,0,0,.62))
    drop-shadow(.6px 0 0 rgba(0,0,0,.62))
    drop-shadow(0 -.6px 0 rgba(0,0,0,.62))
    drop-shadow(0 .6px 0 rgba(0,0,0,.62));
  overflow: visible;
}
.title-logo-game {
  width: clamp(169.4px, 24.16vw, 354.8px);
  transform: scale(0.85);
  transform-origin: left center;
}
@media (max-width: 860px) {
  .title-logo-game {
    width: clamp(137.1px, 37.12vw, 241.9px);
  }
}
.game-title-sub {
  font-family: var(--ui-font);
  font-size: clamp(.64rem, .94vw, .8rem);
  font-weight: 600;
  letter-spacing: .31em;
  color: rgba(242, 230, 198, .92);
  text-transform: uppercase;
  line-height: 1;
  padding-top: .12em;
  white-space: nowrap;
}
.topbar .game-title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
}
body[data-screen='home'] #app {
  padding: 0 10px 10px !important;
}
.home-topbar {
  margin-top: 0 !important;
}
.home-topbar .game-title {
  font-family: 'Ma Shan Zheng', cursive;
}
.home-topbar .game-title-sub {
  font-family: Garamond, 'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif;
  margin-top: 6px !important;
  display: block;
  letter-spacing: .34em;
  text-shadow:
    -1px -1px 0 rgba(39, 24, 9, .88),
    1px -1px 0 rgba(39, 24, 9, .88),
    -1px 1px 0 rgba(39, 24, 9, .88),
    1px 1px 0 rgba(39, 24, 9, .88);
}
.royal-title-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.royal-home-head {
  position: relative;
}
body[data-screen='game'] .topbar .game-title {
  font-family: 'Ma Shan Zheng', cursive;
}
body[data-screen='game'] .topbar .game-title-sub {
  font-family: Garamond, 'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif;
  display: block;
  margin-top: 6px !important;
  letter-spacing: .34em;
  text-shadow:
    -1px -1px 0 rgba(39, 24, 9, .88),
    1px -1px 0 rgba(39, 24, 9, .88),
    -1px 1px 0 rgba(39, 24, 9, .88),
    1px 1px 0 rgba(39, 24, 9, .88);
}
body[data-screen='game'] .topbar .game-title-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 12px;
  max-width: min(46vw, 520px);
}
.title-logo-game {
  display: block;
  margin-bottom: 0;
}
body[data-screen='game'] .topbar .game-title-sub-right {
  margin-top: 0 !important;
  font-size: clamp(.64rem, .94vw, .8rem);
  line-height: 1;
  letter-spacing: .28em;
  padding-bottom: .1em;
}
.hint { color: var(--muted); font-size: 0.92rem; }
.runtime-diagnostic {
  margin-top: 6px;
  font-size: .72rem;
  color: color-mix(in srgb, var(--muted) 88%, #d9f0ff 12%);
  text-align: center;
  opacity: .92;
}
.runtime-diagnostic-inline {
  text-align: left;
  margin-top: 5px;
}
.control-row, .action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#auto-seq-btn { margin-left: auto; }
button, input, select { font: inherit; }
button {
  border: 0;
  border-radius: var(--ui-radius-sm);
  padding: 7px 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    background-color 160ms ease;
  box-shadow: var(--ui-shadow-soft), var(--ui-inset-highlight);
}
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.28), var(--ui-inset-highlight);
}
button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.24), var(--ui-inset-highlight);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.lang-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8, 24, 36, .45);
  color: #e8f1ff;
  font-weight: 700;
  font-size: .82rem;
  position: relative;
}
.lang-select-input {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-weight: inherit;
  padding: 0;
  cursor: pointer;
  outline: none;
  position: absolute;
  inset: 0;
  opacity: 0;
}
.lang-select-input option {
  color: #0f2230;
}
.lang-icon {
  font-size: .9rem;
  line-height: 1;
  color: currentColor;
}
.lang-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.lang-short {
  letter-spacing: .02em;
  line-height: 1;
}
.lang-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lang-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8, 24, 36, .45);
  color: var(--text);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
}
.lang-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10, 26, 40, .92);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  display: none;
  z-index: 2000;
}
.lang-menu.open .lang-menu-pop {
  display: grid;
  gap: 4px;
}
.lang-menu-item {
  padding: 6px 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #eef6ff;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
}
.lang-menu-item[aria-selected='true'] {
  background: rgba(255, 209, 102, .14);
  color: #ffe7b3;
}
.lang-menu-item:hover {
  background: rgba(255,255,255,.08);
}
button.primary {
  background: linear-gradient(140deg, #ffd166, var(--accent));
  color: #1b232e;
}
button.click-banner {
  position: relative;
  overflow: hidden;
}
button.click-banner::after {
  content: '';
  position: absolute;
  inset: -20% -120% -20% -120%;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
  transform: translateX(-60%);
  animation: clickBannerSweep 520ms ease-out both;
  pointer-events: none;
}
@keyframes clickBannerSweep {
  to { transform: translateX(60%); }
}
button.secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.11));
  color: var(--text);
  border: var(--ui-border-soft);
}
button.accent {
  background: linear-gradient(120deg, #9ff2b5, var(--ok));
  color: #092f16;
}
button.danger {
  background: linear-gradient(180deg, rgba(255,119,149,.94), var(--danger));
  color: #fff;
}
.home-wrap { display: grid; gap: 8px; padding-top: 0; padding-bottom: 0; max-width: 860px; margin: 0 auto; min-height: calc(100dvh - 10px); align-content: center; }
body[data-screen='home'] .home-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-content: center;
  gap: 8px;
}
.royal-home-wrap {
  max-width: 760px;
  position: relative;
  margin-top: 0;
  margin-bottom: 22px;
}
.royal-home-wrap.home-more-settings-open {
  max-width: 980px;
}
.royal-home-panel {
  position: relative;
  margin-bottom: 0;
  border-radius: 18px;
  border: 1px solid rgba(224, 186, 107, .64);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 140, .12), transparent 28%),
    linear-gradient(160deg, rgba(9, 30, 44, .94), rgba(8, 21, 33, .9));
  box-shadow:
    0 0 0 1px rgba(233, 197, 120, .35),
    0 0 20px rgba(230, 184, 86, .24),
    0 0 42px rgba(183, 126, 52, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible;
}
.royal-home-panel::before {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border-radius: 13px;
  border: 1px solid rgba(252, 223, 156, .34);
  box-shadow:
    inset 0 0 12px rgba(246, 213, 139, .12),
    0 0 16px rgba(240, 195, 95, .18);
}
.royal-home-head {
  position: relative;
  padding: 12px 12px 10px;
  overflow: visible;
}
.royal-head-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.royal-head-actions button {
  min-height: auto;
  padding: 2px 6px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(244, 230, 196, .94);
  line-height: 1.1;
}
.royal-head-actions #home-lang-toggle {
  padding: 2px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: .72rem;
}
.royal-head-actions button:hover {
  color: #ffe7b1;
}
.royal-title-wrap {
  display: grid;
  justify-items: center;
  gap: 0;
  margin-top: 2px;
  padding-top: 0;
  overflow: visible;
}
.home-logo-block {
  position: relative;
  display: inline-grid;
  justify-items: center;
  gap: 0;
  overflow: visible;
}
.home-logo-block .title-logo-home {
  margin-bottom: -10px;
  transform: scale(0.88);
  transform-origin: top center;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.18));
}
.home-logo-block .home-flag {
  width: 26px;
  height: 26px;
  display: block;
  margin-top: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.home-logo-block .home-flag {
  display: none;
}
.royal-crown {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -62%);
  width: 44px;
  height: 25px;
  display: inline-block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.36));
  z-index: 2;
}
.royal-crown svg {
  width: 100%;
  height: 100%;
  display: block;
}
.royal-game-title {
  margin-top: 0;
  font-family: 'Ma Shan Zheng', cursive;
  font-size: clamp(2.7rem, 5.8vw, 4.1rem);
}
.royal-game-title-sub {
  font-family: Garamond, 'EB Garamond', 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .31em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 6px !important;
  text-shadow:
    -1px -1px 0 rgba(39, 24, 9, .88),
    1px -1px 0 rgba(39, 24, 9, .88),
    -1px 1px 0 rgba(39, 24, 9, .88),
    1px 1px 0 rgba(39, 24, 9, .88);
  color: rgba(240, 226, 188, .95);
}
.royal-home-body {
  padding: 12px 14px 14px;
  border-radius: 14px;
  margin: 2px 6px 8px;
  border: 1px solid rgba(252, 223, 156, .2);
  background: rgba(8, 29, 44, .34);
}
.royal-home-body .field > span {
  color: rgba(241, 217, 161, .95);
  font-weight: 700;
}
.royal-home-body .home-form-grid .field > span {
  color: rgba(230, 232, 236, .92);
}
.royal-home-body .home-form-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
  gap: 12px;
  margin-top: 10px;
}
.royal-home-body .home-form-left {
  padding-right: 12px;
  border-right: 1px solid rgba(245, 220, 164, .18);
}
.royal-home-body .home-form-right {
  padding-left: 0;
  padding-right: 0;
  border-right: 0;
}
.royal-home-wrap.home-more-settings-open .royal-home-body .home-form-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) minmax(0, .72fr);
  gap: 15px;
}
.royal-home-wrap.home-more-settings-open .royal-home-body .home-form-right {
  padding-right: 12px;
  border-right: 0;
}
.royal-home-body .home-form-more {
  display: none;
  padding-left: 0;
  border-left: 0;
}
.royal-home-wrap.home-more-settings-open .royal-home-body .home-form-more {
  display: grid;
}
.royal-home-body .home-form-col {
  gap: 16px;
}
.royal-home-body .home-section {
  display: grid;
  gap: 13px;
}
.royal-home-body .field-ai-left {
  display: none;
}
.royal-home-body .field-ai-right {
  display: grid;
}
.royal-home-body .home-form-more .field {
  min-width: 0;
}
.royal-home-body .field-cardback-left {
  display: grid;
}
.royal-home-body .field-cardback-right {
  display: none;
}
.royal-home-body .home-section-title {
  margin: 0;
  font-size: .9rem;
  letter-spacing: .08em;
  color: rgba(241, 217, 161, .95);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
}
.royal-home-body .home-profile-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(8, 29, 44, .52);
  border: 1px solid rgba(245, 220, 164, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.royal-home-body .home-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(245, 220, 164, .55);
  background: rgba(10, 24, 34, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.royal-home-body .home-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.royal-home-body .home-profile-fields {
  flex: 1 1 auto;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.royal-home-body .field.field-compact {
  gap: 7px;
}
.royal-home-body .home-audio-voice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.royal-home-body .home-audio-voice-row .field:first-child {
  grid-column: 1 / -1;
}
.royal-home-body .home-audio-voice-row .field + .field {
  margin-top: 0;
}
.royal-home-body .field {
  gap: 8px;
}
.royal-home-body .field + .field {
  margin-top: 2px;
}
.royal-home-body .name-with-google #name-input {
  border-color: rgba(238, 207, 139, .4);
  background: rgba(11, 31, 44, .42);
}
.royal-home-body .toggle-combo,
.royal-home-body .cardback-combo {
  border-color: rgba(238, 207, 139, .28);
}
.royal-home-body .gender-image-combo {
  background: transparent !important;
}
.royal-home-body .difficulty-slider-wrap {
  display: grid;
  gap: 6px;
  padding: 8px 10px 9px;
  border-radius: 10px;
  border: 0;
  background: rgba(10, 30, 42, .42);
  box-shadow: none;
  --difficulty-index: 1;
}
.royal-home-body .difficulty-slider {
  width: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  border: 0;
  height: 28px;
  outline: 0;
  box-shadow: none;
}
.royal-home-body .difficulty-slider:focus {
  outline: none;
}
.royal-home-body .difficulty-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(245, 210, 142, .84) 0,
    rgba(245, 210, 142, .84) calc(var(--difficulty-index, 1) * 50%),
    rgba(255,255,255,.12) calc(var(--difficulty-index, 1) * 50%),
    rgba(255,255,255,.12) 100%);
}
.royal-home-body .difficulty-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.royal-home-body .difficulty-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 210, 142, .84);
}
.royal-home-body .difficulty-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  border: 1px solid rgba(247, 222, 167, .72);
  background: linear-gradient(180deg, #fff7dc, #f0c96b);
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.royal-home-body .difficulty-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(247, 222, 167, .72);
  background: linear-gradient(180deg, #fff7dc, #f0c96b);
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.royal-home-body .difficulty-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  line-height: 1.1;
  color: rgba(247, 231, 190, .9);
  user-select: none;
}
.royal-home-body .setting-slider-wrap {
  display: grid;
  gap: 6px;
  padding: 8px 10px 9px;
  border-radius: 10px;
  border: 0;
  background: rgba(10, 30, 42, .42);
  box-shadow: none;
  --setting-index: 0;
}
.royal-home-body .setting-slider {
  width: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  border: 0;
  height: 28px;
  outline: 0;
  box-shadow: none;
}
.royal-home-body .setting-slider:focus {
  outline: none;
}
.royal-home-body .setting-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(245, 210, 142, .84) 0,
    rgba(245, 210, 142, .84) calc(var(--setting-index, 0) * 100%),
    rgba(255,255,255,.12) calc(var(--setting-index, 0) * 100%),
    rgba(255,255,255,.12) 100%);
}
.royal-home-body .setting-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.royal-home-body .setting-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 210, 142, .84);
}
.royal-home-body .setting-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  border: 1px solid rgba(247, 222, 167, .72);
  background: linear-gradient(180deg, #fff7dc, #f0c96b);
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.royal-home-body .setting-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(247, 222, 167, .72);
  background: linear-gradient(180deg, #fff7dc, #f0c96b);
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.royal-home-body .setting-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  line-height: 1.1;
  color: rgba(247, 231, 190, .9);
  user-select: none;
}
.royal-home-body .home-more-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 2px 0 0;
  padding: 0;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(241, 217, 161, .95);
  text-align: left;
  cursor: pointer;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: none;
  filter: none;
  background-image: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
  -webkit-text-fill-color: currentColor;
  justify-self: start;
  appearance: none;
}
.royal-home-body .more-settings-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}
.royal-home-body .more-settings-icon-down {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1d9a1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.royal-home-body .more-settings-icon-up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1d9a1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}
.royal-home-body .more-settings-panel {
  display: grid;
  gap: 10px;
}
.royal-home-body .more-settings-panel[hidden] {
  display: none !important;
}
.royal-home-body #gender-combo {
  background: rgba(10, 30, 42, .42);
  border: 1px solid rgba(236, 204, 134, .42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  flex-wrap: nowrap;
}
.royal-home-body #gender-combo .toggle-btn {
  min-height: 32px;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(247, 231, 190, .95);
  white-space: nowrap;
}
.royal-home-body #gender-combo .toggle-btn.active {
  background: linear-gradient(130deg, rgba(245, 210, 142, .26), rgba(191, 138, 63, .28));
  border-color: rgba(247, 222, 167, .72);
}
.royal-home-body #gender-combo .gender-avatar-btn {
  padding: 0;
  min-width: 0;
  width: auto;
  min-height: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.royal-home-body #gender-combo .gender-avatar-ring {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid rgba(234, 208, 120, .35);
  box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  background: linear-gradient(180deg, #dfe3e6, #f5f6f7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.royal-home-body #gender-combo .gender-avatar-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}
.royal-home-body #gender-combo .gender-avatar-btn.active .gender-avatar-ring {
  border-color: #f5d07a;
  box-shadow: 0 8px 16px rgba(0,0,0,.3), 0 0 0 2px rgba(255, 209, 102, .6);
}
.royal-start-btn {
  min-width: 176px;
  border: 1px solid rgba(167, 115, 37, .64);
  color: #2d1a04 !important;
  background: linear-gradient(135deg, #fbe3a4, #d7aa53);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.royal-home-body .home-start-row {
  position: relative;
  justify-content: center;
  margin-top: 14px;
  display: flex;
  justify-items: center;
  align-items: center;
  min-height: 38px;
  gap: 10px;
  flex-wrap: wrap;
}
.royal-start-btn,
.royal-room-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  line-height: 1.05;
}
.home-btn-main {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}
.home-btn-subtitle {
  font-size: .7rem;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0;
  opacity: .82;
}
.room-create-hint {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8, 20, 32, .55);
  color: rgba(233, 244, 255, .86);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .2px;
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.royal-room-btn {
  min-width: 140px;
}
.room-create-card {
  position: relative;
}
.room-create-card .room-create-hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8, 20, 32, .55);
  color: rgba(233, 244, 255, .9);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.royal-home-body .home-start-row .hint {
  position: static;
  transform: none;
  text-align: left;
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
  max-width: none;
  flex: 0 0 auto;
  margin-left: 6px;
}
.home-room-row {
  justify-content: center;
  margin-top: 6px;
}
.home-room-row button {
  min-width: 120px;
}
.room-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(3, 12, 22, .62);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 10px;
  opacity: 0;
  animation: modalFade .16s ease-out both;
}
.room-invite-overlay .room-backdrop {
  position: absolute;
  inset: 0;
}
.room-invite-overlay .room-card {
  z-index: 1;
}
.room-card {
  width: min(520px, calc(100vw - 24px));
  border-radius: calc(var(--ui-radius-lg) + 2px);
  border: 1px solid rgba(255, 226, 171, .2);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 140, .1), transparent 30%),
    var(--ui-surface-strong);
  box-shadow: var(--ui-shadow-strong), var(--ui-inset-highlight);
  padding: 16px;
  display: grid;
  gap: 12px;
  color: var(--text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.room-corner-icon {
  font-size: 1rem;
  line-height: 1;
  opacity: .9;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  pointer-events: none;
}
.room-corner-icon-reception svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: #f1d084;
}
.room-card-icon .room-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.room-card h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: .01em;
}
.room-head {
  display: grid;
  gap: 6px;
}
.room-lobby-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.room-lobby-head-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.room-lobby-intro {
  display: grid;
  gap: 2px;
  align-items: start;
  margin-top: 2px;
}
.room-lobby-intro h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.15;
}
.room-lobby-intro .room-share-subtitle {
  margin: 0;
  line-height: 1.35;
}
.room-expiry-top {
  margin: 0;
  flex: 0 0 auto;
  align-self: flex-start;
  justify-self: end;
}
.room-status-text {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}
.room-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.room-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .9rem;
  white-space: nowrap;
}
.room-code strong {
  letter-spacing: .24em;
  color: #f6e0a5;
}
.room-host-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--muted);
}
.room-host-line strong {
  color: #f6e0a5;
  font-weight: 700;
}
.room-id-center {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: #eaf6ee;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  flex-wrap: wrap;
}
.room-id-center-with-qr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(108px, 132px);
  align-items: stretch;
  gap: 12px;
  padding: 8px 10px;
}
.room-lobby-main {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}
.room-lobby-copy-block {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.room-lobby-copy-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(236, 248, 241, .86);
  text-transform: none;
}
.room-lobby-copy-subtitle {
  margin: 0;
  font-size: .74rem;
  line-height: 1.35;
  color: rgba(236, 248, 241, .72);
  max-width: 34ch;
}
.room-roomid-box {
  display: grid;
  place-items: start;
  min-width: 0;
  gap: 8px;
}
.room-roomid-stack {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.room-id-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.2), transparent);
}
.room-lobby-qr-box {
  display: grid;
  place-items: center;
  align-content: start;
  min-width: 0;
  gap: 8px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  border: 0;
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}
.room-lobby-qr-box-inner {
  display: grid;
  place-items: center;
  gap: 8px;
  min-width: 0;
}
.room-lobby-qr {
  display: block;
  width: 100%;
  max-width: 104px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #fff;
}
.room-lobby-qr-placeholder {
  width: 100%;
  min-height: 76px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: .72rem;
  padding: 6px;
}
.room-lobby-qr-caption {
  font-size: .7rem;
  line-height: 1.2;
  color: rgba(236, 248, 241, .8);
  text-align: center;
  white-space: nowrap;
}
.room-qr-zoom-open {
  overflow: hidden !important;
}
.room-qr-zoom-backdrop {
  position: fixed;
  inset: 0;
  z-index: 14050;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 10, 18, .78);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 120ms ease;
}
.room-qr-zoom-backdrop.active {
  opacity: 1;
}
.room-qr-zoom-frame {
  all: unset;
  box-sizing: border-box;
  width: min(88vw, 420px);
  max-height: min(88vh, 420px);
  padding: 14px;
  border-radius: 14px;
  background: rgba(10, 28, 42, .92);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 34px rgba(0,0,0,.4);
  display: grid;
  place-items: center;
  cursor: zoom-out;
}
.room-qr-zoom-image {
  display: block;
  width: min(100%, 360px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}
.room-id-stack {
  display: contents;
}
.room-share-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.room-code {
  letter-spacing: .28em;
  text-transform: uppercase;
}
.room-id-center button {
  letter-spacing: normal;
}
.room-copy-icon {
  font-size: 1em;
  line-height: 1;
  opacity: 1;
}
.room-share-link-btn,
.room-share-action-btn,
.room-share-copy-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.room-expiry-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.room-expiry-icon {
  font-size: .92em;
  line-height: 1;
  opacity: .92;
}
.room-lobby-copy-block .room-code {
  display: block;
  font-size: 1.72rem;
  line-height: 1;
  letter-spacing: .2em;
  text-align: left;
  width: 100%;
}
.room-lobby-copy-block,
.room-lobby-copy-block .room-code {
  background: transparent;
}
.room-share-link-btn {
  background: linear-gradient(180deg, #35bb67, #1f8f4a) !important;
  border-color: rgba(140, 236, 168, .55) !important;
  color: #f1fff4 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.room-share-action-btn {
  min-width: 0;
  min-height: auto;
  padding-inline: 12px;
}
.room-share-link-btn:hover,
.room-share-link-btn:focus-visible {
  background: linear-gradient(180deg, #35bb67, #1f8f4a) !important;
  border-color: rgba(140, 236, 168, .55) !important;
  color: #f1fff4 !important;
}
.room-share-copy-btn,
.room-share-action-btn {
  min-width: 0;
  min-height: auto;
}
.room-share-copy-btn {
  border: var(--ui-border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.11));
  color: var(--text) !important;
  box-shadow: none;
}
.room-share-copy-btn:hover,
.room-share-copy-btn:focus-visible {
  border: var(--ui-border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.14));
  color: var(--text) !important;
}
.room-share-icon {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
  display: inline-block;
}
.room-share-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(82, 210, 115, .1), transparent 30%),
    rgba(7, 20, 30, .58);
}
.room-share-panel-simple {
  gap: 10px;
}
.room-invite-card {
  width: min(600px, calc(100vw - 24px));
}
.room-share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.room-share-head h3 {
  margin: 0;
  font-size: 1.02rem;
}
.room-share-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .84rem;
}
.room-share-panel-simple .room-share-head {
  margin-bottom: 2px;
}
.room-share-grid-simple {
  display: grid;
  grid-template-columns: minmax(144px, 176px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.room-share-left,
.room-share-right {
  display: grid;
  gap: 10px;
}
.room-share-hero {
  display: grid;
  grid-template-columns: minmax(102px, 112px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.room-share-qr-box {
  display: grid;
  place-items: center;
  touch-action: manipulation;
  cursor: zoom-in;
}
.room-lobby-qr-box {
  touch-action: manipulation;
  cursor: zoom-in;
}
.room-share-panel-simple .room-share-qr-box {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 0;
}
.room-share-panel-simple .room-invite-qr {
  max-width: 100%;
  width: min(176px, 100%);
}
.room-share-code-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
}
.room-share-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.room-share-code-label,
.room-share-message-label,
.room-share-link-label {
  font-size: .78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.room-share-code {
  font-size: 1.02rem;
  letter-spacing: .18em;
  color: #f6e0a5;
  white-space: nowrap;
}
.room-share-grid {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.room-share-qr-col {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: start;
}
.room-share-qr {
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 240px;
}
.room-invite-qr {
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #fff;
}
.room-invite-qr-zoom-open {
  overflow: hidden;
}
.room-invite-qr-zoom-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12040;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(3, 12, 22, .72);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.room-invite-qr-zoom-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.room-invite-qr-zoom-ghost {
  position: fixed;
  z-index: 12041;
  left: 50%;
  top: 50%;
  width: min(88vw, 420px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(0,0,0,.42);
  object-fit: contain;
  transition: transform 120ms ease, opacity 120ms ease;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.room-invite-qr-zoom-ghost.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.room-share-qr-copy {
  min-width: 0;
}
.room-invite-placeholder {
  width: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: .86rem;
  padding: 12px;
}
.room-share-copy {
  display: grid;
  gap: 10px;
}
.room-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.room-share-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.room-share-inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  flex-wrap: nowrap;
}
.room-share-main-btn {
  width: auto;
  flex: 0 1 180px;
  min-height: 50px;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.room-share-link-icon {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
  display: block;
}
.room-share-icon-row {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.room-share-mini-btn {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  width: 44px;
}
.room-share-mini-icon {
  font-size: 22px;
  line-height: 1;
  display: block;
}
.room-share-mini-btn#room-share-whatsapp .room-share-mini-icon {
  color: #25d366;
}
.room-share-mini-btn#room-share-wechat .room-share-mini-icon {
  color: #6ee7a8;
}
.room-share-mini-btn#room-share-download .room-share-mini-icon {
  color: #60a5fa;
}
.room-share-qr-copy {
  display: block;
}
.room-share-qr-copy button {
  width: 100%;
}
.room-share-message-box,
.room-share-link-box {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.room-share-message {
  color: var(--text);
  line-height: 1.4;
  font-size: .92rem;
}
.room-share-link {
  overflow-wrap: anywhere;
  color: #9fd7ff;
  word-break: break-word;
  font-size: .9rem;
}
.room-share-link-hint {
  color: var(--muted);
  font-size: .78rem;
}
.room-expiry-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  font-size: .85rem;
  color: var(--muted);
}
.room-expiry-reset-btn {
  border: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(82, 210, 115, .16);
  color: #e8fff0;
  cursor: pointer;
  font: inherit;
}
.room-expiry-reset-btn strong {
  display: inline-block;
  min-width: 2.6em;
}
.room-status-inline {
  font-size: .82rem;
  color: #f4fbff;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  flex: 1 1 100%;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(12, 28, 42, .55);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.room-privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: .85rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.room-privacy-row button {
  min-width: 120px;
}
.room-lobby-card {
  width: min(640px, calc(100vw - 24px));
}
.lobby-table {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 140, .08), transparent 28%),
    rgba(8, 20, 30, .92);
  border: 1px solid rgba(130, 200, 160, .35);
  overflow: hidden;
}
.lobby-table::before {
  content: none;
}
.room-lobby-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 140, .08), transparent 28%),
    rgba(8, 20, 30, .92);
  border: 1px solid rgba(130, 200, 160, .35);
}
.room-lobby-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.room-lobby-row.empty {
  border-style: dashed;
  color: var(--muted);
}
.room-lobby-seat {
  font-size: .76rem;
  color: var(--muted);
}
.room-lobby-name {
  font-weight: 700;
}
.lobby-seat {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 110px;
  padding: 10px 10px 11px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(9, 24, 36, .6);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.lobby-seat-button {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lobby-seat-button:hover,
.lobby-seat-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(246, 224, 165, .45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    rgba(9, 24, 36, .66);
  box-shadow:
    inset 0 0 0 1px rgba(246, 224, 165, .18),
    0 8px 18px rgba(0,0,0,.18);
}
.lobby-seat.ready {
  border-color: rgba(82, 210, 115, .55);
  background: rgba(82, 210, 115, .1);
}
.lobby-seat.host {
  border-color: rgba(246, 224, 165, .55);
  box-shadow: 0 0 0 1px rgba(246, 224, 165, .25) inset;
}
.lobby-seat.offline {
  opacity: .65;
  filter: grayscale(.28);
}
.lobby-seat.empty {
  border-style: dashed;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
}
.lobby-seat-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.88);
  object-fit: cover;
  background: rgba(0,0,0,.35);
}
.lobby-seat-avatar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 0 4px;
  line-height: 0;
}
.lobby-seat-avatar-anchor {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.lobby-seat-host-badge {
  position: absolute;
  left: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: none;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: #ff4d4d;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.lobby-seat-host-badge-text {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246, 224, 165, .98), rgba(214, 167, 73, .98));
  border: 1px solid rgba(214, 167, 73, .75);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  color: #2a1d00;
  font-size: .58rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
.lobby-seat-avatar.empty {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  border-style: dashed;
  color: #d2def5;
  background: rgba(255,255,255,.06);
}
.lobby-seat-avatar {
  display: block;
}
.lobby-seat-name {
  font-weight: 700;
  font-size: .86rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.lobby-seat-mini .lobby-seat-name {
  font-size: .74rem;
}
.lobby-seat-status {
  font-size: .74rem;
  color: var(--muted);
}
.lobby-seat-label {
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .06em;
}
.lobby-seat-ready {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  padding: 4px 10px;
  font-size: .72rem;
  color: var(--text);
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.lobby-seat-ready.active {
  border-color: rgba(82, 210, 115, .6);
  background: rgba(82, 210, 115, .2);
  color: #eafff2;
}
.room-list {
  display: grid;
  gap: 6px;
}
.room-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .9rem;
}
.room-player-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.room-player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  object-fit: cover;
  background: rgba(0,0,0,.25);
}
.room-player.ready {
  border-color: rgba(82, 210, 115, .5);
  background: rgba(82, 210, 115, .12);
}
.room-player.offline {
  opacity: .65;
  filter: grayscale(.35);
}
.room-player.host {
  border-color: rgba(246, 224, 165, .6);
  box-shadow: 0 0 0 1px rgba(246, 224, 165, .22) inset;
}
.room-host-tag {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: .68rem;
  white-space: nowrap;
  letter-spacing: .08em;
  font-weight: 700;
  color: #2a1d00;
  background: linear-gradient(180deg, rgba(246, 224, 165, .95), rgba(214, 167, 73, .95));
  border: 1px solid rgba(214, 167, 73, .7);
}
.room-status {
  font-size: .82rem;
  color: var(--muted);
}
.room-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.room-join-card .room-actions {
  justify-content: flex-end;
}
.room-start-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  min-width: 112px;
  padding-inline: 16px;
}
.room-start-main {
  font-weight: 900;
  font-size: .98rem;
}
.room-start-subtitle {
  font-size: .7rem;
  line-height: 1;
  opacity: .9;
  white-space: nowrap;
}
.room-join-actions {
  justify-content: flex-start;
}
.room-input {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 8px 10px;
}
.room-code-field {
  gap: 10px;
  padding: 12px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 54, 84, .78), rgba(11, 38, 62, .84));
  border: 1px solid rgba(74, 162, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.room-code-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.room-code-field > span {
  color: #f5fbff;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.room-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.room-code-row-segmented {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  padding: 0;
}
.room-code-segments {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  pointer-events: none;
}
.room-code-box {
  min-height: 52px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(74, 162, 255, .72);
  background: linear-gradient(180deg, rgba(18, 40, 65, .92), rgba(11, 28, 48, .94));
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.34);
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  text-align: center;
  cursor: text;
  outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.56rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(0,0,0,.14);
  pointer-events: none;
}
.room-code-box.filled {
  color: #eef7ff;
  border-color: rgba(74, 162, 255, .96);
  background: linear-gradient(180deg, rgba(23, 49, 78, .98), rgba(12, 31, 53, .98));
}
.room-code-box:focus {
  border-color: rgba(130, 208, 255, .98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 2px rgba(110, 193, 255, .22);
}
.room-code-box::selection {
  background: rgba(110, 193, 255, .28);
  color: #fff;
}
.room-code-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(236, 248, 241, .82);
  font-size: .72rem;
  line-height: 1.2;
  letter-spacing: .01em;
}
.room-code-hint i {
  color: #6ad98e;
  font-size: .86rem;
}
.room-code-hint strong {
  color: #72e18f;
}
.room-code-extra {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.room-code-field .room-create-section {
  margin-bottom: 0;
}
.room-code-field .room-create-section .room-card-join-btn {
  width: 100%;
}
.room-code-input-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .02;
  cursor: text;
  caret-color: #8ecbff;
  color: transparent;
  background: transparent;
  border: 0;
  padding: 0 118px 0 0;
  z-index: 3;
  pointer-events: auto;
}
.room-code-input-overlay::placeholder {
  color: transparent;
}
.room-code-input-overlay:focus-visible {
  outline: none;
}
.room-paste-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 10px;
  flex: 0 0 auto;
}
.room-paste-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.room-join-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 1px;
  color: rgba(255,255,255,.54);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.room-join-divider::before,
.room-join-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
}
.room-join-divider span {
  padding: 0 2px;
}
.room-active-block {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 140, .08), transparent 28%),
    rgba(7, 22, 34, .42);
}
.room-active-field .room-input {
  width: 100%;
}
.room-active-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .85rem;
  color: var(--muted);
  padding-bottom: 2px;
}
.room-active-head > span:first-child {
  font-weight: 700;
  color: #f2dfae;
}
.room-active-hidden {
  margin-left: auto;
  font-size: .78rem;
  color: rgba(255,255,255,0.7);
}
.room-active-grid {
  display: grid;
  gap: 12px;
  max-height: 260px;
  overflow: auto;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding-right: 2px;
  scrollbar-gutter: stable;
}
.room-create-section {
  margin-bottom: 2px;
}
.room-create-wide {
  width: auto;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  padding: 0 18px;
  max-width: 100%;
}
.room-create-wide .room-create-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.room-create-wide > span:last-child {
  margin-left: auto;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  letter-spacing: .08em;
  font-weight: 800;
}
.room-active-grid::-webkit-scrollbar {
  width: 6px;
}
.room-active-grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22);
  border-radius: 999px;
}
.room-active-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
.room-join-card .room-active-block {
  overflow: hidden;
}
.room-active-card {
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  outline: none;
  font: inherit;
  text-align: center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 220, 140, .08), transparent 28%),
    rgba(9, 24, 36, .62);
  color: var(--text);
  padding: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  height: 100%;
  position: relative;
}
.room-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.room-seat-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.room-seat-mini {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  font-size: .82rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.room-seat-mini.filled img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.room-seat-mini.vacant {
  border-style: dashed;
}
.room-card-join-btn {
  min-width: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.room-card-join-inline {
  margin-left: auto;
}
#room-create-card {
  background: linear-gradient(180deg, #ffbe5c 0%, #e07a16 100%);
  color: #000 !important;
  border-color: rgba(255, 208, 138, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 2px 8px rgba(0,0,0,.22);
}
#room-create-card > span {
  color: #000 !important;
  -webkit-text-fill-color: #000;
}
#room-create-card .room-inline-icon,
#room-create-card svg {
  fill: #000 !important;
}
#room-create-card:hover,
#room-create-card:focus-visible {
  background: linear-gradient(180deg, #ffc875 0%, #e88a24 100%);
  color: #000 !important;
  border-color: rgba(255, 216, 154, .6);
}
#room-create-card:hover > span,
#room-create-card:focus-visible > span {
  color: #000 !important;
  -webkit-text-fill-color: #000;
}
.room-join-top-btn {
  min-width: 116px;
  position: relative;
  z-index: 3;
}
.room-code-row button {
  white-space: nowrap;
}
.room-create-card {
  border-style: dashed;
  align-content: start;
  grid-template-rows: auto 1fr;
}
.room-create-card .room-active-code {
  text-align: center;
}
.room-create-simple {
  justify-items: center;
  align-content: center;
}
.room-create-callout {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(8, 20, 30, .98);
  color: #f8fbff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow:
    0 8px 16px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.08);
  white-space: nowrap;
}
.room-create-callout::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 12px;
  height: 12px;
  background: rgba(8, 20, 30, .98);
  border-right: 1px solid rgba(255,255,255,.28);
  border-bottom: 1px solid rgba(255,255,255,.28);
  transform: translate(-50%, -40%) rotate(45deg);
  box-shadow: 4px 4px 10px rgba(0,0,0,.18);
}
.room-create-card .room-active-code {
  font-size: .95rem;
}
.room-create-icon {
  margin-top: 0;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  width: 100%;
  height: 100%;
  transform: translateY(-6px);
}
.room-create-emoji {
  font-size: 3rem;
  line-height: 1;
}
.room-create-svg {
  width: 44px;
  height: 44px;
  fill: #f0d08d;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.room-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.room-inline-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.room-active-refresh-icon {
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E");
}
.room-active-card:hover,
.room-active-card:focus-visible,
.room-active-card.active {
  transform: translateY(-1px);
  border-color: rgba(246, 224, 165, .5);
  background: rgba(28, 46, 58, .72);
  box-shadow:
    inset 0 0 0 1px rgba(246, 224, 165, .34),
    0 10px 20px rgba(0,0,0,.26);
}
.room-active-card:disabled,
.room-active-card-private {
  cursor: not-allowed;
  opacity: .7;
  transform: none;
}
.room-active-card:disabled:hover,
.room-active-card:disabled.active {
  transform: none;
  border-color: rgba(255,255,255,.14);
  background: rgba(9, 24, 36, .62);
}
.room-active-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.room-active-table-full {
  gap: 4px;
  min-height: 0;
}
.room-active-card-full {
  text-align: left;
}
.room-active-list-item {
  text-align: left;
  align-content: start;
}
.room-active-table-full .lobby-seat-mini {
  min-height: 0;
  padding: 4px;
  aspect-ratio: 1.6;
}
.room-active-table-full .lobby-seat-mini .lobby-seat-avatar {
  width: 40px;
  height: 40px;
}
.room-active-seat {
  width: 100%;
  aspect-ratio: 1.6;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.2);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6px;
}
.room-active-seat img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}
.room-active-seat.empty {
  border-style: dashed;
  color: #d2def5;
  font-weight: 700;
  font-size: 1rem;
}
.room-active-empty {
  color: var(--muted);
  text-align: left;
  display: grid;
  gap: 8px;
  justify-items: stretch;
  border-style: dashed;
  align-content: start;
  pointer-events: none;
  cursor: default;
  opacity: .7;
}
.room-active-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .24em;
  flex-wrap: wrap;
}
.room-active-code-text {
  letter-spacing: .24em;
}
.room-active-status-line {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #e9f4ff;
  background: rgba(12, 28, 42, .55);
  border: 1px solid rgba(255,255,255,.22);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: none;
  width: fit-content;
}
.room-active-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.room-active-refresh-label {
  font-weight: 700;
}
.room-active-refresh-icon {
  width: 18px;
  height: 18px;
}
.room-active-hint {
  font-size: .7rem;
  color: var(--muted);
  text-transform: none;
  text-align: left;
}
.room-active-info {
  display: grid;
  gap: 4px;
  font-size: .74rem;
  color: var(--muted);
}
.room-active-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.room-active-host {
  font-weight: 700;
  color: #e9d8a8;
}
.room-active-names {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-active-count {
  margin-left: auto;
  text-align: right;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #d6e6f5;
  font-size: .7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.room-active-count-icon {
  width: .85rem;
  height: .85rem;
  opacity: .92;
  fill: currentColor;
  flex: 0 0 auto;
}
.room-active-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 164, 92, .38);
  background: rgba(255, 164, 92, .12);
  color: #ffd9b3;
  font-size: .7rem;
  font-weight: 700;
}
.room-active-status-icon {
  flex: 0 0 auto;
  line-height: 1;
}
.room-active-status-starting {
  border-color: rgba(122, 196, 255, .34);
  background: rgba(122, 196, 255, .11);
  color: #d8eeff;
}
.room-active-status-private {
  border-color: rgba(208, 184, 124, .34);
  background: rgba(208, 184, 124, .11);
  color: #f3e0b0;
}
.room-active-private-inline {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(124, 192, 255, .38);
  background: rgba(124, 192, 255, .12);
  color: #cfe9ff;
  font-size: .7rem;
  font-weight: 700;
}
.room-active-private {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(124, 192, 255, .38);
  background: rgba(124, 192, 255, .12);
  color: #cfe9ff;
  font-size: .7rem;
  font-weight: 700;
}
.room-status-pill {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 209, 102, .45);
  background: rgba(255, 209, 102, .16);
  color: #ffd166;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.room-error {
  color: #ffb3b3;
}
.home-room-panel {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(8, 29, 44, .48);
  border: 1px solid rgba(245, 220, 164, .16);
}
.hero { padding: 0 clamp(15px, 3.7vw, 24px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.22); background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.03)); }
.hero-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .74rem; background: rgba(255,255,255,.14); margin-bottom: 7px; }
.hero h1 { font-size: clamp(1.5rem, 4.8vw, 2.5rem); }
.hero p { margin-top: 0; color: var(--muted); }
.hero.home-title {
  padding: 6px 10px;
  border-radius: 12px;
}
.hero.home-title h2 {
  font-size: clamp(.95rem, 2.4vw, 1.25rem);
  font-weight: 700;
}
.home-panel {
  padding: 12px;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  border: var(--ui-border-soft);
  box-shadow: var(--ui-shadow-soft), var(--ui-inset-highlight);
  display: grid;
  gap: 10px;
}
.opponent-panel {
  padding: 12px;
}
.opponent-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.opponent-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 214, 128, .08), transparent 28%),
    linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(8, 24, 38, .44);
  padding: 13px;
  display: grid;
  gap: 9px;
}
.opponent-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.opponent-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.92);
  object-fit: cover;
  background: var(--avatar-bg);
  flex: 0 0 auto;
}
.opponent-meta {
  display: grid;
  gap: 2px;
}
.opponent-name {
  font-weight: 700;
  color: #f5f7fb;
}
.opponent-sub {
  font-size: .78rem;
  color: var(--muted);
}
.opponent-gender-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.opponent-gender-symbol svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.opponent-gender-symbol.gender-male {
  color: #7cc4ff;
  border-color: rgba(124, 196, 255, .42);
  background: rgba(124, 196, 255, .14);
}
.opponent-gender-symbol.gender-female {
  color: #ff9fcf;
  border-color: rgba(255, 159, 207, .45);
  background: rgba(255, 159, 207, .14);
}
.opponent-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.opponent-info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(9, 20, 28, .35);
  border: 1px solid var(--line-a);
  color: rgba(232, 243, 242, .96);
  font-size: .74rem;
  line-height: 1.2;
}
.opponent-info-item.opponent-info-hobbies {
  flex: 1 1 100%;
  border-radius: 10px;
  padding: 6px 8px;
}
.opponent-info-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(173, 196, 212, .9);
}
.opponent-info-value {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(232, 243, 242, .98);
  line-height: 1.25;
}
.opponent-motto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 186, 186, .6);
  background:
    linear-gradient(135deg, rgba(255, 186, 186, .14), rgba(255, 255, 255, .02)),
    rgba(12, 18, 26, .58);
  box-shadow: 0 0 12px rgba(255, 161, 161, .16);
}
.opponent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.opponent-tag {
  font-size: .7rem;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(245, 241, 232, .92);
}
.opponent-tag strong {
  font-weight: 700;
  margin-right: 4px;
}
.opponent-bio {
  display: grid;
  gap: 4px;
  font-size: .78rem;
  color: rgba(235, 238, 244, .92);
}
.opponent-bio.opponent-bio-block {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8, 22, 34, .44);
}
.opponent-bio strong {
  font-weight: 700;
  margin-right: 6px;
  color: #f5f7fb;
}
.opponent-bio p {
  margin: 6px 0 0;
  color: rgba(228, 236, 244, .92);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .opponent-info-item.opponent-info-hobbies {
    flex: 1 1 100%;
  }
  .opponent-sub {
    line-height: 1;
  }
  .opponent-gender-symbol {
    width: 24px;
    height: 24px;
    font-size: 1rem;
  }
}
.field-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.config-audio-voice-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home-form-col {
  display: grid;
  align-content: start;
  gap: 9px;
}
.home-start-row {
  grid-column: 1 / -1;
  margin-top: 10px;
}
.field { display: grid; gap: 5px; }
.field span { font-size: .82rem; color: var(--muted); }
.field.wide { grid-column: 1 / -1; }
.gender-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  padding: 6px;
}
.gender-picker-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.gender-picker-head {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 8px;
  align-items: center;
}
.gender-preview-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.gender-preview-meta strong {
  font-size: .84rem;
  color: #f4f9fb;
  line-height: 1.1;
}
.gender-preview-meta span {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.1;
}
.gender-preview {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  object-fit: cover;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.gender-select {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.14);
  color: #f4f9fb;
  padding: 7px 9px;
}
.sound-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.sound-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sound-switch-track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  position: relative;
  transition: background-color .2s ease, border-color .2s ease;
}
.sound-switch-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  left: 2px;
  top: 2px;
  background: #f4f9fb;
  transition: transform .2s ease;
}
.sound-switch input:checked + .sound-switch-track {
  background: color-mix(in srgb, var(--ok) 45%, rgba(255,255,255,.18));
  border-color: color-mix(in srgb, var(--ok) 70%, white 30%);
}
.sound-switch input:checked + .sound-switch-track::after {
  transform: translateX(18px);
}
.sound-switch-label {
  font-size: .86rem;
  color: var(--text);
}
 .option-combo { display: flex; gap: 6px; flex-wrap: wrap; }
 .combo-btn {
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
 }
 .combo-btn.active {
  border-color: color-mix(in srgb, var(--accent) 62%, white 38%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
  background: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.08));
 }
.toggle-combo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 3px;
  width: fit-content;
  max-width: 100%;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(140deg, rgba(8, 28, 42, .72), rgba(8, 24, 38, .52));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.toggle-combo .toggle-btn {
  justify-content: center;
  text-align: center;
  min-height: 36px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.03);
  color: color-mix(in srgb, var(--text) 90%, #cde3ea 10%);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform 120ms ease;
}
.toggle-combo .toggle-btn:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.toggle-combo .toggle-btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 58%, white 42%);
  box-shadow: 0 0 0 2px rgba(244, 162, 89, .25);
}
.toggle-combo .toggle-btn.active {
  border-color: color-mix(in srgb, var(--accent) 66%, white 34%);
  background: linear-gradient(130deg, color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,.08)), rgba(255,255,255,.16));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent);
  color: #fef8ef;
}
.sound-toggle-btn {
  width: 48px;
  min-width: 48px;
  padding: 8px;
}
.sound-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
 .combo-back-preview {
  width: 64px;
  height: 90px;
  border-radius: 4px;
  object-fit: fill;
  image-rendering: auto;
  filter: saturate(1.06) contrast(1.04);
 }
.cardback-combo {
  gap: 2px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.cardback-carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.cardback-carousel .cardback-combo {
  overflow: hidden;
  padding: 2px 0;
  touch-action: pan-x;
  width: 100%;
  max-width: calc((clamp(44px, 10vw, 64px) + 14px) * 5);
  margin: 0 auto;
}
.cardback-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  will-change: transform;
}
.cardback-carousel .cardback-combo::-webkit-scrollbar {
  display: none;
}
.cardback-carousel .carousel-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(12, 32, 45, .6);
  color: rgba(238, 246, 250, .9);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cardback-carousel .carousel-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.cardback-combo .combo-back-preview {
  width: clamp(44px, 10vw, 64px);
  height: clamp(62px, 14vw, 90px);
  border-radius: 6px;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 120ms ease;
}
.cardback-combo .combo-btn {
  padding: 4px 5px;
  gap: 2px;
  display: grid;
  justify-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 120ms ease;
}
.cardback-combo .back-label {
  font-size: .68rem;
  color: var(--muted);
  line-height: 1;
}
.cardback-combo .combo-btn.active {
  box-shadow: none;
  border-radius: 8px;
}
.cardback-combo .combo-btn.active .combo-back-preview {
  box-shadow: 0 0 0 2px rgba(255, 209, 102, .55);
  border-radius: 6px;
  transform: scale(1.15);
  transform-origin: center;
}
.cardback-zoom-open {
  cursor: zoom-out;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
.cardback-zoom-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 16, .22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 120ms ease;
}
.cardback-zoom-backdrop.active {
  opacity: 1;
}
.cardback-zoom-ghost {
  position: fixed;
  left: var(--zoom-left);
  top: var(--zoom-top);
  width: var(--zoom-width);
  height: var(--zoom-height);
  border-radius: 14px;
  overflow: hidden;
  object-fit: contain;
  clip-path: inset(0 round 14px);
  image-rendering: auto;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transform: translate3d(0,0,0);
  transition: left 140ms ease, top 140ms ease, width 140ms ease, height 140ms ease, transform 140ms ease;
}
.cardback-zoom-ghost.active {
  left: 50%;
  top: 50%;
  width: var(--zoom-target-width);
  height: var(--zoom-target-height);
  transform: translate(-50%,-50%);
}
.cardback-zoom-controls {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 120ms ease;
}
.cardback-zoom-controls.active {
  opacity: 1;
}
.cardback-zoom-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(8, 20, 30, .66);
  color: #f4f9fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  padding: 0;
}
.cardback-zoom-nav-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}
.cardback-zoom-nav.prev { left: max(14px, env(safe-area-inset-left)); }
.cardback-zoom-nav.next { right: max(14px, env(safe-area-inset-right)); }
.cardback-zoom-nav:hover,
.cardback-zoom-nav:active,
.cardback-zoom-nav:focus-visible {
  transform: translateY(-50%);
}
 .theme-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
 }
 .theme-ocean { background: #15808f; }
 .theme-emerald { background: #168f6a; }
 .theme-sunset { background: #d06b3a; }
 .theme-slate { background: #4e647f; }
 .theme-aurora { background: #6a5acd; }
 .theme-sand { background: #c99f63; }
 .theme-cyber { background: #23b6d7; }
.theme-preview-btn {
  background: var(--theme-preview, rgba(255,255,255,.08));
  color: #f4f9fb;
  border-color: rgba(255,255,255,.30);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  min-height: 34px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 4px 10px rgba(0,0,0,.24);
}
.theme-preview-btn.active {
  border-color: #ffd166;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 0 1px rgba(255, 209, 102, .55),
    0 8px 16px rgba(0,0,0,.28);
  transform: translateY(-1px);
}
input, select { border: 1px solid rgba(255,255,255,.28); border-radius: 11px; padding: 8px 10px; background: rgba(255,255,255,.1); color: var(--text); }
.home-panel .field select {
  background: rgba(255, 255, 255, 0.17);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.24);
}
.home-panel select option {
  color: var(--text);
  background: var(--bg-b);
}
.home-panel select option:checked {
  color: #13202a;
  background: var(--accent);
}
.leaderboard-panel select {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line-a);
  font-weight: 700;
}
.leaderboard-panel select option {
  color: var(--text);
  background: var(--bg-b);
}
.leaderboard-panel select option:checked {
  color: #13202a;
  background: var(--accent);
}
.lobby-panel {
  border-radius: var(--ui-radius-md);
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: var(--ui-border-soft);
  box-shadow: var(--ui-shadow-soft), var(--ui-inset-highlight);
  display: grid;
  gap: 7px;
}
.legal-mini {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: grid;
  gap: 4px;
}
.legal-mini-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bmac-cta {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  justify-items: start;
}
.bmac-cta .bmac-msg {
  color: rgba(230, 222, 190, .92);
  font-size: .76rem;
  line-height: 1.35;
  text-align: left;
}
.bmac-cta .bmac-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bmac-cta .bmac-button {
  width: min(170px, 60vw);
  height: auto;
  display: block;
}
.bmac-cta .bmac-qr {
  width: min(110px, 38vw);
  height: auto;
  display: block;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
}
.legal-mini-link {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  font-size: .67rem;
  line-height: 1.1;
  color: rgba(226, 236, 240, .86);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.legal-mini-link:hover,
.legal-mini-link.active {
  color: #ffd166;
  box-shadow: none;
  transform: none;
}
.legal-mini-sep {
  font-size: .64rem;
  color: rgba(200,214,222,.7);
  line-height: 1;
}
.legal-mini-panels {
  display: grid;
  justify-items: stretch;
}
.legal-mini-panel {
  display: none;
  font-size: .7rem;
  line-height: 1.32;
  color: rgba(220, 234, 240, .88);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 6px 7px;
}
.legal-mini-panel.open {
  display: block;
}
.legal-mini-panel a {
  color: #ffd166;
}
.royal-home-wrap .legal-mini {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.royal-home-wrap .home-build-version {
  position: fixed;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 6;
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(242, 224, 178, .5);
  user-select: text;
  pointer-events: none;
}
.royal-home-wrap .legal-mini-links {
  gap: 6px;
}
.royal-home-wrap .legal-mini-link {
  font-size: .74rem;
  letter-spacing: .02em;
  color: rgba(242, 224, 178, .9);
  text-decoration: none;
}
.royal-home-wrap .legal-mini-link:hover,
.royal-home-wrap .legal-mini-link.active {
  color: #ffe1a0;
}
.royal-home-wrap .legal-mini-sep {
  color: rgba(214, 187, 126, .72);
}
.royal-home-wrap .legal-mini-panel {
  font-size: .72rem;
  line-height: 1.4;
  color: rgba(241, 228, 200, .9);
  background: rgba(10, 30, 44, .32);
  border: 0;
  border-radius: 10px;
  padding: 8px 9px;
}
.royal-home-wrap .legal-mini-panel a {
  color: #ffd58a;
}
.server-room-panel { gap: 8px; }
.server-room-grid { grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); }
.lobby-list { display: flex; gap: 7px; flex-wrap: wrap; }
.pill { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .77rem; }
.leaderboard-panel .control-row { align-items: end; }
.leaderboard-panel .lb-head { justify-content: space-between; align-items: center; }
.leaderboard-panel .lb-head #lb-refresh { margin-left: auto; }
.leaderboard-panel .lb-head .field { margin-bottom: 0; }
.lb-sheet .leaderboard-panel {
  background: transparent;
  border: 0;
  padding: 0;
}
.lb-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.lb-list { display: grid; gap: 6px; }
.lb-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background:
    linear-gradient(140deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
    var(--panel);
  border: 1px solid var(--line-b);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.lb-row:hover,
.lb-row:focus-within {
  transform: translateY(-1px);
  border-color: rgba(255, 214, 128, .34);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.lb-row-top,
.lb-row-second,
.lb-row-third {
  background: var(--panel);
  border-color: var(--line-b);
  box-shadow: none;
}
.lb-row-top .lb-rank,
.lb-row-second .lb-rank,
.lb-row-third .lb-rank {
  width: auto;
  height: auto;
  padding-top: 0;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.lb-row-top .lb-medal {
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
.lb-row-second .lb-medal,
.lb-row-third .lb-medal {
  font-size: 1.18rem;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.32));
}
.lb-row-top .lb-name {
  font-weight: 800;
}
.lb-row-second .lb-name,
.lb-row-third .lb-name {
  font-weight: 700;
}
.lb-rank {
  color: var(--muted);
  font-weight: 800;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 36px;
}
.lb-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(255,255,255,0) 42%), rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 4px 10px rgba(0,0,0,.35);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}
.lb-medal.gold {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #ffe07a, #f4a645);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 0 12px rgba(255, 212, 102, .6),
    0 6px 14px rgba(0,0,0,.38);
  animation: medalPulse 2.2s ease-in-out infinite;
}
.lb-medal.silver {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #eef2f6, #aeb8c6);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.3),
    0 0 10px rgba(210, 220, 235, .55),
    0 6px 14px rgba(0,0,0,.38);
}
.lb-medal.bronze {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #f0b07a, #b86b3a);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 0 10px rgba(228, 157, 98, .5),
    0 6px 14px rgba(0,0,0,.38);
}
@keyframes medalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.lb-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.lb-name-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lb-name-pack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  flex: 0 0 auto;
  background: rgba(12, 18, 20, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lb-avatar.gold {
  border-color: #ffd36a;
  box-shadow:
    0 0 0 2px rgba(255, 214, 102, .55),
    0 0 18px rgba(255, 214, 102, .65),
    0 0 28px rgba(255, 214, 102, .35),
    0 4px 10px rgba(0,0,0,.28);
}
.lb-avatar.silver { border-color: #d9e2ef; box-shadow: 0 0 0 2px rgba(210, 220, 235, .45), 0 0 12px rgba(210, 220, 235, .45), 0 4px 10px rgba(0,0,0,.28); }
.lb-avatar.bronze { border-color: #f0b07a; box-shadow: 0 0 0 2px rgba(228, 157, 98, .45), 0 0 12px rgba(228, 157, 98, .45), 0 4px 10px rgba(0,0,0,.28); }
.lb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  font-size: 1.9rem;
  line-height: 1;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.lb-badge.gold { filter: drop-shadow(0 0 8px rgba(255, 214, 102, .7)) drop-shadow(0 0 16px rgba(255, 214, 102, .45)); }
.lb-badge.silver { filter: drop-shadow(0 0 8px rgba(210, 220, 235, .7)) drop-shadow(0 0 14px rgba(210, 220, 235, .4)); }
.lb-badge.bronze { filter: drop-shadow(0 0 8px rgba(228, 157, 98, .7)) drop-shadow(0 0 14px rgba(228, 157, 98, .4)); }
.lb-avatar.gold::after,
.lb-avatar.silver::after,
.lb-avatar.bronze::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 214, 102, .9), rgba(255,255,255,.1), rgba(255, 214, 102, .9));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: lbRingSpin 2.6s linear infinite;
  pointer-events: none;
}
.lb-avatar.silver::after {
  background: conic-gradient(from 0deg, rgba(210, 220, 235, .95), rgba(255,255,255,.12), rgba(210, 220, 235, .95));
}
.lb-avatar.bronze::after {
  background: conic-gradient(from 0deg, rgba(228, 157, 98, .95), rgba(255,255,255,.12), rgba(228, 157, 98, .95));
}
@keyframes lbRingSpin { to { transform: rotate(360deg); } }
.lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.lb-name { font-weight: 700; color: #f1f6fb; letter-spacing: .01em; }
.lb-stat { font-weight: 800; color: #ffd166; font-size: .98rem; }
.lb-subline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  color: rgba(213, 224, 236, .78);
  font-size: .74rem;
  letter-spacing: .01em;
}
.lb-subline span:last-child { text-align: right; }
.intro-panel h3 { margin: 0; font-size: 1rem; }
.intro-panel p { margin: 0; color: var(--muted); line-height: 1.4; }
.intro-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 12px;
  opacity: 0;
  animation: modalFade .16s ease-out both;
}
.coach-marks-modal {
  z-index: 2147483647 !important;
}
.legal-modal {
  display: none;
}
.legal-modal.open {
  display: grid;
}
.legal-modal-body {
  font-size: .8rem;
  line-height: 1.45;
  color: rgba(230, 238, 244, .9);
  text-align: left;
}
.legal-modal-body h4 {
  margin: 0 0 6px;
  font-size: .86rem;
  letter-spacing: .01em;
  color: rgba(248, 242, 220, .98);
}
.legal-modal-body p {
  margin: 0 0 8px;
}
.legal-modal-body ul,
.legal-modal-body ol {
  margin: 0 0 8px 18px;
  padding: 0;
}
.legal-modal-body li {
  margin: 0 0 6px;
}
.legal-modal-body a {
  color: #ffd166;
}
.legal-modal-body .legal-about-grid {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
}
.legal-modal-body .legal-about-main {
  flex: 1 1 0;
  min-width: 0;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.legal-modal-body .legal-about-side {
  flex: 0 0 min(280px, 40%);
  padding-left: 12px;
}
@media (max-width: 520px) {
  .legal-modal-body .legal-about-grid {
    flex-direction: column;
  }
  .legal-modal-body .legal-about-main {
    padding-right: 0;
    border-right: 0;
  }
  .legal-modal-body .legal-about-side {
    padding-left: 0;
    border-left: 0;
    margin-left: 0;
  }
}
.legal-about-side .bmac-cta {
  margin-top: 0;
}
.intro-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(5, 14, 24, .62);
  backdrop-filter: blur(3px);
}
.intro-sheet {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: min(86dvh, 820px);
  overflow: auto;
  border-radius: var(--ui-radius-lg);
  border: 1px solid rgba(255, 226, 171, .18);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 218, 148, .08), transparent 30%),
    var(--ui-surface-strong);
  padding: 14px;
  box-shadow: var(--ui-shadow-strong), var(--ui-inset-highlight);
}
.intro-sheet,
.opponent-profile-sheet,
.lb-sheet {
  animation: modalPop .18s ease-out;
  transform-origin: center;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@keyframes modalPop {
  0% { transform: translateY(10px) scale(.98); opacity: .7; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes modalFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.intro-sheet,
.intro-sheet *,
.lb-sheet,
.lb-sheet * {
  font-family: var(--ui-font);
}
.intro-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.intro-head h3 { margin: 0; font-size: 1.08rem; }
.title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: -1px;
  line-height: 1;
  vertical-align: middle;
}
.title-icon-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: -1px;
  font-size: 1rem;
  line-height: 1;
}
.title-icon-log {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ec0ff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}
.title-icon-guide {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ec0ff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15.5H6.5A2.5 2.5 0 0 0 4 21V5.5Z'/%3E%3Cpath d='M8 7h8M8 11h7'/%3E%3C/svg%3E");
}
.title-icon-leaderboard {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd166' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v3a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M17 6h2a2 2 0 0 1 0 4h-2'/%3E%3Cpath d='M7 6H5a2 2 0 0 0 0 4h2'/%3E%3C/svg%3E");
}
.title-icon-score {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ec0ff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M8 8h2M14 8h2M8 12h8M8 16h8'/%3E%3C/svg%3E");
}
.title-icon-settings {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ec0ff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2 2 0 1 1-2.83 2.83l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1.1 1.63V21a2 2 0 1 1-4 0v-.06a1.8 1.8 0 0 0-1.1-1.63 1.8 1.8 0 0 0-1.98.36l-.04.04a2 2 0 1 1-2.83-2.83l.04-.04A1.8 1.8 0 0 0 4.6 15a1.8 1.8 0 0 0-1.63-1.1H2a2 2 0 1 1 0-4h.06a1.8 1.8 0 0 0 1.63-1.1 1.8 1.8 0 0 0-.36-1.98l-.04-.04a2 2 0 1 1 2.83-2.83l.04.04A1.8 1.8 0 0 0 8 4.6a1.8 1.8 0 0 0 1.1-1.63V3a2 2 0 1 1 4 0v.06a1.8 1.8 0 0 0 1.1 1.63 1.8 1.8 0 0 0 1.98-.36l.04-.04a2 2 0 1 1 2.83 2.83l-.04.04A1.8 1.8 0 0 0 19.4 9a1.8 1.8 0 0 0 1.63 1.1H22a2 2 0 1 1 0 4h-.06a1.8 1.8 0 0 0-1.63 1.1Z'/%3E%3C/svg%3E");
}
.title-icon-player {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ec0ff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.6-4 6.4-6 8-6s6.4 2 8 6'/%3E%3C/svg%3E");
}
.title-icon-namecard {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ec0ff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.2'/%3E%3Cpath d='M8 9h4.5M8 12h7M8 15h5'/%3E%3Cpath d='M17.2 10.5c1.15 0 2.1.93 2.1 2.08s-.95 2.08-2.1 2.08-2.1-.93-2.1-2.08.95-2.08 2.1-2.08Z'/%3E%3C/svg%3E");
}
.title-icon-result {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fd4ff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M7 15V9'/%3E%3Cpath d='M12 15V5'/%3E%3Cpath d='M17 15v-3'/%3E%3C/svg%3E");
}
.title-icon-congrats {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc857' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.2L18.5 8l-3.3 3.1.8 4.6-4-2.3-4 2.3.8-4.6L5.5 8l4.6-.8L12 3Z'/%3E%3C/svg%3E");
}
.intro-head p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.opponent-profile-sheet {
  width: min(660px, 100%);
  max-height: min(72dvh, 560px);
  padding: 12px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
}
.opponent-profile-sheet .intro-head {
  margin-bottom: 6px;
}
.opponent-profile-sheet .title-with-icon {
  align-items: center;
  flex-wrap: wrap;
}
.opponent-profile-sheet .opponent-gender-icon {
  align-self: center;
  vertical-align: middle;
}
.opponent-profile-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow: auto;
  min-height: 0;
}
.opponent-profile-header {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 214, 128, .08), transparent 28%),
    linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(8, 24, 38, .42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.opponent-profile-avatar-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  justify-self: center;
}
.opponent-profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--line-a);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  object-fit: cover;
}
.opponent-profile-sheet .opponent-profile-confidential-stamp {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  z-index: 6;
  width: 82%;
  box-sizing: border-box;
  padding: 2.2% 4.5%;
  border-radius: 7px;
  border: 5px solid rgba(203, 35, 35, .95);
  background: rgba(158, 24, 24, .9);
  color: rgba(255, 232, 232, .98);
  font-size: 240%;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 220, .14),
    0 14px 28px rgba(0, 0, 0, .28);
}
.opponent-profile-header-text {
  display: grid;
  gap: 8px;
}
.opponent-gender-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.opponent-gender-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.opponent-gender-icon.gender-male {
  color: #7cc4ff;
  border-color: rgba(124, 196, 255, .42);
  background: rgba(124, 196, 255, .14);
}
.opponent-gender-icon.gender-female {
  color: #ff9fcf;
  border-color: rgba(255, 159, 207, .45);
  background: rgba(255, 159, 207, .14);
}
.opponent-gender-icon.gender-female svg {
  transform: translateX(1px);
}
.opponent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(9, 20, 28, .45);
  border: 1px solid var(--line-a);
  color: rgba(232, 243, 242, .95);
  font-size: .78rem;
  font-weight: 600;
}
.opponent-profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.opponent-chip-icon {
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.opponent-chip-icon.zodiac {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd166' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E");
}
.opponent-chip-icon.dob {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fd4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
}
.opponent-chip-icon.hobby {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376e39c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 4.5 5 .7-3.6 3.4.9 5-4.5-2.4-4.5 2.4.9-5L4.8 8.2l5-.7L12 3Z'/%3E%3C/svg%3E");
}
.opponent-chip-icon.motto {
  color: #ff9fcf;
  background: transparent;
  background-image: none;
  padding: 0;
  box-sizing: border-box;
}
.opponent-chip-icon.motto svg {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  left: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.opponent-profile-motto {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 186, 186, .6);
  background:
    linear-gradient(135deg, rgba(255, 186, 186, .16), rgba(255, 255, 255, .02)),
    rgba(12, 18, 26, .6);
  box-shadow: 0 0 16px rgba(255, 161, 161, .18);
}
.opponent-motto-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 214, 214, .9);
}
.opponent-motto-text {
  font-size: .98rem;
  font-weight: 700;
  color: #ffe6e6;
}
.opponent-profile-details {
  display: grid;
  gap: 6px;
  font-size: .92rem;
  color: rgba(232, 243, 242, .96);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8, 22, 34, .44);
}
.opponent-profile-details strong {
  color: #f1f6fb;
  margin-right: 6px;
}
.opponent-profile-summary {
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(161, 186, 202, .9);
}
.opponent-profile-paragraphs {
  display: grid;
  gap: 8px;
  line-height: 1.45;
}
.opponent-profile-paragraphs p {
  margin: 0;
}
.opponent-card .opponent-profile-paragraphs {
  font-size: .78rem;
}
@media (max-width: 720px) {
  .opponent-profile-header {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}
.intro-sheet button.secondary,
.lb-sheet button.secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)),
    rgba(255, 214, 128, .18);
  border: 1px solid rgba(255, 226, 171, .22);
  color: #f7f1df;
  box-shadow: none;
}
.intro-sheet button.secondary:hover,
.lb-sheet button.secondary:hover {
  filter: brightness(1.05);
  border-color: rgba(255, 226, 171, .3);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.coach-marks-sheet {
  width: min(960px, 100%);
  max-height: min(86dvh, 820px);
  padding: 14px 4px 12px 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 218, 148, .08), transparent 30%),
    var(--ui-surface-strong);
  border: 1px solid rgba(255, 226, 171, .18);
  box-shadow: var(--ui-shadow-strong), var(--ui-inset-highlight);
}
.coach-marks-sheet .intro-head {
  margin-bottom: 8px;
  padding-bottom: 0;
}
.coach-marks-block {
  gap: 7px;
  padding: 8px;
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--line-b);
  background:
    linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--ui-inset-highlight);
}
.gesture-help-stage-wrap {
  display: contents;
}
ul.gesture-help-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "handUp handRight handDown"
    "handLeft cardUp .";
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 0;
  padding-left: 0;
  margin: 0;
  list-style: none;
  align-items: stretch;
}
.coach-gesture-item {
  display: grid;
  grid-template-areas:
    "icon body";
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 8px;
  justify-items: stretch;
  align-items: center;
  padding: 7px 8px;
  border-radius: 14px;
  border: 1px solid var(--line-b);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)),
    rgba(6, 20, 33, .7);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 8px 18px rgba(0,0,0,.18);
  height: 100%;
}
.gesture-help-item-handUp {
  grid-area: handUp;
}
.gesture-help-item-handRight {
  grid-area: handRight;
}
.gesture-help-item-handDown {
  grid-area: handDown;
}
.gesture-help-item-handLeft {
  grid-area: handLeft;
}
.gesture-help-item-cardUp {
  grid-area: cardUp;
}
.gesture-help-label {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: 0;
  color: rgba(229,244,255,.96);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
}
.gesture-help-icon {
  grid-area: icon;
  width: 56px;
  height: 56px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 14px rgba(0,0,0,.12);
}
.gesture-help-body {
  grid-area: body;
  display: grid;
  gap: 6px;
  align-content: center;
  min-width: 0;
}
.gesture-help-title-row,
.gesture-help-action-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
.gesture-help-title-row {
  justify-content: flex-start;
}
.gesture-help-action-row {
  justify-content: flex-start;
  gap: 6px;
}
.gesture-icon-image,
.coach-gesture-icon img {
  width: 92%;
  height: 92%;
  display: block;
  object-fit: contain;
}
.gesture-help-copy {
  min-width: 0;
  color: rgba(232,243,242,.92);
  font-size: .8rem;
  line-height: 1.45;
}
.gesture-help-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: end;
  white-space: nowrap;
  min-height: 26px;
  padding: 2px 7px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 8px rgba(0,0,0,.32);
  font-weight: 800;
  font-size: .72rem;
  position: relative;
  overflow: visible;
  transition:
    transform 160ms var(--playful-pop),
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
}
.gesture-help-action-btn .gesture-help-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
.gesture-help-action-btn:hover,
.gesture-help-action-btn:focus-visible {
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 8px rgba(0,0,0,.32) !important;
  filter: none !important;
}
.gesture-help-action-btn:active {
  transform: none !important;
}
.gesture-help-action-btn-handUp {
  background: linear-gradient(140deg, rgba(20, 58, 86, .92), rgba(8, 30, 50, .9));
  color: #e9f4ff;
}
.gesture-help-action-btn-handRight {
  background: linear-gradient(180deg, #4e87ef, #2d63d6);
  color: #f5f8ff;
  min-width: 0;
}
.gesture-help-action-btn-handDown {
  background: linear-gradient(180deg, rgba(90,110,122,.88), rgba(56,73,86,.92));
  color: #e9f1f6;
}
.gesture-help-action-btn-handLeft {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.11));
  color: var(--text);
}
.gesture-help-action-btn-cardUp {
  background: linear-gradient(140deg, #ffd166, var(--accent));
  color: #1b232e;
}
.gesture-help-action-btn-handUp .gesture-help-action-icon {
  width: 18px;
  height: 18px;
}
.gesture-help-action-btn-handUp .gesture-help-action-icon .title-icon-log {
  width: 18px;
  height: 18px;
}
.gesture-help-action-btn-handUp .gesture-help-action-text {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
}
.gesture-help-action-btn-handRight,
.gesture-help-action-btn-cardUp {
  min-height: 26px;
}
.gesture-help-action-btn-handRight .gesture-help-action-icon,
.gesture-help-action-btn-cardUp .gesture-help-action-icon {
  font-size: 1rem;
}
.gesture-help-action-btn-handDown,
.gesture-help-action-btn-handLeft {
  min-width: 28px;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(90,110,122,.88), rgba(56,73,86,.92));
  color: #e9f1f6;
}
.gesture-help-action-btn-handDown .gesture-help-action-text,
.gesture-help-action-btn-handLeft .gesture-help-action-text {
  display: none;
}
.gesture-help-action-btn-handDown .gesture-help-action-icon,
.gesture-help-action-btn-handLeft .gesture-help-action-icon {
  width: 16px;
  height: 16px;
}
.gesture-help-action-btn-handLeft {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.11));
  color: var(--text);
}
.gesture-help-action-btn-handDown {
  background: linear-gradient(180deg, rgba(90,110,122,.88), rgba(56,73,86,.92));
  color: #e9f1f6;
}
.gesture-help-action-text {
  line-height: 1;
}
.gesture-help-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(233, 242, 245, .9);
  font-size: .92rem;
}
.gesture-help-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #d7bf93;
  font-size: 1.2rem;
  line-height: 1;
}
.coach-marks-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.coach-close-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #f7f1df;
}
.coach-close-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro-block {
  display: grid;
  gap: 7px;
  padding: 8px;
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--line-b);
  background:
    linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--ui-inset-highlight);
}
.intro-block h4 { margin: 0; font-size: .95rem; }
.intro-block p { margin: 0; color: var(--muted); line-height: 1.45; }
.intro-home-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 214, 128, .08), transparent 28%),
    rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.14);
}
.intro-home-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: block;
  flex: 0 0 auto;
  box-shadow: 0 6px 14px rgba(0,0,0,.24);
}
.intro-home-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.intro-home-meta strong {
  font-size: .9rem;
  color: #f4f9fb;
}
.intro-home-meta span {
  color: var(--muted);
  font-size: .76rem;
}
.intro-block ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 3px;
}
.coach-marks-block ul.gesture-help-list {
  padding-left: 0;
  padding-inline-start: 0;
  margin-left: 0;
  margin-inline-start: 0;
}
@media (max-width: 760px) {
  .gesture-help-list {
    grid-template-columns: 1fr;
    grid-template-areas:
      "handUp"
      "handRight"
      "handDown"
      "handLeft"
      "cardUp";
    grid-auto-rows: auto;
    gap: 8px;
    padding-left: 0;
  }
  .coach-gesture-item {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 6px 7px;
    height: 100%;
  }
  .gesture-help-icon {
    width: 56px;
    height: 56px;
  }
  .gesture-help-label {
    font-size: .86rem;
  }
  .gesture-help-copy {
    font-size: .76rem;
  }
  .gesture-help-action-btn {
    gap: 4px;
    justify-self: start;
  }
  .gesture-help-action-btn-handRight {
    min-width: 0;
  }
  .gesture-help-action-btn-handUp .gesture-help-action-text {
    font-size: .68rem;
  }
  .gesture-help-action-btn-handDown,
  .gesture-help-action-btn-handLeft {
    min-width: 28px;
    padding: 2px 5px;
  }
  .gesture-help-footer {
    font-size: .82rem;
    line-height: 1.4;
  }
}
.intro-hand-list {
  display: grid;
  gap: 2px;
}
.intro-hand-row {
  display: grid;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-b);
}
.intro-hand-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.intro-hand-meta strong {
  font-size: .88rem;
}
.intro-hand-meta span {
  color: var(--muted);
  font-size: .78rem;
}
.intro-hand-cards {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.intro-hand-cards .card.mini {
  width: var(--guide-card-w, var(--card-w));
  height: var(--guide-card-h, var(--card-h));
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
.intro-hand-cards .card.mini + .card.mini {
  margin-left: calc(var(--guide-card-w, var(--card-w)) * -0.5);
}
.intro-hand-cards .card.mini .card-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  border-radius: 0;
}
.intro-inline-card-art {
  display: block;
  width: var(--guide-card-w, var(--card-w));
  height: var(--guide-card-h, var(--card-h));
  object-fit: contain;
  object-position: top;
  margin: 0 2px;
  border-radius: 0;
}
.intro-image {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.score-guide-table-wrap {
  overflow-x: visible;
}
.score-guide-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 0;
  table-layout: auto;
  font-size: .84rem;
}
.score-guide-table th:nth-child(2),
.score-guide-table td:nth-child(2) {
  width: 56px;
  white-space: nowrap;
  text-align: center;
}
.score-guide-table th:nth-child(1),
.score-guide-table td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
}
.score-guide-table td:nth-child(1) .score-guide-cards {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 3px;
}
.score-guide-table th,
.score-guide-table td {
  padding: 7px 8px;
  border: 1px solid var(--line-b);
  text-align: left;
  overflow-wrap: anywhere;
}
.score-guide-table th {
  color: #f4f9fb;
  background: rgba(255,255,255,.09);
  font-weight: 800;
}
.score-guide-table td {
  color: var(--muted);
  background: rgba(255,255,255,.04);
}
.score-guide-row {
  display: grid;
  gap: 6px;
}
.score-guide-cards {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.score-guide-card-art {
  display: block;
  width: var(--guide-card-w, var(--card-w));
  height: var(--guide-card-h, var(--card-h));
  object-fit: contain;
  object-position: top;
  border-radius: 0;
}
.score-guide-card-art + .score-guide-card-art {
  margin-left: calc(var(--guide-card-w, var(--card-w)) * -0.5);
}
.suit-red {
  color: #d9252a;
}
.suit-black {
  color: #111111;
}
.score-guide-stack {
  color: #ffd166 !important;
  font-weight: 700;
}
.score-guide-heading,
.score-guide-summary {
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
#google-inline { display: inline-flex; align-items: center; min-height: 36px; }
.name-with-google {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.home-profile-fields .name-with-google {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(238, 207, 139, .4);
  background: rgba(11, 31, 44, .42);
  border-radius: 10px;
  padding: 4px;
}
.name-with-google #name-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 8px;
}
#google-name-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  width: auto;
  justify-content: flex-start;
  flex: 0 0 auto;
  padding-left: 6px;
  border-left: 1px solid rgba(238, 207, 139, .28);
}
#google-login-slot {
  display: inline-flex;
  align-items: center;
  width: auto;
  justify-content: flex-end;
}
#google-name-inline .auth-status {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
}
#google-name-inline .auth-status-warning {
  color: #f59e0b;
}
#google-name-inline .auth-provider-badge {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  color: #f3f4f6;
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
  flex: 0 0 auto;
}
#google-name-inline .auth-provider-badge svg {
  width: 16px;
  height: 16px;
  display: block;
}
#google-name-inline .auth-provider-badge.auth-provider-google {
  background: #fff;
  border-color: rgba(210, 215, 224, .92);
  color: inherit;
}
#google-name-inline .auth-provider-badge.auth-provider-google svg {
  width: 18px;
  height: 18px;
}
#google-name-inline .auth-provider-badge.auth-provider-apple {
  background: linear-gradient(145deg, rgba(34, 34, 36, .9), rgba(10, 10, 12, .88));
  border-color: rgba(245,245,247,.45);
  color: #f3f4f6;
}
#google-name-inline .auth-btn {
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  color: var(--text);
  border-radius: 4px;
  min-height: 32px;
  height: 32px;
  padding: 5px 10px;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
}
#google-name-inline .auth-btn-signout {
  width: 140px;
  justify-content: center;
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
#google-name-inline .auth-btn-retry {
  width: 140px;
  justify-content: center;
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
#google-name-inline .auth-btn-google {
  background: linear-gradient(145deg, rgba(66, 133, 244, .28), rgba(66, 133, 244, .12));
  border-color: rgba(66, 133, 244, .52);
}
#google-name-inline .auth-btn-apple {
  background: linear-gradient(145deg, rgba(245, 245, 247, .24), rgba(245, 245, 247, .1));
  border-color: rgba(245,245,247,.45);
}
#google-name-inline .auth-btn-facebook {
  background: linear-gradient(145deg, rgba(24, 119, 242, .3), rgba(24, 119, 242, .12));
  border-color: rgba(24,119,242,.55);
}

.game-shell {
  display: grid;
  grid-template-columns: minmax(0,1fr) 286px;
  gap: 8px;
  height: 100%;
  min-height: 0;
}
@media (max-width: 1400px) {
  .game-shell {
    grid-template-columns: minmax(0,1fr) clamp(180px, 24vw, 248px);
  }
}
.main-zone {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  gap: 7px;
  min-height: 0;
  overflow: visible;
}
.topbar {
  padding: 9px 11px;
  border-radius: var(--ui-radius-md);
  border: var(--ui-border-soft);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft), var(--ui-inset-highlight);
  display: flex;
  justify-content: space-between;
  gap: 9px;
  align-items: center;
}
.topbar > div:first-child {
  flex: 1 1 auto !important;
  max-width: none !important;
}
.topbar h2 { font-size: clamp(.95rem, 2.4vw, 1.25rem); }
.topbar-right { display: grid; gap: 8px; justify-items: end; }
.topbar-right {
  width: auto !important;
  min-width: 0 !important;
  justify-items: end !important;
}
.topbar-right .control-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
body[data-screen='game'] .topbar,
body[data-screen='game'] .topbar-right,
body[data-screen='game'] .topbar-right .control-row,
body[data-screen='game'] .topbar-right .control-row button {
  overflow: visible !important;
}
.topbar {
  padding: 6px 10px;
  border-radius: 12px;
  gap: 8px;
}
.topbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.topbar > div:first-child .hint {
  margin: 0;
  font-size: .83rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-a), transparent 10%);
  transform: rotate(var(--table-tilt));
  transition: transform .22s ease;
  background:
    radial-gradient(circle at 50% 50%, rgba(147, 205, 255, .08), transparent 62%),
    linear-gradient(160deg, var(--table-a), var(--table-b) 58%, var(--table-c));
  display: grid;
  grid-template-columns: minmax(82px, .52fr) minmax(0, 2.45fr) minmax(82px, .52fr);
  grid-template-rows: minmax(76px, auto) minmax(0, 1fr);
  grid-template-areas:
    "west north east"
    "west center east";
  gap: 6px;
  align-items: center;
  justify-items: center;
  padding: 6px;
}
.table-inventory-decor {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: none;
}
.table-inventory-item {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
  user-select: none;
}
.table-inventory-lemontea {
  left: clamp(-8px, -1vw, -2px);
  bottom: clamp(42px, 6.6vmin, 72px);
  width: clamp(96px, 16.5vmin, 128px);
}
.table-inventory-eggtart {
  right: clamp(-10px, -1vw, -2px);
  top: clamp(4px, 1vmin, 12px);
  width: clamp(102px, 16.5vmin, 146px);
}
.table-inventory-milktea {
  right: clamp(-14px, -1.4vw, -3px);
  bottom: clamp(2px, 1vmin, 14px);
  width: clamp(116px, 19.5vmin, 162px);
}
@media (min-width: 861px) {
  body[data-screen='game'] .table {
    overflow: visible;
  }
}
@media (max-width: 860px) and (orientation: portrait) {
  .table-inventory-lemontea {
    left: -8px;
    bottom: clamp(66px, 9.8vmin, 102px);
    width: clamp(104px, 20.2vmin, 138px);
  }
  .table-inventory-eggtart {
    left: auto;
    right: 4px;
    top: 6px;
    width: clamp(102px, 18.8vmin, 134px);
  }
  .table-inventory-milktea {
    left: auto;
    right: 2px;
    bottom: clamp(22px, 3.9vmin, 38px);
    width: clamp(112px, 20.5vmin, 146px);
  }
}
.seat {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 12px;
}
.seat.active .name { color: inherit; }
.seat.active {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}
.seat-section {
  width: 100%;
  border: 1px solid var(--player-color, rgba(126, 177, 215, .6));
  border-radius: 8px;
  background: linear-gradient(160deg, var(--seat-a), var(--seat-b));
  padding: 5px;
  box-shadow: inset 0 0 0 1px rgba(8, 25, 42, .65);
}
.seat.north .seat-section,
.seat.west .seat-section,
.seat.east .seat-section {
  overflow: hidden;
  padding: 6px 6px 8px;
}
.self-section {
  min-width: 160px;
  text-align: center;
}
.name { font-weight: 700; font-size: 1.06rem; text-shadow: 0 1px 2px rgba(0,0,0,.4); z-index: 2; }
.count { font-size: .9rem; color: var(--muted); z-index: 2; }
.south { grid-area: south; }
.north { grid-area: north; justify-self: stretch; align-self: stretch; }
.east { grid-area: east; }
.west { grid-area: west; justify-self: stretch; align-self: stretch; }
.east { grid-area: east; justify-self: stretch; align-self: stretch; }
.west, .east, .north, .south { min-width: 0; min-height: 0; overflow: visible; }
.north { overflow: visible; }
.east, .west {
  border: 1px solid var(--player-color, rgba(126, 177, 215, .6));
  border-radius: 12px;
  background: linear-gradient(160deg, var(--seat-a), var(--seat-b));
  box-shadow: inset 0 0 0 1px rgba(8, 25, 42, .65);
  padding: 5px;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}
.seat-pack { display: flex; align-items: center; gap: 6px; }
.north .seat-pack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "fan"
    "last";
  gap: 3px;
  align-items: start;
  justify-items: center;
}
.east .seat-pack,
.west .seat-pack {
  display: grid;
  min-height: 0;
  height: 100%;
  align-items: center;
}
.west .seat-pack {
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "fan";
  justify-content: start;
  justify-items: center;
  align-content: start;
}
.east .seat-pack {
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "fan";
  justify-content: start;
  justify-items: center;
  align-content: start;
}
.east .seat-section, .west .seat-section {
  width: 100%;
  min-width: 118px;
  max-width: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.east .seat-label, .west .seat-label { text-align: center; margin-bottom: 0; z-index: 2; position: relative; }
.east .seat-pack, .west .seat-pack, .south .self-section { justify-content: flex-start; }
.east .name, .west .name { margin-top: 0; }
.north .seat-section,
.east .seat-section,
.west .seat-section { border-color: var(--player-color, rgba(126, 177, 215, .6)); }
.north .seat-section {
  border-radius: 12px;
  overflow: hidden;
}
.north { position: relative; z-index: 6; }
.north .play-type-call-seat,
.north .last-card-call-seat {
  z-index: 40;
}
.north .seat-pack { width: 100%; }
.north .seat-pack,
.west .seat-pack,
.east .seat-pack {
  position: relative;
}
.west .seat-pack,
.east .seat-pack {
  position: static !important;
}
.west,
.east {
  position: relative;
  z-index: 4;
  overflow: visible;
}
.north .seat-label { order: 0; text-align: center; margin-bottom: 3px; z-index: 3; }
.north .opponent-fan { order: 1; }
.north .seat-label { grid-area: label; }
.north .opponent-fan { grid-area: fan; }
.north .seat-played { grid-area: last; margin-top: 0; }
.west .seat-label, .east .seat-label { grid-area: label; }
.west .opponent-fan { grid-area: fan; }
.east .opponent-fan { grid-area: fan; }
.west .seat-played { grid-area: last; margin-top: 0; align-self: center; justify-self: start; }
.east .seat-played { grid-area: last; margin-top: 0; align-self: center; justify-self: end; }

/* Float opponent seat labels to top-left to save vertical layout space. */
.north .seat-label,
.west .seat-label,
.east .seat-label {
  position: absolute !important;
  top: 4px;
  left: 6px;
  right: auto;
  margin: 0;
  z-index: 20;
  text-align: left;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(7, 22, 34, .78);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  color: #f4f9fb;
}
.seat-name-fixed {
  position: absolute !important;
  top: 4px !important;
  left: 6px !important;
  z-index: 1200 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  background: rgba(7, 22, 34, .74) !important;
  border: 1px solid color-mix(in srgb, var(--player-color, #f4f9fb) 72%, white 28%) !important;
  border-radius: 999px !important;
  color: color-mix(in srgb, var(--player-color, #f4f9fb) 82%, #f4f9fb 18%) !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
  opacity: 1 !important;
  visibility: visible !important;
}
.seat-name-fixed .name,
.action-strip .player-tag .name {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: .84rem;
  font-weight: 700;
  font-family: inherit;
  font-style: normal;
  text-shadow: none;
}
.seat-name-fixed .name .player-color-chip,
.action-strip .player-tag .name .player-color-chip {
  margin-right: 0;
}
.seat-name-text {
  color: color-mix(in srgb, var(--player-color, #f4f9fb) 82%, #f4f9fb 18%);
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  font-weight: inherit;
}
.seat-pos-tag,
.mobile-seat-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--player-color, #f4f9fb) 72%, white 28%);
  background: color-mix(in srgb, var(--player-color, #f4f9fb) 18%, rgba(7, 22, 34, .74));
  color: color-mix(in srgb, var(--player-color, #f4f9fb) 88%, #f4f9fb 12%);
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  padding: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-color, #f4f9fb) 45%, transparent);
}
.seat-count-tag {
  display: inline-block;
  padding: 0;
  color: #9aa3ad;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1;
  border: 0;
  background: transparent;
}
.seat-count-tag.outside {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.seat-pos-tag { margin-left: 2px; }
.mobile-seat-tag { margin-left: 2px; }
.mobile-opponent-name { position: relative; overflow: visible; }
.mobile-opponent-name .seat-count-tag.outside { right: -22px; }
.seat.north > .seat-name-fixed,
.seat.west > .seat-name-fixed,
.seat.east > .seat-name-fixed {
  position: absolute !important;
  top: 4px !important;
  left: 6px !important;
}
.seat-label {
  display: grid;
  gap: 2px;
  line-height: 1.15;
  position: relative;
  z-index: 3;
  background: rgba(0, 0, 0, .16);
  border-radius: 6px;
  padding: 2px 4px;
  margin-bottom: 6px;
}
.seat-played {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.14);
  min-height: 18px;
  overflow: visible;
}
.seat-played .card.mini {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  transform: none;
}
.seat-played .card.mini + .card.mini {
  margin-left: calc(var(--card-w) * -0.64);
}
.seat-played.seat-played-fan .card.mini + .card.mini {
  margin-left: calc(var(--card-w) * -0.84) !important;
}
.seat-played.seat-played-fan .card.mini {
  transform-origin: 50% 50%;
}
.seat-played .card.face.mini,
.table-recent .card.face.mini,
.mobile-discard-cards .card.face.mini {
  box-shadow: none;
}
.seat-played .card.face.mini .card-art,
.center-last .seat-played .card.face.mini .card-art,
.mobile-discard-cards .card.face.mini .card-art {
  object-fit: contain;
  background: transparent;
}
.seat-line { display: flex; align-items: center; gap: 4px; }
.seat-last { display: inline-flex; align-items: center; }
.seat-last .card.mini {
  width: calc(var(--card-w) * 1.14);
  height: calc(var(--card-h) * 1.14);
}
.table-recent {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.table-recent.north { left: 50%; top: 27%; transform: translate(-50%, -50%); }
.table-recent.west { left: 29%; top: 50%; transform: translate(-50%, -50%); }
.table-recent.east { right: 29%; top: 50%; transform: translate(50%, -50%); }
.seat-score { font-size: .78rem; color: #ffd166; margin-left: 6px; }
.top-score-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 209, 102, .42);
  background: rgba(255, 209, 102, .12);
  color: #ffd166;
  font-weight: 700;
  line-height: 1;
}
.score-panel {
  display: grid;
  gap: 6px;
}
.score-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.score-panel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.score-side-card { gap: 0; }
.score-side-card .score-panel { margin-top: 0; }
.score-inline-title {
  display: inline-flex;
  align-items: center;
  font-size: .96rem;
  font-weight: 800;
  color: #f4f9fb;
  margin-right: 2px;
  padding: 2px 0;
}
.score-item {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35em;
  width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(7, 30, 50, .36);
  border: 1px solid color-mix(in srgb, var(--player-color, #f4f9fb) 68%, transparent);
  font-size: .78rem;
}
.score-name { color: color-mix(in srgb, var(--player-color, #f4f9fb) 88%, #f4f9fb 12%); }
.score-value { color: #ffd166; font-weight: 800; }
.score-guide-inline-btn { padding: 5px 9px; }
.player-color-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--player-color, #f4f9fb);
  box-shadow: 0 0 0 1px rgba(255,255,255,.36);
  vertical-align: middle;
  margin-right: 6px;
}
.player-avatar {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.96);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--avatar-outline, #f4f9fb) 70%, white 30%),
    0 0 8px color-mix(in srgb, var(--avatar-outline, #f4f9fb) 58%, transparent 42%),
    0 0 16px color-mix(in srgb, var(--avatar-outline, #f4f9fb) 38%, transparent 62%);
  object-fit: cover;
  object-position: center center;
  flex: 0 0 auto;
  background: var(--avatar-bg);
}
.player-avatar.player-avatar-google {
  background: transparent !important;
}
.player-avatar.avatar-female { object-position: center center; }
.player-avatar.avatar-male { object-position: center center; }
.player-avatar.mini {
  width: 13px;
  height: 13px;
  border-radius: 3px;
}
.table-center-stack {
  grid-area: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  align-self: stretch;
  z-index: 2000;
}
.mobile-opponent-names {
  display: none;
}
.mobile-discard-panel {
  display: none;
}
.center-last {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}
.center-last .seat-played {
  margin: 0;
  padding: 0;
  min-height: 0;
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255,255,255,.28);
  max-width: none;
  overflow: visible;
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: flex-start;
}
.center-last .seat-played .card.mini {
  width: auto;
  height: auto;
}
.center-last-west .seat-played .card.mini,
.center-last-east .seat-played .card.mini {
  width: auto;
  height: auto;
  transform: none;
}
.center-last .seat-played-pass {
  padding: 6px 10px !important;
}
.center-last .seat-pass-label {
  padding: 7px 14px !important;
  font-size: .98rem !important;
  gap: 9px !important;
  border-width: 2px;
}
.center-last .seat-pass-icon {
  width: 1.08rem !important;
  height: 1.08rem !important;
}
.center-last .seat-pass-text {
  letter-spacing: .05em !important;
}
.center-last-north { left: 50%; top: 8px; transform: translate(-50%, 0); }
.center-last-south { left: 50%; bottom: 14px; transform: translate(-50%, 0); }
.center-last-west { left: 8px; top: 50%; transform: translate(0, -50%); }
.center-last-east { right: 8px; top: 50%; transform: translate(0, -50%); }
.game-shell {
  --callout-scale: 1.12;
}
.play-type-call,
.last-card-call {
  --bubble-border: #4a4a4a;
  --bubble-fill: var(--player-color, #84a9db);
  position: absolute;
  z-index: 14000;
  display: inline-block;
  pointer-events: none;
  transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px)), 0) rotate(var(--callout-tilt, 0deg)) scale(var(--callout-scale, 1));
  animation: calloutFloat var(--callout-float-dur, 2.6s) ease-in-out infinite;
}
.emote-callout {
  --bubble-border: #4a4a4a;
  --bubble-fill: var(--player-color, #84a9db);
  --callout-size: 1.15;
  position: absolute;
  z-index: 14000;
  display: inline-block;
  pointer-events: none;
  transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px)), 0) rotate(var(--callout-tilt, 0deg)) scale(var(--callout-scale, 1));
  animation: none;
}
.play-type-call .callout-box,
.last-card-call .callout-box,
.emote-callout .callout-box {
  padding: calc(3px * var(--callout-size, 1));
  border: calc(2px * var(--callout-size, 1)) solid var(--bubble-border);
  border-radius: calc(24px * var(--callout-size, 1)) calc(16px * var(--callout-size, 1)) calc(26px * var(--callout-size, 1)) calc(14px * var(--callout-size, 1));
  background: var(--bubble-fill);
  color: #fff;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.12));
  transform: translate3d(var(--callout-box-shift-x, 0px), var(--callout-box-shift-y, 0px), 0);
  display: inline-block;
}
.play-type-call .hk-inner,
.last-card-call .hk-inner {
  padding: calc(12px * var(--callout-size, 1)) calc(20px * var(--callout-size, 1));
  border: 1px dashed rgba(255, 255, 255, 0.42);
  border-radius: calc(18px * var(--callout-size, 1)) calc(12px * var(--callout-size, 1)) calc(20px * var(--callout-size, 1)) calc(12px * var(--callout-size, 1));
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.play-type-call.callout-with-emote .hk-inner,
.last-card-call.callout-with-emote .hk-inner {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--callout-size, 1));
  text-align: left;
}
.play-type-call.callout-with-emote .emote-icon,
.last-card-call.callout-with-emote .emote-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.play-type-call.callout-with-emote .emote-icon img,
.last-card-call.callout-with-emote .emote-icon img {
  width: calc(64px * var(--callout-size, 1));
  height: auto;
  display: block;
}
.emote-callout .hk-inner {
  padding: calc(8px * var(--callout-size, 1)) calc(10px * var(--callout-size, 1));
  border: 1px dashed rgba(255, 255, 255, 0.42);
  border-radius: calc(18px * var(--callout-size, 1)) calc(12px * var(--callout-size, 1)) calc(20px * var(--callout-size, 1)) calc(12px * var(--callout-size, 1));
  text-align: center;
}
.emote-callout .emote-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.emote-callout .emote-icon img {
  width: calc(96px * var(--callout-size, 1));
  height: auto;
  display: block;
}
.food-callout .emote-icon img {
  width: calc(var(--food-callout-w, 64px) * var(--callout-size, 1));
  height: auto;
  display: block;
}
.food-callout {
  animation: foodCalloutSlideIn .2s ease-out both;
}
.food-callout .callout-box {
  animation: none;
}
.play-type-call .hk-text,
.last-card-call .hk-text {
  font-size: calc(2.05rem * var(--callout-size, 1));
  font-family: "Microsoft JhengHei", sans-serif;
  font-weight: 900;
  letter-spacing: .01em;
}
.play-type-call .hk-medium,
.last-card-call .hk-medium {
  font-size: calc(1.45rem * var(--callout-size, 1));
  font-family: "Microsoft JhengHei", sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
}
.play-type-call-fresh,
.last-card-call-fresh {
  animation: calloutFloat var(--callout-float-dur, 2.6s) ease-in-out infinite;
}
.play-type-call.pass-call {
  animation: calloutFloat var(--callout-float-dur, 2.9s) ease-in-out infinite !important;
}
.play-type-call.must3-call .callout-box {
  width: min(calc(200px * var(--callout-size, 1)), calc(100vw - 24px));
  min-width: 0;
  max-width: min(calc(200px * var(--callout-size, 1)), calc(100vw - 24px));
}
.play-type-call.must3-call .hk-inner {
  white-space: normal;
  text-align: center;
  padding: calc(8px * var(--callout-size, 1)) calc(14px * var(--callout-size, 1));
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.play-type-call.must3-call .hk-text,
.play-type-call.must3-call .hk-medium {
  display: block;
  max-width: 100%;
  white-space: normal;
  text-wrap: wrap;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.05;
}
.play-type-call .tail,
.last-card-call .tail {
  position: absolute;
  width: 0;
  height: 0;
  border: calc(10px * var(--callout-size, 1)) solid transparent;
}
.emote-callout .tail {
  position: absolute;
  width: 0;
  height: 0;
  border: calc(10px * var(--callout-size, 1)) solid transparent;
}
.play-type-call .tail::after,
.last-card-call .tail::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: calc(10px * var(--callout-size, 1)) solid transparent;
}
.emote-callout .tail::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: calc(10px * var(--callout-size, 1)) solid transparent;
}
.play-type-call .tail-north,
.last-card-call .tail-north {
  top: calc(-20px * var(--callout-size, 1));
  left: var(--tail-anchor-x, 50%);
  transform: translateX(-50%);
  border-bottom-color: var(--bubble-border);
}
.emote-callout .tail-north {
  top: calc(-20px * var(--callout-size, 1));
  left: var(--tail-anchor-x, 50%);
  transform: translateX(-50%);
  border-bottom-color: var(--bubble-border);
}
.play-type-call .tail-north::after,
.last-card-call .tail-north::after {
  bottom: calc(-14px * var(--callout-size, 1));
  left: calc(-10px * var(--callout-size, 1));
  border-bottom-color: var(--bubble-fill);
}
.emote-callout .tail-north::after {
  bottom: calc(-14px * var(--callout-size, 1));
  left: calc(-10px * var(--callout-size, 1));
  border-bottom-color: var(--bubble-fill);
}
.play-type-call .tail-south,
.last-card-call .tail-south {
  bottom: calc(-20px * var(--callout-size, 1));
  left: var(--tail-anchor-x, 50%);
  transform: translateX(-50%);
  border-top-color: var(--bubble-border);
}
.emote-callout .tail-south {
  bottom: calc(-20px * var(--callout-size, 1));
  left: var(--tail-anchor-x, 50%);
  transform: translateX(-50%);
  border-top-color: var(--bubble-border);
}
.play-type-call .tail-south::after,
.last-card-call .tail-south::after {
  top: calc(-14px * var(--callout-size, 1));
  left: calc(-10px * var(--callout-size, 1));
  border-top-color: var(--bubble-fill);
}
.emote-callout .tail-south::after {
  top: calc(-14px * var(--callout-size, 1));
  left: calc(-10px * var(--callout-size, 1));
  border-top-color: var(--bubble-fill);
}
.play-type-call .tail-east,
.last-card-call .tail-east {
  right: calc(-20px * var(--callout-size, 1));
  top: var(--tail-anchor-y, 50%);
  transform: translateY(-50%);
  border-left-color: var(--bubble-border);
}
.emote-callout .tail-east {
  right: calc(-20px * var(--callout-size, 1));
  top: var(--tail-anchor-y, 50%);
  transform: translateY(-50%);
  border-left-color: var(--bubble-border);
}
.play-type-call .tail-east::after,
.last-card-call .tail-east::after {
  right: calc(-6px * var(--callout-size, 1));
  top: calc(-10px * var(--callout-size, 1));
  border-left-color: var(--bubble-fill);
}
.emote-callout .tail-east::after {
  right: calc(-6px * var(--callout-size, 1));
  top: calc(-10px * var(--callout-size, 1));
  border-left-color: var(--bubble-fill);
}
.play-type-call .tail-west,
.last-card-call .tail-west {
  left: calc(-20px * var(--callout-size, 1));
  top: var(--tail-anchor-y, 50%);
  transform: translateY(-50%);
  border-right-color: var(--bubble-border);
}
.emote-callout .tail-west {
  left: calc(-20px * var(--callout-size, 1));
  top: var(--tail-anchor-y, 50%);
  transform: translateY(-50%);
  border-right-color: var(--bubble-border);
}
.play-type-call .tail-west::after,
.last-card-call .tail-west::after {
  left: calc(-6px * var(--callout-size, 1));
  top: calc(-10px * var(--callout-size, 1));
  border-right-color: var(--bubble-fill);
}
.emote-callout .tail-west::after {
  left: calc(-6px * var(--callout-size, 1));
  top: calc(-10px * var(--callout-size, 1));
  border-right-color: var(--bubble-fill);
}
.play-type-call-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: calc(94px + var(--callout-jx, 0px));
}
.last-card-call-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: calc(94px + var(--callout-jx, 0px));
}
.seat.north .play-type-call-seat,
.seat.north .last-card-call-seat,
.seat.north .pass-call.play-type-call-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: calc(98px + var(--callout-jx, 0px));
  transform: none;
}
.seat.west .play-type-call-seat,
.seat.west .last-card-call-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: calc(98px + var(--callout-jx, 0px));
}
.seat.east .play-type-call-seat,
.seat.east .last-card-call-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: auto;
  right: calc(8px - var(--callout-jx, 0px));
  z-index: 3400;
}
.play-type-call-self {
  top: auto;
  bottom: calc(100% + 18px + var(--callout-jy, 0px));
  left: calc(10px + var(--callout-jx, 0px));
  right: auto;
  transform: none;
}
.last-card-call-self {
  top: auto;
  bottom: calc(100% + 18px + var(--callout-jy, 0px));
  left: calc(10px + var(--callout-jx, 0px));
  right: auto;
  transform: none;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes calloutPop {
  0% { opacity: 0; transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px) + 4px), 0) scale(.9) rotate(var(--callout-tilt, 0deg)) scale(var(--callout-scale, 1)); }
  100% { opacity: 1; transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px)), 0) rotate(var(--callout-tilt, 0deg)) scale(var(--callout-scale, 1)); }
}
@keyframes calloutFloat {
  0% { transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px)), 0) rotate(var(--callout-tilt, 0deg)) scale(var(--callout-scale, 1)); }
  50% { transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px) + (var(--callout-float-amp, 3px) * -1)), 0) rotate(calc(var(--callout-tilt, 0deg) * .6)) scale(var(--callout-scale, 1)); }
  100% { transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px)), 0) rotate(var(--callout-tilt, 0deg)) scale(var(--callout-scale, 1)); }
}
@keyframes calloutGlow {
  0% {
    box-shadow:
      0 14px 32px rgba(0,0,0,.38),
      0 0 0 2px color-mix(in srgb, var(--player-color, #7ec0ff) 48%, transparent),
      0 0 24px color-mix(in srgb, var(--player-color, #7ec0ff) 42%, transparent);
  }
  50% {
    box-shadow:
      0 16px 36px rgba(0,0,0,.42),
      0 0 0 3px color-mix(in srgb, var(--player-color, #7ec0ff) 62%, transparent),
      0 0 34px color-mix(in srgb, var(--player-color, #7ec0ff) 58%, transparent);
  }
  100% {
    box-shadow:
      0 14px 32px rgba(0,0,0,.38),
      0 0 0 2px color-mix(in srgb, var(--player-color, #7ec0ff) 48%, transparent),
      0 0 24px color-mix(in srgb, var(--player-color, #7ec0ff) 42%, transparent);
  }
}
@keyframes foodCalloutSlideIn {
  from { opacity: 0; margin-top: -10px; }
  to { opacity: 1; margin-top: 0; }
}
@keyframes recommendHintPop {
  0% { opacity: 0; transform: translateY(6px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes recommendBulbBob {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-1px) rotate(6deg); }
}
@keyframes playerBadgeEntrance {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.94); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes emotePanelReveal {
  0% { opacity: 0; transform: translateY(8px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.recommend-hint {
  padding: 6px 12px;
  border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(255,209,102,.18), rgba(255,209,102,.06)),
    rgba(10, 20, 28, .55);
  border: 1px solid rgba(255,209,102,.35);
  color: #ffe1a8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(8, 25, 42, .45) inset;
  max-width: min(520px, 90%);
  text-wrap: balance;
  position: relative;
  animation: recommendHintPop .22s var(--playful-pop);
}
.recommend-hint .recommend-bulb {
  font-size: 1rem;
  line-height: 1;
  animation: recommendBulbBob 1.3s ease-in-out infinite;
}
.recommend-hint::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 18px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, rgba(255,209,102,.2) 55%, rgba(10, 20, 28, .55));
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(255,209,102,.25);
}
.recommend-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.recommend-layer {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 6;
  pointer-events: none;
  max-width: min(320px, 60vw);
}
.recommend-hint.rec-pass {
  background:
    linear-gradient(120deg, rgba(255,122,148,.22), rgba(255,122,148,.08)),
    rgba(10, 20, 28, .55);
  border-color: rgba(255,122,148,.45);
  color: #ffd6e0;
}
.recommend-glow {
  position: relative;
  box-shadow:
    0 0 0 2px rgba(255, 214, 128, .65),
    0 0 18px rgba(255, 214, 128, .65),
    0 0 34px rgba(255, 214, 128, .45);
}
.recommend-glow-play {
  position: relative;
  box-shadow:
    0 0 0 2px rgba(82, 210, 115, .6),
    0 0 18px rgba(82, 210, 115, .6),
    0 0 34px rgba(82, 210, 115, .4);
}
.recommend-hint.rec-empty {
  background:
    linear-gradient(120deg, rgba(160, 196, 255, .18), rgba(160, 196, 255, .06)),
    rgba(10, 20, 28, .55);
  border-color: rgba(160, 196, 255, .35);
  color: #d9e9ff;
}
.table-center-grid-wrap {
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px;
  background:
    linear-gradient(130deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    rgba(255,255,255,.02) !important;
  padding: 6px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden auto;
  box-shadow: inset 0 0 0 1px rgba(8, 25, 42, .65);
}
.room-center-meta {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(7, 18, 12, .5);
  border: 1px solid rgba(255,255,255,.18);
  color: #eef7f1;
  font-size: .82rem;
  line-height: 1.1;
  max-width: 220px;
}
.room-center-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.room-center-row span {
  color: rgba(235, 246, 238, .7);
}
.room-center-row strong {
  color: #f6e0a5;
  font-weight: 700;
}

.north .seat-section,
.east,
.west {
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    linear-gradient(130deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    rgba(255,255,255,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 25, 42, .65) !important;
}
.center-move-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  align-content: start;
}
.move-cell.play { padding: 0; background: transparent; border: 0; box-shadow: none; min-height: 0; display: grid; place-items: center; }
.move-north { border-left: 3px solid #5ab6ff; padding-left: 2px; }
.move-east { border-left: 3px solid #ff9d66; padding-left: 2px; }
.move-west { border-left: 3px solid #86d989; padding-left: 2px; }
.move-south { border-left: 3px solid #ffd166; padding-left: 2px; }
.center-move-grid .center-card-wrap {
  display: grid;
  place-items: center;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 0;
  border: 2px solid var(--move-color, rgba(255,255,255,.22));
  background: var(--move-color, #ffffff);
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
}
.move-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  gap: 3px;
  min-height: 0;
  overflow-x: auto;
  max-width: 100%;
}
.move-cards > .center-card-wrap {
  flex: 0 0 auto;
}
.center-card-wrap {
  display: grid;
  place-items: center;
  border-radius: 0;
  overflow: hidden;
  line-height: 0;
}
.center-card-wrap .card.mini {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
}
.opponent-fan { display: flex; gap: 0; margin-top: 0; transform: none; --stack-overlap: 30%; }
.opponent-fan-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
  z-index: 1;
}
.closed-card-pile {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: max-content;
  padding-right: 4px;
  padding-bottom: 4px;
  overflow: visible;
}
.closed-card-pile > .opponent-fan {
  position: relative;
  width: max-content;
}
.closed-count-pill {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .88);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .26);
  z-index: 3;
}
body[data-screen='game'] :is(.seat-pack, .side-station-stack) > .closed-count-pill {
  position: absolute !important;
  inset: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 4 !important;
}
body[data-screen='game'] .closed-card-pile > .closed-count-pill {
  position: absolute !important;
  inset: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 4 !important;
}
.seat-open-play {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.seat.east > .seat-name-fixed {
  z-index: 3400 !important;
}
.seat.east .seat-open-play,
.seat.east .opponent-fan {
  z-index: 1 !important;
}
.seat-open-play .seat-played {
  transform: scale(.78);
  transform-origin: center top;
}
.west .opponent-fan, .east .opponent-fan {
  transform: none;
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  align-content: start;
  padding-top: 4px;
}
.west .opponent-fan .card.face.mini, .east .opponent-fan .card.face.mini {
  width: calc(var(--card-w) * var(--opp-fan-face-mini-scale));
  height: calc(var(--card-h) * var(--opp-fan-face-mini-scale));
  padding: 0;
  box-sizing: border-box;
  transform: rotate(90deg);
  transform-origin: center;
  overflow: visible;
}
.west .opponent-fan .card.face.mini { transform: rotate(90deg); }
/* Open-card reveal layout tuning */
.east .opponent-fan .card.face.mini,
.west .opponent-fan .card.face.mini {
  margin-top: 0 !important;
}
.east .opponent-fan .card.face.mini + .card.face.mini,
.west .opponent-fan .card.face.mini + .card.face.mini {
  margin-top: 2px !important;
}
.north .opponent-fan .card.face.mini {
  margin-left: calc(var(--card-w) * 0.08);
}
.north .opponent-fan .card.face.mini:first-child {
  margin-left: 0;
}
.west .seat-played, .east .seat-played { flex-direction: row; }
/* Keep mini card dimensions consistent across player panels.
   Panel-specific selectors below can still override when needed. */
.opponent-fan .card.face.mini {
  width: calc(var(--card-w) * var(--opp-fan-face-mini-scale));
  height: calc(var(--card-h) * var(--opp-fan-face-mini-scale));
}

/* Smaller back cards on opponent panels */
.opponent-fan .card.back.mini {
  width: calc(var(--card-w) * var(--opp-fan-closed-mini-scale));
  height: calc(var(--card-h) * var(--opp-fan-closed-mini-scale));
}
.opponent-fan .card.back.mini.closed-back {
  border: 0;
  box-shadow: none;
}

/* Fan-style closed card stacks */
.east .opponent-fan,
.west .opponent-fan {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.north .opponent-fan {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.east .opponent-fan .closed-back,
.west .opponent-fan .closed-back {
  margin-top: 0;
  margin-left: calc(var(--opp-fan-closed-shift-x));
  left: 15px;
  transform-origin: center center;
}
.east .opponent-fan .closed-back {
  transform: translateY(calc(var(--fan-lift, 0.5) * var(--opp-fan-closed-lift-px))) rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
}
.west .opponent-fan .closed-back {
  transform: translateY(calc(var(--fan-lift, 0.5) * var(--opp-fan-closed-lift-px))) rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
}
.north .opponent-fan .closed-back {
  margin-top: 0 !important;
  margin-left: var(--opp-fan-closed-shift-x) !important;
  left: 10px;
  transform-origin: center center;
  transform: translateY(calc(var(--fan-lift, 0.5) * var(--opp-fan-closed-lift-px))) rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step)));
}
/* Top seat: keep horizontal spread, but card axis must stay vertical (upright). */
.north .opponent-fan .card.back.mini.closed-back {
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
}

/* Keep base back card size aligned with face card; panel-specific rules override above. */
.card.back {
  width: var(--card-w);
  height: var(--card-h);
}
.card.back.mini {
  width: var(--card-w);
  height: var(--card-h);
}

/* Opponent-specific panel color shades */
/* Keep neutral so all opponent panels match topbar glass style. */
.north .seat-section { background: none; }

/* Ensure panel spacing stays consistent */
.north .seat-label { margin-bottom: 6px; }
/* Center left/right closed-card stacks both vertically and horizontally. */
.west .seat-pack,
.east .seat-pack {
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}
.west .opponent-fan,
.east .opponent-fan {
  margin-left: 0;
  margin-right: 0;
  align-self: center;
  justify-self: center;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
}

.action-zone {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 6px;
  min-height: 0;
  overflow: visible;
}
.action-strip {
  position: relative;
  border-radius: 14px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 212, 128, .08), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--panel-2);
  padding: 6px 8px 8px;
  display: grid;
  gap: 4px;
  min-height: 0;
  overflow: visible;
  grid-template-columns: 1fr;
  grid-template-areas:
    "controls"
    "hand";
  isolation: isolate;
}
.action-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  opacity: .9;
  pointer-events: none;
}
.action-strip::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(14px - 1px);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.08), transparent 26%),
    radial-gradient(circle at 82% 16%, rgba(96, 212, 255, .07), transparent 24%);
  pointer-events: none;
  z-index: 0;
}
.action-strip .player-tag {
  grid-area: auto;
  margin-bottom: 0;
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(calc(-50% + 3px));
  z-index: 20;
}
/* South panel: force centered name badge, overriding seat-name-fixed base left:6px!important */
.action-strip .seat-name-fixed.player-tag {
  left: 50% !important;
  right: auto !important;
  transform: translateX(calc(-50% + 3px)) !important;
  overflow: visible !important;
}
.action-strip .control-row {
  grid-area: controls;
  gap: 6px;
  flex-wrap: wrap;
  row-gap: 6px;
  overflow: visible;
  padding-top: 0;
  position: relative;
  z-index: 6;
}
.action-strip .control-row > * {
  position: relative;
  z-index: 1;
}
.action-strip.active {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 0 0 1px rgba(255, 209, 102, .18),
    0 18px 34px rgba(0,0,0,.22);
}
.action-strip.active .player-tag {
  animation: playerBadgeEntrance .34s var(--playful-pop);
}
.action-strip .control-row .recommend-anchor { order: 1; }
.action-strip .control-row #play-btn { order: 2; }
.action-strip .control-row #pass-btn { order: 3; }
.action-strip .control-row #emote-toggle { order: 7; }
.action-strip .control-row #bell-toggle { order: 8; }
.action-strip .control-row .room-top-meta { order: 5; }
.action-strip .control-row #auto-sort-btn { order: 6; }
.action-strip .hand {
  gap: 3px;
  grid-area: hand;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  min-height: calc(var(--card-h) * 1.14 + 12px);
  transform: none;
  scroll-padding-left: 0;
  scroll-padding-right: 0;
  overflow-x: auto;
  overflow-y: visible;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  touch-action: pan-x;
}
.emote-panel {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 6px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: rgba(9, 24, 36, .92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  z-index: 40;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: right bottom;
  animation: emotePanelReveal .2s var(--playful-pop);
}
.emote-panel .emote-btn {
  width: 60px;
  height: 74px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  padding: 3px 3px 6px;
  gap: 3px;
  overflow: visible;
  transition:
    transform 150ms var(--playful-pop),
    box-shadow 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}
.emote-panel .emote-btn:hover,
.emote-panel .emote-btn:focus-visible {
  transform: translateY(-3px) scale(1.045) rotate(-1.5deg);
  border-color: rgba(255, 221, 138, .42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)),
    rgba(255,255,255,.06);
  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    0 0 0 1px rgba(255, 219, 130, .18);
}
.emote-panel .emote-btn:nth-child(2n):hover,
.emote-panel .emote-btn:nth-child(2n):focus-visible {
  transform: translateY(-3px) scale(1.045) rotate(1.5deg);
}
.emote-panel .emote-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 180ms var(--playful-pop);
}
.emote-panel .emote-btn:hover img,
.emote-panel .emote-btn:focus-visible img {
  transform: scale(1.08);
}
.emote-panel .emote-btn-label {
  font-size: .54rem;
  font-weight: 700;
  color: rgba(232, 243, 242, .92);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.emote-panel .emote-btn-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emote-panel .emote-btn[data-emote-id='sleep'] img,
.emote-panel .emote-btn[data-emote-id='fire'] img {
  width: 86%;
  height: 86%;
}
.emote-panel .emote-btn[data-emote-id='sleep'] img {
  width: 92%;
  height: 92%;
  object-position: center 60%;
}
.table-emote,
.self-table-emote {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 10px;
  transform: translateX(-50%);
  --emote-base-w: clamp(110px, 22vw, 200px);
  --emote-throw-w: clamp(150px, 30vw, 260px);
  --emote-smash-w: clamp(160px, 32vw, 280px);
  --emote-cheers-w: clamp(170px, 34vw, 300px);
  --emote-love-w: clamp(150px, 28vw, 240px);
  --emote-crack-w: clamp(140px, 26vw, 240px);
  --emote-sleep-w: clamp(130px, 24vw, 220px);
  --emote-rude-w: clamp(230px, 40vw, 340px);
  --emote-rude-h: clamp(150px, 26vw, 220px);
  width: var(--emote-base-w);
  height: auto;
  pointer-events: none;
  animation: emoteWobbleBottom 1.2s ease-in-out infinite;
  z-index: 9999;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
body[data-screen='game'] .self-table-emote {
  bottom: calc(var(--card-h) + 84px);
  z-index: 15020;
}
.table-emote img,
.self-table-emote img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes emoteWobble {
  0% { transform: translate(-50%, -50%) rotate(-6deg) scale(0.98); }
  50% { transform: translate(-50%, -52%) rotate(6deg) scale(1.02); }
  100% { transform: translate(-50%, -50%) rotate(-6deg) scale(0.98); }
}
@keyframes emoteWobbleBottom {
  0% { transform: translateX(-50%) rotate(-6deg) scale(0.98); }
  50% { transform: translateX(-50%) translateY(-2px) rotate(6deg) scale(1.02); }
  100% { transform: translateX(-50%) rotate(-6deg) scale(0.98); }
}
.table-emote.emote-cool,
.self-table-emote.emote-cool { animation: emoteWobbleBottom 1.2s ease-in-out infinite; }
.table-emote.emote-throw,
.self-table-emote.emote-throw { animation: emoteThrow 1.3s ease-out forwards; width: var(--emote-throw-w); }
.table-emote.emote-rude,
.self-table-emote.emote-rude {
  width: var(--emote-rude-w);
  height: var(--emote-rude-h);
  top: auto;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}
body[data-screen='game'] .self-table-emote.emote-rude {
  bottom: calc(var(--card-h) + 128px);
}
.table-emote.emote-rude img,
.self-table-emote.emote-rude img { width: 100%; height: auto; display: block; }
.table-emote.emote-rude .emote-rude-hit,
.self-table-emote.emote-rude .emote-rude-hit {
  position: absolute;
  width: clamp(100px, 18vw, 150px);
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
  opacity: 0;
  animation: emoteRudeBurst 1.1s steps(2, end) infinite;
}
.table-emote.emote-rude .emote-rude-hit-1,
.self-table-emote.emote-rude .emote-rude-hit-1 {
  left: 2%;
  bottom: 4%;
  animation-delay: 0s;
}
.table-emote.emote-rude .emote-rude-hit-2,
.self-table-emote.emote-rude .emote-rude-hit-2 {
  left: 34%;
  top: 0;
  animation-delay: 0.16s;
}
.table-emote.emote-rude .emote-rude-hit-3,
.self-table-emote.emote-rude .emote-rude-hit-3 {
  right: 0;
  bottom: 10%;
  animation-delay: 0.32s;
}
.table-emote.emote-sweat,
.self-table-emote.emote-sweat { animation: emotePulse 1.2s ease-in-out infinite; }
.table-emote.emote-rage,
.self-table-emote.emote-rage { animation: emoteRage 1.2s ease-in-out infinite; }
.table-emote.emote-smash,
.self-table-emote.emote-smash { animation: emoteSmash 1.2s ease-in-out infinite; width: var(--emote-smash-w); }
.table-emote.emote-fire,
.self-table-emote.emote-fire { animation: emoteFire 1.2s ease-in-out infinite; }
.table-emote.emote-think,
.self-table-emote.emote-think { animation: emoteSmirk 1.4s ease-in-out infinite; }
.table-emote.emote-cry,
.self-table-emote.emote-cry { animation: emoteCry 1.6s ease-in-out infinite; }
.table-emote.emote-cheers,
.self-table-emote.emote-cheers { animation: emoteBounce 1.2s ease-in-out infinite; width: var(--emote-cheers-w); }
.table-emote.emote-thumbs,
.self-table-emote.emote-thumbs { animation: emotePop 1.1s ease-in-out infinite; }
.table-emote.emote-crack,
.self-table-emote.emote-crack { animation: emoteCrackPunch 1.1s ease-out forwards; width: var(--emote-crack-w); }
.table-emote.emote-sleep,
.self-table-emote.emote-sleep { animation: emoteFloatSleep 1.8s ease-in-out infinite; width: var(--emote-sleep-w); opacity: 0.95; bottom: 1px; }
.table-emote.emote-love,
.self-table-emote.emote-love { animation: emoteHeart 1.1s ease-in-out infinite; width: var(--emote-love-w); }
.table-emote.emote-champagne,
.self-table-emote.emote-champagne,
.table-emote.emote-shock,
.self-table-emote.emote-shock { width: var(--emote-cheers-w); }
.table-emote.emote-champagne,
.self-table-emote.emote-champagne { animation: emoteChampagne 1.1s ease-in-out infinite; }
.table-emote.emote-shock,
.self-table-emote.emote-shock { animation: emoteShockFlash 0.7s ease-in-out infinite; }
  @keyframes emoteThrow {
    0% { transform: translate(-140%, -30%) rotate(-18deg) scale(0.9); opacity: 0; }
    45% { transform: translate(-50%, -55%) rotate(7deg) scale(1.03); opacity: 1; }
    75% { transform: translate(-50%, -50%) rotate(3deg) scale(1.01); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(2deg) scale(1); opacity: 1; }
  }
@keyframes emoteShake {
  0%,100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  20% { transform: translate(-52%, -50%) rotate(-4deg) scale(1.02); }
  40% { transform: translate(-48%, -50%) rotate(4deg) scale(1.02); }
  60% { transform: translate(-52%, -52%) rotate(-3deg) scale(1.01); }
  80% { transform: translate(-48%, -48%) rotate(3deg) scale(1.01); }
}
@keyframes emoteShakeStrong {
  0%,100% { transform: translate(-50%, -50%) rotate(0deg) scale(1.05); }
  15% { transform: translate(-55%, -52%) rotate(-10deg) scale(1.12); }
  30% { transform: translate(-45%, -48%) rotate(10deg) scale(1.12); }
  45% { transform: translate(-56%, -54%) rotate(-8deg) scale(1.1); }
  60% { transform: translate(-44%, -46%) rotate(8deg) scale(1.1); }
  75% { transform: translate(-54%, -52%) rotate(-6deg) scale(1.08); }
  90% { transform: translate(-46%, -48%) rotate(6deg) scale(1.08); }
}
@keyframes emoteShock {
  0% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.92); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.98); }
}
@keyframes emoteShockStrong {
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.88); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
}
@keyframes emotePulse {
  0%,100% { transform: translate(-50%, -50%) scale(0.96); }
  50% { transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes emoteRage {
  0%,100% { transform: translate(-50%, -50%) rotate(-2deg) scale(1.04); }
  25% { transform: translate(-51%, -51%) rotate(2deg) scale(1.08); }
  50% { transform: translate(-49%, -49%) rotate(-3deg) scale(1.06); }
  75% { transform: translate(-51%, -51%) rotate(3deg) scale(1.08); }
}
@keyframes emoteBounce {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -56%) scale(1.03); }
  55% { transform: translate(-50%, -46%) scale(0.98); }
  75% { transform: translate(-50%, -52%) scale(1.01); }
}
@keyframes emoteSmirk {
  0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
  40% { transform: translate(-48%, -52%) rotate(3deg) scale(1.02); }
  100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
}
@keyframes emoteCry {
  0% { transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
  45% { transform: translate(-50%, -54%) rotate(2deg) scale(1.01); }
  100% { transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
}
@keyframes emotePop {
  0% { transform: translate(-50%, -50%) scale(0.95); }
  45% { transform: translate(-50%, -52%) scale(1.06); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes emoteImpact {
  0% { transform: translate(-80%, -50%) scale(0.94); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  60% { transform: translate(-50%, -52%) scale(0.98); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes emoteCrackPunch {
  0% { transform: translate(40%, -50%) rotate(6deg) scale(0.92); opacity: 0; }
  35% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.06); opacity: 1; }
  70% { transform: translate(-52%, -50%) rotate(2deg) scale(0.98); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
}
@keyframes emoteFloat {
  0%,100% { transform: translate(-50%, -48%) scale(1); opacity: 0.95; }
  50% { transform: translate(-50%, -56%) scale(1.02); opacity: 1; }
}
@keyframes emoteHeart {
  0% { transform: translate(-50%, -50%) scale(0.98); }
  35% { transform: translate(-50%, -52%) scale(1.08); }
  70% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(0.98); }
}
@keyframes emoteSmash {
  0% { transform: translate(-90%, -50%) scale(0.95); opacity: 0; }
  35% { transform: translate(-50%, -56%) scale(1.04); opacity: 1; }
  55% { transform: translate(-50%, -46%) scale(0.98); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes emoteFire {
  0%,100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
  30% { transform: translate(-50%, -52%) rotate(3deg) scale(1.04); }
  60% { transform: translate(-50%, -48%) rotate(-2deg) scale(1.02); }
}
.action-strip .hand-hint {
  grid-area: auto;
  position: absolute;
  top: 4px;
  right: 8px;
  margin-top: 0;
  margin-bottom: 0;
  text-align: right;
  justify-self: auto;
  align-self: auto;
  font-size: .78rem;
  white-space: nowrap;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  z-index: 20;
}
.drag-popup {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(8px);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(7, 22, 34, .86);
  color: #f4f9fb;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 24;
}
.drag-popup.show {
  opacity: 1;
  transform: translateY(0);
}
.action-strip .control-row button[data-tooltip] {
  position: relative;
  overflow: visible;
}
@media (hover: hover) and (pointer: fine) {
  .action-strip .control-row button[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 8px);
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(7, 22, 34, .86);
    color: #f4f9fb;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 24;
  }
  .action-strip .control-row button[data-tooltip]:hover::after,
  .action-strip .control-row button[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.action-strip button { padding: 6px 10px; border-radius: 10px; }
.action-strip .name { font-size: .84rem; }
.action-strip .player-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--player-color, #ffd166);
  border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 70%, black 30%);
  border-radius: 999px;
  color: #102619;
  font-family: inherit;
  font-style: normal;
  font-size: .84rem;
  font-weight: 700;
}
.action-strip .player-tag .player-color-chip { display: none !important; }
.action-strip .player-tag .name { gap: 0; }
.action-strip.active {
  border-color: color-mix(in srgb, var(--player-color, #ffd166) 76%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--player-color, #ffd166) 58%, transparent),
    0 0 28px color-mix(in srgb, var(--player-color, #ffd166) 54%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.15);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--player-color, #ffd166) 12%, transparent), transparent 45%),
    var(--panel-2);
}
.hand-hint { margin-top: 2px; text-align: right; }
.hand {
  display: flex;
  gap: 3px;
  overflow: hidden;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 2px;
  justify-content: flex-start;
  transform: scale(var(--card-scale));
  transform-origin: left center;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hand::-webkit-scrollbar {
  display: none;
}
.action-strip .hand {
  transform: none;
}
.card { width: var(--card-w); height: var(--card-h); border-radius: var(--card-radius); position: relative; display: block; overflow: hidden; flex: 0 0 auto; }
.card.face {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.card.face.face-jqk {
  border-radius: var(--card-radius);
  overflow: hidden;
}
.card.face.face-jqk .card-art {
  border-radius: inherit;
  clip-path: none;
}
.card.back { width: var(--card-w); height: var(--card-h); border-radius: var(--card-radius); border: 0; background: transparent; }
.card-art { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.card.face .card-art { object-fit: contain; background: transparent; }
.card.back .card-art { object-fit: contain; }
.hand-card {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  cursor: grab;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
  padding: 0;
  border: 0;
  border-radius: var(--card-radius);
  background: transparent;
  box-shadow: none;
  outline: none;
}
.hand-card:focus,
.hand-card:focus-visible { outline: none; }
.hand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, .45), 0 6px 12px rgba(0,0,0,.28);
}
.action-strip .hand .hand-card {
  width: calc(var(--card-w) * var(--hand-card-scale, 1.14)) !important;
  height: calc(var(--card-h) * var(--hand-card-scale, 1.14)) !important;
  aspect-ratio: 5 / 7;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0;
  font-size: 0;
  transform: none;
}
.action-strip .hand .hand-card .card-art {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 7;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  transform: none;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none;
}
.hand-card:active { cursor: grabbing; }
.hand-card.selected,
.action-strip .hand .hand-card.selected {
  transform: translateY(-7px);
  box-shadow: none !important;
}
.hand-card.selected .card-art,
.action-strip .hand .hand-card.selected .card-art {
  filter: drop-shadow(0 0 10px rgba(255, 214, 120, .55)) drop-shadow(0 8px 16px rgba(0, 0, 0, .22));
}
.hand-card.must3-highlight {
  box-shadow: none;
  animation: must3Pulse 1.2s ease-in-out infinite;
}
.hand-card.must3-highlight::before {
  content: none;
}
.hand-card.must3-highlight .card-art {
  filter: drop-shadow(0 0 12px rgba(255, 209, 102, .7));
  box-shadow: 0 0 12px rgba(255, 209, 102, .45);
}
body[data-screen='game'] .hand.hand-stacked .hand-card.must3-highlight {
  box-shadow: none !important;
  animation: must3PulseStacked 1.4s ease-in-out infinite;
}
body[data-screen='game'] .hand.hand-stacked .hand-card.must3-highlight::before {
  display: none;
}
body[data-screen='game'] .hand.hand-stacked .hand-card.must3-highlight .card-art {
  filter: none;
}
@keyframes must3PulseStacked {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes must3Pulse {
  0%, 100% { transform: translateY(0) scale(1.02); box-shadow: 0 0 0 3px rgba(255, 232, 160, .85), 0 0 18px rgba(255, 209, 102, .6), 0 0 28px rgba(255, 209, 102, .4); }
  50% { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 3px rgba(255, 232, 160, 1), 0 0 26px rgba(255, 209, 102, .9), 0 0 44px rgba(255, 209, 102, .7); }
}
@media (hover: none), (pointer: coarse) {
  .hand-card:hover {
    transform: none;
    box-shadow: none;
  }
  .hand-card:active:not(.selected) {
    transform: none;
    box-shadow: none;
  }
  .hand-card.selected {
    transform: translateY(-9px) !important;
  }
}
.card.mini { width: calc(var(--card-w)*.56); height: calc(var(--card-h)*.56); }
.seat-pass-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #f7fcff;
  background:
    linear-gradient(180deg, rgba(86, 170, 220, .26), rgba(35, 76, 118, .28));
  border: 1px solid rgba(126, 200, 245, .48);
  box-shadow:
    0 0 0 1px rgba(8, 22, 36, .45) inset,
    0 3px 10px rgba(0, 0, 0, .26);
}
.seat-pass-icon {
  width: .82rem;
  height: .82rem;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .95;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 3v18' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6 5c3.1-1.3 5.9-.9 8.6.3 1.3.6 2.7 1 4.4.8v7.4c-1.9.2-3.4-.3-4.8-.9-2.4-1-4.9-1.3-8.2-.1V5z' fill='%23ffffff'/%3E%3Cpath d='M6 4.7v14.8' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' opacity='.0'/%3E%3C/svg%3E");
}
.seat-pass-text {
  line-height: 1;
}
.seat-played-pass {
  min-height: 22px;
  padding: 2px 4px;
  justify-content: center;
  align-items: center;
}
body[data-screen='game'] .center-last-south .seat-played-pass {
  padding: 3px 5px !important;
}
body[data-screen='game'] .seat.north .seat-played-pass,
body[data-screen='game'] .seat.west .seat-played-pass,
body[data-screen='game'] .seat.east .seat-played-pass,
body[data-screen='game'] .center-last-south .seat-played-pass {
  padding: 3px 5px !important;
}
body[data-screen='game'] .seat.north .seat-pass-label,
body[data-screen='game'] .seat.west .seat-pass-label,
body[data-screen='game'] .seat.east .seat-pass-label,
body[data-screen='game'] .center-last-south .seat-pass-label {
  padding: 4px 8px !important;
  gap: 5px !important;
  font-size: .8rem !important;
}
body[data-screen='game'] .seat.north .seat-pass-icon,
body[data-screen='game'] .seat.west .seat-pass-icon,
body[data-screen='game'] .seat.east .seat-pass-icon,
body[data-screen='game'] .center-last-south .seat-pass-icon {
  width: .86rem !important;
  height: .86rem !important;
}

.side-zone {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0,1fr);
  gap: 9px;
  min-height: 0;
  overflow: hidden;
  align-content: stretch;
}
.side-zone.log-collapsed {
  grid-template-rows: auto;
  align-content: start;
  align-self: start;
  height: auto;
  min-height: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
body[data-screen='game'] .side-zone.log-collapsed {
  grid-template-rows: auto !important;
  align-content: start !important;
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.side-card {
  border-radius: var(--ui-radius-md);
  border: var(--ui-border-soft);
  background: linear-gradient(180deg, rgba(15, 42, 65, .86), rgba(9, 28, 44, .92));
  box-shadow: var(--ui-shadow-soft), var(--ui-inset-highlight);
  padding: 9px;
  display: grid;
  gap: 7px;
}
.game-log-toggle { display: none; }
body[data-screen='game'][data-orientation='portrait'] .side-zone { display: none !important; }
.game-log-fab {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 11940;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(82vw, 420px);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(140deg, rgba(20, 58, 86, .92), rgba(8, 30, 50, .9));
  color: #e9f4ff;
  font-weight: 700;
  font-size: .8rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  cursor: grab;
  touch-action: none;
  transition:
    transform 160ms var(--playful-pop),
    box-shadow 160ms ease,
    background 160ms ease;
}
.game-log-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  opacity: .7;
  pointer-events: none;
}
.game-log-fab:hover,
.game-log-fab:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 14px 28px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.08);
}
.game-log-fab:active { cursor: grabbing; }
.game-log-fab .title-icon { width: 18px; height: 18px; }
.game-log-fab-copy {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.game-log-fab-text {
  line-height: 1.05;
  flex: 0 0 auto;
}
.game-log-fab-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  margin: 0 1px;
  border-radius: 999px;
  background: rgba(233, 244, 255, .28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.game-log-fab-status {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(62vw, 300px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.1;
  color: rgba(233, 244, 255, .92);
}
.game-log-fab-status-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-log-fab-status-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-color, #7aaed8) 42%, rgba(255,255,255,.2)) inset;
}
.game-log-fab-status-chip,
.game-log-fab-status-avatar {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.game-log-fab-status-chip {
  background: var(--player-color, #7aaed8);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}
.game-log-fab-status-avatar {
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--player-color, #7aaed8) 58%, rgba(255,255,255,.28));
}
body[data-screen='game'][data-orientation='landscape'] .game-log-fab { display: none; }
body[data-screen='game'][data-orientation='portrait'] .game-log-fab { display: inline-flex; }
body[data-screen='game'][data-orientation='portrait'] #game-log-fab {
  display: inline-flex !important;
  position: fixed !important;
  right: 8px !important;
  bottom: 6px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 11940 !important;
  touch-action: auto !important;
}
body[data-screen='game'][data-orientation='portrait'] .log-sheet {
  z-index: 15050 !important;
}
body[data-screen='game'][data-orientation='portrait'] #game-log-fab .game-log-fab-copy {
  gap: 6px !important;
}
body[data-screen='game'][data-log-sheet='1'] #game-log-fab {
  display: none !important;
}
body[data-screen='game'] .game-shell.game-over .game-log-fab,
body[data-screen='game'] .game-shell.game-over #game-log-fab {
  z-index: 35 !important;
}
body[data-screen='game'][data-orientation='portrait'] .action-strip .game-log-fab .game-log-fab-status { max-width: min(64vw, 260px); }
body[data-screen='game'][data-orientation='portrait'] .action-strip .game-log-fab-divider {
  height: 15px;
  margin: 0 3px 0 2px;
  background: rgba(233, 244, 255, .34);
}
body[data-log-sheet='1'] .mobile-discard-panel { display: none !important; }
body[data-log-sheet='1'] .side-zone { display: none !important; }
body[data-log-sheet='1'] .side-zone .log-side-card { display: none !important; }
body[data-screen='game'] .log-side-card {
  position: relative;
  background: transparent;
}
body[data-screen='game'] .log-side-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ui-card-grad);
  pointer-events: none;
  z-index: 0;
}
body[data-screen='game'] .log-side-card > * {
  position: relative;
  z-index: 1;
}
.side-card h3 { font-size: .96rem; }
.log-toggle-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 36px;
  line-height: 1.1;
  padding: 0 2px;
  gap: 6px;
}
.log-toggle-text {
  flex: 0 0 auto;
}
.log-toggle-state {
  margin-left: auto;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1;
  opacity: .92;
}
.log-status-inline {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.log-status-separator {
  flex: 0 0 auto;
  color: rgba(233,244,255,.56);
  font-weight: 700;
}
.log-status-copy {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.log-status-copy .game-log-fab-status {
  max-width: 100%;
}
.side-card.collapsed ul { display: none; }
.side-card.collapsed .history-list,
.side-card.collapsed .log-status { display: none; }
.log-side-card.collapsed {
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  align-content: center;
}
.log-side-card.collapsed .log-toggle-title {
  margin: 0;
  min-height: 34px;
}
.history-list {
  display: grid;
  grid-auto-rows: max-content;
  gap: 5px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 7px;
  align-content: start;
  justify-content: stretch;
  align-items: start;
  justify-items: stretch;
}
.side-zone .log-side-card {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}
body[data-screen='game'] .side-zone:not(.log-collapsed) {
  height: 100%;
  min-height: 100%;
  align-self: stretch;
}
body[data-screen='game'] .side-zone:not(.log-collapsed) .log-side-card:not(.collapsed) {
  height: 100%;
  min-height: 100%;
}
body[data-screen='game'] .side-zone:not(.log-collapsed) .history-list {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.side-zone .side-card { align-content: start; }
.history-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 8px;
  padding: 4px 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 3px;
}
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.history-head > * {
  min-width: 0;
}
.history-title {
  font-size: .82rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-time {
  font-size: .7rem;
  color: rgba(218, 232, 240, .7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.history-name {
  font-weight: 700;
  color: #f4f9fb;
}
.history-meta {
  font-size: .74rem;
  color: #e9f3f8;
  font-weight: 700;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-system-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-detail {
  font-size: .72rem;
  line-height: 1.25;
  color: rgba(214, 229, 238, .86);
  overflow-wrap: anywhere;
}
.history-detail-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-wrap: nowrap;
}
.history-detail-row .history-detail {
  flex: 0 0 auto;
  width: 100%;
}
.history-detail-row .history-cards {
  flex: 0 0 auto;
  width: 100%;
  justify-content: flex-start;
}
.history-play-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.log-status {
  width: 100%;
  padding: 6px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
body[data-screen='game'] .log-side-card .log-status {
  width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.history-title .player-color-chip {
  margin-right: 3px;
  transform: translateY(-.5px);
}
.history-avatar-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-color, #7aaed8) 42%, rgba(255,255,255,.2)) inset;
  overflow: hidden;
}
.history-avatar-badge .history-avatar {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--player-color, #7aaed8) 58%, rgba(255,255,255,.28));
}
.history-cards { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%; }
.history-cards .card.mini {
  width: var(--guide-card-w, clamp(36px, 5.7vw, 58px));
  height: var(--guide-card-h, calc(var(--guide-card-w, clamp(36px, 5.7vw, 58px)) * 1.392857));
  overflow: visible;
  flex: 0 0 auto;
  border-radius: 0;
  box-shadow: none;
}
.history-cards .card.mini + .card.mini {
  margin-left: calc(var(--guide-card-w, clamp(36px, 5.7vw, 58px)) * -0.5);
}
.history-cards .card.mini .card-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  border-radius: 0;
}
.side-card ul { margin: 0; padding-left: 16px; color: var(--muted); line-height: 1.45; font-size: .82rem; }

.reveal-panel { border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(5,25,35,.56); padding: 9px; display: grid; gap: 7px; }
.reveal-row { border-radius: 9px; padding: 7px; background: rgba(255,255,255,.08); display: grid; gap: 4px; }
.reveal-name { font-size: .9rem; color: var(--muted); }
.reveal-cards { display: flex; gap: 4px; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .game-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .side-zone { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .history-list { max-height: 24vh; }
}
@media (max-width: 1080px) and (orientation: landscape) {
  body[data-screen='game'] .game-shell {
    --log-col-w: clamp(180px, 30vw, 240px);
    grid-template-columns: minmax(0,1fr) var(--log-col-w);
    grid-template-rows: minmax(0,1fr);
  }
  body[data-screen='game'] .side-zone,
  body[data-screen='game'] .side-zone.log-collapsed {
    width: var(--log-col-w);
    min-width: var(--log-col-w);
    max-width: var(--log-col-w);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr);
    align-content: stretch;
    align-self: stretch;
  }
  body[data-screen='game'] .log-side-card,
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed {
    height: 100%;
    min-height: 0;
  }
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed .history-list,
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed .log-status {
    display: grid;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (max-width: 860px) {
  .opponent-gender-symbol,
  .opponent-gender-icon {
    font-size: .8rem;
  }

  /* Mobile: opponent callouts should appear directly under the opponent avatar. */
  body[data-screen='game'] .seat.north .play-type-call-seat,
  body[data-screen='game'] .seat.north .last-card-call-seat,
  body[data-screen='game'] .seat.north .pass-call.play-type-call-seat,
  body[data-screen='game'] .seat.west .play-type-call-seat,
  body[data-screen='game'] .seat.west .last-card-call-seat,
  body[data-screen='game'] .seat.east .play-type-call-seat,
  body[data-screen='game'] .seat.east .last-card-call-seat {
    top: auto !important;
    bottom: -42px !important;
    left: 50% !important;
    right: auto !important;
    --callout-base-x: 0px;
    --callout-base-y: 0px;
    z-index: 13011 !important;
    max-width: 72vw !important;
    white-space: normal !important;
    text-align: center !important;
  }
  body[data-screen='game'] .seat.north .play-type-call-seat::after,
  body[data-screen='game'] .seat.north .last-card-call-seat::after,
  body[data-screen='game'] .seat.north .pass-call.play-type-call-seat::after,
  body[data-screen='game'] .seat.west .play-type-call-seat::after,
  body[data-screen='game'] .seat.west .last-card-call-seat::after,
  body[data-screen='game'] .seat.east .play-type-call-seat::after,
  body[data-screen='game'] .seat.east .last-card-call-seat::after {
    left: 50% !important;
    right: auto !important;
    top: -14px !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    height: 18px !important;
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
  }
  body[data-screen='game'] .seat.north,
  body[data-screen='game'] .seat.west,
  body[data-screen='game'] .seat.east {
    overflow: visible !important;
  }
  body[data-screen='game'] .seat-motto-callout {
    left: 50% !important;
    transform: translate(calc(-50% + 40px), -6px) scale(1) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .game-shell {
    --callout-scale: 1;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .play-type-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .last-card-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .pass-call.play-type-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .play-type-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .last-card-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .play-type-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .last-card-call-seat {
    max-width: clamp(150px, 66vw, 300px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .play-type-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .last-card-call-seat {
    left: 0 !important;
    right: auto !important;
    --callout-base-x: 0px;
    --callout-base-y: 0px;
    text-align: left !important;
    transform-origin: left top !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.east .play-type-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .last-card-call-seat {
    left: auto !important;
    right: 0 !important;
    --callout-base-x: 0px;
    --callout-base-y: 0px;
    text-align: right !important;
    transform-origin: right top !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .play-type-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .last-card-call-seat,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .pass-call.play-type-call-seat {
    left: clamp(72px, 14vw, 132px) !important;
    right: auto !important;
    --callout-base-x: 0px;
    --callout-base-y: 0px;
    text-align: center !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-name-fixed[data-opponent-name] .play-type-call-seat:not(.callout-with-emote):not(.emote-callout),
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-name-fixed[data-opponent-name] .last-card-call-seat:not(.callout-with-emote):not(.emote-callout),
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-name-fixed[data-opponent-name] .pass-call.play-type-call-seat:not(.callout-with-emote):not(.emote-callout) {
    left: 50% !important;
    right: auto !important;
    --callout-base-x: -50%;
    --callout-base-y: 0px;
    text-align: center !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .play-type-call-seat::after,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .last-card-call-seat::after {
    left: 18px !important;
    right: auto !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.east .play-type-call-seat::after,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .last-card-call-seat::after {
    left: auto !important;
    right: 18px !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .play-type-call-seat::after,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .last-card-call-seat::after,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .pass-call.play-type-call-seat::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body[data-screen='game'][data-orientation='portrait'] .action-strip .play-type-call-self,
  body[data-screen='game'][data-orientation='portrait'] .action-strip .last-card-call-self {
    top: auto !important;
    bottom: calc(100% + 8px + var(--callout-jy, 0px)) !important;
    left: calc(10px + var(--callout-jx, 0px)) !important;
    right: auto !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .play-type-call-self .tail-south,
  body[data-screen='game'][data-orientation='portrait'] .action-strip .last-card-call-self .tail-south {
    left: 27px !important;
    transform: none !important;
  }

  :root {
    --card-w: clamp(46px, 8.6vh, 64px);
    --card-scale: 1 !important;
  }
  body[data-screen='game'] {
    overflow-y: auto;
    --opp-fan-closed-mini-scale: .72;
    --opp-fan-closed-lift-px: -2px;
  }
  body[data-screen='game'] #app {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
  }
  html, body { height: auto; min-height: 100%; }
  body {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #app { padding: 7px; }
  body[data-screen='game'] #app { padding: max(6px, env(safe-area-inset-top)) 7px 0 !important; }
  body[data-screen='home'] #app { padding: 0 7px 7px !important; }
  #app {
    height: auto;
    max-height: none;
    min-height: 100dvh;
  }
  .game-shell {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr) auto;
  }
  .main-zone {
    grid-template-rows: auto minmax(260px, 52dvh) auto;
    min-height: 0;
    overflow: visible;
  }
  .field-grid { grid-template-columns: 1fr; }
  .server-room-grid { grid-template-columns: 1fr; }
  .home-wrap { gap: 8px; }
  .home-panel { padding: 10px; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-sheet { padding: 10px; border-radius: 12px; max-height: 88dvh; }
  .action-row { gap: 6px; }
  .room-ready-toggle {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 2px;
  }
  .room-ready-toggle .toggle-btn {
    min-height: 28px;
    padding: 3px 6px;
    font-size: .72rem;
  }
  .table { padding: 4px; gap: 4px; }
  .table {
    height: auto;
    min-height: 260px;
    max-height: 52dvh;
  }
  .side-zone { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar-right { width: 100%; justify-items: stretch; }
  .topbar-right .control-row {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .topbar-right .control-row button {
    min-height: 40px;
  }
  body[data-screen='game'] .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  body[data-screen='game'] .topbar-right {
    width: 100%;
    justify-items: stretch;
  }
  body[data-screen='game'] .topbar-right .control-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    overflow-x: visible;
    overflow-y: visible;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 32px;
    padding: 3px 5px;
    font-size: clamp(.58rem, 2.1vw, .72rem);
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .score-panel-list { justify-content: flex-start; }
  .lb-row { grid-template-columns: 40px 1fr; }
  .lb-name-line { align-items: center; }
  .lb-meta2 { gap: 6px; }
  .lb-row {
    padding: 9px 10px;
    gap: 7px;
  }
  .lb-avatar {
    width: 32px;
    height: 32px;
  }
  .lb-subline {
    gap: 6px;
    font-size: .7rem;
  }
  .intro-block {
    padding: 7px;
    gap: 6px;
  }
  .intro-home-preview {
    padding: 7px 9px;
    gap: 8px;
  }
  .table {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(74px, auto) minmax(0, 1fr);
    grid-template-areas:
      "west north east"
      "west center east";
    align-items: center;
    gap: 5px;
  }
  .north, .east, .west {
    display: grid !important;
    min-height: 0;
    padding: 4px;
    border: 1px solid var(--player-color, rgba(126,177,215,.6));
    border-radius: 10px;
    background: linear-gradient(160deg, var(--seat-a), var(--seat-b));
  }
  .north { min-height: 74px; align-self: center; }
  .west, .east { align-self: stretch; }
  .east .seat-pack,
  .west .seat-pack,
  .north .seat-pack {
    position: relative !important;
    display: grid;
    align-items: start;
    justify-items: center;
    width: 100%;
    height: 100%;
  }
  .east .seat-section,
  .west .seat-section,
  .north .seat-section {
    width: 100%;
    min-width: 0;
    max-width: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 38px 2px 2px;
  }
  .east .opponent-fan,
  .west .opponent-fan,
  .north .opponent-fan {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-top: 0;
  }
  .east .opponent-fan .closed-back,
  .west .opponent-fan .closed-back,
  .north .opponent-fan .closed-back {
    margin-top: 0 !important;
    margin-left: var(--opp-fan-closed-shift-x) !important;
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  .mobile-opponent-names {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    position: absolute;
    top: 6px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(94%, 560px);
    z-index: 8;
    pointer-events: auto;
  }
  .mobile-opponent-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--player-color, #f4f9fb) 72%, white 28%);
    background: transparent;
    box-shadow: none;
    color: color-mix(in srgb, var(--player-color, #f4f9fb) 82%, #f4f9fb 18%);
    font-size: .84rem;
    font-weight: 700;
  }
  .mobile-opponent-name .player-avatar.mini {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.94);
  }
  .mobile-opponent-name .seat-namecard {
    margin: 0 0 0 4px;
    font-size: .9rem;
    line-height: 1;
  }
  .mobile-opponent-name.active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-color, #ffd166) 56%, transparent);
    background: transparent;
  }
  .mobile-opponent-name .mobile-seat-tag { margin-left: 2px; }
  body[data-screen='game'] .north > .seat-name-fixed,
  body[data-screen='game'] .east > .seat-name-fixed,
  body[data-screen='game'] .west > .seat-name-fixed {
    top: 2px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 0 4px !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .mobile-discard-panel {
    display: grid;
    gap: 8px;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 8;
    pointer-events: auto;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: var(--ui-card-grad);
    overflow: auto;
    max-height: 30vh;
    margin-bottom: 4px;
  }
  .mobile-discard-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--muted);
    font-weight: 700;
  }
  .mobile-discard-row {
    display: grid;
    gap: 4px;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .mobile-discard-row:first-of-type { border-top: 0; padding-top: 0; }
  .mobile-discard-head {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 5px;
    font-size: .8rem;
    line-height: 1.1;
  }
.mobile-discard-time {
  color: rgba(218, 232, 240, .72);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.mobile-discard-name {
  color: color-mix(in srgb, var(--player-color, #f4f9fb) 82%, #f4f9fb 18%);
  font-family: inherit;
  font-style: normal;
  font-size: .84rem;
  font-weight: 700;
}
.mobile-discard-cards {
  display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  .mobile-discard-cards .card.mini {
    width: calc(var(--card-w) * .68);
    height: calc(var(--card-h) * .68);
    flex: 0 0 auto;
  }
  .mobile-discard-pass {
    display: inline-block;
    color: #ffd166;
    font-size: .78rem;
    font-weight: 700;
  }
  .table-center-stack {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: none;
    align-self: stretch;
  }
  .center-last {
    display: block;
    z-index: 12;
  }
  .center-last-west {
    max-width: 24%;
  }
  .center-last-west { left: 4px; }
  .center-last-east {
    right: 18px;
    max-width: none;
  }
  .center-last-west .seat-played {
    gap: 0;
    justify-content: flex-start;
  }
  .center-last-east .seat-played {
    gap: 0;
    justify-content: flex-end;
  }
  .center-last-west .seat-played .card.mini,
  .center-last-east .seat-played .card.mini {
    width: calc(var(--card-w) * 1.24);
    height: calc(var(--card-h) * 1.24);
  }
  .center-last-west .seat-played .card.mini + .card.mini,
  .center-last-east .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--card-w) * -0.72);
  }
  .center-last-east .seat-played { flex-direction: row; justify-content: flex-end; }
  .center-last-east .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--card-w) * -0.72);
    margin-right: 0;
  }
  .action-strip .hand-hint {
    display: none !important;
  }
  .log-side-card {
    display: grid;
    gap: 7px;
    padding: 9px;
  }
  .center-move-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .action-strip {
    padding-top: 8px;
    padding-bottom: 4px;
  }
  .action-strip .hand {
    min-height: calc(var(--card-h) * 1.08 + 14px);
    padding-top: 6px;
  }
  .action-strip .control-row {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .drag-popup {
    display: none !important;
  }
  .action-strip .hand {
    overflow: hidden;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    transform-origin: center center;
  }
  .action-strip .hand .hand-card + .hand-card {
    margin-left: calc(var(--card-w) * -0.58) !important;
  }
  .action-strip .control-row button {
    min-height: 40px;
    white-space: nowrap;
  }
  .east .opponent-fan,
  .west .opponent-fan,
  .north .opponent-fan {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: none;
    overflow: visible;
  }
  .east .opponent-fan .card.back.mini.closed-back,
  .west .opponent-fan .card.back.mini.closed-back,
  .north .opponent-fan .card.back.mini.closed-back {
    width: calc(var(--card-w) * var(--opp-fan-closed-mini-scale));
    height: calc(var(--card-h) * var(--opp-fan-closed-mini-scale));
    margin-left: var(--opp-fan-closed-shift-x) !important;
    transform-origin: center center;
  }
  .east .opponent-fan .card.back.mini.closed-back {
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  .west .opponent-fan .card.back.mini.closed-back {
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  .north .opponent-fan .card.back.mini.closed-back {
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  .north .opponent-fan .card.back.mini.closed-back:first-child {
    margin-left: 0 !important;
  }
}
@media (max-width: 420px) {
  body[data-screen='game'] .topbar-right .control-row {
    gap: 2px;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    min-height: 30px;
    padding: 2px 4px;
    font-size: .56rem;
  }
}
body[data-screen='game'][data-orientation='portrait'] .action-strip .hand-hint {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(6, 18, 30, .62);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(240, 248, 255, .9);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
@media (max-width: 1220px) and (orientation: portrait) {
  body[data-screen='game'] .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
  }
  body[data-screen='game'] .topbar > div:first-child {
    flex: 1 1 100%;
    max-width: 100%;
  }
  body[data-screen='game'] .topbar-right {
    width: 100%;
    justify-items: stretch;
  }
  body[data-screen='game'] .topbar-right .control-row {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    overflow-x: visible;
    overflow-y: visible;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    flex: 0 0 auto;
    min-width: fit-content;
    min-height: 28px;
    padding: 2px 4px;
    font-size: clamp(.50rem, .95vw, .66rem);
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}
@media (max-width: 600px) {
  #app { padding: 5px; }
  body[data-screen='game'] #app { padding: max(6px, env(safe-area-inset-top)) 5px 0 !important; }
  body[data-screen='home'] #app { padding: 0 5px max(14px, env(safe-area-inset-bottom)) !important; }
  body[data-screen='home'] .royal-home-wrap {
    margin-top: 0 !important;
  }
  .score-guide-table-wrap { overflow-x: auto; }
  .hero { padding: 0 12px; border-radius: 14px; }
  .hero h1 { font-size: 1.25rem; line-height: 1.15; }
  .home-panel { padding: 8px; border-radius: 14px; gap: 8px; }
  .royal-home-panel { border-radius: 16px; }
  .royal-home-head { padding: 8px 8px 2px; }
  .royal-head-actions { justify-content: center; gap: 6px; }
  .royal-head-actions button { font-size: .66rem; padding: 2px 5px; }
  .royal-home-body { margin: 0 6px 8px; padding: 8px 9px 9px; border-radius: 12px; }
  .royal-home-body .home-form-left {
    border-right: 0;
    padding-right: 0;
  }
  .royal-home-body .home-start-row {
    justify-content: center;
    min-height: 0;
    flex-wrap: nowrap;
  }
  .royal-home-body .home-start-row .hint {
    position: static;
    transform: none;
    text-align: left;
    white-space: nowrap;
    max-width: none;
    margin-left: 8px;
  }
  .home-form-grid { grid-template-columns: 1fr; gap: 8px; }
  .royal-home-body .home-audio-voice-row { grid-template-columns: 1fr; }
  .config-audio-voice-row { grid-template-columns: 1fr; }
  .field span { font-size: .78rem; }
  input, select { padding: 7px 9px; }
  .action-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .action-row button { width: 100%; padding: 7px 8px; }
  .option-combo .combo-btn {
    min-height: 40px;
  }
  .name-with-google {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  #google-name-inline {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 0;
  }
  #google-name-inline .auth-btn { width: auto; }
  .intro-sheet {
    padding: 12px;
    border-radius: 14px;
    max-height: 88dvh;
  }
  .opponent-profile-sheet {
    padding: 10px;
  }
  .room-card,
  .room-lobby-card {
    width: min(640px, calc(100vw - 16px));
    padding: 12px;
  }
  .room-lobby-card {
    gap: 10px;
  }
  .room-card {
    gap: 10px;
  }
  .room-head {
    gap: 4px;
  }
  .room-card h3 {
    font-size: 1.02rem;
  }
  .room-meta-row,
  .room-actions,
  .room-privacy-row {
    gap: 6px;
  }
  .room-join-card .room-actions {
    justify-content: flex-end;
  }
  .room-privacy-row {
    align-items: flex-start;
  }
  .room-privacy-row button,
  .room-card-join-btn,
  .room-join-top-btn {
    width: auto;
  }
  .room-privacy-row button {
    min-width: 120px;
  }
  .room-card-join-btn {
    min-width: 96px;
  }
  .room-join-top-btn {
    min-width: 116px;
  }
  .room-join-divider {
    gap: 8px;
    margin: 0;
    font-size: .7rem;
  }
  .room-card-join-inline {
    width: auto;
    margin-left: 0;
  }
  .room-privacy-row .toggle-combo .toggle-btn {
    min-width: 0;
    flex: 0 0 auto;
  }
  .room-id-center {
    padding: 5px 8px;
  }
  .room-id-center-with-qr {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 6px 8px;
  }
  .room-id-divider {
    width: 100%;
    height: 1px;
  }
  .room-roomid-box,
  .room-lobby-qr-box {
    width: min(96px, 100%);
  }
  .room-roomid-box {
    width: 100%;
  }
  .room-lobby-main {
    width: 100%;
  }
  .room-lobby-copy-subtitle {
    max-width: none;
  }
  .room-lobby-qr {
    max-width: 96px;
  }
  .room-lobby-qr-caption {
    white-space: normal;
  }
  .room-roomid-stack,
  .room-share-box {
    width: 100%;
  }
  .room-share-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .room-code-row-segmented {
    gap: 8px;
  }
  .room-code-segments {
    gap: 6px;
  }
  .room-code-box {
    min-height: 36px;
    border-radius: 10px;
    font-size: 1.2rem;
  }
  .room-code-input-overlay {
    padding-right: 112px;
  }
  .room-code-field {
    padding: 10px 10px 12px;
    border-radius: 16px;
  }
  .room-code-field-head {
    gap: 8px;
  }
  .room-code-field > span {
    font-size: .84rem;
  }
  .room-code-hint {
    font-size: .68rem;
  }
  .room-code-extra {
    gap: 6px;
  }
  .room-paste-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
  .room-copy-btn {
    min-width: 0;
  }
  .room-share-link-btn {
    min-width: 0;
  }
  .room-share-copy-btn {
    min-width: 0;
  }
  .room-share-action-btn {
    min-width: 0;
  }
  .room-code {
    letter-spacing: .2em;
    font-size: 1.18rem;
  }
  .room-start-subtitle {
    font-size: .68rem;
  }
  .room-share-panel {
    padding: 10px;
    gap: 10px;
  }
  .room-invite-card {
    width: min(600px, calc(100vw - 20px));
  }
  .room-share-head {
    flex-wrap: wrap;
  }
  .room-share-grid-simple {
    grid-template-columns: 1fr;
  }
  .room-share-left {
    justify-items: center;
  }
  .room-share-right {
    gap: 8px;
  }
  .room-share-panel-simple .room-invite-qr {
    width: min(188px, 100%);
  }
  .room-share-hero {
    grid-template-columns: 1fr;
  }
  .room-share-code-pill {
    justify-content: center;
    padding: 8px 10px;
  }
  .room-share-icon-row {
    gap: 8px;
  }
  .room-share-inline-actions {
    gap: 6px;
  }
  .room-share-mini-btn {
    min-height: 40px;
    border-radius: 14px;
    width: 40px;
  }
  .room-share-link-icon {
    font-size: 19px;
  }
  .room-share-mini-icon {
    font-size: 20px;
  }
  .room-share-grid {
    grid-template-columns: 1fr;
  }
  .room-share-qr-col {
    justify-items: stretch;
  }
  .room-share-qr {
    min-height: 0;
  }
  .room-invite-qr {
    max-width: 170px;
  }
  .room-share-actions {
    gap: 6px;
  }
  .room-share-code-row {
    padding: 7px 9px;
  }
  .room-active-block {
    padding: 8px;
    gap: 8px;
  }
  .room-active-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .room-active-grid {
    gap: 10px;
    max-height: 36vh;
  }
  .room-card-top {
    gap: 8px;
  }
  .room-seat-strip {
    gap: 5px;
  }
  .room-seat-mini {
    width: 36px;
    height: 36px;
  }
  .room-lobby-list {
    padding: 10px;
  }
  .lobby-seat {
    min-height: 96px;
    padding: 9px 8px 10px;
  }
  .lobby-seat-avatar {
    width: 42px;
    height: 42px;
  }
}
@media (max-width: 860px) and (orientation: landscape) {
  body[data-screen='home'] #app {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px !important;
  }
  body[data-screen='home'] .royal-home-wrap {
    margin: 0 !important;
    width: min(100%, 760px);
  }
  .intro-sheet {
    padding: 12px;
    border-radius: 14px;
  }
  .opponent-profile-sheet {
    padding: 10px;
  }
  .room-card,
  .room-lobby-card {
    width: min(640px, calc(100vw - 16px));
    padding: 12px;
  }
  .royal-home-body .home-form-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .royal-home-body .home-start-row {
    flex-wrap: nowrap;
    justify-content: center;
  }
  .royal-home-body .home-start-row .hint {
    text-align: left;
    white-space: nowrap;
    margin-left: 8px;
  }
  /* Match desktop/web layout in mobile landscape. */
  body[data-screen='game'] #app {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
  }
  body[data-screen='game'] .game-shell {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0,1fr) 286px !important;
    grid-template-rows: minmax(0,1fr) !important;
    gap: 8px;
  }
  body[data-screen='game'] .main-zone {
    grid-template-rows: auto minmax(0,1fr) auto !important;
    min-height: 0;
    overflow: visible;
  }
  body[data-screen='game'] .table {
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  body[data-screen='game'] .side-zone {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0,1fr);
    min-height: 0;
    max-height: 100%;
  }
  body[data-screen='game'] .side-zone .log-side-card {
    height: 100%;
  }
  body[data-screen='game'] .history-list {
    max-height: 100% !important;
    overflow-y: auto !important;
  }
  body[data-screen='game'] .topbar {
    flex-direction: row;
    align-items: center;
  }
  body[data-screen='game'] .topbar-right {
    width: auto;
    justify-items: end;
  }
  body[data-screen='game'] .topbar-right .control-row {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
@media (max-width: 860px) and (orientation: landscape) and (pointer: coarse) {
  body[data-screen='game'] #app {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    padding: max(4px, env(safe-area-inset-top)) 6px 0 !important;
  }
  body[data-screen='game'] .game-shell {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }
  body[data-screen='game'] .main-zone {
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }
  body[data-screen='game'] .table {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }
  body[data-screen='game'] .side-zone {
    grid-template-columns: 1fr !important;
    max-height: 24dvh !important;
    min-height: 0 !important;
  }
  body[data-screen='game'] .side-zone .log-side-card {
    min-height: 0 !important;
  }
  body[data-screen='game'] .topbar {
    padding: 6px 8px !important;
    gap: 5px !important;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    min-height: 28px !important;
    padding: 2px 6px !important;
    font-size: clamp(.58rem, 1.8vh, .7rem) !important;
  }
  body[data-screen='game'] .action-strip {
    padding: 6px 8px 8px !important;
    gap: 4px !important;
    overflow: visible !important;
    position: relative !important;
  }
  body[data-screen='game'] .action-strip .player-tag {
    position: absolute !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    transform: none !important;
    z-index: 12 !important;
    margin: 0 !important;
  }
  body[data-screen='game'] .action-strip .control-row button {
    min-height: 30px !important;
    padding: 3px 7px !important;
    font-size: .72rem !important;
  }
  body[data-screen='game'] .action-strip .hand {
    min-height: calc(var(--card-h) * 1.02 + 10px) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body[data-screen='game'] .action-strip .hand .hand-card {
    height: calc(var(--card-h) * 1.02) !important;
    width: auto !important;
  }
  body[data-screen='game'] .north .seat-played .card.mini,
  body[data-screen='game'] .west .seat-played .card.mini,
  body[data-screen='game'] .east .seat-played .card.mini,
  body[data-screen='game'] .center-last-north .seat-played .card.mini,
  body[data-screen='game'] .center-last-west .seat-played .card.mini,
  body[data-screen='game'] .center-last-east .seat-played .card.mini {
    width: auto !important;
    height: auto !important;
  }
  body[data-screen='game'] .north .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .west .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .east .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .center-last-north .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .center-last-west .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .center-last-east .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--card-w) * -0.72) !important;
  }
}
body[data-screen='home'] .score-guide-modal,
body[data-screen='game'] .score-guide-modal,
body[data-screen='home'] .intro-modal,
body[data-screen='game'] .intro-modal {
  --guide-card-w: clamp(36px, 5.7vw, 58px);
  --guide-card-h: calc(var(--guide-card-w) * 1.392857);
}
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='home'] #app {
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(12px, 3vh, 24px) 8px 8px !important;
  }
  body[data-screen='home'] .royal-home-wrap {
    margin: 0 !important;
    width: min(100%, 760px);
  }
  body[data-screen='home'] .royal-head-actions {
    margin-bottom: 8px;
  }
  body[data-screen='game'] .game-logo-block .game-flag {
    transform: translateX(calc(-50% + 54px));
  }
  .royal-home-body .home-form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .royal-home-body .home-form-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }
  .royal-home-body .home-form-more {
    display: none;
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }
  .royal-home-wrap.home-more-settings-open .royal-home-body .home-form-more {
    display: grid;
  }
  .royal-home-body .home-form-right .home-section-title {
    grid-column: 1 / -1;
    order: -3;
  }
  .royal-home-body .home-form-right .field-ai {
    grid-column: 1;
    order: 1;
  }
  .royal-home-body .home-form-right .field-sound {
    grid-column: 2;
    order: 1;
  }
  .royal-home-body .home-profile-card {
    order: 0;
  }
  .royal-home-body .field-ai-left {
    order: 2;
  }
  .royal-home-body .field-cardback-right {
    display: grid;
    grid-column: 1 / -1;
    order: -2;
  }
  .royal-home-body .home-more-settings-toggle {
    grid-column: 1 / -1;
    order: 2;
  }
  .royal-home-body .home-form-more .more-settings-panel {
    grid-column: 1 / -1;
    order: 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .royal-home-body .more-settings-panel .field {
    min-width: 0;
  }
  .royal-home-body .field-cardback-left {
    display: none;
  }
  body[data-screen='game'] {
    --center-discard-scale: 1.18;
  }
  body[data-screen='game'] .table-emote,
  body[data-screen='game'] .self-table-emote {
    --emote-base-w: clamp(120px, 24vmin, 190px);
    --emote-throw-w: clamp(145px, 28vmin, 220px);
    --emote-smash-w: clamp(150px, 29vmin, 230px);
    --emote-cheers-w: clamp(150px, 30vmin, 230px);
    --emote-love-w: clamp(135px, 26vmin, 205px);
    --emote-crack-w: clamp(135px, 26vmin, 205px);
    --emote-sleep-w: clamp(125px, 24vmin, 195px);
    --emote-rude-w: clamp(180px, 34vmin, 260px);
    --emote-rude-h: clamp(118px, 22vmin, 170px);
  }
  .royal-home-body .home-form-left {
    border-right: 0;
    padding-right: 0;
  }
  .royal-home-body .home-start-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
  }
  .royal-home-body .home-start-row .hint {
    position: static;
    transform: none;
    text-align: center;
  }
  .royal-home-body .home-start-row button {
    width: auto;
    min-width: max-content;
  }
  .intro-head > div {
    min-width: 0;
    flex: 1 1 auto;
  }
  .intro-head > button.secondary {
    white-space: nowrap !important;
    word-break: keep-all;
    overflow-wrap: normal;
    flex: 0 0 auto;
    min-width: fit-content;
    line-height: 1.1;
    padding: 6px 10px;
    font-size: .76rem;
  }
}
@media (max-width: 860px) and (orientation: portrait) and (min-height: 760px) {
  body[data-screen='home'] #app {
    justify-content: flex-start;
    padding-top: clamp(10px, 3vh, 24px) !important;
  }
  body[data-screen='home'] .home-wrap {
    min-height: calc(100dvh - clamp(10px, 3vh, 24px) - 10px) !important;
  }
}
body[data-orientation='portrait'] .table { --table-tilt: 0deg; }
body[data-orientation='landscape'] .table { --table-tilt: 0deg; }

@keyframes playIn {
  from { transform: translateY(10px) scale(.92); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes playTypeCallPop {
  0% { transform: translateY(7px) scale(.76) rotate(-2deg); opacity: 0; }
  62% { transform: translateY(-2px) scale(1.12) rotate(0deg); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes playTypeCallPulse {
  from { filter: saturate(1) brightness(1); }
  to { filter: saturate(1.22) brightness(1.16); }
}

@keyframes flipIn {
  from { transform: rotateY(90deg); opacity: .1; }
  to { transform: rotateY(0deg); opacity: 1; }
}

.play-in {
  animation: playIn .24s ease-out both;
}

.flip-in {
  transform-origin: center;
  animation: flipIn .45s ease-out both;
}

@keyframes flipInSide90 {
  from { transform: rotate(90deg) rotateY(90deg); opacity: .1; }
  to { transform: rotate(90deg) rotateY(0deg); opacity: 1; }
}

.west .opponent-fan .card.face.mini.flip-in,
.east .opponent-fan .card.face.mini.flip-in {
  animation: flipInSide90 .45s ease-out both;
}

.congrats-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(3, 12, 22, .62);
  backdrop-filter: blur(4px);
}
.congrats-card {
  width: min(420px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(160deg, rgba(16, 45, 72, .95), rgba(8, 30, 49, .95));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  padding: 16px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.congrats-card h3 { margin: 0; font-size: 1.3rem; }
.congrats-card .room-expiry-row,
.result-card .room-expiry-row {
  justify-self: center;
}
.room-expiry-row.room-expiry-top {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 12020;
  width: auto;
  justify-content: flex-end;
  align-self: start;
  justify-self: end;
  background: linear-gradient(180deg, rgba(8, 27, 44, .98), rgba(8, 27, 44, .84));
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

.result-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 10px;
  background: rgba(3, 12, 22, .62);
  backdrop-filter: blur(3px);
  overflow: visible;
}
.result-screen .result-confetti {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 1;
  animation: confettiBurst 1500ms ease-out both;
  mix-blend-mode: screen;
}
.result-screen .result-confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.result-screen .result-card {
  position: relative;
  z-index: 55;
}
.log-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  display: grid;
  align-items: end;
  justify-items: stretch;
 }
.log-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(3, 12, 22, .62);
  backdrop-filter: blur(3px);
 }
.log-sheet-panel {
  position: relative;
  width: 100%;
  max-height: 70dvh;
  overflow: hidden;
}
body[data-screen='game'][data-log-sheet='1'] .game-foreground-layer {
  display: none !important;
}
body[data-screen='game'][data-coach-marks='1'] .game-foreground-layer,
body[data-screen='game'][data-coach-marks='1'] :is(
  .play-type-call,
  .last-card-call,
  .emote-callout,
  .food-callout-seat,
  .seat-motto-callout,
  .self-table-emote,
  .table-emote
) {
  display: none !important;
}
body[data-screen='game'][data-coach-marks='1'] .game-shell :is(
  .play-type-call,
  .last-card-call,
  .emote-callout,
  .food-callout-seat,
  .seat-motto-callout,
  .self-table-emote,
  .table-emote
) {
  display: none !important;
}
.log-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
 }
.log-sheet-panel .history-list {
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
body[data-log-sheet='1'] .log-sheet-panel.log-side-card {
  padding: 9px;
  gap: 7px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  align-content: stretch;
}
body[data-log-sheet='1'] .log-sheet-panel .log-toggle-title {
  min-height: 36px;
  height: 36px;
  font-size: .96rem;
}
body[data-log-sheet='1'] .history-list {
  padding: 7px !important;
  gap: 5px !important;
}
body[data-log-sheet='1'] .history-item {
  padding: 4px 6px !important;
  gap: 3px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
body[data-log-sheet='1'] .history-head {
  gap: 6px !important;
}
body[data-log-sheet='1'] .history-title {
  font-size: .82rem !important;
}
body[data-log-sheet='1'] .history-time {
  font-size: .7rem !important;
}
body[data-log-sheet='1'] .history-detail {
  font-size: .72rem !important;
  line-height: 1.25 !important;
}
body[data-log-sheet='1'] .history-detail-row {
  gap: 2px !important;
  flex-wrap: nowrap !important;
}
body[data-log-sheet='1'] .history-cards {
  gap: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: auto !important;
  mask-size: auto !important;
  -webkit-mask-repeat: repeat !important;
  mask-repeat: repeat !important;
}
body[data-log-sheet='1'] .history-cards .card.mini {
  width: var(--guide-card-w, clamp(36px, 5.7vw, 58px)) !important;
  height: var(--guide-card-h, calc(var(--guide-card-w, clamp(36px, 5.7vw, 58px)) * 1.392857)) !important;
}
body[data-log-sheet='1'] .history-cards .card.mini + .card.mini {
  margin-left: calc(var(--guide-card-w, clamp(36px, 5.7vw, 58px)) * -0.5) !important;
}
body[data-screen='game'] .congrats-screen,
body[data-screen='game'] .result-screen {
  z-index: 12000;
}
.result-card {
  width: min(900px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, rgba(14, 38, 60, .97), rgba(8, 27, 44, .97));
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  padding: 8px;
  display: grid;
  gap: 6px;
}
body[data-screen='game'] .result-card::before {
  content: none;
}
body[data-screen='game'] .result-card > * {
  position: relative;
  z-index: auto;
}
body[data-screen='game'] .result-card .room-expiry-row.room-expiry-top {
  position: absolute;
  top: 6px;
  right: 6px;
  grid-column: 1 / -1;
  justify-self: end;
  align-self: start;
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.result-list {
  display: grid;
  gap: 6px;
}
.result-row {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  padding: 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
}
.result-row.winner {
  border-color: color-mix(in srgb, var(--winner-color, #ffd166) 75%, white 25%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--winner-color, #ffd166) 40%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--winner-color, #ffd166) 85%, white 15%);
}
.result-main {
  display: grid;
  gap: 3px;
  min-width: 0;
  position: relative;
}
.result-side {
  display: grid;
  gap: 4px;
  justify-items: end;
  align-content: start;
  min-width: max-content;
}
.result-head {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.result-player-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding-right: 16px;
}
.result-winner-medal {
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 6px;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.4))
    drop-shadow(0 0 8px color-mix(in srgb, var(--winner-color, #ffd166) 70%, transparent));
  transform-origin: center;
  animation: crownPop .6s ease-out both, crownGlow 1.8s ease-in-out infinite;
  position: relative;
  top: -1px;
  pointer-events: none;
}
.result-winner-tag {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--winner-color, #ffd166) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--winner-color, #ffd166) 65%, white 35%);
  color: color-mix(in srgb, var(--winner-color, #ffd166) 85%, white 15%);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
  min-width: max-content;
  flex: 0 0 auto;
}
.result-meta {
  color: var(--muted);
  font-size: .82rem;
}
.result-score-detail {
  color: #d7e8f6;
  font-size: .8rem;
  line-height: 1.35;
}
.result-screen .result-row.winner {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 219, 138, .12), transparent 55%),
    rgba(255,255,255,.06);
}
@keyframes crownPop {
  0% { transform: scale(.6) rotate(-8deg); opacity: .2; }
  70% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes crownGlow {
  0%, 100% { filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)) drop-shadow(0 0 8px color-mix(in srgb, var(--winner-color, #ffd166) 70%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--winner-color, #ffd166) 45%, transparent)); }
  50% { filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)) drop-shadow(0 0 12px color-mix(in srgb, var(--winner-color, #ffd166) 85%, transparent)) drop-shadow(0 0 26px color-mix(in srgb, var(--winner-color, #ffd166) 60%, transparent)); }
}
.result-card-block {
  display: inline-grid;
  gap: 3px;
  padding: 3px 4px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  width: fit-content;
  max-width: none;
  justify-items: end;
}
.result-block-title {
  font-size: .75rem;
  font-weight: 800;
  color: #d9ebff;
  letter-spacing: .01em;
  white-space: nowrap;
  text-align: right;
}
.result-score-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.1);
  font-size: .74rem;
  color: #f4f9fb;
}
.result-score-chip.boosted {
  border-color: rgba(255, 209, 102, .72);
  background: linear-gradient(180deg, rgba(255, 209, 102, .28), rgba(255, 209, 102, .12));
  color: #ffe8a3;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, .2), 0 0 10px rgba(255, 209, 102, .2);
  font-weight: 800;
}
.result-score-chip.penalty {
  border-color: rgba(255, 110, 110, .68);
  background: linear-gradient(180deg, rgba(255, 93, 93, .28), rgba(182, 38, 38, .16));
  color: #ffd1d1;
  box-shadow: 0 0 0 1px rgba(255, 93, 93, .18), 0 0 10px rgba(255, 93, 93, .16);
  font-weight: 800;
}
.result-confidential-stamp {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
  z-index: 3;
  pointer-events: none;
  padding: 9px 22px;
  border-radius: 7px;
  border: 4px solid rgba(203, 35, 35, .95);
  background: rgba(158, 24, 24, .9);
  color: rgba(255, 232, 232, .98);
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 220, .16),
    0 10px 20px rgba(0, 0, 0, .28);
  mix-blend-mode: normal;
}
.result-cards {
  --guide-card-w: clamp(36px, 5.7vw, 58px);
  --guide-card-h: calc(var(--guide-card-w) * 1.392857);
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  min-height: var(--guide-card-h);
}
@media (max-width: 760px) {
  .result-row {
    grid-template-columns: minmax(0, 1fr) minmax(140px, .65fr);
  }
  .result-side {
    width: auto;
    justify-items: end;
    justify-self: end;
  }
  .result-card-block {
    max-width: 100%;
  }
  .result-cards {
    max-width: 180px;
  }
}

/* Final game-panel override: keep center + opponent panels visually aligned with topbar glass style. */
body[data-screen='game'] .table-center-grid-wrap,
body[data-screen='game'] .north,
body[data-screen='game'] .east,
body[data-screen='game'] .west,
body[data-screen='game'] .north .seat-section {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(130deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(8,25,42,.65) !important;
}
/* Hard-disable legacy center wrapper if present in stale clients. */
body[data-screen='game'] .table-center-stack .table-center-grid-wrap {
  display: none !important;
}

/* Slightly darker N/S/W/E panels with the same tint strength */
body[data-screen='game'] .north,
body[data-screen='game'] .east,
body[data-screen='game'] .west,
body[data-screen='game'] .action-strip {
  background: transparent !important;
  box-shadow: none !important;
}

/* Game table shell: wood border around the centered felt area. */
body[data-screen='game'] .table {
  background-color: #a68664 !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.05) 0 1px,
      transparent 1px 4px
    ),
    repeating-radial-gradient(
      ellipse at 50% 180%,
      transparent 0 50px,
      rgba(0,0,0,.04) 52px,
      transparent 55px,
      rgba(255,255,255,.05) 100px,
      transparent 105px
    ),
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(0,0,0,.05) 0%, transparent 50%),
    linear-gradient(90deg, #a68664 0%, #c5a47e 50%, #a68664 100%) !important;
  background-blend-mode: multiply, screen, soft-light, normal !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: clamp(12px, 1.7vw, 20px) !important;
  box-shadow:
    0 30px 60px rgba(0,0,0,.38),
    inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 -2px 4px rgba(0,0,0,.2) !important;
}
body[data-screen='game'] .table::before {
  content: '';
  position: absolute;
  inset: clamp(12px, 1.7vw, 20px);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(0,0,0,.012) 1px 2px,
      transparent 2px 4px
    ),
    radial-gradient(circle at 50% 20%, #41753a 0%, #1a3c1a 90%) !important;
  box-shadow: none !important;
  pointer-events: none;
  z-index: 0;
}
body[data-screen='game'] .table::after {
  content: none !important;
}
body[data-screen='game'] .table > * {
  position: relative;
}

/* Center layer stays transparent so the full inner table felt shows through. */
body[data-screen='game'] .table-center-stack {
  border-radius: clamp(22px, 3vw, 34px);
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Discard zone felt tone (snooker green). */
body[data-screen='game'] .table-center-grid-wrap {
  border-color: rgba(245, 232, 204, .22) !important;
  background:
    linear-gradient(rgba(12, 30, 16, .22), rgba(12, 30, 16, .22)) !important;
  backdrop-filter: blur(1.4px);
}
body[data-screen='game'] .table-turn-compass {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  z-index: 5;
  pointer-events: none;
}
body[data-screen='game'] .table-turn-compass-ring {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ffd166;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
body[data-screen='game'] .table-turn-compass .table-turn-pointer {
  width: 58px;
  height: 58px;
  display: block;
  color: #d8d8d8;
  filter: drop-shadow(0 0 4px color-mix(in srgb, #d8d8d8 26%, transparent));
  opacity: .4;
}
body[data-screen='game'] .table-turn-compass[data-active-seat='south'] .table-turn-pointer {
  opacity: 1;
  color: #d8d8d8;
  filter: drop-shadow(0 0 6px rgba(216,216,216,.34));
}
body[data-screen='game'] .table .coach-marks-badge {
  position: absolute;
  top: calc(var(--table-felt-inset) + 8px);
  right: calc(var(--table-felt-inset) + 8px);
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8, 24, 38, .24);
  color: rgba(244,249,251,.72);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483450;
  opacity: .66;
  flex: 0 0 auto;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body[data-screen='game'] .table .coach-marks-badge:hover,
body[data-screen='game'] .table .coach-marks-badge:active,
body[data-screen='game'] .table .coach-marks-badge:focus-visible {
  opacity: 1;
  border-color: rgba(255,255,255,.24);
  background: rgba(8, 24, 38, .34);
}
body[data-screen='game'] .table .coach-marks-badge svg {
  width: 30px;
  height: 30px;
  display: block;
}
body[data-screen='game'] .table .coach-marks-badge img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

body[data-screen='game'][data-orientation='portrait'] .table {
  padding: clamp(12px, 2.1vw, 20px) !important;
}
body[data-screen='game'][data-orientation='portrait'] {
  --table-felt-inset: clamp(12px, 2.1vw, 20px);
}

body[data-screen='game'] .north .seat-section {
  overflow: visible !important;
}

/* Name badges for all seats (S/N/W/E): outlined with light text, no color dot. */
body[data-screen='game'] .seat-name-fixed,
body[data-screen='game'] .action-strip .player-tag {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 70%, white 30%) !important;
  color: color-mix(in srgb, var(--player-color, #f4f9fb) 82%, #f4f9fb 18%) !important;
}
body[data-screen='game'] .seat-name-fixed .name,
body[data-screen='game'] .seat-name-fixed .seat-name-text,
body[data-screen='game'] .action-strip .player-tag .name,
body[data-screen='game'] .action-strip .player-tag .seat-name-text {
  color: color-mix(in srgb, var(--player-color, #f4f9fb) 82%, #f4f9fb 18%) !important;
  text-shadow: none !important;
  gap: 0 !important;
}
body[data-screen='game'] .seat-name-fixed .player-color-chip,
body[data-screen='game'] .action-strip .player-tag .player-color-chip {
  display: none !important;
}
body[data-screen='game'] .seat-name-fixed .seat-count-tag,
body[data-screen='game'] .action-strip .player-tag .seat-count-tag {
  margin-left: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--game-seat-count-size);
  height: var(--game-seat-count-size);
  border-radius: 999px;
  background: var(--player-color, #ffd166) !important;
  border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 70%, black 30%) !important;
  color: #0a1711 !important;
  font-weight: 800;
  font-size: var(--game-seat-count-font-size);
  line-height: 1;
  padding: 0;
}
body[data-screen='game'] .intro-modal,
body[data-screen='game'] .intro-backdrop,
body[data-screen='game'] .lb-modal,
body[data-screen='game'] .score-guide-modal,
body[data-screen='game'] .score-guide-backdrop,
body[data-screen='game'] .lb-backdrop {
  display: grid;
  pointer-events: auto;
}
body[data-screen='game'] .intro-modal,
body[data-screen='game'] .lb-modal,
body[data-screen='game'] .score-guide-modal {
  z-index: 2147483647 !important;
}

/* Make opponent (N/E/W) panels larger and transparent like reference. */
@media (min-width: 861px) {
  body[data-screen='game'] .action-strip .control-row {
    flex-wrap: nowrap;
  }
  body[data-screen='game'] .action-strip .control-row .room-top-meta {
    margin-left: auto;
    order: 5;
    margin-right: 2px;
  }
  body[data-screen='game'][data-game-mode='room'] .action-strip .control-row #auto-sort-btn { order: 6; margin-left: 0 !important; }
  body[data-screen='game'] .action-strip .control-row #emote-toggle { order: 7; }
  body[data-screen='game'] .action-strip .control-row #bell-toggle { order: 8; }
  body[data-screen='game'][data-game-mode='room'] .action-strip .control-row #auto-sort-btn {
    margin-left: auto !important;
  }
  body[data-screen='game'] .table {
    grid-template-columns: minmax(108px, .72fr) minmax(0, 2.1fr) minmax(108px, .72fr);
    grid-template-rows: minmax(92px, auto) minmax(0, 1fr);
  }
  body[data-screen='game'] .north,
  body[data-screen='game'] .east,
  body[data-screen='game'] .west,
  body[data-screen='game'] .north .seat-section,
  body[data-screen='game'] .east .seat-section,
  body[data-screen='game'] .west .seat-section {
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-screen='game'] .north,
  body[data-screen='game'] .east,
  body[data-screen='game'] .west {
    border-color: rgba(224, 241, 226, .28) !important;
  }
  body[data-screen='game'] .east .seat-section,
  body[data-screen='game'] .west .seat-section {
    min-width: 148px;
    max-width: 148px;
  }
  body[data-screen='game'] .north .seat-section {
    min-height: 84px;
  }
  body[data-screen='game'] .north > .seat-name-fixed,
  body[data-screen='game'] .east > .seat-name-fixed,
  body[data-screen='game'] .west > .seat-name-fixed {
    padding: 5px 11px !important;
    min-height: 42px;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-screen='game'] .north > .seat-name-fixed .name,
  body[data-screen='game'] .east > .seat-name-fixed .name,
  body[data-screen='game'] .west > .seat-name-fixed .name {
    gap: 8px !important;
    font-size: .92rem;
  }
body[data-screen='game'] .north > .seat-name-fixed .player-avatar,
body[data-screen='game'] .east > .seat-name-fixed .player-avatar,
body[data-screen='game'] .west > .seat-name-fixed .player-avatar {
    width: 40px !important;
    height: 40px !important;
  }
  body[data-screen='game'] .north > .seat-name-fixed .seat-name-text,
  body[data-screen='game'] .east > .seat-name-fixed .seat-name-text,
  body[data-screen='game'] .west > .seat-name-fixed .seat-name-text {
    font-size: .88rem !important;
  }
  body[data-screen='game'] .north > .seat-name-fixed .seat-subline,
  body[data-screen='game'] .east > .seat-name-fixed .seat-subline,
  body[data-screen='game'] .west > .seat-name-fixed .seat-subline {
    font-size: .8rem;
  }
  body[data-screen='game'] .north > .seat-name-fixed .seat-count-tag,
  body[data-screen='game'] .east > .seat-name-fixed .seat-count-tag,
  body[data-screen='game'] .west > .seat-name-fixed .seat-count-tag {
    width: 22px;
    height: 22px;
    font-size: .78rem !important;
  }
}

body[data-screen='game'] .north > .seat-name-fixed,
body[data-screen='game'] .east > .seat-name-fixed,
body[data-screen='game'] .west > .seat-name-fixed {
  border: 0 !important;
  box-shadow: none !important;
}
body[data-screen='game'] .action-strip .seat-name-fixed.player-tag {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-screen='game'] .north > .seat-name-fixed .seat-name-text,
body[data-screen='game'] .east > .seat-name-fixed .seat-name-text,
body[data-screen='game'] .west > .seat-name-fixed .seat-name-text {
  color: rgba(230, 243, 236, .95) !important;
  text-shadow: none !important;
}
body[data-screen='game'] .action-strip .player-tag .seat-name-text {
  color: rgba(230, 243, 236, .95) !important;
  text-shadow: none !important;
}
body[data-screen='game'] .north > .seat-name-fixed .seat-subline,
body[data-screen='game'] .east > .seat-name-fixed .seat-subline,
body[data-screen='game'] .west > .seat-name-fixed .seat-subline {
  color: rgba(214, 232, 222, .9) !important;
}
body[data-screen='game'] .action-strip .player-tag .seat-subline {
  color: rgba(214, 232, 222, .9) !important;
}
body[data-screen='game'] .result-cards .card.mini {
  width: var(--guide-card-w, clamp(36px, 5.7vw, 58px));
  height: var(--guide-card-h, calc(var(--guide-card-w, clamp(36px, 5.7vw, 58px)) * 1.392857));
  overflow: visible;
  flex: 0 0 auto;
  border-radius: 0;
  box-shadow: none;
}
body[data-screen='game'] .result-cards .card.mini + .card.mini {
  margin-left: calc(var(--guide-card-w, clamp(36px, 5.7vw, 58px)) * -0.5);
}
body[data-screen='game'] .result-cards .card.mini .card-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  border-radius: 0;
}
.game-shell.game-over .action-strip .player-tag {
  display: none !important;
}

body[data-screen='game'] .seat-name-fixed,
body[data-screen='game'] .action-strip .player-tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(178, 212, 194, .52) !important;
  background:
    linear-gradient(180deg, rgba(9, 26, 30, .94), rgba(8, 20, 25, .82)),
    linear-gradient(130deg, rgba(255,255,255,.06), rgba(255,255,255,.01)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(39, 74, 64, .75),
    0 2px 7px rgba(0,0,0,.22);
}
body[data-screen='game'] .seat-name-fixed {
  position: relative;
  overflow: visible;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name],
body[data-screen='game'] .mobile-opponent-name[data-opponent-name] {
  cursor: pointer;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] {
  position: relative !important;
  z-index: 13000 !important;
  isolation: isolate;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .name {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px;
  padding: 3px 8px !important;
  border-radius: 0 !important;
}

body[data-screen='game'] :is(
  .seat.north > .seat-name-fixed .name,
  .seat.west > .seat-name-fixed .name,
  .seat.east > .seat-name-fixed .name,
  .seat.north .seat-pack > .seat-name-fixed .name,
  .seat.west .side-station-stack > .seat-name-fixed .name,
  .seat.east .side-station-stack > .seat-name-fixed .name,
  .seat.north > .seat-name-fixed .seat-identity,
  .seat.west > .seat-name-fixed .seat-identity,
  .seat.east > .seat-name-fixed .seat-identity,
  .seat.north .seat-pack > .seat-name-fixed .seat-identity,
  .seat.west .side-station-stack > .seat-name-fixed .seat-identity,
  .seat.east .side-station-stack > .seat-name-fixed .seat-identity
) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .seat-round-wins {
  color: var(--game-round-wins-text);
  font-size: .64rem;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .seat-round-wins-icon {
  color: var(--game-round-wins-icon);
  font-size: .66rem;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] :is(.play-type-call-seat, .last-card-call-seat, .emote-callout.play-type-call-seat) {
  z-index: 13001 !important;
  max-width: none !important;
  text-align: center !important;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .emote-callout.play-type-call-seat {
  --callout-size: .74;
}
body[data-screen='game'] .seat.north .seat-pack,
body[data-screen='game'] .seat.west .seat-pack,
body[data-screen='game'] .seat.east .seat-pack {
  overflow: visible !important;
}
body[data-screen='game'] .seat.north .seat-open-play,
body[data-screen='game'] .seat.west .seat-open-play,
body[data-screen='game'] .seat.east .seat-open-play {
  z-index: 1 !important;
}

@media (min-width: 861px) and (orientation: landscape) {
  body[data-screen='game'][data-orientation='landscape'] {
    --landscape-side-station-top: clamp(50px, 7.2vh, 68px);
    --landscape-side-station-gap: 4px;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west,
  body[data-screen='game'][data-orientation='landscape'] .seat.east {
    position: relative !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-pack,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-pack {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    padding: 0 !important;
    align-content: normal !important;
    justify-items: normal !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack {
    position: absolute !important;
    top: var(--landscape-side-station-top) !important;
    width: max-content !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-areas:
      "core"
      "last" !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: start !important;
    gap: var(--landscape-side-station-gap) !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack > .side-station-core,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack > .side-station-core {
    grid-area: core !important;
    display: grid !important;
    grid-template-areas:
      "label"
      "fan" !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: start !important;
    gap: var(--landscape-side-station-gap) !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-core > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-core > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-core > .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-core > .opponent-fan-wrap {
    position: relative !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-core > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-core > .seat-name-fixed {
    z-index: 13010 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-core > .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-core > .opponent-fan-wrap {
    z-index: 13000 !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play {
    position: relative !important;
    z-index: 11000 !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .closed-count-pill,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .closed-count-pill {
    position: absolute !important;
    inset: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    z-index: 20001 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .closed-card-pile,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .closed-card-pile {
    z-index: 11002 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play .seat-played,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play .seat-played {
    justify-self: center !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}
body[data-screen='game'] .seat.north .seat-open-play .seat-played,
body[data-screen='game'] .seat.west .seat-open-play .seat-played,
body[data-screen='game'] .seat.east .seat-open-play .seat-played,
body[data-screen='game'] .seat.north .seat-open-play .card.mini,
body[data-screen='game'] .seat.west .seat-open-play .card.mini,
body[data-screen='game'] .seat.east .seat-open-play .card.mini {
  z-index: 1 !important;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .play-type-call-seat .tail,
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .last-card-call-seat .tail,
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .emote-callout.play-type-call-seat .tail {
  top: calc(-20px * var(--callout-size, 1)) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
body[data-screen='game'] .seat-name-fixed .name,
body[data-screen='game'] .action-strip .player-tag .name {
  display: inline-flex;
  align-items: center;
  gap: var(--game-seat-badge-gap) !important;
}
body[data-screen='game'] .seat-identity {
  display: grid;
  position: relative;
  gap: 0;
  line-height: 1.02;
  overflow: visible;
  justify-items: start;
}
body[data-screen='game'] .seat-name-text {
  font-size: var(--game-seat-name-text-size) !important;
  font-weight: 800 !important;
  color: #e8f3f2 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.34) !important;
}
body[data-screen='game'] .seat-subline {
  font-size: var(--game-seat-subline-size);
  font-weight: 700;
  color: rgba(224, 234, 227, .94);
  display: inline-flex;
  align-items: center;
  gap: var(--game-seat-badge-gap);
  flex-wrap: nowrap;
  white-space: nowrap;
}
body[data-screen='game'] .seat-round-wins {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: var(--game-round-wins-min-h);
  padding: 1px var(--game-round-wins-pad-x);
  border-radius: 999px;
  background: var(--game-round-wins-bg);
  border: 1px solid var(--game-round-wins-border);
  color: var(--game-round-wins-text);
  font-size: var(--game-round-wins-font-size);
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
body[data-screen='game'] .seat-round-wins-icon {
  font-size: var(--game-round-wins-icon-size);
  line-height: 1;
  color: var(--game-round-wins-icon);
}
body[data-screen='game'] .seat-namecard {
  margin-top: 4px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(235, 245, 242, .92);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  display: block;
}
@media (min-width: 861px) {
  body[data-screen='game'] .seat-namecard {
    margin-top: 1px;
  }
}
body[data-screen='game'] .seat-namecard:hover {
  color: #ffffff;
}
body[data-screen='game'] .seat-namecard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(244, 162, 89, .25);
}
body[data-screen='game'] .seat-motto-callout {
  --bubble-border: #4a4a4a;
  --bubble-fill: var(--player-color, #84a9db);
  position: absolute;
  display: inline-block;
  opacity: 0;
  pointer-events: none;
  z-index: 1800;
  --callout-size: .5;
  --callout-tilt: 0deg;
  transform: translate3d(calc(var(--callout-base-x, 0px) + var(--callout-shift-x, 0px)), calc(var(--callout-base-y, 0px) + var(--callout-shift-y, 0px)), 0) rotate(var(--callout-tilt, 0deg));
  overflow: visible;
  padding: 0;
}
body[data-screen='game'] .seat-motto-callout .callout-box {
  padding: calc(3px * var(--callout-size, 1));
  border: calc(2px * var(--callout-size, 1)) solid var(--bubble-border);
  border-radius: calc(24px * var(--callout-size, 1)) calc(16px * var(--callout-size, 1)) calc(26px * var(--callout-size, 1)) calc(14px * var(--callout-size, 1));
  background: var(--bubble-fill);
  color: #fff;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.12));
  transform: translate3d(var(--callout-box-shift-x, 0px), var(--callout-box-shift-y, 0px), 0);
  display: inline-block;
  width: max-content;
  max-width: 150px;
}
body[data-screen='game'] .seat-motto-callout .hk-inner {
  padding: calc(12px * var(--callout-size, 1)) calc(20px * var(--callout-size, 1));
  white-space: normal;
  text-align: center;
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body[data-screen='game'] .seat-motto-callout .hk-power-motto {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  font-size: calc(1.9rem * var(--callout-size, 1));
  color: #fff;
  margin: 0;
  text-transform: none;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: normal;
  line-height: 1.15;
  text-wrap: wrap;
  overflow-wrap: break-word;
  word-break: normal;
  display: block;
  overflow: visible;
}
body[data-screen='game'] .seat-motto-callout .hk-power-motto.motto-en {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  letter-spacing: .01em;
  font-size: calc(1.74rem * var(--callout-size, 1));
}
body[data-screen='game'] .seat-motto-callout .hk-chinese-sub {
  display: block;
  font-size: .56rem;
  color: #ff9f1a;
  font-weight: 900;
  margin-top: 2px;
  white-space: normal;
  transform: scaleY(1.12);
}
body[data-screen='game'] .seat-motto-callout .tail {
  position: absolute;
  width: 0;
  height: 0;
  border: calc(10px * var(--callout-size, 1)) solid transparent;
}
body[data-screen='game'] .seat-motto-callout .tail::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: calc(10px * var(--callout-size, 1)) solid transparent;
}
body[data-screen='game'] .seat-motto-callout .tail-north {
  top: calc(-20px * var(--callout-size, 1));
  left: var(--tail-anchor-x, 50%);
  transform: translateX(-50%);
  border-bottom-color: var(--bubble-border);
}
body[data-screen='game'] .seat-motto-callout .tail-north::after {
  bottom: calc(-14px * var(--callout-size, 1));
  left: calc(-10px * var(--callout-size, 1));
  border-bottom-color: var(--bubble-fill);
}
body[data-screen='game'] .seat-motto-callout .tail-south {
  bottom: calc(-20px * var(--callout-size, 1));
  left: var(--tail-anchor-x, 50%);
  transform: translateX(-50%);
  border-top-color: var(--bubble-border);
}
body[data-screen='game'] .seat-motto-callout .tail-south::after {
  top: calc(-14px * var(--callout-size, 1));
  left: calc(-10px * var(--callout-size, 1));
  border-top-color: var(--bubble-fill);
}
body[data-screen='game'] .seat-motto-callout .tail-east {
  right: calc(-20px * var(--callout-size, 1));
  top: var(--tail-anchor-y, 50%);
  transform: translateY(-50%);
  border-left-color: var(--bubble-border);
}
body[data-screen='game'] .seat-motto-callout .tail-east::after {
  right: calc(-6px * var(--callout-size, 1));
  top: calc(-10px * var(--callout-size, 1));
  border-left-color: var(--bubble-fill);
}
body[data-screen='game'] .seat-motto-callout .tail-west {
  left: calc(-20px * var(--callout-size, 1));
  top: var(--tail-anchor-y, 50%);
  transform: translateY(-50%);
  border-right-color: var(--bubble-border);
}
body[data-screen='game'] .seat-motto-callout .tail-west::after {
  left: calc(-6px * var(--callout-size, 1));
  top: calc(-10px * var(--callout-size, 1));
  border-right-color: var(--bubble-fill);
}
body[data-screen='game'] .seat-name-fixed:hover .seat-motto-callout,
body[data-screen='game'] .seat-name-fixed:focus-within .seat-motto-callout {
  opacity: 1;
  pointer-events: auto;
}
body[data-screen='game'] .action-strip .seat-name-fixed.player-tag:hover .seat-motto-callout {
  opacity: 0 !important;
  pointer-events: none !important;
}
body[data-screen='game'] .seat-name-fixed.motto-peek .seat-motto-callout {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 861px) and (orientation: landscape) {
  body[data-screen='game'] .seat.west .side-station-stack:hover > .seat-name-fixed[data-opponent-name] .seat-motto-callout,
  body[data-screen='game'] .seat.east .side-station-stack:hover > .seat-name-fixed[data-opponent-name] .seat-motto-callout {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
body[data-screen='game'] .result-avatar-wrap {
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--winner-color, #f3d48f) 60%, white 40%), 0 6px 10px rgba(0,0,0,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--avatar-seat-color, #0b1623) 65%, rgba(12, 18, 20, .5));
  position: relative;
}
body[data-screen='game'] .result-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--avatar-seat-color, #0b1623) 65%, rgba(12, 18, 20, .5));
  z-index: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
body[data-screen='game'] .result-avatar {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
body[data-screen='game'] .result-avatar-wrap .lobby-seat-host-badge-text,
body[data-screen='game'] .player-avatar-wrap .lobby-seat-host-badge-text {
  left: -24px;
  right: auto;
  bottom: -2px;
  top: auto;
  width: auto;
  height: auto;
  min-width: 28px;
  min-height: 16px;
  padding: 0 6px;
  font-size: .58rem;
  justify-content: flex-end;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  z-index: 4;
}
body[data-screen='game'][data-language='zh-HK'] .result-avatar-wrap .lobby-seat-host-badge-text,
body[data-screen='game'][data-language='zh-HK'] .player-avatar-wrap .lobby-seat-host-badge-text {
  left: -16px;
}
body[data-screen='game'] .player-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.97);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--avatar-outline, #f4f9fb) 42%, white 58%),
    0 1px 3px rgba(0, 0, 0, .28);
}
body[data-screen='game'] .player-avatar-wrap {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: visible;
  flex: 0 0 auto;
  background: transparent;
}
body[data-screen='game'] .seat.active .player-avatar-wrap::before,
body[data-screen='game'] .action-strip.active .player-avatar-wrap::before,
body[data-screen='game'] .player-avatar-wrap-self.is-active::before,
body[data-screen='game'] .table > .player-tag .player-avatar-wrap-self.is-active::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--player-color, #ffd166) 85%, white 15%), transparent 35%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: turnRing 1.8s linear infinite;
  opacity: .9;
  pointer-events: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--player-color, #ffd166) 55%, transparent);
}
body[data-screen='game'] .player-avatar-wrap > .player-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: linear-gradient(140deg, var(--player-color, #7aaed8), #ffffff);
}
body[data-screen='game'] .player-avatar-wrap.avatar-rim::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--avatar-rim, #f4f9fb);
  box-shadow: none;
  pointer-events: none;
}
@keyframes turnRing {
  to { transform: rotate(360deg); }
}
body[data-screen='game'] .avatar-status-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.52);
  z-index: 3;
  pointer-events: none;
}
body[data-screen='game'] .avatar-status-badge.turn {
  background: #44cf67;
  color: transparent;
  box-shadow:
    0 2px 8px rgba(0,0,0,.52),
    0 0 12px rgba(68, 207, 103, .8);
}
body[data-screen='game'] .avatar-status-badge.warning {
  right: -4px;
  bottom: -4px;
  left: auto;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.94);
  background: #ffcf5a;
  color: transparent;
  box-shadow:
    0 2px 8px rgba(0,0,0,.52),
    0 0 12px rgba(255, 207, 90, .86);
  z-index: 7;
  animation: lastCardBadgePulse 1.1s ease-in-out infinite;
}
body[data-screen='game'] .avatar-status-badge.warning::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(255, 207, 90, .86);
  box-shadow: 0 0 14px rgba(255, 207, 90, .52);
  animation: lastCardOuterPulse 1.1s ease-out infinite;
}
body[data-screen='game'] .avatar-status-badge.warning.danger {
  background: #ff5f66;
  box-shadow:
    0 2px 8px rgba(0,0,0,.52),
    0 0 14px rgba(255, 95, 102, .92);
}
body[data-screen='game'] .avatar-status-badge.warning.danger::before {
  border-color: rgba(255, 95, 102, .92);
  box-shadow: 0 0 16px rgba(255, 95, 102, .58);
}
@keyframes lastCardBadgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes lastCardOuterPulse {
  0% { transform: scale(0.94); opacity: .95; }
  60% { transform: scale(1.18); opacity: .44; }
  100% { transform: scale(1.28); opacity: 0; }
}
body[data-screen='game'] .seat-name-fixed .player-avatar.player-avatar-opponent {
  width: 38px !important;
  height: 38px !important;
}
body[data-screen='game'] .action-strip .player-tag .player-avatar.player-avatar-self {
  width: 38px !important;
  height: 38px !important;
}
body[data-screen='game'] .action-strip .player-tag .player-avatar.player-avatar-self.player-avatar-google {
  object-fit: cover;
  object-position: center center;
  filter: none;
  background: transparent !important;
}
body[data-screen='game'] .seat-name-fixed .player-avatar-wrap.player-avatar-wrap-opponent {
  width: 38px;
  height: 38px;
}
body[data-screen='game'] .action-strip .player-tag .player-avatar-wrap.player-avatar-wrap-self {
  width: 38px;
  height: 38px;
}
body[data-screen='game'] {
  --south-tag-left: 50%;
  --south-tag-right: auto;
  --south-tag-top: 3px;
  --south-tag-bottom: auto;
  --south-tag-transform: translateX(calc(-50% + 3px));
  --south-tag-z: 20;
}
body[data-screen='game'][data-orientation='portrait'][data-is-mobile='1'] {
  --south-tag-left: 16px;
  --south-tag-right: auto;
  --south-tag-top: auto;
  --south-tag-bottom: 16px;
  --south-tag-transform: none;
  --south-tag-z: 14000;
}
body[data-screen='game'][data-orientation='portrait'] .action-strip .player-tag .player-avatar-self {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] .action-strip .hand .hand-card {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
  }
  body[data-screen='game'] .action-strip .hand .hand-card .card-art {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
  }
}
body[data-screen='game'] .seat-count-tag,
body[data-screen='game'] .action-strip .player-tag .seat-count-tag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(6, 18, 30, .82) !important;
  border: 1px solid rgba(201, 230, 213, .66) !important;
  color: #f3fff8 !important;
  font-size: .73rem !important;
  font-weight: 800;
}
/* Seat name text uses each seat color. */
body[data-screen='game'] .seat-name-fixed .seat-name-text,
body[data-screen='game'] .action-strip .player-tag .seat-name-text {
  color: var(--player-color, #f4f9fb) !important;
  text-shadow: 0 1px 2px rgba(2, 8, 12, .85) !important;
}
body[data-screen='game'] .north > .seat-name-fixed .seat-name-text,
body[data-screen='game'] .east > .seat-name-fixed .seat-name-text,
body[data-screen='game'] .west > .seat-name-fixed .seat-name-text {
  color: var(--player-color, #f4f9fb) !important;
  text-shadow: 0 1px 2px rgba(2, 8, 12, .85) !important;
}
body[data-screen='game'] .seat-subline,
body[data-screen='game'] .action-strip .player-tag .seat-subline {
  color: rgba(234, 246, 240, .96) !important;
}
body[data-screen='game'] .action-strip .player-tag .seat-subline {
  margin-top: 2px !important;
}
body[data-screen='game'] .north > .seat-name-fixed .seat-subline,
body[data-screen='game'] .east > .seat-name-fixed .seat-subline,
body[data-screen='game'] .west > .seat-name-fixed .seat-subline {
  font-size: .73rem !important;
  font-weight: 700 !important;
}
/* N/E/W remaining-card badge uses the same style as south. */
body[data-screen='game'] .north > .seat-name-fixed .seat-count-tag,
body[data-screen='game'] .east > .seat-name-fixed .seat-count-tag,
body[data-screen='game'] .west > .seat-name-fixed .seat-count-tag {
  width: 20px !important;
  height: 20px !important;
  margin-left: 4px !important;
  border-radius: 999px !important;
  background: rgba(6, 18, 30, .82) !important;
  border: 1px solid rgba(201, 230, 213, .66) !important;
  color: #f3fff8 !important;
  font-size: .73rem !important;
  font-weight: 800 !important;
}
/* Active S/N/E/W: keep original baseline behavior globally. */
body[data-screen='game'] .seat.active { background: inherit !important; }
body[data-screen='game'] .seat.active::before { content: none; }
body[data-screen='game'] .seat.west.active .seat-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Use south panel background style for N/W/E outer seat panels. */
body[data-screen='game'] .north,
body[data-screen='game'] .west,
body[data-screen='game'] .east {
  background:
    linear-gradient(130deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(8, 24, 38, .36) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 1px 4px rgba(0,0,0,.1) !important;
}
/* Unify south panel style with opponent outer panels (single visual language). */
body[data-screen='game'] .action-strip {
  background:
    linear-gradient(130deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(6, 18, 30, .56) !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 1px 4px rgba(0,0,0,.1) !important;
}
body[data-screen='game'] .action-strip.active {
  border: 2px solid color-mix(in srgb, var(--player-color, #ffd166) 96%, transparent) !important;
  outline: 2px solid color-mix(in srgb, var(--player-color, #ffd166) 78%, transparent) !important;
  outline-offset: -2px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--player-color, #ffd166) 78%, transparent),
    0 0 22px color-mix(in srgb, var(--player-color, #ffd166) 56%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 16px color-mix(in srgb, var(--player-color, #ffd166) 34%, transparent),
    0 1px 4px rgba(0,0,0,.1) !important;
}
/* Keep W/E active panel highlight visually aligned with South active strip. */
body[data-screen='game'] .seat.west.active,
body[data-screen='game'] .seat.east.active {
  border: 2px solid color-mix(in srgb, var(--player-color, #ffd166) 96%, transparent) !important;
  outline: 2px solid color-mix(in srgb, var(--player-color, #ffd166) 78%, transparent) !important;
  outline-offset: -2px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--player-color, #ffd166) 78%, transparent),
    0 0 22px color-mix(in srgb, var(--player-color, #ffd166) 56%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 16px color-mix(in srgb, var(--player-color, #ffd166) 34%, transparent),
    0 1px 4px rgba(0,0,0,.1) !important;
  border-radius: 12px;
}
body[data-screen='game'] .seat.west.active::before,
body[data-screen='game'] .seat.east.active::before {
  content: none !important;
}

/* Hard override: ultra-tight overlap for 5-card fan in all game views. */
body[data-screen='game'] .seat-played.seat-played-fan .card.mini + .card.mini,
body[data-screen='game'] .center-last .seat-played.seat-played-fan .card.mini + .card.mini,
body[data-screen='game'] .center-last-north .seat-played.seat-played-fan .card.mini + .card.mini,
body[data-screen='game'] .center-last-west .seat-played.seat-played-fan .card.mini + .card.mini,
body[data-screen='game'] .center-last-east .seat-played.seat-played-fan .card.mini + .card.mini,
body[data-screen='game'] .center-last-south .seat-played.seat-played-fan .card.mini + .card.mini {
  margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
}
@media (max-width: 860px) {
  body[data-screen='game'] .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'] .center-last .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'] .center-last-north .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'] .center-last-west .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'] .center-last-east .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'] .center-last-south .seat-played.seat-played-fan .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
}

/* Discard size now driven by runtime hand size, avoid extra center overrides. */

/* Bottom (south) player turn highlight: reduce outline/glow intensity by ~70%. */
body[data-screen='game'] .action-strip.active {
  border: 2px solid color-mix(in srgb, var(--player-color, #ffd166) 30%, transparent) !important;
  outline: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 25%, transparent) !important;
  outline-offset: -1px !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--player-color, #ffd166) 25%, transparent),
    0 0 8px color-mix(in srgb, var(--player-color, #ffd166) 19%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 0 6px color-mix(in srgb, var(--player-color, #ffd166) 11%, transparent),
    0 1px 4px rgba(0, 0, 0, .18) !important;
}

/* Final final: tone down South active glow only. */
body[data-screen='game'] .action-strip.active {
  border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 36%, transparent) !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 1px 4px rgba(0, 0, 0, .18) !important;
}

/* Tone down South active strip glow only. */
body[data-screen='game'] .action-strip.active {
  border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 42%, transparent) !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}
body[data-screen='game'] .seat.west.active .seat-section,
body[data-screen='game'] .seat.east.active .seat-section {
  border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 74%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--player-color, #ffd166) 36%, transparent) !important;
}
body[data-screen='game'] .action-strip .control-row .game-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 8px rgba(0,0,0,.32);
  font-weight: 800;
  position: relative;
  overflow: visible;
  transition:
    transform 160ms var(--playful-pop),
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
}
body[data-screen='game'] .action-strip .control-row #play-btn.game-cta-btn,
body[data-screen='game'] .action-strip .control-row #pass-btn.game-cta-btn,
body[data-screen='game'] .action-strip .control-row #suggest-btn.game-cta-btn {
  gap: 0;
}
body[data-screen='game'] .action-strip .control-row .game-cta-btn::before { content: none; }
body[data-screen='game'] .action-strip .control-row .game-cta-btn:hover,
body[data-screen='game'] .action-strip .control-row .game-cta-btn:focus-visible {
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 8px rgba(0,0,0,.32) !important;
  filter: none !important;
}
body[data-screen='game'] .action-strip .control-row .game-cta-btn:active {
  transform: none !important;
}

body[data-screen='game'] .action-strip .control-row #play-btn.game-cta-btn {
  background: linear-gradient(180deg, #3abfbe 0%, #1f8f98 100%) !important;
  color: #eaffff !important;
}
body[data-screen='game'] .action-strip .control-row #pass-btn.game-cta-btn {
  background: linear-gradient(180deg, #ff6f77 0%, #df3f49 100%) !important;
  color: #fff5f5 !important;
}
body[data-screen='game'] .action-strip .control-row #pass-btn.game-cta-btn .pass-icon {
  width: 15px;
  height: 15px;
  display: block;
  flex: 0 0 auto;
}
body[data-screen='game'] .action-strip .control-row #suggest-btn.game-cta-btn {
  background: linear-gradient(180deg, rgba(90,110,122,.88), rgba(56,73,86,.92)) !important;
  color: #e9f1f6 !important;
}
body[data-screen='game'] .action-strip .control-row #suggest-btn.game-cta-btn::before {
  content: none !important;
}
body[data-screen='game'] .action-strip .control-row #suggest-btn.game-cta-btn:hover,
body[data-screen='game'] .action-strip .control-row #suggest-btn.game-cta-btn:focus-visible,
body[data-screen='game'] .action-strip .control-row #suggest-btn.game-cta-btn:active {
  transform: none !important;
}
body[data-screen='game'] .action-strip .control-row #bell-toggle.game-cta-btn::before {
  content: none !important;
}
body[data-screen='game'] .action-strip .control-row #bell-toggle.game-cta-btn:hover,
body[data-screen='game'] .action-strip .control-row #bell-toggle.game-cta-btn:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}
body[data-screen='game'] .action-strip .control-row #bell-toggle.game-cta-btn:hover::before,
body[data-screen='game'] .action-strip .control-row #bell-toggle.game-cta-btn:focus-visible::before {
  opacity: 0 !important;
  transform: none !important;
}
body[data-screen='game'] .action-strip .control-row #bell-toggle.game-cta-btn:active {
  transform: translateY(1px) scale(.93) !important;
}
body[data-screen='game'] .action-strip::before,
body[data-screen='game'] .action-strip::after {
  content: none !important;
}
body[data-screen='game'] .action-strip .control-row #play-btn.recommend-glow-play:hover,
body[data-screen='game'] .action-strip .control-row #play-btn.recommend-glow-play:focus-visible,
body[data-screen='game'] .action-strip .control-row #play-btn.recommend-glow-play:active,
body[data-screen='game'] .action-strip .control-row #pass-btn.recommend-glow:hover,
body[data-screen='game'] .action-strip .control-row #pass-btn.recommend-glow:focus-visible,
body[data-screen='game'] .action-strip .control-row #pass-btn.recommend-glow:active {
  transform: none !important;
}
body[data-screen='game'] .action-strip .control-row #play-btn.recommend-glow-play {
  box-shadow:
    0 0 0 1px rgba(120, 255, 217, .78),
    0 0 18px rgba(120, 255, 217, .72),
    0 0 34px rgba(120, 255, 217, .42),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  color: #effff3 !important;
  overflow: visible !important;
}
body[data-screen='game'] .action-strip .control-row #pass-btn.recommend-glow {
  box-shadow:
    0 0 0 1px rgba(255, 168, 171, .8),
    0 0 18px rgba(255, 168, 171, .72),
    0 0 34px rgba(255, 168, 171, .42),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  color: #fff7f8 !important;
  overflow: visible !important;
}
body[data-screen='game'] .action-strip .control-row #bell-toggle:active {
  transform: translateY(1px) scale(.93) !important;
}
body[data-screen='game'] .action-strip .control-row .game-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(90,110,122,.88), rgba(56,73,86,.92)) !important;
  color: #e9f1f6 !important;
  font-weight: 800;
  line-height: 1;
  font-size: 1rem;
}
body[data-screen='game'] .action-strip .control-row .game-icon-btn > span {
  display: inline-block;
  line-height: 1;
}
body[data-screen='game'] .action-strip .control-row .game-icon-btn .sort-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}
body[data-screen='game'] .service-bell-layer {
  position: absolute;
  inset: 0;
  z-index: 2147483300;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  display: none;
}
body[data-screen='game'] .service-bell-layer.is-ready {
  display: block;
}
body[data-screen='game'] .table > .service-bell-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2147483300 !important;
}
body[data-screen='game'] .service-bell-layer .service-bell-hero-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(84px, 13.5vmin, 138px);
  transform: translate(-50%, -50%);
}
body[data-screen='game'] .service-bell-layer .service-bell-hero {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.3));
  transform-origin: center top;
  transition: transform 120ms ease-out;
}
body[data-screen='game'] .service-bell-layer.is-pressed .service-bell-hero {
  transform: translateY(10px) scale(.92);
}
body[data-screen='game'] .service-bell-food-layer {
  position: absolute;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}
body[data-screen='game'] .service-bell-food {
  position: absolute;
  left: var(--slot-x);
  top: var(--slot-y);
  width: var(--food-w, 120px);
  height: auto;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.28));
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.24s ease;
  pointer-events: none;
}
body[data-screen='game'] .service-bell-food.start-left {
  transform: translate3d(-50%, -50%, 0) translate3d(-300px, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food.start-right {
  transform: translate3d(-50%, -50%, 0) translate3d(300px, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food.is-entering,
body[data-screen='game'] .service-bell-food.is-exiting {
  opacity: 0;
}
body[data-screen='game'] .service-bell-food.is-entering.service-bell-dir-left,
body[data-screen='game'] .service-bell-food.is-exiting.service-bell-dir-left {
  transform: translate3d(-50%, -50%, 0) translate3d(var(--offscreen-x, -300px), 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food.is-entering.service-bell-dir-right,
body[data-screen='game'] .service-bell-food.is-exiting.service-bell-dir-right {
  transform: translate3d(-50%, -50%, 0) translate3d(var(--offscreen-x, 300px), 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='portrait'] .service-bell-slot-tl {
  --slot-x: 16%;
  --slot-y: 15%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='portrait'] .service-bell-slot-tr {
  --slot-x: 84%;
  --slot-y: 15%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='portrait'] .service-bell-slot-ml {
  --slot-x: 14%;
  --slot-y: 79%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='portrait'] .service-bell-slot-mr {
  --slot-x: 86%;
  --slot-y: 79%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='landscape'] .service-bell-slot-tl {
  --slot-x: 8%;
  --slot-y: 20%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='landscape'] .service-bell-slot-tr {
  --slot-x: 92%;
  --slot-y: 20%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='landscape'] .service-bell-slot-ml {
  --slot-x: 10%;
  --slot-y: 72%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food-layer[data-orientation='landscape'] .service-bell-slot-mr {
  --slot-x: 90%;
  --slot-y: 72%;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(1);
}
body[data-screen='game'] .service-bell-food.is-entering.service-bell-slot-tl.service-bell-dir-left,
body[data-screen='game'] .service-bell-food.is-exiting.service-bell-slot-tl.service-bell-dir-left {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--offscreen-x, -300px), 0, 0) scale(1) !important;
}
body[data-screen='game'] .service-bell-food.is-entering.service-bell-slot-tr.service-bell-dir-right,
body[data-screen='game'] .service-bell-food.is-exiting.service-bell-slot-tr.service-bell-dir-right {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--offscreen-x, 300px), 0, 0) scale(1) !important;
}
body[data-screen='game'] .service-bell-food.is-entering.service-bell-slot-ml.service-bell-dir-left,
body[data-screen='game'] .service-bell-food.is-exiting.service-bell-slot-ml.service-bell-dir-left {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--offscreen-x, -300px), 0, 0) scale(1) !important;
}
body[data-screen='game'] .service-bell-food.is-entering.service-bell-slot-mr.service-bell-dir-right,
body[data-screen='game'] .service-bell-food.is-exiting.service-bell-slot-mr.service-bell-dir-right {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--offscreen-x, 300px), 0, 0) scale(1) !important;
}
body[data-screen='game'] .action-strip .control-row #auto-sort-btn {
  margin-left: auto;
}
body[data-screen='game'] .action-strip .control-row #auto-sort-btn .sort-icon {
  width: 18px;
  height: 18px;
  display: block;
}
body[data-screen='game'] .action-strip .control-row #auto-sort-btn.game-cta-btn {
  gap: 0;
  min-width: 36px;
  padding: 4px 8px;
}
body[data-screen='game'] .action-strip .control-row #auto-sort-btn.game-cta-btn .sort-icon {
  margin: 0;
  color: #fff;
  fill: currentColor;
}
/* iOS-safe sort icons: use SVG instead of font glyphs. */
body[data-screen='game'] #auto-seq-btn,
body[data-screen='game'] #auto-pattern-btn {
  font-size: 1rem;
  color: #e9f1f6;
}
body[data-screen='game'] #auto-seq-btn::before,
body[data-screen='game'] #auto-pattern-btn::before {
  content: none !important;
}
body[data-screen='game'] .action-strip .control-row .game-cta-btn:disabled,
body[data-screen='game'] .action-strip .control-row .game-icon-btn:disabled {
  opacity: .48;
}
@media (prefers-reduced-motion: reduce) {
  .action-strip.active .player-tag,
  .recommend-hint,
  .recommend-hint .recommend-bulb,
  .play-type-call,
  .last-card-call,
  .emote-panel,
  .table-emote,
  .self-table-emote,
  .service-bell-hero,
  .service-bell-food {
    animation: none !important;
  }
  body[data-screen='game'] .action-strip .control-row .game-cta-btn,
  body[data-screen='game'] .action-strip .control-row .game-cta-btn::before,
  .emote-panel .emote-btn,
  .emote-panel .emote-btn img,
  .game-log-fab,
  .service-bell-food {
    transition: none !important;
  }
}
/* N/E/W identity block same sizing rhythm as south player tag. */
body[data-screen='game'] .north > .seat-name-fixed,
body[data-screen='game'] .east > .seat-name-fixed,
body[data-screen='game'] .west > .seat-name-fixed {
  min-height: 34px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
body[data-screen='game'] .north > .seat-name-fixed .name,
body[data-screen='game'] .east > .seat-name-fixed .name,
body[data-screen='game'] .west > .seat-name-fixed .name {
  gap: 6px !important;
  font-size: .84rem !important;
}
body[data-screen='game'] .north .seat-section,
body[data-screen='game'] .west .seat-section,
body[data-screen='game'] .east .seat-section {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Open/discarded cards: remove outer wrapper box in game view. */
body[data-screen='game'] .seat-played,
body[data-screen='game'] .center-last .seat-played {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.history-cards,
.intro-hand-cards,
.score-guide-cards,
.result-cards,
body[data-screen='game'] .reveal-cards {
  position: relative;
}
.history-cards,
.intro-hand-cards,
.score-guide-cards,
.result-cards {
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-size: auto;
  mask-size: auto;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
/* Remove remaining-card number badges for all players in game view. */
body[data-screen='game'] .seat-count-tag {
  display: none !important;
}
@media (min-width: 861px) {
  /* Web view: keep south hand on the normal card scale by default. */
  body[data-screen='game'] .action-strip .hand .hand-card {
    width: calc(var(--card-w) * var(--hand-card-scale, 1.14)) !important;
    height: calc(var(--card-h) * var(--hand-card-scale, 1.14)) !important;
  }
  body[data-screen='game'] .action-strip .hand {
    min-height: calc(var(--card-h) * var(--hand-card-scale, 1.14) + 26px) !important;
  }
  /* Keep collapsed game-log header in same position as expanded (desktop). */
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed {
    padding: 9px !important;
    align-content: start !important;
  }
  body[data-screen='game'] .side-zone.log-collapsed .log-toggle-title {
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 2px !important;
  }
}

/* Keep game-log header metrics consistent between expanded and collapsed states. */
body[data-screen='game'] .log-side-card .log-toggle-title {
  margin: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  line-height: 1.1 !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
}
body[data-screen='game'] .log-side-card .log-toggle-title {
  min-height: 30px !important;
  height: 30px !important;
  font-size: .86rem !important;
  padding: 0 2px !important;
}
body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed {
  padding: 9px !important;
  align-content: start !important;
}
@media (max-width: 860px) {
  body[data-screen='game'] .seat-subline {
    gap: 4px;
    flex-wrap: nowrap;
  }
  body[data-screen='game'] .seat-round-wins {
    padding-left: 5px;
    padding-right: 5px;
  }
  body[data-screen='game'] .seat-name-fixed,
  body[data-screen='game'] .action-strip .player-tag {
    min-height: 32px;
    padding: 2px 7px !important;
  }
  body[data-screen='game'] .north .seat-played .card.mini,
  body[data-screen='game'] .west .seat-played .card.mini,
  body[data-screen='game'] .east .seat-played .card.mini,
  body[data-screen='game'] .center-last-north .seat-played .card.mini,
  body[data-screen='game'] .center-last-west .seat-played .card.mini,
  body[data-screen='game'] .center-last-east .seat-played .card.mini,
  body[data-screen='game'] .center-last-south .seat-played .card.mini {
    width: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * .6667) !important;
    height: calc(var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale))) * .6667) !important;
  }
body[data-screen='game'] .center-last-south .seat-played .card.mini,
body[data-screen='game'] .center-last-south .seat-played .card.discard-card.mini {
    width: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * 1) !important;
    height: calc(var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale))) * 1) !important;
  }
}
body[data-screen='game'] .center-last-south .seat-played {
  width: max-content !important;
  transform: scale(1) !important;
  transform-origin: center bottom !important;
}

body[data-screen='game'] .north .seat-open-play .opponent-open-scale,
body[data-screen='game'] .west .seat-open-play .opponent-open-scale,
body[data-screen='game'] .east .seat-open-play .opponent-open-scale {
  width: max-content !important;
  transform: scale(1) !important;
  transform-origin: center top !important;
  overflow: visible !important;
}
@media (min-width: 861px) and (orientation: landscape) {
  body[data-screen='game'][data-orientation='landscape'] .north .seat-open-play .opponent-open-scale,
  body[data-screen='game'][data-orientation='landscape'] .west .seat-open-play .opponent-open-scale,
  body[data-screen='game'][data-orientation='landscape'] .east .seat-open-play .opponent-open-scale {
    transform: scale(1) !important;
  }
}
@media (max-width: 380px) and (pointer: coarse) {
  body[data-screen='game'] {
    --center-discard-scale: 1.18;
  }
}
@media (min-width: 381px) and (max-width: 430px) and (pointer: coarse) {
  body[data-screen='game'] {
    --center-discard-scale: 1.22;
  }
}
@media (min-width: 431px) and (max-width: 500px) and (pointer: coarse) {
  body[data-screen='game'] {
    --center-discard-scale: 1.24;
  }
}
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] {
    --card-w: clamp(46px, 8.6vh, 64px);
  }
}
@media (max-width: 860px) and (orientation: portrait) {
  /* Portrait mobile: place south seat panel back into the green table area. */
  body[data-screen='game'] {
    --card-w: clamp(46px, 8.6vh, 64px);
  }
  body[data-screen='game'] .table {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
  body[data-screen='game'][data-orientation='portrait'] {
    --center-discard-scale: 1.3;
  }
body[data-screen='game'] .action-zone {
  position: relative;
  overflow: visible !important;
  z-index: 2000 !important;
}
body[data-screen='game'] .action-strip {
  position: relative;
  padding-top: 8px !important;
  z-index: 2001 !important;
}
  body[data-screen='game'] .action-strip .player-tag {
    position: absolute !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 15px) !important;
    transform: none !important;
    z-index: 12 !important;
    margin: 0 !important;
  }
  body[data-screen='game'] .topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  body[data-screen='game'] .topbar-right .control-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 3px !important;
  }
  body[data-screen='game'] .north > .seat-name-fixed,
  body[data-screen='game'] .east > .seat-name-fixed,
  body[data-screen='game'] .west > .seat-name-fixed {
    top: 6px !important;
  }
  body[data-screen='game'] .east .seat-section,
  body[data-screen='game'] .west .seat-section,
  body[data-screen='game'] .north .seat-section {
    padding-top: var(--opp-side-section-pad-top, 54px) !important;
  }

  body[data-screen='game'][data-log-open='0'] #app {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    margin-top: 0 !important;
  }
  body[data-screen='game'][data-log-open='0'] .game-shell,
  body[data-screen='game'][data-log-open='0'] .main-zone {
    align-content: start !important;
  }
  body[data-screen='game'][data-log-open='0'] .game-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    grid-template-rows: minmax(0,1fr) auto !important;
    gap: 0 !important;
  }
  body[data-screen='game'][data-log-open='0'] .topbar {
    margin-top: 0 !important;
  }
  body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed .log-side-card.collapsed {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 9px !important;
    margin: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: 0 !important;
  }
  body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed .log-toggle-title {
    margin: 0 !important;
    line-height: 1.1 !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
  }
  body[data-screen='game'] .east .seat-played {
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
    box-sizing: border-box;
  }
  body[data-screen='game'] .center-last-east {
    right: 8px !important;
    left: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }
  body[data-screen='game'] .center-last-east .seat-played {
    justify-content: flex-end;
    padding-right: 2px;
    box-sizing: border-box;
    overflow: visible !important;
  }
  body[data-screen='game'] .north .seat-played .card.mini,
  body[data-screen='game'] .west .seat-played .card.mini,
  body[data-screen='game'] .east .seat-played .card.mini,
  body[data-screen='game'] .center-last-north .seat-played .card.mini,
  body[data-screen='game'] .center-last-west .seat-played .card.mini,
  body[data-screen='game'] .center-last-east .seat-played .card.mini {
    width: auto !important;
    height: auto !important;
  }
  body[data-screen='game'] .north .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .west .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .east .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .center-last-north .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .center-last-west .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .center-last-east .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--card-w) * -0.78) !important;
  }
  body[data-screen='game'] .side-zone:not(.log-collapsed) {
    max-height: 30dvh;
    min-height: 0;
    overflow: hidden;
  }
  body[data-screen='game'] .side-zone:not(.log-collapsed) .log-side-card {
    height: 100%;
    min-height: 0;
  }
  body[data-screen='game'] .side-zone:not(.log-collapsed) .history-list {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
  }
  body[data-screen='game'][data-log-open='1'] #app {
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
  }
  body[data-screen='game'][data-log-open='1'] .game-shell {
    height: auto !important;
    min-height: 100dvh !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
  }
  body[data-screen='game'][data-log-open='1'] .side-zone:not(.log-collapsed) {
    margin-top: 2px !important;
  }
  /* Mobile portrait: keep action buttons compact in one row. */
  body[data-screen='game'] .topbar-right .control-row {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    flex: 0 0 auto;
    min-width: 0;
    padding: 2px 5px !important;
    font-size: clamp(.56rem, 2vw, .68rem) !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .action-strip .control-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .action-strip .control-row button {
    padding: 4px 7px !important;
    font-size: .74rem !important;
    border-radius: 8px !important;
    min-height: 32px !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
    min-width: max-content;
  }
  body[data-screen='game'] .action-strip .hand .hand-card {
    height: calc(var(--card-h) * 1.34) !important;
    width: auto !important;
  }
  body[data-screen='game'] .action-strip .hand .hand-card + .hand-card {
    margin-left: calc(var(--card-w) * -0.78) !important;
  }
  body[data-screen='game'] .action-strip .hand {
    min-height: calc(var(--card-h) * 1.34 + 22px) !important;
  }
}
@media (max-width: 860px) {
  /* Mobile: keep south player badge anchored to the green table bottom-left. */
  body[data-screen='game'] .action-strip .player-tag {
    position: absolute !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% + 15px) !important;
    transform: none !important;
    z-index: 12 !important;
    margin: 0 !important;
  }
}
@media (max-width: 420px) and (orientation: portrait) {
  body[data-screen='game'] .topbar-right .control-row {
    gap: 1px !important;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    padding: 2px 3px !important;
    font-size: .58rem !important;
    min-height: 24px !important;
  }
}

/* Stable resized behavior: title row first, buttons row second. */
@media (max-width: 1500px) {
  body[data-screen='game'] .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: start !important;
  }
  body[data-screen='game'] .topbar .game-title-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-screen='game'] .topbar-right {
    width: 100% !important;
    min-width: 0 !important;
    justify-items: stretch !important;
  }
  body[data-screen='game'] .topbar-right .control-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    overflow: visible !important;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: fit-content !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Final portrait lock: move N/E/W avatars up and push cards down to avoid cover. */
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'][data-orientation='portrait'] .north > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .east > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .west > .seat-name-fixed {
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .east .seat-pack,
  body[data-screen='game'][data-orientation='portrait'] .west .seat-pack,
  body[data-screen='game'][data-orientation='portrait'] .north .seat-pack {
    padding-top: 0 !important;
    position: relative;
    z-index: 5;
  }
  body[data-screen='game'][data-orientation='portrait'] .east .seat-section,
  body[data-screen='game'][data-orientation='portrait'] .west .seat-section,
  body[data-screen='game'][data-orientation='portrait'] .north .seat-section {
    padding-top: var(--opp-side-section-pad-top, 54px) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .north .opponent-fan {
    margin-top: 46px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .log-side-card .log-toggle-title {
    min-height: 30px !important;
    height: 30px !important;
    font-size: .84rem !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .log-side-card .log-toggle-title .log-status-inline {
    margin-left: auto !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(233,244,255,.26) !important;
    gap: 5px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .log-side-card .log-toggle-title .log-status-separator {
    display: none !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .table-emote.emote-rude,
  body[data-screen='game'][data-orientation='portrait'] .self-table-emote.emote-rude {
    width: clamp(230px, 58vw, 360px);
    height: clamp(150px, 34vw, 220px);
  }
}

/* Portrait: push N/E/W closed cards lower so avatars never cover them. */
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] .east .seat-section,
  body[data-screen='game'] .west .seat-section,
  body[data-screen='game'] .north .seat-section {
    padding-top: 70px !important;
  }
}

/* Portrait override: ensure opponent avatars move up so closed cards are visible. */
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] .north > .seat-name-fixed,
  body[data-screen='game'] .east > .seat-name-fixed,
  body[data-screen='game'] .west > .seat-name-fixed {
    top: -12px !important;
  }
}

/* Tablet landscape: keep topbar buttons in one row like web view. */
@media (min-width: 861px) and (max-width: 1500px) and (orientation: landscape) {
  body[data-screen='game'] .topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  body[data-screen='game'] .topbar-right {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
  body[data-screen='game'] .topbar-right .control-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 3px 7px !important;
    font-size: .72rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

/* Tablet portrait: keep south seat name top-center of south panel like web view. */
@media (min-width: 861px) and (orientation: portrait) {
  body[data-screen='game'] .action-zone {
    overflow: visible !important;
  }
  body[data-screen='game'] .action-strip .control-row {
    position: relative !important;
    z-index: 6 !important;
  }
  body[data-screen='game'] .action-strip .hand {
    position: relative !important;
    z-index: 8 !important;
    overflow: hidden !important;
    padding-top: 14px !important;
    min-height: calc(var(--card-h) * 1.2 + 34px) !important;
  }
  body[data-screen='game'] .action-strip .hand .hand-card.selected {
    transform: translateY(-10px) !important;
  }
  body[data-screen='game'] .action-strip .player-tag {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: -12px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 20 !important;
  }
}

/* Tablet landscape: keep web-style 2-column game + full-height log (avoid clipped log panel). */
@media (min-width: 861px) and (max-width: 1080px) and (orientation: landscape) {
  body[data-screen='game'] .game-shell {
    grid-template-columns: minmax(0,1fr) var(--log-col-w, clamp(180px, 24vw, 248px)) !important;
    grid-template-rows: minmax(0,1fr) !important;
  }
  body[data-screen='game'] .side-zone,
  body[data-screen='game'] .side-zone.log-collapsed {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0,1fr) !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body[data-screen='game'] .history-list {
    max-height: none !important;
    height: 100% !important;
  }
}

/* Global hand behavior: spread if enough space, stack (mobile-style overlap) only when needed. */
body[data-screen='game'] .action-strip .hand {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-content: center !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  max-height: none !important;
  padding-right: 0 !important;
}
body[data-screen='game'] .action-strip .hand > * {
  flex: 0 0 auto !important;
}
body[data-screen='game'] .action-strip .hand .hand-card + .hand-card {
  margin-left: 0 !important;
}
body[data-screen='game'] .action-strip .hand.hand-stacked {
  justify-content: center !important;
  gap: 0 !important;
}
body[data-screen='game'] .action-strip .hand.hand-stacked .hand-card + .hand-card {
  margin-left: calc(-1 * var(--hand-overlap-px, 0px)) !important;
}
body[data-screen='game'] .main-zone,
body[data-screen='game'] .action-zone,
body[data-screen='game'] .action-strip {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Final lock: game-log header text must not shift between expanded/collapsed. */
body[data-screen='game'] .log-side-card .log-toggle-title,
body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed .log-toggle-title,
body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed .log-toggle-title {
  margin: 0 !important;
  padding: 0 2px !important;
  min-height: 36px !important;
  height: 36px !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  top: auto !important;
}

/* Final tablet-portrait lock:
   1) topbar controls stay inside the header
   2) south seat name sits top-center of south panel (web-like) */
@media (min-width: 700px) and (max-width: 1200px) and (orientation: portrait) {
  body[data-screen='game'] .topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  body[data-screen='game'] .topbar-right {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    justify-items: stretch !important;
  }
  body[data-screen='game'] .topbar-right .control-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    padding: 2px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
  }
  body[data-screen='game'] .action-strip .player-tag {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 2px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 20 !important;
  }
}

body[data-screen='game'] .topbar-right .lang-menu {
  z-index: 12020 !important;
}
body[data-screen='game'] .topbar-right .lang-menu-pop {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  min-width: max(140px, 100%) !important;
  max-width: min(240px, calc(100vw - 32px)) !important;
}
body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed,
body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed .log-side-card.collapsed {
  padding: 9px !important;
  align-content: start !important;
}

/* Desktop: keep right log column width fixed in both expanded/collapsed to avoid left-panel shift. */
@media (min-width: 861px) {
  /* Desktop/tablet only: compact no-jump log row layout. */
  .history-detail-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex-wrap: nowrap;
  }
  .history-detail-row .history-cards {
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .history-cards {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
  }
  /* Desktop/tablet only: visible but non-expanding active glow for all seats. */
  body[data-screen='game'] .seat.active {
    border-color: color-mix(in srgb, var(--player-color, #ffd166) 58%, transparent) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--player-color, #ffd166) 52%, transparent) !important;
    background: inherit !important;
  }
  body[data-screen='game'] .seat.active::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 50%, transparent);
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--player-color, #ffd166) 24%, transparent);
    pointer-events: none;
    z-index: 1;
  }
  body[data-screen='game'][data-log-open='0'] #app,
  body[data-screen='game'][data-log-open='1'] #app {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
  body[data-screen='game'][data-log-open='0'] .game-shell,
  body[data-screen='game'][data-log-open='1'] .game-shell {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) var(--log-col-w) !important;
    grid-template-rows: minmax(0,1fr) !important;
    gap: 8px !important;
  }
  body[data-screen='game'][data-log-open='0'] .main-zone,
  body[data-screen='game'][data-log-open='1'] .main-zone {
    min-height: 0 !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
    gap: 7px !important;
  }
  body[data-screen='game'][data-log-open='0'] .table,
  body[data-screen='game'][data-log-open='1'] .table {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body[data-screen='game'][data-log-open='0'] .action-zone,
  body[data-screen='game'][data-log-open='1'] .action-zone,
  body[data-screen='game'][data-log-open='0'] .action-strip,
  body[data-screen='game'][data-log-open='1'] .action-strip {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body[data-screen='game'][data-log-open='0'] .side-zone,
  body[data-screen='game'][data-log-open='1'] .side-zone,
  body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed,
  body[data-screen='game'][data-log-open='1'] .side-zone.log-collapsed {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    align-content: stretch !important;
    grid-template-rows: minmax(0,1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-log-open='0'] .log-side-card,
  body[data-screen='game'][data-log-open='1'] .log-side-card,
  body[data-screen='game'][data-log-open='0'] .side-zone.log-collapsed .log-side-card.collapsed,
  body[data-screen='game'][data-log-open='1'] .side-zone.log-collapsed .log-side-card.collapsed {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px !important;
    gap: 7px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    align-content: stretch !important;
  }
  body[data-screen='game'] .game-shell {
    --log-col-w: 286px;
    grid-template-columns: minmax(0, 1fr) var(--log-col-w) !important;
  }
  body[data-screen='game'] .side-zone,
  body[data-screen='game'] .side-zone.log-collapsed {
    width: var(--log-col-w) !important;
    min-width: var(--log-col-w) !important;
    max-width: var(--log-col-w) !important;
    justify-self: stretch !important;
  }
}
@media (min-width: 861px) and (max-width: 1400px) {
  body[data-screen='game'] .game-shell {
    --log-col-w: 248px;
  }
}
@media (min-width: 861px) {
  body[data-screen='game'] .side-zone,
  body[data-screen='game'] .side-zone.log-collapsed {
    grid-template-rows: minmax(0,1fr) !important;
    align-content: stretch !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
  }
  body[data-screen='game'] .log-side-card,
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed {
    height: 100% !important;
    min-height: 0 !important;
    padding: 9px !important;
    gap: 7px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    align-content: stretch !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Keep collapsed log card geometry identical to expanded; hide list visually only. */
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed .history-list {
    display: grid !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed .log-status {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body[data-screen='game'] .log-side-card .log-toggle-title,
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed .log-toggle-title {
    min-height: 36px !important;
    height: 36px !important;
  }
  body[data-screen='game'] .history-list {
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body[data-screen='game'] .history-item,
  body[data-screen='game'] .history-head,
  body[data-screen='game'] .history-title,
  body[data-screen='game'] .history-meta,
  body[data-screen='game'] .history-detail-row,
  body[data-screen='game'] .history-detail,
  body[data-screen='game'] .history-system-line {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
@media (min-width: 861px) and (max-width: 1400px) and (orientation: landscape) {
  body[data-screen='game'] .game-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }
  body[data-screen='game'] .side-zone,
  body[data-screen='game'] .side-zone.log-collapsed {
    display: none !important;
  }
}

.win-celebrate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.win-banner {
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(130deg, #ffd166, #f4a259);
  color: #1b232e;
  font-weight: 800;
  font-size: clamp(1rem, 2.3vw, 1.35rem);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  animation: winPop .55s cubic-bezier(.16,1.22,.3,1) both;
  position: relative;
  z-index: 2;
}

.confetti-layer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 209, 102, .92) 0 6px, transparent 7px),
    radial-gradient(circle at 22% 72%, rgba(82, 210, 115, .9) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 26%, rgba(63, 136, 197, .9) 0 6px, transparent 7px),
    radial-gradient(circle at 58% 80%, rgba(239, 71, 111, .86) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 30%, rgba(255, 209, 102, .9) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 62%, rgba(82, 210, 115, .88) 0 6px, transparent 7px);
  opacity: 0;
  animation: confettiBurst 900ms ease-out both;
}

/* Mobile landscape is blocked: show rotate-to-portrait notice. */
.orientation-block {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.orientation-card {
  width: min(92vw, 520px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, .14), transparent 40%),
    linear-gradient(160deg, rgba(16, 45, 72, .96), rgba(8, 30, 49, .96));
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.1);
  padding: 20px 18px 18px;
  text-align: center;
}
.orientation-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 92px;
  padding: 10px 14px;
  margin: 0 auto 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.orientation-phone {
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.22));
}
.orientation-rotate {
  font-size: 1.35rem;
  line-height: 1;
  color: #ffd166;
  animation: orientationPulse 1.7s ease-in-out infinite;
}
.orientation-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 3.6vw, 1.5rem);
}
.orientation-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
@keyframes orientationPulse {
  0%,100% { transform: rotate(0deg) scale(1); opacity: .9; }
  50% { transform: rotate(28deg) scale(1.08); opacity: 1; }
}

/* Desktop/web guard: block gameplay when viewport is too small. */
body[data-screen='game'][data-web-too-small='1'] .game-shell,
body[data-screen='game'][data-web-too-small='1'][data-webview='1'] .game-shell {
  pointer-events: auto !important;
  user-select: auto !important;
  filter: none;
}
@media (min-width: 861px) and (max-width: 1200px) {
  body[data-screen='game'] .topbar-right .control-row {
    scrollbar-width: none !important;
    scroll-padding-inline: 10px !important;
  }
  body[data-screen='game'] .topbar-right .lang-menu {
    flex: 0 0 auto !important;
    align-self: center !important;
  }
  body[data-screen='game'] .topbar-right .lang-menu-trigger {
    min-height: 30px !important;
    padding: 4px 8px !important;
  }
}

@media (min-width: 861px) and (max-width: 1080px) and (orientation: landscape) {
  body[data-screen='game'] .side-zone,
  body[data-screen='game'] .side-zone.log-collapsed {
    padding-left: 4px !important;
  }
  body[data-screen='game'] .log-side-card,
  body[data-screen='game'] .side-zone.log-collapsed .log-side-card.collapsed {
    padding: 10px 10px 8px !important;
    gap: 6px !important;
  }
  body[data-screen='game'] .history-list {
    padding: 6px 5px 6px 6px !important;
  }
}
body[data-screen='game'][data-web-too-small='1'] #app::after,
body[data-screen='game'][data-web-too-small='1'][data-webview='1'] #app::after {
  content: '';
  display: none;
}

@keyframes winPop {
  0% { transform: translateY(16px) scale(.72); opacity: 0; }
  60% { transform: translateY(-4px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes confettiBurst {
  0% { transform: scale(.75) rotate(-2deg); opacity: 0; }
  25% { opacity: 1; }
  60% { opacity: .95; }
  100% { transform: scale(1.12) rotate(2deg); opacity: 0; }
}

/* Landscape opponent callout placement:
   W = under + right side, N = under center, E = under + left side. */
@media (orientation: landscape) {
  body[data-screen='game'] .table-emote,
  body[data-screen='game'] .self-table-emote {
    --emote-base-w: clamp(108px, 16vw, 156px);
    --emote-throw-w: clamp(124px, 18vw, 176px);
    --emote-smash-w: clamp(128px, 19vw, 184px);
    --emote-cheers-w: clamp(128px, 19vw, 184px);
    --emote-love-w: clamp(116px, 17vw, 164px);
    --emote-crack-w: clamp(116px, 17vw, 164px);
    --emote-sleep-w: clamp(110px, 16vw, 156px);
    --emote-rude-w: clamp(150px, 21vw, 210px);
    --emote-rude-h: clamp(98px, 14vw, 138px);
  }
  body[data-screen='game'] .seat.west .play-type-call-seat,
  body[data-screen='game'] .seat.west .last-card-call-seat {
    top: clamp(96px, 8.4vh + 30px, 126px) !important;
    bottom: auto !important;
    left: auto !important;
    right: -16px !important;
  }
  body[data-screen='game'] .seat.north .play-type-call-seat,
  body[data-screen='game'] .seat.north .last-card-call-seat,
  body[data-screen='game'] .seat.north .pass-call.play-type-call-seat {
    top: clamp(64px, 4.8vh + 30px, 86px) !important;
    bottom: auto !important;
    left: clamp(72px, 14vw, 132px) !important;
    right: auto !important;
  }
  body[data-screen='game'] .seat.north .seat-name-fixed[data-opponent-name] .play-type-call-seat:not(.callout-with-emote):not(.emote-callout),
  body[data-screen='game'] .seat.north .seat-name-fixed[data-opponent-name] .last-card-call-seat:not(.callout-with-emote):not(.emote-callout),
  body[data-screen='game'] .seat.north .seat-name-fixed[data-opponent-name] .pass-call.play-type-call-seat:not(.callout-with-emote):not(.emote-callout) {
    left: 50% !important;
    right: auto !important;
    --callout-base-x: -50%;
    --callout-base-y: 0px;
  }
  body[data-screen='game'] .seat.east .play-type-call-seat,
  body[data-screen='game'] .seat.east .last-card-call-seat {
    top: clamp(96px, 8.4vh + 30px, 126px) !important;
    bottom: auto !important;
    left: -16px !important;
    right: auto !important;
  }

  body[data-screen='game'] .seat.west .play-type-call-seat::after,
  body[data-screen='game'] .seat.west .last-card-call-seat::after {
    left: 14px !important;
    right: auto !important;
    top: -14px !important;
    transform: none !important;
    width: 28px !important;
    height: 18px !important;
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
  }
  body[data-screen='game'] .seat.north .play-type-call-seat::after,
  body[data-screen='game'] .seat.north .last-card-call-seat::after,
  body[data-screen='game'] .seat.north .pass-call.play-type-call-seat::after {
    left: 22px !important;
    right: auto !important;
    top: -14px !important;
    transform: none !important;
    width: 28px !important;
    height: 18px !important;
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
  }
  body[data-screen='game'] .seat.east .play-type-call-seat::after,
  body[data-screen='game'] .seat.east .last-card-call-seat::after {
    left: auto !important;
    right: 14px !important;
    top: -14px !important;
    transform: none !important;
    width: 28px !important;
    height: 18px !important;
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
  }
}

/* Final active highlight override: keep all seats visually aligned. */
body[data-screen='game'] .action-strip.active,
body[data-screen='game'] .seat.north.active,
body[data-screen='game'] .seat.west.active,
body[data-screen='game'] .seat.east.active {
  border: 2px solid color-mix(in srgb, var(--player-color, #ffd166) 100%, transparent) !important;
  outline: 2px solid color-mix(in srgb, var(--player-color, #ffd166) 82%, transparent) !important;
  outline-offset: -2px !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--player-color, #ffd166) 84%, transparent),
    0 0 28px color-mix(in srgb, var(--player-color, #ffd166) 62%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 0 18px color-mix(in srgb, var(--player-color, #ffd166) 36%, transparent),
    0 2px 10px rgba(0, 0, 0, .24) !important;
}
body[data-screen='game'] .action-strip.active {
  border: 1px solid rgba(255,255,255,.12) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: var(--panel-2) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}

body[data-screen='game'] .seat.west.active .seat-section,
body[data-screen='game'] .seat.east.active .seat-section {
  border: 1px solid color-mix(in srgb, var(--player-color, #ffd166) 86%, transparent) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--player-color, #ffd166) 44%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--player-color, #ffd166) 26%, transparent) !important;
}

@keyframes emoteChampagne {
  0% { transform: translate(-50%, -50%) rotate(-6deg) scale(0.96); }
  40% { transform: translate(-50%, -56%) rotate(6deg) scale(1.06); }
  70% { transform: translate(-50%, -48%) rotate(-4deg) scale(1.01); }
  100% { transform: translate(-50%, -50%) rotate(-6deg) scale(0.98); }
}
@keyframes emoteShockFlash {
  0% { transform: translate(-50%, -50%) scale(0.94); }
  50% { transform: translate(-50%, -52%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(0.98); }
}
@keyframes emoteRudeBurst {
  0% { opacity: 0; transform: translateY(14px) rotate(-8deg) scale(0.82); }
  18% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1.04); }
  42% { opacity: 1; transform: translateY(-4px) rotate(3deg) scale(1); }
  65% { opacity: 0; transform: translateY(-10px) rotate(-4deg) scale(0.96); }
  100% { opacity: 0; transform: translateY(-10px) rotate(-4deg) scale(0.96); }
}
@keyframes emoteFloatSleep {
  0%,100% { transform: translateX(-50%) translateY(0) scale(0.98); }
  50% { transform: translateX(-50%) translateY(-4px) scale(1.02); }
}
.seat-emote {
  position: absolute;
  width: clamp(110px, 22vw, 200px);
  height: auto;
  pointer-events: none;
  animation: emoteWobble 1.2s ease-in-out infinite;
  z-index: 35;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.seat-emote img {
  width: 100%;
  height: auto;
  display: block;
}
.seat-emote-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: calc(94px + var(--callout-jx, 0px));
}
.seat.north .seat-emote-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: calc(98px + var(--callout-jx, 0px));
}
.seat.west .seat-emote-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: calc(98px + var(--callout-jx, 0px));
}
.seat.east .seat-emote-seat {
  top: calc(14px + var(--callout-jy, 0px));
  left: auto;
  right: calc(8px - var(--callout-jx, 0px));
}
.seat-emote-self {
  top: calc(-112px + var(--callout-jy, 0px));
  left: calc(50% + var(--callout-jx, 0px));
  right: auto;
  transform: translateX(-50%);
}
/* Discarded cards: match the actual south hand size. */
body { --hand-card-scale: 1.14; }
@media (min-width: 861px) {
  body { --hand-card-scale: 1.2; }
}
body[data-screen='game'] .seat-played .card.mini,
body[data-screen='game'] .seat-last .card.mini,
body[data-screen='game'] .center-last .seat-played .card.mini,
body[data-screen='game'] .center-last-north .seat-played .card.mini,
body[data-screen='game'] .center-last-west .seat-played .card.mini,
body[data-screen='game'] .center-last-east .seat-played .card.mini,
body[data-screen='game'] .center-last-south .seat-played .card.mini {
  width: var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) !important;
  height: var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale))) !important;
}
body[data-screen='game'] .seat-played .card.face.mini .card-art,
body[data-screen='game'] .center-last .seat-played .card.face.mini .card-art,
body[data-screen='game'] .seat-last .card.face.mini .card-art {
  object-fit: contain !important;
  transform: none !important;
}
body[data-screen='game'] .seat-played .card.face.mini,
body[data-screen='game'] .center-last .seat-played .card.face.mini,
body[data-screen='game'] .seat-last .card.face.mini {
  border-radius: 0 !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-screen='game'] .seat-played .card.discard-card.mini,
body[data-screen='game'] .center-last .seat-played .card.discard-card.mini,
body[data-screen='game'] .center-last-north .seat-played .card.discard-card.mini,
body[data-screen='game'] .center-last-west .seat-played .card.discard-card.mini,
body[data-screen='game'] .center-last-east .seat-played .card.discard-card.mini,
body[data-screen='game'] .center-last-south .seat-played .card.discard-card.mini {
  width: var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) !important;
  height: var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale))) !important;
}
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'][data-orientation='portrait'] .north .seat-played .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .west .seat-played .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .east .seat-played .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last-north .seat-played .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last-west .seat-played .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last-east .seat-played .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .north .seat-played .card.discard-card.mini,
  body[data-screen='game'][data-orientation='portrait'] .west .seat-played .card.discard-card.mini,
  body[data-screen='game'][data-orientation='portrait'] .east .seat-played .card.discard-card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last-north .seat-played .card.discard-card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last-west .seat-played .card.discard-card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last-east .seat-played .card.discard-card.mini {
    width: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * .6667) !important;
    height: calc(var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale))) * .6667) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .center-last-south .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last .seat-played.seat-played-fan .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .center-last-south .seat-played.seat-played-five .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .center-last .seat-played.seat-played-five .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play .seat-played.seat-played-five .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play .seat-played.seat-played-five .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play .seat-played.seat-played-five .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
}

body[data-screen='game'][data-orientation='portrait'] .north,
body[data-screen='game'][data-orientation='portrait'] .east,
body[data-screen='game'][data-orientation='portrait'] .west {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body[data-screen='game'][data-orientation='landscape'] .north,
body[data-screen='game'][data-orientation='landscape'] .east,
body[data-screen='game'][data-orientation='landscape'] .west {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body[data-screen='game'][data-orientation='portrait'] .north .seat-pack,
body[data-screen='game'][data-orientation='portrait'] .east .seat-pack,
body[data-screen='game'][data-orientation='portrait'] .west .seat-pack {
  gap: 4px;
}
body[data-screen='game'][data-orientation='landscape'] .north .seat-pack,
body[data-screen='game'][data-orientation='landscape'] .east .seat-pack,
body[data-screen='game'][data-orientation='landscape'] .west .seat-pack {
  gap: 4px;
}


body[data-screen='game'] .north .seat-pack,
body[data-screen='game'] .west .seat-pack,
body[data-screen='game'] .east .seat-pack {
  grid-template-areas:
    "label"
    "fan"
    "last";
}
body[data-screen='game'] .north .seat-open-play,
body[data-screen='game'] .west .seat-open-play,
body[data-screen='game'] .east .seat-open-play {
  grid-area: last;
  margin-top: 0;
  justify-self: center;
}
/* Final lock: opponent content top/center + badge anchors by seat station. */
body[data-screen='game'] .north .seat-pack,
body[data-screen='game'] .west .seat-pack,
body[data-screen='game'] .east .seat-pack {
  align-content: start !important;
  justify-items: center !important;
}
body[data-screen='game'] .north .opponent-fan,
body[data-screen='game'] .west .opponent-fan,
body[data-screen='game'] .east .opponent-fan {
  align-self: start !important;
  justify-self: center !important;
}
body[data-screen='game'] .north > .seat-name-fixed {
  top: var(--opp-north-name-top, 6px) !important;
  left: var(--opp-north-name-left, 50%) !important;
  right: var(--opp-north-name-right, auto) !important;
  transform: var(--opp-north-name-transform, translateX(-50%)) !important;
}
body[data-screen='game'] .west > .seat-name-fixed {
  top: var(--opp-west-name-top, 50%) !important;
  left: var(--opp-west-name-left, 6px) !important;
  right: var(--opp-west-name-right, auto) !important;
  transform: var(--opp-west-name-transform, translateY(-50%)) !important;
}
body[data-screen='game'] .east > .seat-name-fixed {
  top: var(--opp-east-name-top, 50%) !important;
  right: var(--opp-east-name-right, 6px) !important;
  left: var(--opp-east-name-left, auto) !important;
  transform: var(--opp-east-name-transform, translateY(-50%)) !important;
}
body[data-screen='game'][data-orientation='portrait'] .north > .seat-name-fixed {
  top: var(--opp-north-name-top, 6px) !important;
  left: var(--opp-north-name-left, 50%) !important;
  right: var(--opp-north-name-right, auto) !important;
  transform: var(--opp-north-name-transform, translateX(-50%)) !important;
}
body[data-screen='game'][data-orientation='portrait'] .west > .seat-name-fixed {
  top: var(--opp-west-name-top, 50%) !important;
  left: var(--opp-west-name-left, 6px) !important;
  right: var(--opp-west-name-right, auto) !important;
  transform: var(--opp-west-name-transform, translateY(-50%)) !important;
}
body[data-screen='game'][data-orientation='portrait'] .east > .seat-name-fixed {
  top: var(--opp-east-name-top, 50%) !important;
  right: var(--opp-east-name-right, 6px) !important;
  left: var(--opp-east-name-left, auto) !important;
  transform: var(--opp-east-name-transform, translateY(-50%)) !important;
}

/* Station lock (all views): keep side stations centered on their own columns. */
body[data-screen='game'] .seat.west,
body[data-screen='game'] .seat.east {
  align-self: stretch !important;
  height: 100% !important;
}
body[data-screen='game'] .seat.west .seat-pack,
body[data-screen='game'] .seat.east .seat-pack {
  align-content: start !important;
  justify-items: center !important;
  height: 100% !important;
  min-height: 100% !important;
}
/* Keep side closed/open sets directly under side avatars. */
body[data-screen='game'] .seat.west .opponent-fan,
body[data-screen='game'] .seat.east .opponent-fan {
  position: absolute !important;
  top: calc(50% + var(--opp-side-fan-offset, 34px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
body[data-screen='game'] .seat.north .opponent-fan {
  justify-self: center !important;
  align-self: start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body[data-screen='game'] .seat.west .seat-open-play,
body[data-screen='game'] .seat.east .seat-open-play {
  position: relative !important;
  grid-area: last !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  justify-self: center !important;
  margin-top: 2px !important;
  width: max-content !important;
}
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] .seat.west .seat-open-play,
  body[data-screen='game'] .seat.east .seat-open-play {
    position: relative !important;
    grid-area: last !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack {
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    padding-top: 0 !important;
    align-content: center !important;
    width: calc(var(--card-w) * 2.7) !important;
    max-width: 100% !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .opponent-fan-wrap {
    width: calc(var(--card-w) * 2.7) !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play {
    min-height: var(--opponent-open-row-h) !important;
    width: min(var(--opponent-open-row-w), 100%) !important;
    max-width: 100% !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    justify-self: center !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}

/* Use in-seat open-play placement for opponents; hide center overlay duplicates. */
body[data-screen='game'] .center-last-north,
body[data-screen='game'] .center-last-west,
body[data-screen='game'] .center-last-east {
  display: none !important;
}

/* Final portrait/web alignment target: keep W/E opponent stations in the top band under avatars. */
body[data-screen='game'] .seat.west > .seat-name-fixed,
body[data-screen='game'] .seat.east > .seat-name-fixed {
  top: 44px !important;
  transform: none !important;
}
body[data-screen='game'][data-orientation='portrait'] .seat.west > .seat-name-fixed,
body[data-screen='game'][data-orientation='landscape'] .seat.west > .seat-name-fixed {
  top: var(--opp-west-name-top, 28px) !important;
  left: var(--opp-west-name-left, 6px) !important;
  right: var(--opp-west-name-right, auto) !important;
  transform: var(--opp-west-name-transform, none) !important;
}
body[data-screen='game'][data-orientation='portrait'] .seat.east > .seat-name-fixed,
body[data-screen='game'][data-orientation='landscape'] .seat.east > .seat-name-fixed {
  top: var(--opp-east-name-top, 28px) !important;
  right: var(--opp-east-name-right, 6px) !important;
  left: var(--opp-east-name-left, auto) !important;
  transform: var(--opp-east-name-transform, none) !important;
}
/* Single-source station float layout (web/mobile + portrait/landscape). */
body[data-screen='game'] {
  --opp-side-station-drop: 0px;
  --opp-side-avatar-top: calc(50% + var(--opp-side-station-drop));
  --opp-side-fan-offset: 34px;
  --opp-north-name-top: 6px;
  --opp-north-name-left: 50%;
  --opp-north-name-right: auto;
  --opp-north-name-transform: translateX(-50%);
  --opp-west-name-top: 28px;
  --opp-west-name-left: 6px;
  --opp-west-name-right: auto;
  --opp-west-name-transform: none;
  --opp-east-name-top: 28px;
  --opp-east-name-left: auto;
  --opp-east-name-right: 6px;
  --opp-east-name-transform: none;
  --opp-closed-gap: clamp(56px, 7.2vmin, 74px);
  --opp-open-gap: clamp(70px, 8.8vmin, 96px);
  --opp-side-fan-top: calc(var(--opp-side-avatar-top) + var(--opp-closed-gap));
  --opp-side-open-top: calc(var(--opp-side-fan-top) + var(--opp-open-gap));
  --opponent-open-card-h: var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale)));
  --opponent-open-row-h: calc(var(--opponent-open-card-h) + 6px);
  --opponent-open-row-w: calc((var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * 2.52) + 6px);
  --opponent-station-h: calc(40px + var(--opp-closed-card-h) + var(--opponent-open-row-h) + 14px);
  --opp-north-fan-top: clamp(72px, 8.2vmin, 96px);
  --opp-north-open-gap: clamp(62px, 7.4vmin, 84px);
  --opp-north-open-top: calc(var(--opp-north-fan-top) + var(--opp-north-open-gap));
  --opp-fan-face-mini-scale: .62;
  --opp-fan-closed-mini-scale: .72;
  --opp-closed-card-h: calc(var(--card-h) * var(--opp-closed-scale));
  --opp-fan-closed-overlap-ratio: -0.42;
  --opp-fan-closed-shift-y: 0px;
  --opp-fan-closed-shift-x: calc(var(--card-w) * -0.72);
  --opp-fan-closed-lift-px: -3px;
  --opp-fan-closed-rotate-step: 2.1deg;
  --opp-fan-closed-rotate-step-rev: -2.1deg;
  --opp-fan-closed-card-rotate-step: 2deg;
  --opp-closed-scale: .72;
  --opp-side-open-scale: 1;
  --opp-played-pair-overlap: -0.82;
}
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] {
    --opp-side-station-drop: 0px;
    --opp-side-fan-offset: 34px;
    --opp-side-pack-pad-top: 0px;
  }
}
body[data-screen='game'] .seat.west,
body[data-screen='game'] .seat.east,
body[data-screen='game'] .seat.north {
  position: relative !important;
}
body[data-screen='game'] .seat.west:hover,
body[data-screen='game'] .seat.east:hover,
body[data-screen='game'] .seat.west:focus-within,
body[data-screen='game'] .seat.east:focus-within,
body[data-screen='game'] .seat.west .side-station-stack:hover,
body[data-screen='game'] .seat.east .side-station-stack:hover {
  z-index: 18 !important;
}
body[data-screen='game'] .seat.west:hover .seat-section,
body[data-screen='game'] .seat.east:hover .seat-section,
body[data-screen='game'] .seat.west:focus-within .seat-section,
body[data-screen='game'] .seat.east:focus-within .seat-section,
body[data-screen='game'] .seat.west .side-station-stack:hover .seat-section,
body[data-screen='game'] .seat.east .side-station-stack:hover .seat-section {
  overflow: visible !important;
}
body[data-screen='game'] .seat.north > .seat-name-fixed {
  top: 6px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
body[data-screen='game'] .seat.west > .seat-name-fixed {
  top: var(--opp-side-avatar-top) !important;
  left: 6px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}
body[data-screen='game'] .seat.east > .seat-name-fixed {
  top: var(--opp-side-avatar-top) !important;
  right: 6px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}
body[data-screen='game'] .seat.west .seat-pack,
body[data-screen='game'] .seat.east .seat-pack,
body[data-screen='game'] .seat.north .seat-pack {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  align-content: start !important;
  justify-items: center !important;
}
body[data-screen='game'] .seat.north .opponent-fan {
  position: absolute !important;
  top: var(--opp-north-fan-top) !important;
  left: 50% !important;
  transform: translateX(-50%) scale(var(--opp-closed-scale)) !important;
  transform-origin: top center !important;
}
body[data-screen='game'] .seat.north .seat-open-play {
  position: absolute !important;
  top: var(--opp-north-open-top) !important;
  left: 50% !important;
  width: max-content !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
}
body[data-screen='game'] .seat.north .seat-open-play .seat-played,
body[data-screen='game'] .seat.west .seat-open-play .seat-played,
body[data-screen='game'] .seat.east .seat-open-play .seat-played {
  transform: scale(1) !important;
  transform-origin: center top !important;
}
body[data-screen='game'] .seat.north .seat-open-play .seat-played .card.mini,
body[data-screen='game'] .seat.west .seat-open-play .seat-played .card.mini,
body[data-screen='game'] .seat.east .seat-open-play .seat-played .card.mini {
  width: calc(var(--card-w) * var(--hand-card-scale, 1.14)) !important;
  height: calc(var(--card-h) * var(--hand-card-scale, 1.14)) !important;
}
body[data-screen='game'] .seat.west .opponent-fan,
body[data-screen='game'] .seat.east .opponent-fan {
  position: absolute !important;
  top: calc(var(--opp-side-avatar-top) + var(--opp-side-fan-offset)) !important;
  left: 50% !important;
  transform: translateX(-50%) scale(var(--opp-closed-scale)) rotate(var(--opp-side-fan-tilt, 0deg)) !important;
  transform-origin: top center !important;
}
body[data-screen='game'] .seat.west .seat-open-play,
body[data-screen='game'] .seat.east .seat-open-play {
  position: absolute !important;
  top: var(--opp-side-open-top) !important;
  left: 50% !important;
  width: max-content !important;
  transform: translateX(-50%) scale(var(--opp-side-open-scale)) rotate(var(--opp-side-open-tilt, 0deg)) !important;
  transform-origin: top center !important;
}
body[data-screen='game'] .seat.west {
  --opp-side-fan-tilt: -10deg;
  --opp-side-open-tilt: -6deg;
}
body[data-screen='game'] .seat.east {
  --opp-side-fan-tilt: 10deg;
  --opp-side-open-tilt: 6deg;
}
@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] .table {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100%;
  }
  body[data-screen='game'] .seat.north .seat-open-play .seat-played,
  body[data-screen='game'] .seat.west .seat-open-play .seat-played,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }
  body[data-screen='game'] .seat.north .seat-open-play .seat-played .card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .seat-played .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played .card.mini {
    width: calc(var(--card-w) * .6667) !important;
    height: calc(var(--card-h) * .6667) !important;
  }
  body[data-screen='game'] .seat.north .seat-open-play .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
  body[data-screen='game'] .seat.north .opponent-fan .card.back.mini.closed-back {
    width: calc(var(--card-w) * var(--opp-fan-closed-mini-scale)) !important;
    height: calc(var(--card-h) * var(--opp-fan-closed-mini-scale)) !important;
  }
  body[data-screen='game'] .seat.west .opponent-fan .card.back.mini.closed-back,
  body[data-screen='game'] .seat.east .opponent-fan .card.back.mini.closed-back {
    width: calc(var(--card-w) * var(--opp-fan-closed-mini-scale)) !important;
    height: calc(var(--card-h) * var(--opp-fan-closed-mini-scale)) !important;
  }
  body[data-screen='game'] .seat.north .opponent-fan {
    top: var(--opp-north-fan-top) !important;
  }
  body[data-screen='game'] .seat.west .opponent-fan,
  body[data-screen='game'] .seat.east .opponent-fan {
    top: var(--opp-side-fan-top) !important;
  }
  body[data-screen='game'] .seat.west > .seat-name-fixed,
  body[data-screen='game'] .seat.east > .seat-name-fixed {
    top: 42% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  body[data-screen='game'] .seat.north > .seat-name-fixed {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  body[data-screen='game'] .seat.north .opponent-fan {
    left: 50% !important;
    right: auto !important;
    top: calc(8px + 44px) !important;
    transform: translateX(-50%) scale(var(--opp-closed-scale)) !important;
  }
  body[data-screen='game'] .seat.west .opponent-fan,
  body[data-screen='game'] .seat.east .opponent-fan {
    left: 50% !important;
    right: auto !important;
    top: calc(42% + 28px) !important;
    transform: translateX(-50%) scale(var(--opp-closed-scale)) !important;
  }
  body[data-screen='game'] .seat.west {
    --opp-side-fan-tilt: 0deg;
    --opp-side-open-tilt: 0deg;
  }
  body[data-screen='game'] .seat.east {
    --opp-side-fan-tilt: 0deg;
    --opp-side-open-tilt: 0deg;
  }
  body[data-screen='game'] .seat.west .seat-open-play,
  body[data-screen='game'] .seat.east .seat-open-play {
    top: auto !important;
  }
  body[data-screen='game'] .seat.west .seat-open-play .seat-played,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }
  body[data-screen='game'] .seat.west .seat-open-play .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.64) !important;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'][data-orientation='portrait'] .action-strip {
    padding-top: 6px !important;
    gap: 3px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .player-tag {
    bottom: calc(100% + 10px) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .control-row {
    gap: 3px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .control-row button {
    min-height: 30px !important;
    padding: 3px 6px !important;
    font-size: .7rem !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .hand {
    padding-top: 2px !important;
    min-height: calc(var(--card-h) * 1.18 + 14px) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .hand .hand-card {
    height: calc(var(--card-h) * 1.18) !important;
    width: auto !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .hand .hand-card.selected {
    transform: translateY(-6px) !important;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] .table-center-grid-wrap {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body[data-screen='game'] .table-center-stack {
    box-shadow: none !important;
  }
  body[data-screen='game'] .seat.north > .seat-name-fixed {
    top: 8px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  body[data-screen='game'] .seat.north .opponent-fan {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: scale(.72) !important;
    justify-self: center !important;
    align-self: start !important;
  }
  body[data-screen='game'] .seat.west > .seat-name-fixed,
  body[data-screen='game'] .seat.east > .seat-name-fixed {
    top: var(--opp-side-avatar-top, calc(38% + var(--opp-side-station-drop, 0px))) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  body[data-screen='game'] .seat.west .opponent-fan,
  body[data-screen='game'] .seat.east .opponent-fan {
    top: calc(var(--opp-side-avatar-top, calc(38% + var(--opp-side-station-drop, 0px))) + var(--opp-side-fan-offset, 32px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) scale(.72) !important;
  }
  body[data-screen='game'] .seat.west .seat-open-play,
  body[data-screen='game'] .seat.east .seat-open-play {
    position: relative !important;
    grid-area: last !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  body[data-screen='game'] .seat.north .seat-open-play .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
  body[data-screen='game'] .table-center-stack {
    border-radius: clamp(18px, 4vw, 26px) !important;
  }
  body[data-screen='game'] .seat.north > .seat-name-fixed,
  body[data-screen='game'] .seat.west > .seat-name-fixed,
  body[data-screen='game'] .seat.east > .seat-name-fixed {
    display: none !important;
  }
  body[data-screen='game'] .seat.north .seat-pack,
  body[data-screen='game'] .seat.west .seat-pack,
  body[data-screen='game'] .seat.east .seat-pack {
    position: relative !important;
    inset: auto !important;
    height: 100% !important;
    width: 100% !important;
    display: grid !important;
    overflow: visible !important;
    grid-template-areas:
      "label"
      "fan"
      "last" !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 0 !important;
    padding-top: var(--opp-side-pack-pad-top, 50%) !important;
  }
  body[data-screen='game'] .seat.north .seat-pack {
    padding-top: 0 !important;
  }
  body[data-screen='game'] .seat.west .seat-pack,
  body[data-screen='game'] .seat.east .seat-pack {
    padding-top: max(var(--opp-side-pack-pad-top, 58%), 58%) !important;
  }
  body[data-screen='game'] .seat.north .seat-pack > .seat-name-fixed,
  body[data-screen='game'] .seat.west .seat-pack > .seat-name-fixed,
  body[data-screen='game'] .seat.east .seat-pack > .seat-name-fixed {
    display: inline-flex !important;
    position: relative !important;
    grid-area: label !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 0 auto !important;
    z-index: 13000 !important;
    isolation: isolate;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-screen='game'] .seat.north .seat-pack > .seat-name-fixed .emote-callout.play-type-call-seat,
  body[data-screen='game'] .seat.west .seat-pack > .seat-name-fixed .emote-callout.play-type-call-seat,
  body[data-screen='game'] .seat.east .seat-pack > .seat-name-fixed .emote-callout.play-type-call-seat,
  body[data-screen='game'] .seat.north .seat-pack > .seat-name-fixed .play-type-call-seat,
  body[data-screen='game'] .seat.west .seat-pack > .seat-name-fixed .play-type-call-seat,
  body[data-screen='game'] .seat.east .seat-pack > .seat-name-fixed .play-type-call-seat,
  body[data-screen='game'] .seat.north .seat-pack > .seat-name-fixed .last-card-call-seat,
  body[data-screen='game'] .seat.west .seat-pack > .seat-name-fixed .last-card-call-seat,
  body[data-screen='game'] .seat.east .seat-pack > .seat-name-fixed .last-card-call-seat {
    z-index: 13001 !important;
  }
  body[data-screen='game'] .seat.north .opponent-fan {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: scale(.72) !important;
    margin-top: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    overflow: visible !important;
  }
  body[data-screen='game'] .seat.west .opponent-fan,
  body[data-screen='game'] .seat.east .opponent-fan {
    position: absolute !important;
    top: calc(var(--opp-side-avatar-top, calc(38% + var(--opp-side-station-drop, 0px))) + var(--opp-side-fan-offset, 32px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    overflow: visible !important;
  }
  body[data-screen='game'] .seat.north .opponent-fan-wrap,
  body[data-screen='game'] .seat.west .opponent-fan-wrap,
  body[data-screen='game'] .seat.east .opponent-fan-wrap {
    grid-area: fan !important;
    margin-top: 0 !important;
    justify-self: center !important;
    align-self: start !important;
  }
  body[data-screen='game'] .seat.north .closed-count-pill,
  body[data-screen='game'] .seat.west .closed-count-pill,
  body[data-screen='game'] .seat.east .closed-count-pill {
    position: absolute !important;
    inset: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, .92) !important;
    z-index: 12 !important;
  }
  body[data-screen='game'] .seat.north .seat-open-play,
  body[data-screen='game'] .seat.west .seat-open-play,
  body[data-screen='game'] .seat.east .seat-open-play {
    position: relative !important;
    grid-area: last !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin-top: 2px !important;
    overflow: visible !important;
    z-index: 1 !important;
  }
  body[data-screen='game'] .seat.west,
  body[data-screen='game'] .seat.east,
  body[data-screen='game'] .seat.north,
  body[data-screen='game'] .seat.west .seat-section,
  body[data-screen='game'] .seat.east .seat-section,
  body[data-screen='game'] .seat.north .seat-section {
    overflow: visible !important;
  }
  body[data-screen='game'] .seat.west .seat-open-play {
    justify-self: center !important;
    margin-left: 0 !important;
  }
  body[data-screen='game'] .seat.east .seat-open-play {
    justify-self: center !important;
    margin-right: 0 !important;
  }
  body[data-screen='game'] .seat.north .seat-open-play .card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .card.mini,
  body[data-screen='game'] .seat.north .seat-open-play .card.discard-card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .card.discard-card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .card.discard-card.mini {
    width: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * 1) !important;
    height: calc(var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale))) * 1) !important;
  }
  body[data-screen='game'] .seat.north .seat-open-play .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .seat-played .card.mini + .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
  body[data-screen='game'] .seat.north .seat-open-play .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .seat-played.seat-played-fan .card.mini + .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played.seat-played-fan .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * -0.84) !important;
  }
  body[data-screen='game'] .seat.north .play-type-call-seat,
  body[data-screen='game'] .seat.north .last-card-call-seat,
  body[data-screen='game'] .seat.north .pass-call.play-type-call-seat {
    top: 44px !important;
    left: 50% !important;
    right: auto !important;
    --callout-base-x: -50%;
    --callout-base-y: 0px;
  }
  body[data-screen='game'] .seat.west .play-type-call-seat,
  body[data-screen='game'] .seat.west .last-card-call-seat {
    top: calc(33% + 34px) !important;
    left: 50% !important;
    right: auto !important;
    --callout-base-x: -50%;
    --callout-base-y: 0px;
  }
  body[data-screen='game'] .seat.east .play-type-call-seat,
  body[data-screen='game'] .seat.east .last-card-call-seat {
    top: calc(33% + 34px) !important;
    left: 50% !important;
    right: auto !important;
    --callout-base-x: -50%;
    --callout-base-y: 0px;
  }
}

body[data-screen='game'] .seat.active,
body[data-screen='game'] .seat.active::before,
body[data-screen='game'] .seat.active .seat-section,
body[data-screen='game'] .seat.west.active .seat-section,
body[data-screen='game'] .seat.east.active .seat-section,
body[data-screen='game'] .seat.north.active .seat-section {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

body[data-screen='game'] .seat.active,
body[data-screen='game'] .seat.active .seat-section,
body[data-screen='game'] .seat.active .seat-pack,
body[data-screen='game'] .seat.west.active,
body[data-screen='game'] .seat.east.active,
body[data-screen='game'] .seat.north.active,
body[data-screen='game'] .seat.west.active .seat-section,
body[data-screen='game'] .seat.east.active .seat-section,
body[data-screen='game'] .seat.north.active .seat-section {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media (orientation: landscape) {
  body[data-screen='game'][data-orientation='landscape'] .north,
  body[data-screen='game'][data-orientation='landscape'] .east,
  body[data-screen='game'][data-orientation='landscape'] .west {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-pack,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-pack {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-areas:
      "label"
      "fan"
      "last" !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 0 !important;
    padding-top: 0 !important;
    z-index: 5 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-pack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-pack > .seat-name-fixed {
    display: inline-flex !important;
    position: relative !important;
    grid-area: label !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 0 auto !important;
    z-index: 13000 !important;
    isolation: isolate;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan-wrap {
    grid-area: fan !important;
    margin-top: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan {
    position: relative !important;
    grid-area: fan !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    justify-self: center !important;
    align-self: start !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-open-play,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play {
    position: relative !important;
    grid-area: last !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin-top: 2px !important;
    overflow: visible !important;
    z-index: 1 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play {
    justify-self: center !important;
    margin-left: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play {
    justify-self: center !important;
    margin-right: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west,
  body[data-screen='game'][data-orientation='landscape'] .seat.east,
  body[data-screen='game'][data-orientation='landscape'] .seat.north,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-section,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-section,
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-section {
    overflow: visible !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'][data-orientation='portrait'] .seat.north .opponent-fan {
    flex-direction: row !important;
    transform: scale(var(--opp-closed-scale)) !important;
    transform-origin: top center !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .opponent-fan,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .opponent-fan {
    flex-direction: row !important;
    transform: scale(var(--opp-closed-scale)) !important;
    transform-origin: top center !important;
    top: calc(50% + 34px) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .opponent-fan {
    position: relative !important;
    grid-area: fan !important;
    flex-direction: row !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: none !important;
    transform: scale(var(--opp-closed-scale)) !important;
    transform-origin: top center !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .opponent-fan,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .opponent-fan {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .opponent-fan .card.back.mini.closed-back,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .opponent-fan .card.back.mini.closed-back,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .opponent-fan .card.back.mini.closed-back {
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .closed-count-pill,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .closed-count-pill,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .closed-count-pill {
    right: 0 !important;
    bottom: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play {
    position: relative !important;
    grid-area: last !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 860px) {
}

@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'][data-orientation='portrait'] .coach-marks-sheet {
    width: min(100%, calc(100vw - 12px));
    padding: 12px;
  }
  body[data-screen='game'][data-orientation='portrait'] .coach-marks-sheet .intro-head {
    margin-bottom: 8px;
  }
  body[data-screen='game'][data-orientation='portrait'] .coach-marks-block {
    padding: 7px;
  }
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-list {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 7px;
  }
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-item-handUp,
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-item-handRight,
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-item-handDown,
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-item-handLeft,
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-item-cardUp {
    grid-area: auto;
  }
  body[data-screen='game'][data-orientation='portrait'] .coach-gesture-item {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 5px 6px;
  }
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-icon {
    width: 56px;
    height: 56px;
  }
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-label {
    font-size: .84rem;
  }
  body[data-screen='game'][data-orientation='portrait'] .gesture-help-copy {
    font-size: .74rem;
  }
  body[data-screen='game'] .seat.north > .seat-name-fixed,
  body[data-screen='game'] .seat.north .seat-pack > .seat-name-fixed {
    top: 6px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack > .seat-name-fixed .name,
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack > .seat-name-fixed .seat-identity,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed .name,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed .name,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed .seat-identity,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed .seat-identity {
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed {
    min-height: 0 !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed {
    min-height: 0 !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack > .seat-name-fixed {
    min-height: 0 !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed .player-avatar-wrap.player-avatar-wrap-opponent,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed .player-avatar-wrap.player-avatar-wrap-opponent {
    background: transparent !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed .player-avatar-wrap.player-avatar-wrap-opponent.avatar-rim::after,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed .player-avatar-wrap.player-avatar-wrap-opponent.avatar-rim::after {
    border: 0 !important;
    box-shadow: none !important;
  }
}

body[data-screen='game'] .seat-name-fixed[data-opponent-name] .play-type-call-seat,
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .last-card-call-seat {
  max-inline-size: none !important;
}

body[data-screen='game'] .seat-name-fixed[data-opponent-name] .play-type-call-seat .callout-box,
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .last-card-call-seat .callout-box {
  max-inline-size: none !important;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .seat-motto-callout .callout-box {
  max-inline-size: 150px !important;
}

body[data-screen='game'] .seat-name-fixed[data-opponent-name] .play-type-call-seat .hk-inner,
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .last-card-call-seat .hk-inner {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  text-wrap: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-inline-size: none !important;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .seat-motto-callout .hk-inner {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-wrap: balance !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-inline-size: none !important;
}
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .seat-motto-callout .hk-power-motto {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-wrap: wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
  font-size: calc(1.9rem * var(--callout-size, 1)) !important;
  display: block !important;
}

@media (max-width: 860px) {
  body[data-screen='game'][data-orientation='portrait'] #app,
  body[data-screen='game'][data-orientation='portrait'] .action-zone,
  body[data-screen='game'][data-orientation='portrait'] .action-strip {
    padding-bottom: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] #app {
    padding: 0 5px 0 !important;
  }
  body[data-screen='game'][data-native-ios='1'][data-orientation='portrait'] #app,
  body[data-screen='game'][data-ios='1'][data-webapp='1'][data-orientation='portrait'] #app {
    box-sizing: border-box;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: 0 !important;
  }
  body[data-screen='game'][data-native-android='1'][data-orientation='portrait'] #app {
    box-sizing: border-box;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
  body[data-screen='game'][data-orientation='portrait'][data-log-open='0'] .action-zone,
  body[data-screen='game'][data-orientation='portrait'][data-log-open='1'] .action-zone,
  body[data-screen='game'][data-orientation='portrait'][data-log-open='0'] .action-strip,
  body[data-screen='game'][data-orientation='portrait'][data-log-open='1'] .action-strip {
    padding-bottom: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-zone {
    gap: 4px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip {
    padding-top: 4px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .control-row {
    padding-top: 4px !important;
    gap: 4px !important;
    row-gap: 4px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .control-row .game-cta-btn {
    min-height: 30px !important;
    padding: 3px 8px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .control-row .game-icon-btn,
  body[data-screen='game'][data-orientation='portrait'] .action-strip .control-row #auto-sort-btn.game-cta-btn {
    min-width: 32px !important;
    min-height: 30px !important;
    padding: 3px 7px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .hand {
    min-height: calc(var(--card-h) * 1.18 + 18px) !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'][data-is-mobile='1'] :is(.action-strip .player-tag, .table > .player-tag) {
    display: inline-flex !important;
    position: absolute !important;
    left: var(--south-tag-left) !important;
    right: var(--south-tag-right) !important;
    top: var(--south-tag-top) !important;
    bottom: var(--south-tag-bottom) !important;
    transform: var(--south-tag-transform) !important;
    z-index: var(--south-tag-z) !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'][data-is-mobile='1'] .action-strip .player-tag {
    display: none !important;
  }
}

@media (orientation: landscape) {
  body[data-screen='game'][data-orientation='landscape'] {
    --opponent-open-card-h: var(--discard-card-h, calc(var(--card-h) * var(--hand-card-scale) * var(--card-scale)));
    --opponent-open-row-h: calc(var(--opponent-open-card-h) + 6px);
    --opponent-open-row-w: calc((var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * 2.52) + 6px);
    --opponent-station-h: calc(40px + var(--opp-closed-card-h) + var(--opponent-open-row-h) + 14px);
    --opp-closed-scale: .84;
    --opp-fan-closed-overlap-ratio: -0.42;
    --opp-fan-closed-shift-x: calc(var(--card-w) * -0.56);
    --opp-side-fan-tilt: 0deg;
  }
  body[data-screen='game'][data-orientation='landscape'] .table-center-grid-wrap {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .table-center-stack {
    box-shadow: none !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack {
    min-height: var(--opponent-station-h) !important;
    grid-template-rows: auto auto minmax(var(--opponent-open-row-h), auto) !important;
    padding-top: 8px !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-pack,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-pack {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: var(--opp-side-pack-pad-top, 0px) !important;
    align-content: stretch !important;
    justify-items: stretch !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack > .seat-name-fixed .name,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack > .seat-name-fixed .name,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack > .seat-name-fixed .name,
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack > .seat-name-fixed .seat-identity,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack > .seat-name-fixed .seat-identity,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack > .seat-name-fixed .seat-identity {
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack > .seat-name-fixed {
    min-height: 0 !important;
    padding: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack > .seat-name-fixed .player-avatar-wrap.player-avatar-wrap-opponent.avatar-rim::after,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack > .seat-name-fixed .player-avatar-wrap.player-avatar-wrap-opponent.avatar-rim::after {
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan-wrap {
    width: max-content !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan {
    margin-top: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack .opponent-fan {
    margin-top: 0 !important;
    transform: scale(var(--opp-closed-scale)) !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan .card.back.mini.closed-back,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan .card.back.mini.closed-back {
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-open-play,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play {
    min-height: var(--opponent-open-row-h) !important;
    width: min(var(--opponent-open-row-w), 100%) !important;
    max-width: 100% !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    justify-self: center !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play .seat-played,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play .seat-played {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: center !important;
    margin: 0 auto !important;
    transform: none !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding-top: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan .closed-back,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan .closed-back {
    width: calc(var(--card-w) * var(--opp-fan-closed-mini-scale)) !important;
    height: calc(var(--card-h) * var(--opp-fan-closed-mini-scale)) !important;
    margin-top: 0 !important;
    margin-left: var(--opp-fan-closed-shift-x) !important;
    transform-origin: center center !important;
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
}

@media (min-width: 861px) and (orientation: landscape) {
  body[data-screen='game'][data-orientation='landscape'] {
    --opp-fan-closed-mini-scale: .84;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan-wrap,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan-wrap {
    width: max-content !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    justify-self: center !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan {
    margin-top: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan {
    transform: scale(var(--opp-closed-scale)) !important;
    transform-origin: top center !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack .opponent-fan,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack .opponent-fan {
    left: auto !important;
    right: auto !important;
    transform: scale(var(--opp-closed-scale)) !important;
    transform-origin: top center !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan .card.back.mini.closed-back {
    width: calc(var(--card-w) * var(--opp-fan-closed-mini-scale)) !important;
    height: calc(var(--card-h) * var(--opp-fan-closed-mini-scale)) !important;
    margin-top: 0 !important;
    margin-left: var(--opp-fan-closed-shift-x) !important;
    transform-origin: center center !important;
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan .card.back.mini.closed-back,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan .card.back.mini.closed-back {
    width: calc(var(--card-w) * var(--opp-fan-closed-mini-scale)) !important;
    height: calc(var(--card-h) * var(--opp-fan-closed-mini-scale)) !important;
    margin-top: 0 !important;
    margin-left: var(--opp-fan-closed-shift-x) !important;
    transform-origin: center center !important;
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan .closed-back:first-child,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .opponent-fan .closed-back:first-child,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .opponent-fan .closed-back:first-child {
    margin-left: 0 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .opponent-fan {
    margin-top: 0 !important;
    z-index: 11001 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .closed-card-pile {
    z-index: 11002 !important;
  }
  body[data-screen='game'][data-orientation='landscape'] .seat.north .closed-count-pill {
    bottom: 0 !important;
    right: 0 !important;
    z-index: 20001 !important;
  }
}

@media (max-width: 860px) {
  body[data-screen='game'][data-orientation='portrait'] #app {
    height: var(--app-vh, 100svh) !important;
    max-height: var(--app-vh, 100svh) !important;
    min-height: var(--app-vh, 100svh) !important;
    overflow: hidden !important;
    padding: 0 5px 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .game-shell,
  body[data-screen='game'][data-orientation='portrait'] .main-zone {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-zone,
  body[data-screen='game'][data-orientation='portrait'] .action-strip,
  body[data-screen='game'][data-orientation='portrait'] .action-strip .hand {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .action-strip .hand {
    overflow: hidden !important;
    min-height: calc(var(--card-h) * 1.2 + 24px) !important;
    padding-bottom: 6px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .center-last-south {
    bottom: calc(var(--game-table-h, 0px) * 0.025) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .main-zone {
    align-content: start !important;
    grid-template-rows: auto minmax(0, var(--game-table-h, 1fr)) auto !important;
  }
}

body[data-screen='game'] .table,
body[data-screen='game'] .table-center-stack,
body[data-screen='game'] .table-center-grid-wrap {
  overflow: visible !important;
}

body[data-screen='game'] .table {
  position: relative !important;
}
body[data-screen='game'][data-haptic-fallback='1'] .table {
  box-shadow:
    inset 0 0 0 2px rgba(255, 220, 128, .55),
    0 0 18px rgba(255, 220, 128, .32);
  filter: saturate(1.08) brightness(1.03);
  transition: box-shadow .12s ease, filter .12s ease;
}
body[data-screen='game'][data-haptic-fallback='1'] .action-strip {
  box-shadow: 0 0 14px rgba(255, 220, 128, .28);
  transition: box-shadow .12s ease;
}
body[data-screen='game'] {
  --table-felt-inset: clamp(12px, 1.7vw, 20px);
  --room-top-meta-offset-top: var(--table-felt-inset);
  --room-top-meta-offset-left: var(--table-felt-inset);
}
body[data-screen='game'] .room-top-meta-table {
  position: absolute !important;
  top: var(--room-top-meta-offset-top) !important;
  left: var(--room-top-meta-offset-left) !important;
  right: auto !important;
  transform: none !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
body[data-screen='game'] .room-top-meta-table .room-top-meta.room-top-meta-inline {
  transform: none !important;
}
body[data-screen='game'] .room-center-meta {
  display: none !important;
}
body[data-screen='game'] .game-title-wrap .room-top-meta,
body[data-screen='game'] .action-strip .control-row .room-top-meta {
  display: none !important;
}
body[data-screen='game'] .action-strip :is(.play-type-call-self, .last-card-call-self, .emote-callout) {
  z-index: 14000 !important;
}
body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) :is(.opponent-fan-wrap, .opponent-fan) {
  z-index: 1 !important;
}
body[data-screen='game'] :is(.seat.north .seat-pack, .seat.west .side-station-stack, .seat.east .side-station-stack) {
  position: relative !important;
}
body[data-screen='game'] :is(.seat.north .seat-section, .seat.west .seat-section, .seat.east .seat-section) {
  overflow: visible !important;
}
body[data-screen='game'] :is(.seat.north .seat-pack > .seat-name-fixed, .seat.west .side-station-stack > .seat-name-fixed, .seat.east .side-station-stack > .seat-name-fixed) {
  position: relative !important;
  z-index: 13010 !important;
}
body[data-screen='game'] :is(.seat.west .side-station-stack > .seat-name-fixed[data-opponent-name], .seat.east .side-station-stack > .seat-name-fixed[data-opponent-name]) {
  position: relative !important;
  z-index: 15010 !important;
}
body[data-screen='game'] :is(.seat.west .side-station-stack > .seat-name-fixed[data-opponent-name] .player-avatar-wrap.player-avatar-wrap-opponent, .seat.east .side-station-stack > .seat-name-fixed[data-opponent-name] .player-avatar-wrap.player-avatar-wrap-opponent) {
  position: relative !important;
  z-index: 15011 !important;
}
body[data-screen='game'] :is(.seat.north .opponent-fan-wrap, .seat.west .side-station-stack > .opponent-fan-wrap, .seat.east .side-station-stack > .opponent-fan-wrap, .seat.north .side-station-core, .seat.west .side-station-core, .seat.east .side-station-core) {
  position: relative !important;
  z-index: 13000 !important;
}
body[data-screen='game'] :is(.seat.north .seat-open-play, .seat.west .seat-open-play, .seat.east .seat-open-play) {
  position: relative !important;
  z-index: 11000 !important;
}

body[data-screen='game'] .seat-name-fixed[data-opponent-name] :is(.play-type-call-seat, .last-card-call-seat, .emote-callout.play-type-call-seat) {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 50% !important;
  right: auto !important;
  --callout-base-x: -50%;
  --callout-base-y: 0px;
}

body[data-screen='game'] .seat-name-fixed[data-opponent-name] :is(.play-type-call-seat, .last-card-call-seat, .emote-callout.play-type-call-seat) .tail {
  top: auto !important;
  bottom: calc(-20px * var(--callout-size, 1)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  border-color: transparent !important;
  border-top-color: var(--bubble-border) !important;
}

body[data-screen='game'] .seat-name-fixed[data-opponent-name] :is(.play-type-call-seat, .last-card-call-seat, .emote-callout.play-type-call-seat) .tail::after {
  top: calc(-14px * var(--callout-size, 1)) !important;
  bottom: auto !important;
  left: calc(-10px * var(--callout-size, 1)) !important;
  right: auto !important;
  border-color: transparent !important;
  border-top-color: var(--bubble-fill) !important;
}

/* Food callout uses its own anchor class so it won't inherit play/pass seat callout offsets. */
body[data-screen='game'] .seat-name-fixed[data-opponent-name] .food-callout-seat {
  top: calc(100% + 44px) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  --callout-base-x: -50%;
  --callout-base-y: 0px;
  z-index: 13001 !important;
}

body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) > .seat-name-fixed {
  border: 0 !important;
  box-shadow: none !important;
}

body[data-screen='game'][data-orientation='landscape'] .action-strip,
body[data-screen='game'][data-orientation='portrait'] .action-strip {
  padding-bottom: 12px !important;
}

@media (min-width: 861px) and (orientation: landscape) {
  body[data-screen='game'] .seat.west .side-station-stack > .seat-name-fixed[data-opponent-name],
  body[data-screen='game'] .seat.east .side-station-stack > .seat-name-fixed[data-opponent-name] {
    z-index: 14010 !important;
    pointer-events: auto !important;
  }
}

body[data-screen='game'] .history-detail-row .history-cards {
  height: auto !important;
  align-items: flex-start !important;
  overflow-y: visible !important;
}
body[data-log-sheet='1'] .history-detail-row .history-cards {
  height: auto !important;
}

@media (max-width: 860px) {
  body[data-screen='game'] .self-table-emote {
    --emote-base-w: clamp(140px, 28vw, 210px);
    --emote-throw-w: clamp(165px, 34vw, 250px);
    --emote-smash-w: clamp(170px, 35vw, 260px);
    --emote-cheers-w: clamp(175px, 36vw, 265px);
    --emote-love-w: clamp(155px, 31vw, 225px);
    --emote-crack-w: clamp(155px, 31vw, 225px);
    --emote-sleep-w: clamp(145px, 29vw, 215px);
    --emote-rude-w: clamp(210px, 42vw, 300px);
    --emote-rude-h: clamp(138px, 27vw, 190px);
  }
}

@media (max-width: 860px) {
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-north .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-west .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-east .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-south .seat-played.seat-played-pair .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * var(--opp-played-pair-overlap)) !important;
  }
}

@media (orientation: landscape) {
  body[data-screen='game'] .seat.north .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .seat.west .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .seat.east .seat-open-play .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-north .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-west .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-east .seat-played.seat-played-pair .card.mini + .card.mini,
  body[data-screen='game'] .center-last-south .seat-played.seat-played-pair .card.mini + .card.mini {
    margin-left: calc(var(--discard-card-w, calc(var(--card-w) * var(--hand-card-scale) * var(--card-scale))) * var(--opp-played-pair-overlap)) !important;
  }
}

/* Closed fan parity: no extra padding; on-hand pile badge close to fan (portrait-like) in all views. */
body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) .opponent-fan {
  padding: 0 !important;
  padding-top: 0 !important;
}
body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) .opponent-fan-wrap {
  padding: 0 !important;
  margin-top: 0 !important;
}
body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) .card.back.mini.closed-back,
body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) .card.back.mini.closed-back .card-art {
  padding: 0 !important;
}
body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) .opponent-fan {
  margin-top: 0 !important;
}
body[data-screen='game'] :is(.seat.north, .seat.west, .seat.east) .closed-count-pill {
  position: absolute !important;
  inset: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 4 !important;
}
/* Strip legacy vertical spacing on side closed-fan station in all orientations. */
body[data-screen='game'] :is(.seat.west, .seat.east) .side-station-stack {
  gap: 0 !important;
  padding: 0 !important;
  align-content: start !important;
}
body[data-screen='game'] :is(.seat.west, .seat.east) .side-station-stack > .seat-name-fixed,
body[data-screen='game'] :is(.seat.west, .seat.east) .side-station-stack > .opponent-fan-wrap {
  margin: 0 !important;
}
body[data-screen='game'] :is(.seat.west, .seat.east) .side-station-stack > .opponent-fan-wrap {
  padding: 0 !important;
  align-self: start !important;
}
/* Canonical side closed-fan geometry: remove legacy vertical offset that looks like top padding. */
body[data-screen='game'] :is(.seat.west, .seat.east) .side-station-stack .opponent-fan-wrap {
  display: flex !important;
  align-items: flex-end !important;
  line-height: 0 !important;
}
body[data-screen='game'] :is(.seat.west, .seat.east) .side-station-stack .opponent-fan {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  line-height: 0 !important;
}
body[data-screen='game'] :is(.seat.west, .seat.east) .side-station-stack .opponent-fan .closed-back {
  margin-top: 0 !important;
  transform-origin: center bottom !important;
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--opp-fan-closed-card-rotate-step))) !important;
}

@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'][data-orientation='portrait'] {
    --opp-side-station-drop: 0px;
    --opp-side-avatar-top: calc(var(--game-table-h, 0px) * 0.52);
    --opp-side-fan-offset: 34px;
    --opp-closed-gap: clamp(22px, 3vmin, 28px);
    --opp-open-gap: clamp(62px, 7.8vmin, 78px);
    --opp-side-section-pad-top: calc(var(--game-table-h, 0px) * 0.06);
    --opp-north-fan-top: clamp(44px, 5vmin, 52px);
    --opp-north-open-gap: clamp(50px, 5.8vmin, 62px);
    --opp-fan-closed-mini-scale: .72;
    --opp-fan-closed-overlap-ratio: -0.42;
    --opp-fan-closed-shift-y: 0px;
    --opp-fan-closed-shift-x: calc(var(--card-w) * -0.56);
    --opp-closed-scale: .72;
    --opp-side-open-scale: 1;
  }
  /* Match landscape-like buffer between closed fan and open cards in portrait. */
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack {
    gap: 4px !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north {
    width: max-content !important;
    max-width: 100% !important;
    justify-self: center !important;
    align-self: center !important;
    margin-inline: auto !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack {
    width: calc(var(--card-w) * 2.7) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    justify-self: center !important;
    align-content: center !important;
  }
  body[data-screen='game'][data-orientation='portrait'] {
    --opp-side-pack-pad-top: calc(var(--game-table-h, 0px) * 0.26);
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-pack,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-pack {
    padding-top: var(--opp-side-pack-pad-top) !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-pack > .seat-name-fixed,
  body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-pack > .seat-name-fixed {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  body[data-screen='game'][data-orientation='portrait'] .seat-name-fixed[data-opponent-name] .food-callout-seat {
    top: calc(100% + 72px) !important;
  }
}

/* Layer lock: food visuals above open/discard cards, below profile labels. */
body[data-screen='game'] .service-bell-layer,
body[data-screen='game'] .table > .service-bell-layer {
  z-index: 2147483300 !important;
}

/* Final all-views layer contract: profile labels > food > open/discard cards. */
body[data-screen='game'] :is(.seat.north > .seat-name-fixed, .seat.west > .seat-name-fixed, .seat.east > .seat-name-fixed, .seat.north .seat-pack > .seat-name-fixed, .seat.west .seat-pack > .seat-name-fixed, .seat.east .seat-pack > .seat-name-fixed, .seat.north .side-station-stack > .seat-name-fixed, .seat.west .side-station-stack > .seat-name-fixed, .seat.east .side-station-stack > .seat-name-fixed),
body[data-screen='game'] .seat-name-fixed[data-opponent-name] :is(.name, .seat-identity, .seat-name-text, .seat-subline, .seat-round-wins, .seat-namecard) {
  position: relative !important;
  z-index: 13000 !important;
}
/* Final Layer Contract (authoritative)
   cards < food slide < seat station < all callouts/emote effects */
body[data-screen='game'] :is(
  .table-center-stack,
  .center-last,
  .center-last-north,
  .center-last-west,
  .center-last-east,
  .center-last-south,
  .seat-open-play,
  .seat-open-play .seat-played,
  .seat-open-play .card.mini,
  .seat-open-play .card.discard-card.mini
) {
  z-index: 11000 !important;
}
body[data-screen='game'] :is(
  .service-bell-food-layer,
  .service-bell-food
) {
  z-index: 2147483300 !important;
}
body[data-screen='game'] :is(
  .seat-name-fixed[data-opponent-name],
  .mobile-opponent-name[data-opponent-name],
  .seat-name-fixed.player-tag
) {
  z-index: 14000 !important;
}
body[data-screen='game'] :is(
  .play-type-call,
  .last-card-call,
  .emote-callout,
  .seat-motto-callout,
  .self-table-emote,
  .table-emote
) {
  z-index: 17000 !important;
}
body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-pack > .seat-name-fixed,
body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack > .seat-name-fixed,
body[data-screen='game'][data-orientation='landscape'] .seat.west .side-station-stack > .seat-name-fixed,
body[data-screen='game'][data-orientation='landscape'] .seat.east .side-station-stack > .seat-name-fixed,
body[data-screen='game'][data-orientation='portrait'] .seat.west .side-station-stack > .seat-name-fixed,
body[data-screen='game'][data-orientation='portrait'] .seat.east .side-station-stack > .seat-name-fixed {
  z-index: 13010 !important;
}
body[data-screen='game'][data-orientation='landscape'] .seat.north .seat-open-play,
body[data-screen='game'][data-orientation='landscape'] .seat.west .seat-open-play,
body[data-screen='game'][data-orientation='landscape'] .seat.east .seat-open-play,
body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-open-play,
body[data-screen='game'][data-orientation='portrait'] .seat.west .seat-open-play,
body[data-screen='game'][data-orientation='portrait'] .seat.east .seat-open-play {
  z-index: 11000 !important;
}

/* Authoritative seat layering: station above food, open row below food. */
body[data-screen='game'] :is(.seat.north > .seat-pack, .seat.west > .seat-pack, .seat.east > .seat-pack) {
  position: relative !important;
  z-index: 13000 !important;
}
body[data-screen='game'] :is(.seat.north > .seat-open-play, .seat.west > .seat-open-play, .seat.east > .seat-open-play) {
  position: absolute !important;
  z-index: 11000 !important;
}
body[data-screen='game'] .seat.north > .seat-open-play,
body[data-screen='game'] .seat.west > .seat-open-play,
body[data-screen='game'] .seat.east > .seat-open-play {
  position: relative !important;
  grid-area: last !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  justify-self: center !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}
body[data-screen='game'][data-orientation='landscape'] .seat.north > .seat-open-play,
body[data-screen='game'][data-orientation='landscape'] .seat.west > .seat-open-play,
body[data-screen='game'][data-orientation='landscape'] .seat.east > .seat-open-play {
  position: relative !important;
  grid-area: last !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  justify-self: center !important;
  margin-top: 2px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

/* Root stack: food is table-level; split paint order without moving anchors. */
body[data-screen='game'] :is(.seat.north > .seat-pack, .seat.west > .seat-pack, .seat.east > .seat-pack) {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}
body[data-screen='game'] :is(.seat.north .closed-card-pile, .seat.west .closed-card-pile, .seat.east .closed-card-pile) {
  position: relative !important;
  z-index: 11002 !important;
  isolation: auto !important;
}
body[data-screen='game'] :is(.seat.north .opponent-fan-wrap, .seat.west .opponent-fan-wrap, .seat.east .opponent-fan-wrap) {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}
body[data-screen='game'] .seat.north .opponent-fan-wrap {
  grid-area: fan !important;
  display: flex !important;
  justify-self: center !important;
  align-self: start !important;
}
body[data-screen='game'] :is(.seat.north .opponent-fan, .seat.west .opponent-fan, .seat.east .opponent-fan) {
    position: relative !important;
    z-index: 11000 !important;
  }
body[data-screen='game'] :is(.seat.north .closed-back, .seat.west .closed-back, .seat.east .closed-back) {
  position: relative !important;
  z-index: 11000 !important;
}
body[data-screen='game'] :is(.seat.north .closed-count-pill, .seat.west .closed-count-pill, .seat.east .closed-count-pill) {
  position: absolute !important;
  z-index: 20000 !important;
  transform: translateZ(0) !important;
}
body[data-screen='game'][data-orientation='portrait'] :is(.seat.north .closed-card-pile > .closed-count-pill, .seat.west .closed-card-pile > .closed-count-pill, .seat.east .closed-card-pile > .closed-count-pill) {
  right: 2px !important;
  bottom: 10px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 20000 !important;
  transform: translateZ(0) !important;
}
body[data-screen='game'] :is(.seat.north .opponent-fan-wrap > .closed-count-pill, .seat.west .opponent-fan-wrap > .closed-count-pill, .seat.east .opponent-fan-wrap > .closed-count-pill) {
  inset: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 20000 !important;
}
body[data-screen='game'] :is(.seat.north .seat-pack, .seat.west .side-station-stack, .seat.east .side-station-stack) {
  gap: 4px !important;
}
body[data-screen='game'][data-orientation='portrait'] .seat.north .seat-pack {
  align-content: center !important;
  justify-content: center !important;
}
body[data-screen='game'] :is(.seat.west .side-station-core, .seat.east .side-station-core) {
  gap: 4px !important;
}
body[data-screen='game'] :is(.seat.west .side-station-core > .opponent-fan-wrap, .seat.east .side-station-core > .opponent-fan-wrap) {
  margin-top: 4px !important;
}
body[data-screen='game'] :is(.seat.north .seat-open-play, .seat.west .seat-open-play, .seat.east .seat-open-play) {
  margin-top: 2px !important;
}
body[data-screen='game'] :is(.seat.north .seat-played-pass, .seat.west .seat-played-pass, .seat.east .seat-played-pass, .center-last-south .seat-played-pass) {
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-screen='game'] :is(.seat.north .seat-pass-label, .seat.west .seat-pass-label, .seat.east .seat-pass-label, .center-last-south .seat-pass-label) {
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-screen='game'] :is(.seat.north .seat-name-fixed[data-opponent-name], .seat.west .seat-name-fixed[data-opponent-name], .seat.east .seat-name-fixed[data-opponent-name]) {
  position: relative !important;
  z-index: 22040 !important;
}
body[data-screen='game'] :is(.seat.west .side-station-core > .seat-name-fixed[data-opponent-name], .seat.east .side-station-core > .seat-name-fixed[data-opponent-name]) {
  position: relative !important;
  z-index: 22045 !important;
  isolation: isolate !important;
}
body[data-screen='game'] :is(.seat.west .side-station-core > .seat-name-fixed[data-opponent-name] .name, .seat.east .side-station-core > .seat-name-fixed[data-opponent-name] .name) {
  position: relative !important;
  z-index: 22046 !important;
}
@media (min-width: 861px) and (orientation: portrait) {
  body[data-screen='game'] .topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  body[data-screen='game'] .topbar > div:first-child {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-screen='game'] .topbar .game-title-wrap {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-screen='game'] .topbar-right {
    display: flex !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  body[data-screen='game'] .topbar-right .control-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  body[data-screen='game'] .topbar-right .control-row button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 860px) and (orientation: portrait) {
  body[data-screen='game'] .topbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  body[data-screen='game'] .topbar-right {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-items: stretch !important;
  }
  body[data-screen='game'] .topbar-right .control-row {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  body[data-screen='game'] .topbar-right .control-row::-webkit-scrollbar {
    display: none;
  }
  body[data-screen='game'] .topbar-right .control-row button,
  body[data-screen='game'] .topbar-right .lang-menu-trigger {
    min-height: 30px !important;
    padding: 3px 8px !important;
    font-size: clamp(.66rem, 1.9vw, .78rem) !important;
  }
}

@media (orientation: landscape) {
  body[data-screen='game'] .topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  body[data-screen='game'] .topbar > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  body[data-screen='game'] .topbar-right {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    justify-items: end !important;
  }
  body[data-screen='game'] .topbar-right .control-row {
    width: auto !important;
    max-width: none !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  body[data-screen='game'] .topbar-right .control-row::-webkit-scrollbar {
    display: none;
  }
}

/* Final top-layer override: opponent callouts stay above seat stations, fans, and closed-card stacks. */
body[data-screen='game'] :is(
  .seat.north > .seat-pack > .seat-name-fixed,
  .seat.west > .side-station-stack > .seat-name-fixed,
  .seat.east > .side-station-stack > .seat-name-fixed,
  .seat.north .seat-pack > .seat-name-fixed[data-opponent-name],
  .seat.west .side-station-stack > .seat-name-fixed[data-opponent-name],
  .seat.east .side-station-stack > .seat-name-fixed[data-opponent-name]
) {
  position: relative !important;
  z-index: 28000 !important;
  isolation: isolate !important;
}

/* Foreground lock: active callouts must paint above every in-game card stack. */
body[data-screen='game'] :is(
  .seat.north,
  .seat.west,
  .seat.east,
  .seat.north .seat-pack,
  .seat.west .side-station-stack,
  .seat.east .side-station-stack,
  .seat.west .side-station-core,
  .seat.east .side-station-core
):has(:is(.play-type-call, .last-card-call, .emote-callout, .seat-motto-callout)) {
  position: relative !important;
  z-index: 2147482000 !important;
  isolation: auto !important;
}

body[data-screen='game'] :is(
  .seat-name-fixed,
  .mobile-opponent-name,
  .action-strip,
  .action-strip .player-tag
):has(:is(.play-type-call, .last-card-call, .emote-callout, .seat-motto-callout)) {
  position: relative !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
}

body[data-screen='game'] :is(
  .play-type-call,
  .last-card-call,
  .emote-callout,
  .seat-motto-callout,
  .self-table-emote,
  .table-emote
) {
  position: absolute !important;
  z-index: 2147483600 !important;
}

body[data-screen='game'] .game-foreground-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  pointer-events: none;
  overflow: visible;
  contain: none;
  isolation: isolate;
}
body[data-screen='game']:has(.room-overlay, .intro-modal, .lb-modal, .score-guide-modal, .coach-marks-modal, .legal-modal.open) .game-foreground-layer {
  display: none !important;
}

body[data-screen='game'] .game-foreground-layer :is(
  .play-type-call,
  .last-card-call,
  .emote-callout,
  .food-callout-seat
) {
  position: fixed !important;
  left: var(--callout-layer-left, 0px) !important;
  top: var(--callout-layer-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  pointer-events: none;
}

body[data-screen='game'] .game-foreground-layer [data-callout-pending='1']:not([data-callout-ready='1']) {
  opacity: 0 !important;
}

/* iOS-safe foreground lock: do not rely on :has() for active callout stacks. */
body[data-screen='game'] :is(
  .seat.seat-callout-active,
  .seat-pack.seat-callout-active,
  .side-station-stack.seat-callout-active,
  .side-station-core.seat-callout-active,
  .action-zone.seat-callout-active,
  .action-strip.seat-callout-active
) {
  position: relative !important;
  z-index: 2147482500 !important;
  isolation: auto !important;
  overflow: visible !important;
}

body[data-screen='game'] :is(
  .seat-name-fixed.seat-callout-active,
  .action-strip.seat-callout-active .player-tag
) {
  position: relative !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

body[data-screen='game'] .action-strip.seat-callout-active .seat-name-fixed.player-tag {
  position: absolute !important;
  top: 3px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(calc(-50% + 3px)) !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

body[data-screen='game'] .seat-callout-active :is(
  .opponent-fan-wrap,
  .closed-card-pile,
  .opponent-fan,
  .closed-back,
  .seat-open-play,
  .seat-open-play .seat-played,
  .seat-open-play .card.mini
) {
  z-index: 1 !important;
}

body[data-screen='game'] :is(
  .seat-name-fixed.seat-callout-active,
  .action-strip.seat-callout-active .player-tag
) :is(
  .play-type-call,
  .last-card-call,
  .emote-callout,
  .food-callout-seat,
  .seat-motto-callout
) {
  position: absolute !important;
  z-index: 2147483600 !important;
}