/* ============================================================
   RESET & BASE
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   FONT: AEGYPTUS (local then CDN)
============================================================ */
@font-face {
  font-family: 'Aegyptus';
  src: url('/Aegyptus.otf') format('opentype'),
       url('https://cdn.jsdelivr.net/gh/mitsofis/Egyptian-keyboard@main/Aegyptus.otf') format('opentype');
}

/* Default: Aegyptus everywhere (hieroglyphs), with safe fallbacks */
html, body, :where(*, ::before, ::after) {
  font-family: 'Aegyptus', Arial, Helvetica, sans-serif !important;
}

/* Latin-text fallback helper */
.fallback { font-family: Arial, Helvetica, sans-serif !important; }

/* ============================================================
   PAGE BACKGROUND
============================================================ */
body {
  background-color: #fef3c7;
  background-image: url('https://thumbs.dreamstime.com/b/beige-parchment-paper-background-amber-old-crumpled-parchment-texture-old-papyrus-paper-wallpaper-beige-parchment-paper-background-305279579.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
  background-blend-mode: overlay;
}

/* IMPORTANT: base hidden class */
.hidden { display: none !important; }

/* ============================================================
   PAGE LAYOUT
============================================================ */
.page-wrapper {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  min-height: 100vh;
}

.page-container {
  max-width: 768px;
  margin: 0 auto;
  padding: 1rem;
}

@media (min-width: 640px)  { .page-container { max-width: 448px; } }
@media (min-width: 768px)  { .page-container { max-width: 640px; } }
@media (min-width: 1024px) { .page-container { max-width: 960px; } }
@media (min-width: 1280px) { .page-container { max-width: 1000px; } }

/* ============================================================
   STICKY CARTOUCHE WRAPPER
============================================================ */
#cartoucheContainer {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fef9c3;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

#cartoucheContainer::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 8px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
}

/* Scroll to top */
#scrollToTopBtn {
  position: fixed;
  bottom: 4.5rem;
  right: 1.5rem;
  z-index: 1000;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.8;
}
#scrollToTopBtn:hover { opacity: 1; }

/* ============================================================
   MODE TOGGLE (Play vs Study)
============================================================ */
body[data-mode="play"] .study-only { display: none !important; }

.mode-toggle-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-toggle-btn-active {
  background-color: #fde68a;
  color: #1f2937;
  border-color: #fbbf24;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.mode-toggle-btn-inactive {
  background-color: #e5e7eb;
  color: #374151;
  border-color: #d1d5db;
}

.mode-toggle-btn:hover { filter: brightness(0.97); }

/* ============================================================
   TABS
============================================================ */
.tab-btn.active {
  background-color: #facc15;
  color: #1f2933;
}

/* ============================================================
   LEGEND CARDS (ALL)
============================================================ */
#phonemeLegend,
#simplePhonemeLegend,
#determinativeLegend,
#ideogramLegend,
#symbolsLegend,
#gardinerLegend,
#rosettaLegend,
#alphabetContent,
.cartouche-block > .bg-amber-100 {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 1rem !important;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,0.10),
    0 2px 4px -1px rgba(0,0,0,0.06) !important;
  padding: 1rem !important;
}

div[id$="Legend"] {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

#phonemeLegend,
#simplePhonemeLegend,
#determinativeLegend,
#ideogramLegend,
#symbolsLegend,
#gardinerLegend,
#rosettaLegend,
#alphabetContent {
  scroll-margin-top: 200px;
}

/* ============================================================
   COLLAPSIBLE TOGGLES
============================================================ */
.collapsible-toggle {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: #1f2937 !important;
}

.collapsible-toggle .caret {
  display: inline-block;
  margin-left: 0.5rem;
  transform: rotate(0deg);
  transition: transform 150ms ease;
}
.collapsible-toggle[aria-expanded="true"] .caret {
  transform: rotate(90deg);
}

/* ============================================================
   ✅ CONTAINERS — HYBRID (PANEL + KEYBOARD)
   This prevents “nothing displays” while you migrate to panel IDs.
============================================================ */

/* PANEL SYSTEM */
#phonemePanel,
#determinativePanel,
#ideogramPanel,
#symbolsPanel,
#gardinerPanel,
#rosettaPanel,
#flashcardsPanel,
#middleEgyptianGrammarMount,
/* KEYBOARD SYSTEM (old) */
#phonemeKeyboard,
#simplePhonemeKeyboard,
#determinativeKeyboard,
#ideogramKeyboard,
#symbolsKeyboard,
#gardinerKeyboard,
#rosettaKeyboardMount {
  background-color: #fef3c7;
  border-radius: 1rem;
  border: 1px solid #fcd34d;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,0.10),
    0 2px 4px -1px rgba(0,0,0,0.06);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

/* ============================================================
   ✅ HOVER — FIXED (no ## bug)
============================================================ */
#phonemePanel:hover,
#determinativePanel:hover,
#ideogramPanel:hover,
#symbolsPanel:hover,
#gardinerPanel:hover,
#rosettaPanel:hover,
#flashcardsPanel:hover,
#middleEgyptianGrammarMount:hover,

#phonemeKeyboard:hover,
#simplePhonemeKeyboard:hover,
#determinativeKeyboard:hover,
#ideogramKeyboard:hover,
#symbolsKeyboard:hover,
#gardinerKeyboard:hover,
#rosettaKeyboardMount:hover {
  box-shadow:
    0 10px 15px -3px rgba(0,0,0,0.10),
    0 4px 6px -2px rgba(0,0,0,0.05);
  transition: box-shadow 0.25s ease;
}

/* ============================================================
   INNER GRIDS (ALL KEYBOARDS / PANELS)
============================================================ */
.grid-cols-6-custom,
#phonemeKeyboardGrid,
.symbols-grid,
.symbols-controls,
.gardiner-category-grid {
  background-color: #fffbeb;
  border-radius: 0.75rem;
  padding: 0.85rem;
  padding-top: 1.1rem !important;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 0.55rem;

  width: 100%;
  max-width: 100%;
}

@media (max-width: 420px) {
  .grid-cols-6-custom,
  #phonemeKeyboardGrid,
  .symbols-grid,
  .symbols-controls,
  .gardiner-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 421px) and (max-width: 900px) {
  .grid-cols-6-custom,
  #phonemeKeyboardGrid,
  .symbols-grid,
  .symbols-controls,
  .gardiner-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 901px) {
  .grid-cols-6-custom,
  #phonemeKeyboardGrid,
  .symbols-grid,
  .symbols-controls,
  .gardiner-category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   BUTTONS — CONSISTENT EVERYWHERE
============================================================ */
.glyph-btn {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 0.75rem;
  padding: 0.40rem 0.45rem;
  min-height: 3.05rem;
  text-align: center;

  font-size: 2.15rem;
  line-height: 1.05;

  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.glyph-btn:active {
  transform: scale(1.06);
  filter: brightness(0.96);
}

.glyph-label {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.05;
  margin-top: 0.15rem;
  color: #333;
  word-break: break-word;
}

.tool-btn,
.toggle-btn {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.45rem 0.45rem;
  min-height: 2.95rem;

  border-radius: 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;

  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.tool-btn:active,
.toggle-btn:active {
  transform: scale(1.06);
  filter: brightness(0.95);
}

.space-btn { grid-column: span 2; }

/* ============================================================
   COMMON WORDS STRIP — HORIZONTAL (STUDY ONLY)
============================================================ */
body[data-mode="play"] .common-word-row,
body[data-mode="play"] .common-word-hint,
body[data-mode="play"] #commonWordsStrip {
  display: none !important;
}

body[data-mode="study"] #commonWordsStrip { display: block !important; }
body[data-mode="study"] .common-word-hint { display: block !important; }

#commonWordsStrip,
#commonWordsStrip * { box-sizing: border-box !important; }

#commonWordsStrip .common-word-row,
.common-word-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  white-space: nowrap !important;
  gap: 0.5rem !important;

  -webkit-overflow-scrolling: touch;
}

#commonWordsStrip .common-word-row .glyph-btn,
.common-word-row .glyph-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;

  width: auto !important;
  min-width: 170px !important;
  max-width: 280px !important;

  min-height: 2.6rem !important;
  padding: 0.35rem 0.6rem !important;

  font-size: 1.15rem !important;
}

#commonWordsStrip .common-word-row .glyph-btn > div,
.common-word-row .glyph-btn > div {
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

/* ============================================================
   ✅ CARTOUCHE OUTPUT — LOCKED (NO RADIUS HERE)
============================================================ */
.cartouche-output {
  border: 6px double #000;
  background-color: white;
  font-size: 3rem;
  line-height: 1.2;

  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  word-break: break-word;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cartouche-output.rtl { direction: rtl; }

.cartouche-output span.glyph,
.cartouche-output span {
  display: inline-block;
  font-family: 'Aegyptus', 'Segoe UI Symbol', sans-serif !important;
  vertical-align: bottom;
  padding: 4px;
  font-weight: bold;
  font-size: 3rem;
}

/* IMPORTANT: output containers should be normal blocks */
#output,
#translit-output {
  display: block;
}

/* ============================================================
   GLYPH FONT vs TEXT FONT (legends too)
============================================================ */
.glyph,
.glyph-btn,
.cartouche-output,
.cartouche-output span,
#phonemeLegendContent .glyph,
#simplePhonemeLegendContent .glyph,
#determinativeLegendContent .glyph,
#ideogramLegendContent .glyph,
#symbolsLegendContent .glyph {
  font-family: 'Aegyptus', 'Segoe UI Symbol', sans-serif !important;
}

.translit,
.glyph-label,
#phonemeLegendContent .glyph-label,
#simplePhonemeLegendContent .glyph-label,
#determinativeLegendContent .glyph-label,
#ideogramLegendContent .glyph-label,
#symbolsLegendContent .glyph-label {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* ============================================================
   GLYPH EDITOR
============================================================ */
#glyphEditor { border: 1px solid #000 !important; }

/* ============================================================
   GARDINER CATEGORY TABS (pill-like)
============================================================ */
#gardinerCategoryTabs .gardiner-cat-btn {
  background-color: #fef9c3 !important;
  color: #854d0e !important;
  border: 1px solid #facc15 !important;
  border-radius: 0.4rem !important;
  padding: 0.35rem 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  cursor: pointer;
}

#gardinerCategoryTabs .gardiner-cat-btn.gardiner-cat-btn-active,
.gardiner-cat-btn-active {
  background-color: #facc15 !important;
  color: #000 !important;
  border-color: #ca8a04 !important;
}

/* ============================================================
   ✅ PHONEME VISIBILITY RULES
============================================================ */
body[data-mode="study"] #phonemeKeyboard { display: none !important; }
body[data-mode="study"] #simplePhonemeKeyboard { display: block !important; }

body[data-mode="play"] #simplePhonemeKeyboard { display: none !important; }
body[data-mode="play"] #phonemeKeyboard { display: block !important; }

#phonemeKeyboard.hidden,
#simplePhonemeKeyboard.hidden { display: none !important; }

/* ============================================================
   RESPONSIVE (MOBILE)
============================================================ */
@media (max-width: 640px) {
  .glyph-btn {
    font-size: 1.85rem;
    min-height: 2.9rem;
    padding: 0.38rem 0.40rem;
  }

  .glyph-label { font-size: 0.64rem; }

  .tool-btn,
  .toggle-btn {
    font-size: 1.1rem;
    min-height: 2.75rem;
  }
}

/* ============================================================
   DARK MODE (localized)
============================================================ */
@media (prefers-color-scheme: dark) {
  .quick-start-card,
  .quick-start-card *,
  .quick-start-card ol li {
    color: #000 !important;
  }
  .quick-start-card button { color: #000 !important; }

  .mode-toggle-btn-active {
    background-color: #d9a406 !important;
    color: #000 !important;
    border-color: #b38804 !important;
  }

  .mode-toggle-btn-inactive {
    background-color: #cfcfcf !important;
    color: #222 !important;
    border-color: #bfbfbf !important;
  }
}

/* ============================================================
   ✅ FINAL OVERRIDE: hidden must ALWAYS win
============================================================ */
.hidden,
.hidden.grid-cols-6-custom,
.hidden.gardiner-category-grid,
.hidden.symbols-grid,
.hidden.symbols-controls {
  display: none !important;
}

/* ✅ 4 glyph lines visible, but scroll works */
#output {
  max-height: 12rem;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ✅ 2 translit lines visible, but scroll works */
#translit-output {
  max-height: 4.2rem;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ✅ make sure nothing is ellipsizing */
#output, #translit-output {
  white-space: normal !important;
  text-overflow: clip !important;
}