:root {
  --red: #d84a3a;
  --red-deep: #84251e;
  --yellow: #f7c948;
  --yellow-soft: #fff0a4;
  --gold: #e6b64c;
  --orange: #c8752d;
  --blue: #2aa7c4;
  --blue-deep: #123f5d;
  --cyan: #72e3d1;
  --purple: #4e6f9f;
  --purple-deep: #15283f;
  --green: #24b37d;
  --ink: #071018;
  --white: #fffaf0;
  --text: #fffaf0;
  --muted: #cfe8de;
  --panel: rgba(13, 58, 51, 0.94);
  --line: rgba(255, 255, 255, 0.28);
  --shadow: 0 12px 0 #071018, 0 24px 54px rgba(0, 0, 0, 0.42);
  --radius: 8px;
  --radius-sm: 6px;
}

/* New Koops home screen. */
body[data-screen="home"] {
  background:
    radial-gradient(circle at 50% 8%, rgba(247, 201, 72, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(0, 10, 8, 0.4), rgba(0, 14, 9, 0.88)),
    url("koops-table-bg.svg") center / cover fixed no-repeat,
    #00130d;
}

body[data-screen="home"] .app-shell {
  width: min(1450px, calc(100% - 20px));
  min-height: calc(var(--koop-vh, 100vh) - 16px);
  margin-top: 14px;
  padding: 0 26px 18px;
  border: 7px solid #f6bd21;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 17%, rgba(24, 65, 48, 0.35), transparent 16rem),
    linear-gradient(90deg, rgba(0, 23, 14, 0.96), rgba(0, 36, 21, 0.92) 50%, rgba(0, 20, 13, 0.96));
  box-shadow: inset 0 0 34px rgba(58, 255, 105, 0.12), 0 12px 0 var(--ink);
}

body[data-screen="home"] .app-shell::before {
  display: none;
}

body[data-screen="home"] .hero,
body[data-screen="home"] .panel.mode-card {
  box-shadow: none;
}

body[data-screen="home"] .hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: start;
  min-height: 310px;
  margin: 0;
  padding: 16px 4px 24px;
  border: 0;
  overflow: visible;
  background: transparent;
}

body[data-screen="home"] .hero::before {
  display: none;
}

.home-player-strip {
  position: relative;
  z-index: 5;
  display: flex;
  grid-column: 1;
  align-items: center;
  gap: 7px;
  justify-self: start;
}

.home-player-pill,
.home-signin-btn {
  min-height: 44px;
  border-width: 2px;
  border-radius: 16px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.25);
  font-size: 1rem;
}

.home-player-pill {
  padding: 0.38rem 0.78rem;
  color: #d8e4dc;
  background: rgba(3, 18, 13, 0.82);
  border-color: #f4cc1d;
  text-shadow: none;
}

.home-signin-btn {
  padding: 0.38rem 0.9rem;
  color: #11110b;
  background: linear-gradient(#ffc93a, #d58918);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.home-signin-btn::before,
.home-signin-btn::after {
  display: none !important;
}

body[data-screen="home"] .hero-brand {
  grid-column: 2;
  grid-template-columns: 1fr;
  justify-items: center;
  justify-self: center;
  align-self: start;
  gap: 0;
  min-width: 0;
}

body[data-screen="home"] .hero-emblem {
  width: clamp(230px, 21vw, 300px);
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.6));
}

body[data-screen="home"] .hero-emblem img {
  border-radius: 0;
}

body[data-screen="home"] .hero-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body[data-screen="home"] .hero-actions {
  grid-column: 3;
  justify-self: end;
  align-self: start;
  gap: 0;
  max-width: none;
}

body[data-screen="home"] .account-prompt,
body[data-screen="home"] .profile-menu-btn,
body[data-screen="home"] .close-menu-btn,
body[data-screen="home"] .account-menu-trigger {
  display: none !important;
}

body[data-screen="home"] .account-action-row {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: auto !important;
}

body[data-screen="home"] .account-action-row .tool-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body[data-screen="home"] .account-action-row .tool-btn::before {
  width: 48px;
  height: 48px;
  border: 0;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  color: #11110b;
  background: linear-gradient(#fff16a, #f3d722);
  font-size: 1.4rem;
}

body[data-screen="home"] #settingsBtn::before {
  content: "⚙";
}

body[data-screen="home"] #infoBtn::before {
  content: "i";
  font-size: 1.75rem;
}

body[data-screen="home"] .coin-menu-btn {
  gap: 8px;
  min-height: 46px !important;
  padding: 0.4rem 1rem !important;
  border: 2px solid rgba(86, 48, 0, 0.58) !important;
  border-radius: 16px !important;
  color: #170e03;
  background: linear-gradient(#ffc841, #d78a15) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.48), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  font-weight: 950;
}

body[data-screen="home"] .coin-menu-btn::before {
  display: none !important;
}

.coin-menu-value {
  min-width: 66px;
  text-align: right;
  font-weight: 950;
}

body[data-screen="home"] .coin-menu-btn .coin-chip {
  width: 28px;
  height: 28px;
  margin: 0;
}

body[data-screen="home"] .home-panel {
  margin: 0;
  padding: 26px 2px 54px;
}

body[data-screen="home"] .mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.7vw, 28px);
  align-items: stretch;
}

body[data-screen="home"] .mode-card {
  --mode-accent: #f5bd1c;
  --mode-button: linear-gradient(#fff24e, #d99b18 58%, #8d620b);
  display: grid;
  grid-template-rows: auto auto minmax(44px, auto) auto;
  align-content: center;
  justify-items: center;
  min-height: 390px;
  padding: 28px 28px 0;
  border: 2px solid var(--mode-accent);
  border-radius: 30px;
  color: #f7fff7;
  background:
    radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.08), transparent 7rem),
    linear-gradient(180deg, rgba(0, 34, 21, 0.9), rgba(0, 20, 12, 0.94));
  overflow: hidden;
}

body[data-screen="home"] .mode-card::before,
body[data-screen="home"] .mode-card::after {
  display: none;
}

body[data-screen="home"] .mode-online {
  --mode-accent: #118cff;
  --mode-button: linear-gradient(#3aa2ff, #1468d4 62%, #0b3d96);
}

body[data-screen="home"] .mode-invite {
  --mode-accent: #ff2232;
  --mode-button: linear-gradient(#ff313d, #c81322 62%, #870a13);
}

body[data-screen="home"] .mode-join {
  --mode-accent: #33f83b;
  --mode-button: linear-gradient(#30ec3a, #0fbb2c 62%, #087519);
}

.mode-live-icon {
  display: grid;
  place-items: center;
  width: min(220px, 84%);
  min-height: 82px;
  margin-bottom: 18px;
  border-radius: 26px;
  color: #fff;
  background: var(--mode-button);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 12px 28px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.mode-live-icon span {
  font-size: clamp(1.1rem, 1.75vw, 1.7rem);
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.36);
}

body[data-screen="home"] .mode-card .section-title {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin: 0 0 24px;
}

body[data-screen="home"] .mode-card .section-title h2 {
  color: #f8fff7;
  font-size: clamp(1.45rem, 2.05vw, 2rem);
  text-transform: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.58);
}

body[data-screen="home"] .mode-card .section-title p {
  max-width: 260px;
  margin: 0;
  color: rgba(241, 255, 244, 0.78);
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  line-height: 1.28;
}

body[data-screen="home"] .computer-play-controls {
  display: grid;
  justify-items: center;
  width: 100%;
  min-width: 0;
  gap: 20px;
}

.bot-stepper {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 7px 14px;
  border-radius: 22px;
  background: rgba(0, 12, 8, 0.42);
}

.bot-step-btn {
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  color: #f8fff7;
  background: transparent;
  box-shadow: none;
  font-size: 1.5rem;
  line-height: 1;
}

.bot-stepper strong {
  min-width: 58px;
  color: #f6bd21;
  font-size: 1.12rem;
  text-align: center;
}

body[data-screen="home"] .online-status-pill,
body[data-screen="home"] .room-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-bottom: 22px;
  padding: 0.48rem 1rem;
  border: 1px solid rgba(101, 255, 156, 0.42);
  border-radius: 16px;
  color: #f8fff7;
  background: rgba(0, 20, 12, 0.48);
  box-shadow: none;
  font-size: 0.95rem;
}

body[data-screen="home"] .online-status-pill span {
  width: 17px;
  height: 17px;
}

body[data-screen="home"] .friends-code-field {
  width: min(230px, 100%);
  margin-bottom: 22px;
}

body[data-screen="home"] .friends-code-field input {
  min-height: 48px;
  border: 1px solid rgba(160, 255, 183, 0.36);
  border-radius: 18px;
  color: #f8fff7;
  background: rgba(0, 16, 9, 0.48);
  box-shadow: none;
  text-align: center;
}

body[data-screen="home"] .friends-code-field input::placeholder {
  color: rgba(248, 255, 247, 0.92);
  opacity: 1;
}

body[data-screen="home"] .mode-action-btn {
  align-self: end;
  width: min(240px, 100%);
  min-height: 62px;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px 18px 0 0;
  background: var(--mode-button);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 1.08rem;
}

body[data-screen="home"] .app-footer {
  width: max-content;
  margin: 8px 0 0 -3px;
}

body[data-screen="home"] .install-app-btn {
  min-width: 270px;
  min-height: 58px;
  border-radius: 6px;
  background: linear-gradient(#36ca85, #107d5e 62%, #074c3e);
}

@media (max-width: 1180px) {
  body[data-screen="home"] .hero {
    grid-template-columns: 1fr auto 1fr;
    min-height: 280px;
  }

  body[data-screen="home"] .mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-screen="home"] .app-shell {
    padding-inline: 12px;
  }

  body[data-screen="home"] .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: auto;
    gap: 14px;
  }

  .home-player-strip,
  body[data-screen="home"] .hero-brand,
  body[data-screen="home"] .hero-actions {
    grid-column: 1;
    justify-self: center;
  }

  body[data-screen="home"] .mode-grid {
    grid-template-columns: 1fr;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .app-shell {
  min-height: calc(var(--koop-vh, 100dvh) - 8px);
  padding: 0 clamp(10px, 2vw, 18px) 8px;
  border-width: 4px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero {
  min-height: clamp(135px, 32vh, 210px);
  padding: 8px 0 10px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-emblem {
  width: clamp(134px, 25vw, 230px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .home-player-pill,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .home-signin-btn {
  min-height: clamp(30px, 8vh, 42px);
  padding: 0.28rem 0.62rem;
  font-size: clamp(0.62rem, 2.2vh, 0.94rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .tool-btn::before {
  width: clamp(32px, 8.5vh, 45px);
  height: clamp(32px, 8.5vh, 45px);
  font-size: clamp(1rem, 3.3vh, 1.4rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .coin-menu-btn {
  min-height: clamp(30px, 8vh, 42px) !important;
  padding: 0.25rem 0.6rem !important;
  font-size: clamp(0.58rem, 2vh, 0.82rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .home-panel {
  padding: 8px 0 24px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 14px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card {
  min-height: clamp(220px, 51vh, 340px);
  padding: clamp(10px, 2.2vh, 18px) clamp(8px, 1.6vw, 16px) 0;
  border-radius: clamp(14px, 3vw, 24px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-live-icon {
  width: min(180px, 86%);
  min-height: clamp(42px, 12vh, 72px);
  margin-bottom: clamp(8px, 2vh, 14px);
  border-radius: clamp(14px, 3vw, 24px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-live-icon span {
  font-size: clamp(0.68rem, 2.35vh, 1rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card .section-title {
  gap: clamp(7px, 1.8vh, 14px);
  margin-bottom: clamp(8px, 2vh, 16px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card .section-title h2 {
  font-size: clamp(0.9rem, 3vh, 1.24rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card .section-title p {
  font-size: clamp(0.58rem, 1.9vh, 0.78rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .bot-stepper,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .online-status-pill,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .room-status-pill {
  min-height: clamp(30px, 7.6vh, 40px);
  margin-bottom: clamp(7px, 2vh, 14px);
  padding: 0.22rem 0.52rem;
  font-size: clamp(0.54rem, 1.8vh, 0.72rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friends-code-field {
  margin-bottom: clamp(8px, 2vh, 14px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friends-code-field input {
  min-height: clamp(30px, 8vh, 42px);
  font-size: 16px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-action-btn {
  min-height: clamp(38px, 10vh, 54px);
  font-size: clamp(0.7rem, 2.25vh, 0.9rem);
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape[data-screen="home"] .mode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(180deg, rgba(4, 14, 24, 0.1), rgba(4, 14, 24, 0.42)),
    url("koops-table-bg.svg") center top / cover fixed no-repeat,
    linear-gradient(145deg, #071a2b 0%, #0d5a45 48%, #101b3d 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 239, 110, 0.16), transparent 18rem),
    radial-gradient(circle at 84% 76%, rgba(48, 213, 255, 0.14), transparent 20rem),
    radial-gradient(circle at 50% 42%, rgba(57, 196, 90, 0.1), transparent 34rem);
  mix-blend-mode: screen;
}

body::after {
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 18px) 0 0 / 180px 180px,
    radial-gradient(ellipse at center, transparent 0 48%, rgba(0, 0, 0, 0.38) 100%);
  opacity: 0.86;
}

button,
input,
textarea {
  font: inherit;
}

button {
  min-height: 46px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.78rem 1.05rem;
  color: var(--white);
  cursor: pointer;
  background: linear-gradient(#28b7ff, #0875c6);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.42);
  font-weight: 950;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
  transform: none;
}

.primary {
  color: #3a1700;
  background: linear-gradient(#fff76d, #ffc21f 48%, #ff8e1b);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.secondary {
  background: linear-gradient(#45e56a, #1aa945 55%, #0b752e);
}

.ghost {
  background: linear-gradient(#8b7dff, #5540ca 55%, #301d88);
}

.ghost.danger {
  background: linear-gradient(#ff8b85, #e72b35 55%, #9f0f1a);
}

.primary.danger {
  color: #fff7f1;
  background: linear-gradient(#ff8b85, #e72b35 55%, #9f0f1a);
}

.large {
  width: 100%;
  margin-top: 0.75rem;
}

.hidden {
  display: none !important;
}

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

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1460px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 36px;
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 8px -10px auto -10px;
  height: 18px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--yellow) 0 38px, var(--yellow-soft) 38px 76px);
  box-shadow: 0 6px 0 var(--ink);
}

.hero,
.panel,
.account-card,
.game-topbar {
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 142px;
  margin-top: 20px;
  padding: 20px 22px;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0 18%, transparent 18% 100%),
    radial-gradient(circle at 76% 45%, rgba(255, 229, 0, 0.18), transparent 18rem),
    linear-gradient(135deg, #8562ee 0%, #6a49cf 52%, #422b9d 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 6px solid var(--yellow);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 48%);
  opacity: 0.72;
}

.hero-brand {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.hero-emblem {
  position: relative;
  z-index: 1;
  width: clamp(92px, 11vw, 146px);
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.42));
}

.hero-emblem img,
.center-emblem img {
  display: block;
  width: 100%;
  border-radius: 18%;
}

.hero-copy,
.hero-actions {
  position: relative;
  z-index: 1;
}

.eyebrow,
.hero-copy .eyebrow {
  margin: 0 0 0.38rem;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 var(--ink);
}

.hero-copy h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(2.7rem, 7vw, 6rem);
  line-height: 1.05;
  text-shadow:
    0 5px 0 var(--ink),
    5px 0 0 var(--ink),
    0 -2px 0 var(--ink);
}

.hero-copy {
  display: grid;
  align-items: center;
  gap: 0.9rem;
}

.hero-copy .subtitle {
  display: block;
  margin: 0 0 0.35rem;
  color: #eaf7ff;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.44);
}

.hero-actions {
  display: grid;
  justify-items: end;
  gap: 9px;
  max-width: 700px;
}

.hero-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.account-prompt {
  max-width: 560px;
  margin: 0 3px 0 0;
  color: #eaf7ff;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.32;
  text-align: right;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.44);
}

.hero-badge,
.room-badge,
.stat-box,
.summary-card,
.status-item,
.deck-stack,
.discard-stack,
.pot-chip {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.36);
}

.hero-badge,
.room-badge {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 10px 14px;
  color: #3a1700;
  background: linear-gradient(#fff9a8, #ffd935 54%, #ff991d);
}

.hero-badge span,
.room-badge span,
.stat-box span,
.summary-card span,
.summary-card .sub-label,
.status-item,
.deck-stack span,
.discard-stack span,
.pot-chip span {
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-badge strong,
.room-badge strong {
  font-size: 1.55rem;
  letter-spacing: 0.08em;
  color: #2b1200;
}

.continue-btn {
  min-width: 150px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 126px;
  padding-inline: 0.86rem;
  white-space: nowrap;
}

.tool-btn.icon-only {
  width: 58px;
  min-width: 58px;
  aspect-ratio: 1;
  gap: 0;
  padding-inline: 0;
}

.tool-btn::before {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: #102b5f;
  background: linear-gradient(#ffffff, #c9efff);
  box-shadow: 0 2px 0 var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  text-shadow: none;
}

#googleSignInBtn::before,
.google-action-btn::before {
  content: "G";
  color: #1a73e8;
  background: #fff;
}

.google-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.google-action-btn::before {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  text-shadow: none;
}

#infoBtn::before {
  content: "i";
}

#settingsBtn::before {
  content: "⚙";
}

.user-btn {
  min-width: 202px;
}

.guest-profile-btn {
  min-width: min(290px, 100%);
  color: #3a1700;
}

.user-btn.is-signed-in {
  min-width: min(320px, 100%);
  color: #3a1700;
}

.user-btn.is-signed-in::before {
  display: none;
}

.account-mini-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: #3a1700;
  background: linear-gradient(#fff76d, #ffc21f 52%, #ff8e1b);
  box-shadow: 0 2px 0 var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
  text-shadow: none;
}

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

.account-button-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-divider {
  opacity: 0.7;
}

.coin-chip {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  border: 2px solid #6e3900;
  border-radius: 50%;
  color: #6e3900;
  background: radial-gradient(circle at 36% 28%, #fff9b8 0 18%, #ffd332 19% 62%, #e88c10 63% 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72), 0 2px 0 rgba(0, 0, 0, 0.28);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
  vertical-align: middle;
}

.account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  padding: 15px 16px;
  background:
    linear-gradient(90deg, rgba(22, 151, 224, 0.95), rgba(9, 93, 178, 0.95)),
    radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.22), transparent 12rem);
}

.account-card h3,
.account-card p {
  margin: 0;
}

.account-card h3 {
  font-size: 1.2rem;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.42);
}

.account-card p,
.muted {
  color: var(--muted);
  line-height: 1.38;
  font-weight: 750;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stat-box {
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 10px 12px;
  background: linear-gradient(#f6fbff, #bdeaff);
  color: #093e80;
}

.stat-box strong {
  overflow: hidden;
  color: #062f63;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-panel {
  margin-bottom: 18px;
}

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

.mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.mode-card {
  display: grid;
  grid-template-rows: minmax(148px, 1fr) auto auto;
  gap: 14px;
  min-height: 420px;
  padding: 20px;
  isolation: isolate;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #1f86ff 0%, #0b58b8 58%, #08346d 100%);
}

.mode-card::before {
  inset: 10px;
  border: 5px solid #ffc928;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32);
}

.mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.2) 42%, transparent 48%),
    radial-gradient(circle at 78% 14%, rgba(255, 244, 120, 0.32), transparent 7rem);
  opacity: 0.72;
  pointer-events: none;
}

.mode-card.mode-card-highlight {
  animation: modeHighlight 0.42s ease-in-out 4;
}

.mode-card .section-title,
.mode-card .computer-play-controls,
.mode-card .online-status-pill,
.mode-card .friends-code-field,
.mode-card .friends-actions,
.mode-card .mode-action-btn {
  position: relative;
  z-index: 2;
}

.mode-card .section-title {
  margin-bottom: 0;
  text-align: center;
}

.mode-card .section-title h2 {
  font-size: clamp(1.45rem, 2.2vw, 2.35rem);
  text-transform: uppercase;
}

.mode-card .section-title p {
  color: #fff6b9;
  font-size: 0.94rem;
}

.mode-computer {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.18), transparent 35%),
    radial-gradient(circle at 20% 22%, rgba(115, 227, 209, 0.42), transparent 10rem),
    linear-gradient(180deg, #238cff 0%, #0b5fca 58%, #07346e 100%);
}

.mode-online {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.18), transparent 35%),
    radial-gradient(circle at 80% 18%, rgba(255, 216, 72, 0.38), transparent 10rem),
    linear-gradient(180deg, #28cc71 0%, #0f8a52 58%, #07543a 100%);
}

.mode-friends {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.2), transparent 35%),
    radial-gradient(circle at 20% 20%, rgba(255, 235, 80, 0.34), transparent 10rem),
    linear-gradient(180deg, #845cff 0%, #4b35bb 58%, #24166d 100%);
}

.mode-scene {
  position: relative;
  z-index: 1;
  min-height: 164px;
  border: 3px solid rgba(7, 16, 24, 0.48);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 16px, transparent 16px 32px),
    radial-gradient(circle at center, rgba(3, 22, 46, 0.08), rgba(3, 22, 46, 0.42));
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.16), inset 0 -8px 0 rgba(0, 0, 0, 0.18);
}

.mode-scene > span {
  position: absolute;
  display: block;
}

.mode-card-stack,
.friend-card {
  width: 72px;
  height: 98px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 22px, rgba(255, 255, 255, 0.94) 23px 28px, transparent 29px),
    linear-gradient(135deg, #ffe54a 0 49%, #fff 49% 52%, #169e62 52% 100%);
  box-shadow: 0 7px 0 var(--ink);
}

.mode-card-stack {
  left: 10%;
  bottom: 18%;
  transform: rotate(-10deg);
  animation: modeFloat 3.4s ease-in-out infinite;
}

.mode-card-stack::before,
.mode-card-stack::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: inherit;
  z-index: -1;
}

.mode-card-stack::before {
  transform: rotate(10deg) translate(11px, -7px);
}

.mode-card-stack::after {
  transform: rotate(20deg) translate(20px, -12px);
}

.mode-dice {
  left: 50%;
  top: 25%;
  width: 76px;
  height: 76px;
  transform: translateX(-50%) rotate(10deg);
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff, #d6eef4);
  box-shadow: 0 8px 0 var(--ink), inset 0 4px 0 rgba(255, 255, 255, 0.7);
  animation: diceWobble 2.9s ease-in-out infinite;
}

.mode-dice i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #071018;
}

.mode-dice i:nth-child(1) { left: 14px; top: 14px; }
.mode-dice i:nth-child(2) { right: 14px; top: 14px; }
.mode-dice i:nth-child(3) { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mode-dice i:nth-child(4) { left: 14px; bottom: 14px; }
.mode-dice i:nth-child(5) { right: 14px; bottom: 14px; }

.mode-token,
.friend-token {
  width: 52px;
  height: 78px;
  border: 4px solid rgba(7, 16, 24, 0.82);
  border-radius: 50% 50% 44% 44%;
  box-shadow: 0 8px 0 rgba(7, 16, 24, 0.9);
}

.mode-token::before,
.friend-token::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  border: 4px solid rgba(7, 16, 24, 0.82);
  border-radius: 50%;
  background: inherit;
}

.token-blue {
  right: 14%;
  bottom: 14%;
  background: linear-gradient(#7ee7ff, #148ad6);
  animation: modeFloat 3.2s ease-in-out infinite 0.3s;
}

.token-gold {
  right: 32%;
  bottom: 18%;
  transform: scale(0.78);
  background: linear-gradient(#fff76d, #ffc21f 48%, #ff8e1b);
  animation: modeFloat 3.1s ease-in-out infinite 0.7s;
}

.mode-phone {
  top: 27%;
  width: 54px;
  height: 82px;
  border: 4px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(#ffd84a, #c98a13);
  box-shadow: 0 7px 0 var(--ink), inset 0 8px 0 rgba(255, 255, 255, 0.24);
}

.mode-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 18px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(7, 16, 24, 0.78);
}

.phone-left {
  left: 18%;
  transform: rotate(-10deg);
  animation: modeFloat 3.1s ease-in-out infinite;
}

.phone-right {
  right: 18%;
  transform: rotate(10deg);
  animation: modeFloat 3.1s ease-in-out infinite 0.4s;
}

.mode-globe {
  left: 50%;
  top: 46%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border: 4px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 35%, #33f07a 0 12px, transparent 13px),
    radial-gradient(circle at 68% 58%, #35dd73 0 10px, transparent 11px),
    linear-gradient(#35d9ff, #0a75cf);
  box-shadow: 0 7px 0 var(--ink);
  animation: globePulse 2.2s ease-in-out infinite;
}

.signal-dot {
  bottom: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #35ff6c;
  box-shadow: 0 0 0 3px rgba(7, 16, 24, 0.55), 0 0 16px rgba(53, 255, 108, 0.8);
  animation: signalPulse 1.5s ease-in-out infinite;
}

.dot-one { left: 36%; animation-delay: 0s; }
.dot-two { left: 48%; animation-delay: 0.18s; }
.dot-three { left: 60%; animation-delay: 0.36s; }

.friend-crown {
  left: 50%;
  top: 18%;
  width: 118px;
  height: 74px;
  transform: translateX(-50%);
  background: linear-gradient(#fff76d, #ffc21f 52%, #d4850b);
  clip-path: polygon(4% 100%, 12% 34%, 30% 66%, 50% 12%, 70% 66%, 88% 34%, 96% 100%);
  filter: drop-shadow(0 8px 0 rgba(7, 16, 24, 0.82));
  animation: modeFloat 3.2s ease-in-out infinite;
}

.friend-card {
  bottom: 13%;
}

.card-one {
  left: 16%;
  transform: rotate(-13deg);
}

.card-two {
  right: 16%;
  transform: rotate(13deg);
  background:
    radial-gradient(circle at 50% 48%, transparent 0 22px, rgba(255, 255, 255, 0.94) 23px 28px, transparent 29px),
    linear-gradient(135deg, #ef3340 0 49%, #fff 49% 52%, #2777ff 52% 100%);
}

.friend-token {
  bottom: 18%;
  transform: scale(0.74);
}

.token-red {
  left: 36%;
  background: linear-gradient(#ff8b85, #e72b35 55%, #9f0f1a);
}

.token-green {
  right: 36%;
  background: linear-gradient(#45e56a, #1aa945 55%, #0b752e);
}

.online-status-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: #06301d;
  background: linear-gradient(#eefcff, #b8f1df);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.online-status-pill span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #24f061;
  box-shadow: 0 0 0 3px rgba(7, 16, 24, 0.18), 0 0 12px rgba(36, 240, 97, 0.72);
}

.friends-code-field {
  margin-bottom: 0;
}

.friends-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mode-action-btn {
  width: 100%;
  min-height: 52px;
  margin: 0;
}

@keyframes modeFloat {
  0%,
  100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes diceWobble {
  0%,
  100% { transform: translateX(-50%) rotate(10deg); }
  48% { transform: translateX(-50%) rotate(-7deg) translateY(-6px); }
}

@keyframes globePulse {
  0%,
  100% { scale: 1; }
  50% { scale: 1.08; }
}

@keyframes signalPulse {
  0%,
  100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(-7px); opacity: 1; }
}

@keyframes modeHighlight {
  0%,
  100% { filter: brightness(1); }
  50% {
    filter: brightness(1.18);
    box-shadow: 0 12px 0 #071018, 0 24px 54px rgba(0, 0, 0, 0.42), 0 0 0 6px rgba(255, 239, 110, 0.42);
  }
}

.computer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 132px;
  margin-top: 18px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.22), transparent 12rem),
    linear-gradient(135deg, #22c55e, #0f8a43 58%, #075f3a);
}

.computer-panel::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -22px;
  width: 140px;
  height: 140px;
  border: 4px solid rgba(6, 27, 38, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92) 0 8px, transparent 9px),
    radial-gradient(circle at 38% 34%, #dff7ff 0 9px, transparent 10px),
    radial-gradient(circle at 62% 34%, #dff7ff 0 9px, transparent 10px),
    linear-gradient(#1b4964, #0d2d42);
  opacity: 0.2;
  pointer-events: none;
}

.computer-panel .section-title {
  margin-bottom: 0;
}

.computer-play-controls {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  min-width: min(430px, 100%);
}

.bot-count-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bot-count-option {
  min-height: 42px;
  padding: 0.48rem 0.62rem;
  border-width: 2px;
  color: #12385a;
  background: linear-gradient(#ffffff, #d8f2ec);
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  font-size: 0.8rem;
}

.bot-count-option.selected {
  color: #3a1700;
  background: linear-gradient(#fff76d, #ffc21f 48%, #ff8e1b);
}

.computer-play-btn {
  min-height: 50px;
}

.panel {
  position: relative;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(48, 174, 245, 0.98), rgba(15, 104, 193, 0.98)),
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.24), transparent 14rem);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.card-panel {
  min-height: 286px;
}

.card-panel:nth-child(1) {
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.28), transparent 10rem),
    linear-gradient(135deg, #ff4d36, #d10920 58%, #8f0714);
}

.card-panel:nth-child(2) {
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.28), transparent 10rem),
    linear-gradient(135deg, #2ed0ff, #177cd9 58%, #104092);
}

.card-panel::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 92px;
  height: 128px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 46%, transparent 0 23px, rgba(255, 255, 255, 0.92) 24px 29px, transparent 30px),
    linear-gradient(135deg, var(--yellow) 0 49%, #fff 49% 51%, #e91d2a 51% 100%);
  transform: rotate(9deg);
  box-shadow: 0 8px 0 var(--ink);
}

.section-title {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.section-title h2,
.section-title h3 {
  margin: 0;
  color: var(--white);
  font-weight: 950;
  line-height: 1.02;
  text-shadow: 0 4px 0 var(--ink);
}

.section-title h2 {
  font-size: 1.7rem;
}

.section-title p {
  margin: 0.55rem 0 0;
  color: #e6f8ff;
  font-weight: 800;
}

.field {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.field label {
  color: #fff6b9;
  font-size: 0.86rem;
  font-weight: 950;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

.field input {
  width: 100%;
  min-height: 50px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  outline: none;
  color: #093e80;
  background: linear-gradient(#ffffff, #dff4ff);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12), 0 5px 0 var(--ink);
  font-weight: 850;
}

.field input:focus {
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12), 0 5px 0 var(--ink), 0 0 0 4px var(--yellow);
}

.table-status,
.lobby-actions,
.action-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.lobby-panel {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.22), transparent 16rem),
    linear-gradient(135deg, #7656db, #5033b2 62%, #291674);
}

.lobby-room-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.lobby-room-badge {
  min-width: min(320px, 100%);
  text-align: center;
}

button.lobby-room-badge {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.lobby-players {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.lobby-actions {
  justify-content: space-between;
  margin-top: 2px;
}

.lobby-secondary-actions,
.lobby-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lobby-secondary-actions {
  justify-content: flex-start;
}

.lobby-primary-actions {
  justify-content: flex-end;
}

.lobby-secondary-actions > button,
.lobby-primary-actions > button {
  min-width: 150px;
}

.lobby-player,
.score-row,
.setting-row,
.coin-package {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.36);
}

.lobby-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 10px;
  color: #11325b;
  background: linear-gradient(90deg, #fff4a5 0%, #ffd940 42%, #f9f6e4 43%, #d6edf8 100%);
}

.lobby-player-main {
  display: grid;
  min-width: 0;
  gap: 6px;
  justify-items: start;
}

.lobby-player strong {
  overflow: hidden;
  color: #1c4483;
  font-size: 1.18rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.lobby-avatar {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(#dff8ff, #8ccbed);
  box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, 0.36);
}

.lobby-avatar .profile-icon.mini {
  width: 48px;
  height: 48px;
}

.lobby-coin-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 9px 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: #4a2a00;
  background: linear-gradient(#fff8b8, #ffc83a 62%, #f49a19);
  box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.42);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}

.lobby-player .badge.coin {
  display: none;
}

.player-avatar {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(#ff80d9, #8e31f0);
  box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, 0.36);
  font-size: 1.12rem;
  font-weight: 950;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.38);
}

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

.avatar-1 { background: linear-gradient(#38d7ff, #0c75cf); }
.avatar-2 { background: linear-gradient(#ffdd42, #f47a19); color: #502000; }
.avatar-3 { background: linear-gradient(#50ea6d, #108e39); }
.avatar-4 { background: linear-gradient(#ff8b85, #df1930); }
.avatar-5 { background: linear-gradient(#b192ff, #5540ca); }

.seat-medal {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: #702100;
  background: radial-gradient(circle at 35% 28%, #fff9a8, var(--yellow) 45%, #ff991d);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.52);
  font-size: 1.22rem;
  font-weight: 950;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.24rem 0.58rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: linear-gradient(#8f9eb0, #596b78);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 0.72rem;
  font-weight: 950;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.34);
}

.badge.ok {
  background: linear-gradient(#6aff80, #18a943);
}

.badge.warn {
  color: #412000;
  background: linear-gradient(#fff475, #ffb81f);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.badge.blue {
  background: linear-gradient(#4bd3ff, #1172d6);
}

.badge.danger {
  background: linear-gradient(#ff8b95, #df1830);
}

.badge.coin {
  color: #442000;
  background: linear-gradient(#fff9a8, #ffc51f);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}

.game-screen {
  display: grid;
  gap: 16px;
}

.game-topbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  background:
    linear-gradient(180deg, #40caff, #158ad0 58%, #0a5aa8),
    radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.32), transparent 16rem);
}

.summary-card {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.summary-card {
  min-width: 0;
  padding: 10px 12px;
  background: linear-gradient(#ffffff, #c9efff);
}

.summary-card span,
.summary-card .sub-label {
  color: #1a62a5;
}

.summary-card strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #102b5f;
  font-size: 1rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-card .sub-label {
  margin-top: 8px;
}

.game-topbar > button {
  align-self: stretch;
  min-width: 112px;
}

.game-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.72fr);
  gap: 16px;
}

.table-zone {
  min-height: 670px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background:
    linear-gradient(180deg, #fff45d 0 18px, transparent 18px calc(100% - 18px), #fff45d calc(100% - 18px)),
    linear-gradient(90deg, #fff45d 0 18px, transparent 18px calc(100% - 18px), #fff45d calc(100% - 18px)),
    linear-gradient(135deg, #6e52dc, #3f2c9b);
}

.table-status {
  justify-content: space-between;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  color: #11325b;
  background: linear-gradient(#ffffff, #caefff);
}

.status-item strong {
  color: #0d2d63;
  letter-spacing: 0;
  text-transform: none;
}

.table-canvas {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 52% 48%, rgba(255, 230, 0, 0.95) 0 8%, rgba(255, 130, 13, 0.88) 18%, transparent 38%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.28), transparent 16rem),
    radial-gradient(circle at 82% 18%, rgba(49, 213, 255, 0.28), transparent 18rem),
    linear-gradient(135deg, #d1111f 0%, #8b0712 100%);
  box-shadow: inset 0 0 0 8px var(--yellow), inset 0 0 0 13px var(--ink);
}

.table-canvas::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.14) 40% 42%, transparent 42% 100%),
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 0 3px, transparent 4px) 0 0 / 58px 58px;
  pointer-events: none;
}

.table-center {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 54px));
  margin: 36px auto 18px;
  display: grid;
  grid-template-columns: 1fr 1.08fr auto;
  gap: 12px;
  align-items: stretch;
}

.center-emblem {
  position: absolute;
  z-index: -1;
  width: min(230px, 38vw);
  left: 50%;
  top: 50%;
  opacity: 0.28;
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.5));
}

.deck-stack,
.discard-stack,
.pot-chip {
  min-height: 126px;
  background: linear-gradient(#effbff, #a7dcf4);
  color: #0d2d63;
}

.deck-stack,
.discard-stack {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px;
}

.deck-stack {
  position: relative;
  overflow: hidden;
}

.deck-stack::before,
.deck-stack::after {
  content: "";
  position: absolute;
  width: 76px;
  height: 104px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28px, #fff 29px 34px, transparent 35px),
    linear-gradient(135deg, #111 0 48%, #e91521 48% 100%);
}

.deck-stack::before {
  transform: translate(-8px, 4px) rotate(-7deg);
}

.deck-stack::after {
  transform: translate(10px, -5px) rotate(6deg);
}

.deck-stack span,
.deck-stack strong {
  position: relative;
  z-index: 1;
}

.deck-stack strong {
  color: #fff;
  font-size: 2.15rem;
  text-shadow: 0 4px 0 var(--ink), 3px 0 0 var(--ink);
}

.discard-stack #centerDiscard {
  width: min(98px, 100%);
}

.discard-stack .card-face {
  min-height: 98px;
}

.pot-chip {
  display: grid;
  place-items: center;
  min-width: 104px;
  padding: 12px;
  color: #4b1e00;
  background: radial-gradient(circle at 35% 22%, #fff9aa, var(--yellow) 48%, var(--orange));
}

.pot-chip span {
  color: #6f2d00;
}

.pot-chip strong {
  font-size: 1.38rem;
  font-weight: 950;
}

.players-table {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  padding: 0 28px 28px;
}

.player-seat {
  min-width: 0;
  padding: 12px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(#bdeeff, #259bd8 55%, #1163b5);
  box-shadow: 0 8px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, 0.36);
}

.player-seat.self {
  background: linear-gradient(#fff8a4, #ffcc27 52%, #ff8a1c);
}

.player-seat.active {
  outline: 5px solid var(--yellow);
  outline-offset: 3px;
  filter: saturate(1.15);
}

.player-seat.frozen {
  filter: grayscale(0.45);
  opacity: 0.82;
}

.seat-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}

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

.seat-name {
  overflow: hidden;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 950;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 var(--ink);
  white-space: nowrap;
}

.player-seat.self .seat-name {
  color: #522000;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.46);
}

.seat-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

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

.card-slot {
  position: relative;
  display: grid;
  place-items: stretch;
  min-width: 0;
  min-height: 98px;
  aspect-ratio: 0.72 / 1;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: #fff;
  background: #111;
  box-shadow: 0 5px 0 var(--ink);
}

.card-slot.clickable {
  cursor: pointer;
}

.card-slot.clickable:hover {
  transform: translateY(-3px) rotate(-1deg);
  filter: brightness(1.06);
}

.card-slot.selected {
  outline: 5px solid var(--yellow);
  outline-offset: 2px;
}

.card-slot.removed {
  color: #b9f5ff;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 12px),
    linear-gradient(#665d95, #35206f);
}

.card-slot.visible {
  color: #111;
  background: var(--white);
}

.card-back,
.card-face {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: calc(var(--radius) - 3px);
  display: grid;
  place-items: center;
}

.card-back {
  position: relative;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.55rem;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(255, 255, 255, 0.9) 23px 28px, transparent 29px),
    linear-gradient(135deg, #101010 0 49%, #e91521 49% 100%);
}

.card-back::after {
  content: "K";
  position: absolute;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: var(--yellow);
  font-weight: 950;
  text-shadow: 0 2px 0 var(--ink);
  transform: rotate(-18deg);
}

.card-face {
  position: relative;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 28%, rgba(255, 255, 255, 0.65) 29% 36%, transparent 37%),
    linear-gradient(135deg, #fffef4, #f2f4ff);
  box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.06);
}

.card-face .card-rank {
  align-self: end;
  color: #101010;
  font-size: clamp(1.05rem, 3vw, 1.75rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.76);
}

.card-face .card-value {
  align-self: start;
  margin-top: 4px;
  color: #4d5966;
  font-size: 0.76rem;
  font-weight: 950;
}

.red .card-face .card-rank,
.card-slot.red .card-face .card-rank,
.mini-card.red {
  color: #e11424;
}

.slot-number {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: #532100;
  background: var(--yellow);
  font-size: 0.68rem;
  font-weight: 950;
}

.sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

.action-panel,
.game-log {
  min-height: 250px;
}

.action-panel {
  position: sticky;
  top: 14px;
  background:
    linear-gradient(180deg, #32caff, #1286d2 62%, #0a5ca9);
}

.game-log {
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.18), transparent 10rem),
    linear-gradient(135deg, #7d5ae5, #4a2eaa 64%, #2a176f);
}

.game-log .section-title {
  text-align: center;
}

.action-box,
.notice,
.coin-strip {
  position: relative;
  z-index: 1;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.action-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  color: #133b78;
  background: linear-gradient(#ffffff, #c9efff);
}

.compact-action h2,
.compact-action h3,
.action-box p {
  margin: 0;
}

.compact-action h2,
.compact-action h3 {
  color: #102b5f;
  font-weight: 950;
}

.action-box .muted,
.notice .muted {
  color: #315b8e;
}

.action-buttons {
  margin-top: 2px;
}

.drawn-buttons button {
  flex: 1 1 150px;
}

.drawn-card-area {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.center-drawn {
  text-align: center;
}

.big-card {
  width: min(134px, 46vw);
  aspect-ratio: 0.72 / 1;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  color: #111;
  background: var(--white);
  box-shadow: 0 8px 0 var(--ink);
}

.big-card.small {
  width: 92px;
  flex: 0 0 auto;
}

.match-card-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

.notice {
  margin-bottom: 12px;
  padding: 12px;
  color: #11325b;
  background: linear-gradient(#ffffff, #d5f3ff);
}

.notice.ok {
  background: linear-gradient(#d9ffd9, #82f49a);
}

.notice.blue {
  background: linear-gradient(#e8f8ff, #aee9ff);
}

.notice.danger {
  color: #fff;
  background: linear-gradient(#ff8b95, #df1830);
}

.coin-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  margin-bottom: 12px;
  color: #3a1700;
  background: linear-gradient(#fff7a2, #ffc727);
}

.value-strip strong {
  color: #451c00;
}

.power-box.active {
  background: linear-gradient(#fff4a8, #ffc727);
}

.auto-note {
  margin-bottom: 0;
  font-size: 0.84rem;
}

.game-log-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow-y: auto;
}

.game-log-list .log-item {
  padding: 10px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: #11325b;
  background: linear-gradient(#ffffff, #c9efff);
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 850;
}

.score-panel {
  background:
    radial-gradient(circle at 14% 28%, rgba(255, 255, 255, 0.2), transparent 18rem),
    linear-gradient(135deg, #7a55df, #4d30aa 58%, #2a176f);
}

.winner-banner {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  padding: 16px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  color: #4a1f00;
  background: linear-gradient(#fff9a8, #ffc727 55%, #ff8f1c);
  box-shadow: 0 7px 0 var(--ink);
  font-size: 1.25rem;
  font-weight: 950;
}

.score-table {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.score-row {
  display: grid;
  grid-template-columns: 1.15fr 0.55fr 1.25fr 0.65fr 0.75fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  color: #11325b;
  background: linear-gradient(#ffffff, #d6edf8);
  font-weight: 850;
}

.score-row.header {
  color: #fff;
  background: linear-gradient(#39caff, #116fd0);
  font-weight: 950;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.score-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mini-card {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 42px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  color: #111;
  background: var(--white);
  box-shadow: 0 3px 0 var(--ink);
  font-weight: 950;
}

.score-win.positive {
  color: #078138;
}

.score-win.negative {
  color: #cf1625;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  max-width: min(440px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  color: #11325b;
  background: linear-gradient(#ffffff, #caefff);
  box-shadow: 0 7px 0 var(--ink), 0 22px 48px rgba(0, 0, 0, 0.36);
  font-weight: 900;
}

.app-footer {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin: 24px 0 0;
  text-align: left;
}

.install-app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: auto;
  min-width: min(100%, 270px);
}

.install-app-btn.installed {
  background: linear-gradient(#4edfe2, #168aa6 55%, #0a4e67);
}

.install-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.install-icons svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

.app-footer p {
  max-width: min(100%, 620px);
  margin: 0;
  color: #d9f7ee;
  font-size: 0.92rem;
  font-weight: 850;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.38);
}

.pwa-install-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: #071018;
  background: linear-gradient(#fffdf6, #d8f2ec);
  box-shadow: 0 6px 0 var(--ink);
}

.pwa-install-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  gap: 18px;
  padding: 12px;
  border: 2px solid rgba(9, 22, 36, 0.26);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.95), transparent 23%),
    linear-gradient(135deg, rgba(31, 191, 144, 0.18), rgba(18, 63, 93, 0.14));
}

.pwa-install-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: #090015;
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

.pwa-install-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pwa-install-device {
  position: relative;
  display: inline-block;
  width: 86px;
  height: 54px;
  border: 3px solid var(--ink);
  border-radius: 11px;
  background: linear-gradient(#2b6ba8, #123f5d);
  box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, 0.2);
}

.pwa-install-device::before,
.pwa-install-device::after {
  content: "";
  position: absolute;
  left: 50%;
  background: var(--ink);
  transform: translateX(-50%);
}

.pwa-install-device::before {
  bottom: -12px;
  width: 26px;
  height: 8px;
  border-radius: 0 0 8px 8px;
}

.pwa-install-device::after {
  bottom: -18px;
  width: 52px;
  height: 6px;
  border-radius: 999px;
}

.pwa-install-copy {
  display: grid;
  gap: 8px;
}

.pwa-install-copy h3 {
  margin: 0;
  color: #123f5d;
  font-size: 1.1rem;
}

.pwa-install-copy p {
  margin: 0;
  color: #17344a;
  font-weight: 850;
  line-height: 1.35;
}

.pwa-install-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.45rem;
  font-weight: 850;
}

.pwa-install-steps li::marker {
  color: #123f5d;
  font-weight: 950;
}

.pwa-install-card .muted {
  margin: 0;
  color: #315b8e;
  font-weight: 850;
}

.landscape-guard {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 247, 109, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(7, 16, 24, 0.96), rgba(13, 58, 51, 0.98));
}

.landscape-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 380px);
  padding: 22px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  color: #071018;
  text-align: center;
  background: linear-gradient(#fffdf6, #d8f2ec);
  box-shadow: 0 10px 0 var(--ink), 0 28px 62px rgba(0, 0, 0, 0.42);
}

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

.landscape-card h2 {
  font-size: 1.65rem;
  font-weight: 950;
}

.landscape-card p {
  color: #315b8e;
  font-weight: 850;
}

.landscape-phone {
  position: relative;
  width: 96px;
  height: 58px;
  border: 5px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(135deg, #1fbf90, #123f5d);
  box-shadow: 0 6px 0 var(--ink);
  transform: rotate(-8deg);
}

.landscape-phone::before,
.landscape-phone::after {
  content: "";
  position: absolute;
}

.landscape-phone::before {
  inset: 9px 14px;
  border-radius: 7px;
  background: rgba(255, 250, 240, 0.2);
}

.landscape-phone::after {
  right: 6px;
  top: 50%;
  width: 5px;
  height: 14px;
  border-radius: 99px;
  background: var(--yellow);
  transform: translateY(-50%);
}

.landscape-phone span {
  position: absolute;
  left: 22px;
  top: 50%;
  width: 52px;
  height: 4px;
  border-radius: 99px;
  background: var(--yellow);
  transform: translateY(-50%);
}

body.landscape-guard-active .app-shell {
  pointer-events: none;
  user-select: none;
}

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.68);
}

.dialog-overlay.hidden {
  display: none !important;
}

.dialog-panel {
  position: relative;
  width: min(780px, 100%);
  max-height: min(800px, calc(100vh - 42px));
  overflow-y: auto;
  padding: 22px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.18), transparent 13rem),
    linear-gradient(135deg, #7c59e2, #3c258f);
  box-shadow: var(--shadow);
}

.dialog-panel.wide-dialog {
  width: min(1040px, 100%);
}

.dialog-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 5;
  margin-left: 12px;
}

.dialog-panel.guide-prompt-panel .dialog-close {
  position: absolute;
  top: 22px;
  right: 22px;
  float: none;
  margin-left: 0;
}

.coins-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.coins-title h2 {
  min-width: 0;
}

.coins-title .coin-chip,
.coin-package .coin-chip {
  width: 30px;
  height: 30px;
  margin-right: 7px;
  font-size: 0.9rem;
}

.dialog-panel.guide-prompt-panel .guide-title {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding-right: 118px;
}

.rule-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.rule-sections section,
.settings-actions,
.coin-packages,
.remove-player-list {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(#ffffff, #d7efff);
  box-shadow: 0 5px 0 var(--ink);
}

.rule-sections section {
  padding: 14px;
}

.rule-sections h3 {
  margin: 0 0 8px;
  color: #102b5f;
}

.dialog-list {
  margin: 0;
  padding-left: 1.1rem;
  color: #315b8e;
  font-weight: 800;
}

.dialog-list li + li {
  margin-top: 6px;
}

.coin-packages,
.settings-actions {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.remove-player-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.remove-player-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 2px solid rgba(9, 22, 36, 0.36);
  border-radius: 10px;
  color: #17344a;
  background: rgba(255, 255, 255, 0.72);
}

.remove-player-row input {
  width: 22px;
  height: 22px;
  accent-color: #1f8f61;
}

.remove-player-row strong {
  display: block;
  margin-bottom: 6px;
}

.coin-package {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  color: #11325b;
  text-align: left;
}

.coin-package strong,
.coins-title h2 strong,
.profile-stat strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.coin-package small {
  color: #315b8e;
}

.coins-title h2 strong {
  color: var(--yellow);
}

.profile-dialog {
  display: grid;
  gap: 14px;
}

.profile-hero,
.profile-form,
.profile-stats,
.profile-actions,
.confirm-actions {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(#ffffff, #d7efff);
  box-shadow: 0 5px 0 var(--ink);
}

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  color: #11325b;
}

.profile-hero strong,
.profile-hero span {
  display: block;
}

.profile-hero strong {
  overflow: hidden;
  font-size: 1.35rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero span {
  color: #315b8e;
  font-weight: 850;
}

.profile-avatar-large {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: #3a1700;
  background: linear-gradient(#fff76d, #ffc21f 52%, #ff8e1b);
  box-shadow: 0 5px 0 var(--ink);
  font-size: 1.55rem;
  font-weight: 950;
}

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

.profile-form {
  display: grid;
  gap: 8px;
  padding: 14px;
  color: #11325b;
}

.profile-form label {
  font-weight: 950;
}

.profile-form input[type="text"],
.profile-form input[type="url"],
.profile-form input[type="file"] {
  width: 100%;
  min-height: 48px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.82rem 0.9rem;
  color: #093e80;
  background: linear-gradient(#ffffff, #dff4ff);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12);
  font-weight: 850;
}

.profile-form input[type="file"] {
  cursor: pointer;
  padding: 0.68rem 0.9rem;
}

.profile-form small {
  color: #315b8e;
  font-weight: 850;
}

.select-profile-icon-btn {
  display: grid;
  justify-items: start;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
  text-align: left;
}

.select-profile-icon-btn small {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.74rem;
  line-height: 1.25;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.36);
}

.profile-icon-picker-dialog {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: linear-gradient(#ffffff, #d7efff);
  box-shadow: 0 5px 0 var(--ink);
}

.profile-icon-picker-dialog > button {
  width: 100%;
}

.profile-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 82px);
  justify-content: center;
  gap: 8px;
}

.guest-icon-grid {
  grid-template-columns: repeat(3, 82px);
}

.profile-icon-option {
  display: grid;
  place-items: center;
  justify-items: center;
  gap: 0;
  width: 82px;
  min-height: 82px;
  min-width: 0;
  aspect-ratio: 1;
  padding: 7px;
  color: #11325b;
  background: linear-gradient(#ffffff, #d7efff);
  text-align: center;
  text-shadow: none;
}

.profile-icon-option.selected {
  outline: 4px solid var(--yellow);
  outline-offset: 2px;
  background: linear-gradient(#fff9a8, #ffd935 54%, #ff991d);
}

.profile-icon {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.62), transparent 20%),
    var(--avatar-bg);
  box-shadow: 0 5px 0 var(--ink);
}

.profile-icon.option {
  width: 66px;
  height: 66px;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

.profile-icon.mini {
  width: 30px;
  height: 30px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

.profile-icon-face {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 48%;
  height: 46%;
  border: 2px solid rgba(8, 8, 11, 0.7);
  border-radius: 48% 48% 46% 46%;
  background: var(--avatar-face);
  transform: translateX(-50%);
}

.profile-icon-hair {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 1;
  width: 58%;
  height: 30%;
  border-radius: 50% 50% 34% 34%;
  background: var(--avatar-hair);
  transform: translateX(-50%) rotate(-4deg);
}

.profile-icon-shirt {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 66%;
  height: 34%;
  border: 2px solid rgba(8, 8, 11, 0.68);
  border-radius: 48% 48% 0 0;
  background: var(--avatar-shirt);
  transform: translateX(-50%);
}

.profile-icon-eyes {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 46%;
  height: 10%;
  background:
    radial-gradient(circle, #111 0 34%, transparent 36%) left center / 45% 100% no-repeat,
    radial-gradient(circle, #111 0 34%, transparent 36%) right center / 45% 100% no-repeat;
  transform: translateX(-50%);
}

.profile-icon-smile {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 28%;
  height: 15%;
  border-bottom: 2px solid #111;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.profile-avatar-large.is-profile-icon,
.account-mini-avatar.is-profile-icon {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.premium-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.premium-photo-form {
  margin-top: 8px;
}

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

.guest-profile-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 2px solid rgba(8, 8, 11, 0.16);
  border-radius: var(--radius-sm);
  color: #11325b;
  background: rgba(255, 255, 255, 0.58);
}

.profile-stat span {
  color: #315b8e;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-stat strong {
  color: #102b5f;
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.profile-actions,
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
}

.profile-actions button,
.confirm-actions button {
  flex: 1 1 180px;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px;
  color: #11325b;
  font-weight: 900;
}

.setting-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--yellow);
}

.setting-row small {
  display: block;
  margin-top: 4px;
  color: #315b8e;
  font-weight: 800;
}

.setting-row .toggle-input {
  position: relative;
  width: 58px;
  height: 32px;
  flex: 0 0 auto;
  appearance: none;
  border: 3px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(#9aa9b8, #607180);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.36), 0 3px 0 var(--ink);
  transition: background 140ms ease, opacity 140ms ease;
}

.setting-row .toggle-input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(#ffffff, #d9efff);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  transition: transform 140ms ease;
}

.setting-row .toggle-input:checked {
  background: linear-gradient(#fff76d, #ffc21f 52%, #ff8e1b);
}

.setting-row .toggle-input:checked::before {
  transform: translateX(24px);
}

.setting-row .toggle-input:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.settings-note {
  margin: 0;
}

/* Koops table theme refinement. */
.app-shell::before {
  height: 14px;
  border-width: 3px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent),
    linear-gradient(180deg, #ffe8a3, #d5a43c 58%, #8f641f);
  box-shadow: 0 5px 0 var(--ink), 0 14px 32px rgba(0, 0, 0, 0.28);
}

button {
  background: linear-gradient(#44c7c1, #147a76 58%, #0d4f58);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.primary {
  color: #2e1b04;
  background: linear-gradient(#fff5b9, #f3c450 52%, #bd7c24);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.secondary {
  color: #f8fff8;
  background: linear-gradient(#58d58e, #1f8f61 58%, #0b5b48);
}

.ghost {
  color: #edf8ff;
  background: linear-gradient(#496f91, #1c3e5c 58%, #112236);
}

.ghost.danger,
.notice.danger {
  background: linear-gradient(#e87161, #bc4338 58%, #7d211e);
}

.primary.danger {
  color: #fff7f1;
  background: linear-gradient(#e87161, #bc4338 58%, #7d211e);
}

.hero {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 18%, transparent 18% 100%),
    linear-gradient(135deg, rgba(24, 95, 84, 0.98), rgba(17, 49, 67, 0.98) 58%, rgba(11, 25, 42, 0.98));
}

.hero::before {
  border-color: rgba(247, 201, 72, 0.78);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 36px);
  opacity: 0.82;
}

.hero-emblem {
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.44)) drop-shadow(0 0 16px rgba(247, 201, 72, 0.28));
}

.hero-copy h1 {
  color: #fffaf0;
  text-shadow:
    0 4px 0 var(--ink),
    4px 0 0 var(--ink),
    0 -2px 0 var(--ink),
    0 0 18px rgba(247, 201, 72, 0.2);
}

.hero-copy .subtitle,
.account-prompt,
.section-title p,
.account-card p,
.muted {
  color: #d5eee5;
}

.tool-btn::before,
.google-action-btn::before {
  color: #15344a;
  background: linear-gradient(#fffaf0, #d8f2ec);
}

#infoBtn::before {
  content: "?";
}

#settingsBtn::before {
  content: "\2699";
}

.room-badge,
.hero-badge,
.pot-chip,
.winner-banner {
  background: linear-gradient(#fff4b8, #e8bd4d 54%, #b57927);
}

.panel,
.account-card,
.lobby-panel,
.score-panel {
  background:
    linear-gradient(180deg, rgba(23, 92, 83, 0.98), rgba(15, 55, 69, 0.98)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px);
}

.panel::before {
  border-color: rgba(255, 255, 255, 0.18);
}

.card-panel:nth-child(1) {
  background:
    linear-gradient(135deg, rgba(31, 133, 96, 0.98), rgba(12, 73, 65, 0.98) 60%, rgba(8, 36, 48, 0.98));
}

.card-panel:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(42, 129, 153, 0.98), rgba(18, 66, 93, 0.98) 58%, rgba(10, 31, 53, 0.98));
}

.card-panel::after {
  background:
    radial-gradient(circle at 50% 46%, transparent 0 23px, rgba(255, 250, 240, 0.94) 24px 29px, transparent 30px),
    linear-gradient(135deg, #fffaf0 0 49%, #d5a43c 49% 52%, #0f6b62 52% 100%);
  box-shadow: 0 7px 0 var(--ink), 0 14px 28px rgba(0, 0, 0, 0.28);
}

.section-title h2,
.section-title h3 {
  color: #fffaf0;
  text-shadow: 0 3px 0 var(--ink);
}

.field label {
  color: #ffe8a3;
}

.field input,
.profile-form input[type="text"],
.profile-form input[type="url"],
.profile-form input[type="file"] {
  color: #17344a;
  background: linear-gradient(#fffdf6, #d8f2ec);
}

.lobby-player,
.score-row,
.rule-sections section,
.settings-actions,
.coin-packages,
.profile-hero,
.profile-form,
.profile-stats,
.profile-actions,
.confirm-actions,
.profile-icon-picker-dialog {
  background: linear-gradient(#fffdf6, #d8f2ec);
}

.lobby-player {
  color: #18364c;
  background:
    linear-gradient(90deg, rgba(247, 201, 72, 0.45) 0 12px, transparent 12px),
    linear-gradient(#fffdf6, #d8f2ec);
}

.lobby-player strong,
.score-row,
.profile-hero,
.profile-form,
.profile-stat,
.setting-row,
.coin-package,
.rule-sections h3,
.dialog-list,
.action-box,
.notice,
.game-log-list .log-item,
.summary-card {
  color: #17344a;
}

.badge {
  background: linear-gradient(#6b7d8d, #34475b);
}

.badge.ok {
  background: linear-gradient(#5fdc92, #16895c);
}

.badge.warn {
  color: #2e1b04;
  background: linear-gradient(#fff1a5, #d89e2f);
}

.badge.danger {
  background: linear-gradient(#e87161, #9a2f29);
}

.game-topbar {
  background:
    linear-gradient(180deg, #1d857b, #124a61 58%, #0b233d),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 42px);
}

.summary-card,
.stat-box,
.status-item,
.deck-stack,
.discard-stack {
  background: linear-gradient(#fffdf6, #d8f2ec);
}

.summary-card span,
.summary-card .sub-label,
.deck-stack span,
.discard-stack span,
.profile-hero span,
.profile-form small,
.profile-stat span,
.setting-row small,
.coin-package small,
.action-box .muted,
.notice .muted {
  color: #376074;
}

.summary-card strong,
.stat-box strong,
.room-badge strong,
.profile-stat strong,
.compact-action h2,
.compact-action h3 {
  color: #102d42;
}

.table-zone {
  background:
    linear-gradient(180deg, rgba(247, 201, 72, 0.86) 0 12px, transparent 12px calc(100% - 12px), rgba(247, 201, 72, 0.86) calc(100% - 12px)),
    linear-gradient(90deg, rgba(247, 201, 72, 0.86) 0 12px, transparent 12px calc(100% - 12px), rgba(247, 201, 72, 0.86) calc(100% - 12px)),
    linear-gradient(135deg, #174b45, #102b42);
}

.table-canvas {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 34px),
    linear-gradient(135deg, #0e755d 0%, #0b4b55 54%, #08263d 100%);
  box-shadow: inset 0 0 0 7px rgba(247, 201, 72, 0.88), inset 0 0 0 12px var(--ink);
}

.table-canvas::before {
  border-color: rgba(255, 250, 240, 0.2);
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.1) 40% 42%, transparent 42% 100%),
    radial-gradient(ellipse at center, rgba(255, 250, 240, 0.08), transparent 64%);
}

.center-emblem {
  opacity: 0.18;
}

.deck-stack::before,
.deck-stack::after,
.card-back {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22px, rgba(255, 250, 240, 0.92) 23px 28px, transparent 29px),
    linear-gradient(135deg, #09233c 0 49%, #d5a43c 49% 52%, #0e755d 52% 100%);
}

.player-seat {
  background: linear-gradient(#4dc8c0, #157d79 55%, #0b4d59);
}

.player-seat.self {
  background: linear-gradient(#fff2a7, #e6b64c 52%, #bd7c24);
}

.player-seat.active {
  outline-color: #fff0a4;
  filter: saturate(1.08);
}

.action-panel {
  background: linear-gradient(180deg, #1b8178, #124e61 62%, #0b263f);
}

.game-log {
  background:
    linear-gradient(135deg, rgba(28, 64, 88, 0.98), rgba(15, 38, 61, 0.98) 64%, rgba(8, 22, 38, 0.98));
}

.action-box,
.notice,
.game-log-list .log-item,
.toast {
  background: linear-gradient(#fffdf6, #d8f2ec);
}

.notice.ok {
  background: linear-gradient(#e3ffe7, #a7eec6);
}

.notice.blue {
  background: linear-gradient(#ebfbff, #c2eee8);
}

.coin-strip,
.power-box.active {
  color: #2e1b04;
  background: linear-gradient(#fff4b8, #e7bd4f);
}

.dialog-panel {
  background:
    linear-gradient(135deg, rgba(23, 92, 83, 0.98), rgba(15, 49, 69, 0.98) 58%, rgba(10, 24, 42, 0.98));
}

.dialog-overlay {
  background: rgba(4, 12, 18, 0.72);
}

.profile-icon-option {
  background: linear-gradient(#fffdf6, #d8f2ec);
}

.profile-icon-option.selected {
  background: linear-gradient(#fff4b8, #e8bd4d 54%, #bd7c24);
}

.setting-row .toggle-input {
  background: linear-gradient(#7b8992, #3f5360);
}

.setting-row .toggle-input::before {
  background: linear-gradient(#fffdf6, #d8f2ec);
}

.setting-row .toggle-input:checked {
  background: linear-gradient(#58d58e, #1f8f61 58%, #0b5b48);
}

.score-row.header {
  background: linear-gradient(#1d857b, #123f5d);
}

.invite-preview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
  padding: 14px 16px;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  color: #17344a;
  background:
    linear-gradient(90deg, rgba(247, 201, 72, 0.36) 0 12px, transparent 12px),
    linear-gradient(#fffdf6, #d8f2ec);
  box-shadow: var(--shadow);
}

.invite-preview strong,
.invite-preview p {
  display: block;
  margin: 0;
}

.invite-preview strong {
  overflow: hidden;
  color: #102d42;
  font-size: 1.2rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-preview p {
  margin-top: 4px;
  color: #376074;
  font-weight: 850;
}

.invite-label {
  display: block;
  margin-bottom: 4px;
  color: #7a581b;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guide-start-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.guide-dialog {
  display: grid;
  gap: 14px;
}

.tutorial-choice-dialog {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: #17344a;
  background: linear-gradient(#fffdf6, #d8f2ec);
  box-shadow: 0 5px 0 var(--ink);
}

.tutorial-choice-dialog p {
  margin: 0;
  color: #17344a;
  font-weight: 900;
  line-height: 1.35;
}

.guide-repeat-row {
  padding: 10px 12px;
  border: 2px solid rgba(7, 16, 24, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.46);
}

.guide-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  gap: 6px;
}

.guide-progress span {
  height: 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 0 var(--ink);
}

.guide-progress span.active {
  background: linear-gradient(#fff4b8, #e8bd4d);
}

.guide-step-card {
  position: relative;
  min-height: 170px;
  padding: 18px 18px 18px 76px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: #17344a;
  background: linear-gradient(#fffdf6, #d8f2ec);
  box-shadow: 0 5px 0 var(--ink);
}

.guide-step-card h3,
.guide-step-card p {
  margin: 0;
}

.guide-step-card h3 {
  color: #102d42;
  font-size: 1.35rem;
  font-weight: 950;
}

.guide-step-card p {
  margin-top: 8px;
  color: #376074;
  font-weight: 850;
  line-height: 1.48;
}

.guide-step-number {
  position: absolute;
  left: 16px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: #2e1b04;
  background: linear-gradient(#fff4b8, #e8bd4d);
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 950;
}

.guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.guide-actions button {
  flex: 1 1 150px;
}

.card-slot,
.big-card,
.deck-stack,
.discard-stack,
.pot-chip,
.summary-card,
.player-seat,
.winner-banner,
.score-row,
.game-log-list .log-item {
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.card-slot.visible .card-face,
.card-slot.flipped-in .card-face {
  animation: koopsCardFlip 360ms ease both;
}

.deck-stack.animate-draw {
  animation: koopsDeckDraw 720ms ease both;
}

.discard-stack.animate-discard {
  animation: koopsDiscardPop 760ms ease both;
}

.big-card.animate-drawn-card {
  animation: koopsDrawnCard 680ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.pot-chip.animate-pot,
.summary-card.animate-pot {
  animation: koopsPotPulse 760ms ease both;
}

.player-seat.animate-koop-seat {
  animation: koopsSeatCall 1100ms ease both;
}

.player-seat.animate-replace-seat {
  animation: koopsReplacePulse 720ms ease both;
}

.koops-call-flash {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 12;
  display: grid;
  place-items: center;
  width: min(58vw, 560px);
  padding: clamp(6px, 1vw, 12px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 226, 102, 0.34), transparent 62%),
    rgba(7, 0, 18, 0.1);
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.52));
  transform: translate(-50%, -50%);
  animation: koopsCallFlash 1400ms ease both;
  pointer-events: none;
}

.koops-call-flash::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 221, 96, 0.5), rgba(255, 221, 96, 0.08) 42%, transparent 70%);
  animation: koopsCallGlow 1400ms ease both;
}

.koops-call-flash img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 0 0 2px rgba(255, 224, 132, 0.48),
    0 0 30px rgba(255, 201, 64, 0.34);
}

.winner-banner.winner-celebrate {
  animation: koopsWinnerBanner 1300ms ease both;
}

.score-row.winner-row {
  outline: 4px solid rgba(247, 201, 72, 0.95);
  outline-offset: 2px;
}

.score-row.winner-row:not(.header) {
  animation: koopsWinnerRow 1000ms ease both;
}

.game-log-list .log-item.new-log {
  animation: koopsLogIn 480ms ease both;
}

@keyframes koopsCardFlip {
  0% {
    opacity: 0.4;
    transform: rotateY(-82deg) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: rotateY(0) scale(1);
  }
}

@keyframes koopsDeckDraw {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  42% {
    transform: translateY(-8px) rotate(-2deg);
    filter: brightness(1.18);
  }
}

@keyframes koopsDiscardPop {
  0% {
    transform: scale(0.94) rotate(-1deg);
    filter: brightness(0.95);
  }
  55% {
    transform: scale(1.06) rotate(1deg);
    filter: brightness(1.16);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes koopsDrawnCard {
  0% {
    opacity: 0;
    transform: translateY(-22px) rotate(-5deg) scale(0.86);
  }
  64% {
    opacity: 1;
    transform: translateY(4px) rotate(2deg) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes koopsPotPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  46% {
    transform: scale(1.08);
    filter: brightness(1.18);
    box-shadow: 0 5px 0 var(--ink), 0 0 0 7px rgba(247, 201, 72, 0.34);
  }
}

@keyframes koopsSeatCall {
  0%, 100% {
    transform: translateY(0);
  }
  34% {
    transform: translateY(-6px) rotate(-1deg);
    filter: brightness(1.2);
  }
  68% {
    transform: translateY(2px) rotate(1deg);
  }
}

@keyframes koopsReplacePulse {
  0%, 100% {
    transform: scale(1);
  }
  48% {
    transform: scale(1.025);
    filter: brightness(1.1);
  }
}

@keyframes koopsCallFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(-8deg);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06) rotate(2deg);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86);
  }
}

@keyframes koopsCallGlow {
  0%, 100% {
    opacity: 0;
    transform: scale(0.8);
  }
  30%, 72% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes koopsWinnerBanner {
  0% {
    transform: translateY(-8px) scale(0.98);
    filter: brightness(0.96);
  }
  48% {
    transform: translateY(0) scale(1.03);
    filter: brightness(1.16);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes koopsWinnerRow {
  0% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(4px);
    filter: brightness(1.08);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes koopsLogIn {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (max-width: 1180px) {
  .game-topbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-main {
    grid-template-columns: 1fr;
  }

  .action-panel {
    position: static;
  }
}

@media (max-width: 840px) {
  body::before {
    background:
      radial-gradient(circle at 25% 12%, rgba(255, 239, 110, 0.16), transparent 13rem),
      radial-gradient(circle at 80% 82%, rgba(48, 213, 255, 0.14), transparent 16rem);
  }

  .app-shell {
    width: min(100% - 20px, 1460px);
    padding-top: 12px;
  }

  .hero,
  .account-card,
  .invite-preview,
  .home-grid,
  .game-topbar,
  .table-center {
    grid-template-columns: 1fr;
  }

  .mode-card {
    min-height: 340px;
    grid-template-rows: minmax(130px, 1fr) auto auto;
  }

  .mode-card .section-title h2 {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
  }

  .hero {
    min-height: 0;
  }

  .hero-actions {
    max-width: none;
  }

  .hero-action-row {
    width: 100%;
    align-items: stretch;
    justify-content: stretch;
  }

  .hero-action-row > * {
    flex: 1 1 160px;
  }

  .account-prompt {
    max-width: none;
    margin: 0;
    text-align: center;
  }

  .hero-emblem {
    width: 104px;
  }

  .hero-actions,
  .account-actions,
  .table-status,
  .lobby-actions {
    align-items: stretch;
    justify-content: stretch;
  }

  .lobby-actions,
  .lobby-primary-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions > *,
  .account-actions > *,
  .invite-preview > button,
  .lobby-actions > *,
  .lobby-primary-actions > *,
  .game-topbar > button {
    width: 100%;
  }

  .tool-btn {
    min-width: 0;
  }

  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-icon-grid {
    grid-template-columns: repeat(3, 78px);
  }

  .guest-icon-grid {
    grid-template-columns: repeat(3, 78px);
  }

  .profile-icon-option {
    width: 78px;
    min-height: 78px;
  }

  .profile-icon.option {
    width: 62px;
    height: 62px;
  }

  .lobby-player {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .table-zone {
    min-height: 0;
  }

  .table-center {
    width: calc(100% - 34px);
    margin: 28px auto 14px;
  }

  .deck-stack,
  .discard-stack,
  .pot-chip {
    min-height: 94px;
  }

  .players-table {
    grid-template-columns: 1fr;
    padding: 0 18px 18px;
  }

  .score-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hero,
  .panel,
  .account-card,
  .dialog-panel {
    padding: 14px;
  }

  .hero::before {
    inset: 7px;
    border-width: 4px;
  }

  .hero-copy h1 {
    font-size: 2.45rem;
  }

  .hero-brand {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .profile-stats {
    grid-template-columns: 1fr;
  }

  .profile-icon-grid {
    grid-template-columns: repeat(2, 78px);
  }

  .guest-icon-grid {
    grid-template-columns: repeat(3, 74px);
  }

  .profile-icon-option {
    width: 78px;
    min-height: 78px;
  }

  .guest-icon-grid .profile-icon-option {
    width: 74px;
    min-height: 74px;
  }

  .profile-icon.option {
    width: 62px;
    height: 62px;
  }

  .guest-icon-grid .profile-icon.option {
    width: 58px;
    height: 58px;
  }

  .section-title h2 {
    font-size: 1.42rem;
  }

  .card-row {
    gap: 6px;
  }

  .card-slot {
    min-height: 76px;
  }

  .player-avatar {
    width: 50px;
    height: 50px;
  }

  .seat-header {
    grid-template-columns: 1fr;
  }

  .seat-tags {
    justify-content: flex-start;
  }

  .match-card-line {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 1180px) {
  html,
  body {
    height: 100%;
  }

  body[data-screen="game"] {
    overflow: hidden;
  }

  body[data-screen="game"] .app-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  body[data-screen="game"] .app-shell::before,
  body[data-screen="game"] .app-footer {
    display: none;
  }

  body[data-screen="game"] .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 0;
    margin-top: 0;
    padding: 6px 8px;
    border-width: 3px;
    box-shadow: 0 3px 0 var(--ink);
  }

  body[data-screen="game"] .hero::before {
    inset: 5px;
    border-width: 2px;
  }

  body[data-screen="game"] .hero-brand {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }

  body[data-screen="game"] .hero-emblem {
    width: 38px;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.42));
  }

  body[data-screen="game"] .hero-copy {
    gap: 0;
  }

  body[data-screen="game"] .hero-copy h1 {
    font-size: 1.35rem;
    line-height: 1;
    text-shadow: 0 2px 0 var(--ink);
  }

  body[data-screen="game"] .hero-copy .subtitle,
  body[data-screen="game"] .account-prompt {
    display: none;
  }

  body[data-screen="game"] .hero-actions {
    align-items: center;
    justify-items: end;
    gap: 0;
  }

  body[data-screen="game"] .hero-action-row {
    flex-wrap: nowrap;
    gap: 4px;
  }

  body[data-screen="game"] .tool-btn,
  body[data-screen="game"] .user-btn {
    min-width: 0;
    min-height: 32px;
    padding: 0.34rem 0.48rem;
    border-width: 2px;
    font-size: 0.74rem;
    line-height: 1;
    box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  }

  body[data-screen="game"] .game-screen {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-screen="game"] .game-topbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border-width: 3px;
    box-shadow: 0 3px 0 var(--ink);
  }

  body[data-screen="game"] .summary-card {
    min-height: 0;
    padding: 4px 6px;
    border-width: 2px;
    box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }

  body[data-screen="game"] .summary-card:nth-child(2) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 2px 5px;
    align-items: center;
  }

  body[data-screen="game"] .summary-card span,
  body[data-screen="game"] .summary-card .sub-label {
    margin: 0;
    font-size: 0.56rem;
    letter-spacing: 0.05em;
  }

  body[data-screen="game"] .summary-card strong {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.05;
  }

  body[data-screen="game"] .game-main {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    gap: 6px;
    min-height: 0;
    overflow: hidden;
  }

  body[data-screen="game"] .panel {
    padding: 6px;
    border-width: 3px;
    box-shadow: 0 3px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, 0.28);
  }

  body[data-screen="game"] .table-zone {
    min-height: 0;
    height: 100%;
  }

  body[data-screen="game"] .table-canvas {
    height: 100%;
    min-height: 0;
    border-width: 3px;
    box-shadow: inset 0 0 0 4px rgba(247, 201, 72, 0.88), inset 0 0 0 7px var(--ink);
  }

  body[data-screen="game"] .table-canvas::before {
    inset: 12px;
    border-width: 2px;
  }

  body[data-screen="game"] .table-center {
    grid-template-columns: minmax(72px, 1fr) minmax(72px, 1fr) minmax(52px, auto);
    gap: 5px;
    width: calc(100% - 14px);
    margin: 10px auto 6px;
  }

  body[data-screen="game"] .center-emblem {
    width: 108px;
  }

  body[data-screen="game"] .deck-stack,
  body[data-screen="game"] .discard-stack,
  body[data-screen="game"] .pot-chip {
    min-height: 56px;
    padding: 5px;
    border-width: 2px;
    box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  body[data-screen="game"] .deck-stack::before,
  body[data-screen="game"] .deck-stack::after {
    width: 36px;
    height: 50px;
    border-width: 2px;
  }

  body[data-screen="game"] .deck-stack span,
  body[data-screen="game"] .discard-stack span,
  body[data-screen="game"] .pot-chip span {
    font-size: 0.52rem;
    letter-spacing: 0.05em;
  }

  body[data-screen="game"] .deck-stack strong,
  body[data-screen="game"] .pot-chip strong {
    font-size: 1rem;
    line-height: 1;
  }

  body[data-screen="game"] .discard-stack #centerDiscard {
    width: 42px;
  }

  body[data-screen="game"] .discard-stack .card-face {
    min-height: 50px;
  }

  body[data-screen="game"] .pot-chip {
    min-width: 52px;
  }

  body[data-screen="game"] .players-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 10px;
    align-content: start;
  }

  body[data-screen="game"] .player-seat {
    padding: 5px;
    border-width: 2px;
    box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  body[data-screen="game"] .player-seat.active {
    outline-width: 3px;
    outline-offset: 1px;
  }

  body[data-screen="game"] .seat-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    margin-bottom: 5px;
    align-items: center;
  }

  body[data-screen="game"] .seat-profile {
    gap: 5px;
  }

  body[data-screen="game"] .player-avatar {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-radius: 6px;
    box-shadow: 0 2px 0 var(--ink);
    font-size: 0.68rem;
  }

  body[data-screen="game"] .seat-name {
    font-size: 0.72rem;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.36);
  }

  body[data-screen="game"] .seat-tags {
    gap: 3px;
  }

  body[data-screen="game"] .badge {
    min-height: 18px;
    padding: 0.08rem 0.28rem;
    border-width: 1px;
    font-size: 0.52rem;
  }

  body[data-screen="game"] .card-row {
    gap: 3px;
  }

  body[data-screen="game"] .card-slot {
    min-height: 43px;
    border-width: 2px;
    box-shadow: 0 2px 0 var(--ink);
  }

  body[data-screen="game"] .card-slot.selected {
    outline-width: 3px;
    outline-offset: 1px;
  }

  body[data-screen="game"] .card-back {
    font-size: 0.9rem;
  }

  body[data-screen="game"] .card-back::after {
    width: 22px;
    height: 22px;
    border-width: 2px;
    font-size: 0.78rem;
  }

  body[data-screen="game"] .card-face {
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.06);
  }

  body[data-screen="game"] .card-face .card-rank {
    font-size: 0.95rem;
  }

  body[data-screen="game"] .card-face .card-value {
    margin-top: 1px;
    font-size: 0.52rem;
  }

  body[data-screen="game"] .slot-number {
    top: 3px;
    left: 3px;
    min-width: 15px;
    min-height: 15px;
    border-width: 1px;
    font-size: 0.48rem;
  }

  body[data-screen="game"] .sidebar {
    grid-template-rows: minmax(0, 1fr) minmax(68px, 0.58fr);
    gap: 6px;
    min-height: 0;
    overflow: hidden;
  }

  body[data-screen="game"] .action-panel,
  body[data-screen="game"] .game-log {
    min-height: 0;
    overflow: auto;
  }

  body[data-screen="game"] .game-log .section-title {
    margin-bottom: 4px;
  }

  body[data-screen="game"] .game-log .section-title h2,
  body[data-screen="game"] .compact-action h2,
  body[data-screen="game"] .compact-action h3 {
    font-size: 0.92rem;
    line-height: 1.05;
  }

  body[data-screen="game"] .action-box,
  body[data-screen="game"] .notice,
  body[data-screen="game"] .coin-strip {
    gap: 5px;
    padding: 6px;
    margin-bottom: 6px;
    border-width: 2px;
    box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }

  body[data-screen="game"] .action-box p,
  body[data-screen="game"] .notice,
  body[data-screen="game"] .coin-strip,
  body[data-screen="game"] .auto-note,
  body[data-screen="game"] .muted {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  body[data-screen="game"] .action-buttons {
    gap: 5px;
  }

  body[data-screen="game"] .action-buttons button,
  body[data-screen="game"] .drawn-buttons button {
    min-height: 32px;
    padding: 0.34rem 0.45rem;
    border-width: 2px;
    font-size: 0.68rem;
    line-height: 1;
    box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  body[data-screen="game"] .drawn-card-area {
    gap: 6px;
  }

  body[data-screen="game"] .big-card {
    width: 64px;
    border-width: 2px;
    box-shadow: 0 3px 0 var(--ink);
  }

  body[data-screen="game"] .big-card.small {
    width: 52px;
  }

  body[data-screen="game"] .match-card-line {
    gap: 7px;
  }

  body[data-screen="game"] .game-log-list {
    gap: 5px;
    max-height: none;
    overflow-y: auto;
  }

  body[data-screen="game"] .game-log-list .log-item {
    padding: 5px;
    border-width: 2px;
    box-shadow: 0 2px 0 var(--ink);
    font-size: 0.68rem;
    line-height: 1.15;
  }
}

@media (orientation: landscape) and (max-height: 430px) and (max-width: 760px) {
  body[data-screen="game"] .game-main {
    grid-template-columns: minmax(0, 1fr) 190px;
  }

  body[data-screen="game"] .table-center {
    margin-top: 7px;
  }

  body[data-screen="game"] .deck-stack,
  body[data-screen="game"] .discard-stack,
  body[data-screen="game"] .pot-chip {
    min-height: 48px;
  }

  body[data-screen="game"] .players-table {
    gap: 5px;
    padding: 0 8px 8px;
  }

  body[data-screen="game"] .card-slot {
    min-height: 38px;
  }

  body[data-screen="game"] .game-log {
    display: none;
  }

  body[data-screen="game"] .sidebar {
    grid-template-rows: minmax(0, 1fr);
  }
}

body.is-mobile-app {
  min-height: var(--koop-vh, 100dvh);
  overflow-x: hidden;
}

body.is-mobile-app .app-shell {
  width: 100%;
  max-width: none;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

body.is-mobile-game-fit[data-screen="game"] {
  width: 100%;
  height: var(--koop-vh, 100dvh);
  min-height: var(--koop-vh, 100dvh);
  overflow: hidden;
}

body.is-mobile-game-fit[data-screen="game"] .app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(4px, 1.2vh, 8px);
  width: 100%;
  height: var(--koop-vh, 100dvh);
  max-height: var(--koop-vh, 100dvh);
  min-height: 0;
  padding:
    max(4px, env(safe-area-inset-top))
    max(6px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left));
  overflow: hidden;
}

body.is-mobile-game-fit[data-screen="game"] .app-shell::before,
body.is-mobile-game-fit[data-screen="game"] .app-footer {
  display: none;
}

body.is-mobile-game-fit[data-screen="game"] .hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(5px, 1.2vw, 10px);
  min-height: 0;
  margin: 0;
  padding: 5px 7px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-game-fit[data-screen="game"] .hero::before {
  inset: 4px;
  border-width: 2px;
}

body.is-mobile-game-fit[data-screen="game"] .hero-brand {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
}

body.is-mobile-game-fit[data-screen="game"] .hero-emblem {
  width: clamp(30px, 6.4vh, 42px);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.42));
}

body.is-mobile-game-fit[data-screen="game"] .hero-copy {
  gap: 0;
}

body.is-mobile-game-fit[data-screen="game"] .hero-copy h1 {
  font-size: clamp(1rem, 4.5vh, 1.35rem);
  line-height: 1;
  text-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-game-fit[data-screen="game"] .hero-copy .subtitle,
body.is-mobile-game-fit[data-screen="game"] .account-prompt {
  display: none;
}

body.is-mobile-game-fit[data-screen="game"] .hero-actions {
  align-items: center;
  justify-items: end;
  max-width: min(58vw, 390px);
}

body.is-mobile-game-fit[data-screen="game"] .hero-action-row {
  flex-wrap: nowrap;
  gap: 4px;
}

body.is-mobile-game-fit[data-screen="game"] .tool-btn,
body.is-mobile-game-fit[data-screen="game"] .user-btn {
  min-width: 0;
  min-height: clamp(27px, 7.2vh, 34px);
  padding: 0.28rem 0.44rem;
  border-width: 2px;
  font-size: clamp(0.58rem, 2.45vh, 0.74rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-game-fit[data-screen="game"] .game-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(4px, 1.2vh, 7px);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.is-mobile-game-fit[data-screen="game"] .game-topbar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-game-fit[data-screen="game"] .summary-card {
  min-height: 0;
  padding: 3px 5px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.is-mobile-game-fit[data-screen="game"] .summary-card:nth-child(2) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1px 4px;
  align-items: center;
}

body.is-mobile-game-fit[data-screen="game"] .summary-card span,
body.is-mobile-game-fit[data-screen="game"] .summary-card .sub-label {
  margin: 0;
  font-size: clamp(0.48rem, 1.9vh, 0.58rem);
  letter-spacing: 0.03em;
  line-height: 1;
}

body.is-mobile-game-fit[data-screen="game"] .summary-card strong {
  margin: 0;
  font-size: clamp(0.64rem, 2.35vh, 0.78rem);
  line-height: 1;
}

body.is-mobile-game-fit[data-screen="game"] .game-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(172px, 30vw, 250px);
  gap: clamp(4px, 1.2vw, 7px);
  min-height: 0;
  overflow: hidden;
}

body.is-mobile-game-fit[data-screen="game"] .panel {
  padding: 5px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), 0 10px 20px rgba(0, 0, 0, 0.26);
}

body.is-mobile-game-fit[data-screen="game"] .table-zone {
  height: 100%;
  min-height: 0;
}

body.is-mobile-game-fit[data-screen="game"] .table-canvas {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-width: 2px;
  box-shadow: inset 0 0 0 4px rgba(247, 201, 72, 0.88), inset 0 0 0 7px var(--ink);
}

body.is-mobile-game-fit[data-screen="game"] .table-canvas::before {
  inset: 10px;
  border-width: 2px;
}

body.is-mobile-game-fit[data-screen="game"] .table-center {
  grid-template-columns: minmax(58px, 1fr) minmax(58px, 1fr) minmax(46px, auto);
  gap: 4px;
  width: calc(100% - 12px);
  margin: clamp(6px, 1.6vh, 10px) auto 4px;
}

body.is-mobile-game-fit[data-screen="game"] .center-emblem {
  width: clamp(72px, 18vh, 112px);
}

body.is-mobile-game-fit[data-screen="game"] .deck-stack,
body.is-mobile-game-fit[data-screen="game"] .discard-stack,
body.is-mobile-game-fit[data-screen="game"] .pot-chip {
  min-height: clamp(42px, 14vh, 58px);
  padding: 4px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-game-fit[data-screen="game"] .deck-stack::before,
body.is-mobile-game-fit[data-screen="game"] .deck-stack::after {
  width: clamp(28px, 8vh, 38px);
  height: clamp(38px, 11vh, 52px);
  border-width: 2px;
}

body.is-mobile-game-fit[data-screen="game"] .deck-stack span,
body.is-mobile-game-fit[data-screen="game"] .discard-stack span,
body.is-mobile-game-fit[data-screen="game"] .pot-chip span {
  font-size: clamp(0.44rem, 1.7vh, 0.52rem);
  letter-spacing: 0.03em;
}

body.is-mobile-game-fit[data-screen="game"] .deck-stack strong,
body.is-mobile-game-fit[data-screen="game"] .pot-chip strong {
  font-size: clamp(0.78rem, 3vh, 1rem);
  line-height: 1;
}

body.is-mobile-game-fit[data-screen="game"] .discard-stack #centerDiscard {
  width: clamp(34px, 10vh, 48px);
}

body.is-mobile-game-fit[data-screen="game"] .discard-stack .card-face {
  min-height: clamp(40px, 12vh, 52px);
}

body.is-mobile-game-fit[data-screen="game"] .pot-chip {
  min-width: 46px;
}

body.is-mobile-game-fit[data-screen="game"] .players-table {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
  padding: 0 8px 8px;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.is-mobile-game-fit[data-screen="game"] .players-table.seats-1 {
  grid-template-columns: minmax(0, 0.7fr);
  justify-content: center;
}

body.is-mobile-game-fit[data-screen="game"] .players-table.seats-5,
body.is-mobile-game-fit[data-screen="game"] .players-table.seats-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.is-mobile-game-fit[data-screen="game"] .players-table.seats-7,
body.is-mobile-game-fit[data-screen="game"] .players-table.seats-8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.is-mobile-game-fit[data-screen="game"] .player-seat {
  padding: 4px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-game-fit[data-screen="game"] .player-seat.active {
  outline-width: 2px;
  outline-offset: 1px;
}

body.is-mobile-game-fit[data-screen="game"] .seat-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
  margin-bottom: 4px;
  align-items: center;
}

body.is-mobile-game-fit[data-screen="game"] .seat-profile {
  gap: 4px;
}

body.is-mobile-game-fit[data-screen="game"] .player-avatar {
  width: clamp(24px, 7vh, 30px);
  height: clamp(24px, 7vh, 30px);
  border-width: 2px;
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: clamp(0.52rem, 2vh, 0.68rem);
}

body.is-mobile-game-fit[data-screen="game"] .seat-name {
  font-size: clamp(0.56rem, 2vh, 0.72rem);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.36);
}

body.is-mobile-game-fit[data-screen="game"] .seat-tags {
  gap: 2px;
}

body.is-mobile-game-fit[data-screen="game"] .badge {
  min-height: 16px;
  padding: 0.05rem 0.22rem;
  border-width: 1px;
  font-size: clamp(0.44rem, 1.55vh, 0.52rem);
  line-height: 1;
}

body.is-mobile-game-fit[data-screen="game"] .card-row {
  gap: 2px;
}

body.is-mobile-game-fit[data-screen="game"] .card-slot {
  min-height: clamp(28px, 11vh, 42px);
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-game-fit[data-screen="game"] .players-table.seats-5 .card-slot,
body.is-mobile-game-fit[data-screen="game"] .players-table.seats-6 .card-slot {
  min-height: clamp(24px, 9.4vh, 36px);
}

body.is-mobile-game-fit[data-screen="game"] .players-table.seats-7 .card-slot,
body.is-mobile-game-fit[data-screen="game"] .players-table.seats-8 .card-slot {
  min-height: clamp(22px, 8.8vh, 32px);
}

body.is-mobile-game-fit[data-screen="game"] .card-slot.selected {
  outline-width: 2px;
  outline-offset: 1px;
}

body.is-mobile-game-fit[data-screen="game"] .card-back {
  font-size: clamp(0.68rem, 2.4vh, 0.9rem);
}

body.is-mobile-game-fit[data-screen="game"] .card-back::after {
  width: clamp(15px, 5.2vh, 22px);
  height: clamp(15px, 5.2vh, 22px);
  border-width: 2px;
  font-size: clamp(0.48rem, 1.9vh, 0.78rem);
}

body.is-mobile-game-fit[data-screen="game"] .card-face {
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.06);
}

body.is-mobile-game-fit[data-screen="game"] .card-face .card-rank {
  font-size: clamp(0.62rem, 2.65vh, 0.95rem);
}

body.is-mobile-game-fit[data-screen="game"] .card-face .card-value {
  margin-top: 0;
  font-size: clamp(0.42rem, 1.45vh, 0.52rem);
}

body.is-mobile-game-fit[data-screen="game"] .slot-number {
  top: 2px;
  left: 2px;
  min-width: 13px;
  min-height: 13px;
  border-width: 1px;
  font-size: 0.44rem;
}

body.is-mobile-game-fit[data-screen="game"] .sidebar {
  grid-template-rows: minmax(0, 1fr) minmax(56px, 0.5fr);
  gap: 5px;
  min-height: 0;
  overflow: hidden;
}

body.is-mobile-game-fit[data-screen="game"] .action-panel,
body.is-mobile-game-fit[data-screen="game"] .game-log {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

body.is-mobile-game-fit[data-screen="game"] .game-log .section-title {
  margin-bottom: 3px;
}

body.is-mobile-game-fit[data-screen="game"] .game-log .section-title h2,
body.is-mobile-game-fit[data-screen="game"] .compact-action h2,
body.is-mobile-game-fit[data-screen="game"] .compact-action h3 {
  font-size: clamp(0.72rem, 2.65vh, 0.9rem);
  line-height: 1.05;
}

body.is-mobile-game-fit[data-screen="game"] .action-box,
body.is-mobile-game-fit[data-screen="game"] .notice,
body.is-mobile-game-fit[data-screen="game"] .coin-strip {
  gap: 4px;
  padding: 5px;
  margin-bottom: 5px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.is-mobile-game-fit[data-screen="game"] .action-box p,
body.is-mobile-game-fit[data-screen="game"] .notice,
body.is-mobile-game-fit[data-screen="game"] .coin-strip,
body.is-mobile-game-fit[data-screen="game"] .auto-note,
body.is-mobile-game-fit[data-screen="game"] .muted {
  font-size: clamp(0.58rem, 2.15vh, 0.7rem);
  line-height: 1.16;
}

body.is-mobile-game-fit[data-screen="game"] .action-buttons {
  gap: 4px;
}

body.is-mobile-game-fit[data-screen="game"] .action-buttons button,
body.is-mobile-game-fit[data-screen="game"] .drawn-buttons button {
  min-height: clamp(27px, 7.4vh, 32px);
  padding: 0.28rem 0.38rem;
  border-width: 2px;
  font-size: clamp(0.54rem, 2.05vh, 0.66rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-game-fit[data-screen="game"] .drawn-card-area {
  gap: 5px;
}

body.is-mobile-game-fit[data-screen="game"] .big-card {
  width: clamp(46px, 15vh, 62px);
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-game-fit[data-screen="game"] .big-card.small {
  width: clamp(38px, 13vh, 50px);
}

body.is-mobile-game-fit[data-screen="game"] .match-card-line {
  gap: 6px;
}

body.is-mobile-game-fit[data-screen="game"] .game-log-list {
  gap: 4px;
  max-height: none;
  overflow-y: auto;
}

body.is-mobile-game-fit[data-screen="game"] .game-log-list .log-item {
  padding: 4px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: clamp(0.52rem, 1.9vh, 0.64rem);
  line-height: 1.12;
}

body.is-mobile-game-fit.is-very-narrow-landscape[data-screen="game"] .game-main,
body.is-mobile-game-fit.is-tiny-landscape[data-screen="game"] .game-main {
  grid-template-columns: minmax(0, 1fr) clamp(150px, 29vw, 190px);
}

body.is-mobile-game-fit.is-tiny-landscape[data-screen="game"] .game-log {
  display: none;
}

body.is-mobile-game-fit.is-tiny-landscape[data-screen="game"] .sidebar {
  grid-template-rows: minmax(0, 1fr);
}

body.is-mobile-game-fit.is-tiny-landscape[data-screen="game"] .hero-emblem {
  width: 28px;
}

body.is-mobile-game-fit.is-tiny-landscape[data-screen="game"] .hero-copy h1 {
  font-size: 1rem;
}

body.is-mobile-game-fit.is-tiny-landscape[data-screen="game"] .tool-btn,
body.is-mobile-game-fit.is-tiny-landscape[data-screen="game"] .user-btn {
  min-height: 27px;
  padding: 0.24rem 0.34rem;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] {
  width: 100%;
  height: var(--koop-vh, 100dvh);
  min-height: var(--koop-vh, 100dvh);
  overflow: hidden;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .app-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(6px, 1.5vh, 10px);
  width: 100%;
  height: var(--koop-vh, 100dvh);
  min-height: 0;
  padding: max(4px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .app-shell::before,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .app-footer {
  display: none;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero {
  grid-row: 1;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.98fr);
  gap: clamp(7px, 1.4vw, 12px);
  min-height: 0;
  margin-top: 0;
  padding: clamp(8px, 1.9vh, 14px) clamp(10px, 1.8vw, 16px);
  border-width: 3px;
  box-shadow: 0 4px 0 var(--ink), 0 12px 28px rgba(0, 0, 0, 0.34);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero::before {
  inset: 6px;
  border-width: 3px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-brand {
  gap: clamp(8px, 1.6vw, 14px);
  min-width: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-emblem {
  width: clamp(44px, 11vh, 74px);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.42));
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-copy {
  gap: clamp(2px, 0.7vh, 5px);
  min-width: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-copy h1 {
  overflow: hidden;
  font-size: clamp(2rem, 11.5vh, 3.2rem);
  line-height: 0.95;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink);
  white-space: nowrap;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-copy .subtitle {
  max-width: 17rem;
  margin: 0;
  font-size: clamp(0.68rem, 2.25vh, 0.88rem);
  line-height: 1.14;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-actions {
  align-self: center;
  justify-items: stretch;
  gap: clamp(4px, 1vh, 7px);
  width: 100%;
  max-width: none;
  min-width: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 1vw, 7px);
  width: 100%;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .tool-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .user-btn {
  min-width: 0;
  min-height: clamp(34px, 8.6vh, 44px);
  padding: 0.34rem 0.5rem;
  border-width: 2px;
  font-size: clamp(0.68rem, 2.35vh, 0.88rem);
  line-height: 1.05;
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  white-space: nowrap;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .tool-btn::before,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .google-action-btn::before {
  width: clamp(18px, 5.3vh, 24px);
  height: clamp(18px, 5.3vh, 24px);
  border-width: 2px;
  font-size: clamp(0.62rem, 1.9vh, 0.78rem);
  box-shadow: 0 1px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .guest-profile-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .user-btn.is-signed-in {
  grid-column: 1 / -1;
  justify-self: end;
  width: min(100%, 390px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-mini-avatar {
  width: clamp(20px, 5.9vh, 26px);
  height: clamp(20px, 5.9vh, 26px);
  border-width: 2px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-prompt {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  font-size: clamp(0.6rem, 2.05vh, 0.76rem);
  line-height: 1.1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .invite-preview:not(.hidden) {
  grid-row: 2;
  min-height: 0;
  padding: 7px 10px;
  border-width: 3px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .home-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(6px, 1.2vh, 10px);
  grid-row: 3;
  min-height: 0;
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .home-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 10px);
  height: 100%;
  min-height: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .computer-panel {
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
  gap: clamp(7px, 1.2vw, 12px);
  min-height: clamp(72px, 18vh, 104px);
  margin-top: 0;
  padding: clamp(8px, 1.7vh, 12px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .computer-panel::before {
  inset: 6px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .computer-panel::after {
  width: clamp(68px, 17vh, 96px);
  height: clamp(68px, 17vh, 96px);
  right: clamp(12px, 2vw, 18px);
  bottom: -28px;
  border-width: 3px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .computer-play-controls {
  gap: clamp(4px, 0.9vh, 7px);
  min-width: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .bot-count-control {
  gap: clamp(4px, 0.7vw, 6px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .bot-count-option,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .computer-play-btn {
  min-height: clamp(30px, 7.5vh, 38px);
  padding: 0.3rem 0.48rem;
  border-width: 2px;
  font-size: clamp(0.58rem, 2.05vh, 0.76rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .panel {
  border-width: 3px;
  box-shadow: 0 4px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, 0.3);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .card-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: clamp(10px, 2vh, 14px);
  align-content: stretch;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .card-panel::before {
  inset: 6px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .card-panel::after {
  right: clamp(12px, 2.6vw, 20px);
  bottom: clamp(9px, 1.8vh, 16px);
  width: clamp(54px, 14vh, 78px);
  height: clamp(76px, 20vh, 106px);
  border-width: 3px;
  opacity: 0.78;
  box-shadow: 0 4px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .section-title {
  margin-bottom: clamp(6px, 1.4vh, 10px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .section-title h2 {
  font-size: clamp(1.25rem, 5.1vh, 1.9rem);
  line-height: 0.98;
  text-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .field {
  gap: clamp(3px, 0.8vh, 5px);
  margin-bottom: clamp(6px, 1.4vh, 10px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .field label {
  font-size: clamp(0.64rem, 2vh, 0.78rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .field input {
  min-height: clamp(34px, 9.1vh, 46px);
  padding: 0.4rem 0.72rem;
  border-width: 2px;
  font-size: clamp(0.82rem, 3vh, 1rem);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .large {
  align-self: start;
  min-height: clamp(34px, 9vh, 46px);
  margin-top: 0;
  padding: 0.4rem 0.75rem;
  border-width: 2px;
  font-size: clamp(0.74rem, 2.55vh, 0.95rem);
  line-height: 1;
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 1vw, 9px);
  height: 100%;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card {
  grid-template-rows: minmax(48px, 0.9fr) auto auto;
  gap: clamp(4px, 1vh, 8px);
  min-height: 0;
  padding: clamp(7px, 1.5vh, 10px);
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink), 0 10px 18px rgba(0, 0, 0, 0.28);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card::before {
  inset: 5px;
  border-width: 3px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card .section-title h2 {
  font-size: clamp(0.82rem, 3.3vh, 1.28rem);
  line-height: 0.98;
  text-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card .section-title p {
  margin-top: 0.22rem;
  font-size: clamp(0.52rem, 1.8vh, 0.68rem);
  line-height: 1.05;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-scene {
  min-height: 0;
  border-width: 2px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card-stack,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friend-card {
  width: clamp(32px, 8vh, 46px);
  height: clamp(45px, 11vh, 64px);
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card-stack::before,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card-stack::after {
  border-width: 2px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-dice {
  width: clamp(34px, 9vh, 50px);
  height: clamp(34px, 9vh, 50px);
  border-width: 2px;
  border-radius: 9px;
  box-shadow: 0 4px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-dice i {
  width: 7px;
  height: 7px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-dice i:nth-child(1) { left: 8px; top: 8px; }
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-dice i:nth-child(2) { right: 8px; top: 8px; }
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-dice i:nth-child(4) { left: 8px; bottom: 8px; }
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-dice i:nth-child(5) { right: 8px; bottom: 8px; }

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-token,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friend-token {
  width: clamp(24px, 6.5vh, 36px);
  height: clamp(36px, 9vh, 52px);
  border-width: 2px;
  box-shadow: 0 4px 0 rgba(7, 16, 24, 0.9);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-token::before,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friend-token::before {
  top: -11px;
  width: clamp(22px, 5.7vh, 32px);
  height: clamp(22px, 5.7vh, 32px);
  border-width: 2px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-phone {
  width: clamp(25px, 6.3vh, 38px);
  height: clamp(39px, 10.5vh, 56px);
  border-width: 2px;
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-globe {
  width: clamp(28px, 7vh, 42px);
  height: clamp(28px, 7vh, 42px);
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friend-crown {
  width: clamp(54px, 15vh, 84px);
  height: clamp(32px, 8vh, 48px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .online-status-pill {
  min-height: clamp(26px, 6.2vh, 34px);
  padding: 3px 6px;
  border-width: 2px;
  font-size: clamp(0.52rem, 1.8vh, 0.68rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friends-actions,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .bot-count-control {
  gap: clamp(3px, 0.6vw, 5px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friends-code-field {
  margin: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-action-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .bot-count-option {
  min-height: clamp(27px, 6.8vh, 36px);
  padding: 0.26rem 0.38rem;
  border-width: 2px;
  font-size: clamp(0.52rem, 1.9vh, 0.72rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .friends-code-field input {
  min-height: clamp(28px, 7vh, 38px);
  padding: 0.32rem 0.5rem;
  border-width: 2px;
  font-size: clamp(0.58rem, 2vh, 0.78rem);
}

body.is-mobile-device.is-mobile-landscape.is-tiny-landscape[data-screen="home"] .hero {
  grid-template-columns: minmax(0, 0.82fr) minmax(280px, 1.05fr);
  padding: 7px 9px;
}

body.is-mobile-device.is-mobile-landscape.is-tiny-landscape[data-screen="home"] .hero-copy h1 {
  font-size: clamp(1.65rem, 10.4vh, 2.35rem);
}

body.is-mobile-device.is-mobile-landscape.is-tiny-landscape[data-screen="home"] .hero-copy .subtitle {
  font-size: clamp(0.58rem, 2vh, 0.7rem);
}

body.is-mobile-device.is-mobile-landscape.is-tiny-landscape[data-screen="home"] .account-prompt {
  display: none;
}

/* End-to-end mobile and installed-app fit rules. */
body.is-mobile-device {
  min-height: var(--koop-vh, 100dvh);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body.is-mobile-device button,
body.is-mobile-device input,
body.is-mobile-device textarea {
  touch-action: manipulation;
}

body.is-mobile-device input,
body.is-mobile-device textarea {
  font-size: 16px;
}

body.is-mobile-device .toast {
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  max-width: none;
  padding: 10px 12px;
  border-width: 3px;
  box-shadow: 0 4px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, 0.32);
  font-size: 0.78rem;
  line-height: 1.2;
}

body.is-mobile-device .dialog-overlay {
  place-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

body.is-mobile-device .dialog-panel {
  width: min(100%, calc(var(--koop-vw, 100vw) - 16px));
  max-height: calc(var(--koop-vh, 100dvh) - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  padding: clamp(12px, 2.4vh, 18px);
  border-width: 3px;
  overscroll-behavior: contain;
  box-shadow: 0 5px 0 var(--ink), 0 20px 42px rgba(0, 0, 0, 0.38);
}

body.is-mobile-device .dialog-panel.wide-dialog {
  width: min(100%, calc(var(--koop-vw, 100vw) - 16px));
}

body.is-mobile-device .dialog-close {
  min-height: 34px;
  padding: 0.34rem 0.58rem;
  border-width: 2px;
  font-size: 0.72rem;
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-device .coins-inline-close {
  width: clamp(36px, 8.3vh, 44px);
  min-width: clamp(36px, 8.3vh, 44px);
  height: clamp(36px, 8.3vh, 44px);
  min-height: clamp(36px, 8.3vh, 44px);
  border-width: 2px;
  font-size: clamp(1.22rem, 3.9vh, 1.58rem);
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-device .coins-title .coin-chip,
body.is-mobile-device .coin-package .coin-chip {
  width: clamp(24px, 5.5vh, 29px);
  height: clamp(24px, 5.5vh, 29px);
  font-size: clamp(0.72rem, 2.35vh, 0.88rem);
}

body.is-mobile-device .rule-sections {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 8px;
}

body.is-mobile-device .rule-sections section,
body.is-mobile-device .settings-actions,
body.is-mobile-device .coin-packages,
body.is-mobile-device .profile-hero,
body.is-mobile-device .profile-form,
body.is-mobile-device .profile-stats,
body.is-mobile-device .profile-actions,
body.is-mobile-device .confirm-actions,
body.is-mobile-device .profile-icon-picker-dialog,
body.is-mobile-device .guide-step-card,
body.is-mobile-device .pwa-install-card {
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device .profile-dialog,
body.is-mobile-device .guide-dialog,
body.is-mobile-device .profile-icon-picker-dialog,
body.is-mobile-device .coin-packages,
body.is-mobile-device .settings-actions {
  gap: 8px;
}

body.is-mobile-device .profile-hero {
  gap: 10px;
  padding: 10px;
}

body.is-mobile-device .profile-avatar-large {
  width: clamp(52px, 14vh, 68px);
  height: clamp(52px, 14vh, 68px);
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device .profile-form,
body.is-mobile-device .profile-stats,
body.is-mobile-device .profile-actions,
body.is-mobile-device .confirm-actions,
body.is-mobile-device .profile-icon-picker-dialog,
body.is-mobile-device .pwa-install-card {
  padding: 10px;
}

body.is-mobile-device .profile-form input[type="text"],
body.is-mobile-device .profile-form input[type="url"],
body.is-mobile-device .profile-form input[type="file"] {
  min-height: 40px;
  padding: 0.55rem 0.68rem;
  border-width: 2px;
}

body.is-mobile-device .profile-icon-grid {
  grid-template-columns: repeat(auto-fit, minmax(54px, 64px));
  gap: 6px;
}

body.is-mobile-device .guest-icon-grid {
  grid-template-columns: repeat(3, minmax(54px, 64px));
}

body.is-mobile-device .profile-icon-option {
  width: 100%;
  min-height: 0;
  padding: 5px;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device .profile-icon.option {
  width: clamp(46px, 11vh, 56px);
  height: clamp(46px, 11vh, 56px);
}

body.is-mobile-device .coin-package {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px;
}

body.is-mobile-device .coin-package button,
body.is-mobile-device .settings-actions button,
body.is-mobile-device .profile-actions button,
body.is-mobile-device .confirm-actions button,
body.is-mobile-device .guide-actions button {
  min-height: 38px;
  padding: 0.42rem 0.62rem;
  border-width: 2px;
  font-size: 0.78rem;
  line-height: 1.08;
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device .guide-step-card {
  min-height: 0;
  padding: 12px 12px 12px 58px;
}

body.is-mobile-device .guide-step-card h3 {
  font-size: clamp(1rem, 3.8vh, 1.22rem);
}

body.is-mobile-device .guide-step-card p,
body.is-mobile-device .dialog-list,
body.is-mobile-device .muted,
body.is-mobile-device .settings-note {
  font-size: clamp(0.72rem, 2.4vh, 0.86rem);
  line-height: 1.28;
}

body.is-mobile-device .guide-step-number {
  left: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) {
  overflow-x: hidden;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .app-shell {
  width: 100%;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .app-shell::before {
  display: none;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .hero {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 0;
  padding: 14px;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .hero-brand {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  text-align: left;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .hero-emblem {
  width: clamp(58px, 18vw, 82px);
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .hero-copy h1 {
  font-size: clamp(2.2rem, 13vw, 3.8rem);
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .hero-copy .subtitle {
  font-size: 0.9rem;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .hero-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .guest-profile-btn,
body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .user-btn.is-signed-in {
  grid-column: 1 / -1;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .tool-btn,
body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .user-btn {
  min-width: 0;
  min-height: 42px;
  padding: 0.48rem 0.62rem;
  border-width: 2px;
  font-size: 0.82rem;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .home-grid,
body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .game-main,
body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .game-topbar {
  grid-template-columns: 1fr;
}

body.is-mobile-device.is-mobile-portrait:not(.landscape-guard-active) .card-panel {
  min-height: 188px;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) {
  width: 100%;
  height: var(--koop-vh, 100dvh);
  min-height: var(--koop-vh, 100dvh);
  overflow: hidden;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(5px, 1.3vh, 8px);
  width: 100%;
  height: var(--koop-vh, 100dvh);
  min-height: 0;
  padding: max(4px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .app-shell::before,
body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .app-footer {
  display: none;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(5px, 1.2vw, 10px);
  min-height: 0;
  margin: 0;
  padding: 5px 7px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero::before {
  inset: 4px;
  border-width: 2px;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero-brand {
  gap: 7px;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero-emblem {
  width: clamp(30px, 6.4vh, 42px);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.42));
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero-copy {
  gap: 0;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero-copy h1 {
  font-size: clamp(1rem, 4.5vh, 1.35rem);
  line-height: 1;
  text-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero-copy .subtitle,
body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .account-prompt {
  display: none;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero-actions {
  justify-items: end;
  max-width: min(58vw, 390px);
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .hero-action-row {
  flex-wrap: nowrap;
  gap: 4px;
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .tool-btn,
body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .user-btn {
  min-width: 0;
  min-height: clamp(27px, 7.2vh, 34px);
  padding: 0.28rem 0.44rem;
  border-width: 2px;
  font-size: clamp(0.58rem, 2.35vh, 0.72rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device.is-mobile-landscape:is([data-screen="lobby"], [data-screen="score"]) .tool-btn::before {
  width: clamp(16px, 4.8vh, 21px);
  height: clamp(16px, 4.8vh, 21px);
  border-width: 1px;
  font-size: 0.62rem;
  box-shadow: 0 1px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(5px, 1.2vh, 8px);
  height: 100%;
  min-height: 0;
  padding: clamp(7px, 1.7vh, 11px);
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
  overflow: hidden;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-room-badge {
  min-width: clamp(150px, 30vw, 240px);
  padding: 5px 10px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .room-badge span,
body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .room-badge strong {
  line-height: 1;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .room-badge strong {
  font-size: clamp(1rem, 4.4vh, 1.35rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .section-title {
  margin-bottom: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .section-title h2 {
  font-size: clamp(1rem, 4vh, 1.35rem);
  text-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] #hostHint {
  margin-top: 2px;
  font-size: clamp(0.58rem, 2vh, 0.72rem);
  line-height: 1.1;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-players {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 5px;
  min-height: 0;
  padding: 5px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player .player-avatar {
  width: clamp(28px, 7.5vh, 36px);
  height: clamp(28px, 7.5vh, 36px);
  border-width: 2px;
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 0.62rem;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-avatar {
  width: clamp(28px, 7.5vh, 36px);
  height: clamp(28px, 7.5vh, 36px);
  border-width: 2px;
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-avatar .profile-icon.mini {
  width: clamp(24px, 6.3vh, 31px);
  height: clamp(24px, 6.3vh, 31px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player-main {
  gap: 3px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player strong {
  font-size: clamp(0.68rem, 2.35vh, 0.86rem);
  line-height: 1;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-coin-box {
  min-height: 18px;
  padding: 1px 6px 2px;
  border-width: 1px;
  gap: 4px;
  font-size: clamp(0.5rem, 1.65vh, 0.62rem);
  box-shadow: 0 1px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-coin-box .coin-chip {
  width: 16px;
  height: 16px;
  border-width: 1px;
  font-size: 0.48rem;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player .badge {
  min-height: 17px;
  padding: 0.07rem 0.24rem;
  border-width: 1px;
  font-size: clamp(0.45rem, 1.55vh, 0.54rem);
  box-shadow: 0 1px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .seat-medal {
  width: clamp(24px, 6.2vh, 30px);
  height: clamp(24px, 6.2vh, 30px);
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 0.72rem;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-primary-actions {
  display: flex;
  gap: 6px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-secondary-actions {
  display: flex;
  gap: 6px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-secondary-actions > button,
body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-primary-actions > button {
  min-width: clamp(78px, 17vw, 128px);
  min-height: clamp(29px, 7.6vh, 36px);
  padding: 0.3rem 0.5rem;
  border-width: 2px;
  font-size: clamp(0.58rem, 2vh, 0.76rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape[data-screen="lobby"] .lobby-players {
  grid-template-columns: 1fr;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .score-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(5px, 1.2vh, 8px);
  height: 100%;
  min-height: 0;
  padding: clamp(7px, 1.7vh, 11px);
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
  overflow: hidden;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .score-panel .section-title {
  margin-bottom: 0;
  text-align: center;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .score-panel .section-title h2 {
  font-size: clamp(1rem, 4vh, 1.35rem);
  text-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .winner-banner {
  margin-bottom: 0;
  padding: 6px 9px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: clamp(0.72rem, 2.7vh, 0.95rem);
  line-height: 1.1;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .score-table {
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .score-row {
  grid-template-columns: minmax(76px, 1.15fr) 42px minmax(116px, 1.45fr) 48px 54px;
  gap: 5px;
  min-height: 0;
  padding: 5px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: clamp(0.5rem, 1.8vh, 0.66rem);
  line-height: 1.08;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .score-row.header {
  position: sticky;
  top: 0;
  z-index: 2;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .score-cards {
  gap: 3px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .mini-card {
  min-width: clamp(20px, 5.4vh, 27px);
  min-height: clamp(26px, 7vh, 34px);
  padding: 2px;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--ink);
  font-size: clamp(0.48rem, 1.7vh, 0.62rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .lobby-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="score"] .lobby-actions button {
  min-width: 0;
  min-height: clamp(29px, 7.6vh, 36px);
  padding: 0.3rem 0.5rem;
  border-width: 2px;
  font-size: clamp(0.56rem, 2vh, 0.72rem);
  line-height: 1;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.is-mobile-device.is-mobile-landscape.is-tiny-landscape[data-screen="score"] .score-row {
  grid-template-columns: minmax(64px, 1fr) 32px minmax(88px, 1.15fr) 42px 46px;
}

/* Compact alignment pass for larger mobile/tablet landscape app views. */
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .hero-action-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: clamp(3px, 0.7vw, 7px);
  min-width: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .guest-profile-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .user-btn.is-signed-in {
  flex: 1 1 auto;
  min-width: 0;
  max-width: clamp(152px, 31vw, 250px);
  overflow: hidden;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .tool-btn.icon-only {
  flex: 0 0 clamp(36px, 8.4vh, 48px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .google-signin-btn {
  flex: 0 1 clamp(86px, 18vw, 150px);
  min-width: 78px;
  overflow: hidden;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .user-btn.is-signed-in {
  flex-basis: clamp(160px, 34vw, 260px);
}

body.is-mobile-device.is-mobile-landscape.is-guest-account[data-screen="home"] .google-signin-btn,
body.is-mobile-device.is-mobile-landscape.is-guest-account[data-screen="home"] .guest-profile-btn {
  flex: 1 1 0;
  max-width: none;
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape.is-guest-account[data-screen="home"] .google-signin-btn,
body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape.is-guest-account[data-screen="home"] .guest-profile-btn,
body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape[data-screen="home"] .user-btn.is-signed-in {
  gap: 4px;
  padding-inline: 0.22rem;
  font-size: clamp(0.55rem, 2vh, 0.72rem);
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape[data-screen="home"] .user-btn.is-signed-in {
  flex-basis: clamp(140px, 32vw, 220px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .google-signin-btn::before {
  flex: 0 0 auto;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-button-name {
  max-width: min(18vw, 110px);
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape[data-screen="home"] .account-button-name {
  max-width: min(12vw, 68px);
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape[data-screen="home"] .account-divider {
  display: none;
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape.is-guest-account[data-screen="home"] .guest-profile-btn .account-mini-avatar {
  width: clamp(18px, 5.1vh, 23px);
  height: clamp(18px, 5.1vh, 23px);
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape.is-guest-account[data-screen="home"] .guest-profile-btn .account-button-name {
  max-width: min(10vw, 54px);
}

body.is-mobile-device.is-mobile-landscape.is-very-narrow-landscape.is-guest-account[data-screen="home"] .guest-profile-btn .coin-chip {
  width: 18px;
  height: 18px;
  margin-right: 2px;
  font-size: 0.58rem;
}

@media (max-width: 900px) and (orientation: landscape) {
  body[data-screen="home"] .hero-action-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: clamp(3px, 0.7vw, 7px);
    min-width: 0;
  }

  body[data-screen="home"] .tool-btn.icon-only {
    flex: 0 0 clamp(36px, 8.4vh, 48px);
  }

  body[data-screen="home"] .google-signin-btn {
    flex: 0 1 clamp(86px, 18vw, 150px);
    min-width: 78px;
    overflow: hidden;
  }

  body[data-screen="home"] .guest-profile-btn,
  body[data-screen="home"] .user-btn.is-signed-in {
    flex: 1 1 auto;
    min-width: 0;
    max-width: clamp(145px, 31vw, 245px);
    overflow: hidden;
  }

  body[data-screen="home"] .account-button-name {
    max-width: min(14vw, 82px);
  }

  body[data-screen="home"] .account-divider {
    display: none;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .card-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .card-panel .field {
  align-self: start;
  align-content: start;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .card-panel .large {
  align-self: start;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .field input {
  height: clamp(34px, 7.6vh, 44px);
  max-height: 46px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .card-panel::after {
  width: clamp(42px, 10.5vh, 62px);
  height: clamp(60px, 15vh, 86px);
  opacity: 0.45;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-players {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 380px));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player {
  display: flex;
  flex-wrap: wrap;
  align-self: start;
  align-items: center;
  align-content: center;
  min-height: clamp(44px, 10vh, 58px);
  max-height: none;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player strong {
  flex: none;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player-main {
  flex: 1 1 120px;
  min-width: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player .badge.coin {
  display: none;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player .badge,
body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-player .seat-medal {
  flex: 0 0 auto;
}

body.is-mobile-device.is-mobile-landscape .dialog-panel {
  width: min(560px, calc(var(--koop-vw, 100vw) - 18px));
  max-height: calc(var(--koop-vh, 100dvh) - 18px);
  padding: clamp(8px, 1.7vh, 12px);
  border-width: 2px;
  font-size: clamp(0.68rem, 2.05vh, 0.8rem);
  box-shadow: 0 3px 0 var(--ink), 0 15px 34px rgba(0, 0, 0, 0.36);
}

body.is-mobile-device.is-mobile-landscape .dialog-panel.wide-dialog {
  width: min(760px, calc(var(--koop-vw, 100vw) - 18px));
}

body.is-mobile-device.is-mobile-landscape .dialog-panel .section-title {
  margin-bottom: 7px;
}

body.is-mobile-device.is-mobile-landscape .dialog-panel .section-title h2 {
  font-size: clamp(0.98rem, 3.7vh, 1.28rem);
  line-height: 1;
  text-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape .dialog-panel .section-title p {
  margin-top: 3px;
  font-size: clamp(0.58rem, 1.85vh, 0.72rem);
  line-height: 1.16;
}

body.is-mobile-device.is-mobile-landscape .dialog-close {
  min-height: 28px;
  padding: 0.25rem 0.46rem;
  font-size: 0.62rem;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-prompt-panel .dialog-close {
  top: clamp(8px, 1.7vh, 12px);
  right: clamp(8px, 1.7vh, 12px);
}

body.is-mobile-device.is-mobile-landscape .coins-title {
  gap: 8px;
}

body.is-mobile-device.is-mobile-landscape .coins-inline-close {
  width: clamp(32px, 7.8vh, 38px);
  min-width: clamp(32px, 7.8vh, 38px);
  height: clamp(32px, 7.8vh, 38px);
  min-height: clamp(32px, 7.8vh, 38px);
  font-size: clamp(1.08rem, 3.55vh, 1.32rem);
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-device.is-mobile-landscape .coins-title .coin-chip,
body.is-mobile-device.is-mobile-landscape .coin-package .coin-chip {
  width: clamp(22px, 5.6vh, 27px);
  height: clamp(22px, 5.6vh, 27px);
  margin-right: 5px;
  font-size: clamp(0.68rem, 2.25vh, 0.82rem);
}

body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-prompt-panel .guide-title {
  min-height: 34px;
  padding-right: 82px;
  margin-bottom: 6px;
}

body.is-mobile-device.is-mobile-landscape .rule-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body.is-mobile-device.is-mobile-landscape .rule-sections section,
body.is-mobile-device.is-mobile-landscape .settings-actions,
body.is-mobile-device.is-mobile-landscape .coin-packages,
body.is-mobile-device.is-mobile-landscape .profile-hero,
body.is-mobile-device.is-mobile-landscape .profile-form,
body.is-mobile-device.is-mobile-landscape .profile-stats,
body.is-mobile-device.is-mobile-landscape .profile-actions,
body.is-mobile-device.is-mobile-landscape .confirm-actions,
body.is-mobile-device.is-mobile-landscape .profile-icon-picker-dialog,
body.is-mobile-device.is-mobile-landscape .guide-step-card,
body.is-mobile-device.is-mobile-landscape .pwa-install-card {
  padding: 7px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape .profile-dialog,
body.is-mobile-device.is-mobile-landscape .guide-dialog,
body.is-mobile-device.is-mobile-landscape .profile-icon-picker-dialog,
body.is-mobile-device.is-mobile-landscape .coin-packages,
body.is-mobile-device.is-mobile-landscape .settings-actions {
  gap: 7px;
}

body.is-mobile-device.is-mobile-landscape .profile-hero {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}

body.is-mobile-device.is-mobile-landscape .profile-avatar-large {
  width: clamp(42px, 11vh, 56px);
  height: clamp(42px, 11vh, 56px);
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 1rem;
}

body.is-mobile-device.is-mobile-landscape .profile-hero strong {
  font-size: clamp(0.84rem, 2.7vh, 1.05rem);
}

body.is-mobile-device.is-mobile-landscape .profile-hero span,
body.is-mobile-device.is-mobile-landscape .profile-form small,
body.is-mobile-device.is-mobile-landscape .profile-stat span,
body.is-mobile-device.is-mobile-landscape .setting-row small,
body.is-mobile-device.is-mobile-landscape .coin-package small {
  font-size: clamp(0.56rem, 1.75vh, 0.68rem);
  line-height: 1.14;
}

body.is-mobile-device.is-mobile-landscape .profile-form {
  gap: 5px;
}

body.is-mobile-device.is-mobile-landscape .profile-form input[type="text"],
body.is-mobile-device.is-mobile-landscape .profile-form input[type="url"],
body.is-mobile-device.is-mobile-landscape .profile-form input[type="file"] {
  min-height: 32px;
  padding: 0.34rem 0.52rem;
  border-width: 2px;
  font-size: 16px;
}

body.is-mobile-device.is-mobile-landscape .profile-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.is-mobile-device.is-mobile-landscape .profile-stat {
  gap: 2px;
  padding: 5px;
}

body.is-mobile-device.is-mobile-landscape .profile-stat strong {
  font-size: clamp(0.72rem, 2.25vh, 0.9rem);
}

body.is-mobile-device.is-mobile-landscape .profile-actions,
body.is-mobile-device.is-mobile-landscape .confirm-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 6px;
}

body.is-mobile-device.is-mobile-landscape .profile-actions button,
body.is-mobile-device.is-mobile-landscape .confirm-actions button,
body.is-mobile-device.is-mobile-landscape .settings-actions button,
body.is-mobile-device.is-mobile-landscape .guide-actions button {
  min-height: 30px;
  padding: 0.3rem 0.5rem;
  border-width: 2px;
  font-size: clamp(0.58rem, 1.9vh, 0.72rem);
  line-height: 1.05;
  box-shadow: 0 2px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-device.is-mobile-landscape .setting-row {
  gap: 8px;
  padding: 7px;
}

body.is-mobile-device.is-mobile-landscape .setting-row .toggle-input {
  width: 46px;
  height: 25px;
}

body.is-mobile-device.is-mobile-landscape .setting-row .toggle-input::before {
  width: 18px;
  height: 18px;
}

body.is-mobile-device.is-mobile-landscape .setting-row .toggle-input:checked::before {
  transform: translateX(20px);
}

body.is-mobile-device.is-mobile-landscape .profile-icon-grid {
  grid-template-columns: repeat(6, 52px);
  gap: 5px;
}

body.is-mobile-device.is-mobile-landscape .guest-icon-grid {
  grid-template-columns: repeat(3, 52px);
}

body.is-mobile-device.is-mobile-landscape .profile-icon-option {
  width: 52px;
  min-height: 52px;
  padding: 4px;
}

body.is-mobile-device.is-mobile-landscape .profile-icon.option {
  width: 42px;
  height: 42px;
}

body.is-mobile-device.is-mobile-landscape .coin-package {
  min-height: 34px;
  padding: 6px;
}

body.is-mobile-device.is-mobile-landscape .coin-package strong {
  font-size: clamp(0.72rem, 2.3vh, 0.9rem);
}

/* Compact header/install/guide refinements. */
body.is-mobile-device .tool-btn.icon-only {
  width: clamp(38px, 9vh, 48px);
  min-width: clamp(38px, 9vh, 48px);
  padding: 0;
}

body.is-mobile-device .tool-btn.icon-only::before {
  width: clamp(20px, 5.5vh, 26px);
  height: clamp(20px, 5.5vh, 26px);
}

body.is-mobile-device.is-mobile-landscape .tutorial-choice-dialog {
  gap: 7px;
  padding: 7px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

body.is-mobile-device.is-mobile-landscape .tutorial-choice-dialog p {
  font-size: clamp(0.7rem, 2.15vh, 0.84rem);
  line-height: 1.22;
}

body.is-mobile-device.is-mobile-landscape .guide-repeat-row {
  padding: 7px;
  border-width: 1px;
}

/* Account action drawer. */
.hero-actions {
  position: relative;
}

.account-menu-trigger {
  position: relative;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 58px;
  min-width: 58px;
  aspect-ratio: 1;
  padding: 0;
  color: #3a1700;
}

.account-menu-trigger .account-mini-avatar,
.profile-menu-btn .account-mini-avatar {
  width: 30px;
  height: 30px;
  margin: 0;
}

.account-action-row {
  position: relative;
  z-index: 4;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
  width: max-content !important;
  min-width: 0;
  padding: 0;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

body.account-menu-open .account-action-row {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

.account-menu-trigger,
.close-menu-btn,
body.account-menu-open .account-menu-trigger {
  pointer-events: none;
  opacity: 0;
  transform: none;
}

.account-action-row .tool-btn,
.account-action-row .user-btn,
.account-action-row .icon-only {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  aspect-ratio: 1;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}

.close-menu-btn::before {
  content: "X";
  font-size: 1.08rem;
  line-height: 1;
}

.account-action-row #settingsBtn::before {
  font-size: 1.15rem;
  line-height: 1;
}

.coin-menu-btn::before {
  content: "K";
  color: #6e3900;
  background: radial-gradient(circle at 36% 28%, #fff9b8 0 18%, #ffd332 19% 62%, #e88c10 63% 100%);
}

.profile-menu-btn::before {
  display: none;
}

.profile-menu-btn {
  color: #3a1700;
}

.account-action-row .google-signin-btn::before {
  margin: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-menu-trigger {
  width: clamp(38px, 9vh, 48px);
  min-width: clamp(38px, 9vh, 48px);
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-menu-trigger .account-mini-avatar,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .profile-menu-btn .account-mini-avatar {
  width: clamp(20px, 5.5vh, 26px);
  height: clamp(20px, 5.5vh, 26px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row {
  gap: clamp(3px, 0.7vw, 6px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .tool-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .user-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .icon-only {
  flex-basis: clamp(38px, 9vh, 48px) !important;
  width: clamp(38px, 9vh, 48px) !important;
  min-width: clamp(38px, 9vh, 48px) !important;
  max-width: clamp(38px, 9vh, 48px) !important;
  min-height: clamp(34px, 8.6vh, 44px);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-prompt {
  text-align: right;
}

@media (max-width: 900px) and (orientation: landscape) {
  body[data-screen="home"] .account-action-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
  }

  body[data-screen="home"] .account-action-row .tool-btn,
  body[data-screen="home"] .account-action-row .user-btn,
  body[data-screen="home"] .account-action-row .icon-only {
    flex: 0 0 clamp(38px, 9vh, 48px) !important;
    width: clamp(38px, 9vh, 48px) !important;
    min-width: clamp(38px, 9vh, 48px) !important;
    max-width: clamp(38px, 9vh, 48px) !important;
  }
}

/* Standalone account drawer icons. */
.account-menu-trigger,
.account-action-row .tool-btn,
.account-action-row .user-btn,
.account-action-row .icon-only {
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.account-menu-trigger {
  width: 46px;
  min-width: 46px;
}

.account-action-row {
  align-items: center;
  gap: 7px;
}

.account-action-row .tool-btn,
.account-action-row .user-btn,
.account-action-row .icon-only {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  overflow: visible;
}

.account-menu-trigger .account-mini-avatar,
.profile-menu-btn .account-mini-avatar,
.account-action-row .tool-btn::before {
  width: 34px;
  height: 34px;
  border-width: 2px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.54), 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.account-menu-trigger .account-mini-avatar {
  width: 36px;
  height: 36px;
}

.account-menu-trigger:hover,
.account-action-row button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.account-menu-trigger:active,
.account-action-row button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.account-menu-trigger:focus-visible,
.account-action-row button:focus-visible {
  outline: 3px solid rgba(247, 201, 72, 0.9);
  outline-offset: 3px;
}

.account-action-row #googleSignInBtn {
  position: relative;
}

.account-action-row #googleSignInBtn::before {
  content: "";
  margin: 0;
  background: linear-gradient(#ffffff, #d9f2ef);
}

.account-action-row #googleSignInBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M6.5 29.6c.7-6.7 4.4-10.4 9.1-10.4 4 0 7.1 2.6 8.5 7.2.5 1.6-.5 3.2-2.2 3.2H6.5Z' fill='%2312385a'/%3E%3Ccircle cx='15.6' cy='11.1' r='6.5' fill='%2312385a'/%3E%3Cpath d='M22.1 10.5h5.2l-1.8-1.8 2.5-2.5 6.5 6.5-6.5 6.5-2.5-2.5 1.8-1.8h-5.2v-4.4Z' fill='%231bd15b' stroke='%230b2d46' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M23.1 14.9h4.2l-1.8 1.8 2.5 2.5 6.5-6.5H23.1v2.2Z' fill='%230e9d43' opacity='.35'/%3E%3C/svg%3E");
  transform: translate(-50%, -50%);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-menu-trigger,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .tool-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .user-btn,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .icon-only {
  flex: 0 0 clamp(34px, 8vh, 42px) !important;
  width: clamp(34px, 8vh, 42px) !important;
  min-width: clamp(34px, 8vh, 42px) !important;
  max-width: clamp(34px, 8vh, 42px) !important;
  min-height: clamp(34px, 8vh, 42px);
  border: 0;
  box-shadow: none;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-menu-trigger .account-mini-avatar,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .profile-menu-btn .account-mini-avatar,
body.is-mobile-device.is-mobile-landscape[data-screen="home"] .account-action-row .tool-btn::before {
  width: clamp(26px, 6.2vh, 32px);
  height: clamp(26px, 6.2vh, 32px);
}

@media (max-width: 900px) and (orientation: landscape) {
  body[data-screen="home"] .account-menu-trigger,
  body[data-screen="home"] .account-action-row .tool-btn,
  body[data-screen="home"] .account-action-row .user-btn,
  body[data-screen="home"] .account-action-row .icon-only {
    flex: 0 0 clamp(34px, 8vh, 42px) !important;
    width: clamp(34px, 8vh, 42px) !important;
    min-width: clamp(34px, 8vh, 42px) !important;
    max-width: clamp(34px, 8vh, 42px) !important;
    min-height: clamp(34px, 8vh, 42px);
    border: 0;
    box-shadow: none;
  }

  body[data-screen="home"] .account-action-row {
    gap: clamp(3px, 0.7vw, 6px);
  }

  body[data-screen="home"] .account-menu-trigger .account-mini-avatar,
  body[data-screen="home"] .profile-menu-btn .account-mini-avatar,
  body[data-screen="home"] .account-action-row .tool-btn::before {
    width: clamp(26px, 6.2vh, 32px);
    height: clamp(26px, 6.2vh, 32px);
  }

  body[data-screen="home"] .account-action-row #googleSignInBtn::after {
    width: clamp(22px, 5.8vh, 27px);
    height: clamp(22px, 5.8vh, 27px);
  }
}

/* Home UI upgrade pass: compact coins, live mode badges, fixed bot play, and footer placement. */
body[data-screen="home"] .app-shell {
  min-height: calc(var(--koop-vh, 100vh) - 96px);
  margin-bottom: 76px;
  padding-bottom: 16px;
  overflow: visible;
}

body[data-screen="home"] .app-footer {
  position: absolute;
  left: 26px;
  bottom: -67px;
  z-index: 3;
  width: max-content;
  margin: 0;
}

body[data-screen="home"] .install-app-btn {
  min-width: 268px;
  min-height: 54px;
  border-radius: 6px;
}

body[data-screen="home"] .account-action-row {
  align-items: center;
  gap: 12px;
}

body[data-screen="home"] .account-action-row .tool-btn:not(.coin-menu-btn) {
  flex: 0 0 50px !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  min-height: 50px;
}

body[data-screen="home"] .account-action-row .tool-btn:not(.coin-menu-btn)::before {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

body[data-screen="home"] #settingsBtn::before {
  content: "\2699";
}

body[data-screen="home"] .coin-menu-btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 122px !important;
  max-width: 170px !important;
  min-height: 50px !important;
  padding: 0.42rem 0.82rem !important;
  border-radius: 18px !important;
  gap: 8px;
}

body[data-screen="home"] .coin-menu-btn .coin-chip {
  width: 26px;
  height: 26px;
  margin-right: 0;
  font-size: 0.92rem;
}

body[data-screen="home"] .coin-menu-value {
  min-width: 48px;
  text-align: right;
  font-size: 0.98rem;
  line-height: 1;
}

.coin-chip {
  color: #5d3600;
  font-size: 0.86rem;
}

body[data-screen="home"] .mode-card {
  grid-template-rows: auto minmax(118px, auto) minmax(74px, auto) auto;
  align-content: stretch;
  padding-bottom: 0;
}

body[data-screen="home"] .mode-live-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body[data-screen="home"] .mode-live-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.26) 44%, transparent 56% 100%);
  transform: translateX(-120%);
  animation: badgeSweep 3.4s ease-in-out infinite;
}

body[data-screen="home"] .mode-live-icon span {
  position: relative;
  z-index: 2;
}

.mode-motion {
  position: absolute;
  inset: 8px 12px;
  z-index: 1;
  pointer-events: none;
}

.mode-motion i {
  position: absolute;
  display: block;
}

.smart-bot-motion i {
  width: 24px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 5px;
  background: linear-gradient(#fff7d4, #efd998);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
  animation: homeCardFloat 2.8s ease-in-out infinite;
}

.smart-bot-motion i:nth-child(1) {
  left: 8%;
  top: 18%;
  transform: rotate(-16deg);
}

.smart-bot-motion i:nth-child(2) {
  right: 11%;
  top: 16%;
  transform: rotate(14deg);
  animation-delay: 0.35s;
}

.smart-bot-motion i:nth-child(3) {
  left: 48%;
  bottom: 5%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf2 0 24%, #f6bd21 25% 64%, #b36a00 65% 100%);
  animation: homePulse 1.65s ease-in-out infinite;
}

.live-match-motion i {
  left: 14%;
  top: 18%;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(216, 245, 255, 0.92);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 34%, #34f5a1, #167ae8 62%, #093d87);
  animation: homeOrbit 3.2s linear infinite;
}

.live-match-motion i:nth-child(2) {
  left: auto;
  right: 16%;
  top: 28%;
  width: 14px;
  height: 14px;
  border: 0;
  background: #45ff78;
  box-shadow: 0 0 0 7px rgba(69, 255, 120, 0.16);
  animation: homePulse 1.4s ease-in-out infinite;
}

.live-match-motion i:nth-child(3) {
  left: 38%;
  bottom: 10%;
  width: 54px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  animation: homeSignal 2.2s ease-in-out infinite;
}

.host-room-motion i {
  left: 10%;
  top: 18%;
  width: 30px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 5px;
  background: linear-gradient(135deg, #fff9d8 0 48%, #f6bd21 49% 100%);
  transform: rotate(-8deg);
  animation: homeCardFloat 2.6s ease-in-out infinite;
}

.host-room-motion i:nth-child(2) {
  left: auto;
  right: 12%;
  top: 16%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff7ad, #f6bd21 58%, #b45113);
  animation: homePulse 1.7s ease-in-out infinite;
}

.host-room-motion i:nth-child(3) {
  left: 43%;
  bottom: 7%;
  width: 42px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  animation: homeSignal 2s ease-in-out infinite;
}

.join-code-motion i {
  left: 12%;
  top: 21%;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: #fffef0;
  box-shadow:
    21px 0 0 rgba(255, 255, 255, 0.86),
    42px 0 0 rgba(255, 255, 255, 0.72),
    21px 21px 0 rgba(255, 255, 255, 0.62);
  animation: homeCodeBlink 1.8s steps(2, end) infinite;
}

.join-code-motion i:nth-child(2) {
  left: auto;
  right: 14%;
  top: 24%;
  width: 24px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 5px;
  background: linear-gradient(#fff8da, #e8d6a5);
  transform: rotate(13deg);
  animation: homeCardFloat 2.7s ease-in-out infinite reverse;
}

.join-code-motion i:nth-child(3) {
  left: 46%;
  bottom: 9%;
  width: 28px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  animation: homeSignal 2.4s ease-in-out infinite;
}

body[data-screen="home"] .bot-fixed-pill {
  display: inline-flex;
  grid-template-columns: none;
  justify-content: center;
  width: min(220px, 100%);
  min-height: 46px;
  padding: 0.48rem 1rem;
  border: 1px solid rgba(246, 189, 33, 0.44);
  background: rgba(0, 12, 8, 0.46);
}

body[data-screen="home"] .bot-fixed-pill strong {
  min-width: 0;
  color: #fff2a6;
  font-size: 0.98rem;
  white-space: nowrap;
}

body[data-screen="home"] .mode-card-control.mode-info-pill {
  min-height: 42px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(var(--mode-rgb), 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(0, 10, 7, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 18px rgba(var(--mode-rgb), 0.08);
  color: rgba(248, 255, 247, 0.82);
}

body[data-screen="home"] .mode-card-control.mode-info-pill strong {
  color: rgba(248, 255, 247, 0.9);
}

body[data-screen="home"] .online-status-pill.mode-info-pill span {
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 3px rgba(36, 240, 97, 0.1),
    0 0 11px rgba(36, 240, 97, 0.56);
}

body[data-screen="home"] .friends-code-field.mode-input-control {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-screen="home"] .friends-code-field.mode-input-control::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 2px;
  height: 22px;
  border-radius: 999px;
  background: rgba(240, 255, 240, 0.72);
  transform: translateY(-50%);
  animation: inputCaretBlink 1.15s steps(2, end) infinite;
  pointer-events: none;
}

body[data-screen="home"] .friends-code-field.mode-input-control input {
  border: 1px solid rgba(165, 255, 187, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 52%),
    rgba(0, 18, 10, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 5px rgba(var(--mode-rgb), 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22);
  color: #ffffff;
  cursor: text;
}

body[data-screen="home"] .friends-code-field.mode-input-control input:focus {
  border-color: rgba(199, 255, 214, 0.98);
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 5px rgba(var(--mode-rgb), 0.18),
    0 0 22px rgba(var(--mode-rgb), 0.22);
}

body[data-screen="home"] .friends-code-field.mode-input-control input::placeholder {
  color: rgba(248, 255, 247, 0.72);
}

body[data-screen="home"] .mode-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(240px, 100%);
  min-height: 58px;
  padding: 0.7rem 1.1rem;
  border-radius: 18px 18px 0 0;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}

@keyframes badgeSweep {
  0%, 45% { transform: translateX(-130%); }
  78%, 100% { transform: translateX(130%); }
}

@keyframes inputCaretBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0.22; }
}

@keyframes homeCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes homePulse {
  0%, 100% { scale: 0.92; opacity: 0.7; }
  50% { scale: 1.12; opacity: 1; }
}

@keyframes homeOrbit {
  0% { rotate: 0deg; translate: 0 0; }
  50% { translate: 0 -5px; }
  100% { rotate: 360deg; translate: 0 0; }
}

@keyframes homeSignal {
  0%, 100% { opacity: 0.34; scale: 0.92 1; }
  50% { opacity: 0.82; scale: 1.08 1; }
}

@keyframes homeCodeBlink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (max-width: 1180px) {
  body[data-screen="home"] .app-shell {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  body[data-screen="home"] .app-footer {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 10px auto 0;
  }

  body[data-screen="home"] .app-shell {
    margin-bottom: 0;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .app-shell {
  margin-bottom: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-card {
  grid-template-rows: minmax(42px, auto) minmax(48px, auto) minmax(30px, auto) auto;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-live-icon {
  width: min(152px, 92%);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-motion {
  inset: 5px 8px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .bot-fixed-pill {
  min-height: clamp(26px, 6.4vh, 34px);
  padding: 3px 7px;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .bot-fixed-pill strong {
  font-size: clamp(0.5rem, 1.75vh, 0.68rem);
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .mode-action-btn {
  width: min(160px, 100%);
  min-height: clamp(30px, 7.2vh, 38px);
  padding: 0.3rem 0.45rem;
  white-space: nowrap;
}

/* Home refinement: true 16:9 frame, visual mode scenes, and uniform card geometry. */
body[data-screen="home"] {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: var(--koop-vh, 100vh);
  padding-top: 14px;
}

body[data-screen="home"] .app-shell {
  width: var(--home-frame-width, min(1450px, calc(100vw - 24px))) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  display: grid !important;
  grid-template-rows: minmax(150px, 31%) minmax(0, 1fr);
  gap: clamp(8px, 1vw, 16px);
  margin: 0 auto 84px !important;
  padding: clamp(12px, 1.35vw, 22px) clamp(16px, 1.8vw, 28px) clamp(14px, 1.35vw, 22px) !important;
}

body[data-screen="home"] .hero {
  min-height: 0 !important;
  height: 100%;
  padding: clamp(8px, 1vw, 14px) 4px 0;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
}

body[data-screen="home"] .hero-emblem {
  width: clamp(170px, 18.5vw, 286px);
}

body[data-screen="home"] .home-panel {
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: clamp(8px, 1vw, 16px) 2px clamp(18px, 2vw, 34px);
}

body[data-screen="home"] .mode-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  height: 100%;
  min-height: 0;
  gap: clamp(14px, 1.7vw, 28px);
  align-items: stretch;
}

body[data-screen="home"] .mode-card {
  grid-template-rows: clamp(86px, 8.2vw, 120px) minmax(100px, 1fr) clamp(46px, 4vw, 54px) clamp(54px, 4.5vw, 62px);
  gap: clamp(10px, 1vw, 16px);
  min-height: 0 !important;
  height: 100%;
  padding: clamp(16px, 1.7vw, 28px) clamp(16px, 1.8vw, 28px) 0;
}

body[data-screen="home"] .mode-live-icon {
  width: min(220px, 88%);
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: clamp(18px, 1.9vw, 26px);
}

body[data-screen="home"] .mode-live-icon span {
  display: none;
}

body[data-screen="home"] .mode-live-icon::after {
  content: "";
  position: absolute;
  inset: 9px 12px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), transparent 58%);
  filter: blur(2px);
}

body[data-screen="home"] .mode-motion {
  inset: 0;
  z-index: 2;
}

body[data-screen="home"] .mode-motion i,
body[data-screen="home"] .mode-motion i::before,
body[data-screen="home"] .mode-motion i::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

body[data-screen="home"] .smart-bot-motion i:nth-child(1) {
  left: 50%;
  top: 50%;
  width: 54px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  background: linear-gradient(#fff9cc, #f1ba19 52%, #aa6400);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -45%);
  animation: botHover 2.5s ease-in-out infinite;
}

body[data-screen="home"] .smart-bot-motion i:nth-child(1)::before {
  left: 12px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #072019;
  box-shadow: 22px 0 0 #072019;
  animation: botBlink 3.2s steps(2, end) infinite;
}

body[data-screen="home"] .smart-bot-motion i:nth-child(1)::after {
  left: 50%;
  top: -17px;
  width: 4px;
  height: 15px;
  border-radius: 4px;
  background: #fff9cc;
  box-shadow: 0 -7px 0 4px #3aff74;
  transform: translateX(-50%);
}

body[data-screen="home"] .smart-bot-motion i:nth-child(2) {
  right: 11%;
  bottom: 15%;
  width: 32px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 7px;
  background: linear-gradient(135deg, #fff9e4 0 58%, #f6bd21 59% 100%);
  box-shadow: -24px -8px 0 -4px #f8ead0, 0 6px 0 rgba(0, 0, 0, 0.24);
  transform: rotate(15deg);
  animation: cardFan 2.8s ease-in-out infinite;
}

body[data-screen="home"] .smart-bot-motion i:nth-child(3) {
  left: 14%;
  top: 20%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #56ff7b;
  box-shadow: 0 0 0 8px rgba(86, 255, 123, 0.16), 44px 42px 0 -2px rgba(255, 255, 255, 0.78);
  animation: homePulse 1.55s ease-in-out infinite;
}

body[data-screen="home"] .live-match-motion i:nth-child(1) {
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border: 4px solid rgba(225, 250, 255, 0.92);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.52) 48% 52%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(255, 255, 255, 0.46) 48% 52%, transparent 55%),
    radial-gradient(circle at 34% 36%, #44ff8d, #1489e7 58%, #0b397c 100%);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.26);
  transform: translate(-50%, -50%);
  animation: globeSpin 4.2s linear infinite;
}

body[data-screen="home"] .live-match-motion i:nth-child(2) {
  left: 17%;
  top: 28%;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: linear-gradient(#ffdfb7, #bd6c27);
  box-shadow: 92px 20px 0 -2px #ffdfb7, 0 5px 0 rgba(0, 0, 0, 0.22);
  animation: playerPing 2.2s ease-in-out infinite;
}

body[data-screen="home"] .live-match-motion i:nth-child(3) {
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  border: 3px solid rgba(93, 255, 132, 0.58);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: signalRing 2.1s ease-out infinite;
}

body[data-screen="home"] .host-room-motion i:nth-child(1) {
  left: 18%;
  top: 24%;
  width: 54px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff5cf 0 50%, #f6bd21 51% 100%);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.24);
  transform: rotate(-8deg);
  animation: inviteFloat 2.8s ease-in-out infinite;
}

body[data-screen="home"] .host-room-motion i:nth-child(1)::before {
  left: 7px;
  top: 9px;
  width: 35px;
  height: 6px;
  border-radius: 8px;
  background: #c81420;
  box-shadow: 0 13px 0 #c81420;
}

body[data-screen="home"] .host-room-motion i:nth-child(2) {
  right: 18%;
  top: 22%;
  width: 38px;
  height: 28px;
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(#fff36c, #f6bd21 54%, #b66b00);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.24);
  animation: crownBounce 2.35s ease-in-out infinite;
}

body[data-screen="home"] .host-room-motion i:nth-child(2)::before {
  left: 2px;
  top: -14px;
  width: 34px;
  height: 20px;
  background: linear-gradient(135deg, transparent 0 20%, #fff36c 21% 38%, transparent 39% 50%, #fff36c 51% 68%, transparent 69% 80%, #fff36c 81%);
}

body[data-screen="home"] .host-room-motion i:nth-child(3) {
  left: 50%;
  bottom: 16%;
  width: 66px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  transform: translateX(-50%);
  animation: homeSignal 2s ease-in-out infinite;
}

body[data-screen="home"] .join-code-motion i:nth-child(1) {
  left: 17%;
  top: 28%;
  width: 68px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 12px;
  background: rgba(3, 28, 18, 0.58);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.24);
}

body[data-screen="home"] .join-code-motion i:nth-child(1)::before {
  left: 10px;
  top: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fffbe0;
  box-shadow: 17px 0 0 #fffbe0, 34px 0 0 #fffbe0, 51px 0 0 #fffbe0, 17px 16px 0 #50ff75;
  animation: codeBlink 1.45s steps(2, end) infinite;
}

body[data-screen="home"] .join-code-motion i:nth-child(2) {
  right: 15%;
  bottom: 18%;
  width: 32px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 7px;
  background: linear-gradient(135deg, #fff9e4 0 58%, #30ec3a 59% 100%);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.24);
  transform: rotate(11deg);
  animation: cardFan 2.7s ease-in-out infinite reverse;
}

body[data-screen="home"] .join-code-motion i:nth-child(3) {
  right: 18%;
  top: 21%;
  width: 22px;
  height: 22px;
  border-top: 5px solid #fffbe0;
  border-right: 5px solid #fffbe0;
  transform: rotate(45deg);
  animation: joinArrow 1.7s ease-in-out infinite;
}

body[data-screen="home"] .mode-card-control {
  align-self: center;
  justify-self: center;
  width: min(236px, 100%);
  min-height: 50px;
  margin: 0 !important;
  border-radius: 16px;
}

body[data-screen="home"] .bot-fixed-pill,
body[data-screen="home"] .online-status-pill,
body[data-screen="home"] .room-status-pill,
body[data-screen="home"] .friends-code-field {
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-screen="home"] .friends-code-field input {
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 0.55rem 0.82rem;
}

body[data-screen="home"] .mode-action-btn {
  align-self: end;
  justify-self: center;
  width: min(240px, 100%);
  height: clamp(54px, 4.5vw, 62px);
  min-height: clamp(54px, 4.5vw, 62px);
  margin: 0;
  padding: 0.68rem 0.9rem;
  border-radius: 18px 18px 0 0;
  font-size: clamp(0.86rem, 1.22vw, 1.06rem);
}

@keyframes botHover {
  0%, 100% { transform: translate(-50%, -45%) translateY(0); }
  50% { transform: translate(-50%, -45%) translateY(-8px); }
}

@keyframes botBlink {
  0%, 84%, 100% { opacity: 1; }
  88%, 94% { opacity: 0.15; }
}

@keyframes cardFan {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -7px; rotate: 4deg; }
}

@keyframes globeSpin {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(24deg); }
}

@keyframes playerPing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes signalRing {
  0% { opacity: 0.9; scale: 0.65; }
  100% { opacity: 0; scale: 1.18; }
}

@keyframes inviteFloat {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-8px); }
}

@keyframes crownBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

@keyframes codeBlink {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 1; }
}

@keyframes joinArrow {
  0%, 100% { opacity: 0.5; translate: -6px 0; }
  50% { opacity: 1; translate: 5px 0; }
}

@media (max-width: 900px) {
  body[data-screen="home"] .app-shell {
    grid-template-rows: minmax(96px, 30%) minmax(0, 1fr);
    padding: 8px 10px 10px !important;
    margin-bottom: 0 !important;
  }

  body[data-screen="home"] .hero {
    grid-template-columns: minmax(90px, 1fr) auto minmax(120px, 1fr);
    gap: 6px;
    padding-top: 4px;
  }

  body[data-screen="home"] .hero-emblem {
    width: clamp(86px, 21vw, 160px);
  }

  body[data-screen="home"] .mode-grid {
    gap: clamp(5px, 1vw, 9px);
  }

  body[data-screen="home"] .mode-card {
    grid-template-rows: minmax(42px, 0.95fr) minmax(45px, 1fr) minmax(26px, auto) minmax(30px, auto);
    gap: 5px;
    padding: 7px 6px 0;
    border-radius: 14px;
  }

  body[data-screen="home"] .mode-card .section-title {
    gap: 4px;
    margin: 0;
  }

  body[data-screen="home"] .mode-card .section-title h2 {
    font-size: clamp(0.7rem, 2.8vw, 1.05rem);
  }

  body[data-screen="home"] .mode-card .section-title p {
    font-size: clamp(0.48rem, 1.65vw, 0.64rem);
    line-height: 1.05;
  }

  body[data-screen="home"] .mode-live-icon {
    width: min(106px, 94%);
  }

  body[data-screen="home"] .mode-card-control {
    min-height: 28px;
    font-size: clamp(0.46rem, 1.55vw, 0.64rem);
  }

  body[data-screen="home"] .friends-code-field input {
    height: 30px;
    min-height: 30px;
    padding: 0.28rem 0.38rem;
    font-size: clamp(0.48rem, 1.65vw, 0.68rem);
  }

  body[data-screen="home"] .mode-action-btn {
    min-height: 32px;
    height: 32px;
    padding: 0.24rem 0.36rem;
    font-size: clamp(0.5rem, 1.8vw, 0.7rem);
  }

  body[data-screen="home"] .app-footer {
    display: none;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] {
  place-items: center;
  padding-top: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="home"] .app-shell {
  width: var(--home-frame-width, calc(100vw - 8px)) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  grid-template-rows: minmax(82px, 30%) minmax(0, 1fr);
  padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
}

/* Home header consistency: avatar name button and compact coin pill. */
body[data-screen="home"] {
  --home-header-button-height: 50px;
}

body[data-screen="home"] .home-player-strip,
body[data-screen="home"] .account-action-row {
  align-items: center;
}

body[data-screen="home"] .home-player-pill,
body[data-screen="home"] .home-signin-btn,
body[data-screen="home"] .account-action-row .tool-btn:not(.coin-menu-btn),
body[data-screen="home"] .coin-menu-btn {
  height: var(--home-header-button-height) !important;
  min-height: var(--home-header-button-height) !important;
  max-height: var(--home-header-button-height) !important;
}

body[data-screen="home"] .home-player-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(260px, 26vw);
  padding: 0.34rem 0.72rem;
  overflow: hidden;
}

body[data-screen="home"] .home-player-pill .account-mini-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin: 0;
}

.account-loading-avatar {
  position: relative;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    linear-gradient(135deg, #ffd969, #12945e);
  animation: accountLoadingPulse 920ms ease-in-out infinite alternate;
}

.account-loading-avatar::before {
  content: "";
  width: 48%;
  height: 48%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-right-color: rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  animation: accountLoadingSpin 780ms linear infinite;
}

body[data-screen="home"] .home-player-pill:disabled,
body[data-screen="home"] .coin-menu-btn:disabled {
  cursor: default;
  opacity: 1;
  transform: none;
  filter: none;
}

@keyframes accountLoadingPulse {
  from { filter: brightness(0.92); }
  to { filter: brightness(1.08); }
}

@keyframes accountLoadingSpin {
  to { transform: rotate(360deg); }
}

.home-player-name {
  min-width: 0;
  overflow: hidden;
  color: #eef8ee;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-screen="home"] .home-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-screen="home"] .coin-menu-btn {
  aspect-ratio: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 112px !important;
  max-width: 150px !important;
  padding: 0 0.82rem !important;
  border-radius: 18px !important;
  line-height: 1;
}

body[data-screen="home"] .coin-menu-btn .coin-chip {
  width: 26px;
  height: 26px;
  min-width: 26px;
}

body[data-screen="home"] .coin-menu-value {
  min-width: 42px;
  font-size: 0.98rem;
}

@media (max-width: 900px) {
  body[data-screen="home"] {
    --home-header-button-height: clamp(34px, 8vh, 42px);
  }

  body[data-screen="home"] .home-player-pill {
    max-width: 170px;
    gap: 6px;
    padding-inline: 0.42rem;
  }

  body[data-screen="home"] .home-player-pill .account-mini-avatar {
    width: clamp(24px, 6vh, 30px);
    height: clamp(24px, 6vh, 30px);
    min-width: clamp(24px, 6vh, 30px);
  }

  body[data-screen="home"] .home-player-name {
    font-size: clamp(0.58rem, 2vh, 0.82rem);
  }

  body[data-screen="home"] .coin-menu-btn {
    min-width: clamp(82px, 17vw, 104px) !important;
    max-width: clamp(82px, 17vw, 104px) !important;
    padding-inline: 0.46rem !important;
  }

  body[data-screen="home"] .coin-menu-btn .coin-chip {
    width: clamp(20px, 5.2vh, 25px);
    height: clamp(20px, 5.2vh, 25px);
    min-width: clamp(20px, 5.2vh, 25px);
  }

  body[data-screen="home"] .coin-menu-value {
    min-width: 34px;
    font-size: clamp(0.62rem, 2vh, 0.82rem);
  }
}

/* Home logo sizing: keep the brand clear of the mode cards. */
body[data-screen="home"] .app-shell {
  grid-template-rows: minmax(122px, 27%) minmax(0, 1fr);
}

body[data-screen="home"] .hero {
  align-items: start;
  padding-top: clamp(4px, 0.7vw, 10px);
}

body[data-screen="home"] .hero-brand {
  align-self: start;
}

body[data-screen="home"] .hero-emblem {
  width: clamp(140px, 15.2vw, 224px) !important;
  max-height: 100%;
}

body[data-screen="home"] .hero-emblem img {
  max-height: clamp(120px, 15vw, 212px);
  object-fit: contain;
}

@media (max-width: 900px) {
  body[data-screen="home"] .app-shell {
    grid-template-rows: minmax(76px, 27%) minmax(0, 1fr);
  }

  body[data-screen="home"] .hero-emblem {
    width: clamp(72px, 16vw, 126px) !important;
  }

body[data-screen="home"] .hero-emblem img {
    max-height: clamp(66px, 16vw, 116px);
  }
}

/* Compact install pill for the new home screen. */
body[data-screen="home"] .app-footer {
  left: 30px;
  bottom: -58px;
}

body[data-screen="home"] .install-app-btn {
  min-width: 116px !important;
  width: auto !important;
  min-height: 42px !important;
  height: 42px;
  gap: 9px;
  padding: 0 18px;
  border: 1.5px solid #31e978;
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(21, 111, 68, 0.92), rgba(3, 57, 36, 0.96)),
    #063b27;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 20px rgba(0, 0, 0, 0.24);
  text-shadow: none;
}

body[data-screen="home"] .install-app-btn:hover {
  border-color: #61ff99;
  filter: brightness(1.06);
}

body[data-screen="home"] .install-app-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 10px rgba(0, 0, 0, 0.24);
}

body[data-screen="home"] .install-icons svg {
  width: 21px;
  height: 21px;
  filter: none;
}

body[data-screen="home"] #installAppLabel {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 900px) {
  body[data-screen="home"] .install-app-btn {
    min-width: 104px !important;
    min-height: 36px !important;
    height: 36px;
    padding-inline: 14px;
    font-size: 0.82rem;
  }

  body[data-screen="home"] .install-icons svg {
    width: 18px;
    height: 18px;
  }
}

/* Home mode cards: shaded graphic zone instead of separate icon boxes. */
body[data-screen="home"] .mode-card {
  grid-template-rows:
    clamp(82px, 7.6vw, 112px)
    minmax(104px, 1fr)
    clamp(50px, 4vw, 54px)
    clamp(70px, 5.5vw, 82px);
  align-content: stretch;
  --mode-rgb: 246, 189, 33;
  --mode-deep-rgb: 74, 46, 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(var(--mode-rgb), 0.48), rgba(var(--mode-rgb), 0.16) 34%, transparent 58%),
    linear-gradient(180deg, rgba(var(--mode-rgb), 0.28) 0%, rgba(var(--mode-deep-rgb), 0.2) 27%, rgba(0, 19, 12, 0.92) 64%, rgba(0, 12, 8, 0.98) 100%),
    #00180f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 86px 80px -50px rgba(var(--mode-rgb), 0.58),
    inset 0 -74px 60px -44px rgba(0, 0, 0, 0.82),
    0 16px 34px rgba(0, 0, 0, 0.28);
}

body[data-screen="home"] .mode-computer {
  --mode-rgb: 246, 190, 36;
  --mode-deep-rgb: 88, 57, 6;
}

body[data-screen="home"] .mode-online {
  --mode-rgb: 20, 143, 255;
  --mode-deep-rgb: 0, 53, 88;
}

body[data-screen="home"] .mode-invite {
  --mode-rgb: 243, 38, 45;
  --mode-deep-rgb: 92, 8, 10;
}

body[data-screen="home"] .mode-join {
  --mode-rgb: 37, 230, 70;
  --mode-deep-rgb: 0, 75, 30;
}

body[data-screen="home"] .mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block !important;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.22), transparent 24%),
    radial-gradient(ellipse at 22% 18%, rgba(var(--mode-rgb), 0.38), transparent 28%),
    radial-gradient(ellipse at 78% 14%, rgba(var(--mode-rgb), 0.28), transparent 27%),
    linear-gradient(180deg, rgba(var(--mode-rgb), 0.2), transparent 42%);
  pointer-events: none;
}

body[data-screen="home"] .mode-card::after {
  content: "";
  position: absolute;
  inset: 9px 10px 0;
  z-index: 0;
  display: block !important;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 1px 100%),
    linear-gradient(180deg, transparent 0 31%, rgba(0, 0, 0, 0.16) 48%, rgba(0, 0, 0, 0.36) 100%);
  opacity: 0.86;
  pointer-events: none;
}

body[data-screen="home"] .mode-card > * {
  position: relative;
  z-index: 1;
}

body[data-screen="home"] .mode-card > .sr-only,
body[data-screen="home"] .mode-card .bot-count-control.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-screen="home"] .mode-live-icon {
  align-self: center;
  justify-self: center;
  width: min(178px, 82%) !important;
  height: clamp(82px, 7.8vw, 112px);
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.32));
  overflow: visible;
}

body[data-screen="home"] .mode-live-icon::before,
body[data-screen="home"] .mode-live-icon::after {
  display: none !important;
}

body[data-screen="home"] .mode-motion {
  inset: 0;
  transform: scale(1.08);
}

body[data-screen="home"] .mode-card .section-title {
  align-self: stretch;
  display: grid;
  grid-template-rows: clamp(38px, 3.1vw, 48px) clamp(38px, 3.35vw, 52px);
  align-content: start;
  justify-items: center;
  gap: clamp(10px, 0.9vw, 14px);
  margin: 0;
}

body[data-screen="home"] .mode-card .section-title h2 {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  line-height: 1.05;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), 0 0 18px rgba(255, 255, 255, 0.12);
}

body[data-screen="home"] .mode-card .section-title p {
  align-self: start;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  margin: 0;
  line-height: 1.18;
  color: rgba(246, 255, 247, 0.76);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

body[data-screen="home"] .mode-card-control {
  align-self: center;
  justify-self: center;
  width: min(236px, 100%);
  min-height: 50px;
  margin: 0 !important;
  padding: 0.48rem 1rem;
  background: rgba(0, 16, 10, 0.42);
  box-shadow: inset 0 0 18px rgba(var(--mode-rgb), 0.12);
  transform: translateY(clamp(-10px, -0.75vw, -6px));
}

body[data-screen="home"] .mode-action-btn {
  grid-row: 4;
  align-self: start;
  justify-self: center;
  width: min(220px, 88%);
  min-height: clamp(48px, 4vw, 56px);
  height: clamp(48px, 4vw, 56px);
  margin-top: clamp(4px, 0.45vw, 8px);
  border-radius: 16px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -10px 16px rgba(0, 0, 0, 0.16),
    0 8px 0 rgba(0, 0, 0, 0.34),
    0 16px 24px rgba(0, 0, 0, 0.22);
}

body[data-screen="home"] .bot-fixed-pill {
  width: min(236px, 100%);
  min-height: 50px;
}

body[data-screen="home"] .friends-code-field input {
  height: 50px;
  min-height: 50px;
}

@media (max-width: 900px) {
  body[data-screen="home"] .mode-card {
    grid-template-rows:
      minmax(42px, 0.95fr)
      minmax(54px, 1fr)
      minmax(28px, auto)
      minmax(40px, auto);
  }

  body[data-screen="home"] .mode-live-icon {
    width: min(96px, 90%) !important;
    height: clamp(40px, 11vh, 66px);
  }

  body[data-screen="home"] .mode-motion {
    transform: scale(0.82);
  }

  body[data-screen="home"] .mode-card .section-title {
    grid-template-rows: minmax(18px, auto) minmax(22px, auto);
    gap: 4px;
  }

  body[data-screen="home"] .mode-card-control {
    min-height: 28px;
    padding: 0.24rem 0.42rem;
    transform: translateY(-4px);
  }

  body[data-screen="home"] .friends-code-field input {
    height: 30px;
    min-height: 30px;
  }

  body[data-screen="home"] .mode-action-btn {
    min-height: 34px;
    height: 34px;
    margin-top: 2px;
    border-radius: 12px;
  }
}

/* Home header: make Settings and Game Guide feel like coin-family controls. */
body[data-screen="home"] .account-action-row #settingsBtn::before,
body[data-screen="home"] .account-action-row #infoBtn::before {
  border: 2px solid #704301 !important;
  color: #3a2000 !important;
  background:
    radial-gradient(circle at 32% 24%, #fff8b9 0 16%, rgba(255, 248, 185, 0) 30%),
    radial-gradient(circle at 72% 76%, rgba(168, 91, 0, 0.44), rgba(168, 91, 0, 0) 38%),
    linear-gradient(180deg, #fff36d 0%, #ffc934 42%, #e99d1e 72%, #ad6b0b 100%) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.56),
    0 0 14px rgba(255, 197, 38, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.58),
    inset 0 -5px 0 rgba(89, 48, 0, 0.22) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

body[data-screen="home"] .account-action-row #settingsBtn::before {
  content: "\2699" !important;
  font-size: 1.86rem !important;
  line-height: 1;
}

body[data-screen="home"] .account-action-row #infoBtn::before {
  content: "i" !important;
  font-size: 2rem !important;
  font-family: Impact, "Arial Black", system-ui, sans-serif;
  line-height: 0.95;
}

body[data-screen="home"] .account-action-row #settingsBtn:hover::before,
body[data-screen="home"] .account-action-row #infoBtn:hover::before {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
}

/* Home header: reference-style outline icons and compact coin capsule. */
body[data-screen="home"] .account-action-row {
  gap: clamp(12px, 1.35vw, 20px);
}

body[data-screen="home"] .account-action-row #settingsBtn,
body[data-screen="home"] .account-action-row #infoBtn {
  flex: 0 0 var(--home-header-button-height, 50px) !important;
  width: var(--home-header-button-height, 50px) !important;
  min-width: var(--home-header-button-height, 50px) !important;
  max-width: var(--home-header-button-height, 50px) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="home"] .account-action-row #settingsBtn::before,
body[data-screen="home"] .account-action-row #infoBtn::before {
  width: calc(var(--home-header-button-height, 50px) - 2px) !important;
  height: calc(var(--home-header-button-height, 50px) - 2px) !important;
  border: 2px solid rgba(247, 179, 26, 0.82) !important;
  color: #ffd64a !important;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 219, 80, 0.13) 0 22%, rgba(255, 219, 80, 0) 43%),
    linear-gradient(180deg, rgba(1, 30, 22, 0.78), rgba(0, 14, 12, 0.9)) !important;
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 215, 76, 0.14),
    inset 0 0 12px rgba(255, 190, 31, 0.09) !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.46),
    0 0 9px rgba(255, 209, 60, 0.28) !important;
}

body[data-screen="home"] .account-action-row #settingsBtn::before {
  content: "\2699" !important;
  font-size: calc(var(--home-header-button-height, 50px) * 0.51) !important;
}

body[data-screen="home"] .account-action-row #infoBtn::before {
  content: "i" !important;
  font-size: calc(var(--home-header-button-height, 50px) * 0.58) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 950;
  font-style: normal;
}

body[data-screen="home"] .account-action-row #settingsBtn:hover::before,
body[data-screen="home"] .account-action-row #infoBtn:hover::before {
  border-color: #ffd84c !important;
  filter: brightness(1.1) saturate(1.06);
  transform: translateY(-1px);
}

body[data-screen="home"] .account-action-row .coin-menu-btn {
  min-width: clamp(104px, 8.8vw, 136px) !important;
  max-width: clamp(104px, 8.8vw, 136px) !important;
  padding: 0 clamp(12px, 1vw, 18px) !important;
  gap: clamp(8px, 0.75vw, 12px);
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  color: #3a1700 !important;
  background:
    radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%),
    linear-gradient(#fff76d, #ffc21f 48%, #ff8e1b) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.62),
    inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="home"] .account-action-row .coin-menu-btn .coin-chip {
  width: calc(var(--home-header-button-height, 50px) * 0.44);
  height: calc(var(--home-header-button-height, 50px) * 0.44);
  min-width: calc(var(--home-header-button-height, 50px) * 0.44);
  border: 2px solid rgba(80, 43, 0, 0.66);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffd75a, #e59418 68%, #995704 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 2px 0 rgba(92, 52, 0, 0.38);
  display: inline-grid;
  place-items: center;
  font-size: calc(var(--home-header-button-height, 50px) * 0.25);
}

body[data-screen="home"] .account-action-row .coin-menu-value {
  color: #3a1700;
  font-size: calc(var(--home-header-button-height, 50px) * 0.34);
  font-weight: 950;
  letter-spacing: 0;
  min-width: 36px;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* Profile dialogs: compact account-card layout. */
.dialog-panel.profile-dialog-panel,
.dialog-panel.coins-dialog,
.dialog-panel.signout-dialog,
.dialog-panel.settings-dialog {
  width: min(604px, calc(100vw - 28px));
  max-height: min(640px, calc(100vh - 28px));
  padding: 22px;
  border: 3px solid rgba(3, 18, 17, 0.86);
  border-radius: 18px;
  color: #10222d;
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 12rem),
    radial-gradient(circle at 92% 12%, rgba(242, 192, 66, 0.14), rgba(242, 192, 66, 0) 11rem),
    linear-gradient(135deg, #fffdf8 0%, #f2f6ef 48%, #e4f2ec 100%);
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.58),
    0 30px 78px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dialog-panel.coins-dialog {
  width: min(620px, calc(100vw - 28px));
}

.dialog-panel.settings-dialog {
  width: min(520px, calc(100vw - 28px));
}

.dialog-panel.profile-dialog-panel .dialog-close,
.dialog-panel.coins-dialog .dialog-close,
.dialog-panel.signout-dialog .dialog-close,
.dialog-panel.settings-dialog .dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  float: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(14, 31, 38, 0.18);
  border-radius: 11px;
  color: transparent;
  background: linear-gradient(#ffffff, #eef4f0);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0;
}

.dialog-panel.profile-dialog-panel .dialog-close::before,
.dialog-panel.coins-dialog .dialog-close::before,
.dialog-panel.signout-dialog .dialog-close::before,
.dialog-panel.settings-dialog .dialog-close::before {
  content: "\00d7";
  color: #24353d;
  font-size: 1.7rem;
  font-weight: 850;
  line-height: 1;
  text-shadow: none;
}

.dialog-panel.profile-dialog-panel .dialog-close:hover,
.dialog-panel.coins-dialog .dialog-close:hover,
.dialog-panel.signout-dialog .dialog-close:hover,
.dialog-panel.settings-dialog .dialog-close:hover {
  background: linear-gradient(#fff9de, #f1d878);
  transform: translateY(-1px);
}

.dialog-panel.profile-dialog-panel .profile-window-title h2,
.dialog-panel.coins-dialog .coins-title h2,
.dialog-panel.signout-dialog .signout-title h2,
.dialog-panel.settings-dialog .settings-title h2 {
  color: #10222d;
  font-family: inherit;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: none;
}

.dialog-panel.profile-dialog-panel .profile-window-title p,
.dialog-panel.signout-dialog .signout-title p,
.dialog-panel.settings-dialog .settings-title p {
  color: #334a55;
  font-family: inherit;
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: none;
}

.settings-window {
  display: grid;
  gap: 18px;
  color: #10222d;
  text-shadow: none;
}

.settings-title {
  display: grid;
  gap: 6px;
  min-height: 46px;
  padding-right: 54px;
}

.settings-title h2,
.settings-title p {
  margin: 0;
}

.settings-title h2 {
  font-size: clamp(1.9rem, 5vw, 2.35rem);
  line-height: 1;
}

.settings-title p {
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.25;
}

.settings-control-list {
  display: grid;
  gap: 14px;
}

.settings-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 10px 14px;
  border: 2px solid rgba(14, 31, 38, 0.14);
  border-radius: 10px;
  color: #334a55;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(8, 21, 26, 0.1);
}

.settings-control-row label {
  min-width: 0;
  color: #334a55;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.1;
  text-shadow: none;
}

.settings-control-row small {
  display: block;
  margin-top: 4px;
  color: #63727c;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: none;
}

.settings-toggle {
  position: relative;
  width: 64px;
  height: 34px;
  flex: 0 0 auto;
  appearance: none;
  border: 3px solid #111b21;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(#d5dde0, #89979d);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 2px 0 rgba(3, 18, 17, 0.45);
  transition: background 150ms ease, opacity 150ms ease;
}

.settings-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 22px;
  height: 22px;
  border: 2px solid #111b21;
  border-radius: 50%;
  background: linear-gradient(#ffffff, #e8f6f2);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
  transition: transform 150ms ease;
}

.settings-toggle:checked {
  background: linear-gradient(#26c784, #0a8e5b 64%, #00613e);
}

.settings-toggle:checked::before {
  transform: translateX(28px);
}

.settings-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.settings-refresh-action,
.settings-secondary-action {
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: none;
}

.settings-refresh-action {
  width: 100%;
  background: linear-gradient(#2ac77d, #0d915b 60%, #026640);
  box-shadow:
    0 5px 0 #06402f,
    inset 0 2px 0 rgba(255, 255, 255, 0.26);
  font-size: 1.04rem;
}

.settings-room-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-secondary-action {
  min-height: 48px;
  padding: 0.54rem 0.55rem;
  background: linear-gradient(#eef6f4, #d4e7e2);
  box-shadow:
    0 4px 0 rgba(7, 22, 24, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  color: #10222d;
  font-size: 0.9rem;
}

.settings-secondary-action.danger {
  color: #ffffff;
  background: linear-gradient(#ff4857, #e51f32 58%, #9d1421);
  box-shadow:
    0 4px 0 rgba(91, 3, 10, 0.78),
    inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

.settings-note {
  margin: -4px 0 0;
  color: #63727c;
  font-size: 0.85rem;
  font-weight: 850;
  line-height: 1.25;
  text-shadow: none;
}

.dialog-panel.coins-dialog .coins-title {
  min-height: 46px;
  padding-right: 54px;
  margin-bottom: 14px;
}

.dialog-panel.coins-dialog .coins-title h2 {
  color: #10222d;
  font-size: clamp(2rem, 5.4vw, 2.7rem);
  line-height: 1;
  text-shadow: none;
}

.dialog-panel.coins-dialog .coins-title h2 strong {
  color: #10222d;
  gap: 12px;
}

.dialog-panel.coins-dialog .coins-title .coin-chip {
  width: 42px;
  height: 42px;
  min-width: 42px;
  margin-right: 0;
  border: 2px solid rgba(113, 66, 0, 0.55);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffd75a, #e59418 68%, #995704 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 2px 0 rgba(92, 52, 0, 0.38);
  display: inline-grid;
  place-items: center;
  font-size: 1rem;
}

.earn-coin-packages {
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.earn-coin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
  align-items: center;
  gap: 18px;
  min-height: 96px;
  padding: 16px 20px;
  border: 2px solid rgba(13, 31, 36, 0.26);
  border-radius: 16px;
  color: #10222d;
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 2px 0 rgba(8, 21, 26, 0.12);
}

.earn-coin-row strong {
  min-width: 0;
  color: #10222d;
  font-size: clamp(1.65rem, 4vw, 2.32rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  text-shadow: none;
}

.coin-earn-action {
  min-height: 58px;
  padding: 0.58rem 1rem;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(#30c978, #0b8d5a 58%, #00633d);
  box-shadow:
    0 5px 0 rgba(0, 78, 48, 0.76),
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 950;
  text-shadow: none;
}

.coin-earn-action:hover {
  filter: brightness(1.06);
}

.dialog-panel.signout-dialog {
  width: min(430px, calc(100vw - 28px));
  padding: 22px 22px 18px;
}

.signout-window {
  display: grid;
  gap: 14px;
  color: #071018;
  text-shadow: none;
}

.signout-title {
  padding-right: 52px;
}

.signout-title h2 {
  margin: 0 0 4px;
  color: #071018;
  font-size: clamp(1.7rem, 5vw, 2rem);
  line-height: 1;
  text-shadow: none;
}

.signout-title p {
  margin: 0;
  color: #071018;
  font-size: 0.98rem;
  font-weight: 900;
  text-shadow: none;
}

.signout-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.signout-actions button {
  min-height: 54px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 950;
  text-shadow: none;
}

.signout-stay-action {
  background: linear-gradient(#34d989, #159b64 58%, #086746);
  box-shadow: 0 5px 0 #06402f, inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.signout-confirm-action {
  background: linear-gradient(#ff4857, #e51f32 58%, #9d1421);
  box-shadow: 0 5px 0 rgba(91, 3, 10, 0.78), inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

body.is-mobile-device .earn-coin-packages,
body.is-mobile-device.is-mobile-landscape .earn-coin-packages {
  gap: 9px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

body.is-mobile-device .earn-coin-row,
body.is-mobile-device.is-mobile-landscape .earn-coin-row {
  grid-template-columns: minmax(0, 1fr) minmax(98px, 36%);
  min-height: 68px;
  gap: 10px;
  padding: 10px 12px;
  border-width: 2px;
  border-radius: 12px;
}

body.is-mobile-device .earn-coin-row strong,
body.is-mobile-device.is-mobile-landscape .earn-coin-row strong {
  font-size: clamp(1.1rem, 4.5vh, 1.55rem);
}

body.is-mobile-device .coin-earn-action,
body.is-mobile-device.is-mobile-landscape .coin-earn-action {
  min-height: 42px;
  padding: 0.36rem 0.7rem;
  font-size: clamp(0.74rem, 3.2vh, 0.98rem);
  box-shadow:
    0 3px 0 rgba(0, 78, 48, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-title h2,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title h2 {
  font-size: clamp(1.32rem, 6vh, 2rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-title .coin-chip,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title .coin-chip {
  width: clamp(28px, 7vh, 36px);
  min-width: clamp(28px, 7vh, 36px);
  height: clamp(28px, 7vh, 36px);
  font-size: clamp(0.72rem, 2.2vh, 0.9rem);
}

.profile-window {
  display: grid;
  gap: 12px;
  color: #10222d;
  text-shadow: none;
}

.profile-window-title {
  display: grid;
  gap: 3px;
  padding-right: 54px;
}

.profile-window-title h2,
.profile-window-title p {
  margin: 0;
  text-shadow: none;
}

.profile-window-title h2 {
  color: #10222d;
  font-size: clamp(1.7rem, 4vw, 2.05rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.profile-window-title p {
  color: #334a55;
  font-size: 0.98rem;
  font-weight: 850;
}

.profile-summary-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 12px;
  border: 2px solid rgba(14, 31, 38, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.profile-window .profile-avatar-large {
  width: 66px;
  height: 66px;
  color: #2b1400;
  border-width: 2px;
  box-shadow: 0 3px 0 rgba(9, 22, 36, 0.6);
  font-size: 1.15rem;
}

.profile-window .profile-avatar-large.is-profile-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 50%;
}

.profile-window .profile-avatar-large .profile-icon {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-width: 2px;
  box-shadow: none;
}

.profile-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.profile-name-input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #10222d;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 1.22rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.profile-name-input:focus {
  padding: 3px 7px;
  outline: 2px solid rgba(232, 168, 35, 0.76);
  background: rgba(255, 246, 199, 0.72);
}

.profile-meta {
  overflow: hidden;
  color: #334a55;
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-edit-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 2px solid rgba(14, 31, 38, 0.16);
  border-radius: 11px;
  color: #24353d;
  background: linear-gradient(#ffffff, #eef4f0);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
  font-size: 1.2rem;
  text-shadow: none;
}

.profile-edit-icon:hover {
  background: linear-gradient(#fff9de, #f1d878);
  transform: translateY(-1px);
}

.profile-window .profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(14, 31, 38, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
}

.profile-window .guest-profile-stats {
  grid-template-columns: 0.9fr 2.55fr;
}

.profile-window .profile-stat {
  gap: 5px;
  min-height: 76px;
  padding: 12px;
  border: 0;
  border-right: 2px solid rgba(14, 31, 38, 0.1);
  border-radius: 0;
  color: #10222d;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.profile-window .profile-stat:last-child {
  border-right: 0;
}

.profile-window .profile-stat span {
  color: #53656d;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.profile-window .profile-stat strong {
  color: #0b1c27;
  font-size: 1.44rem;
  line-height: 1;
  text-shadow: none;
}

.profile-window .profile-stat .coin-chip {
  width: 26px;
  height: 26px;
  min-width: 26px;
  font-size: 0.82rem;
}

.profile-window .profile-benefit-card {
  align-content: center;
}

.profile-window .profile-benefit-card span {
  color: #5d666b;
  font-size: 0.9rem;
}

.profile-window .profile-benefit-card strong {
  color: #0b0f12;
  font-size: 1.07rem;
  font-weight: 780;
  line-height: 1.22;
}

.profile-window .profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-window .profile-actions button {
  min-height: 54px;
  width: 100%;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 950;
}

.profile-window .signed-profile-actions,
.profile-window .guest-profile-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-primary-action {
  color: #261500;
  background: linear-gradient(#ffd65e, #efad30 56%, #be7418);
  box-shadow: 0 4px 0 rgba(103, 58, 0, 0.72), inset 0 2px 0 rgba(255, 255, 255, 0.36);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}

.profile-edit-action {
  color: #ffffff;
  background: linear-gradient(#38d991, #16a66d 58%, #0b704e);
  box-shadow: 0 4px 0 rgba(3, 77, 52, 0.74), inset 0 2px 0 rgba(255, 255, 255, 0.26);
}

.profile-danger-action {
  color: #ffffff;
  background: linear-gradient(#ff4a55, #d6212c 58%, #97151f);
  box-shadow: 0 4px 0 rgba(94, 4, 8, 0.72), inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

.profile-google-action {
  color: #ffffff;
  background: linear-gradient(#238cef, #0f69c9 58%, #0b4f9b);
  box-shadow: 0 4px 0 rgba(4, 45, 94, 0.74), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.profile-google-action::before {
  width: 30px;
  height: 30px;
  border-width: 0;
  box-shadow: none;
  font-size: 1.05rem;
}

@media (max-width: 620px) {
  .dialog-panel.profile-dialog-panel {
    padding: 16px;
  }

  .profile-window-title h2 {
    font-size: 1.45rem;
  }

  .profile-window-title p,
  .profile-meta {
    font-size: 0.78rem;
  }

  .profile-summary-card {
    min-height: 72px;
    gap: 9px;
    padding: 9px;
  }

  .profile-window .profile-avatar-large,
  .profile-window .profile-avatar-large.is-profile-icon,
  .profile-window .profile-avatar-large .profile-icon {
    width: 52px;
    height: 52px;
  }

  .profile-name-input {
    font-size: 1rem;
  }

  .profile-window .profile-stats,
  .profile-window .guest-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-window .profile-stat:nth-child(2n) {
    border-right: 0;
  }

  .profile-window .profile-stat:nth-child(n + 3) {
    border-top: 2px solid rgba(14, 31, 38, 0.1);
  }

  .profile-window .profile-stat strong {
    font-size: 1.18rem;
  }

  .profile-window .profile-actions button {
    min-height: 48px;
    padding-inline: 0.35rem;
    font-size: 0.84rem;
  }
}

/* Google sign-in icon asset for all sign-in buttons. */
#googleSignInBtn::before,
.google-action-btn::before {
  content: "" !important;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 27px !important;
  height: 27px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #e9f5fb url("google-g-icon.svg") center / 100% 100% no-repeat !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

body[data-screen="home"] .home-signin-btn {
  gap: 9px;
  padding-left: 0.58rem;
}

body[data-screen="home"] .home-signin-btn::after {
  display: none !important;
}

.profile-google-action::before {
  width: 29px !important;
  height: 29px !important;
  border-radius: 8px !important;
}

@media (max-width: 620px) {
  #googleSignInBtn::before,
  .google-action-btn::before {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
  }
}

/* Edit Profile modal layout. */
.dialog-panel.profile-dialog-panel {
  width: min(640px, calc(100vw - 28px));
}

.profile-edit-window {
  display: grid;
  gap: 17px;
  color: #10222d;
  text-shadow: none;
}

.profile-edit-window .profile-window-title {
  gap: 2px;
  padding-right: 56px;
}

.profile-edit-window .profile-window-title h2 {
  font-size: clamp(2rem, 4.6vw, 2.48rem);
  line-height: 1;
}

.profile-edit-window .profile-window-title p {
  color: #71808a;
  font-size: 1.02rem;
  font-weight: 900;
}

.profile-edit-field {
  display: grid;
  gap: 9px;
}

.profile-edit-field label,
.profile-edit-label {
  color: #344a55;
  font-size: 1rem;
  font-weight: 950;
}

.profile-edit-input {
  width: 100%;
  min-height: 44px;
  padding: 0.52rem 0.72rem;
  border: 2px solid rgba(82, 111, 123, 0.58);
  border-radius: 7px;
  color: #101a24;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 2px 3px rgba(20, 37, 46, 0.07);
  font-size: 1.08rem;
  font-weight: 850;
  text-shadow: none;
}

.profile-edit-input:focus {
  border-color: #d99a17;
  outline: 3px solid rgba(244, 188, 59, 0.24);
}

.profile-edit-icons {
  display: grid;
  justify-content: center;
  gap: 18px 28px;
  padding: 4px 0 2px;
}

.guest-profile-edit-icons {
  grid-template-columns: repeat(3, 80px);
}

.signed-profile-edit-icons {
  grid-template-columns: repeat(3, 80px);
  justify-content: center;
  gap: 18px 34px;
}

.profile-edit-carousel {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: 8px 6px 10px;
  background: linear-gradient(90deg, rgba(240, 252, 245, 0), rgba(237, 250, 246, 0.78) 18%, rgba(237, 250, 246, 0.78) 82%, rgba(240, 252, 245, 0));
}

.profile-icon-scroll-btn {
  display: grid;
  place-items: center;
  min-height: 80px;
  padding: 0;
  border: 0;
  color: #050b0d;
  background: transparent;
  box-shadow: none;
  font-size: 1.12rem;
  font-weight: 950;
  letter-spacing: 1px;
  text-shadow: none;
}

.profile-icon-scroll-btn:hover {
  color: #d68c0b;
  filter: none;
  transform: none;
}

.profile-icon-scroll-btn:active {
  box-shadow: none;
  transform: none;
}

.profile-edit-icon-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  min-width: 80px;
  height: 80px;
  min-height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.profile-edit-icon-option .profile-icon.option {
  width: 78px;
  height: 78px;
  border: 3px solid #061114;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}

.profile-edit-icon-option.selected .profile-icon.option {
  border-color: #061114;
  outline: 4px solid #ffc23d;
  outline-offset: 3px;
}

.profile-selected-check {
  position: absolute;
  right: -2px;
  bottom: -3px;
  display: none;
  width: 28px;
  height: 28px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: linear-gradient(#ffc94e, #f0a21e);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.26);
}

.profile-selected-check::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 8px;
  height: 13px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(42deg);
}

.profile-edit-icon-option.selected .profile-selected-check {
  display: block;
}

.profile-lock-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 4px 0 16px;
  border-bottom: 2px solid rgba(28, 45, 52, 0.12);
  color: #6f7579;
  font-size: 0.95rem;
  font-weight: 760;
  text-align: center;
}

.profile-lock-note span {
  color: #8d9aa1;
  font-size: 0.98rem;
}

.profile-edit-window .profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-edit-window .profile-actions button {
  min-height: 58px;
  border-radius: 8px;
  font-size: 1.24rem;
  font-weight: 950;
}

.profile-save-action {
  color: #f9fffb;
  background: linear-gradient(#37d987, #169862 58%, #0b6749);
  box-shadow: 0 5px 0 #06402f, inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.profile-edit-window .profile-primary-action {
  color: #10110c;
  background: linear-gradient(#ffd761, #f0af35 58%, #c77c1d);
  box-shadow: 0 5px 0 rgba(119, 69, 5, 0.78), inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.profile-edit-window .google-action-btn {
  gap: 9px;
}

/* New UI modal system: shared typography, rows, and actions. */
.dialog-panel.profile-dialog-panel,
.dialog-panel.coins-dialog,
.dialog-panel.signout-dialog,
.dialog-panel.settings-dialog {
  --modal-title-size: clamp(1.92rem, 4vw, 2.24rem);
  --modal-subtitle-size: clamp(0.92rem, 2vw, 1rem);
  --modal-label-size: 0.96rem;
  --modal-body-size: 1rem;
  --modal-button-height: 52px;
  --modal-radius: 10px;
  --modal-row-min: 64px;
  --modal-border: rgba(14, 31, 38, 0.16);
  --modal-card-bg: rgba(255, 255, 255, 0.72);
  --modal-title-weight: 880;
  --modal-heading-weight: 820;
  --modal-label-weight: 760;
  --modal-button-weight: 850;
  --modal-text-color: #10222d;
  --modal-muted-color: #53656d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--modal-body-size);
  font-weight: 650;
}

.dialog-panel.profile-dialog-panel .profile-window,
.dialog-panel.profile-dialog-panel .profile-edit-window,
.dialog-panel.coins-dialog .coins-window,
.dialog-panel.coins-dialog .coin-packages,
.dialog-panel.settings-dialog .settings-window,
.dialog-panel.signout-dialog .signout-window {
  gap: 14px;
}

.dialog-panel.coins-dialog .coins-window {
  display: grid;
  color: var(--modal-text-color);
  text-shadow: none;
}

.dialog-panel.profile-dialog-panel .profile-window-title,
.dialog-panel.coins-dialog .coins-title,
.dialog-panel.settings-dialog .settings-title,
.dialog-panel.signout-dialog .signout-title {
  gap: 5px;
  min-height: 48px;
  padding-right: 54px;
  margin: 0;
}

.dialog-panel.profile-dialog-panel .profile-window-title h2,
.dialog-panel.coins-dialog .coins-title h2,
.dialog-panel.settings-dialog .settings-title h2,
.dialog-panel.signout-dialog .signout-title h2 {
  margin: 0;
  color: var(--modal-text-color);
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
  line-height: 1.02;
}

.dialog-panel.profile-dialog-panel .profile-window-title p,
.dialog-panel.coins-dialog .coins-title p,
.dialog-panel.settings-dialog .settings-title p,
.dialog-panel.signout-dialog .signout-title p {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--modal-muted-color);
  font-size: var(--modal-subtitle-size);
  font-weight: 720;
  line-height: 1.25;
}

.dialog-panel.coins-dialog .coins-title p strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--modal-text-color);
  font-size: 1.02em;
  font-weight: var(--modal-heading-weight);
}

.dialog-panel.profile-dialog-panel .profile-summary-card,
.dialog-panel.profile-dialog-panel .profile-stats,
.dialog-panel.settings-dialog .settings-control-row,
.dialog-panel.coins-dialog .earn-coin-row {
  border: 2px solid var(--modal-border);
  border-radius: var(--modal-radius);
  background: var(--modal-card-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(8, 21, 26, 0.1);
}

.dialog-panel.profile-dialog-panel .profile-summary-card {
  min-height: 84px;
  padding: 12px;
}

.dialog-panel.profile-dialog-panel .profile-stats {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.dialog-panel.profile-dialog-panel .profile-stat {
  min-height: 72px;
  padding: 12px;
}

.dialog-panel.profile-dialog-panel .profile-stat span,
.dialog-panel.settings-dialog .settings-control-row label,
.dialog-panel.profile-dialog-panel .profile-edit-field label,
.dialog-panel.profile-dialog-panel .profile-edit-label {
  color: #344a55;
  font-size: var(--modal-label-size);
  font-weight: var(--modal-label-weight);
  line-height: 1.15;
}

.dialog-panel.profile-dialog-panel .profile-stat strong {
  font-size: 1.42rem;
  font-weight: var(--modal-heading-weight);
}

.dialog-panel.profile-dialog-panel .profile-identity strong {
  color: var(--modal-text-color);
  font-size: 1.08rem;
  font-weight: var(--modal-heading-weight);
  line-height: 1.12;
}

.dialog-panel.profile-dialog-panel .profile-meta {
  color: var(--modal-muted-color);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
}

.dialog-panel.profile-dialog-panel .profile-edit-input {
  min-height: 44px;
  border-radius: 8px;
  font-size: 1.02rem;
  font-weight: 700;
}

.dialog-panel.profile-dialog-panel .profile-actions button,
.dialog-panel.profile-dialog-panel .profile-edit-window .profile-actions button,
.dialog-panel.coins-dialog .coin-earn-action,
.dialog-panel.signout-dialog .signout-actions button,
.dialog-panel.settings-dialog .settings-refresh-action,
.dialog-panel.settings-dialog .settings-secondary-action {
  min-height: var(--modal-button-height);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: var(--modal-button-weight);
  letter-spacing: 0;
  text-shadow: none;
}

.dialog-panel.profile-dialog-panel .profile-edit-window .profile-actions {
  gap: 18px;
  padding: 0;
}

.dialog-panel.profile-dialog-panel .profile-lock-note {
  color: #6c767c;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.25;
}

.dialog-panel.coins-dialog {
  width: min(450px, calc(100vw - 28px));
}

.dialog-panel.coins-dialog .coins-title {
  display: grid;
  justify-content: start;
  align-items: start;
  gap: 5px;
  min-height: 0;
  padding-right: 54px;
  margin-bottom: 0;
}

.dialog-panel.coins-dialog .coins-title h2 {
  white-space: nowrap;
}

.dialog-panel.coins-dialog .coins-title p {
  display: block;
  max-width: 320px;
}

.coins-balance-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 13px 18px;
  border: 2px solid var(--modal-border);
  border-radius: var(--modal-radius);
  background: var(--modal-card-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 0 rgba(8, 21, 26, 0.12);
}

.coins-balance-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  border: 3px solid #8a4b00;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 52% 56%, #ffd86a 0 48%, #e99519 70%, #9a5705 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    0 3px 0 rgba(97, 55, 0, 0.38);
}

.coins-balance-icon::before {
  content: "\2605";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(127, 76, 0, 0.34);
  border-radius: 50%;
  color: #c37a0a;
  background: rgba(255, 230, 120, 0.45);
  font-size: 1.1rem;
  line-height: 1;
}

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

.coins-balance-copy span {
  color: var(--modal-muted-color);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.1;
}

.coins-balance-copy strong {
  color: var(--modal-text-color);
  font-size: clamp(2rem, 7vw, 2.42rem);
  font-weight: 850;
  line-height: 0.96;
}

.dialog-panel.coins-dialog .earn-coin-packages {
  gap: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dialog-panel.coins-dialog .earn-coin-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(116px, 136px);
  min-height: 70px;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
  width: 100%;
  color: var(--modal-text-color);
  text-align: left;
  cursor: pointer;
  text-shadow: none;
}

.dialog-panel.coins-dialog .earn-coin-row:hover {
  transform: translateY(-1px);
  filter: brightness(1.01);
}

.dialog-panel.coins-dialog .earn-coin-row:active {
  transform: translateY(1px);
}

.earn-coin-copy {
  display: grid;
  min-width: 0;
}

.dialog-panel.coins-dialog .earn-coin-row strong {
  color: var(--modal-text-color);
  font-size: 1.34rem;
  font-weight: var(--modal-heading-weight);
  line-height: 1.05;
}

.coin-offer-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
}

.coin-offer-icon-ad {
  background: #dff7ee;
}

.coin-offer-icon-ad::before {
  content: "";
  width: 28px;
  height: 24px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 3px, transparent 3px 7px, rgba(255, 255, 255, 0.9) 7px 10px, transparent 10px 100%),
    linear-gradient(#4fd598, #13a66d);
  box-shadow: inset 0 0 0 2px rgba(0, 110, 72, 0.2);
}

.coin-offer-icon-ad::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #ffffff;
}

.coin-offer-icon-cart {
  color: #b77708;
  background: #fff0be;
}

.coin-offer-icon-cart::before {
  content: "";
  width: 23px;
  height: 18px;
  border: 3px solid #bf7d08;
  border-top: 0;
  border-radius: 2px 2px 5px 5px;
  transform: skewX(-8deg);
}

.coin-offer-icon-cart::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bf7d08;
  box-shadow: 13px 0 0 #bf7d08;
}

.dialog-panel.coins-dialog .coin-earn-action {
  display: inline-grid;
  place-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0.4rem 0.72rem;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(#32d187, #12945e 60%, #066944);
  box-shadow:
    0 4px 0 #06402f,
    inset 0 2px 0 rgba(255, 255, 255, 0.24);
  text-align: center;
}

.dialog-panel.coins-dialog .coin-pay-action {
  color: #281600;
  background: linear-gradient(#ffd969, #f3ad2b 58%, #c77b17);
  box-shadow:
    0 4px 0 rgba(109, 63, 0, 0.78),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.dialog-panel.signout-dialog {
  --modal-title-size: clamp(1.82rem, 4.6vw, 2.08rem);
  --modal-button-height: 52px;
}

.dialog-panel.settings-dialog .settings-control-row {
  min-height: var(--modal-row-min);
  padding: 10px 14px;
}

.dialog-panel.settings-dialog .settings-control-list {
  gap: 12px;
}

.dialog-panel.settings-dialog .settings-refresh-action {
  background: linear-gradient(#32d187, #12945e 60%, #066944);
  box-shadow:
    0 4px 0 #06402f,
    inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

@media (max-width: 620px) {
  .profile-edit-window {
    gap: 12px;
  }

  .profile-edit-window .profile-window-title h2 {
    font-size: 1.58rem;
  }

  .profile-edit-window .profile-window-title p,
  .profile-edit-field label,
  .profile-edit-label,
  .profile-lock-note {
    font-size: 0.78rem;
  }

  .profile-edit-input {
    min-height: 36px;
    font-size: 0.9rem;
  }

  .guest-profile-edit-icons {
    grid-template-columns: repeat(3, 58px);
    gap: 12px;
  }

  .signed-profile-edit-icons {
    grid-template-columns: repeat(3, 48px);
    gap: 10px 12px;
  }

  .profile-edit-carousel {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 6px;
    min-height: 68px;
    padding: 4px 2px 6px;
  }

  .profile-icon-scroll-btn {
    min-height: 48px;
    font-size: 0.72rem;
  }

  .profile-edit-icon-option {
    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;
  }

  .signed-profile-edit-icons .profile-edit-icon-option {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }

  .profile-edit-icon-option .profile-icon.option {
    width: 56px;
    height: 56px;
  }

  .signed-profile-edit-icons .profile-icon.option {
    width: 48px;
    height: 48px;
  }

  .profile-selected-check {
    width: 22px;
    height: 22px;
  }

  .profile-selected-check::before {
    left: 6px;
    top: 4px;
    width: 7px;
    height: 11px;
  }

  .profile-edit-window .profile-actions {
    gap: 12px;
  }

  .profile-edit-window .profile-actions button {
    min-height: 44px;
    font-size: 0.94rem;
  }
}

body.is-mobile-device .dialog-panel.profile-dialog-panel,
body.is-mobile-device .dialog-panel.coins-dialog,
body.is-mobile-device .dialog-panel.signout-dialog,
body.is-mobile-device .dialog-panel.settings-dialog,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog {
  max-height: calc(var(--koop-vh, 100dvh) - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  padding: clamp(12px, 3vh, 18px);
  border-radius: 16px;
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .dialog-close,
body.is-mobile-device .dialog-panel.coins-dialog .dialog-close,
body.is-mobile-device .dialog-panel.signout-dialog .dialog-close,
body.is-mobile-device .dialog-panel.settings-dialog .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .dialog-close {
  top: clamp(12px, 2.7vh, 18px);
  right: clamp(12px, 2.7vh, 18px);
  width: clamp(32px, 8.5vh, 36px);
  min-width: clamp(32px, 8.5vh, 36px);
  height: clamp(32px, 8.5vh, 36px);
  min-height: clamp(32px, 8.5vh, 36px);
  padding: 0;
  font-size: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .dialog-close::before,
body.is-mobile-device .dialog-panel.coins-dialog .dialog-close::before,
body.is-mobile-device .dialog-panel.signout-dialog .dialog-close::before,
body.is-mobile-device .dialog-panel.settings-dialog .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .dialog-close::before {
  font-size: clamp(1.35rem, 4.4vh, 1.7rem);
}

body.is-mobile-device .settings-window,
body.is-mobile-device.is-mobile-landscape .settings-window {
  gap: clamp(9px, 2.4vh, 14px);
}

body.is-mobile-device .settings-title,
body.is-mobile-device.is-mobile-landscape .settings-title {
  min-height: 34px;
  padding-right: clamp(44px, 11vh, 54px);
}

body.is-mobile-device .settings-title h2,
body.is-mobile-device.is-mobile-landscape .settings-title h2 {
  font-size: clamp(1.35rem, 6vh, 2rem);
}

body.is-mobile-device .settings-title p,
body.is-mobile-device.is-mobile-landscape .settings-title p {
  font-size: clamp(0.76rem, 2.6vh, 0.92rem);
}

body.is-mobile-device .settings-control-list,
body.is-mobile-device.is-mobile-landscape .settings-control-list {
  gap: clamp(8px, 2vh, 11px);
}

body.is-mobile-device .settings-control-row,
body.is-mobile-device.is-mobile-landscape .settings-control-row {
  min-height: clamp(44px, 10.4vh, 56px);
  padding: clamp(7px, 1.8vh, 10px) clamp(9px, 2.3vh, 13px);
  border-width: 2px;
}

body.is-mobile-device .settings-control-row label,
body.is-mobile-device.is-mobile-landscape .settings-control-row label {
  font-size: clamp(0.8rem, 3.2vh, 1rem);
}

body.is-mobile-device .settings-control-row small,
body.is-mobile-device.is-mobile-landscape .settings-control-row small,
body.is-mobile-device .settings-note,
body.is-mobile-device.is-mobile-landscape .settings-note {
  font-size: clamp(0.66rem, 2.3vh, 0.82rem);
}

body.is-mobile-device .settings-toggle,
body.is-mobile-device.is-mobile-landscape .settings-toggle {
  width: clamp(52px, 13.2vh, 60px);
  height: clamp(28px, 7vh, 32px);
  border-width: 2px;
}

body.is-mobile-device .settings-toggle::before,
body.is-mobile-device.is-mobile-landscape .settings-toggle::before {
  top: 3px;
  left: 4px;
  width: clamp(18px, 4.7vh, 22px);
  height: clamp(18px, 4.7vh, 22px);
  border-width: 2px;
}

body.is-mobile-device .settings-toggle:checked::before,
body.is-mobile-device.is-mobile-landscape .settings-toggle:checked::before {
  transform: translateX(clamp(22px, 6vh, 28px));
}

body.is-mobile-device .settings-refresh-action,
body.is-mobile-device.is-mobile-landscape .settings-refresh-action {
  min-height: clamp(42px, 9.6vh, 52px);
  font-size: clamp(0.82rem, 3vh, 1rem);
}

body.is-mobile-device .settings-room-actions,
body.is-mobile-device.is-mobile-landscape .settings-room-actions {
  gap: 8px;
}

body.is-mobile-device .settings-secondary-action,
body.is-mobile-device.is-mobile-landscape .settings-secondary-action {
  min-height: clamp(38px, 8.8vh, 46px);
  font-size: clamp(0.68rem, 2.5vh, 0.86rem);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel,
body.is-mobile-device .dialog-panel.coins-dialog,
body.is-mobile-device .dialog-panel.signout-dialog,
body.is-mobile-device .dialog-panel.settings-dialog,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog {
  --modal-title-size: clamp(1.42rem, 6vh, 1.95rem);
  --modal-subtitle-size: clamp(0.72rem, 2.7vh, 0.9rem);
  --modal-label-size: clamp(0.76rem, 2.7vh, 0.9rem);
  --modal-button-height: clamp(42px, 9.5vh, 48px);
  --modal-row-min: clamp(52px, 11.5vh, 60px);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-window,
body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-edit-window,
body.is-mobile-device .dialog-panel.coins-dialog .coins-window,
body.is-mobile-device .dialog-panel.coins-dialog .coin-packages,
body.is-mobile-device .dialog-panel.settings-dialog .settings-window,
body.is-mobile-device .dialog-panel.signout-dialog .signout-window,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-window,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-edit-window,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-window,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coin-packages,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .settings-window,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog .signout-window {
  gap: clamp(9px, 2.4vh, 12px);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-window-title,
body.is-mobile-device .dialog-panel.coins-dialog .coins-title,
body.is-mobile-device .dialog-panel.settings-dialog .settings-title,
body.is-mobile-device .dialog-panel.signout-dialog .signout-title,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-window-title,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .settings-title,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog .signout-title {
  min-height: 34px;
  padding-right: clamp(44px, 11vh, 54px);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-title,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title {
  display: grid;
  gap: clamp(3px, 1vh, 5px);
  min-height: 0;
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-title p,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title p {
  display: block;
  max-width: min(320px, calc(100vw - 110px));
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-window-title h2,
body.is-mobile-device .dialog-panel.coins-dialog .coins-title h2,
body.is-mobile-device .dialog-panel.settings-dialog .settings-title h2,
body.is-mobile-device .dialog-panel.signout-dialog .signout-title h2,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-window-title h2,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title h2,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .settings-title h2,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog .signout-title h2 {
  font-size: var(--modal-title-size);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-window-title p,
body.is-mobile-device .dialog-panel.coins-dialog .coins-title p,
body.is-mobile-device .dialog-panel.settings-dialog .settings-title p,
body.is-mobile-device .dialog-panel.signout-dialog .signout-title p,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-window-title p,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title p,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .settings-title p,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog .signout-title p {
  font-size: var(--modal-subtitle-size);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-summary-card,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-summary-card {
  min-height: clamp(62px, 15vh, 78px);
  gap: 9px;
  padding: clamp(8px, 2vh, 10px);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-stat,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-stat {
  min-height: clamp(50px, 11vh, 64px);
  padding: clamp(8px, 2vh, 10px);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-stat strong,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-stat strong {
  font-size: clamp(1rem, 3.7vh, 1.3rem);
}

body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-actions button,
body.is-mobile-device .dialog-panel.profile-dialog-panel .profile-edit-window .profile-actions button,
body.is-mobile-device .dialog-panel.coins-dialog .coin-earn-action,
body.is-mobile-device .dialog-panel.signout-dialog .signout-actions button,
body.is-mobile-device .dialog-panel.settings-dialog .settings-refresh-action,
body.is-mobile-device .dialog-panel.settings-dialog .settings-secondary-action,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-actions button,
body.is-mobile-device.is-mobile-landscape .dialog-panel.profile-dialog-panel .profile-edit-window .profile-actions button,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coin-earn-action,
body.is-mobile-device.is-mobile-landscape .dialog-panel.signout-dialog .signout-actions button,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .settings-refresh-action,
body.is-mobile-device.is-mobile-landscape .dialog-panel.settings-dialog .settings-secondary-action {
  min-height: var(--modal-button-height);
  font-size: clamp(0.78rem, 2.8vh, 0.98rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .earn-coin-row,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .earn-coin-row {
  grid-template-columns: clamp(36px, 9vh, 44px) minmax(0, 1fr) minmax(88px, 31%);
  min-height: clamp(54px, 12vh, 64px);
  gap: clamp(7px, 1.9vh, 10px);
  padding: clamp(8px, 2vh, 10px) clamp(10px, 2.6vh, 14px);
}

body.is-mobile-device .dialog-panel.coins-dialog .earn-coin-row strong,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .earn-coin-row strong {
  font-size: clamp(0.98rem, 3.8vh, 1.28rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .earn-coin-row small,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .earn-coin-row small {
  font-size: clamp(0.66rem, 2.35vh, 0.8rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-title .coin-chip,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-title .coin-chip {
  width: clamp(20px, 5.4vh, 24px);
  min-width: clamp(20px, 5.4vh, 24px);
  height: clamp(20px, 5.4vh, 24px);
  font-size: clamp(0.58rem, 1.9vh, 0.72rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-balance-card,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-balance-card {
  min-height: clamp(58px, 13vh, 74px);
  gap: clamp(8px, 2vh, 12px);
  padding: clamp(9px, 2.4vh, 12px) clamp(12px, 3vh, 16px);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-balance-icon,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-balance-icon {
  width: clamp(42px, 10.5vh, 52px);
  min-width: clamp(42px, 10.5vh, 52px);
  height: clamp(42px, 10.5vh, 52px);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-balance-icon::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-balance-icon::before {
  width: clamp(23px, 5.6vh, 28px);
  height: clamp(23px, 5.6vh, 28px);
  font-size: clamp(0.84rem, 2.6vh, 1.05rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-balance-copy span,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-balance-copy span {
  font-size: clamp(0.68rem, 2.3vh, 0.82rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .coins-balance-copy strong,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coins-balance-copy strong {
  font-size: clamp(1.52rem, 5.4vh, 2rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .coin-offer-icon,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coin-offer-icon {
  width: clamp(34px, 8.4vh, 42px);
  min-width: clamp(34px, 8.4vh, 42px);
  height: clamp(34px, 8.4vh, 42px);
}

body.is-mobile-device .dialog-panel.coins-dialog .coin-offer-icon-ad::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coin-offer-icon-ad::before {
  width: clamp(22px, 5.5vh, 27px);
  height: clamp(18px, 4.8vh, 23px);
}

body.is-mobile-device .dialog-panel.coins-dialog .coin-offer-icon-cart::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coin-offer-icon-cart::before {
  font-size: clamp(1rem, 3.5vh, 1.35rem);
}

body.is-mobile-device .dialog-panel.coins-dialog .coin-earn-action,
body.is-mobile-device.is-mobile-landscape .dialog-panel.coins-dialog .coin-earn-action {
  min-height: clamp(36px, 8.4vh, 44px);
  padding: 0.3rem 0.5rem;
}

/* New lobby screen: 16:9 stage with room code, player cards, and invite slots. */
body[data-screen="lobby"] {
  background:
    radial-gradient(circle at 50% 8%, rgba(247, 201, 72, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(0, 10, 8, 0.4), rgba(0, 14, 9, 0.88)),
    url("koops-table-bg.svg") center / cover fixed no-repeat,
    #00130d;
}

body[data-screen="lobby"] .app-shell {
  width: min(1618px, calc(100vw - 24px), calc((var(--koop-vh, 100vh) - 82px) * 16 / 9));
  height: auto !important;
  min-height: 0;
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-rows: minmax(142px, 20%) minmax(0, 1fr);
  gap: 0;
  margin-top: 10px;
  margin-bottom: 72px;
  padding: clamp(18px, 2vw, 38px);
  border: 7px solid #f6bd21;
  border-radius: 16px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 17%, rgba(24, 65, 48, 0.42), transparent 18rem),
    radial-gradient(circle at 52% 46%, rgba(17, 93, 54, 0.22), transparent 28rem),
    linear-gradient(90deg, rgba(0, 23, 14, 0.96), rgba(0, 36, 21, 0.92) 50%, rgba(0, 20, 13, 0.96));
  box-shadow: inset 0 0 34px rgba(58, 255, 105, 0.12), 0 12px 0 var(--ink);
}

body[data-screen="lobby"] .app-shell::before {
  display: none;
}

body[data-screen="lobby"] .hero {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: start;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body[data-screen="lobby"] .hero::before {
  display: none;
}

body[data-screen="lobby"] .home-player-strip {
  grid-column: 1;
  justify-self: start;
}

body[data-screen="lobby"] .hero-brand {
  grid-column: 2;
  grid-template-columns: 1fr;
  justify-items: center;
  justify-self: center;
  align-self: start;
  gap: 0;
}

body[data-screen="lobby"] .hero-emblem {
  width: clamp(150px, 14vw, 230px);
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.58));
}

body[data-screen="lobby"] .hero-emblem img {
  max-height: clamp(132px, 13vw, 212px);
  object-fit: contain;
}

body[data-screen="lobby"] .hero-copy {
  display: none;
}

body[data-screen="lobby"] .hero-actions {
  grid-column: 3;
  justify-self: end;
  align-self: start;
}

body[data-screen="lobby"] #guestProfileBtn,
body[data-screen="lobby"] #closeAccountMenuBtn {
  display: none !important;
}

body[data-screen="lobby"] {
  --home-header-button-height: 58px;
}

body[data-screen="lobby"] .home-player-pill,
body[data-screen="lobby"] .home-signin-btn,
body[data-screen="lobby"] .account-action-row .tool-btn:not(.coin-menu-btn),
body[data-screen="lobby"] .coin-menu-btn {
  height: var(--home-header-button-height) !important;
  min-height: var(--home-header-button-height) !important;
  max-height: var(--home-header-button-height) !important;
}

body[data-screen="lobby"] .home-player-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(320px, 25vw);
  padding: 0.34rem 1.05rem;
  overflow: hidden;
  border: 2px solid #f4cc1d;
  border-radius: 20px;
  color: #eef8ee;
  background: rgba(3, 18, 13, 0.82);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.18);
  text-shadow: none;
}

body[data-screen="lobby"] .home-player-pill .account-mini-avatar {
  width: 42px;
  min-width: 42px;
  height: 42px;
  margin: 0;
}

body[data-screen="lobby"] .home-player-name {
  color: #eef8ee;
  font-size: 1rem;
  font-weight: 900;
}

body[data-screen="lobby"] .home-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  border-radius: 18px;
}

body[data-screen="lobby"] .account-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 1.7vw, 26px);
}

body[data-screen="lobby"] .account-action-row #settingsBtn,
body[data-screen="lobby"] .account-action-row #infoBtn {
  flex: 0 0 var(--home-header-button-height) !important;
  width: var(--home-header-button-height) !important;
  min-width: var(--home-header-button-height) !important;
  max-width: var(--home-header-button-height) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="lobby"] .account-action-row #settingsBtn::before,
body[data-screen="lobby"] .account-action-row #infoBtn::before {
  width: calc(var(--home-header-button-height) - 2px) !important;
  height: calc(var(--home-header-button-height) - 2px) !important;
  border: 2px solid rgba(247, 179, 26, 0.88) !important;
  color: #ffd64a !important;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 219, 80, 0.13) 0 22%, rgba(255, 219, 80, 0) 43%),
    linear-gradient(180deg, rgba(1, 30, 22, 0.78), rgba(0, 14, 12, 0.9)) !important;
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 215, 76, 0.14),
    inset 0 0 12px rgba(255, 190, 31, 0.09) !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.46),
    0 0 9px rgba(255, 209, 60, 0.28) !important;
}

body[data-screen="lobby"] .account-action-row #settingsBtn::before {
  content: "\2699" !important;
  font-size: calc(var(--home-header-button-height) * 0.5) !important;
}

body[data-screen="lobby"] .account-action-row #infoBtn::before {
  content: "i" !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--home-header-button-height) * 0.58) !important;
  font-style: normal;
  font-weight: 950;
}

body[data-screen="lobby"] .account-action-row .coin-menu-btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: clamp(150px, 11.5vw, 178px) !important;
  max-width: clamp(150px, 11.5vw, 178px) !important;
  padding: 0 1.35rem !important;
  border: 2px solid rgba(80, 43, 0, 0.55) !important;
  border-radius: 16px !important;
  color: #211000 !important;
  background:
    radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%),
    linear-gradient(#fff4b8, #f3c450 52%, #d58918) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.48),
    inset 0 2px 0 rgba(255, 255, 255, 0.36) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="lobby"] .account-action-row .coin-menu-btn .coin-chip {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 2px solid rgba(80, 43, 0, 0.66);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffd75a, #e59418 68%, #995704 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 2px 0 rgba(92, 52, 0, 0.38);
  font-size: 0;
}

body[data-screen="lobby"] .account-action-row .coin-menu-btn .coin-chip::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe990 0 42%, #b96a08 46% 100%);
}

body[data-screen="lobby"] .account-action-row .coin-menu-value {
  min-width: 54px;
  color: #211000;
  font-size: 1.18rem;
  font-weight: 950;
  text-align: right;
}

body[data-screen="lobby"] .lobby-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 2.4vh, 32px);
  min-height: 0;
  padding: 0 clamp(18px, 2vw, 42px) clamp(14px, 1.8vw, 26px);
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body[data-screen="lobby"] .lobby-panel::before {
  display: none;
}

body[data-screen="lobby"] .lobby-title {
  display: none;
}

body[data-screen="lobby"] .lobby-room-top {
  display: flex;
  justify-content: center;
  margin-top: clamp(-14px, -0.8vw, -6px);
}

body[data-screen="lobby"] .lobby-room-badge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label copy"
    "code copy";
  align-items: center;
  min-width: clamp(300px, 21vw, 382px);
  padding: 12px 18px 12px 28px;
  border: 4px solid rgba(247, 201, 72, 0.88);
  border-radius: 26px;
  color: #fff9d9;
  text-align: left;
  background:
    radial-gradient(circle at 84% 22%, rgba(72, 255, 122, 0.16), transparent 8rem),
    linear-gradient(90deg, rgba(1, 32, 22, 0.96), rgba(1, 51, 30, 0.88));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.24),
    inset 0 0 22px rgba(50, 255, 112, 0.09);
}

body[data-screen="lobby"] .lobby-room-badge span {
  grid-area: label;
  color: rgba(246, 255, 246, 0.76);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}

body[data-screen="lobby"] .lobby-room-badge strong {
  grid-area: code;
  color: #ffd35b;
  font-size: clamp(2.2rem, 3.25vw, 3.35rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 0.98;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.48), 0 0 14px rgba(255, 198, 44, 0.24);
}

.lobby-copy-code-btn {
  grid-area: copy;
  position: relative;
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  border: 2px solid rgba(247, 201, 72, 0.72);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(247, 201, 72, 0.18), transparent 48%),
    rgba(1, 38, 25, 0.82);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.34),
    inset 0 0 12px rgba(247, 201, 72, 0.1);
}

.lobby-copy-code-btn::before,
.lobby-copy-code-btn::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 25px;
  border: 3px solid #f7c948;
  border-radius: 5px;
}

.lobby-copy-code-btn::before {
  left: 17px;
  top: 15px;
}

.lobby-copy-code-btn::after {
  left: 23px;
  top: 21px;
  background: rgba(1, 38, 25, 0.86);
}

body[data-screen="lobby"] .lobby-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2.3vw, 34px);
  align-self: center;
  justify-self: center;
  width: min(1268px, 100%);
  min-height: 0;
  overflow: visible;
}

.lobby-slot-card {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: clamp(230px, 22vw, 330px);
  padding: clamp(18px, 1.8vw, 30px);
  border: 3px solid rgba(119, 184, 146, 0.56);
  border-radius: 28px;
  color: #f7fff5;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(74, 255, 120, 0.18), transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.44), transparent 64%),
    linear-gradient(180deg, rgba(1, 48, 29, 0.74), rgba(0, 18, 12, 0.88));
  box-shadow:
    inset 0 0 30px rgba(88, 255, 135, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.22);
}

.lobby-player-card {
  border-color: #37ff66;
  box-shadow:
    inset 0 0 34px rgba(65, 255, 111, 0.12),
    0 0 0 1px rgba(55, 255, 102, 0.2),
    0 0 28px rgba(41, 255, 95, 0.32),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.lobby-slot-card .lobby-avatar,
.lobby-slot-card .player-avatar {
  width: clamp(78px, 6.8vw, 106px);
  height: clamp(78px, 6.8vw, 106px);
  border: 3px solid rgba(255, 234, 118, 0.88);
  border-radius: 50%;
  background: linear-gradient(#ffe773, #d58b16);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.38),
    0 0 20px rgba(255, 214, 72, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.lobby-slot-card .lobby-avatar .profile-icon.mini {
  width: calc(clamp(78px, 6.8vw, 106px) - 10px);
  height: calc(clamp(78px, 6.8vw, 106px) - 10px);
}

.lobby-slot-name {
  max-width: 100%;
  overflow: hidden;
  color: #fffaf0;
  font-size: clamp(1.05rem, 1.45vw, 1.55rem);
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.62);
  white-space: nowrap;
}

.lobby-slot-card .lobby-coin-box {
  min-height: 32px;
  padding: 4px 10px 5px;
  border: 0;
  color: #ffd66a;
  background: transparent;
  box-shadow: none;
  font-size: clamp(1rem, 1.25vw, 1.28rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.54);
}

.lobby-slot-card .lobby-coin-box .coin-chip {
  width: 28px;
  height: 28px;
  border-color: rgba(92, 52, 0, 0.68);
  font-size: 0;
}

.lobby-slot-card .lobby-coin-box .coin-chip::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe990 0 42%, #b96a08 46% 100%);
}

.lobby-slot-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
}

.lobby-slot-badges .badge {
  min-width: 84px;
  min-height: 34px;
  border-width: 2px;
  border-radius: 9px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62);
  font-size: 0.9rem;
}

.lobby-ready-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 160px;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid rgba(32, 185, 71, 0.4);
  border-radius: 999px;
  color: #49ff75;
  background: rgba(0, 22, 13, 0.64);
  box-shadow: inset 0 0 18px rgba(45, 255, 95, 0.08);
  font-size: 1.1rem;
  font-weight: 950;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.lobby-ready-pill > span {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #24ff63;
  box-shadow: 0 0 12px rgba(36, 255, 99, 0.6);
}

.lobby-ready-pill.offline {
  color: #f5b0a7;
  border-color: rgba(220, 73, 62, 0.42);
}

.lobby-ready-pill.offline > span {
  background: #d8483a;
  box-shadow: 0 0 12px rgba(216, 72, 58, 0.5);
}

.lobby-invite-card {
  border-color: rgba(137, 194, 159, 0.42);
  color: rgba(246, 255, 247, 0.86);
}

.lobby-waiting-icon {
  position: relative;
  width: clamp(78px, 6vw, 104px);
  height: clamp(78px, 6vw, 104px);
  border: 2px dashed rgba(89, 214, 125, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, rgba(113, 230, 152, 0.78) 0 15%, transparent 16%),
    radial-gradient(ellipse at 50% 72%, rgba(113, 230, 152, 0.62) 0 28%, transparent 29%),
    radial-gradient(circle, rgba(77, 255, 124, 0.12), rgba(77, 255, 124, 0) 62%);
}

.lobby-waiting-icon::before,
.lobby-waiting-icon::after {
  content: "";
  position: absolute;
  bottom: 18%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(93, 220, 140, 0.72);
  box-shadow: 0 0 10px rgba(93, 220, 140, 0.34);
  animation: waitingPulse 1.8s ease-in-out infinite;
}

.lobby-waiting-icon::before {
  left: 27%;
}

.lobby-waiting-icon::after {
  right: 27%;
  animation-delay: 0.25s;
}

@keyframes waitingPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0) scale(0.86);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
  }
}

.lobby-invite-card p {
  margin: -2px 0 10px;
  color: rgba(246, 255, 247, 0.72);
  font-size: clamp(0.88rem, 1.1vw, 1.08rem);
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

.lobby-invite-btn {
  min-width: 178px;
  min-height: 54px;
  padding: 0.5rem 1rem;
  border: 2px solid rgba(59, 213, 95, 0.62);
  border-radius: 13px;
  color: #5cff84;
  background: rgba(0, 23, 14, 0.72);
  box-shadow:
    inset 0 0 18px rgba(45, 255, 95, 0.08),
    0 4px 0 rgba(0, 0, 0, 0.34);
  font-size: 1rem;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

body[data-screen="lobby"] .lobby-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-top: clamp(18px, 2.1vh, 30px);
  margin: 0;
}

body[data-screen="lobby"] .lobby-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(247, 201, 72, 0), rgba(247, 201, 72, 0.72), rgba(247, 201, 72, 0));
}

body[data-screen="lobby"] .lobby-actions::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #f7c948;
  box-shadow: 0 0 10px rgba(247, 201, 72, 0.7);
  transform: translateX(-50%) rotate(45deg);
}

body[data-screen="lobby"] .lobby-secondary-actions,
body[data-screen="lobby"] .lobby-primary-actions {
  display: flex;
  align-items: end;
  gap: clamp(14px, 1.4vw, 24px);
}

body[data-screen="lobby"] .lobby-start-stack {
  display: grid;
  justify-items: center;
  gap: 8px;
}

body[data-screen="lobby"] #leaveBtn,
body[data-screen="lobby"] #removePlayersBtn,
body[data-screen="lobby"] #shareRoomBtn,
body[data-screen="lobby"] #startGameBtn {
  min-width: clamp(210px, 17vw, 300px);
  min-height: 72px;
  padding: 0.7rem 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.46),
    inset 0 2px 0 rgba(255, 255, 255, 0.24);
  font-size: clamp(1rem, 1.55vw, 1.48rem);
  font-weight: 950;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.38);
}

body[data-screen="lobby"] #leaveBtn::before,
body[data-screen="lobby"] #shareRoomBtn::before,
body[data-screen="lobby"] #startGameBtn::before {
  display: inline-grid;
  place-items: center;
  margin-right: 12px;
  font-size: 1.2em;
}

body[data-screen="lobby"] #leaveBtn::before {
  content: "\21b1";
}

body[data-screen="lobby"] #shareRoomBtn::before {
  content: "+";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #0c6a39;
  background: rgba(234, 255, 236, 0.82);
  text-shadow: none;
}

body[data-screen="lobby"] #startGameBtn::before {
  content: "";
  width: 44px;
  height: 44px;
  margin-right: 14px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, #fff 0 0) 57% 50% / 0 0 no-repeat,
    conic-gradient(from 90deg at 36% 50%, transparent 0 25%, #ffffff 0 75%, transparent 0),
    linear-gradient(#39f04f, #14b92e);
  clip-path: circle(50%);
}

body[data-screen="lobby"] #shareRoomBtn {
  background: linear-gradient(#38ce83, #0f814d 62%, #075733);
}

body[data-screen="lobby"] #startGameBtn {
  color: #2e1600;
  background: linear-gradient(#fff0a2, #f0b63a 56%, #d88b18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}

body[data-screen="lobby"] #hostHint {
  max-width: 320px;
  margin: 0;
  color: #f7fff5;
  font-size: clamp(0.78rem, 1vw, 0.98rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.48);
}

body[data-screen="lobby"] .app-footer {
  position: absolute;
  display: grid !important;
  left: 30px;
  bottom: -58px;
  z-index: 3;
  width: max-content;
  margin: 0;
}

body[data-screen="lobby"] .install-app-btn {
  min-width: 116px !important;
  width: auto !important;
  min-height: 42px !important;
  height: 42px;
  gap: 9px;
  padding: 0 18px;
  border: 1.5px solid #31e978;
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(21, 111, 68, 0.92), rgba(3, 57, 36, 0.96)),
    #063b27;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 20px rgba(0, 0, 0, 0.24);
  text-shadow: none;
}

@media (max-width: 900px) {
  body[data-screen="lobby"] {
    --home-header-button-height: clamp(34px, 8vh, 42px);
  }

  body[data-screen="lobby"] .app-shell {
    width: min(calc(100vw - 8px), calc((var(--koop-vh, 100vh) - 44px) * 16 / 9));
    height: auto !important;
    grid-template-rows: minmax(82px, 21%) minmax(0, 1fr);
    margin-top: 4px;
    margin-bottom: 44px;
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-width: 4px;
    border-radius: 12px;
    box-shadow: inset 0 0 24px rgba(58, 255, 105, 0.1), 0 6px 0 var(--ink);
  }

  body[data-screen="lobby"] .hero {
    grid-template-columns: minmax(120px, 1fr) auto minmax(128px, 1fr);
  }

  body[data-screen="lobby"] .hero-emblem {
    width: clamp(74px, 15vw, 122px);
  }

  body[data-screen="lobby"] .hero-emblem img {
    max-height: clamp(68px, 14vw, 112px);
  }

  body[data-screen="lobby"] .home-player-strip {
    gap: 5px;
  }

  body[data-screen="lobby"] .home-player-pill {
    max-width: 170px;
    gap: 6px;
    padding-inline: 0.42rem;
    border-radius: 14px;
  }

  body[data-screen="lobby"] .home-player-pill .account-mini-avatar {
    width: clamp(24px, 6vh, 30px);
    min-width: clamp(24px, 6vh, 30px);
    height: clamp(24px, 6vh, 30px);
  }

  body[data-screen="lobby"] .home-player-name {
    font-size: clamp(0.58rem, 2vh, 0.82rem);
  }

  body[data-screen="lobby"] .account-action-row {
    gap: clamp(5px, 0.9vw, 9px);
  }

  body[data-screen="lobby"] .account-action-row .coin-menu-btn {
    min-width: clamp(82px, 17vw, 104px) !important;
    max-width: clamp(82px, 17vw, 104px) !important;
    gap: 6px;
    padding-inline: 0.46rem !important;
  }

  body[data-screen="lobby"] .account-action-row .coin-menu-btn .coin-chip {
    width: clamp(20px, 5.2vh, 25px);
    min-width: clamp(20px, 5.2vh, 25px);
    height: clamp(20px, 5.2vh, 25px);
  }

  body[data-screen="lobby"] .account-action-row .coin-menu-value {
    min-width: 34px;
    font-size: clamp(0.62rem, 2vh, 0.82rem);
  }

  body[data-screen="lobby"] .lobby-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(6px, 1.35vh, 11px);
    padding: 0 clamp(7px, 1.4vw, 12px) clamp(5px, 1vh, 8px);
  }

  body[data-screen="lobby"] .lobby-room-top {
    margin-top: -4px;
  }

  body[data-screen="lobby"] .lobby-room-badge {
    min-width: clamp(162px, 27vw, 260px);
    padding: 6px 9px 6px 14px;
    border-width: 3px;
    border-radius: 16px;
  }

  body[data-screen="lobby"] .lobby-room-badge span {
    font-size: clamp(0.5rem, 1.6vh, 0.66rem);
  }

  body[data-screen="lobby"] .lobby-room-badge strong {
    font-size: clamp(1.2rem, 4.8vh, 1.8rem);
  }

  .lobby-copy-code-btn {
    width: clamp(34px, 8vh, 44px);
    min-width: clamp(34px, 8vh, 44px);
    height: clamp(34px, 8vh, 44px);
    min-height: clamp(34px, 8vh, 44px);
    border-radius: 10px;
  }

  .lobby-copy-code-btn::before,
  .lobby-copy-code-btn::after {
    width: 12px;
    height: 16px;
    border-width: 2px;
  }

  .lobby-copy-code-btn::before {
    left: 10px;
    top: 9px;
  }

  .lobby-copy-code-btn::after {
    left: 15px;
    top: 14px;
  }

  body[data-screen="lobby"] .lobby-players {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(7px, 1.4vw, 12px);
    width: min(100%, 1020px);
  }

  .lobby-slot-card {
    min-height: clamp(118px, 31vh, 184px);
    gap: clamp(3px, 0.8vh, 6px);
    padding: clamp(7px, 1.4vw, 11px);
    border-width: 2px;
    border-radius: 16px;
  }

  .lobby-slot-card .lobby-avatar,
  .lobby-slot-card .player-avatar,
  .lobby-waiting-icon {
    width: clamp(40px, 10.5vh, 64px);
    height: clamp(40px, 10.5vh, 64px);
    border-width: 2px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.34);
  }

  .lobby-slot-card .lobby-avatar .profile-icon.mini {
    width: clamp(34px, 9vh, 56px);
    height: clamp(34px, 9vh, 56px);
  }

  .lobby-slot-name {
    font-size: clamp(0.58rem, 2.25vh, 0.88rem);
  }

  .lobby-slot-card .lobby-coin-box {
    min-height: 22px;
    font-size: clamp(0.58rem, 2.1vh, 0.82rem);
  }

  .lobby-slot-card .lobby-coin-box .coin-chip {
    width: 18px;
    height: 18px;
  }

  .lobby-slot-badges {
    gap: 4px;
    min-height: 24px;
  }

  .lobby-slot-badges .badge {
    min-width: 42px;
    min-height: 21px;
    padding: 0.08rem 0.22rem;
    border-width: 1px;
    border-radius: 6px;
    font-size: clamp(0.44rem, 1.55vh, 0.58rem);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.52);
  }

  .lobby-ready-pill {
    min-width: clamp(76px, 14vw, 106px);
    min-height: clamp(24px, 6vh, 32px);
    gap: 5px;
    padding: 0 8px;
    font-size: clamp(0.5rem, 1.9vh, 0.72rem);
  }

  .lobby-ready-pill > span {
    width: 9px;
    height: 9px;
  }

  .lobby-invite-card p {
    margin-bottom: 4px;
    font-size: clamp(0.48rem, 1.7vh, 0.64rem);
  }

  .lobby-invite-btn {
    min-width: clamp(76px, 15vw, 106px);
    min-height: clamp(26px, 6.2vh, 34px);
    padding: 0.22rem 0.42rem;
    border-radius: 8px;
    font-size: clamp(0.5rem, 1.85vh, 0.72rem);
  }

  body[data-screen="lobby"] .lobby-actions {
    gap: 8px;
    padding-top: clamp(8px, 1.7vh, 12px);
  }

  body[data-screen="lobby"] .lobby-secondary-actions,
  body[data-screen="lobby"] .lobby-primary-actions {
    gap: 7px;
  }

  body[data-screen="lobby"] #leaveBtn,
  body[data-screen="lobby"] #removePlayersBtn,
  body[data-screen="lobby"] #shareRoomBtn,
  body[data-screen="lobby"] #startGameBtn {
    min-width: clamp(92px, 18vw, 142px);
    min-height: clamp(32px, 7.6vh, 42px);
    padding: 0.28rem 0.48rem;
    border-radius: 10px;
    font-size: clamp(0.55rem, 2vh, 0.78rem);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  body[data-screen="lobby"] #leaveBtn::before,
  body[data-screen="lobby"] #shareRoomBtn::before,
  body[data-screen="lobby"] #startGameBtn::before {
    margin-right: 6px;
  }

  body[data-screen="lobby"] #startGameBtn::before {
    width: 23px;
    height: 23px;
  }

  body[data-screen="lobby"] #hostHint {
    max-width: 150px;
    font-size: clamp(0.46rem, 1.65vh, 0.62rem);
  }

  body[data-screen="lobby"] .app-footer {
    display: grid !important;
    left: 16px;
    bottom: -42px;
  }

  body[data-screen="lobby"] .install-app-btn {
    min-width: 92px !important;
    min-height: 32px !important;
    height: 32px;
    padding-inline: 12px;
    font-size: 0.72rem;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .app-shell {
  width: min(calc(100vw - 8px), calc((var(--koop-vh, 100vh) - 44px) * 16 / 9)) !important;
  height: auto !important;
  grid-template-rows: minmax(82px, 21%) minmax(0, 1fr) !important;
  gap: 0 !important;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .hero {
  grid-template-columns: minmax(120px, 1fr) auto minmax(128px, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-panel {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(6px, 1.35vh, 11px) !important;
  height: auto !important;
  padding: 0 clamp(7px, 1.4vw, 12px) clamp(5px, 1vh, 8px) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .lobby-players {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-content: center !important;
  overflow: visible !important;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .app-footer {
  display: grid !important;
}

/* Migrated modal UI for guide, install, online, and lobby management popups. */
.dialog-panel.install-dialog-panel,
.dialog-panel.remove-dialog-panel,
.dialog-panel.online-dialog-panel,
.dialog-panel.guide-prompt-panel,
.dialog-panel.guide-step-dialog-panel,
.dialog-panel.info-dialog-panel {
  --modal-title-size: clamp(1.92rem, 4vw, 2.24rem);
  --modal-subtitle-size: clamp(0.92rem, 2vw, 1rem);
  --modal-label-size: 0.96rem;
  --modal-body-size: 1rem;
  --modal-button-height: 52px;
  --modal-radius: 10px;
  --modal-border: rgba(14, 31, 38, 0.16);
  --modal-card-bg: rgba(255, 255, 255, 0.72);
  --modal-title-weight: 880;
  --modal-heading-weight: 820;
  --modal-label-weight: 760;
  --modal-button-weight: 850;
  --modal-text-color: #10222d;
  --modal-muted-color: #53656d;
  width: min(560px, calc(100vw - 28px));
  max-height: min(640px, calc(100vh - 28px));
  padding: 22px;
  border: 3px solid rgba(3, 18, 17, 0.86);
  border-radius: 18px;
  color: var(--modal-text-color);
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 12rem),
    radial-gradient(circle at 92% 12%, rgba(242, 192, 66, 0.14), rgba(242, 192, 66, 0) 11rem),
    linear-gradient(135deg, #fffdf8 0%, #f2f6ef 48%, #e4f2ec 100%);
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.58),
    0 30px 78px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--modal-body-size);
  font-weight: 650;
  text-shadow: none;
}

.dialog-panel.install-dialog-panel,
.dialog-panel.online-dialog-panel {
  width: min(520px, calc(100vw - 28px));
}

.dialog-panel.guide-step-dialog-panel {
  width: min(620px, calc(100vw - 28px));
}

.dialog-panel.info-dialog-panel {
  width: min(900px, calc(100vw - 28px));
}

.dialog-panel.install-dialog-panel .dialog-close,
.dialog-panel.remove-dialog-panel .dialog-close,
.dialog-panel.online-dialog-panel .dialog-close,
.dialog-panel.guide-prompt-panel .dialog-close,
.dialog-panel.guide-step-dialog-panel .dialog-close,
.dialog-panel.info-dialog-panel .dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  float: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(14, 31, 38, 0.18);
  border-radius: 11px;
  color: transparent;
  background: linear-gradient(#ffffff, #eef4f0);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0;
}

.dialog-panel.install-dialog-panel .dialog-close::before,
.dialog-panel.remove-dialog-panel .dialog-close::before,
.dialog-panel.online-dialog-panel .dialog-close::before,
.dialog-panel.guide-prompt-panel .dialog-close::before,
.dialog-panel.guide-step-dialog-panel .dialog-close::before,
.dialog-panel.info-dialog-panel .dialog-close::before {
  content: "\00d7";
  color: #24353d;
  font-size: 1.7rem;
  font-weight: 850;
  line-height: 1;
  text-shadow: none;
}

.dialog-panel.install-dialog-panel .dialog-close:hover,
.dialog-panel.remove-dialog-panel .dialog-close:hover,
.dialog-panel.online-dialog-panel .dialog-close:hover,
.dialog-panel.guide-prompt-panel .dialog-close:hover,
.dialog-panel.guide-step-dialog-panel .dialog-close:hover,
.dialog-panel.info-dialog-panel .dialog-close:hover {
  background: linear-gradient(#fff9de, #f1d878);
  transform: translateY(-1px);
}

.modal-window {
  display: grid;
  gap: 14px;
  color: var(--modal-text-color);
}

.modal-window-title {
  display: grid;
  gap: 5px;
  min-height: 48px;
  padding-right: 54px;
}

.modal-window-title h2,
.modal-window-title p {
  margin: 0;
  font-family: inherit;
  letter-spacing: 0;
  text-shadow: none;
}

.modal-window-title h2 {
  color: var(--modal-text-color);
  font-size: var(--modal-title-size);
  font-weight: var(--modal-title-weight);
  line-height: 1.02;
}

.modal-window-title p {
  color: var(--modal-muted-color);
  font-size: var(--modal-subtitle-size);
  font-weight: 720;
  line-height: 1.25;
}

.modal-card,
.remove-player-list-new,
.rule-card-new {
  border: 2px solid var(--modal-border);
  border-radius: var(--modal-radius);
  background: var(--modal-card-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(8, 21, 26, 0.1);
}

.modal-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.modal-card-text,
.modal-note {
  margin: 0;
  color: var(--modal-muted-color);
  font-size: var(--modal-body-size);
  font-weight: 690;
  line-height: 1.38;
}

.modal-card-text {
  color: #344a55;
  font-weight: 760;
}

.modal-actions,
.online-option-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.modal-primary-action,
.modal-secondary-action,
.modal-muted-action,
.modal-danger-action {
  display: inline-grid;
  place-items: center;
  min-height: var(--modal-button-height);
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: var(--modal-button-weight);
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-shadow: none;
}

.modal-primary-action {
  color: #f9fffb;
  background: linear-gradient(#32d187, #12945e 60%, #066944);
  box-shadow:
    0 4px 0 #06402f,
    inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

.modal-secondary-action {
  color: #281600;
  background: linear-gradient(#ffd969, #f3ad2b 58%, #c77b17);
  box-shadow:
    0 4px 0 rgba(109, 63, 0, 0.78),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.modal-muted-action {
  color: #ffffff;
  background: linear-gradient(#315f82, #153c5d 62%, #08243d);
  box-shadow:
    0 4px 0 rgba(4, 17, 28, 0.82),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.modal-danger-action {
  color: #ffffff;
  background: linear-gradient(#ff4757, #df1f32 58%, #98121f);
  box-shadow:
    0 4px 0 #5d0710,
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

.new-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 10px 14px;
  border: 2px solid var(--modal-border);
  border-radius: var(--modal-radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(8, 21, 26, 0.1);
}

.new-toggle-row label {
  color: #344a55;
  font-size: var(--modal-label-size);
  font-weight: var(--modal-label-weight);
  line-height: 1.15;
  text-shadow: none;
}

.install-card-new {
  gap: 14px;
}

.install-summary-new {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.install-app-icon-new {
  display: inline-grid;
  place-items: center;
  width: 62px;
  min-width: 62px;
  height: 62px;
  border: 2px solid rgba(14, 31, 38, 0.18);
  border-radius: 14px;
  overflow: hidden;
  background: #090015;
  box-shadow: 0 3px 0 rgba(8, 21, 26, 0.16);
}

.install-app-icon-new img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.install-summary-new strong {
  display: block;
  color: var(--modal-text-color);
  font-size: 1.04rem;
  font-weight: var(--modal-heading-weight);
  line-height: 1.15;
}

.install-summary-new small {
  display: block;
  margin-top: 4px;
  color: var(--modal-muted-color);
  font-size: 0.88rem;
  font-weight: 690;
  line-height: 1.25;
}

.install-steps-new {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.32rem;
  color: #344a55;
  font-size: 0.98rem;
  font-weight: 740;
  line-height: 1.32;
}

.install-steps-new li::marker {
  color: #bf7d08;
  font-weight: 900;
}

.guide-progress-new {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.guide-progress-new span {
  height: 8px;
  border-radius: 999px;
  background: rgba(16, 34, 45, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.guide-progress-new span.active {
  background: linear-gradient(#ffd969, #f3ad2b 58%, #c77b17);
}

.guide-step-card-new {
  position: relative;
  min-height: 160px;
  padding: 16px 18px 16px 74px;
}

.guide-step-card-new h3,
.guide-step-card-new p {
  margin: 0;
  font-family: inherit;
  text-shadow: none;
}

.guide-step-card-new h3 {
  color: var(--modal-text-color);
  font-size: 1.22rem;
  font-weight: var(--modal-heading-weight);
  line-height: 1.12;
}

.guide-step-card-new p {
  margin-top: 8px;
  color: var(--modal-muted-color);
  font-size: 0.98rem;
  font-weight: 690;
  line-height: 1.42;
}

.guide-step-card-new .guide-step-number {
  left: 16px;
  top: 16px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(109, 63, 0, 0.54);
  border-radius: 50%;
  color: #281600;
  background: linear-gradient(#ffd969, #f3ad2b 58%, #c77b17);
  box-shadow:
    0 3px 0 rgba(109, 63, 0, 0.56),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
  font-size: 1rem;
  font-weight: 900;
}

.guide-step-actions {
  grid-template-columns: minmax(108px, 0.8fr) minmax(132px, 1fr) minmax(108px, 0.8fr);
}

.rule-sections-new {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.rule-card-new {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.rule-card-new h3 {
  margin: 0;
  color: var(--modal-text-color);
  font-size: 1.02rem;
  font-weight: var(--modal-heading-weight);
  line-height: 1.12;
  text-shadow: none;
}

.dialog-panel.info-dialog-panel .dialog-list {
  padding-left: 1.05rem;
  color: var(--modal-muted-color);
  font-size: 0.88rem;
  font-weight: 660;
  line-height: 1.28;
  text-shadow: none;
}

.dialog-panel.info-dialog-panel .dialog-list li + li {
  margin-top: 5px;
}

.info-guide-action {
  display: flex;
  justify-content: flex-end;
}

.info-guide-action .modal-primary-action {
  min-width: min(100%, 240px);
}

.remove-player-list-new {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.remove-player-row-new {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 9px;
  border: 2px solid rgba(14, 31, 38, 0.12);
  border-radius: 9px;
  color: var(--modal-text-color);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  text-shadow: none;
}

.remove-player-row-new input {
  width: 22px;
  height: 22px;
  accent-color: #13945f;
}

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

.remove-player-copy strong {
  overflow: hidden;
  color: var(--modal-text-color);
  font-size: 1rem;
  font-weight: var(--modal-heading-weight);
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-options-card {
  gap: 14px;
}

body.is-mobile-device .dialog-panel.install-dialog-panel,
body.is-mobile-device .dialog-panel.remove-dialog-panel,
body.is-mobile-device .dialog-panel.online-dialog-panel,
body.is-mobile-device .dialog-panel.guide-prompt-panel,
body.is-mobile-device .dialog-panel.guide-step-dialog-panel,
body.is-mobile-device .dialog-panel.info-dialog-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.install-dialog-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.remove-dialog-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.online-dialog-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-prompt-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-step-dialog-panel,
body.is-mobile-device.is-mobile-landscape .dialog-panel.info-dialog-panel {
  --modal-title-size: clamp(1.42rem, 6vh, 1.95rem);
  --modal-subtitle-size: clamp(0.72rem, 2.7vh, 0.9rem);
  --modal-label-size: clamp(0.76rem, 2.7vh, 0.9rem);
  --modal-button-height: clamp(42px, 9.5vh, 48px);
  max-height: calc(var(--koop-vh, 100dvh) - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  padding: clamp(12px, 3vh, 18px);
  border-radius: 16px;
}

body.is-mobile-device .modal-window,
body.is-mobile-device.is-mobile-landscape .modal-window {
  gap: clamp(9px, 2.4vh, 12px);
}

body.is-mobile-device .modal-window-title,
body.is-mobile-device.is-mobile-landscape .modal-window-title {
  min-height: 34px;
  padding-right: clamp(44px, 11vh, 54px);
}

body.is-mobile-device .modal-window-title h2,
body.is-mobile-device.is-mobile-landscape .modal-window-title h2 {
  font-size: var(--modal-title-size);
}

body.is-mobile-device .modal-window-title p,
body.is-mobile-device.is-mobile-landscape .modal-window-title p,
body.is-mobile-device .modal-card-text,
body.is-mobile-device .modal-note,
body.is-mobile-device.is-mobile-landscape .modal-card-text,
body.is-mobile-device.is-mobile-landscape .modal-note {
  font-size: var(--modal-subtitle-size);
}

body.is-mobile-device .dialog-panel.install-dialog-panel .dialog-close,
body.is-mobile-device .dialog-panel.remove-dialog-panel .dialog-close,
body.is-mobile-device .dialog-panel.online-dialog-panel .dialog-close,
body.is-mobile-device .dialog-panel.guide-prompt-panel .dialog-close,
body.is-mobile-device .dialog-panel.guide-step-dialog-panel .dialog-close,
body.is-mobile-device .dialog-panel.info-dialog-panel .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.install-dialog-panel .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.remove-dialog-panel .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.online-dialog-panel .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-prompt-panel .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-step-dialog-panel .dialog-close,
body.is-mobile-device.is-mobile-landscape .dialog-panel.info-dialog-panel .dialog-close {
  top: clamp(12px, 2.7vh, 18px);
  right: clamp(12px, 2.7vh, 18px);
  width: clamp(32px, 8.5vh, 36px);
  min-width: clamp(32px, 8.5vh, 36px);
  height: clamp(32px, 8.5vh, 36px);
  min-height: clamp(32px, 8.5vh, 36px);
  padding: 0;
  font-size: 0;
}

body.is-mobile-device .dialog-panel.install-dialog-panel .dialog-close::before,
body.is-mobile-device .dialog-panel.remove-dialog-panel .dialog-close::before,
body.is-mobile-device .dialog-panel.online-dialog-panel .dialog-close::before,
body.is-mobile-device .dialog-panel.guide-prompt-panel .dialog-close::before,
body.is-mobile-device .dialog-panel.guide-step-dialog-panel .dialog-close::before,
body.is-mobile-device .dialog-panel.info-dialog-panel .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.install-dialog-panel .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.remove-dialog-panel .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.online-dialog-panel .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-prompt-panel .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.guide-step-dialog-panel .dialog-close::before,
body.is-mobile-device.is-mobile-landscape .dialog-panel.info-dialog-panel .dialog-close::before {
  font-size: clamp(1.35rem, 4.4vh, 1.7rem);
}

body.is-mobile-device .modal-card,
body.is-mobile-device .remove-player-list-new,
body.is-mobile-device .rule-card-new,
body.is-mobile-device.is-mobile-landscape .modal-card,
body.is-mobile-device.is-mobile-landscape .remove-player-list-new,
body.is-mobile-device.is-mobile-landscape .rule-card-new {
  padding: clamp(9px, 2.3vh, 12px);
}

body.is-mobile-device .modal-actions,
body.is-mobile-device .online-option-list,
body.is-mobile-device.is-mobile-landscape .modal-actions,
body.is-mobile-device.is-mobile-landscape .online-option-list {
  gap: clamp(8px, 2vh, 12px);
}

body.is-mobile-device .modal-primary-action,
body.is-mobile-device .modal-secondary-action,
body.is-mobile-device .modal-muted-action,
body.is-mobile-device .modal-danger-action,
body.is-mobile-device.is-mobile-landscape .modal-primary-action,
body.is-mobile-device.is-mobile-landscape .modal-secondary-action,
body.is-mobile-device.is-mobile-landscape .modal-muted-action,
body.is-mobile-device.is-mobile-landscape .modal-danger-action {
  min-height: var(--modal-button-height);
  padding: 0.38rem 0.62rem;
  font-size: clamp(0.78rem, 2.8vh, 0.98rem);
}

body.is-mobile-device .rule-sections-new,
body.is-mobile-device.is-mobile-landscape .rule-sections-new {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(8px, 2vh, 10px);
}

body.is-mobile-device .dialog-panel.info-dialog-panel .dialog-list,
body.is-mobile-device.is-mobile-landscape .dialog-panel.info-dialog-panel .dialog-list {
  font-size: clamp(0.68rem, 2.35vh, 0.82rem);
  line-height: 1.22;
}

body.is-mobile-device .guide-step-card-new,
body.is-mobile-device.is-mobile-landscape .guide-step-card-new {
  min-height: clamp(120px, 27vh, 155px);
  padding: clamp(12px, 2.6vh, 16px) clamp(12px, 3vh, 18px) clamp(12px, 2.6vh, 16px) clamp(62px, 13vh, 74px);
}

body.is-mobile-device .guide-step-card-new h3,
body.is-mobile-device.is-mobile-landscape .guide-step-card-new h3 {
  font-size: clamp(1rem, 3.5vh, 1.18rem);
}

body.is-mobile-device .guide-step-card-new p,
body.is-mobile-device.is-mobile-landscape .guide-step-card-new p {
  font-size: clamp(0.76rem, 2.65vh, 0.94rem);
  line-height: 1.3;
}

body.is-mobile-device .guide-step-card-new .guide-step-number,
body.is-mobile-device.is-mobile-landscape .guide-step-card-new .guide-step-number {
  width: clamp(34px, 8.6vh, 42px);
  height: clamp(34px, 8.6vh, 42px);
}

body.is-mobile-device .guide-step-actions,
body.is-mobile-device.is-mobile-landscape .guide-step-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .modal-actions,
  .online-option-list,
  .guide-step-actions {
    grid-template-columns: 1fr;
  }

  .info-guide-action {
    justify-content: stretch;
  }

  .info-guide-action .modal-primary-action {
    width: 100%;
  }

  .install-summary-new {
    grid-template-columns: 1fr;
  }
}

/* Lobby should use the same outer frame and header chrome as the home screen. */
body[data-screen="lobby"] {
  --home-header-button-height: 50px;
  background:
    radial-gradient(circle at 50% 8%, rgba(247, 201, 72, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(0, 10, 8, 0.4), rgba(0, 14, 9, 0.88)),
    url("koops-table-bg.svg") center / cover fixed no-repeat,
    #00130d;
}

body[data-screen="lobby"] .app-shell {
  width: min(1450px, calc(100% - 20px)) !important;
  height: auto !important;
  min-height: calc(var(--koop-vh, 100vh) - 16px) !important;
  aspect-ratio: auto !important;
  display: grid !important;
  grid-template-rows: minmax(122px, 27%) minmax(0, 1fr) !important;
  gap: 0 !important;
  margin-top: 14px !important;
  margin-bottom: 76px !important;
  padding: 0 26px 18px !important;
  border: 7px solid #f6bd21 !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 17%, rgba(24, 65, 48, 0.35), transparent 16rem),
    linear-gradient(90deg, rgba(0, 23, 14, 0.96), rgba(0, 36, 21, 0.92) 50%, rgba(0, 20, 13, 0.96)) !important;
  box-shadow: inset 0 0 34px rgba(58, 255, 105, 0.12), 0 12px 0 var(--ink) !important;
}

body[data-screen="lobby"] .app-shell::before {
  display: none !important;
}

body[data-screen="lobby"] .hero {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr) !important;
  align-items: start !important;
  min-height: 310px !important;
  margin: 0 !important;
  padding: clamp(4px, 0.7vw, 10px) 4px 24px !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="lobby"] .hero::before {
  display: none !important;
}

body[data-screen="lobby"] .home-player-strip {
  grid-column: 1 !important;
  align-items: center !important;
  justify-self: start !important;
}

body[data-screen="lobby"] .hero-brand {
  grid-column: 2 !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  justify-self: center !important;
  align-self: start !important;
  gap: 0 !important;
  min-width: 0 !important;
}

body[data-screen="lobby"] .hero-emblem {
  width: clamp(140px, 15.2vw, 224px) !important;
  max-height: 100% !important;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.6)) !important;
}

body[data-screen="lobby"] .hero-emblem img {
  max-height: clamp(120px, 15vw, 212px) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

body[data-screen="lobby"] .hero-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-screen="lobby"] .hero-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: start !important;
  gap: 0 !important;
  max-width: none !important;
}

body[data-screen="lobby"] .account-prompt,
body[data-screen="lobby"] .profile-menu-btn,
body[data-screen="lobby"] .close-menu-btn,
body[data-screen="lobby"] .account-menu-trigger,
body[data-screen="lobby"] #guestProfileBtn,
body[data-screen="lobby"] #closeAccountMenuBtn {
  display: none !important;
}

body[data-screen="lobby"] .account-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(12px, 1.35vw, 20px) !important;
  width: auto !important;
}

body[data-screen="lobby"] .home-player-pill,
body[data-screen="lobby"] .home-signin-btn,
body[data-screen="lobby"] .account-action-row .tool-btn:not(.coin-menu-btn),
body[data-screen="lobby"] .coin-menu-btn {
  height: var(--home-header-button-height) !important;
  min-height: var(--home-header-button-height) !important;
  max-height: var(--home-header-button-height) !important;
}

body[data-screen="lobby"] .home-player-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  max-width: min(260px, 26vw) !important;
  padding: 0.34rem 0.72rem !important;
  overflow: hidden !important;
  border: 2px solid #f4cc1d !important;
  border-radius: 16px !important;
  color: #eef8ee !important;
  background: rgba(3, 18, 13, 0.82) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: none !important;
}

body[data-screen="lobby"] .home-player-pill .account-mini-avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

body[data-screen="lobby"] .home-player-name {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #eef8ee !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-screen="lobby"] .home-signin-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.38rem 0.9rem !important;
  border-width: 2px !important;
  border-radius: 16px !important;
  color: #11110b !important;
  background: linear-gradient(#ffc93a, #d58918) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body[data-screen="lobby"] .home-signin-btn::before,
body[data-screen="lobby"] .home-signin-btn::after {
  display: none !important;
}

body[data-screen="lobby"] .account-action-row #settingsBtn,
body[data-screen="lobby"] .account-action-row #infoBtn {
  flex: 0 0 var(--home-header-button-height) !important;
  width: var(--home-header-button-height) !important;
  min-width: var(--home-header-button-height) !important;
  max-width: var(--home-header-button-height) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-screen="lobby"] .account-action-row #settingsBtn::before,
body[data-screen="lobby"] .account-action-row #infoBtn::before {
  width: calc(var(--home-header-button-height) - 2px) !important;
  height: calc(var(--home-header-button-height) - 2px) !important;
  border: 2px solid rgba(247, 179, 26, 0.82) !important;
  color: #ffd64a !important;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 219, 80, 0.13) 0 22%, rgba(255, 219, 80, 0) 43%),
    linear-gradient(180deg, rgba(1, 30, 22, 0.78), rgba(0, 14, 12, 0.9)) !important;
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 215, 76, 0.14),
    inset 0 0 12px rgba(255, 190, 31, 0.09) !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.46),
    0 0 9px rgba(255, 209, 60, 0.28) !important;
}

body[data-screen="lobby"] .account-action-row #settingsBtn::before {
  content: "\2699" !important;
  font-size: calc(var(--home-header-button-height) * 0.51) !important;
}

body[data-screen="lobby"] .account-action-row #infoBtn::before {
  content: "i" !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: calc(var(--home-header-button-height) * 0.58) !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body[data-screen="lobby"] .account-action-row .coin-menu-btn {
  aspect-ratio: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 0.75vw, 12px) !important;
  width: auto !important;
  min-width: clamp(104px, 8.8vw, 136px) !important;
  max-width: clamp(104px, 8.8vw, 136px) !important;
  padding: 0 clamp(12px, 1vw, 18px) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  color: #3a1700 !important;
  background:
    radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%),
    linear-gradient(#fff76d, #ffc21f 48%, #ff8e1b) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.62),
    inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="lobby"] .coin-menu-btn::before {
  display: none !important;
}

body[data-screen="lobby"] .account-action-row .coin-menu-btn .coin-chip {
  display: inline-grid !important;
  place-items: center !important;
  width: calc(var(--home-header-button-height) * 0.44) !important;
  min-width: calc(var(--home-header-button-height) * 0.44) !important;
  height: calc(var(--home-header-button-height) * 0.44) !important;
  margin: 0 !important;
  border: 2px solid rgba(80, 43, 0, 0.66) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffd75a, #e59418 68%, #995704 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 2px 0 rgba(92, 52, 0, 0.38) !important;
  font-size: calc(var(--home-header-button-height) * 0.25) !important;
}

body[data-screen="lobby"] .account-action-row .coin-menu-value {
  min-width: 36px !important;
  color: #3a1700 !important;
  font-size: calc(var(--home-header-button-height) * 0.34) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="lobby"] .lobby-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(18px, 2.2vh, 30px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 3.2vw, 56px) clamp(18px, 2.4vw, 36px) !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="lobby"] .lobby-room-top {
  margin-top: clamp(-46px, -4vw, -22px) !important;
}

body[data-screen="lobby"] .lobby-room-badge {
  border-color: #f6bd21 !important;
}

body[data-screen="lobby"] .lobby-players {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.3vw, 34px) !important;
  align-self: center !important;
  width: min(1268px, 100%) !important;
}

body[data-screen="lobby"] .lobby-actions {
  margin-top: auto !important;
}

body[data-screen="lobby"] .app-footer {
  position: absolute !important;
  display: grid !important;
  left: 30px !important;
  bottom: -58px !important;
  z-index: 3 !important;
  width: max-content !important;
  margin: 0 !important;
}

body[data-screen="lobby"] .install-app-btn {
  min-width: 116px !important;
  width: auto !important;
  min-height: 42px !important;
  height: 42px !important;
  gap: 9px !important;
  padding: 0 18px !important;
  border: 1.5px solid #31e978 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(21, 111, 68, 0.92), rgba(3, 57, 36, 0.96)),
    #063b27 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 20px rgba(0, 0, 0, 0.24) !important;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  body[data-screen="lobby"] {
    --home-header-button-height: clamp(34px, 8vh, 42px);
  }

  body[data-screen="lobby"] .app-shell {
    grid-template-rows: minmax(76px, 27%) minmax(0, 1fr) !important;
    margin-top: 4px !important;
    margin-bottom: 44px !important;
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    border-width: 4px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 24px rgba(58, 255, 105, 0.1), 0 6px 0 var(--ink) !important;
  }

  body[data-screen="lobby"] .hero {
    grid-template-columns: minmax(90px, 1fr) auto minmax(120px, 1fr) !important;
    min-height: 0 !important;
    padding: 4px 0 8px !important;
  }

  body[data-screen="lobby"] .hero-emblem {
    width: clamp(72px, 16vw, 126px) !important;
  }

  body[data-screen="lobby"] .hero-emblem img {
    max-height: clamp(68px, 16vw, 116px) !important;
  }

  body[data-screen="lobby"] .home-player-pill {
    max-width: 170px !important;
    gap: 6px !important;
    padding-inline: 0.42rem !important;
  }

  body[data-screen="lobby"] .home-player-pill .account-mini-avatar {
    width: clamp(24px, 6vh, 30px) !important;
    min-width: clamp(24px, 6vh, 30px) !important;
    height: clamp(24px, 6vh, 30px) !important;
  }

  body[data-screen="lobby"] .home-player-name {
    font-size: clamp(0.58rem, 2vh, 0.82rem) !important;
  }

  body[data-screen="lobby"] .account-action-row {
    gap: clamp(5px, 0.9vw, 9px) !important;
  }

  body[data-screen="lobby"] .account-action-row .coin-menu-btn {
    min-width: clamp(82px, 17vw, 104px) !important;
    max-width: clamp(82px, 17vw, 104px) !important;
    gap: 6px !important;
    padding-inline: 0.46rem !important;
  }

  body[data-screen="lobby"] .account-action-row .coin-menu-btn .coin-chip {
    width: clamp(20px, 5.2vh, 25px) !important;
    min-width: clamp(20px, 5.2vh, 25px) !important;
    height: clamp(20px, 5.2vh, 25px) !important;
  }

  body[data-screen="lobby"] .account-action-row .coin-menu-value {
    min-width: 34px !important;
    font-size: clamp(0.62rem, 2vh, 0.82rem) !important;
  }

  body[data-screen="lobby"] .lobby-panel {
    gap: clamp(7px, 1.35vh, 12px) !important;
    padding: 0 clamp(7px, 1.4vw, 12px) clamp(5px, 1vh, 8px) !important;
  }

  body[data-screen="lobby"] .lobby-room-top {
    margin-top: -2px !important;
  }

  body[data-screen="lobby"] .lobby-players {
    gap: clamp(7px, 1.4vw, 12px) !important;
  }

  body[data-screen="lobby"] .app-footer {
    left: 16px !important;
    bottom: -42px !important;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] {
  place-items: center;
  padding-top: 0;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .app-shell {
  width: var(--home-frame-width, calc(100vw - 8px)) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  grid-template-rows: minmax(82px, 30%) minmax(0, 1fr) !important;
  padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .hero {
  grid-template-columns: minmax(90px, 1fr) auto minmax(120px, 1fr) !important;
  padding: 2px 0 7px !important;
}

/* Lobby final layout: reuse the home screen frame/header and replace only the card-grid slot. */
body[data-screen="lobby"] .app-shell {
  width: min(1450px, calc(100% - 20px)) !important;
  height: auto !important;
  min-height: calc(var(--koop-vh, 100vh) - 16px) !important;
  margin: 14px auto 0 !important;
  padding: 0 26px 18px !important;
  grid-template-rows: minmax(122px, 27%) minmax(0, 1fr) !important;
}

body[data-screen="lobby"] .hero {
  min-height: 310px !important;
  padding: clamp(4px, 0.7vw, 10px) 4px 24px !important;
}

body[data-screen="lobby"] .lobby-panel {
  align-self: stretch !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(12px, 1.55vh, 22px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 2px 54px !important;
  border: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="lobby"] .lobby-room-top {
  align-self: start !important;
  margin: 0 !important;
}

body[data-screen="lobby"] .lobby-room-badge {
  min-width: clamp(222px, 16vw, 290px) !important;
  padding: 8px 12px 8px 18px !important;
  border-width: 3px !important;
  border-radius: 18px !important;
}

body[data-screen="lobby"] .lobby-room-badge span {
  font-size: 0.72rem !important;
}

body[data-screen="lobby"] .lobby-room-badge strong {
  font-size: clamp(1.7rem, 2.35vw, 2.42rem) !important;
}

body[data-screen="lobby"] .lobby-copy-code-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
}

body[data-screen="lobby"] .lobby-players {
  align-self: center !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.05vw, 30px) !important;
  width: min(100%, 1120px) !important;
}

body[data-screen="lobby"] .lobby-slot-card {
  min-height: clamp(174px, 16vw, 236px) !important;
  padding: clamp(12px, 1.25vw, 20px) !important;
}

body[data-screen="lobby"] .lobby-actions {
  align-items: end !important;
  margin: 0 !important;
  padding-top: clamp(12px, 1.55vh, 20px) !important;
}

body[data-screen="lobby"] .app-footer {
  left: 30px !important;
  bottom: -58px !important;
}

@media (max-width: 900px) {
  body[data-screen="lobby"] .app-shell {
    min-height: calc(var(--koop-vh, 100vh) - 8px) !important;
    margin: 4px auto 0 !important;
    grid-template-rows: minmax(76px, 27%) minmax(0, 1fr) !important;
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  body[data-screen="lobby"] .hero {
    min-height: 0 !important;
    padding: 4px 0 8px !important;
  }

  body[data-screen="lobby"] .lobby-panel {
    gap: clamp(6px, 1.15vh, 10px) !important;
    padding: 0 0 clamp(12px, 3vh, 18px) !important;
  }

  body[data-screen="lobby"] .lobby-room-top {
    margin: 0 !important;
  }

  body[data-screen="lobby"] .lobby-players {
    gap: clamp(7px, 1.4vw, 12px) !important;
  }

  body[data-screen="lobby"] .lobby-actions {
    padding-top: clamp(6px, 1.4vh, 10px) !important;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .app-shell {
  width: var(--home-frame-width, calc(100vw - 8px)) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  grid-template-rows: minmax(82px, 30%) minmax(0, 1fr) !important;
}

/* Game screen compact header and numbered log polish. */
body[data-screen="game"] .app-shell {
  grid-template-rows: minmax(70px, 15.5%) minmax(0, 1fr) !important;
}

body[data-screen="game"] .hero {
  min-height: 0 !important;
  padding: clamp(1px, 0.25vw, 4px) 4px clamp(4px, 0.55vw, 8px) !important;
}

body[data-screen="game"] .hero-brand {
  gap: clamp(7px, 0.75vw, 12px) !important;
  transform: translateY(clamp(-12px, -0.95vw, -6px)) !important;
}

body[data-screen="game"] .hero-emblem {
  width: clamp(68px, 6.8vw, 112px) !important;
}

body[data-screen="game"] .hero-game-room {
  min-width: clamp(132px, 12vw, 190px) !important;
  padding: clamp(4px, 0.42vw, 6px) clamp(10px, 0.82vw, 14px) !important;
  border-width: 2px !important;
  border-radius: 12px !important;
}

body[data-screen="game"] .hero-game-room strong {
  font-size: clamp(1.05rem, 1.72vw, 1.82rem) !important;
  line-height: 0.92 !important;
}

body[data-screen="game"] .hero-game-room span {
  font-size: clamp(0.42rem, 0.56vw, 0.54rem) !important;
}

body[data-screen="game"] .game-table-shell {
  grid-template-rows: minmax(0, 1fr) clamp(48px, 7%, 66px) !important;
}

body[data-screen="game"] .game-log-overlay {
  width: min(34vw, 360px) !important;
  max-height: min(60%, 330px) !important;
  gap: 8px !important;
  padding: clamp(10px, 1vw, 14px) !important;
  border-radius: 18px !important;
}

body[data-screen="game"] .game-log-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

body[data-screen="game"] .game-log-icon,
body[data-screen="game"] .game-log-header p,
body[data-screen="game"] .new-log-icon,
body[data-screen="game"] .new-log-row time {
  display: none !important;
}

body[data-screen="game"] .game-log-header h2 {
  font-size: clamp(1rem, 1.35vw, 1.38rem) !important;
  line-height: 1 !important;
}

body[data-screen="game"] .game-log-close {
  width: clamp(34px, 3vw, 44px) !important;
  height: clamp(34px, 3vw, 44px) !important;
  border-radius: 12px !important;
}

body[data-screen="game"] .game-log-close::before {
  font-size: clamp(1.32rem, 1.8vw, 1.72rem) !important;
}

body[data-screen="game"] .game-log-list {
  gap: 6px !important;
  padding-right: 4px !important;
}

body[data-screen="game"] .new-log-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: clamp(38px, 3.3vw, 50px) !important;
  padding: 7px 9px !important;
  border-radius: 12px !important;
}

body[data-screen="game"] .new-log-number {
  display: grid;
  place-items: center;
  width: clamp(22px, 2vw, 30px);
  height: clamp(22px, 2vw, 30px);
  border: 1px solid rgba(246, 191, 44, 0.46);
  border-radius: 50%;
  color: #ffd25d;
  background: rgba(0, 24, 15, 0.78);
  font-size: clamp(0.62rem, 0.82vw, 0.75rem);
  font-weight: 950;
}

body[data-screen="game"] .new-log-row strong {
  font-size: clamp(0.62rem, 0.82vw, 0.76rem) !important;
  line-height: 1.15 !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .app-shell {
    grid-template-rows: minmax(48px, 14.5%) minmax(0, 1fr) !important;
  }

  body[data-screen="game"] .hero-brand {
    transform: translateY(clamp(-8px, -1.6vh, -4px)) !important;
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(48px, 10vh, 76px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(92px, 21vw, 136px) !important;
    padding: 3px 8px !important;
  }

  body[data-screen="game"] .hero-game-room strong {
    font-size: clamp(0.78rem, 3.2vh, 1.14rem) !important;
  }

  body[data-screen="game"] .hero-game-room span {
    font-size: clamp(0.36rem, 1.25vh, 0.45rem) !important;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(39vw, 310px) !important;
    max-height: 62% !important;
    padding: 8px !important;
  }

  body[data-screen="game"] .new-log-row {
    min-height: clamp(32px, 8vh, 42px) !important;
    padding: 5px 7px !important;
  }
}

/* Header View Log placement. */
body:not([data-screen="game"]) #viewLogBtn {
  display: none !important;
}

body[data-screen="game"] #viewLogBtn.view-log-header-btn {
  display: inline-grid !important;
  place-items: center !important;
}

body[data-screen="game"] .account-action-row #viewLogBtn.view-log-header-btn::before {
  content: "\2630";
  color: #f7c94a;
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  font-weight: 950;
}

body[data-screen="game"] .account-action-row #viewLogBtn.view-log-header-btn:hover::before {
  color: #ffe47a;
}

body[data-screen="game"] .game-action-bar {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-screen="game"] .game-action-buttons {
  justify-content: flex-start !important;
}

/* Final game screen compact polish: wins over the older repeated game blocks above. */
body[data-screen="game"] .app-shell {
  grid-template-rows: minmax(84px, 18%) minmax(0, 1fr) !important;
}

body[data-screen="game"] .hero {
  min-height: 0 !important;
  padding: clamp(2px, 0.45vw, 6px) 4px clamp(6px, 0.8vw, 10px) !important;
}

body[data-screen="game"] .hero-brand {
  gap: clamp(8px, 1vw, 16px) !important;
  transform: translateY(clamp(-8px, -0.55vw, -3px));
}

body[data-screen="game"] .hero-emblem {
  width: clamp(82px, 8.2vw, 136px) !important;
}

body[data-screen="game"] .hero-game-room {
  min-width: clamp(158px, 14.2vw, 226px) !important;
  padding: clamp(5px, 0.55vw, 8px) clamp(12px, 1vw, 17px) !important;
  border-width: 3px !important;
  border-radius: 13px !important;
}

body[data-screen="game"] .hero-game-room strong {
  font-size: clamp(1.28rem, 2.05vw, 2.15rem) !important;
  line-height: 0.95 !important;
}

body[data-screen="game"] .hero-game-room span {
  font-size: clamp(0.5rem, 0.66vw, 0.62rem) !important;
}

body[data-screen="game"] .game-table-shell {
  grid-template-rows: minmax(0, 1fr) clamp(50px, 7.4%, 70px) !important;
  gap: clamp(5px, 0.62vw, 9px) !important;
}

body[data-screen="game"] .new-game-table::before {
  inset: 4.5% 5.8% 8.4% !important;
}

body[data-screen="game"] .game-seat {
  width: clamp(232px, 19vw, 310px) !important;
  min-height: clamp(78px, 8vw, 118px) !important;
  padding: clamp(7px, 0.62vw, 10px) !important;
  gap: clamp(4px, 0.45vw, 7px) clamp(7px, 0.72vw, 10px) !important;
}

body[data-screen="game"] .game-seat-left {
  left: 7% !important;
  top: 17% !important;
}

body[data-screen="game"] .game-seat-top {
  top: 2% !important;
}

body[data-screen="game"] .game-seat-right {
  right: 7% !important;
  top: 17% !important;
}

body[data-screen="game"] .game-seat-bottom {
  left: 7% !important;
  bottom: 6.6% !important;
}

body[data-screen="game"] .game-avatar {
  width: clamp(44px, 4.8vw, 68px) !important;
  height: clamp(44px, 4.8vw, 68px) !important;
}

body[data-screen="game"] .table-piles {
  top: 27% !important;
  gap: clamp(30px, 4.6vw, 66px) !important;
}

body[data-screen="game"] .drawn-card-stage {
  left: 7.2% !important;
  top: 47.2% !important;
  width: clamp(76px, 6.2vw, 98px) !important;
  min-height: clamp(112px, 9vw, 142px) !important;
}

body[data-screen="game"] .drawn-card-frame {
  padding: 7px !important;
}

body[data-screen="game"] .drawn-card-frame > span {
  left: 50% !important;
  right: auto !important;
  bottom: clamp(12px, 1.1vw, 18px) !important;
  color: #ff7f2a !important;
  font-size: clamp(0.58rem, 0.72vw, 0.72rem) !important;
  letter-spacing: 0 !important;
  transform: translateX(-50%) rotate(0deg) !important;
  white-space: nowrap !important;
}

body[data-screen="game"] .drawn-card-frame .big-card {
  width: clamp(60px, 5.1vw, 78px) !important;
}

body[data-screen="game"] .card-face.no-card-value .card-rank {
  align-self: center !important;
}

body[data-screen="game"] .card-face .card-value {
  font-size: clamp(0.54rem, 0.76vw, 0.72rem) !important;
}

body[data-screen="game"] .game-hint-row {
  left: 24% !important;
  right: 17% !important;
  bottom: 28.5% !important;
  min-height: clamp(38px, 3.8vw, 52px) !important;
}

body[data-screen="game"] .game-hint-row p {
  font-size: clamp(0.78rem, 1.12vw, 0.98rem) !important;
}

body[data-screen="game"] .turn-timer {
  width: clamp(46px, 4.5vw, 64px) !important;
  height: clamp(46px, 4.5vw, 64px) !important;
  margin-right: -21px !important;
  border-width: 5px !important;
  font-size: clamp(1.08rem, 1.72vw, 1.55rem) !important;
}

body[data-screen="game"] .self-hand-row {
  left: 34% !important;
  right: 28% !important;
  bottom: 4% !important;
  gap: clamp(9px, 1vw, 15px) !important;
}

body[data-screen="game"] .self-hand-row .game-card-slot {
  min-height: clamp(100px, 11.2vw, 154px) !important;
}

body[data-screen="game"] .game-action-btn,
body[data-screen="game"] .view-log-btn {
  min-height: clamp(44px, 4.1vw, 58px) !important;
  min-width: clamp(136px, 11.2vw, 184px) !important;
  font-size: clamp(0.8rem, 1.12vw, 1rem) !important;
}

body[data-screen="game"] .view-log-btn {
  min-width: clamp(150px, 12.5vw, 196px) !important;
}

body[data-screen="game"] .game-log-overlay {
  width: min(38vw, 430px) !important;
  max-height: min(68%, 430px) !important;
  gap: clamp(8px, 0.85vw, 12px) !important;
  padding: clamp(12px, 1.2vw, 18px) !important;
  border-radius: 20px !important;
}

body[data-screen="game"] .game-log-header {
  gap: clamp(9px, 1vw, 13px) !important;
}

body[data-screen="game"] .game-log-header h2 {
  font-size: clamp(1.1rem, 1.55vw, 1.62rem) !important;
}

body[data-screen="game"] .game-log-header p {
  margin-top: 4px !important;
  font-size: clamp(0.64rem, 0.82vw, 0.78rem) !important;
  line-height: 1.1 !important;
}

body[data-screen="game"] .game-log-icon,
body[data-screen="game"] .game-log-close {
  width: clamp(40px, 3.6vw, 54px) !important;
  height: clamp(40px, 3.6vw, 54px) !important;
  border-radius: 14px !important;
}

body[data-screen="game"] .game-log-icon::before {
  font-size: clamp(1rem, 1.5vw, 1.35rem) !important;
}

body[data-screen="game"] .game-log-close::before {
  font-size: clamp(1.5rem, 2.1vw, 2.05rem) !important;
}

body[data-screen="game"] .game-log-list {
  gap: 8px !important;
}

body[data-screen="game"] .new-log-row {
  gap: clamp(8px, 0.9vw, 12px) !important;
  min-height: clamp(46px, 4.2vw, 62px) !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
}

body[data-screen="game"] .new-log-icon {
  width: clamp(30px, 3vw, 42px) !important;
  height: clamp(30px, 3vw, 42px) !important;
}

body[data-screen="game"] .new-log-icon::before {
  font-size: clamp(0.86rem, 1.2vw, 1.15rem) !important;
}

body[data-screen="game"] .new-log-row strong {
  font-size: clamp(0.66rem, 0.9vw, 0.82rem) !important;
  line-height: 1.16 !important;
}

body[data-screen="game"] .new-log-row time {
  font-size: clamp(0.56rem, 0.74vw, 0.7rem) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .app-shell {
    grid-template-rows: minmax(58px, 17%) minmax(0, 1fr) !important;
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(58px, 12vh, 92px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(104px, 24vw, 158px) !important;
    padding: 4px 9px !important;
    border-width: 2px !important;
  }

  body[data-screen="game"] .hero-game-room strong {
    font-size: clamp(0.98rem, 4vh, 1.44rem) !important;
  }

  body[data-screen="game"] .hero-game-room span {
    font-size: clamp(0.42rem, 1.55vh, 0.52rem) !important;
  }

  body[data-screen="game"] .game-seat {
    width: clamp(138px, 22vw, 206px) !important;
    min-height: clamp(58px, 15vh, 86px) !important;
    padding: 5px !important;
  }

  body[data-screen="game"] .game-avatar {
    width: clamp(30px, 8vh, 46px) !important;
    height: clamp(30px, 8vh, 46px) !important;
  }

  body[data-screen="game"] .drawn-card-stage {
    width: clamp(52px, 10vh, 72px) !important;
    min-height: clamp(74px, 16vh, 102px) !important;
  }

  body[data-screen="game"] .drawn-card-frame .big-card {
    width: clamp(42px, 8.5vh, 58px) !important;
  }

  body[data-screen="game"] .drawn-card-frame > span {
    bottom: 9px !important;
    font-size: clamp(0.44rem, 1.6vh, 0.56rem) !important;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(44vw, 350px) !important;
    max-height: 72% !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }
}

/* Game screen compact polish: smaller header chrome, larger table, tighter log. */
body[data-screen="game"] .app-shell {
  grid-template-rows: minmax(84px, 18%) minmax(0, 1fr) !important;
}

body[data-screen="game"] .hero {
  min-height: 0 !important;
  padding: clamp(2px, 0.45vw, 6px) 4px clamp(6px, 0.8vw, 10px) !important;
}

body[data-screen="game"] .hero-brand {
  gap: clamp(8px, 1vw, 16px) !important;
  transform: translateY(clamp(-8px, -0.55vw, -3px));
}

body[data-screen="game"] .hero-emblem {
  width: clamp(82px, 8.2vw, 136px) !important;
}

body[data-screen="game"] .hero-game-room {
  min-width: clamp(158px, 14.2vw, 226px) !important;
  padding: clamp(5px, 0.55vw, 8px) clamp(12px, 1vw, 17px) !important;
  border-width: 3px !important;
  border-radius: 13px !important;
}

body[data-screen="game"] .hero-game-room strong {
  font-size: clamp(1.28rem, 2.05vw, 2.15rem) !important;
  line-height: 0.95 !important;
}

body[data-screen="game"] .hero-game-room span {
  font-size: clamp(0.5rem, 0.66vw, 0.62rem) !important;
}

body[data-screen="game"] .game-table-shell {
  grid-template-rows: minmax(0, 1fr) clamp(50px, 7.4%, 70px) !important;
  gap: clamp(5px, 0.62vw, 9px) !important;
}

body[data-screen="game"] .new-game-table::before {
  inset: 4.5% 5.8% 8.4% !important;
}

body[data-screen="game"] .game-seat {
  width: clamp(232px, 19vw, 310px) !important;
  min-height: clamp(78px, 8vw, 118px) !important;
  padding: clamp(7px, 0.62vw, 10px) !important;
  gap: clamp(4px, 0.45vw, 7px) clamp(7px, 0.72vw, 10px) !important;
}

body[data-screen="game"] .game-seat-left {
  left: 7% !important;
  top: 17% !important;
}

body[data-screen="game"] .game-seat-top {
  top: 2% !important;
}

body[data-screen="game"] .game-seat-right {
  right: 7% !important;
  top: 17% !important;
}

body[data-screen="game"] .game-seat-bottom {
  left: 7% !important;
  bottom: 6.6% !important;
}

body[data-screen="game"] .game-avatar {
  width: clamp(44px, 4.8vw, 68px) !important;
  height: clamp(44px, 4.8vw, 68px) !important;
}

body[data-screen="game"] .table-piles {
  top: 27% !important;
  gap: clamp(30px, 4.6vw, 66px) !important;
}

body[data-screen="game"] .drawn-card-stage {
  left: 7.2% !important;
  top: 47.2% !important;
  width: clamp(76px, 6.2vw, 98px) !important;
  min-height: clamp(112px, 9vw, 142px) !important;
}

body[data-screen="game"] .drawn-card-frame {
  padding: 7px !important;
}

body[data-screen="game"] .drawn-card-frame > span {
  left: 50% !important;
  right: auto !important;
  bottom: clamp(12px, 1.1vw, 18px) !important;
  color: #ff7f2a !important;
  font-size: clamp(0.58rem, 0.72vw, 0.72rem) !important;
  letter-spacing: 0 !important;
  transform: translateX(-50%) rotate(0deg) !important;
  white-space: nowrap !important;
}

body[data-screen="game"] .drawn-card-frame .big-card {
  width: clamp(60px, 5.1vw, 78px) !important;
}

body[data-screen="game"] .card-face.no-card-value .card-rank {
  align-self: center !important;
}

body[data-screen="game"] .card-face .card-value {
  font-size: clamp(0.54rem, 0.76vw, 0.72rem) !important;
}

body[data-screen="game"] .game-hint-row {
  left: 24% !important;
  right: 17% !important;
  bottom: 28.5% !important;
  min-height: clamp(38px, 3.8vw, 52px) !important;
}

body[data-screen="game"] .game-hint-row p {
  font-size: clamp(0.78rem, 1.12vw, 0.98rem) !important;
}

body[data-screen="game"] .turn-timer {
  width: clamp(46px, 4.5vw, 64px) !important;
  height: clamp(46px, 4.5vw, 64px) !important;
  margin-right: -21px !important;
  border-width: 5px !important;
  font-size: clamp(1.08rem, 1.72vw, 1.55rem) !important;
}

body[data-screen="game"] .self-hand-row {
  left: 34% !important;
  right: 28% !important;
  bottom: 4% !important;
  gap: clamp(9px, 1vw, 15px) !important;
}

body[data-screen="game"] .self-hand-row .game-card-slot {
  min-height: clamp(100px, 11.2vw, 154px) !important;
}

body[data-screen="game"] .game-action-btn,
body[data-screen="game"] .view-log-btn {
  min-height: clamp(44px, 4.1vw, 58px) !important;
  min-width: clamp(136px, 11.2vw, 184px) !important;
  font-size: clamp(0.8rem, 1.12vw, 1rem) !important;
}

body[data-screen="game"] .view-log-btn {
  min-width: clamp(150px, 12.5vw, 196px) !important;
}

body[data-screen="game"] .game-log-overlay {
  width: min(38vw, 430px) !important;
  max-height: min(68%, 430px) !important;
  gap: clamp(8px, 0.85vw, 12px) !important;
  padding: clamp(12px, 1.2vw, 18px) !important;
  border-radius: 20px !important;
}

body[data-screen="game"] .game-log-header {
  gap: clamp(9px, 1vw, 13px) !important;
}

body[data-screen="game"] .game-log-header h2 {
  font-size: clamp(1.1rem, 1.55vw, 1.62rem) !important;
}

body[data-screen="game"] .game-log-header p {
  margin-top: 4px !important;
  font-size: clamp(0.64rem, 0.82vw, 0.78rem) !important;
  line-height: 1.1 !important;
}

body[data-screen="game"] .game-log-icon,
body[data-screen="game"] .game-log-close {
  width: clamp(40px, 3.6vw, 54px) !important;
  height: clamp(40px, 3.6vw, 54px) !important;
  border-radius: 14px !important;
}

body[data-screen="game"] .game-log-icon::before {
  font-size: clamp(1rem, 1.5vw, 1.35rem) !important;
}

body[data-screen="game"] .game-log-close::before {
  font-size: clamp(1.5rem, 2.1vw, 2.05rem) !important;
}

body[data-screen="game"] .game-log-list {
  gap: 8px !important;
}

body[data-screen="game"] .new-log-row {
  gap: clamp(8px, 0.9vw, 12px) !important;
  min-height: clamp(46px, 4.2vw, 62px) !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
}

body[data-screen="game"] .new-log-icon {
  width: clamp(30px, 3vw, 42px) !important;
  height: clamp(30px, 3vw, 42px) !important;
}

body[data-screen="game"] .new-log-icon::before {
  font-size: clamp(0.86rem, 1.2vw, 1.15rem) !important;
}

body[data-screen="game"] .new-log-row strong {
  font-size: clamp(0.66rem, 0.9vw, 0.82rem) !important;
  line-height: 1.16 !important;
}

body[data-screen="game"] .new-log-row time {
  font-size: clamp(0.56rem, 0.74vw, 0.7rem) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .app-shell {
    grid-template-rows: minmax(58px, 17%) minmax(0, 1fr) !important;
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(58px, 12vh, 92px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(104px, 24vw, 158px) !important;
    padding: 4px 9px !important;
    border-width: 2px !important;
  }

  body[data-screen="game"] .hero-game-room strong {
    font-size: clamp(0.98rem, 4vh, 1.44rem) !important;
  }

  body[data-screen="game"] .hero-game-room span {
    font-size: clamp(0.42rem, 1.55vh, 0.52rem) !important;
  }

  body[data-screen="game"] .game-seat {
    width: clamp(138px, 22vw, 206px) !important;
    min-height: clamp(58px, 15vh, 86px) !important;
    padding: 5px !important;
  }

  body[data-screen="game"] .game-avatar {
    width: clamp(30px, 8vh, 46px) !important;
    height: clamp(30px, 8vh, 46px) !important;
  }

  body[data-screen="game"] .drawn-card-stage {
    width: clamp(52px, 10vh, 72px) !important;
    min-height: clamp(74px, 16vh, 102px) !important;
  }

  body[data-screen="game"] .drawn-card-frame .big-card {
    width: clamp(42px, 8.5vh, 58px) !important;
  }

  body[data-screen="game"] .drawn-card-frame > span {
    bottom: 9px !important;
    font-size: clamp(0.44rem, 1.6vh, 0.56rem) !important;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(44vw, 350px) !important;
    max-height: 72% !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }
}

/* Final game frame override: reuse the home chrome and only replace the play section. */
body[data-screen="game"] {
  --game-header-height: clamp(104px, 17.5%, 154px);
  --game-control-height: clamp(42px, 4.2vw, 58px);
  --game-self-card-w: clamp(72px, 6.8vw, 106px);
  --game-room-accent: var(--lobby-code-accent, #ff2736);
  --game-room-glow: var(--lobby-code-glow, rgba(255, 39, 54, 0.36));
  --home-header-button-height: 50px;
  place-items: center !important;
  align-content: center !important;
  min-height: var(--koop-vh, 100vh) !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(247, 201, 72, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(0, 10, 8, 0.4), rgba(0, 14, 9, 0.88)),
    url("koops-table-bg.svg") center / cover fixed no-repeat,
    #00130d !important;
}

body[data-screen="game"] .app-shell {
  width: var(--home-frame-width, min(1450px, calc(100vw - 24px))) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  display: grid !important;
  grid-template-rows: var(--game-header-height) minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 auto 58px !important;
  padding: clamp(8px, 0.8vw, 14px) clamp(12px, 1.35vw, 22px) clamp(10px, 0.9vw, 16px) !important;
  border: 7px solid #f6bd21 !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(24, 65, 48, 0.35), transparent 16rem),
    linear-gradient(90deg, rgba(0, 23, 14, 0.96), rgba(0, 36, 21, 0.92) 50%, rgba(0, 20, 13, 0.96)) !important;
  box-shadow: inset 0 0 34px rgba(58, 255, 105, 0.12), 0 12px 0 var(--ink) !important;
}

body[data-screen="game"] .app-shell::before,
body[data-screen="game"] .hero::before,
body[data-screen="game"] .hero-copy,
body[data-screen="game"] .account-prompt,
body[data-screen="game"] .profile-menu-btn,
body[data-screen="game"] .close-menu-btn,
body[data-screen="game"] .account-menu-trigger,
body[data-screen="game"] #guestProfileBtn,
body[data-screen="game"] #closeAccountMenuBtn,
body[data-screen="game"] #gameScreen > .game-topbar,
body[data-screen="game"] #gameScreen > .game-main {
  display: none !important;
}

body[data-screen="game"] .home-signin-btn.hidden,
body[data-screen="game"] .tool-btn.hidden,
body.home-lobby-mode .home-signin-btn.hidden,
body.home-lobby-mode .tool-btn.hidden {
  display: none !important;
}

body[data-screen="game"] .hero {
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
  align-items: start !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 4px 0 !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="game"] .home-player-strip {
  grid-column: 1 !important;
  justify-self: start !important;
  align-items: center !important;
  gap: 9px !important;
  z-index: 10 !important;
}

body[data-screen="game"] .hero-brand {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: start !important;
  gap: clamp(12px, 1.1vw, 18px) !important;
  min-width: 0 !important;
  transform: translateY(-2px) !important;
}

body[data-screen="game"] .hero-emblem {
  width: clamp(112px, 10.8vw, 170px) !important;
  max-height: calc(var(--game-header-height) - 8px) !important;
  filter: drop-shadow(0 13px 22px rgba(0, 0, 0, 0.62)) !important;
}

body[data-screen="game"] .hero-emblem img {
  display: block !important;
  width: 100% !important;
  max-height: calc(var(--game-header-height) - 8px) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

body[data-screen="game"] .hero-game-room {
  display: grid !important;
  place-items: center !important;
  min-width: clamp(170px, 16vw, 250px) !important;
  min-height: clamp(62px, 6vw, 86px) !important;
  padding: 7px 18px !important;
  border: 3px solid var(--game-room-accent) !important;
  border-radius: 14px !important;
  color: var(--game-room-accent) !important;
  background:
    radial-gradient(circle at 50% 20%, var(--game-room-glow), transparent 5.5rem),
    linear-gradient(180deg, rgba(9, 39, 29, 0.94), rgba(1, 14, 10, 0.96)) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.75),
    0 0 18px var(--game-room-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
}

body[data-screen="game"] .hero-game-room span {
  color: var(--game-room-accent) !important;
  font-size: clamp(0.58rem, 0.78vw, 0.72rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body[data-screen="game"] .hero-game-room strong {
  color: var(--game-room-accent) !important;
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  font-weight: 950 !important;
  line-height: 0.94 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 13px var(--game-room-glow) !important;
}

body[data-screen="game"] .hero-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: start !important;
  gap: 0 !important;
  max-width: none !important;
  z-index: 10 !important;
}

body[data-screen="game"] .account-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(10px, 1.1vw, 16px) !important;
  width: auto !important;
}

body[data-screen="game"] .home-player-pill,
body[data-screen="game"] .home-signin-btn,
body[data-screen="game"] .account-action-row .tool-btn:not(.coin-menu-btn),
body[data-screen="game"] .coin-menu-btn {
  height: var(--home-header-button-height) !important;
  min-height: var(--home-header-button-height) !important;
  max-height: var(--home-header-button-height) !important;
}

body[data-screen="game"] .home-player-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  max-width: min(260px, 26vw) !important;
  padding: 0.34rem 0.72rem !important;
  overflow: hidden !important;
  border: 2px solid #f4cc1d !important;
  border-radius: 16px !important;
  color: #eef8ee !important;
  background: rgba(3, 18, 13, 0.82) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: none !important;
}

body[data-screen="game"] .home-player-pill .account-mini-avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

body[data-screen="game"] .home-player-name {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #eef8ee !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-screen="game"] .home-signin-btn {
  align-items: center !important;
  justify-content: center !important;
  padding: 0.38rem 0.9rem !important;
  border-width: 2px !important;
  border-radius: 16px !important;
  color: #11110b !important;
  background: linear-gradient(#ffc93a, #d58918) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body[data-screen="game"] .home-signin-btn::before,
body[data-screen="game"] .home-signin-btn::after,
body[data-screen="game"] .coin-menu-btn::before {
  display: none !important;
}

body[data-screen="game"] .account-action-row #settingsBtn,
body[data-screen="game"] .account-action-row #infoBtn {
  flex: 0 0 var(--home-header-button-height) !important;
  width: var(--home-header-button-height) !important;
  min-width: var(--home-header-button-height) !important;
  max-width: var(--home-header-button-height) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-screen="game"] .account-action-row #settingsBtn::before,
body[data-screen="game"] .account-action-row #infoBtn::before {
  width: calc(var(--home-header-button-height) - 2px) !important;
  height: calc(var(--home-header-button-height) - 2px) !important;
  border: 2px solid rgba(247, 179, 26, 0.82) !important;
  color: #ffd64a !important;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 219, 80, 0.13) 0 22%, rgba(255, 219, 80, 0) 43%),
    linear-gradient(180deg, rgba(1, 30, 22, 0.78), rgba(0, 14, 12, 0.9)) !important;
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 215, 76, 0.14),
    inset 0 0 12px rgba(255, 190, 31, 0.09) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.46), 0 0 9px rgba(255, 209, 60, 0.28) !important;
}

body[data-screen="game"] .account-action-row #settingsBtn::before {
  content: "\2699" !important;
  font-size: calc(var(--home-header-button-height) * 0.51) !important;
}

body[data-screen="game"] .account-action-row #infoBtn::before {
  content: "i" !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: calc(var(--home-header-button-height) * 0.58) !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body[data-screen="game"] .account-action-row .coin-menu-btn {
  aspect-ratio: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 0.75vw, 12px) !important;
  width: auto !important;
  min-width: clamp(104px, 8.8vw, 136px) !important;
  max-width: clamp(104px, 8.8vw, 136px) !important;
  padding: 0 clamp(12px, 1vw, 18px) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  color: #3a1700 !important;
  background:
    radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%),
    linear-gradient(#fff76d, #ffc21f 48%, #ff8e1b) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.62),
    inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip {
  display: inline-grid !important;
  place-items: center !important;
  width: calc(var(--home-header-button-height) * 0.44) !important;
  min-width: calc(var(--home-header-button-height) * 0.44) !important;
  height: calc(var(--home-header-button-height) * 0.44) !important;
  margin: 0 !important;
  border: 2px solid rgba(80, 43, 0, 0.66) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffd75a, #e59418 68%, #995704 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 2px 0 rgba(92, 52, 0, 0.38) !important;
  font-size: calc(var(--home-header-button-height) * 0.25) !important;
}

body[data-screen="game"] .account-action-row .coin-menu-value {
  min-width: 36px !important;
  color: #3a1700 !important;
  font-size: calc(var(--home-header-button-height) * 0.34) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="game"] #gameScreen:not(.hidden) {
  display: block !important;
}

body[data-screen="game"] #gameScreen {
  align-self: stretch !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-screen="game"] .game-table-shell {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) var(--game-control-height) !important;
  gap: clamp(7px, 0.75vw, 12px) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body[data-screen="game"] .new-game-table {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.2)),
    radial-gradient(ellipse at 50% 43%, rgba(42, 167, 91, 0.98) 0 29%, rgba(2, 74, 43, 0.96) 48%, rgba(0, 21, 14, 0.98) 73%),
    linear-gradient(180deg, rgba(13, 44, 33, 0.72), rgba(0, 10, 7, 0.96)) !important;
  box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(246, 191, 44, 0.1) !important;
}

body[data-screen="game"] .new-game-table::before {
  content: "" !important;
  position: absolute !important;
  inset: 11% 6.2% 8% !important;
  border: clamp(4px, 0.55vw, 8px) solid rgba(231, 182, 49, 0.64) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 2px rgba(5, 18, 13, 0.9), 0 0 28px rgba(244, 184, 53, 0.13) !important;
  pointer-events: none !important;
}

body[data-screen="game"] .new-game-table::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.09), transparent 13rem),
    radial-gradient(circle at 80% 24%, rgba(255, 214, 64, 0.08), transparent 11rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 35%, rgba(0, 0, 0, 0.18)) !important;
  pointer-events: none !important;
}

body[data-screen="game"] .table-center-play,
body[data-screen="game"] .game-seat-layer,
body[data-screen="game"] .game-log-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

body[data-screen="game"] .table-center-play {
  pointer-events: none !important;
}

body[data-screen="game"] .game-seat {
  position: absolute !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: clamp(4px, 0.45vw, 7px) clamp(7px, 0.75vw, 11px) !important;
  width: clamp(214px, 18.2vw, 286px) !important;
  min-height: clamp(82px, 8.3vw, 118px) !important;
  padding: clamp(7px, 0.65vw, 10px) !important;
  border: 2px solid rgba(246, 191, 44, 0.9) !important;
  border-radius: 16px !important;
  color: #f9fff8 !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(49, 244, 71, 0.17), transparent 8rem),
    linear-gradient(180deg, rgba(0, 54, 31, 0.94), rgba(0, 17, 11, 0.96)) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  pointer-events: auto !important;
}

body[data-screen="game"] .game-seat.active,
body[data-screen="game"] .game-seat.self {
  border-color: #31f447 !important;
  box-shadow: 0 0 22px rgba(49, 244, 71, 0.28), 0 12px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body[data-screen="game"] .game-seat-left {
  left: 7.7% !important;
  top: 15.2% !important;
}

body[data-screen="game"] .game-seat-top {
  left: 50% !important;
  top: 2.6% !important;
  transform: translateX(-50%) !important;
}

body[data-screen="game"] .game-seat-right {
  right: 7.7% !important;
  top: 15.2% !important;
}

body[data-screen="game"] .game-seat-bottom {
  left: 7.5% !important;
  bottom: 11.5% !important;
  width: clamp(218px, 19vw, 300px) !important;
  min-height: clamp(70px, 6.6vw, 94px) !important;
}

body[data-screen="game"] .game-seat-profile {
  display: contents !important;
}

body[data-screen="game"] .game-avatar {
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(44px, 4.7vw, 68px) !important;
  height: clamp(44px, 4.7vw, 68px) !important;
  overflow: hidden !important;
  border: 3px solid #f6d75a !important;
  border-radius: 50% !important;
  color: #102018 !important;
  background: #f6df18 !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55) !important;
  font-size: clamp(0.9rem, 1.25vw, 1.15rem) !important;
  font-weight: 950 !important;
}

body[data-screen="game"] .game-avatar img,
body[data-screen="game"] .game-avatar .profile-icon.mini {
  width: 100% !important;
  height: 100% !important;
}

body[data-screen="game"] .game-seat-copy strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: clamp(0.82rem, 1.13vw, 1.05rem) !important;
  line-height: 1.06 !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 3px 0 #010806 !important;
  white-space: nowrap !important;
}

body[data-screen="game"] .game-coin-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: clamp(20px, 1.9vw, 27px) !important;
  margin-top: 4px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  color: #201000 !important;
  background: linear-gradient(#fff3a9, #ffc131 62%, #d68c11) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.72) !important;
  font-size: clamp(0.62rem, 0.88vw, 0.78rem) !important;
  font-weight: 950 !important;
}

body[data-screen="game"] .game-seat-cards {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(4px, 0.42vw, 7px) !important;
  align-items: end !important;
}

body[data-screen="game"] .game-seat-footer {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body[data-screen="game"] .game-status-pill {
  min-width: clamp(104px, 10.2vw, 150px) !important;
  min-height: 24px !important;
  padding: 2px 10px !important;
  border: 1px solid rgba(49, 244, 71, 0.72) !important;
  border-radius: 999px !important;
  color: #4cff85 !important;
  background: rgba(0, 34, 20, 0.86) !important;
  font-size: clamp(0.62rem, 0.82vw, 0.76rem) !important;
}

body[data-screen="game"] .table-piles {
  position: absolute !important;
  left: 50% !important;
  top: 29.5% !important;
  display: flex !important;
  align-items: end !important;
  justify-content: center !important;
  gap: clamp(34px, 4.5vw, 66px) !important;
  transform: translateX(-50%) !important;
}

body[data-screen="game"] .new-game-table .deck-stack,
body[data-screen="game"] .new-game-table .discard-stack {
  min-width: clamp(82px, 7vw, 112px) !important;
  min-height: clamp(108px, 9vw, 146px) !important;
}

body[data-screen="game"] .stack-card {
  width: clamp(72px, 6vw, 96px) !important;
  height: clamp(100px, 8.4vw, 132px) !important;
  min-height: 0 !important;
}

body[data-screen="game"] .discard-stack #newCenterDiscard {
  width: clamp(70px, 5.9vw, 94px) !important;
  height: clamp(100px, 8.4vw, 130px) !important;
}

body[data-screen="game"] .new-game-table .deck-stack > span,
body[data-screen="game"] .new-game-table .discard-stack > span {
  margin-top: 5px !important;
  padding: 4px 12px !important;
  color: #42ff83 !important;
  background: rgba(0, 18, 12, 0.88) !important;
  font-size: clamp(0.55rem, 0.72vw, 0.68rem) !important;
}

body[data-screen="game"] .drawn-card-stage {
  left: 8.1% !important;
  top: 54.5% !important;
  width: clamp(70px, 6.1vw, 94px) !important;
  min-height: clamp(104px, 8.8vw, 136px) !important;
  transform: translateY(-50%) !important;
}

body[data-screen="game"] .drawn-card-frame {
  padding: 7px !important;
  border: 4px solid #f6d75a !important;
  border-radius: 3px !important;
  background: rgba(49, 244, 71, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(49, 244, 71, 0.78), 0 0 22px rgba(49, 244, 71, 0.35) !important;
}

body[data-screen="game"] .drawn-card-frame .big-card {
  width: clamp(58px, 5.1vw, 78px) !important;
}

body[data-screen="game"] .game-hint-row {
  left: 24.5% !important;
  right: 17.5% !important;
  bottom: 28.4% !important;
  min-height: clamp(40px, 3.9vw, 54px) !important;
  border: 3px solid #9feeff !important;
  border-radius: 9px !important;
  background: rgba(0, 0, 0, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(7, 24, 22, 0.76), 0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

body[data-screen="game"] .game-hint-row p {
  padding: 0 clamp(13px, 1.8vw, 26px) !important;
  color: #a9efff !important;
  font-size: clamp(0.78rem, 1.12vw, 1rem) !important;
  font-weight: 820 !important;
}

body[data-screen="game"] .turn-timer {
  width: clamp(48px, 4.6vw, 66px) !important;
  height: clamp(48px, 4.6vw, 66px) !important;
  margin-right: -22px !important;
  border: 6px solid #2df77b !important;
  color: #ffffff !important;
  background: #07100e !important;
  font-size: clamp(1.1rem, 1.8vw, 1.62rem) !important;
}

body[data-screen="game"] .self-hand-row {
  left: 33.2% !important;
  right: 28.5% !important;
  bottom: 5.2% !important;
  grid-template-columns: repeat(4, var(--game-self-card-w)) !important;
  justify-content: center !important;
  gap: clamp(9px, 1vw, 16px) !important;
}

body[data-screen="game"] .game-card-slot {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 0.72 / 1 !important;
  border: 3px solid rgba(236, 255, 238, 0.84) !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.6) !important;
}

body[data-screen="game"] .game-seat-cards .game-card-slot,
body[data-screen="game"] .self-hand-row .game-card-slot {
  min-height: 0 !important;
}

body[data-screen="game"] .seen-ribbon {
  min-width: 42px !important;
  color: #140900 !important;
  background: linear-gradient(#ffeb72, #e99d19) !important;
  font-size: clamp(0.48rem, 0.66vw, 0.62rem) !important;
}

body[data-screen="game"] .self-hand-row .seen-ribbon {
  min-width: clamp(56px, 5vw, 78px) !important;
  font-size: clamp(0.62rem, 0.86vw, 0.82rem) !important;
}

body[data-screen="game"] .game-action-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(10px, 1vw, 16px) !important;
  min-height: 0 !important;
}

body[data-screen="game"] .game-action-buttons {
  display: flex !important;
  align-items: center !important;
  gap: clamp(8px, 0.85vw, 13px) !important;
  min-width: 0 !important;
}

body[data-screen="game"] .game-action-btn,
body[data-screen="game"] .view-log-btn {
  min-width: clamp(132px, 11.4vw, 182px) !important;
  min-height: var(--game-control-height) !important;
  padding: 0 0.95rem !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9px !important;
  color: #ffffff !important;
  font-size: clamp(0.78rem, 1.08vw, 0.98rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52) !important;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.72), inset 0 2px 0 rgba(255, 255, 255, 0.18) !important;
}

body[data-screen="game"] .game-action-btn::before,
body[data-screen="game"] .view-log-btn span::before {
  min-width: clamp(22px, 1.95vw, 30px) !important;
  font-size: clamp(1.1rem, 1.65vw, 1.45rem) !important;
}

body[data-screen="game"] .action-reveal::before { content: "\25C9" !important; }
body[data-screen="game"] .action-power::before { content: "\26A1" !important; color: #ffd25d !important; }
body[data-screen="game"] .action-draw::before { content: "+" !important; }
body[data-screen="game"] .action-replace::before { content: "\21C4" !important; }
body[data-screen="game"] .action-discard::before { content: "\232B" !important; }
body[data-screen="game"] .action-remove::before { content: "\2212" !important; }
body[data-screen="game"] .action-koop::before { content: "\270B" !important; }
body[data-screen="game"] .action-continue::before { content: "\2713" !important; }

body[data-screen="game"] .view-log-btn {
  min-width: clamp(160px, 14vw, 210px) !important;
  border-color: #d7a928 !important;
  background: rgba(0, 18, 12, 0.92) !important;
}

body[data-screen="game"] .view-log-btn span::before {
  content: "\2637" !important;
  color: #f6d75a !important;
}

body[data-screen="game"] .game-log-overlay {
  inset: auto clamp(12px, 1.7vw, 24px) clamp(12px, 1.7vw, 24px) auto !important;
  width: min(42vw, 500px) !important;
  max-height: min(78%, 520px) !important;
  padding: clamp(18px, 1.7vw, 28px) !important;
  border: 2px solid rgba(246, 191, 44, 0.86) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 25% 12%, rgba(49, 244, 71, 0.12), transparent 13rem),
    rgba(1, 18, 12, 0.96) !important;
  pointer-events: auto !important;
}

body[data-screen="game"] .game-log-close::before { content: "\00D7" !important; }
body[data-screen="game"] .game-log-icon::before { content: "\25A4" !important; }
body[data-screen="game"] .log-trophy::before { content: "\2655" !important; }
body[data-screen="game"] .log-swap::before { content: "\21C4" !important; }
body[data-screen="game"] .log-card::before { content: "\25AF" !important; }
body[data-screen="game"] .log-timer::before { content: "\25F7" !important; }
body[data-screen="game"] .log-note::before { content: "\2022" !important; }

body[data-screen="game"] .app-footer {
  position: absolute !important;
  display: grid !important;
  left: 30px !important;
  bottom: -58px !important;
  z-index: 3 !important;
  width: max-content !important;
  margin: 0 !important;
}

body[data-screen="game"] .install-app-btn {
  min-width: 116px !important;
  width: auto !important;
  min-height: 42px !important;
  height: 42px !important;
  gap: 9px !important;
  padding: 0 18px !important;
  border: 1.5px solid #31e978 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(21, 111, 68, 0.92), rgba(3, 57, 36, 0.96)),
    #063b27 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 20px rgba(0, 0, 0, 0.24) !important;
  text-shadow: none !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] {
    --home-header-button-height: clamp(34px, 8vh, 42px);
    --game-header-height: clamp(76px, 23%, 112px);
    --game-control-height: clamp(32px, 7.4vh, 42px);
    --game-self-card-w: clamp(48px, 10vh, 74px);
  }

  body[data-screen="game"] .app-shell {
    width: var(--home-frame-width, calc(100vw - 8px)) !important;
    height: var(--home-frame-height, auto) !important;
    margin: 0 auto 42px !important;
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    border-width: 4px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 24px rgba(58, 255, 105, 0.1), 0 6px 0 var(--ink) !important;
  }

  body[data-screen="game"] .hero {
    grid-template-columns: minmax(120px, 1fr) auto minmax(130px, 1fr) !important;
    padding: 2px 0 0 !important;
  }

  body[data-screen="game"] .hero-brand {
    gap: clamp(6px, 1vw, 10px) !important;
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(72px, 16vh, 108px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(112px, 24vw, 158px) !important;
    min-height: clamp(42px, 10vh, 58px) !important;
    padding: 4px 10px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  body[data-screen="game"] .hero-game-room strong {
    font-size: clamp(1.2rem, 5.3vh, 1.85rem) !important;
  }

  body[data-screen="game"] .hero-game-room span {
    font-size: clamp(0.42rem, 1.5vh, 0.55rem) !important;
  }

  body[data-screen="game"] .home-player-pill {
    max-width: 156px !important;
    gap: 6px !important;
    padding-inline: 0.42rem !important;
  }

  body[data-screen="game"] .home-player-pill .account-mini-avatar {
    width: clamp(24px, 6vh, 30px) !important;
    min-width: clamp(24px, 6vh, 30px) !important;
    height: clamp(24px, 6vh, 30px) !important;
  }

  body[data-screen="game"] .home-player-name {
    font-size: clamp(0.58rem, 2vh, 0.82rem) !important;
  }

  body[data-screen="game"] .account-action-row {
    gap: clamp(5px, 0.9vw, 9px) !important;
  }

  body[data-screen="game"] .account-action-row .coin-menu-btn {
    min-width: clamp(82px, 17vw, 104px) !important;
    max-width: clamp(82px, 17vw, 104px) !important;
    gap: 6px !important;
    padding-inline: 0.46rem !important;
  }

  body[data-screen="game"] .account-action-row .coin-menu-value {
    min-width: 34px !important;
    font-size: clamp(0.62rem, 2vh, 0.82rem) !important;
  }

  body[data-screen="game"] .game-table-shell {
    gap: clamp(4px, 0.8vh, 7px) !important;
  }

  body[data-screen="game"] .new-game-table::before {
    inset: 12% 5.2% 7.8% !important;
    border-width: 3px !important;
  }

  body[data-screen="game"] .game-seat {
    width: clamp(140px, 25vw, 190px) !important;
    min-height: clamp(58px, 16vh, 82px) !important;
    gap: 3px 6px !important;
    padding: 5px !important;
    border-radius: 11px !important;
  }

  body[data-screen="game"] .game-seat-left {
    left: 3.4% !important;
    top: 17% !important;
  }

  body[data-screen="game"] .game-seat-top {
    top: 2% !important;
  }

  body[data-screen="game"] .game-seat-right {
    right: 3.4% !important;
    top: 17% !important;
  }

  body[data-screen="game"] .game-seat-bottom {
    left: 4% !important;
    bottom: 12.2% !important;
  }

  body[data-screen="game"] .game-avatar {
    width: clamp(30px, 8vh, 44px) !important;
    height: clamp(30px, 8vh, 44px) !important;
    border-width: 2px !important;
  }

  body[data-screen="game"] .game-seat-copy strong {
    font-size: clamp(0.55rem, 2.05vh, 0.76rem) !important;
  }

  body[data-screen="game"] .game-coin-pill {
    min-height: clamp(17px, 4vh, 22px) !important;
    padding: 1px 6px !important;
    font-size: clamp(0.5rem, 1.8vh, 0.66rem) !important;
  }

  body[data-screen="game"] .game-status-pill {
    min-width: clamp(74px, 15vw, 108px) !important;
    min-height: clamp(18px, 4.2vh, 23px) !important;
    font-size: clamp(0.46rem, 1.6vh, 0.6rem) !important;
  }

  body[data-screen="game"] .game-tag {
    min-width: clamp(28px, 6vw, 38px) !important;
    min-height: clamp(16px, 3.6vh, 20px) !important;
    font-size: clamp(0.42rem, 1.45vh, 0.54rem) !important;
  }

  body[data-screen="game"] .table-piles {
    top: 27% !important;
    gap: clamp(18px, 4vw, 34px) !important;
  }

  body[data-screen="game"] .stack-card,
  body[data-screen="game"] .discard-stack #newCenterDiscard {
    width: clamp(48px, 10vh, 70px) !important;
    height: clamp(66px, 14vh, 96px) !important;
  }

  body[data-screen="game"] .new-game-table .deck-stack > span,
  body[data-screen="game"] .new-game-table .discard-stack > span {
    padding: 2px 7px !important;
    font-size: clamp(0.42rem, 1.35vh, 0.55rem) !important;
  }

  body[data-screen="game"] .drawn-card-stage {
    left: 4.8% !important;
    top: 56% !important;
    width: clamp(46px, 9.5vh, 68px) !important;
    min-height: clamp(68px, 14vh, 96px) !important;
  }

  body[data-screen="game"] .drawn-card-frame {
    padding: 5px !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(49, 244, 71, 0.78), 0 0 16px rgba(49, 244, 71, 0.35) !important;
  }

  body[data-screen="game"] .drawn-card-frame .big-card {
    width: clamp(38px, 8vh, 56px) !important;
  }

  body[data-screen="game"] .game-hint-row {
    left: 24% !important;
    right: 14% !important;
    bottom: 29% !important;
    min-height: clamp(28px, 6.8vh, 38px) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(7, 24, 22, 0.76), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
  }

  body[data-screen="game"] .game-hint-row p {
    padding-inline: clamp(7px, 1.4vw, 12px) !important;
    font-size: clamp(0.52rem, 1.85vh, 0.72rem) !important;
  }

  body[data-screen="game"] .turn-timer {
    width: clamp(34px, 8vh, 46px) !important;
    height: clamp(34px, 8vh, 46px) !important;
    margin-right: -16px !important;
    border-width: 4px !important;
    font-size: clamp(0.82rem, 3.1vh, 1.12rem) !important;
  }

  body[data-screen="game"] .self-hand-row {
    left: 34% !important;
    right: 24% !important;
    bottom: 5.8% !important;
    gap: clamp(5px, 0.9vw, 8px) !important;
  }

  body[data-screen="game"] .seen-ribbon {
    min-width: 32px !important;
    padding: 1px 5px !important;
    font-size: clamp(0.36rem, 1.35vh, 0.48rem) !important;
  }

  body[data-screen="game"] .self-hand-row .seen-ribbon {
    min-width: 42px !important;
    font-size: clamp(0.48rem, 1.6vh, 0.6rem) !important;
  }

  body[data-screen="game"] .game-action-buttons {
    gap: clamp(4px, 0.7vw, 7px) !important;
  }

  body[data-screen="game"] .game-action-btn,
  body[data-screen="game"] .view-log-btn {
    min-width: clamp(72px, 14.5vw, 106px) !important;
    padding-inline: 0.42rem !important;
    border-radius: 7px !important;
    font-size: clamp(0.48rem, 1.75vh, 0.68rem) !important;
  }

  body[data-screen="game"] .game-action-btn::before,
  body[data-screen="game"] .view-log-btn span::before {
    min-width: clamp(15px, 3.4vh, 21px) !important;
    font-size: clamp(0.75rem, 2.6vh, 1rem) !important;
  }

  body[data-screen="game"] .view-log-btn {
    min-width: clamp(88px, 17vw, 124px) !important;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(58vw, 420px) !important;
    max-height: 82% !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body[data-screen="game"] .app-footer {
    left: 16px !important;
    bottom: -42px !important;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="game"] .app-shell {
  width: var(--home-frame-width, calc(100vw - 8px)) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
}

/* Game screen final: keep the home frame/header and replace only the middle play area. */
body[data-screen="game"] {
  --game-header-height: clamp(104px, 17.5%, 154px);
  --game-control-height: clamp(42px, 4.2vw, 58px);
  --game-card-w: clamp(50px, 4.8vw, 72px);
  --game-self-card-w: clamp(72px, 6.8vw, 106px);
  --game-room-accent: var(--lobby-code-accent, #ff2736);
  --game-room-glow: var(--lobby-code-glow, rgba(255, 39, 54, 0.36));
  --home-header-button-height: 50px;
  place-items: center !important;
  align-content: center !important;
  min-height: var(--koop-vh, 100vh) !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(247, 201, 72, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(0, 10, 8, 0.4), rgba(0, 14, 9, 0.88)),
    url("koops-table-bg.svg") center / cover fixed no-repeat,
    #00130d !important;
}

body[data-screen="game"] .app-shell {
  width: var(--home-frame-width, min(1450px, calc(100vw - 24px))) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  display: grid !important;
  grid-template-rows: var(--game-header-height) minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 auto 58px !important;
  padding: clamp(8px, 0.8vw, 14px) clamp(12px, 1.35vw, 22px) clamp(10px, 0.9vw, 16px) !important;
  border: 7px solid #f6bd21 !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(24, 65, 48, 0.35), transparent 16rem),
    linear-gradient(90deg, rgba(0, 23, 14, 0.96), rgba(0, 36, 21, 0.92) 50%, rgba(0, 20, 13, 0.96)) !important;
  box-shadow: inset 0 0 34px rgba(58, 255, 105, 0.12), 0 12px 0 var(--ink) !important;
}

body[data-screen="game"] .app-shell::before,
body[data-screen="game"] .hero::before {
  display: none !important;
}

body[data-screen="game"] .hero {
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
  align-items: start !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 4px 0 !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="game"] .home-player-strip {
  grid-column: 1 !important;
  justify-self: start !important;
  align-items: center !important;
  gap: 9px !important;
  z-index: 10 !important;
}

body[data-screen="game"] .hero-brand {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: start !important;
  gap: clamp(12px, 1.1vw, 18px) !important;
  min-width: 0 !important;
  transform: translateY(-2px) !important;
}

body[data-screen="game"] .hero-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-screen="game"] .hero-emblem {
  width: clamp(112px, 10.8vw, 170px) !important;
  max-height: calc(var(--game-header-height) - 8px) !important;
  filter: drop-shadow(0 13px 22px rgba(0, 0, 0, 0.62)) !important;
}

body[data-screen="game"] .hero-emblem img {
  display: block !important;
  width: 100% !important;
  max-height: calc(var(--game-header-height) - 8px) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

body[data-screen="game"] .hero-game-room {
  display: grid !important;
  place-items: center !important;
  min-width: clamp(170px, 16vw, 250px) !important;
  min-height: clamp(62px, 6vw, 86px) !important;
  padding: 7px 18px !important;
  border: 3px solid var(--game-room-accent) !important;
  border-radius: 14px !important;
  color: var(--game-room-accent) !important;
  background:
    radial-gradient(circle at 50% 20%, var(--game-room-glow), transparent 5.5rem),
    linear-gradient(180deg, rgba(9, 39, 29, 0.94), rgba(1, 14, 10, 0.96)) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.75),
    0 0 18px var(--game-room-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
}

body[data-screen="game"] .hero-game-room span {
  color: var(--game-room-accent) !important;
  font-size: clamp(0.58rem, 0.78vw, 0.72rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body[data-screen="game"] .hero-game-room strong {
  color: var(--game-room-accent) !important;
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  font-weight: 950 !important;
  line-height: 0.94 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 13px var(--game-room-glow) !important;
}

body[data-screen="game"] .hero-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: start !important;
  gap: 0 !important;
  max-width: none !important;
  z-index: 10 !important;
}

body[data-screen="game"] .account-prompt,
body[data-screen="game"] .profile-menu-btn,
body[data-screen="game"] .close-menu-btn,
body[data-screen="game"] .account-menu-trigger,
body[data-screen="game"] #guestProfileBtn,
body[data-screen="game"] #closeAccountMenuBtn {
  display: none !important;
}

body[data-screen="game"] .home-signin-btn.hidden,
body[data-screen="game"] .tool-btn.hidden,
body.home-lobby-mode .home-signin-btn.hidden,
body.home-lobby-mode .tool-btn.hidden {
  display: none !important;
}

body[data-screen="game"] .account-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(10px, 1.1vw, 16px) !important;
  width: auto !important;
}

body[data-screen="game"] .home-player-pill,
body[data-screen="game"] .home-signin-btn,
body[data-screen="game"] .account-action-row .tool-btn:not(.coin-menu-btn),
body[data-screen="game"] .coin-menu-btn {
  height: var(--home-header-button-height) !important;
  min-height: var(--home-header-button-height) !important;
  max-height: var(--home-header-button-height) !important;
}

body[data-screen="game"] .home-player-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  max-width: min(260px, 26vw) !important;
  padding: 0.34rem 0.72rem !important;
  overflow: hidden !important;
  border: 2px solid #f4cc1d !important;
  border-radius: 16px !important;
  color: #eef8ee !important;
  background: rgba(3, 18, 13, 0.82) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: none !important;
}

body[data-screen="game"] .home-player-pill .account-mini-avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

body[data-screen="game"] .home-player-name {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #eef8ee !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-screen="game"] .home-signin-btn {
  align-items: center !important;
  justify-content: center !important;
  padding: 0.38rem 0.9rem !important;
  border-width: 2px !important;
  border-radius: 16px !important;
  color: #11110b !important;
  background: linear-gradient(#ffc93a, #d58918) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.62), inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body[data-screen="game"] .home-signin-btn::before,
body[data-screen="game"] .home-signin-btn::after {
  display: none !important;
}

body[data-screen="game"] .account-action-row #settingsBtn,
body[data-screen="game"] .account-action-row #infoBtn {
  flex: 0 0 var(--home-header-button-height) !important;
  width: var(--home-header-button-height) !important;
  min-width: var(--home-header-button-height) !important;
  max-width: var(--home-header-button-height) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-screen="game"] .account-action-row #settingsBtn::before,
body[data-screen="game"] .account-action-row #infoBtn::before {
  width: calc(var(--home-header-button-height) - 2px) !important;
  height: calc(var(--home-header-button-height) - 2px) !important;
  border: 2px solid rgba(247, 179, 26, 0.82) !important;
  color: #ffd64a !important;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 219, 80, 0.13) 0 22%, rgba(255, 219, 80, 0) 43%),
    linear-gradient(180deg, rgba(1, 30, 22, 0.78), rgba(0, 14, 12, 0.9)) !important;
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 215, 76, 0.14),
    inset 0 0 12px rgba(255, 190, 31, 0.09) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.46), 0 0 9px rgba(255, 209, 60, 0.28) !important;
}

body[data-screen="game"] .account-action-row #settingsBtn::before {
  content: "\2699" !important;
  font-size: calc(var(--home-header-button-height) * 0.51) !important;
}

body[data-screen="game"] .account-action-row #infoBtn::before {
  content: "i" !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: calc(var(--home-header-button-height) * 0.58) !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body[data-screen="game"] .account-action-row .coin-menu-btn {
  aspect-ratio: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 0.75vw, 12px) !important;
  width: auto !important;
  min-width: clamp(104px, 8.8vw, 136px) !important;
  max-width: clamp(104px, 8.8vw, 136px) !important;
  padding: 0 clamp(12px, 1vw, 18px) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  color: #3a1700 !important;
  background:
    radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%),
    linear-gradient(#fff76d, #ffc21f 48%, #ff8e1b) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.62),
    inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="game"] .coin-menu-btn::before {
  display: none !important;
}

body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip {
  display: inline-grid !important;
  place-items: center !important;
  width: calc(var(--home-header-button-height) * 0.44) !important;
  min-width: calc(var(--home-header-button-height) * 0.44) !important;
  height: calc(var(--home-header-button-height) * 0.44) !important;
  margin: 0 !important;
  border: 2px solid rgba(80, 43, 0, 0.66) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffd75a, #e59418 68%, #995704 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 2px 0 rgba(92, 52, 0, 0.38) !important;
  font-size: calc(var(--home-header-button-height) * 0.25) !important;
}

body[data-screen="game"] .account-action-row .coin-menu-value {
  min-width: 36px !important;
  color: #3a1700 !important;
  font-size: calc(var(--home-header-button-height) * 0.34) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body[data-screen="game"] #gameScreen:not(.hidden) {
  display: block !important;
}

body[data-screen="game"] #gameScreen {
  align-self: stretch !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-screen="game"] #gameScreen > .game-topbar,
body[data-screen="game"] #gameScreen > .game-main {
  display: none !important;
}

body[data-screen="game"] .game-table-shell {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) var(--game-control-height) !important;
  gap: clamp(7px, 0.75vw, 12px) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body[data-screen="game"] .new-game-table {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.2)),
    radial-gradient(ellipse at 50% 43%, rgba(42, 167, 91, 0.98) 0 29%, rgba(2, 74, 43, 0.96) 48%, rgba(0, 21, 14, 0.98) 73%),
    linear-gradient(180deg, rgba(13, 44, 33, 0.72), rgba(0, 10, 7, 0.96)) !important;
  box-shadow:
    inset 0 0 44px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(246, 191, 44, 0.1) !important;
}

body[data-screen="game"] .new-game-table::before {
  content: "" !important;
  position: absolute !important;
  inset: 11% 6.2% 8% !important;
  border: clamp(4px, 0.55vw, 8px) solid rgba(231, 182, 49, 0.64) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 0 2px rgba(5, 18, 13, 0.9),
    0 0 28px rgba(244, 184, 53, 0.13) !important;
  pointer-events: none !important;
}

body[data-screen="game"] .new-game-table::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.09), transparent 13rem),
    radial-gradient(circle at 80% 24%, rgba(255, 214, 64, 0.08), transparent 11rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 35%, rgba(0, 0, 0, 0.18)) !important;
  pointer-events: none !important;
}

body[data-screen="game"] .table-center-play,
body[data-screen="game"] .game-seat-layer,
body[data-screen="game"] .game-log-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

body[data-screen="game"] .table-center-play {
  pointer-events: none !important;
}

body[data-screen="game"] .game-seat {
  position: absolute !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: clamp(4px, 0.45vw, 7px) clamp(7px, 0.75vw, 11px) !important;
  width: clamp(214px, 18.2vw, 286px) !important;
  min-height: clamp(82px, 8.3vw, 118px) !important;
  padding: clamp(7px, 0.65vw, 10px) !important;
  border: 2px solid rgba(246, 191, 44, 0.9) !important;
  border-radius: 16px !important;
  color: #f9fff8 !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(49, 244, 71, 0.17), transparent 8rem),
    linear-gradient(180deg, rgba(0, 54, 31, 0.94), rgba(0, 17, 11, 0.96)) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  pointer-events: auto !important;
}

body[data-screen="game"] .game-seat.active,
body[data-screen="game"] .game-seat.self {
  border-color: #31f447 !important;
  box-shadow:
    0 0 22px rgba(49, 244, 71, 0.28),
    0 12px 26px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body[data-screen="game"] .game-seat-left {
  left: 7.7% !important;
  top: 15.2% !important;
}

body[data-screen="game"] .game-seat-top {
  left: 50% !important;
  top: 2.6% !important;
  transform: translateX(-50%) !important;
}

body[data-screen="game"] .game-seat-right {
  right: 7.7% !important;
  top: 15.2% !important;
}

body[data-screen="game"] .game-seat-bottom {
  left: 7.5% !important;
  bottom: 11.5% !important;
  width: clamp(218px, 19vw, 300px) !important;
  min-height: clamp(70px, 6.6vw, 94px) !important;
}

body[data-screen="game"] .game-seat-profile {
  display: contents !important;
}

body[data-screen="game"] .game-avatar {
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(44px, 4.7vw, 68px) !important;
  height: clamp(44px, 4.7vw, 68px) !important;
  overflow: hidden !important;
  border: 3px solid #f6d75a !important;
  border-radius: 50% !important;
  color: #102018 !important;
  background: #f6df18 !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55) !important;
  font-size: clamp(0.9rem, 1.25vw, 1.15rem) !important;
  font-weight: 950 !important;
}

body[data-screen="game"] .game-avatar img,
body[data-screen="game"] .game-avatar .profile-icon.mini {
  width: 100% !important;
  height: 100% !important;
}

body[data-screen="game"] .game-seat-copy {
  min-width: 0 !important;
}

body[data-screen="game"] .game-seat-copy strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: clamp(0.82rem, 1.13vw, 1.05rem) !important;
  line-height: 1.06 !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 3px 0 #010806 !important;
  white-space: nowrap !important;
}

body[data-screen="game"] .game-coin-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: clamp(20px, 1.9vw, 27px) !important;
  margin-top: 4px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  color: #201000 !important;
  background: linear-gradient(#fff3a9, #ffc131 62%, #d68c11) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.72) !important;
  font-size: clamp(0.62rem, 0.88vw, 0.78rem) !important;
  font-weight: 950 !important;
}

body[data-screen="game"] .game-seat-cards {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(4px, 0.42vw, 7px) !important;
  align-items: end !important;
}

body[data-screen="game"] .game-seat-footer {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body[data-screen="game"] .game-status-pill {
  min-width: clamp(104px, 10.2vw, 150px) !important;
  min-height: 24px !important;
  padding: 2px 10px !important;
  border: 1px solid rgba(49, 244, 71, 0.72) !important;
  border-radius: 999px !important;
  color: #4cff85 !important;
  background: rgba(0, 34, 20, 0.86) !important;
  font-size: clamp(0.62rem, 0.82vw, 0.76rem) !important;
}

body[data-screen="game"] .table-piles {
  position: absolute !important;
  left: 50% !important;
  top: 29.5% !important;
  display: flex !important;
  align-items: end !important;
  justify-content: center !important;
  gap: clamp(34px, 4.5vw, 66px) !important;
  transform: translateX(-50%) !important;
}

body[data-screen="game"] .new-game-table .deck-stack,
body[data-screen="game"] .new-game-table .discard-stack {
  min-width: clamp(82px, 7vw, 112px) !important;
  min-height: clamp(108px, 9vw, 146px) !important;
}

body[data-screen="game"] .stack-card {
  width: clamp(72px, 6vw, 96px) !important;
  height: clamp(100px, 8.4vw, 132px) !important;
  min-height: 0 !important;
}

body[data-screen="game"] .discard-stack #newCenterDiscard {
  width: clamp(70px, 5.9vw, 94px) !important;
  height: clamp(100px, 8.4vw, 130px) !important;
}

body[data-screen="game"] .new-game-table .deck-stack > span,
body[data-screen="game"] .new-game-table .discard-stack > span {
  margin-top: 5px !important;
  padding: 4px 12px !important;
  color: #42ff83 !important;
  background: rgba(0, 18, 12, 0.88) !important;
  font-size: clamp(0.55rem, 0.72vw, 0.68rem) !important;
}

body[data-screen="game"] .drawn-card-stage {
  left: 8.1% !important;
  top: 54.5% !important;
  width: clamp(70px, 6.1vw, 94px) !important;
  min-height: clamp(104px, 8.8vw, 136px) !important;
  transform: translateY(-50%) !important;
}

body[data-screen="game"] .drawn-card-frame {
  padding: 7px !important;
  border: 4px solid #f6d75a !important;
  border-radius: 3px !important;
  background: rgba(49, 244, 71, 0.08) !important;
  box-shadow:
    0 0 0 4px rgba(49, 244, 71, 0.78),
    0 0 22px rgba(49, 244, 71, 0.35) !important;
}

body[data-screen="game"] .drawn-card-frame .big-card {
  width: clamp(58px, 5.1vw, 78px) !important;
}

body[data-screen="game"] .game-hint-row {
  left: 24.5% !important;
  right: 17.5% !important;
  bottom: 28.4% !important;
  min-height: clamp(40px, 3.9vw, 54px) !important;
  border: 3px solid #9feeff !important;
  border-radius: 9px !important;
  background: rgba(0, 0, 0, 0.92) !important;
  box-shadow:
    0 0 0 4px rgba(7, 24, 22, 0.76),
    0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

body[data-screen="game"] .game-hint-row p {
  padding: 0 clamp(13px, 1.8vw, 26px) !important;
  color: #a9efff !important;
  font-size: clamp(0.78rem, 1.12vw, 1rem) !important;
  font-weight: 820 !important;
}

body[data-screen="game"] .turn-timer {
  width: clamp(48px, 4.6vw, 66px) !important;
  height: clamp(48px, 4.6vw, 66px) !important;
  margin-right: -22px !important;
  border: 6px solid #2df77b !important;
  color: #ffffff !important;
  background: #07100e !important;
  font-size: clamp(1.1rem, 1.8vw, 1.62rem) !important;
}

body[data-screen="game"] .self-hand-row {
  left: 33.2% !important;
  right: 28.5% !important;
  bottom: 5.2% !important;
  grid-template-columns: repeat(4, var(--game-self-card-w)) !important;
  justify-content: center !important;
  gap: clamp(9px, 1vw, 16px) !important;
}

body[data-screen="game"] .game-card-slot {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 0.72 / 1 !important;
  border: 3px solid rgba(236, 255, 238, 0.84) !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.6) !important;
}

body[data-screen="game"] .game-seat-cards .game-card-slot {
  min-height: 0 !important;
}

body[data-screen="game"] .self-hand-row .game-card-slot {
  min-height: 0 !important;
}

body[data-screen="game"] .seen-ribbon {
  min-width: 42px !important;
  color: #140900 !important;
  background: linear-gradient(#ffeb72, #e99d19) !important;
  font-size: clamp(0.48rem, 0.66vw, 0.62rem) !important;
}

body[data-screen="game"] .self-hand-row .seen-ribbon {
  min-width: clamp(56px, 5vw, 78px) !important;
  font-size: clamp(0.62rem, 0.86vw, 0.82rem) !important;
}

body[data-screen="game"] .game-action-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(10px, 1vw, 16px) !important;
  min-height: 0 !important;
}

body[data-screen="game"] .game-action-buttons {
  display: flex !important;
  align-items: center !important;
  gap: clamp(8px, 0.85vw, 13px) !important;
  min-width: 0 !important;
}

body[data-screen="game"] .game-action-btn,
body[data-screen="game"] .view-log-btn {
  min-width: clamp(132px, 11.4vw, 182px) !important;
  min-height: var(--game-control-height) !important;
  padding: 0 0.95rem !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9px !important;
  color: #ffffff !important;
  font-size: clamp(0.78rem, 1.08vw, 0.98rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52) !important;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.72),
    inset 0 2px 0 rgba(255, 255, 255, 0.18) !important;
}

body[data-screen="game"] .game-action-btn::before,
body[data-screen="game"] .view-log-btn span::before {
  min-width: clamp(22px, 1.95vw, 30px) !important;
  font-size: clamp(1.1rem, 1.65vw, 1.45rem) !important;
}

body[data-screen="game"] .action-reveal::before { content: "\25C9" !important; }
body[data-screen="game"] .action-power::before { content: "\26A1" !important; color: #ffd25d !important; }
body[data-screen="game"] .action-draw::before { content: "+" !important; }
body[data-screen="game"] .action-replace::before { content: "\21C4" !important; }
body[data-screen="game"] .action-discard::before { content: "\232B" !important; }
body[data-screen="game"] .action-remove::before { content: "\2212" !important; }
body[data-screen="game"] .action-koop::before { content: "\270B" !important; }
body[data-screen="game"] .action-continue::before { content: "\2713" !important; }

body[data-screen="game"] .view-log-btn {
  min-width: clamp(160px, 14vw, 210px) !important;
  border-color: #d7a928 !important;
  background: rgba(0, 18, 12, 0.92) !important;
}

body[data-screen="game"] .view-log-btn span::before {
  content: "\2637" !important;
  color: #f6d75a !important;
}

body[data-screen="game"] .game-log-overlay {
  inset: auto clamp(12px, 1.7vw, 24px) clamp(12px, 1.7vw, 24px) auto !important;
  width: min(42vw, 500px) !important;
  max-height: min(78%, 520px) !important;
  padding: clamp(18px, 1.7vw, 28px) !important;
  border: 2px solid rgba(246, 191, 44, 0.86) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 25% 12%, rgba(49, 244, 71, 0.12), transparent 13rem),
    rgba(1, 18, 12, 0.96) !important;
  pointer-events: auto !important;
}

body[data-screen="game"] .game-log-close::before {
  content: "\00D7" !important;
}

body[data-screen="game"] .game-log-icon::before {
  content: "\25A4" !important;
}

body[data-screen="game"] .log-trophy::before { content: "\2655" !important; }
body[data-screen="game"] .log-swap::before { content: "\21C4" !important; }
body[data-screen="game"] .log-card::before { content: "\25AF" !important; }
body[data-screen="game"] .log-timer::before { content: "\25F7" !important; }
body[data-screen="game"] .log-note::before { content: "\2022" !important; }

body[data-screen="game"] .app-footer {
  position: absolute !important;
  display: grid !important;
  left: 30px !important;
  bottom: -58px !important;
  z-index: 3 !important;
  width: max-content !important;
  margin: 0 !important;
}

body[data-screen="game"] .install-app-btn {
  min-width: 116px !important;
  width: auto !important;
  min-height: 42px !important;
  height: 42px !important;
  gap: 9px !important;
  padding: 0 18px !important;
  border: 1.5px solid #31e978 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(21, 111, 68, 0.92), rgba(3, 57, 36, 0.96)),
    #063b27 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 20px rgba(0, 0, 0, 0.24) !important;
  text-shadow: none !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] {
    --home-header-button-height: clamp(34px, 8vh, 42px);
    --game-header-height: clamp(76px, 23%, 112px);
    --game-control-height: clamp(32px, 7.4vh, 42px);
    --game-card-w: clamp(36px, 7.8vh, 52px);
    --game-self-card-w: clamp(48px, 10vh, 74px);
  }

  body[data-screen="game"] .app-shell {
    width: var(--home-frame-width, calc(100vw - 8px)) !important;
    height: var(--home-frame-height, auto) !important;
    margin: 0 auto 42px !important;
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    border-width: 4px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 24px rgba(58, 255, 105, 0.1), 0 6px 0 var(--ink) !important;
  }

  body[data-screen="game"] .hero {
    grid-template-columns: minmax(120px, 1fr) auto minmax(130px, 1fr) !important;
    padding: 2px 0 0 !important;
  }

  body[data-screen="game"] .hero-brand {
    gap: clamp(6px, 1vw, 10px) !important;
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(72px, 16vh, 108px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(112px, 24vw, 158px) !important;
    min-height: clamp(42px, 10vh, 58px) !important;
    padding: 4px 10px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
  }

  body[data-screen="game"] .hero-game-room strong {
    font-size: clamp(1.2rem, 5.3vh, 1.85rem) !important;
  }

  body[data-screen="game"] .hero-game-room span {
    font-size: clamp(0.42rem, 1.5vh, 0.55rem) !important;
  }

  body[data-screen="game"] .home-player-pill {
    max-width: 156px !important;
    gap: 6px !important;
    padding-inline: 0.42rem !important;
  }

  body[data-screen="game"] .home-player-pill .account-mini-avatar {
    width: clamp(24px, 6vh, 30px) !important;
    min-width: clamp(24px, 6vh, 30px) !important;
    height: clamp(24px, 6vh, 30px) !important;
  }

  body[data-screen="game"] .home-player-name {
    font-size: clamp(0.58rem, 2vh, 0.82rem) !important;
  }

  body[data-screen="game"] .account-action-row {
    gap: clamp(5px, 0.9vw, 9px) !important;
  }

  body[data-screen="game"] .account-action-row .coin-menu-btn {
    min-width: clamp(82px, 17vw, 104px) !important;
    max-width: clamp(82px, 17vw, 104px) !important;
    gap: 6px !important;
    padding-inline: 0.46rem !important;
  }

  body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip {
    width: clamp(20px, 5.2vh, 25px) !important;
    min-width: clamp(20px, 5.2vh, 25px) !important;
    height: clamp(20px, 5.2vh, 25px) !important;
  }

  body[data-screen="game"] .account-action-row .coin-menu-value {
    min-width: 34px !important;
    font-size: clamp(0.62rem, 2vh, 0.82rem) !important;
  }

  body[data-screen="game"] .game-table-shell {
    gap: clamp(4px, 0.8vh, 7px) !important;
  }

  body[data-screen="game"] .new-game-table {
    border-radius: 9px !important;
  }

  body[data-screen="game"] .new-game-table::before {
    inset: 12% 5.2% 7.8% !important;
    border-width: 3px !important;
  }

  body[data-screen="game"] .game-seat {
    width: clamp(140px, 25vw, 190px) !important;
    min-height: clamp(58px, 16vh, 82px) !important;
    gap: 3px 6px !important;
    padding: 5px !important;
    border-radius: 11px !important;
  }

  body[data-screen="game"] .game-seat-left {
    left: 3.4% !important;
    top: 17% !important;
  }

  body[data-screen="game"] .game-seat-top {
    top: 2% !important;
  }

  body[data-screen="game"] .game-seat-right {
    right: 3.4% !important;
    top: 17% !important;
  }

  body[data-screen="game"] .game-seat-bottom {
    left: 4% !important;
    bottom: 12.2% !important;
  }

  body[data-screen="game"] .game-avatar {
    width: clamp(30px, 8vh, 44px) !important;
    height: clamp(30px, 8vh, 44px) !important;
    border-width: 2px !important;
  }

  body[data-screen="game"] .game-seat-copy strong {
    font-size: clamp(0.55rem, 2.05vh, 0.76rem) !important;
  }

  body[data-screen="game"] .game-coin-pill {
    min-height: clamp(17px, 4vh, 22px) !important;
    padding: 1px 6px !important;
    font-size: clamp(0.5rem, 1.8vh, 0.66rem) !important;
  }

  body[data-screen="game"] .game-status-pill {
    min-width: clamp(74px, 15vw, 108px) !important;
    min-height: clamp(18px, 4.2vh, 23px) !important;
    font-size: clamp(0.46rem, 1.6vh, 0.6rem) !important;
  }

  body[data-screen="game"] .game-tag {
    min-width: clamp(28px, 6vw, 38px) !important;
    min-height: clamp(16px, 3.6vh, 20px) !important;
    font-size: clamp(0.42rem, 1.45vh, 0.54rem) !important;
  }

  body[data-screen="game"] .table-piles {
    top: 27% !important;
    gap: clamp(18px, 4vw, 34px) !important;
  }

  body[data-screen="game"] .stack-card,
  body[data-screen="game"] .discard-stack #newCenterDiscard {
    width: clamp(48px, 10vh, 70px) !important;
    height: clamp(66px, 14vh, 96px) !important;
  }

  body[data-screen="game"] .new-game-table .deck-stack > span,
  body[data-screen="game"] .new-game-table .discard-stack > span {
    padding: 2px 7px !important;
    font-size: clamp(0.42rem, 1.35vh, 0.55rem) !important;
  }

  body[data-screen="game"] .drawn-card-stage {
    left: 4.8% !important;
    top: 56% !important;
    width: clamp(46px, 9.5vh, 68px) !important;
    min-height: clamp(68px, 14vh, 96px) !important;
  }

  body[data-screen="game"] .drawn-card-frame {
    padding: 5px !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(49, 244, 71, 0.78), 0 0 16px rgba(49, 244, 71, 0.35) !important;
  }

  body[data-screen="game"] .drawn-card-frame .big-card {
    width: clamp(38px, 8vh, 56px) !important;
  }

  body[data-screen="game"] .game-hint-row {
    left: 24% !important;
    right: 14% !important;
    bottom: 29% !important;
    min-height: clamp(28px, 6.8vh, 38px) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(7, 24, 22, 0.76), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
  }

  body[data-screen="game"] .game-hint-row p {
    padding-inline: clamp(7px, 1.4vw, 12px) !important;
    font-size: clamp(0.52rem, 1.85vh, 0.72rem) !important;
  }

  body[data-screen="game"] .turn-timer {
    width: clamp(34px, 8vh, 46px) !important;
    height: clamp(34px, 8vh, 46px) !important;
    margin-right: -16px !important;
    border-width: 4px !important;
    font-size: clamp(0.82rem, 3.1vh, 1.12rem) !important;
  }

  body[data-screen="game"] .self-hand-row {
    left: 34% !important;
    right: 24% !important;
    bottom: 5.8% !important;
    gap: clamp(5px, 0.9vw, 8px) !important;
  }

  body[data-screen="game"] .seen-ribbon {
    min-width: 32px !important;
    padding: 1px 5px !important;
    font-size: clamp(0.36rem, 1.35vh, 0.48rem) !important;
  }

  body[data-screen="game"] .self-hand-row .seen-ribbon {
    min-width: 42px !important;
    font-size: clamp(0.48rem, 1.6vh, 0.6rem) !important;
  }

  body[data-screen="game"] .game-action-buttons {
    gap: clamp(4px, 0.7vw, 7px) !important;
  }

  body[data-screen="game"] .game-action-btn,
  body[data-screen="game"] .view-log-btn {
    min-width: clamp(72px, 14.5vw, 106px) !important;
    padding-inline: 0.42rem !important;
    border-radius: 7px !important;
    font-size: clamp(0.48rem, 1.75vh, 0.68rem) !important;
  }

  body[data-screen="game"] .game-action-btn::before,
  body[data-screen="game"] .view-log-btn span::before {
    min-width: clamp(15px, 3.4vh, 21px) !important;
    font-size: clamp(0.75rem, 2.6vh, 1rem) !important;
  }

  body[data-screen="game"] .view-log-btn {
    min-width: clamp(88px, 17vw, 124px) !important;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(58vw, 420px) !important;
    max-height: 82% !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body[data-screen="game"] .app-footer {
    left: 16px !important;
    bottom: -42px !important;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="game"] .app-shell {
  width: var(--home-frame-width, calc(100vw - 8px)) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
}

/* New game table replacement: keeps the home frame while replacing the old active game UI. */
.hero-game-room {
  display: none;
}

body[data-screen="game"] {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: var(--koop-vh, 100vh);
  padding-top: 14px;
}

body[data-screen="game"] .app-shell {
  width: var(--home-frame-width, min(1450px, calc(100vw - 24px))) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  display: grid !important;
  grid-template-rows: minmax(118px, 22%) minmax(0, 1fr);
  gap: clamp(6px, 0.8vw, 12px);
  margin: 0 auto 84px !important;
  padding: clamp(10px, 1vw, 18px) clamp(14px, 1.5vw, 24px) clamp(12px, 1vw, 18px) !important;
}

body[data-screen="game"] .hero {
  min-height: 0 !important;
  height: 100%;
  padding: clamp(5px, 0.8vw, 10px) 4px 0 !important;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
}

body[data-screen="game"] .hero-copy {
  display: none !important;
}

body[data-screen="game"] .hero-brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
}

body[data-screen="game"] .hero-emblem {
  width: clamp(110px, 10.5vw, 178px) !important;
}

body[data-screen="game"] .hero-game-room {
  display: grid;
  min-width: clamp(190px, 17vw, 270px);
  padding: clamp(7px, 0.8vw, 11px) clamp(14px, 1.2vw, 20px);
  border-color: var(--lobby-code-accent, #f6bf2c);
  border-radius: 14px;
  color: var(--lobby-code-accent, #f6bf2c);
  text-align: center;
  background:
    radial-gradient(circle at 50% 12%, var(--lobby-code-glow, rgba(246, 191, 44, 0.3)), transparent 6rem),
    linear-gradient(180deg, rgba(11, 39, 30, 0.92), rgba(1, 13, 10, 0.96));
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.78),
    0 0 18px var(--lobby-code-glow, rgba(246, 191, 44, 0.28)),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-screen="game"] .hero-game-room strong {
  color: var(--lobby-code-accent, #f6bf2c);
  font-size: clamp(1.6rem, 2.6vw, 2.65rem);
  line-height: 0.95;
  text-shadow: 0 0 12px var(--lobby-code-glow, rgba(246, 191, 44, 0.3));
}

body[data-screen="game"] .hero-game-room span {
  color: var(--lobby-code-accent, #f6bf2c);
  font-size: clamp(0.55rem, 0.8vw, 0.72rem);
}

body[data-screen="game"] #gameScreen {
  min-height: 0;
  height: 100%;
}

body[data-screen="game"] #gameScreen > .game-topbar,
body[data-screen="game"] #gameScreen > .game-main {
  display: none !important;
}

body[data-screen="game"] .game-table-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(60px, 8.5%, 86px);
  height: 100%;
  min-height: 0;
  gap: clamp(6px, 0.8vw, 12px);
}

body[data-screen="game"] .new-game-table {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(33, 159, 86, 0.82) 0 30%, rgba(4, 63, 39, 0.9) 52%, rgba(0, 15, 11, 0.98) 76%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 45%),
    #02140f;
  box-shadow: none;
}

body[data-screen="game"] .new-game-table::before {
  content: "";
  position: absolute;
  inset: 7% 7% 10%;
  border: clamp(5px, 0.55vw, 8px) solid rgba(245, 185, 55, 0.62);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(12, 28, 18, 0.95),
    0 0 36px rgba(244, 184, 53, 0.13);
  pointer-events: none;
}

body[data-screen="game"] .new-game-table::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.08), transparent 12rem),
    radial-gradient(circle at 84% 23%, rgba(255, 220, 90, 0.08), transparent 11rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.26));
  pointer-events: none;
}

body[data-screen="game"] .table-center-play,
body[data-screen="game"] .game-seat-layer,
body[data-screen="game"] .game-log-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

body[data-screen="game"] .table-center-play {
  pointer-events: none;
}

body[data-screen="game"] .game-seat {
  position: absolute;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: clamp(5px, 0.55vw, 8px) clamp(8px, 0.9vw, 12px);
  width: clamp(250px, 20vw, 340px);
  min-height: clamp(88px, 9.2vw, 138px);
  padding: clamp(8px, 0.75vw, 12px);
  border: 2px solid rgba(246, 191, 44, 0.88);
  border-radius: 18px;
  color: #f9fff8;
  background:
    linear-gradient(180deg, rgba(0, 52, 32, 0.94), rgba(0, 18, 13, 0.95)),
    radial-gradient(circle at 30% 20%, rgba(49, 244, 71, 0.14), transparent 9rem);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
}

body[data-screen="game"] .game-seat.active {
  border-color: #31f447;
  box-shadow:
    0 0 22px rgba(49, 244, 71, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-screen="game"] .game-seat.frozen {
  filter: saturate(0.65);
  opacity: 0.82;
}

body[data-screen="game"] .game-seat-left {
  left: 8%;
  top: 18%;
}

body[data-screen="game"] .game-seat-top {
  left: 50%;
  top: 3%;
  transform: translateX(-50%);
}

body[data-screen="game"] .game-seat-right {
  right: 8%;
  top: 18%;
}

body[data-screen="game"] .game-seat-bottom {
  left: 8%;
  bottom: 7.5%;
  width: clamp(250px, 22vw, 340px);
  min-height: clamp(74px, 7vw, 106px);
}

body[data-screen="game"] .game-seat-profile {
  display: contents;
}

body[data-screen="game"] .game-avatar {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: clamp(48px, 5.4vw, 78px);
  height: clamp(48px, 5.4vw, 78px);
  overflow: hidden;
  border: 3px solid #f6d75a;
  border-radius: 50%;
  color: #102018;
  background: #f6df18;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 950;
}

body[data-screen="game"] .game-avatar img,
body[data-screen="game"] .game-avatar .profile-icon.mini {
  width: 100%;
  height: 100%;
}

body[data-screen="game"] .game-seat-copy {
  min-width: 0;
}

body[data-screen="game"] .game-seat-copy strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: clamp(0.92rem, 1.35vw, 1.2rem);
  line-height: 1.06;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 #010806;
  white-space: nowrap;
}

body[data-screen="game"] .game-coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: clamp(22px, 2.2vw, 30px);
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: 8px;
  color: #201000;
  background: linear-gradient(#fff3a9, #ffc131 62%, #d68c11);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.72);
  font-size: clamp(0.68rem, 1vw, 0.9rem);
  font-weight: 950;
}

body[data-screen="game"] .game-seat-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 0.5vw, 8px);
  align-items: end;
}

body[data-screen="game"] .game-seat-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body[data-screen="game"] .game-tag {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 7px;
  color: #151000;
  background: linear-gradient(#fff1a8, #eaa82d);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
  font-size: 0.68rem;
  font-weight: 950;
}

body[data-screen="game"] .game-tag.you,
body[data-screen="game"] .game-tag.bot {
  color: #ffffff;
  background: linear-gradient(#54c4ff, #137ad0);
}

body[data-screen="game"] .game-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: clamp(120px, 12vw, 180px);
  min-height: 26px;
  padding: 2px 12px;
  border: 1px solid rgba(49, 244, 71, 0.72);
  border-radius: 999px;
  color: #4cff85;
  background: rgba(0, 34, 20, 0.86);
  font-size: clamp(0.68rem, 0.95vw, 0.88rem);
  font-weight: 900;
}

body[data-screen="game"] .game-status-pill > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #31f447;
  box-shadow: 0 0 12px rgba(49, 244, 71, 0.72);
}

body[data-screen="game"] .table-piles {
  position: absolute;
  left: 50%;
  top: 29%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(34px, 5vw, 74px);
  transform: translateX(-50%);
}

body[data-screen="game"] .new-game-table .deck-stack,
body[data-screen="game"] .new-game-table .discard-stack {
  display: grid;
  place-items: center;
  min-width: clamp(96px, 8vw, 128px);
  min-height: clamp(126px, 11vw, 172px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: #4cff85;
  background: transparent;
  box-shadow: none;
}

body[data-screen="game"] .new-game-table .deck-stack::before,
body[data-screen="game"] .new-game-table .deck-stack::after,
body[data-screen="game"] .new-game-table .discard-stack::before,
body[data-screen="game"] .new-game-table .discard-stack::after {
  display: none !important;
}

body[data-screen="game"] .new-game-table .deck-stack > span,
body[data-screen="game"] .new-game-table .discard-stack > span {
  align-self: end;
  padding: 4px 12px;
  border-radius: 999px;
  color: #42ff83;
  background: rgba(0, 18, 12, 0.86);
  font-size: clamp(0.58rem, 0.82vw, 0.72rem);
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-screen="game"] .new-game-table .deck-stack strong {
  position: absolute;
  top: 6px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 25px;
  min-height: 25px;
  border-radius: 50%;
  color: #102018;
  background: #f6d75a;
  font-size: 0.75rem;
  text-shadow: none;
}

body[data-screen="game"] .koop-card-back,
body[data-screen="game"] .stack-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 4px solid rgba(236, 255, 238, 0.8);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 32%),
    url("logo-koopsclub.png") center / 72% auto no-repeat,
    linear-gradient(145deg, #0d4c2e, #052317);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.58),
    inset 0 0 0 4px rgba(255, 255, 255, 0.13);
}

body[data-screen="game"] .stack-card {
  width: clamp(84px, 7vw, 112px);
  height: clamp(116px, 10vw, 152px);
  min-height: 0;
}

body[data-screen="game"] .discard-stack #newCenterDiscard {
  display: grid;
  place-items: center;
  width: clamp(82px, 7vw, 108px);
  height: clamp(116px, 10vw, 150px);
}

body[data-screen="game"] .discard-stack .card-face {
  min-height: 0;
  border: 4px solid rgba(0, 0, 0, 0.82);
  border-radius: 13px;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.58);
}

body[data-screen="game"] .empty-discard {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(255, 255, 255, 0.26);
  border-radius: 13px;
  color: rgba(233, 255, 237, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

body[data-screen="game"] .drawn-card-stage {
  position: absolute;
  left: 8%;
  top: 48%;
  width: clamp(78px, 7vw, 110px);
  min-height: clamp(118px, 10vw, 154px);
  transform: translateY(-50%);
}

body[data-screen="game"] .drawn-card-stage.empty {
  pointer-events: none;
}

body[data-screen="game"] .drawn-card-frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 4px solid #f6d75a;
  border-radius: 3px;
  background: rgba(49, 244, 71, 0.08);
  box-shadow:
    0 0 0 4px rgba(49, 244, 71, 0.78),
    0 0 22px rgba(49, 244, 71, 0.35);
  animation: drawnCardPulse 1.25s ease-in-out infinite;
}

body[data-screen="game"] .drawn-card-frame > span {
  position: absolute;
  z-index: 2;
  inset: auto auto 26% 50%;
  color: #ff8f35;
  font-size: clamp(0.64rem, 0.82vw, 0.82rem);
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-36deg);
}

body[data-screen="game"] .drawn-card-frame .big-card {
  width: clamp(64px, 5.6vw, 88px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.7);
}

@keyframes drawnCardPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

body[data-screen="game"] .game-hint-row {
  position: absolute;
  left: 24%;
  right: 18%;
  bottom: 31%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: clamp(42px, 4.4vw, 60px);
  border: 3px solid #9feeff;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.92);
  box-shadow:
    0 0 0 4px rgba(7, 24, 22, 0.76),
    0 10px 22px rgba(0, 0, 0, 0.28);
}

body[data-screen="game"] .game-hint-row p {
  margin: 0;
  padding: 0 clamp(14px, 2vw, 28px);
  color: #a9efff;
  font-size: clamp(0.86rem, 1.35vw, 1.12rem);
  font-weight: 820;
  line-height: 1.22;
}

body[data-screen="game"] .turn-timer {
  display: grid;
  place-items: center;
  width: clamp(52px, 5.2vw, 74px);
  height: clamp(52px, 5.2vw, 74px);
  margin-right: -26px;
  border: 6px solid #2df77b;
  border-radius: 50%;
  color: #ffffff;
  background: #07100e;
  box-shadow:
    0 0 0 6px rgba(80, 255, 140, 0.2),
    0 0 22px rgba(49, 244, 71, 0.42),
    inset 0 0 0 5px rgba(255, 255, 255, 0.08);
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  font-weight: 950;
}

body[data-screen="game"] .self-hand-row {
  position: absolute;
  left: 33%;
  right: 28%;
  bottom: 4.5%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  pointer-events: auto;
}

body[data-screen="game"] .game-card-slot {
  position: relative;
  display: grid;
  place-items: stretch;
  width: 100%;
  aspect-ratio: 0.72 / 1;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 3px solid rgba(236, 255, 238, 0.84);
  border-radius: 10px;
  color: #fff;
  background: transparent;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.6);
}

body[data-screen="game"] .game-seat-cards .game-card-slot {
  min-height: clamp(50px, 4.8vw, 74px);
}

body[data-screen="game"] .self-hand-row .game-card-slot {
  min-height: clamp(104px, 12vw, 166px);
}

body[data-screen="game"] .game-card-slot.clickable {
  cursor: pointer;
}

body[data-screen="game"] .game-card-slot.clickable:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

body[data-screen="game"] .game-card-slot.selected {
  outline: 5px solid #f6d75a;
  outline-offset: 3px;
  box-shadow:
    0 0 18px rgba(246, 215, 90, 0.42),
    0 5px 0 rgba(0, 0, 0, 0.6);
}

body[data-screen="game"] .game-card-slot.removed {
  opacity: 0.55;
}

body[data-screen="game"] .game-card-slot .card-face,
body[data-screen="game"] .game-card-slot .koop-card-back {
  min-height: 100%;
}

body[data-screen="game"] .game-card-slot .card-face {
  border-radius: 8px;
}

body[data-screen="game"] .seen-ribbon {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: -7px;
  min-width: 44px;
  padding: 2px 7px;
  border: 1px solid rgba(0, 0, 0, 0.66);
  border-radius: 5px;
  color: #140900;
  background: linear-gradient(#ffeb72, #e99d19);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.62);
  font-size: clamp(0.5rem, 0.75vw, 0.68rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

body[data-screen="game"] .self-hand-row .seen-ribbon {
  top: -10px;
  bottom: auto;
  min-width: clamp(64px, 6vw, 96px);
  font-size: clamp(0.72rem, 1vw, 0.98rem);
}

body[data-screen="game"] .game-action-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  min-height: 0;
}

body[data-screen="game"] .game-action-buttons {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  min-width: 0;
}

body[data-screen="game"] .game-action-btn,
body[data-screen="game"] .view-log-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.9vw, 13px);
  min-width: clamp(150px, 13vw, 210px);
  min-height: clamp(48px, 5vw, 68px);
  padding: 0 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #ffffff;
  font-size: clamp(0.88rem, 1.35vw, 1.15rem);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.72),
    inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

body[data-screen="game"] .game-action-btn::before,
body[data-screen="game"] .view-log-btn span::before {
  display: inline-grid;
  place-items: center;
  min-width: clamp(24px, 2.2vw, 34px);
  color: currentColor;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1;
}

body[data-screen="game"] .action-reveal {
  color: #fff7d6;
  background: linear-gradient(#d7a928, #805906 62%, #4c3501);
}

body[data-screen="game"] .action-reveal::before { content: "◉"; }

body[data-screen="game"] .action-power {
  border-color: #3ff6ef;
  background: linear-gradient(#102d38, #05333b 60%, #01191f);
  box-shadow:
    0 0 0 2px rgba(63, 246, 239, 0.58),
    0 0 18px rgba(63, 246, 239, 0.46),
    0 5px 0 rgba(0, 0, 0, 0.72),
    inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

body[data-screen="game"] .action-power::before { content: "⚡"; color: #ffd25d; }

body[data-screen="game"] .action-draw {
  background: linear-gradient(#2f7bcc, #133b7e 62%, #071e4b);
}

body[data-screen="game"] .action-draw::before { content: "+"; }

body[data-screen="game"] .action-replace {
  background: linear-gradient(#7d41bf, #4e1e79 62%, #26123f);
}

body[data-screen="game"] .action-replace::before { content: "↔"; }

body[data-screen="game"] .action-discard,
body[data-screen="game"] .action-remove {
  background: linear-gradient(#c94032, #80190f 62%, #3b0b08);
}

body[data-screen="game"] .action-discard::before { content: "⌫"; }
body[data-screen="game"] .action-remove::before { content: "−"; }

body[data-screen="game"] .action-koop,
body[data-screen="game"] .action-continue {
  color: #102018;
  text-shadow: none;
  background: linear-gradient(#ffd966, #f4b330 58%, #c77b17);
}

body[data-screen="game"] .action-koop::before { content: "✋"; }
body[data-screen="game"] .action-continue::before { content: "✓"; }

body[data-screen="game"] .view-log-btn {
  min-width: clamp(170px, 15vw, 230px);
  color: #ffffff;
  border-color: #d7a928;
  background: rgba(0, 18, 12, 0.92);
}

body[data-screen="game"] .view-log-btn span::before {
  content: "☷";
  color: #f6d75a;
}

body[data-screen="game"] .game-log-overlay {
  inset: auto clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px) auto;
  width: min(46vw, 520px);
  max-height: min(78%, 560px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: clamp(20px, 2vw, 30px);
  border: 2px solid rgba(246, 191, 44, 0.86);
  border-radius: 28px;
  background:
    radial-gradient(circle at 25% 12%, rgba(49, 244, 71, 0.12), transparent 13rem),
    rgba(1, 18, 12, 0.96);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
}

body[data-screen="game"] .game-log-overlay.hidden {
  display: none;
}

body[data-screen="game"] .game-log-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

body[data-screen="game"] .game-log-header h2,
body[data-screen="game"] .game-log-header p {
  margin: 0;
}

body[data-screen="game"] .game-log-header h2 {
  color: #ffffff;
  font-size: clamp(1.45rem, 2.3vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
}

body[data-screen="game"] .game-log-header p {
  margin-top: 6px;
  color: rgba(232, 255, 236, 0.72);
  font-size: clamp(0.8rem, 1.2vw, 1.05rem);
  font-weight: 750;
}

body[data-screen="game"] .game-log-icon,
body[data-screen="game"] .game-log-close {
  display: grid;
  place-items: center;
  width: clamp(50px, 5.4vw, 76px);
  height: clamp(50px, 5.4vw, 76px);
  border: 2px solid rgba(246, 191, 44, 0.34);
  border-radius: 18px;
  background: rgba(246, 191, 44, 0.07);
}

body[data-screen="game"] .game-log-icon::before {
  content: "▤";
  color: #ffd25d;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

body[data-screen="game"] .game-log-close {
  padding: 0;
}

body[data-screen="game"] .game-log-close::before {
  content: "×";
  color: #ffd25d;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
}

body[data-screen="game"] .game-log-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}

body[data-screen="game"] .new-log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: clamp(58px, 5.6vw, 82px);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(11, 57, 36, 0.58);
}

body[data-screen="game"] .new-log-icon {
  display: grid;
  place-items: center;
  width: clamp(38px, 4vw, 56px);
  height: clamp(38px, 4vw, 56px);
  border: 2px solid rgba(246, 191, 44, 0.3);
  border-radius: 50%;
  color: #ffd25d;
  background: rgba(0, 24, 15, 0.72);
}

body[data-screen="game"] .new-log-icon::before { font-size: clamp(1.05rem, 1.75vw, 1.55rem); }
body[data-screen="game"] .log-trophy::before { content: "♕"; }
body[data-screen="game"] .log-bell::before { content: "!"; }
body[data-screen="game"] .log-swap::before { content: "↔"; }
body[data-screen="game"] .log-card::before { content: "▯"; }
body[data-screen="game"] .log-timer::before { content: "◷"; }
body[data-screen="game"] .log-note::before { content: "•"; }

body[data-screen="game"] .new-log-row strong {
  color: #ffffff;
  font-size: clamp(0.78rem, 1.15vw, 1rem);
  line-height: 1.2;
}

body[data-screen="game"] .new-log-row time {
  color: rgba(232, 255, 236, 0.62);
  font-size: clamp(0.68rem, 1vw, 0.88rem);
  font-weight: 750;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .app-shell {
    width: var(--home-frame-width, calc(100vw - 8px)) !important;
    margin-top: 0 !important;
    grid-template-rows: minmax(76px, 24%) minmax(0, 1fr);
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  body[data-screen="game"] .hero {
    grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(76px, 15vh, 116px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(130px, 30vw, 190px);
  }

  body[data-screen="game"] .game-seat {
    width: clamp(150px, 24vw, 230px);
    min-height: clamp(66px, 18vh, 100px);
    border-radius: 14px;
  }

  body[data-screen="game"] .game-seat-left {
    left: 4%;
    top: 19%;
  }

  body[data-screen="game"] .game-seat-top {
    top: 2%;
  }

  body[data-screen="game"] .game-seat-right {
    right: 4%;
    top: 19%;
  }

  body[data-screen="game"] .game-seat-bottom {
    left: 4%;
    bottom: 7%;
  }

  body[data-screen="game"] .game-seat-cards .game-card-slot {
    min-height: clamp(32px, 9vh, 54px);
  }

  body[data-screen="game"] .self-hand-row {
    left: 34%;
    right: 24%;
    bottom: 5%;
    gap: 7px;
  }

  body[data-screen="game"] .self-hand-row .game-card-slot {
    min-height: clamp(70px, 18vh, 108px);
  }

  body[data-screen="game"] .table-piles {
    top: 28%;
    gap: clamp(18px, 4vw, 36px);
  }

  body[data-screen="game"] .drawn-card-stage {
    left: 7%;
    top: 49%;
  }

  body[data-screen="game"] .game-hint-row {
    left: 24%;
    right: 14%;
    bottom: 31%;
  }

  body[data-screen="game"] .game-action-btn,
  body[data-screen="game"] .view-log-btn {
    min-width: clamp(84px, 16vw, 128px);
    min-height: clamp(34px, 8vh, 44px);
    padding-inline: 0.52rem;
    border-radius: 8px;
  }

  body[data-screen="game"] .game-action-buttons {
    gap: 6px;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(58vw, 440px);
    max-height: 82%;
    padding: 14px;
    border-radius: 20px;
  }
}

/* Lobby now replaces only the home game-type section. */
body.home-lobby-mode {
  --lobby-code-accent: #f6df18;
  --lobby-code-glow: rgba(246, 223, 24, 0.34);
}

body.home-lobby-mode[data-lobby-mode="online"] {
  --lobby-code-accent: #1d98ff;
  --lobby-code-glow: rgba(29, 152, 255, 0.34);
}

body.home-lobby-mode[data-lobby-mode="invite"] {
  --lobby-code-accent: #ff2736;
  --lobby-code-glow: rgba(255, 39, 54, 0.36);
}

body.home-lobby-mode[data-lobby-mode="join"] {
  --lobby-code-accent: #31f447;
  --lobby-code-glow: rgba(49, 244, 71, 0.34);
}

body.home-lobby-mode #lobbyScreen {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(8px, 1vw, 16px);
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(8px, 1vw, 16px) 2px clamp(18px, 2vw, 34px);
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

body.home-lobby-mode #lobbyScreen::before {
  display: none;
}

body.home-lobby-mode #lobbyScreen .lobby-title {
  display: none;
}

body.home-lobby-mode #lobbyScreen .lobby-room-top {
  justify-content: center;
  margin: 0;
}

body.home-lobby-mode #lobbyScreen .lobby-room-badge {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  width: clamp(200px, 15vw, 260px);
  min-width: clamp(200px, 15vw, 260px);
  min-height: clamp(64px, 5vw, 78px);
  padding: 8px 18px;
  border: 3px solid var(--lobby-code-accent);
  border-radius: 14px;
  color: var(--lobby-code-accent);
  text-align: center;
  background:
    radial-gradient(circle at 50% 16%, var(--lobby-code-glow), transparent 8rem),
    linear-gradient(180deg, rgba(0, 35, 22, 0.98), rgba(0, 18, 11, 0.98));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    0 0 18px var(--lobby-code-glow),
    inset 0 0 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

body.home-lobby-mode #lobbyScreen .lobby-room-badge:hover,
body.home-lobby-mode #lobbyScreen .lobby-room-badge:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 26px var(--lobby-code-glow),
    inset 0 0 18px rgba(0, 0, 0, 0.28);
}

body.home-lobby-mode #lobbyScreen .lobby-room-badge:active {
  transform: translateY(1px) scale(0.99);
}

body.home-lobby-mode #lobbyScreen .lobby-room-badge span {
  grid-column: 1;
  font-size: 0.68rem;
  color: var(--lobby-code-accent);
  letter-spacing: 0.07em;
  text-shadow: 0 0 10px var(--lobby-code-glow);
}

body.home-lobby-mode #lobbyScreen .lobby-room-badge strong {
  grid-column: 1;
  font-size: clamp(1.45rem, 2vw, 2.18rem);
  color: var(--lobby-code-accent);
  letter-spacing: 0.06em;
  line-height: 0.98;
  text-shadow: 0 0 12px var(--lobby-code-glow);
}

body.home-lobby-mode #lobbyScreen .lobby-players {
  align-self: center;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.7vw, 28px);
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
}

body.home-lobby-mode #lobbyScreen .lobby-slot-card {
  align-self: center;
  grid-template-rows: auto auto auto auto auto;
  align-content: center;
  height: min(100%, clamp(158px, 14.2vw, 220px));
  min-height: 0;
  gap: clamp(5px, 0.7vw, 8px);
  padding: clamp(12px, 1.25vw, 20px);
  border-radius: 24px;
  overflow: hidden;
}

body.home-lobby-mode #lobbyScreen .lobby-player-card {
  border-color: #37ff66;
  box-shadow:
    inset 0 0 34px rgba(65, 255, 111, 0.12),
    0 0 0 1px rgba(55, 255, 102, 0.2),
    0 0 28px rgba(41, 255, 95, 0.32),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

body.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-avatar,
body.home-lobby-mode #lobbyScreen .lobby-slot-card .player-avatar,
body.home-lobby-mode #lobbyScreen .lobby-waiting-icon {
  width: clamp(58px, 5.1vw, 78px);
  height: clamp(58px, 5.1vw, 78px);
}

body.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-avatar .profile-icon.mini {
  width: calc(clamp(58px, 5.1vw, 78px) - 10px);
  height: calc(clamp(58px, 5.1vw, 78px) - 10px);
}

body.home-lobby-mode #lobbyScreen .lobby-slot-name {
  display: block;
  width: 100%;
  min-height: 1.12em;
  font-size: clamp(0.82rem, 1vw, 1.08rem);
  line-height: 1.1;
}

body.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-coin-box {
  min-height: 26px;
  font-size: clamp(0.84rem, 1vw, 1.04rem);
}

body.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-coin-box .coin-chip {
  width: 22px;
  height: 22px;
}

body.home-lobby-mode #lobbyScreen .lobby-slot-badges {
  gap: 6px;
  min-height: 28px;
}

body.home-lobby-mode #lobbyScreen .lobby-slot-badges .badge {
  min-width: 62px;
  min-height: 26px;
  border-radius: 8px;
  font-size: 0.74rem;
}

body.home-lobby-mode #lobbyScreen .lobby-ready-pill {
  min-width: 122px;
  min-height: 34px;
  gap: 7px;
  padding-inline: 14px;
  font-size: 0.88rem;
}

body.home-lobby-mode #lobbyScreen .lobby-ready-pill > span {
  width: 12px;
  height: 12px;
}

body.home-lobby-mode #lobbyScreen .lobby-invite-card p {
  margin: 0;
  font-size: clamp(0.74rem, 0.92vw, 0.9rem);
  font-weight: 850;
  text-align: center;
}

body.home-lobby-mode #lobbyScreen .lobby-status-line {
  display: grid;
  justify-items: center;
  min-height: clamp(30px, 2.8vw, 42px);
  padding-top: clamp(7px, 0.9vw, 12px);
  border-top: 1px solid rgba(246, 189, 33, 0.58);
}

body.home-lobby-mode #lobbyScreen .lobby-status-line::before {
  display: none;
}

body.home-lobby-mode #lobbyScreen .lobby-status-line #hostHint {
  max-width: min(520px, 90%);
  margin: 0;
  color: #f7fff5;
  font-size: clamp(0.76rem, 0.95vw, 0.9rem);
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-shadow: none;
}

body.home-lobby-mode #lobbyScreen .lobby-actions {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding-top: 6px;
}

body.home-lobby-mode #lobbyScreen .lobby-actions::before,
body.home-lobby-mode #lobbyScreen .lobby-actions::after {
  display: none;
}

body.home-lobby-mode #lobbyScreen .lobby-secondary-actions,
body.home-lobby-mode #lobbyScreen .lobby-primary-actions {
  display: flex;
  align-items: end;
  gap: 12px;
}

body.home-lobby-mode #lobbyScreen #leaveBtn,
body.home-lobby-mode #lobbyScreen #removePlayersBtn,
body.home-lobby-mode #lobbyScreen #shareRoomBtn,
body.home-lobby-mode #lobbyScreen #startGameBtn {
  display: inline-grid;
  place-items: center;
  min-width: clamp(150px, 13vw, 210px);
  min-height: 52px;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: var(--modal-button-weight, 850);
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-shadow: none;
}

body.home-lobby-mode #lobbyScreen #leaveBtn::before,
body.home-lobby-mode #lobbyScreen #shareRoomBtn::before,
body.home-lobby-mode #lobbyScreen #startGameBtn::before {
  display: none;
}

body.home-lobby-mode #lobbyScreen #leaveBtn {
  color: #ffffff;
  background: linear-gradient(#315f82, #153c5d 62%, #08243d);
  box-shadow:
    0 4px 0 rgba(4, 17, 28, 0.82),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

body.home-lobby-mode #lobbyScreen #removePlayersBtn {
  color: #ffffff;
  background: linear-gradient(#ff4757, #df1f32 58%, #98121f);
  box-shadow:
    0 4px 0 #5d0710,
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

body.home-lobby-mode #lobbyScreen #shareRoomBtn {
  color: #f9fffb;
  background: linear-gradient(#32d187, #12945e 60%, #066944);
  box-shadow:
    0 4px 0 #06402f,
    inset 0 2px 0 rgba(255, 255, 255, 0.24);
}

body.home-lobby-mode #lobbyScreen #startGameBtn {
  color: #281600;
  background: linear-gradient(#ffd969, #f3ad2b 58%, #c77b17);
  box-shadow:
    0 4px 0 rgba(109, 63, 0, 0.78),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen {
  gap: clamp(6px, 1.15vh, 10px);
  padding: 5px 0 clamp(8px, 2vh, 14px);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-room-badge {
  min-width: clamp(142px, 24vw, 220px);
  padding: 5px 8px 5px 12px;
  border-radius: 14px;
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-room-badge strong {
  font-size: clamp(1.05rem, 4vh, 1.55rem);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-players {
  gap: clamp(7px, 1.4vw, 12px);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-card {
  height: min(100%, clamp(92px, 23vh, 142px));
  min-height: 0;
  gap: clamp(2px, 0.55vh, 4px);
  padding: clamp(6px, 1.2vw, 10px);
  border-radius: 14px;
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-avatar,
body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-card .player-avatar,
body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-waiting-icon {
  width: clamp(34px, 9vh, 54px);
  height: clamp(34px, 9vh, 54px);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-avatar .profile-icon.mini {
  width: clamp(28px, 7.5vh, 46px);
  height: clamp(28px, 7.5vh, 46px);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-name {
  min-height: 1.08em;
  font-size: clamp(0.48rem, 1.65vh, 0.68rem);
  line-height: 1.08;
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-coin-box {
  min-height: 19px;
  font-size: clamp(0.5rem, 1.8vh, 0.68rem);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-badges .badge,
body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-ready-pill {
  font-size: clamp(0.44rem, 1.55vh, 0.58rem);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-status-line {
  min-height: clamp(20px, 5vh, 28px);
  padding-top: clamp(4px, 1vh, 7px);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-status-line::before {
  display: none;
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-status-line #hostHint {
  font-size: clamp(0.48rem, 1.65vh, 0.64rem);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-actions {
  padding-top: clamp(6px, 1.4vh, 10px);
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen #leaveBtn,
body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen #removePlayersBtn,
body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen #shareRoomBtn,
body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen #startGameBtn {
  min-width: clamp(80px, 15vw, 120px);
  min-height: clamp(30px, 7vh, 38px);
  padding: 0.28rem 0.5rem;
  font-size: clamp(0.52rem, 1.85vh, 0.72rem);
}

/* Lobby middle refinement: smaller room/card scale and modal-style actions. */
body[data-screen="lobby"] .lobby-panel {
  gap: clamp(14px, 1.85vh, 24px) !important;
  padding-inline: clamp(34px, 4.6vw, 82px) !important;
}

body[data-screen="lobby"] .lobby-room-top {
  margin-top: clamp(-58px, -5vw, -32px) !important;
}

body[data-screen="lobby"] .lobby-room-badge {
  min-width: clamp(244px, 18vw, 318px) !important;
  padding: 9px 13px 9px 20px !important;
  border-width: 3px !important;
  border-radius: 22px !important;
}

body[data-screen="lobby"] .lobby-room-badge span {
  font-size: 0.78rem !important;
}

body[data-screen="lobby"] .lobby-room-badge strong {
  font-size: clamp(1.82rem, 2.62vw, 2.72rem) !important;
}

body[data-screen="lobby"] .lobby-copy-code-btn {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 12px !important;
}

body[data-screen="lobby"] .lobby-copy-code-btn::before,
body[data-screen="lobby"] .lobby-copy-code-btn::after {
  width: 16px !important;
  height: 20px !important;
  border-width: 2px !important;
}

body[data-screen="lobby"] .lobby-copy-code-btn::before {
  left: 14px !important;
  top: 12px !important;
}

body[data-screen="lobby"] .lobby-copy-code-btn::after {
  left: 19px !important;
  top: 17px !important;
}

body[data-screen="lobby"] .lobby-players {
  width: min(1120px, 100%) !important;
  gap: clamp(16px, 1.9vw, 28px) !important;
}

body[data-screen="lobby"] .lobby-slot-card {
  min-height: clamp(184px, 17vw, 250px) !important;
  gap: 8px !important;
  padding: clamp(14px, 1.35vw, 22px) !important;
  border-radius: 22px !important;
}

body[data-screen="lobby"] .lobby-slot-card .lobby-avatar,
body[data-screen="lobby"] .lobby-slot-card .player-avatar,
body[data-screen="lobby"] .lobby-waiting-icon {
  width: clamp(62px, 5.4vw, 84px) !important;
  height: clamp(62px, 5.4vw, 84px) !important;
}

body[data-screen="lobby"] .lobby-slot-card .lobby-avatar .profile-icon.mini {
  width: calc(clamp(62px, 5.4vw, 84px) - 10px) !important;
  height: calc(clamp(62px, 5.4vw, 84px) - 10px) !important;
}

body[data-screen="lobby"] .lobby-slot-name {
  font-size: clamp(0.95rem, 1.2vw, 1.28rem) !important;
}

body[data-screen="lobby"] .lobby-slot-card .lobby-coin-box {
  min-height: 28px !important;
  font-size: clamp(0.88rem, 1.05vw, 1.08rem) !important;
}

body[data-screen="lobby"] .lobby-slot-card .lobby-coin-box .coin-chip {
  width: 23px !important;
  height: 23px !important;
}

body[data-screen="lobby"] .lobby-slot-badges {
  gap: 6px !important;
  min-height: 30px !important;
}

body[data-screen="lobby"] .lobby-slot-badges .badge {
  min-width: 66px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
}

body[data-screen="lobby"] .lobby-ready-pill {
  min-width: 128px !important;
  min-height: 36px !important;
  gap: 7px !important;
  padding-inline: 15px !important;
  font-size: 0.92rem !important;
}

body[data-screen="lobby"] .lobby-ready-pill > span {
  width: 13px !important;
  height: 13px !important;
}

body[data-screen="lobby"] .lobby-invite-card p {
  margin-bottom: 8px !important;
  font-size: clamp(0.76rem, 0.95vw, 0.92rem) !important;
}

body[data-screen="lobby"] .lobby-invite-btn {
  min-width: 142px !important;
  min-height: 42px !important;
  padding: 0.42rem 0.8rem !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
}

body[data-screen="lobby"] .lobby-actions {
  gap: 14px !important;
  padding-top: clamp(14px, 1.8vh, 22px) !important;
}

body[data-screen="lobby"] .lobby-secondary-actions,
body[data-screen="lobby"] .lobby-primary-actions {
  gap: 12px !important;
}

body[data-screen="lobby"] #leaveBtn,
body[data-screen="lobby"] #removePlayersBtn,
body[data-screen="lobby"] #shareRoomBtn,
body[data-screen="lobby"] #startGameBtn {
  display: inline-grid !important;
  place-items: center !important;
  min-width: clamp(150px, 13vw, 210px) !important;
  min-height: var(--modal-button-height, 52px) !important;
  padding: 0.55rem 0.9rem !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: var(--modal-button-weight, 850) !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-shadow: none !important;
}

body[data-screen="lobby"] #leaveBtn::before,
body[data-screen="lobby"] #shareRoomBtn::before,
body[data-screen="lobby"] #startGameBtn::before {
  display: none !important;
}

body[data-screen="lobby"] #leaveBtn {
  color: #ffffff !important;
  background: linear-gradient(#315f82, #153c5d 62%, #08243d) !important;
  box-shadow:
    0 4px 0 rgba(4, 17, 28, 0.82),
    inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
}

body[data-screen="lobby"] #removePlayersBtn {
  color: #ffffff !important;
  background: linear-gradient(#ff4757, #df1f32 58%, #98121f) !important;
  box-shadow:
    0 4px 0 #5d0710,
    inset 0 2px 0 rgba(255, 255, 255, 0.22) !important;
}

body[data-screen="lobby"] #shareRoomBtn {
  color: #f9fffb !important;
  background: linear-gradient(#32d187, #12945e 60%, #066944) !important;
  box-shadow:
    0 4px 0 #06402f,
    inset 0 2px 0 rgba(255, 255, 255, 0.24) !important;
}

body[data-screen="lobby"] #startGameBtn {
  color: #281600 !important;
  background: linear-gradient(#ffd969, #f3ad2b 58%, #c77b17) !important;
  box-shadow:
    0 4px 0 rgba(109, 63, 0, 0.78),
    inset 0 2px 0 rgba(255, 255, 255, 0.34) !important;
}

body[data-screen="lobby"] #hostHint {
  max-width: 220px !important;
  font-size: 0.82rem !important;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  body[data-screen="lobby"] .lobby-panel {
    gap: clamp(6px, 1.1vh, 10px) !important;
    padding-inline: clamp(7px, 1.4vw, 12px) !important;
  }

  body[data-screen="lobby"] .lobby-room-badge {
    min-width: clamp(142px, 24vw, 220px) !important;
    padding: 5px 8px 5px 12px !important;
    border-radius: 14px !important;
  }

  body[data-screen="lobby"] .lobby-room-badge strong {
    font-size: clamp(1.05rem, 4vh, 1.55rem) !important;
  }

  body[data-screen="lobby"] .lobby-copy-code-btn {
    width: clamp(30px, 7vh, 38px) !important;
    min-width: clamp(30px, 7vh, 38px) !important;
    height: clamp(30px, 7vh, 38px) !important;
    min-height: clamp(30px, 7vh, 38px) !important;
  }

  body[data-screen="lobby"] .lobby-slot-card {
    min-height: clamp(100px, 26vh, 156px) !important;
    gap: clamp(3px, 0.7vh, 5px) !important;
    padding: clamp(6px, 1.2vw, 10px) !important;
    border-radius: 14px !important;
  }

  body[data-screen="lobby"] .lobby-slot-card .lobby-avatar,
  body[data-screen="lobby"] .lobby-slot-card .player-avatar,
  body[data-screen="lobby"] .lobby-waiting-icon {
    width: clamp(34px, 9vh, 54px) !important;
    height: clamp(34px, 9vh, 54px) !important;
  }

  body[data-screen="lobby"] .lobby-slot-card .lobby-avatar .profile-icon.mini {
    width: clamp(28px, 7.5vh, 46px) !important;
    height: clamp(28px, 7.5vh, 46px) !important;
  }

  body[data-screen="lobby"] .lobby-slot-name {
    font-size: clamp(0.52rem, 1.95vh, 0.76rem) !important;
  }

  body[data-screen="lobby"] .lobby-slot-card .lobby-coin-box {
    min-height: 19px !important;
    font-size: clamp(0.5rem, 1.8vh, 0.68rem) !important;
  }

  body[data-screen="lobby"] .lobby-slot-badges .badge,
  body[data-screen="lobby"] .lobby-ready-pill,
  body[data-screen="lobby"] .lobby-invite-btn {
    font-size: clamp(0.44rem, 1.55vh, 0.58rem) !important;
  }

  body[data-screen="lobby"] #leaveBtn,
  body[data-screen="lobby"] #removePlayersBtn,
  body[data-screen="lobby"] #shareRoomBtn,
  body[data-screen="lobby"] #startGameBtn {
    min-width: clamp(80px, 15vw, 120px) !important;
    min-height: clamp(30px, 7vh, 38px) !important;
    padding: 0.28rem 0.5rem !important;
    font-size: clamp(0.52rem, 1.85vh, 0.72rem) !important;
  }
}

/* Final lobby placement: home screen shell plus lobby content inside the home card-grid area. */
body[data-screen="lobby"] .app-shell {
  width: min(1450px, calc(100% - 20px)) !important;
  height: auto !important;
  min-height: calc(var(--koop-vh, 100vh) - 16px) !important;
  margin: 14px auto 0 !important;
  padding: 0 26px 18px !important;
  grid-template-rows: minmax(122px, 27%) minmax(0, 1fr) !important;
  overflow: visible !important;
}

body[data-screen="lobby"] .hero {
  min-height: 310px !important;
  padding: clamp(4px, 0.7vw, 10px) 4px 24px !important;
}

body[data-screen="lobby"] .lobby-panel {
  align-self: stretch !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(12px, 1.55vh, 22px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 2px 54px !important;
  border: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-screen="lobby"] .lobby-room-top {
  align-self: start !important;
  margin: 0 !important;
}

body[data-screen="lobby"] .lobby-room-badge {
  min-width: clamp(222px, 16vw, 290px) !important;
  padding: 8px 12px 8px 18px !important;
  border-width: 3px !important;
  border-radius: 18px !important;
}

body[data-screen="lobby"] .lobby-room-badge span {
  font-size: 0.72rem !important;
}

body[data-screen="lobby"] .lobby-room-badge strong {
  font-size: clamp(1.7rem, 2.35vw, 2.42rem) !important;
}

body[data-screen="lobby"] .lobby-copy-code-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
}

body[data-screen="lobby"] .lobby-players {
  align-self: center !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.05vw, 30px) !important;
  width: min(100%, 1120px) !important;
}

body[data-screen="lobby"] .lobby-slot-card {
  min-height: clamp(174px, 16vw, 236px) !important;
  padding: clamp(12px, 1.25vw, 20px) !important;
}

body[data-screen="lobby"] .lobby-actions {
  align-items: end !important;
  margin: 0 !important;
  padding-top: clamp(12px, 1.55vh, 20px) !important;
}

body[data-screen="lobby"] .lobby-actions::before,
body[data-screen="lobby"] .lobby-actions::after {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-screen="lobby"] .app-shell {
    min-height: calc(var(--koop-vh, 100vh) - 8px) !important;
    margin: 4px auto 0 !important;
    grid-template-rows: minmax(76px, 27%) minmax(0, 1fr) !important;
    padding: max(5px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  body[data-screen="lobby"] .hero {
    min-height: 0 !important;
    padding: 4px 0 8px !important;
  }

  body[data-screen="lobby"] .lobby-panel {
    gap: clamp(6px, 1.15vh, 10px) !important;
    padding: 0 0 clamp(12px, 3vh, 18px) !important;
  }

  body[data-screen="lobby"] .lobby-room-top {
    margin: 0 !important;
  }

  body[data-screen="lobby"] .lobby-players {
    gap: clamp(7px, 1.4vw, 12px) !important;
  }

  body[data-screen="lobby"] .lobby-actions {
    padding-top: clamp(6px, 1.4vh, 10px) !important;
  }
}

body.is-mobile-device.is-mobile-landscape[data-screen="lobby"] .app-shell {
  width: var(--home-frame-width, calc(100vw - 8px)) !important;
  height: var(--home-frame-height, auto) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  grid-template-rows: minmax(82px, 30%) minmax(0, 1fr) !important;
}

/* True final game screen polish: compact header and numbered game log. */
body[data-screen="game"] .app-shell {
  grid-template-rows: minmax(70px, 15.5%) minmax(0, 1fr) !important;
}

body[data-screen="game"] .hero {
  min-height: 0 !important;
  padding: clamp(1px, 0.25vw, 4px) 4px clamp(4px, 0.55vw, 8px) !important;
}

body[data-screen="game"] .hero-brand {
  gap: clamp(7px, 0.75vw, 12px) !important;
  transform: translateY(clamp(-12px, -0.95vw, -6px)) !important;
}

body[data-screen="game"] .hero-emblem {
  width: clamp(68px, 6.8vw, 112px) !important;
}

body[data-screen="game"] .hero-game-room {
  min-width: clamp(132px, 12vw, 190px) !important;
  padding: clamp(4px, 0.42vw, 6px) clamp(10px, 0.82vw, 14px) !important;
  border-width: 2px !important;
  border-radius: 12px !important;
}

body[data-screen="game"] .hero-game-room strong {
  font-size: clamp(1.05rem, 1.72vw, 1.82rem) !important;
  line-height: 0.92 !important;
}

body[data-screen="game"] .hero-game-room span {
  font-size: clamp(0.42rem, 0.56vw, 0.54rem) !important;
}

body[data-screen="game"] .game-table-shell {
  grid-template-rows: minmax(0, 1fr) clamp(48px, 7%, 66px) !important;
}

body[data-screen="game"] .game-log-overlay {
  width: min(34vw, 360px) !important;
  max-height: min(60%, 330px) !important;
  gap: 8px !important;
  padding: clamp(10px, 1vw, 14px) !important;
  border-radius: 18px !important;
}

body[data-screen="game"] .game-log-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

body[data-screen="game"] .game-log-icon,
body[data-screen="game"] .game-log-header p,
body[data-screen="game"] .new-log-icon,
body[data-screen="game"] .new-log-row time {
  display: none !important;
}

body[data-screen="game"] .game-log-header h2 {
  font-size: clamp(1rem, 1.35vw, 1.38rem) !important;
  line-height: 1 !important;
}

body[data-screen="game"] .game-log-close {
  width: clamp(34px, 3vw, 44px) !important;
  height: clamp(34px, 3vw, 44px) !important;
  border-radius: 12px !important;
}

body[data-screen="game"] .game-log-close::before {
  font-size: clamp(1.32rem, 1.8vw, 1.72rem) !important;
}

body[data-screen="game"] .game-log-list {
  gap: 6px !important;
  padding-right: 4px !important;
}

body[data-screen="game"] .new-log-row {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: clamp(38px, 3.3vw, 50px) !important;
  padding: 7px 9px !important;
  border-radius: 12px !important;
}

body[data-screen="game"] .new-log-number {
  display: grid;
  place-items: center;
  width: clamp(22px, 2vw, 30px);
  height: clamp(22px, 2vw, 30px);
  border: 1px solid rgba(246, 191, 44, 0.46);
  border-radius: 50%;
  color: #ffd25d;
  background: rgba(0, 24, 15, 0.78);
  font-size: clamp(0.62rem, 0.82vw, 0.75rem);
  font-weight: 950;
}

body[data-screen="game"] .new-log-row strong {
  font-size: clamp(0.62rem, 0.82vw, 0.76rem) !important;
  line-height: 1.15 !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .app-shell {
    grid-template-rows: minmax(48px, 14.5%) minmax(0, 1fr) !important;
  }

  body[data-screen="game"] .hero-brand {
    transform: translateY(clamp(-8px, -1.6vh, -4px)) !important;
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(48px, 10vh, 76px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(92px, 21vw, 136px) !important;
    padding: 3px 8px !important;
  }

  body[data-screen="game"] .hero-game-room strong {
    font-size: clamp(0.78rem, 3.2vh, 1.14rem) !important;
  }

  body[data-screen="game"] .hero-game-room span {
    font-size: clamp(0.36rem, 1.25vh, 0.45rem) !important;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(39vw, 310px) !important;
    max-height: 62% !important;
    padding: 8px !important;
  }

  body[data-screen="game"] .new-log-row {
    min-height: clamp(32px, 8vh, 42px) !important;
    padding: 5px 7px !important;
  }
}

/* True final header Game Log button and anchored popup. */
body:not([data-screen="game"]) #viewLogBtn {
  display: none !important;
}

body[data-screen="game"] #viewLogBtn.view-log-header-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(7px, 0.7vw, 10px) !important;
  width: auto !important;
  min-width: clamp(118px, 10.8vw, 150px) !important;
  height: clamp(42px, 4.1vw, 56px) !important;
  min-height: clamp(42px, 4.1vw, 56px) !important;
  padding: 0 clamp(10px, 1vw, 14px) !important;
  border: 2px solid #f6d733 !important;
  border-radius: 12px !important;
  color: #ffe66d !important;
  background:
    linear-gradient(180deg, rgba(0, 35, 25, 0.98), rgba(0, 18, 12, 0.98)) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(246, 215, 51, 0.12) !important;
  font-size: clamp(0.74rem, 1vw, 0.92rem) !important;
  font-weight: 950 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64) !important;
}

body[data-screen="game"] .account-action-row #viewLogBtn.view-log-header-btn::before {
  display: none !important;
}

body[data-screen="game"] #viewLogBtn .view-log-menu-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: clamp(24px, 2.4vw, 32px);
  height: clamp(22px, 2.1vw, 28px);
}

body[data-screen="game"] #viewLogBtn .view-log-menu-icon::before {
  content: "";
  position: absolute;
  inset: 3px 0 auto;
  height: clamp(4px, 0.42vw, 6px);
  border-radius: 999px;
  background: #f6d733;
  box-shadow:
    0 clamp(8px, 0.78vw, 10px) 0 #f6d733,
    0 clamp(16px, 1.56vw, 20px) 0 #f6d733;
}

body[data-screen="game"] #viewLogBtn .view-log-label {
  white-space: nowrap;
}

body[data-screen="game"] #viewLogBtn.view-log-header-btn:hover {
  filter: brightness(1.08);
}

body[data-screen="game"] .game-action-bar {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-screen="game"] .game-action-buttons {
  justify-content: flex-start !important;
}

body[data-screen="game"] .game-log-overlay {
  inset: clamp(4px, 0.7vw, 10px) clamp(8px, 1vw, 16px) auto auto !important;
  width: min(31vw, 350px) !important;
  max-height: min(56%, 330px) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] #viewLogBtn.view-log-header-btn {
    min-width: clamp(82px, 18vw, 116px) !important;
    height: clamp(30px, 7vh, 42px) !important;
    min-height: clamp(30px, 7vh, 42px) !important;
    gap: 5px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: clamp(0.52rem, 1.8vh, 0.7rem) !important;
  }

  body[data-screen="game"] #viewLogBtn .view-log-menu-icon {
    width: clamp(18px, 4.8vh, 24px);
    height: clamp(17px, 4.4vh, 22px);
  }

  body[data-screen="game"] #viewLogBtn .view-log-menu-icon::before {
    height: 3px;
    box-shadow:
      0 clamp(6px, 1.45vh, 8px) 0 #f6d733,
      0 clamp(12px, 2.9vh, 16px) 0 #f6d733;
  }

  body[data-screen="game"] .game-log-overlay {
    inset: clamp(2px, 0.6vh, 5px) clamp(6px, 1.2vw, 10px) auto auto !important;
    width: min(44vw, 310px) !important;
    max-height: 58% !important;
  }
}

/* Final compact latest-actions log: newest first, scrollable history. */
body[data-screen="game"] .game-log-overlay {
  width: min(29vw, 330px) !important;
  max-height: min(43%, 260px) !important;
  gap: 6px !important;
  padding: clamp(8px, 0.85vw, 12px) !important;
  border-radius: 16px !important;
}

body[data-screen="game"] .game-log-header {
  gap: 8px !important;
}

body[data-screen="game"] .game-log-header h2 {
  font-size: clamp(0.95rem, 1.18vw, 1.22rem) !important;
}

body[data-screen="game"] .game-log-close {
  width: clamp(30px, 2.6vw, 38px) !important;
  height: clamp(30px, 2.6vw, 38px) !important;
  border-radius: 10px !important;
}

body[data-screen="game"] .game-log-close::before {
  font-size: clamp(1.2rem, 1.55vw, 1.55rem) !important;
}

body[data-screen="game"] .game-log-list {
  gap: 5px !important;
  max-height: clamp(112px, 10vw, 142px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

body[data-screen="game"] .new-log-row {
  gap: 7px !important;
  min-height: clamp(34px, 2.85vw, 44px) !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

body[data-screen="game"] .new-log-number {
  width: clamp(20px, 1.7vw, 26px) !important;
  height: clamp(20px, 1.7vw, 26px) !important;
  font-size: clamp(0.55rem, 0.72vw, 0.68rem) !important;
}

body[data-screen="game"] .new-log-row strong {
  font-size: clamp(0.58rem, 0.72vw, 0.7rem) !important;
  line-height: 1.12 !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .game-log-overlay {
    width: min(41vw, 288px) !important;
    max-height: 48% !important;
    padding: 7px !important;
  }

  body[data-screen="game"] .game-log-list {
    max-height: clamp(92px, 23vh, 118px) !important;
    padding-right: 3px !important;
  }

  body[data-screen="game"] .new-log-row {
    min-height: clamp(28px, 7vh, 36px) !important;
    padding: 5px 6px !important;
  }
}

/* Final game table shape: rounded-rectangle felt table instead of oval. */
body[data-screen="game"] .new-game-table {
  background:
    radial-gradient(circle at 50% 42%, rgba(57, 199, 105, 0.24), transparent 25rem),
    linear-gradient(180deg, rgba(3, 48, 32, 0.98), rgba(0, 17, 13, 0.98)) !important;
}

body[data-screen="game"] .new-game-table::before {
  inset: clamp(34px, 5.2%, 58px) clamp(42px, 5.6%, 72px) clamp(28px, 5%, 52px) !important;
  border: clamp(4px, 0.45vw, 7px) solid rgba(246, 191, 44, 0.72) !important;
  border-radius: clamp(28px, 3.8vw, 54px) !important;
  background:
    linear-gradient(180deg, rgba(43, 181, 95, 0.88), rgba(9, 98, 55, 0.9) 45%, rgba(1, 42, 27, 0.95)),
    radial-gradient(circle at 50% 38%, rgba(104, 255, 148, 0.18), transparent 34rem) !important;
  box-shadow:
    inset 0 0 0 2px rgba(5, 30, 20, 0.96),
    inset 0 18px 40px rgba(255, 255, 255, 0.06),
    inset 0 -22px 42px rgba(0, 0, 0, 0.28),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(246, 191, 44, 0.12) !important;
}

body[data-screen="game"] .new-game-table::after {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 12rem),
    radial-gradient(circle at 82% 22%, rgba(255, 220, 90, 0.08), transparent 11rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.24)) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .new-game-table::before {
    inset: clamp(20px, 4.5vh, 36px) clamp(26px, 4vw, 44px) clamp(18px, 4vh, 32px) !important;
    border-radius: clamp(18px, 4.8vh, 32px) !important;
  }
}

/* Final full-area table: the whole game canvas is the tabletop. */
body[data-screen="game"] .new-game-table {
  border: clamp(4px, 0.48vw, 7px) solid rgba(246, 191, 44, 0.82) !important;
  border-radius: clamp(24px, 2.4vw, 42px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(70, 218, 119, 0.42), transparent 28rem),
    radial-gradient(circle at 19% 24%, rgba(255, 255, 255, 0.08), transparent 13rem),
    radial-gradient(circle at 82% 22%, rgba(255, 220, 90, 0.08), transparent 12rem),
    linear-gradient(180deg, rgba(12, 105, 58, 0.98), rgba(3, 54, 35, 0.99) 48%, rgba(0, 20, 15, 1)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(0, 18, 12, 0.84),
    inset 0 18px 42px rgba(255, 255, 255, 0.05),
    inset 0 -26px 46px rgba(0, 0, 0, 0.28),
    0 18px 36px rgba(0, 0, 0, 0.34) !important;
}

body[data-screen="game"] .new-game-table::before {
  inset: clamp(10px, 1vw, 16px) !important;
  border: 2px solid rgba(159, 238, 255, 0.58) !important;
  border-radius: clamp(18px, 1.85vw, 34px) !important;
  background: transparent !important;
  box-shadow:
    inset 0 0 0 2px rgba(0, 28, 20, 0.78),
    0 0 20px rgba(159, 238, 255, 0.12) !important;
}

body[data-screen="game"] .new-game-table::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 84%, rgba(0, 0, 0, 0.2)) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .new-game-table {
    border-radius: clamp(16px, 4.4vh, 28px) !important;
  }

  body[data-screen="game"] .new-game-table::before {
    inset: clamp(6px, 1.5vh, 10px) !important;
    border-radius: clamp(12px, 3.4vh, 22px) !important;
  }
}

/* Final four-seat game layout with right-side private space. */
body[data-screen="game"] .game-table-shell {
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body[data-screen="game"] .game-action-bar,
body[data-screen="game"] .self-hand-row {
  display: none !important;
}

body[data-screen="game"] .game-seat-layer {
  z-index: 3 !important;
  pointer-events: none !important;
}

body[data-screen="game"] .table-center-play {
  z-index: 2 !important;
}

body[data-screen="game"] .game-seat {
  display: grid !important;
  gap: clamp(4px, 0.55vw, 8px) !important;
  padding: clamp(6px, 0.68vw, 10px) !important;
  border: 2px solid rgba(236, 255, 238, 0.88) !important;
  border-radius: clamp(7px, 0.9vw, 12px) !important;
  background:
    linear-gradient(180deg, rgba(0, 71, 32, 0.96), rgba(0, 28, 17, 0.96)) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  pointer-events: auto !important;
}

body[data-screen="game"] .game-seat.active {
  border-color: #31f447 !important;
  box-shadow:
    0 0 20px rgba(49, 244, 71, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body[data-screen="game"] .game-seat-profile {
  display: grid !important;
  grid-area: profile;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(5px, 0.5vw, 8px);
  min-width: 0;
}

body[data-screen="game"] .game-seat-footer {
  grid-area: footer;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 4px !important;
}

body[data-screen="game"] .game-seat-cards {
  grid-area: cards;
  display: grid !important;
  align-items: stretch !important;
  gap: clamp(4px, 0.45vw, 7px) !important;
  min-width: 0;
  min-height: 0;
}

body[data-screen="game"] .game-seat.grid-cards {
  width: clamp(168px, 15.2vw, 230px) !important;
  min-height: clamp(184px, 27vh, 274px) !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "profile"
    "cards"
    "footer";
}

body[data-screen="game"] .game-seat.grid-cards .game-seat-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

body[data-screen="game"] .game-seat.wide-cards {
  width: clamp(330px, 36vw, 520px) !important;
  min-height: clamp(78px, 11.4vh, 122px) !important;
  grid-template-columns: clamp(118px, 10vw, 160px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

body[data-screen="game"] .game-seat.wide-cards .game-seat-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-screen="game"] .game-seat-top-left {
  left: clamp(10px, 1.1vw, 18px) !important;
  top: clamp(10px, 1.2vh, 18px) !important;
}

body[data-screen="game"] .game-seat-top-right {
  right: clamp(184px, 15vw, 232px) !important;
  top: clamp(12px, 1.5vh, 20px) !important;
  grid-template-columns: minmax(0, 1fr) clamp(118px, 10vw, 160px);
  grid-template-areas:
    "cards profile"
    "cards footer";
}

body[data-screen="game"] .game-seat-bottom-right {
  right: clamp(184px, 15vw, 232px) !important;
  bottom: clamp(14px, 1.8vh, 24px) !important;
}

body[data-screen="game"] .game-seat-bottom-left {
  left: clamp(10px, 1.1vw, 18px) !important;
  bottom: clamp(14px, 1.8vh, 24px) !important;
  grid-template-areas:
    "profile cards"
    "footer cards";
}

body[data-screen="game"] .game-seat .game-avatar {
  width: clamp(34px, 3.3vw, 48px) !important;
  height: clamp(34px, 3.3vw, 48px) !important;
  border-width: 2px !important;
  font-size: clamp(0.72rem, 1vw, 0.92rem) !important;
}

body[data-screen="game"] .game-seat-copy strong {
  font-size: clamp(0.62rem, 0.92vw, 0.82rem) !important;
  line-height: 1.02 !important;
}

body[data-screen="game"] .game-coin-pill {
  min-height: clamp(18px, 1.65vw, 24px) !important;
  padding: 1px 7px !important;
  font-size: clamp(0.54rem, 0.8vw, 0.68rem) !important;
}

body[data-screen="game"] .game-tag {
  min-width: 30px !important;
  min-height: 16px !important;
  padding: 1px 5px !important;
  font-size: clamp(0.46rem, 0.62vw, 0.58rem) !important;
}

body[data-screen="game"] .game-status-pill {
  min-width: 0 !important;
  min-height: 18px !important;
  padding: 1px 8px !important;
  font-size: clamp(0.48rem, 0.72vw, 0.62rem) !important;
}

body[data-screen="game"] .game-status-pill > span {
  width: 7px !important;
  height: 7px !important;
}

body[data-screen="game"] .game-seat-cards .game-card-slot {
  min-height: 0 !important;
  border-width: 2px !important;
  border-radius: 7px !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55) !important;
}

body[data-screen="game"] .game-seat-cards .game-card-slot .card-face,
body[data-screen="game"] .game-seat-cards .game-card-slot .koop-card-back {
  border-radius: 6px !important;
}

body[data-screen="game"] .game-seat-cards .seen-ribbon {
  top: -8px !important;
  bottom: auto !important;
  min-width: clamp(42px, 4.2vw, 62px) !important;
  padding: 2px 6px !important;
  font-size: clamp(0.48rem, 0.68vw, 0.6rem) !important;
}

body[data-screen="game"] .table-piles {
  left: 48% !important;
  top: 37% !important;
  gap: clamp(16px, 1.8vw, 28px) !important;
  z-index: 2 !important;
}

body[data-screen="game"] .new-game-table .deck-stack,
body[data-screen="game"] .new-game-table .discard-stack {
  min-width: clamp(66px, 6.4vw, 92px) !important;
  min-height: clamp(94px, 9.2vw, 126px) !important;
}

body[data-screen="game"] .stack-card {
  width: clamp(58px, 5.4vw, 80px) !important;
  height: clamp(80px, 7.8vw, 112px) !important;
}

body[data-screen="game"] .discard-stack #newCenterDiscard {
  width: clamp(58px, 5.4vw, 80px) !important;
  height: clamp(80px, 7.8vw, 112px) !important;
}

body[data-screen="game"] .new-game-table .deck-stack > span,
body[data-screen="game"] .new-game-table .discard-stack > span {
  padding: 3px 8px !important;
  font-size: clamp(0.48rem, 0.68vw, 0.6rem) !important;
}

body[data-screen="game"] .game-hint-row {
  left: clamp(96px, 9vw, 142px) !important;
  right: clamp(420px, 37vw, 560px) !important;
  bottom: clamp(116px, 21vh, 176px) !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: clamp(42px, 4.2vw, 58px) !important;
  border-color: #a7ff4e !important;
  box-shadow:
    0 0 0 3px rgba(7, 24, 22, 0.76),
    0 10px 22px rgba(0, 0, 0, 0.28) !important;
  z-index: 4 !important;
}

body[data-screen="game"] .game-hint-row p {
  grid-column: 2;
  padding: 0 clamp(10px, 1.3vw, 18px) !important;
  font-size: clamp(0.68rem, 0.95vw, 0.86rem) !important;
}

body[data-screen="game"] .turn-timer {
  grid-column: 1;
  grid-row: 1;
  width: clamp(48px, 4.8vw, 68px) !important;
  height: clamp(48px, 4.8vw, 68px) !important;
  margin: 0 8px 0 -34px !important;
  border-color: #a7ff4e !important;
  font-size: clamp(1rem, 1.6vw, 1.45rem) !important;
}

body[data-screen="game"] .private-space-panel {
  position: absolute;
  z-index: 5;
  top: clamp(10px, 1.2vh, 18px);
  right: clamp(10px, 1vw, 16px);
  bottom: clamp(10px, 1.2vh, 18px);
  width: clamp(128px, 12.2vw, 176px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(7px, 0.8vw, 11px);
  padding: clamp(7px, 0.78vw, 11px);
  border: 2px solid rgba(236, 255, 238, 0.9);
  border-radius: clamp(8px, 0.9vw, 13px);
  background: linear-gradient(180deg, rgba(0, 34, 18, 0.96), rgba(0, 16, 12, 0.98));
  box-shadow:
    0 9px 22px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
}

body[data-screen="game"] .private-space-title {
  display: grid;
  place-items: center;
  min-height: clamp(28px, 2.7vw, 38px);
  border: 2px solid #a7ff4e;
  border-radius: 8px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  font-size: clamp(0.56rem, 0.78vw, 0.68rem);
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-screen="game"] .private-space-panel .drawn-card-stage {
  position: static !important;
  display: grid;
  place-items: center;
  width: 100% !important;
  min-height: clamp(112px, 15vh, 170px) !important;
  transform: none !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-stage.empty {
  min-height: clamp(112px, 15vh, 170px) !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-frame {
  width: min(100%, clamp(74px, 7.4vw, 104px));
  padding: 5px !important;
  border: 3px solid #f6d75a !important;
  border-radius: 7px !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-frame > span {
  inset: auto 4px 5px !important;
  display: grid;
  place-items: center;
  min-height: 18px;
  border-radius: 4px;
  color: #ff9b32 !important;
  background: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.54rem, 0.76vw, 0.68rem) !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-frame .big-card {
  width: clamp(62px, 6.4vw, 90px) !important;
}

body[data-screen="game"] .private-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: end !important;
  gap: clamp(7px, 0.85vw, 11px) !important;
  min-height: 0;
}

body[data-screen="game"] .private-action-buttons .game-action-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(42px, 4.6vw, 62px) !important;
  padding: 0 clamp(8px, 0.8vw, 12px) !important;
  gap: clamp(6px, 0.72vw, 10px) !important;
  font-size: clamp(0.68rem, 0.98vw, 0.92rem) !important;
}

body[data-screen="game"] .private-action-buttons .game-action-btn::before {
  min-width: clamp(20px, 1.7vw, 28px) !important;
  font-size: clamp(1rem, 1.55vw, 1.36rem) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .game-seat.grid-cards {
    width: clamp(122px, 24vw, 168px) !important;
    min-height: clamp(118px, 39vh, 178px) !important;
  }

  body[data-screen="game"] .game-seat.wide-cards {
    width: clamp(236px, 45vw, 330px) !important;
    min-height: clamp(56px, 18vh, 82px) !important;
    grid-template-columns: clamp(84px, 16vw, 116px) minmax(0, 1fr);
  }

  body[data-screen="game"] .game-seat-top-right,
  body[data-screen="game"] .game-seat-bottom-right {
    right: clamp(132px, 25vw, 174px) !important;
  }

  body[data-screen="game"] .game-seat-copy strong,
  body[data-screen="game"] .game-coin-pill,
  body[data-screen="game"] .game-tag,
  body[data-screen="game"] .game-status-pill {
    font-size: clamp(0.4rem, 1.8vh, 0.58rem) !important;
  }

  body[data-screen="game"] .game-seat .game-avatar {
    width: clamp(24px, 7vh, 36px) !important;
    height: clamp(24px, 7vh, 36px) !important;
  }

  body[data-screen="game"] .table-piles {
    left: 47% !important;
    top: 36% !important;
  }

  body[data-screen="game"] .game-hint-row {
    left: clamp(60px, 12vw, 96px) !important;
    right: clamp(306px, 50vw, 388px) !important;
    bottom: clamp(72px, 22vh, 118px) !important;
    min-height: clamp(30px, 8vh, 44px) !important;
  }

  body[data-screen="game"] .game-hint-row p {
    font-size: clamp(0.46rem, 2.1vh, 0.68rem) !important;
  }

  body[data-screen="game"] .turn-timer {
    width: clamp(34px, 9vh, 50px) !important;
    height: clamp(34px, 9vh, 50px) !important;
    margin-left: -25px !important;
    font-size: clamp(0.78rem, 3vh, 1.08rem) !important;
  }

  body[data-screen="game"] .private-space-panel {
    width: clamp(104px, 21vw, 138px) !important;
  }

  body[data-screen="game"] .private-action-buttons .game-action-btn {
    min-height: clamp(30px, 8.4vh, 42px) !important;
    font-size: clamp(0.48rem, 2.1vh, 0.66rem) !important;
  }
}

/* Approved game table layout: home frame, rectangular table, four fixed seat zones. */
body[data-screen="game"] {
  --game-private-w: clamp(126px, 11vw, 166px);
  --game-seat-grid-w: clamp(148px, 12.6vw, 198px);
  --game-seat-grid-h: clamp(154px, 23vh, 246px);
  --game-seat-wide-w: clamp(340px, 34vw, 520px);
  --game-seat-wide-h: clamp(76px, 11.5vh, 124px);
  --game-seat-gap: clamp(9px, 1vw, 16px);
}

body[data-screen="game"] .app-shell {
  grid-template-rows: minmax(72px, 14%) minmax(0, 1fr) !important;
}

body[data-screen="game"] .hero {
  min-height: 0 !important;
  padding: 2px 4px 4px !important;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr) !important;
}

body[data-screen="game"] .hero-brand {
  align-self: start !important;
  gap: clamp(9px, 1vw, 16px) !important;
  transform: translateY(clamp(-10px, -0.75vw, -4px)) !important;
}

body[data-screen="game"] .hero-emblem {
  width: clamp(72px, 7.6vw, 122px) !important;
}

body[data-screen="game"] .hero-game-room {
  min-width: clamp(134px, 12vw, 196px) !important;
  min-height: clamp(48px, 4.5vw, 66px) !important;
  padding: 5px 12px !important;
  border-width: 2px !important;
  border-radius: 12px !important;
}

body[data-screen="game"] .hero-game-room strong {
  font-size: clamp(1.22rem, 2vw, 2.05rem) !important;
  letter-spacing: 0.06em !important;
}

body[data-screen="game"] .hero-game-room span {
  font-size: clamp(0.44rem, 0.62vw, 0.56rem) !important;
}

body[data-screen="game"] #gameScreen {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-screen="game"] .game-table-shell {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

body[data-screen="game"] .game-action-bar,
body[data-screen="game"] .self-hand-row {
  display: none !important;
}

body[data-screen="game"] .new-game-table {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(231, 247, 236, 0.88) !important;
  border-radius: clamp(10px, 1vw, 16px) !important;
  background:
    radial-gradient(circle at 48% 50%, rgba(51, 175, 92, 0.82) 0 33%, rgba(13, 105, 48, 0.92) 58%, rgba(0, 43, 24, 0.98) 78%),
    linear-gradient(180deg, rgba(8, 64, 35, 0.96), rgba(0, 18, 12, 1)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(0, 10, 7, 0.86),
    inset 0 20px 52px rgba(255, 255, 255, 0.04),
    inset 0 -22px 44px rgba(0, 0, 0, 0.3) !important;
}

body[data-screen="game"] .new-game-table::before {
  content: "" !important;
  position: absolute !important;
  inset: clamp(6px, 0.7vw, 12px) !important;
  border: clamp(2px, 0.32vw, 4px) solid rgba(246, 191, 44, 0.74) !important;
  border-radius: clamp(8px, 0.85vw, 14px) !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.18)),
    radial-gradient(circle at 50% 54%, rgba(70, 255, 133, 0.16), transparent 21rem) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 0 24px rgba(246, 191, 44, 0.1) !important;
  pointer-events: none !important;
}

body[data-screen="game"] .new-game-table::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 27%),
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.06), transparent 12rem),
    radial-gradient(circle at 82% 18%, rgba(255, 220, 90, 0.06), transparent 12rem) !important;
  pointer-events: none !important;
}

body[data-screen="game"] .table-center-play,
body[data-screen="game"] .game-seat-layer,
body[data-screen="game"] .game-log-overlay {
  position: absolute !important;
  inset: 0 !important;
}

body[data-screen="game"] .table-center-play {
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-screen="game"] .game-seat-layer {
  z-index: 3 !important;
  pointer-events: none !important;
}

body[data-screen="game"] .game-seat {
  position: absolute !important;
  display: grid !important;
  box-sizing: border-box !important;
  gap: clamp(4px, 0.5vw, 8px) !important;
  padding: clamp(6px, 0.68vw, 10px) !important;
  border: 2px solid rgba(232, 250, 238, 0.9) !important;
  border-radius: clamp(7px, 0.8vw, 12px) !important;
  color: #fafff7 !important;
  background:
    radial-gradient(circle at 32% 23%, rgba(57, 255, 103, 0.16), transparent 8rem),
    linear-gradient(180deg, rgba(0, 71, 32, 0.96), rgba(0, 25, 17, 0.97)) !important;
  box-shadow:
    0 9px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  pointer-events: auto !important;
}

body[data-screen="game"] .game-seat.active,
body[data-screen="game"] .game-seat.self {
  border-color: #31f447 !important;
  box-shadow:
    0 0 22px rgba(49, 244, 71, 0.3),
    0 9px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body[data-screen="game"] .game-seat-profile {
  grid-area: profile !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(5px, 0.55vw, 8px) !important;
  min-width: 0 !important;
}

body[data-screen="game"] .game-seat-cards {
  grid-area: cards !important;
  display: grid !important;
  align-items: stretch !important;
  gap: clamp(4px, 0.45vw, 7px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body[data-screen="game"] .game-seat-footer {
  grid-area: footer !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(4px, 0.45vw, 7px) !important;
  min-width: 0 !important;
}

body[data-screen="game"] .game-seat.grid-cards {
  width: var(--game-seat-grid-w) !important;
  min-height: var(--game-seat-grid-h) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "profile"
    "cards"
    "footer" !important;
}

body[data-screen="game"] .game-seat.grid-cards .game-seat-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

body[data-screen="game"] .game-seat.wide-cards {
  width: var(--game-seat-wide-w) !important;
  min-height: var(--game-seat-wide-h) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

body[data-screen="game"] .game-seat.wide-cards .game-seat-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-screen="game"] .game-seat-top-left {
  left: var(--game-seat-gap) !important;
  top: var(--game-seat-gap) !important;
}

body[data-screen="game"] .game-seat-top-right {
  top: var(--game-seat-gap) !important;
  right: calc(var(--game-private-w) + var(--game-seat-gap) * 1.6) !important;
  grid-template-columns: minmax(0, 1fr) clamp(118px, 10vw, 162px) !important;
  grid-template-areas:
    "cards profile"
    "cards footer" !important;
}

body[data-screen="game"] .game-seat-bottom-left {
  left: var(--game-seat-gap) !important;
  bottom: var(--game-seat-gap) !important;
  grid-template-columns: clamp(118px, 10vw, 162px) minmax(0, 1fr) !important;
  grid-template-areas:
    "profile cards"
    "footer cards" !important;
}

body[data-screen="game"] .game-seat-bottom-right {
  right: calc(var(--game-private-w) + var(--game-seat-gap) * 1.6) !important;
  bottom: var(--game-seat-gap) !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "cards"
    "profile"
    "footer" !important;
}

body[data-screen="game"] .game-seat .game-avatar {
  width: clamp(30px, 3.2vw, 48px) !important;
  min-width: clamp(30px, 3.2vw, 48px) !important;
  height: clamp(30px, 3.2vw, 48px) !important;
  border-width: 2px !important;
  font-size: clamp(0.68rem, 0.95vw, 0.9rem) !important;
}

body[data-screen="game"] .game-seat-copy strong {
  max-width: 100% !important;
  color: #ffffff !important;
  font-size: clamp(0.62rem, 0.9vw, 0.84rem) !important;
  line-height: 1.06 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72) !important;
}

body[data-screen="game"] .game-coin-pill {
  min-height: clamp(18px, 1.55vw, 24px) !important;
  margin-top: 2px !important;
  padding: 1px 7px !important;
  border-radius: 7px !important;
  font-size: clamp(0.52rem, 0.78vw, 0.68rem) !important;
}

body[data-screen="game"] .game-tag {
  min-width: clamp(28px, 2.8vw, 40px) !important;
  min-height: clamp(16px, 1.4vw, 21px) !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  font-size: clamp(0.42rem, 0.64vw, 0.56rem) !important;
}

body[data-screen="game"] .game-status-pill {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: clamp(18px, 1.8vw, 25px) !important;
  padding: 1px 8px !important;
  border-radius: 999px !important;
  font-size: clamp(0.46rem, 0.72vw, 0.62rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-screen="game"] .game-status-pill > span {
  width: 8px !important;
  height: 8px !important;
}

body[data-screen="game"] .game-seat-cards .game-card-slot {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 0.72 / 1 !important;
  border-width: 2px !important;
  border-radius: 7px !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.58) !important;
}

body[data-screen="game"] .game-seat-cards .game-card-slot .card-face,
body[data-screen="game"] .game-seat-cards .game-card-slot .koop-card-back {
  border-radius: 6px !important;
}

body[data-screen="game"] .game-seat-cards .seen-ribbon {
  top: -8px !important;
  bottom: auto !important;
  min-width: clamp(42px, 4vw, 60px) !important;
  padding: 2px 6px !important;
  font-size: clamp(0.46rem, 0.66vw, 0.58rem) !important;
}

body[data-screen="game"] .table-piles {
  left: 49% !important;
  top: 42% !important;
  gap: clamp(14px, 1.8vw, 26px) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}

body[data-screen="game"] .new-game-table .deck-stack,
body[data-screen="game"] .new-game-table .discard-stack {
  min-width: clamp(64px, 6vw, 90px) !important;
  min-height: clamp(88px, 8.4vw, 126px) !important;
}

body[data-screen="game"] .stack-card,
body[data-screen="game"] .discard-stack #newCenterDiscard {
  width: clamp(58px, 5.2vw, 78px) !important;
  height: clamp(80px, 7.5vw, 110px) !important;
}

body[data-screen="game"] .new-game-table .deck-stack > span,
body[data-screen="game"] .new-game-table .discard-stack > span {
  padding: 3px 8px !important;
  font-size: clamp(0.46rem, 0.66vw, 0.58rem) !important;
}

body[data-screen="game"] .new-game-table .deck-stack strong {
  min-width: 22px !important;
  min-height: 22px !important;
  font-size: 0.68rem !important;
}

body[data-screen="game"] .game-hint-row {
  left: clamp(110px, 12vw, 170px) !important;
  right: calc(var(--game-private-w) + var(--game-seat-grid-w) + clamp(42px, 5vw, 78px)) !important;
  bottom: clamp(110px, 20vh, 170px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: clamp(40px, 4vw, 56px) !important;
  border: 2px solid #a7ff4e !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.92) !important;
  box-shadow:
    0 0 0 3px rgba(7, 24, 22, 0.76),
    0 10px 22px rgba(0, 0, 0, 0.3) !important;
  z-index: 4 !important;
}

body[data-screen="game"] .game-hint-row p {
  grid-column: 2 !important;
  margin: 0 !important;
  padding: 0 clamp(10px, 1.3vw, 18px) !important;
  color: #c2f4ff !important;
  font-size: clamp(0.66rem, 0.95vw, 0.86rem) !important;
  line-height: 1.18 !important;
}

body[data-screen="game"] .turn-timer {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: clamp(46px, 4.4vw, 64px) !important;
  height: clamp(46px, 4.4vw, 64px) !important;
  margin: 0 8px 0 -32px !important;
  border: 5px solid #a7ff4e !important;
  font-size: clamp(1rem, 1.5vw, 1.38rem) !important;
}

body[data-screen="game"] .private-space-panel {
  position: absolute !important;
  z-index: 5 !important;
  top: var(--game-seat-gap) !important;
  right: var(--game-seat-gap) !important;
  bottom: var(--game-seat-gap) !important;
  width: var(--game-private-w) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(7px, 0.8vw, 11px) !important;
  padding: clamp(7px, 0.75vw, 11px) !important;
  border: 2px solid rgba(232, 250, 238, 0.9) !important;
  border-radius: clamp(7px, 0.8vw, 12px) !important;
  background:
    linear-gradient(180deg, rgba(0, 32, 18, 0.96), rgba(0, 13, 10, 0.98)) !important;
  box-shadow:
    0 9px 22px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  pointer-events: auto !important;
}

body[data-screen="game"] .private-space-title {
  display: grid !important;
  place-items: center !important;
  min-height: clamp(28px, 2.55vw, 38px) !important;
  border: 2px solid #a7ff4e !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.72) !important;
  font-size: clamp(0.54rem, 0.74vw, 0.66rem) !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-stage {
  position: static !important;
  display: grid !important;
  place-items: start center !important;
  width: 100% !important;
  min-height: clamp(108px, 14vh, 166px) !important;
  transform: none !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-stage.empty {
  min-height: clamp(108px, 14vh, 166px) !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-frame {
  width: min(100%, clamp(72px, 7vw, 104px)) !important;
  padding: 5px !important;
  border: 3px solid #f6d75a !important;
  border-radius: 7px !important;
  animation: drawnCardPulse 1.25s ease-in-out infinite !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-frame > span {
  inset: auto 4px 5px !important;
  display: grid !important;
  place-items: center !important;
  min-height: 18px !important;
  border-radius: 4px !important;
  color: #ff8a2a !important;
  background: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(0.52rem, 0.72vw, 0.66rem) !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-frame .big-card {
  width: clamp(60px, 6vw, 88px) !important;
}

body[data-screen="game"] .private-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: end !important;
  gap: clamp(7px, 0.85vw, 11px) !important;
  min-height: 0 !important;
}

body[data-screen="game"] .private-action-buttons .game-action-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(40px, 4.4vw, 60px) !important;
  padding: 0 clamp(8px, 0.85vw, 12px) !important;
  gap: clamp(6px, 0.72vw, 10px) !important;
  border-radius: 8px !important;
  font-size: clamp(0.64rem, 0.94vw, 0.88rem) !important;
}

body[data-screen="game"] .private-action-buttons .game-action-btn::before {
  min-width: clamp(18px, 1.55vw, 26px) !important;
  font-size: clamp(0.95rem, 1.45vw, 1.3rem) !important;
}

body[data-screen="game"] .game-log-overlay {
  inset: clamp(0px, 0.3vw, 4px) clamp(8px, 1vw, 14px) auto auto !important;
  width: min(31vw, 360px) !important;
  max-height: min(42%, 300px) !important;
  gap: 8px !important;
  padding: clamp(10px, 1vw, 14px) !important;
  border-radius: 16px !important;
  z-index: 8 !important;
}

body[data-screen="game"] .game-log-header h2 {
  font-size: clamp(1rem, 1.28vw, 1.34rem) !important;
}

body[data-screen="game"] .game-log-close {
  width: clamp(34px, 2.8vw, 42px) !important;
  height: clamp(34px, 2.8vw, 42px) !important;
  border-radius: 10px !important;
}

body[data-screen="game"] .new-log-row {
  min-height: clamp(36px, 3.2vw, 48px) !important;
  padding: 6px 8px !important;
  gap: 8px !important;
}

body[data-screen="game"] .new-log-row strong {
  font-size: clamp(0.58rem, 0.78vw, 0.72rem) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] {
    --game-private-w: clamp(96px, 18vw, 124px);
    --game-seat-grid-w: clamp(104px, 18vw, 138px);
    --game-seat-grid-h: clamp(104px, 34vh, 156px);
    --game-seat-wide-w: clamp(214px, 42vw, 300px);
    --game-seat-wide-h: clamp(56px, 17vh, 82px);
    --game-seat-gap: clamp(5px, 1vw, 9px);
  }

  body[data-screen="game"] .app-shell {
    grid-template-rows: minmax(48px, 14.5%) minmax(0, 1fr) !important;
  }

  body[data-screen="game"] .hero {
    grid-template-columns: minmax(122px, 1fr) auto minmax(124px, 1fr) !important;
    padding: 1px 0 2px !important;
  }

  body[data-screen="game"] .hero-emblem {
    width: clamp(46px, 10vh, 74px) !important;
  }

  body[data-screen="game"] .hero-game-room {
    min-width: clamp(92px, 21vw, 136px) !important;
    min-height: clamp(34px, 8vh, 48px) !important;
    padding: 3px 8px !important;
  }

  body[data-screen="game"] .hero-game-room strong {
    font-size: clamp(0.78rem, 3.1vh, 1.12rem) !important;
  }

  body[data-screen="game"] .game-seat-top-right,
  body[data-screen="game"] .game-seat-bottom-right {
    right: calc(var(--game-private-w) + var(--game-seat-gap) * 1.4) !important;
  }

  body[data-screen="game"] .game-seat-top-right,
  body[data-screen="game"] .game-seat-bottom-left {
    grid-template-columns: clamp(76px, 15vw, 106px) minmax(0, 1fr) !important;
  }

  body[data-screen="game"] .game-seat-top-right {
    grid-template-columns: minmax(0, 1fr) clamp(76px, 15vw, 106px) !important;
  }

  body[data-screen="game"] .game-seat .game-avatar {
    width: clamp(22px, 6vh, 32px) !important;
    min-width: clamp(22px, 6vh, 32px) !important;
    height: clamp(22px, 6vh, 32px) !important;
  }

  body[data-screen="game"] .game-seat-copy strong,
  body[data-screen="game"] .game-coin-pill,
  body[data-screen="game"] .game-tag,
  body[data-screen="game"] .game-status-pill {
    font-size: clamp(0.38rem, 1.6vh, 0.56rem) !important;
  }

  body[data-screen="game"] .game-status-pill {
    min-height: clamp(16px, 3.7vh, 22px) !important;
  }

  body[data-screen="game"] .table-piles {
    left: 48% !important;
    top: 42% !important;
    gap: clamp(10px, 2vw, 18px) !important;
  }

  body[data-screen="game"] .stack-card,
  body[data-screen="game"] .discard-stack #newCenterDiscard {
    width: clamp(40px, 8vh, 58px) !important;
    height: clamp(56px, 12vh, 80px) !important;
  }

  body[data-screen="game"] .game-hint-row {
    left: clamp(58px, 11vw, 88px) !important;
    right: calc(var(--game-private-w) + var(--game-seat-grid-w) + clamp(20px, 4vw, 44px)) !important;
    bottom: clamp(62px, 20vh, 98px) !important;
    min-height: clamp(30px, 7.4vh, 42px) !important;
  }

  body[data-screen="game"] .game-hint-row p {
    font-size: clamp(0.42rem, 1.8vh, 0.62rem) !important;
  }

  body[data-screen="game"] .turn-timer {
    width: clamp(32px, 8vh, 46px) !important;
    height: clamp(32px, 8vh, 46px) !important;
    margin-left: -23px !important;
    font-size: clamp(0.72rem, 2.8vh, 1rem) !important;
  }

  body[data-screen="game"] .private-action-buttons .game-action-btn {
    min-height: clamp(28px, 7.8vh, 38px) !important;
    font-size: clamp(0.44rem, 1.8vh, 0.62rem) !important;
  }

  body[data-screen="game"] .game-log-overlay {
    width: min(38vw, 300px) !important;
    max-height: 46% !important;
    padding: 8px !important;
  }
}

/* Private Thinking Room rail sits outside the table surface. */
body[data-screen="game"] {
  --game-private-gap: clamp(7px, 0.8vw, 13px);
  --game-table-right-rail: calc(var(--game-private-w) + var(--game-private-gap) + var(--game-seat-gap));
}

body[data-screen="game"] .new-game-table {
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.2)),
    radial-gradient(circle at 44% 49%, rgba(44, 155, 80, 0.48), transparent 30rem),
    linear-gradient(180deg, rgba(0, 51, 29, 0.98), rgba(0, 17, 12, 1)) !important;
  box-shadow: none !important;
}

body[data-screen="game"] .new-game-table::before {
  inset: var(--game-private-gap) var(--game-table-right-rail) var(--game-private-gap) var(--game-private-gap) !important;
  border: clamp(3px, 0.36vw, 5px) solid #cfff2d !important;
  border-radius: clamp(7px, 0.82vw, 12px) !important;
  background:
    radial-gradient(circle at 49% 48%, rgba(62, 185, 86, 0.38), transparent 29rem),
    linear-gradient(180deg, rgba(16, 108, 42, 0.52), rgba(4, 68, 29, 0.48)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(1, 25, 14, 0.95),
    inset 0 18px 34px rgba(255, 255, 255, 0.04),
    0 0 16px rgba(207, 255, 45, 0.18) !important;
}

body[data-screen="game"] .new-game-table::after {
  right: var(--game-table-right-rail) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 26%),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.06), transparent 11rem),
    radial-gradient(circle at 80% 18%, rgba(255, 220, 90, 0.05), transparent 11rem) !important;
}

body[data-screen="game"] .private-space-panel {
  top: var(--game-private-gap) !important;
  right: var(--game-private-gap) !important;
  bottom: var(--game-private-gap) !important;
  width: var(--game-private-w) !important;
  border: clamp(3px, 0.36vw, 5px) solid #cfff2d !important;
  border-radius: clamp(7px, 0.82vw, 12px) !important;
  background:
    linear-gradient(180deg, rgba(0, 31, 18, 0.98), rgba(0, 10, 8, 0.99)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(1, 25, 14, 0.95),
    0 0 16px rgba(207, 255, 45, 0.14),
    0 9px 22px rgba(0, 0, 0, 0.36) !important;
}

body[data-screen="game"] .private-space-title {
  min-height: clamp(26px, 2.35vw, 36px) !important;
  border-color: #a7ff4e !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.74) !important;
  padding: 2px 4px !important;
  font-size: clamp(0.42rem, 0.6vw, 0.58rem) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-stage {
  padding-top: clamp(10px, 1.1vw, 18px) !important;
}

body[data-screen="game"] .private-space-panel .drawn-card-stage.has-notice {
  place-items: center !important;
  padding: clamp(6px, 0.7vw, 10px) 0 !important;
}

body[data-screen="game"] .private-room-notice {
  display: grid !important;
  place-items: center !important;
  width: min(100%, clamp(72px, 7vw, 104px)) !important;
  min-height: clamp(74px, 8vw, 112px) !important;
  padding: clamp(6px, 0.72vw, 10px) !important;
  border: 2px solid rgba(167, 255, 78, 0.88) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(85, 255, 161, 0.16), transparent 64%),
    rgba(0, 0, 0, 0.78) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 14px rgba(70, 255, 132, 0.18) !important;
  color: #f7fff7 !important;
  font-size: clamp(0.42rem, 0.62vw, 0.58rem) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  text-align: center !important;
}

body[data-screen="game"] .game-seat-top-right,
body[data-screen="game"] .game-seat-bottom-right {
  right: calc(var(--game-table-right-rail) + var(--game-seat-gap)) !important;
}

body[data-screen="game"] .game-hint-row {
  right: calc(var(--game-table-right-rail) + var(--game-seat-grid-w) + clamp(24px, 4vw, 62px)) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] {
    --game-private-gap: clamp(5px, 1vw, 8px);
  }

  body[data-screen="game"] .game-seat-top-right,
  body[data-screen="game"] .game-seat-bottom-right {
    right: calc(var(--game-table-right-rail) + var(--game-seat-gap)) !important;
  }

  body[data-screen="game"] .game-hint-row {
    right: calc(var(--game-table-right-rail) + var(--game-seat-grid-w) + clamp(14px, 3vw, 32px)) !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body[data-screen="game"] {
    --game-private-w: clamp(74px, 23vh, 94px);
    --game-seat-grid-w: clamp(86px, 25vh, 104px);
    --game-seat-grid-h: clamp(116px, 43vh, 144px);
    --game-seat-wide-w: clamp(182px, 46vw, 246px);
    --game-seat-wide-h: clamp(46px, 16vh, 62px);
    --game-seat-gap: clamp(4px, 1.1vh, 6px);
    --game-private-gap: clamp(4px, 1.1vh, 6px);
  }

  body[data-screen="game"] .game-seat {
    gap: 3px !important;
    padding: 4px !important;
  }

  body[data-screen="game"] .game-seat.grid-cards {
    min-height: 0 !important;
  }

  body[data-screen="game"] .game-seat .game-avatar {
    width: clamp(20px, 6vh, 26px) !important;
    min-width: clamp(20px, 6vh, 26px) !important;
    height: clamp(20px, 6vh, 26px) !important;
  }

  body[data-screen="game"] .game-seat-cards {
    gap: 3px !important;
  }

  body[data-screen="game"] .game-seat-cards .game-card-slot {
    border-width: 1px !important;
    border-radius: 5px !important;
  }

  body[data-screen="game"] .game-seat-cards .seen-ribbon {
    top: -6px !important;
    min-width: 34px !important;
    min-height: 14px !important;
    padding: 1px 4px !important;
    font-size: 0.36rem !important;
  }

  body[data-screen="game"] .game-seat-copy strong,
  body[data-screen="game"] .game-coin-pill,
  body[data-screen="game"] .game-tag,
  body[data-screen="game"] .game-status-pill {
    font-size: clamp(0.34rem, 1.45vh, 0.5rem) !important;
  }

  body[data-screen="game"] .game-status-pill {
    min-height: clamp(14px, 3.4vh, 18px) !important;
    padding: 0 5px !important;
  }

  body[data-screen="game"] .game-hint-row {
    left: clamp(52px, 10vw, 74px) !important;
    right: calc(var(--game-table-right-rail) + var(--game-seat-grid-w) + clamp(10px, 2.6vw, 24px)) !important;
  }

  body[data-screen="game"] .private-action-buttons .game-action-btn {
    min-height: clamp(26px, 7vh, 34px) !important;
    padding: 0 5px !important;
    font-size: clamp(0.42rem, 1.6vh, 0.56rem) !important;
  }
}

/* Header and game-table uniformity polish. */
body[data-lobby-mode="computer"] {
  --lobby-code-accent: #f6df18;
  --lobby-code-glow: rgba(246, 223, 24, 0.34);
}

body[data-lobby-mode="online"] {
  --lobby-code-accent: #1d98ff;
  --lobby-code-glow: rgba(29, 152, 255, 0.34);
}

body[data-lobby-mode="invite"] {
  --lobby-code-accent: #ff2736;
  --lobby-code-glow: rgba(255, 39, 54, 0.36);
}

body[data-lobby-mode="join"] {
  --lobby-code-accent: #31f447;
  --lobby-code-glow: rgba(49, 244, 71, 0.34);
}

body[data-screen="home"] .home-player-pill,
body[data-screen="game"] .home-player-pill,
body[data-screen="home"] .profile-menu-btn,
body[data-screen="game"] .profile-menu-btn,
body[data-screen="home"] .account-action-row #infoBtn,
body[data-screen="home"] .account-action-row #settingsBtn,
body[data-screen="game"] .account-action-row #infoBtn,
body[data-screen="game"] .account-action-row #settingsBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--home-header-button-height, 50px) !important;
  min-height: var(--home-header-button-height, 50px) !important;
  max-height: var(--home-header-button-height, 50px) !important;
  border: 2px solid #f6d733 !important;
  border-radius: 12px !important;
  color: #ffe66d !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 215, 64, 0.12), rgba(255, 215, 64, 0) 46%),
    linear-gradient(180deg, rgba(0, 35, 25, 0.98), rgba(0, 18, 12, 0.98)) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(246, 215, 51, 0.12) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64) !important;
}

body[data-screen="home"] .home-player-pill,
body[data-screen="game"] .home-player-pill {
  gap: 9px !important;
  width: auto !important;
  max-width: min(270px, 27vw) !important;
  padding: 0 clamp(10px, 1vw, 15px) !important;
  overflow: hidden !important;
}

body[data-screen="home"] .home-player-pill .account-mini-avatar,
body[data-screen="game"] .home-player-pill .account-mini-avatar,
body[data-screen="home"] .profile-menu-btn .account-mini-avatar,
body[data-screen="game"] .profile-menu-btn .account-mini-avatar {
  width: calc(var(--home-header-button-height, 50px) * 0.62) !important;
  min-width: calc(var(--home-header-button-height, 50px) * 0.62) !important;
  height: calc(var(--home-header-button-height, 50px) * 0.62) !important;
  margin: 0 !important;
  border: 2px solid rgba(246, 215, 51, 0.82) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.48) !important;
}

body[data-screen="home"] .home-player-name,
body[data-screen="game"] .home-player-name {
  color: #f9fff6 !important;
  font-size: calc(var(--home-header-button-height, 50px) * 0.31) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body[data-screen="home"] .account-action-row #infoBtn,
body[data-screen="home"] .account-action-row #settingsBtn,
body[data-screen="game"] .account-action-row #infoBtn,
body[data-screen="game"] .account-action-row #settingsBtn,
body[data-screen="home"] .profile-menu-btn,
body[data-screen="game"] .profile-menu-btn {
  flex: 0 0 var(--home-header-button-height, 50px) !important;
  width: var(--home-header-button-height, 50px) !important;
  min-width: var(--home-header-button-height, 50px) !important;
  max-width: var(--home-header-button-height, 50px) !important;
  padding: 0 !important;
}

body[data-screen="home"] .account-action-row #infoBtn::before,
body[data-screen="home"] .account-action-row #settingsBtn::before,
body[data-screen="game"] .account-action-row #infoBtn::before,
body[data-screen="game"] .account-action-row #settingsBtn::before {
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #ffe66d !important;
  background: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64) !important;
}

body[data-screen="home"] .account-action-row #settingsBtn::before,
body[data-screen="game"] .account-action-row #settingsBtn::before {
  font-size: calc(var(--home-header-button-height, 50px) * 0.46) !important;
}

body[data-screen="home"] .account-action-row #infoBtn::before,
body[data-screen="game"] .account-action-row #infoBtn::before {
  font-size: calc(var(--home-header-button-height, 50px) * 0.52) !important;
}

body[data-screen="home"] .account-action-row #viewLogBtn .view-log-menu-icon,
body[data-screen="game"] .account-action-row #viewLogBtn .view-log-menu-icon {
  width: clamp(18px, 1.8vw, 24px) !important;
  height: clamp(17px, 1.65vw, 22px) !important;
}

body[data-screen="home"] .account-action-row #viewLogBtn .view-log-menu-icon::before,
body[data-screen="game"] .account-action-row #viewLogBtn .view-log-menu-icon::before {
  height: clamp(3px, 0.32vw, 4px) !important;
  box-shadow:
    0 clamp(7px, 0.62vw, 8px) 0 #f6d733,
    0 clamp(14px, 1.24vw, 16px) 0 #f6d733 !important;
}

.coin-chip {
  --coin-chip-size: 24px;
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: var(--coin-chip-size) !important;
  min-width: var(--coin-chip-size) !important;
  height: var(--coin-chip-size) !important;
  min-height: var(--coin-chip-size) !important;
  margin-right: 5px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 220, 83, 0.58) !important;
  border-radius: 50% !important;
  color: transparent !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffe070, #eaa01f 68%, #875109 100%) !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.coin-chip::before {
  content: "" !important;
  display: block !important;
  width: 54% !important;
  height: 54% !important;
  border: 2px solid rgba(131, 72, 0, 0.5) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle, #ffd96a, #c97908 78%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

body[data-screen="home"] .account-action-row .coin-menu-btn .coin-chip,
body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip {
  --coin-chip-size: calc(var(--home-header-button-height, 50px) * 0.42);
  margin-right: 0 !important;
}

body[data-screen="game"] {
  --game-seat-gap: clamp(15px, 1.4vw, 24px);
  --game-private-gap: clamp(9px, 0.9vw, 14px);
}

body[data-screen="game"] .private-space-title {
  display: grid !important;
  place-items: center !important;
  align-content: start !important;
  gap: 2px !important;
  min-height: auto !important;
  padding: clamp(5px, 0.55vw, 8px) 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f4fff2 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(0.5rem, 0.62vw, 0.68rem) !important;
  font-weight: 950 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body[data-screen="game"] .private-space-title span {
  display: block !important;
}

@media (max-width: 1000px) {
  body[data-screen="home"] .home-player-pill,
  body[data-screen="game"] .home-player-pill {
    max-width: min(210px, 30vw) !important;
    padding: 0 8px !important;
  }

  body[data-screen="home"] .home-player-pill .account-mini-avatar,
  body[data-screen="game"] .home-player-pill .account-mini-avatar,
  body[data-screen="home"] .profile-menu-btn .account-mini-avatar,
  body[data-screen="game"] .profile-menu-btn .account-mini-avatar {
    width: calc(var(--home-header-button-height, 42px) * 0.58) !important;
    min-width: calc(var(--home-header-button-height, 42px) * 0.58) !important;
    height: calc(var(--home-header-button-height, 42px) * 0.58) !important;
  }

  body[data-screen="home"] .home-player-name,
  body[data-screen="game"] .home-player-name {
    font-size: calc(var(--home-header-button-height, 42px) * 0.28) !important;
  }

  body[data-screen="game"] {
    --game-seat-gap: clamp(7px, 1.5vw, 11px);
    --game-private-gap: clamp(6px, 1.1vw, 9px);
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body[data-screen="game"] {
    --game-seat-gap: clamp(6px, 1.6vh, 10px);
    --game-private-gap: clamp(5px, 1.3vh, 8px);
  }
}

/* Final header cleanup: profile is only available from the left profile pill. */
body .account-action-row #guestProfileBtn,
body .account-action-row .profile-menu-btn {
  display: none !important;
}

/* Small lobby comfort pass after moving the room code into the header. */
body.home-lobby-mode #lobbyScreen .lobby-slot-card {
  height: min(100%, clamp(174px, 15.6vw, 242px)) !important;
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-card {
  height: min(100%, clamp(100px, 25vh, 154px)) !important;
}

/* Home game-type info pills use a black border; the Join code input keeps its own border. */
body[data-screen="home"] .mode-card-control.mode-info-pill {
  border-color: rgba(0, 0, 0, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 18px rgba(var(--mode-rgb), 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Final Private Thinking Room label readability pass. */
body[data-screen="game"] .private-space-title {
  font-size: clamp(0.74rem, 0.9vw, 1rem) !important;
  line-height: 1.06 !important;
}

/* True final result-stage sizing: keep celebration clear of four player seats. */
body.game-score-mode[data-screen="game"] .score-result-stage {
  width: min(42vw, 500px) !important;
  gap: clamp(6px, 0.75vw, 12px) !important;
  transform: translate(-5%, 3%) !important;
}

body.game-score-mode[data-screen="game"] .score-result-banner {
  width: min(100%, 430px) !important;
  padding: clamp(6px, 0.68vw, 10px) clamp(13px, 1.35vw, 22px) !important;
  font-size: clamp(0.7rem, 1vw, 1rem) !important;
}

body.game-score-mode[data-screen="game"] .score-result-logo {
  width: min(38vw, 440px) !important;
  max-height: min(22vh, 190px) !important;
}

@media (max-width: 1000px) {
  body.game-score-mode[data-screen="game"] .score-result-stage {
    width: min(38vw, 300px) !important;
    transform: translate(-4%, 2%) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-logo {
    width: min(35vw, 270px) !important;
    max-height: 18vh !important;
  }
}

/* Final result screen pass: keep live game seats intact and layer TOTAL/WINNER only. */
body.game-score-mode[data-screen="game"] .game-seat.score-result {
  overflow: visible !important;
  filter: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat.grid-cards.score-result {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "profile"
    "cards"
    "footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat.wide-cards.score-result {
  grid-template-rows: minmax(0, 1fr) auto !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right.wide-cards.score-result {
  grid-template-columns: minmax(0, 1fr) clamp(118px, 10vw, 162px) !important;
  grid-template-areas:
    "cards profile"
    "cards footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left.wide-cards.score-result {
  grid-template-columns: clamp(118px, 10vw, 162px) minmax(0, 1fr) !important;
  grid-template-areas:
    "profile cards"
    "footer cards" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-right.grid-cards.score-result {
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "cards"
    "profile"
    "footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-winner {
  position: absolute !important;
  z-index: 8 !important;
  grid-area: auto !important;
  pointer-events: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result {
  min-height: clamp(22px, 2vw, 30px) !important;
  min-width: clamp(72px, 6.6vw, 104px) !important;
  padding: 4px 10px !important;
  border: 2px solid rgba(190, 255, 137, 0.92) !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #4ab92f, #1d7c16) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.52),
    0 0 14px rgba(167, 255, 78, 0.2) !important;
  font-size: clamp(0.56rem, 0.78vw, 0.74rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.game-score-mode[data-screen="game"] .game-seat-winner {
  min-width: clamp(72px, 7vw, 110px) !important;
  padding: 4px 11px !important;
  border: 2px solid rgba(33, 95, 24, 0.86) !important;
  border-radius: 6px !important;
  color: #051208 !important;
  background: linear-gradient(180deg, #ffffff, #edf8ec) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.52) !important;
  font-size: clamp(0.56rem, 0.76vw, 0.72rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-result {
  bottom: clamp(-18px, -1.6vw, -12px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result {
  top: clamp(-18px, -1.6vw, -12px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-result {
  right: clamp(8px, 0.9vw, 14px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result {
  left: clamp(8px, 0.9vw, 14px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-winner {
  bottom: clamp(-48px, -3.8vw, -34px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  top: clamp(-48px, -3.8vw, -34px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-winner {
  right: clamp(12px, 1vw, 18px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  left: clamp(12px, 1vw, 18px) !important;
}

body.game-score-mode[data-screen="game"] .score-result-stage {
  width: min(34vw, 430px) !important;
  transform: translate(-4%, 2%) !important;
}

body.game-score-mode[data-screen="game"] .score-result-banner {
  width: min(100%, 400px) !important;
}

body.game-score-mode[data-screen="game"] .score-result-logo {
  width: min(34vw, 390px) !important;
  max-height: min(21vh, 176px) !important;
}

@media (max-width: 1000px) {
  body.game-score-mode[data-screen="game"] .game-seat-result,
  body.game-score-mode[data-screen="game"] .game-seat-winner {
    min-height: clamp(16px, 4vh, 22px) !important;
    min-width: clamp(50px, 12vw, 76px) !important;
    padding: 2px 6px !important;
    font-size: clamp(0.36rem, 1.45vh, 0.5rem) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-stage {
    width: min(34vw, 260px) !important;
    transform: translate(-2%, 1%) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-logo {
    width: min(32vw, 230px) !important;
    max-height: 17vh !important;
  }
}

/* Final score result polish: keep seats intact, then attach TOTAL/WINNER badges. */
body.game-score-mode[data-screen="game"] .game-seat.score-result {
  border-color: rgba(207, 255, 221, 0.76) !important;
  background:
    radial-gradient(circle at 55% 26%, rgba(86, 210, 124, 0.2), transparent 54%),
    linear-gradient(180deg, rgba(5, 71, 32, 0.95), rgba(0, 28, 16, 0.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 9px 18px rgba(0, 0, 0, 0.38) !important;
}

body.game-score-mode[data-screen="game"] .game-seat.score-result.winner {
  border-color: #9fff28 !important;
  box-shadow:
    0 0 0 2px rgba(148, 255, 40, 0.42),
    0 0 24px rgba(62, 255, 95, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.44) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-winner {
  height: clamp(22px, 1.9vw, 30px) !important;
  min-height: 0 !important;
  min-width: clamp(84px, 7.4vw, 124px) !important;
  padding: 3px 11px !important;
  border-radius: 6px !important;
  transform: none !important;
  white-space: nowrap !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result {
  border-color: rgba(255, 255, 255, 0.92) !important;
  background: linear-gradient(180deg, #4dbc35, #23881c) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result.winner {
  border-color: #ffffff !important;
  background: linear-gradient(180deg, #51bf35, #268a1b) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-winner {
  border-color: rgba(52, 128, 45, 0.96) !important;
  background: linear-gradient(180deg, #ffffff, #edf9ed) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result:not(.winner) {
  right: clamp(8px, 0.9vw, 14px) !important;
  bottom: clamp(-18px, -1.4vw, -11px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result.winner {
  right: clamp(8px, 0.9vw, 14px) !important;
  bottom: clamp(-18px, -1.4vw, -11px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner {
  right: clamp(13px, 1vw, 20px) !important;
  bottom: clamp(-47px, -3.5vw, -33px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result:not(.winner),
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result.winner {
  left: 50% !important;
  top: clamp(-31px, -2.25vw, -22px) !important;
  transform: translateX(-50%) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  left: 50% !important;
  top: clamp(-58px, -4.2vw, -40px) !important;
  transform: translateX(-50%) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right.wide-cards.score-result .game-seat-result {
  left: clamp(-52px, -4vw, -34px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left.wide-cards.score-result .game-seat-result {
  right: clamp(-52px, -4vw, -34px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

body.game-score-mode[data-screen="game"] .private-action-buttons .action-quit {
  color: #ffffff !important;
  background: linear-gradient(180deg, #245d8e, #0d2947) !important;
  border-color: #6ea7d6 !important;
}

body[data-screen="game"] .action-quit::before { content: "\21AA" !important; }

/* Result seat total pill: no seat-level winner pill, full-width attached label. */
body.game-score-mode[data-screen="game"] .game-seat-winner {
  display: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat.grid-cards.score-result .game-seat-result {
  left: clamp(7px, 0.7vw, 11px) !important;
  right: clamp(7px, 0.7vw, 11px) !important;
  top: clamp(-18px, -1.45vw, -12px) !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  transform: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat.wide-cards.score-result .game-seat-result {
  left: clamp(7px, 0.7vw, 11px) !important;
  right: clamp(7px, 0.7vw, 11px) !important;
  top: clamp(-18px, -1.45vw, -12px) !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  transform: none !important;
}

/* Score result polish: attach TOTAL/WINNER pills to the existing game seats. */
body.game-score-mode[data-screen="game"] .game-seat.score-result {
  border-color: rgba(207, 255, 221, 0.76) !important;
  background:
    radial-gradient(circle at 55% 26%, rgba(86, 210, 124, 0.2), transparent 54%),
    linear-gradient(180deg, rgba(5, 71, 32, 0.95), rgba(0, 28, 16, 0.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 9px 18px rgba(0, 0, 0, 0.38) !important;
}

body.game-score-mode[data-screen="game"] .game-seat.score-result.winner {
  border-color: #9fff28 !important;
  box-shadow:
    0 0 0 2px rgba(148, 255, 40, 0.42),
    0 0 24px rgba(62, 255, 95, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.44) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-winner {
  height: clamp(22px, 1.9vw, 30px) !important;
  min-height: 0 !important;
  min-width: clamp(84px, 7.4vw, 124px) !important;
  padding: 3px 11px !important;
  border-radius: 6px !important;
  transform: none !important;
  white-space: nowrap !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result {
  border-color: rgba(255, 255, 255, 0.92) !important;
  background: linear-gradient(180deg, #4dbc35, #23881c) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result.winner {
  border-color: #ffffff !important;
  background: linear-gradient(180deg, #51bf35, #268a1b) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-winner {
  border-color: rgba(52, 128, 45, 0.96) !important;
  background: linear-gradient(180deg, #ffffff, #edf9ed) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result:not(.winner) {
  right: clamp(8px, 0.9vw, 14px) !important;
  bottom: clamp(-18px, -1.4vw, -11px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result.winner {
  right: clamp(8px, 0.9vw, 14px) !important;
  bottom: clamp(-18px, -1.4vw, -11px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner {
  right: clamp(13px, 1vw, 20px) !important;
  bottom: clamp(-47px, -3.5vw, -33px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result:not(.winner),
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result.winner {
  left: 50% !important;
  top: clamp(-31px, -2.25vw, -22px) !important;
  transform: translateX(-50%) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  left: 50% !important;
  top: clamp(-58px, -4.2vw, -40px) !important;
  transform: translateX(-50%) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right.wide-cards.score-result .game-seat-result {
  left: clamp(-52px, -4vw, -34px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left.wide-cards.score-result .game-seat-result {
  right: clamp(-52px, -4vw, -34px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

body.game-score-mode[data-screen="game"] .private-action-buttons .action-quit {
  color: #ffffff !important;
  background: linear-gradient(180deg, #245d8e, #0d2947) !important;
  border-color: #6ea7d6 !important;
}

body[data-screen="game"] .action-quit::before { content: "\21AA" !important; }

/* Result screen refinement: keep the live game seats intact and add score as overlays. */
body.game-score-mode[data-screen="game"] .game-seat.score-result {
  overflow: visible !important;
  filter: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat.grid-cards.score-result {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "profile"
    "cards"
    "footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat.wide-cards.score-result {
  grid-template-rows: minmax(0, 1fr) auto !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right.wide-cards.score-result {
  grid-template-columns: minmax(0, 1fr) clamp(118px, 10vw, 162px) !important;
  grid-template-areas:
    "cards profile"
    "cards footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left.wide-cards.score-result {
  grid-template-columns: clamp(118px, 10vw, 162px) minmax(0, 1fr) !important;
  grid-template-areas:
    "profile cards"
    "footer cards" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-right.grid-cards.score-result {
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "cards"
    "profile"
    "footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-winner {
  position: absolute !important;
  z-index: 8 !important;
  grid-area: auto !important;
  pointer-events: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result {
  min-height: clamp(22px, 2vw, 30px) !important;
  min-width: clamp(72px, 6.6vw, 104px) !important;
  padding: 4px 10px !important;
  border: 2px solid rgba(190, 255, 137, 0.92) !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #4ab92f, #1d7c16) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.52),
    0 0 14px rgba(167, 255, 78, 0.2) !important;
  font-size: clamp(0.56rem, 0.78vw, 0.74rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.game-score-mode[data-screen="game"] .game-seat-winner {
  min-width: clamp(72px, 7vw, 110px) !important;
  padding: 4px 11px !important;
  border: 2px solid rgba(33, 95, 24, 0.86) !important;
  border-radius: 6px !important;
  color: #051208 !important;
  background: linear-gradient(180deg, #ffffff, #edf8ec) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.52) !important;
  font-size: clamp(0.56rem, 0.76vw, 0.72rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-result {
  bottom: clamp(-18px, -1.6vw, -12px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result {
  top: clamp(-18px, -1.6vw, -12px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-result {
  right: clamp(8px, 0.9vw, 14px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result {
  left: clamp(8px, 0.9vw, 14px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-winner {
  bottom: clamp(-48px, -3.8vw, -34px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  top: clamp(-48px, -3.8vw, -34px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-winner {
  right: clamp(12px, 1vw, 18px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  left: clamp(12px, 1vw, 18px) !important;
}

body.game-score-mode[data-screen="game"] .score-result-stage {
  width: min(34vw, 430px) !important;
  transform: translate(-4%, 2%) !important;
}

body.game-score-mode[data-screen="game"] .score-result-banner {
  width: min(100%, 400px) !important;
}

body.game-score-mode[data-screen="game"] .score-result-logo {
  width: min(34vw, 390px) !important;
  max-height: min(21vh, 176px) !important;
}

@media (max-width: 1000px) {
  body.game-score-mode[data-screen="game"] .game-seat-result,
  body.game-score-mode[data-screen="game"] .game-seat-winner {
    min-height: clamp(16px, 4vh, 22px) !important;
    min-width: clamp(50px, 12vw, 76px) !important;
    padding: 2px 6px !important;
    font-size: clamp(0.36rem, 1.45vh, 0.5rem) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-stage {
    width: min(34vw, 260px) !important;
    transform: translate(-2%, 1%) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-logo {
    width: min(32vw, 230px) !important;
    max-height: 17vh !important;
  }
}

/* Final in-table round result state. */
body.game-score-mode[data-screen="game"] .table-piles,
body.game-score-mode[data-screen="game"] .game-hint-row {
  display: none !important;
}

body.game-score-mode[data-screen="game"] .table-center-play {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 1.5vw, 24px) !important;
}

body[data-screen="game"] .score-result-stage {
  position: relative;
  z-index: 6;
  display: grid;
  place-items: center;
  gap: clamp(8px, 1vw, 16px);
  width: min(52vw, 620px);
  max-width: 100%;
  pointer-events: none;
}

body[data-screen="game"] .score-result-stage.hidden {
  display: none !important;
}

body[data-screen="game"] .score-result-banner {
  width: min(100%, 520px);
  padding: clamp(7px, 0.8vw, 12px) clamp(18px, 1.8vw, 28px);
  border: 2px solid rgba(43, 18, 0, 0.82);
  border-radius: 8px;
  color: #120800;
  background: linear-gradient(180deg, #ffe98b, #e39f20);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
  font-size: clamp(0.82rem, 1.2vw, 1.18rem);
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

body[data-screen="game"] .score-result-banner.tie {
  background: linear-gradient(180deg, #f9f7d6, #f0c34d);
}

body[data-screen="game"] .score-result-logo {
  width: min(46vw, 560px);
  max-height: min(28vh, 250px);
  object-fit: contain;
  filter:
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 20px rgba(246, 191, 44, 0.22));
}

body[data-screen="game"] .score-result-stage.score-celebrate .score-result-banner,
body[data-screen="game"] .score-result-stage.score-celebrate .score-result-logo {
  animation: koopsScoreResultPop 1100ms cubic-bezier(0.18, 0.92, 0.2, 1.08) both;
}

body.game-score-mode[data-screen="game"] .game-seat.score-result {
  grid-template-areas:
    "profile"
    "cards"
    "result"
    "winner"
    "footer";
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
}

body.game-score-mode[data-screen="game"] .game-seat.wide-cards.score-result {
  grid-template-areas:
    "profile cards"
    "result cards"
    "winner cards"
    "footer cards";
  grid-template-rows: auto auto auto auto !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right.wide-cards.score-result {
  grid-template-areas:
    "cards profile"
    "cards result"
    "cards winner"
    "cards footer";
}

body.game-score-mode[data-screen="game"] .game-seat-result {
  grid-area: result;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: clamp(20px, 2vw, 30px);
  padding: 3px 8px;
  border: 2px solid rgba(19, 88, 22, 0.78);
  border-radius: 6px;
  color: #ffffff;
  background: linear-gradient(180deg, #4ab92f, #208514);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  font-size: clamp(0.56rem, 0.78vw, 0.74rem);
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

body.game-score-mode[data-screen="game"] .game-seat-result strong {
  font-size: 1.08em;
}

body.game-score-mode[data-screen="game"] .game-seat-result.winner {
  background: linear-gradient(180deg, #60d83c, #2c9f1f);
}

body.game-score-mode[data-screen="game"] .game-seat-winner {
  grid-area: winner;
  justify-self: center;
  min-width: clamp(68px, 6.8vw, 104px);
  padding: 4px 10px;
  border: 2px solid rgba(33, 95, 24, 0.82);
  border-radius: 5px;
  color: #03130a;
  background: linear-gradient(180deg, #ffffff, #eaf6e8);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  font-size: clamp(0.56rem, 0.76vw, 0.72rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

body.game-score-mode[data-screen="game"] .game-seat.winner {
  border-color: #a7ff4e !important;
  box-shadow:
    0 0 20px rgba(167, 255, 78, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.game-score-mode[data-screen="game"] .game-seat:not(.winner) {
  filter: saturate(0.92);
}

body.game-score-mode[data-screen="game"] .drawn-card-stage.score-private-summary {
  align-self: end;
  min-height: auto !important;
}

body.game-score-mode[data-screen="game"] .score-private-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: clamp(38px, 3.8vw, 54px);
  border: 2px solid #f6d733;
  border-radius: 9px;
  color: #ffe66d;
  background: linear-gradient(180deg, rgba(0, 35, 25, 0.98), rgba(0, 18, 12, 0.98));
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64);
}

body.game-score-mode[data-screen="game"] .score-private-coin strong {
  font-size: clamp(0.86rem, 1.15vw, 1.1rem);
}

body.game-score-mode[data-screen="game"] .private-action-buttons .action-settings {
  color: #ffe66d !important;
  background: linear-gradient(180deg, #153c2d, #071c14) !important;
  border-color: #f6d733 !important;
}

body.game-score-mode[data-screen="game"] .private-action-buttons .action-reset {
  background: linear-gradient(180deg, #2d5f8c, #103051) !important;
}

body.game-score-mode[data-screen="game"] .private-action-buttons .action-next {
  color: #180b00 !important;
  background: linear-gradient(180deg, #ffe47a, #e39b19) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

body[data-screen="game"] .action-settings::before { content: "\2699" !important; }
body[data-screen="game"] .action-reset::before { content: "\21BB" !important; }
body[data-screen="game"] .action-next::before { content: "\25B6" !important; }

@keyframes koopsScoreResultPop {
  0% {
    opacity: 0;
    transform: scale(0.84) translateY(16px);
  }
  60% {
    opacity: 1;
    transform: scale(1.04) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 1000px) {
  body[data-screen="game"] .score-result-stage {
    width: min(48vw, 360px);
    gap: 6px;
  }

  body[data-screen="game"] .score-result-banner {
    padding: 5px 9px;
    font-size: clamp(0.48rem, 2vh, 0.72rem);
  }

  body[data-screen="game"] .score-result-logo {
    width: min(44vw, 320px);
    max-height: 22vh;
  }

  body.game-score-mode[data-screen="game"] .game-seat-result,
  body.game-score-mode[data-screen="game"] .game-seat-winner {
    font-size: clamp(0.38rem, 1.55vh, 0.54rem);
    padding: 2px 5px;
  }
}

/* Lobby header matches the active game header: logo and room code live together. */
body.home-lobby-mode {
  --game-room-accent: var(--lobby-code-accent, #f6df18);
  --game-room-glow: var(--lobby-code-glow, rgba(246, 223, 24, 0.34));
}

body.home-lobby-mode .hero {
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
  align-items: start !important;
}

body.home-lobby-mode .hero-brand {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: start !important;
  gap: clamp(12px, 1.1vw, 18px) !important;
  min-width: 0 !important;
  transform: translateY(-2px) !important;
}

body.home-lobby-mode .hero-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.home-lobby-mode .hero-emblem {
  width: clamp(112px, 10.8vw, 170px) !important;
  max-height: calc(var(--home-header-row, clamp(104px, 17.5%, 154px)) - 8px) !important;
  filter: drop-shadow(0 13px 22px rgba(0, 0, 0, 0.62)) !important;
}

body.home-lobby-mode .hero-emblem img {
  display: block !important;
  width: 100% !important;
  max-height: calc(var(--home-header-row, clamp(104px, 17.5%, 154px)) - 8px) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

body.home-lobby-mode .hero-game-room {
  appearance: none !important;
  display: grid !important;
  place-items: center !important;
  min-width: clamp(170px, 16vw, 250px) !important;
  min-height: clamp(62px, 6vw, 86px) !important;
  padding: 7px 18px !important;
  border: 3px solid var(--game-room-accent) !important;
  border-radius: 14px !important;
  color: var(--game-room-accent) !important;
  background:
    radial-gradient(circle at 50% 20%, var(--game-room-glow), transparent 5.5rem),
    linear-gradient(180deg, rgba(9, 39, 29, 0.94), rgba(1, 14, 10, 0.96)) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.75),
    0 0 18px var(--game-room-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
  cursor: pointer !important;
}

body.home-lobby-mode .hero-game-room span {
  color: var(--game-room-accent) !important;
  font-size: clamp(0.58rem, 0.78vw, 0.72rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.home-lobby-mode .hero-game-room strong {
  color: var(--game-room-accent) !important;
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  font-weight: 950 !important;
  line-height: 0.94 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 13px var(--game-room-glow) !important;
}

body.home-lobby-mode #lobbyScreen .lobby-room-top {
  display: none !important;
}

@media (max-width: 1000px) {
  body.home-lobby-mode .hero {
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) !important;
  }

  body.home-lobby-mode .hero-emblem {
    width: clamp(86px, 13vw, 126px) !important;
  }

  body.home-lobby-mode .hero-game-room {
    min-width: clamp(128px, 18vw, 174px) !important;
    min-height: clamp(46px, 7vw, 60px) !important;
    padding: 5px 12px !important;
  }

  body.home-lobby-mode .hero-game-room strong {
    font-size: clamp(1.25rem, 3.1vw, 1.9rem) !important;
  }
}

/* The profile entry point lives on the left profile pill only. */
body .account-action-row #guestProfileBtn,
body .account-action-row .profile-menu-btn {
  display: none !important;
}

/* Final header control polish: coin button matches the dark/yellow Game Log style. */
body[data-screen="home"] .account-action-row .coin-menu-btn,
body[data-screen="game"] .account-action-row .coin-menu-btn {
  aspect-ratio: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 0.75vw, 12px) !important;
  width: auto !important;
  min-width: clamp(104px, 8.8vw, 136px) !important;
  max-width: clamp(104px, 8.8vw, 136px) !important;
  height: var(--home-header-button-height, 50px) !important;
  min-height: var(--home-header-button-height, 50px) !important;
  max-height: var(--home-header-button-height, 50px) !important;
  padding: 0 clamp(11px, 1vw, 16px) !important;
  border: 2px solid #f6d733 !important;
  border-radius: 12px !important;
  color: #ffe66d !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 215, 64, 0.12), rgba(255, 215, 64, 0) 46%),
    linear-gradient(180deg, rgba(0, 35, 25, 0.98), rgba(0, 18, 12, 0.98)) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(246, 215, 51, 0.12) !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64) !important;
}

body[data-screen="home"] .account-action-row .coin-menu-btn::before,
body[data-screen="game"] .account-action-row .coin-menu-btn::before {
  display: none !important;
}

body[data-screen="home"] .account-action-row .coin-menu-btn .coin-chip,
body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip {
  display: inline-grid !important;
  place-items: center !important;
  width: calc(var(--home-header-button-height, 50px) * 0.42) !important;
  min-width: calc(var(--home-header-button-height, 50px) * 0.42) !important;
  height: calc(var(--home-header-button-height, 50px) * 0.42) !important;
  margin: 0 !important;
  border: 2px solid rgba(255, 220, 83, 0.58) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffe070, #eaa01f 68%, #875109 100%) !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  color: #3a1c00 !important;
  font-size: calc(var(--home-header-button-height, 50px) * 0.22) !important;
  text-shadow: none !important;
}

body[data-screen="home"] .account-action-row .coin-menu-value,
body[data-screen="game"] .account-action-row .coin-menu-value {
  min-width: 36px !important;
  color: #ffe66d !important;
  font-size: calc(var(--home-header-button-height, 50px) * 0.32) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64) !important;
}

body[data-screen="home"] .account-action-row .coin-menu-btn:hover,
body[data-screen="game"] .account-action-row .coin-menu-btn:hover {
  filter: brightness(1.08);
}

body.is-profile-loading #homeScreen .mode-action-btn,
body.is-profile-loading #homeScreen .mode-card-control,
body.is-profile-loading #joinCode {
  cursor: wait !important;
  filter: saturate(0.72) brightness(0.84);
  opacity: 0.68;
}

body.is-profile-loading #homeScreen .mode-card {
  pointer-events: none;
}

@media (max-width: 1000px) {
  body[data-screen="home"] .account-action-row .coin-menu-btn,
  body[data-screen="game"] .account-action-row .coin-menu-btn {
    min-width: clamp(78px, 16vw, 104px) !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
  }

  body[data-screen="home"] .account-action-row .coin-menu-value,
  body[data-screen="game"] .account-action-row .coin-menu-value {
    min-width: 26px !important;
    font-size: calc(var(--home-header-button-height, 42px) * 0.3) !important;
  }
}

/* Center table console: compact piles beside a timer-topped hint card. */
body[data-screen="game"] .table-center-play {
  inset: var(--game-private-gap) var(--game-table-right-rail) var(--game-private-gap) var(--game-private-gap) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1vw, 16px) !important;
}

body[data-screen="game"] .table-piles {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: center !important;
  gap: clamp(7px, 0.8vw, 12px) !important;
  padding: clamp(5px, 0.5vw, 8px) !important;
  border: 2px solid rgba(226, 255, 231, 0.74) !important;
  border-radius: clamp(6px, 0.7vw, 10px) !important;
  background:
    linear-gradient(180deg, rgba(45, 193, 102, 0.34), rgba(11, 103, 48, 0.26)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.24) !important;
  transform: none !important;
  pointer-events: none !important;
}

body[data-screen="game"] .new-game-table .deck-stack,
body[data-screen="game"] .new-game-table .discard-stack {
  min-width: clamp(52px, 5.1vw, 76px) !important;
  min-height: clamp(76px, 7.2vw, 108px) !important;
}

body[data-screen="game"] .stack-card,
body[data-screen="game"] .discard-stack #newCenterDiscard {
  width: clamp(48px, 4.5vw, 68px) !important;
  height: clamp(66px, 6.5vw, 96px) !important;
}

body[data-screen="game"] .new-game-table .deck-stack > span,
body[data-screen="game"] .new-game-table .discard-stack > span {
  padding: 2px 7px !important;
  border-radius: 5px !important;
  font-size: clamp(0.42rem, 0.58vw, 0.52rem) !important;
  line-height: 1.05 !important;
}

body[data-screen="game"] .new-game-table .deck-stack strong {
  top: -2px !important;
  right: -3px !important;
  min-width: clamp(18px, 1.8vw, 24px) !important;
  min-height: clamp(18px, 1.8vw, 24px) !important;
  font-size: clamp(0.52rem, 0.72vw, 0.64rem) !important;
}

body[data-screen="game"] .game-hint-row {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  width: clamp(150px, 14.5vw, 220px) !important;
  min-width: 0 !important;
  height: clamp(108px, 14.5vh, 154px) !important;
  min-height: 0 !important;
  padding: clamp(24px, 2.2vw, 36px) clamp(11px, 1vw, 15px) clamp(11px, 1vw, 15px) !important;
  border: 2px solid #a7ff4e !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.94) !important;
  box-shadow:
    0 0 0 2px rgba(8, 25, 17, 0.82),
    0 9px 20px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
  pointer-events: none !important;
}

body[data-screen="game"] .game-hint-row p {
  grid-column: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: clamp(0.54rem, 0.74vw, 0.7rem) !important;
  font-weight: 720 !important;
  line-height: 1.22 !important;
  text-align: left !important;
}

body[data-screen="game"] .turn-timer {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(40px, 3.6vw, 54px) !important;
  height: clamp(42px, 4vw, 60px) !important;
  margin: 0 !important;
  border: 2px solid #a7ff4e !important;
  border-radius: 8px !important;
  color: #a7ff4e !important;
  background: #050807 !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.72),
    0 0 14px rgba(167, 255, 78, 0.2) !important;
  font-size: clamp(0.78rem, 1.05vw, 1rem) !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] .table-center-play {
    gap: clamp(5px, 1.4vw, 9px) !important;
    transform: translateX(clamp(-18px, -2.6vw, -8px)) !important;
  }

  body[data-screen="game"] .table-piles {
    gap: 4px !important;
    padding: 4px !important;
  }

  body[data-screen="game"] .game-hint-row {
    width: clamp(92px, 18vw, 132px) !important;
    height: clamp(72px, 18vh, 104px) !important;
    padding: clamp(18px, 4.8vh, 26px) 7px 7px !important;
  }

  body[data-screen="game"] .game-hint-row p {
    font-size: clamp(0.38rem, 1.55vh, 0.54rem) !important;
  }

  body[data-screen="game"] .turn-timer {
    width: clamp(30px, 7.6vh, 40px) !important;
    height: clamp(32px, 8.2vh, 42px) !important;
    font-size: clamp(0.62rem, 2.3vh, 0.82rem) !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body[data-screen="game"] .table-center-play {
    gap: 5px !important;
    transform: none !important;
  }

  body[data-screen="game"] .table-piles {
    gap: 3px !important;
    padding: 3px !important;
  }

  body[data-screen="game"] .new-game-table .deck-stack,
  body[data-screen="game"] .new-game-table .discard-stack {
    min-width: clamp(32px, 9vh, 42px) !important;
    min-height: clamp(46px, 12vh, 58px) !important;
  }

  body[data-screen="game"] .stack-card,
  body[data-screen="game"] .discard-stack #newCenterDiscard {
    width: clamp(29px, 8vh, 38px) !important;
    height: clamp(41px, 10.8vh, 52px) !important;
  }

  body[data-screen="game"] .new-game-table .deck-stack > span,
  body[data-screen="game"] .new-game-table .discard-stack > span {
    padding: 1px 4px !important;
    font-size: clamp(0.3rem, 1.25vh, 0.42rem) !important;
  }

  body[data-screen="game"] .new-game-table .deck-stack strong {
    min-width: 16px !important;
    min-height: 16px !important;
    font-size: 0.42rem !important;
  }

  body[data-screen="game"] .game-hint-row {
    width: clamp(78px, 22vh, 96px) !important;
    height: clamp(58px, 17vh, 76px) !important;
    padding: clamp(16px, 4.2vh, 22px) 6px 6px !important;
  }

  body[data-screen="game"] .game-hint-row p {
    font-size: clamp(0.3rem, 1.25vh, 0.42rem) !important;
    line-height: 1.14 !important;
  }

  body[data-screen="game"] .turn-timer {
    width: clamp(26px, 7vh, 34px) !important;
    height: clamp(28px, 7.4vh, 36px) !important;
    font-size: clamp(0.54rem, 2vh, 0.72rem) !important;
  }
}

/* Last-pass uniform header and coin icon overrides. */
body[data-screen="home"] .home-player-pill,
body[data-screen="game"] .home-player-pill,
body[data-screen="home"] .profile-menu-btn,
body[data-screen="game"] .profile-menu-btn,
body[data-screen="home"] .account-action-row #infoBtn,
body[data-screen="home"] .account-action-row #settingsBtn,
body[data-screen="game"] .account-action-row #infoBtn,
body[data-screen="game"] .account-action-row #settingsBtn {
  border: 2px solid #f6d733 !important;
  border-radius: 12px !important;
  color: #ffe66d !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 215, 64, 0.12), rgba(255, 215, 64, 0) 46%),
    linear-gradient(180deg, rgba(0, 35, 25, 0.98), rgba(0, 18, 12, 0.98)) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(246, 215, 51, 0.12) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.64) !important;
}

body[data-screen="home"] .account-action-row #infoBtn,
body[data-screen="home"] .account-action-row #settingsBtn,
body[data-screen="game"] .account-action-row #infoBtn,
body[data-screen="game"] .account-action-row #settingsBtn,
body[data-screen="home"] .profile-menu-btn,
body[data-screen="game"] .profile-menu-btn {
  width: var(--home-header-button-height, 50px) !important;
  min-width: var(--home-header-button-height, 50px) !important;
  max-width: var(--home-header-button-height, 50px) !important;
  padding: 0 !important;
}

body[data-screen="home"] .account-action-row #infoBtn::before,
body[data-screen="home"] .account-action-row #settingsBtn::before,
body[data-screen="game"] .account-action-row #infoBtn::before,
body[data-screen="game"] .account-action-row #settingsBtn::before {
  border: 0 !important;
  color: #ffe66d !important;
  background: none !important;
  box-shadow: none !important;
}

body[data-screen="home"] .account-action-row #viewLogBtn .view-log-menu-icon,
body[data-screen="game"] .account-action-row #viewLogBtn .view-log-menu-icon {
  width: clamp(18px, 1.8vw, 24px) !important;
  height: clamp(17px, 1.65vw, 22px) !important;
}

body[data-screen="home"] .account-action-row #viewLogBtn .view-log-menu-icon::before,
body[data-screen="game"] .account-action-row #viewLogBtn .view-log-menu-icon::before {
  height: clamp(3px, 0.32vw, 4px) !important;
  box-shadow:
    0 clamp(7px, 0.62vw, 8px) 0 #f6d733,
    0 clamp(14px, 1.24vw, 16px) 0 #f6d733 !important;
}

body[data-screen="game"] {
  --game-seat-gap: clamp(15px, 1.4vw, 24px);
  --game-private-gap: clamp(9px, 0.9vw, 14px);
}

body[data-screen="game"] .private-space-title {
  display: grid !important;
  place-items: center !important;
  align-content: start !important;
  gap: 2px !important;
  min-height: auto !important;
  padding: clamp(5px, 0.55vw, 8px) 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f4fff2 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(0.5rem, 0.62vw, 0.68rem) !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body[data-screen="game"] .private-space-title span {
  display: block !important;
}

.coin-chip,
body[data-screen="home"] .account-action-row .coin-menu-btn .coin-chip,
body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip,
.dialog-panel.coins-dialog .coins-title .coin-chip,
.coin-package .coin-chip,
.profile-window .profile-stat .coin-chip,
.lobby-slot-card .lobby-coin-box .coin-chip,
body.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-coin-box .coin-chip,
body[data-screen="lobby"] .lobby-slot-card .lobby-coin-box .coin-chip,
.game-coin-pill .coin-chip {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: var(--coin-chip-size, 24px) !important;
  min-width: var(--coin-chip-size, 24px) !important;
  height: var(--coin-chip-size, 24px) !important;
  min-height: var(--coin-chip-size, 24px) !important;
  margin-right: 5px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 220, 83, 0.58) !important;
  border-radius: 50% !important;
  color: transparent !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 52% 54%, #ffe070, #eaa01f 68%, #875109 100%) !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

.coin-chip::before,
body[data-screen="home"] .account-action-row .coin-menu-btn .coin-chip::before,
body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip::before,
.dialog-panel.coins-dialog .coins-title .coin-chip::before,
.coin-package .coin-chip::before,
.profile-window .profile-stat .coin-chip::before,
.lobby-slot-card .lobby-coin-box .coin-chip::before,
body.home-lobby-mode #lobbyScreen .lobby-slot-card .lobby-coin-box .coin-chip::before,
body[data-screen="lobby"] .lobby-slot-card .lobby-coin-box .coin-chip::before,
.game-coin-pill .coin-chip::before {
  content: "" !important;
  display: block !important;
  width: 54% !important;
  height: 54% !important;
  border: 2px solid rgba(131, 72, 0, 0.5) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle, #ffd96a, #c97908 78%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

body[data-screen="home"] .account-action-row .coin-menu-btn .coin-chip,
body[data-screen="game"] .account-action-row .coin-menu-btn .coin-chip {
  --coin-chip-size: calc(var(--home-header-button-height, 50px) * 0.42);
  margin-right: 0 !important;
}

@media (max-width: 1000px) {
  body[data-screen="game"] {
    --game-seat-gap: clamp(7px, 1.5vw, 11px);
    --game-private-gap: clamp(6px, 1.1vw, 9px);
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body[data-screen="game"] {
    --game-seat-gap: clamp(6px, 1.6vh, 10px);
    --game-private-gap: clamp(5px, 1.3vh, 8px);
  }
}

/* Final header cleanup: profile is only available from the left profile pill. */
body .account-action-row #guestProfileBtn,
body .account-action-row .profile-menu-btn {
  display: none !important;
}

/* Final lobby comfort pass after moving the room code into the header. */
body.home-lobby-mode #lobbyScreen .lobby-slot-card {
  height: min(100%, clamp(174px, 15.6vw, 242px)) !important;
}

body.is-mobile-device.is-mobile-landscape.home-lobby-mode #lobbyScreen .lobby-slot-card {
  height: min(100%, clamp(100px, 25vh, 154px)) !important;
}

/* Final home game-type info pill border pass. */
body[data-screen="home"] .mode-card-control.mode-info-pill {
  border-color: rgba(0, 0, 0, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 18px rgba(var(--mode-rgb), 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Final Private Thinking Room label readability pass. */
body[data-screen="game"] .private-space-title {
  font-size: clamp(0.74rem, 0.9vw, 1rem) !important;
  line-height: 1.06 !important;
}

/* True final result-stage sizing: keep celebration clear of four player seats. */
body.game-score-mode[data-screen="game"] .score-result-stage {
  width: min(42vw, 500px) !important;
  gap: clamp(6px, 0.75vw, 12px) !important;
  transform: translate(-5%, 3%) !important;
}

body.game-score-mode[data-screen="game"] .score-result-banner {
  width: min(100%, 430px) !important;
  padding: clamp(6px, 0.68vw, 10px) clamp(13px, 1.35vw, 22px) !important;
  font-size: clamp(0.7rem, 1vw, 1rem) !important;
}

body.game-score-mode[data-screen="game"] .score-result-logo {
  width: min(38vw, 440px) !important;
  max-height: min(22vh, 190px) !important;
}

@media (max-width: 1000px) {
  body.game-score-mode[data-screen="game"] .score-result-stage {
    width: min(38vw, 300px) !important;
    transform: translate(-4%, 2%) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-logo {
    width: min(35vw, 270px) !important;
    max-height: 18vh !important;
  }
}

/* Final result screen pass: keep live game seats intact and layer TOTAL/WINNER only. */
body.game-score-mode[data-screen="game"] .game-seat.score-result {
  overflow: visible !important;
  filter: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat.grid-cards.score-result {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "profile"
    "cards"
    "footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat.wide-cards.score-result {
  grid-template-rows: minmax(0, 1fr) auto !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right.wide-cards.score-result {
  grid-template-columns: minmax(0, 1fr) clamp(118px, 10vw, 162px) !important;
  grid-template-areas:
    "cards profile"
    "cards footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left.wide-cards.score-result {
  grid-template-columns: clamp(118px, 10vw, 162px) minmax(0, 1fr) !important;
  grid-template-areas:
    "profile cards"
    "footer cards" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-right.grid-cards.score-result {
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "cards"
    "profile"
    "footer" !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-winner {
  position: absolute !important;
  z-index: 8 !important;
  grid-area: auto !important;
  pointer-events: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result {
  min-height: clamp(22px, 2vw, 30px) !important;
  min-width: clamp(72px, 6.6vw, 104px) !important;
  padding: 4px 10px !important;
  border: 2px solid rgba(190, 255, 137, 0.92) !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #4ab92f, #1d7c16) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.52),
    0 0 14px rgba(167, 255, 78, 0.2) !important;
  font-size: clamp(0.56rem, 0.78vw, 0.74rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.game-score-mode[data-screen="game"] .game-seat-winner {
  min-width: clamp(72px, 7vw, 110px) !important;
  padding: 4px 11px !important;
  border: 2px solid rgba(33, 95, 24, 0.86) !important;
  border-radius: 6px !important;
  color: #051208 !important;
  background: linear-gradient(180deg, #ffffff, #edf8ec) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.52) !important;
  font-size: clamp(0.56rem, 0.76vw, 0.72rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-result {
  bottom: clamp(-18px, -1.6vw, -12px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result {
  top: clamp(-18px, -1.6vw, -12px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-result {
  right: clamp(8px, 0.9vw, 14px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-result,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-result {
  left: clamp(8px, 0.9vw, 14px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-winner {
  bottom: clamp(-48px, -3.8vw, -34px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  top: clamp(-48px, -3.8vw, -34px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-left .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-left .game-seat-winner {
  right: clamp(12px, 1vw, 18px) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-top-right .game-seat-winner,
body.game-score-mode[data-screen="game"] .game-seat-bottom-right .game-seat-winner {
  left: clamp(12px, 1vw, 18px) !important;
}

body.game-score-mode[data-screen="game"] .score-result-stage {
  width: min(34vw, 430px) !important;
  transform: translate(-4%, 2%) !important;
}

body.game-score-mode[data-screen="game"] .score-result-banner {
  width: min(100%, 400px) !important;
}

body.game-score-mode[data-screen="game"] .score-result-logo {
  width: min(34vw, 390px) !important;
  max-height: min(21vh, 176px) !important;
}

@media (max-width: 1000px) {
  body.game-score-mode[data-screen="game"] .game-seat-result,
  body.game-score-mode[data-screen="game"] .game-seat-winner {
    min-height: clamp(16px, 4vh, 22px) !important;
    min-width: clamp(50px, 12vw, 76px) !important;
    padding: 2px 6px !important;
    font-size: clamp(0.36rem, 1.45vh, 0.5rem) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-stage {
    width: min(34vw, 260px) !important;
    transform: translate(-2%, 1%) !important;
  }

  body.game-score-mode[data-screen="game"] .score-result-logo {
    width: min(32vw, 230px) !important;
    max-height: 17vh !important;
  }
}

/* Absolute final score-result override. */
body.game-score-mode[data-screen="game"] .game-seat.score-result {
  border-color: rgba(207, 255, 221, 0.76) !important;
  background:
    radial-gradient(circle at 55% 26%, rgba(86, 210, 124, 0.2), transparent 54%),
    linear-gradient(180deg, rgba(5, 71, 32, 0.95), rgba(0, 28, 16, 0.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 9px 18px rgba(0, 0, 0, 0.38) !important;
}

body.game-score-mode[data-screen="game"] .game-seat.score-result.winner {
  border-color: #9fff28 !important;
  box-shadow:
    0 0 0 2px rgba(148, 255, 40, 0.42),
    0 0 24px rgba(62, 255, 95, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.44) !important;
}

body.game-score-mode[data-screen="game"] .game-seat-winner {
  display: none !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result {
  left: clamp(7px, 0.7vw, 11px) !important;
  right: clamp(7px, 0.7vw, 11px) !important;
  top: clamp(-18px, -1.45vw, -12px) !important;
  bottom: auto !important;
  width: auto !important;
  height: clamp(22px, 1.9vw, 30px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 3px 11px !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #4dbc35, #23881c) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.52),
    0 0 14px rgba(167, 255, 78, 0.2) !important;
  font-size: clamp(0.56rem, 0.78vw, 0.74rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transform: none !important;
  white-space: nowrap !important;
}

body.game-score-mode[data-screen="game"] .game-seat-result.winner {
  border-color: #ffffff !important;
  background: linear-gradient(180deg, #51bf35, #268a1b) !important;
}

body.game-score-mode[data-screen="game"] .private-action-buttons .action-quit {
  color: #ffffff !important;
  background: linear-gradient(180deg, #245d8e, #0d2947) !important;
  border-color: #6ea7d6 !important;
}

body[data-screen="game"] .action-quit::before { content: "\21AA" !important; }