*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,sans-serif}
body{
  background:#0b0d10;color:#e5e7eb;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent
}
button{font-family:inherit;cursor:pointer;color:inherit}

#app{max-width:600px;margin:0 auto;min-height:100vh;padding:1rem;display:flex;flex-direction:column;position:relative}
.screen{display:none;flex:1;flex-direction:column}
.screen.active{display:flex}

h1{text-align:center;font-size:1.5rem;margin:1rem 0 1.5rem;color:#d1d5db;font-weight:600;letter-spacing:.02em}

/* ---------- Dashboard ---------- */
.categories{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.category{
  background:#16191d;border:1px solid #2a2f36;border-radius:1.25rem;
  padding:1.4rem .6rem;font-size:1.05rem;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  color:#d1d5db;transition:transform .1s,border-color .15s,background .15s
}
.category:not(:disabled):active{transform:scale(.96);background:#1c2025;border-color:#3b424b}
.cat-emoji{font-size:3rem;line-height:1;filter:grayscale(.15) brightness(.95)}
.cat-label{font-weight:600;color:#e5e7eb;text-align:center;line-height:1.1}
.category:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Quiz ---------- */
#screen-quiz{padding-top:2.2rem}
.quit-btn{
  position:absolute;top:.6rem;right:.6rem;z-index:10;
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:#1c2025;color:#9ca3af;border:1px solid #3b424b;
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s,background .15s,color .15s
}
.quit-btn:active{transform:scale(.92);background:#2d3138;color:#e5e7eb}
.quiz-row{
  display:flex;align-items:center;gap:.6rem;
  background:#16191d;border:1px solid #2a2f36;border-radius:1rem;
  padding:.75rem 1rem;margin-bottom:.75rem
}
.quiz-word{
  flex:1;text-align:left;
  font-size:1.85rem;font-weight:700;color:#f3f4f6;letter-spacing:.02em
}
.play-btn{
  width:3rem;height:3rem;border-radius:50%;
  background:#2d3138;color:#e5e7eb;border:1px solid #3b424b;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 #15171b;flex-shrink:0;transition:transform .08s
}
.play-btn:active{transform:translateY(2px);box-shadow:0 0 0 #15171b}
.play-btn svg{margin-left:2px}
.play-btn-alt{background:#1e293b;border-color:#334155}


.quiz-progress{
  height:.35rem;background:#2a2f36;border-radius:.25rem;
  overflow:hidden;margin:.4rem 0 1rem
}
.quiz-progress-fill{
  height:100%;background:#16a34a;width:0;
  transition:width .3s ease;
  border-radius:.25rem
}

.quiz-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;
  align-content:start
}
.option .native-emoji{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:4rem;line-height:1
}
.option{
  aspect-ratio:1;
  background:#1c2025;
  border:2px solid #2a2f36;
  border-radius:.85rem;overflow:hidden;padding:.4rem;position:relative;
  transition:transform .1s,border-color .15s,background .15s
}
.option:active{transform:scale(.97)}
.option img{
  width:100%;height:100%;object-fit:contain;display:block
}
.option.selected{border-color:#6b7280;background:#262b32}

.option.correct{
  border-color:#16a34a;border-width:4px;
  background:#0f3826;
  box-shadow:0 0 0 3px rgba(22,163,74,.35), 0 6px 18px rgba(22,163,74,.25)
}
.option.wrong{
  border-color:#ef4444;border-width:4px;
  background:#3b1414;
  box-shadow:0 0 0 3px rgba(239,68,68,.3)
}
.option .badge{
  position:absolute;top:50%;left:50%;
  width:55%;height:55%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))
}

.next-btn{
  align-self:flex-end;margin-top:1rem;
  width:4rem;height:4rem;border-radius:50%;
  background:#374151;color:#f3f4f6;border:1px solid #4b5563;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 #1f2937;transition:transform .08s
}
.next-btn:not(:disabled):active{transform:translateY(2px);box-shadow:0 0 0 #1f2937}
.next-btn:disabled{opacity:.3;cursor:not-allowed}

/* ---------- Results ---------- */
#screen-results{align-items:center;justify-content:center;gap:2.5rem;text-align:center}
.result-counts{display:flex;gap:3rem}
.result{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:3rem;font-weight:700}
.result-icon{font-size:3rem}
.result.correct{color:#10b981}
.result.wrong{color:#ef4444}
.back-btn{
  padding:.85rem 1.75rem;font-size:1.1rem;font-weight:600;
  background:#374151;border:1px solid #4b5563;border-radius:.85rem;color:#e5e7eb;
  box-shadow:0 3px 0 #1f2937
}
.back-btn:active{transform:translateY(2px);box-shadow:0 0 0 #1f2937}

@media (min-width:480px){
  .quiz-word{font-size:2.25rem}
  h1{font-size:1.85rem}
}

/* ---------- Version badge (top) ---------- */
.app-version{
  text-align:center;font-size:.65rem;color:#4b5563;
  padding:.35rem 0 .15rem;letter-spacing:.04em;
  font-variant-numeric:tabular-nums
}