/* ============================================================
   Pukhtoodle — App styles
   Built on the official Pukhtoodle Design System tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Parchment & ink */
  --parchment-50:  #FCF8EE;
  --parchment-100: #F8F2E3;
  --parchment-200: #F1E8D2;
  --parchment-300: #E7DABE;
  --parchment-400: #D9C8A4;
  --stone-500:     #BCAA86;
  --stone-600:     #9C8B6B;
  --ink-700:       #6E5C45;
  --ink-800:       #41331F;
  --ink-900:       #271D10;

  /* Heritage accents */
  --green-500:      #2E6B4F;
  --green-600:      #245840;
  --green-400:      #3E8A66;
  --saffron-500:    #CB962B;
  --saffron-400:    #E0B255;
  --terracotta-500: #C2542F;
  --terracotta-400: #D87A53;
  --indigo-500:     #274363;
  --indigo-400:     #3C6088;

  /* Game tiles */
  --tile-correct:      var(--green-500);
  --tile-present:      var(--saffron-500);
  --tile-absent:       var(--stone-600);
  --tile-letter:       #FCF8EE;
  --tile-empty-border: var(--parchment-400);
  --tile-ink:          var(--ink-900);

  /* Keyboard */
  --key-bg:       #E3D6BC;
  --key-bg-hover: #D9C8A4;
  --key-ink:      var(--ink-900);

  /* Surfaces */
  --surface-page:   var(--parchment-200);
  --surface-card:   var(--parchment-100);
  --scrim:          rgba(39, 29, 16, 0.55);

  /* Borders */
  --border-subtle: var(--parchment-400);
  --border-strong: var(--stone-600);

  /* Text */
  --text-strong: var(--ink-900);
  --text-body:   var(--ink-800);
  --text-muted:  var(--ink-700);

  /* Typography */
  --font-pashto-display: 'Noto Nastaliq Urdu', serif;
  --font-pashto-ui:      'Noto Nastaliq Urdu', serif;
  --font-display:        'Spectral', Georgia, serif;
  --font-ui:             'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:           'IBM Plex Mono', monospace;

  /* Effects */
  --shadow-sm:   0 2px 6px rgba(39,29,16,0.10);
  --shadow-md:   0 6px 18px rgba(39,29,16,0.12);
  --shadow-tile: 0 1px 0 rgba(39,29,16,0.12);
  --shadow-key:  0 2px 0 rgba(39,29,16,0.18);

  /* Kilim band */
  --kilim-band: repeating-linear-gradient(
    90deg,
    var(--terracotta-500) 0 14px,
    var(--saffron-500)    14px 28px,
    var(--green-500)      28px 42px,
    var(--indigo-500)     42px 56px
  );
}

/* === Reset === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--surface-page);
  font-family: var(--font-ui);
  color: var(--text-body);
}

/* === Kilim top stripe === */
body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--kilim-band);
  z-index: 1000;
}

/* === Layout === */
#game-container {
  display: flex;
  background-color: var(--surface-page);
  background-image: radial-gradient(rgba(39,67,99,0.05) 2px, transparent 2.5px);
  background-size: 24px 24px;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding-top: 6px;
}

#game {
  width: 95%;
  max-width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* === Header === */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  padding: 4px 0;
}

#help:hover, #stats:hover { color: var(--terracotta-500); }

/* === Title === */
.title {
  color: var(--green-500);
  font-family: var(--font-pashto-display);
  font-size: 2.3rem;
  font-weight: 700;
  margin: 0.4rem 0;
  text-align: center;
  direction: rtl;
}

@media only screen and (max-width: 480px) {
  .title { font-size: 1.5rem; }
}

/* === Board === */
#board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
  flex-direction: column;
  height: 405px;
  width: 100%;
}

#board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
}

/* === Tiles === */
.square {
  border: 2px solid var(--tile-empty-border);
  background: transparent;
  min-width: 60px;
  min-height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 25px;
  font-family: var(--font-pashto-ui);
  color: var(--tile-ink);
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  user-select: none;
  box-shadow: var(--shadow-tile);
}

.square.incorrect-letter {
  background-color: var(--tile-absent);
  border-color: var(--tile-absent);
  color: var(--tile-letter);
}

.square.correct-letter {
  background-color: var(--tile-present);
  border-color: var(--tile-present);
  color: var(--tile-letter);
}

.square.correct-letter-in-place {
  background-color: var(--tile-correct);
  border-color: var(--tile-correct);
  color: var(--tile-letter);
}

/* === Keyboard === */
.keyboard-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 8px;
  touch-action: manipulation;
}

.keyboard-row button {
  font-family: var(--font-pashto-ui);
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
  border: none;
  padding: 0;
  margin-right: 6px;
  height: 44px;
  width: 62px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  background-color: var(--key-bg);
  color: var(--key-ink);
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-key);
  transition: background-color 0.12s;
}

.keyboard-row button:hover { background-color: var(--key-bg-hover); }

.keyboard-row button.wide-button {
  flex-grow: 1.5;
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 600;
}

.keyboard-row button.incorrect-letter {
  background-color: var(--tile-absent);
  color: var(--tile-letter);
}

.keyboard-row button.correct-letter {
  background-color: var(--tile-present);
  color: var(--tile-letter);
}

.keyboard-row button.correct-letter-in-place {
  background-color: var(--tile-correct);
  color: var(--tile-letter);
}

.spacer-half { flex-grow: 0.5; }

/* === Modals === */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: var(--scrim);
}

.modal-content {
  background-color: var(--surface-card);
  background-image:
    linear-gradient(45deg, rgba(194,84,47,0.03) 14%, transparent 14% 86%, rgba(194,84,47,0.03) 86%),
    linear-gradient(45deg, rgba(194,84,47,0.03) 14%, transparent 14% 86%, rgba(194,84,47,0.03) 86%);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--terracotta-500);
  margin: 5% auto;
  padding: 24px;
  width: 80%;
  color: var(--text-body);
  max-width: 500px;
  border-radius: 4px;
  box-shadow: var(--shadow-md);
}

.modal-content hr { border: 1px solid var(--border-subtle); }

.close {
  color: var(--stone-600);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.close:hover, .close:focus { color: var(--terracotta-500); }

/* === Share button === */
#Copy {
  font-size: 0.9rem;
  margin-top: 10px;
  margin-left: 50px;
  background-color: var(--green-500);
  color: var(--tile-letter);
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s;
}

#Copy:hover { background-color: var(--green-400); }

/* === Footer === */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-subtle);
  width: 95%;
  color: var(--text-muted);
  padding: 5px;
}

a:link, a:visited { color: var(--text-muted); text-decoration: none; }
.logoText:hover  { color: var(--terracotta-500); }
.socialText:hover { color: #1DA1F2; }
.credits { margin: 0 5px; }
.socialText, .logoText { margin: 3px; font-size: 12px; font-weight: 300; color: var(--text-muted); }

/* === Misc === */
#demo { font-family: var(--font-ui); font-size: 1.5rem; color: var(--text-body); }
#final-score { color: var(--text-body); }
.next { font-weight: bold; }
.col { padding: 0 40px; margin: 10px 35px; }
.border-right { border-right: 1px solid var(--border-strong); text-align: center; padding-right: 30px; }
.thePashto { max-width: 20px; height: auto; }
.container { margin: 0; padding: 0; }
h5 { text-align: center; display: inline-block; }
h6 { text-align: left; display: inline-block; }
.hidden { display: none; }

/* === Responsive === */
@media only screen and (max-width: 400px) {
  .square { min-width: 15vw; min-height: 15vw; }
}
@media screen and (max-width: 1366px) {
  .square { min-width: 50px; min-height: 50px; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .square { min-width: 12vw; min-height: 12vw; font-size: 16px; }
  .keyboard-row button { font-size: 1.1rem; margin-right: 5px; height: 50px; width: 62px; }
  #Copy { font-size: 1rem; margin-top: 18px; margin-left: 10px; }
  .next { font-size: 10px; text-align: left; display: inline; }
  .col { text-align: center; padding: 0 20px 0 10px; margin: 5px 10px; }
}