/* VISUAL PARITY: Keep in sync with lib/screens/flutter_welcome_screen.dart
 * See docs/VISUAL_CONSTANTS.md for Flutter responsive → CSS fixed mappings
 * See docs/WELCOME_SCREEN_CHECKLIST.md for testing checklist
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES - DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
 * VISUAL PARITY: 1:1 mapping with Flutter implementation
 * Flutter references:
 * - lib/core/constants/constants.dart (AppSpacing, AppTextSizes)
 * - lib/core/utils/responsive_text.dart
 * - lib/screens/flutter_welcome_screen.dart
 */
:root {
  /* ═══ SPACING TOKENS ═══ */
  /* From AppSpacing constants.dart - base values before scaling */
  --sp-xt: 2px;     /* _baseExtraTiny */
  --sp-t: 4px;      /* _baseTiny */
  --sp-s: 8px;      /* _baseSmall */
  --sp-m: 12px;     /* _baseMedium */
  --sp-dp: 16px;    /* _baseDefaultPadding */
  --sp-l: 24px;     /* _baseLarge */

  /* Specialized spacing from Flutter constants */
  --sp-hint-h: 12px;    /* _baseHintHorizontal */
  --sp-hint-v: 8px;     /* _baseHintVertical */
  --sp-kbd: 4px;        /* _baseKeyboardSpacing */
  --sp-tile-gap: 8px;   /* SizedBox(height: 8) in game tiles */

  /* ═══ BORDER RADIUS TOKENS ═══ */
  --br-d: 8px;      /* _baseDefaultBorderRadius */
  --br-l: 12px;     /* _baseLargeBorderRadius */

  /* ═══ SIZE TOKENS ═══ */
  --sz-btn-h: 48px;         /* _baseButtonHeight */
  --sz-logo: 80px;          /* Logo width/height from flutter_welcome_screen.dart */
  --sz-footer-icon: 20px;   /* Footer social icons */
  --sz-cal-title-icon: 18px; /* Calendar title icons */

  /* ═══ TYPOGRAPHY TOKENS ═══ */
  /* From AppTextSizes constants.dart */
  --fs-display-xl: 48px;    /* displayExtraLarge */
  --fs-display-l: 32px;     /* displayLarge */
  --fs-title-l: 24px;       /* titleLarge */
  --fs-title-m: 20px;       /* titleMedium */
  --fs-body-l: 18px;        /* bodyLarge */
  --fs-body-m: 16px;        /* bodyMedium */
  --fs-label: 14px;         /* labelLarge */
  --fs-caption: 12px;       /* caption */

  /* Game-specific typography */
  --fs-game-title: 14px;    /* gameTileTitle */
  --fs-game-desc: 12px;     /* gameTileDescription */

  /* ═══ SHADOW TOKENS ═══ */
  --shadow-blur: 4px;       /* blurRadius from logo BoxShadow */
  --shadow-offset-y: 2px;   /* Offset(0, 2) from logo BoxShadow */

  /* ═══ COLOR TOKENS ═══ */
  /* Theme colors matching Material 3 */
  --clr-primary: #006C51;           /* Material 3 primary generated from #004D40 seed */
  --clr-on-primary: #FFFFFF;        /* Material 3 onPrimary */
  --clr-on-surface: #1C1B1F;         /* Material 3 onSurface */
  --clr-surface-variant: #1D1B20;   /* Material 3 onSurfaceVariant */
  --clr-on-secondary-container: #1C1B1F; /* Material 3 onSecondaryContainer */
  --clr-tertiary-container: #E8DEF8; /* Material 3 tertiaryContainer */
  --clr-on-tertiary-container: #1D1B20; /* Material 3 onTertiaryContainer */

  /* Game-specific calendar background colors */
  /* Must match lib/core/constants/game_registry.dart GameCalendarColors */
  --clr-riddle-cal: #D0E8FF;    /* riddleBackground */
  --clr-sumswap-cal: #E8F5E8;   /* sumSwapBackground */
  --clr-inquest-cal: #E6E6FA;   /* inquestBackground */
  --clr-math-cal: #FFF4E6;      /* mathBackground */

  /* ═══ LEGACY SPACING (to be replaced) ═══ */
  --spacing-small: var(--sp-s);
  --spacing-default: var(--sp-dp);
  --spacing-large: var(--sp-l);
  --riddle-calendar-bg: var(--clr-riddle-cal);
  --sumswap-calendar-bg: var(--clr-sumswap-cal);
  --inquest-calendar-bg: var(--clr-inquest-cal);
  --math-calendar-bg: var(--clr-math-cal);
  --primary-color: var(--clr-primary);
  --tertiary-container: var(--clr-tertiary-container);
  --on-tertiary-container: var(--clr-on-tertiary-container);
  --on-primary: var(--clr-on-primary);
  --on-surface: var(--clr-on-surface);
  --on-surface-variant: var(--clr-surface-variant);
  --on-secondary-container: var(--clr-on-secondary-container);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE VARIABLE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Media queries override ONLY variables, components continue using var(--*) */

/* Small screen width: reduce font sizes (matches responsive_text.dart < 400px) */
@media (max-width: 400px) {
  :root {
    --fs-game-title: 13px;   /* responsiveGameTileTitle: 13px on mobile */
    --fs-game-desc: 11px;    /* responsiveGameTileDescription: 11px on mobile */
    --sz-cal-title-icon: 16px; /* responsiveGameTileIconSize: 16px on mobile */
    --sz-logo: 60px;         /* Reduce logo size on small screens */
    --fs-title-l: 26px;      /* Reduce title size */
    --fs-body-m: 14px;       /* Reduce subtitle size */
  }
}

/* Small screen height: reduce spacing (matches AppSpacing clamp logic) */
@media (max-height: 700px) {
  :root {
    --sp-l: 18px; /* AppSpacing.getLarge() clamps to 18px on short screens */
    --spacing-large: 18px; /* Legacy variable */
  }
}

/* Large screen height: increase spacing */
@media (min-height: 900px) {
  :root {
    --sp-l: 32px; /* AppSpacing.getLarge() clamps to 32px on tall screens */
    --spacing-large: 32px; /* Legacy variable */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE STYLES & PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

body {
    margin: 0;
    padding: 0;
    background-color: #E6EBE9; /* Material 3 surfaceContainer generated from 0xFF004D40 */
    font-family: 'Roboto', sans-serif;
    color: #212529;
    line-height: 1.6;
    height: 100vh; /* Fallback */
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

main {
    display: block;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* Common welcome screen properties */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Push footer to bottom like Flutter */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    padding: var(--sp-t) 0px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 1;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    box-sizing: border-box;
    width: 100%;
}

.welcome-screen.hide {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.welcome-container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    border-radius: var(--sp-dp);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Take available space but allow footer to stick to bottom */
    box-sizing: border-box;
    height: auto;
    min-height: auto;
    max-height: none;
}

.returning-container {
    justify-content: flex-start; /* Content flows naturally, footer handled by welcome-screen */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER SECTION (Logo & Titles)
   ═══════════════════════════════════════════════════════════════════════════════ */

.logo-container {
    padding: 0 0 var(--spacing-default); /* Dynamic spacing after logo */
    text-align: center;
}

.custom-logo {
    width: var(--sz-logo);
    height: var(--sz-logo);
    margin: 0 auto;
    display: block; /* Ensures proper centering */
    border-radius: 50%; /* Circular logo like Flutter version */
    object-fit: cover; /* Ensures the image fills the circle */
    background-color: white;
    box-shadow: 0 var(--shadow-offset-y) var(--shadow-blur) rgba(0, 0, 0, 0.1);
}

.welcome-header {
    width: 100%;
    padding: 0;
    margin-bottom: var(--spacing-small); /* Dynamic small spacing */
    text-align: center;
}

.welcome-title {
    color: var(--clr-primary);
    font-size: var(--fs-display-l);
    font-weight: 700;
    margin: 0 0 var(--sp-s);
    line-height: 1.2; /* Match Flutter's default */
}

.welcome-subtitle {
    color: var(--on-secondary-container);
    font-size: var(--fs-body-m);
    font-weight: 400;
    margin: 0 0 var(--sp-s);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GAMES SECTION (Grid & Tiles)
   ═══════════════════════════════════════════════════════════════════════════════ */

.games-section {
    width: 100%;
    padding: 0 var(--sp-dp); /* Match Flutter AppSpacing.getDefaultPadding(context) */
    margin-bottom: var(--spacing-large); /* Dynamic spacing between sections */
}

.games-grid {
    display: flex;
    gap: var(--sp-m); /* Slightly reduce gap to allow more space for cards */
    justify-content: space-between; /* Use space-between for even distribution */
    padding: 0; /* Flutter doesn't add extra padding here */
}

/* Game Tile Styles */
.game-tile {
    flex: 1;
    background-color: white;
    border-radius: var(--br-l);
    border: none; /* Flutter uses elevation, not border */
    padding: var(--sp-dp);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 var(--shadow-blur) 6px rgba(0, 0, 0, 0.1); /* Match Flutter elevation: 4 */
    text-align: center;
}

.game-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Slightly stronger on hover */
}

.game-tile:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.game-tile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-t);
}

/* Game Title Widget */
.game-title-widget {
    display: flex;
    align-items: center;
    gap: var(--sp-t);
    margin-bottom: var(--sp-t);
}

.game-icon {
    font-size: var(--sz-footer-icon); /* Flutter uses slightly larger icons */
    color: var(--on-secondary-container);
}

.game-name {
    font-size: var(--fs-game-title); /* Match Flutter's game tile title size */
    font-weight: 600;
    color: var(--on-secondary-container);
}

.game-description {
    font-size: var(--fs-game-desc);
    color: var(--on-secondary-container);
    margin: 0;
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CALENDAR SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Calendar sections for returning users */
.calendar-sections {
    width: 100%;
    /* Removed bottom margin that was previously before share section */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-default); /* Dynamic spacing between calendars */
}

.calendar-section {
    width: 100%;
    padding: var(--sp-dp) 0 0 0; /* Keep top/bottom padding but remove left/right */
}

.riddle-calendar,
.sumswap-calendar {
    width: 100%;
}

/* Game-specific calendar background colors using CSS custom properties */
.riddle-calendar .calendar-day-box {
    background-color: var(--riddle-calendar-bg);
}

.sumswap-calendar .calendar-day-box {
    background-color: var(--sumswap-calendar-bg);
}

/* Calendar day boxes styling */
.calendar-prompt {
  text-align: center;
  color: var(--on-surface-variant);
  font-size: var(--fs-body-m);
  margin: 0 0 var(--sp-m);
}

.calendar-days-row {
  display: flex;
  gap: var(--sp-s); /* Match Flutter's 8px spacing */
  justify-content: flex-start;
  padding: 0 var(--sp-dp); /* Equal left/right inset inside scroll container */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  scroll-behavior: smooth;
  align-items: center;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  position: relative;
}

.calendar-days-row::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.calendar-day-box {
  flex-shrink: 0;
  width: clamp(95px, 24vw, 125px);
  height: clamp(95px, 15vh, 135px);
  border-radius: var(--br-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xt);
  cursor: pointer;
  background-color: #F7F2FA; /* Material 3 surface from #004D40 seed */
  color: var(--on-surface); /* Material 3 onSurface - matches Flutter default for completion icons */
  /* No default margin - handled by first/last child selectors */
}

/* Edge insets now handled by container padding for reliable cross-browser behavior */

.calendar-day-box.today-large {
  width: clamp(190px, 48vw, 250px);
}

/* Day box content - responsive sizing to match Flutter exactly */
.day-name {
  font-size: 13px; /* Default: 480px+ screens (matches Flutter 13.0) */
  font-weight: bold;
}
.day-month {
  font-size: var(--fs-caption); /* Default: 360px+ screens (matches Flutter 12.0) */
  font-weight: normal;
}
.day-number {
  font-size: 17px; /* Default: 360px+ screens (matches Flutter 17.0) */
  font-weight: normal;
}
.day-status {
  font-size: 15px; /* Default: >=360px screens (matches Flutter >=360px) */
  line-height: 1;
}

.day-status i.fas.fa-circle-check,
.day-status i.fas.fa-circle-xmark,
.day-status i.fas.fa-star {
  color: inherit;
  opacity: 0.7; /* Match Flutter's alpha value for non-selected */
}

/* SumSwap completion count display */
.day-status .completion-count {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
}

/* Large today box specific content - match Flutter (dayNameSize * 1.5) */
.calendar-day-box.today-large .day-name {
  font-size: 19px; /* 13px * 1.5 = 19.5px, clamped to 16-22px range */
  font-weight: bold;
  margin-bottom: var(--sp-xt);
}

.calendar-day-box .game-title-widget {
  display: flex;
  align-items: center;
  gap: 6px; /* Change from 4px to 6px to match Flutter spacing */
  font-size: var(--sz-cal-title-icon);
}

.calendar-day-box .game-title-widget i {
  font-size: var(--sz-cal-title-icon); /* Match Flutter GameTitleWidget iconSize: 18px */
  color: inherit;
}

.calendar-day-box .game-title-widget span {
  font-size: var(--sz-cal-title-icon);
  font-weight: 600; /* Change from bold to 600 to match Flutter FontWeight.w600 */
}

.calendar-day-box.today-large .day-month {
  font-size: var(--fs-caption); /* Same as monthSize in Flutter */
  font-weight: normal;
}

.calendar-day-box.today-large .day-number {
  font-size: 17px; /* Same as dateSize in Flutter */
  font-weight: normal;
}

.calendar-day-box.today-large .day-status {
  font-size: 15px; /* Same as regular completion icons, matches Flutter */
  line-height: 1;
}

/* Share section removed */

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.footer-section {
    width: 100%;
    text-align: center;
    padding: var(--sp-m) 0;
    background-color: transparent;
}

.social-media-links {
    display: flex;
    justify-content: center;
    gap: var(--sp-l);
    padding: 0 0 var(--sp-s) 0;
    align-items: center;
}

.social-media-links a {
    font-size: var(--sz-footer-icon);
    color: var(--clr-on-surface-variant);
    text-decoration: none;
    margin: 0 var(--sp-s);
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* YouTube icon specific color */
.social-media-links a[href*="youtube"] {
    color: #FF0000; /* YouTube red */
}

.social-media-links a:hover {
    color: var(--clr-primary);
    transform: scale(1.1);
}

.copyright {
    color: var(--clr-surface-variant);
    font-size: var(--fs-caption);
    margin: 0;
}

.returning-footer {
    margin-top: auto; /* Ensures it's pushed to the bottom */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS & MEDIA QUERIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Responsive adjustments for game tiles */
@media (max-width: 400px) {
    .games-grid {
        gap: var(--sp-s); /* Further reduce gap for small screens */
        /* Keep games-section padding consistent - no override needed */
    }

    .game-tile {
        padding: var(--sp-m);
    }

    .game-icon {
        font-size: var(--sz-cal-title-icon); /* Uses 16px from variable override */
    }

    .game-name {
        font-size: var(--fs-game-title); /* Uses 13px from variable override */
    }

    .game-description {
        font-size: var(--fs-game-desc); /* Uses 11px from variable override */
    }

    .welcome-container {
      width: 100%;
      border-radius: var(--sp-m);
    }

    .welcome-title {
      font-size: var(--fs-title-l); /* Uses 26px from variable override */
    }

    .welcome-subtitle {
      font-size: var(--fs-body-m); /* Uses 14px from variable override */
      margin-bottom: 6px;
    }

    .custom-logo {
      width: var(--sz-logo); /* Uses 60px from variable override */
      height: var(--sz-logo);
    }

    .footer-section .copyright {
        font-size: 11px;
    }

    .social-media-links a {
        font-size: 18px; /* Proportionally smaller on small screens */
        margin: 0 10px; /* Slightly reduced spacing for small screens but still larger than before */
    }
}

/* Calendar icon responsive breakpoints - match Flutter calendar row exactly */
@media (max-width: 360px) {
    .day-status,
    .calendar-day-box.today-large .day-status {
        font-size: 13px; /* Match Flutter <360px: 13.0 */
    }
}

@media (max-width: 320px) {
    .day-status,
    .calendar-day-box.today-large .day-status {
        font-size: 12px; /* Match Flutter <320px: 12.0 */
    }
}

/* Responsive adjustments - maintain good padding on various devices */
@media (min-width: 360px) and (max-width: 600px) {
    .footer-section {
      padding: var(--sp-s) 0; /* Proportionally reduce from 12px to 8px for medium screens */
    }
}

/* Larger screens - maintain good spacing */
@media (min-width: 500px) {
    .welcome-title {
      font-size: 30px; /* Slightly bigger fonts on larger screens */
    }

    .welcome-container {
      padding: 14px var(--sp-s) 6px; /* Reduce left/right padding for larger screens */
    }

    .footer-section {
      padding: 10px 0; /* Keep closer to base 12px for larger screens */
    }
}

/* Extra small phones - additional adjustments to fit content */
@media (max-width: 320px) {
    .welcome-container {
      width: 96%;
      padding: var(--sp-s) var(--sp-xt); /* Minimal left/right padding for extra small screens */
    }

    .welcome-title {
      font-size: var(--fs-title-l);
    }

    .welcome-subtitle {
      font-size: 13px;
      margin-bottom: var(--sp-t);
    }

    .footer-section {
      padding: 6px 0; /* Proportionally reduce from 12px to 6px for extra small screens */
      font-size: 10px;
    }

    .custom-logo {
      width: 50px;
      height: 50px;
    }

    .share-reminder p {
      font-size: 11px; /* Slightly smaller for very small screens while maintaining Flutter proportions */
    }

    .share-btn {
      width: 32px; /* Extra small override for very small screens */
      height: 32px;
    }
}

/* Update landscape orientation handling */
@media (max-height: 500px) and (orientation: landscape) {
    .welcome-container {
      padding: var(--sp-s) var(--sp-t); /* Minimal left/right padding for landscape mode */
      margin: 6px auto;
      display: flex;
      flex-direction: column;
      width: 90%;
      max-width: 90%;
      height: auto;
    }

    .logo-container, .welcome-header,
    .footer-section {
      width: 100%;
      order: initial;
      margin: 0;
      padding: var(--sp-t) 0;
    }

    .welcome-title {
      font-size: 22px;
    }

    .welcome-subtitle {
      font-size: var(--fs-caption);
    }
}

/* Height-based responsive adjustments */
@media (max-height: 700px) {
    .logo-container {
      padding: var(--sp-s) 0 var(--sp-t);
    }

    .welcome-header {
      padding: var(--sp-s) 0;
      margin-bottom: var(--sp-t);
    }
}

/* Extra small height */
@media (max-height: 500px) {
    .welcome-container {
      margin: 6px auto;
      padding: 10px var(--sp-t); /* Minimal left/right padding for small height screens */
    }

    .logo-container {
      padding: 6px 0 var(--sp-xt);
    }

    .welcome-title {
      font-size: var(--fs-title-l);
      margin: 0 0 var(--sp-xt);
    }

    .welcome-subtitle {
      font-size: var(--fs-label);
    }

    .welcome-header {
      padding: 6px 0;
      margin-bottom: var(--sp-xt);
    }

    .footer-section {
      padding: var(--sp-s) 0; /* Proportionally reduce from 12px to 8px for very short screens */
    }
    .copyright {
        margin-top: 0; /* Remove margin - spacing handled by social-media-links padding */
    }
    .social-media-links {
        padding-bottom: 6px; /* Proportionally reduce for very short screens */
    }
    .social-media-links a {
        font-size: var(--sz-cal-title-icon); /* Further reduce icon size on very short screens */
        margin: 0 var(--sp-s);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY STYLES & SPECIAL HANDLING
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Print styles */
@media print {
    .welcome-screen {
      position: static;
      overflow: visible;
    }
}

/* Safari-specific icon fixes */
@supports (-webkit-touch-callout: none) {
  /* Apply only to Safari */
  .fab, .fa, .far, .fas {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-display: block; /* Ensures icon is shown as soon as font is available */
  }

  /* Enforce icon font loading in Safari */
  .social-media-links a {
    font-weight: normal !important; /* Prevent Safari from applying synthetic bold */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RULES MODAL STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Rules modal overlay */
.rules-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-l);
}

.rules-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.rules-modal-content {
  position: relative;
  background-color: #E6EBE9;
  border-radius: var(--sp-dp);
  padding: var(--sp-l);
  max-width: 450px;
  width: 92%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.rules-modal.hide {
  display: none;
}

.rules-title {
  color: var(--clr-primary);
  font-size: var(--fs-title-l);
  font-weight: 700;
  margin: 0 0 var(--sp-dp);
  text-align: center;
}

.rules-list {
  margin-bottom: var(--sp-l);
}

.rule-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--sp-dp);
  gap: var(--sp-m);
}

.rule-icon {
  font-size: var(--fs-title-m);
  flex-shrink: 0;
  margin-top: var(--sp-xt);
}

.rule-text-container {
  flex: 1;
}

.rule-text {
  display: block;
  font-size: var(--fs-body-m);
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: var(--sp-t);
}

.rule-subtext {
  display: block;
  font-size: var(--fs-label);
  color: var(--clr-surface-variant);
  line-height: 1.4;
}

.letter-indicator {
  display: inline-block;
  width: var(--sp-dp);
  height: var(--sp-dp);
  border-radius: var(--sp-xt);
  margin: 0 var(--sp-xt);
  vertical-align: middle;
}

.green-letter {
  background-color: #10B981;
}

.yellow-letter {
  background-color: #F59E0B;
}

.gray-letter {
  background-color: #6B7280;
}

.rules-dismiss-btn {
  margin-top: var(--sp-l);
  width: 100%;
  background-color: var(--clr-primary);
  color: var(--clr-on-primary);
  border: none;
  border-radius: var(--br-d);
  padding: var(--sp-m) var(--sp-l);
  font-size: var(--fs-body-m);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.rules-dismiss-btn:hover {
  background-color: rgba(0, 77, 64, 0.9);
}

.play-btn {
  /* Additional styles for play button if needed */
}