/* ============================================================
   MahjongSensei — base.css
   Core design tokens, layout system, components, utilities.
   Themes override custom properties only; never override rules.
   ============================================================ */

/* ----------------------------------------------------------
   1. CUSTOM PROPERTIES (Design Tokens)
   ---------------------------------------------------------- */
:root {
  /* --- Colors (overridden by themes) --- */
  --color-bg:            #0f1f16;
  --color-surface:       #162a1e;
  --color-surface-alt:   #1c3226;
  --color-border:        #2a4a36;
  --color-border-light:  #22402e;

  --color-primary:       #3da878;
  --color-primary-hover: #4ebc8a;
  --color-primary-text:  #0f1f16;

  --color-secondary:       #d06848;
  --color-secondary-hover: #e07858;
  --color-secondary-text:  #0f1f16;

  --color-danger:        #cf5a5a;
  --color-danger-hover:  #e06a6a;
  --color-success:       #4aae6e;
  --color-warning:       #d4b060;

  --color-text:          #d8e0d8;
  --color-text-muted:    #88a08c;
  --color-text-inverse:  #0f1f16;

  /* --- Typography --- */
  --font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
    "Courier New", monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  2rem;      /* 32px */
  --fs-3xl:  2.5rem;    /* 40px */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  /* --- Spacing --- */
  --sp-1:  0.25rem;  /* 4px  */
  --sp-2:  0.5rem;   /* 8px  */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */

  /* --- Borders & Radii --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --border-width: 1px;

  /* --- Shadows --- */
  --shadow-sm:  0  1px  2px rgba(5, 15, 8, 0.20);
  --shadow-md:  0  2px  6px rgba(5, 15, 8, 0.26);
  --shadow-lg:  0  4px 12px rgba(5, 15, 8, 0.32);
  --shadow-xl:  0  8px 24px rgba(5, 15, 8, 0.40);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Z-index scale --- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* --- Layout --- */
  --nav-height:       56px;
  --bottom-nav-height: 56px;
  --sidebar-width:    300px;
  --max-content-width: 1200px;
}

/* ----------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100dvh;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal);
}

/* Subtle grain texture overlay — forest atmosphere */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

ul, ol { list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl);  }
h4 { font-size: var(--fs-lg);  }
h5 { font-size: var(--fs-md);  }
h6 { font-size: var(--fs-base); }

/* ----------------------------------------------------------
   3. LAYOUT
   ---------------------------------------------------------- */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: var(--nav-height);
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--sp-6);
}

.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-inline: var(--sp-6);
}

/* ----------------------------------------------------------
   4. NAVIGATION — Top Bar
   ---------------------------------------------------------- */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--sp-6);
  background-color: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-sticky);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  flex-shrink: 0;
}
.nav-logo img {
  width: 32px;
  height: 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
  color: var(--color-text);
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-hamburger span + span { margin-top: 5px; }

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  background-color: var(--color-surface);
  flex-direction: column;
  padding: var(--sp-6);
  gap: var(--sp-4);
  z-index: var(--z-overlay);
  overflow-y: auto;
}
.nav-mobile-menu.open {
  display: flex;
}
.nav-mobile-menu .nav-link {
  font-size: var(--fs-md);
  padding: var(--sp-3) var(--sp-4);
}

/* ----------------------------------------------------------
   5. BOTTOM NAV (mobile only)
   ---------------------------------------------------------- */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background-color: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border-light);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
  z-index: var(--z-sticky);
  align-items: center;
  justify-content: space-around;
  padding-inline: var(--sp-2);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}
.bottom-nav-item svg,
.bottom-nav-item img {
  width: 22px;
  height: 22px;
}
.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--color-primary);
}

/* ----------------------------------------------------------
   6. THEME TOGGLE
   ---------------------------------------------------------- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  border: var(--border-width) solid var(--color-border-light);
  cursor: pointer;
  color: var(--color-text);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.theme-toggle:hover {
  background: var(--color-border-light);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* ----------------------------------------------------------
   7. CARDS
   ---------------------------------------------------------- */
.card {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.card--flat {
  box-shadow: none;
}

.card--interactive {
  cursor: pointer;
}
.card--interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.card__body {
  color: var(--color-text);
}

.card__footer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--border-width) solid var(--color-border-light);
}

/* ----------------------------------------------------------
   8. BUTTONS
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}
.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

/* Secondary */
.btn--secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* Ghost */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-muted);
}
.btn--ghost:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

/* Danger */
.btn--danger {
  background-color: var(--color-danger);
  color: var(--color-text-inverse);
}
.btn--danger:hover {
  background-color: var(--color-danger-hover);
}

/* Sizes */
.btn--sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
}
.btn--lg {
  padding: var(--sp-3) var(--sp-8);
  font-size: var(--fs-base);
}

/* Icon-only */
.btn--icon {
  padding: var(--sp-2);
  border-radius: var(--radius-full);
}

/* ----------------------------------------------------------
   9. FORM CONTROLS
   ---------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-normal);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(224, 115, 86, 0.2);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
}

/* Checkbox / Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

/* ----------------------------------------------------------
   10. MODALS
   ---------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 85dvh;
  overflow-y: auto;
  transform: translateY(12px) scale(0.97);
  transition: transform var(--transition-normal);
}
.modal-backdrop.open .modal {
  transform: translateY(0) scale(1);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: var(--border-width) solid var(--color-border-light);
}
.modal__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.modal__close:hover { color: var(--color-text); }

.modal__body {
  padding: var(--sp-6);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: var(--border-width) solid var(--color-border-light);
}

/* ----------------------------------------------------------
   11. TOASTS
   ---------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: calc(var(--nav-height) + var(--sp-4));
  right: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  min-width: 280px;
  max-width: 420px;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition:
    transform var(--transition-normal),
    opacity var(--transition-normal);
}
.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-danger);  }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info    { border-left: 3px solid var(--color-secondary); }

.toast__dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--sp-1);
}

/* ----------------------------------------------------------
   12. BADGES & TAGS
   ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  line-height: 1;
}
.badge--primary  { background: var(--color-primary); color: var(--color-primary-text); }
.badge--success  { background: var(--color-success); color: #fff; }
.badge--warning  { background: var(--color-warning); color: #fff; }
.badge--danger   { background: var(--color-danger);  color: #fff; }
.badge--muted    { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* ----------------------------------------------------------
   13. PROGRESS BAR
   ---------------------------------------------------------- */
.progress {
  height: 8px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ----------------------------------------------------------
   14. UTILITY CLASSES
   ---------------------------------------------------------- */

/* --- Display --- */
.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-flex    { display: flex !important; }
.d-grid    { display: grid !important; }
.d-inline  { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }

/* --- Flex --- */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* --- Gap --- */
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* --- Grid shortcuts --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* --- Margin --- */
.m-0   { margin: 0; }
.m-auto { margin: auto; }
.mt-1  { margin-top: var(--sp-1); }
.mt-2  { margin-top: var(--sp-2); }
.mt-3  { margin-top: var(--sp-3); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-1  { margin-bottom: var(--sp-1); }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-3  { margin-bottom: var(--sp-3); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

/* --- Padding --- */
.p-0  { padding: 0; }
.p-2  { padding: var(--sp-2); }
.p-3  { padding: var(--sp-3); }
.p-4  { padding: var(--sp-4); }
.p-6  { padding: var(--sp-6); }
.p-8  { padding: var(--sp-8); }
.px-4 { padding-inline: var(--sp-4); }
.px-6 { padding-inline: var(--sp-6); }
.py-2 { padding-block: var(--sp-2); }
.py-4 { padding-block: var(--sp-4); }
.py-6 { padding-block: var(--sp-6); }

/* --- Text --- */
.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md   { font-size: var(--fs-md); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }
.text-2xl  { font-size: var(--fs-2xl); }
.text-3xl  { font-size: var(--fs-3xl); }

.font-normal   { font-weight: var(--fw-normal); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Width / Height --- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100dvh; }

/* --- Border --- */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { 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); }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* --- Visibility --- */
.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;
}

/* --- Cursor --- */
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }

/* ----------------------------------------------------------
   15. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------- */

/* Tablet: <= 1024px */
@media (max-width: 1024px) {
  :root {
    --nav-height: 52px;
  }

  .main-content {
    padding: var(--sp-4);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hide-tablet { display: none !important; }
}

/* Mobile: <= 768px */
@media (max-width: 768px) {
  :root {
    --nav-height: 48px;
  }

  .main-content {
    padding: var(--sp-3);
    padding-bottom: calc(var(--bottom-nav-height) + var(--sp-4));
  }

  /* Show hamburger, hide desktop links */
  .nav-hamburger { display: flex; flex-direction: column; gap: 0; }
  .nav-links     { display: none; }

  /* Show bottom nav */
  .bottom-nav { display: flex; }

  /* Responsive grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Card compact on mobile */
  .card {
    padding: var(--sp-4);
  }

  .modal {
    max-width: 100%;
    margin: var(--sp-3);
    max-height: 90dvh;
  }

  /* Toasts go full width on mobile */
  .toast-container {
    left: var(--sp-3);
    right: var(--sp-3);
  }
  .toast {
    min-width: auto;
    max-width: 100%;
  }

  .hide-mobile { display: none !important; }
}

/* Desktop-only helpers */
@media (min-width: 769px) {
  .show-mobile-only { display: none !important; }
}
@media (min-width: 1025px) {
  .show-tablet-only { display: none !important; }
}

/* ----------------------------------------------------------
   16. GRADE INDICATORS — color + icon/pattern for color-blind users
   ---------------------------------------------------------- */

/*
 * Each grade class sets:
 *   --grade-color  : the semantic color
 *   --grade-symbol : a text symbol shown in the ::before pseudo-element
 *
 * This ensures color-blind users get both a color cue AND a distinct symbol.
 * Use these classes on any element that communicates move quality.
 */

.grade-brilliant {
  --grade-color:  #00b5ad;  /* teal */
  --grade-symbol: '✦';
  color: var(--grade-color);
}
.grade-brilliant::before {
  content: var(--grade-symbol);
  margin-right: 0.25em;
  font-style: normal;
}

.grade-best {
  --grade-color:  #27ae60;  /* green */
  --grade-symbol: '●';
  color: var(--grade-color);
}
.grade-best::before {
  content: var(--grade-symbol);
  margin-right: 0.25em;
  font-style: normal;
}

.grade-good {
  --grade-color:  #6abf69;  /* light green */
  --grade-symbol: '▲';
  color: var(--grade-color);
}
.grade-good::before {
  content: var(--grade-symbol);
  margin-right: 0.25em;
  font-style: normal;
}

.grade-inaccuracy {
  --grade-color:  #d4a942;  /* yellow */
  --grade-symbol: '!';
  color: var(--grade-color);
}
.grade-inaccuracy::before {
  content: var(--grade-symbol);
  margin-right: 0.25em;
  font-style: normal;
}

.grade-mistake {
  --grade-color:  #e67e22;  /* orange */
  --grade-symbol: '!!';
  color: var(--grade-color);
}
.grade-mistake::before {
  content: var(--grade-symbol);
  margin-right: 0.25em;
  font-style: normal;
}

.grade-blunder {
  --grade-color:  #d94040;  /* red */
  --grade-symbol: '✗';
  color: var(--grade-color);
}
.grade-blunder::before {
  content: var(--grade-symbol);
  margin-right: 0.25em;
  font-style: normal;
}

/* ----------------------------------------------------------
   17. HIGH CONTRAST MODE
   Grade labels get explicit text so color alone is never the sole signal.
   Toggle by adding .high-contrast to <body> or <html>.
   ---------------------------------------------------------- */
.high-contrast .grade-brilliant::after { content: ' (Brilliant)'; font-size: 0.8em; font-weight: var(--fw-semibold); }
.high-contrast .grade-best::after      { content: ' (Best)';      font-size: 0.8em; font-weight: var(--fw-semibold); }
.high-contrast .grade-good::after      { content: ' (Good)';      font-size: 0.8em; font-weight: var(--fw-semibold); }
.high-contrast .grade-inaccuracy::after { content: ' (Inaccuracy)'; font-size: 0.8em; font-weight: var(--fw-semibold); }
.high-contrast .grade-mistake::after   { content: ' (Mistake)';   font-size: 0.8em; font-weight: var(--fw-semibold); }
.high-contrast .grade-blunder::after   { content: ' (Blunder)';   font-size: 0.8em; font-weight: var(--fw-semibold); }

/* Badges and color-coded status elements also get stronger borders */
.high-contrast .badge--success { outline: 2px solid currentColor; }
.high-contrast .badge--warning { outline: 2px solid currentColor; }
.high-contrast .badge--danger  { outline: 2px solid currentColor; }
.high-contrast .toast--success { border-left-width: 6px; }
.high-contrast .toast--error   { border-left-width: 6px; }
.high-contrast .toast--warning { border-left-width: 6px; }
.high-contrast .toast--info    { border-left-width: 6px; }

/* ----------------------------------------------------------
   18. REDUCED MOTION
   Disable all transitions and animations for users who prefer it.
   ---------------------------------------------------------- */
@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;
  }

  /* Prevent tile hover lift */
  .card--interactive:hover {
    transform: none;
  }

  /* Keep modal/toast visible but skip enter animations */
  .modal-backdrop.open .modal {
    transform: none;
  }
  .toast.show {
    transform: none;
  }
}

/* ----------------------------------------------------------
   19. TOUCH TARGET ENFORCEMENT (min 44×44px)
   Any button, link, or interactive control smaller than 44px
   gets a minimum tap area via padding compensation.
   ---------------------------------------------------------- */

/* Ensure all interactive controls meet 44×44px minimum */
button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
select,
a {
  min-height: 44px;
  min-width: 44px;
}

/* Exception: inline text links inside paragraphs shouldn't force block-level size */
p a,
li a,
.prose a {
  min-height: unset;
  min-width:  unset;
}

/* Exception: game bar buttons are compact and must fit within 30px bars */
.game-top-bar button,
.game-top-bar [role="button"],
.game-actions button,
.game-actions [role="button"],
.gc-btn,
.action-btn {
  min-height: unset;
  min-width: unset;
}

/* Small buttons (.btn--sm) get hidden hit-area expansion instead of visual growth */
.btn--sm {
  position: relative;
}
.btn--sm::after {
  content: '';
  position: absolute;
  inset: -8px;  /* expands tap area 8px on each side without changing visual size */
}

/* Nav items in the topbar already use padding; make sure they hit 44px tall */
.topbar__link {
  min-height: 44px;
}

/* Bottom nav items */
.bottom-nav-item {
  min-height: 44px;
  min-width:  44px;
}