/* ─── Screen Manager Styles ─────────────────────────────────────────── */

/* Expose safe-area insets as custom properties so canvas-based UI
   (CShotPowerBar, etc.) can read them via getComputedStyle. */
:root {
  --sai-left: env(safe-area-inset-left, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
  --sai-top: env(safe-area-inset-top, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
}

/* Base screen layer — sits above the fixed indigo bg, below canvas */
/* Safe-area insets intentionally NOT applied here — we want the dark panel to
   fill edge-to-edge. Interactive children (headers, footers, nav buttons) add
   their own env(safe-area-inset-*) so they stay clear of notch / home indicator. */
.screen-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 50;
  overflow: hidden;
}

/* Safe-area gap fix: fill notch/home-indicator strips with matching background */
#screen-table-browser,
#screen-shop,
#screen-profile,
#screen-leagues {
  background: rgba(4, 18, 9, 0.78);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

/* ─── Spinner ───────────────────────────────────────────────────────── */

.spinner {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(255, 255, 255, 0.15);
  border-top-color: #00bfa5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ─── Fade-in animation ─────────────────────────────────────────────── */

.screen-fade-in {
  animation: fadeIn 0.4s ease-out both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Slide-in-down (logo) ──────────────────────────────────────────── */

.slide-in-down {
  animation: slideInDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* ─── Scale pop (buttons) ───────────────────────────────────────────── */

.pop-in {
  animation: popIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Staggered delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* ─── Table Browser layout (landscape-first) ────────────────────────── */

.browser-layout {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: rgba(4, 18, 9, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(100, 255, 180, 0.10);
}

/* Header row */
.browser-header {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding:
    calc(0.4rem + env(safe-area-inset-top, 0px))
    calc(0.75rem + env(safe-area-inset-right, 0px))
    0.4rem
    calc(0.75rem + env(safe-area-inset-left, 0px));
  background: rgba(0, 35, 16, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(100, 255, 180, 0.12);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-height: 0;
}
.browser-header > * + * { margin-left: 0.5rem; }

/* Cards area */
.browser-cards-area {
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
  height: 0; /* iOS Safari: forces flex child to shrink properly */
  position: relative;
  overflow: hidden;
}

.browser-empty {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

/* ─── League cards grid ─────────────────────────────────────────────── */

.league-grid-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
}

.league-select-hint {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(139,92,246,0.7), 0 2px 6px rgba(0,0,0,0.5);
  margin: 0 0 1.4rem 0;
  pointer-events: none;
}

.league-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  /* gap fallback for iOS < 14.5 */
  margin: -0.3rem;
}
.league-grid > * {
  margin: 0.3rem;
}

.league-card {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  -webkit-flex-basis: calc(20% - 0.6rem);
  flex-basis: calc(20% - 0.6rem);
  min-width: 80px;
  max-width: 130px;
  border-radius: 14px;
  padding: 0.7rem 0.5rem 0.55rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(100, 255, 180, 0.10);
  background: rgba(10, 32, 18, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.league-card > * + * { margin-top: 0.3rem; }
.league-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--lc-color, #22c55e);
  opacity: 0.08;
  transition: opacity 0.15s;
}
.league-card:hover::before, .league-card:active::before { opacity: 0.18; }
.league-card:hover {
  transform: translateY(-2px);
  border-color: var(--lc-color, #22c55e);
  box-shadow: 0 0 16px -4px var(--lc-color, #22c55e);
}
.league-card:active { transform: translateY(0); }

.league-card-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px var(--lc-color, #22c55e));
  transition: filter 0.15s, transform 0.15s;
}
.league-card:hover .league-card-img {
  filter: drop-shadow(0 4px 14px var(--lc-color, #22c55e));
  transform: scale(1.06);
}

.league-card-name {
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.1rem;
}
.league-card-range {
  color: var(--lc-color, #22c55e);
  font-size: 0.58rem;
  font-weight: 600;
  opacity: 0.9;
}
.league-card-count {
  font-size: 0.52rem;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 0.05rem 0.45rem;
}
.league-card-count.open {
  color: #34d399;
  background: rgba(52,211,153,0.12);
}

/* Taller screens: bigger image */
@media (min-height: 480px) {
  .league-card { padding: 0.85rem 0.6rem 0.65rem; max-width: 150px; }
  .league-card-img { width: 68px; height: 68px; }
  .league-card-name { font-size: 0.68rem; }
  .league-card-range { font-size: 0.62rem; }
  .league-card-count { font-size: 0.56rem; }
}

/* Very short landscape: keep cards on a single row and scroll horizontally
   only if they overflow (safe center keeps them centered when they fit).
   Default card sizing (max 130px + 54×54 img) is preserved so iPhone 8
   (viewport reports 355px due to the iOS PWA bug) matches iPhone 14 Pro. */
@media (max-height: 360px) {
  .league-grid { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; -webkit-justify-content: center; justify-content: safe center; }
}

/* ─── League detail view ─────────────────────────────────────────────── */

.league-detail-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}


/* The table carousel inside the detail view needs explicit height */
.league-detail-wrap .table-carousel {
  -webkit-flex: 1;
  flex: 1;
  height: auto;
}
.league-detail-wrap .browser-empty {
  position: static;
  -webkit-flex: 1;
  flex: 1;
}

/* Footer row */
.browser-footer {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding:
    0.4rem
    calc(0.75rem + env(safe-area-inset-right, 0px))
    calc(0.4rem + env(safe-area-inset-bottom, 0px))
    calc(0.75rem + env(safe-area-inset-left, 0px));
  background: rgba(0, 35, 16, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(100, 255, 180, 0.12);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.browser-footer > * + * { margin-left: 0.75rem; }

/* Header icon button */
.browser-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.browser-icon-btn:active { background: rgba(255,255,255,0.2); }

/* Filter tabs */
.filter-tab {
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.filter-tab.active,
.filter-tab[style*="active"] {
  background: #00a88f;
  color: white;
}

/* Private code input */
.browser-code-input {
  width: 7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 0.75rem;
  font-family: monospace;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s;
}
.browser-code-input:focus { border-color: #00bfa5; }
.browser-code-input::placeholder { color: rgba(255,255,255,0.3); font-size: 0.65rem; }

/* Join button */
.browser-join-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, #00bfa5, #006d5b);
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.browser-join-btn:active { opacity: 0.8; }

/* Create table button */
.browser-create-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 1rem;
  border-radius: 0.6rem;
  background: linear-gradient(to bottom, #00bfa5, #006d5b);
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,140,118,0.40);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.browser-create-btn:active { opacity: 0.8; }

/* Small chip icon for header */
.chip-icon-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #FFE44D 0%, #FFD700 50%, #B8860B 100%);
  border-radius: 50%;
  border: 1.5px solid #DAA520;
  flex-shrink: 0;
}

/* ─── Table carousel ────────────────────────────────────────────────── */

.table-carousel {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  height: 100%;
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,191,165,0.3) transparent;
}
.table-card + .table-card { margin-left: 0.5rem; }

.table-carousel::-webkit-scrollbar { height: 3px; }
.table-carousel::-webkit-scrollbar-track { background: transparent; }
.table-carousel::-webkit-scrollbar-thumb {
  background: rgba(0,191,165,0.3);
  border-radius: 2px;
}

/* ─── Table card — horizontal layout ────────────────────────────────── */

.table-card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem 0.65rem;
  background: rgba(10, 32, 18, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 255, 180, 0.10);
  border-radius: 0.75rem;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.table-card:not(.table-card-full):hover {
  border-color: rgba(0,191,165,0.5);
}
.table-card.table-card-full {
  opacity: 0.55;
}

/* Matchup row: [avatar name] [VS / wager] [avatar name] */
.card-matchup {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.card-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}
.card-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,191,165,0.18);
  border: 2px solid rgba(0,191,165,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 900;
  color: #64ffda;
  flex-shrink: 0;
  line-height: 1;
  box-sizing: border-box;
}
.card-avatar-empty {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.3);
}
.card-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Center column: VS label + wager below */
.card-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.card-vs {
  font-size: 0.58rem;
  font-weight: 900;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}
.card-wager-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.card-wager {
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.card-name {
  font-size: 0.6rem;
  font-weight: 700;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.card-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.card-badge {
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.card-badge-system { color: rgba(0,191,165,0.8); }
.card-badge-foul   { color: #fbbf24; }

.card-btn {
  width: 100%;
  padding: 0.38rem 0;
  border-radius: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  display: block;
}
.card-btn:active { opacity: 0.75; }
.card-btn-join {
  background: linear-gradient(to bottom, #00bfa5, #006d5b);
  color: white;
}
.card-btn-full {
  background: rgba(127,29,29,0.4);
  color: #f87171;
  cursor: default;
}

.card-btn-watch {
  background: linear-gradient(135deg, rgba(99,102,241,0.5) 0%, rgba(67,56,202,0.5) 100%);
  color: #c7d2fe;
  border: 1px solid rgba(99,102,241,0.4);
  cursor: pointer;
}
.card-btn-watch:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.7) 0%, rgba(67,56,202,0.7) 100%);
}

@media (min-width: 768px) {
  .table-card  { width: 230px; }
  .card-avatar { width: 38px; height: 38px; font-size: 0.95rem; }
  .card-name   { font-size: 0.65rem; }
  .card-wager  { font-size: 0.75rem; }
  .card-btn    { font-size: 0.75rem; padding: 0.45rem 0; }
}

/* ─── Navbar shop button ─────────────────────────────────────────────── */

.btn-nav-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.4rem;
  background: linear-gradient(to bottom, #C8960E, #8B6508);
  color: white;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.btn-nav-shop:active { opacity: 0.7; }

/* ─── Button hover/active effects ───────────────────────────────────── */

.btn-game {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Minimum touch target — enforced via min-height/min-width */
  min-height: 44px;
  min-width: 44px;
  /* Prevent text selection on rapid taps */
  -webkit-user-select: none;
  user-select: none;
  /* Remove tap highlight on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* Only apply hover scale on pointer devices (not touch) */
@media (hover: hover) and (pointer: fine) {
  .btn-game:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0,191,165,0.3);
  }
}

.btn-game:active {
  transform: scale(0.97);
}

/* ─── Create Table modal ────────────────────────────────────────────── */

.create-modal-card {
  background: rgba(4, 18, 9, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(0, 191, 165, 0.22);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  width: 100%;
  max-width: 340px;
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  margin: 0.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modalSlideUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}

.modal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.preset-btn {
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.preset-btn.active {
  background: #003d35;
  color: #64ffda;
  border-color: #00a88f;
}

/* ─── Toggle switch (JS-driven, no checkbox) ────────────────────────── */
.toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-track.active {
  background: #00a88f;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.toggle-track.active .toggle-thumb {
  transform: translateX(16px);
}

/* Compact on very short landscape screens */
@media (max-height: 420px) {
  .create-modal-card {
    padding: 0.6rem 1rem;
    max-width: 320px;
  }
  .create-modal-card h3 { font-size: 0.75rem; }
}

/* ─── Modal backdrop ────────────────────────────────────────────────── */

.modal-backdrop {
  background: rgba(0, 0, 0, 0.75);
  animation: fadeIn 0.25s ease-out both;
  /* Allow scrolling if modal is taller than viewport */
  overflow-y: auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.modal-card {
  background: rgba(4, 18, 9, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(100, 255, 180, 0.13);
  animation: modalSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Prevent modal from overflowing viewport without scroll */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Wager display pulse ───────────────────────────────────────────── */

.wager-change {
  animation: wagerPulse 0.2s ease-out;
}

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

/* ─── Waiting overlay ───────────────────────────────────────────────── */

.waiting-overlay {
  background: rgba(0, 0, 0, 0.8);
  animation: fadeIn 0.3s ease-out both;
}

/* ─── Gold coin icon (CSS-only) ─────────────────────────────────────── */

.chip-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #FFE44D 0%, #FFD700 50%, #B8860B 100%);
  border-radius: 50%;
  border: 2px solid #DAA520;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Landscape mobile (short viewports)
   The game forces landscape, so height is the tight dimension.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Short landscape: height <= 500px ──────────────────────────────── */
@media (max-height: 500px) {
  .screen-layer {
    overflow-y: auto;
  }

  /* Smaller spinner on compact screens */
  .spinner {
    width: 40px;
    height: 40px;
    border-width: 4px;
  }
}

/* ─── Very short landscape: height <= 400px (most phones) ───────────── */
@media (max-height: 400px) {
  /* Main Menu — compress everything vertically */
  #screen-menu > div {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    gap: 0.25rem;
  }

  #screen-menu .slide-in-down {
    margin-top: 0;
  }

  /* Smaller logo */
  #screen-menu .slide-in-down img {
    height: 3.5rem;  /* 56px instead of 112px */
  }

  /* Compact main buttons */
  #screen-menu #btn-singleplayer,
  #screen-menu #btn-online {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    min-width: 140px;
  }

  #screen-menu #btn-singleplayer i,
  #screen-menu #btn-online i {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Compact bottom bar */
  #screen-menu #menu-username {
    font-size: 0.8rem;
  }

  #screen-menu #btn-shop {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  #screen-menu #btn-audio,
  #screen-menu #btn-lang,
  #screen-menu #btn-fullscreen {
    padding: 0.35rem;
  }

  /* Difficulty — compact buttons */
  #screen-difficulty h2 {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  #screen-difficulty .btn-difficulty {
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
  }

  #screen-difficulty #btn-diff-back {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.5rem;
  }

  /* Difficulty container gap */
  #screen-difficulty > div {
    gap: 0.25rem;
  }

  #screen-difficulty > div > div:last-child {
    gap: 0.5rem;
  }

  /* Table Browser — compact header */
  #screen-table-browser .flex.items-center.justify-between {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  #screen-table-browser h2 {
    font-size: 1.1rem;
  }

  /* Compact create button */
  #screen-table-browser #btn-create-table {
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
  }

  #screen-table-browser .flex.justify-center.pb-6 {
    padding-bottom: 0.5rem;
  }


  /* Lobby — compact */
  #screen-lobby > div {
    gap: 0.75rem;
  }

  #screen-lobby #lobby-status {
    font-size: 1rem;
  }

  /* Modals — compact padding */
  .modal-card {
    padding: 1rem 1.25rem;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  /* Create table modal — compact */
  #modal-create-table h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  #modal-create-table #wager-display {
    font-size: 2rem !important;
  }

  #modal-create-table #btn-wager-minus,
  #modal-create-table #btn-wager-plus {
    width: 2.5rem;
    height: 2.5rem;
  }

  #modal-create-table .flex.justify-center.gap-2 {
    margin-bottom: 0.75rem;
  }

  #modal-create-table .preset-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

}

/* ─── Extremely short: height <= 320px (e.g. iPhone SE landscape) ──── */
@media (max-height: 320px) {
  /* Menu: go horizontal layout to save vertical space */
  #screen-menu > div {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
  }

  #screen-menu .slide-in-down {
    order: 1;
  }

  #screen-menu .slide-in-down img {
    height: 2.5rem;
  }

  /* Buttons row — center in the available space */
  #screen-menu > div > div:nth-child(2) {
    order: 2;
    flex-direction: row !important;
    gap: 0.5rem;
  }

  #screen-menu > div > div:last-child {
    order: 3;
    width: 100%;
  }

  /* Difficulty: horizontal layout */
  #screen-difficulty > div > div:last-child {
    flex-direction: row !important;
    max-width: 100%;
    gap: 0.5rem;
  }

  #screen-difficulty .btn-difficulty {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    flex: 1;
    min-width: 0;
  }

  #screen-difficulty .btn-difficulty i {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Shop: single row for packages */
  #modal-shop .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  #modal-shop .shop-pkg span.text-xs {
    display: none; /* hide "chips" label */
  }
}

/* ─── Narrow width (portrait-ish or very narrow landscape) ──────────── */
@media (max-width: 480px) {
  /* Menu buttons stack vertically */
  #screen-menu > div > div:nth-child(2) {
    flex-direction: column;
    gap: 0.5rem;
  }

  #screen-menu #btn-singleplayer,
  #screen-menu #btn-online {
    min-width: 0;
    width: 100%;
    max-width: 280px;
  }

  /* Bottom bar: wrap controls below user info */
  #screen-menu > div > div:last-child {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  /* Table browser title smaller */
  #screen-table-browser h2 {
    font-size: 1rem;
  }

  /* Browser hide username, show only chips */
  #screen-table-browser #browser-username {
    display: none !important;
  }

  /* Modal cards full width */
  .modal-card {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  /* Combo compact fix for narrow phones (iPhone SE et al):
     1. Shrink JUGAR so it uses less horizontal space
     2. Shrink bottom cards + their contents so they don't bleed into JUGAR
     Both use #screen-menu prefix to beat base rules lower in the file. */

  /* Smaller JUGAR */
  #screen-menu .btn-play-main {
    gap: 6px;
    padding: 12px 18px 12px 14px;
    font-size: 12px;
    letter-spacing: 3px;
  }
  #screen-menu .btn-play-main .btn-play-icon i,
  #screen-menu .btn-play-main .btn-play-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* Compact bottom cards */
  #screen-menu .menu-card-left,
  #screen-menu .menu-card-right {
    box-sizing: border-box;
    max-width: 32vw;
    height: clamp(60px, 11vh, 90px);
    gap: 6px;
    padding: 0 8px;
    overflow: hidden;
  }
  #screen-menu .menu-avatar-btn {
    width: 32px;
    height: 32px;
  }
  #screen-menu .menu-player-name {
    font-size: 10px;
    max-width: 100%;
    letter-spacing: 0.2px;
  }
  #screen-menu .menu-player-info {
    gap: 2px;
    min-width: 0;
  }
  #screen-menu .menu-currency-row {
    gap: 6px;
  }
  #screen-menu .menu-currency-amount {
    font-size: 10px;
  }
  #screen-menu .menu-currency-icon {
    width: 14px;
    height: 14px;
  }
  #screen-menu .menu-card-right .menu-icon-btn {
    width: 28px;
    height: 28px;
  }
}

/* ─── Wide screens (desktop / tablet landscape) ─────────────────────── */
@media (min-width: 1024px) and (min-height: 600px) {
  #screen-menu .slide-in-down img {
    height: 10rem;
  }

  #screen-menu #btn-singleplayer,
  #screen-menu #btn-online {
    padding: 1.5rem 3rem;
    font-size: 1.5rem;
    min-width: 260px;
  }
}

/* ─── Tutorial step transitions ────────────────────────────────────── */

.tut-slide-in {
  animation: tutSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* Tutorial in-game banner — escalado 30% más grande pa que sea más leíble.
   Michael 2026-04-30. Override de tut-slide-in scopado al banner para que
   el final state mantenga el scale en lugar de volver a 1. */
#tut-game-banner {
  transform-origin: center bottom;
  transform: scale(1.3);
}
#tut-game-banner.tut-slide-in {
  animation: tutGameBannerSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tutGameBannerSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(1.3); }
  to   { opacity: 1; transform: translateY(0) scale(1.3); }
}

/* ─── Tutorial finger hints ─────────────────────────────────────────── */

#tut-finger {
  position: fixed;
  z-index: 96;
  pointer-events: none;
  display: none;
  transform-origin: 10% 50%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

#tut-finger-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Tap: press down + ripple (spin button) */
.tut-anim-tap #tut-finger-ripple {
  animation: tutRipple 1.2s ease-out infinite;
}
.tut-anim-tap {
  animation: tutFingerTap 1.2s ease-in-out infinite;
}
@keyframes tutFingerTap {
  0%, 100% { transform: rotate(-90deg) scale(1) translateX(0);      opacity: 0.95; }
  35%       { transform: rotate(-90deg) scale(0.88) translateX(8px); opacity: 1;    }
  60%       { transform: rotate(-90deg) scale(1) translateX(0);      opacity: 0.95; }
}
@keyframes tutRipple {
  0%   { width: 0;    height: 0;    opacity: 0.8; }
  100% { width: 72px; height: 72px; opacity: 0;   }
}

/* Drag down: power bar (shoot step) — rotated -90° so finger points downward */
.tut-anim-drag-down {
  animation: tutFingerDragDown 1.8s ease-in-out infinite;
}
@keyframes tutFingerDragDown {
  0%   { transform: rotate(90deg) translateX(-24px); opacity: 0;   }
  15%  { transform: rotate(90deg) translateX(0);     opacity: 1;   }
  70%  { transform: rotate(90deg) translateX(70px);  opacity: 1;   }
  85%  { transform: rotate(90deg) translateX(70px);  opacity: 0;   }
  100% { transform: rotate(90deg) translateX(-24px); opacity: 0;   }
}

/* Lang modal buttons */
.tut-lang-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 28px; border-radius: 16px;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.tut-lang-btn:hover { background: rgba(0,191,165,0.12); border-color: rgba(0,191,165,0.5); }
.tut-lang-btn span.flag { font-size: 2.8rem; line-height: 1; }
.tut-lang-btn span.lbl { color: #fff; font-weight: 700; font-size: 0.95rem; }

/* Lang modal — compact in landscape / short screens */
@media (max-height: 500px) {
  .tut-lang-header { padding: 12px 20px 10px !important; }
  .tut-lang-header .text-base { font-size: 0.85rem; margin-bottom: 0 !important; }
  .tut-lang-header .text-sm { font-size: 0.75rem; }
  .tut-lang-flags { padding: 12px 20px !important; gap: 12px !important; }
  .tut-lang-btn { padding: 10px 20px; gap: 6px; border-radius: 12px; }
  .tut-lang-btn span.flag { font-size: 1.8rem; }
  .tut-lang-btn span.lbl { font-size: 0.8rem; }
  .tut-lang-skip { padding: 0 20px 12px !important; }
  .tut-lang-skip p { padding-top: 10px !important; margin-bottom: 6px !important; }
}

/* Drag across: aim step (stick direction) */
.tut-anim-drag-across {
  animation: tutFingerDragAcross 2s ease-in-out infinite;
}
@keyframes tutFingerDragAcross {
  0%   { transform: translateX(50px);  opacity: 0;   }
  15%  { opacity: 1;                                  }
  70%  { transform: translateX(-50px); opacity: 1;   }
  85%  { opacity: 0;                                  }
  100% { transform: translateX(50px);  opacity: 0;   }
}

/* Drag place: ball-in-hand step */
.tut-anim-drag-place {
  animation: tutFingerDragPlace 2s ease-in-out infinite;
}
@keyframes tutFingerDragPlace {
  0%   { transform: translate(50px, -40px); opacity: 0; }
  15%  { opacity: 1;                                     }
  70%  { transform: translate(-30px, 40px); opacity: 1; }
  85%  { opacity: 0;                                     }
  100% { transform: translate(50px, -40px); opacity: 0; }
}


/* ── Leagues Screen ───────────────────────────────────────── */

/* Safe-area padding for iOS notch in landscape — scoped to #screen-leagues
   so it doesn't affect #screen-table-browser, #screen-shop, #screen-profile
   (all share .browser-cards-area / .league-grid-wrap classes). */
#screen-leagues .league-grid-wrap {
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}

/* Detail (leaderboard) view */
.leagues-detail-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
}
.leagues-leaderboard {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.leagues-loading {
  text-align: center;
  color: rgba(255,255,255,0.4);
  padding: 32px 0;
  font-size: 12px;
  flex-shrink: 0;
}

/* My-card pinned at top of leaderboard */
.league-my-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(10, 32, 18, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,191,165,0.3);
  flex-shrink: 0;
}

/* Leaderboard rows */
.league-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.league-rank-row.is-me {
  background: rgba(0,191,165,0.12);
  border-color: rgba(0,191,165,0.4);
  box-shadow: 0 0 10px -4px rgba(0,191,165,0.5);
}
.league-rank-num {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.league-rank-num.top3 { color: #FFD700; }
.league-avatar-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
}
.league-username {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-rank-row.is-me .league-username { color: #00bfa5; }
.league-elo {
  font-size: 12px;
  font-weight: 700;
  color: #FFD700;
  flex-shrink: 0;
}
.league-placement-text {
  font-size: 10px;
  color: rgba(255,255,255,0.38);
  flex-shrink: 0;
}

/* Locked league card */
.league-card.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.league-card.locked::after {
  content: "🔒";
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.68rem;
}
.league-card.locked:hover { transform: none; box-shadow: none; border-color: transparent; }

/* Ranked league card — glows with league color */
.league-card.ranked {
  border-color: var(--lc-color, #22c55e);
  box-shadow: 0 0 14px -4px var(--lc-color, #22c55e), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.league-card.ranked::before { opacity: 0.16; }

/* Rank / placement badges on league cards */
.league-card-rank-badge {
  font-size: 0.6rem;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255,215,0,0.14);
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 20px;
  padding: 0.05rem 0.45rem;
  margin-top: 0.05rem;
}
.league-card-placement-badge {
  font-size: 0.58rem;
  font-weight: 600;
  color: #60a5fa;
  background: rgba(96,165,250,0.12);
  border: 1px solid rgba(96,165,250,0.3);
  border-radius: 20px;
  padding: 0.05rem 0.4rem;
  margin-top: 0.05rem;
}

/* League detail header (shown inside leaderboard view) */
.league-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.league-detail-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.league-detail-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Profile Screen ──────────────────────────────────────────────── */

/* Avatar in browser header (compact) */
.profile-header-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0,191,165,0.45);
  flex-shrink: 0;
}

/* Profile Tabs (same pattern as shop-tabs) */
.profile-tabs {
  display: flex;
  background: rgba(0, 35, 16, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(100, 255, 180, 0.10);
  flex-shrink: 0;
}
.profile-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.profile-tab.active { color: #00bfa5; border-bottom-color: #00bfa5; }

/* Tab panels fill the browser-cards-area */
.profile-tab-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.profile-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 12px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Inventory panel */
.profile-inv-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-inv-section {}
.profile-inv-title {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.profile-inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.profile-inv-item {
  position: relative;
  border-radius: 10px;
  border: 1.5px solid rgba(0,191,165,0.35);
  background: rgba(0,191,165,0.07);
  padding: 4px;
}
.profile-inv-item img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.profile-inv-empty {
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.72rem;
  padding: 32px 0;
}
/* Emoji row in inventory */
.profile-inv-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-inv-emoji-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 52px;
}
.profile-inv-emoji-icon { font-size: 1.6rem; line-height: 1; }
.profile-inv-emoji-name { font-size: 0.55rem; color: rgba(255,255,255,0.4); font-weight: 700; }

/* Cue list in inventory */
.profile-inv-cue-list { display: flex; flex-direction: column; gap: 6px; }
.profile-inv-cue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.profile-inv-cue-img     { flex: 1; min-width: 0; height: 40px; object-fit: contain; object-position: left center; }
.profile-inv-cue-name    { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.75); white-space: nowrap; flex-shrink: 0; }
.profile-inv-cue-equipped { font-size: 0.7rem; color: #4caf50; font-weight: bold; white-space: nowrap; }
.profile-inv-cue-btn     { padding: 4px 12px; border-radius: 6px; background: #f59e0b; color: #000; border: none; cursor: pointer; font-size: 0.7rem; font-weight: bold; white-space: nowrap; }

.profile-inv-msg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 14px;
}
.profile-inv-msg-icon { font-size: 1.4rem; }
.profile-inv-msg-info {}
.profile-inv-msg-label { font-size: 0.62rem; color: rgba(255,255,255,0.35); font-weight: 700; letter-spacing: 0.06em; }
.profile-inv-msg-count { font-size: 1rem; font-weight: 800; color: #fff; }

.profile-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
}
.profile-big-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0,191,165,0.5);
  flex-shrink: 0;
}
.profile-username { font-size: 1rem; font-weight: 800; color: #fff; }
.profile-email    { font-size: 0.68rem; color: rgba(255,255,255,0.4); margin-top: 2px; }

.profile-section { display: flex; flex-direction: column; gap: 10px; }
.profile-section-title {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}

/* Botón "Ver reglas del juego" dentro del Profile */
.profile-rules-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(0, 191, 165, 0.08);
  border: 1px solid rgba(0, 191, 165, 0.22);
  border-radius: 12px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.profile-rules-btn:hover {
  background: rgba(0, 191, 165, 0.16);
  border-color: rgba(0, 191, 165, 0.35);
}
.profile-rules-btn > span { flex: 1; }
.profile-rules-btn > i { color: #00bfa5; }

/* Modal disclaimer en modo solo-lectura (desde Profile) */
#modal-disclaimer.readonly #disclaimer-checkbox-row,
#modal-disclaimer.readonly #btn-disclaimer-accept {
  display: none !important;
}
#modal-disclaimer.readonly #btn-disclaimer-cancel {
  flex: 1;
  background: linear-gradient(to bottom, #0d9488, #0f766e) !important;
  color: #fff !important;
}

/* ── Profile: History tab ────────────────────────────────────────────────── */

/* Stats row */
.ph-stats-row {
  display: flex;
  gap: 8px;
}
.ph-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 6px;
}
.ph-stat-win  { border-color: rgba(74,222,128,0.2);  background: rgba(74,222,128,0.06); }
.ph-stat-loss { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.06); }
.ph-stat-win  .ph-stat-val { color: #4ade80; }
.ph-stat-loss .ph-stat-val { color: #f87171; }
.ph-stat-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.ph-stat-lbl {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}

/* League gallery */
.ph-league-list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ph-league-list::-webkit-scrollbar { display: none; }
.ph-league-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 72px;
}
.ph-league-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.ph-league-card-name {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ph-league-card-rank {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.ph-league-card-sub {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
}

/* Match list */
.ph-match-list, .ph-txn-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ph-loading, .ph-empty {
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.72rem;
  padding: 20px 0;
}

/* Match card */
.ph-match-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-left: 3px solid transparent;
}
.ph-match-win  { border-left-color: #4ade80; }
.ph-match-loss { border-left-color: #f87171; }

/* Avatars stack */
.ph-match-avatars {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 32px;
}
.ph-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.4);
  object-fit: cover;
  position: absolute;
  top: 0;
}
.ph-avatar-me  { left: 0; z-index: 2; }
.ph-avatar-opp { left: 14px; z-index: 1; filter: brightness(0.85); }
.ph-res-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #0d0d18;
  z-index: 3;
}
.ph-res-dot.ph-res-win  { background: #4ade80; }
.ph-res-dot.ph-res-loss { background: #f87171; }
.ph-res-dot.ph-res-draw { background: #888; }

/* Body */
.ph-match-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-match-names {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 0.75rem;
}
.ph-match-me  { font-weight: 700; color: #fff; }
.ph-match-sep { font-size: 0.6rem; color: rgba(255,255,255,0.3); }
.ph-match-opp { font-weight: 600; color: rgba(255,255,255,0.6); }
.ph-opp-elo   { font-size: 0.6rem; color: rgba(255,255,255,0.3); margin-left: 2px; }
.ph-match-meta { font-size: 0.62rem; color: rgba(255,255,255,0.3); }
.ph-chips { color: rgba(255,190,40,0.65); }
.ph-chips-win  { color: #4ade80; }
.ph-chips-loss { color: #f87171; }

/* Right side */
.ph-match-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ph-match-league-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
}
.ph-res {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ph-res-win  { color: #4ade80; }
.ph-res-loss { color: #f87171; }
.ph-res-draw { color: rgba(255,255,255,0.35); }

/* Transactions */
.ph-txn-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 8px 10px;
}
.ph-txn-icon { font-size: 1.1rem; flex-shrink: 0; }
.ph-txn-info { flex: 1; min-width: 0; }
.ph-txn-desc {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-txn-date {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
  margin-top: 1px;
}
.ph-txn-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 1px;
}
.ph-txn-amt {
  font-size: 0.82rem;
  font-weight: 800;
}
.ph-txn-pos { color: #4ade80; }
.ph-txn-neg { color: #f87171; }
.ph-txn-neu { color: rgba(255,255,255,0.4); }
.ph-txn-bal {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
}

/* ── Shared avatar option button (modal + profile) ───────────────────────── */
.avatar-option {
  position: relative;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.05);
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}
.avatar-option:hover   { border-color: rgba(0,191,165,0.45); transform: scale(1.07); }
.avatar-option.selected {
  border-color: #00bfa5;
  background: rgba(0,191,165,0.12);
}
.avatar-option-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* Checkmark badge on selected avatar */
.avatar-check-badge {
  position: absolute;
  bottom: 3px; right: 3px;
  width: 14px; height: 14px;
  background: #00a88f;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900;
  color: #003d35;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  line-height: 1;
}
.avatar-option.selected .avatar-check-badge {
  opacity: 1;
  transform: scale(1);
}

/* Saving state (while PATCH is in flight) */
.avatar-option.avatar-saving {
  opacity: 0.5;
  pointer-events: none;
}
.avatar-option.avatar-saving .avatar-option-img,
.avatar-option.avatar-saving .profile-avatar-thumb {
  animation: avatar-pulse 0.7s ease-in-out infinite;
}
@keyframes avatar-pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* Pop animation on confirmed save */
.avatar-option.avatar-saved { animation: avatar-pop 0.4s ease-out; }
@keyframes avatar-pop { 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* Status toast between grid and close button */
.avatar-toast {
  display: block;
  text-align: center;
  border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: #00bfa5;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s, max-height 0.2s, padding 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.avatar-toast.visible {
  opacity: 1;
  max-height: 32px;
  padding: 5px 14px;
  background: rgba(0,191,165,0.12);
  border: 1px solid rgba(0,191,165,0.35);
}
.avatar-toast.error        { color: #f87171; }
.avatar-toast.error.visible { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); }

/* Avatar grid in profile */
.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.profile-avatar-option {
  position: relative;
  border-radius: 10px;
  border: 2px solid rgba(100, 255, 180, 0.12);
  background: rgba(10, 32, 18, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
}
.profile-avatar-option:hover   { border-color: rgba(0,191,165,0.45); transform: scale(1.07); }
.profile-avatar-option.selected {
  border-color: #00bfa5;
  background: rgba(0,191,165,0.12);
}
.profile-avatar-option.locked { opacity: 0.55; cursor: pointer; }
.profile-avatar-option.locked:hover { border-color: rgba(103,232,249,0.5); transform: scale(1.07); }

.profile-avatar-option.avatar-saving {
  opacity: 0.5;
  pointer-events: none;
}
.profile-avatar-option.avatar-saved { animation: avatar-pop 0.4s ease-out; }
.profile-avatar-option.selected .avatar-check-badge { opacity: 1; transform: scale(1); }
.profile-avatar-thumb { width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; display: block; }

/* Password form */
.profile-form { display: flex; flex-direction: column; gap: 8px; }
.profile-input {
  background: rgba(0, 40, 20, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(100, 255, 180, 0.14);
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
}
.profile-input:focus { border-color: rgba(0,191,165,0.45); }
.profile-input::placeholder { color: rgba(255,255,255,0.2); }

.profile-save-btn {
  background: linear-gradient(135deg, #00bfa5, #006d5b);
  border: none; border-radius: 10px; padding: 11px;
  color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  cursor: pointer; margin-top: 2px; transition: opacity 0.15s;
}
.profile-save-btn:hover    { opacity: 0.88; }
.profile-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.profile-status     { font-size: 0.68rem; font-weight: 600; min-height: 16px; text-align: center; }
.profile-status.ok  { color: #34d399; }
.profile-status.err { color: #f87171; }

/* Language selector in profile */
.profile-lang-row { display: flex; gap: 8px; }
.profile-lang-btn {
  flex: 1;
  padding: 10px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-lang-btn:hover   { background: rgba(255,255,255,0.1); }
.profile-lang-btn.active  { border-color: #00bfa5; color: #00bfa5; background: rgba(0,191,165,0.1); }

.profile-logout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 12px;
  color: #f87171; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em;
  cursor: pointer; transition: background 0.15s;
}
.profile-logout-btn:hover { background: rgba(239,68,68,0.16); }

@media (max-height: 400px) {
  .profile-avatar-grid { grid-template-columns: repeat(6, 1fr); }
  .profile-big-avatar  { width: 44px; height: 44px; }
}

/* ── Shop Screen ─────────────────────────────────────────────────── */
/* .shop-modal-card is no longer used — shop is now a full screen */

.shop-screen-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.shop-panel-inner {
  padding: 14px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.shop-header {
  padding: 13px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.shop-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
}
.shop-balances {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
}
.shop-balance-real { color: #34d399; display: flex; align-items: center; gap: 2px; }
.shop-dollar-icon  { font-size: 0.65rem; opacity: 0.8; }
.shop-balance-sep  { color: rgba(255,255,255,0.2); }
.shop-balance-chips { color: #FFD700; display: flex; align-items: center; gap: 4px; }

/* Tabs */
.shop-tabs {
  display: flex;
  background: rgba(0, 35, 16, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(100, 255, 180, 0.10);
  flex-shrink: 0;
}
.shop-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.shop-tab.active { color: #00bfa5; border-bottom-color: #00bfa5; }

/* Panels (legacy, no longer used as main container) */
.shop-panel { padding: 12px 14px; overflow-y: auto; }

/* Package grid */
.shop-pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.shop-pkg-card {
  background: rgba(10, 32, 18, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 255, 180, 0.12);
  border-radius: 12px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.shop-pkg-card:hover   { background: rgba(0,191,165,0.1); border-color: rgba(0,191,165,0.4); transform: translateY(-1px); }
.shop-pkg-card:active  { transform: translateY(0); }
.shop-pkg-card:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.shop-pkg-popular { border-color: rgba(245,158,11,0.35); }
.shop-pkg-popular:hover { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.6); }

.shop-pkg-chips {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFD700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.shop-pkg-price { font-size: 0.72rem; font-weight: 700; color: #34d399; }
.shop-pkg-badge {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #f59e0b;
  border-radius: 20px;
  padding: 1px 7px;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
}

/* Sell form */
.shop-sell-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.shop-sell-label { font-size: 0.62rem; font-weight: 600; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.08em; }
.shop-sell-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.shop-sell-input:focus { border-color: rgba(0,191,165,0.5); }
.shop-sell-input::placeholder { color: rgba(255,255,255,0.2); }
.shop-sell-input::-webkit-outer-spin-button,
.shop-sell-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.shop-sell-input[type=number] { -moz-appearance: textfield; }

.shop-sell-preview { font-size: 0.7rem; color: rgba(255,255,255,0.45); text-align: center; }
.shop-sell-amount  { font-size: 1.3rem; font-weight: 800; color: #34d399; display: block; margin-top: 2px; }
.shop-sell-btn {
  background: linear-gradient(135deg, #00bfa5, #006d5b);
  border: none;
  border-radius: 10px;
  padding: 11px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.shop-sell-btn:hover    { opacity: 0.88; transform: translateY(-1px); }
.shop-sell-btn:active   { transform: translateY(0); }
.shop-sell-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Rate info footer */
.shop-rate-info { font-size: 0.6rem; color: rgba(255,255,255,0.28); text-align: center; }
.shop-margin-note { color: #f59e0b; opacity: 0.75; }

/* Status line */
.shop-status { min-height: 18px; text-align: center; font-size: 0.68rem; font-weight: 600; padding: 4px 14px 0; flex-shrink: 0; }

/* Close button */
.shop-close-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 6px 14px 12px;
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.6);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.shop-close-btn:hover { background: rgba(255,255,255,0.11); }

@media (max-height: 400px) {
  .shop-header   { padding: 8px 14px; }
  .shop-panel    { padding: 8px 12px; }
  .shop-pkg-card { padding: 8px 6px 7px; }
  .shop-pkg-chips { font-size: 0.8rem; }
  .shop-close-btn { margin: 4px 14px 8px; padding: 7px; }
}

/* ── Diamond icon (inline text) ─────────────────────────────────────────── */
.diamond-icon {
  color: #67e8f9;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 2px;
  line-height: 1;
}
/* When lucide replaces <i> with <svg>, keep stroke color */
.diamond-icon svg { stroke: currentColor; display: block; }
.shop-balance-diamonds { color: #67e8f9; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; gap: 2px; }
.shop-pkg-diamonds-amount { color: #67e8f9; }

/* ── Locked avatar ───────────────────────────────────────────────────────── */
.avatar-option.locked {
  opacity: 0.55;
  cursor: pointer;
}
.avatar-option.locked:hover { border-color: rgba(103,232,249,0.5); transform: scale(1.07); }
.avatar-lock-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0,0,0,0.75);
  border-radius: 4px;
  padding: 1px 3px;
  font-size: 0.5rem;
  font-weight: 700;
  color: #67e8f9;
  line-height: 1.2;
  pointer-events: none;
}

/* ── In-game chat overlay ────────────────────────────────────────────────── */
.chat-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(10,10,10,0.94);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-radius: 0;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
  max-height: 130px;
}
.chat-msg {
  font-size: 0.68rem;
  line-height: 1.3;
  word-break: break-word;
  padding: 3px 6px;
  border-radius: 6px;
  max-width: 100%;
}
.chat-msg.mine  { background: rgba(0,191,165,0.35); color: #e0fff8; align-self: flex-end; }
.chat-msg.theirs { background: rgba(255,255,255,0.08); color: #e2e8f0; align-self: flex-start; }
.chat-msg .chat-sender { font-weight: 700; font-size: 0.6rem; margin-bottom: 1px; opacity: 0.7; }
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  align-items: center;
}
.chat-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  padding: 10px 12px;
  outline: none;
}
.chat-input::placeholder { color: rgba(255,255,255,0.35); }
.chat-send-btn {
  background: #00a88f;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chat-send-btn:hover { background: #00bfa5; }
/* ── In-game floating icon buttons (settings / chat / emoji) ─────────────── */
.ingame-icon-btn,
.chat-toggle-btn {
  position: fixed;
  right: 10px;
  width: clamp(32px, 3.8vw, 44px);
  height: clamp(32px, 3.8vw, 44px);
  border-radius: 50%;
  border: none;
  color: rgba(200, 255, 230, 0.88);
  background: radial-gradient(circle at 35% 30%,
    rgba(60, 180, 100, 0.42) 0%,
    rgba(0, 75, 38, 0.52) 100%
  );
  font-size: 1rem;
  cursor: pointer;
  z-index: 79;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 5px 0 rgba(0, 28, 14, 0.68),
    0 6px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(100, 255, 180, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.1s, box-shadow 0.1s, color 0.18s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ingame-icon-btn::after,
.chat-toggle-btn::after {
  content: '';
  position: absolute;
  top: 4px; left: 6px; right: 6px;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
}
.ingame-icon-btn:hover,
.chat-toggle-btn:hover {
  transform: translateY(-2px);
  color: #64ffda;
  box-shadow:
    0 7px 0 rgba(0, 28, 14, 0.68),
    0 8px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(100, 255, 180, 0.32),
    0 14px 26px rgba(0, 0, 0, 0.42),
    0 0 12px rgba(100, 255, 180, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ingame-icon-btn:active,
.chat-toggle-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 rgba(0, 28, 14, 0.68),
    0 3px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(100, 255, 180, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Right side: flex column container, grows upward from bottom.
   Safe-area insets keep the buttons clear of the iPhone notch in landscape
   (which lives on the left OR right depending on orientation lock) and the
   home-indicator gesture bar in both orientations. */
#ingame-right-btns {
  position: fixed;
  right: calc(2px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 85;
}
#ingame-right-btns .ingame-icon-btn,
#ingame-right-btns .chat-toggle-btn {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}
/* Left side: music + sfx respect safe-area-inset-left (notch in some landscape
   lock orientations) and the home indicator at the bottom. */
#btn-ingame-music {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
  right: auto;
  z-index: 85;
}
#btn-ingame-sfx {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: calc(58px + env(safe-area-inset-left, 0px));
  right: auto;
  z-index: 85;
}

/* When JS reparents music/sfx into the right column on big landscape iPhones,
   switch them from fixed to flex children of the column. */
#ingame-right-btns > #btn-ingame-music,
#ingame-right-btns > #btn-ingame-sfx {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

/* Music/sfx always reparent into the right column on landscape (all phones
   now have a wider table due to the 85 crop, so bottom-left overlapped the
   rail on iPhone 8 too). Right edge distance baked at 2px per Michael's
   calibration on iPhone 8. */

/* HUD player label (Tú / Rival) */
.hud-player-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(100,255,180,0.72);
  line-height: 1;
  display: none;
}
.hud-player-label.visible { display: block; }

.hud-player-label.label-winner { color: #fbbf24; font-weight: 900; text-shadow: 0 0 8px rgba(251,191,36,0.6); }

/* Danger variant (leave button) */
.ingame-icon-btn--danger {
  background: radial-gradient(circle at 35% 30%, rgba(180,50,50,0.5) 0%, rgba(90,10,10,0.55) 100%);
  box-shadow:
    0 5px 0 rgba(80,0,0,0.7),
    0 6px 0 rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,100,100,0.2),
    0 10px 22px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.ingame-icon-btn--danger:hover {
  color: #fca5a5;
  box-shadow:
    0 7px 0 rgba(80,0,0,0.7),
    0 8px 0 rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,100,100,0.35),
    0 14px 26px rgba(0,0,0,0.42),
    0 0 12px rgba(255,100,100,0.2),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.ingame-icon-btn--danger:active {
  box-shadow:
    0 2px 0 rgba(80,0,0,0.7),
    0 3px 0 rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,100,100,0.15),
    0 4px 10px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Off state for audio buttons */
.ingame-icon-btn--off { opacity: 0.38; }

.chat-toggle-btn.has-unread::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
}

@media (max-height: 420px) {
  #ingame-right-btns { gap: 6px; bottom: 14px; }
  #ingame-right-btns .ingame-icon-btn { width: 32px; height: 32px; font-size: 0.85rem; }
}

/* ─── In-game emoji picker ──────────────────────────────────────────── */
.emoji-picker-panel {
  background: rgba(8,22,12,0.95);
  border: 1px solid rgba(0,191,165,0.18);
  border-radius: 0.75rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.emoji-grid-wrap {
  position: relative;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
}
.emoji-cd-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.emoji-cd-overlay.hidden { display: none; }
#emoji-cd-number {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,0,0,0.8);
  line-height: 1;
}
.emoji-btn {
  font-size: 1.4rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: rgba(255,255,255,0.06);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.emoji-btn:active { background: rgba(255,255,255,0.15); }
.emoji-gem-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0.15rem;
}
.emoji-gem-label {
  flex: 1;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.5);
}
#emoji-gem-count {
  font-size: 0.75rem;
  font-weight: 800;
  color: #00bfa5;
}
.emoji-buy-btn {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(0,191,165,0.15);
  color: #00bfa5;
  border: 1px solid rgba(0,191,165,0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.emoji-buy-btn:active { opacity: 0.7; }
.emoji-gem-cost {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
}
.emoji-btn.no-gems {
  opacity: 0.3;
  cursor: not-allowed;
}
.emoji-btn.on-cooldown {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── In-game gem shop mini-modal ───────────────────────────────────── */
.gem-shop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
}
.gem-shop-backdrop.hidden { display: none; }
.gem-shop-modal {
  background: rgba(8,22,12,0.98);
  border: 1px solid rgba(103,232,249,0.25);
  border-radius: 1rem;
  padding: 1rem;
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gem-shop-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #67e8f9;
  letter-spacing: 0.05em;
}
.gem-shop-balance {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
}
.gem-shop-close {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  line-height: 1;
}
.gem-shop-close:active { color: #fff; }
.gem-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.gem-pkg-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.4rem;
  border-radius: 0.6rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, opacity 0.15s;
}
.gem-pkg-btn:active { opacity: 0.7; }
.gem-pkg-popular { border-color: rgba(103,232,249,0.45); }
.gem-pkg-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #0891b2;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}
.gem-pkg-amount {
  font-size: 0.85rem;
  font-weight: 800;
  color: #67e8f9;
}
.gem-pkg-price {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}
.gem-shop-status {
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  min-height: 1em;
  color: rgba(255,255,255,0.5);
}
.gem-shop-status.ok  { color: #34d399; }
.gem-shop-status.err { color: #f87171; }
.gem-pkg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Emoji estático sobre avatar ────────────────────────────────────────── */
.floating-emoji {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: rgba(0, 0, 0, 0.30);
}
/* travel variant — animation driven entirely by JS (Web Animations API) */
.floating-emoji--travel {
  will-change: transform, opacity;
}

/* ── Chat bubbles sidebar ─────────────────────────────────────────────────── */
.chat-bubble-container {
  position: fixed;
  left: 0.6rem;
  bottom: 4rem;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
  max-width: 200px;
  pointer-events: none;
}
@keyframes bubbleIn  { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
@keyframes bubbleOut { from { opacity:1; } to { opacity:0; } }
.chat-bubble {
  padding: 0.3rem 0.55rem;
  border-radius: 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 100%;
  word-break: break-word;
  animation: bubbleIn 0.2s ease-out forwards;
  pointer-events: none;
}
.chat-bubble.mine {
  background: rgba(0,191,165,0.85);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 0.2rem;
}
.chat-bubble.theirs {
  background: rgba(30,41,59,0.92);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom-left-radius: 0.2rem;
}
.chat-bubble .bubble-sender {
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 1px;
}
.chat-bubble.fading { animation: bubbleOut 0.4s ease-out forwards; }

/* ── Shop status ok/err colors ───────────────────────────────────────────── */
.shop-status.ok  { color: #34d399; }
.shop-status.err { color: #f87171; }

/* ── Shop section label & divider ───────────────────────────────────────── */
.shop-section-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.shop-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 4px 0;
}

/* ── Store Marketplace ───────────────────────────────────────────────────── */

/* Category filter bar */
.store-filter-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px 8px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(0, 35, 16, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(100, 255, 180, 0.10);
}
.store-filter-bar::-webkit-scrollbar { display: none; }

.store-filter-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.store-filter-btn:hover  { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.09); }
.store-filter-btn.active { color: #00bfa5; background: rgba(0,191,165,0.1); border-color: rgba(0,191,165,0.4); }

/* Store grid — scrollable area below filter bar */
.store-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* For MESSAGE_PACK and wider items, span 2 columns */
.store-item-card[data-item-type="MESSAGE_PACK"] { grid-column: span 2; }
/* Cue rows span full width of the grid */
.store-cue-row { grid-column: 1 / -1; }

.store-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.72rem;
  padding: 40px 0;
}

/* Item card */
.store-item-card {
  background: rgba(10, 32, 18, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 255, 180, 0.10);
  border-radius: 14px;
  padding: 10px 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.store-item-card:hover { background: rgba(10, 40, 22, 0.88); border-color: rgba(100, 255, 180, 0.22); }

/* Preview area */
.store-item-preview {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.store-item-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.1);
  display: block;
}
.store-item-emoji {
  font-size: 2.2rem;
  line-height: 1;
  text-align: center;
}
.store-item-cue-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0,191,165,0.5));
}
.store-item-cue-img { width: 100%; height: 40px; object-fit: contain; }

/* Cue list rows in store */
.store-cue-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.store-cue-row-img  { display: block; width: 100%; height: 60px; object-fit: contain; background: rgba(0,0,0,0.3); padding: 8px; box-sizing: border-box; }
.store-cue-row-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; }
.store-cue-row-name { font-size: 0.75rem; font-weight: 700; color: #eee; }
.store-item-packsize {
  font-size: 1rem;
  font-weight: 800;
  color: #67e8f9;
  position: absolute;
  bottom: -4px;
  right: 50%;
  transform: translateX(50%);
  background: rgba(0,0,0,0.7);
  border-radius: 8px;
  padding: 0 5px;
  line-height: 1.4;
}

/* Item name */
.store-item-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Buy / Owned button */
.store-item-btn {
  width: 100%;
  padding: 5px 0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  background: linear-gradient(135deg, #00bfa5, #006d5b);
  color: #fff;
}
.store-item-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.store-item-btn:active { transform: translateY(0); }
.store-item-btn.owned {
  background: rgba(0,191,165,0.12);
  color: #00bfa5;
  border: 1px solid rgba(0,191,165,0.3);
  cursor: default;
  transform: none;
}
.store-item-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* panel-store uses its own layout (filter bar + scrollable grid) */
#shop-panel-store {
  display: flex;
  flex-direction: column;
  overflow-y: hidden; /* scroll is only on .store-grid */
}
#shop-panel-store.hidden { display: none; }

/* store-grid fills remaining space */
#shop-panel-store .store-grid {
  flex: 1;
  min-height: 0;
}

@media (max-height: 400px) {
  .store-grid { padding: 8px 10px 16px; gap: 8px; }
  .store-filter-bar { padding: 7px 12px 0; }
  .store-item-img { width: 44px; height: 44px; }
  .store-item-emoji { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MAIN MENU — redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* Gradient overlay on top of the background image */
.menu-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 10, 5, 0.52) 0%,
    rgba(0, 15, 8, 0.14) 38%,
    rgba(0, 15, 8, 0.22) 68%,
    rgba(0, 8, 4, 0.62) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.menu-logo {
  position: absolute;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  user-select: none;
  z-index: 1;
}

.menu-logo-tag {
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(100, 255, 200, 0.5);
  margin-bottom: 4px;
}

.menu-logo-title {
  font-size: clamp(36px, 7vw, 90px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 20px #00ffaa,
    0 0 55px rgba(0, 255, 160, 0.42),
    0 0 90px rgba(0, 200, 120, 0.22),
    0 4px 0 rgba(0, 50, 25, 0.75),
    0 8px 3px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.menu-logo-my {
  color: #64ffda;
  text-shadow:
    0 0 18px #00ffaa,
    0 0 45px rgba(0, 255, 160, 0.55),
    0 4px 0 rgba(0, 50, 25, 0.75);
}

.menu-logo-sub {
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(100, 220, 170, 0.45);
  margin-top: 4px;
}

/* ── Reconnect banner ─────────────────────────────────────────────── */
.menu-reconnect-wrap {
  position: absolute;
  top: calc(50% - 100px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: min(320px, 80vw);
  z-index: 2;
}

/* ── JUGAR button ─────────────────────────────────────────────────── */
.menu-play-wrap {
  position: absolute;
  bottom: clamp(5%, 6vh, 10%);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: max-content;
}

.btn-play-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(10px, 1.8vh, 22px) clamp(22px, 3.5vw, 52px) clamp(10px, 1.8vh, 22px) clamp(16px, 2.8vw, 44px);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: clamp(14px, 2.2vw, 30px);
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #003d35;
  background: linear-gradient(155deg, #64ffda 0%, #00e5bb 25%, #00bfa5 55%, #008c76 100%);
  box-shadow:
    0 8px 0 #005545,
    0 10px 0 #003d30,
    0 0 0 3px rgba(100, 255, 200, 0.32),
    0 0 0 6px rgba(0, 200, 160, 0.13),
    0 20px 55px rgba(0, 200, 150, 0.42),
    0 4px 18px rgba(0, 0, 0, 0.38);
  transition: transform 0.1s, box-shadow 0.1s;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

/* Shine sweep */
.btn-play-main::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 44%,
    rgba(255, 255, 255, 0.36) 50%,
    rgba(255, 255, 255, 0.2) 56%,
    transparent 100%
  );
  animation: menu-shine-play 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Top bevel highlight */
.btn-play-main::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, transparent 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

@keyframes menu-shine-play {
  0%   { left: -120%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}

.btn-play-main:hover {
  transform: translateY(-3px);
  box-shadow:
    0 11px 0 #005545,
    0 13px 0 #003d30,
    0 0 0 3px rgba(100, 255, 200, 0.42),
    0 0 0 7px rgba(0, 200, 160, 0.18),
    0 28px 65px rgba(0, 200, 150, 0.52),
    0 6px 22px rgba(0, 0, 0, 0.38);
}

.btn-play-main:active {
  transform: translateY(7px);
  box-shadow:
    0 1px 0 #005545,
    0 2px 0 #003d30,
    0 0 0 3px rgba(100, 255, 200, 0.22),
    0 8px 28px rgba(0, 200, 150, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.38);
}

.btn-play-secondary {
  font-size: clamp(10px, 1.3vw, 16px);
  letter-spacing: 2px;
  padding: clamp(7px, 1vh, 13px) clamp(14px, 2vw, 28px) clamp(7px, 1vh, 13px) clamp(10px, 1.6vw, 22px);
  background: linear-gradient(135deg, #ff9f1c 0%, #ff7b00 100%);
  color: #3d1a00;
  box-shadow: 0 4px 0 #b85000, 0 6px 0 #7a3300,
              0 0 0 2px rgba(255,160,30,.35), 0 10px 24px rgba(255,120,0,.32);
  opacity: 1;
}
.btn-play-secondary:hover {
  opacity: 1;
  background: linear-gradient(135deg, #ffb340 0%, #ff8c00 100%);
  box-shadow: 0 4px 0 #b85000, 0 6px 0 #7a3300,
              0 0 0 2px rgba(255,180,50,.5), 0 14px 32px rgba(255,140,0,.45);
}
.btn-play-secondary:active {
  box-shadow: 0 1px 0 #b85000, 0 2px 0 #7a3300, 0 6px 14px rgba(255,120,0,.2);
}
.btn-play-secondary .btn-play-icon { color: #3d1a00; }
/* Reemplazar animate-pulse (opacidad) por glow suave */
.btn-play-secondary.animate-pulse {
  animation: resume-glow 1.8s ease-in-out infinite;
  opacity: 1 !important;
}
@keyframes resume-glow {
  0%, 100% { box-shadow: 0 4px 0 #b85000, 0 6px 0 #7a3300,
                          0 0 0 2px rgba(255,160,30,.35), 0 10px 24px rgba(255,120,0,.32); }
  50%       { box-shadow: 0 4px 0 #b85000, 0 6px 0 #7a3300,
                          0 0 0 3px rgba(255,180,50,.7), 0 14px 36px rgba(255,140,0,.55); }
}

.btn-play-icon {
  display: flex;
  align-items: center;
  color: #003d35;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.btn-play-main > span[data-i18n] {
  position: relative;
  z-index: 1;
}

/* ── Bottom cards shared glass base ───────────────────────────────── */
.menu-card-left,
.menu-card-right {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  height: clamp(72px, 13vh, 114px);
  gap: clamp(7px, 1vw, 14px);
  padding: 0 clamp(12px, 1.6vw, 22px);
  background: rgba(0, 65, 32, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(100, 255, 180, 0.14);
  z-index: 2;
}

.menu-card-left {
  left: 0;
  border-radius: 0 32px 0 0;
  border-right: 1px solid rgba(100, 255, 180, 0.1);
}

.menu-card-right {
  right: 0;
  border-radius: 32px 0 0 0;
  border-left: 1px solid rgba(100, 255, 180, 0.1);
}

/* ── Top-right shop card ──────────────────────────────────────────── */
.menu-card-top-right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: clamp(60px, 11vh, 100px);
  padding: 0 clamp(12px, 1.6vw, 22px);
  background: rgba(0, 65, 32, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(100, 255, 180, 0.14);
  border-left: 1px solid rgba(100, 255, 180, 0.1);
  border-radius: 0 0 0 32px;
  z-index: 2;
}

/* ── Player avatar ────────────────────────────────────────────────── */
.menu-avatar-btn {
  position: relative;
  width: clamp(38px, 5vw, 56px);
  height: clamp(38px, 5vw, 56px);
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #64ffda;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.28), 0 0 14px rgba(100, 255, 200, 0.38);
  object-fit: cover;
  display: block;
}

.menu-avatar-edit {
  position: absolute;
  bottom: -1px;
  right: -1px;
  background: #0d9e6e;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.menu-player-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-player-name {
  font-size: clamp(11px, 1.3vw, 16px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-currency-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
}

.menu-currency-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu-currency-icon {
  width: clamp(18px, 2vw, 24px);
  height: clamp(18px, 2vw, 24px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.38);
}

.menu-currency-coins {
  background: radial-gradient(circle at 35% 30%, #ffe066, #f9a800, #c97d00);
  color: #5c3200;
}

.menu-currency-gems {
  background: radial-gradient(circle at 35% 30%, #a5f3fc, #22d3ee, #0891b2);
  color: #0c2830;
  font-size: 0.8rem;
  font-weight: 900;
}

.menu-currency-amount {
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 700;
  color: #efffee;
  letter-spacing: 0.2px;
}

/* ── LIGAS button ─────────────────────────────────────────────────── */
.btn-ligas-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(7px, 1vh, 11px) clamp(10px, 1.5vw, 20px);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #3d2000;
  background: linear-gradient(155deg, #ffe066 0%, #ffcd38 28%, #f9a800 65%, #c97d00 100%);
  box-shadow:
    0 5px 0 #7a4d00,
    0 7px 0 #4a2d00,
    0 0 0 2px rgba(255, 200, 80, 0.28),
    0 0 0 4px rgba(255, 160, 0, 0.1),
    0 12px 28px rgba(200, 120, 0, 0.38),
    0 3px 10px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  outline: none;
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-ligas-main::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.24) 44%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.24) 56%,
    transparent 100%
  );
  animation: menu-shine-gold 2.5s ease-in-out infinite;
  pointer-events: none;
}

.btn-ligas-main::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.24) 0%, transparent 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

@keyframes menu-shine-gold {
  0%   { left: -120%; }
  50%  { left: 120%; }
  100% { left: 120%; }
}

.btn-ligas-main:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 #7a4d00,
    0 9px 0 #4a2d00,
    0 0 0 2px rgba(255, 200, 80, 0.42),
    0 16px 32px rgba(200, 120, 0, 0.48);
}

.btn-ligas-main:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #7a4d00,
    0 2px 0 #4a2d00,
    0 5px 16px rgba(200, 120, 0, 0.28);
}

/* ── TIENDA button ────────────────────────────────────────────────── */
.btn-tienda-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(7px, 1vh, 11px) clamp(10px, 1.5vw, 20px);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #003d35;
  background: linear-gradient(155deg, #64ffda 0%, #00e5bb 25%, #00bfa5 55%, #008c76 100%);
  box-shadow:
    0 5px 0 #005545,
    0 7px 0 #003d30,
    0 0 0 2px rgba(100, 255, 200, 0.28),
    0 0 0 4px rgba(0, 200, 160, 0.1),
    0 12px 28px rgba(0, 180, 140, 0.32),
    0 3px 10px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  outline: none;
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-tienda-main::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

.btn-tienda-main:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 #005545,
    0 9px 0 #003d30,
    0 0 0 2px rgba(100, 255, 200, 0.42),
    0 16px 32px rgba(0, 200, 150, 0.42);
}

.btn-tienda-main:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #005545,
    0 2px 0 #003d30,
    0 5px 16px rgba(0, 200, 150, 0.28);
}

.btn-icon-wrap {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.btn-ligas-main > span[data-i18n],
.btn-tienda-main > span[data-i18n] {
  position: relative;
  z-index: 1;
}

/* ── Card divider ─────────────────────────────────────────────────── */
.menu-card-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(100, 255, 180, 0.24), transparent);
  flex-shrink: 0;
  margin: 0 2px;
}

/* ── Icon buttons ─────────────────────────────────────────────────── */
.menu-icon-btn {
  position: relative;
  width: clamp(32px, 3.8vw, 46px);
  height: clamp(32px, 3.8vw, 46px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 255, 230, 0.88);
  background: radial-gradient(circle at 35% 30%,
    rgba(60, 180, 100, 0.42) 0%,
    rgba(0, 75, 38, 0.52) 100%
  );
  box-shadow:
    0 5px 0 rgba(0, 28, 14, 0.68),
    0 6px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(100, 255, 180, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.1s, box-shadow 0.1s, color 0.18s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.menu-icon-btn::after {
  content: '';
  position: absolute;
  top: 4px; left: 6px; right: 6px;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
}

.menu-icon-btn:hover {
  transform: translateY(-2px);
  color: #64ffda;
  box-shadow:
    0 7px 0 rgba(0, 28, 14, 0.68),
    0 8px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(100, 255, 180, 0.32),
    0 14px 26px rgba(0, 0, 0, 0.42),
    0 0 12px rgba(100, 255, 180, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.menu-icon-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 rgba(0, 28, 14, 0.68),
    0 3px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(100, 255, 180, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Golden variant — leagues button ─────────────────────────────── */
.menu-icon-btn--gold {
  color: #fff4a0 !important;
  background: radial-gradient(circle at 35% 30%,
    #f0c030 0%,
    #a05800 100%
  ) !important;
  box-shadow:
    0 5px 0 rgba(80, 40, 0, 0.85),
    0 6px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 200, 60, 0.55),
    0 10px 22px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.menu-icon-btn--gold:hover {
  color: #ffe066 !important;
  box-shadow:
    0 7px 0 rgba(80, 40, 0, 0.72),
    0 8px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 210, 80, 0.45),
    0 14px 26px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(255, 200, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.menu-icon-btn--gold:active {
  box-shadow:
    0 2px 0 rgba(80, 40, 0, 0.72),
    0 3px 0 rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 210, 80, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Fullscreen button — top right ────────────────────────────────── */
.menu-btn-fullscreen {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 255, 230, 0.75);
  background: rgba(0, 60, 30, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 3px 0 rgba(0, 20, 10, 0.5),
    0 0 0 1px rgba(100, 255, 180, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s, color 0.15s, background 0.15s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
}

.menu-btn-fullscreen:hover {
  color: #64ffda;
  background: rgba(0, 80, 40, 0.7);
  transform: translateY(-1px);
}

.menu-btn-fullscreen:active {
  transform: translateY(2px);
}

/* ── Landscape compact adjustments ───────────────────────────────── */
@media (max-height: 420px) {
  .menu-logo-title { font-size: clamp(26px, 6vw, 56px); }
  .menu-logo { top: 2vh; }
  .menu-card-left,
  .menu-card-right { padding: 8px 12px 10px; gap: 7px; }
  .menu-card-divider { height: 28px; }
  .menu-play-wrap { transform: translate(-50%, -5%); }
  .btn-play-main { font-size: clamp(12px, 2vw, 22px); }
}

/* ═══════════════════════════════════════════════════════════════════
   In-game player HUD
   ═══════════════════════════════════════════════════════════════════ */

.hud-game {
  display: none;             /* shown via JS when match starts */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  align-items: flex-start;
  justify-content: center;  /* center around wager */
  pointer-events: none;
}

/* ── Shared card base ───────────────────────────────────────────── */
.hud-card {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.7vw, 8px);
  padding: clamp(4px, 0.6vh, 7px) clamp(8px, 1.2vw, 16px);
  background: rgba(0, 65, 32, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(100, 255, 180, 0.14);
  transition: background 0.25s, box-shadow 0.25s;
  overflow: visible;
  /* Grow horizontally from center toward corner */
  flex: 0 1 auto;
  min-width: 0;
}

.hud-card-left {
  border-radius: 0 0 16px 16px;
  border-right: 1px solid rgba(100, 255, 180, 0.10);
}

.hud-card-right {
  border-radius: 0 0 16px 16px;
  border-left: 1px solid rgba(100, 255, 180, 0.10);
}

.hud-card.hud-active {
  background: rgba(0, 88, 44, 0.88);
  box-shadow: inset 0 0 0 1.5px rgba(0, 232, 122, 0.55),
              0 3px 18px rgba(0, 232, 122, 0.16);
}

/* ── Avatar ─────────────────────────────────────────────────────── */
.hud-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: clamp(26px, 3.8vw, 40px);
  height: clamp(26px, 3.8vw, 40px);
  overflow: visible;
}

.hud-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(100, 255, 180, 0.55);
  box-shadow: 0 0 8px rgba(0, 200, 110, 0.25);
  object-fit: cover;
  display: block;
}

.hud-timer-svg {
  position: absolute;
  top: -4px; left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
}

.hud-timer-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 2;
}

.hud-timer-arc {
  fill: none;
  stroke: #00e87a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 138.23;
  stroke-dashoffset: 0;
  transform-origin: 24px 24px;
  transform: rotate(-90deg);
  transition: stroke 0.3s;
}

/* ── Text info ──────────────────────────────────────────────────── */
.hud-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hud-info-right { align-items: flex-end; }
.hud-card-left .hud-ping { flex-direction: row-reverse; }

.hud-name {
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(60px, 11vw, 120px);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ── Ball row ───────────────────────────────────────────────────── */
.hud-balls {
  display: flex;
  gap: clamp(2px, 0.3vw, 3px);
  align-items: center;
}

.hud-balls-right { flex-direction: row-reverse; }

.hud-ball-slot,
.hud-ball-canvas {
  width: clamp(9px, 1.3vw, 15px);
  height: clamp(9px, 1.3vw, 15px);
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.hud-ball-slot.empty {
  background: rgba(0,0,0,0.28);
  border: 1px dashed rgba(255,255,255,0.16);
}

.hud-ball-slot.pocketed,
.hud-ball-canvas.pocketed {
  opacity: 0.25;
  filter: grayscale(1);
}

/* ── Per-player ping bars ───────────────────────────────────────── */
.hud-name-ping {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}
.hud-name-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hud-ping {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex-shrink: 0;
}
.hud-ping-bar {
  display: inline-block;
  width: 4px;
  border-radius: 1px;
  background: rgba(255,255,255,0.18);
  transition: background 0.3s;
}
.hud-ping-bar[data-i="0"] { height: 4px;  }
.hud-ping-bar[data-i="1"] { height: 7px;  }
.hud-ping-bar[data-i="2"] { height: 10px; }
.hud-ping-bar[data-i="3"] { height: 14px; }
.hud-ping-ms {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  align-self: center;
  min-width: 32px;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.hud-card-left .hud-ping-ms  { text-align: right; }
.hud-card-right .hud-ping-ms { text-align: left;  }

/* ── Center wager pot ───────────────────────────────────────────── */
.hud-wager {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 0;
  pointer-events: none;
  align-self: flex-start;
}

/* Square wager badge — flush to top */
.hud-pot-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 0.7vh, 8px) clamp(6px, 1vw, 12px);
  border-radius: 0 0 12px 12px;
  background: rgba(14, 8, 1, 0.94);
  border: 1.5px solid rgba(255, 185, 30, 0.55);
  border-top: none;
  box-shadow: 0 4px 14px rgba(200, 140, 0, 0.35);
  gap: 1px;
}

.hud-pot-dop {
  font-size: clamp(6px, 0.85vw, 9px);
  font-weight: 700;
  color: rgba(255, 200, 60, 0.60);
  line-height: 1;
  letter-spacing: 0.03em;
}

.hud-pot-amount {
  font-size: clamp(11px, 1.7vw, 18px);
  font-weight: 800;
  color: #ffe55a;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(180, 120, 0, 0.8);
}

.hud-vs {
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.60);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ── HUD Winner Bubble ───────────────────────────────────────── */
@keyframes hud-bubble-pop {
  0%   { transform: translateX(-50%) scale(0);    opacity: 0; }
  65%  { transform: translateX(-50%) scale(1.15); opacity: 1; }
  82%  { transform: translateX(-50%) scale(0.93); }
  100% { transform: translateX(-50%) scale(1);    opacity: 1; }
}
@keyframes hud-bubble-pop-left {
  0%   { transform: scale(0);    opacity: 0; }
  65%  { transform: scale(1.15); opacity: 1; }
  82%  { transform: scale(0.93); }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes hud-bubble-pop-right {
  0%   { transform: scale(0);    opacity: 0; }
  65%  { transform: scale(1.15); opacity: 1; }
  82%  { transform: scale(0.93); }
  100% { transform: scale(1);    opacity: 1; }
}
/* p1 bubble (left card) — anchor to left edge of avatar so it opens toward center */
#hud-p1-winner-bubble {
  left: 0;
  transform: scale(0);
  transform-origin: top left;
}
#hud-p1-winner-bubble.visible {
  animation: hud-bubble-pop-left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#hud-p1-winner-bubble::after { left: 12px; transform: none; }

/* p2 bubble (right card) — anchor to right edge of avatar so it opens toward center */
#hud-p2-winner-bubble {
  right: 0;
  left: auto;
  transform: scale(0);
  transform-origin: top right;
}
#hud-p2-winner-bubble.visible {
  animation: hud-bubble-pop-right 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#hud-p2-winner-bubble::after { left: auto; right: 12px; transform: none; }

.hud-winner-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0);
  transform-origin: top center;
  background: rgba(16, 8, 0, 0.93);
  border: 1.5px solid #fbbf24;
  border-radius: 12px;
  padding: 5px 11px;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.8);
  box-shadow: 0 0 14px rgba(251,191,36,0.45), 0 2px 8px rgba(0,0,0,0.5);
  z-index: 60;
  pointer-events: none;
}
/* tail pointing up toward card */
.hud-winner-bubble::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #fbbf24;
}
.hud-winner-bubble.visible {
  animation: hud-bubble-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Match Result Overlay ─────────────────────────────────────── */
#overlay-match-result { background: rgb(4, 8, 16); }  /* fully opaque — canvas never bleeds through */

.mr-bg {
  position: absolute;
  inset: 0;
  background: url('../sprites/menu-bg.webp') center/cover no-repeat;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

.mr-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.8vh, 20px);
  padding: clamp(16px, 4vw, 28px) clamp(12px, 4vw, 24px);
  text-align: center;
  color: #fff;
  width: min(480px, 96vw);
}

/* Title label */
.mr-label {
  font-size: clamp(1.9rem, 6.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
}
.mr-label.win  { color: #fbbf24; text-shadow: 0 0 28px rgba(251,191,36,0.65); }
.mr-label.loss { color: #f87171; text-shadow: 0 0 24px rgba(248,113,113,0.45); }
.mr-label.spec { color: #e0e7ff; font-size: clamp(1.1rem, 3.5vw, 1.5rem); letter-spacing: 0.03em; }

/* Cards row: [slot] [vs-col] [slot] */
.mr-cards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.5vw, 18px);
  width: 100%;
}

/* Player slot: crown + card + name + league */
.mr-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  max-width: clamp(96px, 26vw, 130px);
  transition: opacity 0.4s;
}
.mr-slot.loser  { opacity: 0.38; }
.mr-slot.winner { opacity: 1; }

/* Crown icon above winner card */
.mr-crown {
  height: 22px;
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: crownPop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.mr-crown svg {
  width: 22px; height: 22px;
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.9));
}
@keyframes crownPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* Card (square avatar frame) */
.mr-card {
  width: clamp(84px, 22vw, 116px);
  height: clamp(84px, 22vw, 116px);
  border-radius: 14px;
  border: 3px solid rgba(255,255,255,0.12);
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  transition: border-color 0.4s, box-shadow 0.4s;
  flex-shrink: 0;
}
.mr-slot.winner .mr-card {
  border-color: #fbbf24;
  box-shadow: 0 0 24px rgba(251,191,36,0.5), 0 0 6px rgba(251,191,36,0.25);
}
.mr-slot.loser .mr-card {
  filter: grayscale(0.35);
}

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

.mr-card-name {
  font-size: clamp(9px, 2.6vw, 12px);
  font-weight: 800;
  color: rgba(255,255,255,0.8);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.mr-slot.winner .mr-card-name { color: #fff; }
.mr-slot.loser  .mr-card-name { color: rgba(255,255,255,0.4); }

.mr-card-league {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mr-card-league img { width: 20px; height: 20px; object-fit: contain; }

/* VS center column */
.mr-vs-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: clamp(60px, 15vw, 86px);
}

.mr-vs {
  font-size: clamp(0.8rem, 2.6vw, 1.1rem);
  font-weight: 900;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.12em;
}

.mr-amount {
  font-size: clamp(0.9rem, 3.5vw, 1.4rem);
  font-weight: 900;
  line-height: 1;
}
.mr-amount.win     { color: #4ade80; }
.mr-amount.loss    { color: #f87171; }
.mr-amount.spec    { color: #fff; }
.mr-amount.neutral { color: #fbbf24; }

.mr-unit {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Coin animation */
.mr-coins {
  position: relative;
  width: 70px;
  height: 22px;
  overflow: visible;
}
.mr-coin {
  position: absolute;
  font-size: 14px;
  top: 4px;
  left: 50%;
  opacity: 0;
  animation: mrCoinSlide var(--dur,0.85s) var(--delay,0s) ease-in-out forwards;
}
@keyframes mrCoinSlide {
  0%   { transform: translateX(var(--from)) translateY(0) scale(0.6);    opacity: 0; }
  18%  { transform: translateX(calc(var(--from)*0.5)) translateY(-6px) scale(1.25); opacity: 1; }
  82%  { transform: translateX(calc(var(--to)*0.5))   translateY(-6px) scale(1);    opacity: 1; }
  100% { transform: translateX(var(--to))  translateY(3px) scale(0.5);   opacity: 0; }
}

/* Button — same structure as btn-play-main, amber/gold palette */
.mr-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(10px,1.8vh,18px) clamp(28px,5vw,56px);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: clamp(13px, 2vw, 20px);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #3b1a00;
  background: linear-gradient(155deg, #fde68a 0%, #fbbf24 25%, #f59e0b 55%, #b45309 100%);
  box-shadow:
    0 7px 0 #92400e,
    0 9px 0 #78350f,
    0 0 0 3px rgba(251,191,36,0.32),
    0 0 0 6px rgba(245,158,11,0.13),
    0 18px 50px rgba(251,191,36,0.38),
    0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.mr-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.22) 44%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0.22) 56%, transparent 100%);
  animation: menu-shine-play 3.4s ease-in-out infinite;
  pointer-events: none;
}
.mr-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.22) 0%, transparent 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}
.mr-btn:active {
  transform: translateY(7px);
  box-shadow:
    0 1px 0 #92400e,
    0 2px 0 #78350f,
    0 0 0 3px rgba(251,191,36,0.25),
    0 4px 14px rgba(0,0,0,0.35);
}

/* ─── WS status badge mini-spinner ──────────────────────────── */
.ws-status-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ─── Coin Flip Overlay ──────────────────────────────────────────────── */
#overlay-coin-flip { z-index: 110; }
.cf-bg {
  position: absolute; inset: 0;
  background: url('../sprites/menu-bg.webp') center/cover no-repeat;
  opacity: 0.18; pointer-events: none;
}
.cf-container {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 4vh, 36px); color: #fff;
}
.cf-title {
  font-size: clamp(1.1rem, 4vw, 1.8rem);
  font-weight: 900; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45);
}
.cf-scene { perspective: 600px; }
.cf-coin {
  width: clamp(90px, 20vw, 130px);
  height: clamp(90px, 20vw, 130px);
  transform-style: preserve-3d;
  position: relative;
}
.cf-coin--me  { animation: cfFlipMe  2.4s cubic-bezier(.4,0,.15,1) forwards; }
.cf-coin--opp { animation: cfFlipOpp 2.4s cubic-bezier(.4,0,.15,1) forwards; }
/* Lands face-front (me first): 4 full rotations = 1440deg */
@keyframes cfFlipMe {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(1440deg); }
}
/* Lands face-back (opp first): 4.5 rotations = 1620deg */
@keyframes cfFlipOpp {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(1620deg); }
}
.cf-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(36px, 9vw, 56px);
  box-shadow: inset 0 4px 12px rgba(255,255,255,0.15), 0 0 0 4px rgba(255,255,255,0.08);
}
.cf-face-front {
  background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b 60%, #b45309);
  box-shadow: inset 0 4px 12px rgba(255,255,255,0.25), 0 0 0 4px rgba(251,191,36,0.35), 0 0 28px rgba(251,191,36,0.4);
}
.cf-face-back {
  background: radial-gradient(circle at 35% 35%, #60a5fa, #1d4ed8 60%, #1e3a5f);
  box-shadow: inset 0 4px 12px rgba(255,255,255,0.2), 0 0 0 4px rgba(59,130,246,0.35), 0 0 28px rgba(59,130,246,0.3);
  transform: rotateY(180deg);
}
.cf-result { text-align: center; }
.cf-result-text {
  font-size: clamp(1.3rem, 5vw, 2.1rem);
  font-weight: 900; letter-spacing: 0.06em;
  animation: cfResultPop 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.cf-result-text.me-first {
  color: #fbbf24;
  text-shadow: 0 0 28px rgba(251,191,36,0.75);
}
.cf-result-text.opp-first { color: #e0e7ff; }
@keyframes cfResultPop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Pending table bar — pulsing teal dot indicator */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }