:root{--navy:#16324f;--mint:#34d3b0;--sun:#ffd23f;--coral:#ff6b6b;--sky1:#7fd1ff;--sky2:#bff0e6;--ink:#13293d;--card:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;background:linear-gradient(180deg,var(--sky1),var(--sky2));color:var(--ink);min-height:100%;overflow-x:hidden;display:flex;flex-direction:column;align-items:center}
header{width:100%;max-width:660px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px}
.logo{font-size:1.15rem;font-weight:800;color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo .ball,.logo .mag{display:inline-block}
.logo .ball{animation:spin 6s linear infinite}
.logo .mag{animation:wob 3s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wob{50%{transform:rotate(-18deg)}}
.hgroup{display:flex;align-items:center;gap:8px;flex-shrink:0}
.back{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;background:#ffffffcc;color:var(--navy);font-weight:800;font-size:.9rem;text-decoration:none;box-shadow:0 3px 0 #0002}
.back:active{transform:translateY(2px);box-shadow:0 1px 0 #0002}
.sound{border:none;background:#ffffffcc;border-radius:999px;width:42px;height:42px;font-size:1.2rem;cursor:pointer;box-shadow:0 3px 0 #0002;flex-shrink:0}
.passport,.progress{width:100%;max-width:660px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 16px 6px}
.stamp{width:32px;height:32px;border-radius:50%;background:#ffffff80;border:2px dashed #16324f55;display:flex;align-items:center;justify-content:center;font-size:1rem}
.stamp.got{background:var(--sun);border-style:solid;animation:pop .4s}
.dot{width:26px;height:26px;border-radius:50%;background:#ffffff80;border:2px dashed #16324f55;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#16324f88}
.dot.got{background:var(--sun);border-style:solid;color:#16324f;animation:pop .4s}
main{width:100%;max-width:660px;padding:8px 16px 28px;flex:1;display:flex;flex-direction:column}
.card{background:var(--card);border-radius:26px;box-shadow:0 12px 0 #16324f22,0 18px 30px #16324f33;padding:18px;text-align:center;position:relative;overflow:hidden}
.scene{height:140px;border-radius:18px;margin-bottom:12px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#cdeafe,#eaf6ff)}
.scene .city{font-size:4rem;filter:drop-shadow(0 4px 6px #0003);z-index:2}
.scene .flag{position:absolute;top:10px;right:12px;font-size:2rem;z-index:3}
.scene .pip{position:absolute;left:10px;bottom:6px;width:58px;height:58px;z-index:3;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.place,.title{font-size:1.45rem;font-weight:800;color:var(--navy);margin:2px 0}
.title{font-size:1.1rem;margin:0 0 2px}
.place small{display:block;font-size:.95rem;font-weight:600;color:#5b7b97}
.src{font-size:.72rem;color:#5b7b97;margin:0 0 10px}
.lt{width:100%;border-collapse:collapse;font-size:1rem}
.lt th,.lt td{padding:7px 3px;border-bottom:2px solid #eef4f9;text-align:center}
.lt th{background:var(--navy);color:#fff;font-size:.74rem;letter-spacing:.5px;border-bottom:none}
.lt th:first-child{border-radius:10px 0 0 0}.lt th:last-child{border-radius:0 10px 0 0}
.lt td.tm{text-align:left;font-weight:800;white-space:nowrap}
.lt td.tm .em{font-size:1.2rem;margin-right:4px}
.lt tr.hl td{background:#fff3c4}
.neg{color:#d2453f;font-weight:800}.posn{color:#1f9e82;font-weight:800}
.bars{display:flex;align-items:flex-end;gap:14px;height:170px;justify-content:center;margin:18px 0 34px}
.bar{width:52px;background:var(--mint);border-radius:10px 10px 0 0;display:flex;align-items:flex-start;justify-content:center;color:#06372c;font-weight:800;padding-top:4px;position:relative;transition:height .5s}
.bar .lab{position:absolute;bottom:-28px;font-size:.72rem;font-weight:800;color:var(--navy);width:86px;left:-17px}
.legend{font-size:.76rem;color:#5b7b97;margin-top:-2px}
.q{font-size:1.28rem;font-weight:800;line-height:1.3;margin:12px 6px 4px}
.readbtn{border:none;background:#eaf6ff;color:#1d6fb8;font-weight:700;border-radius:999px;padding:7px 14px;font-size:.95rem;cursor:pointer;margin-bottom:6px}
.opts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
.opt{border:none;background:#f3f7fb;border-radius:18px;padding:16px;font-size:1.35rem;font-weight:800;color:var(--navy);cursor:pointer;box-shadow:0 5px 0 #c9d8e6;transition:transform .08s;display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px}
.opt:active{transform:translateY(3px);box-shadow:0 2px 0 #c9d8e6}
.opt .em{font-size:1.7rem}
.opt.wrong{animation:shake .4s;background:#ffe3e3;box-shadow:0 5px 0 #f3b6b6}
.opt.right{background:var(--mint);color:#06372c;box-shadow:0 5px 0 #1f9e82}
.opt.dim{opacity:.45}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.toast{min-height:26px;font-weight:800;font-size:1.1rem;margin-top:12px;color:var(--navy)}
.reveal{background:#fff7e6;border-radius:18px;padding:14px;margin-top:12px;display:none;animation:pop .35s}
.reveal.show{display:block}
.reveal .fact{font-size:1.08rem;font-weight:700;color:#7a5b00;line-height:1.35}
.golink{display:inline-block;margin-top:10px;background:#eaf6ff;color:#1d6fb8;font-weight:800;text-decoration:none;border-radius:12px;padding:9px 14px;font-size:.95rem}
.next{margin-top:14px;border:none;background:var(--coral);color:#fff;font-weight:800;font-size:1.22rem;border-radius:999px;padding:13px 26px;cursor:pointer;box-shadow:0 6px 0 #d2453f;display:none}
.next.show{display:inline-block;animation:pop .35s}
.next:active{transform:translateY(3px);box-shadow:0 3px 0 #d2453f}
.finale{text-align:center;display:none}
.finale.show{display:block;animation:pop .4s}
.finale h2{font-size:1.7rem;color:var(--navy);margin:.2em 0}
.finale .stamps{font-size:1.8rem;letter-spacing:3px;margin:10px 0;line-height:1.6}
.grown{font-size:.8rem;color:#5b7b97;margin-top:18px;text-align:center;max-width:660px;padding:0 16px}
.grown a{color:#1d6fb8}
.confetti{position:fixed;top:-20px;width:12px;height:12px;z-index:99;border-radius:2px;pointer-events:none}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:1}}
.hub-wrap{width:100%;max-width:960px;padding:24px 18px 40px}
.hub-h{font-size:1.9rem;font-weight:800;color:var(--navy);margin:.2em 0}
.hub-sub{color:#5b7b97;max-width:640px;line-height:1.5}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:22px}
.hub-card{display:block;text-decoration:none;background:#fff;border:1px solid #e3edf5;border-radius:18px;padding:16px;box-shadow:0 6px 16px #16324f14;transition:transform .08s}
.hub-card:active{transform:translateY(2px)}
.hub-emoji{font-size:2.2rem}
.hub-title{font-size:1.1rem;font-weight:800;color:var(--navy);margin-top:6px}
.hub-ages{font-size:.82rem;font-weight:700;color:#1f9e82;margin:2px 0 6px}
.hub-blurb{font-size:.92rem;color:#5b7b97;line-height:1.4}

/* team crests in games */
.scene .city img.crest{height:104px;width:auto;max-width:80%;object-fit:contain;filter:drop-shadow(0 4px 6px #0003)}
.opt img.crest{height:34px;width:auto;object-fit:contain}
.lt td.tm img.crest{height:22px;width:22px;object-fit:contain;vertical-align:middle;margin-right:6px}
.bar .lab img.crest{height:18px;width:18px;object-fit:contain;display:block;margin:0 auto 2px}