/* ============================================================
   QUIZORIA - screen layouts (intro, language, name, difficulty,
   category, results)
   ============================================================ */

/* ---------------- Splash / Welcome ---------------- */
.welcome { align-items: center; justify-content: center; text-align: center; }
.welcome__logo { animation: logoRise 1500ms var(--ease-out) both; }
@keyframes logoRise {
  0%   { opacity: 0; transform: translateY(calc(var(--u) * 2)) scale(.9); letter-spacing: calc(var(--u) * 1.4); filter: blur(14px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
.welcome__tagline {
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  color: var(--c-text-dim);
  max-width: 46ch;
  animation: screenIn 900ms 500ms var(--ease-out) both;
}
.welcome__cta {
  margin-top: var(--sp-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  animation: screenIn 900ms 900ms var(--ease-out) both;
}
.pressOk {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  border: 1px solid rgba(243,200,96,.5);
  background: rgba(243,200,96,.08);
  font-size: var(--fs-h2); font-weight: 700;
  color: var(--c-gold-pale);
  animation: okPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes okPulse {
  0%,100% { box-shadow: 0 0 0 rgba(243,200,96,0); transform: scale(1); }
  50%     { box-shadow: var(--glow-gold); transform: scale(1.035); }
}
/* The call to action is the only focusable thing here, but it still needs the
   same unmistakable focus treatment as every other control. */
.pressOk.is-focused {
  background: var(--gold-fill);
  border-color: var(--c-gold);
  color: #17120a;
  box-shadow: var(--glow-gold), 0 1.2rem 2.6rem rgba(0,0,0,.55);
}
.pressOk.is-focused .key { border-color: rgba(23,18,10,.45); background: rgba(23,18,10,.12); color: #17120a; }
.welcome__version { position: absolute; bottom: var(--safe-y); font-size: var(--fs-micro); color: var(--c-text-faint); }

/* ---------------- Generic step screen ---------------- */
.step { }
.step__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }

/* ---------------- Language ---------------- */
.langGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.langTile { align-items: center; text-align: center; justify-content: center; min-height: calc(var(--u) * 14); gap: var(--sp-2); }
.langTile__flag { font-size: calc(var(--u) * 3.4); line-height: 1; }
.langTile__name { font-size: calc(var(--u) * 2.1); font-weight: 700; }
.langTile__native { font-size: var(--fs-body); color: var(--c-text-dim); }
.langTile[data-lang="ar"] .langTile__name { font-family: var(--font-ar); }

/* ---------------- Name entry ---------------- */
.name { }
.name__display {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: calc(var(--u) * 5.4);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid rgba(243,200,96,.35);
  background: rgba(10,14,38,.6);
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(122,79,224,.22);
}
.name__value { font-size: calc(var(--u) * 2.6); font-weight: 700; letter-spacing: .02em; }
.name__value:empty::before { content: attr(data-placeholder); color: var(--c-text-faint); font-weight: 400; }
.name__caret {
  display: inline-block; width: calc(var(--u) * .18); height: calc(var(--u) * 2.6);
  background: var(--c-gold); animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }
.name__kbdWrap { display: flex; justify-content: center; }

/* ---------------- Difficulty ---------------- */
.diffGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.diffTile { min-height: calc(var(--u) * 11); }
.diffTile__age { font-size: calc(var(--u) * 2.2); font-weight: 800; color: var(--c-gold-pale); }

/* ---------------- Category ---------------- */
.catGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.catTile { min-height: calc(var(--u) * 7.6); }
.catTile--mixed { border-color: rgba(243,200,96,.45); background: linear-gradient(160deg, rgba(90,64,20,.5), rgba(14,18,44,.9)); }

/* ---------------- Results ---------------- */
.results { }
.results__hero { text-align: center; margin-bottom: var(--sp-4); }
.results__verdict { font-size: var(--fs-title); font-weight: 800; }
.results__prize {
  font-size: calc(var(--u) * 5.6); font-weight: 800; line-height: 1;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 calc(var(--u) * 3) rgba(243,200,96,.35);
  animation: prizePop 900ms var(--ease-pop) both;
}
@keyframes prizePop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.results__sub { font-size: var(--fs-lead); color: var(--c-text-dim); margin-top: var(--sp-2); }

.results__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat { padding: var(--sp-3); text-align: center; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--hairline); }
.stat__value { font-size: calc(var(--u) * 2.4); font-weight: 800; color: var(--c-gold-pale); }
.stat__label { font-size: var(--fs-small); color: var(--c-text-dim); }

.results__review {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); align-content: start;
  margin-bottom: var(--sp-3);
}
.reviewItem {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: calc(var(--u) * .55) var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.reviewItem__dot { width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; flex: 0 0 auto; }
.reviewItem--ok  .reviewItem__dot { background: var(--c-success); box-shadow: 0 0 .6rem var(--c-success); }
.reviewItem--ko  .reviewItem__dot { background: var(--c-danger);  box-shadow: 0 0 .6rem var(--c-danger); }
.reviewItem--na  .reviewItem__dot { background: var(--c-text-faint); }
.reviewItem__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-dim); }

.results__actions { display: flex; gap: var(--sp-3); justify-content: center; }

/* While a deck is being fetched the grid dims and stops accepting input; the
   focus ring stays put so the remote never loses its place. */
.screen.is-busy .catGrid { opacity: .45; pointer-events: none; transition: opacity var(--t-base); }
.screen.is-busy::after {
  content: '';
  position: absolute; left: 50%; bottom: calc(var(--safe-y) * 2);
  width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4);
  margin-left: calc(var(--u) * -1.2);
  border: 2px solid rgba(243,200,96,.25);
  border-top-color: var(--c-gold);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Settings ---------------- */
.settingList { display: flex; flex-direction: column; gap: var(--sp-2); max-width: calc(var(--u) * 44); margin: 0 auto; width: 100%; }
.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--u) * 10), 2fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  text-align: start;
  transition: transform 160ms var(--ease-out), border-color var(--t-base),
              background var(--t-base), box-shadow var(--t-base);
}
.setting.is-focused {
  transform: translateY(calc(var(--u) * -.16)) scale(1.02);
  border-color: rgba(243,200,96,.7);
  background: linear-gradient(160deg, rgba(64,48,150,.75), rgba(16,20,54,.92));
  box-shadow: var(--glow-violet);
}
.setting__label { font-size: var(--fs-lead); font-weight: 600; }
.setting__track {
  display: block; height: calc(var(--u) * .55);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.setting__fill { display: block; height: 100%; background: var(--gold-fill); box-shadow: var(--glow-gold); transition: width 140ms var(--ease-out); }
.setting__value { font-size: var(--fs-body); color: var(--c-text-dim); min-width: calc(var(--u) * 3.4); text-align: end; font-variant-numeric: tabular-nums; }
.setting--toggle { grid-template-columns: minmax(0, 1fr) auto; }
.setting__state {
  padding: calc(var(--u) * .25) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  font-size: var(--fs-small); color: var(--c-text-dim);
}
.setting--toggle.is-on .setting__state { border-color: rgba(47,224,138,.55); color: #b6ffdc; background: rgba(47,224,138,.10); }
.settings__actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }