:root{
  --navy:#0a2463;--gold:#f5c451;--ink:#10265c;
  --afs:clamp(16px,4.7vw,18.5px); /* one answer font size for every option and every question */
  --bg:linear-gradient(172deg,#0a2463 0%,#12479b 38%,#1690b4 72%,#25bdb2 100%);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#061a45;font-family:'Nunito','Trebuchet MS','Segoe UI',system-ui,sans-serif;color:#fff;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;border:0;padding:0;color:inherit}
h1,p{margin:0}

#app{position:relative;width:100%;max-width:430px;height:100vh;height:100dvh;height:var(--tgh,100dvh);margin:0 auto;overflow:hidden;overflow:clip;background:var(--bg)}
@media (min-width:480px) and (min-height:760px){
  body{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#12337a,#030d26)}
  #app{height:min(900px,100dvh - 32px);border-radius:36px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;padding:calc(env(safe-area-inset-top) + 22px) 20px calc(env(safe-area-inset-bottom) + 18px);animation:fade .28s ease both;background:radial-gradient(circle at 88% -4%,rgba(245,196,81,.32) 0,rgba(245,196,81,0) 250px)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.glow{display:none}
.screen>*:not(.glow){position:relative}

/* splash */
.splash{background:#00102f!important;padding:0;justify-content:flex-end;gap:0}
.splash img{position:absolute;top:0;left:0;width:100%;height:calc(100% - 140px);object-fit:contain;object-position:center center;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 88%,transparent 100%)}
.splash .btn-gold{margin:0 28px calc(env(safe-area-inset-bottom) + 56px)}

/* buttons */
.btn-gold{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;border-radius:32px;font-size:21px;font-weight:900;color:var(--navy);background:linear-gradient(180deg,#ffe28f 0%,#f5b83a 100%);box-shadow:0 10px 24px rgba(4,18,60,.4),inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(160,100,0,.25);transition:transform .18s ease,box-shadow .18s ease}
.btn-gold:hover,.btn-gold:focus-visible{transform:translateY(-3px);outline:none;box-shadow:0 0 0 3px rgba(255,226,143,.9),0 0 30px rgba(245,196,81,.7),0 14px 28px rgba(4,18,60,.4),inset 0 2px 0 rgba(255,255,255,.7)}
.btn-gold:active{transform:scale(.98)}
.btn-ghost{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:27px;font-size:18px;font-weight:800;background:rgba(255,255,255,.18);transition:background .18s}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(255,255,255,.3);outline:none}

/* home */
.logo-card{flex:1;min-height:200px;border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 22px 40px rgba(4,18,60,.38);display:flex;align-items:center;justify-content:center}
.logo-card img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{display:flex;align-items:center;gap:10px;height:60px;padding:0 14px;border-radius:20px;background:rgba(255,255,255,.18)}
.stat small{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;line-height:1.1}
.stat b{display:block;font-size:19px;font-weight:900;line-height:1.15}

/* game */
.topbar{display:flex;align-items:center;gap:10px;height:44px;flex:none}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;transition:background .18s}
.icon-btn:hover,.icon-btn:focus-visible{background:rgba(255,255,255,.3);outline:none}
.dots{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.dots i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.dots i.ok{background:var(--gold)}
.dots i.no{background:#ff8a80}
.dots i.cur{width:26px;border-radius:5px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7)}
.pill{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 10px;border-radius:18px;background:rgba(255,255,255,.18);font-weight:900;font-size:16px}
.qhead{text-align:center;flex:none}
.qhead p{font-size:13px;font-weight:800;letter-spacing:1.2px;color:#f6e3a6}
.qhead h1{font-size:32px;line-height:1.15;font-weight:900;letter-spacing:-.2px;text-shadow:0 2px 10px rgba(6,24,70,.35)}
.card{flex:1;min-height:150px;padding:10px;border-radius:30px;background:#fff;box-shadow:0 22px 40px rgba(4,18,60,.38),inset 0 4px 0 rgba(255,255,255,.35)}
.card-in{position:relative;height:100%;container-type:size;border-radius:22px;overflow:hidden;background:#f4f9ff;display:flex;align-items:center;justify-content:center;padding:14px}
.flag{position:relative;width:min(100cqw,133cqh);aspect-ratio:4/3;border-radius:8px;overflow:hidden;box-shadow:0 12px 26px rgba(10,36,99,.28),0 0 0 1px rgba(10,36,99,.08)}
.flag svg,.flag img{display:block;width:100%;height:100%}
.flag::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.22) 0%,rgba(0,0,0,.08) 22%,rgba(255,255,255,.18) 45%,rgba(0,0,0,.09) 70%,rgba(255,255,255,.14) 100%);pointer-events:none}
.chip{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 9px;border-radius:15px;background:rgba(255,255,255,.94);color:var(--ink);font-size:13px;font-weight:800;box-shadow:0 4px 10px rgba(6,24,70,.2)}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:none}
.ans{position:relative;display:flex;align-items:center;gap:10px;min-height:68px;padding:6px 12px;border-radius:22px;text-align:left;color:var(--ink);font-size:17px;font-weight:900;line-height:1.1;box-shadow:0 8px 18px rgba(6,24,70,.28),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(16,38,92,.10);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease}
.ans:hover,.ans:focus-visible{transform:translateY(-3px);outline:none;box-shadow:0 0 0 3px rgba(245,196,81,.85),0 0 26px rgba(245,196,81,.6),0 14px 26px rgba(6,24,70,.3),inset 0 2px 0 rgba(255,255,255,.75)}
.ans:active{transform:scale(.98)}
.ans[data-i="0"]{background:#ffd9cf}.ans[data-i="1"]{background:#cdf5e4}.ans[data-i="2"]{background:#dcd8ff}.ans[data-i="3"]{background:#fff0b8}
.ans.ok{background:#b7f0cf!important;box-shadow:0 0 0 3px #1f9d62,0 0 26px rgba(63,214,140,.65),inset 0 2px 0 rgba(255,255,255,.75)}
.ans.bad{background:#ffc9c4!important;box-shadow:0 0 0 3px #d6453d,0 0 22px rgba(255,120,110,.55),inset 0 2px 0 rgba(255,255,255,.75)}
.ans.dim{opacity:.55}
.ans[disabled]{cursor:default;transform:none}
.badge{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:16px;font-weight:900;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 2px 4px rgba(6,24,70,.25)}
.ans[data-i="0"] .badge{background:#2a55b8}.ans[data-i="1"] .badge{background:#17895a}.ans[data-i="2"] .badge{background:#b25a12}.ans[data-i="3"] .badge{background:#6a45c4}
.ans.ok::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:13px;margin-top:-9px;border:solid #12794a;border-width:0 3px 3px 0;transform:rotate(45deg)}
.ans.bad::after{content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(45deg,transparent 43%,#b3261e 43%,#b3261e 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#b3261e 43%,#b3261e 57%,transparent 57%)}
.next-slot{flex:none;height:58px}
.next-slot .btn-gold{min-height:58px;width:100%}
.next-slot .hint{height:58px;display:flex;align-items:center;justify-content:center;font-weight:800;color:rgba(255,255,255,.85)}
.feet{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feet .stat{height:54px;border-radius:18px}

/* result */
.result{align-items:stretch;text-align:center;justify-content:center;gap:16px}
.result h1{font-size:34px;font-weight:900;text-shadow:0 2px 10px rgba(6,24,70,.35)}
.rank{font-size:17px;font-weight:800;color:#f6e3a6}
.stars{display:flex;justify-content:center;gap:8px}
.rcard{padding:22px 18px;border-radius:30px;background:#fff;color:var(--ink);box-shadow:0 22px 40px rgba(4,18,60,.38)}
.rcard .big{font-size:60px;font-weight:900;line-height:1;color:var(--navy)}
.rcard .lab{font-size:13px;font-weight:800;letter-spacing:1.2px;color:#56658a}
.rrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.rrow div{padding:10px 4px;border-radius:16px;background:#eef4ff}
.rrow b{display:block;font-size:20px;font-weight:900;color:var(--navy)}
.rrow small{font-size:11px;font-weight:800;letter-spacing:.8px;color:#56658a}
.newbest{display:inline-block;margin-top:12px;padding:4px 12px;border-radius:14px;background:#fff0b8;color:#7a5400;font-size:13px;font-weight:900}
.btns{display:flex;flex-direction:column;gap:12px}

@media (max-height:700px){
  .qhead h1{font-size:26px}.ans{min-height:58px}.card{min-height:110px}.next-slot,.next-slot .btn-gold,.next-slot .hint{height:50px;min-height:50px}.feet{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* modes screen */
.modes{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0}
.mode{position:relative;flex:1;min-height:100px;max-height:200px;display:flex;align-items:center;gap:14px;padding:10px 14px 10px 12px;border-radius:28px;text-align:left;color:var(--ink);background:#fff;overflow:hidden;box-shadow:0 10px 22px rgba(4,18,60,.3),inset 0 2px 0 rgba(255,255,255,.9),inset 0 -4px 0 rgba(16,38,92,.08);transition:transform .18s ease,box-shadow .18s ease;animation:rise .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--d) * 90ms + 60ms)}
.mode::before{content:"";position:absolute;left:0;top:0;bottom:0;width:62%;background:linear-gradient(90deg,var(--tint),rgba(255,255,255,0));pointer-events:none}
.mode>*{position:relative}
.mode:hover,.mode:focus-visible{transform:translateY(-3px);outline:none;box-shadow:0 0 0 3px rgba(245,196,81,.9),0 0 28px rgba(245,196,81,.55),0 14px 28px rgba(4,18,60,.34),inset 0 2px 0 rgba(255,255,255,.9)}
.mode:active{transform:scale(.98)}
.m0{--c1:#ffd45c;--c2:#ff9433;--tint:#ffecc8}
.m1{--c1:#52e0a0;--c2:#10a278;--tint:#d6f6e8}
.m2{--c1:#a38dff;--c2:#4a69ea;--tint:#e3deff}
.mode-ico{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(78px,24vw,100px);aspect-ratio:1;border-radius:26px;border:3px solid #fff;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 8px 16px rgba(6,24,70,.28),inset 0 -4px 0 rgba(0,0,0,.14)}
.mode-ico svg{display:block;width:90%;height:90%;overflow:visible;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));transition:transform .25s cubic-bezier(.2,1.4,.4,1);animation:bob 3.4s ease-in-out infinite;animation-delay:calc(var(--d) * -1.1s)}
.mode:hover .mode-ico svg,.mode:focus-visible .mode-ico svg{transform:scale(1.1) rotate(-4deg)}
.mode-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.15}
.mname{font-size:26px;font-weight:900;color:var(--navy);letter-spacing:-.2px}
.msub{font-size:15px;font-weight:700;color:#3b4d78}
.mmeta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:3px}
.mbest{display:inline-flex;align-items:center;gap:5px}
.mbest svg{display:block}
.mbest i{font-style:normal;font-size:17px;font-weight:900;color:var(--navy)}
.mrounds{font-size:13px;font-weight:800;color:#56658a}
.mrounds b{color:var(--navy);font-weight:900}
.mprog{display:block;height:8px;margin-top:5px;border-radius:4px;background:rgba(16,38,92,.13);overflow:hidden}
.mprog i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 0 6px rgba(255,255,255,.6) inset}
.go{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,#ffe8a6,#f7bf45);box-shadow:0 5px 10px rgba(4,18,60,.3),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(160,100,0,.28);transition:transform .18s ease}
.go svg{display:block}
.mode:hover .go,.mode:focus-visible .go{transform:translateX(3px)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.mode,.mode-ico svg{animation:none}}
.screen.modesc{gap:10px;padding-top:calc(env(safe-area-inset-top) + 14px);padding-bottom:calc(env(safe-area-inset-bottom) + 18px)}
@media (max-height:780px) and (min-height:641px){.modesc .apptitle{display:flex}.modesc .apptitle h1{font-size:26px}}
@media (max-height:700px){.mode{min-height:92px}.mname{font-size:23px}.mode-ico{width:68px}}
@media (max-width:380px){.mname{font-size:23px}.msub{font-size:14px}.mode{gap:11px;padding-right:11px}.go{width:40px;height:40px}}
.coinpill{margin-left:auto}

/* landmark photo + placeholder, capitals visual */
.card-in.photo{padding:0}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:linear-gradient(160deg,#dbe9ff 0%,#eaf6f3 100%);color:var(--ink)}
.ph-ico{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:0 6px 14px rgba(10,36,99,.15)}
.ph-ico svg{width:38px;height:38px}
.ph-name{font-size:26px;font-weight:900;line-height:1.15}
.ph-note{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#56658a}
.ph-bg{position:absolute;top:-24px;left:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(22px) saturate(1.1);opacity:.95;display:block}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.credit{position:absolute;right:8px;bottom:6px;max-width:80%;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.45);color:#fff;font-size:10px;font-weight:700;text-align:right}
.capvis{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%}
.capvis .flag{width:min(66cqw,calc((100cqh - 70px)*1.333));max-height:calc(100cqh - 70px)}
.capname{font-size:30px;font-weight:900;line-height:1.1;text-align:center;color:var(--navy)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.ans>span:last-child{flex:1;min-width:0;overflow-wrap:break-word;hyphens:none}
.ans.ok>span:last-child,.ans.bad>span:last-child{padding-right:26px}
@media (max-width:380px){.ans{gap:8px;padding:6px 10px}.badge{width:28px;height:28px;font-size:14px}.qhead h1{font-size:28px}}



/* flags mode: vector flag is the fallback under a drawn picture */
.phflag{padding:0;background:linear-gradient(160deg,#eaf3ff 0%,#f4faf8 100%)}
.phflag .flag{width:84cqw;height:auto;max-height:none}

/* correct answer: message instead of the Next button */
.next-slot .hint.good{color:#9af0c2;font-size:19px;font-weight:900;text-shadow:0 2px 10px rgba(6,24,70,.35)}

/* win: shining stars + flying star burst */
.stars svg.on{filter:drop-shadow(0 0 5px rgba(245,196,81,.75))}
.stars.win svg.on{animation:starpop .7s cubic-bezier(.2,1.4,.4,1) both,shine 1.8s ease-in-out .7s infinite}
.stars.win svg.on:nth-child(2){animation-delay:.18s,.88s}
.stars.win svg.on:nth-child(3){animation-delay:.36s,1.06s}
@keyframes starpop{0%{transform:scale(0) rotate(-90deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes shine{0%,100%{filter:drop-shadow(0 0 4px rgba(245,196,81,.6)) brightness(1)}50%{filter:drop-shadow(0 0 16px rgba(255,236,160,1)) brightness(1.3)}}
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.fx i{position:absolute;display:block;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);will-change:transform,opacity}
.fx i.dot{clip-path:none;border-radius:50%}

/* wrong answer: "Start over" button */
.btn-gold.btn-redo{color:#fff;font-size:19px;background:linear-gradient(180deg,#ff9a90 0%,#e5584d 100%);text-shadow:0 1px 0 rgba(120,20,15,.35);box-shadow:0 10px 24px rgba(4,18,60,.4),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(130,20,15,.28)}
.btn-gold.btn-redo svg{stroke:#fff}

/* ===== question screen v2: layout after the supplied example, dark-blue theme kept ===== */
.screen.q{gap:10px;padding-top:calc(env(safe-area-inset-top) + 14px);padding-bottom:calc(env(safe-area-inset-bottom) + 14px)}
.screen.q::before{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300V190l60-70 50 50 70-110 80 120 50-60 90 100v180z' fill='%23fff'/%3E%3Cpath d='M0 300V245l80-60 70 50 90-80 80 70 80-30v105z' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;opacity:.1;pointer-events:none}
.q .topbar{justify-content:space-between}
.q .icon-btn{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(4,18,60,.25)}
.q .icon-btn[disabled]{opacity:.4;cursor:default}
.q .pill{height:46px;padding:0 16px 0 5px;gap:8px;border-radius:23px;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px rgba(4,18,60,.25);font-size:24px;font-weight:900;letter-spacing:.2px}
.pill .crown{display:flex;margin-left:2px}
.qprog{flex:none}
.qprog p{text-align:center;font-size:13px;font-weight:800;letter-spacing:1.2px;color:#f6e3a6;margin-bottom:7px}
.bar{position:relative;display:flex;align-items:center;height:20px;margin-right:14px;border-radius:10px;background:rgba(255,255,255,.2);box-shadow:inset 0 2px 4px rgba(4,18,60,.3)}
.bar .fill{height:100%;width:var(--to);border-radius:10px;background:linear-gradient(180deg,#7be0ff,#2f8cff);box-shadow:0 0 12px rgba(80,190,255,.65),inset 0 2px 0 rgba(255,255,255,.55);animation:grow .6s cubic-bezier(.3,.8,.3,1) both}
@keyframes grow{from{width:var(--from)}to{width:var(--to)}}
.bar b{position:absolute;right:-14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--navy);font-size:16px;font-weight:900;box-shadow:0 4px 10px rgba(4,18,60,.35)}
.apptitle{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px}
.apptitle h1{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:800;font-size:31px;line-height:1.1;letter-spacing:-.3px;text-shadow:0 2px 10px rgba(6,24,70,.4)}
.apptitle svg{display:block;flex:none}
.apptitle .flip{display:flex;transform:scaleX(-1)}
.orn{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;width:66%;margin:-4px auto 0}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7))}
.orn::after{background:linear-gradient(270deg,transparent,rgba(255,255,255,.7))}

.q .card{flex:1;min-height:150px;display:flex;flex-direction:column;gap:6px;padding:12px 12px 8px;border-radius:30px;background:#fff;box-shadow:0 22px 40px rgba(4,18,60,.38),inset 0 4px 0 rgba(255,255,255,.35)}
.q .vis{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.q .card-in{position:relative;flex:none;width:100%;height:100%;container-type:size;border-radius:22px;overflow:hidden;background:#f4f9ff;display:flex;align-items:center;justify-content:center;padding:14px}
.q .card-in.photo{padding:0}
.q .card.sq .card-in{width:min(100cqw,100cqh);height:auto;aspect-ratio:1/1}
.qtext{flex:none;text-align:center;font-size:23px;font-weight:900;line-height:1.2;color:var(--navy);padding:2px 0}

.q .answers{display:flex;flex-direction:column;gap:7px}
.q .ans{min-height:52px;padding:5px 14px 5px 8px;border-radius:18px;font-size:var(--afs);background:#fff!important;box-shadow:0 6px 14px rgba(6,24,70,.22),inset 0 -2px 0 rgba(16,38,92,.08)}
.q .ans:hover,.q .ans:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(245,196,81,.85),0 0 22px rgba(245,196,81,.55),0 10px 20px rgba(6,24,70,.28)}
.q .badge{width:34px;height:34px;font-size:17px}
.q .ans>span:nth-child(2){flex:1;min-width:0;overflow-wrap:break-word;hyphens:none}
.q .ans.ok>span:nth-child(2),.q .ans.bad>span:nth-child(2){padding-right:0}
.q .ans.ok{background:linear-gradient(90deg,#1fb36b,#43dd9c)!important;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 24px rgba(63,214,140,.7)}
.q .ans.ok .badge{background:#fff;color:#168a54}
.q .ans.bad{background:linear-gradient(90deg,#e0463d,#ff7d72)!important;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 22px rgba(255,110,100,.6)}
.q .ans.bad .badge{background:#fff;color:#c0352d}
.q .ans.ok::after{border-color:#fff}
.q .ans.bad::after{background:linear-gradient(45deg,transparent 43%,#fff 43%,#fff 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#fff 43%,#fff 57%,transparent 57%)}
.q .ans.dim{opacity:.62}
.ans .pts{flex:none;margin-right:30px;font-style:normal;font-size:16px;font-weight:900;white-space:nowrap}

.q .feet{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.plaque{display:flex;align-items:center;gap:10px;height:58px;padding:0 12px 0 10px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 16px rgba(4,18,60,.22)}
.plaque svg{flex:none;display:block}
.plaque small{display:block;font-size:12px;font-weight:800;letter-spacing:.8px;color:#d9ecff;line-height:1.1}
.plaque b{display:block;font-size:24px;font-weight:900;line-height:1.1}
.fl{display:flex;align-items:center;gap:1px}
.fl svg{width:20px;height:20px}
.fl .x{margin-left:6px;font-size:22px;font-weight:900;line-height:1}
.redo-slot{flex:none}
.redo-slot .btn-gold{width:100%;min-height:58px}

/* flag on a pole (flags mode, vector fallback) */
.phflag{padding:0 0 26px}
.phflag .flagwrap{position:relative;width:76cqw;margin-left:7cqw}
.phflag .flagwrap .flag{width:100%;height:auto;border-radius:3px;box-shadow:none}
.flag.wave{overflow:visible;filter:url(#flagwave) drop-shadow(0 8px 8px rgba(10,36,99,.28))}
.flag.wave svg,.flag.wave img{border-radius:3px}
.flag.shaped{box-shadow:none}.flag.shaped::after{display:none}
.flag.wave::after{border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.22) 18px,rgba(0,0,0,.16) 48px,rgba(255,255,255,.22) 78px)}
.pole{position:absolute;left:-9px;top:-10px;bottom:-40px;width:8px;border-radius:4px;background:linear-gradient(90deg,#8f99ab,#f4f7fb 45%,#7e889c);box-shadow:0 4px 8px rgba(10,36,99,.3)}
.pole::before{content:"";position:absolute;left:-3px;top:-9px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b9c2d2 60%,#8b95a8)}

/* pause menu */
.menu-ov{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(3,13,38,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fade .2s ease both}
.menu-card{width:100%;display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:30px;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.5);text-align:center}
.menu-card h2{margin:0 0 4px;font-size:26px;font-weight:900;color:var(--navy)}
.btn-ghost.dark{background:#eaf1ff;color:var(--navy)}
.btn-ghost.dark:hover,.btn-ghost.dark:focus-visible{background:#d6e5ff}

@media (max-height:780px){.apptitle,.orn{display:none}}
@media (max-height:700px){.q .feet{display:none}.q .ans{min-height:44px}.qtext{font-size:19px}.q .card{min-height:130px}}
@media (max-width:380px){.apptitle h1{font-size:25px}.pill{font-size:21px}}

/* fixes: narrow screens, bluish glass */
.q .feet{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.fl svg{width:18px;height:18px}
.plaque>div{min-width:0}
.q .icon-btn{background:rgba(120,190,255,.26)}
.q .pill{background:linear-gradient(180deg,rgba(130,200,255,.38),rgba(90,160,240,.2))}
.plaque{background:linear-gradient(180deg,rgba(130,200,255,.34),rgba(90,160,240,.18))}
@media (max-width:380px){
  .plaque{gap:8px;padding:0 8px}
  .plaque>svg:first-child{width:34px;height:auto}
  .fl svg{width:16px;height:16px}.fl .x{font-size:18px;margin-left:4px}
  .plaque b{font-size:21px}
}

/* the white frame hugs the picture exactly (no empty side margins) */
.q .cardwrap{flex:1;min-height:150px;container-type:size;display:flex;align-items:center;justify-content:center}
.q .card{flex:none;width:100%;height:100%;min-height:0}
.q .card.sq{width:min(100cqw,calc(100cqh - var(--qx,34px)));height:auto}
.q .card.sq .vis{flex:none;width:100%;aspect-ratio:1/1;container-type:normal}
.q .card.sq .card-in{width:100%;height:100%;aspect-ratio:auto}
@media (max-height:700px){.q .cardwrap{min-height:130px}.q .card.sq{--qx:29px}}
.q .card.sq{container-type:inline-size}
.q .card.sq .qtext{font-size:min(23px,7.4cqw);white-space:nowrap}
@media (max-height:700px){.q .card.sq .qtext{font-size:min(19px,7.4cqw)}}

/* question text sits above the frame, on the blue background */
.qask{flex:none;margin:0;text-align:center;font-size:26px;font-weight:900;line-height:1.15;color:#fff;text-shadow:0 2px 10px rgba(6,24,70,.4)}
.q .card{gap:0;padding:12px}
.q .card.sq{width:min(100cqw,100cqh);container-type:normal}
@media (max-height:700px){.qask{font-size:22px}}
@media (max-width:380px){.qask{font-size:23px}}

/* home: Play button and bottom plaques in the same style as the question screen */
.btn-play{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;flex:none;height:66px;padding:0 10px;border-radius:22px;color:var(--navy);background:linear-gradient(180deg,#ffe8a6 0%,#f7bf45 100%);box-shadow:0 10px 24px rgba(4,18,60,.4),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(160,100,0,.28);transition:transform .18s ease,box-shadow .18s ease}
.btn-play:hover,.btn-play:focus-visible{transform:translateY(-2px);outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 30px rgba(245,196,81,.75),0 14px 28px rgba(4,18,60,.4),inset 0 2px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(160,100,0,.28)}
.btn-play:active{transform:scale(.98)}
.btn-play::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:sheen 3.6s ease-in-out 1s infinite;pointer-events:none}
@keyframes sheen{0%,55%{left:-60%}100%{left:130%}}
.play-badge{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,#2a63d6,#0a2463);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 3px 6px rgba(6,24,70,.35);padding-left:3px}
.play-txt{flex:1;text-align:center;font-size:27px;font-weight:900;letter-spacing:.4px}
.btn-play::after{content:"";flex:none;width:46px}
.home-feet{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.home-feet .plaque b{font-size:22px}
@media (max-height:700px){.btn-play{height:58px}.home-feet .plaque{height:54px}}

/* 20-round campaign: round-complete screen */
.pips{display:flex;justify-content:center;gap:4px;padding:0 4px}
.pips i{flex:1 1 0;max-width:15px;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}
.pips i.done{background:#f5c451;box-shadow:0 0 6px rgba(245,196,81,.55)}
.pips i.cur{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.nextinfo{font-size:15px;font-weight:800;color:#f6e3a6;line-height:1.3}
.nextinfo b{color:#fff}
.result .rank.sm{font-size:15px}
@media (max-height:700px){.result{gap:10px}.result h1{font-size:28px}.rcard{padding:14px 16px}.rcard .big{font-size:46px}.rrow{margin-top:10px}.stars svg{width:38px;height:38px}}
.menu-card .dlg-note{margin:-4px 0 4px;font-size:15px;font-weight:700;color:#56658a}
/* logo-style title on the mode screen */
.wordmark{flex:none;margin:0 auto;width:min(320px,84vw,30vh);line-height:0}
.wordmark svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-height:780px) and (min-height:641px){.modesc .wordmark{width:min(280px,78vw,28vh)}}
@media (max-height:640px){.modesc .wordmark{display:none}}