/*
 * 娛樂城大廳：金紅賭場風。背景（casino-bg.webp）和徽章（casino-logo.webp）是大廳專用的；名牌金框、按鈕、輸入框沿用撲克的生成圖（public/art/）。
 * 遊戲卡片的圖是各遊戲首頁去掉按鈕後的截圖（public/games/）。
 */

:root {
  --bg: #120506;
  --text: #fff7e6;
  --gold: #e8b54a;
  --gold-soft: #ffe08a;
  color-scheme: dark;
  font-family: "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

/* ---------- 背景 ---------- */

.lobby-bg {
  position: fixed;
  inset: 0;
  background: url("/art/casino-bg.webp") center / cover no-repeat;
}

.lobby-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 45%, rgba(12, 4, 4, 0.6) 0%, rgba(12, 4, 4, 0.45) 55%, rgba(6, 2, 2, 0.88) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 28%, transparent 70%, rgba(0, 0, 0, 0.7) 100%);
}

.hub {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.4vh, 24px);
  padding: clamp(16px, 3vh, 34px) 0 28px;
}

/* ---------- 標題 ---------- */

.hub-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hub-logo {
  width: clamp(96px, 16vh, 170px);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(255, 196, 90, 0.38)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.65));
  animation: logo-float 5s ease-in-out infinite;
  user-select: none;
}

@keyframes logo-float {
  50% {
    transform: translateY(-6px);
  }
}

.hub-title {
  margin: clamp(-4px, -0.6vh, 0px) 0 0;
  font-size: clamp(36px, 6.4vh, 62px);
  font-weight: 900;
  letter-spacing: 0.3em;
  line-height: 1.1;
  padding-left: 0.3em;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe39a 30%, #f2b63c 55%, #b9740f 70%, #ffe9a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #4a2200) drop-shadow(0 0 1px #4a2200) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.75));
}

.hub-sub {
  margin: 4px 0 0;
  color: #f3dca4;
  font-size: clamp(13px, 1.9vh, 16px);
  letter-spacing: 0.18em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* ---------- 名牌（同撲克首頁：頭像在左，暱稱放在金框膠囊裡） ---------- */

.hub-player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(520px, 100%);
}

.hub-avatar-btn {
  position: relative;
  flex: none;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  justify-items: center;
}

.hub-avatar-btn .avatar {
  width: 72px;
  height: 72px;
  font-size: 30px;
}

.hub-avatar-tag {
  position: absolute;
  bottom: -8px;
  padding: 1px 8px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffe39a, #d99a1e);
  color: #3a1d00;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.hub-name {
  flex: 1;
  min-width: 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 46px;
  font-size: 13px;
  color: #e9cf8f;
  border: 1px solid transparent;
  border-image: url("/art/frame-name.webp") 34 155 fill / 9px 42px / 0 stretch;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  transition: filter 0.2s;
}

.hub-player.is-warn .hub-name {
  filter:
    drop-shadow(0 0 4px rgb(255, 90, 78))
    drop-shadow(0 0 12px rgba(255, 90, 78, 0.85))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.hub-player.is-warn .hub-name span {
  color: #ffb3a8;
}

.hub-name input {
  width: 100%;
  border: none;
  border-bottom: 2px solid rgba(232, 181, 74, 0.45);
  background: transparent;
  padding: 4px 2px 6px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  outline: none;
}

.hub-name input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}

.hub-name input:focus {
  border-bottom-color: #ffd36b;
}

/* ---------- 頭像 ---------- */

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  background: #2b2c33;
  user-select: none;
}

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

.avatar.is-retro {
  background: radial-gradient(circle at 50% 35%, #5a1a1f, #2a0a0d 75%);
}

.avatar.is-initial {
  background: linear-gradient(180deg, #ffd36b, #c9861a);
}

.avatar.is-initial span {
  color: #3a1d00;
  font-weight: 900;
  font-size: 0.9em;
}

.avatar.is-big {
  width: 72px;
  height: 72px;
  font-size: 30px;
}

.lux-avatar-ring {
  box-shadow:
    0 0 0 3px #2a0b0d,
    0 0 0 5px #e8b54a,
    0 0 18px rgba(255, 196, 90, 0.45);
}

/* ---------- 遊戲卡片 ---------- */

.hub-games {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
}

/* 卡片外框用撲克首頁「開新牌桌」那張紅絨布金框（九宮格，角落寶石不拉伸） */
.game-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 30px 26px;
  border: 1px solid transparent;
  border-image: url("/art/frame-create.webp") 140 155 145 155 fill / 44px 48px 46px 48px / 0 stretch;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.6));
  transition: transform 0.18s, filter 0.18s;
}

.game-card.is-ready:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 18px rgba(255, 196, 90, 0.28));
}

.game-art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: #1a0607 center / cover no-repeat;
  box-shadow:
    0 0 0 2px #2a0b0d,
    0 0 0 3px rgba(232, 181, 74, 0.75),
    0 8px 16px rgba(0, 0, 0, 0.5);
  transition: filter 0.2s;
}

.game-card.is-off .game-art {
  filter: grayscale(0.75) brightness(0.55);
}

.game-status,
.game-rooms {
  position: absolute;
  top: 8px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.game-status {
  left: 8px;
  background: rgba(20, 6, 6, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e7d3b0;
}

.game-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #8a7c6a;
  vertical-align: 1px;
}

.game-status.is-up {
  color: #d9ffe0;
  border-color: rgba(74, 222, 128, 0.55);
}

.game-status.is-up::before {
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

.game-rooms {
  right: 8px;
  background: linear-gradient(180deg, #ffe39a, #d99a1e);
  color: #3a1d00;
}

.game-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-meta {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.game-name {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe39a 32%, #f2b63c 58%, #b9740f 74%, #ffe9a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #3a1500) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}

.game-players {
  color: #f3dca4;
  font-size: 13.5px;
  font-weight: 700;
}

.game-blurb {
  margin: -6px 0 2px;
  color: #e7d3b0;
  font-size: 13.5px;
}

.game-create {
  width: 100%;
}

.game-join {
  display: flex;
  gap: 8px;
}

/* 房碼輸入框：撲克的黑底金邊（public/art/input.webp，九宮格） */
.game-code {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 12px;
  border: 2px solid transparent;
  border-image: url("/art/input.webp") 34 fill / 11px / 0 stretch;
  background: none;
  padding: 0 14px;
  color: #ffe08a;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2em;
  outline: none;
  transition: box-shadow 0.15s;
}

.game-code::placeholder {
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.06em;
  font-weight: 500;
  font-size: 15px;
}

.game-code:focus {
  box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.3), 0 0 16px rgba(255, 211, 107, 0.25);
}

.game-code.is-warn {
  box-shadow: 0 0 0 3px rgba(255, 90, 78, 0.6), 0 0 16px rgba(255, 90, 78, 0.5);
}

/* ---------- 按鈕（撲克的金色、深色生成按鈕，九宮格） ---------- */

.lux-btn {
  position: relative;
  padding: 0.6em 1.9em;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.06em;
  border: 2px solid transparent;
  border-radius: 999px;
  background: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  transition: filter 0.15s, transform 0.1s;
}

.lux-btn:not(:disabled):hover {
  filter: brightness(1.1);
}

.lux-btn:not(:disabled):active {
  transform: translateY(2px);
}

.lux-btn:disabled {
  filter: grayscale(0.8) brightness(0.65);
}

.lux-gold {
  border-image: url("/art/btn-gold.webp") 24 115 fill / 0.32em 1.5em / 0 stretch;
  color: #3a1d00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 196, 70, 0.3);
}

.lux-dark {
  border-image: url("/art/btn-dark.webp") 26 105 fill / 0.32em 1.3em / 0 stretch;
  color: #ffe08a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  padding-left: 1.5em;
  padding-right: 1.5em;
}

/* ---------- 頁尾 ---------- */

.hub-foot {
  margin-top: 4px;
  color: rgba(243, 220, 164, 0.75);
  font-size: 12.5px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hub-credit {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(243, 220, 164, 0.55);
}

/* ---------- 換頭像視窗 ---------- */

.lux-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.lux-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 30px 36px;
  border: 1px solid transparent;
  border-image: url("/art/frame-create.webp") 140 155 145 155 fill / 36px 40px 37px 40px / 0 stretch;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
  animation: pop-in 0.18s ease-out both;
}

@keyframes pop-in {
  from {
    opacity: 0;
    scale: 0.85;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.lux-modal-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.lux-modal-head h2 {
  margin: 0;
  color: #ffe08a;
  font-size: 22px;
}

.lux-modal-head p {
  margin: 2px 0 0;
  color: #e7d3b0;
  font-size: 14px;
}

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

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 10px;
  justify-items: center;
}

.avatar-choice {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 3px;
  border: 2px solid transparent;
  background: rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  transition: transform 0.12s, border-color 0.12s;
}

.avatar-choice .avatar {
  font-size: 22px;
}

.avatar-choice:hover {
  transform: scale(1.06);
}

.avatar-choice.is-selected {
  border-color: #ffd36b;
  box-shadow: 0 0 14px rgba(255, 211, 107, 0.6);
}

.avatar.is-photo {
  background: #2b2c33;
}

.avatar-upload {
  border: 2px dashed rgba(232, 181, 74, 0.55);
}

.avatar-upload span {
  font-size: 12px;
  font-weight: 700;
  color: #e7d3b0;
  line-height: 1.1;
}

.picker-note {
  margin: 14px 0 0;
  color: #d8c29a;
  font-size: 12.5px;
}

.picker-error {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(120, 10, 14, 0.85);
  border: 1px solid #ff8a80;
  color: #ffe1dd;
  font-size: 14px;
}

/* 用照片進遊戲時，大廳先把照片送過去，這段時間卡片不能再按 */
.game-card.is-busy {
  cursor: progress;
}

.game-card.is-busy .game-body {
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- 帳號：籌碼、登出、主人（2026-10-08 Google 登入） ---------- */

.hub-account {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: -6px;
}

.hub-chips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  border-radius: 99px;
  background: rgba(10, 3, 3, 0.72);
  border: 1px solid rgba(232, 181, 74, 0.55);
  color: #f3dca4;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.hub-chips b {
  color: #ffe08a;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.hub-chip-coin {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4 0 18%, #f2b63c 40%, #9a5a07 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 233, 168, 0.55), 0 0 10px rgba(255, 196, 70, 0.45);
}

.hub-small {
  font-size: 13px;
  padding: 0.45em 1.4em;
}

.hub-link {
  border: none;
  background: none;
  padding: 6px 4px;
  color: rgba(243, 220, 164, 0.8);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hub-link:hover {
  color: #ffe08a;
}

.hub-credit a {
  color: inherit;
}

/* 沒登入：整頁蓋住，只能用 Google 登入 */
.gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 2, 2, 0.72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

.gate-card {
  width: min(440px, 100%);
  padding: 34px 36px 26px;
  text-align: center;
  border: 1px solid transparent;
  border-image: url("/art/frame-create.webp") 140 155 145 155 fill / 36px 40px 37px 40px / 0 stretch;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
  animation: pop-in 0.2s ease-out both;
}

.gate-logo {
  width: 120px;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 196, 90, 0.38));
}

.gate-title {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe39a 30%, #f2b63c 55%, #b9740f 70%, #ffe9a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gate-text {
  margin: 8px 0 18px;
  color: #f3dca4;
  font-size: 15px;
  line-height: 1.7;
}

.gate-google {
  display: flex;
  justify-content: center;
  min-height: 44px;
  /* 整頁是深色模式時，Google 按鈕的 iframe 會被塗成白底方塊；這裡改回淺色就透明了 */
  color-scheme: light;
}

.gate-error {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(120, 10, 14, 0.85);
  border: 1px solid #ff8a80;
  color: #ffe1dd;
  font-size: 14px;
}

.gate-note {
  margin: 16px 0 0;
  color: #d8c29a;
  font-size: 12.5px;
  line-height: 1.6;
}

.gate-links {
  margin: 8px 0 0;
  font-size: 12.5px;
}

.gate-links a {
  color: #e8c26a;
}

/* 主人：帳號清單 */
.admin-modal {
  width: min(640px, 100%);
}

.admin-list {
  display: grid;
  gap: 8px;
}

.admin-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(232, 181, 74, 0.25);
}

.admin-row .avatar {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.admin-who b {
  display: block;
  color: #ffe08a;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-who small {
  display: block;
  color: #c9b48d;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-who .admin-chips {
  color: #f3dca4;
  font-size: 13px;
}

.admin-top {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-top input {
  width: 96px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(232, 181, 74, 0.55);
  background: rgba(0, 0, 0, 0.5);
  color: #ffe08a;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.admin-top .lux-btn {
  font-size: 13px;
  padding: 0.45em 1.2em;
}

/* ---------- 手機 ---------- */

@media (max-width: 640px) {
  .admin-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .admin-top {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .admin-top input {
    font-size: 16px;
  }

  .gate-card {
    padding: 28px 24px 22px;
  }

  .hub-player {
    gap: 10px;
  }

  .hub-name {
    padding: 10px 40px;
  }

  .game-card {
    padding: 22px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-logo {
    animation: none;
  }
}