.game-tooltip-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-tooltip);
  pointer-events: none;
}

.game-tooltip {
  position: fixed;
  max-width: min(220px, calc(100vw - 16px));
  padding: 6px 8px;
  border: 2px solid var(--game-border-dark);
  border-radius: var(--game-radius-small);
  background: var(--game-forest-950);
  color: #fff7d9;
  box-shadow: 2px 2px 0 var(--game-hard-shadow);
  font: 800 11px/1.4 var(--game-font-ui);
  letter-spacing: .02em;
  white-space: normal;
}

.game-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-dialog-backdrop) !important;
  align-items: center;
  justify-content: center;
  padding: 20px !important;
  background: rgba(18, 50, 39, .48) !important;
  backdrop-filter: blur(1px) !important;
}

.game-overlay:not(.hidden) { display: flex; }

.game-dialog {
  position: relative;
  z-index: var(--z-dialog);
  width: min(100%, 640px);
  max-height: min(86vh, 760px);
  overflow: auto;
  padding: 0 !important;
  border: 4px solid var(--game-wood-800) !important;
  outline: 3px solid var(--game-wood-400);
  border-radius: var(--game-radius-medium) !important;
  background: var(--game-cream-100) !important;
  color: var(--game-text) !important;
  box-shadow: inset 0 0 0 2px var(--game-gold-300), 6px 7px 0 rgba(47, 31, 23, .72) !important;
  font-family: var(--game-font-reading);
}

#projectPanel > .game-dialog,
#settingsModal > .game-dialog,
#accountModal > .game-dialog,
#onboardingModal > .game-dialog,
#customApiModal > .game-dialog {
  border: 4px solid var(--game-wood-800) !important;
  border-radius: var(--game-radius-medium) !important;
  background: var(--game-cream-100) !important;
  box-shadow: inset 0 0 0 2px var(--game-gold-300), 6px 7px 0 rgba(47, 31, 23, .72) !important;
}

.game-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 13px 16px;
  border-bottom: 4px solid var(--game-wood-800);
  background: var(--game-forest-800);
  color: #fff7d9;
}

.game-dialog__title { color: #fff7d9 !important; font: 900 18px/1.25 var(--game-font-ui) !important; }
.game-dialog__subtitle { margin-top: 4px; color: var(--game-cream-200) !important; font: 700 12px/1.4 var(--game-font-ui) !important; }
.game-dialog__body { padding: 16px; }
.game-dialog__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px 17px; border-top: 3px solid var(--game-wood-600); }

.game-dialog__close,
.game-icon-button {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 3px solid var(--game-wood-800) !important;
  border-radius: var(--game-radius-small) !important;
  background: var(--game-cream-200) !important;
  color: var(--game-forest-950) !important;
  box-shadow: inset 0 0 0 2px #fff0b8, 0 3px 0 var(--game-hard-shadow) !important;
  cursor: pointer;
}

.game-primary-button,
.game-secondary-button,
.game-danger-button {
  min-height: 42px;
  padding: 8px 14px !important;
  border: 3px solid var(--game-wood-800) !important;
  border-radius: var(--game-radius-small) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 4px 0 var(--game-hard-shadow) !important;
  font: 900 13px/1.2 var(--game-font-ui) !important;
  cursor: pointer;
}
.game-primary-button { background: var(--game-forest-700) !important; color: #fff7d9 !important; }
.game-secondary-button { background: var(--game-cream-200) !important; color: var(--game-forest-950) !important; }
.game-danger-button { background: var(--game-danger) !important; color: #fff7d9 !important; border-color: #6f2f2b !important; }
.game-primary-button:active, .game-secondary-button:active, .game-danger-button:active, .game-icon-button:active, .game-dialog__close:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 2px 0 var(--game-hard-shadow) !important; }
.game-primary-button:disabled, .game-secondary-button:disabled, .game-danger-button:disabled, .game-icon-button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); transform: none; }

.game-dialog :is(input:not([type="hidden"]), select, textarea),
.game-field,
.game-select {
  border: 3px solid var(--game-wood-600) !important;
  border-radius: var(--game-radius-small) !important;
  background: var(--game-cream-50) !important;
  color: var(--game-text) !important;
  box-shadow: inset 2px 2px 0 rgba(77, 52, 40, .12) !important;
  font-family: var(--game-font-reading) !important;
}
.game-dialog :is(input, select, textarea):focus-visible,
.game-field:focus-visible,
.game-select:focus-visible,
.game-icon-button:focus-visible,
.game-dialog__close:focus-visible,
.game-primary-button:focus-visible,
.game-secondary-button:focus-visible,
.game-danger-button:focus-visible { outline: 3px solid var(--game-focus) !important; outline-offset: 2px; box-shadow: var(--game-focus-ring) !important; }

.game-dialog .game-dialog__section {
  padding: 12px;
  border: 3px solid var(--game-wood-600) !important;
  border-radius: var(--game-radius-small) !important;
  background: var(--game-cream-50) !important;
  color: var(--game-text) !important;
}

.game-dialog input[type="range"] { height: 10px; padding: 0; border: 2px solid var(--game-wood-800) !important; background: linear-gradient(90deg, var(--game-forest-600), var(--game-gold-300)) !important; accent-color: var(--game-gold-500); }
.game-dialog input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border: 3px solid var(--game-wood-800); border-radius: 1px; background: var(--game-gold-300); }

.game-popover {
  position: fixed !important;
  z-index: var(--z-popover) !important;
  width: min(310px, calc(100vw - 16px)) !important;
  padding: 0 !important;
  overflow: visible;
  border: 3px solid var(--game-wood-800) !important;
  outline: 2px solid var(--game-wood-400);
  border-radius: var(--game-radius-medium) !important;
  background: var(--game-cream-100) !important;
  color: var(--game-text) !important;
  box-shadow: inset 0 0 0 2px var(--game-gold-300), 4px 5px 0 rgba(47, 31, 23, .72) !important;
  font-family: var(--game-font-reading);
}
#vocabPopup.game-popover,
#studyStatsPanel.game-popover {
  border: 3px solid var(--game-wood-800) !important;
  border-radius: var(--game-radius-medium) !important;
  background: var(--game-cream-100) !important;
  box-shadow: inset 0 0 0 2px var(--game-gold-300), 4px 5px 0 rgba(47, 31, 23, .72) !important;
}
.game-popover__header { padding: 12px 13px 9px; border-bottom: 3px solid var(--game-wood-600); background: var(--game-forest-800); color: #fff7d9; }
.game-popover__body { padding: 12px 13px; }
.game-popover__actions { display: grid; gap: 8px; padding: 0 13px 14px; }
.game-popover__badge { display: inline-flex; padding: 4px 7px; border: 2px solid var(--game-wood-600) !important; border-radius: 2px !important; background: var(--game-gold-300) !important; color: var(--game-forest-950) !important; font: 900 10px/1 var(--game-font-ui); }
.game-word-popover .vocab-popup-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.game-word-popover .vocab-popup-meta > span { padding: 7px 5px; border: 2px solid var(--game-wood-600); background: var(--game-cream-50); text-align: center; }
.game-word-popover .vocab-popup-meta small { display: block; color: var(--game-muted); font: 800 9px/1 var(--game-font-ui); }
.game-word-popover .vocab-popup-meta strong { display: block; margin-top: 5px; color: var(--game-forest-900); font: 900 12px/1 var(--game-font-ui); }
.game-word-popover .popup-arrow { display: none !important; }

#accountModal > .game-dialog,
#onboardingModal > .game-dialog,
#customApiModal > .game-dialog { padding: 18px !important; }
#accountModal .game-dialog h2,
#onboardingModal .game-dialog h2,
#customApiModal .game-dialog h2 { color: var(--game-forest-950) !important; font-family: var(--game-font-ui) !important; }
#accountModal .game-dialog > div:first-child,
#onboardingModal .game-dialog > div:first-child,
#customApiModal .game-dialog > div:first-child { padding-bottom: 12px; border-bottom: 3px solid var(--game-wood-600); }
#accountModal :is(#accountLoginBtn, #closeAccountBtn),
#onboardingModal #startBtn,
#customApiModal :is(#saveCustomApiBtn, #closeCustomApiBtn) { border: 3px solid var(--game-wood-800) !important; border-radius: 2px !important; background: var(--game-forest-700) !important; color: #fff7d9 !important; box-shadow: 0 4px 0 var(--game-hard-shadow) !important; }
#projectPanel .topic-picker,
#projectPanel #studyPanel { border: 3px solid var(--game-wood-600) !important; border-radius: 2px !important; background: var(--game-cream-50) !important; }
#settingsModal #wordDensityLabel { border: 2px solid var(--game-wood-600); border-radius: 2px !important; background: var(--game-gold-300) !important; color: var(--game-forest-950) !important; }
#settingsModal #saveSettingsBtn.game-primary-button,
#projectPanel #newProjectBtn.game-primary-button,
#vocabPopup #popupActionBtn.game-primary-button,
#accountModal #accountLoginBtn,
#onboardingModal #startBtn,
#customApiModal #saveCustomApiBtn { background: var(--game-forest-700) !important; color: #fff7d9 !important; }
#projectPanel #deleteProjectBtn.game-danger-button { background: var(--game-danger) !important; color: #fff7d9 !important; }
#vocabPopup #popupAdoptBtn.game-secondary-button,
#projectPanel #deepStudyBtn.game-secondary-button,
#settingsModal #accountSwitchBtn.game-secondary-button { background: var(--game-cream-200) !important; color: var(--game-forest-950) !important; }

.game-stats-popover { width: min(320px, calc(100vw - 16px)) !important; padding: 13px !important; }
.game-stats-popover #studyHeatmap { display: grid; grid-template-columns: repeat(11, 1fr) !important; gap: 5px; }
.game-stats-popover .study-day { aspect-ratio: 1; border: 2px solid var(--game-wood-600); border-radius: 1px; background: #cbd6b9; }
.game-stats-popover .study-day.is-active { background: var(--game-forest-600); }
.game-stats-popover .study-day.is-today { outline: 2px solid var(--game-gold-300); outline-offset: 1px; }

.game-confirm-overlay { z-index: var(--z-critical) !important; }
.game-confirm-dialog { width: min(430px, 100%); }

@media (max-width: 640px) {
  .game-overlay { align-items: flex-end; padding: 10px !important; }
  .game-dialog { width: 100% !important; max-height: 88dvh; }
  .game-dialog__header { min-height: 58px; padding: 11px 12px; }
  .game-dialog__body { padding: 12px; }
  .game-popover { width: min(340px, calc(100vw - 16px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .game-overlay { backdrop-filter: none !important; }
  .game-dialog, .game-popover, .game-tooltip { animation: none !important; transition: none !important; }
}