/* Unified Avatar Component Styles */
.user-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}

.user-avatar-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* Size variants */
.user-avatar.small {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.user-avatar.medium {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.user-avatar.large {
  width: 80px;
  height: 80px;
  font-size: 32px;
}

.user-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

.user-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #667eea;
  color: white;
  font-weight: 600;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-avatar-placeholder.hidden {
  display: none;
}

/* Header avatar specific styles */
.header-icon-btn.user-profile .user-avatar {
  width: 100%;
  height: 100%;
}

.header-icon-btn.user-profile .user-avatar-placeholder {
  border: none;
}

/* Points Shop - Oehoe Design System */

.points-shop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 999999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.points-shop-modal {
  background: #F5F0F0;
  border-radius: 32px 32px 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  font-family: 'Britanica', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideUpFromBottom {
  from {
    opacity: 1;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Drag Handle */
.points-shop-drag-handle {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  z-index: 11;
  pointer-events: none;
}

/* Header */
.points-shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 24px 16px;
  flex-shrink: 0;
}

.points-shop-header h2 {
  margin: 0;
  color: #101010;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
  letter-spacing: -0.5px;
}

.points-shop-close {
  background: #F0DFD7;
  border: none;
  color: #101010;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  font-family: 'Britanica', sans-serif;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.points-shop-close:hover {
  background: #E8D1C9;
  transform: scale(1.05);
}

/* Balance Display */
.points-shop-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  background: #EFDED6;
  margin: 0 24px 16px;
  border-radius: 21px;
}

.points-shop-balance-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.points-shop-balance-coin {
  width: 56px;
  height: 56px;
  background: #F3DE8A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.points-shop-balance-coin::before {
  content: '₽';
  color: #101010;
  font-size: 28px;
  font-weight: 700;
}

.points-shop-balance-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.points-shop-balance-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.points-shop-balance-value {
  font-size: 32px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
  line-height: 1;
}

/* Categories */
.points-shop-categories {
  display: flex;
  gap: 8px;
  padding: 0 24px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.points-shop-categories::-webkit-scrollbar {
  display: none;
}

.points-shop-category {
  padding: 10px 20px;
  border: none;
  background: #F0DFD7;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: 'Britanica', sans-serif;
}

.points-shop-category:hover {
  background: #E8D1C9;
}

.points-shop-category.active {
  background: #8BDCC4;
  color: #101010;
}

/* Content */
.points-shop-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 32px;
}

.points-shop-loading,
.points-shop-empty {
  text-align: center;
  padding: 64px 24px;
  color: #666;
  font-size: 16px;
}

/* Items Grid */
.points-shop-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Item Card */
.points-shop-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #ffffff;
  border-radius: 24px;
  border: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.points-shop-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 220, 196, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.points-shop-item:active::before {
  opacity: 1;
}

.points-shop-item-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFDED6;
  border-radius: 20px;
  color: #101010;
}

.points-shop-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.points-shop-item-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
  line-height: 1.2;
}

.points-shop-item-description {
  margin: 0;
  font-size: 15px;
  color: #666;
  line-height: 1.4;
}

.points-shop-item-game {
  display: inline-block;
  padding: 4px 10px;
  background: #F0DFD7;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  text-transform: capitalize;
  width: fit-content;
}

.points-shop-item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.points-shop-item-cost {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
}

.points-shop-item-cost svg {
  color: #F3DE8A;
}

.points-shop-buy-btn {
  padding: 12px 24px;
  background: #8BDCC4;
  color: #101010;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
  font-family: 'Britanica', sans-serif;
}

.points-shop-buy-btn:hover {
  background: #7DCBB5;
  transform: scale(1.05);
}

.points-shop-buy-btn:active {
  transform: scale(0.98);
}

.points-shop-buy-btn.disabled {
  background: #F0DFD7;
  color: #999;
  cursor: not-allowed;
}

.points-shop-buy-btn.disabled:hover {
  transform: none;
  background: #F0DFD7;
}

.points-shop-buy-btn.purchasing {
  background: #F0DFD7;
  color: #999;
  cursor: wait;
}

/* Error/Success Messages */
.points-shop-message {
  margin: 0 24px 16px;
  padding: 16px 20px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
}

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

.points-shop-error {
  background: #FFE5E5;
  color: #CC3333;
}

.points-shop-success {
  background: #E5F9F5;
  color: #2A9D8F;
}

/* Guest Message */
.points-shop-guest-message {
  padding: 20px 24px;
  background: #EFDED6;
  text-align: center;
  border-radius: 24px 24px 0 0;
  margin-top: auto;
}

.points-shop-guest-message p {
  margin: 0;
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

/* Responsive */
@media (min-width: 768px) {
  .points-shop-modal {
    max-width: 600px;
    border-radius: 32px;
    margin-bottom: 20px;
  }
  
  .points-shop-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Oehoe Design - New Start Screen */

.puzzel-screen {
  background: radial-gradient(ellipse at 80% 100%, rgba(173, 180, 223, 0.2) 0%, rgba(173, 180, 223, 0) 100%);
  width: 100%;
  min-height: 100vh; /* At least full viewport height */
  position: relative;
  font-family: 'Britanica', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Removed overflow-x: hidden - it breaks position: sticky */
  padding-bottom: 50px; /* Add padding at bottom for smooth scroll end */
}

/* Background Gradients */
.puzzel-bg-gradient {
  display: none; /* Hide the gradient that was interfering with carousel */
}

.puzzel-bg-secondary {
  display: none !important; /* Completely hide and remove from layout */
}

/* Sticky Header - Only logo and action buttons */
.puzzel-header {
  background: var(--puzzel-bg-secondary);
  border-radius: 0 0 32px 32px;
  padding: 24px;
  width: 100%;
  z-index: 100; /* Higher z-index for sticky positioning */
  box-sizing: border-box;
  position: -webkit-sticky; /* Safari/Chrome */
  position: sticky; /* Sticky positioning */
  top: 0; /* Stick to top */
  margin: 0;
  will-change: transform; /* Performance hint for Chrome */
  transform: translateZ(0); /* Force hardware acceleration */
  -webkit-transform: translateZ(0);
}

/* Scrollable Content Container */
.scrollable-content {
  background: var(--puzzel-bg-secondary);
  padding: 24px;
  border-radius: 0 0 32px 32px;
  margin-top: -24px; /* Negative margin to overlap with header */
  z-index: 99; /* Below header but above other content */
  position: relative;
}

/* Header Icons Row - Consistent naming with game board */
.header-icons-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Header Icon Buttons - Start Screen uses CIRCLES */
.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50% !important; /* Circular on start screen - override global button style */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none !important; /* No shadow on header icons */
  padding: 0 !important; /* Override global button padding */
  border: none !important; /* Override any border */
  min-width: auto !important; /* Override any min-width */
}

/* User Profile Icon - Circular image container */
.puzzel-header .header-icon-btn.user-profile {
  background: var(--puzzel-yellow);
  overflow: hidden;
  padding: 0;
}

.puzzel-header .header-icon-btn.user-profile .user-avatar {
  width: 100%;
  height: 100%;
}

.puzzel-header .header-icon-btn.user-profile .user-avatar-placeholder {
  border: none;
}

/* Settings Icon - Beige circle with icon (CIRCULAR STYLE) */
.puzzel-header .header-icon-btn.settings {
  background: #F0DFD7;
  border-radius: 50%;
}

.puzzel-header .header-icon-btn.settings svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--puzzel-text-primary);
}

.welcome-text {
  display: flex;
  flex-direction: column;
  gap: 0px;
  text-align: left;
  align-items: flex-start;
  margin-top: 12px; /* Reduced from 36px */
}

.weekly-activities {
  color: var(--puzzel-gray);
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0;
}

.welcome-title {
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}

/* Currency Display */
.currency-display {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.currency-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 0;
  background: #EFDED6;
  border-radius: 21px;
  font-family: 'Britanica', sans-serif;
  height: 42px;
  width: fit-content;
  transition: all 0.2s ease;
}

.currency-pill.owllets {
  background: linear-gradient(135deg, #CEE3E0 0%, #B8D9D4 100%);
  cursor: default;
}

.currency-pill.hoots {
  background: #EFDED6;
  cursor: pointer;
}

.currency-pill:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.currency-pill.hoots:hover {
  background: #E8D4CA;
}

.currency-pill:active {
  transform: scale(0.98);
}

.currency-coin {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  font-size: 20px;
}

.currency-coin.owllets-coin {
  background: linear-gradient(135deg, #8BDCC4 0%, #7DCBB5 100%);
}

.currency-coin.hoots-coin {
  background: #F3DE8A;
}

.currency-coin::before {
  display: none; /* Remove old P icon */
}

.currency-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  white-space: nowrap;
}

.currency-label {
  font-size: 12px;
  font-weight: 600;
  color: rgb(128, 115, 111);
  margin-left: 4px;
}

/* Player Stats */
.player-stats {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.progress-item {
  padding: 0 12px;
  border-radius: 21px;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  color: var(--puzzel-text-primary);
  white-space: nowrap;
  height: 42px;
  display: flex;
  align-items: center;
}

.progress-item.mint {
  background: var(--puzzel-mint);
}

.progress-item.purple {
  background: var(--puzzel-purple);
}

.progress-item.orange {
  background: var(--puzzel-orange);
}

/* Game Cards Carousel - EDGE TO EDGE */
.puzzel-carousel {
  padding-top: 48px;
  padding-bottom: 48px;
  background: #FAF7FA;
  background-image: radial-gradient(ellipse at 80% 100%, rgba(173, 180, 223, 0.2) 0%, rgba(173, 180, 223, 0) 100%);
  min-height: 350px;
  position: relative;
  width: 100%;
  clear: both;
  margin: -24px 0 -24px 0;
  z-index: 1;
}

.puzzel-carousel-container {
  width: 100%;
  overflow-x: auto;
  padding: 0 0 20px 0;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.puzzel-carousel-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.puzzel-game-cards {
  display: flex;
  gap: 16px;
  padding: 0 24px 0 24px;
  margin: 0;
  width: max-content;
}

.puzzel-game-card {
  flex-shrink: 0;
  width: 298px;
  height: 300px;
  border-radius: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.puzzel-game-card:nth-child(1) {
  background: #CEE3E0; /* Letro Pro - Language */
}

.puzzel-game-card:nth-child(2) {
  background: #CEE3E0; /* Letro 5 - Language */
}

.puzzel-game-card:nth-child(3) {
  background: #E1927F; /* Letro Teams - Team */
}

.puzzel-card-content {
  position: relative;
  z-index: 2;
  padding: 24px 0 0 24px;
  text-align: left;
}

.puzzel-card-title {
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2em;
  color: #000;
  margin: 0;
}

.puzzel-card-description {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  color: #80736F;
  margin: 0;
}

.puzzel-card-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  z-index: 1;
}

.puzzel-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.puzzel-dot {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #000;
  opacity: 0.3;
  transition: all 0.2s ease;
  cursor: pointer;
}

.puzzel-dot:hover {
  opacity: 0.6;
}

.puzzel-dot.active {
  opacity: 1;
  width: 36px;
  border-radius: 12px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: var(--puzzel-mint);
}

.dot.active {
  background: var(--puzzel-text-primary);
}

/* Favorites Section */
.favorites-section {
  width: 100%;
  background: var(--puzzel-white);
  border-radius: 32px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

.favorites-header {
  width: 345px;
  height: 48px;
}

.favorites-title {
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
  text-align: left;
}

.favorites-subtitle {
  color: #80736F;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0;
  text-align: left;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.favorite-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.favorite-icon {
  width: 64px;
  height: 64px;
  border-radius: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.favorite-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* padding: 8px; */
}

.favorite-item:nth-child(1) .favorite-icon {
  background: #CEE3E0 !important; /* Letro Pro - Language */
}

.favorite-item:nth-child(2) .favorite-icon {
  background: #CEE3E0 !important; /* Letro 5 - Language */
}

.favorite-item:nth-child(3) .favorite-icon {
  background: #E1927F !important; /* Letro Teams - Team */
}

.favorite-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.favorite-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.favorite-title {
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}

.favorite-description {
  color: var(--puzzel-gray);
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}

.premium-badge {
  height: 24px;
  padding: 0 8px 0 4px;
  border-radius: 12px;
  background: transparent; /* From Figma - no fill */
  border: 1px solid rgb(243, 222, 138); /* Yellow border from Figma */
  display: inline-flex;
  align-items: center;
  gap: 2px; /* From Figma - itemSpacing */
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  color: rgb(166, 146, 56); /* From Figma: 0.652, 0.574, 0.219 */
  white-space: nowrap;
}

.premium-badge svg,
.premium-badge .premium-icon {
  width: 12px;
  height: 12px;
  color: rgb(255, 205, 4); /* Yellow icon from Figma: 1, 0.803, 0.015 */
}

.premium-badge p {
  color: rgb(166, 146, 56);
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}

.coming-soon-badge {
  height: 24px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgb(240, 240, 240); /* From Figma: 0.942, 0.942, 0.942 */
  border: none;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  color: rgb(119, 119, 119); /* From Figma: 0.465, 0.465, 0.465 */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.coming-soon-badge p {
  color: rgb(119, 119, 119);
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}

.beta-badge {
  height: 24px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgb(240, 223, 215); /* Light beige/orange background */
  border: none;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  color: rgb(139, 90, 43); /* Brown/orange text */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.beta-badge p {
  color: rgb(139, 90, 43);
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}

.favorite-action {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.favorite-action svg {
  color: var(--puzzel-text-secondary);
}

/* Heart toggle button for "Your Favorites" section */
.favorite-action.favorite-heart-toggle {
  background: #8BDCC4; /* Mint green - always filled since it's in favorites */
  color: #101010;
}

.favorite-action.favorite-heart-toggle:hover {
  background: #7DCBB5; /* Slightly darker mint on hover */
  transform: scale(1.05);
}

.favorite-action.favorite-heart-toggle:active {
  transform: scale(0.95);
}

.favorite-action.favorite-heart-toggle svg {
  color: #101010;
}

.ad-space {
  width: 100%;
  min-height: 264px; /* Changed to min-height for flexibility */
  position: relative;
  margin: 24px 0;
  padding: 0 24px;
}

.ad-label {
  color: var(--puzzel-gray);
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  margin: 0 0 12px 0;
}

.ad-placeholder {
  width: 100%;
  height: 240px;
  background: var(--puzzel-ad-bg);
  border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 393px) {
  .puzzel-screen {
    width: 100%;
    max-width: 393px;
    /* min-height: 852px; */ /* Removed - caused scrolling issues */
  }
  
  .puzzel-header {
    width: 100%;
    padding: 24px;
  }
  
  .welcome-title {
    font-size: 32px;
  }
  
  .favorites-section {
    padding: 24px;
  }
  
  .favorites-header {
    width: 100%;
  }
  
  .ad-space {
    width: 100%;
  }
}.board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0; /* No margin needed - keyboard floats at bottom */
  position: relative;
  z-index: 1;
  flex-shrink: 0; /* Don't shrink the board */
  
  /* Startup animation */
  animation: boardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Proportional scaling based on viewport height */
@media (max-height: 600px) {
  .board {
    gap: 8px;
  }
  
  .row {
    gap: 8px;
  }
}

@media (max-height: 500px) {
  .board {
    gap: 8px;
  }
  
  .row {
    gap: 8px;
  }
}

@media (max-height: 400px) {
  .board {
    gap: 8px;
  }
  
  .row {
    gap: 8px;
  }
}

.row {
  display: flex;
  gap: 12px;
  justify-content: center;
  
  /* Staggered row animation */
  opacity: 0;
  animation: rowFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Stagger each row with delay */
.row:nth-child(1) { animation-delay: 0.1s; }
.row:nth-child(2) { animation-delay: 0.15s; }
.row:nth-child(3) { animation-delay: 0.2s; }
.row:nth-child(4) { animation-delay: 0.25s; }
.row:nth-child(5) { animation-delay: 0.3s; }
.row:nth-child(6) { animation-delay: 0.35s; }

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

.tile {
  width: 52px;
  height: 52px;
  /* border: 1px solid rgba(168, 237, 195, 0.2); */ /* Thinner border - removed */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  background: white;
  color: var(--puzzel-text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--puzzel-radius-small);
  box-shadow: var(--puzzel-shadow-light);
  position: relative;
  overflow: hidden;
}

/* Removed hover overlay for cleaner design system compliance */

.tile.filled {
  background: white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  animation: pop 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.correct {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.6);
  animation: flip 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.present {
  background: radial-gradient(circle, #F3DE8A 0%, #F3DE8A 70%, #E5E5EA 70%, #E5E5EA 100%);
  color: #101010;
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.6);
  animation: flip 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.absent {
  background: #E5E5EA;
  color: #101010;
  box-shadow: 0 4px 16px rgba(229, 229, 234, 0.6);
  animation: flip 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.current {
  background: white;
  box-shadow: 0 0 0 3px rgba(206, 227, 224, 0.5);
  animation: pulse 2s infinite;
}

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

@keyframes flip {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 122, 255, 0.1);
  }
}

/* Mobile-first responsive design */
@media (max-width: 480px) {
  .board {
    gap: 8px;
  }
  
  .row {
    gap: 8px;
  }
  
  .tile {
    width: 52px;
    height: 52px;
    font-size: 1.75rem;
  }
}

@media (max-width: 360px) {
  .board {
    gap: 8px;
  }
  
  .row {
    gap: 8px;
  }
  
  .tile {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .board {
    gap: 8px;
  }
  
  .row {
    gap: 8px;
  }
  
  .tile {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tile {
    border-width: 1.5px;
  }
} /* Keyboard Component - Native App Style, Fully Dynamic Width-Based System */
.keyboard {
  display: flex;
  flex-direction: column;
  gap: 1vh; /* Dynamic vertical gap */
  padding: 24px 12px 24px 12px; /* Top 24px, sides 12px, bottom 24px for comfortable typing */
  position: fixed; /* Float at bottom of viewport */
  bottom: 0; /* Stick to bottom */
  left: 0;
  right: 0;
  z-index: 50; /* Above game content, below modals */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #E2E4E6; /* Light gray background */
  border-radius: 24px 24px 0 0; /* Rounded top corners */
  
  /* Startup animation */
  animation: keyboardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
  
  /* Ensure keyboard stays visible on mobile */
  transform: translateZ(0); /* Force GPU acceleration and better positioning */
  -webkit-transform: translateZ(0);
  
  /* PWA/App Mode Detection - When in standalone mode, remove browser offset */
  @supports (-webkit-touch-callout: none) {
    /* iOS PWA detection */
    @media (display-mode: standalone) {
      bottom: 0; /* No offset needed in app mode */
    }
  }
}

.keyboard-row {
  display: flex;
  gap: 0.5vw; /* Dynamic gap scales with width */
  justify-content: center;
  align-items: center;
  width: 100%;
}

.key {
  flex: 1 1 auto; /* Keys grow to fill available space */
  max-width: 34px; /* Maximum width for all letter and action keys */
  min-width: 32px; /* Minimum for touch targets */
  aspect-ratio: 0.75; /* Maintain proportional height (3:4 ratio) */
  min-height: 44px; /* Minimum touch target height */
  /* Default font size - can be overridden by keyboard-size classes */
  border: none;
  border-radius: 8px;
  background: white;
  color: #101010;
  font-family: 'Britanica', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  font-size: 1.2rem;
  user-select: none;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.key:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.key:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Backspace key - same size as regular keys */
.key.action-key {
  background: #d6664c;
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  flex: 1 1 auto; /* Same flex as regular keys */
  max-width: 34px; /* Same max width as regular keys */
}

/* Enter key - full width on separate row */
.key.enter-key {
  background: #8BDCC4; /* Primary CTA color */
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.4);
  width: calc(100% - 24px); /* Full width with margins */
  flex: none; /* Don't flex */
  max-width: none; /* No max width limit */
  aspect-ratio: auto; /* Don't maintain aspect ratio */
  height: 43px; /* Fixed height */
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 24px !important;
  /* margin: 6px 0 0 0; */
}

/* Backspace hover/active states */
.key.action-key:hover {
  background: #c55a42;
  box-shadow: 0 6px 20px rgba(214, 102, 76, 0.4);
}

.key.action-key:active {
  transform: scale(0.95);
}

/* Enter key hover/active states */
.key.enter-key:hover {
  background: #7DCBB5; /* Slightly darker mint */
  box-shadow: 0 6px 20px rgba(139, 220, 196, 0.5);
}

.key.enter-key:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(139, 220, 196, 0.3);
}

.key.correct {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.6);
}

.key.present {
  background: #F3DE8A;
  color: #101010;
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.6);
}

.key.absent {
  background: #E5E5EA;
  color: #101010;
  box-shadow: 0 4px 16px rgba(229, 229, 234, 0.6);
}

.key.unused {
  background: white;
  color: #101010;
}

/* Mobile adjustments - flexbox handles most sizing automatically */
@media (max-width: 480px) {
  .keyboard {
    padding: 24px 12px 64px 12px; /* Maintain top 24px, sides 12px, bottom 64px */
    /* Lift keyboard above mobile browser UI - typical bottom bar is 48-60px */
    bottom: 48px; /* Position above typical mobile browser UI */
  }
  
  .keyboard-row {
    gap: 1vw; /* Tighter gaps on small screens */
  }
  
  .key {
    max-width: 34px; /* Maintain consistent max width on mobile */
    font-size: clamp(0.75rem, 2vw, 1rem);
  }
}

/* For devices with notch/safe area support in browser mode */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .keyboard {
      /* Combine fixed offset with safe-area-inset for notched devices */
      bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px));
      /* Keep consistent padding */
      padding: 12px;
    }
  }
  
  /* Override for PWA mode */
  @media (max-width: 480px) and (display-mode: standalone) {
    .keyboard {
      bottom: 0 !important;
      padding: 12px;
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    }
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .keyboard {
    margin-top: 16px;
  }
  
  .key {
    width: 32px;
    height: 44px;
    font-size: 1rem;
  }
  
  .key.action-key {
    width: 36px; /* Same as regular keys */
  }
  
  .key.enter-key {
    height: 48px; /* Slightly shorter in landscape */
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .key {
    border-width: 1px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .key:hover {
    transform: none;
    box-shadow: var(--puzzel-shadow-light);
  }
  
  .key:active {
    background: #e5e5ea;
    transform: scale(0.95);
  }
}

/* Keyboard startup animation */
@keyframes keyboardSlideUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   KEYBOARD SIZE OPTIONS
   =================================== */

/* Small - Compact keys for smaller screens or user preference */
.keyboard-size-small .key {
  max-width: 30px;
  min-width: 28px;
  min-height: 40px;
  font-size: 0.9rem;
}

.keyboard-size-small .key.action-key {
  max-width: 30px;
  font-size: 0.85rem;
}

.keyboard-size-small .key.enter-key {
  height: 40px;
  font-size: 1rem;
  max-width: none;
}

/* Medium - Default balanced size (already defined above) */
.keyboard-size-medium .key {
  max-width: 34px;
  min-width: 32px;
  min-height: 44px;
  font-size: 1.2rem;
}

.keyboard-size-medium .key.action-key {
  max-width: 34px;
}

.keyboard-size-medium .key.enter-key {
  height: 43px;
  font-size: 1.2rem;
  max-width: none;
}

/* Large - Bigger keys for better accessibility */
.keyboard-size-large .key {
  max-width: 38px;
  min-width: 36px;
  min-height: 50px;
  font-size: 1.3rem;
}

.keyboard-size-large .key.action-key {
  max-width: 38px;
  font-size: 1.2rem;
}

.keyboard-size-large .key.enter-key {
  height: 50px;
  font-size: 1.3rem;
  max-width: none;
}

/* Mobile adjustments for keyboard sizes */
@media (max-width: 480px) {
  .keyboard-size-small .key {
    font-size: clamp(0.65rem, 1.8vw, 0.9rem);
  }
  
  .keyboard-size-medium .key {
    font-size: clamp(0.85rem, 2.2vw, 1.2rem);
  }
  
  .keyboard-size-large .key {
    font-size: clamp(0.85rem, 2.2vw, 1.3rem);
  }
}

/* ===================================
   KEYBOARD CONTROL BUTTONS
   =================================== */

.keyboard-row-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.keyboard-row-bottom .enter-key {
  max-width: 120px;
  flex: 0 1 auto;
}

.keyboard-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: white;
  border: none;
  border-radius: 50%;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  /* Same height as enter key */
  height: 43px;
  width: 43px;
}

.keyboard-control-btn:hover {
  background: #f5f5f5;
  transform: scale(1.05);
}

.keyboard-control-btn:active {
  transform: scale(0.95);
  background: #e5e5ea;
}

.keyboard-control-btn svg {
  flex-shrink: 0;
  display: block;
}

/* Adjust for different keyboard sizes */
.keyboard-size-small .keyboard-control-btn {
  height: 40px;
  width: 40px;
}

.keyboard-size-small .keyboard-control-btn svg {
  width: 18px;
  height: 18px;
}

.keyboard-size-medium .keyboard-control-btn {
  height: 43px;
  width: 43px;
}

.keyboard-size-large .keyboard-control-btn {
  height: 50px;
  width: 50px;
}

.keyboard-size-large .keyboard-control-btn svg {
  width: 24px;
  height: 24px;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .keyboard-row-bottom {
    gap: 12px;
    margin: 6px 0 0 0;
  }
}
/* Avatar with XP Progress Ring */
.avatar-xp-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.avatar-xp-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-xp-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  z-index: 1;
}

.avatar-xp-ring-bg {
  stroke: rgba(139, 220, 196, 0.2); /* Light Oehoe green, 20% opacity */
}

.avatar-xp-ring-progress {
  stroke: #FF6B9D; /* Oehoe pink/red accent */
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
  filter: drop-shadow(0 0 4px rgba(255, 107, 157, 0.4));
}

.avatar-xp-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-xp-avatar {
  /* Avatar styles are handled by Avatar component */
}

.avatar-xp-level-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 8px;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  white-space: nowrap;
  margin-top: 4px;
}

/* Hide level badge on compact profile cards */
.profile-card-avatar-wrapper .avatar-xp-level-badge {
  display: none;
}

/* Size variants */
.avatar-xp-wrapper.small .avatar-xp-ring {
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  margin: -4px;
}

.avatar-xp-wrapper.medium .avatar-xp-ring {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  margin: -6px;
}

.avatar-xp-wrapper.large .avatar-xp-ring {
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  margin: -8px;
}

/* For numeric sizes, adjust ring size dynamically */
.avatar-xp-wrapper[style*="width"] .avatar-xp-ring {
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  margin: -8px;
}

.activity-heatmap {
  width: 100%;
  padding: 0 0 16px 0;
}

.heatmap-container {
  position: relative;
  width: 100%;
}

.heatmap-grid {
  display: grid !important;
  gap: 6px !important;
  width: 100%;
  padding-bottom: 8px;
  overflow: visible;
}

.heatmap-day {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  min-width: 0;
}

.heatmap-day:hover {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .container,
  [class*="container"] {
    padding: 0rem;
  }
}

.unified-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 999999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.unified-modal {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 -4px 20px rgb(0 0 0 / 5%) !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 20%) !important;
  border-radius: 20px 20px 0 0 !important;
  animation: slideUpFromBottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  padding: 1.5rem 1.5rem 0 1.5rem;
  min-height: 500px;
  text-align: left;
  overflow: hidden; /* Changed from overflow-y: auto */
  font-family: 'Britanica', -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: column;
}

/* Drag handle stays at the very top */
.unified-modal::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  z-index: 11;
  pointer-events: none;
}

@keyframes slideUpFromBottom {
  from {
    opacity: 1;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Closing animation */
.unified-modal.closing {
  animation: slideDownToBottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes slideDownToBottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100%);
  }
}

.unified-modal.closing {
  animation: slideDownToBottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0.5rem 0; /* Extra top padding for drag handle */
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
  border-radius: 20px 20px 0 0;
  flex-shrink: 0; /* Don't shrink the header */
}

.modal-header h3 {
  margin: 0;
  color: var(--puzzel-text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2em;
  font-family: 'Britanica', sans-serif;
}

.close-btn {
  background: #F0F0F0;
  border: none;
  color: var(--puzzel-text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s ease;
  box-shadow: none;
  font-family: 'Britanica', sans-serif;
  border-radius: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--puzzel-text-primary);
}

.modal-content {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   SETTINGS SECTION
   ============================================ */

.settings-section {
  text-align: left;
}

.settings-section h4 {
  margin: 0 0 16px 0;
  color: var(--puzzel-text-primary);
  font-size: 24px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
}

.setting-item {
  margin-bottom: 0.5rem;
}

.setting-item label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--puzzel-text-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.setting-item label strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: 'Britanica', sans-serif;
}

.setting-description {
  font-size: 16px;
  color: var(--puzzel-text-secondary);
  opacity: 1;
  font-family: 'Britanica', sans-serif;
}

.setting-controls {
  display: flex;
  gap: 0.5rem;
}

.setting-btn {
  flex: 1;
  padding: 16px 24px;
  border: none;
  background: var(--puzzel-card-bg);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
  color: var(--puzzel-text-primary);
}

.setting-btn:hover {
  background: #E8D7CF;
  transform: translateY(-1px);
}

.setting-btn.active {
  background: var(--puzzel-mint);
  color: var(--puzzel-text-primary);
}

/* Mobile Dropdown Select Styles */
.setting-select {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
  color: var(--puzzel-text-primary);
  background: var(--puzzel-card-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  padding-right: 48px;
  transition: all 0.2s ease;
}

.setting-select:hover {
  background-color: #E8D7CF;
}

.setting-select:focus {
  outline: none;
  border-color: var(--puzzel-mint);
}

/* iOS-Style Inline Select (Right-Aligned) */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row label {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.setting-select-inline {
  padding: 8px 32px 8px 12px;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Britanica', sans-serif;
  color: var(--puzzel-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380736F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  text-align: right;
  min-width: 120px;
}

.setting-select-inline:focus {
  outline: none;
  color: var(--puzzel-text-primary);
}

/* Toggle Switch Styles */
.setting-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-toggle-label {
  flex: 1;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E2E4E6;
  transition: 0.3s;
  border-radius: 32px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #8BDCC4;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px rgba(139, 220, 196, 0.2);
}

/* ============================================
   USER PROFILE SECTION
   ============================================ */

.user-info {
  display: flex;
  align-items: center;
  padding: 24px;
  background: var(--puzzel-card-bg);
  border-radius: 24px;
  margin-bottom: 24px;
  border: none;
}

/* Avatar styles are now in Avatar.css - keeping this for backward compatibility */
.user-info .user-avatar {
  margin-right: 1rem;
}

.user-details {
  flex: 1;
  text-align: left;
}

.user-name {
  font-weight: 700;
  font-size: 24px;
  color: var(--puzzel-text-primary);
  margin-bottom: 4px;
  font-family: 'Britanica', sans-serif;
}

.user-email {
  font-size: 16px;
  color: var(--puzzel-text-secondary);
  margin-bottom: 8px;
  font-family: 'Britanica', sans-serif;
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-meta span {
  font-size: 16px;
  color: var(--puzzel-text-secondary);
  opacity: 0.8;
  font-family: 'Britanica', sans-serif;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ============================================
   PROFILE CARD COMPACT (Xbox 360-style)
   ============================================ */

.profile-card-compact {
  /* background: linear-gradient(135deg, #8BDCC4 0%, #7DCBB5 0%, #CEE3E0 100%); */
  /* border-radius: 24px; */
  /* padding: 24px; */
  margin-bottom: 24px;
  /* box-shadow: 0 4px 16px rgba(139, 220, 196, 0.3); */
  position: relative;
  overflow: hidden;
}

.profile-card-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.profile-card-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-card-avatar {
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-card-flag-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: var(--puzzel-white);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.profile-card-info {
  flex: 1;
  min-width: 0;
}

.profile-card-name {
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.profile-card-stat-item.owllets-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 0;
  background: linear-gradient(135deg, #CEE3E0 0%, #B8D9D4 100%);
  border-radius: 21px;
  font-family: 'Britanica', sans-serif;
  height: 42px;
  width: fit-content;
  transition: all 0.2s ease;
  cursor: default;
  flex-direction: row;
}

.profile-card-stat-item.owllets-stat .currency-coin.owllets-coin {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8BDCC4 0%, #7DCBB5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  font-size: 20px;
}

.profile-card-stat-item.owllets-stat .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  white-space: nowrap;
}

.profile-card-stat-item.owllets-stat .stat-label {
  font-size: 12px;
  font-weight: 600;
  color: rgb(128, 115, 111);
  margin-left: 4px;
}

.profile-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.25);
  color: var(--puzzel-text-primary);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.profile-card-badge.premium {
  background: linear-gradient(135deg, #F3DE8A 0%, #F0C674 100%);
  color: var(--puzzel-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.profile-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  position: relative;
  z-index: 1;
  /* padding-top: 20px; */
  /* border-top: 1px solid rgba(255, 255, 255, 0.3); */
}

.profile-card-stats .activity-graph {
  grid-column: 1 / -1; /* Span full width */
}

.profile-card-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-card-stat-item .stat-label {
  font-family: 'Britanica', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-card-stat-item .stat-value {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
}

.profile-card-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-card-btn {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 16px;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card-btn.primary {
  background: var(--puzzel-mint-cta);
  color: var(--puzzel-text-primary);
  box-shadow: 0 4px 12px rgba(139, 220, 196, 0.3);
}

.profile-card-btn.primary:hover {
  background: #7DCBB5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 220, 196, 0.4);
}

.profile-card-btn.secondary {
  background: var(--puzzel-text-primary);
  color: var(--puzzel-white);
  border: none;
}

.profile-card-btn.secondary:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.profile-card-stat-item.activity-graph {
  grid-column: 1 / -1; /* Span full width */
  margin-top: 8px;
}

.profile-activity-heatmap {
  margin-top: 8px;
}

/* Statistics Styles */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 16px;
  color: var(--puzzel-text-secondary);
  font-weight: 500;
  font-family: 'Britanica', sans-serif;
}

.statistics-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* ============================================
   BUTTON STYLES - CONSISTENT ACROSS ALL MODALS
   Font: Britanica, 16px, 700 weight
   Padding: 16px 24px
   Border-radius: 24px
   ============================================ */

.btn {
  padding: 16px 24px;
  border: none;
  border-radius: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Britanica', sans-serif;
}

.btn-primary {
  background: var(--puzzel-mint);
  color: var(--puzzel-text-primary);
}

.btn-primary:hover {
  background: #ACCECB;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #000;
  color: white;
  border: 1px solid #8E8E93;
}

.btn-secondary:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
}

.btn-danger {
  background: #d6664c;
  color: #fff;
}

.btn-danger:hover {
  background: #c45540;
  transform: translateY(-1px);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .unified-modal {
    padding: 1.5rem;
  }
  
  .user-info {
    padding: 1rem;
  }
  
  .user-name {
    font-size: 1.125rem;
  }
  
  .profile-actions {
    gap: 0.75rem;
  }
  
  .btn {
    width: 100%;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .stat-item {
    padding: 1rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .statistics-actions {
    flex-direction: column;
  }
}

/* Auth Form Styles */
.auth-form {
  text-align: left;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--puzzel-text-primary);
  font-weight: 700;
  font-size: 16px;
  font-family: 'Britanica', sans-serif;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 16px;
  background: #ffffff;
  font-family: 'Britanica', sans-serif;
  color: var(--puzzel-text-primary);
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #a8edc3;
  box-shadow: 0 0 0 3px rgba(168, 237, 195, 0.1);
}

.form-group input:disabled {
  background: #f8f9fa;
  color: var(--puzzel-text-secondary);
  cursor: not-allowed;
}

.error-message {
  background: #fee2e2;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 16px;
  border: 1px solid #fecaca;
  font-family: 'Britanica', sans-serif;
}

.success-message {
  background: #dcfce7;
  color: #16a34a;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 16px;
  border: 1px solid #bbf7d0;
  font-family: 'Britanica', sans-serif;
}

/* Login prompt styling */
.login-prompt {
  text-align: center;
  padding: 2rem 0;
}

.login-prompt p {
  font-size: 16px;
  color: var(--puzzel-text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
  font-family: 'Britanica', sans-serif;
}

.login-prompt .btn {
  margin-top: 1rem;
}

/* ========================================
   GAME COMPLETION MODAL - Oehoe Design
   ======================================== */

/* Game Result Header */
.game-result-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

/* Correct Word Display (Loss State) */
.correct-word-display {
  text-align: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: var(--puzzel-bg-secondary);
  border-radius: 16px;
}

.correct-word-label {
  margin: 0 0 8px 0;
  color: var(--puzzel-text-secondary);
  font-size: 16px;
  font-weight: 500;
  font-family: 'Britanica', sans-serif;
}

.correct-word-value {
  margin: 0;
  color: var(--puzzel-text-primary);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: 'Britanica', sans-serif;
}

/* Game Stats Grid */
.game-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.game-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--puzzel-bg-secondary);
  border-radius: 16px;
  transition: transform 0.2s ease;
}

.game-stat-card:hover {
  transform: translateY(-2px);
}

/* Stat Icon Wrapper */
.stat-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
}

.attempts-icon {
  background: var(--puzzel-mint);
  color: var(--puzzel-text-primary);
}

.time-icon {
  background: var(--puzzel-blue);
  color: white;
}

.streak-icon {
  background: var(--puzzel-orange);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
}

.stat-emoji {
  font-size: 32px;
}

.stat-card-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--puzzel-text-secondary);
  text-align: center;
  font-family: 'Britanica', sans-serif;
}

.stat-card-value {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

/* Game Result Actions */
.game-result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-result-primary {
  background: var(--puzzel-mint-cta) !important;
  color: var(--puzzel-text-primary) !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-result-primary:hover {
  background: #7BD4BB !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.game-result-secondary,
.game-result-share {
  background: var(--puzzel-bg-secondary) !important;
  color: var(--puzzel-text-primary) !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-result-secondary:hover,
.game-result-share:hover {
  background: #E8D1C9 !important;
  transform: translateY(-1px);
}

/* Mobile responsive for game completion */
@media (max-width: 480px) {
  .game-result-header h2 {
    font-size: 24px;
  }
  
  .correct-word-value {
    font-size: 24px;
  }
  
  .game-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
  }
  
  .stat-icon-wrapper {
    width: 56px;
    height: 56px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .stat-emoji {
    font-size: 28px;
  }
}

/* Points Earned Banner */
.points-earned-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #F3DE8A 0%, #E8D179 100%);
  padding: 20px 24px;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(243, 222, 138, 0.3);
}

.points-coin-icon {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.points-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.points-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.points-value {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  font-family: 'Britanica', sans-serif;
}

/* Already Played Notice */
.already-played-notice {
  background: #FFF3CD;
  border: 1px solid #FFE69C;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #856404;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .points-earned-banner {
    padding: 16px 20px;
    gap: 12px;
  }
  
  .points-coin-icon {
    font-size: 40px;
  }
  
  .points-value {
    font-size: 28px;
  }
}
/* Premium Modal Styling - MindNest Design System */
/* NOTE: Old centered modal styles (.modal-overlay, .modal-content, .modal-close) removed */
/* All modals now use unified bottom-sheet style (.unified-modal-overlay, .unified-modal) */

.premium-modal-content {
  max-width: 480px;
  width: 90%;
}

.premium-modal-body {
  text-align: center;
  padding: 24px;
}

.premium-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: pulse 2s ease-in-out infinite;
}

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

.premium-title {
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin: 0 0 8px 0;
}

.premium-subtitle {
  font-size: 16px;
  color: #80736F;
  margin: 0 0 32px 0;
}

.premium-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  text-align: left;
}

.premium-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--puzzel-bg-secondary);
  border-radius: 16px;
}

.feature-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.feature-text h3 {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin: 0 0 4px 0;
}

.feature-text p {
  font-size: 14px;
  color: #80736F;
  margin: 0;
}

.premium-pricing {
  margin-bottom: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #8BDCC4 0%, #7AC9B5 100%);
  border-radius: 16px;
  color: white;
}

.price-tag {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.price-amount {
  font-family: 'Britanica', sans-serif;
  font-size: 48px;
  font-weight: 700;
}

.price-period {
  font-size: 18px;
  opacity: 0.9;
}

.price-subtext {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

.premium-cta-button {
  width: 100%;
  background: var(--puzzel-mint-cta);
  color: var(--puzzel-text-primary);
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
}

.premium-cta-button:hover {
  background: #7AC9B5;
  transform: translateY(-2px);
}

.btn-text {
  background: none;
  border: none;
  color: #80736F;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  font-family: 'Britanica', sans-serif;
}

.btn-text:hover {
  color: var(--puzzel-text-primary);
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .unified-modal {
    padding: 1.5rem 1.5rem 0 1.5rem;
  }
}

/* ===================================
   GUEST COMPLETION MODAL
   =================================== */

.guest-completion-modal {
  text-align: center;
  padding: 24px;
}

.guest-cta-text {
  font-size: 18px;
  color: var(--puzzel-text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.points-tease-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #F3DE8A 0%, #F0C674 100%);
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.3);
}

.points-tease-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.points-tease-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
}

.points-tease-value {
  font-size: 32px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
}

.guest-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.guest-signup-btn {
  background: #8BDCC4 !important;
  color: #101010 !important;
  width: 100%;
}

.guest-signup-btn:hover {
  background: #7DCBB5 !important;
}

.guest-login-link {
  background: transparent;
  border: none;
  color: var(--puzzel-text-secondary);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
  font-family: 'Britanica', sans-serif;
}

.guest-login-link:hover {
  color: var(--puzzel-text-primary);
}

/* ===================================
   AUTH FORM IMPROVEMENTS
   =================================== */

.auth-toggle-btn {
  margin-top: 12px !important;
}

.auth-terms {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 12px;
  line-height: 1.6;
  color: var(--puzzel-text-secondary);
  text-align: center;
}

.auth-terms a {
  color: var(--puzzel-mint-cta);
  text-decoration: none;
  font-weight: 600;
}

.auth-terms a:hover {
  text-decoration: underline;
}

/* ===================================
   PREMIUM POINTS TEASE
   =================================== */

.premium-points-tease {
  margin-top: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(243, 222, 138, 0.15) 0%, rgba(240, 198, 116, 0.15) 100%);
  border-radius: 12px;
  border: 1px solid rgba(243, 222, 138, 0.4);
  text-align: center;
}

.premium-tease-text {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #B8860B;
  display: block;
}

/* ===================================
   POINTS BREAKDOWN CARD
   =================================== */

.points-breakdown-card {
  margin-top: 16px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.breakdown-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.breakdown-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  color: var(--puzzel-text-secondary);
  font-weight: 600;
}

.breakdown-value {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
}

.breakdown-row.bonus .breakdown-label {
  color: var(--puzzel-mint-cta);
}

.breakdown-row.bonus .breakdown-value {
  color: var(--puzzel-mint-cta);
}

.breakdown-row.bonus.premium .breakdown-label {
  color: #B8860B;
}

.breakdown-row.bonus.premium .breakdown-value {
  color: #B8860B;
}
/* Game Completion Screen */
.game-completion-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  backdrop-filter: blur(4px) !important;
}

.game-completion-modal {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: slideInUp 0.3s ease-out;
}

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

.completion-header h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #101010;
}

.completion-header .correct-word {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 0.9rem;
}

.completion-header .correct-word strong {
  color: #101010;
  font-weight: 600;
}

.completion-stats {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.completion-stats .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.completion-stats .stat-item:last-child {
  margin-bottom: 0;
}

.completion-stats .stat-label {
  color: #666;
  font-size: 0.9rem;
}

.completion-stats .stat-value {
  font-weight: 600;
  color: #101010;
}

.completion-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.completion-actions .btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.completion-actions .btn-primary {
  background: #007bff;
  color: #fff;
}

.completion-actions .btn-primary:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

.completion-actions .btn-secondary {
  background: #000;
  color: white;
  border: 1px solid #8E8E93;
}

.completion-actions .btn-secondary:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
}

/* Prevent body scrolling when game is active */
body.game-active {
  overflow: hidden !important;
}

/* Ensure modal can still work properly */
.game-completion-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  backdrop-filter: blur(4px) !important;
  overflow-y: auto !important;
}

/* Game board uses same header class as start screen for consistency */
.game-container .puzzel-header {
  background: var(--puzzel-bg-secondary, #F4E7E2);
  border-radius: 0 0 32px 32px;
  padding: 24px;
  width: 100%;
  z-index: 100;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  margin: 0;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */ /* Removed for cleaner look */
}

/* Game board header icons row */
.game-container .header-icons-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

/* Game board scrollable content */
.game-container .scrollable-content {
  flex: 1;
  overflow: visible; /* Allow game content to handle its own overflow */
  padding: 0; /* No padding - game content handles spacing */
  background: radial-gradient(ellipse at 80% 100%, rgba(173, 180, 223, 0.2) 0%, rgba(173, 180, 223, 0) 100%);
  height: 100vh;
}

/* Header Actions - Consistent naming with start screen */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Header Icon Buttons - Game board uses beige CIRCLES (consistent with start screen) */
.header-icon-btn {
  width: 36px;
  height: 36px;
  background: #F0DFD7; /* Beige background like start screen settings */
  border: none;
  border-radius: 50% !important; /* Circular like start screen - override global button style */
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--puzzel-text-primary); /* Same darker color as start screen */
  flex-shrink: 0;
  box-shadow: none !important; /* No shadow on header icons */
  padding: 0 !important; /* Override global button padding */
  min-width: auto !important; /* Override any min-width */
}

.header-icon-btn:hover {
  background-color: #E8D1C9; /* Slightly darker beige on hover */
}

/* Specific button types for game board - consistent 24px and color like start screen */
.header-icon-btn.back svg,
.header-icon-btn.favorite svg,
.header-icon-btn.settings svg {
  width: 24px;
  height: 24px;
  color: var(--puzzel-text-primary); /* Same color as start screen */
}

/* Favorite Icon - Active State */
.header-icon-btn.favorite.active {
  background: #8BDCC4 !important; /* Mint green when favorited */
  color: #101010;
}

.header-icon-btn.favorite.active:hover {
  background: #7DCBB5 !important; /* Slightly darker mint on hover */
}

.game-title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.game-title-section h1 {
  margin: 0;
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #101010;
}

.daily-indicator {
  margin-top: 0.25rem;
}

.daily-badge {
  background: #007bff;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.game-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center the board vertically */
  padding: 24px 24px 0 24px; /* No bottom padding - keyboard handles its own spacing */
  position: relative;
  overflow-y: auto; /* Allow scrolling if needed */
  overflow-x: hidden;
  min-height: 0;
  /* background: linear-gradient(180deg, #F8F6F4 0%, #EEEAE8 100%); */
}

/* Mobile-specific layout adjustments */
@media (max-width: 768px) {
  .game-content {
    padding: 16px 16px 0 16px;
  }
  
  .game-container .puzzel-header {
    padding: 24px; /* Consistent with start screen */
  }
}

@media (max-width: 480px) {
  .game-content {
    padding: 48px 12px 0 12px;
  }
  
  .game-container .puzzel-header {
    padding: 24px; /* Consistent with start screen */
  }
}

/* Message positioning - with higher specificity and z-index */
/* Toast/Message Notifications - Oehoe Design System */
.game-container .message {
  position: fixed !important;
  top: 140px !important; /* Further down from header */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
  pointer-events: none;
  
  /* MindNest styling */
  background: var(--puzzel-white);
  color: var(--puzzel-text-primary);
  padding: 16px 32px;
  border-radius: 24px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-width: 280px;
  text-align: center;
  
  /* Animation */
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 90%;
  text-align: center;
}

/* Success message - mint green */
.game-container .message.success {
  background: #8BDCC4;
  color: #101010;
  border-color: #7DCBB5;
}

/* Error message - coral red */
.game-container .message.error {
  background: #d6664c;
  color: white;
  border-color: #c55a42;
}

/* Info message - beige */
.game-container .message.info {
  background: #F0DFD7;
  color: #101010;
  border-color: #E8D1C9;
}

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

/* Mobile adjustments */
@media (max-width: 480px) {
  .game-container .message {
    top: 120px !important; /* Further down on mobile */
    padding: 14px 28px;
    font-size: 16px;
    max-width: calc(100% - 48px);
    min-width: 260px;
  }
} /* Instructions Popup */

.instructions-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.instructions-popup-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.instructions-popup {
  background: white;
  border-radius: 24px;
  padding: 24px;
  max-width: 90%;
  width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
}

.instructions-popup-overlay.visible .instructions-popup {
  transform: scale(1) translateY(0);
}

.instructions-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #F0DFD7;
}

.instructions-popup-header h3 {
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #101010;
  margin: 0;
}

.instructions-popup-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #F0DFD7;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #101010;
  transition: all 0.2s ease;
  padding: 0;
}

.instructions-popup-close:hover {
  background: #E8D1C9;
  transform: scale(1.1);
}

.instructions-popup-content {
  font-family: 'Britanica', sans-serif;
}

.instructions-popup-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #101010;
  margin: 0 0 12px 0;
}

.instructions-popup-content p:last-child {
  margin-bottom: 0;
}

.instructions-popup-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.instructions-popup-content img:first-child {
  margin-top: 0;
}

.instructions-popup-content img:last-child {
  margin-bottom: 0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .instructions-popup {
    width: 85%;
    padding: 20px;
  }
  
  .instructions-popup-header h3 {
    font-size: 20px;
  }
  
  .instructions-popup-content p {
    font-size: 14px;
  }
}

/* Game Detail Screen - Oehoe Design (Figma Mockup) */

.game-detail-screen {
  background: #F5F0F0; /* Light gray background from mockup */
  min-width: 100vw;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  font-family: 'Britanica', -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100vh;
}

/* Header - Beige rounded background */
.game-detail-header {
  background: #F4E7E2; /* Beige from mockup */
  border-radius: 0 0 32px 32px;
  padding: 24px;
  width: 100%;
  z-index: 100;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Header Icons */
.game-detail-header .header-icon-btn {
  width: 36px;
  height: 36px;
  background: #F0DFD7; /* Beige background */
  border-radius: 50% !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--puzzel-text-primary);
  padding: 0;
}

.game-detail-header .header-icon-btn:hover {
  background: #E8D1C9;
  transform: scale(1.05);
}

/* Favorite Icon - Active State */
.game-detail-header .header-icon-btn.favorite.active {
  background: #8BDCC4; /* Mint green when favorited */
  color: #101010;
}

.game-detail-header .header-icon-btn.favorite.active:hover {
  background: #7DCBB5; /* Slightly darker mint on hover */
}

/* .header-actions styling is defined globally in StartScreen.css and Game.css */

.game-detail-title {
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin: 0;
  flex: 1;
  text-align: center;
}

.header-spacer {
  width: 36px; /* Same as back button for centering */
}

/* Scrollable Content */
.game-detail-content {
  padding: 24px; /* LG - Large: 24px padding */
  background: #F5F0F0; /* Light gray background */
  min-height: calc(100vh - 84px);
}

/* Game Card - Same as .puzzel-game-card from StartScreen */
.game-detail-hero {
  width: 298px;
  height: 300px;
  background: #CEE3E0; /* Will be set dynamically based on game */
  border-radius: 24px;
  padding: 0;
  margin: 0 auto 24px auto; /* Center the card */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none; /* No shadow */
}

.game-hero-content {
  position: relative;
  z-index: 2;
  padding: 24px 0 0 24px;
  text-align: left;
}

.game-hero-title {
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin: 0 0 0 0;
  line-height: 1.2em;
}

.game-hero-subtitle {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #80736F;
  margin: 0;
  line-height: 1.2em;
}

/* Hero background image - full card coverage */
.game-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.game-hero-arrow {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
}

.game-hero-arrow:hover {
  background: rgba(0, 0, 0, 0.25);
  transform: scale(1.05);
}

.game-meta {
  display: none;
}

.game-meta-item {
  display: none;
}

/* Horizontal Date Selector - Exact Specs */
.date-selector-container {
  margin-bottom: 24px;
  max-width: 298px; /* Match hero card width */
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 12px 0 !important;
}

.date-selector-container.guest-mode .date-item {
  opacity: 0.4;
}

.guest-hint {
  text-align: center;
  font-size: 14px;
  color: var(--puzzel-text-secondary);
  margin-top: 12px;
  padding: 0 24px;
}

.date-item.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.date-selector-title {
  display: none; /* Hidden in mockup */
}

.date-selector {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
  gap: 4px;
  width: 100%;
  padding: 0;
}

.date-item {
  width: 100%;
  height: 64px;
  background: white;
  border-radius: 16px;
  border: 1px solid #E2E4E6; /* Inner stroke for past days */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
  padding: 4px;
}

.date-item:hover {
  transform: scale(1.05);
}

/* Today - Black background, black border */
.date-item.today {
  background: #000;
  color: white;
  border: 1px solid #000;
  transform: none;
}

.date-item.today:hover {
  transform: scale(1.05);
}

/* Future days - White background, yellow border */
.date-item.future {
  background: white;
  color: #000;
  border: 1px solid #F3DE8A; /* Yellow border for premium */
}

/* Past days - White background, gray border */
.date-item.past {
  background: white;
  color: #000;
  border: 1px solid #E2E4E6; /* Gray border */
}

.date-item.past.completed {
  background: white;
}

.date-day-name {
  font-family: 'Britanica', sans-serif;
  font-size: 10px;
  font-weight: 400;
  text-transform: capitalize;
  margin-bottom: 2px;
  opacity: 1;
  line-height: 1;
}

.date-day-num {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* Completion dot - green for past, white for today */
.date-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #E2E4E6; /* Grey - not played yet */
  border-radius: 50%;
}

/* White dot for today (if not completed) */
.date-item.today .date-dot {
  background: white;
}

/* Green dot for completed games (higher specificity - applies after today) */
.date-item.completed .date-dot {
  background: #8BDCC4 !important; /* Green - completed (overrides today) */
}

/* Lock icon for future dates */
.date-lock-icon {
  position: absolute;
  top: 3rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #000 !important;
  opacity: 1 !important;
  background: #fff;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid #F3DE8A;
}

/* Premium indicator - yellow dot for future */
.premium-indicator {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #F3DE8A; /* Yellow */
  border-radius: 50%;
  font-size: 0; /* Hide star character */
}

.premium-indicator::before {
  content: '';
}

/* Play Button - "Spelen" - Primary CTA from Figma */
.play-button-large {
  width: 100%;
  background: var(--puzzel-mint-cta); /* Vibrant teal from Figma - Better contrast */
  color: #000;
  margin-bottom: 48px;
  /* Size, border-radius, height are controlled by .button-large from global CSS */
}

.play-button-large:hover {
  background: #7AD0B8; /* Slightly darker on hover */
}

.play-button-large:active {
  background: #69C5AD; /* Even darker when pressed */
}

/* Statistics Section - From Figma Specs */
.stats-section {
  width: calc(100% + 48px); /* Full width plus both paddings */
  background: #FFFFFF; /* White from Figma */
  border-radius: 32px; /* Full 32px border radius on all corners */
  padding: 24px; /* 24px on all sides */
  display: flex;
  flex-direction: column;
  gap: 24px; /* itemSpacing: 24 from Figma */
  position: relative;
  z-index: 2;
  margin-left: -24px;
  margin-right: -24px;
}

.stats-section-header {
  width: 100%;
  height: 48px; /* From Figma: Game_List_Title height */
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stats-section-title {
  color: #000000; /* Black from Figma */
  font-family: 'Britanica', sans-serif;
  font-size: 24px; /* Approximate from 29px height */
  font-weight: 700;
  line-height: 29px; /* Exact height from Figma */
  margin: 0;
  text-align: left;
  height: 29px;
}

.stats-section-subtitle {
  color: rgb(128, 115, 111); /* #80736F from Figma color values */
  font-family: 'Britanica', sans-serif;
  font-size: 16px; /* Calculated from 19px height */
  font-weight: 400;
  line-height: 19px; /* Exact height from Figma */
  margin: 0;
  text-align: left;
  height: 19px;
}

/* Tabs - Hidden in new design */
.game-detail-tabs {
  display: none;
}

.tab {
  display: none;
}

/* Tab Content */
.tab-content {
  animation: fadeIn 0.3s ease;
}

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

/* About Content */
.about-content {
  padding: 24px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.game-description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--puzzel-text-primary);
  margin-bottom: 24px;
}

.section-title {
  font-family: 'Britanica', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin: 24px 0 16px 0;
}

.game-rules {
  list-style: none;
  padding: 0;
  margin: 0;
}

.game-rules li {
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--puzzel-bg-secondary);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--puzzel-text-primary);
}

.game-rules li::before {
  content: "✓ ";
  color: var(--puzzel-taal-mint);
  font-weight: bold;
  margin-right: 8px;
}

/* History Content */
.history-content {
  padding: 24px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.history-message {
  font-size: 16px;
  line-height: 1.6;
  color: var(--puzzel-text-secondary);
  margin-bottom: 24px;
  text-align: center;
}

.history-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-feature-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--puzzel-bg-secondary);
  border-radius: 16px;
  align-items: center;
}

.history-feature-item.premium {
  background: linear-gradient(135deg, rgba(243, 222, 138, 0.2) 0%, rgba(255, 197, 139, 0.2) 100%);
  border: 2px solid #F3DE8A;
}

.feature-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.feature-text h4 {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin: 0 0 4px 0;
}

.feature-text p {
  font-size: 14px;
  color: var(--puzzel-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Stats Content - CORRECT Figma Specs (2-column grid) - Renamed with game-detail- prefix to avoid conflicts */
.game-detail-stats-content {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.game-detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 24px 0; /* 24px vertical gap (row spacing), 0px horizontal */
  width: 100%;
}

.game-detail-stat-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: row; /* Horizontal: icon next to text */
  align-items: center;
  gap: 12px; /* itemSpacing: 12 from Figma */
  box-shadow: none;
  transition: none;
  height: 48px; /* From Figma: Frame height */
}

.game-detail-stat-card:hover {
  transform: none;
  box-shadow: none;
}

/* Stat icon container - From Figma: 48px circle */
.game-detail-stat-icon {
  width: 48px; /* Puzzel_Icon width from Figma */
  height: 48px; /* Puzzel_Icon height from Figma */
  border-radius: 42px; /* cornerRadius: 42 from Figma (almost full circle) */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.game-detail-stat-icon svg {
  width: 32px; /* Inner frame size from Figma */
  height: 32px;
}

.game-detail-stat-card.streak .game-detail-stat-icon {
  background: rgb(243, 232, 230); /* From Figma: 0.956, 0.905, 0.886 */
  color: #E1927F; /* Icon color */
}

.game-detail-stat-card.win-streak .game-detail-stat-icon {
  background: rgb(238, 196, 186); /* From Figma: 0.933, 0.768, 0.729 */
  color: #E1927F; /* Icon color */
}

.game-detail-stat-card.played .game-detail-stat-icon {
  background: rgb(195, 204, 248); /* From Figma: 0.764, 0.800, 0.972 */
  color: #7C9DC9; /* Icon color */
}

.game-detail-stat-card.won .game-detail-stat-icon {
  background: rgb(206, 227, 224); /* From Figma: 0.807, 0.890, 0.878 */
  color: #8BDCC4; /* Icon color */
}

/* Stat text container - From Figma: Puzzel_text group */
.game-detail-stat-info {
  display: flex;
  flex-direction: column;
  gap: 0.875px; /* Gap between 16px and 16.875px positions in Figma */
  flex: 1;
  height: 43.75px; /* From Figma: Puzzel_text height */
  justify-content: flex-start;
}

.game-detail-stat-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px; /* Calculated from 16px height */
  font-weight: 400;
  color: rgb(128, 115, 111); /* #80736F from Figma */
  margin: 0;
  line-height: 16px; /* Description height from Figma */
  height: 16px;
}

.game-detail-stat-value {
  font-family: 'Britanica', sans-serif;
  font-size: 24px; /* Calculated from 29px height */
  font-weight: 700;
  color: #000000; /* Black from Figma */
  margin: 0;
  line-height: 29px; /* Title height from Figma */
  height: 29px;
}

/* Guess Distribution */
.guess-distribution {
  margin-top: 16px;
  margin-bottom: 32px;
}

.distribution-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.attempts-label {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  min-width: 24px;
}

.distribution-bar-container {
  flex: 1;
  background: var(--puzzel-bg-secondary);
  border-radius: 8px;
  overflow: hidden;
  height: 32px;
}

.distribution-bar {
  background: var(--puzzel-cijfers-purple);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  min-width: 32px;
  transition: width 0.3s ease;
}

.count-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: white;
}

/* Additional Stats */
.additional-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--puzzel-bg-secondary);
  border-radius: 12px;
}

.stat-row-label {
  font-size: 15px;
  color: var(--puzzel-text-secondary);
}

.stat-row-value {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .game-detail-content {
    padding: 24px; /* Keep LG - Large: 24px on mobile too */
  }
  
  .stats-section {
    width: calc(100% + 48px); /* Full width plus both paddings (24px * 2) */
    margin-left: -24px;
    margin-right: -24px;
  }
  
  .game-hero-image {
    height: 240px;
  }
  
  /* Mobile stats styling removed - using game-detail-stats-grid instead */
}

/* ========================================
   GUESS DISTRIBUTION SECTION
   ======================================== */

.distribution-section {
  background: #FFFFFF;
  border-radius: 32px; /* Full 32px border radius on all corners */
  padding: 24px;
  margin-top: 24px;
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
}

.distribution-header {
  margin-bottom: 24px;
}

.distribution-title {
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 4px 0;
  line-height: 29px;
}

.distribution-subtitle {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgb(128, 115, 111);
  margin: 0;
  line-height: 19px;
}

.distribution-chart {
  position: relative;
  width: 100%;
  height: 200px; /* Match SVG viewBox height */
  padding: 20px 0;
  opacity: 0;
  animation: fadeInChart 0.5s ease-out forwards;
}

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

/* SVG Line Graph Container */
.line-graph-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block; /* Remove inline spacing */
}

/* Animated line path */
.line-path {
  fill: none;
  stroke: var(--puzzel-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 1.5s ease-out forwards 0.3s;
  filter: drop-shadow(0 2px 4px rgba(195, 204, 248, 0.4));
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* Gradient fill under the line */
.line-gradient-fill {
  fill: url(#lineGradient);
  opacity: 0;
  animation: fadeInFill 0.8s ease-out forwards 1s;
}

@keyframes fadeInFill {
  to {
    opacity: 1;
  }
}

/* Data point dots */
.data-point {
  fill: var(--puzzel-blue);
  stroke: white;
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  animation: popInDot 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.data-point:nth-child(1) { animation-delay: 0.5s; }
.data-point:nth-child(2) { animation-delay: 0.6s; }
.data-point:nth-child(3) { animation-delay: 0.7s; }
.data-point:nth-child(4) { animation-delay: 0.8s; }
.data-point:nth-child(5) { animation-delay: 0.9s; }
.data-point:nth-child(6) { animation-delay: 1s; }

@keyframes popInDot {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* X-axis labels */
.x-axis-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  fill: #000000;
  text-anchor: middle;
  opacity: 0;
  animation: fadeInLabel 0.4s ease-out forwards;
}

.x-axis-label:nth-child(1) { animation-delay: 0.5s; }
.x-axis-label:nth-child(2) { animation-delay: 0.6s; }
.x-axis-label:nth-child(3) { animation-delay: 0.7s; }
.x-axis-label:nth-child(4) { animation-delay: 0.8s; }
.x-axis-label:nth-child(5) { animation-delay: 0.9s; }
.x-axis-label:nth-child(6) { animation-delay: 1s; }

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

/* Y-axis labels */
.y-axis-label {
  font-family: 'Britanica', sans-serif;
  font-size: 12px;
  font-weight: 400;
  fill: rgb(128, 115, 111);
  text-anchor: end;
}

/* Value labels on data points */
.value-label {
  font-family: 'Britanica', sans-serif;
  font-size: 12px;
  font-weight: 700;
  fill: var(--puzzel-blue);
  text-anchor: middle;
  opacity: 0;
  animation: fadeInValue 0.3s ease-out forwards;
}

.value-label:nth-child(1) { animation-delay: 0.7s; }
.value-label:nth-child(2) { animation-delay: 0.8s; }
.value-label:nth-child(3) { animation-delay: 0.9s; }
.value-label:nth-child(4) { animation-delay: 1s; }
.value-label:nth-child(5) { animation-delay: 1.1s; }
.value-label:nth-child(6) { animation-delay: 1.2s; }

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

/* Grid lines */
.grid-line {
  stroke: #E5E5EA;
  stroke-width: 1;
  opacity: 0.5;
}

/* ========================================
   SHARE RESULTS SECTION
   ======================================== */

.share-section {
  background: #FFFFFF;
  border-radius: 32px; /* Full 32px border radius on all corners */
  padding: 24px;
  margin-top: 24px;
  margin-bottom: 48px;
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.share-button-large {
  width: 100%;
  max-width: 298px;
  background: var(--puzzel-mint-cta); /* Use new primary CTA color */
  color: #000000;
  gap: 12px;
  /* Size, border-radius, height are controlled by .button-large from global CSS */
}

.share-button-large:hover {
  background: #7AD0B8; /* Slightly darker on hover */
}

.share-button-large:active {
  background: #69C5AD; /* Even darker when pressed */
}

.share-subtitle {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgb(128, 115, 111);
  margin: 0;
  text-align: center;
}

/* ============================= */
/* Instructions Section (No Stats Yet) */
/* ============================= */

.instructions-section {
  width: calc(100% + 48px); /* Full width plus both paddings */
  background: #FFFFFF; /* White background */
  border-radius: 32px; /* Full 32px border radius on all corners */
  padding: 24px; /* 24px on all sides */
  display: flex;
  flex-direction: column;
  gap: 24px; /* itemSpacing: 24 */
  position: relative;
  z-index: 2;
  margin-left: -24px;
  margin-right: -24px;
  margin-top: 24px;
}

.instructions-header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.instructions-title {
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  color: #000000;
  margin: 0;
  text-align: left;
}

.instructions-subtitle {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: rgb(128, 115, 111);
  margin: 0;
  text-align: left;
}

.instructions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card Styling */
.rules-card,
.points-card,
.tips-card {
  background: #F9F9F9;
  border-radius: 16px;
  padding: 16px;
}

.rules-card h3,
.points-card h3,
.tips-card h3 {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 12px 0;
}

.rules-list,
.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rules-list li,
.tips-list li {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  padding-left: 20px;
  position: relative;
}

.rules-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--puzzel-mint-cta);
  font-weight: 700;
  font-size: 18px;
}

.tips-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--puzzel-blue);
  font-weight: 700;
}

/* Points List */
.points-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.point-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #FFFFFF;
  border-radius: 8px;
}

.point-attempts {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.point-value {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--puzzel-mint-cta);
}


/* ===================================
   TILE EXAMPLES (Color-coded)
   =================================== */

.tile-examples {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mathoe-specific example styles */
.mathoe-example {
  background: #F5F5F7;
  border-radius: 12px;
  padding: 16px;
}

.mathoe-example .example-title {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 12px 0;
  color: var(--puzzel-text-primary);
}

.mathoe-example .example-calculation {
  font-size: 16px;
  margin: 8px 0;
  color: var(--puzzel-text-primary);
}

.mathoe-example .example-steps {
  margin-top: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mathoe-example .example-steps p {
  margin: 0;
  font-size: 16px;
  font-family: 'Britanica', monospace;
  color: var(--puzzel-text-primary);
}

/* Sudokoe-specific example styles */
.sudoku-example {
  background: #F5F5F7;
  border-radius: 12px;
  padding: 16px;
}

.sudoku-example .example-title {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 12px 0;
  color: var(--puzzel-text-primary);
}

.sudoku-example .sudoku-tips {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sudoku-example .sudoku-tips li {
  padding-left: 24px;
  position: relative;
  font-size: 14px;
  color: var(--puzzel-text-primary);
}

.sudoku-example .sudoku-tips li::before {
  content: '•';
  position: absolute;
  left: 8px;
  color: #C3CCF8;
  font-weight: bold;
}

.sudoku-example .example-tip {
  margin: 12px 0 0 0;
  padding: 12px;
  background: white;
  border-radius: 8px;
  font-size: 14px;
  font-style: italic;
  color: rgb(128, 115, 111);
}

.tile-example-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.example-tile {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
}

.example-tile.tile-correct {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.6);
}

.example-tile.tile-present {
  background: radial-gradient(circle, #F3DE8A 0%, #F3DE8A 70%, #E5E5EA 70%, #E5E5EA 100%);
  color: #101010;
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.6);
}

.example-tile.tile-absent {
  background: #E5E5EA;
  color: #101010;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.example-text {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  color: var(--puzzel-text-secondary);
  line-height: 1.4;
}

/* ===================================
   POINTS EXPLANATION
   =================================== */

.points-explanation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.points-intro {
  font-size: 14px;
  color: var(--puzzel-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.points-breakdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.points-breakdown h4 {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin: 0 0 8px 0;
}

.bonus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bonus-list li {
  font-size: 14px;
  color: var(--puzzel-text-secondary);
  line-height: 1.6;
  padding-left: 0;
}

.bonus-list li strong {
  color: var(--puzzel-text-primary);
}

.points-note {
  font-size: 13px;
  color: var(--puzzel-mint-cta);
  font-weight: 600;
  font-style: italic;
  margin: 8px 0 0 0;
  padding: 12px;
  background: rgba(139, 220, 196, 0.1);
  border-radius: 8px;
  border-left: 3px solid var(--puzzel-mint-cta);
}
.dashboard-modal {
  max-width: 400px !important;
  width: 90% !important;
  animation: fadeInSlideUp 0.5s ease-out;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.dashboard-header h2 {
  margin: 0;
  color: var(--puzzel-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dashboard-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 0.5rem;
}

.tab-btn {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--puzzel-radius-small);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--puzzel-text-secondary);
  font-weight: 500;
}

.tab-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--puzzel-text-primary);
}

.tab-btn.active {
  background: var(--puzzel-mint);
  color: white;
}

.dashboard-content {
  text-align: left;
  margin-bottom: 1rem;
}

.details-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.game-result {
  margin-bottom: 1.5rem;
  text-align: center;
}

.result-message {
  padding: 1rem;
  border-radius: var(--puzzel-radius-medium);
  font-weight: 600;
  margin-bottom: 1rem;
}

.result-message.success {
  background: var(--puzzel-mint);
  color: white;
}

.result-message.error {
  background: var(--puzzel-orange);
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stat-item {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--puzzel-radius-medium);
  padding: 0.75rem;
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--puzzel-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.guess-distribution {
  margin-top: 1.5rem;
}

.guess-distribution h4 {
  margin: 0 0 1rem 0;
  color: var(--puzzel-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.distribution-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.distribution-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bar-label {
  width: 20px;
  text-align: center;
  font-weight: 600;
  color: var(--puzzel-text-primary);
}

.bar-container {
  flex: 1;
  height: 24px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--puzzel-radius-small);
  overflow: hidden;
  position: relative;
}

.bar {
  height: 100%;
  background: var(--puzzel-mint);
  border-radius: var(--puzzel-radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  transition: width 0.3s ease;
  min-width: 24px;
}

.bar.current {
  background: var(--puzzel-mint);
  animation: pulse 2s infinite;
}

.detailed-stats {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--puzzel-radius-medium);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row .stat-label {
  color: var(--puzzel-text-secondary);
  font-size: 0.875rem;
}

.stat-row .stat-value {
  font-weight: 600;
  color: var(--puzzel-text-primary);
}

.performance-chart {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--puzzel-radius-medium);
  padding: 1.5rem;
}

.performance-chart h4 {
  margin: 0 0 1rem 0;
  color: var(--puzzel-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.chart-placeholder {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--puzzel-radius-small);
  color: var(--puzzel-text-secondary);
  font-style: italic;
}

.insights-section {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--puzzel-radius-medium);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.insights-section h4 {
  margin: 0 0 1rem 0;
  color: var(--puzzel-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.insights-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: transparent;
  border-radius: var(--puzzel-radius-small);
  border-left: 3px solid var(--puzzel-mint);
}

.insight-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.insight-text {
  color: var(--puzzel-text-primary);
  font-size: 0.875rem;
  line-height: 1.4;
}

.tips-section {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--puzzel-radius-medium);
  padding: 1.5rem;
}

.tips-section h4 {
  margin: 0 0 1rem 0;
  color: var(--puzzel-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tip-item {
  padding: 0.75rem;
  background: transparent;
  border-radius: var(--puzzel-radius-small);
  border-left: 3px solid var(--puzzel-orange);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--puzzel-text-primary);
}

.tip-item strong {
  color: var(--puzzel-text-primary);
  font-weight: 600;
}

.dashboard-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .dashboard-modal {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 999999 !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .stat-item {
    padding: 0.75rem;
  }
  
  .stat-value {
    font-size: 1.25rem;
  }
  
  .stat-label {
    font-size: 0.75rem;
  }
  
  .dashboard-tabs {
    gap: 0.25rem;
  }
  
  .tab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .detailed-stats,
  .performance-chart,
  .insights-section,
  .tips-section {
    padding: 1rem;
  }
  
  .insight-item,
  .tip-item {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .tab-btn:hover {
    background: none;
    color: var(--puzzel-text-secondary);
  }
  
  .tab-btn:active {
    background: rgba(0, 0, 0, 0.1);
    color: var(--puzzel-text-primary);
  }
} .statistics-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 999999 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.statistics-modal {
  background: transparent;
  border-radius: var(--puzzel-radius-xl);
  padding: 1.5rem;
  max-width: 400px;
  width: 90%;
  max-height: 85vh;
  text-align: center;
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative !important;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 999999 !important;
}



.statistics-modal h2 {
  margin: 0 0 1.5rem 0;
  color: var(--puzzel-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.stat-item {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 1rem;
  border-radius: var(--puzzel-radius-large);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--puzzel-shadow-light);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}



.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--puzzel-shadow-medium);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--puzzel-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.game-result {
  margin: 1.5rem 0;
  position: relative;
  z-index: 1;
}

.result-message {
  padding: 1rem 1.25rem;
  border-radius: var(--puzzel-radius-large);
  font-weight: 600;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  box-shadow: var(--puzzel-shadow-medium);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.result-message.success {
  background: rgba(52, 199, 89, 0.9);
  color: white;
  box-shadow: 0 6px 24px rgba(52, 199, 89, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.result-message.error {
  background: rgba(255, 59, 48, 0.9);
  color: white;
  box-shadow: 0 6px 24px rgba(255, 59, 48, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.statistics-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--puzzel-radius-large);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.875rem;
  box-shadow: var(--puzzel-shadow-light);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--puzzel-shadow-medium);
}

.btn:hover::before {
  opacity: 1;
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--puzzel-mint);
  color: white;
}

.btn-primary:hover {
  background: #ACCECB;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #000;
  color: white;
  border: 1px solid #8E8E93;
}

.btn-secondary:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
}

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

/* Mobile-first responsive design */
@media (max-width: 480px) {
  .statistics-modal {
    padding: 1.5rem;
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }
  
  .stats-grid {
    gap: 0.75rem;
  }
  
  .stat-value {
    font-size: 1.75rem;
  }
  
  .statistics-actions {
    flex-direction: column;
  }
  
  .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 360px) {
  .statistics-modal {
    padding: 1.25rem;
  }
  
  .statistics-modal h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .stat-label {
    font-size: 0.7rem;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .statistics-modal {
    padding: 1.5rem;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .statistics-modal h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .stats-grid {
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .stat-item {
    padding: 1rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .game-result {
    margin: 1.5rem 0;
  }
  
  .result-message {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn:hover {
    transform: none;
    box-shadow: var(--puzzel-shadow-light);
  }
  
  .btn:active {
    transform: scale(0.95);
  }
  
  .stat-item:hover {
    transform: none;
    box-shadow: var(--puzzel-shadow-light);
  }
} /* UI Test Page Styles */
.ui-test-page {
  min-height: 100vh;
  background: #F6F6F6;
  padding: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.ui-test-container {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  max-height: 90vh;
}

.ui-test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.ui-test-header h1 {
  color: var(--puzzel-text-primary);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.ui-test-close-btn {
  background: var(--puzzel-mint);
  color: var(--ios-dark-gray);
  border: none;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ui-test-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.test-section {
  margin-bottom: 4rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.test-section h2 {
  color: var(--puzzel-text-primary);
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
}

.test-section h3 {
  color: var(--puzzel-text-secondary);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.button-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.size-group, .color-group, .state-group {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Button Size Classes */
.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 8px;
  min-height: 36px;
}

.btn-medium {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 12px;
  min-height: 44px;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border-radius: 16px;
  min-height: 52px;
}

/* Button Color Classes */
.btn-primary {
  background: var(--puzzel-mint);
  color: var(--ios-dark-gray);
  border: 1px solid var(--puzzel-mint);
}

.btn-primary-light {
  background: rgba(168, 237, 195, 0.3);
  color: var(--ios-dark-gray);
  border: 1px solid rgba(168, 237, 195, 0.5);
}

.btn-primary-dark {
  background: var(--ios-mint-dark);
  color: white;
  border: 1px solid var(--ios-mint-dark);
}

.btn-secondary {
  background: #000;
  color: white;
  border: 1px solid #8E8E93;
}

.btn-accent {
  background: var(--puzzel-mint);
  color: var(--ios-dark-gray);
  border: 1px solid var(--puzzel-mint);
}

.btn-accent-light {
  background: rgba(168, 237, 195, 0.2);
  color: var(--ios-dark-gray);
  border: 1px solid rgba(168, 237, 195, 0.4);
}

.btn-accent-dark {
  background: #2D5A3D;
  color: white;
  border: 1px solid #2D5A3D;
}

.btn-success {
  background: var(--puzzel-mint);
  color: white;
  border: 1px solid var(--puzzel-mint);
}

.btn-warning {
  background: var(--puzzel-orange);
  color: white;
  border: 1px solid var(--puzzel-orange);
}

.btn-error {
  background: var(--puzzel-orange);
  color: white;
  border: 1px solid var(--puzzel-orange);
}

.btn-info {
  background: var(--ios-info);
  color: white;
  border: 1px solid var(--ios-info);
}

/* Button Base Styles */
.btn {
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn.active {
  transform: scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Liquid Glass Button Enhancements */
.btn.liquid-glass-enhanced {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn.liquid-glass-enhanced::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px) saturate(180%);
  filter: url(#glass-distortion);
  border-radius: inherit;
  z-index: -1;
}

.btn.liquid-glass-enhanced::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  z-index: -1;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ui-test-page {
    padding: 1rem;
  }
  
  .ui-test-container {
    padding: 2rem;
  }
  
  .ui-test-container h1 {
    font-size: 2rem;
  }
  
  .test-section {
    padding: 1.5rem;
  }
  
  .button-row {
    gap: 0.75rem;
  }
  
  .btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    min-height: 32px;
  }
  
  .btn-medium {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    min-height: 40px;
  }
  
  .btn-large {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .ui-test-container {
    padding: 1.5rem;
  }
  
  .test-section {
    padding: 1rem;
  }
  
  .button-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .btn {
    width: 100%;
  }
} /* Avatar Selector Modal */
.avatar-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.avatar-selector-modal {
  background: var(--puzzel-white);
  border-radius: 24px;
  padding: 24px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.avatar-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-selector-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

.avatar-selector-close {
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--puzzel-text-primary);
  transition: all 0.2s ease;
}

.avatar-selector-close:hover {
  background: #e0e0e0;
  transform: scale(1.1);
}

.profile-icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
  margin: 20px 0;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 16px;
  background: var(--puzzel-bg-secondary);
}

.profile-icon-item {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: hidden;
  background: var(--puzzel-white);
  position: relative;
}

.profile-icon-item:hover {
  border-color: #FF6B9D;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}

.profile-icon-item.selected {
  border-color: #FF6B9D;
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(255, 107, 157, 0.2);
}

.profile-icon-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  color: #999;
  font-size: 12px;
  font-weight: 600;
}

.icon-selected-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: #FF6B9D;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.avatar-selector-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.remove-avatar-button {
  padding: 12px 24px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Britanica', sans-serif;
  transition: all 0.2s ease;
}

.remove-avatar-button:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.background-color-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.color-selector-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

.color-options-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 8px 0;
}

.color-option {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.color-option.selected {
  border-color: var(--puzzel-text-primary);
  box-shadow: 0 0 0 2px rgba(255, 107, 157, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.color-checkmark {
  color: white;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

/* Modern User Profile Page - Oehoe Design System */
.user-profile-page {
  min-height: 100vh;
  background: var(--puzzel-bg-primary);
  display: flex;
  flex-direction: column;
}

/* Header */
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background: var(--puzzel-bg-secondary);
  border-radius: 0 0 32px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.back-button,
.edit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--puzzel-bg-secondary);
  border: none;
  color: var(--puzzel-text-primary);
  cursor: pointer;
  border-radius: 50% !important;
  transition: all 0.2s ease;
  font-size: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.back-button:hover,
.edit-button:hover {
  background: #E8D1C9;
  transform: translateY(-1px);
}

.profile-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

.profile-content {
  flex: 1;
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Profile Header Card */
.profile-header-card {
  background: var(--puzzel-white);
  padding: 32px;
  border-radius: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-avatar-section {
  position: relative;
  flex-shrink: 0;
}

.avatar-with-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar {
  flex-shrink: 0;
}

.country-flag-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: var(--puzzel-white);
  border: 2px solid var(--puzzel-bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: var(--puzzel-mint-cta);
  border: 2px solid var(--puzzel-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--puzzel-text-primary);
  transition: all 0.2s ease;
}

.avatar-edit-btn:hover {
  transform: scale(1.1);
}

.profile-basic-info {
  flex: 1;
}

.profile-username-section {
  margin-bottom: 12px;
}

.profile-name {
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

.profile-username {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
  font-weight: 400;
}

.profile-level {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
  font-weight: 500;
}

.profile-country {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(128, 115, 111);
  font-size: 14px;
  font-family: 'Britanica', sans-serif;
}

.country-flag {
  font-size: 18px;
  line-height: 1;
}

/* Edit Form */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.edit-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

.profile-username-readonly,
.profile-level-readonly {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-username-readonly label,
.profile-level-readonly label {
  font-size: 14px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

.readonly-field {
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Britanica', sans-serif;
  background: rgba(0, 0, 0, 0.03);
  color: var(--puzzel-text-primary);
  opacity: 0.7;
}

.level-hint {
  font-size: 12px;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
  margin-top: 4px;
}

.profile-input,
.profile-select {
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Britanica', sans-serif;
  transition: border-color 0.2s ease;
  background: var(--puzzel-white);
  color: var(--puzzel-text-primary);
}

.profile-input:focus,
.profile-select:focus {
  outline: none;
  border-color: var(--puzzel-mint-cta);
  box-shadow: 0 0 0 3px rgba(139, 220, 196, 0.1);
}

/* XP & Level Card */
.profile-xp-card {
  background: linear-gradient(135deg, var(--puzzel-mint-cta) 0%, #7DCBB5 100%);
  padding: 24px;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(139, 220, 196, 0.3);
  margin-bottom: 24px;
  color: var(--puzzel-text-primary);
}

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

.xp-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xp-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
  color: var(--puzzel-text-primary);
}

.xp-label {
  font-size: 14px;
  opacity: 0.8;
  font-family: 'Britanica', sans-serif;
}

.level-badge {
  background: rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
  backdrop-filter: blur(10px);
}

.xp-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.xp-progress-fill {
  height: 100%;
  background: var(--puzzel-white);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.xp-progress-text {
  font-size: 12px;
  opacity: 0.9;
  font-family: 'Britanica', sans-serif;
}

/* Tab Navigation */
.profile-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background: var(--puzzel-white);
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tab-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Britanica', sans-serif;
  color: rgb(128, 115, 111);
  transition: all 0.2s ease;
}

.tab-button:hover {
  background: rgba(139, 220, 196, 0.1);
  color: var(--puzzel-text-primary);
}

.tab-button.active {
  background: var(--puzzel-mint-cta);
  color: var(--puzzel-text-primary);
}

/* Tab Content */
.profile-tab-content {
  background: var(--puzzel-white);
  padding: 24px;
  border-radius: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-height: 400px;
}

.profile-tab-content h3 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
}

/* Overview Tab */
.stats-section {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 16px;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--puzzel-mint-cta), #7DCBB5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--puzzel-text-primary);
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
}

.leaderboard-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 16px;
  margin-bottom: 24px;
  color: var(--puzzel-text-primary);
}

.leaderboard-label {
  font-size: 12px;
  opacity: 0.8;
  font-family: 'Britanica', sans-serif;
  margin-bottom: 4px;
}

.leaderboard-value {
  font-size: 24px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
}

/* Privacy Tab */
.privacy-description {
  color: rgb(128, 115, 111);
  font-size: 14px;
  margin-bottom: 24px;
  font-family: 'Britanica', sans-serif;
}

.privacy-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.privacy-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 16px;
}

.privacy-setting-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.privacy-setting-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  margin-bottom: 4px;
}

.privacy-setting-desc {
  font-size: 12px;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--puzzel-mint-cta);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Achievements Tab */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
  transition: transform 0.2s ease;
}

.achievement-item:hover {
  transform: translateY(-2px);
}

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

.achievement-icon {
  flex-shrink: 0;
  color: var(--puzzel-mint-cta);
}

.achievement-item.locked .achievement-icon {
  color: #ccc;
}

.achievement-text {
  flex: 1;
}

.achievement-title {
  font-weight: 600;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  margin-bottom: 4px;
  font-size: 16px;
}

.achievement-desc {
  font-size: 12px;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
  margin-bottom: 4px;
}

.achievement-date {
  font-size: 11px;
  color: var(--puzzel-mint-cta);
  font-family: 'Britanica', sans-serif;
}

.no-achievements {
  text-align: center;
  padding: 48px 24px;
  color: rgb(128, 115, 111);
}

.no-achievements p {
  margin-top: 16px;
  font-family: 'Britanica', sans-serif;
}

/* Social Tab */
.social-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.social-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 16px;
  flex: 1;
}

.social-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  margin-bottom: 4px;
}

.social-stat-label {
  font-size: 12px;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
}

.friends-section {
  padding: 24px;
  text-align: center;
}

.coming-soon {
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
}

/* Action Buttons */
.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: var(--puzzel-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Britanica', sans-serif;
  color: var(--puzzel-text-primary);
}

.action-button:hover {
  border-color: var(--puzzel-mint-cta);
  background: rgba(139, 220, 196, 0.1);
  transform: translateY(-1px);
}

.action-button.logout {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.action-button.logout:hover {
  background: rgba(255, 107, 107, 0.1);
  border-color: #ff5252;
}

/* No User State */
.no-user-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--puzzel-white);
  border-radius: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.no-user-state h2 {
  margin: 1rem 0 0.5rem 0;
  color: var(--puzzel-text-primary);
  font-size: 1.5rem;
  font-family: 'Britanica', sans-serif;
}

.no-user-state p {
  margin: 0 0 2rem 0;
  color: rgb(128, 115, 111);
  font-family: 'Britanica', sans-serif;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .profile-content {
    padding: 16px;
  }
  
  .profile-header-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
  
  .profile-tabs {
    flex-wrap: wrap;
  }
  
  .tab-button {
    font-size: 12px;
    padding: 10px 12px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .social-stats {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .profile-header {
    padding: 16px;
  }
  
  .profile-header h1 {
    font-size: 20px;
  }
  
  .profile-xp-card,
  .profile-tab-content {
    padding: 20px;
  }
  
  .profile-name {
    font-size: 24px;
  }
}
/* Shared Game Header Styles */

.game-header {
  background: var(--puzzel-bg-secondary);
  border-radius: 0 0 32px 32px;
  padding: 24px;
  width: 100%;
  z-index: 100;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  margin: 0;
}

.game-header .header-icons-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.game-header-title {
  font-family: 'Britanica', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  margin: 0;
  flex: 1;
  text-align: center;
}

.game-header .header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Header Icon Buttons */
.game-header .header-icon-btn {
  width: 36px;
  height: 36px;
  background: #F0DFD7;
  border-radius: 50% !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--puzzel-text-primary);
  flex-shrink: 0;
}

.game-header .header-icon-btn:hover {
  background: #E8D1C9;
  transform: scale(1.05);
}

.game-header .header-icon-btn:active {
  transform: scale(0.95);
}

.game-header .header-icon-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 8;
}

/* Favorite button - filled when active */
.game-header .header-icon-btn.favorite[aria-label*="Remove"] {
  background: #FF6B6B;
  color: white;
}

.game-header .header-icon-btn.favorite[aria-label*="Remove"]:hover {
  background: #FF5252;
}

/* Info button styling */
.game-header .header-icon-btn.info {
  background: #F0DFD7;
  color: var(--puzzel-text-primary);
}

.game-header .header-icon-btn.info:hover {
  background: #E8D1C9;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .game-header {
    padding: 24px;
  }
  
  .game-header-title {
    font-size: 18px;
  }
}


/* Game Completion Modal Styles - Unified Bottom Sheet */

.game-completion-modal {
  /* Inherits unified-modal styles */
  max-height: 90vh !important;
  padding: 2rem 2rem 0 2rem !important;
  min-height: 600px !important;
}

.game-result-header {
  background: transparent;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2rem;
}

.game-result-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  letter-spacing: -0.02em;
}

/* Fix close-btn in game-result-header */
.game-result-header .close-btn {
  background: #F0F0F0;
  border: none;
  color: var(--puzzel-text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s ease;
  box-shadow: none;
  font-family: 'Britanica', sans-serif;
  border-radius: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.game-result-header .close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--puzzel-text-primary);
}

.game-result-header .close-btn svg {
  width: 24px;
  height: 24px;
}

/* Guest Completion Modal */
.guest-completion-modal {
  text-align: center;
  padding: 0 0 24px 0;
  overflow-y: auto;
  flex: 1;
}

.guest-cta-text {
  font-size: 1rem;
  color: var(--puzzel-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.5;
  font-family: 'Britanica', sans-serif;
}

.points-tease-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #F3DE8A 0%, #F0C674 100%);
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.3);
}

.points-coin-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
  flex-shrink: 0;
}

.points-tease-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.points-tease-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
}

.points-tease-value {
  font-size: 32px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
}

.guest-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.guest-signup-btn {
  background: #8BDCC4 !important;
  color: #101010 !important;
  width: 100%;
}

.guest-signup-btn:hover {
  background: #7DCBB5 !important;
}

.guest-login-link {
  background: transparent;
  border: none;
  color: var(--puzzel-text-secondary);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
  font-family: 'Britanica', sans-serif;
}

.guest-login-link:hover {
  color: var(--puzzel-text-primary);
}

/* Points Earned Container - Side by Side */
.points-earned-container {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Points Earned Banner */
.points-earned-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 24px;
  flex: 1;
  min-width: 0;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.3);
}

.points-earned-banner.owllets-banner {
  background: linear-gradient(135deg, #8BDCC4 0%, #7DCBB5 100%);
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.3);
}

.points-earned-banner.hoots-banner {
  background: linear-gradient(135deg, #F3DE8A 0%, #F0C674 100%);
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.3);
}

.points-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.points-label {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 600;
  font-family: 'Britanica', sans-serif;
}

.points-value {
  font-size: 24px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
}

/* Points Breakdown Card */
.points-breakdown-card {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.breakdown-header {
  font-family: 'Britanica', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  letter-spacing: -0.01em;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.breakdown-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.breakdown-label {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  color: var(--puzzel-text-secondary);
  font-weight: 600;
}

.breakdown-value {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
}

.breakdown-row.bonus .breakdown-label {
  color: var(--puzzel-mint-cta);
}

.breakdown-row.bonus .breakdown-value {
  color: var(--puzzel-mint-cta);
}

.breakdown-row.bonus.premium .breakdown-label {
  color: #B8860B;
}

.breakdown-row.bonus.premium .breakdown-value {
  color: #B8860B;
}

/* Premium Points Tease */
.premium-points-tease {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(243, 222, 138, 0.15) 0%, rgba(240, 198, 116, 0.15) 100%);
  border-radius: 16px;
  border: 1px solid rgba(243, 222, 138, 0.4);
  text-align: left;
}

.premium-tease-text {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #B8860B;
  display: block;
  line-height: 1.4;
}

/* Already Played Notice */
.already-played-notice {
  padding: 1rem;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 16px;
  border-left: 3px solid #FFC107;
  color: #856404;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Britanica', sans-serif;
  margin-bottom: 2rem;
}

/* Correct Word Display */
.correct-word-display {
  text-align: left;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  margin-bottom: 2rem;
}

.correct-word-label {
  font-size: 0.9rem;
  color: var(--puzzel-text-secondary);
  margin: 0 0 0.5rem 0;
  font-weight: 500;
  font-family: 'Britanica', sans-serif;
}

.correct-word-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Game Stats Grid */
.game-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.game-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
}

.stat-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--puzzel-bg-secondary);
  flex-shrink: 0;
}

.stat-icon-wrapper.attempts-icon {
  background: linear-gradient(135deg, #8BDCC4 0%, #7DCBB5 100%);
}

.stat-icon-wrapper.time-icon {
  background: linear-gradient(135deg, #C3CCF8 0%, #A8B5F0 100%);
}

.stat-icon-wrapper.streak-icon {
  background: linear-gradient(135deg, #F3DE8A 0%, #F0C674 100%);
}

/* Icon number (for attempts icon) - no longer used */
.stat-icon-number {
  font-size: 20px;
  font-weight: 700;
  color: #101010;
  font-family: 'Britanica', sans-serif;
}

.stat-card-label {
  font-size: 16px;
  color: var(--puzzel-text-secondary);
  font-weight: 600;
  text-align: center;
  margin: 0;
  font-family: 'Britanica', sans-serif;
}

.stat-card-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  font-family: 'Britanica', sans-serif;
  margin: 0;
}

/* Action Buttons */
.game-result-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.game-result-primary {
  background: var(--puzzel-mint-cta) !important;
  color: var(--puzzel-text-primary) !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.game-result-primary:hover {
  background: #7BD4BB !important;
  transform: translateY(-2px);
}

.game-result-secondary,
.game-result-share {
  background: var(--puzzel-bg-secondary) !important;
  color: var(--puzzel-text-primary) !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.game-result-secondary:hover,
.game-result-share:hover {
  background: #E8D1C9 !important;
  transform: translateY(-1px);
}

/* Scrollable content area for logged-in users */
.game-completion-modal .modal-content {
  overflow-y: auto;
  flex: 1;
  padding: 0;
  text-align: left;
}

/* Mobile responsive for game completion */
@media (max-width: 480px) {
  .game-result-header h3 {
    font-size: 20px;
  }
  
  .correct-word-value {
    font-size: 24px;
  }
  
  .points-value,
  .points-tease-value {
    font-size: 24px;
  }
  
  .game-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
  }
}

/* Base Game Container Styles */

.base-game {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  position: relative;
  overflow-y: auto;
  background: var(--puzzel-white);
}

.base-game .scrollable-content {
  flex: 1;
  overflow: visible;
  padding: 0;
  background: radial-gradient(
    ellipse at 80% 100%, 
    rgba(173, 180, 223, 0.2) 0%, 
    rgba(173, 180, 223, 0) 100%
  );
  height: 100vh;
}

.base-game .game-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 0 24px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Loading State */
.game-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.game-loading p {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  color: var(--puzzel-text-secondary);
  margin: 0;
}

/* Error State */
.game-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 16px;
}

.game-error p {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  color: #D32F2F;
  margin: 0;
}

.game-error button {
  padding: 12px 24px;
  background: var(--puzzel-mint-cta);
  color: var(--puzzel-text-primary);
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-error button:hover {
  background: #7BD4BB;
  transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .base-game .game-content {
    padding: 48px 12px 0 12px;
  }
}

/* PWA Mode Adjustments */
@media (display-mode: standalone) {
  .base-game {
    height: 100vh;
    height: -webkit-fill-available;
  }
}


/* Letroe Board Styles - Copied from Board.css */

.board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  animation: boardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.board-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  opacity: 0;
  animation: rowFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.board-row:nth-child(1) { animation-delay: 0.1s; }
.board-row:nth-child(2) { animation-delay: 0.15s; }
.board-row:nth-child(3) { animation-delay: 0.2s; }
.board-row:nth-child(4) { animation-delay: 0.25s; }
.board-row:nth-child(5) { animation-delay: 0.3s; }
.board-row:nth-child(6) { animation-delay: 0.35s; }

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

.tile {
  width: 52px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  background: white;
  color: var(--puzzel-text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--puzzel-radius-small);
  box-shadow: var(--puzzel-shadow-light);
  position: relative;
  overflow: hidden;
}

.tile.filled {
  background: white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  animation: pop 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.correct {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.6);
  animation: flip 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.present {
  background: radial-gradient(circle, #F3DE8A 0%, #F3DE8A 70%, #E5E5EA 70%, #E5E5EA 100%);
  color: #101010;
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.6);
  animation: flip 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.absent {
  background: #E5E5EA;
  color: #101010;
  box-shadow: 0 4px 16px rgba(229, 229, 234, 0.6);
  animation: flip 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile.current {
  background: white;
  box-shadow: 0 0 0 3px rgba(206, 227, 224, 0.5);
  animation: pulse 2s infinite;
}

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

@keyframes flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(0, 122, 255, 0.1); }
}

/* Mobile responsive */
@media (max-width: 480px) {
  .board { gap: 8px; }
  .board-row { gap: 8px; }
  .tile {
    width: 52px;
    height: 52px;
    font-size: 1.75rem;
  }
}

@media (max-width: 360px) {
  .board { gap: 8px; }
  .board-row { gap: 8px; }
  .tile {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .board { gap: 8px; }
  .board-row { gap: 8px; }
  .tile {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
}


/* Letroe Keyboard Styles - Copied from Keyboard.css */

.keyboard {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 24px 12px 24px 12px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #E2E4E6;
  border-radius: 24px 24px 0 0;
  animation: keyboardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.keyboard-row {
  display: flex;
  gap: 0.5vw;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Special characters row (Estonian) - shorter than other rows */
.keyboard-row-special {
  gap: 0.5vw;
}

.keyboard-row-special .key {
  min-height: 32px !important;
  max-height: 32px !important;
  aspect-ratio: 1 !important;
  font-size: 1rem !important;
}

.key {
  flex: 1 1 auto;
  max-width: 34px;
  min-width: 32px;
  aspect-ratio: 0.75;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: white;
  color: #101010;
  font-family: 'Britanica', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  font-size: 1.2rem;
  user-select: none;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.key:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.key:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.key.backspace-key {
  background: #d6664c;
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  flex: 1 1 auto;
  max-width: 34px;
}

.key.enter-key {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.4);
  width: calc(100% - 24px);
  flex: none;
  max-width: none;
  aspect-ratio: auto;
  height: 43px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 24px !important;
}

.key.backspace-key:hover {
  background: #c55a42;
  box-shadow: 0 6px 20px rgba(214, 102, 76, 0.4);
}

.key.enter-key:hover {
  background: #7DCBB5;
  box-shadow: 0 6px 20px rgba(139, 220, 196, 0.5);
}

.key.correct {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.6);
}

.key.present {
  background: #F3DE8A;
  color: #101010;
  box-shadow: 0 4px 16px rgba(243, 222, 138, 0.6);
}

.key.absent {
  background: #E5E5EA;
  color: #101010;
  box-shadow: 0 4px 16px rgba(229, 229, 234, 0.6);
}

/* Keyboard control buttons */
.keyboard-row-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.keyboard-row-bottom .enter-key {
  max-width: 120px;
  flex: 0 1 auto;
}

.keyboard-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: white;
  border: none;
  border-radius: 50%;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  height: 43px;
  width: 43px;
}

.keyboard-control-btn:hover {
  background: #f5f5f5;
  transform: scale(1.05);
}

.keyboard-control-btn:active {
  transform: scale(0.95);
  background: #e5e5ea;
}

/* Keyboard sizes */
.keyboard-size-small .key {
  max-width: 30px;
  min-width: 28px;
  min-height: 40px;
  font-size: 0.9rem;
}

.keyboard-size-small .key.enter-key {
  height: 40px;
  font-size: 1rem;
  max-width: none;
}

.keyboard-size-small .keyboard-control-btn {
  height: 40px;
  width: 40px;
}

.keyboard-size-medium .key {
  max-width: 34px;
  min-width: 32px;
  min-height: 44px;
  font-size: 1.4rem;
}

.keyboard-size-medium .key.backspace-key {
  font-size: 1.4rem;
}

.keyboard-size-medium .key.enter-key {
  height: 43px;
  font-size: 1.2rem;
  max-width: none;
}

.keyboard-size-medium .keyboard-control-btn {
  height: 43px;
  width: 43px;
}

.keyboard-size-large .key {
  max-width: 38px;
  min-width: 36px;
  min-height: 50px;
  font-size: 1.3rem;
}

.keyboard-size-large .key.enter-key {
  height: 50px;
  font-size: 1.3rem;
  max-width: none;
}

.keyboard-size-large .keyboard-control-btn {
  height: 50px;
  width: 50px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .keyboard {
    padding: 24px 12px 64px 12px;
    bottom: 48px;
  }
  
  .keyboard-row {
    gap: 1vw;
  }
  
  .keyboard-row-bottom {
    gap: 12px;
    margin: 6px 0 0 0;
  }
  
  .key {
    max-width: 34px;
    font-size: clamp(0.75rem, 2vw, 1rem);
  }
  
  .keyboard-size-small .key {
    font-size: clamp(0.65rem, 1.8vw, 0.9rem);
  }
  
  .keyboard-size-medium .key {
    font-size: clamp(0.85rem, 2.2vw, 1.2rem);
  }
  
  .keyboard-size-large .key {
    font-size: clamp(0.85rem, 2.2vw, 1.3rem);
  }
}

/* PWA mode */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .keyboard {
      bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px));
      padding: 12px;
    }
  }
  
  @media (max-width: 480px) and (display-mode: standalone) {
    .keyboard {
      bottom: 0 !important;
      padding: 12px;
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    }
  }
}

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


/* Letroe Game Specific Styles */

.letroe-game-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 24px;
  padding-bottom: 200px; /* Space for fixed keyboard */
}

/* Message Display */
.letroe-toast-message {
  position: fixed;
  top: 140px !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 32px;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  z-index: 1000;
  min-width: 280px;
  text-align: center;
  animation: slideDown 0.3s ease-out;
}

.letroe-toast-message.success {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.4);
}

.letroe-toast-message.error {
  background: #FF6B6B;
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
}

.letroe-toast-message.info {
  background: #C3CCF8;
  color: #101010;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .letroe-game-content {
    padding-bottom: 250px;
  }
  
  .letroe-toast-message {
    top: 120px !important;
    padding: 14px 28px;
    font-size: 16px;
    min-width: 260px;
  }
}


/* Mathoe Board Styles */

.mathoe-board {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 500px;
  animation: boardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Target Section with Circular Timer */
.mathoe-target-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(135deg, #C3CCF8 0%, #A8B5F0 100%);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
  min-height: 200px;
}

.mathoe-timer-ring {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mathoe-target-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mathoe-target-label {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mathoe-target-number {
  font-family: 'Britanica', sans-serif;
  font-size: 64px;
  font-weight: 700;
  color: #101010;
  margin: 0;
  line-height: 1;
}

.mathoe-timer-text {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  margin: 4px 0 0 0;
}

/* Points Multiplier Indicator - Top corner of target section */
.mathoe-points-multiplier {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  border: 2px solid rgba(195, 204, 248, 0.5);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mathoe-points-label {
  font-family: 'Britanica', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mathoe-points-value {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
  min-width: 45px;
  text-align: center;
}

.mathoe-points-value.full {
  color: #8BDCC4;
  background: rgba(139, 220, 196, 0.2);
}

.mathoe-points-value.medium {
  color: #F3DE8A;
  background: rgba(243, 222, 138, 0.2);
}

.mathoe-points-value.low {
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.2);
}

/* Expression Display */
.mathoe-expression-display {
  min-height: 100px;
  padding: 16px 20px;
  background: white;
  border-radius: 16px;
  border: 2px solid #E5E5EA;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mathoe-expression-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--puzzel-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mathoe-expression-value {
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
  word-break: break-all;
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Calculation History */
.mathoe-history {
  padding: 16px;
  background: rgba(139, 220, 196, 0.1);
  border-radius: 16px;
  border: 2px solid rgba(139, 220, 196, 0.3);
}

.mathoe-history-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--puzzel-text-secondary);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mathoe-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mathoe-history-item {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Numbers Grid */
.mathoe-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.mathoe-number-tile {
  aspect-ratio: 1;
  min-height: 80px;
  background: white;
  border: none;
  border-radius: 16px;
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #101010;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mathoe-number-tile:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: #f5f5f5;
}

.mathoe-number-tile:active:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mathoe-number-tile.used {
  background: #E5E5EA;
  color: #A0A0A0;
  cursor: not-allowed;
  opacity: 0.5;
}

.mathoe-number-tile:disabled {
  cursor: not-allowed;
}

/* Instructions */
.mathoe-instructions {
  text-align: center;
  padding: 16px;
  background: rgba(195, 204, 248, 0.1);
  border-radius: 12px;
}

.mathoe-instructions p {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  margin: 0 0 4px 0;
}

.mathoe-instructions-small {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--puzzel-text-secondary) !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .mathoe-board {
    gap: 16px;
  }
  
  .mathoe-target-number {
    font-size: 48px;
  }
  
  .mathoe-expression-display {
    min-height: 60px;
    padding: 16px;
    font-size: 24px;
  }
  
  .mathoe-numbers-grid {
    gap: 8px;
  }
  
  .mathoe-number-tile {
    min-height: 60px;
    font-size: 24px;
  }
  
  .mathoe-instructions {
    padding: 12px;
  }
  
  .mathoe-instructions p {
    font-size: 16px;
  }
  
  .mathoe-instructions-small {
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  .mathoe-target-number {
    font-size: 40px;
  }
  
  .mathoe-expression-display {
    font-size: 20px;
  }
  
  .mathoe-number-tile {
    min-height: 50px;
    font-size: 20px;
  }
}

/* Mathoe Number Pad Styles */

.mathoe-numberpad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #E2E4E6;
  border-radius: 24px 24px 0 0;
  padding: 12px 12px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: keyboardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Expression Display Bar (like in mockup) */
.mathoe-expression-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #4A4A4A;
  border-radius: 16px;
  padding: 12px 16px;
  min-height: 56px;
}

.mathoe-expression-content {
  flex: 1;
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  min-height: 32px;
}

.mathoe-expression-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

/* Interactive placeholder boxes */
.mathoe-placeholder-box {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4); /* Light grey for placeholder text */
  min-width: 48px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Empty placeholder boxes should show light grey background */
.mathoe-placeholder-box:empty {
  background: rgba(255, 255, 255, 0.05);
}

/* When filled with user input */
.mathoe-placeholder-box.filled {
  color: #FFFFFF; /* White text for filled values */
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

/* Result box styling */
.mathoe-placeholder-box.result {
  border-color: rgba(139, 220, 196, 0.5);
  color: rgba(139, 220, 196, 0.6);
}

.mathoe-placeholder-equals {
  font-family: 'Britanica', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 4px;
}

.mathoe-reset-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mathoe-reset-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(180deg);
}

.mathoe-reset-btn:active:not(:disabled) {
  transform: rotate(180deg) scale(0.95);
}

.mathoe-reset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Keyboard Rows - Numbers + Operators side by side */
.mathoe-keyboard-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.mathoe-number-btn {
  flex: 1;
  height: 56px;
  background: white;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #101010;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mathoe-number-btn:hover:not(:disabled) {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mathoe-number-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}

.mathoe-number-btn.used {
  background: #E5E5EA;
  color: #A0A0A0;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Empty number slots (grey placeholders) */
.mathoe-number-btn.empty {
  background: #D0D0D0;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.mathoe-number-btn:disabled {
  cursor: not-allowed;
}

/* Operators (in the same rows as numbers) */
.mathoe-operator-btn {
  flex: 1;
  height: 56px;
  background: white;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #101010;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mathoe-operator-btn:hover:not(:disabled) {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mathoe-operator-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}

.mathoe-operator-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Controls Row */
.mathoe-controls-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.mathoe-control-btn {
  flex: 1;
  height: 56px;
  border: none;
  border-radius: 16px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mathoe-control-btn.backspace {
  background: #E85D4A;
  color: white;
  font-size: 28px;
  flex: 0 0 auto;
  width: 80px;
}

.mathoe-control-btn.backspace:hover:not(:disabled) {
  background: #D94A37;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(232, 93, 74, 0.4);
}

.mathoe-control-btn.clear {
  background: #FDD870;
  color: #101010;
}

.mathoe-control-btn.clear:hover:not(:disabled) {
  background: #FCCC4D;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(253, 216, 112, 0.4);
}

.mathoe-control-btn.check {
  background: #8BDCC4;
  color: #101010;
}

.mathoe-control-btn.check:hover:not(:disabled) {
  background: #7DCBB5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(139, 220, 196, 0.5);
}

.mathoe-control-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}

.mathoe-control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .mathoe-numberpad {
    padding: 24px 12px 64px 12px;
    bottom: 48px;
  }
  
  .mathoe-keyboard-row,
  .mathoe-controls-row {
    gap: 6px;
  }
  
  .mathoe-operator-btn,
  .mathoe-number-btn {
    height: 50px;
    font-size: 20px;
  }
  
  .mathoe-control-btn {
    height: 48px;
    font-size: 16px;
  }
  
  .mathoe-control-btn.backspace {
    max-width: 70px;
    font-size: 20px;
  }
}

/* PWA mode */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .mathoe-numberpad {
      bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px));
      padding: 12px;
    }
  }
  
  @media (max-width: 480px) and (display-mode: standalone) {
    .mathoe-numberpad {
      bottom: 0 !important;
      padding: 12px;
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    }
  }
}

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

/* Mathoe Game Specific Styles */

.mathoe-game-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  gap: 24px;
  padding: 24px;
  padding-bottom: 200px;
}

/* Message Display */
.mathoe-toast-message {
  position: fixed;
  top: 140px !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 32px;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  z-index: 1000;
  min-width: 280px;
  max-width: 90%;
  text-align: center;
  animation: slideDown 0.3s ease-out;
}

.mathoe-toast-message.success {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.4);
}

.mathoe-toast-message.error {
  background: #FF6B6B;
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
}

.mathoe-toast-message.info {
  background: #C3CCF8;
  color: #101010;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .mathoe-game-content {
    padding: 12px;
    padding-bottom: 250px;
    gap: 16px;
  }
  
  .mathoe-toast-message {
    top: 120px !important;
    padding: 14px 28px;
    font-size: 16px;
    min-width: 260px;
  }
}

/* Sudokoe Board Styles */

.sudokoe-board {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #E5E5EA;
  padding: 2px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: boardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  max-width: 400px;
  width: 100%;
  aspect-ratio: 1;
}

@keyframes boardFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sudokoe-row {
  display: flex;
  gap: 0;
  flex: 1;
}

.sudokoe-cell {
  flex: 1;
  aspect-ratio: 1;
  background: white;
  border: 1px solid #D1D1D6;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Britanica', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #101010;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  padding: 0;
  margin: 0;
}

.sudokoe-cell:hover:not(.fixed) {
  background: #f5f5f5;
}

.sudokoe-cell.fixed {
  background: #F0F0F0;
  color: #101010;
  cursor: default;
}

.sudokoe-cell.selected {
  background: #8BDCC4 !important;
  color: #101010;
  box-shadow: inset 0 0 0 2px #7DCBB5;
}

.sudokoe-cell.highlighted {
  background: rgba(139, 220, 196, 0.2);
}

.sudokoe-cell.same-box {
  background: rgba(139, 220, 196, 0.1);
}

.sudokoe-cell.error {
  background: #FFE5E5;
  color: #FF6B6B;
  margin: 0 !important; /* Override global .error margin */
}

/* Frame around 3x3 boxes - thick borders on box boundaries */
.sudokoe-cell.right-border {
  border-right: 3px solid #8E8E93 !important;
}

.sudokoe-cell.bottom-border {
  border-bottom: 3px solid #8E8E93 !important;
}

/* Ensure every 3rd cell (except last) has thick right border for box frames */
.sudokoe-cell:nth-child(3n):not(:last-child) {
  border-right: 3px solid #8E8E93 !important;
}

.cell-value {
  font-size: 24px;
  font-weight: 700;
}

/* Notes Grid */
.cell-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 2px;
  gap: 1px;
}

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #A0A0A0;
}

.note.active {
  color: #666;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .sudokoe-board {
    max-width: 100%;
  }
  
  .sudokoe-cell {
    font-size: 18px;
  }
  
  .cell-value {
    font-size: 20px;
  }
  
  .note {
    font-size: 8px;
  }
}

@media (max-width: 360px) {
  .sudokoe-cell {
    font-size: 16px;
  }
  
  .cell-value {
    font-size: 18px;
  }
  
  .note {
    font-size: 7px;
  }
}


/* Sudokoe Controls Styles */

.sudokoe-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #E2E4E6;
  border-radius: 24px 24px 0 0;
  padding: 20px 12px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: keyboardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Numbers Rows */
.sudokoe-numbers-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.sudokoe-numbers-row .sudokoe-number-btn {
  flex: 1;
}

.sudokoe-number-btn {
  aspect-ratio: 1;
  min-height: 50px;
  background: white;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #101010;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sudokoe-number-btn:hover:not(:disabled) {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.sudokoe-number-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sudokoe-number-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Notes button in number row */
.sudokoe-notes-btn {
  background: #F3DE8A !important;
  font-size: 14px;
  flex-direction: column;
  gap: 4px;
}

.sudokoe-notes-btn.active {
  background: #F0C674 !important;
  box-shadow: 0 6px 20px rgba(243, 222, 138, 0.4);
}

.sudokoe-notes-btn span {
  font-size: 12px;
  font-weight: 600;
}

/* Action Buttons */
.sudokoe-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.sudokoe-actions .sudokoe-action-btn {
  flex: 1;
}

.sudokoe-action-btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  color: #101010;
}

.sudokoe-action-btn span {
  font-size: 14px;
  font-weight: 700;
}

.sudokoe-action-btn.undo {
  background: #9B9B9B;
  color: white;
}

.sudokoe-action-btn.undo:hover:not(:disabled) {
  background: #8A8A8A;
  box-shadow: 0 6px 20px rgba(155, 155, 155, 0.4);
}

.sudokoe-action-btn.clear {
  background: #d6664c;
  color: white;
}

.sudokoe-action-btn.clear:hover:not(:disabled) {
  background: #c55a42;
  box-shadow: 0 6px 20px rgba(214, 102, 76, 0.4);
}

.sudokoe-action-btn.hint {
  background: #8BDCC4;
}

.sudokoe-action-btn.hint:hover:not(:disabled) {
  background: #7DCBB5;
  box-shadow: 0 6px 20px rgba(139, 220, 196, 0.5);
}

.sudokoe-action-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sudokoe-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .sudokoe-controls {
    padding: 20px 12px 64px 12px;
    bottom: 48px;
  }
  
  .sudokoe-numbers-row {
    gap: 6px;
  }
  
  .sudokoe-number-btn {
    min-height: 45px;
    font-size: 20px;
  }
  
  .sudokoe-actions {
    gap: 6px;
  }
  
  .sudokoe-action-btn {
    height: 44px;
    font-size: 12px;
  }
}

/* PWA mode */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .sudokoe-controls {
      bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px));
      padding: 12px;
    }
  }
  
  @media (max-width: 480px) and (display-mode: standalone) {
    .sudokoe-controls {
      bottom: 0 !important;
      padding: 12px;
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    }
  }
}

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


/* Sudokoe Game Specific Styles */

.sudokoe-game-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  gap: 16px;
  padding: 16px;
  padding-bottom: 250px;
}

/* Loading State */
.sudokoe-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 24px;
}

.sudokoe-loading p {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(139, 220, 196, 0.2);
  border-top-color: #8BDCC4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Game Info */
.sudokoe-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sudokoe-difficulty,
.sudokoe-hints {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--puzzel-text-primary);
}

.sudokoe-difficulty {
  color: #C3CCF8;
}

/* Message Display */
.sudokoe-toast-message {
  position: fixed;
  top: 140px !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 32px;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  z-index: 1000;
  min-width: 280px;
  max-width: 90%;
  text-align: center;
  animation: slideDown 0.3s ease-out;
}

.sudokoe-toast-message.success {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.4);
}

.sudokoe-toast-message.error {
  background: #FF6B6B;
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
}

.sudokoe-toast-message.info {
  background: #C3CCF8;
  color: #101010;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .sudokoe-game-content {
    padding: 12px;
    padding-bottom: 280px;
    gap: 12px;
  }
  
  .sudokoe-info {
    max-width: 100%;
    padding: 10px 12px;
  }
  
  .game-container.message {
    top: 120px !important;
    padding: 14px 28px;
    font-size: 16px;
    min-width: 260px;
  }
}

/* Game Test Page Styles */

.game-test-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-container {
  max-width: 1000px;
  width: 100%;
}

.test-title {
  font-family: 'Britanica', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: white;
  text-align: center;
  margin: 0 0 12px 0;
}

.test-subtitle {
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin: 0 0 48px 0;
}

.test-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.test-game-card {
  background: white;
  border: none;
  border-radius: 24px;
  padding: 32px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.test-game-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.test-game-card:active {
  transform: translateY(-4px);
}

.test-game-card.letroe {
  background: linear-gradient(135deg, #CEE3E0 0%, #A8D5CE 100%);
}

.test-game-card.mathoe {
  background: linear-gradient(135deg, #C3CCF8 0%, #A8B5F0 100%);
}

.test-game-card.sudokoe {
  background: linear-gradient(135deg, #F3DE8A 0%, #F0C674 100%);
}

.test-game-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.test-game-card h2 {
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #101010;
  margin: 0 0 8px 0;
}

.test-game-card p {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 16px 0;
}

.test-game-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.test-game-features li {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.test-info {
  background: white;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.test-info h3 {
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #101010;
  margin: 0 0 16px 0;
}

.test-info p {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 0 12px 0;
}

.test-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.test-info li {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  padding: 12px;
  background: #F5F5F5;
  border-radius: 12px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .game-test-page {
    padding: 24px 16px;
  }
  
  .test-title {
    font-size: 36px;
  }
  
  .test-subtitle {
    font-size: 16px;
    margin-bottom: 32px;
  }
  
  .test-games-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  
  .test-game-card {
    padding: 24px 20px;
  }
  
  .test-game-icon {
    font-size: 48px;
  }
  
  .test-game-card h2 {
    font-size: 24px;
  }
  
  .test-info {
    padding: 24px;
  }
  
  .test-info h3 {
    font-size: 20px;
  }
  
  .test-info ul {
    grid-template-columns: 1fr;
  }
}


/* Logihoe Board Styles */

.logihoe-board {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 500px;
  position: relative;
  animation: boardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Points Multiplier Indicator - Integrated with timer */
.logihoe-points-multiplier {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

.logihoe-points-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

.logihoe-points-value {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
  min-width: 45px;
  text-align: center;
}

.logihoe-points-value.full {
  color: #8BDCC4;
  background: rgba(139, 220, 196, 0.2);
}

.logihoe-points-value.medium {
  color: #F3DE8A;
  background: rgba(243, 222, 138, 0.2);
}

.logihoe-points-value.low {
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.2);
}

/* Sequence Container */
.logihoe-sequence-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: linear-gradient(135deg, #C3CCF8 0%, #A8B5F0 100%);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
  overflow: hidden; /* Prevent overflow */
}

.logihoe-title {
  font-family: 'Britanica', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #101010;
  margin: 0;
  text-align: center;
}

/* Sequence Display */
.logihoe-sequence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0; /* Allow shrinking */
}

.logihoe-sequence-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto; /* Allow shrinking but don't grow */
  min-width: 0; /* Allow shrinking below content size */
  min-height: 60px;
}

.logihoe-number {
  font-family: 'Britanica', sans-serif;
  font-size: clamp(20px, 4vw, 36px); /* Responsive font size */
  font-weight: 700;
  color: #101010;
  padding: clamp(6px, 1vw, 12px) clamp(10px, 2vw, 20px);
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.logihoe-answer-box {
  font-family: 'Britanica', sans-serif;
  font-size: clamp(20px, 4vw, 36px); /* Responsive font size */
  font-weight: 700;
  color: #8BDCC4;
  padding: clamp(6px, 1vw, 12px) clamp(10px, 2vw, 20px);
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #8BDCC4;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(139, 220, 196, 0.3);
  min-width: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.logihoe-answer-box:empty::before {
  content: '?';
  color: rgba(139, 220, 196, 0.5);
}

.logihoe-sequence-item.missing {
  animation: pulse 2s ease-in-out infinite;
}

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

/* Timer and Points - Combined */
.logihoe-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  flex-wrap: wrap;
}

.logihoe-timer-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

.logihoe-timer-value {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #101010;
}

/* Instructions */
.logihoe-instructions {
  text-align: center;
  padding: 16px;
  background: rgba(195, 204, 248, 0.1);
  border-radius: 12px;
}

.logihoe-instructions p {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  margin: 0 0 4px 0;
}

.logihoe-instructions-small {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--puzzel-text-secondary) !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .logihoe-board {
    gap: 16px;
  }
  
  .logihoe-sequence-container {
    padding: 24px;
    gap: 16px;
  }
  
  .logihoe-title {
    font-size: 18px;
  }
  
  .logihoe-sequence {
    gap: 8px;
  }
  
  .logihoe-number,
  .logihoe-answer-box {
    font-size: 24px;
    padding: 8px 12px;
    min-width: 0;
    min-height: 50px;
  }
  
  .logihoe-sequence-item {
    flex: 0 1 auto;
    min-width: 0;
  }
  
  .logihoe-instructions {
    padding: 12px;
  }
  
  .logihoe-instructions p {
    font-size: 16px;
  }
  
  .logihoe-instructions-small {
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  .logihoe-number,
  .logihoe-answer-box {
    font-size: 20px;
    padding: 6px 10px;
    min-width: 0;
    min-height: 45px;
  }
  
  .logihoe-sequence {
    gap: 6px;
  }
  
  .logihoe-sequence-item {
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* Logihoe Number Pad Styles */

.logihoe-numberpad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #E2E4E6;
  border-radius: 24px 24px 0 0;
  padding: 12px 12px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: keyboardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Answer Display Bar */
.logihoe-answer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #4A4A4A;
  border-radius: 16px;
  padding: 12px 16px;
  min-height: 56px;
}

.logihoe-answer-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logihoe-answer-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logihoe-answer-value {
  font-family: 'Britanica', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: white;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  text-align: right;
}

/* Keyboard Grid */
.logihoe-keyboard-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.logihoe-keyboard-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

/* Number Buttons */
.logihoe-number-btn {
  flex: 1;
  height: 56px;
  background: white;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #101010;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logihoe-number-btn:hover:not(:disabled) {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.logihoe-number-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}

.logihoe-number-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Zero button (wider) */
.logihoe-zero-btn {
  flex: 2;
}

/* Control Buttons */
.logihoe-control-btn {
  flex: 1;
  height: 56px;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logihoe-backspace-btn {
  background: #E85D4A;
  color: white;
  font-size: 28px;
  flex: 1;
}

.logihoe-backspace-btn:hover:not(:disabled) {
  background: #D94A37;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(232, 93, 74, 0.4);
}

.logihoe-clear-btn {
  background: #FDD870;
  color: #101010;
}

.logihoe-clear-btn:hover:not(:disabled) {
  background: #FCCC4D;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(253, 216, 112, 0.4);
}

.logihoe-check-btn {
  background: #8BDCC4;
  color: #101010;
}

.logihoe-check-btn:hover:not(:disabled) {
  background: #7DCBB5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(139, 220, 196, 0.5);
}

.logihoe-control-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}

.logihoe-control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .logihoe-numberpad {
    padding: 24px 12px 64px 12px;
    bottom: 48px;
  }
  
  .logihoe-keyboard-row {
    gap: 6px;
  }
  
  .logihoe-number-btn,
  .logihoe-control-btn {
    height: 50px;
    font-size: 20px;
  }
  
  .logihoe-backspace-btn {
    font-size: 24px;
  }
  
  .logihoe-answer-value {
    font-size: 28px;
  }
}

/* PWA mode */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .logihoe-numberpad {
      bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px));
      padding: 12px;
    }
  }
  
  @media (max-width: 480px) and (display-mode: standalone) {
    .logihoe-numberpad {
      bottom: 0 !important;
      padding: 12px;
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    }
  }
}

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

/* Logihoe Game Specific Styles */

.logihoe-game-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  gap: 24px;
  padding: 24px;
  padding-bottom: 200px;
}

/* Message Display */
.logihoe-toast-message {
  position: fixed;
  top: 140px !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 32px;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  z-index: 1000;
  min-width: 280px;
  max-width: 90%;
  text-align: center;
  animation: slideDown 0.3s ease-out;
}

.logihoe-toast-message.success {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.4);
}

.logihoe-toast-message.error {
  background: #FF6B6B;
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
}

.logihoe-toast-message.info {
  background: #C3CCF8;
  color: #101010;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .logihoe-game-content {
    padding: 12px;
    padding-bottom: 250px;
    gap: 16px;
  }
  
  .logihoe-toast-message {
    top: 120px !important;
    padding: 14px 28px;
    font-size: 16px;
    min-width: 260px;
  }
}

/* Numeroe Board Styles */

.numeroe-board {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 500px;
  position: relative;
  animation: boardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Header */
.numeroe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #C3CCF8 0%, #A8B5F0 100%);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
}

.numeroe-title {
  font-family: 'Britanica', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #101010;
  margin: 0;
}

.numeroe-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

.numeroe-timer-label {
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

.numeroe-timer-value {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #101010;
}

/* Instructions */
.numeroe-instructions {
  text-align: center;
  padding: 16px;
  background: rgba(195, 204, 248, 0.1);
  border-radius: 12px;
}

.numeroe-instructions p {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  margin: 0 0 4px 0;
}

.numeroe-instructions-small {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--puzzel-text-secondary) !important;
}

/* Guesses Board */
.numeroe-guesses-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.numeroe-guess-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.numeroe-guess-row.current {
  border: 2px solid #C3CCF8;
  background: rgba(195, 204, 248, 0.1);
}

/* Guess Code Display */
.numeroe-guess-code {
  display: flex;
  gap: 8px;
  flex: 1;
}

.numeroe-digit {
  flex: 1;
  min-width: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Britanica', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #101010;
  background: #E2E4E6;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.numeroe-digit.filled {
  background: white;
  border-color: #C3CCF8;
  box-shadow: 0 2px 4px rgba(195, 204, 248, 0.3);
}

.numeroe-digit.empty {
  color: rgba(0, 0, 0, 0.3);
}

/* Feedback Indicators */
.numeroe-feedback {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 80px;
  justify-content: center;
}

.numeroe-feedback-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.numeroe-feedback-dot.correct-position {
  background: #8BDCC4;
  border: 2px solid #7DCBB5;
}

.numeroe-feedback-dot.correct-number {
  background: #FDD870;
  border: 2px solid #FCCC4D;
}

.numeroe-feedback-dot.wrong {
  background: #E2E4E6;
  border: 2px solid #D0D2D4;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .numeroe-board {
    gap: 16px;
  }
  
  .numeroe-header {
    padding: 12px;
  }
  
  .numeroe-title {
    font-size: 18px;
  }
  
  .numeroe-guess-row {
    padding: 12px;
    gap: 12px;
  }
  
  .numeroe-digit {
    min-width: 40px;
    min-height: 40px;
    font-size: 24px;
  }
  
  .numeroe-feedback {
    width: 70px;
    gap: 4px;
  }
  
  .numeroe-feedback-dot {
    width: 14px;
    height: 14px;
  }
  
  .numeroe-instructions {
    padding: 12px;
  }
  
  .numeroe-instructions p {
    font-size: 16px;
  }
  
  .numeroe-instructions-small {
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  .numeroe-digit {
    min-width: 35px;
    min-height: 35px;
    font-size: 20px;
  }
  
  .numeroe-feedback {
    width: 60px;
  }
  
  .numeroe-feedback-dot {
    width: 12px;
    height: 12px;
  }
}

/* Numeroe Number Pad Styles - Based on Sudokoe layout */

.numeroe-numberpad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #E2E4E6;
  border-radius: 24px 24px 0 0;
  padding: 20px 12px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: keyboardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Numbers Rows */
.numeroe-numbers-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.numeroe-numbers-row .numeroe-number-btn {
  flex: 1;
}

.numeroe-number-btn {
  aspect-ratio: 1;
  min-height: 50px;
  background: white;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #101010;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.numeroe-number-btn:hover:not(:disabled) {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.numeroe-number-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.numeroe-number-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Action Buttons */
.numeroe-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.numeroe-actions .numeroe-action-btn {
  flex: 1;
}

.numeroe-action-btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  color: #101010;
}

.numeroe-action-btn span {
  font-size: 14px;
  font-weight: 700;
}

.numeroe-action-btn.backspace {
  background: #9B9B9B;
  color: white;
}

.numeroe-action-btn.backspace:hover:not(:disabled) {
  background: #8A8A8A;
  box-shadow: 0 6px 20px rgba(155, 155, 155, 0.4);
}

.numeroe-action-btn.clear {
  background: #d6664c;
  color: white;
}

.numeroe-action-btn.clear:hover:not(:disabled) {
  background: #c55a42;
  box-shadow: 0 6px 20px rgba(214, 102, 76, 0.4);
}

.numeroe-action-btn.check {
  background: #8BDCC4;
}

.numeroe-action-btn.check:hover:not(:disabled) {
  background: #7DCBB5;
  box-shadow: 0 6px 20px rgba(139, 220, 196, 0.5);
}

.numeroe-action-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.numeroe-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .numeroe-numberpad {
    padding: 20px 12px 64px 12px;
    bottom: 48px;
  }
  
  .numeroe-numbers-row {
    gap: 6px;
  }
  
  .numeroe-number-btn {
    min-height: 45px;
    font-size: 20px;
  }
  
  .numeroe-actions {
    gap: 6px;
  }
  
  .numeroe-action-btn {
    height: 44px;
    font-size: 12px;
  }
}

/* PWA mode */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .numeroe-numberpad {
      bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px));
      padding: 12px;
    }
  }
  
  @media (max-width: 480px) and (display-mode: standalone) {
    .numeroe-numberpad {
      bottom: 0 !important;
      padding: 12px;
      padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    }
  }
}

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

/* Numeroe Game Specific Styles */

.numeroe-game-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  gap: 24px;
  padding: 24px;
  padding-bottom: 200px;
}

/* Message Display */
.numeroe-toast-message {
  position: fixed;
  top: 140px !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 32px;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-size: 18px;
  font-weight: 700;
  z-index: 1000;
  min-width: 280px;
  max-width: 90%;
  text-align: center;
  animation: slideDown 0.3s ease-out;
}

.numeroe-toast-message.success {
  background: #8BDCC4;
  color: #101010;
  box-shadow: 0 4px 16px rgba(139, 220, 196, 0.4);
}

.numeroe-toast-message.error {
  background: #FF6B6B;
  color: white;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
}

.numeroe-toast-message.info {
  background: #C3CCF8;
  color: #101010;
  box-shadow: 0 4px 16px rgba(195, 204, 248, 0.4);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .numeroe-game-content {
    padding: 12px;
    padding-bottom: 250px;
    gap: 16px;
  }
  
  .numeroe-toast-message {
    top: 120px !important;
    padding: 14px 28px;
    font-size: 16px;
    min-width: 260px;
  }
}

/* Install Prompt Styles */

.install-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px;
  background: linear-gradient(180deg, rgba(244, 231, 226, 0.95) 0%, rgba(244, 231, 226, 0.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(243, 222, 138, 0.3);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.install-prompt-content {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.install-prompt-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3DE8A;
  border-radius: 12px;
  color: #101010;
}

.install-prompt-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.install-prompt-text strong {
  font-family: 'Britanica', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #101010;
  line-height: 1.2;
}

.install-prompt-text span {
  font-family: 'Britanica', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 1.3;
}

.install-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.install-prompt-button {
  border: none;
  border-radius: 12px;
  font-family: 'Britanica', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
}

.install-prompt-button.install {
  background: #8BDCC4;
  color: #101010;
  padding: 10px 20px;
  font-size: 14px;
  min-width: 100px;
}

.install-prompt-button.install:hover {
  background: #7DCBB5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 220, 196, 0.3);
}

.install-prompt-button.install:active {
  transform: scale(0.98);
}

.install-prompt-button.dismiss {
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  width: 32px;
  height: 32px;
  padding: 0;
  min-width: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.install-prompt-button.dismiss:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #101010;
  border-color: rgba(0, 0, 0, 0.2);
}

.install-prompt-button.dismiss:active {
  transform: scale(0.95);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .install-prompt {
    padding: 12px;
  }

  .install-prompt-content {
    gap: 10px;
  }

  .install-prompt-icon {
    width: 36px;
    height: 36px;
  }

  .install-prompt-text strong {
    font-size: 15px;
  }

  .install-prompt-text span {
    font-size: 12px;
  }

  .install-prompt-button.install {
    padding: 9px 16px;
    font-size: 13px;
    min-width: 90px;
  }

  .install-prompt-button.dismiss {
    width: 28px;
    height: 28px;
  }
}

/* PWA mode - adjust for safe area */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    .install-prompt {
      padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    }
  }

  @media (max-width: 480px) and (display-mode: standalone) {
    .install-prompt {
      padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    }
  }
}

/* Hide on very small screens if content is too cramped */
@media (max-width: 360px) {
  .install-prompt-text span {
    display: none;
  }
}


/* Zune-like Page Transitions */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-transition.entering {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
}

.page-transition.entered {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.page-transition.exiting {
  opacity: 0;
  transform: scale(1.05) translateY(-20px);
}

.page-transition.exited {
  opacity: 0;
  transform: scale(1.05) translateY(-20px);
}

/* Page Container Transitions - Removed to fix full width */
/* .page-container {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-container.start-page {
  animation: slideInFromBottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-container.game-page {
  animation: slideInFromRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-container.stats-page {
  animation: slideInFromTop 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} */

/* Zune-like Slide Animations - Removed */
/* @keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideOutToLeft {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
  }
} */

/* Transition Overlay - Removed */
/* .transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(168, 237, 195, 0.1) 0%, rgba(16, 16, 16, 0.9) 100%);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.transition-overlay.active {
  opacity: 1;
} */

/* Content Fade Transitions */
.content-fade {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content-fade.fade-out {
  opacity: 0;
  transform: scale(0.98);
}

.content-fade.fade-in {
  opacity: 1;
  transform: scale(1);
}

.App {
  text-align: left;
  height: 100vh; /* Fixed height for scroll container */
  overflow-y: auto; /* Enable scrolling */
  overflow-x: hidden;
  background-color: #f6f6f6;
  color: #101010;
}

/* Game Container - Mobile-first, edge-to-edge like start screen */
.game-container {
  padding: 0; /* No padding - content goes edge-to-edge */
  width: 100%;
  min-width: 100vw;
  height: 100vh; /* Fixed height to create scrollable container */
  margin: 0;
  position: relative; /* Relative positioning allows sticky children */
  overflow-y: auto; /* Allow scrolling within game only */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  background: var(--puzzel-white);
}

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

.back-button {
  background: none;
  border: none;
  color: #A8EDC3;
  font-size: 16px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.back-button:hover {
  background-color: rgba(168, 237, 195, 0.1);
}

.game-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.game-actions {
  display: flex;
  gap: 10px;
}

.test-button {
  background: none;
  border: 2px solid #666;
  color: #666;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.test-button:hover {
  border-color: #A8EDC3;
  color: #A8EDC3;
}

/* Game Placeholder */
.game-placeholder {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  border: 1px solid #333;
}

.game-placeholder h2 {
  margin: 0 0 20px 0;
  color: #A8EDC3;
}

.game-placeholder p {
  color: #666;
  font-size: 16px;
}

/* Stats Placeholder */
.stats-placeholder {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.stats-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.stats-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

/* Removed conflicting .stats-content styles - now defined in GameDetailScreen.css */

.stats-content p {
  color: #666;
  font-size: 16px;
  margin-bottom: 20px;
}

.user-stats {
  background: rgba(168, 237, 195, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.user-stats h3 {
  margin: 0 0 10px 0;
  color: #A8EDC3;
}

.user-stats p {
  color: #666;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.logout-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.logout-btn:hover {
  background: #c82333;
}

.auth-prompt {
  text-align: center;
  padding: 20px;
}

.auth-prompt p {
  margin-bottom: 16px;
  color: #666;
}

.user-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error {
  text-align: center;
  padding: 20px;
  color: #dc3545;
  background: #fee;
  border-radius: 4px;
  margin: 10px 0;
} /* Britanica Font Family - Proper WOFF2 Format */
@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Regular.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Regular%20Italic.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Regular%20Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Light.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Light%20Italic.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Light%20Italic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Bold.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Bold%20Italic.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Bold%20Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Extra%20Bold.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Extra%20Bold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Extra%20Bold%20Italic.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Extra%20Bold%20Italic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Black.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/Britanica_woff/Britanica%20Black%20Italic.woff2') format('woff2'),
       url('/Britanica_woff/Britanica%20Black%20Italic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  font-family: 'Britanica', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* iOS 26 System Colors */
  --ios-blue: #007AFF;
  --ios-green: #34C759;
  --ios-orange: #FF9500;
  --ios-red: #FF3B30;
  --ios-purple: #AF52DE;
  --ios-pink: #FF2D92;
  
  /* iOS 26 Semantic Colors */
  --ios-label: #000000;
  --ios-secondary-label: #3C3C43;
  --ios-tertiary-label: #787880;
  --ios-quaternary-label: #AEAEB2;
  
  /* iOS 26 Background Colors */
  --ios-system-background: #FFFFFF;
  --ios-secondary-system-background: #F2F2F7;
  --ios-tertiary-system-background: #FFFFFF;
  
  /* Oehoe Design Colors */
  --puzzel-white: #FFF;
  --puzzel-bg-primary: #FAF7FA;
  --puzzel-bg-secondary: #F4E7E2;
  --puzzel-mint: #CEE3E0;
  --puzzel-mint-cta: #8BDCC4; /* Primary CTA button color - Better contrast from Figma */
  --puzzel-purple: #A6ACDC;
  --puzzel-orange: #E1927F;
  --puzzel-blue: #C3CCF8;
  --puzzel-yellow: #F3DE8A;
  --puzzel-gray: #80736F;
  --puzzel-text-primary: #000;
  --puzzel-text-secondary: #80736F;
  --puzzel-card-bg: #F0DFD7;
  --puzzel-ad-bg: #D9D9D9;
  
  /* Oehoe Border Radius */
  --puzzel-radius-small: 8px;
  --puzzel-radius-medium: 12px;
  --puzzel-radius-large: 16px;
  --puzzel-radius-xl: 24px;
  --puzzel-radius-xxl: 32px;
  
  /* Oehoe Shadows */
  --puzzel-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --puzzel-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  --puzzel-shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* Hybrid Color System - Light Beige Background with Mint Highlights */
  --ios-background: #F8F6F2;
  --ios-card-bg: rgba(255, 255, 255, 0.95);
  --ios-card-border: rgba(168, 237, 195, 0.15);
  --ios-text-primary: #101010;
  --ios-text-secondary: #666666;
  --ios-accent: var(--ios-mint);
  --ios-success: var(--ios-green);
  --ios-warning: var(--ios-orange);
  --ios-error: var(--ios-red);
  --ios-gray: var(--ios-tertiary-label);
  --ios-light-gray: #F2F2F7;
  --ios-dark-gray: #1C1C1E;
  
  /* iOS 26 Typography System */
  --ios-font-regular: 400;
  --ios-font-medium: 500;
  --ios-font-semibold: 600;
  --ios-font-bold: 700;
  
  --ios-text-caption: 12px;
  --ios-text-footnote: 13px;
  --ios-text-subheadline: 15px;
  --ios-text-body: 17px;
  --ios-text-headline: 17px;
  --ios-text-title3: 20px;
  --ios-text-title2: 22px;
  --ios-text-title1: 28px;
  --ios-text-large-title: 34px;
  
  /* iOS 26 Spacing System */
  --ios-spacing-xs: 4px;
  --ios-spacing-sm: 8px;
  --ios-spacing-md: 16px;
  --ios-spacing-lg: 24px;
  --ios-spacing-xl: 32px;
  --ios-spacing-xxl: 48px;
  
  /* iOS 26 Border Radius (Corrected) */
  --ios-radius-small: 6px;
  --ios-radius-medium: 8px;
  --ios-radius-large: 12px;
  --ios-radius-xl: 16px;
  
  /* iOS 26 Shadows (Updated) */
  --ios-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --ios-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
  --ios-shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.2);
  
  /* iOS 26 Blur System */
  --ios-blur-thin: 10px;
  --ios-blur-regular: 20px;
  --ios-blur-thick: 30px;
  --ios-blur-ultra-thick: 50px;
  
  /* Noise Texture System */
  --noise-light: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  --noise-medium: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  --noise-heavy: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: #F6F6F6;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

@media (max-width: 480px) {
  body {
    margin: 0;
    padding: 0;
    width: 100vw;
    overflow-x: hidden;
  }
}

#root {
  max-width: 100vw;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

@media (max-width: 480px) {
  #root {
    padding: 0;
    margin: 0;
    width: 100vw;
    max-width: 100vw;
  }
}

/* Old game styles removed - now handled by App.css, Game.css, and Board.css */

/* Tile styles removed - now handled by Board.css for consistency */




/* Keyboard styles removed - now handled by Keyboard.css for design system consistency */

/* Message styles removed - now handled by Game.css */

.stats {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--ios-card-bg);
  border-radius: var(--puzzel-radius-large);
  color: var(--puzzel-text-primary);
  box-shadow: var(--puzzel-shadow-medium);
  border: 1px solid var(--ios-card-border);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.language-selector {
  background: var(--ios-card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ios-card-border);
  border-radius: var(--puzzel-radius-medium);
  padding: 0.5rem 0.75rem;
  color: var(--puzzel-text-primary);
  box-shadow: var(--puzzel-shadow-medium);
  z-index: 10;
}

.language-selector select {
  background: transparent;
  border: none;
  color: var(--puzzel-text-primary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 1rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 1rem;
}

.language-selector select option {
  background: var(--ios-card-bg);
  color: var(--puzzel-text-primary);
  padding: 0.5rem;
}

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

@keyframes flip {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes flipStaggered {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(139, 220, 196, 0.25);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(139, 220, 196, 0.1);
  }
}

@keyframes messageSlideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes keyPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}





/* Mobile-first responsive design */
@media (max-width: 480px) {
  #root {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  
  /* Game container mobile styles - cleaned up, no border */
  .game-container {
    /* Removed: padding, border-radius, background, backdrop-filter, border, ::before pseudo-element */
    /* These are handled by App.css and Game.css */
  }
  
  .game-title {
    font-size: 2rem;
  }
  
  .game-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }
  
  .tile {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
  
  .key {
    width: 32px;
    height: 44px;
    font-size: 0.9rem;
  }
  
  .key.wide {
    width: 52px;
  }
  
  .game-header {
    margin-bottom: 0.75rem;
  }
  
  .game-title {
    font-size: 1.75rem;
  }
  
  .info-button {
    padding: 0.375rem;
  }
  
  .info-button svg {
    width: 16px;
    height: 16px;
  }
  
  .language-selector {
    padding: 0.375rem 0.5rem;
  }
  
  .language-selector select {
    font-size: 0.75rem;
  }
}

/* Mobile device optimizations */
@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
  /* Game container mobile touch device styles - cleaned up, no border */
  .game-container {
    /* Removed: padding, border-radius, background, backdrop-filter, border, ::before pseudo-elements */
    /* These are handled by App.css and Game.css */
  }
  
  .board {
    margin-bottom: 2rem;
  }
  
  .tile {
    width: 52px;
    height: 52px;
    font-size: 1.75rem;
    border-width: 2.5px;
  }
  
  /* Message styles moved to Game.css for better integration */
  
  .mobile-instructions {
    margin-top: 2rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--puzzel-radius-large);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
  }
  
  .mobile-instructions p {
    margin: 0;
    color: var(--puzzel-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
  }
  
  .mobile-input {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .keyboard-toggle {
    margin-top: 1rem;
  }

  .keyboard-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
  }

  .toggle-btn, .layout-btn {
    background: var(--puzzel-mint);
    color: white;
    border: none;
    border-radius: var(--puzzel-radius-large);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.875rem;
    box-shadow: var(--puzzel-shadow-light);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .toggle-btn:hover, .layout-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--puzzel-shadow-medium);
  }

  .toggle-btn:active, .layout-btn:active {
    transform: translateY(0);
  }

  .layout-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

@media (max-width: 360px) {
  .tile {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
  
  .key {
    width: 28px;
    height: 40px;
    font-size: 0.8rem;
  }
  
  .key.wide {
    width: 48px;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  /* Game container landscape styles - cleaned up */
  .game-container {
    /* Removed: padding - handled by App.css and Game.css */
  }
  
  .game-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
  }
  
  .game-subtitle {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
  
  .board {
    margin-bottom: 1rem;
  }
  
  .keyboard {
    margin-top: 1rem;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tile {
    border-width: 1.5px;
  }
  
  .key {
    border-width: 1px;
  }
}

/* Dark mode support - DISABLED (removed to clean up CSS) */

.info-button, .settings-button, .game-mode-button, .ui-test-button {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--puzzel-radius-medium);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--puzzel-text-primary);
  box-shadow: var(--puzzel-shadow-light);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.info-button::before, .settings-button::before, .game-mode-button::before, .ui-test-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: var(--puzzel-radius-medium);
  pointer-events: none;
}

.info-button:hover, .settings-button:hover, .game-mode-button:hover, .ui-test-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--puzzel-shadow-medium);
  background: rgba(255, 255, 255, 0.9);
}

.info-button:active, .settings-button:active, .game-mode-button:active, .ui-test-button:active {
  transform: translateY(0);
}

/* Button Positioning */
.info-button {
  left: 1rem;
}

.game-mode-button {
  right: 1rem;
}

.ui-test-button {
  right: 4rem;
}



/* Info Modal */
.info-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.info-panel {
  background: transparent;
  border-radius: 20px;
  max-width: 400px;
  width: 90%;
  max-height: 85vh;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.info-header h3 {
  margin: 0;
  color: var(--puzzel-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.info-panel p {
  margin: 0 0 2rem 0;
  color: var(--puzzel-text-secondary);
}

.examples {
  margin: 2rem 0;
  text-align: left;
}

.example {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.example .tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.example .tile.correct {
  background: var(--puzzel-mint);
  border-color: var(--puzzel-mint);
  color: white;
}

.example .tile.present {
  background: var(--puzzel-orange);
  border-color: var(--puzzel-orange);
  color: white;
  border-radius: 50%;
}

.example .tile.absent {
  background: #8E8E93;
  border-color: #8E8E93;
  color: white;
}

.info-panel button {
  background: var(--puzzel-mint);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
}

/* Info panel rules preview */
.info-panel .rules-preview {
  margin: 2rem 0;
}

.info-panel .rule-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}

.info-panel .example-row {
  display: flex;
  gap: 0.25rem;
}

.info-panel .example-tile {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(168, 237, 195, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  background: white;
  color: var(--puzzel-text-primary);
  border-radius: var(--puzzel-radius-small);
  box-shadow: var(--puzzel-shadow-light);
}

.info-panel .example-tile.correct {
  background: var(--puzzel-mint);
  border-color: var(--puzzel-mint);
  color: white;
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.4);
}

.info-panel .example-tile.present {
  background: var(--puzzel-orange);
  border-color: var(--puzzel-orange);
  color: white;
  box-shadow: 0 4px 16px rgba(255, 149, 0, 0.4);
  border-radius: 50%;
}

.info-panel .example-tile.absent {
  background: #8E8E93;
  border-color: #8E8E93;
  color: white;
  box-shadow: 0 4px 16px rgba(142, 142, 147, 0.4);
}

.info-panel .rule-text {
  font-size: 0.85rem;
  color: var(--puzzel-text-secondary);
  font-weight: 500;
  text-align: center;
}

/* Settings sections in info panel */
.settings-section {
  margin-bottom: 2rem;
  text-align: left;
}

.settings-section h4 {
  margin: 0 0 1rem 0;
  color: var(--puzzel-text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.setting-item {
  margin-bottom: 0.5rem;
}

.setting-item label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--puzzel-text-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.setting-item label strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--puzzel-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.setting-description {
  display: block;
  color: var(--puzzel-text-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  font-family: 'Britanica', sans-serif;
  margin-top: 0.25rem;
}

.about-info {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--puzzel-radius-large);
  padding: 1.5rem;
  margin-top: 1rem;
  text-align: left;
}

.about-info p {
  margin: 0 0 1rem 0;
  color: var(--puzzel-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.about-info p:last-child {
  margin-bottom: 0;
}

.about-info strong {
  color: var(--puzzel-text-primary);
  font-weight: 600;
}

.setting-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.setting-btn {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--puzzel-radius-large);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--puzzel-text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--puzzel-shadow-light);
  flex: 1;
  min-width: 120px;
}

.setting-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--puzzel-shadow-medium);
  background: rgba(255, 255, 255, 0.8);
}

.setting-btn.active {
  background: var(--puzzel-mint);
  color: white;
}

.setting-btn.active:hover {
  background: #ACCECB;
  transform: translateY(-1px);
}

/* Mobile responsive for settings */
@media (max-width: 480px) {
  .setting-controls {
    flex-direction: column;
  }
  
  .setting-btn {
    min-width: auto;
  }
  
  .info-panel {
    max-height: 90vh;
    padding: 1.5rem;
    margin: 0.5rem;
    width: 95%;
    max-width: 95%;
  }
}

/* Mobile optimizations for app usage */
@media (max-width: 768px) {
  .info-panel,
  .statistics-modal,
  .settings-panel {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

/* Global CSS System - Comprehensive Styling Rules */

/* Global rule: Force dark text on ALL elements with mint backgrounds */
[class*="active"],
[class*="primary"],
[class*="success"],
[class*="accent"],
[class*="bar"],
[class*="start"],
button[style*="background: var(--puzzel-mint)"],
button[style*="background:var(--puzzel-mint)"],
*[style*="background: var(--puzzel-mint)"],
*[style*="background:var(--puzzel-mint)"],
*[style*="background:var(--puzzel-mint)"],
*[style*="background: var(--puzzel-mint)"] {
  color: var(--ios-dark-gray) !important;
}



/* Clean Modal Design - Inspired by Modern iOS */
/* Old modal-clean styles removed - StatisticsDashboard still uses this */
/* Keeping minimal styles for backwards compatibility until StatisticsDashboard is migrated */
.modal-clean {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-clean .modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
}

/* Clean Button Design - Inspired by Modern iOS */
.btn,
button:not([class*="-large"]):not([class*="-medium"]):not([class*="-small"]):not(.favorite-action):not(.header-icon-btn):not(.key),
[class*="btn"]:not([class*="-large"]):not([class*="-medium"]):not([class*="-small"]):not(.favorite-action):not(.header-icon-btn):not(.key),
[class*="button"]:not([class*="-large"]):not([class*="-medium"]):not([class*="-small"]):not(.favorite-action):not(.header-icon-btn):not(.key) {
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 16px;
  font-family: 'Britanica', sans-serif;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */ /* Removed */
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  max-height: 48px;
  border-radius: 24px;
}

/* ========================================
   BUTTON SIZE SYSTEM - Oehoe Design
   ======================================== */

/* Large Primary CTA Buttons (48px height, pill shape) */
.btn-large,
.button-large,
[class*="button-large"] {
  height: 48px !important;
  border-radius: 48px !important; /* Full pill shape */
  padding: 0 32px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  font-family: 'Britanica', sans-serif !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ /* Removed */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn-large:hover,
.button-large:hover,
[class*="button-large"]:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); */ /* Removed */
}

.btn-large:active,
.button-large:active,
[class*="button-large"]:active {
  transform: translateY(0);
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ /* Removed */
}

/* Medium Buttons (Default - 40px height) */
.btn-medium,
.button-medium,
[class*="button-medium"] {
  height: 40px !important;
  border-radius: 24px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'Britanica', sans-serif !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */ /* Removed */
}

/* Small Buttons (32px height) */
.btn-small,
.button-small,
[class*="button-small"] {
  height: 32px !important;
  border-radius: 16px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Britanica', sans-serif !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); */ /* Removed */
}

/* Button Color Variants */
.btn-danger {
  background: #d6664c;
  color: #fff;
}

.btn-danger:hover {
  background: #c45540;
  transform: translateY(-1px);
}

/* Global card styling - excluding carousel cards and stat cards */
.card,
[class*="card"]:not([class*="puzzel"]):not([class*="game"]):not([class*="stat"]) {
  /* background: rgba(255, 255, 255, 0.6); */
  /* backdrop-filter: blur(25px); */
  -webkit-backdrop-filter: blur(25px);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Game Cards Carousel - Global Styles */
/* Old carousel debug styles removed - now handled by StartScreen.css */

/* Unified modal styling - overrides global modal rules */
.unified-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  z-index: 999999 !important;
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* Global input styling */
input,
select,
textarea {
  border: 1px solid rgba(168, 237, 195, 0.3);
  border-radius: var(--puzzel-radius-small);
  background: rgba(255, 255, 255, 0.8);
  color: var(--puzzel-text-primary);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--puzzel-mint);
  box-shadow: 0 0 0 3px rgba(168, 237, 195, 0.2);
}

/* Clean hover effects - excluding carousel cards and stat cards */
[class*="btn"]:hover,
button:hover,
[class*="card"]:not([class*="puzzel"]):not([class*="game"]):not([class*="stat"]):hover,
[class*="panel"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Exclude unified modal from hover effects */
.unified-modal-overlay:hover,
.unified-modal:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Global active states - excluding carousel cards and stat cards */
[class*="btn"]:active,
button:active,
[class*="card"]:not([class*="puzzel"]):not([class*="game"]):not([class*="stat"]):active,
[class*="panel"]:active {
  transform: translateY(0);
  box-shadow: var(--puzzel-shadow-light);
}

/* Exclude unified modal from active effects */
.unified-modal-overlay:active,
.unified-modal:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Global text styling */
h1, h2, h3, h4, h5, h6 {
  color: var(--puzzel-text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  color: var(--puzzel-text-secondary);
  line-height: 1.5;
}

/* Global spacing */
.container,
[class*="container"] {
  padding: 1.5rem;
  margin: 0 auto;
  max-width: 1200px;
}

/* Exception: Game container and carousel container should have no global padding */
.game-container,
.puzzel-carousel-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Global grid system */
.grid,
[class*="grid"] {
  display: grid;
  gap: 1rem;
}

.flex,
[class*="flex"] {
  display: flex;
  gap: 0.5rem;
}

/* Global responsive design */
@media (max-width: 768px) {
  .container,
  [class*="container"] {
    padding: 1rem;
  }
  
  /* Exception: Game container should have no padding on mobile */
  .game-container,
  .puzzel-carousel-container {
    padding: 0 !important;
  }
  
  .btn,
  button:not(.favorite-action):not(.header-icon-btn):not(.key),
  [class*="btn"]:not(.favorite-action):not(.header-icon-btn):not(.key) {
    font-size: 16px;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .container,
  [class*="container"] {
    padding: 0.75rem;
  }
  
  /* Exception: Game container should have no padding on mobile */
  .game-container,
  .puzzel-carousel-container {
    padding: 0 !important;
  }
  
  .btn,
  button:not(.favorite-action):not(.header-icon-btn):not(.key),
  [class*="btn"]:not(.favorite-action):not(.header-icon-btn):not(.key) {
    font-size: 16px;
    padding: 12px 16px;
  }
}

/* Touch device optimizations for settings */
@media (hover: none) and (pointer: coarse) {
  .setting-btn:hover {
    transform: none;
    box-shadow: var(--puzzel-shadow-light);
  }
  
  .setting-btn:active {
    transform: scale(0.95);
  }
}