* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  font-family:Aegyptus, Arial, Helvetica, sans-serif; /* Fallback for non-glyph elements */
  -webkit-font-smoothing: antialiased; /* Chrome/Safari */
  -moz-osx-font-smoothing: grayscale; /* Firefox */
}

.page-wrapper {
  width: 100%;
  max-width: 640px; /* or 768px for wider layout */
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  background-color: #fff; /* optional: adds white background inside amber body */
  min-height: 100vh;
  border: 1px dashed red; /* optional: debug layout bounds */
}

@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;
  }
}
@media (min-width: 1280px) {
  .cartouche-output {
    margin-bottom: 3rem; /* or whatever you prefer */
  }
}

@font-face {
  font-family: 'Aegyptus';
  src: url('/Aegyptus.otf') format('opentype'); /* assumes in root */
}

/* === GLOBAL DEFAULT: NOTO SANS === */
html, body, :where(*, ::before, ::after) {
  font-family: Aegyptus, Arial, Helvetica, sans-serif !important; /* Default for non-glyph elements */
}
.keyboard {
  margin-top: 0.25rem !important; /* Reduce or remove vertical spacing */
  padding-top: 0 !important;
}
.grid-cols-6-custom {
  margin-top: 0rem !important;
  padding-top: 0rem !important;
}

/* Explicitly apply sans-serif to text-containing elements */
[class*="font-"],
button,
h1, h2, h3, h4, h5, h6,
p, div, span, ul, li, a,
.tab-btn,
.tool-btn,
.toggle-btn,
.cartouche,
.cartouche-block,
.legend-tab,
#alphabetContent,
#alphabetContent *,
#phonemeLegendContent,
#phonemeLegendContent *,
#simplePhonemeLegendContent,
#simplePhonemeLegendContent *,
#determinativeLegendContent,
#determinativeLegendContent *,
#ideogramLegendContent,
#ideogramLegendContent *,
#symbolsLegendContent,
#symbolsLegendContent * {
  font-family:'Aegyptus', Arial, Helvetica, sans-serif !important;
}

/* === AEGYPTUS FOR GLYPHS ONLY === */
.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;
}

/* === GLYPH LABELS === */
.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; /* Ensure letters use sans-serif */
}

/* === CARTOUCHE OUTPUT === */
.cartouche-output {
  border: 6px double #000;
  border-radius: 40px;
  background-color: #FFBF00; /* Amber */
  font-size: 3rem;
  line-height: 1.2;
  max-height: 14.4rem; /* 3 lines at 4.8rem each */
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  word-break: break-word;
  padding: 0.5rem;
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

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

.cartouche-output.rtl {
  direction: rtl;
}
.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;
}

.cartouche-output .translit {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 0.2rem;
  font-weight: normal;
  color: #333;
}

/* === CONTAINER STYLES === */
.cartouche {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
.cartouche-box {
  font-family: 'Aegyptus';
}

/* === GLYPH BUTTONS === */
.glyph-btn {
  padding: 0.5rem;
  border-radius: 12px;
  text-align: center;
  font-size: 3.2rem; /* Increased glyph size */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  min-height: 3.9rem;
  font-weight: bold;
  transition: all 0.15s ease; /* Smooth transition */
}

/* On click (active state) */
.glyph-btn:active {
  transform: scale(1.1); /* Slightly bigger */
  background-color: black;
  border: 2px solid grey;
  color: white; /* Makes glyph stand out */
}

.glyph-label {
  font-size: 0.65rem; /* Smaller letters */
  font-weight: 600;
  line-height: 1;
  margin-top: 0.25rem;
  color: #333;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* === TOOL AND TOGGLE BUTTONS === */
.tool-btn {
  font-size: 1.3rem;
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 0.75rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease; /* Smooth transition */
}

.tool-btn:active {
  transform: scale(1.1); /* Slightly bigger */
  background-color: black;
  border: 2px solid grey;
  color: white; /* Matches glyph-btn */
}

.toggle-btn {
  font-size: 1.3rem;
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 0.75rem;
  text-align: center;
  background-color: #5bc0de;
  color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease; /* Smooth transition */
}

.toggle-btn:active {
  transform: scale(1.1); /* Slightly bigger */
  background-color: black;
  border: 2px solid grey;
  color: white; /* Matches glyph-btn */
}

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

/* === KEYBOARD GRID === */
.grid-cols-6-custom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
}

/* === LEGEND TAB BUTTON === */
.legend-tab {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* === RESPONSIVE STYLES === */
@media (max-width: 640px) {
  .glyph-btn {
    font-size: 1.5rem; /* Adjusted for smaller screens */
    padding: 0.4rem;
    min-height: 3rem;
  }

  .glyph-label {
    font-size: 0.6rem; /* Smaller letters on mobile */
  }

  .tool-btn {
    font-size: 1.1rem;
    padding: 0.4rem;
  }

  .toggle-btn {
    font-size: 1.1rem;
    padding: 0.4rem;
  }

  .cartouche {
    font-family: 'Aegyptus', sans-serif !important;
    padding: 1rem;
  }

  .cartouche-output {
    font-size: clamp(2.5rem, 4.5vw, 2.0rem);
    max-width: 95vw;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .grid-cols-6-custom {
    font-family: 'Aegyptus', sans-serif !important;
    grid-template-columns: repeat(5, 1fr);
    padding: 0 0.5rem;
    box-sizing: border-box;
  }
}

/* === RTL GLYPH FLIPPING === */
#output {
  direction: ltr; /* Default direction */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#output.rtl {
  direction: rtl; /* Right-to-left text flow */
}

#output.rtl .glyph {
  transform: scaleX(-1); /* Flip glyphs horizontally in RTL mode */
  display: inline-block; /* Ensure proper rendering */
}

.glyph {
  display: inline-block; /* Prevent layout issues */
  font-family: 'Aegyptus', sans-serif; /* Ensure hieroglyph font */
  font-size: 40px; /* Consistent size */
  margin: 2px; /* Spacing between glyphs */
}

.translit {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px;
  color: #666;
  text-align: center;
  display: block;
}