/* ===================== MAIN MENU LAYOUT ===================== */
.menu-screen {
  width: 100vw; height: 100vh;
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    var(--bg-image-menu) no-repeat center/cover,
    var(--bg);
  overflow: hidden;
}

/* ===================== SIDEBAR (slide-in overlay) ===================== */
.menu-sidebar {
  display: flex; flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 340px;
  z-index: 92;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.7) 0%,
      rgba(8,5,2,0.85) 15%,
      rgba(8,5,2,0.85) 85%,
      rgba(0,0,0,0.7) 100%);
  border-right: 4px solid;
  border-image: linear-gradient(180deg, #5a4012, #d4a545 20%, #f0c860 50%, #d4a545 80%, #5a4012) 1;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  box-shadow: 6px 0 40px rgba(0,0,0,0.8), 2px 0 12px rgba(212,165,69,0.08);
  transform: translateX(-110%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-sidebar::-webkit-scrollbar { display: none; }
.menu-sidebar.open {
  transform: translateX(0);
}

/* Sidebar overlay (dark backdrop) */
.menu-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 91;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.menu-sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Close (X) button on menu pages ── */
.menu-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 36px; height: 36px;
  border: 1px solid rgba(212,165,69,0.35);
  border-radius: 50%;
  background: rgba(10,8,4,0.7);
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
}
.menu-close-btn:hover {
  border-color: var(--gold);
  background: rgba(212,165,69,0.15);
  color: var(--gold-bright);
  box-shadow: 0 0 10px rgba(212,165,69,0.25);
  transform: scale(1.1);
}

/* Toggle button (medieval arrow) */
.menu-toggle-btn {
  position: fixed;
  left: 0;
  top: 30%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px; height: 120px;
  border: 2px solid rgba(212,165,69,0.35);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: rgba(10,8,4,0.85);
  color: var(--gold);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 0 12px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}
.menu-toggle-btn:hover {
  border-color: var(--gold);
  box-shadow: 2px 0 16px rgba(212,165,69,0.25);
  color: var(--gold-bright);
  background: rgba(212,165,69,0.12);
  width: 36px;
}
.menu-toggle-btn .toggle-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
  line-height: 1;
  font-size: 1.4rem;
}
.menu-toggle-btn.sidebar-open {
  left: 304px;
}
.menu-toggle-btn.sidebar-open .toggle-arrow {
  transform: rotate(180deg);
}

/* Sidebar inner glow at top */
.menu-sidebar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 120px;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,165,69,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.menu-sidebar-header {
  display: none;
}

.menu-logo-text {
  font-family: 'Cinzel', serif; font-size: 0.8rem;
  color: var(--gold); letter-spacing: 6px;
  margin-bottom: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.menu-logo-realm {
  font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 900;
  color: var(--gold-bright); letter-spacing: 8px;
  margin-bottom: 30px;
  text-shadow: var(--text-shadow-glow), 0 2px 6px rgba(0,0,0,1);
}

/* --- User Info (unified header: logo + avatar + name) --- */
.menu-user-info {
  padding: 22px 12px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(212,165,69,0.1);
  cursor: pointer;
  transition: background 0.25s;
  /* Clip only the bottom so frame doesn't bleed into nav items */
  clip-path: inset(-200px -200px 0 -200px);
}
.menu-user-info:hover {
  background: rgba(212,165,69,0.06);
}
.menu-user-avatar {
  width: 180px; height: 180px;
  position: relative; flex-shrink: 0;
  overflow: visible;
}
.menu-user-avatar .avatar-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--avatar-size, 139px); height: var(--avatar-size, 139px);
  object-fit: cover; border-radius: 50%;
  display: block;
  z-index: 1;
}
.menu-user-avatar .frame-img {
  position: absolute;
  top: calc(50% + var(--frame-offset-y, 0px)); left: calc(50% + var(--frame-offset-x, 0px));
  transform: translate(-50%, -50%);
  width: var(--frame-size, 357px); height: var(--frame-size, 357px);
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

/* ── Name banner ── */
.menu-name-banner {
  margin-top: 40px;
  padding: 6px 22px;
  background: linear-gradient(180deg,
    #d4b876 0%, #c9a85c 20%, #e0c888 50%, #c9a85c 80%, #b8943c 100%
  );
  border-radius: 4px;
  border-top: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid #8a6e1a;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.menu-user-name {
  font-family: 'Crimson Text', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #3a2a0e;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  letter-spacing: 2px;
  white-space: nowrap;
}

/* ── Rank badge (sidebar) ── */
.menu-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.menu-rank-badge {
  height: 24px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.menu-rank-title {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: #d4a545;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
}

/* ── Rank section (profile panel) ── */
.profile-rank-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(212,165,69,0.25);
  margin-bottom: 12px;
}
.profile-rank-badge {
  width: 200px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  margin-bottom: 10px;
}
.profile-rank-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: #d4a545;
  letter-spacing: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  margin-bottom: 6px;
}
.profile-rank-max {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #e8cc44;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(232,204,68,0.4);
}
.profile-rank-next {
  font-family: 'Crimson Text', serif;
  font-size: 0.9rem;
  color: #bbb;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
.profile-rank-progress {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-rank-bar-wrap {
  width: 100%;
}
.profile-rank-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.profile-rank-label-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #d4a545;
  letter-spacing: 1px;
}
.profile-rank-label-val {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: #ccc;
}
.profile-rank-bar {
  width: 100%;
  height: 10px;
  background: rgba(30,25,18,0.8);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(212,165,69,0.25);
}
.profile-rank-fill {
  height: 100%;
  background: linear-gradient(90deg, #b8943c, #d4a545, #e0c888);
  border-radius: 5px;
  transition: width 0.4s ease;
  box-shadow: 0 0 6px rgba(212,165,69,0.4);
}

/* Cloud status badge */
.menu-cloud-badge {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Crimson Text', serif; font-size: 0.85rem;
  letter-spacing: 0.5px; padding: 4px 10px;
  border-radius: 3px; margin-top: 4px; width: fit-content;
}
.cloud-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cloud-online {
  color: #7ecc7e; background: rgba(80,180,80,0.1);
  border: 1px solid rgba(80,180,80,0.25);
}
.cloud-online .cloud-dot { background: #5ecc5e; box-shadow: 0 0 6px rgba(80,200,80,0.5); }
.cloud-offline {
  color: var(--parchment-dark); background: rgba(150,130,100,0.08);
  border: 1px solid rgba(150,130,100,0.15);
}
.cloud-offline .cloud-dot { background: #8a7a60; }

/* ===================== NAV ITEMS ===================== */
.menu-nav {
  flex: 1; padding: 12px 0;
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  z-index: 1;
}

.menu-nav-item {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap; white-space: nowrap;
  padding: 8px 16px;
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700;
  color: var(--parchment); letter-spacing: 2px;
  cursor: pointer; transition: all 0.25s;
  border: none; background: none; text-align: left; width: 100%;
  border-left: 3px solid transparent;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5);
}

.menu-nav-item:hover {
  color: var(--parchment);
  background: linear-gradient(90deg, rgba(212,165,69,0.08) 0%, transparent 100%);
  border-left-color: rgba(212,165,69,0.3);
}

.menu-nav-item.active {
  color: var(--gold-bright);
  background: linear-gradient(90deg, rgba(212,165,69,0.15) 0%, rgba(212,165,69,0.03) 70%, transparent 100%);
  border-left-color: var(--gold);
  text-shadow: var(--text-shadow-glow);
}
/* Active glow bar effect */
.menu-nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--gold-glow), 0 0 16px var(--gold-glow);
}

.menu-nav-icon { font-size: 1.2rem; width: 26px; text-align: center; }
.menu-nav-icon-img { width: 64px !important; height: 64px !important; max-width: 64px; max-height: 64px; min-width: 64px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)); display: inline-block; vertical-align: middle; }

/* Locked menu items (admin-only features) */
.menu-nav-item.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.menu-nav-item.locked:hover {
  background: none;
  border-left-color: transparent;
}
.menu-lock-icon {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ===================== SIDEBAR FOOTER ===================== */
.menu-sidebar-footer {
  padding: 14px 24px 20px;
  border-top: 1px solid rgba(212,165,69,0.1);
  position: relative;
  z-index: 1;
}

.menu-lang-switcher {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.menu-lang-switcher .lang-btn {
  padding: 8px 16px; font-size: 0.8rem;
}

.menu-signout-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid rgba(196,48,48,0.2);
  background: rgba(0,0,0,0.3);
  color: var(--parchment-dark);
  font-family: 'Cinzel', serif; font-size: 0.85rem;
  letter-spacing: 1px;
  cursor: pointer; transition: all 0.25s;
}
.menu-signout-btn:hover {
  border-color: var(--red); color: var(--red);
  background: rgba(196,48,48,0.1);
  box-shadow: 0 0 12px var(--red-glow);
}

/* ===================== CONTENT AREA (full screen) ===================== */
.menu-content {
  width: 100%; height: 100%;
  overflow-y: auto;
  padding: 32px 48px 0;
  position: relative;
}

/* ===================== WELCOME / DEFAULT CONTENT ===================== */
.menu-welcome {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; text-align: center;
  animation: menuFadeIn 0.6s ease-out;
}
@keyframes menuFadeIn {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.menu-welcome-crown {
  font-size: 6rem; margin-bottom: 24px; opacity: 0.85;
  filter: drop-shadow(0 0 20px rgba(212,165,69,0.5)) drop-shadow(0 4px 8px rgba(0,0,0,0.8));
}
.menu-welcome-crown img {
  width: 150px; height: 150px; object-fit: contain;
}
.menu-welcome-title {
  font-family: 'Cinzel', serif; font-size: 3.5rem; font-weight: 900;
  color: var(--gold-bright); letter-spacing: 10px; margin-bottom: 12px;
  text-shadow: var(--text-shadow-title), 0 0 60px rgba(224,180,78,0.2);
}
.menu-welcome-sub {
  font-family: 'Crimson Text', serif; font-style: italic;
  color: var(--parchment-light); font-size: 1.3rem;
  text-shadow: 0 2px 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,0.6);
}

/* ===================== VERSUS SETUP ===================== */
.versus-setup {
  position: relative;
  max-width: 640px; margin: 0 auto;
  padding: 40px 36px;
  animation: menuFadeIn 0.4s ease-out;
}

/* Dark panel wrapper for form sections */
.versus-setup .your-name-section,
.versus-setup .opponent-section,
.versus-setup .opponent-type-section,
.versus-setup .opponents-list,
.versus-setup .difficulty-section,
.versus-setup .map-section,
.versus-setup .question-section { margin-bottom: 24px; }

.versus-title {
  font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 900;
  color: var(--gold-bright); letter-spacing: 6px;
  text-align: center; margin-bottom: 32px;
  text-shadow: var(--text-shadow-title);
  position: relative;
  padding-bottom: 16px;
}
/* Ornate underline for title */
.versus-title::after {
  content: '';
  position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold), var(--gold-dim), transparent);
}

/* Override landing form sizes for menu context */
.versus-setup .your-name-label {
  font-size: 1.1rem; margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.versus-setup .your-name-input {
  padding: 14px 18px; font-size: 1.35rem;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(212,165,69,0.25);
  border-radius: 4px;
  box-shadow: var(--shadow-inset);
}
.versus-setup .your-name-input:focus {
  border-color: var(--gold);
  box-shadow: var(--shadow-inset), 0 0 12px rgba(212,165,69,0.15);
}

/* Map selection cards */
.map-cards {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.map-card {
  flex: 1; min-width: 140px; max-width: 200px;
  padding: 16px 12px; border-radius: 4px;
  border: 2px solid rgba(212,165,69,0.2);
  background: rgba(0,0,0,0.5);
  cursor: pointer; transition: all 0.25s;
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.map-card:hover {
  border-color: rgba(212,165,69,0.5);
  background: rgba(30,20,8,0.7);
}
.map-card.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(60,40,15,0.7) 0%, rgba(30,18,6,0.8) 100%);
  box-shadow: 0 0 16px rgba(212,165,69,0.15);
}
.mc-name {
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700;
  color: var(--parchment-light); letter-spacing: 1px;
}
.map-card.active .mc-name { color: var(--gold-bright); text-shadow: var(--text-shadow-glow); }
.mc-info {
  font-family: 'Crimson Text', serif; font-size: 0.88rem;
  color: var(--parchment-dark); line-height: 1.3;
}
.map-card.active .mc-info { color: var(--parchment); }

.versus-setup .opp-btn {
  padding: 12px 24px; font-size: 1.05rem;
}
.versus-setup .diff-btn {
  padding: 12px 24px; font-size: 1.05rem;
}

/* Opponent type + question category buttons */
.type-btns, .question-btns {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.type-btn, .qcat-btn {
  padding: 11px 22px; border-radius: 3px;
  border: 2px solid rgba(212,165,69,0.25);
  background: rgba(0,0,0,0.4);
  color: var(--parchment-dark);
  font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600;
  letter-spacing: 1px; cursor: pointer; transition: all 0.25s;
}
.type-btn.active, .type-btn:hover,
.qcat-btn.active, .qcat-btn:hover {
  border-color: var(--gold); color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(60,40,15,0.7) 0%, rgba(30,18,6,0.8) 100%);
  box-shadow: 0 0 12px rgba(212,165,69,0.15);
  text-shadow: var(--text-shadow-glow);
}

.versus-setup .opp-row {
  padding: 12px 16px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212,165,69,0.15);
  border-radius: 4px;
  box-shadow: var(--shadow-inset);
}
.versus-setup .opp-name-input {
  font-size: 1.25rem;
}
.versus-setup .opp-badge {
  font-size: 0.82rem; padding: 4px 12px;
}
/* AI summary — clean display when playing vs AI */
.versus-setup .opp-ai-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 6px;
  color: #c8a96e;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  letter-spacing: 1px;
}
.versus-setup .opp-ai-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 4px rgba(212,165,69,0.4));
}
.versus-setup .opp-ai-text {
  font-weight: 600;
}
.versus-setup .start-btn {
  padding: 20px 56px; font-size: 1.3rem; letter-spacing: 5px;
  margin-top: 28px;
  display: block; margin-left: auto; margin-right: auto;
  font-weight: 700;
}

/* Loading Screen — full viewport centered */
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(30,22,10,0.97) 0%, rgba(8,5,2,0.99) 70%);
  animation: menuFadeIn 0.4s ease-out;
  padding: 40px;
}
.loading-shield {
  margin-bottom: 36px;
  animation: crownFloat 3s ease-in-out infinite;
}
.loading-shield img {
  width: 340px; height: 340px; object-fit: contain;
  filter: drop-shadow(0 0 50px rgba(212,165,69,0.5))
          drop-shadow(0 6px 20px rgba(0,0,0,0.9));
}
@keyframes crownFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.loading-title {
  font-family: 'Cinzel', serif; font-size: 2.6rem; font-weight: 700;
  color: var(--gold); letter-spacing: 6px;
  text-shadow: var(--text-shadow-title), 0 0 30px rgba(212,165,69,0.3);
  margin-bottom: 28px;
}
.loading-bar {
  width: 420px; height: 8px;
  background: rgba(212,165,69,0.15);
  border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(212,165,69,0.25);
  margin-bottom: 22px;
}
.loading-fill {
  width: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright), var(--gold-dim));
  border-radius: 4px;
}
.loading-hint {
  font-family: 'Crimson Text', serif; font-size: 1.3rem; font-style: italic;
  color: var(--parchment);
  text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.6);
}

/* Multiplayer loading — per-player status */
.mp-loading-players {
  display: flex; gap: 32px;
  justify-content: center; align-items: center;
  margin-bottom: 24px;
}
.mp-loading-player {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mp-loading-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid var(--gold-dim);
  object-fit: cover;
}
.mp-loading-name {
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700;
  color: var(--gold); letter-spacing: 2px;
}
.mp-loading-status {
  font-family: 'Crimson Text', serif; font-size: 0.85rem;
  color: var(--parchment); opacity: 0.7;
}

/* ===================== MATCHMAKING SCREEN ===================== */
.matchmaking-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1a1408 0%, #0d0a04 70%);
  animation: menuFadeIn 0.4s ease-out;
  padding: 24px;
}

.mm-title {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(212,165,69,0.5);
  margin-bottom: 12px;
  letter-spacing: 3px;
  animation: mmPulse 2s ease-in-out infinite;
}

@keyframes mmPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.mm-timer {
  font-family: 'Cinzel', serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #e8d5a3;
  text-shadow: 0 0 20px rgba(232,213,163,0.4);
  margin-bottom: 36px;
  letter-spacing: 4px;
}

.mm-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  max-width: 1200px;
  margin-bottom: 32px;
}

.mm-slot {
  width: 180px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 3px solid var(--slot-color, #555);
  border-radius: 14px;
  background: rgba(20, 16, 8, 0.85);
  padding: 20px 14px;
  position: relative;
  transition: all 0.4s ease;
  overflow: visible;
}

.mm-slot.empty {
  border-style: dashed;
  opacity: 0.7;
}

.mm-slot.filled {
  border-style: solid;
  opacity: 1;
  box-shadow: 0 0 16px color-mix(in srgb, var(--slot-color, #555) 40%, transparent);
}

.mm-slot.ai-filling {
  transform: scale(0.85);
  opacity: 0;
}

.mm-slot.ai-filled {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  box-shadow: 0 0 20px color-mix(in srgb, var(--slot-color, #555) 50%, transparent);
}

.mm-slot-avatar-wrap {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.mm-slot-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.mm-slot-frame {
  width: 240px;
  height: 240px;
  position: absolute;
  top: calc(50% + var(--frame-offset-y, 0px));
  left: calc(50% + var(--frame-offset-x, 0px));
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
  max-width: none;
}

.mm-slot-placeholder {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--slot-color, #888);
  opacity: 0.5;
  text-shadow: 0 0 10px var(--slot-color, #888);
}

.mm-slot-spinner {
  position: absolute;
  bottom: -6px;
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
  border-top-color: var(--slot-color, #888);
  border-radius: 50%;
  animation: mmSpin 1s linear infinite;
}

@keyframes mmSpin {
  to { transform: rotate(360deg); }
}

.mm-slot-name {
  font-family: 'Crimson Text', serif;
  font-size: 1.15rem;
  color: #c8a96e;
  text-align: center;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-slot.empty .mm-slot-name {
  color: #7a6a4a;
  font-style: italic;
}

.mm-slot-status {
  font-size: 0.85rem;
  font-weight: 700;
}

.mm-slot-status.connected {
  color: #5ad45a;
  text-shadow: 0 0 6px rgba(90, 212, 90, 0.5);
}

.mm-slot-status.waiting {
  color: #7a6a4a;
}

.mm-hint {
  font-family: 'Crimson Text', serif;
  font-size: 1.3rem;
  color: #8a7a5a;
  font-style: italic;
  margin-bottom: 24px;
  text-align: center;
  min-height: 28px;
}

.mm-cancel-btn {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #c8a96e;
  background: rgba(200, 169, 110, 0.1);
  border: 2px solid rgba(200, 169, 110, 0.3);
  border-radius: 8px;
  padding: 14px 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 2px;
}

.mm-cancel-btn:hover {
  background: rgba(200, 169, 110, 0.2);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 165, 69, 0.3);
}

/* No players found popup */
.mm-no-players-popup {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  animation: cinematicFadeIn 0.4s ease-out;
}
.mm-no-players-panel {
  background: linear-gradient(180deg, rgba(22,15,8,0.96) 0%, rgba(12,8,3,0.98) 100%);
  border: 2px solid; border-image: linear-gradient(180deg, #5a4012, #d4a545, #5a4012) 1;
  padding: 40px 48px; text-align: center;
  max-width: 480px;
  box-shadow: 0 0 60px rgba(212,165,69,0.15);
}
.mm-no-players-title {
  font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700;
  color: var(--gold-bright); letter-spacing: 3px; margin: 0 0 16px;
  text-shadow: 0 0 16px rgba(212,165,69,0.3);
}
.mm-no-players-desc {
  font-family: 'Crimson Text', serif; font-size: 1.15rem;
  color: var(--parchment); line-height: 1.5; margin: 0 0 28px;
}
.mm-no-players-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.mm-no-players-btn {
  padding: 14px 36px; border-radius: 3px;
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 2px; cursor: pointer; transition: all 0.25s;
  text-transform: uppercase;
}
.mm-no-players-btn.primary {
  border: 2px solid var(--gold-dim);
  background: linear-gradient(180deg, #5a4012 0%, #8b6914 35%, #d4a545 50%, #8b6914 65%, #5a4012 100%);
  color: #1a0e04; box-shadow: var(--shadow-button);
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.mm-no-players-btn.primary:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #6b4f10 0%, #d4a545 35%, #f0c860 50%, #d4a545 65%, #6b4f10 100%);
  box-shadow: var(--shadow-glow), var(--shadow-button);
}
.mm-no-players-btn.secondary {
  border: 2px solid rgba(212,165,69,0.25);
  background: rgba(0,0,0,0.4); color: var(--parchment-dark);
}
.mm-no-players-btn.secondary:hover {
  border-color: var(--gold); color: var(--gold-bright);
  background: rgba(30,20,8,0.6);
}

/* Responsive matchmaking */
@media (max-width: 600px) {
  .mm-title { font-size: 1.4rem; }
  .mm-timer { font-size: 2rem; margin-bottom: 14px; }
  .mm-slots { gap: 10px; margin-bottom: 14px; }
  .mm-slot { width: 110px; min-height: 130px; padding: 10px 6px; overflow: visible; }
  .mm-slot-avatar-wrap { width: 70px; height: 70px; }
  .mm-slot-avatar { width: 52px; height: 52px; }
  .mm-slot-frame { width: 140px; height: 140px; }
  .mm-slot-placeholder { font-size: 1.8rem; }
  .mm-slot-name { font-size: 0.75rem; }
  .mm-hint { font-size: 0.9rem; margin-bottom: 8px; }
  .mm-cancel-btn { font-size: 0.85rem; padding: 8px 24px; }
  .room-chat.mm-chat { margin: 6px auto 10px; max-width: 90vw; }
}

/* Find game button special styling */
.find-game-btn {
  font-size: 1.3rem !important;
  letter-spacing: 2px;
  padding: 16px 48px !important;
}

/* ===================== PLACEHOLDER PAGES ===================== */
.placeholder-page {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; text-align: center;
  animation: menuFadeIn 0.5s ease-out;
}

.placeholder-icon {
  font-size: 5rem; margin-bottom: 24px; opacity: 0.6;
  filter: drop-shadow(0 0 12px rgba(212,165,69,0.3));
}

.placeholder-title {
  font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700;
  color: var(--gold); letter-spacing: 4px; margin-bottom: 12px;
  text-shadow: var(--text-shadow-title);
}

.placeholder-desc {
  font-family: 'Crimson Text', serif; font-style: italic;
  color: var(--parchment); font-size: 1.2rem;
  max-width: 400px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.placeholder-badge {
  display: inline-block; margin-top: 28px;
  padding: 12px 32px; border-radius: 4px;
  border: 2px solid var(--gold-dim);
  background: linear-gradient(180deg, rgba(60,40,15,0.85) 0%, rgba(25,15,5,0.9) 100%);
  font-family: 'Cinzel', serif; font-size: 0.85rem; font-weight: 600;
  color: var(--gold); letter-spacing: 3px;
  box-shadow: var(--shadow-button), 0 0 16px rgba(212,165,69,0.1);
  text-transform: uppercase;
}

/* ===================== SETTINGS PAGE ===================== */
.settings-page {
  position: relative;
  max-width: 680px; margin: 0 auto;
  padding: 36px 40px 56px;
  animation: menuFadeIn 0.4s ease-out;
}

.settings-page-title {
  font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 900;
  color: var(--gold); letter-spacing: 6px;
  text-align: center; margin-bottom: 32px;
  text-shadow: var(--text-shadow-title);
  position: relative;
  padding-bottom: 14px;
}
.settings-page-title::after {
  content: '';
  position: absolute; bottom: 0; left: 25%; right: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold), var(--gold-dim), transparent);
}

/* ===================== SETTINGS SECTION (Panel) ===================== */
.settings-section {
  background: linear-gradient(180deg, rgba(18,12,6,0.92) 0%, rgba(10,6,2,0.95) 100%);
  border: 2px solid;
  border-image: linear-gradient(180deg, #5a4012, #d4a545, #5a4012) 1;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-panel);
  position: relative;
}

/* Inner glow at top of each section */
.settings-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(212,165,69,0.04) 0%, transparent 100%);
  pointer-events: none;
}

/* Corner ornaments for sections */
.settings-section::after {
  content: '';
  position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
  background:
    radial-gradient(circle at 0% 0%, rgba(212,165,69,0.15) 0%, transparent 20px),
    radial-gradient(circle at 100% 0%, rgba(212,165,69,0.15) 0%, transparent 20px),
    radial-gradient(circle at 0% 100%, rgba(212,165,69,0.15) 0%, transparent 20px),
    radial-gradient(circle at 100% 100%, rgba(212,165,69,0.15) 0%, transparent 20px);
  pointer-events: none;
  z-index: 0;
}

.settings-section-title {
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700;
  color: var(--gold-bright); letter-spacing: 3px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.5);
  position: relative;
  z-index: 1;
}
.settings-section-title .sec-icon {
  font-size: 1.2rem;
}

.settings-divider {
  height: 1px; margin: 18px 0;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  position: relative;
  z-index: 1;
}

/* ===================== NAME INPUT ===================== */
.settings-name-row {
  display: flex; align-items: center; gap: 12px;
  position: relative;
  z-index: 1;
}
.settings-name-label {
  font-family: 'Crimson Text', serif; font-size: 1.05rem;
  color: var(--parchment-dark); white-space: nowrap;
}
.settings-input {
  flex: 1; padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(212,165,69,0.2); border-radius: 4px;
  color: var(--parchment);
  font-family: 'Crimson Text', serif; font-size: 1.15rem;
  outline: none; transition: all 0.2s;
  box-shadow: var(--shadow-inset);
}
.settings-input:focus {
  border-color: var(--gold);
  box-shadow: var(--shadow-inset), 0 0 12px rgba(212,165,69,0.15);
}

/* ===================== SAVE BUTTON (Golden Metallic) ===================== */
.settings-save-btn {
  padding: 10px 24px; border-radius: 3px;
  border: 2px solid var(--gold-dim);
  background: linear-gradient(180deg, #5a4012 0%, #8b6914 40%, #d4a545 50%, #8b6914 60%, #5a4012 100%);
  color: #1a0e04;
  font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 2px; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
  box-shadow: var(--shadow-button);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  z-index: 1;
}
.settings-save-btn:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #6b4f10 0%, #d4a545 40%, #f0c860 50%, #d4a545 60%, #6b4f10 100%);
  box-shadow: var(--shadow-glow), var(--shadow-button);
}

/* ===================== SETTINGS GRID LABEL ===================== */
.settings-grid-label {
  font-family: 'Crimson Text', serif; font-size: 1rem;
  color: var(--parchment-dark); margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

/* ===================== PROFILE CARDS ===================== */
.settings-profile-links {
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  z-index: 1;
}
.settings-profile-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 4px;
  border: 1px solid rgba(212,165,69,0.15);
  background: rgba(0,0,0,0.35);
  cursor: pointer; transition: all 0.25s;
  width: 100%; text-align: left;
  box-shadow: var(--shadow-inset);
}
.settings-profile-card:hover {
  border-color: var(--gold-dim);
  background: rgba(212,165,69,0.06);
  box-shadow: 0 0 12px rgba(212,165,69,0.1), var(--shadow-inset);
  transform: translateX(4px);
}
.spc-preview {
  width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--gold-dim);
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.spc-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.spc-medal-preview {
  border-radius: 6px;
}
.spc-label-wrap {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.spc-label {
  flex: 1;
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600;
  color: var(--parchment);
  letter-spacing: 1px;
}
.spc-note {
  font-family: 'Crimson Text', serif; font-size: 0.78rem; font-style: italic;
  color: var(--parchment-dark); opacity: 0.7;
}
.spc-arrow {
  font-size: 0.85rem; color: var(--gold-dim);
  transition: transform 0.2s;
}
.settings-profile-card:hover .spc-arrow {
  transform: translateX(3px);
  color: var(--gold);
}

/* ===================== PICKER SUB-PAGE ===================== */
.picker-page {
  position: relative;
}
.picker-back {
  display: inline-flex; align-items: center;
  padding: 10px 0; margin-bottom: 8px;
  border: none; background: none;
  font-family: 'Cinzel', serif; font-size: 1rem;
  color: var(--parchment-dark); cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 1px;
}
.picker-back::before {
  content: '\25C0'; /* ◀ */
  margin-right: 8px;
  font-size: 0.75rem;
}
.picker-back:hover { color: var(--gold); transform: translateX(-3px); }

/* ===================== AVATAR PNG GRID ===================== */
.avatar-png-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
}
.avatar-png-option {
  aspect-ratio: 1; border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(212,165,69,0.15);
  cursor: pointer; transition: all 0.2s;
  padding: 0;
  box-shadow: var(--shadow-inset);
}
.avatar-png-option img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.avatar-png-option:hover {
  border-color: var(--gold-dim);
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(212,165,69,0.15);
}
.avatar-png-option.active {
  border-color: var(--gold-bright);
  border-width: 3px;
  box-shadow: 0 0 16px var(--gold-glow), 0 0 4px var(--gold-glow);
  transform: scale(1.05);
}

/* ===================== FLAG GRID ===================== */
.medal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}
.medal-option {
  height: 72px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(212,165,69,0.15);
  cursor: pointer; transition: all 0.2s;
  box-shadow: var(--shadow-inset);
}
.medal-option:hover {
  border-color: var(--gold-dim);
  background: rgba(212,165,69,0.06);
}
.medal-option.active {
  border-color: var(--gold-bright);
  background: rgba(212,165,69,0.1);
  box-shadow: 0 0 12px var(--gold-glow);
}
.medal-option svg { display: block; }

/* ===================== FRAME PNG GRID ===================== */
.frame-png-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
.frame-png-option {
  aspect-ratio: 4/3; border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(212,165,69,0.15);
  cursor: pointer; transition: all 0.2s;
  padding: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-inset);
}
.frame-png-option img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
.frame-png-option:hover {
  border-color: var(--gold-dim);
  transform: scale(1.04);
  background: rgba(212,165,69,0.04);
}
.frame-png-option.active {
  border-color: var(--gold-bright);
  border-width: 3px;
  box-shadow: 0 0 16px var(--gold-glow);
  transform: scale(1.04);
  background: rgba(212,165,69,0.06);
}

/* --- Frame preview in profile card --- */
.spc-frame-preview {
  border-radius: 6px; border: none;
  background: transparent;
}
.spc-frame-preview img {
  width: 100%; height: 100%; object-fit: contain;
}

/* --- Flag grid large (sub-page) --- */
.medal-grid-large {
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 14px;
}
.medal-grid-large .medal-option {
  height: 90px;
}

/* ===================== FLAG STYLE PICKER (profile) ===================== */
/* Preview — flag + emblem side by side */
.flag-preview {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin: 16px 0 24px; padding: 20px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(212,165,69,0.2); border-radius: 8px;
}
.flag-preview-flag {
  height: 200px; width: auto; object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6));
}
.flag-preview-emblem {
  width: 120px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(212,165,69,0.5));
}

/* Grid — 3 columns, each showing emblem + flag */
.flag-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}
.flag-picker-option {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-radius: 6px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(212,165,69,0.15);
  cursor: pointer; transition: all 0.2s;
}
.flag-picker-option:hover {
  border-color: var(--gold-dim);
  background: rgba(212,165,69,0.06);
  transform: scale(1.03);
}
.flag-picker-option.active {
  border-color: var(--gold-bright);
  background: rgba(212,165,69,0.1);
  box-shadow: 0 0 14px var(--gold-glow);
}
.flag-picker-emblem {
  width: 100px; height: 100px; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.flag-picker-flag {
  height: 160px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* ===================== FULLSCREEN PREVIEW OVERLAY ===================== */
.fullscreen-preview-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fullscreen-preview-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.fullscreen-preview-img {
  position: relative; z-index: 1;
  max-height: 70vh; max-width: 80vw;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(212,165,69,0.3));
  animation: fpFadeIn 0.3s ease-out;
}
/* Flag fullscreen: emblem + flag side by side */
.flag-fullscreen-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 40px;
  animation: fpFadeIn 0.3s ease-out;
}
.flag-fullscreen-emblem {
  width: 50vh; height: 50vh; object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(212,165,69,0.5));
}
.flag-fullscreen-flag {
  height: 85vh; width: auto; object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
}
.fullscreen-preview-actions {
  position: relative; z-index: 1;
  display: flex; gap: 16px; margin-top: 24px;
}
.fullscreen-preview-confirm {
  padding: 12px 36px; border: none; border-radius: 6px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700;
  background: linear-gradient(135deg, #c8a64a, #a07828);
  color: #fff; letter-spacing: 1px;
  box-shadow: 0 2px 12px rgba(212,165,69,0.3);
  transition: all 0.2s;
}
.fullscreen-preview-confirm:hover {
  background: linear-gradient(135deg, #d4b55a, #b08a30);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(212,165,69,0.4);
}
.fullscreen-preview-cancel {
  padding: 12px 36px; border: 1px solid rgba(212,165,69,0.3); border-radius: 6px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700;
  background: rgba(0,0,0,0.5);
  color: var(--parchment); letter-spacing: 1px;
  transition: all 0.2s;
}
.fullscreen-preview-cancel:hover {
  border-color: rgba(212,165,69,0.5);
  background: rgba(0,0,0,0.7);
}
@keyframes fpFadeIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (max-width: 700px) {
  .flag-fullscreen-content { flex-direction: column; gap: 16px; }
  .flag-fullscreen-emblem { width: 100px; height: 100px; }
  .flag-fullscreen-flag { height: 35vh; }
  .fullscreen-preview-img { max-height: 55vh; }
  .fullscreen-preview-actions { gap: 10px; }
  .fullscreen-preview-confirm, .fullscreen-preview-cancel { padding: 10px 24px; font-size: 0.9rem; }
}

/* ===================== VOLUME SLIDER ===================== */
.volume-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.volume-row:last-child { margin-bottom: 0; }
.volume-label {
  font-family: 'Crimson Text', serif; font-size: 1rem;
  color: var(--parchment-dark); min-width: 130px;
}
.volume-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  outline: none; cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #f0c860, #d4a545, #8b6914);
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 8px rgba(212,165,69,0.4);
}
.volume-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #f0c860, #d4a545, #8b6914);
  cursor: pointer; border: 2px solid rgba(0, 0, 0, 0.4);
}
.volume-value {
  font-family: 'Cinzel', serif; font-size: 0.85rem;
  color: var(--gold); min-width: 36px; text-align: right;
}

/* ===================== FULLSCREEN TOGGLE BUTTON ===================== */
.settings-fullscreen-btn {
  width: 100%; padding: 14px 24px;
  border-radius: 4px;
  border: 2px solid rgba(212,165,69,0.25);
  background: rgba(0,0,0,0.4);
  color: var(--gold);
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: var(--shadow-inset);
  letter-spacing: 3px; text-transform: uppercase;
  position: relative; z-index: 1;
}
.settings-fullscreen-btn .fullscreen-btn-icon {
  font-size: 1.4rem; line-height: 1;
}
.settings-fullscreen-btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(212,165,69,0.08);
  box-shadow: 0 0 16px rgba(212,165,69,0.15), var(--shadow-inset);
}
.settings-fullscreen-btn.active {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(60,40,15,0.5) 0%, rgba(30,18,6,0.6) 100%);
  box-shadow: 0 0 20px rgba(212,165,69,0.2), var(--shadow-inset);
  text-shadow: var(--text-shadow-glow);
}

/* ===================== LANGUAGE BUTTONS ===================== */
.settings-lang-btns {
  display: flex; gap: 10px; flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.settings-lang-btn {
  padding: 12px 28px; border-radius: 3px;
  border: 2px solid rgba(212,165,69,0.2);
  background: rgba(0,0,0,0.4);
  color: var(--parchment-dark);
  font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: all 0.25s;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-inset);
  letter-spacing: 1px;
}
.settings-lang-btn:hover {
  border-color: var(--gold-dim);
  color: var(--parchment);
  background: rgba(212,165,69,0.06);
}
.settings-lang-btn.active {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(60,40,15,0.6) 0%, rgba(30,18,6,0.7) 100%);
  box-shadow: 0 0 16px rgba(212,165,69,0.15), var(--shadow-inset);
  text-shadow: var(--text-shadow-glow);
}

/* ===================== FAQ ACCORDION ===================== */
.faq-item {
  border: 1px solid rgba(212,165,69,0.12); border-radius: 4px;
  margin-bottom: 6px; overflow: hidden;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer;
  font-family: 'Crimson Text', serif; font-size: 1.05rem;
  color: var(--parchment); background: rgba(0,0,0,0.3);
  border: none; width: 100%; text-align: left;
  transition: all 0.2s;
}
.faq-question:hover {
  background: rgba(212,165,69,0.06);
  color: var(--gold);
}
.faq-arrow {
  font-size: 0.85rem; color: var(--gold-dim);
  transition: transform 0.3s;
}
.faq-item.open .faq-arrow { transform: rotate(90deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 18px;
  font-family: 'Crimson Text', serif; font-size: 1rem;
  color: var(--parchment-dark); line-height: 1.6;
}
.faq-item.open .faq-answer {
  max-height: 200px;
  padding: 0 18px 16px;
}

/* ===================== CONTACT ===================== */
.settings-contact-text {
  font-family: 'Crimson Text', serif; font-size: 1rem;
  color: var(--parchment-dark); margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.settings-contact-email {
  font-family: 'Cinzel', serif; font-size: 1rem;
  color: var(--gold); letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

/* ===================== SIGN OUT ===================== */
.settings-signout {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px;
  border: 2px solid rgba(196,48,48,0.2); border-radius: 4px;
  background: rgba(0,0,0,0.3);
  color: var(--parchment-dark);
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 2px; cursor: pointer;
  transition: all 0.25s;
  box-shadow: var(--shadow-inset);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.settings-signout:hover {
  border-color: var(--red); color: var(--red);
  background: rgba(196,48,48,0.12);
  box-shadow: 0 0 16px var(--red-glow);
}

/* ===================== TOAST ===================== */
.settings-toast {
  position: fixed; top: 36px; left: 50%;
  transform: translateX(-50%) translateY(-30px);
  padding: 18px 48px; border-radius: 5px;
  background: rgba(8, 5, 2, 0.96);
  border: 2px solid var(--gold-bright);
  color: var(--gold-bright);
  font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: all 0.35s ease;
  z-index: 999;
  box-shadow: 0 0 40px var(--gold-glow), 0 4px 20px rgba(0,0,0,0.6);
  text-shadow: 0 0 10px rgba(212,165,69,0.4), 0 1px 3px rgba(0,0,0,0.6);
}
.settings-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ===================== PWA INSTALL SECTION ===================== */
.pwa-install-body {
  display: flex; flex-direction: column; gap: 18px;
  align-items: center;
}
.pwa-install-row {
  display: flex; align-items: center; gap: 18px;
  width: 100%;
}
.pwa-install-icon {
  width: 72px; height: 72px; border-radius: 14px;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 20px rgba(212,165,69,0.1);
  flex-shrink: 0;
  background: #0e0c08;
}
.pwa-install-info {
  flex: 1; min-width: 0;
}
.pwa-install-name {
  font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--gold-bright); letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(212,165,69,0.3);
  margin-bottom: 4px;
}
.pwa-install-desc {
  font-family: 'Crimson Text', serif; font-size: 0.95rem;
  color: rgba(200,169,110,0.7); line-height: 1.4;
}
.pwa-install-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 24px;
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); cursor: pointer;
  background: linear-gradient(180deg, rgba(212,165,69,0.08) 0%, rgba(212,165,69,0.02) 100%);
  border: 2px solid var(--gold-dim);
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative; overflow: hidden;
}
.pwa-install-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(212,165,69,0.06) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.pwa-install-btn:hover:not(:disabled)::before { opacity: 1; }
.pwa-install-btn:hover:not(:disabled) {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 20px rgba(212,165,69,0.2), inset 0 0 20px rgba(212,165,69,0.05);
  transform: translateY(-1px);
}
.pwa-install-btn:active:not(:disabled) {
  transform: translateY(0); box-shadow: none;
}
.pwa-install-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.pwa-install-btn.ready {
  opacity: 1;
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(212,165,69,0.15) 0%, rgba(212,165,69,0.05) 100%);
  animation: pwaReadyPulse 2.5s ease-in-out infinite;
}
.pwa-install-btn.installed {
  opacity: 0.7;
  border-color: #4a7c3f;
  color: #7cbf6e;
  background: linear-gradient(180deg, rgba(74,124,63,0.12) 0%, rgba(74,124,63,0.04) 100%);
}
.pwa-install-btn-icon {
  font-size: 1.3rem; line-height: 1;
}
.pwa-install-btn.installed .pwa-install-btn-icon::before {
  content: '\2714'; /* checkmark */
}

@keyframes pwaReadyPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212,165,69,0.1); }
  50% { box-shadow: 0 0 24px rgba(212,165,69,0.25), inset 0 0 12px rgba(212,165,69,0.06); }
}

/* ===================== PROFILE PANEL (Slide-in) ===================== */
.profile-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(2px);
}
.profile-panel-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.profile-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 420px;
  z-index: 95;
  background:
    linear-gradient(180deg,
      rgba(14,12,8,0.98) 0%,
      rgba(10,8,4,0.99) 40%,
      rgba(8,5,2,0.99) 100%);
  border-right: 3px solid;
  border-image: linear-gradient(180deg, #5a4012, #d4a545 20%, #f0c860 50%, #d4a545 80%, #5a4012) 1;
  box-shadow: 6px 0 40px rgba(0,0,0,0.8), 2px 0 12px rgba(212,165,69,0.08);
  transform: translateX(-110%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}
.profile-panel.open {
  transform: translateX(0);
}
.profile-panel--wide {
  width: 100vw !important;
  max-width: 100vw !important;
  border-right: none !important;
}

.profile-panel-inner {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 28px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,165,69,0.25) transparent;
}
.profile-panel-inner::-webkit-scrollbar { width: 5px; }
.profile-panel-inner::-webkit-scrollbar-track { background: transparent; }
.profile-panel-inner::-webkit-scrollbar-thumb {
  background: rgba(212,165,69,0.25); border-radius: 3px;
}

/* --- Close Button --- */
.profile-close-btn {
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: var(--parchment-dark);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  transition: all 0.25s;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.profile-close-btn:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(212,165,69,0.1);
  box-shadow: 0 0 12px rgba(212,165,69,0.2);
}

/* --- Back Button (sub-pages) --- */
.profile-back-btn {
  display: inline-flex; align-items: center;
  padding: 10px 0; margin-bottom: 10px;
  border: none; background: none;
  font-family: 'Cinzel', serif; font-size: 0.95rem;
  color: var(--parchment-dark); cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 1px;
}
.profile-back-btn::before {
  content: '\25C0'; /* ◀ */
  margin-right: 8px;
  font-size: 0.75rem;
}
.profile-back-btn:hover {
  color: var(--gold);
  transform: translateX(-3px);
}

/* --- Header: Large Avatar + Name --- */
.profile-header {
  display: flex; flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}
.profile-header::after {
  content: '';
  position: absolute; bottom: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold), var(--gold-dim), transparent);
}

.profile-avatar-large {
  width: 160px; height: 160px;
  position: relative;
  margin-bottom: 14px;
  overflow: visible;
}
.profile-avatar-large .avatar-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--avatar-size, 120px); height: var(--avatar-size, 120px);
  object-fit: cover; border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.profile-avatar-large .frame-img {
  position: absolute;
  top: calc(50% + var(--frame-offset-y, 0px));
  left: calc(50% + var(--frame-offset-x, 0px));
  transform: translate(-50%, -50%);
  width: var(--frame-size, 300px); height: var(--frame-size, 300px);
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(212,165,69,0.3)) drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* --- Name Display & Edit --- */
.profile-name-area {
  text-align: center;
  width: 100%;
}
.profile-name {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem; font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(212,165,69,0.3), 0 2px 4px rgba(0,0,0,0.8);
  margin-bottom: 8px;
}
.profile-name-edit {
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
}
.profile-name-input {
  width: 200px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(212,165,69,0.2);
  border-radius: 4px;
  color: var(--parchment);
  font-family: 'Crimson Text', serif; font-size: 1.1rem;
  outline: none; transition: all 0.2s;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.profile-name-input:focus {
  border-color: var(--gold);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(212,165,69,0.15);
}
.profile-name-save {
  width: 36px; height: 36px;
  border: 2px solid var(--gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, #5a4012, #8b6914 50%, #5a4012);
  color: #1a0e04;
  font-size: 1.1rem; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.profile-name-save:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #6b4f10, #d4a545 50%, #6b4f10);
  box-shadow: 0 0 12px rgba(212,165,69,0.3);
}

/* --- Edit Section (Avatar/Flag/Frame cards) --- */
.profile-edit-section {
  display: flex; gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

.profile-edit-card {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 12px 4px;
  border-radius: 10px;
  border: 1px solid rgba(212,165,69,0.2);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.25s;
  font-family: 'Cinzel', serif; font-size: 0.65rem; font-weight: 600;
  color: var(--parchment-dark);
  letter-spacing: 1px;
  text-align: center;
  min-height: 160px;
}
.profile-edit-card:hover {
  border-color: var(--gold-dim);
  background: rgba(212,165,69,0.06);
  color: var(--parchment);
  transform: translateY(-2px);
}

/* Avatar — chenar circular */
.pec-preview {
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold-dim);
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pec-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Medal — fara chenar */
.pec-preview.pec-medal {
  width: 100px; height: 100px;
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: visible;
}
.pec-preview.pec-medal img {
  width: 100px; height: 100px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
/* Frame — container mic, imagine mare (overflow visible) */
.pec-preview.pec-frame {
  width: 100px; height: 100px;
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: visible;
  position: relative;
}
.pec-preview.pec-frame img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 140px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.pec-arrow {
  display: none;
}

/* --- Section Titles --- */
.profile-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem; font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212,165,69,0.15);
  text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.5);
}

/* --- Stats Grid --- */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.profile-stat {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 14px 8px;
  border-radius: 6px;
  border: 1px solid rgba(212,165,69,0.1);
  background: rgba(0,0,0,0.3);
  transition: all 0.2s;
}
.profile-stat:hover {
  border-color: rgba(212,165,69,0.25);
  background: rgba(0,0,0,0.4);
}
.profile-stat-value {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem; font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(212,165,69,0.3);
  line-height: 1;
}
.profile-stat-label {
  font-family: 'Crimson Text', serif;
  font-size: 0.78rem;
  color: var(--parchment-dark);
  text-align: center;
  line-height: 1.2;
}

/* Win stat — green accent */
.profile-stat.stat-win .profile-stat-value {
  color: #7ecc7e;
  text-shadow: 0 0 8px rgba(80,200,80,0.3);
}
/* Loss stat — red accent */
.profile-stat.stat-loss .profile-stat-value {
  color: #cc7e7e;
  text-shadow: 0 0 8px rgba(200,80,80,0.3);
}

/* --- Trophy Grid --- */
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.trophy-badge {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 16px 8px;
  border-radius: 8px;
  border: 1px solid rgba(212,165,69,0.1);
  background: rgba(0,0,0,0.3);
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Locked trophy — greyed out */
.trophy-badge.locked {
  opacity: 0.4;
  filter: grayscale(0.8);
}
.trophy-badge.locked .trophy-icon {
  filter: grayscale(1) brightness(0.5);
}

/* Unlocked trophy — gold glow */
.trophy-badge.unlocked {
  border-color: rgba(212,165,69,0.35);
  background: linear-gradient(180deg, rgba(60,40,15,0.5) 0%, rgba(20,14,6,0.6) 100%);
  box-shadow: 0 0 12px rgba(212,165,69,0.1);
}
.trophy-badge.unlocked::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(212,165,69,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.trophy-badge.unlocked:hover {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212,165,69,0.2);
  transform: translateY(-2px);
}

.trophy-icon {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.trophy-badge.unlocked .trophy-icon {
  filter: drop-shadow(0 0 6px rgba(212,165,69,0.4)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.trophy-name {
  font-family: 'Crimson Text', serif;
  font-size: 0.72rem;
  color: var(--parchment-dark);
  line-height: 1.2;
}
.trophy-badge.unlocked .trophy-name {
  color: var(--parchment);
}

/* ===================== CHARACTER SHOWCASE (Profile Main) ===================== */

.character-showcase {
  position: relative;
  margin: 0 -8px 24px;
  padding: 20px 16px;
  border-radius: 10px;
  border: 1px solid rgba(212,165,69,0.18);
  background:
    radial-gradient(ellipse at 50% 90%, rgba(60,30,10,0.35) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(10,6,2,0.6) 100%);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 260px;
  transition: all 0.35s ease;
}
.character-showcase:hover {
  border-color: rgba(212,165,69,0.4);
  box-shadow: 0 0 24px rgba(212,165,69,0.1), inset 0 0 40px rgba(212,165,69,0.03);
}
.character-showcase-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(212,165,69,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.character-showcase-img {
  position: relative;
  z-index: 2;
  height: 240px;
  max-width: 80%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(212,165,69,0.08));
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), filter 0.3s;
}
.character-showcase:hover .character-showcase-img {
  transform: scale(1.03) translateY(-3px);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(212,165,69,0.15));
}

.character-showcase-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}
.character-showcase-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}
.character-showcase-change {
  font-family: 'Crimson Text', serif;
  font-size: 0.78rem;
  color: var(--parchment-dark);
  opacity: 0.6;
  transition: all 0.2s;
}
.character-showcase:hover .character-showcase-change {
  opacity: 1;
  color: var(--gold);
}

/* ===================== CHARACTER PREVIEW PAGE (Full Body Picker) ===================== */

/* --- Stage: Big preview with arrows --- */
.char-preview-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -10px 20px;
  padding: 20px 0;
  min-height: 320px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(40,25,8,0.5) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
  border: 1px solid rgba(212,165,69,0.1);
  overflow: hidden;
}

.char-preview-figure {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 280px;
}
.char-preview-glow {
  position: absolute;
  bottom: -20px; left: 50%;
  transform: translateX(-50%);
  width: 180px; height: 80px;
  background: radial-gradient(ellipse, rgba(212,165,69,0.12) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(10px);
}
.char-preview-img {
  position: relative;
  z-index: 2;
  max-height: 270px;
  max-width: 220px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.7)) drop-shadow(0 0 20px rgba(212,165,69,0.06));
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.22,0.61,0.36,1);
}

/* --- Navigation Arrows --- */
.char-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(212,165,69,0.2);
  background: rgba(0,0,0,0.6);
  color: var(--parchment-dark);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
  backdrop-filter: blur(4px);
}
.char-arrow-left { left: 10px; }
.char-arrow-right { right: 10px; }
.char-arrow:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(212,165,69,0.12);
  box-shadow: 0 0 16px rgba(212,165,69,0.2);
}
.char-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

/* --- Counter --- */
.char-preview-counter {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: var(--parchment-dark);
  letter-spacing: 3px;
  opacity: 0.5;
}

/* --- Thumbnail Grid --- */
.char-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,165,69,0.25) transparent;
}
.char-thumb-grid::-webkit-scrollbar { width: 4px; }
.char-thumb-grid::-webkit-scrollbar-track { background: transparent; }
.char-thumb-grid::-webkit-scrollbar-thumb {
  background: rgba(212,165,69,0.25);
  border-radius: 3px;
}

.char-thumb {
  aspect-ratio: 3/4;
  border: 2px solid rgba(212,165,69,0.12);
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  padding: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s;
}
.char-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: top center;
  filter: brightness(0.85);
  transition: filter 0.2s;
}
.char-thumb:hover {
  border-color: rgba(212,165,69,0.4);
  background: rgba(212,165,69,0.06);
  transform: translateY(-2px);
}
.char-thumb:hover img {
  filter: brightness(1);
}
.char-thumb.active {
  border-color: var(--gold);
  background: rgba(212,165,69,0.1);
  box-shadow: 0 0 14px rgba(212,165,69,0.2), inset 0 0 6px rgba(212,165,69,0.08);
}
.char-thumb.active img {
  filter: brightness(1.05);
}

/* ===================== PROFILE PANEL RESPONSIVE ===================== */
@media (max-width: 500px) {
  .profile-panel {
    width: 100%;
  }
}
@media (max-height: 600px) {
  .profile-panel-inner {
    padding: 18px 18px 30px;
  }
  .profile-avatar-large {
    width: 120px; height: 120px;
    margin-bottom: 8px;
  }
  .profile-stats-grid {
    gap: 6px;
  }
  .profile-stat {
    padding: 10px 6px;
  }
  .trophy-grid {
    gap: 6px;
  }
  .trophy-badge {
    padding: 10px 4px;
  }
  .character-showcase {
    min-height: 200px;
    margin: 0 -4px 18px;
  }
  .character-showcase-img {
    height: 180px;
  }
  .char-preview-stage {
    min-height: 240px;
  }
  .char-preview-img {
    max-height: 210px;
  }
  .char-thumb-grid {
    grid-template-columns: repeat(3, 1fr);
    max-height: 60vh;
  }
}

/* ===================== CUSTOM BATTLE MENU ===================== */
.custom-menu, .custom-create-page, .custom-join-page, .custom-lobby-page {
  position: relative;
  max-width: 680px; margin: 0 auto;
  padding: 36px 40px 56px;
  animation: menuFadeIn 0.4s ease-out;
}

.custom-title {
  font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 900;
  color: var(--gold); letter-spacing: 6px;
  text-align: center; margin-bottom: 32px;
  text-shadow: var(--text-shadow-title);
  position: relative;
  padding-bottom: 14px;
}
.custom-title::after {
  content: '';
  position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold), var(--gold-dim), transparent);
}

/* --- Main Menu: Two Big Buttons --- */
.custom-main-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 680px;
  margin: 40px auto 0;
}

.custom-big-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 70px 36px;
  border-radius: 10px;
  border: 2px solid rgba(212,165,69,0.2);
  background: linear-gradient(180deg, rgba(18,12,6,0.92) 0%, rgba(10,6,2,0.95) 100%);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: var(--shadow-panel);
  position: relative;
  overflow: hidden;
}
.custom-big-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(212,165,69,0.04) 0%, transparent 100%);
  pointer-events: none;
}
.custom-big-btn:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(40,28,12,0.92) 0%, rgba(18,12,6,0.95) 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(212,165,69,0.12);
}

.custom-big-icon {
  font-size: 4.5rem;
  filter: drop-shadow(0 0 12px rgba(212,165,69,0.3)) drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}

.custom-big-label {
  font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--gold-bright); letter-spacing: 4px;
  text-shadow: var(--text-shadow-glow);
}

.custom-big-desc {
  font-family: 'Crimson Text', serif; font-size: 1.05rem;
  color: var(--parchment-dark); line-height: 1.4;
  max-width: 240px;
}

/* --- Form Elements --- */
.custom-form-row {
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.custom-form-row:last-child { margin-bottom: 0; }

.custom-form-label {
  display: block;
  font-family: 'Crimson Text', serif; font-size: 1rem;
  color: var(--parchment-dark);
  margin-bottom: 8px;
}

.custom-form-hint {
  display: block;
  font-family: 'Crimson Text', serif; font-size: 0.78rem;
  color: rgba(200,169,110,0.5);
  margin-top: 4px;
  font-style: italic;
}

.custom-btn-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* Room ID row with regenerate button */
.custom-room-id-row {
  display: flex; gap: 8px; align-items: center;
}
.custom-room-id-input {
  flex: 1;
}
.custom-regenerate-btn {
  width: 42px; height: 42px;
  border: 2px solid rgba(212,165,69,0.2);
  border-radius: 4px;
  background: rgba(0,0,0,0.4);
  color: var(--gold-dim);
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.25s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.custom-regenerate-btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(212,165,69,0.08);
  transform: rotate(180deg);
}

/* AI config sub-section */
.custom-ai-config {
  padding: 12px 0 0;
  border-top: 1px solid rgba(212,165,69,0.08);
  margin-top: 12px;
}

/* --- Lobby --- */
.custom-room-info {
  text-align: center;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.custom-room-code {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 28px;
  border-radius: 8px;
  border: 2px solid var(--gold-dim);
  background: rgba(0,0,0,0.5);
}
.custom-room-code-label {
  font-family: 'Crimson Text', serif; font-size: 1rem;
  color: var(--parchment-dark);
}
.custom-room-code-value {
  font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 4px;
  text-shadow: 0 0 12px rgba(212,165,69,0.4);
}
.custom-copy-all-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 10px 22px;
  border-radius: 6px;
  border: 1px solid rgba(212,165,69,0.3);
  background: rgba(212,165,69,0.08);
  color: var(--gold);
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}
.custom-copy-all-btn:hover {
  border-color: var(--gold-bright);
  background: rgba(212,165,69,0.15);
  color: var(--gold-bright);
}

/* --- Player Slots --- */
.custom-players-list {
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}

.custom-player-slot {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid rgba(212,165,69,0.12);
  background: rgba(0,0,0,0.3);
  transition: all 0.2s;
}
.custom-player-slot.host {
  border-color: rgba(212,165,69,0.3);
  background: rgba(212,165,69,0.05);
}
.custom-player-slot.empty {
  opacity: 0.45;
}

.custom-player-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold-dim);
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.custom-player-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.custom-player-avatar.empty-avatar {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 1.2rem;
  color: var(--parchment-dark);
  border-color: rgba(212,165,69,0.15);
}

.custom-player-info {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.custom-player-name {
  font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600;
  color: var(--parchment);
  letter-spacing: 1px;
}
.custom-player-name.empty-name {
  color: var(--parchment-dark);
  font-style: italic;
  font-family: 'Crimson Text', serif;
  font-weight: 400;
}

.custom-player-badge {
  font-family: 'Crimson Text', serif; font-size: 0.75rem;
  letter-spacing: 1px;
}
.host-badge {
  color: var(--gold);
  text-shadow: 0 0 6px rgba(212,165,69,0.3);
}

.custom-player-status {
  font-size: 1.2rem;
}
.custom-player-status.ready {
  color: #7ecc7e;
  text-shadow: 0 0 6px rgba(80,200,80,0.4);
}

/* Ready toggle button for non-host players */
.custom-ready-btn {
  background: rgba(0,0,0,0.3); border: 2px solid rgba(212,165,69,0.3); border-radius: 6px;
  padding: 8px 16px; font-family: 'Cinzel', serif; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 1px; cursor: pointer; transition: all 0.2s; text-transform: uppercase;
}
.custom-ready-btn.not-ready {
  color: #cc8833; border-color: rgba(204,136,51,0.4);
}
.custom-ready-btn.not-ready:hover {
  background: rgba(204,136,51,0.15); border-color: #cc8833; color: #ffaa44;
}
.custom-ready-btn.ready {
  color: #7ecc7e; border-color: rgba(80,200,80,0.4);
  text-shadow: 0 0 6px rgba(80,200,80,0.4);
}
.custom-ready-btn.ready:hover {
  background: rgba(80,200,80,0.1); border-color: #7ecc7e;
}

/* --- Config Summary (in lobby) --- */
.custom-config-summary {
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
.ccs-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-family: 'Crimson Text', serif; font-size: 0.95rem;
  color: var(--parchment-dark);
  border-bottom: 1px solid rgba(212,165,69,0.06);
}
.ccs-row:last-child { border-bottom: none; }
.ccs-row span:last-child {
  color: var(--parchment);
  font-weight: 600;
}

/* --- Waiting spinner --- */
.custom-waiting-host {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 24px;
  font-family: 'Crimson Text', serif; font-size: 1.1rem;
  color: var(--parchment-dark);
  font-style: italic;
}
.custom-waiting-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(212,165,69,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: customSpin 0.8s linear infinite;
}
@keyframes customSpin {
  to { transform: rotate(360deg); }
}

/* --- Golden Start Button (reused) --- */
.golden-btn {
  border: 2px solid var(--gold-dim);
  background: linear-gradient(180deg, #5a4012 0%, #8b6914 40%, #d4a545 50%, #8b6914 60%, #5a4012 100%);
  color: #1a0e04;
  font-family: 'Cinzel', serif; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-button);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 4px;
}
.golden-btn:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #6b4f10 0%, #d4a545 40%, #f0c860 50%, #d4a545 60%, #6b4f10 100%);
  box-shadow: var(--shadow-glow), var(--shadow-button);
}

/* ===================== SLIDE PANEL (Generic, from right) ===================== */
.slide-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(2px);
}
.slide-panel-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.slide-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  z-index: 95;
  background:
    linear-gradient(180deg,
      rgba(14,12,8,0.98) 0%,
      rgba(10,8,4,0.99) 40%,
      rgba(8,5,2,0.99) 100%);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #5a4012, #d4a545 20%, #f0c860 50%, #d4a545 80%, #5a4012) 1;
  box-shadow: -6px 0 40px rgba(0,0,0,0.8), -2px 0 12px rgba(212,165,69,0.08);
  transform: translateX(110%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}
.slide-panel.open {
  transform: translateX(0);
}

.slide-panel-inner {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 24px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,165,69,0.25) transparent;
}

.slide-panel-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: var(--parchment-dark);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.slide-panel-close:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,165,69,0.1);
}

/* Slide panel preview content */
.sp-content {
  display: flex; flex-direction: column;
  align-items: center;
  padding-top: 24px;
  gap: 20px;
}

.sp-preview {
  display: flex;
  align-items: center; justify-content: center;
  min-height: 180px;
}

.sp-preview-avatar-wrap {
  position: relative;
  width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}

.sp-preview-avatar {
  width: 139px; height: 139px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 48%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.sp-preview-frame {
  width: 357px; height: 357px;
  position: absolute;
  top: calc(50% + 9px); left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

.sp-preview-medal-wrap {
  display: flex;
  align-items: center; justify-content: center;
  padding: 20px;
}
.sp-preview-medal-wrap img {
  filter: drop-shadow(0 4px 16px rgba(212,165,69,0.3));
}

.sp-item-name {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 2px;
  text-shadow: var(--text-shadow-glow);
}

.sp-price {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Crimson Text', serif;
  font-size: 1.1rem;
}

.sp-status-free {
  color: var(--green);
  font-weight: 700;
  text-shadow: 0 0 8px var(--green-glow);
}

.sp-status-equipped {
  color: var(--gold-bright);
  font-weight: 700;
}

.sp-equip-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.shop-equip-btn {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 48px;
  border-radius: 6px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
}

.shop-equip-btn.equipped {
  border: 2px solid rgba(40,160,80,0.3);
  background: rgba(40,160,80,0.1);
  color: var(--green);
  cursor: default;
  opacity: 0.7;
}

@media (max-width: 500px) {
  .slide-panel { width: 100%; }
}

/* ===================== MIRABEL NPC (Menu Guide) ===================== */
.mirabel-npc {
  position: fixed;
  bottom: 16px;
  right: 20px;
  z-index: 60;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: mirabelFloat 3s ease-in-out infinite;
  transition: opacity 0.3s, transform 0.3s;
}
.mirabel-npc:hover {
  transform: scale(1.08);
}
.mirabel-npc:hover .mirabel-npc-bubble {
  opacity: 1;
}
.mirabel-npc-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) scale(0.8) !important;
}
.mirabel-npc-img {
  height: 400px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
  transition: filter 0.3s;
  transform-origin: bottom center;
  animation: mirabelSway 4s ease-in-out infinite;
}
.mirabel-npc:hover .mirabel-npc-img {
  filter: drop-shadow(0 4px 18px rgba(80,200,80,0.35));
  animation-play-state: paused;
}

@keyframes mirabelSway {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  25%  { transform: rotate(0.6deg) scaleY(1.003); }
  50%  { transform: rotate(0deg) scaleY(1.006); }
  75%  { transform: rotate(-0.6deg) scaleY(1.003); }
}

/* Speech bubble with rotating messages */
.mirabel-npc-bubble {
  position: absolute;
  top: 2%;
  right: 100%;
  margin-right: 8px;
  white-space: nowrap;
  background: rgba(12,18,8,0.92);
  border: 1px solid rgba(100,180,80,0.4);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  color: var(--parchment-light, #e8dcc4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 0 12px rgba(80,160,60,0.1), 0 2px 8px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
/* Arrow pointing right toward Mirabel */
.mirabel-npc-bubble::after {
  content: '';
  position: absolute;
  top: 14px;
  right: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid rgba(100,180,80,0.4);
}
.mirabel-npc-bubble::before {
  content: '';
  position: absolute;
  top: 15px;
  right: -5px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid rgba(12,18,8,0.92);
  z-index: 1;
}
.mirabel-npc-bubble.mirabel-bubble-visible {
  opacity: 1;
  transform: translateX(0);
}

@keyframes mirabelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Hide / Show toggle button */
.mirabel-hide-btn {
  position: fixed;
  bottom: 422px;
  right: 20px;
  z-index: 61;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(212,165,69,0.25);
  background: rgba(10,8,4,0.7);
  color: rgba(212,165,69,0.5);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.mirabel-hide-btn:hover {
  border-color: rgba(212,165,69,0.5);
  color: #d4a545;
  background: rgba(10,8,4,0.9);
}

/* ===================== MIRABEL GUIDE POPUP (Rules) ===================== */
.mirabel-guide-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: eventFadeIn 0.3s ease;
}
.mirabel-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
}
.mirabel-guide-panel {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(14,20,10,0.98) 0%, rgba(8,12,6,0.99) 100%);
  border: 2px solid rgba(100,180,80,0.4);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(80,160,60,0.15), 0 8px 32px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mirabel-guide-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(100,180,80,0.2);
  background: rgba(80,160,60,0.05);
}
.mirabel-guide-avatar {
  width: 65px;
  height: 65px;
  border-radius: 8px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.mirabel-guide-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #8cd468;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(100,200,80,0.3);
}
.mirabel-guide-subtitle {
  font-family: 'Crimson Text', serif;
  font-size: 0.9rem;
  color: rgba(140,212,104,0.5);
  font-style: italic;
}
.mirabel-guide-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(100,180,80,0.3);
  background: rgba(100,180,80,0.1);
  color: #8cd468;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.mirabel-guide-close:hover {
  background: rgba(100,180,80,0.2);
  border-color: #8cd468;
}
/* ── Mirabel Chatbot Layout ── */
.mchat-panel {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.mchat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,180,80,0.2) transparent;
  min-height: 120px;
}
/* Message bubbles */
.mchat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
  animation: mchatMsgIn 0.3s ease-out;
}
@keyframes mchatMsgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mchat-msg-mirabel {
  align-self: flex-start;
}
.mchat-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.mchat-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
  flex-shrink: 0;
  border: 1.5px solid rgba(100,180,80,0.3);
}
.mchat-msg-bubble {
  font-family: 'Crimson Text', serif;
  font-size: 1.12rem;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mchat-msg-mirabel .mchat-msg-bubble {
  background: rgba(80,160,60,0.12);
  border: 1px solid rgba(100,180,80,0.25);
  color: var(--parchment-light, #e8dcc4);
  border-bottom-left-radius: 4px;
}
.mchat-msg-user .mchat-msg-bubble {
  background: rgba(212,165,69,0.15);
  border: 1px solid rgba(212,165,69,0.3);
  color: var(--parchment-light, #e8dcc4);
  border-bottom-right-radius: 4px;
}

/* ── Chat Input Area (bottom) ── */
.mchat-input-area {
  border-top: 1px solid rgba(100,180,80,0.2);
  padding: 14px 18px 18px;
  background: rgba(80,160,60,0.03);
}
.mchat-prompt {
  font-family: 'Crimson Text', serif;
  font-size: 1.05rem;
  color: rgba(140,212,104,0.6);
  font-style: italic;
  margin-bottom: 10px;
  text-align: center;
}

/* Category buttons grid */
.mchat-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mchat-cat-btn {
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(100,180,80,0.25);
  background: rgba(80,160,60,0.08);
  color: var(--parchment-light, #e8dcc4);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  line-height: 1.3;
}
.mchat-cat-btn:hover {
  background: rgba(80,160,60,0.2);
  border-color: #8cd468;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(80,160,60,0.15);
}
.mchat-cat-btn:active {
  transform: translateY(0);
}

/* Question buttons list */
.mchat-questions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mchat-q-btn {
  font-family: 'Crimson Text', serif;
  font-size: 1.05rem;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212,165,69,0.2);
  background: rgba(212,165,69,0.06);
  color: var(--parchment-light, #e8dcc4);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  line-height: 1.4;
}
.mchat-q-btn:hover {
  background: rgba(212,165,69,0.15);
  border-color: rgba(212,165,69,0.5);
  transform: translateX(3px);
}
.mchat-q-btn:active {
  transform: translateX(0);
}

/* Back button */
.mchat-back-btn {
  display: block;
  margin-top: 10px;
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(100,180,80,0.2);
  background: transparent;
  color: rgba(140,212,104,0.7);
  cursor: pointer;
  transition: all 0.2s;
}
.mchat-back-btn:hover {
  color: #8cd468;
  border-color: rgba(100,180,80,0.4);
  background: rgba(80,160,60,0.08);
}

/* Header avatar animation in chat mode */
.mchat-header-avatar {
  transition: opacity 0.3s ease;
}

/* Legacy rules classes kept for backward compat */
.mirabel-guide-body {
  padding: 20px 24px 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,180,80,0.2) transparent;
}
.mirabel-guide-intro {
  font-family: 'Crimson Text', serif;
  font-size: 1.1rem;
  color: var(--parchment-light);
  line-height: 1.6;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(100,180,80,0.15);
  font-style: italic;
}
.mirabel-rule-section {
  margin-bottom: 18px;
}
.mirabel-rule-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #8cd468;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow: 0 0 6px rgba(100,200,80,0.2);
}
.mirabel-rule-text {
  font-family: 'Crimson Text', serif;
  font-size: 1.05rem;
  color: var(--parchment-light);
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Responsive — Mirabel NPC */
@media (max-width: 700px) {
  .mirabel-npc-img { height: 280px; }
  .mirabel-npc { bottom: 10px; right: 10px; }
  .mirabel-hide-btn { bottom: 296px; right: 10px; width: 22px; height: 22px; font-size: 0.65rem; }
  .mirabel-npc-bubble { font-size: 0.8rem; padding: 6px 10px; }
  .mirabel-guide-panel { width: 95%; max-height: 90vh; }
  .mirabel-guide-header { padding: 12px 16px; }
  .mirabel-guide-body { padding: 14px 16px 20px; }
  .mirabel-guide-avatar { width: 45px; height: 45px; }
  .mchat-categories { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .mchat-cat-btn { font-size: 0.88rem; padding: 8px 4px; }
  .mchat-messages { padding: 12px 14px; gap: 10px; }
  .mchat-input-area { padding: 10px 14px 14px; }
  .mchat-msg-bubble { font-size: 1.02rem; padding: 8px 12px; }
  .mchat-q-btn { font-size: 0.98rem; }
}
@media (max-height: 500px) {
  .mirabel-npc-img { height: 180px; }
  .mirabel-npc { bottom: 6px; right: 6px; }
  .mirabel-hide-btn { bottom: 192px; right: 6px; }
  .mirabel-npc-bubble { font-size: 0.75rem; padding: 5px 8px; }
}

/* ===================== ITEM SHOP ===================== */
.shop-page {
  position: relative;
  animation: menuFadeIn 0.5s ease-out;
  padding: 0;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.shop-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: var(--text-shadow-title);
  letter-spacing: 3px;
}

.shop-coin-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  background: rgba(212,165,69,0.08);
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 20px;
  padding: 6px 16px;
}

.shop-coin-amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(240,200,96,0.3);
}

.shop-coin-label {
  font-size: 0.85rem;
  color: var(--parchment-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Shop category cards — 3 columns */
.shop-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 780px;
  margin: 32px auto 0;
}

.shop-big-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  padding: 36px 20px;
  border-radius: 12px;
  border: 2px solid rgba(212,165,69,0.15);
  background: linear-gradient(180deg, rgba(18,12,6,0.92) 0%, rgba(10,6,2,0.95) 100%);
  cursor: pointer;
  transition: all 0.35s ease;
  text-align: center;
  box-shadow: var(--shadow-panel);
  position: relative;
  overflow: hidden;
}

.shop-big-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(180deg, rgba(212,165,69,0.05) 0%, transparent 100%);
  pointer-events: none;
}

.shop-big-btn:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(40,28,12,0.92) 0%, rgba(18,12,6,0.95) 100%);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 44px rgba(0,0,0,0.5), 0 0 28px rgba(212,165,69,0.12);
}

.shop-big-icon {
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
}

.shop-cat-preview {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.shop-cat-preview.shop-cat-frame {
  width: 130px; height: 130px;
  border-radius: 0;
  object-fit: contain;
}

.shop-big-label {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 3px;
  text-shadow: var(--text-shadow-glow);
}

.shop-big-desc {
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  color: var(--parchment-dark);
  line-height: 1.4;
  max-width: 200px;
}

.shop-big-count {
  font-family: 'Crimson Text', serif;
  font-size: 0.8rem;
  color: rgba(200,169,110,0.5);
  letter-spacing: 1px;
}

/* Collection preview */
.shop-collection {
  display: flex; flex-direction: column;
  align-items: center;
  margin-top: 40px;
  gap: 16px;
}

.shop-collection-title {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--parchment-dark);
  text-transform: uppercase;
  letter-spacing: 4px;
  position: relative;
}

.shop-collection-title::before,
.shop-collection-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,165,69,0.3));
}
.shop-collection-title::before { right: calc(100% + 12px); }
.shop-collection-title::after { left: calc(100% + 12px); transform: scaleX(-1); }

.shop-collection-items {
  display: flex;
  align-items: center;
  gap: 24px;
}

.shop-collection-item {
  display: flex; align-items: center; justify-content: center;
}

.shop-coll-avatar-wrap {
  position: relative;
  width: 90px; height: 90px;
}

.shop-coll-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.shop-coll-frame {
  width: 90px; height: 90px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.shop-coll-medal {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Shop category page title */
.shop-cat-title {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: var(--text-shadow-title);
  letter-spacing: 2px;
  margin-bottom: 24px;
}

/* Shop item grid — unified large cards (same size for all categories) */
.shop-item-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
}

.shop-item-card {
  position: relative;
  aspect-ratio: auto;
  min-height: 280px;
  border-radius: 10px;
  border: 2px solid rgba(212,165,69,0.15);
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px 40px;
  gap: 8px;
}

.shop-item-card img {
  width: 220px; height: 220px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}

/* Frame images — same 220px but object-fit contain */
.shop-item-card.shop-frame-card img {
  object-fit: contain;
}

/* Shimmer effect on hover */
.shop-item-card::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(transparent 0deg, rgba(212,165,69,0.08) 90deg, transparent 180deg);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
  pointer-events: none;
}

.shop-item-card:hover::before {
  animation: shopShimmer 2.5s linear infinite;
  opacity: 1;
}

@keyframes shopShimmer {
  to { transform: rotate(360deg); }
}

.shop-item-card:hover {
  border-color: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 0 20px var(--gold-glow), 0 4px 16px rgba(0,0,0,0.4);
  z-index: 2;
}

/* Equipped badge */
.shop-item-card.equipped {
  border-color: var(--green);
  box-shadow: 0 0 12px var(--green-glow);
}

.shop-item-card.equipped::after {
  content: '\2713';
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: var(--green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Responsive shop */
/* ── Item price tag on cards ── */
.shop-item-price {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  color: var(--gold-bright);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  padding: 16px 4px 5px;
  letter-spacing: 0.5px;
}

.shop-item-price.owned-label {
  color: #777;
  font-style: italic;
  font-weight: 400;
}

/* ── Owned (grayed out) ── */
.shop-item-card.owned {
  opacity: 0.45;
  border-color: rgba(100,100,100,0.2);
  cursor: default;
  filter: grayscale(0.4);
}
.shop-item-card.owned:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(100,100,100,0.2);
}
.shop-item-card.owned::before { display: none; }

/* ── In-cart (selected to buy) ── */
.shop-item-card.in-cart {
  border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(240,200,96,0.35), inset 0 0 20px rgba(240,200,96,0.06);
}
.shop-item-card.in-cart::after {
  content: '+';
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #1a0e04;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ── Flag/Avatar/Frame cards all use unified .shop-item-card now ── */

/* ══════════ SHOP: DAILY ITEMS ══════════ */
.shop-items-page { max-width: 900px; margin: 0 auto; }

.shop-items-tabs {
  display: flex; gap: 0; margin-bottom: 16px;
  border-radius: 8px; overflow: hidden;
  border: 2px solid rgba(212,165,69,0.3);
}
.shop-items-tab {
  flex: 1; padding: 12px 16px;
  background: rgba(30,20,10,0.8);
  color: #888; font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.shop-items-tab.active {
  background: linear-gradient(180deg, rgba(60,45,20,0.9), rgba(40,30,15,0.9));
  color: #d4a545;
  box-shadow: inset 0 -3px 0 #d4a545;
}
.shop-items-tab:hover:not(.active) { color: #bbb; background: rgba(40,30,15,0.6); }
.shop-items-tab .tab-count {
  font-size: 0.85rem; color: inherit; opacity: 0.7;
}

.shop-items-status {
  text-align: center; font-family: 'Crimson Text', serif;
  font-size: 1.05rem; color: #aaa; margin: 0 0 4px;
}
.shop-items-hint {
  text-align: center; font-family: 'Crimson Text', serif;
  font-size: 0.85rem; color: #666; font-style: italic; margin: 0 0 20px;
}

.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.shop-daily-card {
  min-height: 220px; padding: 20px 16px 16px;
  text-align: center;
  background: rgba(20,15,10,0.85);
  border: 1px solid rgba(212,165,69,0.25);
  border-radius: 8px;
}
.shop-daily-icon {
  width: 72px !important; height: 72px !important;
  object-fit: contain; margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(212,165,69,0.3));
}
.shop-daily-name {
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600;
  color: #e8c860; margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.shop-daily-desc {
  font-family: 'Crimson Text', serif; font-size: 0.85rem; font-style: italic;
  color: #ccc; margin-bottom: 8px; line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.shop-daily-owned {
  font-family: 'Crimson Text', serif; font-size: 0.85rem;
  color: #aaa; margin-bottom: 6px;
}
.shop-daily-price {
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 600;
  color: #d4a545; margin-bottom: 10px;
}
.shop-daily-bought {
  font-family: 'Crimson Text', serif; font-size: 0.75rem; font-weight: 400;
  color: #888;
}

.shop-daily-claim-btn {
  display: inline-block; padding: 8px 20px;
  border-radius: 6px; border: 1px solid;
  font-family: 'Cinzel', serif; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; letter-spacing: 1px;
}
.shop-daily-claim-btn.gold {
  background: linear-gradient(180deg, #4a3a18, #3a2a10, #2a1e08);
  border-color: #d4a545; color: #e8c860;
}
.shop-daily-claim-btn.gold:hover {
  border-color: #e8cc44; color: #f0d868;
  box-shadow: 0 0 12px rgba(212,165,69,0.4);
}
.shop-daily-claim-btn.ad {
  background: linear-gradient(180deg, #2a4060, #1a2a40, #152030);
  border-color: #4488cc; color: #8ac;
}
.shop-daily-claim-btn.ad:hover {
  border-color: #66aaee; color: #acd;
  box-shadow: 0 0 12px rgba(68,136,204,0.3);
}

.shop-daily-exhausted {
  font-family: 'Crimson Text', serif; font-size: 0.8rem;
  color: #555; font-style: italic;
}

/* ── Daily Items highlight on shop page ── */
.shop-big-btn--items {
  border-color: rgba(68,170,85,0.3);
}
.shop-big-btn--items:hover {
  border-color: rgba(68,170,85,0.5);
  box-shadow: 0 0 16px rgba(68,170,85,0.15);
}

@media (max-width: 600px) {
  .shop-items-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-daily-card { min-height: 180px; padding: 14px 10px 12px; }
  .shop-daily-icon { width: 56px !important; height: 56px !important; }
  .shop-daily-name { font-size: 0.8rem; }
  .shop-daily-desc { font-size: 0.7rem; }
}

/* ── Cart panel content ── */
.cart-content {
  gap: 16px;
}

.cart-preview {
  padding: 12px 0 8px;
}

.cart-preview-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cart-preview-info {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cart-preview-name {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: var(--text-shadow-glow);
  letter-spacing: 1px;
}

.cart-preview-medal {
  display: flex; align-items: center; justify-content: center;
  margin-top: 8px;
}

.cart-preview-medal img,
.cart-preview-medal svg {
  width: 220px !important; height: 220px !important;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}

.cart-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,165,69,0.3), transparent);
  margin: 4px 0;
}

.cart-items-list {
  width: 100%;
}

.cart-items-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--parchment-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(212,165,69,0.08);
}

.cart-item-name {
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  color: var(--parchment);
  flex: 1;
}

.cart-item-price {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-bright);
  margin-right: 12px;
}

.cart-item-remove {
  background: none;
  border: 1px solid rgba(196,48,48,0.3);
  border-radius: 50%;
  width: 24px; height: 24px;
  color: var(--red);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.cart-item-remove:hover {
  background: rgba(196,48,48,0.15);
  border-color: var(--red);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 0 4px;
  border-top: 2px solid rgba(212,165,69,0.2);
}

.cart-total-label {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--parchment);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cart-total-amount {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(240,200,96,0.4);
}

.cart-pay-btn {
  width: 100%;
  font-size: 1.15rem;
  padding: 16px;
  margin-top: 8px;
  letter-spacing: 3px;
}

@media (max-width: 700px) {
  .shop-categories { grid-template-columns: 1fr; max-width: 320px; }
  .shop-big-btn { padding: 28px 16px; }
  .shop-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .shop-medal-grid-large { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

@media (max-width: 500px) {
  .shop-item-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important; gap: 8px !important; }
  .shop-cat-title { font-size: 1.2rem; }
  .shop-medal-grid-large { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
}

/* ===================== ROOM CHAT ===================== */
.room-chat {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.room-chat.mm-chat {
  max-width: 500px;
  margin: 20px auto 16px;
}

.chat-messages {
  height: 200px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,165,69,0.25) transparent;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(212,165,69,0.25); border-radius: 3px; }

.chat-msg {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  animation: menuFadeIn 0.3s ease-out;
  justify-content: flex-start;
  width: 100%;
  align-self: flex-start !important;
}

.chat-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(212,165,69,0.2);
}

.chat-msg-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.chat-msg.mine {
  align-self: flex-start !important;
}
.chat-msg.mine .chat-msg-body {
}

.chat-msg-name {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.chat-msg-text {
  font-family: 'Crimson Text', serif;
  font-size: 0.9rem;
  color: var(--parchment);
  line-height: 1.3;
  word-break: break-word;
}

.chat-input-wrap {
  display: flex;
  border-top: 1px solid rgba(212,165,69,0.15);
}

.chat-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: none;
  padding: 10px 14px;
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  color: var(--parchment);
  outline: none;
  transition: background 0.2s;
}
.chat-input::placeholder {
  color: rgba(212,165,69,0.3);
  font-style: italic;
}
.chat-input:focus {
  background: rgba(0,0,0,0.55);
}

.chat-send-btn {
  width: 44px;
  background: rgba(212,165,69,0.15);
  border: none;
  border-left: 1px solid rgba(212,165,69,0.15);
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.chat-send-btn:hover {
  background: rgba(212,165,69,0.25);
  color: var(--gold-bright);
}

/* ===================== TEST PAGE (Dev Mode) ===================== */
.test-page {
  max-width: 900px;
  margin: 0 auto;
  animation: menuFadeIn 0.4s ease-out;
}

.test-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold-bright);
  letter-spacing: 4px;
  text-shadow: var(--text-shadow-title);
  margin-bottom: 8px;
}
.test-subtitle {
  font-family: 'Crimson Text', serif;
  font-size: 1.1rem;
  color: var(--parchment-dark);
  font-style: italic;
  margin-bottom: 32px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.test-section {
  margin-bottom: 24px;
}
.test-section-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 10px 0;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(212,165,69,0.1);
  margin-bottom: 8px;
}
.test-section-header:hover .test-section-title {
  color: var(--gold-bright);
}
.test-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,1);
}
.test-expand-arrow {
  font-size: 0.7rem; color: var(--gold-dim);
  transition: transform 0.3s ease;
  margin-left: 12px;
}
.test-expand-arrow.rotated {
  transform: rotate(180deg);
}
.test-battle-count {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: var(--parchment-dark);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 8px;
}
.test-rules-tag {
  font-family: 'Crimson Text', serif;
  font-size: 0.8rem;
  color: var(--parchment-dark);
  margin-left: 8px;
}
.test-section-desc {
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  color: var(--parchment-dark);
  margin-bottom: 16px;
}

.test-battle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.test-battle-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212,165,69,0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
}
.test-battle-card:hover {
  border-color: var(--gold);
  background: rgba(212,165,69,0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.test-battle-card.test-special {
  border-color: rgba(220,120,50,0.3);
  background: rgba(220,120,50,0.06);
}
.test-battle-card.test-special:hover {
  border-color: #ee8844;
  background: rgba(220,120,50,0.12);
}

.test-battle-label {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--parchment-light);
  letter-spacing: 1px;
}
.test-battle-desc {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: var(--parchment-dark);
}

.test-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.test-action-btn {
  padding: 12px 24px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 6px;
  background: rgba(0,0,0,0.4);
  color: var(--parchment);
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 1px;
}
.test-action-btn:hover {
  border-color: var(--gold);
  background: rgba(212,165,69,0.1);
  color: var(--gold-bright);
}
.test-action-btn.test-gold {
  border-color: rgba(255,215,0,0.3);
  color: #ffd700;
}
.test-action-btn.test-gold:hover {
  border-color: #ffd700;
  background: rgba(255,215,0,0.1);
}
.test-action-btn.test-reset {
  border-color: rgba(196,48,48,0.2);
  color: var(--parchment-dark);
}
.test-action-btn.test-reset:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(196,48,48,0.08);
}

/* Hide menu toggle when on a sub-page with a back button */
.menu-screen:has(.picker-back) .menu-toggle-btn,
.menu-screen:has(.act-detail-back) .menu-toggle-btn {
  display: none !important;
}

/* ===================== MOBILE RESPONSIVE — MENU ===================== */
@media (max-width: 700px) {
  .menu-sidebar { width: 240px; }
  .menu-toggle-btn { left: 0; top: 30%; width: 24px; height: 80px; font-size: 0.9rem; border-radius: 0 6px 6px 0; border-left: none; }
  .menu-toggle-btn.sidebar-open { left: 244px; }
  .toggle-arrow { font-size: 0.85rem; }

  /* Menu content */
  .menu-content { padding: 14px 10px; }

  /* Welcome section */
  .menu-welcome-title { font-size: 1.8rem; letter-spacing: 2px; }
  .menu-welcome-subtitle { font-size: 1rem; }

  /* Navigation items in sidebar */
  .menu-nav-item { padding: 10px 14px; font-size: 0.85rem; }
  .menu-nav-icon-img { width: 26px !important; height: 26px !important; max-width: 26px; max-height: 26px; min-width: 26px; }

  /* Profile panel */
  .profile-panel { width: 90vw; max-width: 400px; }
  .profile-panel-inner { padding: 16px; }

  /* Slide panel (change avatar etc.) */
  .slide-panel { width: 90vw; max-width: 400px; }
}

@media (max-height: 500px) {
  .menu-sidebar { padding-top: 2px; }
  .menu-sidebar-header { padding: 8px 10px; }
  .menu-logo-text { font-size: 0.65rem; letter-spacing: 3px; }
  .menu-logo-realm { font-size: 1.1rem; letter-spacing: 4px; }

  /* Avatar — proportional to desktop (container 100px ≈ 56% of 180px) */
  .menu-user-info { padding: 6px 6px 4px; min-height: auto; gap: 0; }
  .menu-user-avatar { width: 100px; height: 100px; }
  .menu-user-avatar .avatar-img { width: 77px !important; height: 77px !important; top: 50% !important; }
  .menu-user-avatar .frame-img { width: 198px !important; height: 198px !important; top: calc(50% + var(--frame-offset-y, 0px)) !important; }
  .menu-name-banner { margin-top: 8px; padding: 3px 12px; }
  .menu-user-name { font-size: 0.75rem; letter-spacing: 0.5px; }
  .menu-rank { margin-top: 5px; gap: 6px; }
  .menu-rank-badge { height: 20px; }
  .menu-rank-title { font-size: 0.6rem; }
  .profile-rank-badge { width: 160px; }
  .profile-rank-title { font-size: 1rem; }
  .profile-rank-progress { max-width: 240px; }

  /* Nav items compact */
  .menu-nav-item { padding: 6px 12px; font-size: 0.75rem; }
  .menu-nav-icon-img { width: 22px !important; height: 22px !important; max-width: 22px; max-height: 22px; min-width: 22px; }
  .menu-nav-list { gap: 0; }

  /* Footer */
  .menu-sidebar-footer { padding: 4px 8px; }
  .menu-signout-btn { padding: 4px 10px; font-size: 0.65rem; }

  /* ===== MENU CONTENT AREA — all pages compact ===== */
  .menu-content { padding: 10px 10px; }

  /* Welcome / Home */
  .menu-welcome-crown { margin-bottom: 6px; }
  .menu-welcome-crown img { width: 60px; height: 60px; }
  .menu-welcome-title { font-size: 1.4rem; letter-spacing: 3px; margin-bottom: 4px; }
  .menu-welcome-subtitle { font-size: 0.85rem; margin-bottom: 8px; }
  .menu-welcome-enter { padding: 8px 28px; font-size: 0.85rem; letter-spacing: 2px; }

  /* Versus setup */
  .versus-setup { padding: 12px 14px; }
  .versus-title { font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 10px; padding-bottom: 8px; }
  .versus-setup .your-name-label { font-size: 0.8rem; margin-bottom: 4px; }
  .versus-setup .your-name-input { padding: 8px 12px; font-size: 1rem; }
  .versus-setup .your-name-section,
  .versus-setup .opponent-section,
  .versus-setup .opponent-type-section,
  .versus-setup .opponents-list,
  .versus-setup .difficulty-section,
  .versus-setup .map-section,
  .versus-setup .question-section { margin-bottom: 10px; }
  .versus-setup .opp-btn { padding: 6px 14px; font-size: 0.8rem; }
  .versus-setup .diff-btn { padding: 6px 14px; font-size: 0.8rem; }
  .versus-setup .opp-row { padding: 6px 10px; }
  .versus-setup .opp-name-input { font-size: 0.95rem; }
  .versus-setup .opp-badge { font-size: 0.7rem; padding: 2px 8px; }
  .versus-setup .opp-ai-summary { padding: 8px 14px; font-size: 0.85rem; }
  .versus-setup .start-btn { padding: 8px 24px; font-size: 0.85rem; }
  .map-card { padding: 8px; }
  .mc-name { font-size: 0.85rem; }
  .mc-info { font-size: 0.7rem; }

  /* Settings — compact */
  .settings-page { padding: 6px 8px 12px; }
  .settings-page-title { font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 8px; padding-bottom: 4px; }
  .settings-section { padding: 8px 10px; margin-bottom: 6px; border-width: 1px; }
  .settings-section::before { height: 14px; }
  .settings-section::after { display: none; }
  .settings-section-title { font-size: 0.6rem; letter-spacing: 1px; margin-bottom: 4px; padding: 0; gap: 4px; }
  .settings-section-title .sec-icon { font-size: 0.65rem; }
  .settings-divider { margin: 5px 0; }
  .settings-row { padding: 3px 6px; font-size: 0.7rem; }
  .settings-label { font-size: 0.7rem; }
  .settings-name-label { font-size: 0.75rem; }
  .settings-name-row { gap: 4px; }
  .settings-name-row input { padding: 3px 6px; font-size: 0.7rem; }
  .settings-name-row button { padding: 3px 8px; font-size: 0.65rem; letter-spacing: 1px; }
  .settings-save-btn { padding: 3px 8px; font-size: 0.6rem; letter-spacing: 1px; }
  .settings-grid-label { font-size: 0.75rem; margin-bottom: 6px; }
  .settings-profile-card { padding: 6px 8px; gap: 8px; }
  .spc-preview { width: 30px; height: 30px; border-width: 1px; }
  .spc-label { font-size: 0.7rem; letter-spacing: 0.5px; }
  .spc-note { font-size: 0.6rem; }
  .spc-arrow { font-size: 0.65rem; }
  .settings-fullscreen-btn { padding: 6px 12px; font-size: 0.65rem; letter-spacing: 1px; gap: 6px; border-width: 1px; }
  .settings-fullscreen-btn .fullscreen-btn-icon { font-size: 0.9rem; }
  .volume-row { gap: 8px; margin-bottom: 6px; }
  .volume-label { font-size: 0.7rem; min-width: 70px; }
  .volume-slider::-webkit-slider-thumb { width: 12px; height: 12px; }
  .volume-slider::-moz-range-thumb { width: 12px; height: 12px; }
  .volume-value { font-size: 0.65rem; min-width: 24px; }
  .settings-lang-btns { gap: 4px; }
  .settings-lang-btn { padding: 5px 12px; font-size: 0.65rem; border-width: 1px; gap: 4px; letter-spacing: 0.5px; }
  .faq-item { margin-bottom: 3px; }
  .faq-question { padding: 6px 8px; font-size: 0.7rem; }
  .faq-arrow { font-size: 0.6rem; }
  .faq-answer { font-size: 0.7rem; line-height: 1.3; }
  .faq-item.open .faq-answer { padding: 0 8px 6px; }
  .settings-contact-text { font-size: 0.7rem; margin-bottom: 4px; }
  .settings-contact-email { font-size: 0.7rem; }
  .settings-signout { padding: 6px; font-size: 0.6rem; letter-spacing: 1px; gap: 6px; border-width: 1px; }
  .settings-toast { font-size: 0.8rem; padding: 8px 20px; letter-spacing: 1px; }
  /* PWA install — hide on mobile */
  #pwaInstallSection { display: none !important; }
  .pwa-install-body { gap: 8px; }
  .pwa-install-icon { width: 36px; height: 36px; border-radius: 8px; }
  .pwa-install-row { gap: 8px; }
  .pwa-install-name { font-size: 0.75rem; letter-spacing: 1px; }
  .pwa-install-desc { font-size: 0.65rem; }
  .pwa-install-btn { padding: 6px 12px; font-size: 0.65rem; letter-spacing: 1px; border-width: 1px; }

  /* Shop — compact */
  .shop-page { padding: 0; }
  .shop-header { margin-bottom: 4px; }
  .shop-title { font-size: 1rem; letter-spacing: 2px; }
  .shop-coin-display { padding: 3px 10px; gap: 4px; }
  .shop-coin-amount { font-size: 0.85rem; }
  .shop-coin-label { font-size: 0.65rem; }
  .shop-categories { gap: 8px; margin: 8px auto 0; max-width: 100%; }
  .shop-big-btn { padding: 14px 10px; gap: 6px; border-radius: 6px; }
  .shop-big-btn::before { height: 25px; }
  .shop-big-icon { width: 80px; height: 80px; overflow: hidden; }
  .shop-big-icon img { max-width: 100% !important; max-height: 100% !important; }
  .shop-cat-preview { width: 80px; height: 80px; }
  .shop-cat-preview.shop-cat-frame { width: 85px; height: 85px; }
  .shop-big-label { font-size: 0.75rem; letter-spacing: 2px; }
  .shop-big-desc { font-size: 0.6rem; max-width: 140px; }
  .shop-big-count { font-size: 0.6rem; }
  .shop-cat-title { font-size: 1rem; }
  .shop-item-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 10px !important; }
  .shop-item-card { min-height: auto !important; padding: 10px 8px !important; gap: 4px !important; }
  .shop-item-card img { width: 100px !important; height: 100px !important; }
  .shop-item-price { font-size: 0.7rem; padding: 2px 6px; }
  .shop-collection { margin-bottom: 12px; }
  .shop-collection-title { font-size: 0.8rem; }
  .shop-collection-items { gap: 6px; }
  .shop-coll-avatar-wrap { width: 44px; height: 44px; }
  .shop-coll-avatar { width: 32px; height: 32px; }
  .shop-coll-frame { width: 44px; height: 44px; }
  .shop-coll-medal { height: 44px; }
  .shop-equip-btn { font-size: 0.7rem; padding: 3px 8px; }

  /* Custom battle menu — compact */
  .custom-menu, .custom-create-page, .custom-join-page, .custom-lobby-page {
    padding: 4px 8px 10px; max-width: 100%;
  }
  .custom-title { font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 4px; padding-bottom: 4px; }
  .custom-main-btns { gap: 8px; margin: 6px auto 0; max-width: 100%; }
  .custom-big-btn { padding: 10px 8px; gap: 4px; border-radius: 5px; }
  .custom-big-btn::before { height: 20px; }
  .custom-big-icon { font-size: 1.5rem; }
  .custom-big-label { font-size: 0.7rem; letter-spacing: 1px; }
  .custom-big-desc { font-size: 0.6rem; max-width: 160px; }
  .custom-form-row { margin-bottom: 5px; }
  .custom-form-label { font-size: 0.65rem; margin-bottom: 2px; }
  .custom-form-hint { font-size: 0.55rem; }
  .custom-input { padding: 4px 6px; font-size: 0.7rem; }
  .custom-btn { padding: 3px 8px; font-size: 0.65rem; }
  .custom-btn-row { gap: 3px; }
  .custom-room-id-row { gap: 3px; }
  .custom-regenerate-btn { width: 24px; height: 24px; font-size: 0.85rem; }
  .custom-ai-config { padding: 4px 0 0; margin-top: 4px; }
  .custom-room-info { margin-bottom: 8px; gap: 4px; }
  .custom-room-code { padding: 5px 10px; gap: 6px; }
  .custom-room-code-label { font-size: 0.65rem; }
  .custom-room-code-value { font-size: 0.9rem; letter-spacing: 2px; }
  .custom-copy-all-btn { padding: 6px 14px; font-size: 0.8rem; margin-top: 2px; }
  .custom-room-title { font-size: 0.85rem; letter-spacing: 1px; }
  .custom-section-title { font-size: 0.65rem; }

  /* Type buttons & settings inputs — compact for mobile */
  .type-btn, .qcat-btn { padding: 5px 10px; font-size: 0.65rem; border-width: 1px; letter-spacing: 0.5px; }
  .settings-input { padding: 5px 8px; font-size: 0.75rem; }
  .settings-section { padding: 8px 10px; margin-bottom: 6px; border-width: 1px; }
  .settings-section::before { height: 14px; }
  .settings-section-title { font-size: 0.6rem; letter-spacing: 1px; margin-bottom: 4px; padding: 0; gap: 4px; }
  .settings-section-title .sec-icon { font-size: 0.7rem; }

  /* Picker back button — compact */
  .picker-back { padding: 4px 0; margin-bottom: 3px; font-size: 0.7rem; }
  .picker-back::before { font-size: 0.55rem; margin-right: 4px; }

  /* Profile panel */
  .profile-panel { max-height: 95vh; }
  .profile-panel-inner { padding: 12px; }
  .profile-avatar-large { width: 70px; height: 70px; margin-bottom: 4px; }
  .profile-avatar-large .avatar-img { width: 52px !important; height: 52px !important; }
  .profile-avatar-large .frame-img { width: 120px !important; height: 120px !important; }
  .profile-name { font-size: 1rem; }
  .profile-section-title { font-size: 0.85rem; padding: 6px 0; }
  .profile-stat-row { padding: 5px 0; font-size: 0.85rem; }
  .trophy-item { padding: 6px 10px; }
  .trophy-icon { font-size: 1.2rem; }
  .trophy-name { font-size: 0.85rem; }

  /* Slide panels (avatar picker, frame picker, etc.) */
  .slide-panel { max-height: 95vh; }
  .slide-panel-inner { padding: 12px; }
  .avatar-png-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }

  /* Matchmaking */
  .matchmaking-screen { padding: 10px; }
  .mm-title { font-size: 1rem; margin-bottom: 4px; }
  .mm-timer { font-size: 1.4rem; margin-bottom: 6px; }
  .mm-slots { gap: 6px; margin-bottom: 6px; }
  .mm-slot { width: 80px; min-height: 90px; padding: 6px 4px; overflow: visible; }
  .mm-slot-avatar-wrap { width: 46px; height: 46px; }
  .mm-slot-avatar { width: 34px; height: 34px; }
  .mm-slot-frame { width: 92px; height: 92px; }
  .mm-slot-placeholder { font-size: 1.2rem; }
  .mm-slot-spinner { width: 16px; height: 16px; }
  .mm-slot-name { font-size: 0.6rem; }
  .mm-hint { font-size: 0.7rem; margin-bottom: 4px; }
  .mm-cancel-btn { font-size: 0.7rem; padding: 5px 16px; }
  .room-chat.mm-chat { margin: 2px auto 6px; max-width: 80vw; }
  .chat-input { font-size: 0.7rem; padding: 4px 8px; }
  .chat-send-btn { font-size: 0.8rem; padding: 4px 8px; }

  /* Shop collectibles */
  .shop-coll-avatar-wrap { width: 60px; height: 60px; }
  .shop-coll-avatar { width: 44px; height: 44px; }

  /* Loading screen — match splash logo size */
  .loading-screen { padding: 12px; }
  .loading-shield { margin-bottom: 8px; }
  .loading-shield img { width: 150px; height: 150px; }
  .loading-title { font-size: 1.3rem; letter-spacing: 3px; margin-bottom: 10px; }
  .loading-bar { width: 260px; height: 6px; margin-bottom: 10px; }
  .loading-hint { font-size: 0.85rem; }
}

/* Extra small height — phone landscape with address bar */
@media (max-height: 380px) {
  .menu-sidebar-header { padding: 3px 6px; }
  .menu-logo-text { font-size: 0.55rem; }
  .menu-logo-realm { font-size: 0.8rem; letter-spacing: 2px; }
  .menu-user-info { padding: 3px 4px 2px; }
  .menu-user-avatar { width: 70px; height: 70px; }
  .menu-user-avatar .avatar-img { width: 54px !important; height: 54px !important; top: 50% !important; }
  .menu-user-avatar .frame-img { width: 139px !important; height: 139px !important; top: calc(50% + var(--frame-offset-y, 0px)) !important; }
  .menu-name-banner { margin-top: 6px; padding: 2px 10px; }
  .menu-user-name { font-size: 0.65rem; }
  .menu-rank { margin-top: 4px; gap: 4px; }
  .menu-rank-badge { height: 16px; }
  .menu-rank-title { font-size: 0.55rem; }
  .profile-rank-badge { width: 120px; }
  .profile-rank-title { font-size: 0.85rem; }
  .menu-nav-item { padding: 4px 10px; font-size: 0.7rem; }
  .menu-signout-btn { padding: 3px 8px; font-size: 0.6rem; }

  /* Content area even smaller */
  .menu-welcome-crown img { width: 40px; height: 40px; }
  .menu-welcome-title { font-size: 1.1rem; letter-spacing: 2px; }
  .menu-welcome-subtitle { font-size: 0.75rem; }
  .versus-setup { padding: 8px 10px; }
  .versus-title { font-size: 1rem; }
  .settings-section-title { font-size: 0.8rem; padding: 6px 10px; }
  .settings-row { padding: 4px 10px; font-size: 0.8rem; }

  /* Profile panel compact */
  .profile-avatar-large { width: 56px; height: 56px; margin-bottom: 4px; }
  .profile-avatar-large .avatar-img { width: 42px !important; height: 42px !important; }
  .profile-avatar-large .frame-img { width: 100px !important; height: 100px !important; }

  /* Loading screen — extra compact */
  .loading-screen { padding: 8px; }
  .loading-shield { margin-bottom: 4px; }
  .loading-shield img { width: 80px; height: 80px; }
  .loading-title { font-size: 1rem; letter-spacing: 2px; margin-bottom: 6px; }
  .loading-bar { width: 200px; height: 5px; margin-bottom: 6px; }
  .loading-hint { font-size: 0.75rem; }
}

/* ===================== SESSION CONFLICT MODAL ===================== */
.session-conflict-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  animation: sessionConflictIn 0.4s ease;
}
@keyframes sessionConflictIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.session-conflict-modal {
  background: linear-gradient(180deg, rgba(22,15,8,0.98) 0%, rgba(12,8,3,0.99) 100%);
  border: 2px solid rgba(212,165,69,0.6);
  border-radius: 10px;
  padding: 40px 36px;
  max-width: 420px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(212,165,69,0.15);
  animation: sessionModalIn 0.4s ease;
}
@keyframes sessionModalIn {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.session-conflict-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.session-conflict-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.session-conflict-msg {
  font-family: 'Crimson Text', serif;
  font-size: 1.1rem;
  color: var(--parchment);
  line-height: 1.6;
  margin-bottom: 24px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.session-conflict-btn {
  min-width: 120px;
}

/* ===================== KINGDOM PAGE ===================== */
.kingdom-page {
  padding: 24px 20px 40px;
  max-width: 680px;
  margin: 0 auto;
}

.kingdom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.kingdom-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(212,165,69,0.3);
  margin: 0;
}

.kingdom-gold-display {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold);
  background: rgba(212,165,69,0.08);
  border: 1px solid rgba(212,165,69,0.25);
  border-radius: 8px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Harvest Banner ── */
.kingdom-harvest-banner {
  background: linear-gradient(135deg, rgba(34,120,34,0.15), rgba(212,165,69,0.12));
  border: 1px solid rgba(34,180,34,0.35);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.kingdom-harvest-banner:hover {
  background: linear-gradient(135deg, rgba(34,120,34,0.22), rgba(212,165,69,0.18));
  border-color: rgba(34,180,34,0.5);
}

.kingdom-harvest-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #2d8a2d, #1a6b1a);
  border: 1px solid rgba(34,180,34,0.5);
  border-radius: 6px;
  padding: 6px 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.kingdom-harvest-btn:hover {
  background: linear-gradient(180deg, #38a838, #228a22);
  box-shadow: 0 0 12px rgba(34,180,34,0.3);
}

.kingdom-farm-timer {
  font-family: 'Crimson Text', serif;
  font-size: 0.9rem;
  color: rgba(212,165,69,0.6);
  text-align: center;
  margin-bottom: 16px;
}

/* ── Building Cards Grid ── */
.kingdom-buildings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.kingdom-building-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(180deg, rgba(22,15,8,0.7) 0%, rgba(12,8,3,0.8) 100%);
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 10px;
  padding: 16px;
  transition: all 0.3s ease;
}
.kingdom-building-card:hover {
  border-color: rgba(212,165,69,0.4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 8px rgba(212,165,69,0.08);
}
.kingdom-building-card.kingdom-maxed {
  border-color: rgba(212,165,69,0.35);
  background: linear-gradient(180deg, rgba(32,25,12,0.7) 0%, rgba(18,12,5,0.8) 100%);
}

.kingdom-bld-icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
}

.kingdom-bld-info {
  flex: 1;
  min-width: 0;
}

.kingdom-bld-name {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.kingdom-bld-level {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: 4px;
}

.kingdom-bld-desc {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: rgba(230,218,200,0.6);
  line-height: 1.4;
  margin-bottom: 4px;
}

.kingdom-bld-effect {
  font-family: 'Crimson Text', serif;
  font-size: 0.9rem;
  color: #4caf50;
  font-weight: 600;
}

.kingdom-bld-next {
  font-family: 'Crimson Text', serif;
  font-size: 0.8rem;
  color: rgba(212,165,69,0.5);
  font-style: italic;
  margin-top: 2px;
}

.kingdom-bld-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.kingdom-upgrade-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #c5942a, #9a6f1e);
  border: 1px solid rgba(212,165,69,0.5);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.kingdom-upgrade-btn:hover {
  background: linear-gradient(180deg, #d4a545, #b8842a);
  box-shadow: 0 0 14px rgba(212,165,69,0.3);
  transform: translateY(-1px);
}
.kingdom-upgrade-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.kingdom-bld-max-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212,165,69,0.1);
  border: 1px solid rgba(212,165,69,0.3);
  border-radius: 5px;
  padding: 4px 10px;
  letter-spacing: 2px;
}

/* ── Kingdom Shop Link ── */
.kingdom-shop-link {
  display: block;
  width: 100%;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212,165,69,0.08);
  border: 1px solid rgba(212,165,69,0.25);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.25s ease;
}
.kingdom-shop-link:hover {
  background: rgba(212,165,69,0.15);
  border-color: rgba(212,165,69,0.45);
  box-shadow: 0 0 12px rgba(212,165,69,0.15);
}

/* ── Kingdom Shop (Consumables) Page ── */
.kingdom-shop-page {
  padding: 24px 20px 40px;
  max-width: 600px;
  margin: 0 auto;
}

.kingdom-cons-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.kingdom-cons-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(22,15,8,0.7) 0%, rgba(12,8,3,0.8) 100%);
  border: 1px solid rgba(212,165,69,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.25s ease;
}
.kingdom-cons-card:hover {
  border-color: rgba(212,165,69,0.4);
}

.kingdom-cons-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.kingdom-cons-info {
  flex: 1;
  min-width: 0;
}

.kingdom-cons-name {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.kingdom-cons-desc {
  font-family: 'Crimson Text', serif;
  font-size: 0.82rem;
  color: rgba(230,218,200,0.55);
  line-height: 1.35;
  margin-bottom: 3px;
}

.kingdom-cons-owned {
  font-family: 'Crimson Text', serif;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 600;
}

.kingdom-cons-buy-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #c5942a, #9a6f1e);
  border: 1px solid rgba(212,165,69,0.5);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.kingdom-cons-buy-btn:hover {
  background: linear-gradient(180deg, #d4a545, #b8842a);
  box-shadow: 0 0 12px rgba(212,165,69,0.3);
}
.kingdom-cons-buy-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.kingdom-back-btn {
  display: block;
  width: 100%;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212,165,69,0.08);
  border: 1px solid rgba(212,165,69,0.25);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}
.kingdom-back-btn:hover {
  background: rgba(212,165,69,0.15);
  border-color: rgba(212,165,69,0.4);
}

/* ===================== TAVERN PAGE — Drunk Marksman ===================== */
.tavern-page {
  padding: 16px 12px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.tavern-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 10px;
}

.tavern-title {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(212,165,69,0.3);
  margin: 0;
}

.tavern-gold-display {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  background: rgba(212,165,69,0.08);
  border: 1px solid rgba(212,165,69,0.25);
  border-radius: 8px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Generic Fullscreen Mode (for sections that need to escape menuContent) ── */
.menu-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  max-width: none;
  padding: 0 !important;
  margin: 0;
  background: #0d0a04;
  overflow: hidden;
}
.menu-fullscreen .menu-close-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10001;
}

/* ── Fullscreen Mode ── */
.tavern-page.tavern-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  max-width: none;
  padding: 0;
  margin: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tavern-fullscreen .tavern-header { display: none; }
.tavern-fullscreen .dm-canvas-wrap {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.tavern-fullscreen #dm-canvas {
  object-fit: contain;
}
.tavern-fullscreen .menu-close-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10001;
}

/* ── Canvas Wrapper ── */
.dm-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(212,165,69,0.3);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  background: #0a0604;
}

#dm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

/* ── Hub Overlay (weapon select, bet, start) ── */
.dm-hub-overlay,
.dm-round-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.dm-hub-overlay.dm-hidden,
.dm-round-overlay.dm-hidden {
  display: none;
}

.dm-hub-content {
  background: rgba(8,5,2,0.88);
  border: 1px solid rgba(212,165,69,0.3);
  border-radius: 14px;
  padding: 36px 40px;
  text-align: center;
  max-width: 520px;
  width: 92%;
  backdrop-filter: blur(6px);
}

.dm-hub-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 4px;
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(212,165,69,0.4);
}

.dm-loading {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: 1.2rem;
  padding: 40px;
}

/* ── Weapon Selection ── */
.dm-weapon-select {
  margin-bottom: 20px;
}
.dm-weapon-label {
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  color: rgba(230,218,200,0.6);
  margin-bottom: 10px;
}
.dm-weapon-row {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.dm-weapon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(22,15,8,0.7);
  border: 2px solid rgba(212,165,69,0.2);
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.25s ease;
  color: rgba(230,218,200,0.8);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  min-width: 110px;
}
.dm-weapon-btn img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.dm-weapon-btn:hover {
  border-color: rgba(212,165,69,0.45);
  background: rgba(30,20,10,0.8);
}
.dm-weapon-btn.selected {
  border-color: var(--gold-bright);
  background: rgba(212,165,69,0.12);
  box-shadow: 0 0 14px rgba(212,165,69,0.2);
  color: var(--gold-bright);
}

/* ── Bet Row ── */
.dm-bet-row {
  margin-bottom: 22px;
}
.dm-bet-label {
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  color: rgba(230,218,200,0.6);
  margin-bottom: 8px;
  display: block;
}
.dm-bet-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dm-bet-adj {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(212,165,69,0.3);
  background: rgba(212,165,69,0.08);
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-bet-adj:hover {
  background: rgba(212,165,69,0.2);
  border-color: var(--gold);
}
#dm-bet-input {
  width: 70px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212,165,69,0.3);
  border-radius: 6px;
  padding: 6px 8px;
  outline: none;
}
#dm-bet-input:focus {
  border-color: var(--gold);
}
/* Hide spin buttons on number input */
#dm-bet-input::-webkit-outer-spin-button,
#dm-bet-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#dm-bet-input[type=number] { -moz-appearance: textfield; }

.dm-bet-gold {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--gold);
  opacity: 0.7;
  margin-left: 4px;
}

/* ── Start Button ── */
.dm-start-btn {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1a1008;
  background: linear-gradient(180deg, var(--gold-bright) 0%, #b8860b 100%);
  border: none;
  border-radius: 8px;
  padding: 16px 48px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(212,165,69,0.3);
}
.dm-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212,165,69,0.45);
  filter: brightness(1.1);
}

/* ── Score Overlay (between rounds) ── */
.dm-score-overlay {
  background: rgba(8,5,2,0.92);
  border: 1px solid rgba(212,165,69,0.3);
  border-radius: 14px;
  padding: 28px 32px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  backdrop-filter: blur(6px);
}

.dm-score-round {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.dm-score-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.dm-score-player,
.dm-score-ai {
  text-align: center;
  min-width: 90px;
}

.dm-score-label {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: rgba(230,218,200,0.5);
  margin-bottom: 4px;
}

.dm-score-val {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.dm-score-green { color: #88ff88; }
.dm-score-red { color: #ff8888; }

.dm-score-total {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--gold);
  opacity: 0.7;
}

.dm-score-vs {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(230,218,200,0.3);
  letter-spacing: 2px;
}

.dm-next-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212,165,69,0.1);
  border: 1px solid rgba(212,165,69,0.35);
  border-radius: 8px;
  padding: 12px 28px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}
.dm-next-btn:hover {
  background: rgba(212,165,69,0.2);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212,165,69,0.15);
}

/* ── Game Over ── */
.dm-gameover {
  background: rgba(8,5,2,0.92);
  border: 1px solid rgba(212,165,69,0.3);
  border-radius: 14px;
  padding: 30px 32px;
  text-align: center;
  max-width: 440px;
  width: 92%;
  backdrop-filter: blur(6px);
}

.dm-gameover-title {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 18px;
}
.dm-win .dm-gameover-title { color: #ffd700; text-shadow: 0 0 16px rgba(255,215,0,0.4); }
.dm-lose .dm-gameover-title { color: #ff6655; }
.dm-draw .dm-gameover-title { color: var(--gold); }

.dm-gameover-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}

.dm-gameover-col { text-align: center; min-width: 100px; }

.dm-gameover-label {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: rgba(230,218,200,0.5);
  margin-bottom: 4px;
}

.dm-gameover-num {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-bright);
}

.dm-gameover-rounds {
  font-family: 'Crimson Text', serif;
  font-size: 0.8rem;
  color: rgba(230,218,200,0.4);
  margin-top: 2px;
}

.dm-gameover-vs {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(230,218,200,0.25);
}

.dm-gameover-gold {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 22px;
  color: rgba(230,218,200,0.5);
}
.dm-gold-positive { color: #88ff88; }
.dm-gold-negative { color: #ff6655; }

.dm-gameover-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.dm-play-again-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1008;
  background: linear-gradient(180deg, var(--gold-bright) 0%, #b8860b 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}
.dm-play-again-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,165,69,0.3);
}

.dm-back-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212,165,69,0.08);
  border: 1px solid rgba(212,165,69,0.3);
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}
.dm-back-btn:hover {
  background: rgba(212,165,69,0.15);
  border-color: rgba(212,165,69,0.5);
}

/* ── Kingdom + Tavern Mobile Responsive ── */
@media (max-width: 480px) {
  .kingdom-page, .kingdom-shop-page, .tavern-page {
    padding: 12px 8px 24px;
  }
  .kingdom-header, .tavern-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .kingdom-buildings {
    grid-template-columns: 1fr;
  }
  .kingdom-building-card {
    padding: 12px;
  }
  .kingdom-bld-icon { font-size: 1.8rem; width: 40px; }
  .dm-hub-content { padding: 18px 16px; }
  .dm-weapon-btn { min-width: 90px; padding: 10px 14px; }
  .dm-weapon-btn img { width: 48px; height: 48px; }
  .dm-gameover { padding: 20px 16px; }
  .dm-gameover-num { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════
   GLOBAL CHAT PANEL — fixed bottom-left, all screens
   ═══════════════════════════════════════════════ */

.gc-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 290px;
  z-index: 99999;
  font-family: 'Crimson Text', serif;
  user-select: none;
}

.gc-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 10;
}
.gc-resize-handle::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #5a3e20;
  border-right: 2px solid #5a3e20;
}

.gc-header {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #2e1f0e 0%, #1a1005 100%);
  border: 1px solid #5a3e20;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.gc-tabs { display: flex; flex: 1; }

.gc-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid #2e1800;
  color: #706040;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  padding: 5px 6px;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.gc-tab:last-child { border-right: none; }
.gc-tab:hover:not(:disabled) { color: #d4a545; background: rgba(255,200,80,0.07); }
.gc-tab.active { color: #d4a545; background: rgba(255,200,80,0.12); }
.gc-tab:disabled { opacity: 0.38; cursor: not-allowed; }

.gc-toggle {
  background: transparent;
  border: none;
  border-left: 1px solid #2e1800;
  color: #706040;
  font-size: 0.65rem;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 0.15s;
}
.gc-toggle:hover { color: #d4a545; }

.gc-body {
  display: flex;
  flex-direction: column;
  background: rgba(8, 5, 2, 0.92);
  border: 1px solid #5a3e20;
  border-top: 1px solid #2e1800;
}
.gc-body--hidden { display: none; }

.gc-messages {
  overflow-y: auto;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scroll-behavior: smooth;
}
.gc-messages::-webkit-scrollbar { width: 4px; }
.gc-messages::-webkit-scrollbar-thumb { background: #3a2010; border-radius: 4px; }

.gc-msg {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  animation: gcFadeIn 0.15s ease-out;
}
.gc-msg--me .gc-bubble { background: rgba(60, 38, 8, 0.7); border-color: #5a3518; }
@keyframes gcFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gc-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #3a2010;
  flex-shrink: 0;
  object-fit: cover;
}
.gc-avatar--ph { background: #1a0e04; }

.gc-bubble {
  background: rgba(16, 9, 2, 0.8);
  border: 1px solid #251508;
  border-radius: 4px;
  padding: 3px 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: calc(100% - 30px);
  word-break: break-word;
}
.gc-name {
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  color: #b88820;
  font-weight: 600;
}
.gc-text { font-size: 0.76rem; color: #a89878; line-height: 1.3; user-select: text; }
.gc-time { font-size: 0.52rem; color: #403020; align-self: flex-end; }

.gc-input-row {
  display: flex;
  border-top: 1px solid #1e1006;
}
.gc-input {
  flex: 1;
  background: rgba(12, 7, 2, 0.95);
  border: none;
  color: #c0a878;
  font-size: 0.78rem;
  padding: 5px 9px;
  outline: none;
  font-family: 'Crimson Text', serif;
  user-select: text;
}
.gc-input::placeholder { color: #302010; }
.gc-send {
  background: linear-gradient(180deg, #8a6018 0%, #5a3e08 100%);
  border: none;
  border-left: 1px solid #4a3010;
  color: #e8c850;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: filter 0.15s;
}
.gc-send:hover { filter: brightness(1.2); }

@media (max-width: 600px) {
  .gc-panel { width: 240px !important; }
  .gc-messages { max-height: 150px; }
}