/* Flags of the World Quiz: home, the flag, the answers, the feedback. Light, big type. */
body{background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,#EAF0F8 60%,#DCE6F2 100%) fixed}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1em;padding:1em;text-align:center;overflow:auto}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4em;height:4em;border-radius:1em;box-shadow:0 6px 18px rgba(20,33,61,.18)}
.title{font:900 clamp(1.9em,8.4vw,3.1em)/1.02 var(--sans);letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance;max-width:11em}
.tagline{margin:0;color:var(--ink-soft);font-size:1.05em;font-weight:600}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(25em,100%)}
.seg{display:grid;grid-template-columns:1fr 1fr;width:100%;background:rgba(255,255,255,.9);border-radius:999px;padding:4px;box-shadow:0 2px 6px rgba(20,33,61,.08)}
.segb{border:0;background:none;border-radius:999px;min-height:44px;font-weight:700;color:var(--ink-soft)}
.segb[aria-pressed=true]{background:var(--ink);color:#fff}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4em;width:100%}
.area{border:2px solid transparent;background:rgba(255,255,255,.9);border-radius:.8em;min-height:46px;padding:.2em;font-weight:700;font-size:.95em;color:var(--ink);box-shadow:0 2px 6px rgba(20,33,61,.07)}
.area[aria-pressed=true]{border-color:var(--accent);background:#fff;color:var(--accent);box-shadow:0 0 0 3px rgba(31,95,209,.18)}
.stepper{display:flex;align-items:center;gap:.5em;background:rgba(255,255,255,.9);border-radius:999px;padding:.2em;box-shadow:0 2px 6px rgba(20,33,61,.08)}
.stepper span{min-width:9.5em;font-weight:800;font-size:1.05em}
.stepper small{font-weight:600;color:var(--ink-soft)}
.step{width:46px;height:46px;border-radius:50%;border:0;background:var(--paper);font-size:1.5em;font-weight:800;line-height:1;color:var(--accent-lo)}
.step:disabled{opacity:.3;cursor:default}
.go{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap}
.go .pill{min-width:9em}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.segb:focus-visible,.area:focus-visible,.step:focus-visible,.ans:focus-visible,.icon-btn:focus-visible,.sg:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (orientation:landscape) and (max-height:540px){
  .home{flex-direction:row;gap:1.4em;padding:.4em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.4em!important}
  .home-head{flex:0 1 15em;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:2.8em;height:2.8em}
  .title{font-size:1.75em}
  .home-body{gap:.35em;flex:0 1 24em}
  .area{min-height:44px;font-size:.88em}
  .go .pill{padding:.35em 1.4em;min-height:46px}
  .links .link{padding:.2em .5em}
}
@media (max-height:440px){.tagline{display:none}}
@media (max-height:380px){.home-icon{display:none}}

/* ---------------------------------------------------------------- game */
#game{display:grid;gap:.45em;padding:max(.45em,env(safe-area-inset-top)) .7em max(.6em,env(safe-area-inset-bottom));width:100%;max-width:38em;margin:0 auto;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"bar" "prog" "stage" "ans"}
@media (min-aspect-ratio:6/5){
  #game{max-width:76em;column-gap:1.2em;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:"bar bar" "prog prog" "stage ans"}
  .answers,.typer{align-self:center}
}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.6em}
.icon-btn{width:48px;height:48px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;padding:0;box-shadow:0 2px 8px rgba(20,33,61,.12);flex:none}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.where{display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}
.where b{font-size:1em}
.where span{font-size:.85em;color:var(--ink-soft);font-weight:600}
.hud{display:flex;align-items:center;gap:.5em;background:#fff;border-radius:999px;padding:.3em .8em;box-shadow:0 2px 8px rgba(20,33,61,.1);min-height:44px}
.hearts{display:flex;gap:2px}
.hearts svg{width:22px;height:22px;transition:transform .3s,opacity .3s}
.hearts svg.gone{opacity:.22;transform:scale(.75)}
.hearts svg.break{animation:heartbreak .6s ease-out}
@keyframes heartbreak{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-12deg)}60%{transform:scale(.6) rotate(10deg)}100%{transform:scale(.75)}}
.score{font-size:1.05em;min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.score.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.3);color:var(--good)}}
.progress{grid-area:prog;height:6px;border-radius:3px;background:rgba(20,33,61,.1);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--good));transition:width .4s ease-out}

.stage{grid-area:stage;position:relative;min-height:0;container-type:size;display:grid;place-items:center}
.flag{width:min(100cqw,calc(100cqh * var(--ar,1.5)),40em);aspect-ratio:var(--ar,1.5);display:flex;filter:drop-shadow(0 0 1px rgba(20,33,61,.45)) drop-shadow(0 10px 18px rgba(20,33,61,.22))}
.flag svg{width:100%;height:100%;display:block}
.flag.enter{animation:flagin .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes flagin{from{transform:scale(.7) rotate(-4deg);opacity:0}}
.flag.yes{animation:flagyes .45s}
@keyframes flagyes{40%{transform:scale(1.06)}}
.flag.no{animation:flagno .4s}
@keyframes flagno{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}
.verdict{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);font-weight:800;font-size:1.15em;padding:.35em 1em;border-radius:999px;color:#fff;
  white-space:nowrap;max-width:96%;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none}
.verdict.show{opacity:1;animation:pop .2s ease-out}
.verdict.ok{background:var(--good)}
.verdict.bad{background:var(--bad)}

.answers{grid-area:ans;display:grid;grid-template-columns:1fr 1fr;gap:.55em}
.answers.three{grid-template-columns:1fr}
.ans{min-height:56px;border:2px solid var(--hair);border-radius:.9em;background:#fff;font-weight:800;font-size:1.08em;color:var(--ink);padding:.35em .6em;line-height:1.15;
  box-shadow:0 3px 0 #C9D3E0;transition:transform .08s,background .15s,border-color .15s;display:flex;align-items:center;justify-content:center;gap:.4em;text-align:center}
.ans:active{transform:translateY(2px);box-shadow:0 1px 0 #C9D3E0}
.ans kbd{font:700 .7em/1 var(--sans);color:var(--ink-dim);border:1px solid var(--hair);border-radius:.3em;padding:.2em .35em;flex:none}
.ans.ok{background:var(--good);border-color:var(--good);color:#fff;box-shadow:0 3px 0 #0E6B40;animation:bump .35s}
.ans.bad{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 3px 0 #9A2A21;animation:flagno .4s}
.ans.ok kbd,.ans.bad kbd{color:#fff;border-color:rgba(255,255,255,.5)}
.ans.dim{opacity:.45}
@media (pointer:coarse){.ans kbd{display:none}}

.typer{grid-area:ans;display:flex;flex-direction:column;gap:.45em;align-items:stretch}
.tline{display:flex;gap:.5em}
#guess{flex:1;min-width:0;font:700 1.15em var(--sans);padding:.45em .8em;min-height:52px;border:2px solid var(--hair);border-radius:.9em;background:#fff;color:var(--ink);outline:none}
#guess:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,95,209,.18)}
#guess.ok{border-color:var(--good);background:#E7F6EE}
#guess.bad{border-color:var(--bad);background:#FCEBE9}
#guess.shake{animation:flagno .4s}
.tline .pill{padding:.3em 1.2em;min-width:4em}
.sugg{display:flex;gap:.4em;flex-wrap:wrap;min-height:46px;align-content:flex-start}
.sg{border:1px solid var(--hair);background:#fff;border-radius:999px;min-height:44px;padding:.2em .9em;font-weight:700;color:var(--ink)}
.typer .link{align-self:center}
@media (max-height:480px){
  #game{gap:.3em}
  .ans{min-height:46px;font-size:1em}
  .bar .icon-btn{width:44px;height:44px}
  .sugg{min-height:44px}
  #guess,.tline .pill{min-height:46px}
}

/* ---------------------------------------------------------------- cards */
.card .brand{text-align:center;color:var(--ink-dim);font-weight:700;font-size:.85em;letter-spacing:.06em;text-transform:uppercase;margin:-.3em 0 .3em}
.card .big{text-align:center;font-size:2.2em;font-weight:900;margin:.1em 0;font-variant-numeric:tabular-nums}
.card .hearts-row{display:flex;justify-content:center;gap:.3em}
.card .hearts-row svg{width:30px;height:30px}
.card .hearts-row svg.gone{opacity:.22;transform:scale(.8)}
.missed{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center;margin:.5em 0}
.missed figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.2em;width:6.2em;font-size:.8em;text-align:center;line-height:1.15}
.missed .mini{width:4.5em;height:3em;display:flex;align-items:center;justify-content:center}
.missed .mini svg{max-width:100%;max-height:100%;filter:drop-shadow(0 0 1px rgba(20,33,61,.45))}
.card.result h2{font-size:1.7em}
.card p.how{margin:.45em 0}
@media (max-height:480px){
  .card .big{font-size:1.6em}
  .missed .mini{width:3.4em;height:2.3em}
  .missed figure{width:5em}
  .card .hearts-row svg{width:22px;height:22px}
}