@import "https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;600&display=swap";
@import "https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap";

/* src/theme/material3.css */
:root {
  --m3-primary-0: #000000;
  --m3-primary-10: #21005D;
  --m3-primary-20: #381E72;
  --m3-primary-30: #4F378B;
  --m3-primary-40: #6750A4;
  --m3-primary-50: #7F67BE;
  --m3-primary-60: #9A82DB;
  --m3-primary-70: #B69DF8;
  --m3-primary-80: #D0BCFF;
  --m3-primary-90: #EADDFF;
  --m3-primary-95: #F6EDFF;
  --m3-primary-99: #FFFBFF;
  --m3-secondary-0: #000000;
  --m3-secondary-10: #1D192B;
  --m3-secondary-20: #332D41;
  --m3-secondary-30: #4A4458;
  --m3-secondary-40: #625B71;
  --m3-secondary-50: #7A7289;
  --m3-secondary-60: #958DA5;
  --m3-secondary-70: #B0A7C0;
  --m3-secondary-80: #CCC2DC;
  --m3-secondary-90: #E8DEF8;
  --m3-secondary-95: #F3EDF7;
  --m3-secondary-99: #FFFBFF;
  --m3-tertiary-0: #000000;
  --m3-tertiary-10: #31111D;
  --m3-tertiary-20: #492532;
  --m3-tertiary-30: #633B48;
  --m3-tertiary-40: #7D5260;
  --m3-tertiary-50: #9A6A77;
  --m3-tertiary-60: #B5838F;
  --m3-tertiary-70: #D29DA6;
  --m3-tertiary-80: #FFB1C0;
  --m3-tertiary-90: #FFD8E4;
  --m3-tertiary-95: #FFECEE;
  --m3-tertiary-99: #FFFBFF;
  --m3-error-0: #000000;
  --m3-error-10: #410E0B;
  --m3-error-20: #601410;
  --m3-error-30: #8C1D18;
  --m3-error-40: #B3261E;
  --m3-error-50: #C62828;
  --m3-error-60: #DC2F2F;
  --m3-error-70: #FF5449;
  --m3-error-80: #FF8A80;
  --m3-error-90: #F9DEDC;
  --m3-error-95: #FBE4E0;
  --m3-error-99: #FFFBFF;
  --m3-neutral-0: #000000;
  --m3-neutral-10: #1C1B1F;
  --m3-neutral-20: #313033;
  --m3-neutral-30: #484649;
  --m3-neutral-40: #605D62;
  --m3-neutral-50: #787579;
  --m3-neutral-60: #958F94;
  --m3-neutral-70: #B0ACAF;
  --m3-neutral-80: #CCCACB;
  --m3-neutral-90: #E6E1E5;
  --m3-neutral-95: #F4EFF4;
  --m3-neutral-99: #FFFBFF;
  --m3-neutral-variant-0: #000000;
  --m3-neutral-variant-10: #1D1B20;
  --m3-neutral-variant-20: #333035;
  --m3-neutral-variant-30: #4A454B;
  --m3-neutral-variant-40: #635D64;
  --m3-neutral-variant-50: #7C767C;
  --m3-neutral-variant-60: #978F95;
  --m3-neutral-variant-70: #B3ABB0;
  --m3-neutral-variant-80: #CFC6CC;
  --m3-neutral-variant-90: #ECE2E8;
  --m3-neutral-variant-95: #FBF0F7;
  --m3-neutral-variant-99: #FFFBFF;
  --m3-surface: #FFFBFF;
  --m3-surface-dim: #DED8E1;
  --m3-surface-bright: #FFFBFF;
  --m3-surface-container-lowest: #FFFFFF;
  --m3-surface-container-low: #F7F2F7;
  --m3-surface-container: #F3EDF7;
  --m3-surface-container-high: #ECE6F0;
  --m3-surface-container-highest: #E6E0E9;
  --m3-surface-variant: #E7E0EC;
  --m3-on-surface: #1C1B1F;
  --m3-on-surface-variant: #49454F;
  --m3-outline: #79747E;
  --m3-outline-variant: #CAC4D0;
  --m3-inverse-surface: #313033;
  --m3-inverse-on-surface: #F4EFF4;
  --m3-inverse-primary: #D0BCFF;
  --m3-scrim: #000000;
  --m3-shadow: #000000;
  --m3-error-container: #F9DEDC;
  --m3-on-error-container: #410E0B;
  --m3-on-error: #FFFFFF;
  --m3-primary-container: #EADDFF;
  --m3-on-primary-container: #21005D;
  --m3-primary-container-low: #F8F2FF;
  --m3-primary-container-high: #E8DEFB;
  --m3-secondary-container: #E8DEF8;
  --m3-on-secondary-container: #1D192B;
  --m3-secondary-container-low: #F3EDF7;
  --m3-secondary-container-high: #E4DDF5;
  --m3-tertiary-container: #FFD8E4;
  --m3-on-tertiary-container: #31111D;
  --m3-tertiary-container-low: #FFECEE;
  --m3-tertiary-container-high: #FFE6EC;
  --m3-timer-safe: #4CAF50;
  --m3-timer-warning: #FFC107;
  --m3-timer-danger: #DC2F2F;
  --m3-display-large: 57px / -0.25em "Google Sans Text", sans-serif;
  --m3-display-medium: 45px / 0em "Google Sans Text", sans-serif;
  --m3-display-small: 36px / 0em "Google Sans Text", sans-serif;
  --m3-headline-large: 32px / 0em "Google Sans Text", sans-serif;
  --m3-headline-medium: 28px / 0em "Google Sans Text", sans-serif;
  --m3-headline-small: 24px / 0em "Google Sans Text", sans-serif;
  --m3-title-large: 22px / 0em "Google Sans Text", sans-serif;
  --m3-title-medium: 16px / 0.15em "Google Sans Text", sans-serif;
  --m3-title-small: 14px / 0.1em "Google Sans Text", sans-serif;
  --m3-body-large: 16px / 1.5em "Google Sans Text", sans-serif;
  --m3-body-medium: 14px / 1.5em "Google Sans Text", sans-serif;
  --m3-body-small: 11px / 1.4em "Google Sans Text", sans-serif;
  --m3-label-large: 14px / 0.1em "Google Sans Text", sans-serif;
  --m3-label-medium: 12px / 0.5em "Google Sans Text", sans-serif;
  --m3-label-small: 11px / 0.5em "Google Sans Text", sans-serif;
  --m3-font-regular: 400;
  --m3-font-medium: 500;
  --m3-font-semibold: 600;
  --m3-font-bold: 700;
  --m3-shape-xs: 4px;
  --m3-shape-s: 8px;
  --m3-shape-m: 12px;
  --m3-shape-l: 16px;
  --m3-shape-xl: 28px;
  --m3-shape-xxl: 36px;
  --m3-shape-full: 9999px;
  --m3-elevation-1: 5%;
  --m3-elevation-2: 8%;
  --m3-elevation-3: 11%;
  --m3-elevation-4: 12%;
  --m3-elevation-5: 14%;
  --game-bg-primary: #1a0426;
  --game-bg-secondary: #301140;
  --game-bg-tertiary: #21072e;
  --game-accent-primary: #c799ff;
  --game-accent-secondary: #4af8e3;
  --game-accent-tertiary: #ff6c95;
  --game-text-primary: #f7ddff;
  --game-text-secondary: #c0a0cc;
  --game-text-muted: #93809a;
  --game-border: rgba(199, 153, 255, 0.2);
  --game-glow: rgba(199, 153, 255, 0.25);
  --m3-space-1: 4px;
  --m3-space-2: 8px;
  --m3-space-3: 12px;
  --m3-space-4: 16px;
  --m3-space-5: 20px;
  --m3-space-6: 24px;
  --m3-space-8: 32px;
  --m3-space-10: 40px;
  --m3-space-12: 48px;
  --m3-space-16: 64px;
  --m3-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-easing-emphasized-decelerate: cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-easing-emphasized-accelerate: cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --m3-state-hover: 8%;
  --m3-state-focus: 12%;
  --m3-state-pressed: 12%;
  --m3-state-dragged: 16%;
  --m3-transition-enter: 200ms var(--m3-motion-easing-standard);
  --m3-transition-exit: 150ms var(--m3-motion-easing-standard);
  --m3-transition-screen: 300ms var(--m3-motion-easing-standard);
  --m3-comp-bottom-nav-height: 80px;
  --m3-comp-btn-height: 40px;
  --m3-comp-fab-size: 56px;
  --m3-comp-text-field-height: 56px;
  --m3-comp-chip-height: 32px;
  --m3-comp-nav-indicator-width: 64px;
  --m3-comp-nav-indicator-height: 32px;
}
[data-theme=light] {
  --game-bg-primary: #f5f0ff;
  --game-bg-secondary: #ede3ff;
  --game-bg-tertiary: #f8f2ff;
  --game-accent-primary: #7c4dff;
  --game-accent-secondary: #00897b;
  --game-accent-tertiary: #e91e63;
  --game-text-primary: #1a0426;
  --game-text-secondary: #4a3860;
  --game-text-muted: #7a6890;
  --game-border: rgba(124, 77, 255, 0.2);
  --game-glow: rgba(124, 77, 255, 0.15);
}
[data-theme=dark] {
  --m3-surface: #1C1B1F;
  --m3-surface-dim: #141218;
  --m3-surface-bright: #3B383E;
  --m3-surface-container-lowest: #0F0D13;
  --m3-surface-container-low: #1D1B20;
  --m3-surface-container: #211F26;
  --m3-surface-container-high: #2B2930;
  --m3-surface-container-highest: #36343B;
  --m3-surface-variant: #49454F;
  --m3-on-surface: #E6E1E5;
  --m3-on-surface-variant: #CAC4D0;
  --m3-outline: #938F99;
  --m3-outline-variant: #49454F;
  --m3-inverse-surface: #E6E1E5;
  --m3-inverse-on-surface: #313033;
  --m3-inverse-primary: #381E72;
  --m3-error-container: #8C1D18;
  --m3-on-error-container: #F9DEDC;
  --m3-on-error: #601410;
  --m3-primary-container: #4F378B;
  --m3-on-primary-container: #EADDFF;
  --m3-primary-container-low: #2D2640;
  --m3-primary-container-high: #3D3060;
  --m3-secondary-container: #4A4458;
  --m3-on-secondary-container: #E8DEF8;
  --m3-secondary-container-low: #2E2838;
  --m3-secondary-container-high: #3D3548;
  --m3-tertiary-container: #633B48;
  --m3-on-tertiary-container: #FFD8E4;
  --m3-tertiary-container-low: #3D2830;
  --m3-tertiary-container-high: #503040;
  --m3-elevation-1: 8%;
  --m3-elevation-2: 12%;
  --m3-elevation-3: 16%;
  --m3-elevation-4: 20%;
  --m3-elevation-5: 24%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body,
#root {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  min-height: 100vh;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
.m3-app-root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--m3-surface);
}
.m3-display-large {
  font-family: "Google Sans Text", sans-serif;
  font-size: 57px;
  font-weight: var(--m3-font-regular);
  line-height: 1.12;
  letter-spacing: -0.25px;
}
.m3-display-medium {
  font-family: "Google Sans Text", sans-serif;
  font-size: 45px;
  font-weight: var(--m3-font-regular);
  line-height: 1.16;
  letter-spacing: 0;
}
.m3-display-small {
  font-family: "Google Sans Text", sans-serif;
  font-size: 36px;
  font-weight: var(--m3-font-regular);
  line-height: 1.22;
  letter-spacing: 0;
}
.m3-headline-large {
  font-family: "Google Sans Text", sans-serif;
  font-size: 32px;
  font-weight: var(--m3-font-regular);
  line-height: 1.25;
  letter-spacing: 0;
}
.m3-headline-medium {
  font-family: "Google Sans Text", sans-serif;
  font-size: 28px;
  font-weight: var(--m3-font-regular);
  line-height: 1.29;
  letter-spacing: 0;
}
.m3-headline-small {
  font-family: "Google Sans Text", sans-serif;
  font-size: 24px;
  font-weight: var(--m3-font-regular);
  line-height: 1.33;
  letter-spacing: 0;
}
.m3-title-large {
  font-family: "Google Sans Text", sans-serif;
  font-size: 22px;
  font-weight: var(--m3-font-regular);
  line-height: 1.27;
  letter-spacing: 0;
}
.m3-title-medium {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-medium);
  line-height: 1.5;
  letter-spacing: 0.15px;
}
.m3-title-small {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-medium);
  line-height: 1.43;
  letter-spacing: 0.1px;
}
.m3-body-large {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-regular);
  line-height: 1.5;
  letter-spacing: 0.5px;
}
.m3-body-medium {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-regular);
  line-height: 1.43;
  letter-spacing: 0.25px;
}
.m3-body-small {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-regular);
  line-height: 1.45;
  letter-spacing: 0.4px;
}
.m3-label-large {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-medium);
  line-height: 1.43;
  letter-spacing: 0.1px;
}
.m3-label-medium {
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
  font-weight: var(--m3-font-medium);
  line-height: 1.33;
  letter-spacing: 0.5px;
}
.m3-label-small {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-medium);
  line-height: 1.45;
  letter-spacing: 0.5px;
}
.m3-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--m3-space-4);
  padding-bottom: calc(var(--m3-comp-bottom-nav-height) + env(safe-area-inset-bottom) + 8px);
  overflow-y: auto;
  overflow-x: hidden;
  animation: m3-fade-slide-in var(--m3-transition-enter);
}
.m3-screen-centered {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--m3-space-4);
  padding-bottom: calc(var(--m3-comp-bottom-nav-height) + env(safe-area-inset-bottom) + 8px);
  overflow-y: auto;
  overflow-x: hidden;
  animation: m3-fade-slide-in var(--m3-transition-enter);
}
@keyframes m3-fade-slide-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.m3-surface-tint {
  position: relative;
}
.m3-surface-tint::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--m3-primary);
  opacity: var(--tint-opacity, 0);
  pointer-events: none;
}
.m3-elevation-0 {
  background-color: var(--m3-surface);
}
.m3-elevation-1 {
  background-color: var(--m3-surface);
  position: relative;
}
.m3-elevation-1::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--m3-primary);
  opacity: 0.05;
  pointer-events: none;
}
.m3-elevation-2::before {
  opacity: 0.08;
}
.m3-elevation-3::before {
  opacity: 0.11;
}
.m3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m3-space-2);
  height: var(--m3-comp-btn-height);
  padding: 0 var(--m3-space-5);
  border: none;
  border-radius: var(--m3-shape-full);
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-medium);
  letter-spacing: 0.1px;
  cursor: pointer;
  transition:
    background-color var(--m3-transition-enter),
    box-shadow var(--m3-transition-enter),
    transform 100ms;
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.m3-btn:active {
  transform: scale(0.97);
}
.m3-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.m3-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--m3-on-primary);
  opacity: 0;
  transition: opacity var(--m3-transition-enter);
  pointer-events: none;
}
.m3-btn:hover::before {
  opacity: var(--m3-state-hover);
}
.m3-btn:focus-visible::before {
  opacity: var(--m3-state-focus);
}
.m3-btn:active::before {
  opacity: var(--m3-state-pressed);
}
.m3-btn-filled {
  background-color: var(--m3-primary);
  color: var(--m3-on-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.m3-btn-filled:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.15);
}
.m3-btn-tonal {
  background-color: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  border-radius: var(--m3-shape-full);
}
.m3-btn-tonal::before {
  background: var(--m3-on-secondary-container);
}
.m3-btn-outlined {
  background-color: transparent;
  border: 1px solid var(--m3-outline);
  color: var(--m3-primary);
  border-radius: var(--m3-shape-full);
}
.m3-btn-outlined::before {
  background: var(--m3-primary);
}
.m3-btn-text {
  background-color: transparent;
  color: var(--m3-primary);
  border-radius: var(--m3-shape-full);
  padding: 0 var(--m3-space-3);
}
.m3-btn-text::before {
  background: var(--m3-primary);
}
.m3-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--m3-comp-fab-size);
  height: var(--m3-comp-fab-size);
  border: none;
  border-radius: var(--m3-shape-m);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  background-color: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font-size: 24px;
  cursor: pointer;
  transition:
    background-color var(--m3-transition-enter),
    box-shadow var(--m3-transition-enter),
    transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  animation: m3-fab-entrance 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes m3-fab-entrance {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.m3-fab:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.m3-fab:active {
  transform: scale(0.9);
}
.m3-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: inherit;
  background: var(--m3-on-primary-container);
  opacity: 0;
  transition: opacity var(--m3-transition-enter);
}
.m3-fab:hover::before {
  opacity: var(--m3-state-hover);
}
.m3-fab-extended {
  width: auto;
  padding: 0 var(--m3-space-4);
  gap: var(--m3-space-2);
  border-radius: var(--m3-shape-l);
  clip-path: none;
}
.m3-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  transition: background-color var(--m3-transition-enter), color var(--m3-transition-enter);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.m3-icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--m3-on-surface);
  opacity: 0;
  transition: opacity var(--m3-transition-enter);
}
.m3-icon-btn:hover::before {
  opacity: var(--m3-state-hover);
}
.m3-icon-btn:focus-visible::before {
  opacity: var(--m3-state-focus);
}
.m3-icon-btn:active::before {
  opacity: var(--m3-state-pressed);
}
.m3-btn-full {
  width: 100%;
}
.m3-card {
  position: relative;
  background-color: var(--m3-surface-container-low);
  border-radius: var(--m3-shape-l);
  padding: var(--m3-space-4);
  transition:
    background-color var(--m3-transition-enter),
    box-shadow var(--m3-transition-enter),
    transform var(--m3-transition-enter);
  cursor: default;
  overflow: hidden;
}
.m3-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--m3-primary);
  opacity: 0;
  transition: opacity var(--m3-transition-enter);
  pointer-events: none;
}
.m3-card-interactive:hover::before {
  opacity: 0.08;
}
.m3-card-interactive:active::before {
  opacity: 0.12;
}
.m3-card-interactive:focus-visible::before {
  opacity: 0.12;
}
.m3-card-elevated {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.m3-card-elevated:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.m3-card-filled {
  background-color: var(--m3-surface-container);
}
.m3-card-outlined {
  border: 1px solid var(--m3-outline-variant);
  background-color: transparent;
}
.m3-card-stagger {
  opacity: 0;
  transform: translateY(12px);
  animation: m3-card-stagger-in 300ms var(--m3-motion-easing-emphasized-decelerate) forwards;
}
@keyframes m3-card-stagger-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.m3-text-field {
  position: relative;
  width: 100%;
}
.m3-text-field-input {
  width: 100%;
  height: var(--m3-comp-text-field-height);
  padding: 0 var(--m3-space-4);
  padding-top: 20px;
  background-color: transparent;
  border: 1px solid var(--m3-outline);
  border-radius: var(--m3-shape-s);
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-regular);
  color: var(--m3-on-surface);
  outline: none;
  transition: border-color var(--m3-transition-enter), border-width var(--m3-transition-enter);
  -webkit-tap-highlight-color: transparent;
}
.m3-text-field-input:focus {
  border-color: var(--m3-primary);
  border-width: 2px;
}
.m3-text-field-label {
  position: absolute;
  left: var(--m3-space-4);
  top: 50%;
  transform: translateY(-50%);
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-regular);
  color: var(--m3-on-surface-variant);
  pointer-events: none;
  transition:
    transform var(--m3-transition-enter),
    font-size var(--m3-transition-enter),
    font-weight var(--m3-transition-enter),
    color var(--m3-transition-enter);
  transform-origin: left center;
  background: var(--m3-surface);
  padding: 0 4px;
}
.m3-text-field-input:focus + .m3-text-field-label,
.m3-text-field-input:not(:placeholder-shown) + .m3-text-field-label {
  transform: translateY(-150%) scale(0.75);
  font-weight: var(--m3-font-medium);
  color: var(--m3-primary);
}
.m3-text-field-input:focus + .m3-text-field-label {
  color: var(--m3-primary);
}
.m3-text-field-leading {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m3-on-surface-variant);
  font-size: 20px;
  pointer-events: none;
}
.m3-text-field-trailing {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--m3-on-surface-variant);
  font-size: 20px;
}
.m3-text-field.has-leading {
  padding-left: 48px;
}
.m3-text-field.has-trailing {
  padding-right: 48px;
}
.m3-text-field-input.m3-text-field-error {
  border-color: var(--m3-error);
}
.m3-text-field-input.m3-text-field-error:focus {
  border-color: var(--m3-error);
}
.m3-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m3-space-1);
  height: var(--m3-comp-chip-height);
  padding: 0 var(--m3-space-3);
  border: none;
  border-radius: var(--m3-shape-s);
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-medium);
  cursor: pointer;
  transition: background-color var(--m3-transition-enter), opacity var(--m3-transition-enter);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.m3-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--m3-on-surface);
  opacity: 0;
  transition: opacity var(--m3-transition-enter);
}
.m3-chip:hover::before {
  opacity: var(--m3-state-hover);
}
.m3-chip-assist {
  background-color: var(--m3-surface-container);
  color: var(--m3-primary);
}
.m3-chip-assist::before {
  background: var(--m3-primary);
}
.m3-chip-filter {
  background-color: var(--m3-surface-container);
  color: var(--m3-on-surface-variant);
}
.m3-chip-filter.m3-chip-selected {
  background-color: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
}
.m3-chip-selected::after {
  content: "\2713";
  margin-left: var(--m3-space-1);
  font-size: 12px;
}
.m3-chip-input {
  background-color: var(--m3-surface-container);
  color: var(--m3-on-surface-variant);
}
.m3-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: var(--m3-comp-bottom-nav-height);
  background-color: var(--m3-surface-container);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  border-top: none;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.m3-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  width: var(--m3-comp-nav-indicator-width);
  height: 64px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--m3-on-surface-variant);
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
  font-weight: var(--m3-font-medium);
  text-decoration: none;
  position: relative;
  transition: color var(--m3-transition-enter);
  -webkit-tap-highlight-color: transparent;
}
.m3-nav-item .m3-nav-icon {
  width: 64px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  border-radius: var(--m3-shape-full);
  transition: background-color var(--m3-transition-enter), transform var(--m3-transition-enter);
}
.m3-nav-item:hover .m3-nav-icon {
  background-color: rgba(103, 80, 164, 0.08);
}
.m3-nav-item.active .m3-nav-icon {
  background-color: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: scale(1.05);
}
.m3-nav-item.active::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--m3-comp-nav-indicator-width);
  height: 32px;
  border-radius: var(--m3-shape-full);
  background-color: var(--m3-primary-container);
  z-index: -1;
  animation: m3-nav-indicator-in 250ms var(--m3-motion-easing-emphasized-decelerate);
}
@keyframes m3-nav-indicator-in {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
.m3-nav-item.active {
  color: var(--m3-on-primary-container);
}
.m3-nav-item:not(.active) {
  color: var(--m3-on-surface-variant);
}
.m3-timer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m3-timer-circle {
  transform: rotate(-90deg);
}
.m3-timer-track {
  fill: none;
  stroke: var(--m3-surface-container-high);
  stroke-width: 6;
}
.m3-timer-progress {
  fill: none;
  stroke: var(--m3-timer-safe);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke var(--m3-transition-enter);
}
.m3-timer-progress.m3-timer-warning {
  stroke: var(--m3-timer-warning);
}
.m3-timer-progress.m3-timer-danger {
  stroke: var(--m3-timer-danger);
}
.m3-timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Google Sans Text", sans-serif;
  font-size: 20px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-surface);
}
.m3-timer-text.m3-timer-safe {
  color: var(--m3-timer-safe);
}
.m3-timer-text.m3-timer-warning {
  color: var(--m3-timer-warning);
}
.m3-timer-text.m3-timer-danger {
  color: var(--m3-timer-danger);
}
@keyframes m3-timer-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}
.m3-timer-text.m3-timer-pulse {
  animation: m3-timer-pulse 500ms ease-in-out infinite;
}
.m3-badge-toast-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--m3-motion-easing-standard);
  background: rgba(0, 0, 0, 0.4);
}
.m3-badge-toast-overlay.m3-visible {
  opacity: 1;
  pointer-events: auto;
}
.m3-badge-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--m3-space-4);
  background: var(--m3-tertiary-container);
  border-radius: var(--m3-shape-l);
  padding: var(--m3-space-4) var(--m3-space-5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: scale(0.85) translateY(16px);
  opacity: 0;
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms var(--m3-motion-easing-standard);
  pointer-events: auto;
  max-width: 90%;
  min-width: 280px;
  border: 1px solid var(--m3-outline-variant);
}
.m3-badge-toast.m3-visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.m3-badge-toast-icon {
  font-size: 40px;
  flex-shrink: 0;
  animation: m3-badge-icon-bounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}
@keyframes m3-badge-icon-bounce {
  0% {
    transform: scale(0) rotate(-15deg);
  }
  60% {
    transform: scale(1.25) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.m3-badge-toast-content {
  flex: 1;
  min-width: 0;
}
.m3-badge-toast-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-tertiary-container);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  margin-bottom: 2px;
}
.m3-badge-toast-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-tertiary-container);
  margin-bottom: 2px;
  line-height: 1.3;
}
.m3-badge-toast-desc {
  font-family: "Google Sans Text", sans-serif;
  font-size: 13px;
  font-weight: var(--m3-font-regular);
  color: var(--m3-on-tertiary-container);
  opacity: 0.75;
  line-height: 1.4;
}
.m3-badge-toast-actions {
  display: flex;
  gap: var(--m3-space-2);
  margin-top: var(--m3-space-2);
}
.m3-badge-toast-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--m3-surface-container-high);
  border: 1px solid var(--m3-outline-variant);
  color: var(--m3-on-surface);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--m3-transition-enter), transform var(--m3-transition-enter);
  -webkit-tap-highlight-color: transparent;
}
.m3-badge-toast-close:hover {
  background: var(--m3-surface-container-highest);
  transform: scale(1.05);
}
.m3-badge-sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 0;
  height: 0;
}
.m3-sparkle {
  position: absolute;
  width: var(--sparkle-size, 6px);
  height: var(--sparkle-size, 6px);
  border-radius: 50%;
  background: var(--m3-primary);
  opacity: 0;
  animation: m3-sparkle-out 600ms ease-out var(--sparkle-delay, 0ms) forwards;
}
@keyframes m3-sparkle-out {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(cos(var(--sparkle-angle)) * var(--sparkle-distance)), calc(sin(var(--sparkle-angle)) * var(--sparkle-distance))) scale(0);
  }
}
.m3-results-card {
  border-radius: var(--m3-shape-xl);
  padding: var(--m3-space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.m3-results-card-win {
  background:
    linear-gradient(
      145deg,
      var(--m3-tertiary-container) 0%,
      var(--m3-tertiary-container-high) 100%);
  border: 2px solid var(--m3-tertiary);
}
.m3-results-card-lose {
  background:
    linear-gradient(
      145deg,
      var(--m3-error-container) 0%,
      var(--m3-surface-container-high) 100%);
  border: 2px solid var(--m3-error);
}
.m3-results-card-draw {
  background:
    linear-gradient(
      145deg,
      var(--m3-secondary-container) 0%,
      var(--m3-surface-container-high) 100%);
  border: 2px solid var(--m3-secondary);
}
.m3-results-icon {
  font-size: 56px;
  margin-bottom: var(--m3-space-3);
  display: block;
  animation: m3-results-icon-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
}
@keyframes m3-results-icon-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.m3-results-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 28px;
  font-weight: var(--m3-font-bold);
  margin-bottom: var(--m3-space-4);
  line-height: 1.2;
}
.m3-results-title.m3-win {
  color: var(--m3-tertiary);
}
.m3-results-title.m3-lose {
  color: var(--m3-error);
}
.m3-results-title.m3-draw {
  color: var(--m3-secondary);
}
.m3-results-scores {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--m3-space-6);
  margin-bottom: var(--m3-space-4);
}
.m3-results-score-block {
  text-align: center;
}
.m3-results-player-name {
  font-family: "Google Sans Text", sans-serif;
  font-size: 13px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface-variant);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m3-results-score-value {
  font-family: "Google Sans Text", sans-serif;
  font-size: 40px;
  font-weight: var(--m3-font-bold);
  line-height: 1;
}
.m3-results-score-value.m3-primary {
  color: var(--m3-primary);
}
.m3-results-score-value.m3-secondary {
  color: var(--m3-secondary);
}
.m3-results-vs {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-outline);
}
.m3-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--m3-space-3) var(--m3-space-4);
  background-color: var(--m3-surface);
  border-bottom: 1px solid var(--m3-outline-variant);
  min-height: 56px;
  flex-shrink: 0;
}
.m3-header-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 18px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-surface);
}
.m3-header-actions {
  display: flex;
  gap: var(--m3-space-1);
}
.m3-switch {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background-color: var(--m3-outline);
  border: none;
  cursor: pointer;
  transition: background-color var(--m3-transition-enter);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.m3-switch.m3-switch-checked {
  background-color: var(--m3-primary);
}
.m3-switch-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--m3-surface-bright);
  transition: left var(--m3-transition-enter);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.m3-switch.m3-switch-checked .m3-switch-thumb {
  left: 24px;
}
.m3-letter-tile {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      145deg,
      var(--m3-primary-container) 0%,
      var(--m3-primary-container-high) 100%);
  border-radius: var(--m3-shape-m);
  font-family: "Google Sans Text", sans-serif;
  font-size: 32px;
  font-weight: var(--m3-font-bold);
  color: var(--m3-on-primary-container);
  box-shadow: 0 4px 12px rgba(103, 80, 164, 0.3), 0 2px 4px rgba(103, 80, 164, 0.2);
  transition: transform var(--m3-transition-enter), box-shadow var(--m3-transition-enter);
}
.m3-letter-tile:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(103, 80, 164, 0.35), 0 3px 6px rgba(103, 80, 164, 0.25);
}
.m3-word-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--m3-space-2) var(--m3-space-3);
  background-color: var(--m3-surface-container);
  border-radius: var(--m3-shape-s);
  transition: background-color var(--m3-transition-enter), transform var(--m3-transition-enter);
}
.m3-word-item:hover {
  background-color: var(--m3-surface-container-high);
}
.m3-word-text {
  font-family: "Google Sans Text", sans-serif;
  font-size: 15px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.m3-word-points {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-primary);
}
.m3-section-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--m3-space-2);
}
.m3-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--m3-space-3);
}
.m3-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--m3-space-3);
  border-radius: var(--m3-shape-m);
  transition: transform var(--m3-transition-enter), background-color var(--m3-transition-enter);
  cursor: default;
}
.m3-badge-item.m3-unlocked {
  background-color: var(--m3-surface-container-high);
}
.m3-badge-item.m3-locked {
  background-color: var(--m3-surface-container-low);
  opacity: 0.5;
}
.m3-badge-item.m3-locked .m3-badge-icon {
  filter: grayscale(100%);
}
.m3-badge-icon {
  font-size: 36px;
  margin-bottom: var(--m3-space-2);
  transition: transform var(--m3-transition-enter);
  display: block;
}
.m3-badge-item.m3-unlocked .m3-badge-icon {
  animation: m3-badge-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes m3-badge-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.m3-badge-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-medium);
  text-align: center;
  color: var(--m3-on-surface);
  line-height: 1.3;
}
.m3-badge-desc {
  font-family: "Google Sans Text", sans-serif;
  font-size: 10px;
  color: var(--m3-on-surface-variant);
  text-align: center;
  line-height: 1.3;
  margin-top: 2px;
}
.m3-badge-earned {
  font-family: "Google Sans Text", sans-serif;
  font-size: 9px;
  color: var(--m3-primary);
  text-align: center;
  margin-top: 4px;
  opacity: 0.8;
}
.m3-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--m3-surface-container-high);
  border-radius: 4px;
  overflow: hidden;
}
.m3-progress-fill {
  height: 100%;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      var(--m3-primary),
      var(--m3-tertiary));
  transition: width 500ms var(--m3-motion-easing-emphasized-decelerate);
}
.m3-word-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--m3-space-2);
  padding: var(--m3-space-2) 0;
  -webkit-overflow-scrolling: touch;
}
.m3-word-list::-webkit-scrollbar {
  width: 4px;
}
.m3-word-list::-webkit-scrollbar-track {
  background: transparent;
}
.m3-word-list::-webkit-scrollbar-thumb {
  background: var(--m3-outline-variant);
  border-radius: 2px;
}
.m3-input-row {
  display: flex;
  gap: var(--m3-space-3);
  align-items: center;
}
.m3-input-row .m3-text-field {
  flex: 1;
}
.m3-divider {
  width: 100%;
  height: 1px;
  background: var(--m3-outline-variant);
  margin: var(--m3-space-4) 0;
}
.m3-error-msg {
  font-family: "Google Sans Text", sans-serif;
  font-size: 13px;
  color: var(--m3-error);
  padding: var(--m3-space-1) 0;
  animation: m3-error-shake 300ms ease-in-out;
}
@keyframes m3-error-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
.m3-home-header {
  text-align: center;
  margin-bottom: var(--m3-space-8);
}
.m3-app-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--m3-space-3);
  margin-bottom: var(--m3-space-3);
}
.m3-chain-icon {
  font-size: 48px;
  animation: m3-chain-pulse 2s ease-in-out infinite;
}
@keyframes m3-chain-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.m3-app-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 36px;
  font-weight: var(--m3-font-bold);
  color: var(--m3-on-surface);
  letter-spacing: -0.5px;
}
.m3-app-tagline {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-regular);
  color: var(--m3-on-surface-variant);
}
.m3-home-welcome {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  color: var(--m3-outline);
  margin-top: var(--m3-space-2);
}
.m3-home-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--m3-space-3);
  width: 100%;
  max-width: 320px;
}
.m3-practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--m3-space-2) 0;
  margin-bottom: var(--m3-space-3);
  gap: var(--m3-space-3);
}
.m3-practice-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.m3-practice-score-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 10px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.m3-practice-score-value {
  font-family: "Google Sans Text", sans-serif;
  font-size: 24px;
  font-weight: var(--m3-font-bold);
  color: var(--m3-primary);
}
.m3-game-over {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--m3-space-5);
  text-align: center;
  padding: var(--m3-space-4);
}
.m3-game-over-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 36px;
  font-weight: var(--m3-font-bold);
  line-height: 1.2;
}
.m3-game-over-actions {
  display: flex;
  flex-direction: column;
  gap: var(--m3-space-3);
  width: 100%;
  max-width: 320px;
  margin-top: var(--m3-space-4);
}
.m3-bot-thinking {
  text-align: center;
  padding: var(--m3-space-3);
  background: var(--m3-surface-container-high);
  border-radius: var(--m3-shape-m);
  margin-bottom: var(--m3-space-3);
  animation: m3-bot-thinking-pulse 1.5s ease-in-out infinite;
}
@keyframes m3-bot-thinking-pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
.m3-bot-thinking-text {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-primary);
}
.m3-bot-hint {
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
  color: var(--m3-on-surface-variant);
  margin-top: 4px;
  font-style: italic;
}
.m3-difficulty-header {
  text-align: center;
  margin-bottom: var(--m3-space-6);
}
.m3-difficulty-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 28px;
  font-weight: var(--m3-font-bold);
  margin-bottom: var(--m3-space-2);
}
.m3-difficulty-subtitle {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  color: var(--m3-on-surface-variant);
  margin-bottom: var(--m3-space-4);
}
.m3-difficulty-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--m3-space-3);
  width: 100%;
  max-width: 320px;
}
.m3-difficulty-btn {
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--m3-space-4);
  gap: 2px;
}
.m3-difficulty-btn-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-semibold);
}
.m3-difficulty-btn-sub {
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
  font-weight: var(--m3-font-regular);
  opacity: 0.75;
}
.m3-room-code-card {
  background: var(--m3-primary-container);
  border-radius: var(--m3-shape-l);
  padding: var(--m3-space-5);
  text-align: center;
  margin-top: var(--m3-space-4);
  border: 1px solid var(--m3-outline-variant);
}
.m3-room-code-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-primary-container);
  opacity: 0.75;
  margin-bottom: var(--m3-space-2);
}
.m3-room-code-value {
  font-family: "Google Sans Text", sans-serif;
  font-size: 40px;
  font-weight: var(--m3-font-bold);
  color: var(--m3-on-primary-container);
  letter-spacing: 8px;
}
.m3-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--m3-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Google Sans Text", sans-serif;
  font-size: 32px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-primary);
  flex-shrink: 0;
}
.m3-profile-header {
  display: flex;
  align-items: center;
  gap: var(--m3-space-4);
  margin-bottom: var(--m3-space-5);
}
.m3-profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m3-space-4);
}
.m3-stat-block {
  text-align: center;
  padding: var(--m3-space-4);
  background: var(--m3-surface-container);
  border-radius: var(--m3-shape-m);
}
.m3-stat-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}
.m3-stat-value {
  font-family: "Google Sans Text", sans-serif;
  font-size: 24px;
  font-weight: var(--m3-font-bold);
  color: var(--m3-primary);
}
.m3-achievements-header {
  margin-bottom: var(--m3-space-6);
}
.m3-achievements-progress {
  width: 100%;
  height: 8px;
  background: var(--m3-surface-container-high);
  border-radius: 4px;
  margin-top: var(--m3-space-3);
  overflow: hidden;
}
.m3-achievements-progress-fill {
  height: 100%;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      var(--m3-primary),
      var(--m3-tertiary));
  transition: width 500ms var(--m3-motion-easing-emphasized-decelerate);
}
.m3-achievements-category {
  margin-bottom: var(--m3-space-6);
}
.m3-achievements-category-title {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-surface);
  margin-bottom: var(--m3-space-3);
}
.m3-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--m3-space-3);
}
.m3-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--m3-space-3) 0;
  border-bottom: 1px solid var(--m3-outline-variant);
}
.m3-settings-row:last-child {
  border-bottom: none;
}
.m3-settings-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 16px;
  font-weight: var(--m3-font-regular);
  color: var(--m3-on-surface);
}
.m3-leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--m3-space-3) var(--m3-space-4);
  border-radius: var(--m3-shape-s);
  margin-bottom: var(--m3-space-2);
  transition: background-color var(--m3-transition-enter);
}
.m3-leaderboard-item.m3-me {
  background-color: var(--m3-primary-container);
}
.m3-leaderboard-item:not(.m3-me) {
  background-color: var(--m3-surface-container);
}
.m3-leaderboard-rank {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-semibold);
  color: var(--m3-on-surface-variant);
  width: 32px;
}
.m3-leaderboard-name {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface);
  flex: 1;
  margin-left: var(--m3-space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m3-leaderboard-score {
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  font-weight: var(--m3-font-bold);
  color: var(--m3-primary);
  margin-left: var(--m3-space-3);
}
.m3-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--m3-space-1);
  padding: 4px 12px;
  border-radius: var(--m3-shape-full);
  font-family: "Google Sans Text", sans-serif;
  font-size: 13px;
  font-weight: var(--m3-font-semibold);
}
.m3-streak-badge.m3-fire {
  background-color: #FFF3E0;
  color: #E65100;
}
[data-theme=dark] .m3-streak-badge.m3-fire {
  background-color: rgba(255, 111, 0, 0.2);
  color: #FFB74D;
}
.m3-streak-badge.m3-ice {
  background-color: #E3F2FD;
  color: #1565C0;
}
[data-theme=dark] .m3-streak-badge.m3-ice {
  background-color: rgba(30, 136, 229, 0.2);
  color: #64B5F6;
}
.m3-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--m3-space-3);
}
.m3-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--m3-space-3);
  margin: var(--m3-space-3) 0;
}
.m3-auth-divider-line {
  flex: 1;
  height: 1px;
  background: var(--m3-outline-variant);
}
.m3-auth-divider-text {
  font-family: "Google Sans Text", sans-serif;
  font-size: 13px;
  color: var(--m3-on-surface-variant);
}
.m3-auth-toggle {
  text-align: center;
  margin-top: var(--m3-space-3);
  font-family: "Google Sans Text", sans-serif;
  font-size: 14px;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
}
.m3-auth-toggle-link {
  color: var(--m3-primary);
  font-weight: var(--m3-font-medium);
  cursor: pointer;
}
.m3-battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--m3-space-5);
}
.m3-battle-player-score {
  text-align: center;
}
.m3-battle-player-name {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.m3-battle-score-value {
  font-family: "Google Sans Text", sans-serif;
  font-size: 28px;
  font-weight: var(--m3-font-bold);
}
.m3-battle-score-value.m3-primary {
  color: var(--m3-primary);
}
.m3-battle-score-value.m3-secondary {
  color: var(--m3-secondary);
}
.m3-battle-timer-container {
  text-align: center;
}
.m3-current-letter-area {
  text-align: center;
  margin-bottom: var(--m3-space-4);
}
.m3-current-letter-label {
  font-family: "Google Sans Text", sans-serif;
  font-size: 11px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--m3-space-2);
}
.m3-word-lists-container {
  display: flex;
  gap: var(--m3-space-4);
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.m3-word-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.m3-word-list-panel-header {
  font-family: "Google Sans Text", sans-serif;
  font-size: 12px;
  font-weight: var(--m3-font-medium);
  color: var(--m3-on-surface-variant);
  margin-bottom: var(--m3-space-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m3-word-list-panel-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--m3-surface-container-low);
  border-radius: var(--m3-shape-m);
  padding: var(--m3-space-2);
  -webkit-overflow-scrolling: touch;
}
.m3-gameover-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: m3-overlay-in 200ms var(--m3-motion-easing-standard);
  backdrop-filter: blur(4px);
}
@keyframes m3-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.m3-gameover-content {
  background: var(--m3-surface-container-high);
  border-radius: var(--m3-shape-xl);
  padding: var(--m3-space-6);
  text-align: center;
  max-width: 360px;
  width: 90%;
  animation: m3-gameover-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes m3-gameover-pop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes m3-win-bounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.m3-win-animation {
  animation: m3-win-bounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.m3-text-center {
  text-align: center;
}
.m3-text-left {
  text-align: left;
}
.m3-text-right {
  text-align: right;
}
.m3-mt-1 {
  margin-top: var(--m3-space-1);
}
.m3-mt-2 {
  margin-top: var(--m3-space-2);
}
.m3-mt-3 {
  margin-top: var(--m3-space-3);
}
.m3-mt-4 {
  margin-top: var(--m3-space-4);
}
.m3-mt-5 {
  margin-top: var(--m3-space-5);
}
.m3-mt-6 {
  margin-top: var(--m3-space-6);
}
.m3-mb-1 {
  margin-bottom: var(--m3-space-1);
}
.m3-mb-2 {
  margin-bottom: var(--m3-space-2);
}
.m3-mb-3 {
  margin-bottom: var(--m3-space-3);
}
.m3-mb-4 {
  margin-bottom: var(--m3-space-4);
}
.m3-mb-5 {
  margin-bottom: var(--m3-space-5);
}
.m3-mb-6 {
  margin-bottom: var(--m3-space-6);
}
.m3-flex {
  display: flex;
}
.m3-flex-col {
  flex-direction: column;
}
.m3-items-center {
  align-items: center;
}
.m3-justify-center {
  justify-content: center;
}
.m3-justify-between {
  justify-content: space-between;
}
.m3-gap-2 {
  gap: var(--m3-space-2);
}
.m3-gap-3 {
  gap: var(--m3-space-3);
}
.m3-gap-4 {
  gap: var(--m3-space-4);
}
.m3-w-full {
  width: 100%;
}
.m3-max-w-320 {
  max-width: 320px;
}
.m3-opacity-50 {
  opacity: 0.5;
}
.m3-opacity-70 {
  opacity: 0.7;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--m3-outline-variant);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--m3-outline);
}
.m3-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.m3-safe-top {
  padding-top: env(safe-area-inset-top);
}

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* src/styles.css */
:root {
  --md-primary: #6750A4;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #EADDFF;
  --md-on-primary-container: #21005D;
  --md-secondary: #625B71;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #E8DEF8;
  --md-on-secondary-container: #1D192B;
  --md-tertiary: #7D5260;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #FFD8E4;
  --md-on-tertiary-container: #31111D;
  --md-error: #F2B8B5;
  --md-on-error: #601410;
  --md-error-container: #8C1D18;
  --md-on-error-container: #F9DEDC;
  --md-surface: #1C1B1F;
  --md-on-surface: #E6E1E5;
  --md-surface-container: #2B2930;
  --md-surface-container-low: #1D1B20;
  --md-surface-container-high: #36343B;
  --md-surface-container-highest: #46464F;
  --md-outline: #938F99;
  --md-outline-variant: #49454F;
  --timer-safe: #4CAF50;
  --timer-warning: #FFC107;
  --timer-danger: #F44336;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 3px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4);
  --font-family:
    "Google Sans",
    "Roboto",
    sans-serif;
  --font-size-display: 57px;
  --font-size-headline: 32px;
  --font-size-title: 22px;
  --font-size-body-lg: 16px;
  --font-size-body-md: 14px;
  --font-size-label-lg: 14px;
  --font-size-label-sm: 11px;
  --transition-enter: 200ms ease-out;
  --transition-exit: 150ms ease-in;
  --transition-screen: 300ms;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body,
#root {
  font-family: var(--font-family);
  font-size: var(--font-size-body-lg);
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  min-height: 100vh;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.app-root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: fadeSlideIn var(--transition-enter);
}
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-label-lg);
  font-weight: 500;
  cursor: pointer;
  transition: transform 100ms, box-shadow 100ms;
  text-decoration: none;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}
.btn-tonal {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.btn-outlined {
  background-color: transparent;
  border: 1px solid var(--md-outline);
  color: var(--md-on-surface);
}
.btn-full {
  width: 100%;
}
.text-input {
  height: 56px;
  padding: 0 var(--space-4);
  background-color: transparent;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-body-lg);
  color: var(--md-on-surface);
  outline: none;
  transition: border-color var(--transition-enter);
  width: 100%;
}
.text-input:focus {
  border-color: var(--md-primary);
}
.card {
  background-color: var(--md-surface-container-low);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}
.letter-tile {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--md-surface-container-high);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  font-size: 28px;
  font-weight: 500;
  color: var(--md-on-surface);
}
.timer-circle {
  width: 80px;
  height: 80px;
  position: relative;
}
.timer-circle svg {
  transform: rotate(-90deg);
}
.timer-circle-bg {
  fill: none;
  stroke: var(--md-surface-container-high);
  stroke-width: 6;
}
.timer-circle-progress {
  fill: none;
  stroke: var(--timer-safe);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke var(--transition-enter);
}
.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-title);
  font-weight: 500;
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}
.shake {
  animation: shake 300ms ease-in-out;
}
@keyframes successPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.success-pop {
  animation: successPop 200ms ease-out;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.pulse {
  animation: pulse 500ms ease-in-out infinite;
}
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.count-up {
  animation: countUp 300ms ease-out;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline-variant);
}
.header-title {
  font-size: 18px;
  font-weight: 700;
}
.header-toggles {
  display: flex;
  gap: var(--space-2);
}
.toggle-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-md);
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: var(--md-surface-container);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--md-outline-variant);
  z-index: 100;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--md-on-surface);
  text-decoration: none;
  font-size: var(--font-size-label-sm);
  opacity: 0.7;
  transition: opacity var(--transition-enter);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}
.nav-item.active {
  opacity: 1;
  color: var(--md-primary);
}
.nav-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.score-display {
  font-size: var(--font-size-headline);
  font-weight: 700;
  color: var(--md-primary);
}
.score-label {
  font-size: var(--font-size-label-sm);
  color: var(--md-outline);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.home-screen {
  flex: 1;
  justify-content: center;
  align-items: center;
}
.home-header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.app-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.chain-icon {
  font-size: 48px;
  animation: pulse 2s ease-in-out infinite;
}
.app-title {
  font-size: var(--font-size-display);
  font-weight: 700;
  color: var(--md-on-surface);
  letter-spacing: -0.5px;
}
.app-tagline {
  font-size: var(--font-size-body-lg);
  color: var(--md-outline);
  font-weight: 400;
}
.home-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
}
.practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}
.practice-letter-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}
.practice-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.practice-word-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.word-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background-color: var(--md-surface-container-low);
  border-radius: var(--radius-md);
}
.word-item .word {
  font-weight: 500;
}
.word-item .points {
  color: var(--md-primary);
  font-weight: 700;
}
.word-item .time-bonus {
  font-size: var(--font-size-label-sm);
  color: var(--timer-safe);
}
.game-over {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-4);
}
.game-over-title {
  font-size: var(--font-size-display);
  font-weight: 700;
}
.game-over-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 320px;
  margin-top: var(--space-4);
}
.input-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.input-row .text-input {
  flex: 1;
}
.error-msg {
  color: var(--md-error);
  font-size: var(--font-size-body-md);
  padding: var(--space-1) 0;
}
.section-label {
  font-size: var(--font-size-label-sm);
  color: var(--md-outline);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}
.badge-count {
  font-size: var(--font-size-label-sm);
  color: var(--md-primary);
  font-weight: 700;
  background: var(--md-primary-container);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--space-2);
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-enter), background var(--transition-enter);
  cursor: default;
}
.badge-item.unlocked {
  background: var(--md-surface-container-high);
}
.badge-item.locked {
  background: var(--md-surface-container-low);
  opacity: 0.5;
}
.badge-item.locked .badge-icon {
  filter: grayscale(100%);
}
.badge-icon {
  font-size: 32px;
  margin-bottom: var(--space-1);
  transition: transform var(--transition-enter);
}
.badge-item.unlocked .badge-icon {
  animation: badgePop 400ms ease-out;
}
@keyframes badgePop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.badge-title {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  color: var(--md-on-surface);
  line-height: 1.2;
}
.badge-desc {
  font-size: 9px;
  color: var(--md-outline);
  text-align: center;
  line-height: 1.2;
  margin-top: 2px;
}
.badge-earned {
  font-size: 8px;
  color: var(--md-primary);
  text-align: center;
  margin-top: 2px;
  opacity: 0.8;
}
.achievements-screen {
  padding-top: var(--space-3);
}
.achievements-header {
  margin-bottom: var(--space-5);
}
.achievements-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--md-surface-container-high);
  border-radius: 3px;
  margin-top: var(--space-3);
  overflow: hidden;
}
.achievements-progress-fill {
  height: 100%;
  background:
    linear-gradient(
      90deg,
      var(--md-primary),
      var(--md-tertiary));
  border-radius: 3px;
  transition: width 500ms ease-out;
}
.achievements-category .badges-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.badge-toast-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.badge-toast-overlay.visible {
  opacity: 1;
}
.badge-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--md-surface-container-highest);
  border-radius: var(--radius-xxl);
  padding: var(--space-4) var(--space-6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: scale(0.8) translateY(20px);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease-out;
  pointer-events: auto;
  max-width: 90%;
}
.badge-toast.visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.badge-toast-icon {
  font-size: 48px;
  flex-shrink: 0;
  animation: iconBounce 600ms ease-out 200ms both;
}
@keyframes iconBounce {
  0% {
    transform: scale(0) rotate(-20deg);
  }
  60% {
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.badge-toast-content {
  flex: 1;
  min-width: 0;
}
.badge-toast-label {
  font-size: var(--font-size-label-sm);
  color: var(--md-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 2px;
}
.badge-toast-title {
  font-size: var(--font-size-title);
  font-weight: 700;
  color: var(--md-on-surface);
  margin-bottom: 2px;
}
.badge-toast-desc {
  font-size: var(--font-size-body-md);
  color: var(--md-outline);
}
.badge-toast-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--md-surface-container);
  border: none;
  color: var(--md-on-surface);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-enter);
}
.badge-toast-close:hover {
  background: var(--md-surface-container-high);
}
.badge-toast-sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.badge-sparkle {
  position: absolute;
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  background: var(--md-primary);
  border-radius: 50%;
  opacity: 0;
  animation: sparkleOut 600ms ease-out var(--sparkle-delay) forwards;
}
@keyframes sparkleOut {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(cos(var(--sparkle-angle)) * var(--sparkle-distance)), calc(sin(var(--sparkle-angle)) * var(--sparkle-distance))) scale(0);
  }
}