:root{
  --red:#c60c30; --red-d:#a80a28;
  --green:#1f9d55; --green-d:#13713d;
  --bg:#f7f5f2; --card:#ffffff; --ink:#1b1b1f; --muted:#5f5f68;
  --line:#d8d3cb;
  --surface:#ffffff;        /* secondary button / panel surface */
  --surface-active:#eceae5; /* :active feedback on light surfaces */
}
@media (prefers-color-scheme:dark){
  :root{
    --red:#ff5b78; --red-d:#e23a5a;
    --green:#34c77b; --green-d:#28a767;
    --bg:#15151a; --card:#1f1f27; --ink:#f2f2f5; --muted:#b2b2bd;
    --line:#3a3a46;
    --surface:#2a2a33;
    --surface-active:#363641;
  }
}

/* CRITICAL: the [hidden] HTML attribute must always win over element/class
   display rules below (.done/main/.btn use display:flex etc.). Without this
   the round-complete screen and English reveal leak on a fresh visit. */
[hidden]{display:none !important;}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
#app{
  display:flex; flex-direction:column; min-height:100%;
  max-width:560px; margin:0 auto;
  padding:
    calc(env(safe-area-inset-top) + 16px)
    calc(env(safe-area-inset-right) + 18px)
    calc(env(safe-area-inset-bottom) + 18px)
    calc(env(safe-area-inset-left) + 18px);
}
header{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.brand{font-weight:800; font-size:20px; letter-spacing:.3px; color:var(--red)}
.reset{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  font-size:13px; font-weight:600; padding:9px 14px; border-radius:999px;
  cursor:pointer; min-height:40px;
}
.reset:active{background:var(--surface-active)}

.progress-wrap{height:8px; background:var(--line); border-radius:999px; overflow:hidden}
.progress-bar{height:100%; width:0%;
  background:linear-gradient(90deg,var(--red),#ff7d97);
  border-radius:999px; transition:width .35s ease}
.stats{
  display:flex; justify-content:space-between; gap:8px;
  font-size:13px; color:var(--muted); margin:10px 2px 0;
}
.stats b{color:var(--ink)}

main{flex:1; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:18px 0}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:48px 24px; text-align:center; min-height:46vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(20,20,30,.06);
}
.word-label{font-size:13px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:14px}
.da-word{font-size:clamp(34px,10vw,56px); font-weight:800; line-height:1.12;
  word-break:break-word; overflow-wrap:anywhere; max-width:100%}
.en-word{margin-top:24px; padding-top:22px; border-top:1px solid var(--line);
  font-size:clamp(22px,6vw,30px); font-weight:700; color:var(--green-d);
  word-break:break-word; overflow-wrap:anywhere; max-width:100%}
.pos-word{margin-top:8px; font-size:14px; color:var(--muted); font-style:italic}

.buttons{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.btn{
  border:0; border-radius:20px; padding:22px 12px; cursor:pointer;
  font-size:18px; font-weight:700; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .08s ease, filter .15s ease;
  min-height:84px;
}
.btn .mark{font-size:30px; line-height:1}
.btn .lbl{font-size:15px; font-weight:600}
.btn:active{transform:scale(.96)}
/* Fixed, theme-independent button colours so white text always passes AA. */
.no{background:#c60c30; color:#fff} .no:active{background:#9c0a26}
.yes{background:#157f43; color:#fff} .yes:active{background:#0f6736}

.next{
  margin-top:4px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:18px; font-size:17px; font-weight:700;
  color:var(--ink); cursor:pointer; min-height:60px; width:100%;
}
.next:active{background:var(--surface-active)}

.done{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px}
.done-emoji{font-size:64px}
.done h2{font-size:28px; color:var(--ink)}
.done p{color:var(--muted); max-width:300px; line-height:1.5}
.restart{margin-top:10px; width:220px; flex-direction:row; justify-content:center}

footer{text-align:center; font-size:12px; color:var(--muted); padding-top:14px}