/* src/styles/base/variables.css */
:root {
  --color-primary: #007AFF;
  --color-primary-hover: #0056d3;
  --color-primary-light: rgba(0,122,255,0.1);
  --color-primary-border: rgba(0,122,255,0.2);
  --color-secondary: #ff9500;
  --color-secondary-light: rgba(255,149,0,0.1);
  --color-secondary-border: rgba(255,149,0,0.3);
  --color-success: #34c759;
  --color-danger: #ff3b30;
  --color-warning: #ff9500;
  --color-info: #5ac8fa;
  --color-purple: #af52de;
  --color-text-primary: #1c1c1e;
  --color-text-secondary: #8e8e93;
  --color-text-light: #c7c7cc;
  --color-background: #f2f2f7;
  --color-surface: #ffffff;
  --color-border: #e5e5ea;
  --color-shadow: rgba(0,0,0,0.1);
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 30px;
  --spacing-3xl: 40px;
  --spacing-4xl: 50px;
  --font-primary:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    Roboto,
    sans-serif;
  --font-secondary:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.4;
  --line-height-loose: 1.5;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 25px;
  --radius-full: 50%;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 15px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
  --shadow-xl: 0 10px 40px rgba(0,0,0,0.2);
  --shadow-primary: 0 4px 15px rgba(0,122,255,0.3);
  --shadow-primary-hover: 0 6px 20px rgba(0,122,255,0.4);
  --shadow-secondary: 0 4px 15px rgba(255,149,0,0.3);
  --shadow-success: 0 4px 15px rgba(52,199,89,0.3);
  --shadow-danger: 0 4px 12px rgba(255,59,48,0.3);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --container-mobile: 100%;
  --container-tablet: 768px;
  --container-desktop: 1024px;
  --container-max: 480px;
  --touch-target-min: 44px;
  --touch-target-comfortable: 56px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
}

/* src/styles/base/reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: var(--font-size-base);
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
  background: var(--color-background);
  height: 100%;
  min-height: 100dvh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
p,
span,
div {
  margin: 0;
  padding: 0;
}
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}
input,
textarea,
select {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
  margin: 0;
  padding: 0;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
}
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=tel],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
  outline: none;
}
a:hover,
a:focus,
a:active {
  outline: none;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  border: none;
  outline: none;
}
svg {
  max-width: 100%;
  height: auto;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  margin: 0;
  padding: 0;
}
::selection {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
::-moz-selection {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: high) {
  * {
    border-color: currentColor;
  }
}
@media screen and (max-width: 767px) {
  input[type=text],
  input[type=number],
  input[type=email],
  input[type=tel],
  textarea,
  select {
    font-size: var(--font-size-base);
  }
}
html,
body {
  overflow-x: hidden;
}
* {
  touch-action: manipulation;
}
button,
.button,
.btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* src/styles/base/typography.css */
h1,
.h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}
h2,
.h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}
h3,
.h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}
h4,
.h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}
h5,
.h5 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}
h6,
.h6 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}
p,
.text-body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
.text-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}
.text-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: var(--font-weight-normal);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-light {
  color: var(--color-text-light);
}
.text-white {
  color: #ffffff;
}
.text-blue {
  color: var(--color-primary);
}
.text-orange {
  color: var(--color-secondary);
}
.text-green {
  color: var(--color-success);
}
.text-red {
  color: var(--color-danger);
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.rtl {
  direction: rtl;
  text-align: right;
}
.ltr {
  direction: ltr;
  text-align: left;
}
.arabic-text {
  direction: rtl;
  text-align: right;
  font-family: var(--font-primary);
}
.arabic-title {
  direction: rtl;
  text-align: right;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
.app-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  text-align: center;
}
.app-name {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  letter-spacing: -1px;
  text-align: center;
}
.section-title,
.phase-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: center;
}
.screen-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: center;
  direction: rtl;
}
.waiting-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.session-code {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.instruction-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  text-align: center;
  direction: rtl;
}
.input-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  direction: rtl;
  text-align: right;
}
.suggestions-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  direction: rtl;
  text-align: right;
}
@media (max-width: 767px) {
  .app-title {
    font-size: var(--font-size-lg);
  }
  .app-name {
    font-size: var(--font-size-3xl);
  }
  .section-title,
  .phase-title {
    font-size: var(--font-size-xl);
  }
  .session-code {
    font-size: var(--font-size-xl);
  }
  h1,
  .h1 {
    font-size: var(--font-size-3xl);
  }
  h2,
  .h2 {
    font-size: var(--font-size-xl);
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-nowrap {
  white-space: nowrap;
}
.text-break {
  word-break: break-word;
  overflow-wrap: break-word;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}

/* src/styles/layout/containers.css */
.mobile-app-container {
  width: 100vw;
  height: 100%;
  min-height: 100dvh;
  background: none;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  margin: 0;
}
.app-container {
  width: 100%;
  height: 100%;
  background: var(--color-background);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .mobile-app-container {
    padding: 0;
    height: 100%;
    min-height: 100dvh;
  }
  .app-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    max-height: none;
  }
}
.status-bar {
  display: none !important;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-2xl);
  height: 44px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: transparent;
  z-index: var(--z-fixed);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .status-bar {
    height: 36px;
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
}
.screen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.app-screen-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.app-screen-host > * {
  display: flex;
  flex: 1;
  min-height: 0;
}
.content-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-2xl);
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  width: 100%;
}
.content-full {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-2xl);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  width: 100%;
}
@media (max-width: 767px) {
  .content-center,
  .content-full {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}
.session-header {
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .session-header {
    margin-bottom: var(--spacing-lg);
  }
}
.form-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  min-height: 0;
}
.form-section-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  gap: var(--spacing-xl);
  min-height: 0;
  padding-top: var(--spacing-lg);
}
.image-container {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: var(--spacing-xl);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .image-container {
    height: 180px;
    margin-bottom: var(--spacing-lg);
  }
}
.progress-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  flex-shrink: 0;
}
.suggestions-section {
  margin-bottom: var(--spacing-xl);
  flex-shrink: 0;
}
.suggestions-container {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.input-section {
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
}
.classification-section {
  margin-bottom: var(--spacing-3xl);
  flex-shrink: 0;
}
.hints-container {
  flex: 1;
  margin-bottom: var(--spacing-2xl);
  min-height: 0;
}
.session-info {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
}
.qr-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}
.qr-code {
  width: 150px;
  height: 150px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.qr-generated-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-xl);
}
@media (max-width: 767px) {
  .qr-code {
    width: 120px;
    height: 120px;
  }
}
.qr-pattern {
  width: 120px;
  height: 120px;
  background:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #000 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #000 75%);
  background-size: 15px 15px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0px;
}
@media (max-width: 767px) {
  .qr-pattern {
    width: 96px;
    height: 96px;
    background-size: 12px 12px;
  }
}
.join-options {
  text-align: center;
  margin: var(--spacing-2xl) 0;
}
.or-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}
.qr-scan-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}
.qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}
.qr-preview {
  width: 100%;
  max-width: 320px;
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm);
}
.qr-video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.qr-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.qr-upload-input {
  display: none;
}
.qr-upload-button {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--color-text-primary);
}
.qr-upload-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.qr-error {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  text-align: center;
}
.qr-canvas {
  display: none;
}
.qr-soon-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
@supports (padding: max(0px)) {
  .content-center,
  .content-full {
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
  }
  .status-bar {
    padding-top: max(var(--spacing-xs), env(safe-area-inset-top));
    padding-left: max(var(--spacing-2xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-2xl), env(safe-area-inset-right));
  }
}

/* src/styles/layout/grid.css */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-1 {
  flex: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-start {
  justify-content: flex-start;
}
.justify-stretch {
  justify-content: stretch;
}
.grid {
  display: grid;
}
.players-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
  width: 100%;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .players-grid {
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
  }
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-sm);
}
.gap-xs {
  gap: var(--spacing-xs);
}
.gap-sm {
  gap: var(--spacing-sm);
}
.gap-md {
  gap: var(--spacing-md);
}
.gap-lg {
  gap: var(--spacing-lg);
}
.gap-xl {
  gap: var(--spacing-xl);
}
.gap-2xl {
  gap: var(--spacing-2xl);
}
@media (max-width: 767px) {
  .grid-3 {
    gap: var(--spacing-xs);
  }
  .grid-2 {
    gap: var(--spacing-xs);
  }
  .grid-responsive {
    grid-template-columns: 1fr;
  }
}

/* src/styles/layout/responsive.css */
@media (min-width: 768px) {
  .mobile-app-container {
    padding: 0;
    height: 100%;
    min-height: 100dvh;
  }
  .app-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    max-height: none;
  }
}
@media (max-width: 767px) {
  .app-title {
    font-size: var(--font-size-lg);
  }
  .app-name {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2xl);
  }
  .section-title,
  .phase-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }
  .session-code {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }
  .screen-title {
    font-size: var(--font-size-lg);
  }
  .waiting-title {
    font-size: var(--font-size-lg);
  }
}
@media (max-width: 767px) {
  .content-center,
  .content-full {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .session-header {
    margin-bottom: var(--spacing-lg);
  }
  .form-section {
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  .form-section-center {
    gap: var(--spacing-lg);
  }
  .image-container {
    height: 180px;
    margin-bottom: var(--spacing-lg);
  }
  .suggestions-section {
    margin-bottom: var(--spacing-lg);
  }
  .input-section {
    margin-bottom: var(--spacing-lg);
  }
  .classification-section {
    margin-bottom: var(--spacing-2xl);
  }
  .hints-container {
    margin-bottom: var(--spacing-lg);
  }
}
@media (max-width: 767px) {
  .players-grid {
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
  }
}
@media (max-width: 767px) {
  .suggestions-container {
    gap: var(--spacing-xs);
  }
  .suggestion-btn {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}
@media (max-width: 767px) {
  .type-options,
  .classification-options {
    gap: var(--spacing-xs);
  }
  .option-button {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
  }
}
@media (max-width: 767px) {
  .add-hint-btn,
  .remove-hint-btn {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }
}
@media (max-width: 767px) {
  .qr-code {
    width: 120px;
    height: 120px;
  }
  .qr-pattern {
    width: 96px;
    height: 96px;
    background-size: 12px 12px;
  }
}
@media (max-width: 767px) {
  .form-group label {
    font-size: var(--font-size-base);
  }
  .form-group input,
  .form-group select,
  .form-input,
  .form-select,
  .word-input {
    font-size: 16px;
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .hint-input {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .form-select {
    padding-right: var(--spacing-2xl);
    background-size: 14px;
  }
}
@media (max-width: 767px) {
  .player-card {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-xs);
    min-height: 45px;
  }
  .info-card,
  .progress-card,
  .loading-card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  .phase2-header {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  .phase2-title {
    font-size: var(--font-size-xl);
  }
}
@media (max-width: 767px) {
  .status-bar {
    height: 36px;
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
}
@media (max-width: 767px) {
  .primary-button,
  .btn-primary,
  .secondary-button,
  .btn-secondary {
    font-size: var(--font-size-base);
    padding: var(--spacing-md) var(--spacing-3xl);
  }
}
.mobile-only {
  display: block;
}
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}
.tablet-up {
  display: none;
}
@media (min-width: 768px) {
  .tablet-up {
    display: block;
  }
}
.desktop-only {
  display: none;
}
@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
}
.mobile-hidden {
  display: none;
}
@media (min-width: 768px) {
  .mobile-hidden {
    display: block;
  }
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  .content-center,
  .content-full {
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .app-icon {
    width: 50px;
    height: 50px;
    margin-bottom: var(--spacing-md);
  }
  .app-name {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
  }
  .main-buttons {
    gap: var(--spacing-md);
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .qr-pattern {
    background-size: 15px 15px;
  }
}
@media print {
  .status-bar,
  .back-button,
  .primary-button,
  .secondary-button {
    display: none !important;
  }
  .content-center,
  .content-full {
    padding: 0;
    overflow: visible;
  }
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}

/* src/styles/components/buttons.css */
.btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  text-decoration: none;
  transition: all var(--transition-normal);
  box-sizing: border-box;
  min-height: var(--touch-target-comfortable);
  user-select: none;
  -webkit-user-select: none;
}
.btn:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none !important;
  box-shadow: none !important;
}
.primary-button,
.btn-primary {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-lg) var(--spacing-3xl);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-primary);
  width: 100%;
  min-height: var(--touch-target-comfortable);
}
.primary-button:hover,
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary-hover);
}
.primary-button:disabled,
.btn-primary:disabled {
  background: var(--color-text-light);
  color: white;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.secondary-button,
.btn-secondary {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 2px solid var(--color-primary-border);
  padding: var(--spacing-md) var(--spacing-3xl);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  width: 100%;
  min-height: var(--touch-target-comfortable);
}
.secondary-button:hover,
.btn-secondary:hover {
  background: var(--color-primary-border);
  border-color: rgba(0, 122, 255, 0.4);
}
.secondary-button:disabled,
.btn-secondary:disabled {
  background: #f5f5f5;
  color: var(--color-text-light);
  border-color: var(--color-border);
}
.back-button {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: none;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-bottom: var(--spacing-lg);
  align-self: flex-start;
  flex-shrink: 0;
}
.back-button:hover {
  background: var(--color-primary-border);
}
.option-button {
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary-border);
  color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  min-width: 80px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.option-button:hover {
  background: var(--color-primary-border);
  border-color: rgba(0, 122, 255, 0.4);
  transform: translateY(-1px);
}
.option-button.selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.option-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.suggestion-btn {
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary-border);
  color: var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  min-width: 60px;
}
.suggestion-btn:hover {
  background: var(--color-primary-border);
  border-color: rgba(0, 122, 255, 0.4);
  transform: translateY(-1px);
}
.suggestion-btn.selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.suggestion-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.add-hint-btn {
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-primary);
  flex-shrink: 0;
}
.add-hint-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary-hover);
}
.add-hint-btn:disabled {
  background: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.remove-hint-btn {
  width: 50px;
  height: 50px;
  background: var(--color-danger);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
  flex-shrink: 0;
}
.remove-hint-btn:hover {
  background: #d12b20;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4);
}
.remove-hint-btn:disabled {
  background: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.change-image-btn {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
}
.change-image-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}
.change-image-btn:disabled {
  background: rgba(120, 120, 120, 0.7);
  cursor: not-allowed;
}
.qr-scan-button {
  background: rgba(120, 120, 120, 0.1);
  color: var(--color-text-secondary);
  border: 2px solid rgba(120, 120, 120, 0.2);
  padding: var(--spacing-sm) var(--spacing-2xl);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: not-allowed;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.qr-icon {
  font-size: var(--font-size-lg);
}
.main-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
}
.type-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.classification-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.language-options {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}
.language-options .option-button {
  flex: 1;
}
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
  margin-right: var(--spacing-xs);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 767px) {
  .primary-button,
  .btn-primary,
  .secondary-button,
  .btn-secondary {
    font-size: var(--font-size-base);
    padding: var(--spacing-md) var(--spacing-3xl);
  }
  .type-options,
  .classification-options {
    gap: var(--spacing-xs);
  }
  .option-button {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
  }
  .suggestion-btn {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  .add-hint-btn,
  .remove-hint-btn {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }
}
@media (hover: none) {
  .primary-button:hover,
  .secondary-button:hover,
  .back-button:hover,
  .option-button:hover,
  .suggestion-btn:hover,
  .add-hint-btn:hover,
  .remove-hint-btn:hover {
    transform: none;
    background: var(--color-primary);
  }
  .secondary-button:hover {
    background: var(--color-primary-light);
  }
  .back-button:hover {
    background: var(--color-primary-light);
  }
}
@media (hover: hover) {
  .primary-button:hover,
  .secondary-button:hover,
  .back-button:hover {
    transform: translateY(-2px);
  }
}

/* src/styles/components/forms.css */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}
.form-group label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
}
@media (max-width: 767px) {
  .form-group label {
    font-size: var(--font-size-base);
  }
}
.form-input,
.form-group input,
.word-input,
.hint-input {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--spacing-sm);
  font-size: var(--font-size-lg);
  background: var(--color-surface);
  transition: all var(--transition-normal);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch-target-comfortable);
}
.form-input:focus,
.form-group input:focus,
.word-input:focus,
.hint-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form-input:disabled,
.form-group input:disabled,
.word-input:disabled,
.hint-input:disabled {
  background: #f5f5f5;
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
.form-group input[type=text],
.form-group input[type=number],
.word-input {
  text-align: center;
}
.hint-input {
  text-align: right;
  direction: rtl;
}
.hint-input::placeholder {
  color: var(--color-text-secondary);
  text-align: right;
}
.form-select,
.form-group select {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--spacing-sm);
  font-size: var(--font-size-lg);
  text-align: center;
  background: var(--color-surface);
  transition: all var(--transition-normal);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch-target-comfortable);
  cursor: pointer;
  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='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 var(--spacing-md) center;
  background-size: 16px;
  padding-right: var(--spacing-3xl);
}
.form-select:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.hint-input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.hint-input-row .hint-input {
  flex: 1;
}
.input-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  text-align: right;
  direction: rtl;
  display: block;
}
.suggestions-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  text-align: right;
  direction: rtl;
}
.instruction-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xl);
  font-weight: var(--font-weight-medium);
  text-align: center;
  direction: rtl;
  flex-shrink: 0;
}
.word-display {
  background: var(--color-secondary-light);
  border: 2px solid var(--color-secondary-border);
  color: var(--color-secondary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--spacing-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  direction: rtl;
  flex-shrink: 0;
}
.form-input.error,
.form-group input.error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1);
}
.form-input.success,
.form-group input.success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.1);
}
.error-message {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  margin-top: var(--spacing-xs);
}
.success-message {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  margin-top: var(--spacing-xs);
}
@media (max-width: 767px) {
  .form-input,
  .form-group input,
  .form-group select,
  .word-input,
  .hint-input {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .form-group select {
    padding-right: var(--spacing-2xl);
    background-size: 14px;
  }
  .hint-input {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
}
.form-input:focus-visible,
.form-group input:focus-visible,
.form-group select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (prefers-contrast: high) {
  .form-input,
  .form-group input,
  .form-group select {
    border-width: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-input,
  .form-group input,
  .form-group select {
    transition: none;
  }
}
@media screen and (max-width: 767px) {
  .form-input,
  .form-group input,
  .form-group select {
    font-size: 16px;
  }
}

/* src/styles/components/cards.css */
.player-card {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  box-shadow: var(--shadow-primary);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  transition: all var(--transition-normal);
}
@media (max-width: 767px) {
  .player-card {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-xs);
    min-height: 45px;
  }
}
.player-card.creator {
  background: var(--color-secondary);
  box-shadow: var(--shadow-secondary);
}
.player-card:nth-child(3) {
  background: var(--color-success);
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
}
.player-card:nth-child(4) {
  background: var(--color-danger);
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);
}
.player-card:nth-child(5) {
  background: var(--color-purple);
  box-shadow: 0 4px 15px rgba(175, 82, 222, 0.3);
}
.player-card:nth-child(6) {
  background: var(--color-info);
  box-shadow: 0 4px 15px rgba(90, 200, 250, 0.3);
}
.player-status {
  font-size: var(--font-size-sm);
  margin-left: var(--spacing-xs);
}
.player-card.completed {
  opacity: 0.8;
  position: relative;
}
.player-card.completed::after {
  content: "\2705";
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--color-success);
  border-radius: var(--radius-full);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}
.info-card-header {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}
.info-card-content {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.progress-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.progress-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}
.progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: width var(--transition-slow);
}
.game-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.loading-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.loading-spinner-large {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}
.loading-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}
.phase2-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-lg);
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-primary-border);
}
.phase2-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}
.phase2-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
@media (hover: hover) {
  .player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
  }
  .info-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}
@media (max-width: 767px) {
  .info-card,
  .progress-card,
  .loading-card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  .phase2-header {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  .phase2-title {
    font-size: var(--font-size-xl);
  }
}

/* src/styles/components/navigation.css */
.progress-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  flex-shrink: 0;
}
.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-text-light);
  margin: 0 var(--spacing-xs);
  transition: all var(--transition-normal);
}
.progress-dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
}
.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb-item:not(:last-child)::after {
  content: ">";
  margin: 0 var(--spacing-xs);
  color: var(--color-text-light);
}
.breadcrumb-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumb-link:hover {
  color: var(--color-primary-hover);
}
.qr-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--spacing-sm);
}
.qr-instructions {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: var(--line-height-relaxed);
  margin-top: var(--spacing-sm);
}
.tab-navigation {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--spacing-lg);
}
.tab-item {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
  position: relative;
}
.tab-item.active {
  color: var(--color-primary);
}
.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
}
.tab-item:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-2xl);
}
.step {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.step-number {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-text-light);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  margin-right: var(--spacing-xs);
}
.step.active .step-number {
  background: var(--color-primary);
}
.step.completed .step-number {
  background: var(--color-success);
}
.step:not(:last-child)::after {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--spacing-md);
}
.step.completed:not(:last-child)::after {
  background: var(--color-success);
}
.fab {
  position: fixed;
  bottom: var(--spacing-2xl);
  right: var(--spacing-2xl);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-fixed);
  transition: all var(--transition-normal);
}
.fab:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  z-index: var(--z-fixed);
  padding: var(--spacing-sm) 0;
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xs);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-xs);
  transition: color var(--transition-fast);
}
.bottom-nav-item.active {
  color: var(--color-primary);
}
.bottom-nav-icon {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xs);
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-2xl) 0;
}
.pagination-button {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.pagination-button:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}
.pagination-button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.pagination-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.menu-indicator {
  position: relative;
}
.menu-indicator::after {
  content: "";
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  width: 8px;
  height: 8px;
  background: var(--color-danger);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
}
@media (max-width: 767px) {
  .progress-indicator {
    margin-bottom: var(--spacing-md);
  }
  .step-indicator {
    margin-bottom: var(--spacing-lg);
  }
  .step {
    font-size: var(--font-size-xs);
  }
  .step-number {
    width: 20px;
    height: 20px;
    font-size: var(--font-size-xs);
  }
  .step:not(:last-child)::after {
    width: 20px;
    margin: 0 var(--spacing-sm);
  }
  .fab {
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 48px;
    height: 48px;
    font-size: var(--font-size-lg);
  }
  .bottom-nav {
    padding: var(--spacing-xs) 0;
  }
  .bottom-nav-item {
    font-size: var(--font-size-xs);
  }
  .bottom-nav-icon {
    font-size: var(--font-size-base);
  }
}

/* src/styles/components/progress.css */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}
.progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: width var(--transition-slow);
  transform-origin: left;
}
.progress-fill.animated {
  animation: progressGrow 1s ease-in-out;
}
@keyframes progressGrow {
  from {
    width: 0%;
  }
}
.progress-bar.success .progress-fill {
  background: var(--color-success);
}
.progress-bar.warning .progress-fill {
  background: var(--color-warning);
}
.progress-bar.danger .progress-fill {
  background: var(--color-danger);
}
.progress-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}
.progress-percentage {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-left: var(--spacing-xs);
}
.progress-circle {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.progress-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.progress-circle .circle-bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 8;
}
.progress-circle .circle-progress {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-slow);
}
.progress-circle .progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
  margin-right: var(--spacing-xs);
}
.loading-spinner-large {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}
.loading-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.players-progress {
  margin-bottom: var(--spacing-2xl);
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.loading-section {
  text-align: center;
  margin-top: var(--spacing-3xl);
  padding: var(--spacing-2xl);
}
.loading-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-sm);
}
.step-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--spacing-2xl) 0;
  position: relative;
}
.step-progress::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
  z-index: 1;
}
.step-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  padding: var(--spacing-xs);
}
.step-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  transition: all var(--transition-normal);
}
.step-item.active .step-circle {
  background: var(--color-primary);
  color: white;
}
.step-item.completed .step-circle {
  background: var(--color-success);
  color: white;
}
.step-item.completed .step-circle::before {
  content: "\2713";
}
.step-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
}
.step-item.active .step-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.pulse-ring {
  position: relative;
}
.pulse-ring::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--color-primary);
  border-radius: inherit;
  opacity: 0;
  animation: pulseRing 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulseRing {
  0% {
    transform: scale(0.33);
    opacity: 1;
  }
  80%, 100% {
    transform: scale(1);
    opacity: 0;
  }
}
.skeleton {
  background:
    linear-gradient(
      90deg,
      var(--color-border) 25%,
      rgba(229, 229, 234, 0.5) 50%,
      var(--color-border) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skeleton-text {
  height: 16px;
  margin-bottom: var(--spacing-xs);
}
.skeleton-text.large {
  height: 24px;
}
.skeleton-text.small {
  height: 12px;
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}
.skeleton-button {
  height: 48px;
  border-radius: var(--radius-xl);
}
@media (max-width: 767px) {
  .progress-text {
    font-size: var(--font-size-base);
  }
  .players-progress {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
  }
  .loading-section {
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-lg);
  }
  .progress-circle {
    width: 60px;
    height: 60px;
  }
  .progress-circle .progress-text {
    font-size: var(--font-size-base);
  }
  .step-progress {
    margin: var(--spacing-lg) 0;
  }
  .step-circle {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs);
  }
  .step-label {
    font-size: 10px;
  }
}

/* src/styles/components/modals.css */
.modal-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: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-2xl);
  margin: var(--spacing-lg);
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s ease;
}
.modal-overlay.show .modal {
  transform: scale(1) translateY(0);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}
.modal-close:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.modal-body {
  margin-bottom: var(--spacing-lg);
}
.modal-footer {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}
.qr-modal .modal-body {
  text-align: center;
}
.qr-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}
.qr-code {
  width: 150px;
  height: 150px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.qr-pattern {
  width: 120px;
  height: 120px;
  background:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #000 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #000 75%);
  background-size: 15px 15px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0px;
}
.loading-modal {
  text-align: center;
}
.loading-modal .modal-body {
  padding: var(--spacing-2xl) 0;
}
.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s ease-in-out infinite;
  margin-bottom: var(--spacing-lg);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 767px) {
  .modal {
    margin: var(--spacing-md);
    padding: var(--spacing-lg);
    max-height: 90vh;
  }
  .qr-code {
    width: 120px;
    height: 120px;
  }
  .qr-pattern {
    width: 96px;
    height: 96px;
    background-size: 12px 12px;
  }
  .modal-footer {
    flex-direction: column;
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary {
    width: 100%;
  }
}

/* src/styles/pages/main-menu.css */
.app-icon {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
}
.brain-icon {
  position: absolute;
  font-size: 40px;
  left: 0;
  top: 0;
  color: var(--color-text-primary);
}
.lightbulb-icon {
  position: absolute;
  font-size: 35px;
  right: 0;
  bottom: 0;
  filter: sepia(1) saturate(3) hue-rotate(35deg);
}
.app-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  text-align: center;
  flex-shrink: 0;
}
.app-name {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-4xl);
  letter-spacing: -1px;
  flex-shrink: 0;
  text-align: center;
}
.saved-player-name {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
  text-align: center;
  word-break: break-word;
}
.main-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
}
.main-menu-button {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  min-height: 56px;
}
.main-menu-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}
.main-menu-button:disabled {
  background: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.main-menu-button.secondary {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 2px solid var(--color-primary-border);
  box-shadow: none;
}
.main-menu-button.secondary:hover {
  background: rgba(0, 122, 255, 0.2);
  border-color: rgba(0, 122, 255, 0.4);
  color: var(--color-primary);
}
.main-menu-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-2xl);
  text-align: center;
  width: 100%;
  min-height: 0;
}
.menu-content {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 767px) {
  .app-icon {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-lg);
  }
  .brain-icon {
    font-size: 30px;
  }
  .lightbulb-icon {
    font-size: 25px;
  }
  .app-title {
    font-size: var(--font-size-lg);
  }
  .app-name {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2xl);
  }
  .main-menu-button {
    font-size: var(--font-size-base);
    padding: var(--spacing-md) var(--spacing-xl);
  }
  .main-menu-container {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}
.main-menu-container.fade-in {
  animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.app-icon.bounce {
  animation: bounceIn 0.8s ease-out;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* src/styles/pages/session-forms.css */
.session-header {
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
  text-align: center;
}
.form-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  min-height: 0;
}
.form-section-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: var(--spacing-xl);
  min-height: auto;
  padding-top: var(--spacing-lg);
}
.form-section-center.shared-link-mode {
  gap: calc(var(--spacing-2xl) * 1.25);
}
.form-section-center.shared-link-mode .form-group {
  gap: var(--spacing-md);
}
.form-section-center.shared-link-mode .primary-button {
  margin-top: var(--spacing-2xl);
}
.form-section-center.shared-link-mode ~ .join-options {
  margin-top: var(--spacing-2xl);
}
.form-section-center.shared-link-mode ~ .form-error,
.form-section-center.shared-link-mode ~ .primary-button {
  margin-top: var(--spacing-xl);
}
.join-options {
  width: 100%;
  margin-top: var(--spacing-xl);
}
.qr-scan-container {
  width: 100%;
}
.qr-actions {
  width: 100%;
}
@media (max-width: 767px) {
  .qr-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .qr-actions .qr-scan-button {
    width: 100%;
    justify-content: center;
  }
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}
.form-group label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
  direction: rtl;
}
.form-group input,
.form-group select,
.form-input,
.form-select {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  text-align: center;
  background: var(--color-surface);
  transition: all 0.2s ease;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  font-family: var(--font-primary);
}
.form-group input:focus,
.form-group select:focus,
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form-group input::placeholder,
.form-input::placeholder {
  color: var(--color-text-secondary);
  text-align: center;
}
.form-group input:disabled,
.form-group select:disabled,
.form-input:disabled,
.form-select:disabled {
  background: #f5f5f5;
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
.session-code-input {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.session-code-input:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}
.form-group.error input,
.form-group.error select {
  border-color: var(--color-danger);
  background: rgba(255, 59, 48, 0.05);
}
.form-group.error label {
  color: var(--color-danger);
}
.form-error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
  text-align: center;
}
.form-group.success input,
.form-group.success select {
  border-color: var(--color-success);
  background: rgba(52, 199, 89, 0.05);
}
.form-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: auto;
  flex-shrink: 0;
}
.form-submit {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
  width: 100%;
  min-height: 56px;
}
.form-submit:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}
.form-submit:disabled {
  background: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.form-submit.loading {
  position: relative;
  color: transparent;
}
.form-submit.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}
.form-help {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--spacing-xs);
  line-height: var(--line-height-relaxed);
}
.role-choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}
.role-choice-option {
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  font-weight: var(--font-weight-bold);
  gap: var(--spacing-xs);
  justify-content: center;
  min-height: 52px;
  transition: all var(--transition-fast);
}
.role-choice-option input {
  inline-size: auto;
}
.role-choice-option.selected {
  background: #e8f3ff;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.form-divider {
  display: flex;
  align-items: center;
  margin: var(--spacing-xl) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.form-divider span {
  padding: 0 var(--spacing-md);
}
@media (max-width: 767px) {
  .session-header {
    margin-bottom: var(--spacing-lg);
  }
  .form-group label {
    font-size: var(--font-size-base);
  }
  .form-group input,
  .form-group select,
  .form-input,
  .form-select {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .session-code-input {
    font-size: var(--font-size-xl);
  }
  .form-submit {
    font-size: var(--font-size-base);
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .form-section-center.shared-link-mode {
    gap: calc(var(--spacing-2xl) * 1.5);
  }
  .form-section-center.shared-link-mode .form-group {
    gap: var(--spacing-md);
  }
  .form-section-center.shared-link-mode .primary-button {
    margin-top: var(--spacing-2xl);
  }
  .form-section-center.shared-link-mode ~ .join-options {
    margin-top: var(--spacing-2xl);
  }
  .form-section-center.shared-link-mode ~ .form-error,
  .form-section-center.shared-link-mode ~ .primary-button {
    margin-top: var(--spacing-xl);
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-submit:hover {
    transform: none;
  }
  .form-submit.loading::after {
    animation: none;
  }
}

/* src/styles/pages/waiting-room.css */
.session-info {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  flex-shrink: 0;
}
.session-code {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary-border);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  letter-spacing: 0.1em;
  position: relative;
}
.session-code-value {
  cursor: pointer;
  letter-spacing: normal;
}
.copy-session-code {
  background: white;
  color: var(--color-text-primary);
  border: 1px solid var(--color-primary-border);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
  transition-delay: 1s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(2px);
  letter-spacing: normal;
}
.session-code:hover .copy-session-code,
.session-code:focus-within .copy-session-code,
.copy-session-code:hover,
.copy-session-code:focus {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.copy-session-code:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.copy-session-code:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.copy-icon {
  width: 16px;
  height: 16px;
}
.copied-hint {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  letter-spacing: normal;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  padding: 2px 8px;
  white-space: nowrap;
}
.session-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}
.qr-share-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-sm);
}
.share-qr-btn {
  border: 1px solid var(--color-primary-border);
  background: #fff;
  color: var(--color-primary);
  border-radius: 999px;
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.12);
}
.share-qr-btn:hover {
  background: var(--color-primary-light);
}
.share-qr-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.share-arrow {
  font-size: 15px;
  line-height: 1;
}
.share-label {
  line-height: 1;
}
.share-feedback {
  margin-top: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-success);
  text-align: center;
}
.waiting-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  flex-shrink: 0;
  text-align: center;
  direction: rtl;
}
.waiting-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.players-section {
  margin-bottom: var(--spacing-3xl);
  flex-shrink: 0;
}
.players-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
  width: 100%;
  flex-shrink: 0;
}
.player-card {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  transition: all 0.3s ease;
}
.player-card.creator {
  background: var(--color-secondary);
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}
.player-card:nth-child(3) {
  background: var(--color-success);
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
}
.player-card:nth-child(4) {
  background: var(--color-danger);
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);
}
.player-card:nth-child(5) {
  background: var(--color-purple);
  box-shadow: 0 4px 15px rgba(175, 82, 222, 0.3);
}
.player-card:nth-child(6) {
  background: var(--color-info);
  box-shadow: 0 4px 15px rgba(90, 200, 250, 0.3);
}
.player-card.empty {
  background: var(--color-border);
  color: var(--color-text-secondary);
  border: 2px dashed var(--color-text-light);
  box-shadow: none;
  opacity: 0.6;
}
.player-card.joining {
  animation: playerJoin 0.5s ease-out;
}
@keyframes playerJoin {
  0% {
    opacity: 0;
    transform: scale(0.8) rotateY(90deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) rotateY(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
  }
}
.player-card.leaving {
  animation: playerLeave 0.3s ease-in forwards;
}
@keyframes playerLeave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
.waiting-indicator {
  text-align: center;
  margin: var(--spacing-xl) 0;
}
.waiting-dots {
  display: inline-flex;
  gap: var(--spacing-xs);
}
.waiting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: waitingPulse 1.4s infinite both;
}
.waiting-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.waiting-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes waitingPulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.game-status {
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  text-align: center;
}
.game-status.ready {
  background: rgba(52, 199, 89, 0.1);
  border-color: rgba(52, 199, 89, 0.3);
  color: var(--color-success);
}
.game-status.waiting {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}
.status-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin: 0;
}
.waiting-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  flex-shrink: 0;
}
.start-game-btn {
  background: var(--color-success);
  color: white;
  border: none;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
  width: 100%;
}
.start-game-btn:hover {
  background: #2aa14a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4);
}
.start-game-btn:disabled {
  background: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
@media (max-width: 767px) {
  .session-code {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .copy-session-code {
    width: 24px;
    height: 24px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .copy-icon {
    width: 14px;
    height: 14px;
  }
  .players-grid {
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
  }
  .player-card {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-xs);
    min-height: 45px;
  }
  .start-game-btn {
    font-size: var(--font-size-base);
    padding: var(--spacing-md) var(--spacing-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .player-card.joining,
  .player-card.leaving {
    animation: none;
  }
  .waiting-dot {
    animation: none;
  }
  .start-game-btn:hover {
    transform: none;
  }
}

/* src/styles/pages/word-definition.css */
.screen-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
  background:
    linear-gradient(
      135deg,
      #f8f9fa 0%,
      #e9ecef 100%);
}
.content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.image-container-centered {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-image-centered {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}
.change-image-btn-small {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 123, 255, 0.9);
  color: white;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.7rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  max-width: 120px;
  text-align: center;
}
.change-image-btn-small:hover:not(:disabled) {
  background: rgba(0, 123, 255, 1);
  transform: translateY(-1px);
}
.change-image-btn-small:disabled {
  background: rgba(108, 117, 125, 0.9);
  cursor: not-allowed;
}
.instruction-text-centered {
  font-size: 1rem;
  color: #495057;
  line-height: 1.5;
  text-align: center;
  max-width: 350px;
}
.suggestions-section {
  width: 100%;
}
.suggestions-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1c1c1e;
  margin-bottom: 1rem;
}
.suggestions-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.suggestion-btn {
  padding: 0.75rem 1rem;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.suggestion-btn:hover {
  border-color: #007bff;
  transform: translateY(-1px);
}
.suggestion-btn.selected {
  background: #007bff;
  color: white;
  border-color: #007bff;
}
.input-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.input-label {
  font-size: 1rem;
  color: #495057;
  font-weight: 500;
}
.word-input {
  padding: 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  font-size: 1rem;
  text-align: center;
  background: white;
}
.word-input:focus {
  outline: none;
  border-color: #007bff;
}
.primary-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}
.primary-button:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}
.primary-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff40;
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 0.5rem;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* src/styles/pages/classification.css */
.classification-section {
  margin-bottom: var(--spacing-3xl);
  flex-shrink: 0;
}
.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
  direction: rtl;
}
.option-button {
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary-border);
  color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.option-button:hover {
  background: rgba(0, 122, 255, 0.2);
  border-color: rgba(0, 122, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.option-button.selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
  transform: translateY(-2px);
}
.option-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.option-button:active {
  transform: translateY(0);
}
.type-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.classification-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.language-options {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}
.language-options .option-button {
  flex: 1;
  min-width: 120px;
}
.type-noun .option-button.selected {
  background: var(--color-success);
  border-color: var(--color-success);
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}
.type-verb .option-button.selected {
  background: var(--color-danger);
  border-color: var(--color-danger);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}
.type-adjective .option-button.selected {
  background: var(--color-purple);
  border-color: var(--color-purple);
  box-shadow: 0 4px 12px rgba(175, 82, 222, 0.3);
}
.category-abstract .option-button.selected {
  background: var(--color-info);
  border-color: var(--color-info);
  box-shadow: 0 4px 12px rgba(90, 200, 250, 0.3);
}
.category-concrete .option-button.selected {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}
.category-mixed .option-button.selected {
  background: var(--color-purple);
  border-color: var(--color-purple);
  box-shadow: 0 4px 12px rgba(175, 82, 222, 0.3);
}
.language-arabic .option-button.selected {
  background: var(--color-success);
  border-color: var(--color-success);
}
.language-english .option-button.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.option-button.selecting {
  animation: selectPulse 0.3s ease-out;
}
@keyframes selectPulse {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.05) translateY(-3px);
  }
  100% {
    transform: scale(1) translateY(-2px);
  }
}
.classification-section.error .section-title {
  color: var(--color-danger);
}
.classification-section.error .option-button {
  border-color: rgba(255, 59, 48, 0.3);
  background: rgba(255, 59, 48, 0.05);
}
.classification-section.valid .section-title {
  color: var(--color-success);
}
.classification-section.valid::after {
  content: "\2713";
  display: inline-block;
  margin-left: var(--spacing-xs);
  color: var(--color-success);
  font-weight: bold;
}
.classification-progress {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-xs);
}
.progress-step {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: all 0.3s ease;
}
.progress-step.completed {
  background: var(--color-success);
  transform: scale(1.2);
}
.progress-step.current {
  background: var(--color-primary);
  transform: scale(1.4);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
@media (max-width: 767px) {
  .type-options,
  .classification-options {
    gap: var(--spacing-xs);
    grid-template-columns: 1fr;
  }
  .type-options {
    grid-template-columns: repeat(2, 1fr);
  }
  .classification-options {
    grid-template-columns: repeat(2, 1fr);
  }
  .option-button {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .language-options {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .language-options .option-button {
    flex: none;
    min-width: auto;
  }
}
@media (max-width: 480px) {
  .type-options,
  .classification-options {
    grid-template-columns: 1fr;
  }
}
.option-button:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.option-button:focus:not(:focus-visible) {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .option-button:hover,
  .option-button.selected {
    transform: none;
  }
  .option-button.selecting {
    animation: none;
  }
  .progress-step.completed,
  .progress-step.current {
    transform: none;
  }
}
@media (prefers-contrast: high) {
  .option-button {
    border-width: 3px;
  }
  .option-button.selected {
    border-width: 4px;
  }
}

/* src/styles/pages/hints.css */
.hints-container {
  flex: 1;
  margin-bottom: var(--spacing-2xl);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hints-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--spacing-xs);
}
.hint-input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  animation: slideInRight 0.3s ease-out;
}
.hint-input-row:nth-child(even) {
  animation-delay: 0.1s;
}
.hint-input-row:nth-child(odd) {
  animation-delay: 0.05s;
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.hint-input {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  text-align: right;
  background: var(--color-surface);
  transition: all 0.2s ease;
  box-sizing: border-box;
  direction: rtl;
  font-family: var(--font-primary);
}
.hint-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.hint-input::placeholder {
  color: var(--color-text-secondary);
  text-align: right;
}
.hint-input:disabled {
  background: #f5f5f5;
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
.hint-input.valid {
  border-color: var(--color-success);
  background: rgba(52, 199, 89, 0.05);
}
.hint-input.invalid {
  border-color: var(--color-danger);
  background: rgba(255, 59, 48, 0.05);
}
.add-hint-btn {
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
  flex-shrink: 0;
}
.add-hint-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}
.add-hint-btn:disabled {
  background: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.remove-hint-btn {
  width: 50px;
  height: 50px;
  background: var(--color-danger);
  color: white;
  border: none;
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
  flex-shrink: 0;
}
.remove-hint-btn:hover {
  background: #d12b20;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4);
}
.remove-hint-btn:disabled {
  background: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.hint-number {
  width: 30px;
  height: 30px;
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary-border);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}
.hint-number.filled {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.hints-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  flex-shrink: 0;
}
.hints-counter {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.hints-counter.max-reached {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}
.hints-empty {
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
  color: var(--color-text-secondary);
}
.hints-empty-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}
.hints-empty-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}
.hint-error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  text-align: right;
  direction: rtl;
}
.hint-success {
  color: var(--color-success);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  text-align: right;
  direction: rtl;
}
.hint-input-row.removing {
  animation: slideOutRight 0.3s ease-in forwards;
}
@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}
.hints-list::-webkit-scrollbar {
  width: 4px;
}
.hints-list::-webkit-scrollbar-track {
  background: transparent;
}
.hints-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}
.hints-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}
@media (max-width: 767px) {
  .hint-input {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .add-hint-btn,
  .remove-hint-btn {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }
  .hint-number {
    width: 25px;
    height: 25px;
    font-size: var(--font-size-xs);
  }
  .hints-list {
    gap: var(--spacing-sm);
  }
  .hint-input-row {
    gap: var(--spacing-xs);
  }
}
.hint-input:focus + .hint-number {
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
@media (prefers-reduced-motion: reduce) {
  .hint-input-row {
    animation: none;
  }
  .hint-input-row.removing {
    animation: none;
    display: none;
  }
  .add-hint-btn:hover,
  .remove-hint-btn:hover {
    transform: none;
  }
}
@media (prefers-contrast: high) {
  .hint-input {
    border-width: 3px;
  }
  .hint-number {
    border-width: 3px;
  }
  .add-hint-btn,
  .remove-hint-btn {
    border: 2px solid white;
  }
}

/* src/styles/pages/waiting-room2.css */
.waiting-room2-header {
  text-align: center;
  margin-bottom: 2rem;
}
.waiting-room2-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-text-primary, #333);
  margin-bottom: 0.5rem;
  direction: rtl;
}
.status-card {
  margin: 2rem auto;
  max-width: 460px;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      #f6f9ff 0%,
      #edf4ff 100%);
  border: 1px solid rgba(55, 125, 255, 0.16);
  box-shadow: 0 18px 40px rgba(23, 43, 77, 0.08);
  direction: rtl;
  text-align: center;
}
.status-card.countdown-active {
  background:
    linear-gradient(
      180deg,
      #eefbf2 0%,
      #e2f6e8 100%);
  border-color: rgba(40, 167, 69, 0.16);
}
.status-illustration {
  display: grid;
  place-items: center;
  margin-bottom: 0.75rem;
}
.status-illustration svg {
  width: min(100%, 180px);
  height: auto;
}
.status-orbit {
  fill: #ffffff;
  stroke: rgba(59, 130, 246, 0.22);
  stroke-width: 2;
}
.status-main-head {
  fill: #4f8df7;
}
.status-main-body {
  fill: #dceaff;
  stroke: #4f8df7;
  stroke-width: 3;
  stroke-linecap: round;
}
.status-side-head {
  fill: #9ec4ff;
}
.status-side-head.secondary {
  fill: #76aaff;
}
.status-side-body {
  fill: none;
  stroke: #9ec4ff;
  stroke-width: 3;
  stroke-linecap: round;
}
.status-side-body.secondary {
  stroke: #76aaff;
}
.status-ground {
  stroke: rgba(36, 71, 121, 0.2);
  stroke-width: 4;
  stroke-linecap: round;
}
.status-check {
  stroke: #22c55e;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.status-message {
  text-align: center;
  font-size: 1.05rem;
  color: var(--color-text-primary, #333);
  margin: 0;
  direction: rtl;
  line-height: 1.8;
  font-weight: 600;
}
.status-card.countdown-active .status-message {
  color: var(--color-success, #155724);
}
.countdown-display {
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: var(--color-primary, #007bff);
  margin: 2rem 0;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
.waiting-animation {
  text-align: center;
  margin: 3rem 0;
}
.waiting-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.waiting-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary, #007bff);
  animation: waitingPulse 1.4s ease-in-out infinite both;
}
.waiting-dot:nth-child(1) {
  animation-delay: 0s;
}
.waiting-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.waiting-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes waitingPulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .waiting-room2-title {
    font-size: 1.25rem;
  }
  .status-card {
    margin: 1.5rem auto;
    padding: 1.25rem 1rem 1rem;
  }
  .countdown-display {
    font-size: 3rem;
    margin: 1.5rem 0;
  }
}

/* src/styles/pages/results.css */
.screen-content {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
  direction: rtl;
  background: white;
  min-height: 100vh;
  overflow-y: auto;
}
.content-center {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem 0 2rem 0;
}
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.back-btn {
  background: #f8f9fa;
  color: #495057;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.back-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}
.timer-display {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid #bbdefb;
}
.loading-section,
.error-section {
  text-align: center;
  padding: 3rem 1rem;
  background: #f8f9fa;
  border-radius: 20px;
  margin: 2rem 0;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.retry-btn {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 1rem;
  transition: all 0.3s ease;
}
.retry-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
}
.round-summary-card {
  background: #af52de;
  border-radius: 25px;
  padding: 2rem;
  color: white;
  text-align: center;
  box-shadow: 0 8px 25px rgba(175, 82, 222, 0.3);
  position: relative;
  overflow: hidden;
}
.round-summary-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 70%);
  pointer-events: none;
}
.round-end-badge {
  background: white;
  color: #af52de;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.word-display {
  margin-bottom: 2rem;
}
.revealed-word {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.word-category {
  font-size: 1rem;
  opacity: 0.9;
  margin: 0;
}
.winner-section,
.timeout-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.winner-crown {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.timeout-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.winner-text,
.timeout-text {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}
.duration-text {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0;
}
.timeout-time {
  margin-top: 0.5rem;
}
.timeout-duration {
  font-size: 1rem;
  font-weight: 600;
  color: #6c757d;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
}
.game-completion-section {
  text-align: center;
  margin: 20px 0;
  padding: 20px;
  background:
    linear-gradient(
      135deg,
      #FFD700,
      #FFA500);
  border-radius: 15px;
  color: white;
}
.completion-crown {
  font-size: 48px;
  margin-bottom: 10px;
}
.completion-text {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.completion-subtext {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}
.scoring-chart {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 1.5rem;
}
.chart-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #495057;
  margin: 0 0 1.5rem 0;
}
.score-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.score-bar-item {
  opacity: 0;
  animation: slideInUp 0.5s ease-out forwards;
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.player-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.player-rank {
  font-weight: 700;
  color: #af52de;
  min-width: 30px;
}
.player-name {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: #495057;
}
.player-score {
  font-weight: 700;
  color: #28a745;
  min-width: 40px;
  text-align: left;
}
.score-bar-container {
  height: 8px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}
.score-bar {
  height: 100%;
  border-radius: 10px;
  transition: all 0.5s ease;
  animation: expandWidth 1s ease-out forwards;
}
@keyframes expandWidth {
  from {
    width: 0 !important;
  }
  to {
    width: inherit;
  }
}
.score-bar.first-place {
  background:
    linear-gradient(
      90deg,
      #ffd700,
      #ffed4e);
}
.score-bar.second-place {
  background:
    linear-gradient(
      90deg,
      #c0c0c0,
      #e8e8e8);
}
.score-bar.third-place {
  background:
    linear-gradient(
      90deg,
      #cd7f32,
      #daa520);
}
.score-bar.other-place {
  background:
    linear-gradient(
      90deg,
      #6c757d,
      #adb5bd);
}
.guesses-section {
  background: #e3f2fd;
  border-radius: 20px;
  padding: 1.5rem;
  max-height: 400px;
  overflow-y: auto;
}
.section-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #495057;
  margin: 0 0 1.5rem 0;
}
.player-guesses-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.player-guess-card {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #bbdefb;
  transition: all 0.3s ease;
}
.player-guess-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #495057;
}
.player-name {
  font-size: 1rem;
}
.guess-count {
  font-size: 0.85rem;
  color: #6c757d;
}
.guesses-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.guess-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.guess-word {
  line-height: 1;
}
.guess-points {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.8;
}
.guess-points.negative {
  color: #dc3545;
}
.guess-item.correct {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.guess-item.correct .guess-points {
  color: #155724;
}
.guess-item.synonym {
  background: #fff3cd;
  color: #856404;
  border-color: #ffeaa7;
}
.guess-item.synonym .guess-points {
  color: #856404;
}
.guess-item.hot {
  background: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}
.guess-item.hot .guess-points {
  color: #721c24;
}
.guess-item.cold {
  background: #d1ecf1;
  color: #0c5460;
  border-color: #bee5eb;
}
.guess-item.cold .guess-points {
  color: #0c5460;
}
.guess-item.pending {
  background: #e2e3e5;
  color: #495057;
  border-color: #ced4da;
}
.no-guesses {
  text-align: center;
  margin-top: 0.5rem;
}
.no-guess-text {
  font-size: 0.9rem;
  color: #6c757d;
  font-style: italic;
}
.action-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.next-round-button {
  background:
    linear-gradient(
      135deg,
      #28a745,
      #20c997);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.next-round-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}
.next-round-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.next-round-button .loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  margin: 0;
}
.next-round-button.final-button {
  background:
    linear-gradient(
      135deg,
      #4CAF50,
      #45a049);
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}
.next-round-button.final-button:hover {
  background:
    linear-gradient(
      135deg,
      #45a049,
      #4CAF50);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}
.secondary-action-btn {
  background:
    linear-gradient(
      135deg,
      #ffc107,
      #ff9800);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
.secondary-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}
.reputation-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: 1000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.reputation-modal {
  background: white;
  border-radius: 25px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
  text-align: center;
}
.reputation-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 1rem;
}
.reputation-header h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}
.revealer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.revealer-name {
  background:
    linear-gradient(
      135deg,
      #667eea 0%,
      #764ba2 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}
.round-info {
  background: #f8f9fa;
  color: #6c757d;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}
.reputation-content {
  text-align: center;
}
.rating-question {
  color: #495057;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.rating-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.rating-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  min-width: 120px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.rating-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.rating-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.positive-btn {
  background:
    linear-gradient(
      135deg,
      #4CAF50,
      #45a049);
  color: white;
}
.positive-btn:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      #45a049,
      #4CAF50);
}
.negative-btn {
  background:
    linear-gradient(
      135deg,
      #f44336,
      #d32f2f);
  color: white;
}
.negative-btn:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      #d32f2f,
      #f44336);
}
.btn-icon {
  font-size: 2rem;
}
.btn-text {
  font-size: 1.1rem;
  font-weight: 700;
}
.btn-points {
  font-size: 0.8rem;
  opacity: 0.9;
  font-weight: 500;
}
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #6c757d;
}
@media (max-width: 480px) {
  .reputation-modal {
    padding: 1.5rem;
    margin: 1rem;
  }
  .rating-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  .rating-btn {
    min-width: 100%;
    padding: 1.25rem 1rem;
  }
}
.modal-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: 1000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.modal-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 1rem;
}
.modal-header h3 {
  margin: 0;
  color: #495057;
  font-size: 1.2rem;
  font-weight: 700;
}
.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0.5rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.close-btn:hover {
  background: #f8f9fa;
  color: #495057;
}
.modal-content {
  color: #495057;
  line-height: 1.6;
  font-size: 1rem;
}
.secondary-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.secondary-action-btn {
  background:
    linear-gradient(
      135deg,
      #ffc107,
      #ff9800);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
  flex: 1;
  min-width: 120px;
  max-width: 200px;
}
.secondary-action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}
.leaderboard-btn {
  background:
    linear-gradient(
      135deg,
      #17a2b8,
      #138496);
  box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}
.leaderboard-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
}
.ranking-guesses-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.ranking-card {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.ranking-chart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rank-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 15px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.rank-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.rank-position {
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 40px;
  text-align: center;
}
.rank-name {
  flex: 1;
  font-weight: 600;
  font-size: 1rem;
}
.rank-score {
  font-weight: 700;
  font-size: 1rem;
  color: #28a745;
}
.rank-item.first-place .rank-position {
  color: #ffd700;
}
.rank-item.second-place .rank-position {
  color: #c0c0c0;
}
.rank-item.third-place .rank-position {
  color: #cd7f32;
}
.rank-item.other-place .rank-position {
  color: #6c757d;
}
.guesses-card {
  background: #e3f2fd;
  border-radius: 20px;
  padding: 1.5rem;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .ranking-guesses-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .secondary-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  .secondary-action-btn {
    min-width: 100%;
    max-width: none;
  }
  .ranking-card,
  .guesses-card {
    padding: 1rem;
  }
  .rank-item {
    padding: 0.5rem 0.75rem;
    gap: 0.75rem;
  }
  .rank-position {
    min-width: 35px;
    font-size: 1rem;
  }
  .rank-name,
  .rank-score {
    font-size: 0.9rem;
  }
}
@media (max-width: 480px) {
}
@media (max-width: 480px) {
  .screen-content {
    padding: 0.5rem;
  }
  .content-center {
    gap: 1rem;
  }
  .round-summary-card {
    padding: 1.5rem;
  }
  .revealed-word {
    font-size: 1.5rem;
  }
  .winner-crown,
  .timeout-icon {
    font-size: 1.5rem;
  }
  .scoring-chart,
  .guesses-section {
    padding: 1rem;
  }
  .chart-title,
  .section-title {
    font-size: 1.1rem;
  }
  .player-info {
    font-size: 0.8rem;
  }
  .player-guess-card {
    padding: 0.75rem;
  }
  .action-section {
    flex-direction: column;
  }
  .next-round-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  .action-section {
    gap: 1rem;
  }
  .secondary-action-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}
@media (max-width: 767px) {
  .game-completion-section {
    margin: 15px 0;
    padding: 15px;
  }
  .completion-crown {
    font-size: 36px;
  }
  .completion-text {
    font-size: 18px;
  }
  .completion-subtext {
    font-size: 14px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .action-section {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  .next-round-button,
  .secondary-action-btn {
    flex: 1;
    max-width: 200px;
  }
}
@media (min-width: 769px) {
  .screen-content {
    max-width: 700px;
    padding: 1.5rem;
  }
  .content-center {
    gap: 2rem;
  }
  .round-summary-card {
    padding: 2.5rem;
  }
  .revealed-word {
    font-size: 2.5rem;
  }
  .action-section {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }
  .next-round-button,
  .secondary-action-btn {
    flex: 1;
    max-width: 250px;
  }
}

/* src/styles/pages/final-results.css */
.screen-content {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
  direction: rtl;
  background: white;
  min-height: 100vh;
  overflow-y: auto;
}
.content-center {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem 0 3rem 0;
}
.final-header {
  text-align: center;
  margin-bottom: 2rem;
}
.game-complete-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #af52de;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(175, 82, 222, 0.3);
}
.game-complete-subtitle {
  font-size: 1rem;
  color: #6c757d;
  margin: 0;
  opacity: 0.8;
}
.loading-section,
.error-section {
  text-align: center;
  padding: 3rem 1rem;
  background: #f8f9fa;
  border-radius: 20px;
  margin: 2rem 0;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #af52de;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.retry-btn {
  background: #af52de;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  margin-top: 1rem;
  transition: all 0.3s ease;
}
.retry-btn:hover {
  background: #9c4cd1;
  transform: translateY(-1px);
}
.winner-card {
  background:
    linear-gradient(
      135deg,
      #ffd700 0%,
      #ffed4e 100%);
  border-radius: 25px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
  margin-bottom: 1.5rem;
  border: 3px solid rgba(255, 215, 0, 0.6);
}
.crown-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: crown-bounce 2s ease-in-out infinite;
}
@keyframes crown-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.winner-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #b8860b;
  margin: 0 0 0.5rem 0;
}
.winner-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #8b4513;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.winner-score {
  font-size: 1.1rem;
  font-weight: 600;
  color: #8b4513;
  margin: 0;
}
.my-performance-card {
  background:
    linear-gradient(
      135deg,
      #17a2b8 0%,
      #007bff 100%);
  border-radius: 20px;
  padding: 1.5rem;
  color: white;
  margin-bottom: 1.5rem;
}
.card-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}
.performance-stats {
  display: flex;
  justify-content: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}
.stat-value {
  font-size: 1.3rem;
  font-weight: 700;
}
.final-leaderboard {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.leaderboard-item {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}
.leaderboard-item.champion {
  border-color: #ffd700;
  background:
    linear-gradient(
      135deg,
      #fff9c4 0%,
      #ffffff 100%);
  transform: scale(1.02);
}
.leaderboard-item.second-place {
  border-color: #c0c0c0;
  background:
    linear-gradient(
      135deg,
      #f5f5f5 0%,
      #ffffff 100%);
}
.leaderboard-item.third-place {
  border-color: #cd7f32;
  background:
    linear-gradient(
      135deg,
      #ffeaa7 0%,
      #ffffff 100%);
}
.rank-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.rank-position {
  font-size: 1rem;
  font-weight: 700;
  color: #af52de;
}
.player-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  margin-top: 0.25rem;
}
.score-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.total-score {
  font-size: 1.3rem;
  font-weight: 700;
  color: #28a745;
}
.performance-text {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.25rem;
}
.game-stats-card {
  background: #e9ecef;
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stat-box {
  background: white;
  border-radius: 15px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #af52de;
  margin-bottom: 0.25rem;
}
.stat-box .stat-label {
  font-size: 0.8rem;
  color: #6c757d;
  font-weight: 600;
}
.final-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.action-btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
.meanings-btn {
  background:
    linear-gradient(
      135deg,
      #ffc107 0%,
      #ff9800 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
.meanings-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}
.main-menu-btn {
  background:
    linear-gradient(
      135deg,
      #6c757d 0%,
      #495057 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}
.main-menu-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}
.meanings-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: 1000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.meanings-modal {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 1rem;
}
.modal-header h3 {
  margin: 0;
  color: #495057;
  font-size: 1.3rem;
}
.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0.25rem;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.close-btn:hover {
  background: #f8f9fa;
  color: #495057;
}
.words-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.word-item {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid #e9ecef;
}
.word-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.word-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: #af52de;
  margin: 0;
}
.round-info {
  background: #af52de;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.word-meaning {
  color: #495057;
  margin: 0 0 0.5rem 0;
  line-height: 1.5;
}
.revealer-info {
  color: #6c757d;
  font-size: 0.85rem;
  margin: 0;
  font-weight: 600;
}
@media (max-width: 480px) {
  .screen-content {
    padding: 0.75rem;
  }
  .game-complete-title {
    font-size: 1.5rem;
  }
  .winner-card {
    padding: 1.5rem;
  }
  .crown-icon {
    font-size: 2.5rem;
  }
  .winner-name {
    font-size: 1.5rem;
  }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .final-actions {
    gap: 0.75rem;
  }
  .action-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}

/* src/styles/pages/revealer.css */
.screen-content {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
  direction: rtl;
  background: white;
  min-height: 100vh;
  overflow-y: auto;
  position: relative;
}
.content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: calc(100vh - 2rem);
  padding: 2.5rem 0 2rem 0;
}
.results-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: #f8f9fa;
  color: #495057;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 1000;
}
.results-btn:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}
.timer-display {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #bbdefb;
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
.revealer-name-card {
  background: #fff3e0;
  color: #f57f17;
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  text-align: center;
  border: 2px solid #ffcc02;
  margin: 0.5rem 0;
  width: 100%;
  max-width: 350px;
}
.revealer-name-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.image-card {
  position: relative;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 16 / 9;
  min-height: 180px;
  background: #f5f5f5;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.base-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 17px;
  display: block;
  opacity: 0;
  transition: opacity 0.18s ease;
  position: relative;
  z-index: 1;
}
.base-image.loaded {
  opacity: 1;
}
.revealer-base-image.loaded {
  filter: grayscale(65%) brightness(0.9);
}
.reveal-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  pointer-events: none;
  background: transparent;
  z-index: 2;
}
.reveal-canvas.active {
  cursor: crosshair;
  pointer-events: all;
}
.instruction-text {
  font-size: 0.8rem;
  color: #6c757d;
  text-align: center;
  margin: 0.5rem 0;
  max-width: 320px;
  line-height: 1.4;
}
.reveal-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 0.6rem 2rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  transition: all 0.3s ease;
  margin: 0.5rem 0;
  position: relative;
}
.reveal-btn.active {
  background: #28a745;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
  animation: pulse-ready 1.5s ease-in-out infinite;
}
.reveal-btn:hover {
  transform: translateY(-1px);
}
.reveal-btn.active:hover {
  background: #218838;
}
@keyframes pulse-ready {
  0% {
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.6);
  }
  100% {
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
  }
}
.reveal-canvas.active {
  cursor: crosshair;
  pointer-events: all;
}
.instruction-text.single-click {
  color: #28a745;
  font-weight: 600;
  animation: text-pulse 1.5s ease-in-out infinite;
}
@keyframes text-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.guess-evaluation-card {
  width: 100%;
  max-width: 400px;
  margin: 1rem 0;
}
.evaluation-card {
  background: #e9ecef;
  padding: 1.2rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 2px solid #dee2e6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.current-guess {
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.guess-word {
  font-size: 1.2rem;
  font-weight: 700;
  color: #af52de;
  margin: 0 0 0.5rem 0;
}
.guess-info {
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0.25rem 0;
}
.queue-info {
  font-size: 0.8rem;
  color: #007bff;
  font-weight: 600;
  margin: 0.25rem 0;
  background: #e3f2fd;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  display: inline-block;
}
.evaluation-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.eval-btn {
  padding: 0.7rem;
  border: none;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.eval-btn.hot {
  background: #dc3545;
  color: white;
}
.eval-btn.cold {
  background: #6f42c1;
  color: white;
}
.eval-btn.synonym {
  background: #ffc107;
  color: #212529;
}
.eval-btn.correct-spelling {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  padding: 0.8rem;
  background: #28a745;
  color: white;
}
.eval-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.waiting-guesses {
  width: 100%;
  max-width: 350px;
  text-align: center;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 15px;
  border: 1px solid #dee2e6;
  margin: 1rem 0;
}
.waiting-guesses p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}
.game-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.leaderboard-btn {
  background:
    linear-gradient(
      135deg,
      #667eea 0%,
      #764ba2 100%);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}
.leaderboard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.leaderboard-btn .btn-icon {
  font-size: 1.1rem;
}
.leaderboard-btn .btn-text {
  font-size: 0.85rem;
}
@media (max-width: 480px) {
  .screen-content {
    padding: 0.5rem;
  }
  .content-center {
    gap: 0.8rem;
    padding: 3.5rem 0 1.5rem 0;
  }
  .image-card {
    height: 160px;
    max-width: 300px;
  }
  .results-btn {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }
  .timer-display {
    top: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
  }
  .revealer-name-card {
    padding: 0.6rem 1rem;
    max-width: 300px;
  }
  .revealer-name-card h3 {
    font-size: 0.9rem;
  }
  .reveal-btn {
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
  }
  .evaluation-card {
    padding: 1rem;
    gap: 0.8rem;
    max-width: 300px;
  }
  .guess-word {
    font-size: 1rem;
  }
  .evaluation-buttons {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .eval-btn {
    padding: 0.6rem;
    font-size: 0.8rem;
  }
  .eval-btn.correct-spelling {
    grid-column: 1;
    font-size: 0.7rem;
    padding: 0.7rem;
  }
  .instruction-text {
    font-size: 0.75rem;
    max-width: 280px;
  }
  .waiting-guesses {
    max-width: 300px;
    padding: 1rem;
  }
  .leaderboard-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
  }
  .leaderboard-btn .btn-icon {
    font-size: 1rem;
  }
  .leaderboard-btn .btn-text {
    font-size: 0.75rem;
  }
}

/* src/styles/pages/guesser.css */
.screen-content {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
  direction: rtl;
  background: white;
  min-height: 100vh;
  overflow-y: auto;
  position: relative;
}
.content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: calc(100vh - 2rem);
  padding: 2.5rem 0 2rem 0;
}
.results-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: #f8f9fa;
  color: #495057;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 1000;
}
.results-btn:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}
.timer-display {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #bbdefb;
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
.revealer-name-card {
  background: #fff3e0;
  color: #f57f17;
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  text-align: center;
  border: 2px solid #ffcc02;
  margin: 0.5rem 0;
}
.revealer-name-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.classification-card {
  background: #f8f9fa;
  padding: 0.8rem 1.5rem;
  border-radius: 15px;
  text-align: center;
  border: 1px solid #dee2e6;
  margin: 0.5rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 350px;
}
.classification-info {
  margin: 0;
  font-size: 0.85rem;
  color: #495057;
  font-weight: 500;
}
.image-card {
  position: relative;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 16 / 9;
  min-height: 180px;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.base-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 17px;
  display: block;
  opacity: 0;
  transition: opacity 0.18s ease;
  position: relative;
  z-index: 1;
}
.base-image.loaded {
  opacity: 0;
  filter: none;
}
.revealed-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  pointer-events: none;
  z-index: 2;
}
.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  border-radius: 17px;
}
.placeholder-content {
  text-align: center;
  color: #6c757d;
}
.placeholder-content p {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  font-weight: 500;
}
.waiting-animation {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}
.waiting-dot {
  width: 8px;
  height: 8px;
  background: #6c757d;
  border-radius: 50%;
  animation: waiting-pulse 1.5s ease-in-out infinite;
}
.waiting-dot:nth-child(2) {
  animation-delay: 0.3s;
}
.waiting-dot:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes waiting-pulse {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}
.revealed-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #28a745;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.revealed-preview-small {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 3px;
}
.my-guesses {
  width: 100%;
  max-width: 350px;
  margin: 1rem 0;
}
.my-guesses h4 {
  font-size: 0.9rem;
  color: #495057;
  margin: 0 0 0.8rem 0;
  text-align: center;
}
.guess-history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.guess-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  transition: all 0.3s ease;
}
.guess-item.correct {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}
.guess-item.hot {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}
.guess-item.cold {
  background: #d6d8db;
  border-color: #c6c8ca;
  color: #383d41;
}
.guess-item.synonym {
  background: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}
.guess-item.pending {
  background: #cce5ff;
  border-color: #b3d7ff;
  color: #004085;
}
.guess-word {
  font-weight: 600;
  font-size: 0.9rem;
}
.guess-status {
  font-size: 0.8rem;
  font-weight: 500;
}
.empty-history {
  width: 100%;
  max-width: 350px;
  text-align: center;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 15px;
  border: 1px solid #dee2e6;
  margin: 1rem 0;
}
.empty-history p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}
.control-buttons {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
.hint-btn {
  background: #af52de;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(175, 82, 222, 0.3);
  transition: all 0.3s ease;
}
.hint-btn:hover {
  background: #9639c4;
  transform: translateY(-1px);
}
.hint-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}
.hint-popup {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 300px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  direction: rtl;
}
.hint-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5ea;
}
.hint-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1c1c1e;
}
.hint-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f2f2f7;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  color: #8e8e93;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hint-close-btn:hover {
  background: #e5e5ea;
  color: #1c1c1e;
}
.hint-content {
  font-size: 16px;
  line-height: 1.5;
  color: #1c1c1e;
  margin-bottom: 20px;
  text-align: right;
  padding: 16px;
  background: #f2f2f7;
  border-radius: 12px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hint-ok-btn {
  width: 100%;
  padding: 14px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hint-ok-btn:hover {
  background: #0056d3;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.action-buttons {
  display: flex;
  gap: 0.8rem;
  width: 100%;
  max-width: 350px;
  margin: 1rem 0;
}
.guess-input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 2px solid #dee2e6;
  border-radius: 15px;
  font-size: 0.9rem;
  text-align: right;
  direction: rtl;
  background: white;
  transition: border-color 0.3s ease;
}
.guess-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.guess-input::placeholder {
  color: #6c757d;
}
.send-btn {
  padding: 0.8rem 1.5rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}
.send-btn:hover:not(:disabled) {
  background: #0056d3;
  transform: translateY(-1px);
}
.send-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.5;
}
.game-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.leaderboard-btn {
  background:
    linear-gradient(
      135deg,
      #667eea 0%,
      #764ba2 100%);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}
.leaderboard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.leaderboard-btn .btn-icon {
  font-size: 1.1rem;
}
.leaderboard-btn .btn-text {
  font-size: 0.85rem;
}
@media (max-width: 480px) {
  .screen-content {
    padding: 0.5rem;
  }
  .content-center {
    gap: 0.8rem;
    padding: 3.5rem 0 1.5rem 0;
  }
  .image-card {
    height: 160px;
    max-width: 300px;
  }
  .results-btn {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }
  .timer-display {
    top: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
  }
  .revealer-name-card {
    padding: 0.6rem 1rem;
  }
  .revealer-name-card h3 {
    font-size: 0.9rem;
  }
  .classification-card {
    padding: 0.6rem 1rem;
    max-width: 300px;
  }
  .classification-info {
    font-size: 0.8rem;
  }
  .my-guesses,
  .empty-history,
  .action-buttons {
    max-width: 300px;
  }
  .my-guesses h4 {
    font-size: 0.85rem;
  }
  .guess-item {
    padding: 0.5rem 0.8rem;
  }
  .guess-word {
    font-size: 0.85rem;
  }
  .guess-status {
    font-size: 0.75rem;
  }
  .hint-btn {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
  }
  .action-buttons {
    gap: 0.6rem;
  }
  .guess-input {
    padding: 0.7rem 0.8rem;
    font-size: 0.85rem;
  }
  .send-btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.85rem;
  }
  .leaderboard-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
  }
  .leaderboard-btn .btn-icon {
    font-size: 1rem;
  }
  .leaderboard-btn .btn-text {
    font-size: 0.75rem;
  }
}

/* src/styles/pages/game.css */
.game-container {
  padding: 1rem;
  direction: rtl;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.round-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--color-primary, #007bff);
  color: white;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.round-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0;
}
.timer {
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "Courier New", monospace;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
.role-info {
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.role-info.revealer-role {
  background: var(--color-success-light, #d4edda);
  border: 2px solid var(--color-success, #28a745);
}
.role-info.guesser-role {
  background: var(--color-info-light, #d1ecf1);
  border: 2px solid var(--color-info, #17a2b8);
}
.role-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: var(--color-text-primary, #333);
}
.classification-info {
  font-size: 0.9rem;
  color: var(--color-text-secondary, #666);
  margin: 0;
}
.game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.revealer-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.image-container {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-background-light, #f8f9fa);
  border-radius: 8px;
  margin-bottom: 1rem;
  min-height: 300px;
}
.game-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}
.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem;
  text-align: center;
  border-radius: 0 0 8px 8px;
}
.reveal-tools {
  background: var(--color-background-light, #f8f9fa);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  color: var(--color-text-secondary, #666);
}
.guesser-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.revealed-image-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-background-light, #f8f9fa);
  border-radius: 8px;
  margin-bottom: 1rem;
  min-height: 300px;
}
.image-placeholder {
  text-align: center;
  color: var(--color-text-secondary, #666);
  padding: 2rem;
}
.guess-section {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.guess-input {
  flex: 1;
  padding: 0.75rem;
  border: 2px solid var(--color-border, #ddd);
  border-radius: 4px;
  font-size: 1rem;
  text-align: right;
  direction: rtl;
}
.guess-input:focus {
  outline: none;
  border-color: var(--color-primary, #007bff);
}
.guess-submit-btn {
  padding: 0.75rem 1.5rem;
  background: var(--color-primary, #007bff);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}
.guess-submit-btn:hover {
  background: var(--color-primary-dark, #0056b3);
}
.hints-section {
  text-align: center;
}
.hint-request-btn {
  padding: 0.5rem 1rem;
  background: var(--color-warning, #ffc107);
  color: var(--color-text-primary, #333);
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s;
}
.hint-request-btn:hover {
  background: var(--color-warning-dark, #e0a800);
}
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50vh;
  text-align: center;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border, #ddd);
  border-top: 4px solid var(--color-primary, #007bff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.test-controls {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-background-light, #f0f0f0);
  border-radius: 8px;
  text-align: center;
}
.test-controls h4 {
  margin: 0 0 0.5rem 0;
  color: var(--color-text-secondary, #666);
}
.test-controls button {
  padding: 0.5rem 1rem;
  background: var(--color-primary, #007bff);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .game-container {
    padding: 0.5rem;
  }
  .round-header {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .round-title {
    font-size: 1rem;
  }
  .timer {
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
  }
  .role-info {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .revealed-image-area,
  .image-container {
    min-height: 200px;
  }
}

/* src/styles/utilities/helpers.css */
.hidden {
  display: none !important;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.w-auto {
  width: auto;
}
.h-auto {
  height: auto;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-dropdown {
  z-index: var(--z-dropdown);
}
.z-modal {
  z-index: var(--z-modal);
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.select-none {
  user-select: none;
  -webkit-user-select: none;
}
.border {
  border: 1px solid var(--color-border);
}
.border-0 {
  border: none;
}
.border-t {
  border-top: 1px solid var(--color-border);
}
.border-b {
  border-bottom: 1px solid var(--color-border);
}
.rounded {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-full {
  border-radius: var(--radius-full);
}
.shadow-none {
  box-shadow: none;
}
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-100 {
  opacity: 1;
}
.transform {
  transform: translateZ(0);
}
.translate-y-1 {
  transform: translateY(-4px);
}
.translate-y-2 {
  transform: translateY(-8px);
}
.scale-95 {
  transform: scale(0.95);
}
.scale-100 {
  transform: scale(1);
}
.scale-105 {
  transform: scale(1.05);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.focus-visible:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.mobile-only {
  display: block;
}
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}
.desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }
}
.transition-all {
  transition: all var(--transition-normal);
}
.transition-fast {
  transition: all var(--transition-fast);
}
.transition-slow {
  transition: all var(--transition-slow);
}
.transition-none {
  transition: none;
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@media print {
  .print-hidden {
    display: none !important;
  }
  .print-block {
    display: block !important;
  }
}

/* src/styles/utilities/animations.css */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}
.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}
.animate-fade-out {
  animation: fadeOut 0.3s ease-in;
}
.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out;
}
.animate-fade-in-down {
  animation: fadeInDown 0.5s ease-out;
}
.animate-slide-in-left {
  animation: slideInLeft 0.4s ease-out;
}
.animate-slide-in-right {
  animation: slideInRight 0.4s ease-out;
}
.animate-slide-out-left {
  animation: slideOutLeft 0.3s ease-in;
}
.animate-slide-out-right {
  animation: slideOutRight 0.3s ease-in;
}
.animate-scale-in {
  animation: scaleIn 0.3s ease-out;
}
.animate-scale-out {
  animation: scaleOut 0.3s ease-in;
}
.animate-bounce-in {
  animation: bounceIn 0.6s ease-out;
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}
.animate-shake {
  animation: shake 0.6s ease-in-out;
}
.animate-wiggle {
  animation: wiggle 1s ease-in-out;
}
.delay-75 {
  animation-delay: 75ms;
}
.delay-100 {
  animation-delay: 100ms;
}
.delay-150 {
  animation-delay: 150ms;
}
.delay-200 {
  animation-delay: 200ms;
}
.delay-300 {
  animation-delay: 300ms;
}
.delay-500 {
  animation-delay: 500ms;
}
.delay-700 {
  animation-delay: 700ms;
}
.delay-1000 {
  animation-delay: 1000ms;
}
.duration-75 {
  animation-duration: 75ms;
}
.duration-100 {
  animation-duration: 100ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-700 {
  animation-duration: 700ms;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s ease-in-out infinite;
}
.loading-spinner.white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}
.loading-spinner.large {
  width: 40px;
  height: 40px;
  border-width: 4px;
}
.loading-dots {
  display: inline-flex;
  gap: var(--spacing-xs);
}
.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 1.4s infinite both;
}
.loading-dot:nth-child(1) {
  animation-delay: 0s;
}
.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}
.hover-lift {
  transition: transform 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
}
.hover-scale {
  transition: transform 0.2s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}
.hover-glow {
  transition: box-shadow 0.2s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(0, 122, 255, 0.3);
}
.page-enter {
  animation: fadeInUp 0.5s ease-out;
}
.page-exit {
  animation: fadeOut 0.3s ease-in;
}
.modal-enter {
  animation: scaleIn 0.3s ease-out;
}
.modal-exit {
  animation: scaleOut 0.2s ease-in;
}
.click-feedback {
  transition: transform 0.1s ease;
}
.click-feedback:active {
  transform: scale(0.95);
}
.success-flash {
  animation: successPulse 0.6s ease-out;
}
@keyframes successPulse {
  0% {
    background-color: var(--color-surface);
    transform: scale(1);
  }
  50% {
    background-color: rgba(52, 199, 89, 0.2);
    transform: scale(1.02);
  }
  100% {
    background-color: var(--color-surface);
    transform: scale(1);
  }
}
.error-flash {
  animation: errorShake 0.6s ease-out;
}
@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
    border-color: var(--color-border);
  }
  25% {
    transform: translateX(-5px);
    border-color: var(--color-danger);
  }
  75% {
    transform: translateX(5px);
    border-color: var(--color-danger);
  }
}
.stagger-children > * {
  animation: fadeInUp 0.5s ease-out both;
}
.stagger-children > *:nth-child(1) {
  animation-delay: 0.1s;
}
.stagger-children > *:nth-child(2) {
  animation-delay: 0.2s;
}
.stagger-children > *:nth-child(3) {
  animation-delay: 0.3s;
}
.stagger-children > *:nth-child(4) {
  animation-delay: 0.4s;
}
.stagger-children > *:nth-child(5) {
  animation-delay: 0.5s;
}
.stagger-children > *:nth-child(6) {
  animation-delay: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .loading-spinner {
    animation: none;
    border: 2px solid var(--color-primary);
    border-top-color: transparent;
  }
  .loading-dot {
    animation: none;
    opacity: 0.6;
  }
  .hover-lift:hover,
  .hover-scale:hover {
    transform: none;
  }
}
.will-change-transform {
  will-change: transform;
}
.will-change-opacity {
  will-change: opacity;
}
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* src/styles/utilities/spacing.css */
.m-0 {
  margin: 0;
}
.m-xs {
  margin: var(--spacing-xs);
}
.m-sm {
  margin: var(--spacing-sm);
}
.m-md {
  margin: var(--spacing-md);
}
.m-lg {
  margin: var(--spacing-lg);
}
.m-xl {
  margin: var(--spacing-xl);
}
.m-2xl {
  margin: var(--spacing-2xl);
}
.m-3xl {
  margin: var(--spacing-3xl);
}
.m-4xl {
  margin: var(--spacing-4xl);
}
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}
.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}
.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}
.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}
.mx-xl {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}
.mx-2xl {
  margin-left: var(--spacing-2xl);
  margin-right: var(--spacing-2xl);
}
.mx-3xl {
  margin-left: var(--spacing-3xl);
  margin-right: var(--spacing-3xl);
}
.mx-4xl {
  margin-left: var(--spacing-4xl);
  margin-right: var(--spacing-4xl);
}
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}
.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}
.my-2xl {
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}
.my-3xl {
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}
.my-4xl {
  margin-top: var(--spacing-4xl);
  margin-bottom: var(--spacing-4xl);
}
.mt-0 {
  margin-top: 0;
}
.mt-xs {
  margin-top: var(--spacing-xs);
}
.mt-sm {
  margin-top: var(--spacing-sm);
}
.mt-md {
  margin-top: var(--spacing-md);
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}
.mt-2xl {
  margin-top: var(--spacing-2xl);
}
.mt-3xl {
  margin-top: var(--spacing-3xl);
}
.mt-4xl {
  margin-top: var(--spacing-4xl);
}
.mb-0 {
  margin-bottom: 0;
}
.mb-xs {
  margin-bottom: var(--spacing-xs);
}
.mb-sm {
  margin-bottom: var(--spacing-sm);
}
.mb-md {
  margin-bottom: var(--spacing-md);
}
.mb-lg {
  margin-bottom: var(--spacing-lg);
}
.mb-xl {
  margin-bottom: var(--spacing-xl);
}
.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}
.mb-3xl {
  margin-bottom: var(--spacing-3xl);
}
.mb-4xl {
  margin-bottom: var(--spacing-4xl);
}
.ml-0 {
  margin-left: 0;
}
.ml-xs {
  margin-left: var(--spacing-xs);
}
.ml-sm {
  margin-left: var(--spacing-sm);
}
.ml-md {
  margin-left: var(--spacing-md);
}
.ml-lg {
  margin-left: var(--spacing-lg);
}
.ml-xl {
  margin-left: var(--spacing-xl);
}
.ml-2xl {
  margin-left: var(--spacing-2xl);
}
.ml-3xl {
  margin-left: var(--spacing-3xl);
}
.ml-4xl {
  margin-left: var(--spacing-4xl);
}
.mr-0 {
  margin-right: 0;
}
.mr-xs {
  margin-right: var(--spacing-xs);
}
.mr-sm {
  margin-right: var(--spacing-sm);
}
.mr-md {
  margin-right: var(--spacing-md);
}
.mr-lg {
  margin-right: var(--spacing-lg);
}
.mr-xl {
  margin-right: var(--spacing-xl);
}
.mr-2xl {
  margin-right: var(--spacing-2xl);
}
.mr-3xl {
  margin-right: var(--spacing-3xl);
}
.mr-4xl {
  margin-right: var(--spacing-4xl);
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}
.mb-auto {
  margin-bottom: auto;
}
.p-0 {
  padding: 0;
}
.p-xs {
  padding: var(--spacing-xs);
}
.p-sm {
  padding: var(--spacing-sm);
}
.p-md {
  padding: var(--spacing-md);
}
.p-lg {
  padding: var(--spacing-lg);
}
.p-xl {
  padding: var(--spacing-xl);
}
.p-2xl {
  padding: var(--spacing-2xl);
}
.p-3xl {
  padding: var(--spacing-3xl);
}
.p-4xl {
  padding: var(--spacing-4xl);
}
.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}
.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}
.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}
.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}
.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}
.px-2xl {
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}
.px-3xl {
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
}
.px-4xl {
  padding-left: var(--spacing-4xl);
  padding-right: var(--spacing-4xl);
}
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}
.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}
.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}
.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}
.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}
.py-2xl {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}
.py-3xl {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}
.py-4xl {
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-4xl);
}
.pt-0 {
  padding-top: 0;
}
.pt-xs {
  padding-top: var(--spacing-xs);
}
.pt-sm {
  padding-top: var(--spacing-sm);
}
.pt-md {
  padding-top: var(--spacing-md);
}
.pt-lg {
  padding-top: var(--spacing-lg);
}
.pt-xl {
  padding-top: var(--spacing-xl);
}
.pt-2xl {
  padding-top: var(--spacing-2xl);
}
.pt-3xl {
  padding-top: var(--spacing-3xl);
}
.pt-4xl {
  padding-top: var(--spacing-4xl);
}
.pb-0 {
  padding-bottom: 0;
}
.pb-xs {
  padding-bottom: var(--spacing-xs);
}
.pb-sm {
  padding-bottom: var(--spacing-sm);
}
.pb-md {
  padding-bottom: var(--spacing-md);
}
.pb-lg {
  padding-bottom: var(--spacing-lg);
}
.pb-xl {
  padding-bottom: var(--spacing-xl);
}
.pb-2xl {
  padding-bottom: var(--spacing-2xl);
}
.pb-3xl {
  padding-bottom: var(--spacing-3xl);
}
.pb-4xl {
  padding-bottom: var(--spacing-4xl);
}
.pl-0 {
  padding-left: 0;
}
.pl-xs {
  padding-left: var(--spacing-xs);
}
.pl-sm {
  padding-left: var(--spacing-sm);
}
.pl-md {
  padding-left: var(--spacing-md);
}
.pl-lg {
  padding-left: var(--spacing-lg);
}
.pl-xl {
  padding-left: var(--spacing-xl);
}
.pl-2xl {
  padding-left: var(--spacing-2xl);
}
.pl-3xl {
  padding-left: var(--spacing-3xl);
}
.pl-4xl {
  padding-left: var(--spacing-4xl);
}
.pr-0 {
  padding-right: 0;
}
.pr-xs {
  padding-right: var(--spacing-xs);
}
.pr-sm {
  padding-right: var(--spacing-sm);
}
.pr-md {
  padding-right: var(--spacing-md);
}
.pr-lg {
  padding-right: var(--spacing-lg);
}
.pr-xl {
  padding-right: var(--spacing-xl);
}
.pr-2xl {
  padding-right: var(--spacing-2xl);
}
.pr-3xl {
  padding-right: var(--spacing-3xl);
}
.pr-4xl {
  padding-right: var(--spacing-4xl);
}
.space-y-0 > * + * {
  margin-top: 0;
}
.space-y-xs > * + * {
  margin-top: var(--spacing-xs);
}
.space-y-sm > * + * {
  margin-top: var(--spacing-sm);
}
.space-y-md > * + * {
  margin-top: var(--spacing-md);
}
.space-y-lg > * + * {
  margin-top: var(--spacing-lg);
}
.space-y-xl > * + * {
  margin-top: var(--spacing-xl);
}
.space-y-2xl > * + * {
  margin-top: var(--spacing-2xl);
}
.space-y-3xl > * + * {
  margin-top: var(--spacing-3xl);
}
.space-y-4xl > * + * {
  margin-top: var(--spacing-4xl);
}
.space-x-0 > * + * {
  margin-left: 0;
}
.space-x-xs > * + * {
  margin-left: var(--spacing-xs);
}
.space-x-sm > * + * {
  margin-left: var(--spacing-sm);
}
.space-x-md > * + * {
  margin-left: var(--spacing-md);
}
.space-x-lg > * + * {
  margin-left: var(--spacing-lg);
}
.space-x-xl > * + * {
  margin-left: var(--spacing-xl);
}
.space-x-2xl > * + * {
  margin-left: var(--spacing-2xl);
}
.space-x-3xl > * + * {
  margin-left: var(--spacing-3xl);
}
.space-x-4xl > * + * {
  margin-left: var(--spacing-4xl);
}
.-m-xs {
  margin: calc(-1 * var(--spacing-xs));
}
.-m-sm {
  margin: calc(-1 * var(--spacing-sm));
}
.-m-md {
  margin: calc(-1 * var(--spacing-md));
}
.-m-lg {
  margin: calc(-1 * var(--spacing-lg));
}
.-m-xl {
  margin: calc(-1 * var(--spacing-xl));
}
.-m-2xl {
  margin: calc(-1 * var(--spacing-2xl));
}
.-mt-xs {
  margin-top: calc(-1 * var(--spacing-xs));
}
.-mt-sm {
  margin-top: calc(-1 * var(--spacing-sm));
}
.-mt-md {
  margin-top: calc(-1 * var(--spacing-md));
}
.-mt-lg {
  margin-top: calc(-1 * var(--spacing-lg));
}
.-mt-xl {
  margin-top: calc(-1 * var(--spacing-xl));
}
.-mt-2xl {
  margin-top: calc(-1 * var(--spacing-2xl));
}
.-mb-xs {
  margin-bottom: calc(-1 * var(--spacing-xs));
}
.-mb-sm {
  margin-bottom: calc(-1 * var(--spacing-sm));
}
.-mb-md {
  margin-bottom: calc(-1 * var(--spacing-md));
}
.-mb-lg {
  margin-bottom: calc(-1 * var(--spacing-lg));
}
.-mb-xl {
  margin-bottom: calc(-1 * var(--spacing-xl));
}
.-mb-2xl {
  margin-bottom: calc(-1 * var(--spacing-2xl));
}
.-ml-xs {
  margin-left: calc(-1 * var(--spacing-xs));
}
.-ml-sm {
  margin-left: calc(-1 * var(--spacing-sm));
}
.-ml-md {
  margin-left: calc(-1 * var(--spacing-md));
}
.-ml-lg {
  margin-left: calc(-1 * var(--spacing-lg));
}
.-ml-xl {
  margin-left: calc(-1 * var(--spacing-xl));
}
.-ml-2xl {
  margin-left: calc(-1 * var(--spacing-2xl));
}
.-mr-xs {
  margin-right: calc(-1 * var(--spacing-xs));
}
.-mr-sm {
  margin-right: calc(-1 * var(--spacing-sm));
}
.-mr-md {
  margin-right: calc(-1 * var(--spacing-md));
}
.-mr-lg {
  margin-right: calc(-1 * var(--spacing-lg));
}
.-mr-xl {
  margin-right: calc(-1 * var(--spacing-xl));
}
.-mr-2xl {
  margin-right: calc(-1 * var(--spacing-2xl));
}
@media (max-width: 767px) {
  .sm\:m-xs {
    margin: var(--spacing-xs);
  }
  .sm\:m-sm {
    margin: var(--spacing-sm);
  }
  .sm\:m-md {
    margin: var(--spacing-md);
  }
  .sm\:p-xs {
    padding: var(--spacing-xs);
  }
  .sm\:p-sm {
    padding: var(--spacing-sm);
  }
  .sm\:p-md {
    padding: var(--spacing-md);
  }
  .sm\:mx-xs {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
  }
  .sm\:my-xs {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
  }
  .sm\:px-xs {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }
  .sm\:py-xs {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
}
@media (min-width: 768px) {
  .lg\:m-lg {
    margin: var(--spacing-lg);
  }
  .lg\:m-xl {
    margin: var(--spacing-xl);
  }
  .lg\:m-2xl {
    margin: var(--spacing-2xl);
  }
  .lg\:p-lg {
    padding: var(--spacing-lg);
  }
  .lg\:p-xl {
    padding: var(--spacing-xl);
  }
  .lg\:p-2xl {
    padding: var(--spacing-2xl);
  }
  .lg\:mx-lg {
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
  }
  .lg\:my-lg {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }
  .lg\:px-lg {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
  .lg\:py-lg {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
}

/* src/styles/vendor/tailwind-overrides.css */
button {
  background-color: transparent;
  background-image: none;
  padding: 0;
  line-height: inherit;
  color: inherit;
}
input,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: inherit;
}
.focus\:ring-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--color-primary-light);
  border-color: var(--color-primary);
}
.focus\:ring-danger:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2);
  border-color: var(--color-danger);
}
.focus\:ring-success:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
  border-color: var(--color-success);
}
.shadow-primary {
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}
.shadow-secondary {
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}
.shadow-success {
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
}
.shadow-danger {
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);
}
.shadow-purple {
  box-shadow: 0 4px 15px rgba(175, 82, 222, 0.3);
}
.shadow-info {
  box-shadow: 0 4px 15px rgba(90, 200, 250, 0.3);
}
.bg-gradient-primary {
  background:
    linear-gradient(
      135deg,
      var(--color-primary) 0%,
      var(--color-primary-hover) 100%);
}
.bg-gradient-secondary {
  background:
    linear-gradient(
      135deg,
      var(--color-secondary) 0%,
      #e6830c 100%);
}
.bg-gradient-success {
  background:
    linear-gradient(
      135deg,
      var(--color-success) 0%,
      #2aa14a 100%);
}
.bg-gradient-danger {
  background:
    linear-gradient(
      135deg,
      var(--color-danger) 0%,
      #d12b20 100%);
}
.bg-gradient-app {
  background:
    linear-gradient(
      135deg,
      #f8fafc 0%,
      var(--color-background) 100%);
}
.border-primary {
  border-color: var(--color-primary);
}
.border-secondary {
  border-color: var(--color-secondary);
}
.border-success {
  border-color: var(--color-success);
}
.border-danger {
  border-color: var(--color-danger);
}
.border-warning {
  border-color: var(--color-warning);
}
.border-info {
  border-color: var(--color-info);
}
.border-light {
  border-color: var(--color-border);
}
.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-success {
  color: var(--color-success);
}
.text-danger {
  color: var(--color-danger);
}
.text-warning {
  color: var(--color-warning);
}
.text-info {
  color: var(--color-info);
}
.text-muted {
  color: var(--color-text-secondary);
}
.text-light {
  color: var(--color-text-light);
}
.bg-primary {
  background-color: var(--color-primary);
}
.bg-primary-light {
  background-color: var(--color-primary-light);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg-secondary-light {
  background-color: var(--color-secondary-light);
}
.bg-success {
  background-color: var(--color-success);
}
.bg-danger {
  background-color: var(--color-danger);
}
.bg-warning {
  background-color: var(--color-warning);
}
.bg-info {
  background-color: var(--color-info);
}
.bg-surface {
  background-color: var(--color-surface);
}
.bg-app {
  background-color: var(--color-background);
}
.hover\:bg-primary-hover:hover {
  background-color: var(--color-primary-hover);
}
.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg);
}
.hover\:shadow-primary:hover {
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}
.hover\:lift:hover {
  transform: translateY(-2px);
}
.hover\:scale:hover {
  transform: scale(1.02);
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-gray:disabled {
  background-color: var(--color-text-light);
}
.disabled\:shadow-none:disabled {
  box-shadow: none;
}
.disabled\:transform-none:disabled {
  transform: none;
}
.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.rtl .ml-auto {
  margin-left: 0;
  margin-right: auto;
}
.rtl .mr-auto {
  margin-right: 0;
  margin-left: auto;
}
.rtl .pl-md {
  padding-left: 0;
  padding-right: var(--spacing-md);
}
.rtl .pr-md {
  padding-right: 0;
  padding-left: var(--spacing-md);
}
@media (max-width: 767px) {
  .sm\:text-xs {
    font-size: var(--font-size-xs);
  }
  .sm\:text-sm {
    font-size: var(--font-size-sm);
  }
  .sm\:text-base {
    font-size: var(--font-size-base);
  }
  .sm\:shadow-sm {
    box-shadow: var(--shadow-sm);
  }
  .sm\:rounded-lg {
    border-radius: var(--radius-lg);
  }
}
@media (min-width: 768px) {
  .lg\:text-lg {
    font-size: var(--font-size-lg);
  }
  .lg\:text-xl {
    font-size: var(--font-size-xl);
  }
  .lg\:text-2xl {
    font-size: var(--font-size-2xl);
  }
  .lg\:shadow-lg {
    box-shadow: var(--shadow-lg);
  }
  .lg\:rounded-xl {
    border-radius: var(--radius-xl);
  }
}
@media print {
  .print\:hidden {
    display: none !important;
  }
  .print\:block {
    display: block !important;
  }
  .print\:text-black {
    color: #000 !important;
  }
  .print\:bg-white {
    background-color: #fff !important;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.focus-visible\:ring:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.focus-visible\:ring-primary:focus-visible {
  outline-color: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: #1a1a1a;
  }
  .dark\:text-gray-100 {
    color: #f5f5f5;
  }
  .dark\:border-gray-700 {
    border-color: #404040;
  }
}
@media (prefers-contrast: high) {
  .high-contrast\:border-2 {
    border-width: 2px;
  }
  .high-contrast\:border-black {
    border-color: #000;
  }
  .high-contrast\:bg-white {
    background-color: #fff;
  }
  .high-contrast\:text-black {
    color: #000;
  }
}

/* src/styles/styles.css */
.app-version-footer {
  flex-shrink: 0;
  width: 100%;
  padding: 0.25rem 0 max(0.5rem, env(safe-area-inset-bottom));
  color: rgba(73, 80, 87, 0.65);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.session-control-bar {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 0.35rem 1rem 0;
}
.session-control-button {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #334155;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 36px;
  padding: 0.45rem 1rem;
}
.session-control-button.danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}
.session-control-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.session-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 35, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 80;
}
.session-confirm-modal {
  width: min(100%, 420px);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4f8ff 100%);
  box-shadow: 0 30px 70px rgba(0, 41, 102, 0.24);
  border: 1px solid rgba(100, 149, 237, 0.18);
  padding: 24px 20px 20px;
  text-align: center;
}
.session-confirm-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #e7f1ff;
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.session-confirm-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.session-confirm-modal h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--color-text-primary);
}
.session-confirm-modal p {
  margin: 0 0 20px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.session-confirm-actions {
  display: flex;
  gap: 12px;
}
.session-confirm-button {
  flex: 1;
  border: none;
  border-radius: 18px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.session-confirm-button.cancel {
  background: #eef3fb;
  color: var(--color-text-primary);
}
.session-confirm-button.confirm {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 122, 255, 0.25);
}
.session-notice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 12, 23, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 90;
}
.session-notice-modal {
  width: min(100%, 380px);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fbff 100%);
  border: 1px solid rgba(59, 130, 246, 0.16);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.22);
  padding: 22px 18px 18px;
  text-align: center;
}
.session-notice-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #e8f3ff;
  color: #0f6fd6;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.session-notice-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.session-notice-modal h3 {
  margin: 0 0 8px;
  color: var(--color-text-primary);
  font-size: 20px;
}
.session-notice-modal p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}
@media (max-width: 767px) {
  .session-confirm-modal {
    padding: 22px 16px 18px;
  }
  .session-confirm-actions {
    flex-direction: column;
  }
  .session-notice-modal {
    padding: 20px 16px 16px;
  }
}
*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.hidden {
  display: none;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.content-center {
  align-content: center;
}
.border {
  border-width: 1px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */