.lobby-screen {
  position: relative;
  width: 100%;
  min-height: var(--viewport-h, 100vh);
  overflow: hidden;
  color: #fff;
  font-family: "Manrope", system-ui, sans-serif;
  background-color: #2a0305;
}

.lobby-screen button {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

.lobby-screen img {
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.lobby-logo {
  position: absolute;
  top: clamp(10px, 3vh, 34px);
  left: clamp(16px, 4vw, 92px);
  z-index: 4;
  width: clamp(104px, 15vw, 246px);
}

.lobby-character {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.lobby-player-ribbon {
  position: absolute;
  top: clamp(8px, 2.4vh, 30px);
  right: clamp(12px, 3.6vw, 82px);
  z-index: 8;
  width: clamp(174px, 22vw, 350px);
  min-height: clamp(48px, 8vh, 82px);
  display: grid;
  grid-template-columns: 1fr clamp(42px, 5.6vw, 74px);
  gap: clamp(5px, 1vw, 12px);
  align-items: center;
  padding: 5px;
  padding-left: clamp(18px, 3.2vw, 46px);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(105deg, #d71721 0 35%, #5a080b 36% 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

.lobby-player-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}

.lobby-player-copy strong,
.lobby-player-copy span,
.lobby-player-copy em {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-copy strong {
  font-size: clamp(0.72rem, 1.25vw, 1.1rem);
  font-weight: 900;
}

.lobby-player-copy span {
  padding: 1px 6px;
  border-radius: 6px;
  color: #ffe8a4;
  background: rgba(0, 0, 0, 0.32);
  font-size: clamp(0.48rem, 0.82vw, 0.74rem);
  font-weight: 900;
}

.lobby-player-copy em {
  color: #ffe053;
  font-size: clamp(0.58rem, 1vw, 0.9rem);
  font-style: italic;
  font-weight: 900;
}

.lobby-player-avatar {
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(255, 228, 136, 0.94);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.26);
}

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

.lobby-back-btn {
  position: absolute;
  left: clamp(18px, 4vw, 86px);
  bottom: clamp(12px, 3.2vh, 48px);
  z-index: 10;
  width: clamp(98px, 13vw, 220px);
  transition: transform 0.16s ease, filter 0.16s ease;
}

.lobby-back-btn:hover {
  transform: translateX(-3px);
  filter: brightness(1.1);
}

.lobby-gold-btn {
  min-height: clamp(30px, 5vh, 42px);
  padding: 0 22px;
  border: 1px solid #f8d36a !important;
  border-radius: 6px;
  color: #2b1300 !important;
  background: linear-gradient(180deg, #fff5a8, #d8941a) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 7px 16px rgba(0, 0, 0, 0.32);
  font-size: clamp(0.74rem, 1.2vw, 0.95rem);
  font-weight: 900;
}

.login-screen {
  background: url("../images/lobby/login-bg.webp") center / cover no-repeat;
}

.login-screen .lobby-logo {
  top: clamp(18px, 6vh, 70px);
  left: clamp(64px, 11vw, 200px);
}

.login-character {
  left: clamp(160px, 24vw, 520px);
  bottom: clamp(0px, 1vh, 18px);
  width: clamp(210px, 30vw, 560px);
}

.login-panel {
  position: absolute;
  top: clamp(82px, 19vh, 220px);
  right: clamp(120px, 19vw, 430px);
  z-index: 5;
  width: clamp(210px, 24vw, 360px);
  display: grid;
  gap: clamp(8px, 1.5vh, 14px);
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: 7px;
  background: rgba(43, 43, 43, 0.92);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.42);
}

.login-panel h1 {
  margin: 0 0 2px;
  color: #e9e9e9;
  font-size: clamp(0.78rem, 1.35vw, 1.1rem);
  font-weight: 900;
  text-align: center;
}

.login-field {
  min-height: clamp(30px, 5.2vh, 44px);
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 4px;
  background: #f5f5f5;
}

.login-field img {
  width: 18px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0.28);
}

.login-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #1d1d1d;
  background: transparent;
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  font-weight: 800;
}

.login-link {
  color: #e8e8e8 !important;
  font-size: clamp(0.62rem, 0.92vw, 0.78rem) !important;
  font-style: italic !important;
}

.login-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: clamp(0.68rem, 1.05vw, 0.88rem);
  font-style: italic;
  font-weight: 900;
}

.login-contact img {
  width: clamp(26px, 3.4vw, 42px);
  height: clamp(26px, 3.4vw, 42px);
}

.login-chip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.chip-one { left: 31%; top: 11%; width: clamp(90px, 14vw, 250px); }
.chip-two { left: 42%; bottom: 6%; width: clamp(130px, 20vw, 410px); opacity: 0.9; }
.chip-three { right: 27%; bottom: 1%; width: clamp(90px, 15vw, 250px); }
.chip-four { right: 14%; top: 19%; width: clamp(70px, 10vw, 160px); }

.home-screen {
  background: url("../images/lobby/main-bg.webp") center / cover no-repeat;
}

.home-bg-apng,
.home-joker-apng {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.home-bg-apng {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-joker-apng {
  right: 4.3%;
  top: 37%;
  z-index: 1;
  width: 17.8%;
  opacity: 0.42;
}

.home-character {
  left: clamp(92px, 16vw, 370px);
  bottom: 0;
  width: clamp(230px, 29vw, 540px);
}

.home-announcement {
  position: absolute;
  top: clamp(112px, 19vh, 230px);
  left: clamp(520px, 48vw, 1080px);
  z-index: 3;
  width: clamp(280px, 26vw, 470px);
  display: grid;
  gap: clamp(10px, 2vh, 20px);
}

.home-notice-card {
  min-height: clamp(52px, 8vh, 92px);
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 18px;
  border-radius: 7px;
  background: rgba(45, 45, 45, 0.84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 24px rgba(0, 0, 0, 0.28);
}

.home-notice-card strong {
  color: #ffde62;
  font-size: clamp(0.62rem, 0.95vw, 0.82rem);
  font-weight: 900;
}

.home-notice-card span {
  overflow-wrap: anywhere;
  font-size: clamp(0.72rem, 1.12vw, 0.98rem);
  font-weight: 900;
  line-height: 1.25;
}

.home-contact-icons {
  display: flex;
  gap: 10px;
}

.home-contact-icons img {
  width: clamp(34px, 4.5vw, 58px);
}

.home-menu-grid {
  position: absolute;
  left: clamp(18px, 2.6vw, 54px);
  right: clamp(18px, 2.6vw, 54px);
  bottom: clamp(12px, 2.2vh, 26px);
  z-index: 7;
  display: grid;
  grid-template-columns: 1.26fr repeat(5, 1fr) 0.7fr 0.9fr 0.9fr 0.9fr;
  align-items: end;
  gap: clamp(7px, 1.1vw, 18px);
}

.home-menu-item {
  min-width: 0;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.home-menu-item:hover {
  transform: translateY(-4px);
  filter: brightness(1.08);
}

.home-menu-item img {
  width: 100%;
  display: block;
}

.game-select-screen {
  background: url("../images/lobby/game-select-bg.webp") center / cover no-repeat;
}

.game-select-character {
  left: clamp(86px, 15vw, 330px);
  bottom: 0;
  width: clamp(225px, 29vw, 540px);
}

.game-select-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: min(62vw, 1200px);
  background: url("../images/lobby/game-select-panel.webp") left center / cover no-repeat;
}

.game-select-tile {
  position: absolute;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.game-select-tile:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.game-select-tile img {
  display: block;
}

.tile-poker { left: 18%; top: 36%; width: 28%; }
.tile-skm { left: 47%; top: 17%; width: 24%; }
.tile-twentyone { left: 20%; top: 15%; width: 18%; }
.tile-buggyi { left: 60%; top: 52%; width: 18%; }
.tile-slot { left: 41%; top: 56%; width: 17%; }

.poker-menu-screen {
  background: url("../images/lobby/poker-bg.webp") center / cover no-repeat;
}

.poker-character {
  left: clamp(88px, 15vw, 340px);
  bottom: 0;
  width: clamp(230px, 29vw, 540px);
}

.poker-menu-panel {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 3;
  width: min(60vw, 1160px);
  background: url("../images/lobby/poker-panel.webp") left center / cover no-repeat;
}

.poker-choice {
  position: absolute;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.poker-choice:hover {
  transform: scale(1.045);
  filter: brightness(1.12);
}

.poker-play-now { left: 30%; top: 35%; width: 31%; }
.poker-room { left: 60%; top: 13%; width: 22%; }
.poker-vip { left: 60%; bottom: 11%; width: 22%; }

.slot-screen {
  background: url("../images/lobby/game-select-bg.webp") center / cover no-repeat;
}

.slot-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(104, 0, 7, 0.68) 0 24%, rgba(22, 22, 24, 0.36) 24% 72%, rgba(99, 78, 26, 0.48) 72% 100%);
  pointer-events: none;
}

.slot-shell {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 4;
  width: min(82vw, 1380px);
  height: min(76vh, 780px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.6vh, 18px);
  padding: clamp(14px, 2vw, 28px);
  border: 1px solid rgba(255, 218, 113, 0.56);
  border-radius: 8px;
  background: rgba(18, 18, 21, 0.9);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%);
}

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

.slot-header h1,
.slot-provider-title h2 {
  margin: 0;
  color: #fff6c9;
  font-size: clamp(1.25rem, 2.6vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
}

.slot-kicker {
  display: inline-block;
  margin-bottom: 4px;
  color: #ff3c3c;
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 900;
  letter-spacing: 0;
}

.slot-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8d8d8;
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 800;
}

.slot-primary-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #ff3c3c, #a8040a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 18px rgba(0, 0, 0, 0.24);
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  font-weight: 900;
}

.slot-provider-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: clamp(10px, 1.5vw, 18px);
  overflow: auto;
  padding: 2px 4px 8px;
}

.slot-provider-card,
.slot-game-card {
  min-width: 0;
  display: grid;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #282a31, #121318);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 96, 0.22), 0 12px 24px rgba(0, 0, 0, 0.26);
  transition: transform 0.16s ease, filter 0.16s ease;
}

.slot-provider-card:hover,
.slot-game-card:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.slot-provider-card {
  grid-template-rows: minmax(96px, 1fr) auto auto;
  gap: 8px;
  padding: 10px;
  text-align: left;
}

.slot-provider-image,
.slot-game-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #17191f;
}

.slot-provider-image {
  aspect-ratio: 1.35 / 1;
  padding: clamp(10px, 1.5vw, 20px);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.72), rgba(196, 200, 207, 0.62) 48%, rgba(126, 132, 142, 0.56) 100%),
    linear-gradient(180deg, #d6d9de, #858b94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 -28px 48px rgba(0, 0, 0, 0.18);
}

.slot-provider-image img,
.slot-game-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot-provider-image img {
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34));
}

.slot-provider-card strong {
  color: #fff;
  font-size: clamp(0.82rem, 1.15vw, 1.15rem);
  font-weight: 900;
  line-height: 1.05;
}

.slot-provider-card span:last-child,
.slot-provider-title span,
.slot-game-copy em,
.slot-more-count,
.slot-launch-status {
  color: #d4c38a;
  font-size: clamp(0.66rem, 0.86vw, 0.9rem);
  font-style: normal;
  font-weight: 800;
}

.slot-game-view {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
}

.slot-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 260px);
  gap: 10px;
  align-items: center;
}

.slot-provider-tabs {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.slot-provider-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  color: #ececec;
  background: rgba(255, 255, 255, 0.13);
  font-size: clamp(0.65rem, 0.86vw, 0.82rem);
  font-weight: 900;
}

.slot-provider-tabs button.active {
  color: #fff6c9;
  background: linear-gradient(180deg, #e51e28, #8f080d);
}

.slot-search input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 229, 148, 0.42);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font: inherit;
  font-weight: 800;
}

.slot-provider-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.slot-provider-title h2 {
  font-size: clamp(1.05rem, 1.8vw, 2rem);
}

.slot-launch-status,
.slot-more-count {
  margin: 0;
}

.slot-game-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(108px, 1fr));
  grid-auto-rows: minmax(246px, max-content);
  align-content: start;
  gap: clamp(9px, 1.2vw, 14px);
  overflow: auto;
  padding: 2px 4px 8px;
}

.slot-game-card {
  position: relative;
  grid-template-rows: auto minmax(34px, auto) auto;
  text-align: left;
}

.slot-game-image {
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

.slot-game-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px 5px;
}

.slot-game-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-game-copy strong {
  color: #f7f7f7;
  font-size: clamp(0.68rem, 0.9vw, 0.92rem);
  font-weight: 900;
}

.slot-play-pill {
  margin: 0 8px 8px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #ffb92f, #b06e00);
  font-size: clamp(0.64rem, 0.82vw, 0.8rem);
  font-weight: 900;
}

.slot-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 12px;
  color: #fff6c9;
  font-weight: 900;
  text-align: center;
}

.vip-room-screen {
  background: url("../images/lobby/vip-bg.webp") center / cover no-repeat;
}

.vip-room-screen .lobby-logo {
  filter: brightness(1.3);
}

.vip-icon {
  position: absolute;
  top: clamp(42px, 8vh, 90px);
  left: 50%;
  z-index: 4;
  width: clamp(82px, 10vw, 150px);
  transform: translateX(-50%);
}

.vip-entry-grid {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 4;
  width: min(62vw, 980px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 90px);
  transform: translate(-50%, -50%);
}

.vip-entry-card {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.8vh, 16px);
}

.vip-entry-art {
  width: min(70%, 300px);
  max-height: 34vh;
  object-fit: contain;
}

.vip-entry-card h1,
.vip-active-room h1 {
  margin: 0;
  color: #ffd35f;
  font-size: clamp(1.2rem, 2.8vw, 2.5rem);
  font-weight: 900;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.48);
}

.vip-image-btn,
.vip-join-row button {
  width: clamp(96px, 10vw, 165px);
}

.vip-join-row {
  width: min(100%, 330px);
  display: grid;
  gap: 8px;
}

.vip-join-row input {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 231, 147, 0.7);
  border-radius: 4px;
  color: #111;
  background: rgba(255, 255, 255, 0.94);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.vip-levels {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3.2vh, 42px);
  z-index: 3;
  display: flex;
  gap: clamp(8px, 1.5vw, 20px);
  transform: translateX(-50%);
}

.vip-levels img {
  width: clamp(70px, 8vw, 122px);
}

.vip-active-room {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 4;
  width: min(560px, 56vw);
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 8px;
  background: rgba(24, 16, 7, 0.78);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
  transform: translate(-50%, -50%);
}

.cash-center-screen,
.promotion-screen,
.history-screen,
.settings-screen {
  background: url("../images/lobby/cash-bg.webp") center / cover no-repeat;
}

.promotion-screen {
  background-image: url("../images/lobby/main-bg.webp");
}

.history-screen,
.settings-screen {
  background-image: url("../images/lobby/main-bg.webp");
}

.history-screen::before,
.settings-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: none;
}

.cash-shell,
.history-panel,
.settings-modal,
.promotion-shell {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 3;
  width: min(76vw, 1220px);
  transform: translate(-50%, -50%);
}

.cash-shell {
  min-height: min(68vh, 650px);
  display: grid;
  grid-template-columns: minmax(130px, 220px) 1fr;
  grid-template-rows: auto 1fr;
  gap: 10px 22px;
  padding: clamp(18px, 2.5vw, 34px);
  border-radius: 8px;
  background: rgba(238, 238, 238, 0.92);
  color: #5a1111;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.cash-shell h1 {
  grid-column: 1 / -1;
  margin: 0;
  color: #b4141b;
  font-size: clamp(1.2rem, 2.6vw, 2.8rem);
  font-weight: 900;
  text-align: center;
}

.cash-tabs {
  display: grid;
  align-content: start;
  gap: 8px;
}

.cash-tabs button {
  min-height: 44px;
  border-radius: 5px;
  color: #f3f3f3;
  background: linear-gradient(180deg, #8e8e8e, #555);
  font-size: clamp(0.68rem, 1vw, 0.92rem);
  font-weight: 900;
}

.cash-tabs button.active {
  color: #c51622;
  background: #fff;
}

.cash-content {
  min-width: 0;
  padding: clamp(14px, 2vw, 26px);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.96);
}

.cash-form {
  display: grid;
  gap: 12px;
}

.cash-form label {
  display: grid;
  grid-template-columns: minmax(130px, 0.38fr) 1fr;
  align-items: center;
  gap: 10px;
  color: #d72632;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  font-weight: 900;
}

.cash-form input,
.cash-form select {
  min-width: 0;
  min-height: 34px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  padding: 0 10px;
  color: #333;
  background: #ececec;
  font-weight: 800;
}

.cash-submit {
  justify-self: center;
  min-width: 110px;
  min-height: 34px;
  border-radius: 999px !important;
  color: #4a2500 !important;
  background: linear-gradient(180deg, #fff2a0, #d39424) !important;
  font-weight: 900 !important;
}

.cash-history-table,
.history-panel table {
  width: 100%;
  border-collapse: collapse;
  color: #202020;
  font-size: clamp(0.64rem, 1vw, 0.9rem);
  font-weight: 800;
}

.cash-history-table th,
.cash-history-table td,
.history-panel th,
.history-panel td {
  padding: 7px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}

.cash-history-table th,
.history-panel th {
  color: #fff;
  background: #145d7f;
}

.promotion-shell {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: 18px;
}

.promotion-tabs {
  display: grid;
  align-content: start;
  gap: 10px;
}

.promotion-tabs button {
  min-height: 54px;
  border: 1px solid rgba(255, 232, 150, 0.6);
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #a90f16, #4b0608);
  font-size: clamp(0.62rem, 1vw, 0.9rem);
  font-weight: 900;
  line-height: 1.15;
}

.promotion-tabs button.active {
  color: #fff6c5;
  background: linear-gradient(180deg, #df1b25, #72090d);
}

.promotion-card {
  overflow: hidden;
  border: 2px solid rgba(255, 232, 150, 0.58);
  border-radius: 8px;
  background: #68070c;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}

.promotion-card img {
  width: 100%;
  height: min(56vh, 520px);
  display: block;
  object-fit: cover;
  object-position: center;
}

.history-panel,
.settings-modal {
  padding: clamp(18px, 2.6vw, 36px);
  border-radius: 8px;
  background: rgba(245, 245, 245, 0.93);
  color: #202020;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
}

.history-panel h1 {
  margin: 0 0 12px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.history-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.history-actions button {
  min-width: 88px;
  min-height: 30px;
  border-radius: 999px;
  color: #ffe7a0;
  background: linear-gradient(180deg, #444, #111);
  font-size: 0.8rem;
  font-weight: 900;
}

.settings-modal {
  width: min(62vw, 890px);
  min-height: min(55vh, 500px);
}

.settings-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: clamp(36px, 4.4vw, 58px);
}

.settings-tabs {
  position: absolute;
  left: 50%;
  top: -42px;
  width: min(70%, 540px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  transform: translateX(-50%);
}

.settings-tabs button {
  min-height: 44px;
  border-radius: 999px;
  color: #eee;
  background: linear-gradient(180deg, #7b7b7b, #2d2d2d);
  font-weight: 900;
}

.settings-tabs button.active {
  color: #fff;
  background: linear-gradient(180deg, #f11d28, #9f0911);
}

.setting-list {
  display: grid;
  gap: clamp(10px, 2vh, 18px);
  padding: clamp(8px, 2vw, 22px) clamp(18px, 5vw, 90px);
}

.setting-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  color: #333;
  font-size: clamp(0.88rem, 1.3vw, 1.12rem);
  font-weight: 900;
}

.setting-row > img:first-child {
  width: 34px;
  justify-self: center;
}

.setting-toggle {
  width: clamp(74px, 9vw, 116px);
}

.language-row button {
  min-width: 104px;
  min-height: 30px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #ef1b27, #9e0911);
  font-size: 0.72rem;
  font-weight: 900;
}

.logout-button,
.user-detail-form button,
.user-avatar-card button {
  justify-self: center;
  min-width: 140px;
  min-height: 34px;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #f8b23b, #a5570b) !important;
  font-weight: 900 !important;
}

.user-info-panel {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) 1fr;
  gap: clamp(16px, 3vw, 36px);
  align-items: start;
}

.user-avatar-card {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.user-avatar-card img {
  width: clamp(72px, 10vw, 130px);
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}

.user-detail-form {
  display: grid;
  gap: 9px;
}

.user-detail-form p,
.user-detail-form label {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) 1fr;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #333;
  font-weight: 900;
}

.user-detail-form input {
  min-width: 0;
  min-height: 30px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  padding: 0 8px;
  background: #fff;
}

@media (max-width: 980px) and (orientation: landscape) {
  .lobby-logo {
    top: 9px;
    left: 18px;
    width: 86px;
  }

  .lobby-player-ribbon {
    top: 7px;
    right: 10px;
    width: 168px;
    min-height: 44px;
    grid-template-columns: 1fr 38px;
  }

  .lobby-player-copy strong { font-size: 0.68rem; }
  .lobby-player-copy span { font-size: 0.46rem; }
  .lobby-player-copy em { font-size: 0.56rem; }

  .lobby-back-btn {
    left: 14px;
    bottom: 8px;
    width: 96px;
  }

  .login-character,
  .home-character,
  .game-select-character,
  .poker-character {
    width: 230px;
  }

  .login-character {
    left: 138px;
  }

  .login-panel {
    top: 72px;
    right: 86px;
    width: 210px;
    gap: 7px;
    padding: 12px;
  }

  .login-field {
    min-height: 28px;
  }

  .home-announcement {
    top: 82px;
    left: 395px;
    width: 250px;
    gap: 8px;
  }

  .home-notice-card {
    min-height: 44px;
    padding: 6px 12px;
  }

  .home-notice-card span {
    font-size: 0.62rem;
  }

  .home-menu-grid {
    left: 10px;
    right: 10px;
    bottom: 8px;
    gap: 5px;
  }

  .game-select-panel,
  .poker-menu-panel {
    width: 62vw;
  }

  .slot-shell {
    top: 50%;
    width: calc(100vw - 42px);
    height: calc(var(--viewport-h, 100vh) - 88px);
    padding: 10px;
  }

  .slot-header-actions {
    display: none;
  }

  .slot-provider-grid {
    grid-template-columns: repeat(5, minmax(92px, 1fr));
  }

  .slot-game-grid {
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    grid-auto-rows: minmax(208px, max-content);
    gap: 10px;
  }

  .slot-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 230px);
  }

  .slot-provider-tabs button {
    min-height: 38px;
    padding: 0 14px;
  }

  .slot-game-copy strong {
    font-size: 0.82rem;
  }

  .slot-play-pill {
    min-height: 34px;
    font-size: 0.78rem;
  }

  .vip-entry-grid {
    width: 68vw;
    gap: 22px;
  }

  .vip-entry-card h1,
  .vip-active-room h1 {
    font-size: 1rem;
  }

  .vip-levels {
    display: none;
  }

  .cash-shell,
  .history-panel,
  .settings-modal,
  .promotion-shell {
    width: 82vw;
  }

  .cash-shell {
    min-height: 66vh;
    grid-template-columns: 130px 1fr;
    padding: 14px;
  }

  .settings-modal {
    width: 72vw;
    min-height: 58vh;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  body:not(.force-landscape-ui) .lobby-screen {
    min-height: var(--viewport-h, 100vh);
    overflow-y: auto;
  }

  body:not(.force-landscape-ui) .login-screen,
  body:not(.force-landscape-ui) .home-screen,
  body:not(.force-landscape-ui) .game-select-screen,
  body:not(.force-landscape-ui) .poker-menu-screen,
  body:not(.force-landscape-ui) .slot-screen,
  body:not(.force-landscape-ui) .vip-room-screen,
  body:not(.force-landscape-ui) .cash-center-screen,
  body:not(.force-landscape-ui) .promotion-screen,
  body:not(.force-landscape-ui) .history-screen,
  body:not(.force-landscape-ui) .settings-screen {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 14px 14px 84px;
  }

  body:not(.force-landscape-ui) .lobby-logo,
  body:not(.force-landscape-ui) .lobby-player-ribbon,
  body:not(.force-landscape-ui) .lobby-back-btn,
  body:not(.force-landscape-ui) .login-panel,
  body:not(.force-landscape-ui) .home-announcement,
  body:not(.force-landscape-ui) .home-menu-grid,
  body:not(.force-landscape-ui) .game-select-panel,
  body:not(.force-landscape-ui) .poker-menu-panel,
  body:not(.force-landscape-ui) .slot-shell,
  body:not(.force-landscape-ui) .vip-entry-grid,
  body:not(.force-landscape-ui) .cash-shell,
  body:not(.force-landscape-ui) .history-panel,
  body:not(.force-landscape-ui) .settings-modal,
  body:not(.force-landscape-ui) .promotion-shell {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }

  body:not(.force-landscape-ui) .lobby-logo {
    width: 118px;
  }

  body:not(.force-landscape-ui) .lobby-character,
  body:not(.force-landscape-ui) .login-chip,
  body:not(.force-landscape-ui) .vip-icon {
    display: none;
  }

  body:not(.force-landscape-ui) .lobby-player-ribbon {
    justify-self: end;
    width: min(100%, 250px);
  }

  body:not(.force-landscape-ui) .home-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.force-landscape-ui) .game-select-panel,
  body:not(.force-landscape-ui) .poker-menu-panel {
    min-height: 360px;
    background-position: center;
  }

  body:not(.force-landscape-ui) .slot-shell {
    height: auto;
    min-height: 560px;
  }

  body:not(.force-landscape-ui) .slot-provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body:not(.force-landscape-ui) .slot-toolbar {
    grid-template-columns: 1fr;
  }

  body:not(.force-landscape-ui) .slot-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(220px, max-content);
    overflow: visible;
  }

  body:not(.force-landscape-ui) .vip-entry-grid,
  body:not(.force-landscape-ui) .promotion-shell,
  body:not(.force-landscape-ui) .user-info-panel,
  body:not(.force-landscape-ui) .cash-shell {
    grid-template-columns: 1fr;
  }

  body:not(.force-landscape-ui) .cash-form label,
  body:not(.force-landscape-ui) .user-detail-form p,
  body:not(.force-landscape-ui) .user-detail-form label {
    grid-template-columns: 1fr;
  }

  body:not(.force-landscape-ui) .settings-tabs {
    position: relative;
    top: auto;
    width: 100%;
    transform: none;
    margin-bottom: 10px;
  }
}

/* Component lobby refinements: sample screenshots are references only. */
.asset-button {
  display: block;
  touch-action: manipulation;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.asset-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.asset-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.image-text-button {
  position: relative;
  display: grid;
  place-items: center;
}

.image-text-button img,
.image-text-button span {
  grid-area: 1 / 1;
}

.image-text-button span {
  z-index: 1;
  max-width: 80%;
  color: currentColor;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.login-submit-btn {
  width: min(58%, 250px);
  justify-self: center;
}

.login-contact {
  position: absolute;
  left: 61%;
  top: 73%;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(2, clamp(48px, 5vw, 88px));
  gap: clamp(14px, 2.8vw, 46px);
  justify-content: center;
  text-align: center;
}

.login-contact > span {
  grid-column: 1 / -1;
  color: #111;
  font-size: clamp(1.2rem, 2.3vw, 2.3rem);
  font-style: italic;
  text-decoration: underline;
}

.login-social-btn {
  width: 100%;
  aspect-ratio: 1;
}

.home-notice {
  position: relative;
  display: block;
  min-height: clamp(78px, 14vh, 150px);
  padding-top: clamp(24px, 4.2vh, 52px);
  text-align: left;
}

.home-notice-title {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: min(38%, 230px);
}

.home-notice-card {
  margin-left: 0;
  padding-left: min(19%, 118px);
}

.home-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
  white-space: nowrap;
}

.home-contact-line img {
  width: clamp(24px, 3vw, 44px);
}

.vip-entry-art-btn {
  width: min(100%, 330px);
}

.vip-entry-art-btn img {
  max-height: min(58vh, 520px);
}

.vip-join-panel {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 4;
  width: min(48vw, 850px);
  display: grid;
  gap: clamp(12px, 2vh, 24px);
  padding: clamp(26px, 4vw, 60px) clamp(36px, 5vw, 70px);
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.84);
  transform: translate(-50%, -50%);
}

.vip-join-panel h1 {
  margin: 0;
  color: #ffe799;
  font-size: clamp(1.8rem, 4vw, 5rem);
  font-weight: 900;
  text-align: center;
}

.vip-join-panel label {
  display: grid;
  gap: 8px;
  font-size: clamp(0.9rem, 1.5vw, 1.8rem);
  font-weight: 900;
}

.vip-join-panel input {
  min-height: clamp(34px, 7vh, 74px);
  border: 0;
  border-radius: 4px;
  padding: 0 clamp(12px, 1.5vw, 22px);
  color: #202020;
  background: #f0f0f0;
  font-size: clamp(0.8rem, 1.1vw, 1.2rem);
  outline: none;
}

.vip-submit-btn {
  width: clamp(112px, 12vw, 210px);
  justify-self: center;
}

.cash-title {
  position: absolute;
  left: 50%;
  top: clamp(34px, 6vh, 70px);
  z-index: 4;
  width: clamp(260px, 30vw, 560px);
  transform: translateX(-50%);
}

.cash-tab-btn {
  width: 100%;
  color: #dedede;
  font-size: clamp(0.86rem, 1.6vw, 2rem);
}

.cash-tab-btn.active {
  color: #c91520;
}

.cash-inline-btn {
  display: inline-block;
  width: 80px;
  vertical-align: middle;
}

.cash-upload-btn {
  width: min(210px, 48%);
}

.promo-title {
  position: absolute;
  left: 50%;
  top: clamp(34px, 6vh, 72px);
  z-index: 3;
  margin: 0;
  color: #a8000a;
  font-size: clamp(1.6rem, 4vw, 4.2rem);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.promotion-tab {
  width: 100%;
  color: #f2f2f2;
  font-size: clamp(0.72rem, 1.25vw, 1.55rem);
}

.promotion-tab.active {
  color: #fff;
}

.history-caption {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: min(38%, 420px);
  transform: translate(-50%, -48%);
}

.history-panel,
.settings-modal {
  z-index: 14;
  overflow: visible;
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
}

.history-panel {
  aspect-ratio: 1920 / 878;
  min-height: 0;
  background-image: url("../images/lobby/history-bg.webp");
}

.history-filter {
  margin-bottom: 12px;
  min-width: 118px;
  min-height: 32px;
  border-radius: 3px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #777, #464646) !important;
}

.history-panel td.win {
  color: #08a921;
}

.history-panel td.lose {
  color: #d10a0a;
}

.history-page-btn {
  width: clamp(96px, 11vw, 170px);
}

.history-actions span {
  align-self: center;
  color: #222;
  font-weight: 900;
}

.settings-modal {
  width: min(76vw, 1420px);
  aspect-ratio: 1920 / 878;
  min-height: 0;
  padding: clamp(70px, 10vh, 112px) clamp(46px, 7vw, 150px) clamp(30px, 6vh, 74px);
  border-radius: 12px;
  background-image: url("../images/lobby/settings-bg.webp");
}

.settings-close {
  top: clamp(10px, 2vh, 24px);
  right: clamp(10px, 1.5vw, 24px);
  z-index: 5;
  width: clamp(48px, 5.7vw, 96px);
}

.settings-tabs {
  top: clamp(-78px, -8vh, -44px);
  width: min(66%, 900px);
  gap: clamp(24px, 5vw, 100px);
}

.settings-tab {
  width: 100%;
}

.settings-tabs button {
  min-height: auto;
  border-radius: 0;
  background: transparent;
}

.setting-list {
  gap: clamp(12px, 2.2vh, 28px);
  padding: 0 min(11vw, 150px);
}

.setting-row {
  grid-template-columns: clamp(34px, 4vw, 64px) 1fr clamp(104px, 11vw, 200px);
  gap: clamp(14px, 2vw, 30px);
  font-size: clamp(1.1rem, 2.4vw, 2.6rem);
}

.setting-row > img:first-child {
  width: clamp(34px, 3.8vw, 64px);
}

.setting-toggle-btn {
  width: clamp(96px, 10vw, 190px);
}

.language-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 18px);
}

.language-row button {
  min-width: 0;
  width: clamp(86px, 8vw, 160px);
  min-height: auto;
  border-radius: 0;
  background: transparent;
}

.language-row button:last-child {
  width: clamp(64px, 6vw, 118px);
}

.logout-button {
  width: clamp(170px, 19vw, 340px);
  justify-self: center;
  min-height: auto;
  background: transparent !important;
}

.user-image-btn {
  width: clamp(140px, 16vw, 260px);
}

.user-password-btn {
  width: clamp(190px, 22vw, 360px);
  justify-self: start;
}

/* Exact section-sample alignment using individual assets, not full sample screenshots. */
.lobby-logo {
  left: 3.91%;
  top: 2.82%;
  width: 14.95%;
}

.lobby-character {
  top: 11.85%;
  bottom: auto;
  left: 21.8%;
  width: 22.15%;
}

.lobby-player-ribbon {
  top: 0;
  right: auto;
  left: 77.14%;
  width: 22.71%;
  height: 15.24%;
  min-height: 0;
  padding: 0;
  display: block;
  clip-path: none;
  background: transparent;
  box-shadow: none;
}

.lobby-player-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.lobby-player-copy {
  position: absolute;
  left: 23%;
  top: 18%;
  z-index: 1;
  width: 52%;
  gap: 2%;
}

.lobby-player-copy strong {
  font-size: clamp(0.74rem, 1.45vw, 1.65rem);
}

.lobby-player-copy span {
  font-size: clamp(0.48rem, 0.9vw, 0.95rem);
}

.lobby-player-copy em {
  font-size: clamp(0.55rem, 1vw, 1.1rem);
}

.lobby-player-avatar {
  position: absolute;
  right: 4%;
  top: 22%;
  z-index: 1;
  width: 20%;
  border-radius: 7%;
}

.lobby-back-btn {
  left: 3.65%;
  bottom: auto;
  top: 91.65%;
  width: 9.69%;
}

.login-screen .lobby-logo {
  left: 3.91%;
  top: 2.82%;
  width: 14.95%;
}

.login-character {
  left: 21.77%;
  top: 11.85%;
  width: 22.14%;
}

.login-panel {
  left: 52.7%;
  right: auto;
  top: 11.8%;
  width: 27.4%;
  min-height: 55%;
  gap: 2.1vh;
  padding: 2.8% 3%;
}

.login-panel h1 {
  font-size: clamp(1rem, 2.1vw, 2.55rem);
}

.login-field {
  min-height: clamp(36px, 8.5vh, 82px);
  grid-template-columns: 9% 1fr;
  padding: 0 6%;
}

.login-field img {
  width: 65%;
  height: auto;
}

.login-field input {
  font-size: clamp(0.85rem, 1.6vw, 1.9rem);
}

.login-submit-btn {
  width: 58%;
  min-height: clamp(32px, 6.1vh, 66px);
  font-size: clamp(0.8rem, 1.55vw, 1.7rem);
}

.login-link {
  font-size: clamp(0.7rem, 1.25vw, 1.35rem) !important;
}

.login-contact {
  left: 59.7%;
  top: 73.1%;
  grid-template-columns: repeat(2, 5.3vw);
  gap: 2.8vw;
}

.login-contact > span {
  font-size: clamp(1.1rem, 2vw, 2.3rem);
}

.chip-one { left: 48%; top: 47%; width: 7.5%; }
.chip-two { left: 37%; bottom: -4%; width: 23%; }
.chip-three { right: 24%; bottom: -3%; width: 13.5%; }
.chip-four { right: 17.4%; top: 47%; width: 6.9%; }

.home-character,
.game-select-character,
.poker-character {
  left: 21.82%;
  top: 11.85%;
  width: 22.14%;
}

.home-character-apng {
  left: 21.1%;
  top: 8.4%;
  width: 25.1%;
}

.home-menu-grid {
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.home-menu-item {
  position: absolute;
  pointer-events: auto;
}

.home-menu-item.menu-play { left: 3.65%; top: auto; bottom: 0; width: 17.34%; }
.home-menu-item.menu-cash { left: 19.64%; top: auto; bottom: 0; width: 15.47%; }
.home-menu-item.menu-spin { left: 33.59%; top: auto; bottom: 0; width: 14.84%; }
.home-menu-item.menu-promotion { left: 48.02%; top: auto; bottom: 0; width: 12.97%; }
.home-menu-item.menu-history { left: 60.94%; top: auto; bottom: 0; width: 14.84%; }
.home-menu-item.menu-update { left: 74.48%; top: auto; bottom: 0; width: 14.84%; }
.home-menu-item.menu-setting { left: 88.44%; top: auto; bottom: 0; width: 7.92%; }

.home-announcement {
  inset: 0;
  width: auto;
  height: 100%;
  display: block;
}

.home-notice {
  position: absolute;
  min-height: 0;
  padding: 0;
}

.home-notice:nth-child(1) { left: 48.54%; top: 15.01%; width: 31.2%; height: 22.5%; }
.home-notice:nth-child(2) { left: 48.54%; top: 38.49%; width: 31.2%; height: 22.6%; }
.home-notice:nth-child(3) { left: 48.8%; top: 62.3%; width: 31%; height: 18.5%; }

.home-notice-title {
  width: 41%;
}

.home-notice-card {
  position: absolute;
  left: 0;
  top: 28%;
  width: 100%;
  height: 66%;
  min-height: 0;
  padding: 4% 6% 3% 18%;
  border: 1px solid rgba(225, 175, 45, 0.8);
  border-radius: 0 0 7px 0;
  font-size: clamp(0.78rem, 1.45vw, 1.75rem);
}

.home-contact-line img {
  width: 7%;
}

.game-select-panel,
.poker-menu-panel {
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  pointer-events: none;
}

.game-select-panel::before,
.poker-menu-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

.game-select-panel::before {
  left: 50.26%;
  top: 0;
  width: 49.74%;
  height: 100%;
  background-image: url("../images/lobby/game-select-panel.webp");
}

.poker-menu-panel::before {
  left: 50.26%;
  top: 0.56%;
  width: 49.48%;
  height: 99.44%;
  background-image: url("../images/lobby/poker-panel.webp");
}

.game-select-tile,
.poker-choice {
  z-index: 2;
  pointer-events: auto;
}

.game-select-screen .tile-poker { left: 51.82%; top: 36.68%; width: 26.25%; }
.game-select-screen .tile-skm { left: 66.3%; top: 14.22%; width: 23.33%; }
.game-select-screen .tile-twentyone { left: 73.49%; top: 57.34%; width: 16.88%; }
.game-select-screen .tile-buggyi { left: 59.48%; top: 10.72%; width: 12.92%; }
.game-select-screen .tile-slot { left: 51.88%; top: 23.14%; width: 12.92%; }

.poker-menu-screen .poker-play-now { left: 52.92%; top: 27.65%; width: 25.31%; }
.poker-menu-screen .poker-room { left: 66.41%; top: 9.03%; width: 15.57%; }
.poker-menu-screen .poker-vip { left: 70.57%; top: 56.88%; width: 16.93%; }

.asset-button img {
  height: auto;
}

/* Room select uses the folder samples as the layout reference, with each control built separately. */
.room-screen {
  background: url("../images/rooms/room-background.webp") center / cover no-repeat;
  font-family: "Manrope", system-ui, sans-serif;
}

.room-profile {
  left: 77.14%;
  right: auto;
  top: 0;
  width: 22.71%;
  height: 15.24%;
  min-height: 0;
  padding: 0;
  display: block;
  border-radius: 0;
  background: url("../images/lobby/profile-bg.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.room-profile-info {
  position: absolute;
  left: 23%;
  top: 16%;
  width: 52%;
  display: grid;
  gap: 2%;
  justify-items: end;
  text-align: right;
}

.room-profile-info strong {
  font-size: clamp(0.74rem, 1.45vw, 1.65rem);
}

.room-profile-money {
  gap: 4%;
  padding: 1% 4%;
  font-size: clamp(0.55rem, 1vw, 1.1rem);
}

.room-profile-money img {
  width: 16%;
  height: auto;
}

.room-league {
  padding: 1% 5%;
  font-size: clamp(0.48rem, 0.9vw, 0.95rem);
}

.room-avatar {
  position: absolute;
  right: 4%;
  top: 22%;
  width: 20%;
  border-radius: 7%;
}

.room-country-list {
  left: 0;
  top: 16.25%;
  width: 23.08%;
  height: 67.6%;
  display: block;
  gap: 0;
}

.room-country-btn {
  position: absolute;
  left: 0;
  width: 100%;
  height: 17.4%;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: inset 0 0 0 1px rgba(160, 30, 30, 0.28);
  filter: none;
  transform: none;
}

.room-country-btn:nth-child(1) { top: 0; }
.room-country-btn:nth-child(2) { top: 20.7%; }
.room-country-btn:nth-child(3) { top: 41.4%; }
.room-country-btn:nth-child(4) { top: 62.1%; }
.room-country-btn:nth-child(5) { top: 82.8%; }

.room-country-btn img {
  display: none;
}

.room-country-btn span {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.1rem, 3.25vw, 3.6rem);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
}

.room-country-btn.active,
.room-country-btn:hover {
  background: url("../images/rooms/select-button.webp") center / 100% 100% no-repeat;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.42);
  transform: none;
}

.room-country-btn.active span,
.room-country-btn:hover span {
  color: #fff;
}

.room-panel {
  left: 25.55%;
  right: auto;
  top: 12.95%;
  bottom: auto;
  width: 54.6%;
  height: 74.4%;
  min-width: 0;
  grid-template-columns: 50% 50%;
  border-width: clamp(2px, 0.32vw, 6px);
  border-radius: clamp(14px, 2vw, 34px);
}

.room-country-preview {
  border-radius: clamp(12px, 1.5vw, 26px) 0 0 clamp(12px, 1.5vw, 26px);
}

.room-country-caption {
  width: 62%;
  font-size: clamp(1.2rem, 3vw, 3.5rem);
}

.room-rate-panel {
  display: block;
  padding: 0;
}

.room-rate-title {
  top: 0;
  width: 62%;
  max-width: none;
  transform: translate(-50%, -2px);
}

.room-rate-list {
  position: absolute;
  left: 11%;
  top: 21%;
  width: 82%;
  height: 73%;
  display: flex;
  flex-direction: column;
  gap: 7.5%;
}

.room-rate-btn {
  width: 100%;
  height: 17.8%;
  min-height: 0;
  grid-template-columns: 15% 1fr;
  gap: 0;
  padding: 0 5% 0 8%;
  border-width: 2px;
}

.room-rate-btn img {
  width: 82%;
  height: auto;
}

.room-rate-btn span {
  font-size: clamp(1.2rem, 2.58vw, 3.5rem);
  white-space: nowrap;
}

.room-back-btn {
  left: 3.55%;
  top: 91.3%;
  bottom: auto;
  width: 9.9%;
}

/* Keep the settings dialog in front while dimming every background asset like the sample. */
.settings-screen::before {
  z-index: 12;
}

.settings-modal {
  top: 55%;
}

.setting-list {
  position: absolute;
  left: 28.6%;
  top: 16.5%;
  width: 39%;
  padding: 0;
  gap: clamp(12px, 2.25vh, 32px);
}

.setting-row {
  grid-template-columns: 4.3vw 16vw 10vw;
  gap: 1.6vw;
  font-size: clamp(1.45rem, 3.2vw, 4.2rem);
}

.setting-toggle-btn {
  width: 10vw;
}

.language-row {
  grid-template-columns: 4.3vw 16vw 16vw;
}

.language-row button {
  width: 7.6vw;
}

.language-row button:last-child {
  width: 5.2vw;
}

.logout-button {
  position: absolute;
  left: 50%;
  top: 84%;
  width: 16vw;
  transform: translateX(-50%);
}

.setting-list {
  position: static;
  width: auto;
  padding: 0 min(11vw, 150px);
  gap: clamp(12px, 2.2vh, 28px);
}

.setting-row,
.language-row {
  grid-template-columns: clamp(34px, 4vw, 64px) 1fr clamp(104px, 11vw, 200px);
  gap: clamp(14px, 2vw, 30px);
  font-size: clamp(1.1rem, 2.4vw, 2.6rem);
}

.setting-toggle-btn {
  width: clamp(96px, 10vw, 190px);
}

.language-row button {
  width: clamp(86px, 8vw, 160px);
}

.language-row button:last-child {
  width: clamp(64px, 6vw, 118px);
}

.logout-button {
  position: static;
  width: clamp(170px, 19vw, 340px);
  justify-self: center;
  transform: none;
}

@media (max-width: 980px) and (orientation: landscape) {
  .slot-screen .lobby-logo {
    display: block;
    left: 18px;
    top: 8px;
    z-index: 22;
    width: 126px;
  }

  .slot-screen .lobby-player-ribbon {
    top: 6px;
    right: 10px;
    z-index: 22;
    width: 170px;
  }

  .slot-screen .lobby-back-btn {
    left: 18px;
    top: auto;
    bottom: 10px;
    z-index: 22;
    width: 104px;
  }

  .slot-screen .slot-shell {
    left: 0;
    top: 0;
    width: 100vw;
    height: var(--viewport-h, 100vh);
    grid-template-rows: minmax(0, 1fr);
    padding: 88px 18px 52px;
    border: 0;
    border-radius: 0;
    transform: none;
  }

  .slot-screen .slot-header {
    display: none;
  }

  .slot-screen .slot-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 260px);
  }

  .slot-screen .slot-provider-tabs button {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.78rem;
  }

  .slot-screen .slot-search input {
    min-height: 40px;
  }

  .slot-screen .slot-game-grid {
    grid-template-columns: repeat(6, minmax(92px, 1fr));
    grid-auto-rows: minmax(150px, max-content);
    gap: 8px;
  }

  .slot-screen .slot-game-image {
    aspect-ratio: 1.18 / 1;
  }

  .slot-screen .slot-game-copy {
    padding: 5px 6px 3px;
  }

  .slot-screen .slot-game-copy strong {
    font-size: 0.7rem;
  }

  .slot-screen .slot-play-pill {
    min-height: 28px;
    margin: 0 6px 6px;
    font-size: 0.68rem;
  }

  .slot-screen .slot-provider-grid {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }
}