/* ── Paletă preluată din Theme.kt ─────────────────────────────── */
:root {
  --blue: #4285f4;
  --red: #db4437;
  --yellow: #f4b400;
  --green: #0f9d58;
  --bg-1: #1a1a2e;
  --bg-2: #16213e;
  --bg-3: #0f3460;
  --radius: 12px;
  --pill: 26px;
  --font: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: var(--font);
  color: #fff;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; }

button, input { font-family: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--blue); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Structură ────────────────────────────────────────────────── */
/* Nu folosi `flex: 1` aici: secţiunea .doc de dedesubt e soră în acelaşi
   flex container şi ar comprima #app până la înălţime zero. */
#app {
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.screen { display: none; flex-direction: column; flex: 1; min-height: 0; }
.screen.active { display: flex; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* ── Meniu ────────────────────────────────────────────────────── */
#screen-menu {
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  position: relative;
  background: url('../assets/img/menu_bg.webp') center/cover no-repeat;
  border-radius: var(--radius);
  padding: 32px 20px;
  overflow: hidden;
}
#screen-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,46,.72), rgba(15,52,96,.82));
}
#screen-menu > * { position: relative; z-index: 1; }

.menu-btn {
  width: 100%;
  max-width: 300px;
  padding: 15px 20px;
  border-radius: var(--pill);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: transform .15s, filter .15s;
  color: #fff;
}
.menu-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.menu-btn:active { transform: translateY(0); }
.menu-btn.play { background: var(--green); font-size: 20px; padding: 18px; }
.menu-btn.cat { background: var(--blue); }
.menu-btn.rules { background: var(--yellow); color: #1a1a1a; }
.menu-btn.ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }

.tagline { color: rgba(255,255,255,.75); font-size: 14px; max-width: 340px; }
.version { font-size: 12px; color: rgba(255,255,255,.4); }

/* ── Buton permanent „Descarcă pe Android" ────────────────────── */
/* Fix în colţul din dreapta sus, vizibil pe toate ecranele. Pe lat afişează
   şi textul; pe telefon rămâne doar pictograma, ca să nu fure spaţiu. */
.play-fab {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border-radius: 20px;
  background: rgba(10,12,24,.82);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: transform .15s, background .15s, border-color .15s;
}
.play-fab:hover {
  transform: translateY(-2px);
  background: rgba(10,12,24,.95);
  border-color: rgba(255,255,255,.5);
}
.play-fab:active { transform: translateY(0); }
.play-fab .play-badge-icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* Sub 964 px panoul jocului ajunge sub buton, deci rămâne doar pictograma şi
   antetul primeşte spaţiu. Peste acest prag panoul (max 560 px, centrat) nu mai
   atinge colţul, deci încape şi textul fără să deranjeze nimic. */
@media (max-width: 963px) {
  .play-fab { width: 40px; padding: 0; justify-content: center; }
  .play-fab-label { display: none; }
  .game-head { padding-right: 52px; }
}

/* Pe ecranul de final există deja bara mare; două linkuri ar fi zgomot. */
body:has(#screen-result.active) .play-fab { display: none; }

/* Instalat ca aplicaţie: butonul n-are rost. */
@media (display-mode: standalone) { .play-fab, .play-badge { display: none; } }

/* ── Bară „Descarcă pe Google Play" (în flux, pe ecranul de final) ── */
.play-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 9px 16px 9px 13px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  color: #fff;
  transition: transform .15s, background .15s, border-color .15s;
}
.play-badge:hover {
  transform: translateY(-2px);
  background: rgba(0,0,0,.62);
  border-color: rgba(255,255,255,.4);
}
.play-badge:active { transform: translateY(0); }
.play-badge-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.play-badge-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.play-badge-text small { font-size: 10px; color: rgba(255,255,255,.65); }
.play-badge-text strong { font-size: 14px; font-weight: 600; }

/* Pe ecranul de final concurează cu butoanele de joc, deci stă mai discret. */
.play-badge.compact { margin-top: 18px; align-self: center; padding: 7px 14px 7px 11px; }
.play-badge.compact .play-badge-icon { width: 20px; height: 20px; }
.play-badge.compact .play-badge-text strong { font-size: 13px; }

/* Pe Android aplicaţia nativă e deja acolo; bara ar fi zgomot inutil. */
@media (display-mode: standalone) { .play-badge { display: none; } }

/* ── Antet joc ────────────────────────────────────────────────── */
.game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.score { color: var(--green); font-weight: 700; font-size: 18px; }
.round { font-size: 14px; color: rgba(255,255,255,.7); }
.strikes { display: flex; gap: 2px; font-size: 16px; }

/* ── Cardul de căutare ────────────────────────────────────────── */
.query-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1a1a1a;
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
}
.query-card .g { color: var(--blue); font-weight: 700; font-size: 20px; }
.query-card .q { font-size: 16px; font-weight: 500; }

/* ── Feedback ─────────────────────────────────────────────────── */
.feedback { font-size: 13px; font-weight: 500; min-height: 19px; margin-bottom: 4px; }
.feedback.ok { color: var(--green); }
.feedback.bad { color: var(--red); }

/* ── Tabla de răspunsuri ──────────────────────────────────────── */
.answers {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.answers::-webkit-scrollbar { width: 6px; }
.answers::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

.answer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .3s, border-color .3s;
}
.answer.revealed {
  background: rgba(15,157,88,.15);
  border-color: rgba(15,157,88,.5);
}
/* Răspuns dezvăluit la finalul rundei, dar neghicit de jucător. */
.answer.missed {
  background: rgba(219,68,55,.12);
  border-color: rgba(219,68,55,.4);
}
.answer.missed .badge { background: rgba(219,68,55,.65); }
.answer.missed .text { color: rgba(255,255,255,.65); }
.answer.missed .pts { color: rgba(255,255,255,.4); }
.answer .badge {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  transition: background .3s;
}
.answer.revealed .badge { background: var(--green); color: #fff; }
.answer .text {
  flex: 1;
  font-size: 14px;
  color: rgba(255,255,255,.25);
  letter-spacing: 1px;
}
.answer.revealed .text { color: #fff; font-weight: 500; letter-spacing: 0; }
.answer .pts {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--yellow), #ff8f00);
  animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ── Intrare ──────────────────────────────────────────────────── */
/* `[hidden]` din foaia UA are aceeaşi specificitate ca `.input-row`, dar regulile
   autorului câştigă — de aceea e nevoie de o regulă explicită. */
[hidden] { display: none !important; }

.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input {
  flex: 1;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--pill);
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 16px; /* sub 16px, Safari pe iOS face zoom automat */
  outline: none;
  transition: border-color .2s;
}
.input-row input::placeholder { color: rgba(255,255,255,.4); }
.input-row input:focus { border-color: var(--blue); }
.input-row .send {
  height: 52px;
  min-width: 60px;
  border-radius: var(--pill);
  background: var(--green);
  font-size: 20px;
  transition: filter .15s;
}
.input-row .send:hover { filter: brightness(1.12); }

.wide-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--pill);
  font-size: 16px;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  transition: filter .15s;
}
.wide-btn:hover { filter: brightness(1.12); }
.wide-btn.green { background: var(--green); }
.wide-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.4); }

.round-summary { text-align: center; font-size: 14px; color: var(--yellow); margin-bottom: 8px; }

/* ── Categorii / Reguli / Rezultat ────────────────────────────── */
.panel { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; padding: 4px; }
.panel h2 { font-size: 22px; text-align: center; margin-bottom: 4px; }

.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--pill);
  border: 2px solid transparent;
  background: rgba(255,255,255,.08);
  font-size: 15px;
  font-weight: 700;
  transition: background .2s, border-color .2s;
}
.chip .count { font-size: 12px; font-weight: 400; opacity: .7; }
.chip[data-on='true'].c-green { background: var(--green); border-color: var(--green); }
.chip[data-on='true'].c-red { background: var(--red); border-color: var(--red); }
.chip[data-on='true'].c-yellow { background: var(--yellow); border-color: var(--yellow); color: #1a1a1a; }

.rule { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.rule .n {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--blue); display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}

.result { text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; flex: 1; }
.result .emoji { font-size: 68px; }
.result h2 { font-size: 26px; font-weight: 700; }
.score-card {
  width: 100%;
  background: rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.score-card .label { font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.6); }
.score-card .big { font-size: 52px; font-weight: 700; color: var(--green); line-height: 1; }
.score-card .sub { font-size: 14px; color: rgba(255,255,255,.7); }
.bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar > div { height: 100%; background: var(--green); transition: width .6s ease; }

/* ── Reclame ──────────────────────────────────────────────────── */
.ad-slot {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
  width: 100%;
  max-width: 560px;
}
.ad-slot:empty { display: none; }

/* ── Subsol ───────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 14px 16px 20px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}
.site-footer a { color: rgba(255,255,255,.65); margin: 0 6px; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ── Dialog ───────────────────────────────────────────────────── */
dialog {
  border: none;
  border-radius: 16px;
  background: var(--bg-2);
  color: #fff;
  padding: 22px;
  max-width: 340px;
  width: calc(100% - 40px);
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h3 { margin-bottom: 10px; }
dialog .row { display: flex; gap: 10px; margin-top: 16px; }
dialog .row > * { flex: 1; height: 44px; border-radius: 22px; font-weight: 700; }

.toggle { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 15px; }
.switch { width: 48px; height: 28px; border-radius: 14px; background: rgba(255,255,255,.2); position: relative; transition: background .2s; }
.switch[data-on='true'] { background: var(--green); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch[data-on='true']::after { transform: translateX(20px); }

/* ── Pagini de conţinut (arhivă, legal) ───────────────────────── */
.doc { max-width: 760px; margin: 0 auto; padding: 24px 18px 48px; line-height: 1.65; }
.doc h1 { font-size: 26px; margin-bottom: 6px; }
.doc h2 { font-size: 19px; margin: 26px 0 8px; color: var(--yellow); }
.doc h3 { font-size: 16px; margin: 18px 0 6px; }
.doc p, .doc li { color: rgba(255,255,255,.82); margin-bottom: 10px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.doc th { color: rgba(255,255,255,.6); font-weight: 600; }
.doc .back { display: inline-block; margin-bottom: 18px; color: var(--blue); text-decoration: none; }
.doc .lead { color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 18px; }
.q-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.q-card h3 { margin-top: 0; color: #fff; }
.q-card ol { margin: 0; padding-left: 20px; }
.q-card li { margin-bottom: 3px; }
.q-card .pt { color: var(--yellow); font-size: 12px; }
.idx { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.idx a {
  padding: 8px 14px; border-radius: var(--pill);
  background: rgba(255,255,255,.08); text-decoration: none; color: #fff; font-size: 14px;
}
.idx a:hover { background: rgba(255,255,255,.16); }

/* ── Ecrane înguste ───────────────────────────────────────────── */
@media (max-width: 420px) {
  #app { padding: 8px 12px; }
  .menu-btn.play { font-size: 18px; }
  .result .emoji { font-size: 54px; }
  .score-card .big { font-size: 44px; }
}