/* Triad Cards Online - Styles */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== FF8 Custom Cursor ===== */
*, *::before, *::after {
  cursor: url('/img/cursor-default.png') 1 1, auto !important;
}

a, button, [role="button"], label, summary,
input, select, textarea,
[onclick], [tabindex], .clickable,
.nav-btn, .ff8-menu-item, .pack-card,
.user-menu-trigger, .user-dropdown-item,
.settings-toggle, .settings-delete-btn, .coins-display,
.collection-card, .hand-card, .deck-slot, .lang-btn,
.history-row, .lobby-mode, .lobby-diff-option,
.ranking-row, .btn-real, .btn-coins, .booster-card,
.reveal-card-box, .match-row,
.diff-btn, .ff8-card-row, .ff8-page-btn,
.pregame-deck-slot, .pregame-slot-remove,
.board-cell:not(.occupied),
.rule-toggle, .rule-help-btn, .trade-rule-btn,
.ff8-menu-item *, .pack-card *, .nav-btn *,
.lobby-mode *, .lobby-diff-option *,
.ff8-card-row *, .pregame-deck-slot *, .btn-coins *,
.menu-icon, .menu-text, .menu-desc,
.gm-tab-btn, .gm-sub-tab, .gm-player-row,
.gm-ticket-item, .gm-back-btn, .gm-pagination button,
.gm-tab-btn *, .gm-sub-tab *, .gm-ticket-item *,
.gm-alert-item button, .gm-modal-overlay,
.gm-tickets-toolbar select, .gm-anticheat-toolbar select,
.gm-anticheat-toolbar button, .gm-search-input,
.support-icon-btn, .support-icon-btn *, .notif-bell, .notif-bell * {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
}

:root {
  --bg-primary: #0e1a40;
  --bg-secondary: #1a2860;
  --bg-card: #162050;
  --bg-hover: #1e3070;
  --text-primary: #ffffff;
  --text-secondary: #9ab8e8;
  --accent: #e8e870;
  --accent-glow: #f0f080;
  --gold: #e8e870;
  /* FF8 window system */
  --ff8-win-top: #3a5ab8;
  --ff8-win-mid: #1e3278;
  --ff8-win-bot: #0a1848;
  --ff8-border-out: #8a8a8a;
  --ff8-border-in: #b8b8b8;
  --ff8-text: #ffffff;
  --ff8-text-dim: #9ab8e8;
  --ff8-highlight: #e8e870;
  --common: #a0a0a0;
  --rare: #4a9eff;
  --epic: #a855f7;
  --legendary: #f59e0b;
  --fire: #ef4444;
  --water: #3b82f6;
  --earth: #84cc16;
  --wind: #06b6d4;
  --dark: #7c3aed;
  --light: #fbbf24;
  --success: #22c55e;
  --danger: #ef4444;
  --border: rgba(255, 255, 255, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== ROTATE DEVICE OVERLAY ===== */
#rotate-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, #1a2860 0%, #0a1030 100%);
  z-index: 9999999;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.rotate-content {
  animation: fadeIn 0.5s ease-out;
}
.rotate-phone {
  font-size: 4rem;
  animation: rotatePhone 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes rotatePhone {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  50%, 75% { transform: rotate(-90deg); }
}
.rotate-arrow {
  font-size: 2.5rem;
  color: #e8e870;
  margin: 0.5rem 0;
  animation: pulse 1.5s ease-in-out infinite;
}
#rotate-text {
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  margin-top: 0.75rem;
}
#rotate-subtext {
  color: #9ab8e8;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: block;
}

.rotate-fs-btn {
  margin-top: 1.25rem;
  background: linear-gradient(135deg, #e8e870, #c8a830);
  color: #1a2440;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  box-shadow: 0 4px 16px rgba(232, 232, 112, 0.25);
  transition: transform 0.2s;
}
.rotate-fs-btn:hover, .rotate-fs-btn:active {
  transform: scale(1.05);
}

/* Show overlay ONLY on mobile in portrait mode */
@media (max-width: 1024px) and (orientation: portrait) {
  #rotate-overlay {
    display: flex !important;
  }
}
/* Hide fullscreen button if already in fullscreen or desktop */
@media (min-width: 1025px) {
  .rotate-fs-btn { display: none; }
}
@media (display-mode: fullscreen), (display-mode: standalone) {
  .rotate-fs-btn { display: none; }
}

/* ===== SPLASH SCREEN ===== */
#splash-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 999999;
  overflow: hidden;
  transition: opacity 0.8s ease-out;
}
#splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}
.splash-bg {
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at 50% 40%, #1a3a8a 0%, #0e1a50 35%, #050a20 70%, #000008 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Floating particles */
.splash-particles {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,232,112,0.9) 0%, rgba(232,232,112,0) 70%);
  animation: particleFloat linear infinite;
}
.p1 { width:4px;height:4px;left:10%;animation-duration:6s;animation-delay:0s; }
.p2 { width:6px;height:6px;left:20%;animation-duration:8s;animation-delay:0.5s; }
.p3 { width:3px;height:3px;left:35%;animation-duration:7s;animation-delay:1s; }
.p4 { width:5px;height:5px;left:50%;animation-duration:9s;animation-delay:0.3s; }
.p5 { width:4px;height:4px;left:65%;animation-duration:6.5s;animation-delay:1.5s; }
.p6 { width:7px;height:7px;left:78%;animation-duration:8.5s;animation-delay:0.8s; }
.p7 { width:3px;height:3px;left:88%;animation-duration:7.5s;animation-delay:2s; }
.p8 { width:5px;height:5px;left:5%;animation-duration:9s;animation-delay:1.2s;background:radial-gradient(circle, rgba(100,160,255,0.8) 0%, transparent 70%); }
.p9 { width:4px;height:4px;left:42%;animation-duration:6s;animation-delay:0.7s;background:radial-gradient(circle, rgba(168,85,247,0.8) 0%, transparent 70%); }
.p10 { width:6px;height:6px;left:58%;animation-duration:7s;animation-delay:1.8s;background:radial-gradient(circle, rgba(100,160,255,0.8) 0%, transparent 70%); }
.p11 { width:3px;height:3px;left:72%;animation-duration:8s;animation-delay:0.4s; }
.p12 { width:5px;height:5px;left:30%;animation-duration:7s;animation-delay:2.2s;background:radial-gradient(circle, rgba(168,85,247,0.8) 0%, transparent 70%); }

@keyframes particleFloat {
  0% { bottom: -10%; opacity: 0; transform: translateX(0) scale(0.5); }
  10% { opacity: 1; transform: scale(1); }
  90% { opacity: 0.8; }
  100% { bottom: 110%; opacity: 0; transform: translateX(40px) scale(0.3); }
}

/* Magic rings */
.splash-rings {
  position: absolute;
  width: 400px; height: 400px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.splash-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(100, 160, 255, 0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ringPulse 4s ease-in-out infinite;
}
.ring1 { width: 250px; height: 250px; animation-delay: 0s; border-color: rgba(232,232,112,0.12); }
.ring2 { width: 350px; height: 350px; animation-delay: 1s; border-color: rgba(100,160,255,0.1); }
.ring3 { width: 450px; height: 450px; animation-delay: 2s; border-color: rgba(168,85,247,0.08); }

@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Content */
.splash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: splashContentIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
@keyframes splashContentIn {
  0% { opacity: 0; transform: scale(0.8) translateY(30px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animated cards behind logo */
.splash-cards {
  position: relative;
  height: 100px;
  margin-bottom: -30px;
}
.splash-card {
  position: absolute;
  width: 60px; height: 84px;
  border-radius: 6px;
  top: 0;
  background: linear-gradient(135deg, #2a4a9a 0%, #1a2860 50%, #3a5ab8 100%);
  border: 2px solid rgba(232, 232, 112, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(232, 232, 112, 0.1);
}
.splash-card::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid rgba(232, 232, 112, 0.3);
}
.sc-left {
  left: calc(50% - 90px);
  animation: cardFanLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.sc-center {
  left: calc(50% - 30px);
  animation: cardFanCenter 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  background: linear-gradient(135deg, #4a3a8a 0%, #2a1a60 50%, #6a4ab8 100%);
  border-color: rgba(168, 85, 247, 0.5);
  z-index: 1;
}
.sc-center::after { border-color: rgba(168, 85, 247, 0.4); }
.sc-right {
  left: calc(50% + 30px);
  animation: cardFanRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes cardFanLeft {
  0% { transform: translateY(40px) rotate(0) scale(0); opacity: 0; }
  100% { transform: translateY(0) rotate(-15deg) scale(1); opacity: 1; }
}
@keyframes cardFanCenter {
  0% { transform: translateY(40px) scale(0); opacity: 0; }
  100% { transform: translateY(-10px) scale(1.1); opacity: 1; }
}
@keyframes cardFanRight {
  0% { transform: translateY(40px) rotate(0) scale(0); opacity: 0; }
  100% { transform: translateY(0) rotate(15deg) scale(1); opacity: 1; }
}

.splash-logo {
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(232, 232, 112, 0.4)) drop-shadow(0 0 60px rgba(100, 160, 255, 0.2));
  animation: splashLogoGlow 3s ease-in-out infinite;
}
@keyframes splashLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(232,232,112,0.3)) drop-shadow(0 0 40px rgba(100,160,255,0.15)); }
  50% { filter: drop-shadow(0 0 40px rgba(232,232,112,0.6)) drop-shadow(0 0 80px rgba(100,160,255,0.3)); }
}

.splash-tagline {
  font-family: 'Cinzel', serif;
  color: #9ab8e8;
  font-size: 0.95rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 0.75rem;
  opacity: 0;
  animation: taglineIn 1s ease-out 1s forwards;
}
@keyframes taglineIn {
  0% { opacity: 0; letter-spacing: 12px; }
  100% { opacity: 1; letter-spacing: 4px; }
}

/* Loading bar */
.splash-loader {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  margin: 1.5rem auto 0;
  overflow: hidden;
  opacity: 0;
  animation: taglineIn 0.5s ease-out 1.5s forwards;
}
.splash-loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #e8e870, #a855f7, #4a9eff, #e8e870);
  background-size: 300% 100%;
  border-radius: 3px;
  animation: loaderProgress 2.5s ease-in-out 1.5s forwards, loaderShimmer 1.5s linear infinite;
}
@keyframes loaderProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}
@keyframes loaderShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

@media (max-width: 600px) {
  .splash-logo { max-width: 220px; }
  .splash-tagline { font-size: 0.75rem; letter-spacing: 3px; }
  .splash-card { width: 45px; height: 63px; }
  .sc-left { left: calc(50% - 68px); }
  .sc-center { left: calc(50% - 22px); }
  .sc-right { left: calc(50% + 24px); }
  .splash-rings { width: 300px; height: 300px; }
  .ring1 { width: 180px; height: 180px; }
  .ring2 { width: 250px; height: 250px; }
  .ring3 { width: 320px; height: 320px; }
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, #1a2a5a 0%, #0e1a40 50%, #0a1230 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  /* iPhone safe areas — landscape mode: notch/Dynamic Island on sides */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

h1, h2, h3 {
  font-family: 'Cinzel', serif;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--accent); }
  50% { box-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(124, 92, 255, 0.3); }
}

@keyframes cardFlip {
  0% { transform: perspective(600px) rotateY(0); }
  50% { transform: perspective(600px) rotateY(90deg); }
  100% { transform: perspective(600px) rotateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes legendaryShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.animate-in { animation: fadeIn 0.5s ease-out; }

/* ===== NAVBAR — FF8 Blue ===== */
.navbar {
  background: linear-gradient(180deg, var(--ff8-win-top) 0%, var(--ff8-win-mid) 100%);
  border-bottom: 3px solid var(--ff8-border-out);
  box-shadow: inset 0 -1px 0 var(--ff8-border-in), 0 2px 8px rgba(0,0,0,0.4);
  padding: 0.6rem max(1.5rem, env(safe-area-inset-right)) 0.6rem max(1.5rem, env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-logo {
  height: 28px;
  width: 28px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(192, 184, 144, 0.3);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 480px) {
  .navbar-logo { height: 22px; width: 22px; }
  .navbar-brand { font-size: 0.95rem; }
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  justify-content: center;
}

.nav-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #c0d0f0;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  font-size: 0.8rem;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ff8-highlight);
  border-color: rgba(255, 255, 255, 0.3);
}

.nav-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ff8-highlight);
  border-color: var(--ff8-highlight);
  text-shadow: 0 0 6px rgba(232, 232, 112, 0.3);
}

.nav-btn-guide {
  color: #8ab4c8;
  border-color: rgba(138, 180, 200, 0.3);
}
.nav-btn-guide:hover {
  color: #a0d0e8;
  border-color: rgba(138, 180, 200, 0.5);
  background: rgba(138, 180, 200, 0.08);
}
.nav-btn-guide.active {
  color: #a0d0e8;
  border-color: rgba(138, 180, 200, 0.6);
  background: rgba(138, 180, 200, 0.12);
  text-shadow: 0 0 6px rgba(138, 180, 200, 0.3);
}

.nav-btn-shop {
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(232,160,32,0.1));
  border-color: rgba(212,175,55,0.5);
  color: #d4af37;
  text-shadow: 0 0 4px rgba(212,175,55,0.2);
}
.nav-btn-shop:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(232,160,32,0.18));
  border-color: rgba(212,175,55,0.7);
  color: #f0d060;
  text-shadow: 0 0 8px rgba(212,175,55,0.4);
}
.nav-btn-shop.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(232,160,32,0.2));
  border-color: #d4af37;
  color: #f0d060;
  text-shadow: 0 0 10px rgba(212,175,55,0.5);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.coins-display {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  font-weight: 600;
  color: var(--ff8-highlight);
  font-size: 0.85rem;
  font-family: 'Cinzel', serif;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: border-color 0.2s;
}
.coins-display:hover {
  border-color: var(--ff8-highlight);
}

.nav-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.level-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.level-display {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.85rem;
  font-family: 'Cinzel', serif;
  transition: border-color 0.2s;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
}
.level-display:hover {
  border-color: rgba(120, 160, 220, 0.5);
}
.level-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 0.6rem 0.75rem;
  z-index: 1000;
}
.level-popup.open {
  display: block;
}
.level-popup-row {
  margin-bottom: 0.35rem;
}
.level-popup .xp-bar-bg {
  height: 8px;
}
.level-popup-text {
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  text-align: center;
}
.level-popup-xp-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(135deg, rgba(90, 60, 180, 0.3), rgba(60, 40, 140, 0.4));
  border: 1px solid rgba(140, 110, 220, 0.3);
  border-radius: 5px;
  color: #b88cff;
  font-size: 0.65rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: all 0.2s;
  width: 100%;
}
.level-popup-xp-guide * {
  cursor: inherit !important;
  pointer-events: none;
}
.level-popup-xp-guide:hover {
  background: linear-gradient(135deg, rgba(90, 60, 180, 0.5), rgba(60, 40, 140, 0.6));
  border-color: rgba(140, 110, 220, 0.5);
  color: #d4b8ff;
}

/* ===== VIEWS ===== */
.view {
  display: none;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.4s ease-out;
}

.view.active {
  display: block;
}

/* PvP Arena */
.pvp-arena {
  animation: fadeIn 0.3s ease-out;
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem;
}

.pvp-arena-header {
  text-align: center;
  margin-bottom: 1.2rem;
}

.pvp-arena-title {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #e8e878;
  text-shadow: 0 0 8px rgba(232, 232, 120, 0.3);
  letter-spacing: 2px;
}

.pvp-arena-subtitle {
  font-size: 0.8rem;
  color: var(--ff8-text-dim);
  margin-top: 0.3rem;
}

.pvp-arena-back {
  margin-top: 0.8rem;
}

.pvp-arena .ff8-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pvp-arena .ff8-menu-item {
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 220, 0.15);
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.6), rgba(20, 28, 60, 0.8));
  border-bottom: 1px solid rgba(120, 160, 220, 0.15);
  padding: 0.85rem 1rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
}

.pvp-arena .ff8-menu-item * {
  cursor: inherit !important;
  pointer-events: none;
}

.pvp-arena .ff8-menu-item:hover {
  background: linear-gradient(135deg, rgba(40, 55, 100, 0.7), rgba(25, 35, 75, 0.9));
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.15);
}

.pvp-arena-back .ff8-menu-item {
  justify-content: center;
}

.pvp-arena-back .ff8-menu-item.secondary {
  color: #7a9ac8;
}

/* PvP Browse Overlay */
.pvp-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease-out;
  padding: 1rem;
}

.pvp-overlay-content {
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pvp-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.8rem;
}

.pvp-overlay-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: #e8e878;
  margin: 0;
}

.pvp-overlay-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  line-height: 1;
  padding: 0 0.3rem;
  transition: color 0.2s;
}

.pvp-overlay-close:hover {
  color: #fff;
}

.pvp-lobby-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pvp-empty {
  text-align: center;
  color: var(--ff8-text-dim);
  padding: 3rem 1rem;
  font-style: italic;
  font-size: 0.95rem;
}

.pvp-game-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(180deg, rgba(30, 40, 80, 0.6) 0%, rgba(20, 28, 60, 0.8) 100%);
  border: 1px solid rgba(120, 140, 200, 0.25);
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s;
}

.pvp-game-row:hover {
  border-color: rgba(232, 232, 120, 0.4);
  background: linear-gradient(180deg, rgba(40, 50, 100, 0.7) 0%, rgba(25, 35, 75, 0.9) 100%);
}

.pvp-game-info {
  flex: 1;
  min-width: 0;
}

.pvp-host-name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-host-level {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  margin-top: 0.15rem;
}

.pvp-game-details {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.pvp-game-rules {
  display: flex;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.pvp-rule-icon {
  font-size: 0.9rem;
}

.pvp-no-rules {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  font-style: italic;
}

.pvp-game-trade {
  font-size: 0.75rem;
  color: #c0b890;
  background: rgba(192, 184, 144, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}

.btn-join-pvp {
  background: linear-gradient(180deg, rgba(80, 100, 200, 0.6) 0%, rgba(60, 75, 160, 0.8) 100%);
  border: 1px solid rgba(120, 140, 220, 0.4);
  border-radius: 4px;
  color: #fff;
  padding: 0.4rem 1rem;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.btn-join-pvp:hover {
  background: linear-gradient(180deg, rgba(100, 120, 230, 0.7) 0%, rgba(80, 95, 190, 0.9) 100%);
  border-color: rgba(232, 232, 120, 0.5);
}

/* Game view: full-width, no padding, black bg */
#game.view.active {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ===== PWA Install Banner ===== */
#pwa-install-banner {
  max-width: 500px;
  width: 100%;
  background: linear-gradient(135deg, #1a2860 0%, #2a3a78 50%, #1a3a8a 100%);
  border: 2px solid rgba(100, 140, 220, 0.3);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  animation: fadeIn 0.5s ease-out;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
#pwa-install-banner.pwa-banner-success {
  background: linear-gradient(135deg, #0a3a20, #1a5a35);
  border-color: rgba(34, 170, 85, 0.4);
}
.pwa-banner-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 1rem;
  padding: 4px 6px;
}
.pwa-banner-close:hover { color: #ffffff; }

.pwa-banner-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.pwa-banner-icon { font-size: 2.2rem; }
.pwa-banner-header strong {
  display: block;
  color: #e8e870;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
}
.pwa-banner-header small {
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
}

.pwa-banner-features {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.pwa-banner-features span {
  background: rgba(255,255,255,0.08);
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  color: #c0d0f0;
  white-space: nowrap;
}

.pwa-steps {
  margin-bottom: 0.75rem;
}
.pwa-steps-intro {
  color: rgba(255,255,255,0.8);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.pwa-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #e2e8f0;
  font-size: 0.82rem;
  line-height: 1.3;
}
.pwa-step:last-child { border-bottom: none; }
.pwa-step-num {
  width: 26px; height: 26px;
  background: rgba(232, 232, 112, 0.15);
  color: #e8e870;
  border: 1px solid rgba(232, 232, 112, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.pwa-banner-btn-big {
  width: 100%;
  background: linear-gradient(135deg, #e8e870, #c8a830);
  color: #1a2440;
  border: none;
  border-radius: 10px;
  padding: 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(232, 232, 112, 0.2);
}
.pwa-banner-btn-big:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 24px rgba(232, 232, 112, 0.35);
}

.pwa-banner-skip {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  padding: 0.5rem 0 0;
  text-align: center;
}
.pwa-banner-skip:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 600px) {
  #pwa-install-banner {
    padding: 1rem;
    margin: 0 0.5rem 0.75rem;
    border-radius: 12px;
  }
  .pwa-banner-icon { font-size: 1.8rem; }
  .pwa-banner-header strong { font-size: 0.85rem; }
  .pwa-banner-features { gap: 0.4rem; }
  .pwa-banner-features span { font-size: 0.65rem; padding: 0.25rem 0.5rem; }
  .pwa-step { font-size: 0.78rem; }
}

/* ===== AUTH ===== */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}

.auth-box {
  background: linear-gradient(180deg, var(--ff8-win-top) 0%, var(--ff8-win-mid) 40%, var(--ff8-win-bot) 100%);
  border: 3px solid var(--ff8-border-out);
  border-radius: 8px;
  padding: 2.5rem;
  width: 100%;
  max-width: 500px;
  animation: fadeIn 0.6s ease-out;
  box-shadow: inset 0 0 0 2px var(--ff8-border-in), inset 0 0 0 3px rgba(0,0,0,0.5), 0 4px 24px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.auth-logo {
  display: block;
  margin: 0 auto 1.5rem;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}

.auth-box h1 {
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.auth-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  color: var(--ff8-text-dim);
  font-size: 0.85rem;
}

.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #080828;
  border: 2px solid #4a5a8a;
  border-radius: 3px;
  color: #ffffff;
  font-size: 1rem;
  transition: border-color 0.2s;
  font-family: 'Inter', sans-serif;
}

.form-group input:focus {
  outline: none;
  border-color: #8a9aba;
  box-shadow: 0 0 0 2px rgba(138, 154, 186, 0.2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  font-family: 'Cinzel', serif;
}

.btn-primary {
  background: linear-gradient(180deg, #4a6ac8 0%, #2a4a98 100%);
  border: 2px solid var(--ff8-border-out);
  box-shadow: inset 0 0 0 1px var(--ff8-border-in);
  color: #ffffff;
  width: 100%;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #5a7ad8 0%, #3a5aa8 100%);
  border-color: #a0a0a0;
  color: #ffffff;
}

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-hover);
}

.btn-gold {
  background: linear-gradient(180deg, #4a6ac8 0%, #2a4a98 100%);
  color: #fff;
  border: 2px solid var(--ff8-border-out);
  box-shadow: inset 0 0 0 1px var(--ff8-border-in);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--ff8-border-in), 0 4px 15px rgba(58, 90, 184, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  color: white;
}

.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }

.auth-toggle {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-secondary);
}

.auth-toggle a {
  color: var(--ff8-text-dim);
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  text-decoration: none;
}

.auth-toggle a:hover {
  text-decoration: underline;
  color: var(--ff8-highlight);
}

.auth-footer {
  text-align: center;
  margin-top: 1.2rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ===== AUTH MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
  .auth-container {
    padding: 0.75rem;
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .auth-box {
    padding: 1.25rem 1rem;
    max-width: 100%;
    border-radius: 10px;
    margin-top: 0.5rem;
  }
  .auth-logo {
    max-width: 200px;
    margin: 0 auto 0.75rem;
  }
  .auth-subtitle {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  .form-group {
    margin-bottom: 0.75rem;
  }
  .form-group label {
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
  }
  .form-group input {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
  }
  #password-rules {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }
  .auth-checkbox-label {
    font-size: 0.78rem;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .auth-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }
  .auth-parental-label span {
    font-size: 0.72rem;
    line-height: 1.3;
  }
  #auth-submit {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    margin-top: 0.5rem;
  }
  .auth-toggle {
    margin-top: 1rem;
    font-size: 0.85rem;
  }
  .auth-footer {
    margin-top: 0.75rem;
    font-size: 0.7rem;
  }
  .lang-dropdown {
    margin-top: 0.5rem !important;
  }
}

@media (max-height: 700px) and (max-width: 600px) {
  .auth-container {
    align-items: flex-start;
    overflow-y: auto;
  }
  .auth-logo {
    max-width: 150px;
    margin: 0 auto 0.5rem;
  }
  .auth-subtitle {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
  }
  .form-group {
    margin-bottom: 0.5rem;
  }
  .form-group input {
    padding: 0.5rem 0.6rem;
  }
}

.error-msg {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-align: center;
}

.success-msg {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-align: center;
}

/* ===== HUB — Game-like Full Screen Layout ===== */
.hub {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 30%, #1a3a7a 0%, #0e1a50 40%, #080a28 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
}

/* Hub Top Bar */
.hub-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem max(0.75rem, env(safe-area-inset-left)) 0.4rem max(0.75rem, env(safe-area-inset-right));
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(232,232,112,0.1);
  flex-shrink: 0;
  position: relative;
}
.hub-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.hub-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #3a5ab8, #2a4a98);
  border: 2px solid #e8e870;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #e8e870;
  font-family: 'Cinzel', serif;
}
.hub-username {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
}
.hub-rank {
  color: #9ab8e8;
  font-size: 0.7rem;
  display: block;
}
/* Brand center */
.hub-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.hub-logo {
  height: 28px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(232,232,112,0.3));
}
.hub-title {
  font-family: 'Cinzel', serif;
  color: #e8e870;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(232,232,112,0.2);
  white-space: nowrap;
}

.hub-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
}

/* Language selector */
.hub-lang {
  position: relative;
}
.hub-lang-btn { font-size: 1.1rem !important; }
.hub-lang-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: rgba(15,25,60,0.97);
  border: 1px solid rgba(100,140,220,0.3);
  border-radius: 8px;
  padding: 0.3rem;
  z-index: 50;
  flex-direction: column;
  gap: 0.15rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.hub-lang-menu.open { display: flex; }
.hub-lang-opt {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: background 0.2s;
}
.hub-lang-opt:hover { background: rgba(255,255,255,0.1); }
.hub-logout-btn { font-size: 0.85rem !important; }
.hub-coins {
  background: rgba(232,232,112,0.12);
  border: 1px solid rgba(232,232,112,0.25);
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  color: #e8e870;
  font-size: 0.8rem;
  font-weight: 600;
}
.hub-icon-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s;
}
.hub-icon-btn:hover { background: rgba(255,255,255,0.12); }

/* Hub Main Grid — 3 columns */
.hub-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-height: 0;
}

/* Hub Tiles (side columns) */
.hub-col-left, .hub-col-right {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
}
.hub-tile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: linear-gradient(135deg, rgba(30,50,100,0.6), rgba(20,35,80,0.8));
  border: 1px solid rgba(100,140,220,0.2);
  border-radius: 10px;
  color: #c0d0f0;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.hub-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, transparent 60%, rgba(232,232,112,0.03) 100%);
  pointer-events: none;
}
.hub-tile:hover {
  background: linear-gradient(135deg, rgba(42,70,140,0.7), rgba(30,50,110,0.9));
  border-color: rgba(232,232,112,0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.hub-tile:active {
  transform: scale(0.97);
}
.hub-tile-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.hub-tile-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.hub-tile-badge {
  margin-left: auto;
  background: rgba(232,232,112,0.15);
  color: #e8e870;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Tile color accents */
.hub-tile-collection { border-left: 3px solid #4a9eff; }
.hub-tile-auction { border-left: 3px solid #f59e0b; }
.hub-tile-social { border-left: 3px solid #22c55e; }
.hub-tile-shop { border-right: 3px solid #a855f7; }
.hub-tile-ranking { border-right: 3px solid #e8e870; }
.hub-tile-achievements { border-right: 3px solid #ef4444; }

/* Center Play Area */
.hub-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.hub-play-area {
  text-align: center;
  width: 100%;
  max-width: 380px;
}
.hub-play-title {
  font-family: 'Cinzel', serif;
  color: #e8e870;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(232,232,112,0.3);
}
.hub-play-buttons {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.hub-play-btn {
  flex: 1;
  max-width: 170px;
  background: linear-gradient(180deg, rgba(40,60,120,0.8) 0%, rgba(20,35,80,0.95) 100%);
  border: 2px solid rgba(100,140,220,0.3);
  border-radius: 14px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.hub-play-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(232,232,112,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.hub-play-btn:hover::after { opacity: 1; }
.hub-play-btn:hover {
  border-color: #e8e870;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232,232,112,0.15), 0 0 40px rgba(232,232,112,0.05);
}
.hub-play-btn:active { transform: scale(0.96); }
.hub-play-ai { border-top: 3px solid #4a9eff; }
.hub-play-pvp { border-top: 3px solid #ef4444; }
.hub-play-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.25rem;
}
.hub-play-name {
  display: block;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.hub-play-desc {
  display: block;
  color: #7a8aaa;
  font-size: 0.65rem;
  margin-top: 0.15rem;
}

/* Stats bar */
.hub-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(0,0,0,0.25);
  border-radius: 20px;
  padding: 0.35rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.hub-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}
.hub-stat-val {
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'Cinzel', serif;
}
.hub-stat-win { color: #4ade80; }
.hub-stat-loss { color: #f87171; }
.hub-stat-rate { color: #e8e870; }
.hub-stat-lbl {
  color: #7a8aaa;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hub-stat-sep {
  color: rgba(255,255,255,0.15);
  font-size: 0.6rem;
}

/* Bottom Bar */
.hub-bottombar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  flex-shrink: 0;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.hub-bottom-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: #7a8aaa;
  padding: 0.25rem 0.6rem;
  font-size: 0.68rem;
  transition: all 0.2s;
}
.hub-bottom-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #c0d0f0;
}

/* Hub responsive — small landscape phones */
@media (max-height: 450px) {
  .hub-topbar { padding: 0.2rem 0.5rem; }
  .hub-avatar { width: 28px; height: 28px; font-size: 0.55rem; }
  .hub-username { font-size: 0.72rem; }
  .hub-rank { display: none; }
  .hub-logo { height: 22px; }
  .hub-title { font-size: 0.7rem; }
  .hub-grid { padding: 0.25rem 0.5rem; gap: 0.25rem; }
  .hub-tile { padding: 0.35rem 0.5rem; }
  .hub-tile-icon { font-size: 1rem; }
  .hub-tile-label { font-size: 0.65rem; }
  .hub-play-btn { padding: 0.5rem 0.4rem; border-radius: 10px; }
  .hub-play-icon { font-size: 1.3rem; }
  .hub-play-name { font-size: 0.72rem; }
  .hub-play-desc { font-size: 0.58rem; }
  .hub-play-title { font-size: 0.75rem; margin-bottom: 0.2rem; }
  .hub-stats { padding: 0.2rem 0.8rem; }
  .hub-stat-val { font-size: 0.7rem; }
  .hub-stat-lbl { font-size: 0.5rem; }
  .hub-bottombar { padding: 0.15rem 0.5rem; }
  .hub-bottom-btn { font-size: 0.58rem; padding: 0.15rem 0.35rem; }
  .hub-coins { font-size: 0.7rem; padding: 0.15rem 0.4rem; }
  .hub-icon-btn { width: 28px; height: 28px; font-size: 0.85rem; }
}

/* Hub on very small screens */
@media (max-height: 360px) {
  .hub-bottombar { display: none; }
  .hub-play-desc { display: none; }
  .hub-tile-badge { display: none; }
  .hub-brand { display: none; }
}

/* ===== LOBBY — FF8 Style (legacy) ===== */

.lobby-mat {
  min-height: calc(100vh - 60px);
  background: radial-gradient(ellipse at center, #1a3068 0%, #0e1a40 60%, #0a1230 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.5rem 2rem 2rem;
}

.lobby-mat > * {
  position: relative;
  z-index: 1;
}

.lobby-logo {
  text-align: center;
  margin-bottom: 0.5rem;
}

.lobby-logo-img {
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}

.lobby-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.lobby-title h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow:
    0 0 16px rgba(150, 180, 255, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 4px;
}

.lobby-seed-rank {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--ff8-text-dim);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  margin-top: 0.25rem;
  letter-spacing: 2px;
}

/* FF8 menu box — authentic FF8 blue gradient with gray borders */
.ff8-box {
  background: linear-gradient(180deg, var(--ff8-win-top) 0%, var(--ff8-win-mid) 40%, var(--ff8-win-bot) 100%);
  border: 3px solid var(--ff8-border-out);
  box-shadow:
    inset 0 0 0 2px var(--ff8-border-in),
    inset 0 0 0 3px rgba(0,0,0,0.5),
    0 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

/* ===== LOBBY STATS — Crystal Design ===== */
.lobby-stats-section {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem;
}

.lobby-stats-grid {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.lobby-stat-crystal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 0.5rem;
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.6), rgba(15, 22, 55, 0.8));
  border: 1px solid rgba(120, 160, 220, 0.12);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.lobby-stat-crystal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(120, 160, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.stat-crystal-accent {
  border-color: rgba(212, 168, 67, 0.2);
}

.stat-crystal-accent::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(212, 168, 67, 0.08) 0%, transparent 70%);
}

.crystal-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.crystal-wins { color: #4ade80; }
.crystal-losses { color: #f87171; }
.crystal-rate { color: #e8e870; }

.crystal-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
  line-height: 1;
}

.crystal-pct {
  font-size: 0.85rem;
  color: #e8e870;
  margin-left: 1px;
}

.crystal-label {
  font-size: 0.65rem;
  color: var(--ff8-text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: 'Cinzel', serif;
}

/* Breakdown row */
.lobby-breakdown {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.5), rgba(15, 22, 55, 0.7));
  border: 1px solid rgba(120, 160, 220, 0.1);
  border-radius: 10px;
  padding: 0.65rem 0;
  overflow: hidden;
}

.breakdown-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
}

.breakdown-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(120, 160, 220, 0.25), transparent);
  flex-shrink: 0;
}

.breakdown-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.breakdown-ai { color: #b88cff; }
.breakdown-pvp { color: #ffaa50; }

.breakdown-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.breakdown-scores {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Cinzel', serif;
}

.breakdown-win { color: #4ade80; }
.breakdown-loss { color: #f87171; }
.breakdown-sep { color: #3a4a6a; margin: 0 0.2rem; }

/* XP Guide */
.xp-guide-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, rgba(90, 60, 180, 0.25), rgba(60, 40, 140, 0.35));
  border: 1px solid rgba(140, 110, 220, 0.3);
  border-radius: 8px;
  color: #b88cff;
  font-size: 0.85rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: all 0.3s;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.xp-guide-toggle * {
  cursor: inherit !important;
  pointer-events: none;
}

.xp-guide-toggle:hover {
  color: #d4b8ff;
  background: linear-gradient(135deg, rgba(90, 60, 180, 0.35), rgba(60, 40, 140, 0.5));
  border-color: rgba(140, 110, 220, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(140, 110, 220, 0.2);
}

.xp-guide-panel {
  margin-top: 0.6rem;
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.5), rgba(15, 22, 55, 0.7));
  border: 1px solid rgba(120, 160, 220, 0.1);
  border-radius: 10px;
  padding: 0.8rem;
  animation: fadeIn 0.3s ease-out;
}

.xp-guide-title {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: #b88cff;
  text-align: center;
  margin-bottom: 0.6rem;
  letter-spacing: 1px;
}

.xp-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-bottom: 0.6rem;
}

.xp-guide-table th {
  color: var(--ff8-text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.xp-guide-table td {
  padding: 0.3rem 0.4rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.xp-guide-mode {
  text-align: left !important;
  color: #c0d0f0;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
}

.xp-w { color: #4ade80; font-weight: 700; }
.xp-l { color: #f87171; font-weight: 600; }
.xp-d { color: #e8e870; font-weight: 600; }

.xp-guide-bonuses {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.xp-guide-bonus {
  font-size: 0.7rem;
  color: #7a9ac8;
  text-align: center;
}

.xp-guide-malus {
  color: #f87171;
}

.play-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.play-panel-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.play-panel-icon { font-size: 1.1rem; }
.play-panel-title {
  font-family: 'Cinzel', serif; font-size: 0.95rem;
  color: var(--ff8-highlight); font-weight: 600;
}
.play-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  text-align: center;
}
.play-buttons {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: center;
  padding: 0.75rem;
}
.play-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.7), rgba(20, 28, 60, 0.9));
  border: 1px solid rgba(120, 160, 220, 0.2);
  border-radius: 12px;
  color: #c0d0f0;
  font-family: 'Cinzel', serif;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: all 0.25s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.play-card * {
  cursor: inherit !important;
  pointer-events: none;
}
.play-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(120, 160, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.play-card:hover {
  border-color: rgba(120, 160, 220, 0.5);
  background: linear-gradient(135deg, rgba(40, 55, 100, 0.8), rgba(25, 35, 75, 0.95));
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.2);
}
.play-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.play-card-ai .play-card-icon {
  background: radial-gradient(circle, rgba(180, 120, 255, 0.15), transparent 70%);
  color: #b88cff;
}
.play-card-pvp .play-card-icon {
  background: radial-gradient(circle, rgba(255, 170, 80, 0.15), transparent 70%);
  color: #ffaa50;
}
.play-card:hover .play-card-icon {
  transform: scale(1.1);
}
.play-card-ai:hover .play-card-icon { color: #d0b0ff; }
.play-card-pvp:hover .play-card-icon { color: #ffc070; }
.play-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.play-card-title {
  font-size: 0.95rem;
  color: #e8e8f0;
  letter-spacing: 0.04em;
}
.play-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: #7a9ac8;
}

.ff8-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: transparent;
  border: none;
  color: #c0d0f0;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.15s;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ff8-menu-item:last-child { border-bottom: none; }

.ff8-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ff8-highlight);
  padding-left: 1.5rem;
}

.ff8-menu-item:hover .menu-icon { transform: scale(1.1); }

.menu-icon {
  font-size: 1.3rem;
  width: 32px;
  text-align: center;
  transition: transform 0.15s;
}

.menu-text { flex: 1; }

.menu-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: #7a9ac8;
  margin-top: 0.1rem;
}

/* Deck preview */
.deck-preview-section {
  width: 100%;
  max-width: 560px;
  margin-top: 1.25rem;
}

.deck-preview-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: #8a8a9a;
  text-align: center;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.deck-preview {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 0.75rem;
}

.deck-preview .tt-card { width: 64px; height: 64px; }
.deck-preview .tt-val { font-size: 0.55rem; width: 11px; height: 11px; }
.deck-preview .tt-values { width: 22px; height: 26px; top: 2px; left: 2px; }

.deck-empty {
  color: #6a6a7a;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.75rem;
}

.deck-empty a { color: var(--ff8-highlight); text-decoration: none; cursor: url('/img/cursor-pointer.png') 6 0, pointer; }
.deck-empty a:hover { text-decoration: underline; }

/* Daily quest bar */
.daily-bar {
  margin-top: 1rem;
  width: 100%;
  max-width: 560px;
}

.daily-bar button {
  width: 100%;
  padding: 0.6rem 1rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #c0d0f0;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}

.daily-bar button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ff8-highlight);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Lobby bottom wrapper with side panels */
/* (lobby-bottom-wrapper removed — replaced by lobby-stats-section) */

/* Leaderboard */
.leaderboard-section {
  width: 100%;
  max-width: 560px;
  margin-top: 1.25rem;
}

.leaderboard-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #ffffff;
  text-align: center;
  margin-bottom: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.leaderboard-loading, .leaderboard-empty {
  text-align: center;
  color: #7a9ac8;
  font-size: 0.85rem;
  padding: 1rem;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.leaderboard-table thead th {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}

.leaderboard-table thead th:nth-child(2) { text-align: left; }

.leaderboard-row td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: #9ab8e8;
}

.leaderboard-row td:nth-child(2) { text-align: left; }

.lb-rank {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #7a9ac8;
}

.leaderboard-row:nth-child(1) .lb-rank { color: var(--ff8-highlight); }
.leaderboard-row:nth-child(2) .lb-rank { color: #b0b0b0; }
.leaderboard-row:nth-child(3) .lb-rank { color: #cd7f32; }

.lb-name { color: #d0e0ff; }
.lb-level { color: #ffffff; font-weight: 600; }
.lb-wins { color: #4ade80; }
.lb-losses { color: #f87171; }
.lb-wr { color: #d0e0ff; }

.leaderboard-row.self {
  background: rgba(232, 232, 112, 0.08);
}

.leaderboard-row.self td {
  color: var(--ff8-highlight);
}

.leaderboard-row.self .lb-wins { color: #6aee9a; }
.leaderboard-row.self .lb-losses { color: #ff9191; }

/* Queue status */
.queue-status {
  text-align: center;
  padding: 1.5rem;
}

.queue-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ff8-highlight);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 0.75rem;
}

#view-lobby.view.active {
  max-width: none;
  padding: 0;
  margin: 0;
}

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

/* ===== GAME BOARD - Authentic FF8 Triple Triad ===== */
.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 0;
  background: url('/img/board-mat.jpg') center center / cover no-repeat;
  background-color: #1a1408;
  position: relative;
  overflow: hidden;
}

/* Full parchment mat background */
.game-mat {
  position: relative;
  background: url('/img/board-mat.jpg') center center / cover no-repeat;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.game-area {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3.5rem;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* ===== Coin Flip Overlay ===== */
.coin-flip-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.coin-flip-overlay.visible {
  opacity: 1;
}
.coin-flip-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.coin-flip-box {
  text-align: center;
  padding: 2.5rem 3rem;
  min-width: 340px;
  animation: coinFlipBoxIn 0.4s ease;
}

@keyframes coinFlipBoxIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.coin-flip-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #a0b8d0;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.coin-flip-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.coin-flip-name {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #556b8a;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  border: 2px solid transparent;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
  min-width: 120px;
}

.coin-flip-name.active {
  color: #ffd700;
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 24px rgba(255, 215, 0, 0.3);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.coin-flip-vs {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: #7a9ac8;
  font-weight: 700;
}

.coin-flip-result {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #7ab8ff;
  margin-top: 1.5rem;
  min-height: 1.5em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  text-shadow: 0 0 10px rgba(122, 184, 255, 0.5);
}

.coin-flip-result.visible {
  opacity: 1;
  transform: translateY(0);
}

.turn-indicator {
  font-size: 0.9rem;
  color: #d4c8a0;
  padding: 0.4rem 1.2rem;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  font-family: 'Cinzel', serif;
  margin-bottom: 8px;
  z-index: 2;
  text-shadow: 1px 1px 2px #000;
}

.turn-indicator.my-turn {
  color: #7ab8ff;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(122, 184, 255, 0.4);
  text-shadow: 0 0 8px rgba(122, 184, 255, 0.5);
}

/* Turn header with timer */
.turn-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 8px;
  z-index: 2;
}

.turn-header .turn-indicator {
  margin-bottom: 0;
}

.turn-timer {
  font-size: 0.9rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #d4a843;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(212, 168, 67, 0.3);
  min-width: 48px;
  text-align: center;
}

.turn-timer.urgent {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
  animation: timerPulse 0.5s ease-in-out infinite alternate;
}

@keyframes timerPulse {
  from { text-shadow: none; }
  to { text-shadow: 0 0 8px rgba(248, 113, 113, 0.8); }
}

/* Surrender button */
.game-actions {
  text-align: center;
  margin-top: 8px;
  z-index: 2;
}

/* ===== Player/Opponent info in game ===== */
.player-info, .opponent-info {
  text-align: center;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
}
.player-name {
  color: #4ade80;
  font-weight: 600;
}
.opponent-name {
  color: #f0c050;
  font-weight: 600;
}
.opponent-level {
  color: #a0a0b0;
  font-size: 0.7rem;
  margin-left: 0.3rem;
}
.opponent-title {
  display: block;
  color: #b88cff;
  font-size: 0.65rem;
  font-style: italic;
}
.clickable-profile {
  cursor: pointer;
  transition: color 0.2s;
}
.clickable-profile:hover {
  color: #fff;
  text-decoration: underline;
}

.btn-surrender {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.5);
  color: #f87171;
  padding: 0.4rem 1.4rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.btn-surrender:hover {
  color: #fff;
  background: rgba(248, 113, 113, 0.25);
  border-color: rgba(248, 113, 113, 0.8);
  background: rgba(248, 113, 113, 0.08);
}

/* Surrender confirmation dialog */
.surrender-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.surrender-dialog {
  text-align: center;
  padding: 1.5rem 2rem;
  max-width: 340px;
}

.surrender-dialog h3 {
  font-family: 'Cinzel', serif;
  color: #f87171;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.surrender-dialog p {
  color: #8a8a9a;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.surrender-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.btn-surrender-confirm {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-surrender-confirm:hover {
  background: rgba(239, 68, 68, 0.25);
}

.btn-surrender-cancel {
  background: rgba(139, 117, 48, 0.1);
  border: 1px solid rgba(139, 117, 48, 0.3);
  color: #c0b890;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}

.btn-surrender-cancel:hover {
  background: rgba(139, 117, 48, 0.2);
}

/* ===== SIDE HANDS — Left (player) / Right (opponent) ===== */
.side-hand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}

.side-hand .tt-card {
  width: 120px;
  height: 120px;
}

.side-hand .tt-val {
  font-size: 0.85rem;
  width: 16px;
  height: 16px;
}

.side-hand .tt-values {
  width: 34px;
  height: 42px;
  top: 4px;
  left: 4px;
}

.side-hand .tt-card-name,
.side-hand .tt-stars {
  display: none;
}

.side-hand .card-back {
  width: 120px;
  height: 120px;
}

.hand-score {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: #4A7AEE;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.hand-score.opp-score {
  color: #E87090;
}

/* ===== BOARD — Authentic FF8 Triple Triad ===== */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: transparent;
  position: relative;
  border: 2px solid rgba(60, 45, 20, 0.3);
  box-shadow: none;
  width: min(640px, 78vh);
  height: min(640px, 78vh);
}

.board-cell {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: background 0.15s;
  position: relative;
  box-shadow: none;
  border: 1px solid rgba(80, 60, 30, 0.15);
}

.board-cell:hover:not(.occupied) {
  background: rgba(80, 60, 30, 0.2);
  box-shadow: inset 0 0 8px rgba(200,180,120,0.1);
}

.board-cell.occupied {
  cursor: default;
  padding: 2px;
  background: transparent;
}

.board-cell .tt-card {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(100, 80, 40, 0.6);
  box-sizing: border-box;
}
.board-cell .tt-card.blue {
  border-color: #5a80e0;
}
.board-cell .tt-card.red {
  border-color: #e05a70;
}

.board-cell .tt-card-name,
.board-cell .tt-stars {
  display: none;
}

.board-cell.highlight {
  box-shadow: inset 0 0 15px rgba(200, 180, 120, 0.3);
}

/* ===== FF8 Card Animations ===== */

/* Placement: scale bounce from small to normal */
@keyframes cardPlace {
  0%  { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.08); opacity: 1; }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.anim-place {
  animation: cardPlace 0.35s ease-out forwards;
}

/* Capture: FF8 card flip — rotates on Y axis, color swaps at midpoint */
@keyframes cardFlipOut {
  0%   { transform: perspective(400px) rotateY(0deg); filter: brightness(1); }
  40%  { filter: brightness(1.6); }
  100% { transform: perspective(400px) rotateY(90deg); filter: brightness(2); }
}

@keyframes cardFlipIn {
  0%   { transform: perspective(400px) rotateY(-90deg); filter: brightness(2); }
  60%  { filter: brightness(1.4); }
  100% { transform: perspective(400px) rotateY(0deg); filter: brightness(1); }
}

/* ===== TRIPLE TRIAD CARD — Authentic FF8 with real images ===== */
.tt-card {
  width: 128px;
  height: 128px;
  border-radius: 2px;
  position: relative;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  overflow: hidden;
  font-family: 'Courier New', 'Consolas', monospace;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

/* Color background layer — sits behind the illustration */
.tt-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tt-card.blue .tt-card-bg {
  background: linear-gradient(180deg, #c0c8e8 0%, #4060c0 100%);
}

.tt-card.red .tt-card-bg {
  background: linear-gradient(180deg, #e8b0b8 0%, #c04060 100%);
}

/* Card illustration image — official FF8 art with built-in frame */
.tt-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* Legacy emoji art — fallback */
.tt-card-art {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
  z-index: 1;
}

/* Card name — collection/shop context */
.tt-card-name {
  position: absolute;
  bottom: 14px;
  left: 3px;
  right: 3px;
  font-size: 0.45rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 5;
  font-family: 'Inter', sans-serif;
}

/* Stars — FF8 level stars (collection/shop only) */
.tt-stars {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.55rem;
  line-height: 1;
  z-index: 5;
  letter-spacing: 1px;
}

.tt-stars .star-filled {
  color: #FFD700;
  text-shadow: 0 0 3px rgba(255,215,0,0.8), 0 1px 1px rgba(0,0,0,0.9);
}
.tt-stars .star-empty {
  color: rgba(255,255,255,0.15);
  text-shadow: none;
}

/* Element icon — top right like FF8 */
.tt-card-element {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.9rem;
  z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9));
}

/* ===== CARD VALUES — FF8 cross pattern in top-left ===== */
.tt-values {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 40px;
  height: 48px;
  z-index: 3;
}

.tt-val {
  position: absolute;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow:
    2px 2px 0 #000, -2px -2px 0 #000,
    2px -2px 0 #000, -2px 2px 0 #000,
    0 2px 0 #000, 0 -2px 0 #000,
    2px 0 0 #000, -2px 0 0 #000,
    1px 1px 0 #000, -1px -1px 0 #000,
    1px -1px 0 #000, -1px 1px 0 #000;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/*     T
     L   R
       B     */
.tt-val-top    { top: 0;   left: 50%; transform: translateX(-50%); }
.tt-val-left   { top: 50%; left: 0;   transform: translateY(-50%); }
.tt-val-right  { top: 50%; right: 0;  transform: translateY(-50%); }
.tt-val-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }

/* Value A (10) — gold like FF8 */
.tt-val-a {
  color: #FFD700;
  text-shadow:
    2px 2px 0 #000, -2px -2px 0 #000,
    2px -2px 0 #000, -2px 2px 0 #000,
    0 2px 0 #000, 0 -2px 0 #000,
    2px 0 0 #000, -2px 0 0 #000,
    0 0 8px rgba(255,215,0,0.6);
}

/* Element icon — top-right corner (FF8 spritesheet) */
.tt-element {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  z-index: 4;
  background-image: url('/img/element.png');
  background-size: 24px auto;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
}

/* hand-container kept for collection/shop contexts */
.hand-container {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #C4A44A, #A88B3A, #8B7330);
  justify-content: center;
}

.hand-card {
  transition: all 0.2s;
}

.hand-card:hover {
  transform: translateX(-6px) scale(1.05);
  z-index: 10;
}

.hand-card.selected {
  transform: translateX(-10px) scale(1.08);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2);
  filter: brightness(1.2);
}

.hand-card.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* ===== Opponent hand (card backs) ===== */
.opp-hand {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.card-back {
  width: 128px;
  height: 128px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-back.opponent-selected,
.tt-card.opponent-selected {
  box-shadow: 0 0 12px 4px rgba(232, 232, 112, 0.7), 0 0 24px 8px rgba(232, 232, 112, 0.3);
  transform: scale(1.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ===== COLLECTION — Album FF8 ===== */
#view-collection.view.active {
  max-width: 100%;
  padding: 0;
}

.album-container {
  min-height: 100vh;
  padding: 1rem;
}

.album-mat {
  max-width: 900px;
  margin: 0 auto;
  background: url('/img/board-mat.jpg') center/cover;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
}

.album-mat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 25, 0.82);
  border-radius: 16px;
  pointer-events: none;
}

.album-mat > * { position: relative; z-index: 1; }

.album-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.album-header h1 {
  font-family: 'Cinzel', serif;
  color: #ffffff;
  font-size: 1.6rem;
  text-shadow: 0 0 12px rgba(100, 160, 255, 0.3);
  margin-bottom: 0.25rem;
}

.album-count {
  color: var(--ff8-text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.album-header .ff8-menu-item.compact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: rgba(8, 12, 40, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #c0d0f0;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.album-header .ff8-menu-item.compact:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ff8-highlight);
  color: var(--ff8-highlight);
}

/* Page FF8 */
.album-page {
  padding: 1rem;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.page-title {
  text-align: center;
  flex: 1;
}

.page-level {
  font-family: 'Cinzel', serif;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(100, 160, 255, 0.3);
}

.page-category {
  color: var(--ff8-text-dim);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.page-progress {
  color: #7a9ac8;
  font-size: 0.7rem;
  margin-top: 0.15rem;
}

.page-nav-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #c0d0f0;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(8, 12, 40, 0.6);
  transition: all 0.2s;
  user-select: none;
}

.page-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ff8-highlight);
  color: var(--ff8-highlight);
}

/* Page dots */
.page-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.page-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(8, 12, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #7a9ac8;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}

.page-dot:hover {
  border-color: var(--ff8-highlight);
  color: var(--ff8-highlight);
}

.page-dot.active {
  background: rgba(232, 232, 112, 0.15);
  border-color: var(--ff8-highlight);
  color: var(--ff8-highlight);
  box-shadow: 0 0 8px rgba(232, 232, 112, 0.25);
}

.page-dot.complete {
  border-color: #4ade80;
  color: #4ade80;
}

.page-dot.complete.active {
  border-color: #4ade80;
  color: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

/* Album cards grid — 11 cards per page */
.album-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  justify-items: center;
}

.album-card-slot {
  position: relative;
  text-align: center;
  transition: transform 0.2s;
  padding: 4px;
  border-radius: 6px;
}

.album-card-slot:hover {
  transform: translateY(-3px);
}

.album-card-slot.in-deck {
  background: rgba(232, 232, 112, 0.1);
  box-shadow: 0 0 10px rgba(232, 232, 112, 0.15);
  border-radius: 6px;
}

.album-card-name {
  color: #c0d0f0;
  font-size: 0.65rem;
  margin-top: 3px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.album-card-name.unknown {
  color: #4a5a7a;
  font-style: italic;
}

.album-card-element {
  font-size: 0.65rem;
  margin-top: 1px;
}

.album-deck-badge {
  color: var(--ff8-highlight);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.card-qty-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--ff8-highlight);
  color: #0a0e2a;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  z-index: 10;
}

/* Recycle button on cards */
.recycle-btn {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(180, 60, 60, 0.8);
  color: #fff;
  font-size: 0.75rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  padding: 0;
  line-height: 1;
}
.album-card-slot:hover .recycle-btn {
  opacity: 1;
}
.recycle-btn:hover {
  background: rgba(220, 50, 50, 0.95);
  border-color: #fff;
}

/* Recycle dialog */
.recycle-dialog-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.recycle-dialog {
  padding: 1.5rem;
  text-align: center;
  max-width: 340px;
  width: 90%;
}
.recycle-dialog-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.recycle-dialog-card {
  font-size: 0.9rem;
  color: var(--ff8-highlight);
  margin-bottom: 0.5rem;
}
.recycle-dialog-coins {
  font-size: 1.1rem;
  color: #7dff7d;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.recycle-dialog-warn {
  font-size: 0.75rem;
  color: #ff8080;
  margin-bottom: 0.5rem;
}
.recycle-dialog-qty {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.5rem;
}
.recycle-dialog-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

/* Not owned card — grayed out */
.album-card-slot.not-owned .tt-card {
  filter: grayscale(1) brightness(0.45);
}
.album-card-slot.not-owned .album-card-name {
  opacity: 0.4;
}

/* Deck builder FF8 */
.deck-builder {
  margin-bottom: 1rem;
  padding: 1rem;
}

.deck-builder-title {
  text-align: center;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.deck-slots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.deck-slot {
  width: 90px;
  height: 100px;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7a9ac8;
  font-size: 0.75rem;
  position: relative;
  transition: all 0.2s;
}

.deck-slot:hover {
  border-color: var(--ff8-highlight);
}

.deck-slot.filled {
  border-style: solid;
  border-color: rgba(232, 232, 112, 0.5);
}

.deck-slot .remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dc2626;
  color: white;
  border: none;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.save-deck-btn {
  display: inline-flex !important;
  justify-content: center;
}

/* ===== SHOP ===== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.pack-card {
  background: linear-gradient(180deg, var(--ff8-win-top), var(--ff8-win-mid) 40%, var(--ff8-win-bot));
  border: 2px solid var(--ff8-border-out);
  border-radius: 10px;
  padding: 1.2rem 1rem;
  text-align: center;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ff8-border-in), 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}

.pack-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--ff8-border-in), 0 8px 30px rgba(0, 0, 0, 0.4);
}

.pack-card.bronze { border-color: #cd7f32; }
.pack-card.silver { border-color: #c0c0c0; }
.pack-card.gold { border-color: var(--ff8-highlight); }
.pack-card.legendary-pack {
  border-color: var(--legendary);
  background: linear-gradient(180deg, #5a3a18, #3a2210 40%, #1a0a08);
}

.pack-card.coins-pack {
  border-color: #4ade80;
  background: linear-gradient(180deg, #1a4a2a, #0a2a18 40%, #081a10);
}

.btn-real {
  background: linear-gradient(135deg, #1a6b35, #0d4a22);
  color: #fff;
  border: 1px solid #2a8b4a;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}

.btn-real:hover {
  background: linear-gradient(135deg, #228b45, #1a6b35);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.btn-coins {
  background: linear-gradient(135deg, #1a4a8b, #0d2a5a);
  color: #fff;
  border: 1px solid #2a6abf;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}

.btn-coins:hover {
  background: linear-gradient(135deg, #2260a8, #1a4a8b);
  box-shadow: 0 0 12px rgba(74, 144, 226, 0.3);
}

.coin-price {
  color: #4ade80;
  font-weight: 700;
  font-size: 1.1rem;
}

.real-price {
  color: #4ade80;
  font-weight: 700;
  font-size: 1.1rem;
}

.real-price-alt {
  color: #7a7a90;
  font-size: 0.85rem;
}

.pack-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.pack-name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.pack-desc {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}

.pack-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: auto;
  padding-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.pack-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.pack-rates {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

/* ===== BOOSTER OPENING ===== */
.booster-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.booster-reveal {
  text-align: center;
  animation: fadeIn 0.5s ease-out;
}

.booster-reveal h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: var(--gold);
}

.revealed-cards {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.revealed-card {
  animation: cardFlip 0.6s ease-out;
  animation-fill-mode: backwards;
}

.revealed-card:nth-child(2) { animation-delay: 0.2s; }
.revealed-card:nth-child(3) { animation-delay: 0.4s; }
.revealed-card:nth-child(4) { animation-delay: 0.6s; }
.revealed-card:nth-child(5) { animation-delay: 0.8s; }

.reveal-card-box {
  width: 140px;
  padding: 1.25rem;
  border-radius: 12px;
  text-align: center;
}

.reveal-card-box.common { background: linear-gradient(135deg, #2a2a3e, #3a3a4e); border: 2px solid var(--common); }
.reveal-card-box.rare { background: linear-gradient(135deg, #1a2a4e, #2a3a6e); border: 2px solid var(--rare); }
.reveal-card-box.epic { background: linear-gradient(135deg, #2a1a4e, #4a2a6e); border: 2px solid var(--epic); }
.reveal-card-box.legendary {
  background: linear-gradient(135deg, #3a2a0e, #4a3a1e);
  border: 2px solid var(--legendary);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.reveal-card-box .card-emoji { font-size: 2.5rem; }
.reveal-card-box .card-title { font-size: 0.85rem; font-weight: 600; margin-top: 0.5rem; }
.reveal-card-box .card-rarity {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.25rem;
}

/* ===== GAME OVER ===== */
.game-over-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.game-over-box {
  text-align: center;
  animation: fadeIn 0.5s ease-out;
  padding: 2rem 2.5rem;
  background: linear-gradient(180deg, var(--ff8-win-top), var(--ff8-win-mid) 40%, var(--ff8-win-bot));
  border-radius: 10px;
  border: 3px solid var(--ff8-border-out);
  box-shadow: inset 0 0 0 2px var(--ff8-border-in), 0 4px 16px rgba(0,0,0,0.4);
  min-width: 300px;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
}

.game-over-box h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.game-over-box.victory h2 {
  color: var(--gold);
}

.game-over-box.defeat h2 {
  color: var(--danger);
}

.game-over-box.draw h2 {
  color: var(--text-secondary);
}

.gameover-rewards {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.coins-earned {
  font-size: 1.1rem;
  color: var(--gold);
}

.xp-earned {
  font-size: 1.1rem;
  color: #b88cff;
  text-shadow: 0 0 6px rgba(184, 140, 255, 0.3);
}

/* ===== TRADE RULE (Post-match card exchange) ===== */
.trade-rule-badge {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  background: rgba(212, 168, 67, 0.15);
  border: 1px solid rgba(212, 168, 67, 0.4);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: #d4a843;
  margin-bottom: 0.75rem;
}

.trade-section {
  margin: 1rem 0;
}

.trade-label {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
  letter-spacing: 1px;
}

.trade-label.won-label { color: #4ade80; }
.trade-label.lost-label { color: #f87171; }

.trade-cards-grid {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.trade-card {
  text-align: center;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  position: relative;
}

.trade-card.won {
  background: rgba(74, 222, 128, 0.1);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

.trade-card.lost {
  background: rgba(248, 113, 113, 0.1);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.2);
  opacity: 0.7;
}

.trade-card.pickable {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  border: 2px solid transparent;
}

.trade-card.pickable:hover {
  border-color: rgba(212, 168, 67, 0.5);
  transform: translateY(-3px);
}

.trade-card.pickable.picked {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.3);
}

.trade-card-name {
  color: #e8e0c8;
  font-size: 0.6rem;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85px;
}
.trade-card-name.new-card {
  color: #4fc3f7;
  font-weight: bold;
}

.trade-card-level {
  color: #8a8a9a;
  font-size: 0.55rem;
}

.pick-check {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4ade80;
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.trade-card.picked .pick-check {
  opacity: 1;
}

.trade-confirm-btn {
  margin-top: 0.5rem;
}

.trade-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ===== FF8-style Trade View (2 rows of 5 cards) ===== */
.game-over-overlay.ff8-trade-view {
  background: rgba(0, 0, 0, 0.75);
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  backdrop-filter: blur(3px);
}

.trade-header {
  text-align: center;
}

.trade-header .gameover-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  margin-bottom: 0.3rem;
}
.trade-header .gameover-title.victory { color: var(--gold); }
.trade-header .gameover-title.defeat { color: var(--danger); }
.trade-header .gameover-title.draw { color: var(--text-secondary); }

.trade-header .gameover-subtitle {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.trade-card-rows {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.trade-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: flex-start;
}

.trade-row-card {
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 6px;
  padding: 4px;
  border: 2px solid transparent;
}

.trade-row-card .tt-card {
  width: 100px;
  height: 100px;
}

.trade-row-card .tt-values {
  transform: scale(0.7);
  transform-origin: top left;
}

.trade-row-card-name {
  color: #e8e0c8;
  font-size: 0.65rem;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  font-family: 'Cinzel', serif;
}
.trade-row-card-name.new-card {
  color: #4fc3f7;
  font-weight: bold;
}

.trade-row-card .pick-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4ade80;
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 5;
}

/* Pickable cards (winner's view) */
.trade-row-card.pickable {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
}

.trade-row-card.pickable:hover {
  border-color: rgba(212, 168, 67, 0.6);
  box-shadow: 0 0 15px rgba(212, 168, 67, 0.4);
  transform: translateY(-5px);
}

.trade-row-card.picked {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.trade-row-card.picked .pick-check {
  opacity: 1;
}

/* Card taken (loser's view after pick) */
.trade-row-card.taken {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.15);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.3);
  animation: card-taken 1s ease forwards;
}

@keyframes card-taken {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 24px rgba(248, 113, 113, 0.6); }
  100% { transform: scale(0.3); opacity: 0; }
}

/* Card won by winner highlight */
.trade-row-card.won {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}

.trade-footer {
  text-align: center;
  margin-top: 0.5rem;
}

.trade-instruction {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: #d4a843;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 8px rgba(212, 168, 67, 0.3);
}

.trade-instruction.waiting {
  color: #8a8a9a;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Responsive trade view */
@media (max-width: 700px) {
  .trade-row-card .tt-card {
    width: 60px;
    height: 60px;
  }
  .trade-row-card .tt-values {
    transform: scale(0.5);
  }
  .trade-row-card-name {
    font-size: 0.5rem;
    max-width: 60px;
  }
  .trade-row {
    gap: 0.3rem;
  }
}

/* ===== LEVEL UP OVERLAY ===== */
.levelup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.5s ease-out;
}

.levelup-content {
  text-align: center;
  max-width: 500px;
  padding: 2rem;
}

.levelup-stars {
  font-size: 3rem;
  color: var(--gold);
  animation: levelupPulse 1s ease-in-out infinite;
  margin-bottom: 0.5rem;
}

.levelup-overlay.milestone .levelup-stars {
  font-size: 4rem;
  text-shadow: 0 0 30px rgba(212, 168, 67, 0.8);
}

.levelup-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 0.3rem;
  text-shadow: 0 0 20px rgba(212, 168, 67, 0.5);
}

.levelup-level {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}

.levelup-overlay.milestone .levelup-level {
  color: var(--gold);
  font-size: 1.8rem;
}

.levelup-coins {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 1rem;
}

.levelup-cards {
  margin-top: 1rem;
}

.levelup-cards-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.levelup-cards-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.levelup-card {
  animation: cardReveal 0.5s ease-out both;
}

.levelup-close-btn {
  margin-top: 1.5rem;
}

@keyframes levelupPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes cardReveal {
  from { opacity: 0; transform: scale(0.5) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Encouragement popup */
.encourage-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.encourage-overlay.visible { opacity: 1; }
.encourage-content {
  text-align: center;
  padding: 2rem 2.5rem;
  max-width: 400px;
  animation: encouragePop 0.4s ease-out;
}
.encourage-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.encourage-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  color: var(--ff8-highlight);
  margin: 0 0 0.75rem;
}
.encourage-message {
  font-size: 1rem;
  color: #e2e8f0;
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.encourage-cards {
  font-size: 0.85rem;
  color: #f87171;
  margin: 0 0 1.25rem;
  font-weight: 600;
}
.encourage-booster-label {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--ff8-highlight);
  margin: 0.75rem 0 0.5rem;
}
.encourage-booster-cards {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.encourage-already-claimed {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0.5rem 0 1rem;
  font-style: italic;
}
.encourage-btn {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  padding: 0.6rem 2rem;
}
@keyframes encouragePop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Duplicate high-level card choice */
.dup-choice-section {
  margin-top: 1rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(58,90,184,0.3), rgba(10,24,72,0.5));
  border: 1px solid var(--ff8-border-out);
  border-radius: 6px;
}
.dup-choice-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--ff8-highlight);
  margin-bottom: 0.75rem;
}
.dup-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
}
.dup-choice-name {
  color: #fff;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.dup-choice-label {
  color: var(--ff8-text-dim);
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}
.dup-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.dup-choice-buttons .ff8-menu-item {
  width: 100%;
  max-width: 280px;
}
.dup-choice-result {
  color: #7dff7d;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem;
  text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .navbar-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .lobby-stats-grid {
    gap: 0.5rem;
  }

  .lobby-stat-crystal {
    padding: 0.75rem 0.25rem;
  }

  .crystal-value {
    font-size: 1.2rem;
  }

  .lobby-title h1 { font-size: 2rem; }
  .lobby-seed-rank { font-size: 0.85rem; }

  .deck-preview .tt-card { width: 52px; height: 52px; }
  .deck-preview .tt-val { font-size: 0.45rem; width: 9px; height: 9px; }
  .deck-preview .tt-values { width: 18px; height: 22px; top: 2px; left: 2px; }

  .ff8-menu-item { font-size: 0.9rem; padding: 0.75rem 1rem; }

  .game-area {
    flex-direction: column;
    align-items: center;
  }

  .side-hand {
    flex-direction: row;
    gap: 4px;
  }

  .side-hand .tt-card,
  .side-hand .card-back {
    width: 56px;
    height: 56px;
  }

  .side-hand .tt-val { font-size: 0.55rem; width: 11px; height: 11px; }
  .side-hand .tt-values { width: 22px; height: 26px; top: 3px; left: 3px; }

  .hand-score { font-size: 1.5rem; }

  .game-mat {
    min-height: 500px;
  }

  .board {
    width: 270px;
    height: 270px;
  }

  .board-cell .tt-val {
    font-size: 0.65rem;
    width: 12px;
    height: 12px;
  }

  .board-cell .tt-values {
    width: 26px;
    height: 30px;
  }

  .hand-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .album-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 0.5rem;
  }

  .album-mat {
    padding: 0.75rem;
    border-radius: 10px;
  }

  .page-dots {
    gap: 0.2rem;
  }

  .page-dot {
    width: 24px;
    height: 24px;
    font-size: 0.6rem;
  }

  .deck-slots {
    gap: 0.3rem;
  }

  .deck-slot {
    width: 70px;
    height: 80px;
  }

  .shop-grid {
    grid-template-columns: 1fr;
  }

  .revealed-cards {
    gap: 0.5rem;
  }

  .reveal-card-box {
    width: 100px;
    padding: 0.75rem;
  }

  .ff8-deck-body {
    flex-direction: column;
  }

  .ff8-card-preview-panel {
    width: 100%;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.5rem;
  }

  .ff8-card-preview-panel .tt-card {
    width: 100px !important;
    height: 100px !important;
  }

  .ff8-card-list-panel {
    max-height: 220px;
  }

  .ff8-page-selector {
    flex-wrap: wrap;
  }
}

/* ===== RULES SELECTION (Lobby) ===== */
.rules-select {
  padding: 0.75rem;
  animation: fadeIn 0.3s ease-out;
}

.rules-title {
  font-family: 'Cinzel', serif;
  color: #ffffff;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 0.15rem;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.rules-subtitle {
  text-align: center;
  color: var(--ff8-text-dim);
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.rules-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.rule-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}

.rule-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}

.rule-toggle.active {
  background: rgba(232, 232, 112, 0.1);
  border-color: var(--ff8-highlight);
  box-shadow: 0 0 10px rgba(232, 232, 112, 0.15);
}

.rule-toggle.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.rule-icon {
  font-size: 1.3rem;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.rule-info {
  flex: 1;
}

.rule-name {
  font-family: 'Cinzel', serif;
  color: #ffffff;
  font-size: 0.85rem;
}

.rule-desc {
  font-size: 0.65rem;
  color: #7a9ac8;
  margin-top: 0.1rem;
}

.rule-check {
  font-size: 1rem;
  color: transparent;
  width: 24px;
  text-align: center;
  transition: color 0.2s;
}

.rule-toggle.active .rule-check {
  color: #4ade80;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.rule-help-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(122, 154, 200, 0.4);
  background: rgba(122, 154, 200, 0.1);
  color: #7a9ac8;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.rule-help-btn:hover {
  background: rgba(122, 154, 200, 0.25);
  border-color: rgba(122, 154, 200, 0.7);
  color: #fff;
}

.rule-help-text {
  font-size: 0.7rem;
  color: #a0b8d8;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(122, 154, 200, 0.2);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-top: -0.25rem;
  margin-bottom: 0.25rem;
  line-height: 1.4;
  animation: fadeIn 0.2s ease-out;
}

.rules-combo-note {
  text-align: center;
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  padding: 0.4rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.rules-economy {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.economy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0;
}

.economy-label {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
}

.economy-value {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ff8-highlight);
}

/* ===== DIFFICULTY SELECT ===== */
.difficulty-select {
  padding: 1rem;
  max-width: 480px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-out;
}

.difficulty-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.diff-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.6), rgba(20, 28, 60, 0.8));
  border: 1px solid rgba(120, 160, 220, 0.15);
  border-radius: 10px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: all 0.25s ease;
  text-align: left;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}

.diff-btn * {
  cursor: inherit !important;
  pointer-events: none;
}

.diff-btn:hover:not(.locked) {
  background: linear-gradient(135deg, rgba(40, 55, 100, 0.7), rgba(25, 35, 75, 0.9));
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.15);
}

.diff-btn.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.diff-icon {
  font-size: 1rem;
  color: var(--ff8-highlight);
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  flex-shrink: 0;
}

.diff-info {
  flex: 1;
}

.diff-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.diff-desc {
  font-size: 0.7rem;
  color: #7a9ac8;
}

.diff-reward {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #4ade80;
  white-space: nowrap;
}

.diff-btn.diff-easy .diff-icon { color: #4ade80; }
.diff-btn.diff-normal .diff-icon { color: var(--ff8-highlight); }
.diff-btn.diff-hard .diff-icon { color: #f59e0b; }
.diff-btn.diff-expert .diff-icon { color: #ef4444; }

.diff-btn.diff-easy:hover:not(.locked) { border-color: rgba(74, 222, 128, 0.3); }
.diff-btn.diff-normal:hover:not(.locked) { border-color: rgba(212, 168, 67, 0.3); }
.diff-btn.diff-hard:hover:not(.locked) { border-color: rgba(245, 158, 11, 0.3); }
.diff-btn.diff-expert:hover:not(.locked) { border-color: rgba(239, 68, 68, 0.3); }

.rules-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.rules-actions .ff8-menu-item {
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.15);
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.5), rgba(20, 28, 60, 0.7));
  border-bottom: 1px solid rgba(120, 160, 220, 0.15);
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
}

.rules-actions .ff8-menu-item * {
  cursor: inherit !important;
  pointer-events: none;
}

.rules-actions .ff8-menu-item:hover {
  padding-left: 1.25rem;
}

.rules-actions .ff8-menu-item.secondary {
  color: #7a9ac8;
  font-size: 0.85rem;
}

.rules-actions .ff8-menu-item.secondary:hover {
  color: var(--ff8-highlight);
}

/* ===== PRE-GAME DECK SELECT ===== */
.pregame-deck-select {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-out;
}

.pregame-deck-preview {
  margin-bottom: 0.75rem;
}

.pregame-deck-counter {
  text-align: center;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pregame-deck-slots {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
}

.pregame-deck-slot {
  width: 74px;
  height: 80px;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a9ac8;
  font-size: 0.7rem;
  position: relative;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
}

.pregame-deck-slot.filled {
  border: 2px solid rgba(232, 232, 112, 0.5);
  background: rgba(232, 232, 112, 0.08);
}

.pregame-deck-slot.filled:hover {
  border-color: #f87171;
}

.pregame-slot-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: rgba(239, 68, 68, 0.8);
  color: #fff;
  border-radius: 50%;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.pregame-deck-slot.filled:hover .pregame-slot-remove {
  opacity: 1;
}

/* ===== FF8 PSX-style card selection — paginated by level ===== */
.ff8-page-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.ff8-page-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ff8-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(10, 12, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #c0d0f0;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.15s;
}

.ff8-page-btn:hover {
  border-color: var(--ff8-highlight);
  color: var(--ff8-highlight);
}

.ff8-page-btn.active {
  background: rgba(232, 232, 112, 0.15);
  border-color: var(--ff8-highlight);
  color: var(--ff8-highlight);
  box-shadow: 0 0 6px rgba(232, 232, 112, 0.25);
}

.ff8-page-btn.empty {
  opacity: 0.3;
  cursor: default;
}

.ff8-page-btn.complete {
  border-color: #4ade80;
  color: #4ade80;
}

.ff8-page-btn.complete.active {
  background: rgba(74, 222, 128, 0.15);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.25);
}

.ff8-deck-body {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  min-height: 220px;
}

.ff8-card-list-panel {
  flex: 1;
  max-height: 300px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--ff8-win-top), var(--ff8-win-bot));
  border: 2px solid var(--ff8-border-out);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--ff8-border-in);
  padding: 0.4rem 0;
}

.ff8-list-empty {
  text-align: center;
  color: #7a9ac8;
  padding: 2rem 1rem;
  font-size: 0.85rem;
}

.ff8-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  color: #c0d0f0;
  font-size: 0.85rem;
  transition: background 0.1s;
}

.ff8-card-row:hover,
.ff8-card-row.highlighted {
  background: rgba(232, 232, 112, 0.15);
  color: var(--ff8-highlight);
}

.ff8-card-row.selected {
  color: #ffffff;
}

.ff8-card-row.selected .ff8-card-row-check {
  color: var(--ff8-highlight);
}

.ff8-card-row-check {
  width: 16px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.ff8-card-row-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff8-card-row-qty {
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  margin-left: 0.25rem;
}

.ff8-card-preview-panel {
  width: 200px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--ff8-win-top), var(--ff8-win-bot));
  border: 2px solid var(--ff8-border-out);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--ff8-border-in);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ff8-preview-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #ffffff;
  text-align: center;
}

.ff8-preview-element {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
}

.ff8-preview-level {
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
}

/* ===== TRADE RULE SELECT ===== */
.trade-rule-select {
  padding: 0.5rem;
}

.trade-rule-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.trade-rule-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(10, 12, 36, 0.5);
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}

.trade-rule-btn:hover {
  border-color: rgba(232, 232, 112, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.trade-rule-btn.active {
  border-color: var(--ff8-highlight);
  background: rgba(232, 232, 112, 0.1);
  box-shadow: 0 0 8px rgba(232, 232, 112, 0.2);
}

.trade-rule-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.trade-rule-info {
  flex: 1;
}

.trade-rule-name {
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.9rem;
}

.trade-rule-desc {
  color: #7a9ac8;
  font-size: 0.75rem;
  margin-top: 2px;
}

.trade-rule-risk {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* ===== RULES BAR (In-game) ===== */
.rules-bar {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
  z-index: 2;
}

.rule-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(212, 168, 67, 0.4);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #d4a843;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.rule-badge.combo {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

/* ===== BOARD CELL ELEMENT (Elemental rule) ===== */
.board-cell-element {
  --size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size);
  height: var(--size);
  z-index: 1;
  opacity: 0.85;
  background-image: url('/img/element.png');
  background-size: var(--size) auto;
  background-position: 0 calc(var(--frame) * var(--size) * -1);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.5));
}

/* When cell is occupied, element icon moves to corner */
.board-cell.occupied .board-cell-element {
  --size: 22px;
  top: auto;
  left: auto;
  bottom: 2px;
  right: 2px;
  transform: none;
  opacity: 0.8;
  z-index: 5;
  filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.4));
}

/* Rarity color text helpers */
.text-common { color: var(--common); }
.text-rare { color: var(--rare); }
.text-epic { color: var(--epic); }
.text-legendary { color: var(--legendary); }

/* Element color helpers */
.text-fire { color: var(--fire); }
.text-water { color: var(--water); }
.text-earth { color: var(--earth); }
.text-wind { color: var(--wind); }
.text-dark { color: var(--dark); }
.text-light { color: var(--light); }

/* ===== LOBBY XP BAR ===== */
.lobby-xp-section {
  margin-bottom: 0;
}

.lobby-xp-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lobby-xp-level {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 0.95rem;
  white-space: nowrap;
}

.xp-bar-bg {
  flex: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a8aff, #7ab8ff);
  border-radius: 5px;
  transition: width 0.5s ease;
}

.xp-text {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  white-space: nowrap;
}

/* ===== RANKING PAGE ===== */
.ranking-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.ranking-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.ranking-header h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(100, 160, 255, 0.3);
}

.ranking-subtitle {
  font-size: 0.85rem;
  color: var(--ff8-text-dim);
  margin-top: 0.25rem;
  letter-spacing: 1px;
}

.ranking-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.ranking-tab {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--ff8-border-out);
  background: linear-gradient(180deg, var(--ff8-win-top), var(--ff8-win-bot));
  color: var(--ff8-text-dim);
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.2s;
}

.ranking-tab.active {
  color: var(--ff8-highlight);
  border-color: var(--ff8-highlight);
  box-shadow: 0 0 8px rgba(232, 232, 112, 0.3);
}

.ranking-my-rank {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.my-rank-label {
  font-size: 0.8rem;
  color: var(--ff8-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.my-rank-value {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ff8-highlight);
}

.my-rank-level {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.9rem;
}

.my-rank-xp {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.my-rank-xp .xp-bar-bg {
  flex: 1;
}

.my-rank-xp .xp-text {
  font-size: 0.7rem;
}

.ranking-table-wrap {
  overflow-x: auto;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ranking-table thead th {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  white-space: nowrap;
}

.ranking-table .rt-name { text-align: left; }
.ranking-table thead th.rt-name { text-align: left; }

.ranking-row td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: #9ab8e8;
  vertical-align: middle;
}

.ranking-row .rt-name { text-align: left; color: #d0e0ff; }

.ranking-row .rt-rank {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #7a9ac8;
}

.ranking-row.gold .rt-rank { color: var(--ff8-highlight); font-size: 1rem; }
.ranking-row.silver .rt-rank { color: #b0b0b0; font-size: 0.95rem; }
.ranking-row.bronze .rt-rank { color: #cd7f32; font-size: 0.95rem; }

.ranking-row .rt-level {
  color: #ffffff;
  font-weight: 600;
}

.ranking-row .rt-w { color: #4ade80; }
.ranking-row .rt-l { color: #f87171; }
.ranking-row .rt-wr { color: #d0d0e0; }
.ranking-row .rt-title { text-align: center; font-style: italic; font-size: 0.75rem; color: #e8e870; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row .rt-achievements { text-align: center; color: #c4b5fd; font-weight: bold; }

.xp-bar-mini {
  width: 50px;
  height: 6px;
  background: rgba(10, 12, 36, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.xp-bar-mini .xp-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.ranking-row.self {
  background: rgba(232, 232, 112, 0.08);
}

.ranking-row.self td {
  color: var(--ff8-highlight);
}

.ranking-row.self .rt-name { color: var(--ff8-highlight); font-weight: 600; }
.ranking-row.self .rt-w { color: #6aee9a; }
.ranking-row.self .rt-l { color: #ff9191; }

.ranking-loading {
  text-align: center;
  color: #7a9ac8;
  padding: 2rem;
}

/* ===== LANGUAGE SWITCHER (Dropdown) ===== */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-dropdown-trigger {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  user-select: none;
}

.lang-dropdown-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 40, 0.95);
  border: 1px solid rgba(122, 154, 200, 0.3);
  border-radius: 8px;
  padding: 6px;
  gap: 4px;
  flex-direction: column;
  z-index: 1000;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
  margin-bottom: 6px;
}

.navbar .lang-dropdown-menu {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 6px;
}

.lang-dropdown.open .lang-dropdown-menu {
  display: flex;
}

.lang-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 1.3rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  padding: 4px 8px;
  transition: all 0.2s;
  line-height: 1;
}

.lang-btn:hover {
  background: rgba(232, 232, 112, 0.12);
  border-color: rgba(232, 232, 112, 0.5);
  transform: scale(1.1);
}

.lang-btn.active {
  border-color: var(--ff8-highlight);
  background: rgba(232, 232, 112, 0.15);
  box-shadow: 0 0 8px rgba(232, 232, 112, 0.25);
}

/* ===== STRIPE REVEAL ANIMATIONS ===== */

/* Loading state */
.reveal-loading {
  text-align: center;
  animation: fadeIn 0.3s ease-out;
}
.reveal-loading .reveal-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(212, 168, 67, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pack wrapper (phase 1) */
.pack-wrapper {
  width: 200px; height: 280px;
  margin: 0 auto;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  position: relative;
  animation: packAppear 0.6s ease-out;
  transition: transform 0.2s;
}
.pack-wrapper:hover { transform: scale(1.05); }
.pack-wrapper.shaking { animation: packShake 0.5s ease-in-out infinite; }

.pack-wrapper.bronze { background: linear-gradient(135deg, #4a3528, #6b4d3a); border: 3px solid #cd7f32; box-shadow: 0 0 20px rgba(205, 127, 50, 0.4); }
.pack-wrapper.silver { background: linear-gradient(135deg, #3a3a4e, #5a5a6e); border: 3px solid #c0c0c0; box-shadow: 0 0 20px rgba(192, 192, 192, 0.4); }
.pack-wrapper.gold { background: linear-gradient(135deg, #3a2a0e, #5a4a1e); border: 3px solid #ffd700; box-shadow: 0 0 25px rgba(255, 215, 0, 0.5); }
.pack-wrapper.legendary-pack { background: linear-gradient(135deg, #1a0a3e, #3a1a5e); border: 3px solid #a855f7; box-shadow: 0 0 30px rgba(168, 85, 247, 0.5); }

.pack-wrapper-icon { font-size: 4rem; margin-bottom: 0.5rem; }
.pack-wrapper-name { font-size: 1.3rem; font-weight: 700; color: var(--gold); font-family: var(--font-display); text-transform: uppercase; }
.pack-wrapper-hint { font-size: 0.85rem; color: var(--text-secondary); margin-top: 1rem; animation: pulse 1.5s ease-in-out infinite; }

@keyframes packAppear {
  from { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes packShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes packOpen {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Particles */
.pack-particles {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.pack-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  animation: particleBurst 0.8s ease-out forwards;
}
@keyframes particleBurst {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { opacity: 0; }
}

/* Card reveal from pack */
.reveal-card-back {
  width: 140px; height: 140px;
  background: url('/img/cards/card-back.png') center/cover;
  border-radius: 8px;
  margin: 0 auto;
  animation: cardAppear 0.4s ease-out backwards;
}
@keyframes cardAppear {
  from { transform: scale(0) rotate(180deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* Rarity glow on revealed cards */
.revealed-card.glow-common { filter: drop-shadow(0 0 8px rgba(156, 163, 175, 0.5)); }
.revealed-card.glow-rare { filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.6)); }
.revealed-card.glow-epic { filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6)); }
.revealed-card.glow-legendary { filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.7)); animation: legendaryShine 2s ease-in-out infinite; }

/* Coin reveal animation */
.coin-reveal {
  text-align: center;
  animation: fadeIn 0.5s ease-out;
}
.coin-icon-big {
  font-size: 5rem;
  margin-bottom: 1rem;
  animation: pulse 1s ease-in-out 3;
}
.coin-particles {
  position: relative;
  width: 200px; height: 200px;
  margin: 0 auto;
}
.coin-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  background: radial-gradient(circle, #ffd700, #b8860b);
  border-radius: 50%;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  color: #5a3a0a;
  font-weight: bold;
  animation: coinScatter 1s ease-out forwards;
}
@keyframes coinScatter {
  from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  to { opacity: 0; }
}
.coin-counter {
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  font-family: var(--font-display);
  margin: 1rem 0;
}
.coin-counter-label {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* Exchange reveal (duplicate level 9-10) */
.exchange-reveal { max-width: 500px; }
.exchange-original {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.exchange-arrow {
  font-size: 3rem;
  color: var(--gold);
  animation: pulse 1s ease-in-out infinite;
}
.exchange-badge {
  display: inline-block;
  background: #ef4444;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
  letter-spacing: 1px;
}
.exchange-reward {
  text-align: center;
}
.exchange-reward-count {
  font-size: 3rem;
  font-weight: 800;
  color: #4ade80;
  line-height: 1;
}
.exchange-reward-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}
.exchange-cards {
  flex-wrap: wrap;
  max-width: 600px;
}
.exchange-cards .revealed-card {
  flex: 0 0 auto;
  width: 110px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

/* ===== PACK BADGE & PER-COIN ===== */
.pack-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
  z-index: 1;
}

.pack-card {
  position: relative;
}

.pack-per-coin {
  font-size: 0.75rem;
  color: #4ade80;
  margin-top: 0.25rem;
  font-weight: 600;
}

/* ===== USER DROPDOWN MENU ===== */
/* ===== NOTIFICATIONS BELL ===== */
.notif-wrapper {
  position: relative;
  display: inline-block;
}

.notif-bell {
  background: none;
  border: none;
  color: #c0d0f0;
  padding: 0.35rem;
  border-radius: 3px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: color 0.2s, background 0.2s;
  position: relative;
  display: flex;
  align-items: center;
}

.notif-bell:hover {
  color: var(--ff8-highlight);
  background: rgba(255, 255, 255, 0.08);
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: -60px;
  width: 320px;
  max-height: 400px;
  z-index: 1001;
  overflow: hidden;
  animation: dropdownFadeIn 0.15s ease-out;
}

@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed;
    top: 60px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 70vh;
    border-radius: 12px;
  }
}

.notif-dropdown.open {
  display: flex;
  flex-direction: column;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ff8-highlight);
}

.notif-actions {
  display: flex;
  gap: 0.5rem;
}

.notif-mark-read, .notif-clear {
  background: none;
  border: none;
  color: #9ab8e8;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.2s;
}

.notif-mark-read:hover {
  color: var(--ff8-highlight);
}

.notif-clear {
  color: #ef4444;
}

.notif-clear:hover {
  color: #f87171;
}

.notif-list {
  overflow-y: auto;
  max-height: 340px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s;
}

.notif-item.notif-clickable {
  cursor: pointer;
}

.notif-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notif-item.notif-clickable:hover {
  background: rgba(255, 255, 255, 0.1);
}

.notif-item.unread {
  background: rgba(232, 232, 112, 0.06);
  border-left: 2px solid var(--ff8-highlight);
}

.notif-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.2rem;
  margin-left: auto;
  transition: color 0.15s;
}

.notif-item.notif-clickable:hover .notif-arrow {
  color: var(--ff8-highlight);
}

.notif-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-text {
  font-size: 0.8rem;
  color: #d0daf0;
  line-height: 1.4;
}

.notif-time {
  font-size: 0.7rem;
  color: #7888a8;
  margin-top: 2px;
}

.notif-empty {
  padding: 1.5rem;
  text-align: center;
  color: #7888a8;
  font-size: 0.85rem;
}

.user-menu-wrapper {
  position: relative;
  display: inline-block;
}

.user-menu-trigger {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: color 0.2s;
}

.user-menu-trigger:hover {
  color: var(--ff8-highlight);
}

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  z-index: 1000;
  padding: 0.25rem 0;
  animation: dropdownFadeIn 0.15s ease-out;
}

.user-dropdown.open {
  display: block;
}

.user-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  color: #c0d0f0;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  text-align: left;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.user-dropdown-item:last-child { border-bottom: none; }

.user-dropdown-item:hover {
  background: rgba(232, 232, 112, 0.12);
  color: var(--ff8-highlight);
}

.user-dropdown-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.2rem 0;
}

.user-dropdown-logout {
  color: #ef4444;
}
.user-dropdown-logout:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== HISTORY PAGE ===== */
.history-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.history-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.history-header h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(100, 160, 255, 0.3);
}

.history-subtitle {
  font-size: 0.85rem;
  color: var(--ff8-text-dim);
  margin-top: 0.25rem;
  letter-spacing: 1px;
}

.history-table-wrap {
  overflow-x: auto;
  padding: 0;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.history-table thead th {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}

.history-row td {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #9ab8e8;
  vertical-align: middle;
}

.history-date {
  white-space: nowrap;
  font-size: 0.8rem;
}

.history-time {
  font-size: 0.7rem;
  color: #6a8ab8;
}

.history-type {
  white-space: nowrap;
}

.history-desc {
  color: #c0d0f0;
}

.history-cost-gain {
  color: #4ade80;
  font-weight: 600;
}

.history-cost-spend {
  color: #f87171;
  font-weight: 600;
}

.history-loading {
  text-align: center;
  color: #7a9ac8;
  padding: 2rem;
}

.history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.history-page-info {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 100px;
  text-align: center;
}

.history-pagination .ff8-menu-item.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ===== ACCOUNT PAGE ===== */
.account-page {
  max-width: 550px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.account-page .ff8-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.account-section {
  margin-bottom: 1.2rem;
  padding: 1.2rem;
}

.account-section h3 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--ff8-highlight);
  margin-bottom: 1rem;
}

.account-field {
  margin-bottom: 0.9rem;
}

.account-field label {
  display: block;
  font-size: 0.8rem;
  color: #9ab8e8;
  margin-bottom: 0.3rem;
}

.account-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  padding: 0.4rem 0;
}

.account-hint {
  font-size: 0.75rem;
  color: #7888a8;
  font-style: italic;
}

.account-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #fff;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}

.account-input:focus {
  outline: none;
  border-color: var(--ff8-highlight);
}

.account-msg {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}

.account-msg-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.account-msg-success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
}

.account-section .btn-primary {
  margin-top: 0.5rem;
}

/* ===== SETTINGS PAGE ===== */
.settings-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.settings-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.settings-header h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(100, 160, 255, 0.3);
}

.settings-section {
  margin-bottom: 1rem;
  padding: 1rem;
}

.settings-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--ff8-highlight);
  margin-bottom: 0.75rem;
  letter-spacing: 1px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}

.settings-label {
  font-size: 0.85rem;
  color: #c0d0f0;
  flex: 1;
}

.settings-toggle {
  padding: 0.35rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(10, 12, 36, 0.6);
  color: #7a9ac8;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  min-width: 50px;
  text-align: center;
}

.settings-toggle.active {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

/* Volume sliders */
.settings-volume-row {
  flex-direction: column;
  gap: 0.8rem;
  padding-top: 0.5rem;
  transition: opacity 0.3s;
}

.settings-volume-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-volume-group .settings-label {
  min-width: 120px;
  font-size: 0.85rem;
}

.settings-slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
}

.settings-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ff8-border-in), var(--ff8-border-out));
  outline: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8e870, #c0b840);
  border: 2px solid #a09030;
  box-shadow: 0 0 6px rgba(232, 232, 112, 0.4);
}

.settings-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8e870, #c0b840);
  border: 2px solid #a09030;
  box-shadow: 0 0 6px rgba(232, 232, 112, 0.4);
}

.settings-slider-val {
  min-width: 40px;
  text-align: right;
  font-size: 0.8rem;
  color: var(--ff8-highlight);
  font-weight: 600;
}

.settings-delete-btn {
  padding: 0.4rem 1rem;
  border: 2px solid #f87171;
  border-radius: 6px;
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.settings-delete-btn:hover {
  background: rgba(248, 113, 113, 0.25);
}

/* Delete account dialog */
.delete-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease-out;
}

.delete-dialog {
  max-width: 400px;
  width: 90%;
  padding: 1.5rem;
  text-align: center;
}

.delete-dialog-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #f87171;
  margin-bottom: 0.75rem;
}

.delete-dialog-warn {
  font-size: 0.85rem;
  color: #c0d0f0;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.delete-dialog-confirm-text {
  font-size: 0.8rem;
  color: #9ab8e8;
  margin-bottom: 0.5rem;
}

.delete-dialog-input {
  width: 100%;
  padding: 0.5rem;
  background: rgba(10, 12, 36, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
}

.delete-dialog-input:focus {
  outline: none;
  border-color: #f87171;
}

.delete-dialog-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* ===== APP FOOTER ===== */
.app-footer {
  text-align: center;
  padding: 1.5rem max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  margin-top: 2rem;
  font-size: 0.75rem;
  color: #4a6a98;
  letter-spacing: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-link {
  color: #5a8ac0;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ===== LEGAL PAGE ===== */
.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.legal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.legal-header h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
}

.legal-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  line-height: 1.7;
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(212, 168, 67, 0.2);
  padding-bottom: 0.5rem;
}

.legal-section h3 {
  font-size: 1rem;
  color: #7a9ac8;
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
}

.legal-section p {
  color: #b0c0d8;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.legal-back {
  text-align: center;
  margin-top: 2rem;
}

/* ===== Glossary ===== */
.glossary-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.glossary-main-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 0.3rem;
}
.glossary-subtitle {
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.glossary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.glossary-nav-link {
  background: rgba(192, 184, 144, 0.1);
  border: 1px solid rgba(192, 184, 144, 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  color: #c0b890;
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.2s;
}
.glossary-nav-link:hover {
  background: rgba(192, 184, 144, 0.2);
  border-color: rgba(192, 184, 144, 0.6);
  color: #fff;
}
.glossary-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  line-height: 1.7;
}
.glossary-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 0.8rem;
  border-bottom: 1px solid rgba(212, 168, 67, 0.2);
  padding-bottom: 0.5rem;
}
.glossary-section h3 {
  font-size: 1rem;
  color: #7a9ac8;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
.glossary-section p {
  color: #b0c0d8;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.glossary-subsection {
  margin-bottom: 0.8rem;
  padding-left: 0.5rem;
  border-left: 2px solid rgba(122, 154, 200, 0.2);
}
.glossary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0;
  font-size: 0.85rem;
}
.glossary-table th {
  background: rgba(192, 184, 144, 0.1);
  color: #c0b890;
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(192, 184, 144, 0.2);
}
.glossary-table td {
  padding: 0.5rem 0.6rem;
  color: #b0c0d8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glossary-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.glossary-highlight {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  padding: 0.8rem;
  margin-top: 0.8rem;
  color: #b0c0d8;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ===== Bottom Navigation Bar — Mobile & Tablet only ===== */
.mobile-bottom-nav {
  display: none; /* Hidden by default (desktop) */
}

@media (max-width: 1024px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(10, 18, 48, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(192, 184, 144, 0.12);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.7);
    padding: 0.3rem max(0.5rem, env(safe-area-inset-right)) 0.3rem max(0.5rem, env(safe-area-inset-left));
    padding-bottom: max(0.3rem, env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: flex-end;
  }

  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: #4a5a7a;
    font-size: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0.4rem 0 0.2rem;
    cursor: pointer;
    transition: color 0.25s;
    min-width: 52px;
    position: relative;
  }

  .mobile-nav-btn .mobile-nav-icon {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s;
  }

  .mobile-nav-btn .mobile-nav-label {
    letter-spacing: 0.2px;
    text-transform: uppercase;
    font-size: 0.5rem;
  }

  .mobile-nav-btn.active {
    color: #e8e870;
  }

  .mobile-nav-btn.active .mobile-nav-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(232, 232, 112, 0.5));
  }

  .mobile-nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #e8e870;
    border-radius: 2px;
  }

  .mobile-nav-btn:active {
    color: #c0d0f0;
  }

  /* === Center button (Jouer) — elevated === */
  .mobile-nav-center {
    position: relative;
    margin-top: -22px;
    padding-top: 0;
  }

  .mobile-nav-center-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a3a6a, #1a2550);
    border: 2px solid rgba(192, 184, 144, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .mobile-nav-center-ring .mobile-nav-icon {
    font-size: 1.5rem;
  }

  .mobile-nav-center.active .mobile-nav-center-ring {
    border-color: #e8e870;
    box-shadow: 0 4px 20px rgba(232, 232, 112, 0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  }

  .mobile-nav-center:active .mobile-nav-center-ring {
    transform: scale(0.95);
  }

  .mobile-nav-center.active::before {
    display: none; /* No top bar for center button */
  }

  .mobile-nav-center .mobile-nav-label {
    margin-top: 2px;
  }

  /* === "More" popup menu === */
  .mobile-more-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 4px;
    background: rgba(14, 22, 52, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(192, 184, 144, 0.2);
    border-radius: 12px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    padding: 0.5rem;
    min-width: 180px;
    z-index: 210;
  }

  .mobile-more-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #b0c0d8;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .mobile-more-item:hover,
  .mobile-more-item:active {
    background: rgba(192, 184, 144, 0.1);
    color: #e8e870;
  }

  /* Add bottom padding so content doesn't hide behind bottom nav */
  #app-screen {
    padding-bottom: 72px;
  }

  /* Hide top navbar nav items — bottom nav replaces them */
  .navbar-nav {
    display: none !important;
  }
}

/* Hide bottom nav during gameplay */
body.in-game .mobile-bottom-nav {
  display: none !important;
}
body.in-game #app-screen {
  padding-bottom: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a1230; }
::-webkit-scrollbar-thumb { background: #2a3a68; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4a6ac8; }

/* ===== Auction House ===== */

.auction-header { text-align: center; margin-bottom: 1rem; padding: 1rem; }
.auction-header h2 { color: #d4af37; margin-bottom: 0.3rem; font-size: 1.5rem; }
.auction-subtitle { color: #8899bb; font-size: 0.85rem; }

.auction-tabs {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.auction-tab {
  padding: 0.5rem 1.2rem; border: 1px solid #2a3a68; border-radius: 6px;
  background: #0d1b3e; color: #8899bb; cursor: pointer; font-size: 0.85rem;
  transition: all 0.2s;
}
.auction-tab:hover { background: #1a2a5e; color: #ccc; }
.auction-tab.active { background: #1a2a5e; color: #fff; border-color: #4a6ac8; }
.auction-tab-sell {
  background: linear-gradient(135deg, #2d5a27, #1a3a15);
  border-color: #3a7a33; color: #8fbc8f;
}
.auction-tab-sell:hover { background: linear-gradient(135deg, #3a7a33, #2d5a27); color: #fff; }

.auction-filters {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.auction-filters select {
  padding: 0.4rem 0.8rem; border: 1px solid #2a3a68; border-radius: 4px;
  background: #0d1b3e; color: #ccc; font-size: 0.8rem;
}

.auction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; padding: 0 0.5rem;
}

.auction-card {
  background: #0d1b3e; border: 1px solid #2a3a68; border-radius: 8px;
  overflow: hidden; transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.auction-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(74,106,200,0.3); }

.auction-card.rarity-common { border-color: #555; }
.auction-card.rarity-rare { border-color: #3498db; }
.auction-card.rarity-epic { border-color: #9b59b6; }
.auction-card.rarity-legendary { border-color: #f39c12; box-shadow: 0 0 8px rgba(243,156,18,0.2); }

.auction-card-image {
  position: relative; text-align: center; padding: 0.5rem;
  background: rgba(0,0,0,0.2);
}
.auction-card-image img { width: 80px; height: auto; border-radius: 4px; }
.auction-card-values { width: 24px; height: 28px; top: 12px; left: calc(50% - 40px + 3px); }
.auction-card-values .tt-val { font-size: 0.6rem; width: 11px; height: 11px; }
.auction-card-name-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.auction-card-element-inline { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,0.4); font-size: 0.6rem; color: #ccd; text-transform: capitalize; white-space: nowrap; flex-shrink: 0; }
.auction-card-element-inline .tt-element { position: relative; top: auto; right: auto; width: 14px; height: 14px; background-size: 14px auto; filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)); }
.auction-card-new {
  position: absolute; top: 4px; left: 4px;
  background: #e74c3c; color: #fff; padding: 1px 6px;
  border-radius: 3px; font-size: 0.6rem; font-weight: bold;
  letter-spacing: 1px; animation: auction-new-pulse 1.5s ease-in-out infinite;
}
@keyframes auction-new-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.auction-card-level {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.7); color: #d4af37; padding: 2px 6px;
  border-radius: 3px; font-size: 0.7rem;
}

.auction-card-info { padding: 0.4rem 0.6rem; }
.auction-card-name { color: #e0e0e0; font-weight: bold; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.auction-card-rarity { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; }

.auction-card-prices { padding: 0.4rem 0.6rem; border-top: 1px solid #1a2a4e; }
.auction-price-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin: 2px 0; }
.price-label { color: #6677aa; }
.price-value { color: #d4af37; font-weight: bold; }
.price-buyout { color: #e8a020; }

.auction-card-footer {
  padding: 0.3rem 0.6rem; display: flex; justify-content: space-between;
  font-size: 0.7rem; border-top: 1px solid #1a2a4e;
}
.auction-seller { color: #6677aa; }
.auction-time { font-weight: bold; }
.time-ok { color: #27ae60; }
.time-warning { color: #f39c12; }
.time-urgent { color: #e74c3c; }

.auction-card-actions {
  padding: 0.4rem 0.6rem; display: flex; gap: 0.4rem;
  border-top: 1px solid #1a2a4e; margin-top: auto;
}
.btn-bid {
  flex: 1; padding: 0.3rem; background: #1a3a6e; color: #aabbdd;
  border: 1px solid #2a5a9e; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
}
.btn-bid:hover { background: #2a5a9e; color: #fff; }
.btn-buyout {
  flex: 1; padding: 0.3rem; background: #5a3a1e; color: #d4af37;
  border: 1px solid #8a5a2e; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
}
.btn-buyout:hover { background: #8a5a2e; color: #fff; }
.btn-cancel {
  flex: 1; padding: 0.3rem; background: #3a1a1a; color: #e74c3c;
  border: 1px solid #6a2a2a; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
}
.btn-cancel:hover { background: #6a2a2a; color: #fff; }

.auction-empty { text-align: center; padding: 2rem; color: #6677aa; }

.auction-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 1rem; padding: 1rem; color: #8899bb;
}
.page-info { font-size: 0.85rem; }

/* Status badges */
.status-badge-active { color: #27ae60; }
.status-badge-sold { color: #d4af37; }
.status-badge-expired { color: #e74c3c; }
.status-badge-cancelled { color: #888; }
.auction-card.status-sold, .auction-card.status-expired, .auction-card.status-cancelled {
  opacity: 0.6;
}

/* Auction modals */
.auction-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.auction-modal {
  max-width: 500px; width: 100%; max-height: 80vh; overflow-y: auto;
  padding: 1.5rem;
}
.auction-modal h3 { color: #d4af37; margin-bottom: 0.8rem; text-align: center; }
.auction-coins-shortage {
  margin: 0.8rem 0; padding: 0.7rem; border-radius: 6px;
  background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.4);
  text-align: center;
}
.auction-coins-shortage p { color: #e74c3c; font-size: 0.85rem; margin: 0 0 0.5rem; }
.btn-go-shop {
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(232,160,32,0.15));
  border: 1px solid rgba(212,175,55,0.6); color: #d4af37; padding: 4px 16px;
  border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.8rem;
}
.btn-go-shop:hover { background: rgba(212,175,55,0.35); }
.auction-modal-hint { color: #6677aa; font-size: 0.8rem; text-align: center; margin-bottom: 1rem; }
.auction-modal-actions { display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: center; }
.auction-modal-close { margin-top: 0.5rem; }

/* Sell modal card grid */
.sell-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem; max-height: 300px; overflow-y: auto; margin-bottom: 1rem;
}
.sell-card-option {
  text-align: center; padding: 0.4rem; border: 2px solid transparent;
  border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.sell-card-option:hover { border-color: #4a6ac8; background: rgba(74,106,200,0.1); }
.sell-card-option.selected { border-color: #d4af37; background: rgba(212,175,55,0.1); }
.sell-card-img-wrap { position: relative; display: inline-block; }
.sell-card-option img { width: 60px; height: auto; }
.sell-card-values { width: 20px; height: 24px; top: 2px; left: 2px; }
.sell-card-values .tt-val { font-size: 0.5rem; width: 9px; height: 9px; }
.sell-card-img-wrap .tt-element { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; background-size: 14px auto; }
.sell-card-name { font-size: 0.65rem; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sell-card-qty { font-size: 0.6rem; color: #8899bb; }

#sell-preview { margin-top: 1rem; }
.sell-price-info { display: flex; justify-content: space-around; margin-bottom: 0.5rem; color: #ccc; font-size: 0.85rem; }
.sell-price-info strong { color: #d4af37; }
.sell-tax-info { text-align: center; color: #e74c3c; font-size: 0.75rem; }
.sell-duration-select { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin: 0.5rem 0; }
.sell-duration-select label { color: #8899bb; font-size: 0.85rem; }
.sell-duration-select select { padding: 0.3rem; background: #0d1b3e; color: #ccc; border: 1px solid #2a3a68; border-radius: 4px; }

/* Bid modal */
.bid-card-preview { display: flex; align-items: center; gap: 0.8rem; justify-content: center; margin-bottom: 1rem; }
.bid-card-preview img { width: 60px; border-radius: 4px; }
.bid-card-preview span { color: #e0e0e0; font-weight: bold; }
.bid-info p { color: #8899bb; font-size: 0.85rem; margin: 0.2rem 0; text-align: center; }
.bid-info strong { color: #d4af37; }
.bid-input-row { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin: 1rem 0; }
.bid-input {
  width: 120px; padding: 0.5rem; background: #0a1230; color: #d4af37;
  border: 1px solid #2a3a68; border-radius: 4px; font-size: 1rem; text-align: center;
}
.bid-input-row span { color: #8899bb; }
.buyout-confirm-text { text-align: center; color: #ccc; margin: 1rem 0; }

@media (max-width: 600px) {
  .auction-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .auction-tabs { gap: 0.3rem; }
  .auction-tab { padding: 0.4rem 0.8rem; font-size: 0.75rem; }
}

/* ===== LOGOUT MODAL ===== */
.logout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease-out;
  backdrop-filter: blur(4px);
}

.logout-modal {
  max-width: 380px;
  width: 100%;
  background: linear-gradient(180deg, #1a2450 0%, #0d1530 100%);
  border: 2px solid rgba(120, 160, 220, 0.3);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(80, 120, 200, 0.1);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from { transform: scale(0.9) translateY(-20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.logout-modal-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  filter: grayscale(0.3);
}

.logout-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

.logout-modal-text {
  color: #7a9ac8;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.logout-modal-actions {
  display: flex;
  gap: 0.75rem;
}

.logout-modal-btn {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: all 0.2s ease;
  border: 1px solid;
}

.logout-modal-btn * {
  cursor: inherit !important;
  pointer-events: none;
}

.logout-modal-cancel {
  background: linear-gradient(135deg, rgba(30, 40, 80, 0.6), rgba(20, 28, 60, 0.8));
  border-color: rgba(120, 160, 220, 0.2);
  color: #c0d0f0;
}

.logout-modal-cancel:hover {
  background: linear-gradient(135deg, rgba(40, 55, 100, 0.7), rgba(25, 35, 75, 0.9));
  border-color: rgba(120, 160, 220, 0.4);
}

.logout-modal-confirm {
  background: linear-gradient(135deg, rgba(180, 50, 50, 0.3), rgba(140, 30, 30, 0.5));
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.logout-modal-confirm:hover {
  background: linear-gradient(135deg, rgba(200, 60, 60, 0.4), rgba(160, 40, 40, 0.6));
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.2);
}

/* ===== XP GUIDE MODAL ===== */
.xp-guide-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.xp-guide-modal-overlay.visible {
  opacity: 1;
}
.xp-guide-modal {
  position: relative;
  background: linear-gradient(145deg, #1a1f3d, #0d1129);
  border: 1px solid rgba(140, 110, 220, 0.3);
  border-radius: 14px;
  padding: 1.5rem;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(140, 110, 220, 0.1);
  animation: modalSlideIn 0.3s ease-out;
}
.xp-guide-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: #5a7aaa;
  font-size: 1.4rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: color 0.2s;
  line-height: 1;
}
.xp-guide-modal-close:hover {
  color: #f87171;
}
.xp-guide-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #b88cff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}
.xp-guide-modal .xp-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
.xp-guide-modal .xp-guide-table th {
  color: var(--ff8-text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.xp-guide-modal .xp-guide-table td {
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.xp-guide-modal .xp-guide-mode {
  text-align: left !important;
  color: #c0d0f0;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
}
.xp-guide-modal .xp-guide-bonuses {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.xp-guide-modal .xp-guide-bonus {
  font-size: 0.75rem;
  color: #7a9ac8;
  text-align: center;
}
.xp-guide-modal .xp-guide-malus {
  color: #f87171;
}
.xp-guide-modal .xp-guide-level-bonus {
  color: #67e8f9;
}

/* ===== XP GAIN OVERLAY ===== */
.xp-gain-overlay {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  animation: xpSlideUp 0.4s ease-out;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
}

.xp-gain-overlay.xp-gain-fadeout {
  animation: xpFadeOut 0.4s ease-out forwards;
}

@keyframes xpSlideUp {
  from { transform: translateX(-50%) translateY(30px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes xpFadeOut {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(-15px); opacity: 0; }
}

.xp-gain-card {
  background: linear-gradient(135deg, rgba(20, 30, 65, 0.95), rgba(12, 18, 45, 0.98));
  border: 1px solid rgba(212, 168, 67, 0.3);
  border-radius: 14px;
  padding: 1rem 1.5rem;
  min-width: 280px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 168, 67, 0.1);
  backdrop-filter: blur(8px);
}

.xp-gain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.xp-gain-level {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c0d0f0;
}

.xp-gain-plus {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e8e870;
  text-shadow: 0 0 8px rgba(232, 232, 112, 0.3);
  animation: xpPulse 0.6s ease-out;
}

@keyframes xpPulse {
  0% { transform: scale(1.4); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.xp-gain-bar-bg {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.xp-gain-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b88cff, #e8e870);
  border-radius: 5px;
  transition: width 1.2s ease-out;
  position: relative;
}

.xp-gain-bar-fill.xp-gain-levelup {
  background: linear-gradient(90deg, #e8e870, #ffffff);
  box-shadow: 0 0 12px rgba(232, 232, 112, 0.6);
}

.xp-gain-text {
  text-align: center;
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  margin-top: 0.35rem;
  font-family: 'Cinzel', serif;
}

/* ===== ACHIEVEMENTS PAGE ===== */
.achievements-loading {
  text-align: center;
  padding: 3rem;
  color: var(--ff8-text-dim);
}

.achievements-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.achievements-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.achievements-header h1 {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.achievements-global-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.achievements-counter {
  font-size: 1rem;
  color: var(--ff8-text);
  font-weight: 600;
}

.achievements-bar-bg {
  flex: 1;
  max-width: 300px;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.achievements-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f0f080);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.achievements-pct {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 700;
}

.achievements-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.achievements-cat-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ff8-text-dim);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s;
}

.achievements-cat-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ff8-text);
}

.achievements-cat-btn.active {
  background: rgba(232,232,112,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.achievements-cat-icon { font-size: 1rem; }

.achievements-count-label {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.75rem;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.achievement-card {
  background: linear-gradient(135deg, var(--ff8-win-mid), var(--ff8-win-bot));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.25rem 0.5rem;
  align-items: center;
  transition: all 0.2s;
  position: relative;
}

.achievement-card.locked {
  opacity: 0.5;
}

.achievement-card.unlocked {
  opacity: 1;
  border-color: rgba(255,255,255,0.15);
}

.achievement-card.unlocked.tier-gold {
  border-color: rgba(245,158,11,0.3);
  background: linear-gradient(135deg, rgba(245,158,11,0.08), var(--ff8-win-bot));
}

.achievement-card.unlocked.tier-legendary {
  border-color: rgba(245,158,11,0.5);
  background: linear-gradient(135deg, rgba(245,158,11,0.12), var(--ff8-win-bot));
  box-shadow: 0 0 12px rgba(245,158,11,0.15);
}

.achievement-icon {
  font-size: 1.5rem;
  grid-row: 1 / 3;
  text-align: center;
}

.achievement-info {
  min-width: 0;
}

.achievement-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ff8-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achievement-desc {
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achievement-done {
  font-size: 0.7rem;
  color: var(--success);
  font-weight: 600;
}

.achievement-tier {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ff8-text-dim);
  text-align: right;
}

.tier-bronze .achievement-tier { color: #cd7f32; }
.tier-silver .achievement-tier { color: #c0c0c0; }
.tier-gold .achievement-tier { color: var(--gold); }
.tier-legendary .achievement-tier { color: #f59e0b; }

.achievement-rewards {
  grid-column: 2 / 4;
  display: flex;
  gap: 0.5rem;
  font-size: 0.7rem;
}

.achievement-xp { color: #a78bfa; }
.achievement-coins { color: var(--gold); }

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.achievement-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.achievement-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.3s;
}

.achievement-progress-text {
  font-size: 0.65rem;
  color: var(--ff8-text-dim);
  white-space: nowrap;
}

.achievement-title-badge {
  position: absolute;
  top: -6px;
  right: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* ===== PROFILE PAGE ===== */
.profile-loading {
  text-align: center;
  padding: 3rem;
  color: var(--ff8-text-dim);
}

.profile-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.profile-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.profile-back {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ff8-text-dim);
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  transition: all 0.2s;
}

.profile-back:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ff8-text);
}

.profile-username {
  font-size: 1.6rem;
  color: var(--gold);
}

.profile-active-title {
  font-size: 0.9rem;
  color: #f59e0b;
  font-style: italic;
  margin-top: 0.25rem;
}

.profile-meta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  color: var(--ff8-text-dim);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.profile-section {
  margin-bottom: 1rem;
  padding: 1rem;
}

.profile-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.profile-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}

.profile-stat-val {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ff8-text);
}

.profile-stat-label {
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
}

.profile-collection-bar,
.profile-achievements-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.profile-collection-bar span,
.profile-achievements-bar span {
  font-size: 0.8rem;
  color: var(--ff8-text-dim);
  white-space: nowrap;
}

.profile-rarity-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.profile-rarity {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
}

.profile-rarity.common { color: var(--common); }
.profile-rarity.rare { color: var(--rare); }
.profile-rarity.epic { color: var(--epic); }
.profile-rarity.legendary { color: var(--legendary); }

.profile-recent-title {
  font-size: 0.8rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.5rem;
}

.profile-recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.profile-recent-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255,255,255,0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.08);
}

.profile-recent-item.tier-gold { border-color: rgba(245,158,11,0.3); }
.profile-recent-item.tier-legendary { border-color: rgba(245,158,11,0.5); }

.profile-private {
  text-align: center;
}

.profile-private-text {
  color: var(--ff8-text-dim);
  font-style: italic;
}

/* Profile link in ranking */
.profile-link {
  color: var(--ff8-text);
  text-decoration: none;
  transition: color 0.2s;
}

.profile-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ===== SETTINGS: Privacy + Title ===== */
.settings-privacy-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-privacy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.title-option {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ff8-text-dim);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  transition: all 0.2s;
}

.title-option:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ff8-text);
}

.title-option.active {
  background: rgba(245,158,11,0.15);
  border-color: #f59e0b;
  color: #f59e0b;
}

@media (max-width: 768px) {
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  .achievements-categories {
    gap: 0.25rem;
  }
  .achievements-cat-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
  }
  .profile-stats-grid {
    gap: 0.5rem;
  }
}

/* ===== Bank Icon inside Lunas ===== */
.coins-vault {
  font-size: 0.95rem;
  filter: grayscale(0.2);
  transition: transform 0.3s;
  vertical-align: middle;
}

.coins-vault.bounce {
  animation: vaultBounce 0.4s ease;
}

@keyframes vaultBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ===== Achievement Popup Animation ===== */
.achievement-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease;
  pointer-events: all;
}

.achievement-popup-overlay.visible {
  background: rgba(0, 0, 0, 0.6);
}

.achievement-popup {
  position: relative;
  background: linear-gradient(135deg, #1a1a3e 0%, #2a1a4e 50%, #1a1a3e 100%);
  border: 2px solid rgba(205, 173, 109, 0.5);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 400px;
  width: 90%;
  transform: scale(0) rotate(-10deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  box-shadow: 0 0 40px rgba(205, 173, 109, 0.2), 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.achievement-popup-overlay.visible .achievement-popup {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.achievement-popup-glow {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(205, 173, 109, 0.1) 0%, transparent 60%);
  animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* Tier-specific glow colors */
.achievement-popup.tier-bronze .achievement-popup-glow {
  background: radial-gradient(circle at center, rgba(205, 127, 50, 0.15) 0%, transparent 60%);
}
.achievement-popup.tier-silver .achievement-popup-glow {
  background: radial-gradient(circle at center, rgba(192, 192, 220, 0.15) 0%, transparent 60%);
}
.achievement-popup.tier-gold .achievement-popup-glow {
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.2) 0%, transparent 60%);
}
.achievement-popup.tier-legendary .achievement-popup-glow {
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.25) 0%, transparent 60%);
}
.achievement-popup.tier-legendary {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.3), 0 20px 60px rgba(0, 0, 0, 0.5);
}

.achievement-popup-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  animation: iconEntrance 0.6s 0.3s both;
}

@keyframes iconEntrance {
  0% { transform: scale(0) rotate(180deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(-10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.achievement-popup-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--ff8-highlight);
  margin-bottom: 0.5rem;
  animation: fadeSlideUp 0.4s 0.4s both;
}

.achievement-popup-name {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3rem;
  animation: fadeSlideUp 0.4s 0.5s both;
}

.achievement-popup-desc {
  font-size: 0.85rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.75rem;
  animation: fadeSlideUp 0.4s 0.55s both;
}

.achievement-popup-tier {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
  animation: fadeSlideUp 0.4s 0.6s both;
}

.tier-bronze .achievement-popup-tier { color: #cd7f32; }
.tier-silver .achievement-popup-tier { color: #c0c0dc; }
.tier-gold .achievement-popup-tier { color: #ffd700; }
.tier-legendary .achievement-popup-tier { color: #a855f7; }

.achievement-popup-rewards {
  display: flex;
  justify-content: center;
  gap: 1rem;
  animation: fadeSlideUp 0.4s 0.7s both;
}

.achievement-popup-xp {
  font-weight: 600;
  color: #60a5fa;
  font-size: 0.9rem;
}

.achievement-popup-gils {
  font-weight: 600;
  color: var(--ff8-highlight);
  font-size: 0.9rem;
}

.achievement-popup-title-unlock {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: #a855f7;
  animation: fadeSlideUp 0.4s 0.8s both;
}

@keyframes fadeSlideUp {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ===== Flying Lunas Animation ===== */
.flying-gil {
  position: fixed;
  font-size: 1.2rem;
  z-index: 10001;
  pointer-events: none;
  transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.6s ease,
              transform 0.6s ease;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

/* ===== GM Panel ===== */
.nav-btn-gm {
  background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(139,92,246,0.1));
  border-color: rgba(168,85,247,0.5) !important;
  color: #c084fc !important;
  text-shadow: 0 0 4px rgba(168,85,247,0.2);
}
.nav-btn-gm:hover {
  background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(139,92,246,0.18));
  border-color: rgba(168,85,247,0.7) !important;
  color: #d8b4fe !important;
}
.nav-btn-gm.active {
  background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(139,92,246,0.2));
  border-color: #a855f7 !important;
  color: #d8b4fe !important;
}

/* ===== GM Panel — Complete Styles ===== */

/* Layout */
.gm-panel { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.gm-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gm-header-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(124,58,237,0.3));
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.gm-header h2 {
  font-family: 'Cinzel', serif;
  color: #c084fc;
  font-size: 1.3rem;
  margin: 0;
}
.gm-header-sub {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  margin-top: 0.1rem;
}

/* Tabs */
.gm-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gm-tab-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ff8-text-dim);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  font-size: 0.78rem;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 0.4rem;
}
.gm-tab-btn:hover { background: rgba(255,255,255,0.06); color: var(--ff8-text); }
.gm-tab-btn.active {
  background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(124,58,237,0.2));
  border-color: rgba(168,85,247,0.4);
  color: #c084fc;
  font-weight: 600;
}

/* Dashboard Stats */
.gm-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.gm-stat-card {
  text-align: center;
  padding: 1.1rem 0.75rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  transition: all 0.2s;
}
.gm-stat-card:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}
.gm-stat-icon { font-size: 1.4rem; margin-bottom: 0.4rem; }
.gm-stat-value {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ff8-highlight);
  display: block;
}
.gm-stat-label {
  font-size: 0.72rem;
  color: var(--ff8-text-dim);
  letter-spacing: 0.5px;
  margin-top: 0.2rem;
}
.gm-stat-players { border-left: 3px solid #60a5fa; }
.gm-stat-matches { border-left: 3px solid #f59e0b; }
.gm-stat-tickets { border-left: 3px solid #fbbf24; }
.gm-stat-alerts { border-left: 3px solid #f87171; }
.gm-stat-revenue { border-left: 3px solid #4ade80; }
.gm-stat-auctions { border-left: 3px solid #c084fc; }

/* Tables */
.gm-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.1);
}
.gm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.gm-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--ff8-text-dim);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}
.gm-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--ff8-text);
}
.gm-table tbody tr { transition: background 0.15s; }
.gm-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.gm-table tbody tr:hover td { background: rgba(168,85,247,0.06); }
.gm-table-sm { font-size: 0.75rem; }
.gm-table-sm th, .gm-table-sm td { padding: 0.35rem 0.6rem; }

/* Player rows clickable */
.gm-player-row, .gm-player-row td { cursor: url('/img/cursor-pointer.png') 6 0, pointer !important; }
.gm-player-row:hover td { background: rgba(168,85,247,0.1) !important; }

/* IP multi-account alert */
.gm-ip-alert {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: #fca5a5;
}

/* Card remove button */
.gm-card-item {
  position: relative;
}
.gm-card-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(239,68,68,0.8);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.gm-card-item:hover .gm-card-remove {
  opacity: 1;
}
.gm-card-remove:hover {
  background: rgba(239,68,68,1);
}

/* Search input */
.gm-players-toolbar {
  margin-bottom: 0.75rem;
}
.gm-search-input {
  width: 100%;
  max-width: 320px;
  padding: 0.5rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--ff8-text);
  font-size: 0.85rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.gm-search-input:focus { outline: none; border-color: rgba(168,85,247,0.5); }
.gm-search-input::placeholder { color: rgba(255,255,255,0.3); }

/* Role badges */
.gm-role-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
}
.gm-role-player { background: rgba(59,130,246,0.15); color: #60a5fa; }
.gm-role-gm { background: rgba(168,85,247,0.15); color: #c084fc; }
.gm-role-banned { background: rgba(239,68,68,0.15); color: #f87171; }

/* Pagination */
.gm-pagination {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
}
.gm-page-info {
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  padding: 0 0.5rem;
}

/* Player Detail */
.gm-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.gm-detail-header h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--ff8-highlight);
  margin: 0;
}
.gm-back-btn {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--ff8-text-dim);
  font-size: 0.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}
.gm-back-btn:hover { background: rgba(255,255,255,0.1); color: var(--ff8-text); }

.gm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.gm-detail-info, .gm-detail-stats {
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.gm-detail-info h4, .gm-detail-stats h4,
.gm-detail-actions h4, .gm-detail-cards h4, .gm-detail-matches h4 {
  font-family: 'Cinzel', serif;
  color: #c084fc;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(168,85,247,0.15);
}
.gm-detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.82rem;
}
.gm-detail-fields div { color: var(--ff8-text-dim); }
.gm-detail-fields strong { color: var(--ff8-text); }

.gm-detail-actions {
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 0.75rem;
}
.gm-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gm-action-row {
  display: flex;
  gap: 0.5rem;
}
.gm-action-row .btn {
  flex: 1;
}

/* Cards grid */
.gm-detail-cards, .gm-detail-matches {
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 0.75rem;
}
.gm-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}
.gm-card-item {
  text-align: center;
  padding: 0.4rem;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  position: relative;
}
.gm-card-item img { width: 100%; height: auto; border-radius: 4px; }
.gm-card-name { font-size: 0.6rem; color: var(--ff8-text-dim); margin-top: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-card-qty {
  position: absolute; top: 2px; right: 4px;
  background: rgba(168,85,247,0.8); color: #fff;
  font-size: 0.55rem; font-weight: 700;
  padding: 0.1rem 0.3rem; border-radius: 3px;
}

/* Result colors */
.gm-result-win { color: #4ade80; font-weight: 600; }
.gm-result-loss { color: #f87171; font-weight: 600; }
.gm-result-draw { color: #fbbf24; }
.gm-positive { color: #4ade80; font-weight: 600; }
.gm-negative { color: #f87171; font-weight: 600; }

/* Sub-tabs (logs) */
.gm-sub-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.gm-sub-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ff8-text-dim);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  font-size: 0.75rem;
  transition: all 0.2s;
}
.gm-sub-tab:hover { background: rgba(255,255,255,0.06); }
.gm-sub-tab.active { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.35); color: #c084fc; }

/* Log status badges */
.gm-status-active { color: #4ade80; }
.gm-status-expired, .gm-status-cancelled { color: #94a3b8; }
.gm-status-sold { color: #60a5fa; }

/* Tickets */
.gm-tickets-toolbar {
  margin-bottom: 0.75rem;
}
.gm-tickets-toolbar select {
  padding: 0.4rem 0.7rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--ff8-text);
  font-size: 0.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
}
.gm-tickets-list { display: flex; flex-direction: column; gap: 0.5rem; }
.gm-ticket-item {
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}
.gm-ticket-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(168,85,247,0.25);
  transform: translateX(2px);
}
.gm-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.gm-ticket-subject { font-weight: 600; font-size: 0.88rem; color: var(--ff8-text); }
.gm-ticket-meta {
  display: flex; gap: 0.75rem; align-items: center;
  font-size: 0.72rem; color: var(--ff8-text-dim);
}
.gm-ticket-status {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
}
.gm-ticket-open { background: rgba(234,179,8,0.15); color: #fbbf24; }
.gm-ticket-resolved { background: rgba(34,197,94,0.15); color: #4ade80; }
.gm-ticket-closed { background: rgba(148,163,184,0.1); color: #94a3b8; }

/* Ticket Detail */
.gm-ticket-meta-detail {
  font-size: 0.78rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.75rem;
}
.gm-ticket-thread {
  max-height: 400px;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gm-ticket-thread::-webkit-scrollbar { width: 4px; }
.gm-ticket-thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.gm-ticket-msg {
  display: flex; gap: 0.5rem; max-width: 80%; align-items: flex-start;
}
.gm-msg-user { align-self: flex-start; flex-direction: row; }
.gm-msg-admin { align-self: flex-end; flex-direction: row-reverse; }
.gm-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 0.9rem;
  flex-shrink: 0; background: rgba(255,255,255,0.06);
}
.gm-msg-bubble {
  padding: 0.5rem 0.75rem; border-radius: 10px; min-width: 0;
}
.gm-msg-user .gm-msg-bubble {
  background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2);
  border-top-left-radius: 2px;
}
.gm-msg-admin .gm-msg-bubble {
  background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2);
  border-top-right-radius: 2px;
}
.gm-msg-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.2rem; font-size: 0.7rem; gap: 1rem;
}
.gm-msg-header strong { color: var(--ff8-text); }
.gm-msg-admin .gm-msg-header strong { color: #c084fc; }
.gm-msg-header span { color: var(--ff8-text-dim); }
.gm-msg-body {
  font-size: 0.82rem; color: var(--ff8-text);
  white-space: pre-wrap; word-break: break-word;
  line-height: 1.5;
}

/* Ticket reply bar */
.gm-ticket-reply {
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.gm-ticket-reply textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--ff8-text);
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
  margin-bottom: 0.6rem;
  transition: border-color 0.2s;
}
.gm-ticket-reply textarea:focus { outline: none; border-color: rgba(168,85,247,0.5); }
.gm-ticket-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Anti-Cheat */
.gm-anticheat-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.gm-anticheat-toolbar select {
  padding: 0.4rem 0.7rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--ff8-text);
  font-size: 0.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
}
.gm-alerts-list { display: flex; flex-direction: column; gap: 0.5rem; }
.gm-alert-item {
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  border-left: 3px solid rgba(59,130,246,0.4);
}
.gm-severity-critical { border-left-color: #f87171; }
.gm-severity-warning { border-left-color: #fbbf24; }
.gm-severity-info { border-left-color: #60a5fa; }
.gm-alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.gm-alert-type { font-weight: 600; font-size: 0.82rem; color: var(--ff8-text); }
.gm-alert-severity {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}
.gm-severity-critical .gm-alert-severity { background: rgba(239,68,68,0.15); color: #f87171; }
.gm-severity-warning .gm-alert-severity { background: rgba(234,179,8,0.15); color: #fbbf24; }
.gm-severity-info .gm-alert-severity { background: rgba(59,130,246,0.15); color: #60a5fa; }
.gm-alert-body {
  display: flex;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.4rem;
}
.gm-alert-user { font-weight: 600; color: var(--ff8-text); }
.gm-alert-details { flex: 1; }
.gm-alert-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
}
.gm-resolved-badge {
  padding: 0.1rem 0.4rem;
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
}
.gm-scan-result {
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px;
  color: #4ade80;
}

/* Audit */
.gm-details-cell {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty & Error states */
.gm-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ff8-text-dim);
  font-size: 0.88rem;
}
.gm-error {
  text-align: center;
  padding: 1.5rem;
  color: #f87171;
  font-size: 0.85rem;
}

/* Buttons */
.gm-btn-danger {
  background: rgba(239,68,68,0.15) !important;
  border-color: rgba(239,68,68,0.4) !important;
  color: #f87171 !important;
}
.gm-btn-danger:hover {
  background: rgba(239,68,68,0.25) !important;
}

/* GM Modal */
.gm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.gm-modal {
  max-width: 420px;
  width: 90%;
  padding: 1.5rem;
  background: rgba(20,25,45,0.95);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 12px;
}
.gm-modal h3 {
  font-family: 'Cinzel', serif;
  color: #c084fc;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.gm-modal-field { margin-bottom: 0.75rem; }
.gm-modal-field label {
  display: block;
  font-size: 0.75rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.25rem;
}
.gm-modal input, .gm-modal textarea, .gm-modal select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--ff8-text);
  font-size: 0.85rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.gm-modal input:focus, .gm-modal textarea:focus, .gm-modal select:focus {
  outline: none;
  border-color: rgba(168,85,247,0.5);
}
.gm-modal textarea { min-height: 80px; resize: vertical; font-family: inherit; }
.gm-modal-body { margin-bottom: 1rem; }
.gm-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.gm-modal-warning {
  font-size: 0.8rem;
  color: #f87171;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(239,68,68,0.08);
  border-radius: 6px;
}

/* Responsive */
@media (max-width: 700px) {
  .gm-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .gm-detail-grid { grid-template-columns: 1fr; }
  .gm-detail-fields { grid-template-columns: 1fr; }
}

/* ===== Ticket Thread ===== */
.ticket-thread {
  max-height: 400px;
  overflow-y: auto;
  margin: 1rem 0;
  padding-right: 0.5rem;
}
.ticket-msg {
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  border-left: 3px solid rgba(59,130,246,0.5);
  background: rgba(0,0,0,0.15);
}
.ticket-msg.admin-msg {
  border-left-color: #c084fc;
  background: rgba(168,85,247,0.08);
}
.ticket-msg-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
}
.ticket-msg-sender {
  font-weight: 600;
  color: var(--ff8-text);
}
.ticket-msg.admin-msg .ticket-msg-sender { color: #c084fc; }
.ticket-msg-time { color: var(--ff8-text-dim); }
.ticket-msg-body {
  font-size: 0.85rem;
  color: var(--ff8-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.ticket-reply-box {
  margin-top: 0.75rem;
}
.ticket-reply-box textarea {
  width: 100%;
  padding: 0.5rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: var(--ff8-text);
  font-size: 0.85rem;
  min-height: 60px;
  resize: vertical;
  margin-bottom: 0.5rem;
}

/* ===== Support Page (Player) ===== */
/* ===== Support Icon (navbar) ===== */
.support-icon-wrapper {
  position: relative;
  display: inline-block;
}
.support-icon-btn {
  background: none;
  border: none;
  color: #c0d0f0;
  padding: 0.35rem;
  border-radius: 3px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: color 0.2s, background 0.2s;
  position: relative;
}
.support-icon-btn:hover {
  color: var(--ff8-highlight);
  background: rgba(255, 255, 255, 0.08);
}
.support-icon-badge {
  position: absolute;
  top: 0; right: -2px;
  background: #c084fc;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 8px;
  padding: 0 3px;
}

/* ===== Support Page ===== */
.support-page { max-width: 720px; margin: 0 auto; padding: 1rem; }
.support-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: var(--ff8-text-dim);
}
.support-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #c084fc;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.support-spinner-sm {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Header */
.support-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.support-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.support-header-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(59,130,246,0.2));
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
  flex-shrink: 0;
}
.support-header h1 {
  font-family: 'Cinzel', serif;
  color: var(--ff8-highlight);
  font-size: 1.3rem;
  margin: 0;
}
.support-header p {
  color: var(--ff8-text-dim);
  font-size: 0.8rem;
  margin: 0.15rem 0 0;
}
.support-new-ticket-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border: 1px solid rgba(168,85,247,0.5);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.support-new-ticket-btn:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

/* Toolbar: filters + sort */
.support-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.support-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.support-filter-btn {
  padding: 0.35rem 0.7rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--ff8-text-dim);
  font-size: 0.75rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.support-filter-btn:hover { background: rgba(255,255,255,0.08); }
.support-filter-btn.active {
  background: rgba(168,85,247,0.15);
  border-color: rgba(168,85,247,0.4);
  color: #c084fc;
}
.support-filter-count {
  background: rgba(255,255,255,0.08);
  padding: 0 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  min-width: 16px;
  text-align: center;
}
.support-filter-btn.active .support-filter-count {
  background: rgba(168,85,247,0.2);
}
.support-sort-select {
  padding: 0.35rem 0.6rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--ff8-text);
  font-size: 0.75rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
}

/* Ticket cards */
.support-ticket-list { display: flex; flex-direction: column; gap: 0.5rem; }

.support-ticket-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}
.support-ticket-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(168,85,247,0.3);
  transform: translateX(2px);
}
.support-ticket-card-icon {
  font-size: 1.4rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  flex-shrink: 0;
}
.support-ticket-card-body { flex: 1; min-width: 0; }
.support-ticket-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.support-ticket-card-subject {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ff8-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.support-new-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #c084fc;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.support-ticket-card-bottom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--ff8-text-dim);
}
.support-ticket-card-date { opacity: 0.7; }
.support-ticket-card-arrow {
  color: var(--ff8-text-dim);
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.support-ticket-card:hover .support-ticket-card-arrow { opacity: 0.8; }

/* Badges */
.support-badge {
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.support-badge-open { background: rgba(234,179,8,0.15); color: #fbbf24; }
.support-badge-resolved { background: rgba(34,197,94,0.15); color: #4ade80; }
.support-badge-closed { background: rgba(148,163,184,0.1); color: #94a3b8; }
.support-cat-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  white-space: nowrap;
}

/* Empty state */
.support-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ff8-text-dim);
}
.support-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }
.support-empty-text { font-size: 0.9rem; }

/* ===== New Ticket Form ===== */
.support-form-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.support-form-header h1 {
  font-family: 'Cinzel', serif;
  color: var(--ff8-highlight);
  font-size: 1.2rem;
  margin: 0;
}
.support-back-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--ff8-text-dim);
  font-size: 0.8rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.support-back-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ff8-text);
}
.support-form-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.25rem;
}
.support-form-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  margin-top: 0.5rem;
}
.support-form-step:first-child { margin-top: 0; }
.support-form-step-num {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.support-form-step-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ff8-text);
}

/* Category grid */
.support-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.support-cat-card {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
}
.support-cat-radio { display: none; }
.support-cat-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.3rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  transition: all 0.2s;
  text-align: center;
}
.support-cat-card:hover .support-cat-card-inner {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}
.support-cat-card.selected .support-cat-card-inner {
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.5);
  box-shadow: 0 0 12px rgba(168,85,247,0.15);
}
.support-cat-card-icon { font-size: 1.3rem; }
.support-cat-card-label {
  font-size: 0.68rem;
  color: var(--ff8-text-dim);
  line-height: 1.2;
}
.support-cat-card.selected .support-cat-card-label { color: #c084fc; }

/* Form fields */
.support-field {
  margin-bottom: 0.75rem;
  position: relative;
}
.support-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--ff8-text-dim);
  margin-bottom: 0.3rem;
}
.support-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--ff8-text);
  font-size: 0.85rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.support-input:focus {
  outline: none;
  border-color: rgba(168,85,247,0.5);
}
.support-textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--ff8-text);
  font-size: 0.85rem;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}
.support-textarea:focus {
  outline: none;
  border-color: rgba(168,85,247,0.5);
}
.support-char-count {
  text-align: right;
  font-size: 0.68rem;
  color: var(--ff8-text-dim);
  opacity: 0.6;
  margin-top: 0.2rem;
}
.support-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.support-submit-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border: 1px solid rgba(168,85,247,0.5);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
}
.support-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  transform: translateY(-1px);
}
.support-submit-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ===== Conversation ===== */
.support-conv-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.support-conv-info { flex: 1; min-width: 0; }
.support-conv-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--ff8-highlight);
  margin-bottom: 0.3rem;
}
.support-conv-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.support-conv-date {
  font-size: 0.7rem;
  color: var(--ff8-text-dim);
  opacity: 0.7;
}

/* Messages thread */
.support-messages-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 450px;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 0.75rem;
}
.support-messages-thread::-webkit-scrollbar { width: 4px; }
.support-messages-thread::-webkit-scrollbar-track { background: transparent; }
.support-messages-thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.support-msg {
  display: flex;
  gap: 0.6rem;
  max-width: 85%;
}
.support-msg-player { align-self: flex-end; flex-direction: row-reverse; }
.support-msg-admin { align-self: flex-start; }

.support-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.support-msg-avatar-player { background: rgba(59,130,246,0.2); }
.support-msg-avatar-admin { background: rgba(168,85,247,0.2); }

.support-msg-content {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  min-width: 0;
}
.support-msg-player .support-msg-content {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.15);
}
.support-msg-admin .support-msg-content {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.15);
}
.support-msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.support-msg-sender {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ff8-text);
}
.support-admin-tag {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  background: rgba(168,85,247,0.2);
  color: #c084fc;
  border-radius: 3px;
  font-weight: 600;
}
.support-msg-date {
  font-size: 0.65rem;
  color: var(--ff8-text-dim);
  opacity: 0.6;
  white-space: nowrap;
}
.support-msg-body {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ff8-text);
  word-wrap: break-word;
}

/* Reply bar */
.support-reply-bar {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.support-reply-textarea {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--ff8-text);
  font-size: 0.85rem;
  font-family: inherit;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.support-reply-textarea:focus {
  outline: none;
  border-color: rgba(168,85,247,0.5);
}
.support-reply-send-btn {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border: none;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.support-reply-send-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  transform: scale(1.05);
}
.support-reply-send-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Closed banner */
.support-closed-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(148,163,184,0.08);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.82rem;
}

/* Responsive */
@media (max-width: 600px) {
  .support-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .support-header { flex-direction: column; align-items: stretch; }
  .support-new-ticket-btn { width: 100%; justify-content: center; }
  .support-msg { max-width: 95%; }
  .support-toolbar { flex-direction: column; align-items: stretch; }
}

/* ===== LOBBY BOTTOM PANELS (Quests + Friends) ===== */
.lobby-main-layout {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 1.2rem;
  width: 100%;
  max-width: 1100px;
  align-items: stretch;
}
.lobby-col-left, .lobby-col-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lobby-col-left > .lobby-panel,
.lobby-col-right > .lobby-panel {
  flex: 1;
}
.lobby-col-center {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (max-width: 1024px) {
  .lobby-main-layout {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  .lobby-col-center { order: -1; }
}
@media (max-width: 600px) {
  .lobby-main-layout { gap: 0.75rem; }
}
.lobby-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .lobby-bottom-panels { grid-template-columns: 1fr; }
}
.lobby-panel {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}

/* ===== QUESTS ===== */
.quests-section { padding: 0; }
.quests-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(124,92,255,0.1);
  border-bottom: 1px solid rgba(124,92,255,0.2);
}
.quests-icon { font-size: 1.2rem; }
.quests-title { font-weight: 700; color: #b88cff; font-size: 0.95rem; }
.quests-tabs {
  display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.quest-tab {
  flex: 1; padding: 0.5rem; background: none; border: none;
  color: var(--ff8-text-dim, #a0a0a0); font-size: 0.85rem;
  cursor: pointer; transition: all 0.2s;
}
.quest-tab.active {
  color: #b88cff; border-bottom: 2px solid #b88cff;
  background: rgba(124,92,255,0.05);
}
.quests-list { padding: 0.5rem; }
.quest-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.4rem; border-radius: 6px;
  transition: background 0.2s;
}
.quest-row:hover { background: rgba(255,255,255,0.03); }
.quest-icon { font-size: 1.2rem; flex-shrink: 0; }
.quest-info { flex: 1; min-width: 0; }
.quest-name { font-size: 0.85rem; color: #e0d8c0; margin-bottom: 3px; }
.quest-progress-bar {
  height: 4px; background: rgba(255,255,255,0.1);
  border-radius: 2px; overflow: hidden;
}
.quest-progress-fill {
  height: 100%; background: linear-gradient(90deg, #7c5cff, #b88cff);
  border-radius: 2px; transition: width 0.3s;
}
.quest-progress-text {
  font-size: 0.75rem; color: var(--ff8-text-dim); margin-top: 2px;
  display: flex; justify-content: space-between;
}
.quest-reward-text { color: #d4a843; }
.quest-claim-btn {
  background: linear-gradient(135deg, #7c5cff, #b88cff);
  color: #fff; border: none; padding: 4px 10px;
  border-radius: 4px; font-size: 0.75rem; cursor: pointer;
  font-weight: 600; flex-shrink: 0;
  animation: quest-claim-pulse 1.5s infinite;
}
@keyframes quest-claim-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,255,0.4); }
  50% { box-shadow: 0 0 8px 2px rgba(124,92,255,0.4); }
}
.quest-check { color: #4ade80; font-size: 1.1rem; flex-shrink: 0; }
.quest-claimed .quest-name { color: var(--ff8-text-dim); text-decoration: line-through; }
.quest-complete .quest-progress-fill { background: #4ade80; }

/* ===== FRIENDS ===== */
.friends-section { padding: 0; }
.friends-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(59,130,246,0.1);
  border-bottom: 1px solid rgba(59,130,246,0.2);
}
.friends-icon { font-size: 1.2rem; }
.friends-title { font-weight: 700; color: #60a5fa; font-size: 0.95rem; }
.friends-add {
  display: flex; gap: 0.4rem; padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.friends-add-input {
  flex: 1; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; padding: 5px 8px; color: #e0d8c0; font-size: 0.85rem;
}
.friends-add-btn {
  background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3);
  border-radius: 4px; width: 32px; height: 32px; font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: background 0.15s;
}
.friends-add-btn:hover { background: rgba(59,130,246,0.35); }
.friends-list { padding: 0.5rem 0.75rem; max-height: 220px; overflow-y: auto; }
.friend-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.friend-name {
  flex: 1; color: #e0d8c0; font-size: 0.85rem;
}
.friend-profile-link {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.friend-profile-link:hover { color: #60a5fa; text-decoration-color: #60a5fa; }
.friend-level { font-size: 0.75rem; color: var(--ff8-text-dim); }
.friend-actions { display: flex; gap: 4px; }
.friend-action-btn {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: var(--ff8-text-dim); border-radius: 3px; padding: 2px 6px;
  font-size: 0.75rem; cursor: pointer;
}
.friend-accept-btn { color: #4ade80; border-color: rgba(74,222,128,0.3); }
.friend-reject-btn { color: #f87171; border-color: rgba(248,113,113,0.3); }
.friends-pending-title {
  font-size: 0.8rem; color: #d4a843; margin-bottom: 0.3rem; font-weight: 600;
}
.friends-empty { text-align: center; color: var(--ff8-text-dim); font-size: 0.85rem; padding: 1rem 0; }

/* ===== SOCIAL PAGE (Mes Amis) ===== */
.social-page { max-width: 600px; margin: 0 auto; padding: 2rem 1rem; }
.social-section { margin-bottom: 1rem; padding: 1rem; }
.social-section-title { font-family: var(--ff8-font); font-size: 1rem; color: var(--ff8-highlight); margin: 0 0 0.75rem 0; }
.social-add-bar { display: flex; gap: 0.5rem; }
.social-add-input {
  flex: 1; padding: 0.5rem 0.75rem; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.3);
  color: #e0d8c0; font-size: 0.9rem;
}
.social-add-input:focus { border-color: var(--ff8-highlight); outline: none; }
.social-add-btn {
  padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid var(--ff8-highlight);
  background: rgba(232,232,112,0.1); color: var(--ff8-highlight);
  font-family: var(--ff8-font); font-size: 0.85rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: background 0.15s;
}
.social-add-btn:hover { background: rgba(232,232,112,0.2); }
.social-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.social-row:last-child { border-bottom: none; }
.social-name {
  flex: 1; color: #e0d8c0; font-size: 0.9rem;
}
.social-name.friend-profile-link {
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: color 0.15s;
}
.social-name.friend-profile-link:hover { color: #60a5fa; text-decoration: underline; }
.social-level { font-size: 0.8rem; color: var(--ff8-text-dim); }
.social-actions { display: flex; gap: 6px; }
.social-btn {
  padding: 4px 10px; border-radius: 4px; font-size: 0.8rem;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05);
  color: var(--ff8-text-dim); transition: all 0.15s;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
}
.social-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.social-btn-accept { border-color: rgba(34,197,94,0.4); color: #4ade80; }
.social-btn-accept:hover { background: rgba(34,197,94,0.2); }
.social-btn-reject { border-color: rgba(239,68,68,0.4); color: #f87171; }
.social-btn-reject:hover { background: rgba(239,68,68,0.2); }
.social-btn-unblock { border-color: rgba(59,130,246,0.4); color: #60a5fa; }
.social-btn-unblock:hover { background: rgba(59,130,246,0.2); }
.social-btn-block { color: #f87171; }
.social-btn-block:hover { background: rgba(239,68,68,0.15); }
.social-btn-remove { color: var(--ff8-text-dim); }
.social-empty { text-align: center; color: var(--ff8-text-dim); font-size: 0.85rem; padding: 0.75rem 0; }
.social-see-all {
  display: block; text-align: center; color: var(--ff8-highlight); font-size: 0.8rem;
  padding: 0.4rem 0; margin-top: 0.25rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: color 0.15s;
}
.social-see-all:hover { color: #fff; text-decoration: underline; }
.last-login-info { color: var(--ff8-text-dim); font-size: 0.85rem; }

/* Friend info column (name + last seen) */
.social-friend-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.social-last-seen { font-size: 0.7rem; color: var(--ff8-text-dim); }
.friend-info-col { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.friend-seen-text { font-size: 0.65rem; color: var(--ff8-text-dim); }

/* Challenge button */
.social-btn-challenge { font-size: 0.9rem; }
.social-btn-challenge:not(.social-btn-disabled):hover { background: rgba(232,232,112,0.2); border-color: var(--ff8-highlight); }
.social-btn-disabled, .friend-btn-disabled {
  opacity: 0.3; cursor: not-allowed !important;
  pointer-events: none;
}
.friend-challenge-btn { font-size: 0.8rem; }

/* Challenge Modal */
.challenge-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s;
}
.challenge-modal {
  padding: 2rem; text-align: center; min-width: 300px; max-width: 400px;
  animation: slideUp 0.3s;
}
.challenge-modal-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.challenge-modal-title { font-family: var(--ff8-font); font-size: 1.1rem; color: var(--ff8-highlight); margin-bottom: 0.5rem; }
.challenge-modal-from { font-size: 1rem; color: #e0d8c0; margin-bottom: 1.5rem; }
.challenge-modal-actions { display: flex; gap: 1rem; justify-content: center; }
.challenge-modal-btn {
  padding: 0.6rem 1.5rem; border-radius: 4px; font-family: var(--ff8-font); font-size: 0.9rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: all 0.15s; border: 1px solid;
}
.challenge-accept-btn { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); color: #4ade80; }
.challenge-accept-btn:hover { background: rgba(34,197,94,0.3); }
.challenge-decline-btn { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #f87171; }
.challenge-decline-btn:hover { background: rgba(239,68,68,0.3); }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.social-status {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.social-status-online { background: #4ade80; box-shadow: 0 0 4px #4ade80; }
.social-status-offline { background: #6b7280; }

/* ===== ANNOUNCEMENTS BANNER ===== */
.announcements-banner { margin: 0; z-index: 99; position: relative; }
.announce-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 6px 16px; font-size: 0.85rem; overflow: hidden;
}
.announce-info { background: rgba(59,130,246,0.15); color: #93c5fd; border-bottom: 1px solid rgba(59,130,246,0.3); }
.announce-warning { background: rgba(245,158,11,0.15); color: #fbbf24; border-bottom: 1px solid rgba(245,158,11,0.3); }
.announce-success { background: rgba(34,197,94,0.15); color: #4ade80; border-bottom: 1px solid rgba(34,197,94,0.3); }
.announce-marquee {
  flex: 1; overflow: hidden; white-space: nowrap; position: relative;
}
.announce-marquee-text {
  display: inline-block; white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
  padding-left: 100%;
}
.announce-marquee:hover .announce-marquee-text {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.announce-close {
  background: none; border: none; color: inherit; font-size: 1.2rem;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  opacity: 0.6; padding: 0 4px; flex-shrink: 0;
}
.announce-close:hover { opacity: 1; }
.announce-timer { font-size: 0.8em; opacity: 0.8; font-weight: 600; }
.gm-announce-expiry { color: var(--ff8-highlight); font-size: 0.8rem; }
.gm-announce-inactive { opacity: 0.4; }

/* ===== QUICK CHAT ===== */
.quick-chat-bar {
  display: flex; justify-content: center; gap: 6px;
  padding: 6px 0; margin-top: 4px;
}
.qc-btn {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%; width: 36px; height: 36px;
  font-size: 1.1rem; cursor: pointer; color: #e0d8c0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.qc-btn:hover { background: rgba(124,92,255,0.2); border-color: rgba(124,92,255,0.4); transform: scale(1.15); }
.qc-btn:disabled { opacity: 0.4; pointer-events: none; }

.qc-bubble {
  position: absolute; padding: 6px 12px; border-radius: 12px;
  font-size: 0.85rem; font-weight: 500;
  opacity: 0; transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 20; pointer-events: none;
  max-width: 200px; text-align: center;
}
.qc-bubble.visible { opacity: 1; transform: translateY(0); }
.qc-bubble.me {
  bottom: 40px; left: 10px;
  background: rgba(59,130,246,0.9); color: #fff;
}
.qc-bubble.opponent {
  bottom: 40px; right: 10px;
  background: rgba(239,68,68,0.9); color: #fff;
}

/* ===== MAINTENANCE OVERLAY ===== */
.maintenance-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.9); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
.maintenance-box {
  text-align: center; padding: 3rem 2rem;
  background: rgba(30,20,60,0.95); border: 2px solid rgba(124,92,255,0.3);
  border-radius: 16px; max-width: 420px;
}
.maintenance-icon { font-size: 4rem; margin-bottom: 1rem; }
.maintenance-box h2 { color: #b88cff; margin-bottom: 0.5rem; }
.maintenance-box p { color: #c0b890; font-size: 1.1rem; }
.maintenance-spinner {
  width: 32px; height: 32px; border: 3px solid rgba(124,92,255,0.2);
  border-top-color: #b88cff; border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 1.5rem auto 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== LOGIN HISTORY ===== */
.login-history-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.login-history-table th {
  text-align: left; color: var(--ff8-text-dim); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.login-history-table td {
  padding: 5px 8px; color: #e0d8c0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.login-device { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== BLOCKED PLAYERS ===== */
.blocked-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.blocked-name { color: #e0d8c0; font-size: 0.9rem; }
.blocked-unblock-btn {
  background: none; border: 1px solid rgba(248,113,113,0.3);
  color: #f87171; border-radius: 4px; padding: 3px 8px;
  font-size: 0.8rem; cursor: pointer;
}
.blocked-empty { text-align: center; color: var(--ff8-text-dim); padding: 0.5rem; font-size: 0.85rem; }

/* ===== GM ANNOUNCEMENTS TAB ===== */
.gm-announce-section { padding: 1rem; }
.gm-announce-textarea {
  width: 100%; min-height: 60px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  color: #e0d8c0; padding: 8px; font-size: 0.9rem; resize: vertical;
}
.gm-announce-form-row {
  display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center;
}
.gm-announce-select {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; color: #e0d8c0; padding: 5px 8px;
}
.gm-announce-list { margin-top: 1rem; }
.gm-announce-item {
  padding: 0.6rem 0.8rem; border-radius: 6px; margin-bottom: 0.5rem;
}
.gm-announce-info { background: rgba(59,130,246,0.1); border-left: 3px solid #3b82f6; }
.gm-announce-warning { background: rgba(245,158,11,0.1); border-left: 3px solid #f59e0b; }
.gm-announce-success { background: rgba(34,197,94,0.1); border-left: 3px solid #22c55e; }
.gm-announce-text { color: #e0d8c0; font-size: 0.9rem; }
.gm-announce-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.4rem; font-size: 0.8rem; color: var(--ff8-text-dim);
}
.gm-announce-delete {
  background: none; border: none; color: #f87171; cursor: pointer; font-size: 0.8rem;
}

/* ===== GM MAINTENANCE TAB ===== */
.gm-maintenance-section { padding: 1rem; }
.gm-maintenance-status {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem; background: rgba(0,0,0,0.2); border-radius: 8px;
  margin-bottom: 1rem;
}
.gm-maintenance-indicator {
  font-size: 1.2rem; font-weight: 700;
}
.gm-maintenance-indicator.active { color: #f87171; }
.gm-maintenance-msg { color: var(--ff8-text-dim); font-size: 0.9rem; }
.gm-maintenance-form { margin-top: 1rem; }
.gm-maintenance-actions { margin-top: 0.8rem; }

/* ===== Tutorial ===== */
.tutorial-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s;
}
.tutorial-modal {
  background: linear-gradient(135deg, #1a2a5e 0%, #0e1a40 100%);
  border: 1px solid rgba(232,232,112,0.2); border-radius: 16px;
  padding: 2.5rem 2rem; text-align: center; max-width: 500px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: slideUp 0.4s ease-out;
}
.tutorial-step-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.tutorial-step-title {
  font-family: var(--ff8-font); font-size: 1.3rem; color: var(--ff8-highlight);
  margin-bottom: 0.75rem;
}
.tutorial-step-desc {
  color: #c0b890; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem;
}
.tutorial-progress {
  display: flex; justify-content: center; gap: 8px; margin-bottom: 1.5rem;
}
.tutorial-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.15); transition: all 0.3s;
}
.tutorial-dot.active { background: var(--ff8-highlight); transform: scale(1.3); }
.tutorial-dot.done { background: #4ade80; }
.tutorial-actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.tutorial-btn {
  padding: 0.6rem 1.5rem; border-radius: 6px; font-family: var(--ff8-font);
  font-size: 0.9rem; border: 1px solid; transition: all 0.15s;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
}
.tutorial-btn-next { background: rgba(232,232,112,0.15); border-color: rgba(232,232,112,0.4); color: var(--ff8-highlight); }
.tutorial-btn-next:hover { background: rgba(232,232,112,0.3); }
.tutorial-btn-back { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); color: var(--ff8-text-dim); }
.tutorial-btn-back:hover { background: rgba(255,255,255,0.1); }
.tutorial-btn-skip { background: none; border-color: rgba(255,255,255,0.1); color: var(--ff8-text-dim); font-size: 0.8rem; }
.tutorial-btn-skip:hover { color: #f87171; border-color: rgba(239,68,68,0.3); }

/* Tutorial card demo */
.tutorial-card-demo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tutorial-card-mock {
  width: 100px; height: 120px; border-radius: 8px; position: relative;
  background: linear-gradient(135deg, #2a4a8a, #1a3068); border: 2px solid rgba(232,232,112,0.3);
  display: flex; align-items: center; justify-content: center;
}
.tutorial-card-val {
  position: absolute; font-family: var(--ff8-font); font-size: 0.9rem; color: #fff; font-weight: 700;
  background: rgba(0,0,0,0.4); width: 22px; height: 22px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.tutorial-val-top { top: 4px; left: 50%; transform: translateX(-50%); }
.tutorial-val-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
.tutorial-val-left { left: 4px; top: 50%; transform: translateY(-50%); }
.tutorial-val-right { right: 4px; top: 50%; transform: translateY(-50%); }
.tutorial-card-center { font-size: 2rem; }
.tutorial-card-labels { text-align: center; font-size: 0.75rem; color: var(--ff8-text-dim); }
.tutorial-label { display: block; }

/* Tutorial board demo */
.tutorial-board-demo { margin-bottom: 1rem; }
.tutorial-mini-board {
  display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; justify-content: center; margin-bottom: 0.5rem;
}
.tutorial-mini-cell {
  width: 40px; height: 40px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.tutorial-board-info { display: flex; justify-content: center; align-items: center; gap: 1rem; font-size: 0.85rem; }
.tutorial-blue-label { color: #60a5fa; }
.tutorial-red-label { color: #f87171; }
.tutorial-vs { color: var(--ff8-text-dim); font-family: var(--ff8-font); }

/* Tutorial capture demo */
.tutorial-capture-demo { margin-bottom: 1rem; }
.tutorial-capture-grid { display: flex; justify-content: center; gap: 4px; margin-bottom: 0.5rem; }
.tutorial-capture-card {
  width: 60px; height: 50px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff8-font); font-size: 0.9rem; gap: 4px;
}
.tutorial-card-blue { background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.4); color: #60a5fa; }
.tutorial-card-red { background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.4); color: #f87171; }
.tutorial-captured { animation: tutorialFlash 1s ease-in-out infinite; }
@keyframes tutorialFlash { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.tutorial-capture-result { font-family: var(--ff8-font); font-size: 0.85rem; color: #4ade80; }
.tutorial-cap-val { font-weight: 700; font-size: 1.1rem; }

/* Tutorial mini cards (real game cards) */
.tuto-minicard {
  width: 65px; height: 80px; border-radius: 5px; position: relative;
  overflow: hidden; flex-shrink: 0;
}
.tuto-minicard-blue { border: 2px solid rgba(59,130,246,0.5); box-shadow: 0 0 6px rgba(59,130,246,0.3); }
.tuto-minicard-red { border: 2px solid rgba(239,68,68,0.5); box-shadow: 0 0 6px rgba(239,68,68,0.3); }
.tuto-minicard-img { width: 100%; height: 100%; object-fit: cover; }
.tuto-minicard-vals {
  position: absolute; inset: 0; display: grid; place-items: center;
  grid-template-areas: ". t ." "l . r" ". b .";
  grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  pointer-events: none;
}
.tuto-mv {
  font-family: var(--ff8-font); font-size: 0.6rem; font-weight: 700; color: #fff;
  background: rgba(0,0,0,0.5); width: 14px; height: 14px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.tuto-mv-t { grid-area: t; } .tuto-mv-l { grid-area: l; } .tuto-mv-r { grid-area: r; } .tuto-mv-b { grid-area: b; }
.tutorial-cap-arrow-big {
  font-family: var(--ff8-font); font-size: 0.8rem; color: var(--ff8-highlight);
  display: flex; align-items: center; padding: 0 0.3rem;
}

/* Tutorial mini board with real cards */
.tutorial-mini-board .tuto-minicard { width: 36px; height: 44px; }
.tutorial-mini-board .tuto-mv { font-size: 0.4rem; width: 10px; height: 10px; }

/* Tutorial elements demo */
.tutorial-elements-demo { margin-bottom: 1rem; }
.tutorial-elem-row { display: flex; justify-content: center; gap: 0.5rem; font-size: 1.3rem; margin-bottom: 0.5rem; }
.tutorial-elem-example { display: flex; justify-content: center; gap: 1.5rem; font-size: 0.85rem; }
.tutorial-elem-match { color: #4ade80; }
.tutorial-elem-mismatch { color: #f87171; }

/* Tutorial rule demos (Same/Plus) */
.tutorial-rule-demo { margin-bottom: 1rem; }
.tutorial-rule-grid { display: flex; justify-content: center; gap: 4px; margin-bottom: 0.5rem; }
.tutorial-rule-cell {
  width: 70px; height: 50px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff8-font); font-size: 0.85rem; gap: 2px;
}
.tutorial-rule-cell span { font-weight: 700; font-size: 1rem; }
.tutorial-cell-blue { background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.4); color: #60a5fa; }
.tutorial-cell-new { background: rgba(232,232,112,0.15); border: 2px solid rgba(232,232,112,0.4); color: var(--ff8-highlight); }
.tutorial-rule-result { font-family: var(--ff8-font); font-size: 0.75rem; color: #4ade80; text-align: center; line-height: 1.4; }
.tuto-rule-arrow {
  font-family: var(--ff8-font); font-size: 0.6rem; color: var(--ff8-highlight);
  display: flex; align-items: center; padding: 0 2px; white-space: nowrap;
}

/* Tutorial step desc formatting */
.tutorial-step-desc { white-space: pre-line; }

/* Tutorial in-game hints */
.tuto-hint {
  position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  background: rgba(232,232,112,0.9); color: #0e1a40; font-size: 0.65rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; z-index: 20;
  pointer-events: none; font-family: var(--ff8-font);
}
.tuto-hint-pulse { animation: tutoPulse 1.5s ease-in-out infinite; }
@keyframes tutoPulse { 0%,100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: 0.7; transform: translateX(-50%) scale(1.05); } }

/* ===== Elemental Modifier Badge ===== */
.elem-mod {
  position: absolute; top: 2px; right: 2px; z-index: 5;
  font-family: var(--ff8-font); font-size: 0.55rem; font-weight: 700;
  padding: 1px 4px; border-radius: 3px;
  pointer-events: none; line-height: 1;
}
.elem-mod-plus { background: rgba(34,197,94,0.8); color: #fff; }
.elem-mod-minus { background: rgba(239,68,68,0.8); color: #fff; }

/* ===== Capture Reason Labels ===== */
.capture-reason-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: var(--ff8-font); font-size: 1.4rem; font-weight: 700;
  padding: 0.3rem 1rem; border-radius: 6px;
  pointer-events: none; z-index: 50;
  opacity: 0; transition: all 0.35s ease-out;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  white-space: nowrap;
}
.capture-reason-same { color: #4ade80; background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); }
.capture-reason-plus { color: #60a5fa; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4); }
.capture-reason-combo { color: #f59e0b; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.4); }
.capture-reason-show {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.capture-reason-hide {
  opacity: 0; transform: translate(-50%, -80%) scale(1.2);
  transition: all 0.4s ease-in;
}

/* Warning Modal */
.warning-modal-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s;
}
.warning-modal {
  background: linear-gradient(135deg, #3a1a1a 0%, #2a0a0a 100%);
  border: 2px solid rgba(245,158,11,0.5); border-radius: 16px;
  padding: 2.5rem 2rem; text-align: center; max-width: 450px; width: 90%;
  box-shadow: 0 0 40px rgba(245,158,11,0.2);
  animation: slideUp 0.4s ease-out;
}
.warning-modal-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.warning-modal-title {
  font-family: var(--ff8-font); font-size: 1.3rem; color: #fbbf24; margin-bottom: 0.75rem;
}
.warning-modal-desc { color: #e0d8c0; font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.5; }
.warning-modal-reason {
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem;
  color: #fbbf24; font-size: 0.95rem; font-style: italic;
}
.warning-modal-info { color: #f87171; font-size: 0.8rem; margin-bottom: 1.5rem; line-height: 1.4; }
.warning-modal-btn {
  padding: 0.7rem 2rem; border-radius: 6px; font-family: var(--ff8-font); font-size: 0.95rem;
  background: rgba(245,158,11,0.2); border: 1px solid rgba(245,158,11,0.5); color: #fbbf24;
  cursor: url('/img/cursor-pointer.png') 6 0, pointer !important;
  transition: all 0.15s;
}
.warning-modal-btn:hover { background: rgba(245,158,11,0.35); }

/* GM warn/tempban buttons */
.gm-btn-warn { color: #fbbf24 !important; border-color: rgba(251,191,36,0.3) !important; }
.gm-dashboard-refresh-info { text-align: center; color: var(--ff8-text-dim); font-size: 0.7rem; margin-top: 0.5rem; opacity: 0.6; }
.gm-stat-online .gm-stat-value { color: #4ade80; }
.gm-stat-totalmatches .gm-stat-value { color: #93c5fd; }

/* ===== COMPREHENSIVE RESPONSIVE ===== */

/* --- Tablet (≤1024px) --- */
@media (max-width: 1024px) {
  .lobby-mat { padding: 1rem 1rem 1.5rem; }
  .play-buttons { flex-direction: column; }
  .play-card { min-height: auto; }
  .lobby-stats-section { max-width: 100%; }

  /* Social page */
  .social-page { padding: 1.5rem 0.75rem; }

  /* GM dashboard */
  .gm-dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Auction table */
  .auction-list { overflow-x: auto; }

  /* Support */
  .support-page { padding: 0; }
  .support-msg { max-width: 90%; }
}

/* --- Mobile (≤768px) --- */
@media (max-width: 768px) {
  /* Lobby */
  .lobby-logo-img { max-width: 200px; }
  .lobby-mat { padding: 0.75rem 0.5rem 1rem; }
  .play-section-title { font-size: 0.9rem; }
  .play-card-icon svg { width: 28px; height: 28px; }
  .play-card-title { font-size: 0.85rem; }
  .play-card-desc { font-size: 0.65rem; }
  .lobby-breakdown { font-size: 0.75rem; }
  .breakdown-label { font-size: 0.7rem; }

  /* Views padding */
  .view { padding: 0; }

  /* Social */
  .social-page { padding: 1rem 0.5rem; max-width: 100%; }
  .social-row { gap: 0.5rem; font-size: 0.85rem; }

  /* Account/Settings */
  .account-page, .settings-page { padding: 1rem 0.5rem; }

  /* Shop — compact packs on mobile */
  .shop-header { flex-direction: column; text-align: center; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
  .pack-card { padding: 0.7rem 0.5rem; border-radius: 8px; }
  .pack-card .pack-name { font-size: 0.8rem; }
  .pack-card .pack-desc { font-size: 0.65rem; }
  .pack-card .pack-price { font-size: 0.85rem; }
  .pack-card .pack-img { max-height: 60px; }

  /* GM */
  .gm-dashboard-grid { grid-template-columns: 1fr 1fr !important; }
  .gm-tab-buttons { flex-wrap: wrap; gap: 4px; }
  .gm-tab-buttons button { font-size: 0.7rem; padding: 6px 8px; }
  .gm-ticket-thread { max-height: 300px; }
  .gm-announce-form-row { flex-wrap: wrap; gap: 0.5rem; }
  .gm-announce-select { flex: 1; }

  /* Tables scrollable */
  .gm-table-wrapper, .gm-players-table-wrap, .history-table-wrapper {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .gm-table, .history-table { min-width: 600px; }

  /* Quests */
  .quest-row { gap: 0.4rem; }
  .quest-reward-text { font-size: 0.65rem; }

  /* Friends panel */
  .friends-list { max-height: 180px; }

  /* Achievements */
  .achievements-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }
}

/* --- Small Mobile (≤480px) --- */
@media (max-width: 480px) {
  /* Navbar compact */
  .navbar { padding: 0.5rem; gap: 0.4rem; }
  .navbar-brand { font-size: 0.9rem; }
  .nav-btn { font-size: 0.65rem; padding: 4px 6px; }
  .nav-badges { gap: 0.3rem; font-size: 0.75rem; }

  /* Lobby */
  .lobby-logo-img { max-width: 150px; }
  .lobby-seed-rank { font-size: 0.75rem; }
  .lobby-stats-grid { flex-direction: column; }
  .lobby-stat-crystal { padding: 0.5rem; }
  .crystal-value { font-size: 1rem; }
  .crystal-label { font-size: 0.55rem; }
  .play-card { padding: 0.6rem; }

  /* Game */
  .board { width: 240px; height: 240px; }
  .board-cell .tt-val { font-size: 0.55rem; width: 10px; height: 10px; }
  .side-hand .tt-card, .side-hand .card-back { width: 46px; height: 46px; }
  .game-mat { min-height: 400px; padding: 0.5rem; }
  .game-info-bar { font-size: 0.7rem; }

  /* Collection */
  .album-cards-grid { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 0.3rem; }
  .page-dot { width: 20px; height: 20px; font-size: 0.5rem; }

  /* Social */
  .social-add-bar { flex-direction: column; }
  .social-btn { padding: 3px 6px; font-size: 0.7rem; }

  /* Challenge modal */
  .challenge-modal { min-width: auto; width: 90vw; padding: 1.5rem; }

  /* Support */
  .support-msg { max-width: 95%; }
  .support-reply-textarea { font-size: 0.85rem; }

  /* Deck select */
  .deck-slot { width: 55px; height: 65px; }
}

/* ====================================================
   MOBILE APP LAYOUT — Bottom Navigation Bar
   ==================================================== */
@media (max-width: 768px) {
  /* --- Restructure navbar: hide top nav items, show mobile bottom bar --- */
  .navbar {
    padding: 0.4rem 0.8rem;
    flex-wrap: nowrap;
  }

  .navbar-nav {
    display: none !important; /* Hide top nav links on mobile */
  }

  .navbar-brand {
    font-size: 1rem;
  }

  /* User info bar compact */
  .user-info {
    gap: 0.3rem;
    font-size: 0.8rem;
  }

}