/* ==========================================================================
   X.com.ly — game.css
   Styles for the playable layer: session (game) screen, typing/order inputs,
   results summary, profile identity card and the settings controls that are
   not part of the shared component library.
   ========================================================================== */

/* ---- Section titles ---------------------------------------------------- */
.section-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: var(--c-text-strong);
  margin-bottom: var(--sp-3);
}

/* ---- Home: current-tier highlight -------------------------------------- */
.tier-card--current {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft), var(--sh-1);
}
.tier-card--current .chip {
  background: var(--c-primary);
  color: var(--c-text-invert);
  border-color: transparent;
}

/* ---- Session (game) ---------------------------------------------------- */
.session { padding-bottom: var(--sp-6); }

.session-progress { flex: 1; }

.session-top .icon-btn { flex: none; }

.stat--hearts [data-hearts] {
  color: var(--c-danger-dark);
  font-variant-numeric: tabular-nums;
}

.session-combo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  animation: combo-pop var(--dur) var(--ease-bounce);
}
@keyframes combo-pop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.session-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Arabic prompt inside the LTR word slot */
.visual-stage__word--ar { direction: rtl; }

/* Replay-audio button on the visual stage */
.stage-speaker {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-secondary-soft);
  color: var(--c-secondary-dark);
  font-size: 24px;
  line-height: 1;
  font-family: var(--font-emoji);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.stage-speaker:hover { filter: brightness(1.05); transform: translateY(-1px); }
.stage-speaker:active { transform: translateY(1px); }

/* ---- Typing exercise --------------------------------------------------- */
.text-input {
  width: 100%;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  color: var(--c-text-strong);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  text-align: center;
  letter-spacing: 0.5px;
}
.text-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--sh-focus);
}

/* ---- Word-order exercise ---------------------------------------------- */
.order-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: 76px;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  border: 2px dashed var(--c-border-strong);
  margin-bottom: var(--sp-4);
}
.order-tray__hint {
  align-self: center;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.order-bank {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.word-chip {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 2px solid var(--c-border-strong);
  box-shadow: 0 3px 0 var(--c-border);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--c-text-strong);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.word-chip:hover { border-color: var(--c-primary-light); }
.word-chip:active { transform: translateY(2px); box-shadow: none; }
.word-chip--placed {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
}
.word-chip:disabled { cursor: default; }

/* ---- Feedback example -------------------------------------------------- */
.feedback__example {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid currentColor;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  opacity: 0.95;
}

/* ---- Results summary --------------------------------------------------- */
.results {
  text-align: center;
  padding: var(--sp-6) 0;
}
.results__emoji {
  font-family: var(--font-emoji);
  font-size: 72px;
  line-height: 1;
  display: block;
  animation: results-pop 500ms var(--ease-bounce);
}
@keyframes results-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.results__title { font-size: var(--fs-3xl); margin-top: var(--sp-3); }
.results__sub { color: var(--c-text-muted); margin-top: var(--sp-1); }

.results__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
}
.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  box-shadow: var(--sh-1);
}
.result-card__ico { font-family: var(--font-emoji); font-size: var(--fs-xl); line-height: 1; }
.result-card b { font-size: var(--fs-2xl); color: var(--c-text-strong); }
.result-card span:last-child { font-size: var(--fs-xs); color: var(--c-text-muted); }

.results__note { color: var(--c-text-muted); font-size: var(--fs-md); }
.results__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ---- Profile ----------------------------------------------------------- */
.profile-card { text-align: center; }
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-align: start;
}
.profile-head__body { display: flex; flex-direction: column; min-width: 0; }
.profile-head__name { font-size: var(--fs-xl); color: var(--c-text-strong); }
.profile-head__mail {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar--lg { width: 72px; height: 72px; flex: none; }
.avatar--fallback {
  display: grid;
  place-items: center;
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  color: var(--c-text-invert);
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  border-color: var(--c-primary-dark);
}
.profile-stats { margin-bottom: 0; }

/* Google "G" glyph on the sign-in button */
.g-ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: #4285f4;
  font-weight: var(--fw-black);
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
}

/* ---- Settings controls ------------------------------------------------- */
.switch {
  flex: none;
  width: 52px;
  height: 30px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  border: 2px solid var(--c-border-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease);
}
.switch[aria-checked="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary-dark);
}
.switch[aria-checked="true"] span { transform: translateX(-22px); }

.select {
  flex: 1;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 2px solid var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-text-strong);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.select:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--sh-focus); }

.list-row--danger { color: var(--c-danger-dark); border-color: var(--c-danger-soft); }
.list-row--danger .list-row__label { color: var(--c-danger-dark); }

/* ---- RTL: flip the switch knob direction ------------------------------- */
[dir="rtl"] .switch span { margin-inline-start: 0; }

/* ---- Home: session-length picker on the hero --------------------------- */
.home-hero__label {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  opacity: 0.95;
}
.segmented--on-hero {
  background: color-mix(in srgb, #ffffff 18%, transparent);
  border-color: color-mix(in srgb, #ffffff 32%, transparent);
}
.segmented--on-hero .segmented__item {
  color: var(--c-text-invert);
  font-weight: var(--fw-bold);
}
.segmented--on-hero .segmented__item[aria-selected="true"] {
  background: var(--c-surface);
  color: var(--c-primary-dark);
  box-shadow: var(--sh-1);
}

/* ---- Bigger, friendlier emoji with a soft shadow / glow ---------------- */
.visual-stage__emoji {
  font-size: clamp(96px, 26vw, 132px);
  line-height: 1;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.1));
  animation: emoji-pop var(--dur-slow) var(--ease-bounce);
}
@keyframes emoji-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Tapping the English word on the stage replays its pronunciation. */
.visual-stage__word--tap {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--c-primary-dark);
  transition: transform var(--dur-fast) var(--ease);
}
.visual-stage__word--tap:hover { color: var(--c-primary); }
.visual-stage__word--tap:active { transform: scale(0.97); }

.tier-card__icon {
  font-size: 34px;
  filter: drop-shadow(0 5px 10px rgba(88, 204, 2, 0.28));
}
.results__emoji { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.18)); }
.empty-state__emoji { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.14)); }

/* ---- Session: pause / resume ------------------------------------------- */
.session-top .icon-btn--pause {
  flex: none;
  font-family: var(--font-emoji);
  color: var(--c-secondary-dark);
  background: var(--c-secondary-soft);
}

.pause-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(20, 24, 29, 0.62);
  backdrop-filter: blur(6px);
  animation: fade-in var(--dur) var(--ease);
}
.pause-veil[hidden] { display: none; }
.pause-veil__card {
  width: min(92vw, 380px);
  text-align: center;
  padding: var(--sp-6);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
  animation: pop-in var(--dur-slow) var(--ease-bounce);
}
.pause-veil__emoji {
  display: block;
  font-family: var(--font-emoji);
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
}
.pause-veil__title { font-size: var(--fs-2xl); margin-top: var(--sp-3); }
.pause-veil__text { color: var(--c-text-muted); margin: var(--sp-2) 0 var(--sp-5); }

@media (prefers-reduced-motion: reduce) {
  .pause-veil,
  .pause-veil__card { animation: none; }
}