/* ===== Theme Tokens ===== */ 
:root { 
 --sky: #7DD3FC; 
 --sun: #FDE047; 
 --pink: #F472B6; 
 --mint: #6EE7B7; 
 --purple: #C084FC; 
 --purple-dark: #7C3AED; 
 --white: #FFFFFF; 
 --shadow: rgba(124, 58, 237, 0.35); 
 --font-display: 'Fredoka', sans-serif; 
 --font-body: 'Quicksand', sans-serif; 
} 
 
/* ===== Base ===== */ 
*, *::before, *::after { 
 box-sizing: border-box; 
} 
 
body { 
 margin: 0; 
 font-family: var(--font-body); 
 background: linear-gradient(160deg, var(--sky) 0%, var(--purple) 50%, var(--pink) 100%); 
 min-height: 100vh; 
} 
 
.font-display { font-family: var(--font-display); } 
.font-body { font-family: var(--font-body); } 
.text-sun { color: var(--sun); } 
 
.hidden { display: none !important; } 
 
/* ===== Global home button ===== */ 
.global-home-btn { 
 position: fixed; 
 bottom: 1rem; 
 left: 1rem; 
 z-index: 300; 
 width: 3rem; 
 height: 3rem; 
 border: none; 
 border-radius: 50%; 
 background: var(--white); 
 box-shadow: 0 4px 16px var(--shadow); 
 font-size: 1.5rem; 
 line-height: 1; 
 cursor: pointer; 
 -webkit-tap-highlight-color: transparent; 
 transition: transform 0.15s ease, box-shadow 0.15s ease; 
} 
 
.global-home-btn:active { 
 transform: scale(0.92); 
} 

.global-share-btn { 
 position: fixed; 
 top: 1rem; 
 right: 1rem; 
 z-index: 300; 
 width: 3rem; 
 height: 3rem; 
 border: none; 
 border-radius: 50%; 
 background: var(--white); 
 box-shadow: 0 4px 16px var(--shadow); 
 font-size: 1.35rem; 
 line-height: 1; 
 cursor: pointer; 
 -webkit-tap-highlight-color: transparent; 
 transition: transform 0.15s ease, box-shadow 0.15s ease; 
} 

.global-share-btn:hover { 
 box-shadow: 0 6px 20px var(--shadow); 
} 

.global-share-btn:active { 
 transform: scale(0.92); 
} 

.global-help-btn { 
 position: fixed; 
 top: 1rem; 
 left: 1rem; 
 z-index: 300; 
 min-width: 3rem; 
 height: 3rem; 
 padding: 0 0.65rem; 
 border: none; 
 border-radius: 999px; 
 background: var(--white); 
 box-shadow: 0 4px 16px var(--shadow); 
 font-family: var(--font-display); 
 font-size: 1.1rem; 
 font-weight: 700; 
 line-height: 1; 
 color: #5B21B6; 
 cursor: pointer; 
 -webkit-tap-highlight-color: transparent; 
 transition: transform 0.15s ease, box-shadow 0.15s ease; 
} 

.global-help-btn:hover { 
 box-shadow: 0 6px 20px var(--shadow); 
} 

.global-help-btn:active { 
 transform: scale(0.92); 
} 

.help-modal { 
 display: flex; 
 flex-direction: column; 
 max-height: min(88vh, 720px); 
 padding: 1.25rem 1.25rem 1rem; 
} 

.help-modal__scroll { 
 flex: 1; 
 overflow-y: auto; 
 padding-left: 0.15rem; 
 margin-bottom: 0.75rem; 
 -webkit-overflow-scrolling: touch; 
} 

.help-modal__title { 
 line-height: 1.2; 
} 

.help-modal__tagline { 
 line-height: 1.4; 
} 

.help-modal__footer { 
 line-height: 1.35; 
} 

.help-modal__close { 
 flex-shrink: 0; 
} 

.help-section { 
 background: rgba(124, 58, 237, 0.06); 
 border-radius: 16px; 
 padding: 0.85rem 1rem; 
 margin-bottom: 0.75rem; 
} 

.help-section--last { 
 margin-bottom: 0; 
} 

.help-section__heading { 
 font-family: var(--font-display); 
 font-size: 1.05rem; 
 font-weight: 700; 
 color: #5B21B6; 
 margin: 0 0 0.5rem; 
} 

.help-section__lead { 
 margin: 0 0 0.45rem; 
 line-height: 1.45; 
} 

.help-section__sub { 
 margin: 0; 
} 

.help-section__list { 
 margin: 0; 
 padding-right: 1.15rem; 
 line-height: 1.5; 
} 

.help-section__list--numbered { 
 list-style: decimal; 
} 

.help-section__list li + li { 
 margin-top: 0.35rem; 
} 

.help-section__tip { 
 margin: 0; 
 line-height: 1.45; 
} 

.help-rewards { 
 display: flex; 
 flex-direction: column; 
 gap: 0.5rem; 
 margin-top: 0.35rem; 
} 

.help-rewards__row { 
 display: flex; 
 flex-direction: column; 
 gap: 0.15rem; 
 padding: 0.5rem 0.65rem; 
 border-radius: 10px; 
 background: rgba(255, 255, 255, 0.75); 
 line-height: 1.4; 
} 

.help-rewards__row span:first-child { 
 font-weight: 700; 
 color: #5B21B6; 
} 
 
/* ===== Screens ===== */ 
.screen { 
 position: fixed; 
 inset: 0; 
 z-index: 1; 
 overflow-y: auto; 
} 
 
.screen--active { z-index: 2; } 
 
.landing-bg, 
.game-bg { 
 position: fixed; 
 inset: 0; 
 background: linear-gradient(160deg, var(--sky) 0%, var(--purple) 50%, var(--pink) 100%); 
 z-index: -1; 
} 
 
.game-bg { 
 background: linear-gradient(180deg, #5B21B6 0%, var(--sky) 60%, var(--mint) 100%); 
} 
 
.screen-content { 
 position: relative; 
 z-index: 1; 
} 
 
/* ===== Title Animation ===== */ 
.app-logo { 
 width: min(14.5rem, 56vw); 
 height: auto; 
 display: block; 
 margin-bottom: 0.75rem; 
 filter: drop-shadow(0 10px 24px rgba(91, 33, 182, 0.45)); 
 animation: titleBounce 2s ease-in-out infinite; 
 user-select: none; 
 -webkit-user-drag: none; 
} 

.title-bounce { 
 animation: titleBounce 2s ease-in-out infinite; 
}

/* ===== Landing news ticker (neon arcade) ===== */
.news-ticker-container {
  position: relative;
  width: 100%;
  max-width: 28rem;
  padding: 0.85rem 0.75rem 0.75rem;
  background: rgba(15, 12, 30, 0.85);
  border: 2px solid rgba(0, 243, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 0 10px #00f3ff, inset 0 0 10px #ff007f;
  overflow: visible;
}

.news-ticker-container--custom {
  border-color: rgba(253, 224, 71, 0.7);
  box-shadow: 0 0 14px #00f3ff, 0 0 18px rgba(255, 0, 127, 0.45), inset 0 0 12px #ff007f;
}

.ticker-badge {
  position: absolute;
  top: -0.65rem;
  inset-inline-end: 0.65rem;
  z-index: 2;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1a0a00;
  background: linear-gradient(135deg, #fde047 0%, #fb923c 55%, #f97316 100%);
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transform: rotate(-5deg);
  animation: tickerBadgePulse 1.6s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes tickerBadgePulse {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(-5deg) scale(1.06); }
}

.ticker-wrap {
  overflow: hidden;
  width: 100%;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  direction: rtl;
}

.ticker-text {
  display: inline-block;
  margin: 0;
  padding: 0 0.25rem;
  direction: rtl;
  text-align: right;
  white-space: nowrap;
  color: #fffef0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.85), 0 0 16px rgba(0, 243, 255, 0.35);
  will-change: transform;
  animation: ticker var(--ticker-duration, 18s) linear infinite;
}

.news-ticker-container--custom .ticker-text {
  color: #fde047;
  text-shadow: 0 0 10px rgba(253, 224, 71, 0.95), 0 0 20px rgba(255, 0, 127, 0.4);
}

@keyframes ticker {
  0% { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}

.news-ticker-container:hover .ticker-text,
.news-ticker-container:active .ticker-text,
.news-ticker-container:focus-within .ticker-text {
  animation-play-state: paused;
}

@media (min-width: 768px) {
  .ticker-text {
    font-size: 1.05rem;
  }
}
 
@keyframes titleBounce { 
 0%, 100% { transform: translateY(0) scale(1); } 
 30% { transform: translateY(-12px) scale(1.04); } 
 50% { transform: translateY(0) scale(1); } 
 70% { transform: translateY(-6px) scale(1.02); } 
} 
 
/* ===== Cards & Panels ===== */ 
.card-panel { 
 background: var(--white); 
 border-radius: 24px; 
 box-shadow: 0 8px 32px var(--shadow), 0 0 0 4px rgba(255, 255, 255, 0.5); 
} 
 
/* ===== Juicy Buttons ===== */ 
.btn-juicy { 
 font-family: var(--font-display); 
 font-size: 1.25rem; 
 font-weight: 600; 
 padding: 1rem 1.5rem; 
 border: none; 
 border-radius: 20px; 
 cursor: pointer; 
 transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease; 
 box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15), 0 8px 20px var(--shadow); 
} 
 
.btn-juicy:hover { 
 transform: translateY(-3px) scale(1.03); 
 box-shadow: 0 9px 0 rgba(0, 0, 0, 0.12), 0 12px 28px var(--shadow); 
} 
 
.btn-juicy:active { 
 transform: translateY(2px) scale(0.97); 
 box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 4px 12px var(--shadow); 
} 
 
.btn-juicy:disabled { 
 opacity: 0.5; 
 cursor: not-allowed; 
 transform: none; 
 box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); 
} 
 
.btn-juicy--primary { 
 background: linear-gradient(180deg, var(--sun) 0%, #FBBF24 100%); 
 color: #78350F; 
} 
 
.btn-juicy--secondary { 
 background: linear-gradient(180deg, var(--mint) 0%, #34D399 100%); 
 color: #064E3B; 
} 
 
.btn-juicy--ghost { 
 background: rgba(255, 255, 255, 0.25); 
 color: var(--white); 
 box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); 
} 
 
.btn-juicy--small { 
 font-size: 1rem; 
 padding: 0.6rem 1rem; 
 border-radius: 14px; 
} 
 
/* ===== Avatar Picker ===== */ 
.avatar-btn { 
 width: 52px; 
 height: 52px; 
 font-size: 1.75rem; 
 border: 3px solid transparent; 
 border-radius: 50%; 
 background: #F3E8FF; 
 cursor: pointer; 
 transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s; 
} 
 
.avatar-btn:hover { 
 transform: scale(1.15) rotate(-5deg); 
} 
 
.avatar-btn--selected { 
 border-color: var(--purple-dark); 
 box-shadow: 0 0 0 4px var(--pink), 0 4px 12px var(--shadow); 
 transform: scale(1.1); 
} 
 
/* ===== Inputs ===== */ 
.nickname-input, 
.share-input { 
 padding: 0.75rem 1rem; 
 border: 3px solid #E9D5FF; 
 border-radius: 14px; 
 font-size: 1rem; 
 outline: none; 
 transition: border-color 0.2s, box-shadow 0.2s; 
} 
 
.nickname-input:focus, 
.share-input:focus { 
 border-color: var(--purple); 
 box-shadow: 0 0 0 4px rgba(192, 132, 252, 0.3); 
} 
 
.share-input { 
 background: #FAF5FF; 
 color: #5B21B6; 
 direction: ltr; 
 text-align: left; 
} 

/* ===== Lobby layout ===== */ 
.lobby-screen { 
 padding-bottom: 2rem; 
} 

.lobby-section { 
 width: 100%; 
 max-width: 32rem; 
 margin-bottom: 1rem; 
} 

.lobby-section--exit { 
 margin-top: 0.25rem; 
 margin-bottom: 0; 
} 
 
/* ===== Profile / User bar ===== */ 
.profile-tab { 
 padding: 0.6rem 1rem; 
 border: none; 
 border-radius: 12px; 
 font-family: var(--font-body); 
 font-weight: 700; 
 font-size: 0.95rem; 
 cursor: pointer; 
 background: transparent; 
 color: #7C3AED; 
 transition: background 0.2s, color 0.2s; 
} 
 
.profile-tab--active { 
 background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%); 
 color: white; 
 box-shadow: 0 4px 0 #6D28D9; 
} 
 
.user-bar__avatar { 
 font-size: 2rem; 
 line-height: 1; 
} 

.owner-badge {
 width: 1.15em;
 height: 1.15em;
 vertical-align: -0.15em;
 margin-inline-end: 0.15em;
 display: inline-block;
 object-fit: contain;
}

.owner-name {
 display: inline-flex;
 align-items: center;
 gap: 0.15em;
}

.score-card__name .owner-badge,
.player-slot__name .owner-badge,
.friends-list__name .owner-badge {
 width: 1em;
 height: 1em;
}
 
/* ===== Friends ===== */ 
.friends-list { 
 display: flex; 
 flex-direction: column; 
 gap: 0.5rem; 
} 
 
.friends-list__row { 
 display: flex; 
 align-items: center; 
 gap: 0.5rem; 
 padding: 0.4rem 0.5rem; 
 border-radius: 12px; 
 background: rgba(124, 58, 237, 0.06); 
} 
 
.friends-list__avatar { 
 font-size: 1.5rem; 
 line-height: 1; 
} 
 
.friends-list__name { 
 font-family: var(--font-body); 
 font-weight: 700; 
 color: #5B21B6; 
 min-width: 0; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 white-space: nowrap; 
} 

.friends-list__info { 
 flex: 1; 
 min-width: 0; 
 display: flex; 
 flex-direction: column; 
 gap: 0.15rem; 
} 

.friends-list__deck { 
 font-family: var(--font-body); 
 font-size: 0.75rem; 
 font-weight: 600; 
 color: #7C3AED; 
} 
 
.btn-invite-friend { 
 flex-shrink: 0; 
} 
 
.player-slot__name-row { 
 display: flex; 
 align-items: center; 
 gap: 0.25rem; 
 justify-content: center; 
 max-width: 100%; 
} 
 
.player-slot__name-row .player-slot__name { 
 overflow: hidden; 
 text-overflow: ellipsis; 
 white-space: nowrap; 
 max-width: 7rem; 
 margin-top: 0; 
} 
 
.btn-add-friend { 
 flex-shrink: 0; 
 width: 1.75rem; 
 height: 1.75rem; 
 padding: 0; 
 border: 2px solid #C084FC; 
 border-radius: 50%; 
 background: white; 
 font-size: 0.85rem; 
 line-height: 1; 
 cursor: pointer; 
 transition: transform 0.15s, background 0.15s; 
} 
 
.btn-add-friend:hover:not(:disabled) { 
 transform: scale(1.1); 
 background: #F3E8FF; 
} 
 
.btn-add-friend--added { 
 border-color: #FDE047; 
 background: #FEF9C3; 
 cursor: default; 
} 
 
.friends-toast { 
 position: fixed; 
 bottom: 1.5rem; 
 left: 50%; 
 transform: translateX(-50%); 
 z-index: 200; 
 padding: 0.75rem 1.25rem; 
 border-radius: 999px; 
 background: #5B21B6; 
 color: white; 
 font-family: var(--font-body); 
 font-weight: 700; 
 box-shadow: 0 8px 24px rgba(91, 33, 182, 0.45); 
 pointer-events: none; 
} 
 
/* ===== Player Slots ===== */ 
.player-slot { 
 aspect-ratio: 1; 
 border: 3px dashed rgba(192, 132, 252, 0.6); 
 border-radius: 24px; 
 background: rgba(255, 255, 255, 0.15); 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 min-height: 120px; 
 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
.player-slot__empty { 
 font-size: 2.5rem; 
 color: rgba(255, 255, 255, 0.4); 
 font-family: var(--font-display); 
} 
 
.player-slot--filled { 
 border: 3px solid var(--white); 
 background: var(--white); 
 box-shadow: 0 8px 24px var(--shadow); 
 animation: slotPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
@keyframes slotPopIn { 
 0% { transform: scale(0.5); opacity: 0; } 
 70% { transform: scale(1.08); } 
 100% { transform: scale(1); opacity: 1; } 
} 
 
.player-slot__avatar { 
 font-size: 3rem; 
 line-height: 1; 
} 
 
.player-slot__name { 
 font-family: var(--font-display); 
 font-size: 1rem; 
 font-weight: 600; 
 color: var(--purple-dark); 
 margin-top: 0.25rem; 
 text-align: center; 
} 
 
.player-slot__pending { 
 font-size: 0.65rem; 
 color: #9CA3AF; 
 font-weight: 600; 
 margin-top: 2px; 
} 
 
.player-slot--reward-pending { 
 opacity: 0.45; 
 filter: grayscale(0.85); 
 border-style: solid; 
 border-color: rgba(156, 163, 175, 0.5); 
} 
 
.player-slot__host { 
 font-size: 0.7rem; 
 background: var(--sun); 
 color: #78350F; 
 padding: 2px 8px; 
 border-radius: 8px; 
 margin-top: 4px; 
 font-weight: 700; 
} 
 
.player-slot__you { 
 font-size: 0.65rem; 
 color: var(--pink); 
 font-weight: 700; 
} 
 
.player-slot .score-card__deck-value { 
 font-size: 0.55rem; 
 margin-top: 0.15rem; 
} 
 
/* ===== Scoreboard ===== */ 
.scoreboard { 
 background: rgba(255, 255, 255, 0.2); 
 backdrop-filter: blur(8px); 
 flex-shrink: 0; 
} 
 
.scoreboard--compact { 
 display: grid !important; 
 grid-template-columns: repeat(2, minmax(0, 1fr)); 
 gap: 0.35rem; 
 padding: 0.4rem 0.5rem !important; 
 max-width: 17rem; 
 margin: 0 auto; 
 width: 100%; 
} 
 
.scoreboard--compact .round-badge { 
 grid-column: 1 / -1; 
 margin-bottom: 0 !important; 
 font-size: 0.7rem !important; 
 line-height: 1.2; 
} 
 
.scoreboard--compact .score-card { 
 min-width: 0; 
 padding: 0.2rem 0.45rem; 
 gap: 0.35rem; 
 border-radius: 10px; 
 transform: none !important; 
} 
 
.scoreboard--compact .score-card--me { 
 transform: none !important; 
} 
 
.scoreboard--compact .score-card__avatar { 
 font-size: 1rem; 
} 
 
.scoreboard--compact .score-card__name { 
 font-size: 0.65rem; 
 line-height: 1.1; 
} 
 
.scoreboard--compact .score-card__points { 
 font-size: 0.6rem; 
} 
 
.score-card__deck-value { 
 font-size: 0.65rem; 
 font-weight: 700; 
 color: #B45309; 
 line-height: 1.2; 
 white-space: nowrap; 
} 
 
.scoreboard--compact .score-card__deck-value { 
 font-size: 0.55rem; 
} 

.scoreboard--dense {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 22rem !important;
  gap: 0.25rem !important;
}

.scoreboard--dense .score-card {
  padding: 0.15rem 0.3rem !important;
}

.scoreboard--dense .score-card__avatar {
  font-size: 0.85rem !important;
}

.scoreboard--dense .score-card__name {
  font-size: 0.55rem !important;
}

.scoreboard--dense .score-card__points {
  font-size: 0.5rem !important;
}

.screen-game--ten-players #scoreboard {
  max-height: 28vh;
  overflow-y: auto;
}

.album-type-filters {
 display: flex; 
 flex-wrap: wrap; 
 gap: 0.35rem; 
 justify-content: center; 
 max-width: 36rem; 
 width: 100%; 
} 
 
.album-type-btn { 
 display: inline-flex; 
 flex-direction: column; 
 align-items: center; 
 gap: 0.1rem; 
 padding: 0.35rem 0.5rem; 
 border: 2px solid rgba(255, 255, 255, 0.35); 
 border-radius: 12px; 
 background: rgba(255, 255, 255, 0.15); 
 color: white; 
 cursor: pointer; 
 min-width: 3rem; 
 transition: transform 0.15s, border-color 0.15s, background 0.15s; 
} 
 
.album-type-btn:hover { 
 transform: translateY(-2px); 
 border-color: var(--sun); 
} 
 
.album-type-btn--active { 
 border-color: var(--sun); 
 background: rgba(253, 224, 71, 0.25); 
 box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.35); 
} 
 
.album-type-btn__emoji { 
 font-size: 1.25rem; 
 line-height: 1; 
} 
 
.album-type-btn__label { 
 font-family: var(--font-body); 
 font-size: 0.6rem; 
 font-weight: 600; 
} 
 
#album-total-value { 
 text-align: center; 
} 
 
.pokemon-card-tile__price { 
 display: block; 
 font-family: var(--font-body); 
 font-size: 0.7rem; 
 font-weight: 700; 
 color: #B45309; 
 margin-top: 0.15rem; 
} 
 
.pokemon-card-tile__types { 
 display: block; 
 font-size: 0.75rem; 
 margin-top: 0.1rem; 
 line-height: 1; 
} 
 
#screen-game.screen-game--many-players .screen-content { 
 min-height: 100vh; 
 max-height: 100vh; 
 overflow: hidden; 
} 
 
#screen-game.screen-game--many-players main { 
 flex: 1; 
 min-height: 0; 
 overflow-y: auto; 
 padding-bottom: 0.5rem; 
} 
 
#screen-game.screen-game--many-players #game-status-text { 
 font-size: 0.95rem; 
 margin-bottom: 0.35rem; 
} 
 
#screen-game.screen-game--many-players .dobble-card { 
 width: min(210px, 68vw); 
 height: min(210px, 68vw); 
} 
 
#screen-game.screen-game--many-players .dobble-arena { 
 gap: 1rem; 
} 
 
#screen-game.screen-game--many-players .dobble-arena__label { 
 font-size: 0.75rem; 
 margin-bottom: 0.25rem !important; 
} 
 
.score-card { 
 background: var(--white); 
 border-radius: 16px; 
 padding: 0.5rem 1rem; 
 display: flex; 
 align-items: center; 
 gap: 0.5rem; 
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
 transition: transform 0.2s; 
 min-width: 100px; 
} 
 
.score-card--me { 
 border: 3px solid var(--sun); 
 transform: scale(1.05); 
} 
 
.score-card--winner { 
 border: 3px solid var(--sun); 
 animation: winnerPulse 1s ease-in-out infinite; 
} 
 
.score-card--leader { 
 border: 2px solid #FBBF24; 
 box-shadow: 0 0 12px rgba(251, 191, 36, 0.35); 
} 
 
@keyframes winnerPulse { 
 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.6); } 
 50% { box-shadow: 0 0 0 8px rgba(253, 224, 71, 0); } 
} 
 
.score-card__avatar { font-size: 1.75rem; } 
.score-card__name { 
 font-family: var(--font-display); 
 font-size: 0.85rem; 
 font-weight: 600; 
 color: var(--purple-dark); 
} 
.score-card__points { 
 font-size: 0.75rem; 
 color: #6B7280; 
} 
 
/* ===== Closed Dumpling (click target) ===== */ 
#game-area { 
 width: 260px; 
 height: 260px; 
} 
 
.dumpling-close-box { 
 position: relative; 
 width: 240px; 
 height: 240px; 
 margin: 0 auto; 
 cursor: pointer; 
 user-select: none; 
 transition: transform 0.1s; 
} 
 
.dumpling-close-box:focus { 
 outline: 3px solid var(--sun); 
 outline-offset: 6px; 
 border-radius: 24px; 
} 
 
.dumpling-close-box__img { 
 width: 100%; 
 height: 100%; 
 object-fit: contain; 
 filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28)); 
 pointer-events: none; 
 animation: closeBoxFloat 2.5s ease-in-out infinite; 
} 
 
@keyframes closeBoxFloat { 
 0%, 100% { transform: translateY(0); } 
 50% { transform: translateY(-8px); } 
} 
 
.dumpling-close-box--hit { 
 animation: hitSquash 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
.dumpling-close-box--hit .dumpling-close-box__img { 
 animation: none; 
} 
 
@keyframes hitSquash { 
 0% { transform: scale(1, 1); } 
 25% { transform: scale(1.12, 0.88); } 
 50% { transform: scale(0.92, 1.08); } 
 75% { transform: scale(1.05, 0.95); } 
 100% { transform: scale(1, 1); } 
} 
 
.dumpling-close-box--open .dumpling-close-box__img { 
 animation: closeBoxOpen 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
} 
 
@keyframes closeBoxOpen { 
 0% { transform: scale(1) rotate(0deg); opacity: 1; } 
 40% { transform: scale(1.25) rotate(-8deg); opacity: 1; } 
 100% { transform: scale(0) rotate(20deg); opacity: 0; } 
} 
 
.dumpling-close-box--disabled { 
 pointer-events: none; 
} 
 
/* ===== Click Progress Dots ===== */ 
.click-dot { 
 width: 16px; 
 height: 16px; 
 border-radius: 50%; 
 background: rgba(255, 255, 255, 0.3); 
 border: 2px solid var(--white); 
 transition: background 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
.click-dot--active { 
 background: var(--sun); 
 transform: scale(1.3); 
 box-shadow: 0 0 12px var(--sun); 
} 
 
/* ===== Particles ===== */ 
.particles-container { 
 position: absolute; 
 inset: -50px; 
 pointer-events: none; 
 overflow: visible; 
 z-index: 10; 
} 
 
.particle { 
 position: absolute; 
 pointer-events: none; 
 border-radius: 50%; 
} 
 
.spark { 
 width: 8px; 
 height: 8px; 
 background: var(--sun); 
 box-shadow: 0 0 6px var(--sun), 0 0 12px var(--pink); 
 animation: sparkFly var(--duration, 0.6s) ease-out forwards; 
} 
 
@keyframes sparkFly { 
 0% { 
 transform: translate(0, 0) scale(1); 
 opacity: 1; 
 } 
 100% { 
 transform: translate(var(--tx), var(--ty)) scale(0); 
 opacity: 0; 
 } 
} 
 
.confetti-piece { 
 position: absolute; 
 width: 10px; 
 height: 14px; 
 border-radius: 2px; 
 animation: confettiFall var(--duration, 1.2s) ease-out forwards; 
} 
 
@keyframes confettiFall { 
 0% { 
 transform: translate(0, 0) rotate(0deg); 
 opacity: 1; 
 } 
 100% { 
 transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); 
 opacity: 0; 
 } 
} 
 
/* ===== Dumpling Cards ===== */ 
.dumpling-card { 
 width: 150px; 
 height: 150px; 
 margin: 0 auto; 
 border-radius: 24px; 
 background-color: #FEF3C7; 
 background-image: var(--dumpling-image, none); 
 background-size: contain; 
 background-position: center; 
 background-repeat: no-repeat; 
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); 
 animation: dumplingReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
 border: 4px solid transparent; 
} 
 
.dumpling-card[data-id="1"] { --dumpling-image: url('assets/dumpling-1.png'); } 
.dumpling-card[data-id="2"] { --dumpling-image: url('assets/dumpling-2.png'); } 
.dumpling-card[data-id="3"] { --dumpling-image: url('assets/dumpling-3.png'); } 
.dumpling-card[data-id="4"] { --dumpling-image: url('assets/dumpling-4.png'); } 
.dumpling-card[data-id="5"] { --dumpling-image: url('assets/dumpling-5.png'); } 
.dumpling-card[data-id="6"] { --dumpling-image: url('assets/dumpling-6.png'); } 
.dumpling-card[data-id="7"] { --dumpling-image: url('assets/dumpling-7.png'); } 
.dumpling-card[data-id="8"] { --dumpling-image: url('assets/dumpling-8.png'); } 
.dumpling-card[data-id="9"] { --dumpling-image: url('assets/dumpling-9.png'); } 
.dumpling-card[data-id="10"] { --dumpling-image: url('assets/dumpling-10.png'); } 
.dumpling-card[data-id="11"] { --dumpling-image: url('assets/dumpling-11.png'); } 
.dumpling-card[data-id="12"] { --dumpling-image: url('assets/dumpling-12.png'); } 
 
.dumpling-card[data-rarity="basic"] { 
 border-color: #9CA3AF; 
 background-color: #F3F4F6; 
} 
 
.dumpling-card[data-rarity="rare"] { 
 border-color: var(--sky); 
 background-color: #E0F2FE; 
} 
 
.dumpling-card[data-rarity="golden"] { 
 border-color: var(--sun); 
 background-color: #FEF9C3; 
 box-shadow: 0 0 20px rgba(253, 224, 71, 0.6); 
} 
 
.dumpling-card[data-rarity="legendary"] { 
 border-color: var(--pink); 
 background-color: #FAE8FF;
 background-image: var(--dumpling-image, none), linear-gradient(135deg, #FDF2F8, #FAE8FF);
 background-size: contain, cover;
 background-position: center, center;
 background-repeat: no-repeat, no-repeat;
 box-shadow: 0 0 24px rgba(244, 114, 182, 0.7); 
 animation: dumplingReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), legendaryGlow 1.5s ease-in-out infinite; 
} 
 
@keyframes dumplingReveal { 
 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 
 100% { transform: scale(1) rotate(0); opacity: 1; } 
} 
 
@keyframes legendaryGlow { 
 0%, 100% { box-shadow: 0 0 24px rgba(244, 114, 182, 0.7); } 
 50% { box-shadow: 0 0 40px rgba(192, 132, 252, 0.9); } 
} 
 
.dumpling-card--small { 
 width: 100px; 
 height: 100px; 
} 
 
.rarity-badge { 
 display: inline-block; 
 padding: 4px 12px; 
 border-radius: 12px; 
 font-family: var(--font-display); 
 font-size: 0.85rem; 
 font-weight: 600; 
} 
 
.rarity-badge--basic { background: #E5E7EB; color: #374151; } 
.rarity-badge--rare { background: var(--sky); color: #0C4A6E; } 
.rarity-badge--golden { background: var(--sun); color: #78350F; } 
.rarity-badge--legendary { background: linear-gradient(90deg, var(--pink), var(--purple)); color: white; } 
 
/* ===== Overlays ===== */ 
.overlay { 
 position: fixed; 
 inset: 0; 
 z-index: 100; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 background: rgba(91, 33, 182, 0.75); 
 backdrop-filter: blur(4px); 
} 
 
.overlay--reveal { background: rgba(91, 33, 182, 0.85); } 
.overlay--winner { background: rgba(0, 0, 0, 0.6); flex-direction: column; } 
.overlay--gameover { background: rgba(91, 33, 182, 0.9); } 
 
.reveal-content { 
 text-align: center; 
 padding: 2rem; 
} 
 
.countdown-number { 
 font-size: 8rem; 
 color: var(--sun); 
 text-shadow: 0 8px 0 #D97706, 0 16px 40px rgba(0, 0, 0, 0.3); 
 animation: countdownPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
@keyframes countdownPop { 
 0% { transform: scale(2); opacity: 0; } 
 60% { transform: scale(0.9); } 
 100% { transform: scale(1); opacity: 1; } 
} 
 
.winner-banner { 
 display: flex; 
 align-items: center; 
 gap: 1rem; 
 animation: winnerBannerIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
@keyframes winnerBannerIn { 
 0% { transform: scale(0) rotate(-10deg); } 
 100% { transform: scale(1) rotate(0); } 
} 
 
.winner-banner__text { 
 font-size: 5rem; 
 color: var(--sun); 
 text-shadow: 0 6px 0 #D97706, 0 0 40px var(--sun); 
 margin: 0; 
} 
 
.winner-banner__sparkle { 
 font-size: 3rem; 
 animation: sparkleSpin 1s linear infinite; 
} 
 
@keyframes sparkleSpin { 
 0% { transform: rotate(0deg) scale(1); } 
 50% { transform: rotate(180deg) scale(1.2); } 
 100% { transform: rotate(360deg) scale(1); } 
} 
 
/* ===== Modal ===== */ 
.modal { 
 position: fixed; 
 inset: 0; 
 z-index: 200; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
} 
 
.modal__backdrop { 
 position: absolute; 
 inset: 0; 
 background: rgba(0, 0, 0, 0.5); 
} 
 
.modal__content { 
 position: relative; 
 z-index: 1; 
} 
 
.pwa-install-modal__icon { 
 width: 7.5rem; 
 height: 7.5rem; 
 object-fit: contain; 
 margin: 0 auto 1rem; 
 border-radius: 1.25rem; 
 box-shadow: 0 8px 24px rgba(123, 63, 242, 0.35); 
} 
 
.pwa-install-modal__ios { 
 background: rgba(123, 63, 242, 0.08); 
 border-radius: 10px; 
 padding: 0.5rem 0.75rem; 
 line-height: 1.5; 
} 
 
/* ===== Errors ===== */ 
.error-msg { 
 color: #FEE2E2; 
 background: rgba(220, 38, 38, 0.8); 
 padding: 0.75rem 1.25rem; 
 border-radius: 12px; 
 font-weight: 600; 
 text-align: center; 
} 
 
/* ===== Final scores list ===== */ 
.final-score-row { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 padding: 0.75rem 0; 
 border-bottom: 2px dashed #E9D5FF; 
 font-family: var(--font-display); 
} 
 
.final-score-row:last-child { border-bottom: none; } 
 
.final-score-row--winner { 
 color: var(--purple-dark); 
 font-weight: 700; 
 font-size: 1.15rem; 
} 

/* ===== Game over panel ===== */
.gameover-panel {
  max-height: 92vh;
  overflow-y: auto;
}

.gameover-scores {
  max-height: 140px;
  overflow-y: auto;
}

.gameover-vote-label {
  font-size: 0.95rem;
}

.gameover-votes .game-card--compact {
  padding: 0.5rem 0.35rem;
  min-height: 5.5rem;
  gap: 0.15rem;
}

.gameover-votes .game-card__icon {
  width: 2rem;
  height: 2rem;
}

.gameover-votes .game-card__icon-emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.gameover-votes .game-card__name {
  font-size: 0.72rem;
  line-height: 1.15;
  margin-top: 0.1rem;
}

.gameover-votes .game-card__desc,
.gameover-votes .game-card__voters,
.gameover-votes .game-card__my-vote {
  display: none;
}

.gameover-votes .game-card__vote-count--compact {
  top: 0.2rem;
  left: 0.2rem;
  right: auto;
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
}

.gameover-host-controls {
  border-top: 2px dashed #E9D5FF;
  padding-top: 0.75rem;
}

/* ===== All reveal grid item ===== */
.reveal-player-card--round-winner { 
 outline: 3px solid var(--sun); 
 box-shadow: 0 0 20px rgba(253, 224, 71, 0.5); 
} 
 
.reveal-player-card { 
 background: rgba(255, 255, 255, 0.95); 
 border-radius: 20px; 
 padding: 1rem; 
 text-align: center; 
 animation: slotPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; 
} 
 
.reveal-player-card__avatar { font-size: 2rem; } 
.reveal-player-card__name { 
 font-family: var(--font-display); 
 font-weight: 600; 
 color: var(--purple-dark); 
 margin: 0.25rem 0; 
} 
 
.text-mint { color: var(--mint); } 
 
.invite-banner { 
 background: var(--sun); 
 color: #78350F; 
 font-family: var(--font-display); 
 font-weight: 700; 
 text-align: center; 
 padding: 1rem 1.25rem; 
 border-radius: 20px; 
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); 
 animation: slotPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
/* ===== Game picker cards ===== */ 
.game-card { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 text-align: center; 
 padding: 1rem; 
 border: 3px solid #E9D5FF; 
 border-radius: 20px; 
 background: #FAF5FF; 
 cursor: pointer; 
 transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s; 
 position: relative; 
} 
 
.game-card:hover:not(:disabled) { 
 transform: translateY(-4px) scale(1.02); 
 border-color: var(--purple); 
} 
 
.game-card--selected { 
 border-color: var(--sun); 
 box-shadow: 0 0 0 4px rgba(253, 224, 71, 0.4); 
 background: #FFFBEB; 
} 
 
.game-card--locked { 
 opacity: 0.55; 
 cursor: not-allowed; 
} 
 
.game-card__icon { 
 width: 64px; 
 height: 64px; 
 object-fit: contain; 
 margin-bottom: 0.5rem; 
} 
 
.game-card__icon-emoji { 
 font-size: 3rem; 
 line-height: 1; 
 margin-bottom: 0.5rem; 
} 
 
.game-card__name { 
 font-family: var(--font-display); 
 font-weight: 700; 
 font-size: 1.1rem; 
 color: var(--purple-dark); 
} 
 
.game-card__desc { 
 font-family: var(--font-body); 
 font-size: 0.75rem; 
 color: #6B7280; 
 margin-top: 0.25rem; 
} 
 
.game-card__badge { 
 position: absolute; 
 top: 8px; 
 left: 8px; 
 background: var(--pink); 
 color: white; 
 font-size: 0.65rem; 
 font-weight: 700; 
 padding: 2px 8px; 
 border-radius: 8px; 
} 
 
.game-card--vote { 
 min-height: 140px; 
} 
 
.game-card--leading { 
 border-color: var(--mint); 
 box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.45); 
} 
 
.game-card__vote-count { 
 position: absolute; 
 top: 8px; 
 right: 8px; 
 background: var(--purple-dark); 
 color: white; 
 font-size: 0.7rem; 
 font-weight: 700; 
 padding: 3px 8px; 
 border-radius: 999px; 
} 
 
.game-card__voters { 
 font-size: 1rem; 
 margin-top: 0.35rem; 
 line-height: 1.2; 
} 
 
.game-card__my-vote { 
 font-family: var(--font-body); 
 font-size: 0.7rem; 
 font-weight: 700; 
 color: #D97706; 
 margin-top: 0.25rem; 
} 
 
/* ===== Album ===== */ 
.album-grid { 
 display: grid; 
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
 gap: 1rem; 
} 
 
.pokemon-card-tile { 
 background: white; 
 border: 3px solid #E9D5FF; 
 border-radius: 16px; 
 padding: 0.5rem; 
 cursor: pointer; 
 transition: transform 0.2s, filter 0.2s, opacity 0.2s; 
 animation: slotPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; 
 position: relative; 
} 
 
.pokemon-card-tile--unlocked:hover { 
 transform: scale(1.05); 
 border-color: var(--purple); 
} 
 
.pokemon-card-tile--locked { 
 background: linear-gradient(160deg, #f3f4f6 0%, #e5e7eb 100%); 
 border-color: #cbd5e1; 
 filter: grayscale(0.65); 
 opacity: 0.92; 
} 
 
.pokemon-card-tile--locked:hover { 
 transform: scale(1.02); 
 border-color: #94a3b8; 
} 
 
.pokemon-card-tile--locked .pokemon-card-tile__name, 
.pokemon-card-tile--locked .pokemon-card-tile__price, 
.pokemon-card-tile--locked .pokemon-card-tile__rarity { 
 color: #4b5563; 
} 
 
.pokemon-card-tile__placeholder { 
 width: 100%; 
 aspect-ratio: 2.5 / 3.5; 
 display: flex; 
 flex-direction: column;
 align-items: center; 
 justify-content: center; 
 gap: 0.2rem;
 border-radius: 8px; 
 background: linear-gradient(145deg, #d1d5db 0%, #9ca3af 100%); 
 user-select: none; 
}

.pokemon-card-tile__placeholder-q {
 font-family: var(--font-display);
 font-size: 2.75rem;
 font-weight: 700;
 color: rgba(255, 255, 255, 0.85);
 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 line-height: 1;
}

.pokemon-card-tile__placeholder-label {
 font-family: var(--font-body);
 font-size: 0.62rem;
 font-weight: 700;
 color: rgba(75, 85, 99, 0.95);
 letter-spacing: 0.02em;
} 
 
.pokemon-card-tile__placeholder--small { 
 font-size: 2rem; 
 aspect-ratio: 2.5 / 3.5; 
}

.pokemon-card-tile__media {
 position: relative;
 width: 100%;
}

.pokemon-card-tile__img {
 width: 100%;
 aspect-ratio: 2.5 / 3.5;
 object-fit: contain;
 border-radius: 8px;
}

.pokemon-card-tile__owned-badge {
 position: absolute;
 top: 0.25rem;
 right: 0.25rem;
 z-index: 2;
 font-size: 0.75rem;
 line-height: 1;
 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.pokemon-card-tile__owned-fallback {
 width: 100%;
 aspect-ratio: 2.5 / 3.5;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 border-radius: 8px;
 background: linear-gradient(145deg, #FDE68A 0%, #F472B6 55%, #C084FC 100%);
 border: 2px solid #F59E0B;
}

.pokemon-card-tile__owned-initial {
 font-family: var(--font-display);
 font-size: 2.25rem;
 font-weight: 700;
 color: #fff;
 text-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
}

.pokemon-card-tile__owned-hint {
 font-family: var(--font-body);
 font-size: 0.6rem;
 font-weight: 700;
 color: rgba(255, 255, 255, 0.95);
 letter-spacing: 0.02em;
}

.pokemon-card-tile--no-img {
 border-color: #F59E0B;
 box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
} 
 
.pokemon-card-tile__lock { 
 position: absolute; 
 top: 0.35rem; 
 left: 0.35rem; 
 font-size: 0.85rem; 
 line-height: 1; 
 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); 
} 
 
.pokemon-card-tile__rarity { 
 display: block; 
 font-family: var(--font-body); 
 font-size: 0.6rem; 
 font-weight: 600; 
 color: #6b7280; 
 margin-top: 0.1rem; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 white-space: nowrap; 
} 
 
.pokemon-card-tile__badge {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--purple);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
 
.pokemon-card-tile img { 
 width: 100%; 
 height: auto; 
 border-radius: 8px; 
} 
 
.pokemon-card-tile__name { 
 display: block; 
 font-family: var(--font-display); 
 font-size: 0.7rem; 
 color: var(--purple-dark); 
 margin-top: 0.35rem; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 white-space: nowrap; 
} 
 
.album-scroll-sentinel {
  width: 100%;
  height: 4px;
  margin-bottom: 1rem;
}

#album-load-more {
  min-height: 1.25rem;
}

.album-modal__locked-note { 
 background: rgba(123, 63, 242, 0.1); 
 border-radius: 10px; 
 padding: 0.5rem 0.75rem; 
 margin-bottom: 0.75rem; 
 font-weight: 600; 
} 
 
.album-modal__img { 
 max-width: 200px; 
 border-radius: 12px; 
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 
} 
 
/* ===== Card reward overlay ===== */ 
.overlay--reward { 
 background: rgba(91, 33, 182, 0.92); 
 z-index: 250; 
} 
 
.reward-panel { 
 max-height: 95vh; 
 overflow-y: auto; 
} 
 
.reward-card-stage { 
 display: block; 
 width: 100%; 
 margin: 0 auto; 
 padding: 0; 
 border: none; 
 background: transparent; 
 cursor: pointer; 
 -webkit-tap-highlight-color: transparent; 
} 
 
.reward-card-stage__frame { 
 position: relative; 
 display: inline-block; 
 margin: 0 auto; 
} 
 
.reward-card__img { 
 display: block; 
 width: min(200px, 70vw); 
 max-height: 280px; 
 object-fit: contain; 
 border-radius: 14px; 
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); 
 transition: filter 0.05s; 
} 
 
.reward-card__img--hidden { 
 filter: brightness(0) contrast(0.9); 
} 
 
.reward-card__img--revealed { 
 filter: none; 
 animation: cardRevealPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
.reward-card__veil { 
 position: absolute; 
 inset: 0; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 border-radius: 14px; 
 background: linear-gradient(145deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%); 
 box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5); 
 transition: opacity 0.35s ease, transform 0.35s ease; 
 pointer-events: none; 
} 
 
.reward-card__veil--gone { 
 opacity: 0; 
 transform: scale(1.08); 
} 
 
.reward-card__veil-icon { 
 font-family: var(--font-display); 
 font-size: 4rem; 
 color: rgba(255, 255, 255, 0.35); 
 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); 
} 
 
.reward-tap-hint { 
 animation: tapHintPulse 1.2s ease-in-out infinite; 
} 
 
.reward-tap-hint--hidden { 
 display: none; 
} 
 
.reward-card-info--visible { 
 animation: fadeSlideUp 0.4s ease; 
} 
 
@keyframes cardRevealPop { 
 0% { transform: scale(0.85) rotateY(-12deg); opacity: 0.6; } 
 60% { transform: scale(1.06) rotateY(4deg); } 
 100% { transform: scale(1) rotateY(0); opacity: 1; } 
} 
 
@keyframes tapHintPulse { 
 0%, 100% { opacity: 1; transform: scale(1); } 
 50% { opacity: 0.65; transform: scale(0.98); } 
} 
 
@keyframes fadeSlideUp { 
 from { opacity: 0; transform: translateY(12px); } 
 to { opacity: 1; transform: translateY(0); } 
} 
 
/* ===== Dobble ===== */ 
.dobble-arena { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 gap: 2rem; 
 width: 100%; 
} 
 
.dobble-arena__center, 
.dobble-arena__player { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
} 
 
.dobble-card-wrap { 
 position: relative; 
} 
 
.dobble-card { 
 position: relative; 
 width: min(260px, 82vw); 
 height: min(260px, 82vw); 
 border-radius: 50%; 
 background: #ffffff; 
 box-shadow: 0 14px 36px rgba(91, 33, 182, 0.35), 0 4px 0 rgba(124, 58, 237, 0.15); 
 animation: dobbleFloat 3.5s ease-in-out infinite; 
 overflow: visible; 
} 
 
.dobble-card--player { 
 animation-delay: 0.4s; 
 border: 4px solid var(--sun); 
} 
 
.dobble-card--center { 
 border: 4px solid var(--mint); 
} 
 
.dobble-card--cooldown { 
 opacity: 0.55; 
 pointer-events: none; 
} 
 
.dobble-card--dense .dobble-symbol { 
 width: 2.55rem; 
 height: 2.55rem; 
 font-size: 1.65rem; 
 padding: 0.3rem; 
} 

.dobble-card--dense .dobble-symbol::before { 
 inset: -0.4rem; 
} 
 
.dobble-card--shake { 
 animation: dobbleShake 0.45s ease; 
} 
 
@keyframes dobbleFloat { 
 0%, 100% { transform: translateY(0); } 
 50% { transform: translateY(-8px); } 
} 
 
@keyframes dobbleShake { 
 0%, 100% { transform: translateX(0); } 
 20% { transform: translateX(-10px); } 
 40% { transform: translateX(10px); } 
 60% { transform: translateX(-8px); } 
 80% { transform: translateX(8px); } 
} 
 
.dobble-symbol { 
 position: absolute; 
 left: 50%; 
 top: 50%; 
 width: 3.1rem; 
 height: 3.1rem; 
 margin: 0; 
 padding: 0.4rem; 
 box-sizing: border-box; 
 border: none; 
 background: transparent; 
 font-size: 2.1rem; 
 line-height: 1; 
 cursor: pointer; 
 user-select: none; 
 -webkit-tap-highlight-color: transparent; 
 transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--scale, 1)); 
 transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s; 
 z-index: 1; 
 touch-action: manipulation; 
} 

.dobble-symbol::before { 
 content: ''; 
 position: absolute; 
 inset: -0.5rem; 
 border-radius: 50%; 
} 

.dobble-symbol img { 
 width: 100%; 
 height: 100%; 
 object-fit: contain; 
 pointer-events: none; 
} 

.dobble-symbol:hover:not(:disabled),
.dobble-symbol:focus-visible:not(:disabled) { 
 z-index: 10; 
 transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(calc(var(--scale, 1) * 1.12)); 
} 

.dobble-symbol--pressed { 
 transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(calc(var(--scale, 1) * 0.92)); 
} 

.dobble-symbol--wrong { 
 animation: dobbleSymbolWrong 0.45s ease; 
} 

.dobble-symbol--matched { 
 animation: dobbleSymbolMatch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
 z-index: 5; 
} 
 
@keyframes dobbleSymbolWrong { 
 0%, 100% { filter: none; } 
 50% { filter: hue-rotate(-40deg) saturate(2); } 
} 
 
@keyframes dobbleSymbolMatch { 
 50% { filter: drop-shadow(0 0 8px var(--sun)); } 
} 
 
.dobble-celebration { 
 position: absolute; 
 inset: 0; 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 pointer-events: none; 
 z-index: 10; 
} 
 
.dobble-celebration__avatar { 
 font-size: 3rem; 
 line-height: 1; 
 filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); 
} 
 
.dobble-celebration__plus { 
 font-family: var(--font-display); 
 font-size: 2.5rem; 
 font-weight: 700; 
 color: var(--sun); 
 text-shadow: 0 3px 0 #D97706, 0 6px 16px rgba(0, 0, 0, 0.35); 
} 
 
.dobble-celebration--pop { 
 animation: dobbleCelebPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
@keyframes dobbleCelebPop { 
 0% { transform: scale(0.3); opacity: 0; } 
 70% { transform: scale(1.15); opacity: 1; } 
 100% { transform: scale(1); opacity: 1; } 
} 
 
@media (min-width: 640px) { 
 .dobble-arena { 
 flex-direction: row; 
 justify-content: center; 
 align-items: flex-end; 
 gap: 3rem; 
 } 
} 
 
/* ===== Trivia ===== */ 
.trivia-progress-wrap { 
 width: 100%; 
 margin-bottom: 1rem; 
 padding: 0 0.5rem; 
} 
 
.trivia-progress { 
 position: relative; 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 2px; 
 padding: 0.5rem 0; 
 min-height: 2.5rem; 
} 
 
.trivia-progress__step { 
 flex: 1; 
 height: 0.65rem; 
 border-radius: 999px; 
 background: rgba(255, 255, 255, 0.25); 
 transition: background 0.3s, transform 0.3s; 
} 
 
.trivia-progress__step--done { 
 background: var(--mint); 
 box-shadow: 0 0 8px rgba(110, 231, 183, 0.6); 
} 
 
.trivia-progress__step--current { 
 background: var(--sun); 
 transform: scaleY(1.3); 
 box-shadow: 0 0 10px rgba(253, 224, 71, 0.7); 
} 
 
.trivia-progress__char { 
 position: absolute; 
 top: -0.35rem; 
 left: 0; 
 font-size: 1.5rem; 
 transition: left 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); 
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); 
 pointer-events: none; 
} 
 
.trivia-arena { 
 background: rgba(255, 255, 255, 0.12); 
 backdrop-filter: blur(8px); 
 border-radius: 1.25rem; 
 padding: 1.25rem; 
 border: 2px solid rgba(255, 255, 255, 0.25); 
} 
 
.trivia-arena__header { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 1rem; 
 margin-bottom: 1rem; 
} 
 
.trivia-topic-badge { 
 display: inline-flex; 
 align-items: center; 
 gap: 0.35rem; 
 background: var(--white); 
 color: var(--purple-dark); 
 padding: 0.35rem 0.85rem; 
 border-radius: 999px; 
 font-family: var(--font-body); 
 font-weight: 700; 
 font-size: 0.95rem; 
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
} 
 
.trivia-topic-badge__emoji { 
 font-size: 1.2rem; 
} 
 
.trivia-timer { 
 position: relative; 
 width: 4.5rem; 
 height: 4.5rem; 
 flex-shrink: 0; 
} 
 
.trivia-timer__svg { 
 width: 100%; 
 height: 100%; 
 transform: rotate(-90deg); 
} 
 
.trivia-timer__bg { 
 fill: none; 
 stroke: rgba(255, 255, 255, 0.2); 
 stroke-width: 8; 
} 
 
.trivia-timer__ring { 
 fill: none; 
 stroke: var(--mint); 
 stroke-width: 8; 
 stroke-linecap: round; 
 stroke-dasharray: 283; 
 stroke-dashoffset: 0; 
 transition: stroke 0.2s; 
} 
 
.trivia-timer--urgent .trivia-timer__ring { 
 stroke: #EF4444; 
 animation: triviaTimerShake 0.35s ease-in-out infinite; 
} 
 
.trivia-timer--urgent .trivia-timer__num { 
 color: #EF4444; 
 animation: triviaTimerPulse 0.5s ease-in-out infinite; 
} 
 
.trivia-timer__num { 
 position: absolute; 
 inset: 0; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 font-size: 1.5rem; 
 color: var(--white); 
 text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 
 
@keyframes triviaTimerShake { 
 0%, 100% { transform: rotate(-90deg) translateX(0); } 
 25% { transform: rotate(-90deg) translateX(-2px); } 
 75% { transform: rotate(-90deg) translateX(2px); } 
} 
 
@keyframes triviaTimerPulse { 
 0%, 100% { transform: scale(1); } 
 50% { transform: scale(1.15); } 
} 
 
.trivia-question { 
 color: var(--white); 
 font-size: clamp(1.25rem, 4vw, 1.75rem); 
 text-align: center; 
 margin: 0 0 1.25rem; 
 line-height: 1.35; 
 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 
} 
 
.trivia-answers { 
 display: grid; 
 grid-template-columns: 1fr 1fr; 
 gap: 0.75rem; 
} 
 
.trivia-answer-btn { 
 display: flex; 
 align-items: center; 
 gap: 0.65rem; 
 padding: 1rem 0.85rem; 
 border: none; 
 border-radius: 1rem; 
 background: var(--white); 
 color: var(--purple-dark); 
 font-family: var(--font-body); 
 font-weight: 600; 
 font-size: 1rem; 
 text-align: right; 
 cursor: pointer; 
 box-shadow: 0 6px 0 #C4B5FD, 0 8px 20px rgba(0, 0, 0, 0.15); 
 transition: transform 0.15s, box-shadow 0.15s; 
 -webkit-tap-highlight-color: transparent; 
} 
 
.trivia-answer-btn:hover:not(:disabled) { 
 transform: translateY(-3px) rotate(-1deg); 
 box-shadow: 0 9px 0 #C4B5FD, 0 12px 24px rgba(0, 0, 0, 0.2); 
} 
 
.trivia-answer-btn:active:not(:disabled) { 
 transform: translateY(2px); 
 box-shadow: 0 3px 0 #C4B5FD; 
} 
 
.trivia-answer-btn__letter { 
 flex-shrink: 0; 
 width: 2rem; 
 height: 2rem; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 border-radius: 50%; 
 background: var(--purple); 
 color: var(--white); 
 font-weight: 700; 
} 
 
.trivia-answer-btn__text { 
 flex: 1; 
 line-height: 1.25; 
} 
 
.trivia-answer-btn--selected { 
 background: #EDE9FE; 
 outline: 3px solid var(--purple-dark); 
} 
 
.trivia-answer-btn--correct { 
 background: #6EE7B7 !important; 
 box-shadow: 0 6px 0 #059669 !important; 
 outline: 3px solid #059669; 
} 
 
.trivia-answer-btn--wrong { 
 background: #FCA5A5 !important; 
 box-shadow: 0 6px 0 #DC2626 !important; 
 animation: triviaWrongShake 0.45s ease; 
} 
 
.trivia-answer-btn--disabled { 
 opacity: 0.85; 
 cursor: default; 
} 
 
@keyframes triviaWrongShake { 
 0%, 100% { transform: translateX(0); } 
 20% { transform: translateX(-6px); } 
 40% { transform: translateX(6px); } 
 60% { transform: translateX(-4px); } 
 80% { transform: translateX(4px); } 
} 
 
.trivia-feedback { 
 margin-top: 1.25rem; 
 text-align: center; 
} 
 
.trivia-feedback__msg { 
 font-family: var(--font-display); 
 font-size: 2rem; 
 margin: 0; 
} 
 
.trivia-feedback__msg--win { 
 color: var(--sun); 
 animation: triviaBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
} 
 
.trivia-feedback__msg--lose { 
 color: rgba(255, 255, 255, 0.95); 
 animation: triviaWrongShake 0.5s ease; 
} 
 
.trivia-feedback__points { 
 color: var(--white); 
 font-weight: 700; 
 font-size: 1.15rem; 
 margin: 0.35rem 0 0; 
} 
 
@keyframes triviaBounce { 
 0% { transform: scale(0.5); opacity: 0; } 
 60% { transform: scale(1.15); opacity: 1; } 
 100% { transform: scale(1); } 
} 
 
.overlay--trivia-podium { 
 background: rgba(91, 33, 182, 0.92); 
 z-index: 220; 
} 
 
.trivia-podium { 
 display: flex; 
 align-items: flex-end; 
 justify-content: center; 
 gap: 0.5rem; 
 min-height: 220px; 
} 
 
.trivia-podium__slot { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 flex: 1; 
 max-width: 120px; 
 animation: triviaPodiumIn 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; 
} 
 
.trivia-podium__slot--1 { animation-delay: 0.15s; } 
.trivia-podium__slot--2 { animation-delay: 0s; } 
.trivia-podium__slot--3 { animation-delay: 0.3s; } 
 
.trivia-podium__slot--me .trivia-podium__avatar { 
 outline: 4px solid var(--sun); 
} 
 
.trivia-podium__crown { 
 font-size: 1.75rem; 
 margin-bottom: 0.25rem; 
} 
 
.trivia-podium__crown--gold { 
 font-size: 2.25rem; 
 animation: triviaCrownBounce 1s ease-in-out infinite; 
} 
 
.trivia-podium__avatar { 
 font-size: 3rem; 
 line-height: 1; 
 border-radius: 50%; 
 padding: 0.15rem; 
} 
 
.trivia-podium__name { 
 font-size: 0.85rem; 
 color: var(--purple-dark); 
 margin-top: 0.35rem; 
} 
 
.trivia-podium__score { 
 font-size: 0.8rem; 
 color: #7C3AED; 
 font-weight: 700; 
} 
 
.trivia-podium__stand { 
 width: 100%; 
 margin-top: 0.5rem; 
 border-radius: 0.5rem 0.5rem 0 0; 
 background: linear-gradient(180deg, var(--purple) 0%, var(--purple-dark) 100%); 
} 
 
.trivia-podium__stand--1 { height: 100px; } 
.trivia-podium__stand--2 { height: 70px; } 
.trivia-podium__stand--3 { height: 50px; } 
 
@keyframes triviaPodiumIn { 
 from { transform: translateY(40px); opacity: 0; } 
 to { transform: translateY(0); opacity: 1; } 
} 
 
@keyframes triviaCrownBounce { 
 0%, 100% { transform: translateY(0) rotate(-5deg); } 
 50% { transform: translateY(-6px) rotate(5deg); } 
} 
 
@media (max-width: 480px) { 
 .trivia-answers { 
 grid-template-columns: 1fr; 
 } 
} 

/* ── Stacker (מגדל הבלוקים) ── */
.stacker-layout {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

.stacker-stage-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
  cursor: pointer;
}

.stacker-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: background-color 0.8s ease, background 0.8s ease;
}

.stacker-bg--sky {
  background-color: #7DD3FC;
}

.stacker-bg--sunset {
  background: linear-gradient(180deg, #FB923C 0%, #C084FC 100%);
}

.stacker-bg--space {
  background-color: #4C1D95;
}

.stacker-bg--deep {
  background-color: #050508;
}

.stacker-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stacker-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: stackerTwinkle 2.5s ease-in-out infinite;
}

@keyframes stackerTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.stacker-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0 auto;
}

.stacker-height-label {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  pointer-events: none;
}

.stacker-local-msg {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
  padding: 1rem;
  pointer-events: none;
}

.stacker-altitude {
  width: 4.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stacker-altitude__title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.stacker-altitude__track {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 280px;
  background: linear-gradient(to top, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  overflow: visible;
}

.stacker-altitude__finish {
  position: absolute;
  top: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  z-index: 1;
}

.stacker-altitude__marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: bottom 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: 2;
}

.stacker-altitude__marker--me .stacker-altitude__avatar {
  outline: 3px solid var(--sun, #FDE047);
  outline-offset: 2px;
}

.stacker-altitude__marker--out {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.stacker-altitude__avatar {
  font-size: 1.35rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.stacker-altitude__height {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 0.1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.stacker-hint {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#screen-game.screen-game--many-players .stacker-layout {
  gap: 0.5rem;
}

#screen-game.screen-game--many-players .stacker-altitude {
  width: 3.75rem;
}

@media (max-width: 400px) {
  .stacker-altitude__title {
    font-size: 0.55rem;
  }
  .stacker-altitude {
    width: 3.25rem;
  }
}

/* Speed Collect Battle */
#screen-game.screen-game--speed-collect .screen-content {
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

#screen-game.screen-game--speed-collect main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  justify-content: stretch;
}

#screen-game.screen-game--speed-collect #game-status-text {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  padding: 0 0.5rem;
}

#screen-game.screen-game--speed-collect #scoreboard {
  padding: 0.35rem 0.5rem;
}

.scb-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  align-self: stretch;
}

.scb-stage-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #87ceeb;
  touch-action: none;
}

.scb-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.scb-timer {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 2;
}

.scb-timer--urgent {
  background: rgba(220, 38, 38, 0.85);
  animation: scb-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes scb-pulse {
  from { transform: translateX(-50%) scale(1); }
  to { transform: translateX(-50%) scale(1.08); }
}

.scb-freeze-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(100, 149, 237, 0.55);
  backdrop-filter: blur(2px);
  z-index: 3;
  pointer-events: none;
}

.scb-freeze-overlay__icon {
  font-size: 3rem;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.scb-freeze-overlay__label {
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.scb-freeze-overlay__time {
  color: #e0f2fe;
  font-weight: 700;
  font-size: 1.1rem;
}

.scb-attack-hud {
  position: absolute;
  top: 3rem;
  left: 0.75rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.85rem;
  border: none;
  border-radius: 1rem;
  background: linear-gradient(145deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 6px 0 #7f1d1d, 0 0 24px rgba(239, 68, 68, 0.65);
  cursor: pointer;
  animation: scbAttackPulse 0.9s ease-in-out infinite;
}

.scb-attack-hud__icon {
  font-size: 2rem;
  line-height: 1;
}

.scb-attack-hud__label {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.scb-attack-hud:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #7f1d1d, 0 0 16px rgba(239, 68, 68, 0.5);
}

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

.scb-hud-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  border-top: 2px solid rgba(124, 58, 237, 0.2);
  flex-shrink: 0;
}

.scb-hud-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 4.5rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.65rem;
  background: rgba(124, 58, 237, 0.06);
  border: 2px solid transparent;
}

.scb-hud-chip--me {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.15);
}

.scb-hud-chip--charged {
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.scb-hud-chip__avatar {
  font-size: 1.35rem;
  line-height: 1;
}

.scb-hud-chip__score {
  font-weight: 800;
  font-size: 0.8rem;
  color: #7c3aed;
}

.scb-stone-meter {
  display: flex;
  gap: 2px;
  width: 100%;
}

.scb-stone-meter--compact {
  max-width: 4.25rem;
}

.scb-stone-meter__seg {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

.scb-stone-meter__seg--on {
  background: var(--player-color, #f472b6);
  box-shadow: 0 0 4px var(--player-color, #f472b6);
}

@media (max-width: 520px) {
  .scb-hud-bar {
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
  }
  .scb-hud-chip {
    min-width: 3.75rem;
    padding: 0.25rem 0.35rem;
  }
  .scb-attack-hud {
    top: 2.75rem;
    left: 0.5rem;
    padding: 0.45rem 0.65rem;
  }
  .scb-attack-hud__icon {
    font-size: 1.65rem;
  }
}

/* Home podium + leaderboard */
.landing-podium-wrap {
  background: rgba(255, 255, 255, 0.94);
}

.landing-podium__title {
  font-size: 0.95rem;
}

.home-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  min-height: 160px;
}

.home-podium__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 100px;
  animation: homePodiumIn 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

.home-podium__slot--1 { animation-delay: 0.12s; }
.home-podium__slot--2 { animation-delay: 0s; }
.home-podium__slot--3 { animation-delay: 0.24s; }

.home-podium__slot--empty .home-podium__avatar,
.home-podium__slot--empty .home-podium__name {
  opacity: 0.45;
}

.home-podium__slot--me .home-podium__avatar {
  outline: 3px solid var(--sun);
  border-radius: 50%;
}

.home-podium__crown {
  font-size: 1.35rem;
  margin-bottom: 0.15rem;
  line-height: 1;
}

.home-podium__crown--gold {
  font-size: 1.75rem;
  animation: triviaCrownBounce 1s ease-in-out infinite;
}

.home-podium__avatar {
  font-size: 2rem;
  line-height: 1;
}

.home-podium__name {
  font-size: 0.7rem;
  color: var(--purple-dark);
  margin-top: 0.2rem;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-podium__score {
  font-size: 0.65rem;
  color: #7C3AED;
  font-weight: 700;
}

.home-podium__stand {
  width: 100%;
  margin-top: 0.35rem;
  border-radius: 0.4rem 0.4rem 0 0;
  background: linear-gradient(180deg, #C4B5FD 0%, #7C3AED 100%);
}

.home-podium__stand--1 {
  height: 72px;
  background: linear-gradient(180deg, #FDE68A 0%, #F59E0B 100%);
}

.home-podium__stand--2 {
  height: 52px;
  background: linear-gradient(180deg, #E5E7EB 0%, #9CA3AF 100%);
}

.home-podium__stand--3 {
  height: 38px;
  background: linear-gradient(180deg, #FED7AA 0%, #EA580C 100%);
}

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

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: min(60vh, 480px);
  overflow-y: auto;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  background: rgba(124, 58, 237, 0.06);
}

.leaderboard-row--me {
  background: rgba(251, 191, 36, 0.2);
  box-shadow: inset 0 0 0 2px var(--sun);
}

.leaderboard-row--top1 {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.15), rgba(124, 58, 237, 0.06));
}

.leaderboard-row--top2 {
  background: linear-gradient(90deg, rgba(156, 163, 175, 0.15), rgba(124, 58, 237, 0.06));
}

.leaderboard-row--top3 {
  background: linear-gradient(90deg, rgba(234, 88, 12, 0.12), rgba(124, 58, 237, 0.06));
}

.leaderboard-row__rank {
  width: 1.75rem;
  text-align: center;
  font-weight: 800;
  color: var(--purple-dark);
  flex-shrink: 0;
}

.leaderboard-row__avatar {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.leaderboard-row__name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--purple-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row__value {
  font-weight: 800;
  color: #7C3AED;
  flex-shrink: 0;
  font-size: 0.85rem;
}

/* User profile */
.profile-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  font: inherit;
  border-radius: 50%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-avatar-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45);
}

.profile-avatar-btn:active {
  transform: scale(0.98);
}

.user-profile-modal__avatar {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.user-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.user-profile-stat {
  background: rgba(124, 58, 237, 0.08);
  border-radius: 0.65rem;
  padding: 0.5rem 0.35rem;
}

.user-profile-stat__label {
  display: block;
  font-size: 0.7rem;
  color: #7C3AED;
  margin-bottom: 0.15rem;
}

.user-profile-stat__value {
  font-size: 1.1rem;
  color: var(--purple-dark);
}

.user-profile-top-card {
  background: rgba(251, 191, 36, 0.12);
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-top: 0.25rem;
}

.user-profile-top-card__title {
  font-size: 0.85rem;
}

.user-profile-top-card__img {
  max-width: 140px;
  max-height: 196px;
  margin: 0 auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.user-profile-top-card__empty {
  font-size: 2.5rem;
  margin: 0.5rem 0;
}

.home-podium .profile-avatar-btn {
  font-size: 2rem;
}

.leaderboard-row__avatar .profile-avatar-btn {
  font-size: 1.5rem;
}

.friends-list__avatar .profile-avatar-btn {
  font-size: 1.75rem;
}

.player-slot__avatar .profile-avatar-btn {
  font-size: 2.5rem;
}

.score-card__avatar .profile-avatar-btn {
  font-size: 1.75rem;
}

/* ===== Wagering / Battle mode ===== */
.wager-mode-host {
  width: 100%;
}

.wager-mode-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 0.5rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(124, 58, 237, 0.25);
  background: rgba(255, 255, 255, 0.85);
  color: var(--purple-dark);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.wager-mode-btn--small {
  font-size: 0.75rem;
  padding: 0.4rem 0.35rem;
}

.wager-mode-btn--active {
  background: linear-gradient(135deg, #F472B6, #C084FC);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px var(--shadow);
}

.wager-mode-btn:not(.wager-mode-btn--active):hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.2);
}

.wager-mode-badge {
  color: var(--purple-dark);
  font-weight: 600;
}

.wager-mode-badge--battle {
  color: #DC2626;
}

.wager-grid {
  min-height: 4rem;
}

.wager-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem;
  border-radius: 0.5rem;
  border: 2px solid rgba(124, 58, 237, 0.15);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.wager-card-tile:hover:not(:disabled) {
  border-color: var(--purple);
  transform: scale(1.03);
}

.wager-card-tile--selected {
  border-color: #F59E0B;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
}

.wager-card-tile:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.wager-card-tile__img {
  width: 100%;
  max-height: 72px;
  object-fit: contain;
  border-radius: 0.25rem;
}

.wager-grid--compact .wager-card-tile__img {
  max-height: 48px;
}

.wager-card-tile__placeholder {
  font-size: 1.75rem;
  line-height: 1;
}

.wager-card-tile--owned {
  border-color: #E9D5FF;
}

.wager-card-tile__media {
  position: relative;
  width: 100%;
}

.wager-card-tile__owned-fallback {
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border-radius: 6px;
  background: linear-gradient(145deg, #FDE68A 0%, #F472B6 55%, #C084FC 100%);
  border: 2px solid #F59E0B;
}

.wager-card-tile__owned-initial {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.wager-card-tile__owned-hint {
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.wager-card-tile__name {
  font-size: 0.6rem;
  color: var(--purple-dark);
  margin-top: 0.2rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.wager-card-tile__price {
  display: block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  color: #059669;
  text-align: center;
  margin-top: 0.1rem;
}

.wager-selected-summary {
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(253, 224, 71, 0.2), rgba(192, 132, 252, 0.15));
  border: 2px solid rgba(245, 158, 11, 0.45);
}

.wager-selected-summary--compact {
  padding: 0.5rem;
}

.wager-selected-summary__label {
  text-align: center;
  font-size: 0.8rem;
  margin-bottom: 0.35rem !important;
}

.wager-selected-summary__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}

.wager-selected-summary__img {
  width: 48px;
  height: 67px;
  object-fit: contain;
  border-radius: 0.35rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.wager-selected-summary__placeholder {
  font-size: 2rem;
  line-height: 1;
}

.wager-selected-summary__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.wager-selected-summary__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--purple-dark);
}

.wager-selected-summary__price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: #059669;
}

.player-slot__wager-price {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: #059669;
  margin-top: 0.1rem;
}

.player-slot__ready {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.15);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  margin-top: 0.25rem;
}

.player-slot__forfeit {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #DC2626;
  background: rgba(239, 68, 68, 0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  margin-top: 0.25rem;
}

.player-slot__wager {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  color: var(--purple-dark);
}

.player-slot__wager-img {
  width: 36px;
  height: 50px;
  object-fit: contain;
  border-radius: 0.25rem;
  margin-bottom: 0.15rem;
}

.player-slot__wager-label {
  font-weight: 700;
  color: #DC2626;
}

.btn-juicy--success {
  background: linear-gradient(135deg, #34D399, #059669) !important;
  color: #fff !important;
}

.battle-loot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.battle-loot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: battleLootIn 0.5s ease backwards;
}

.battle-loot-card:nth-child(2) { animation-delay: 0.15s; }
.battle-loot-card:nth-child(3) { animation-delay: 0.3s; }
.battle-loot-card:nth-child(4) { animation-delay: 0.45s; }

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

.battle-loot-card__img {
  width: 90px;
  height: 126px;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.battle-loot-card__placeholder {
  font-size: 3rem;
}

.battle-loot-card__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--purple-dark);
  margin-top: 0.35rem;
}

.battle-results-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.battle-results-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(124, 58, 237, 0.06);
  font-size: 0.85rem;
}

.battle-results-row--winner {
  background: rgba(251, 191, 36, 0.2);
  font-weight: 700;
}

.battle-results-row__img {
  width: 32px;
  height: 44px;
  object-fit: contain;
}