/* US States Map Quiz: a calm sea, a soft-coloured map, big plain words. */
:root{--brass-hi:#FFE08A;--brass:#F4C542;--brass-lo:#D9A21B;--lacquer:#1E3A5F;--lacquer-hi:#26496F;--hair:rgba(255,224,138,.35);
  --ink:#FFFFFF;--ink-soft:#DCE8F5;--ink-dim:#A9BCD2;
  --navy:#1E3A5F;--sea:#CDE8F2;--sea-hi:#EAF6FA;--line:#5D7389;--good:#3FA34D;--bad:#E4573D;--gold:#F4C542;
  --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
body{background:radial-gradient(ellipse at 50% 35%,var(--sea-hi),var(--sea) 70%);color:var(--navy);font-family:var(--round)}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

/* cards */
.card{background:linear-gradient(180deg,#2C5280,#1E3A5F 45%);color:#fff}
.card h2{font-family:var(--round);font-style:normal;color:var(--brass);font-weight:900}
.card .pill{font-family:var(--round);min-height:48px;color:#3B2A0C}
.card .pill.alt{background:rgba(255,255,255,.94);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),0 4px 0 rgba(0,0,0,.3)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .big{font:900 1.35em/1.25 var(--round);text-align:center;margin:0 0 .3em;color:var(--brass-hi)}
.card .who{text-align:center;color:#fff;font-weight:900;font-size:1.1em;margin:0}
.card .where{text-align:center;color:var(--ink-soft);font-weight:700;margin:0 0 .3em}
.card .starline{font-size:2.3em;line-height:1;text-align:center;margin:.1em 0 .2em;letter-spacing:.12em;color:var(--brass)}
.card .starline i{font-style:normal;color:rgba(255,255,255,.25)}
.card .row,.card .choice,.card .link{min-height:44px}
.card .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;text-align:center;margin:.2em 0 .6em}
.card .grid b{display:block;font-size:1.5em;color:var(--brass-hi)}
.card .grid span{font-size:.8em;color:var(--ink-soft)}
.toggle[aria-pressed=true]{background:var(--good)}
@media (max-height:480px){.card .extra{display:none}.card .grid b{font-size:1.2em}}
@media (max-height:420px){.card{font-size:.9em}.card .big{margin:0 0 .1em}.card .starline{font-size:1.6em}}

/* the map */
.map{display:block;width:100%;height:100%;overflow:visible}
.map .st{stroke:var(--line);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .25s}
.map .f0{fill:#F6DFA8}.map .f1{fill:#F3C9B0}.map .f2{fill:#D7E3B5}.map .f3{fill:#E8D4EC}.map .f4{fill:#F8E7C4}
.map .ctx{fill:#E4E8EB;stroke:#B8C3CC}
.map .dc{fill:#F3C9B0;pointer-events:none}
.map .inset{fill:rgba(255,255,255,.35);stroke:#8EA6BB;stroke-width:1px;vector-effect:non-scaling-stroke;stroke-dasharray:4 3}
.map .q{cursor:pointer}
.map .q.done{fill:#7CCB7A;stroke:#2E7D32}
.map .pop{transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.map .bad{fill:var(--bad)!important;stroke:#8B1E10;animation:wob .3s}
@keyframes wob{25%{opacity:.6}75%{opacity:1}}
.map .reveal{fill:var(--gold)!important;stroke:#7A5600;stroke-width:3px;animation:glow .6s ease-in-out 3}
@keyframes glow{50%{fill:#FFF3C4}}
.map .cursor{stroke:var(--navy);stroke-width:4px}
.map .capdot{fill:var(--navy);stroke:#fff;stroke-width:.8px;vector-effect:non-scaling-stroke;pointer-events:none}
.hero .st{stroke:#fff;cursor:default}

/* home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1.2em;text-align:center}
.lead{display:flex;flex-direction:column;align-items:center;gap:.3em}
.hero-map{width:min(320px,70vw);aspect-ratio:600/392}
.home .title{font-family:var(--round);font-weight:900;font-size:clamp(2.1em,9vw,3.8em);color:var(--navy);letter-spacing:.01em;line-height:1.05;text-shadow:0 3px 0 #fff,0 8px 18px rgba(30,58,95,.18)}
.tagline{margin:0;color:var(--navy);font-weight:800;font-size:1.2em;text-shadow:none}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.55em;width:min(26em,100%)}
.modes,.levels{display:flex;gap:.3em;justify-content:center;width:100%}
.modes .choice,.levels .choice{flex:1;min-width:0;min-height:50px;font-weight:900;font-size:1.2em;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;
  background:rgba(255,255,255,.92);color:var(--navy);border:2px solid rgba(30,58,95,.22);padding:.25em .1em}
.modes .choice{font-size:1.1em}
.modes .choice[aria-pressed=true],.levels .choice[aria-pressed=true]{background:linear-gradient(180deg,#FFE08A,#F4C542);color:#3B2A0C;border-color:#D9A21B;box-shadow:0 3px 0 #B8860B}
.levels .choice small{font-weight:800;font-size:.5em;letter-spacing:.02em;white-space:nowrap;color:#B8860B}
.levels .choice[aria-pressed=true] small{color:#7a5200}
.modes .choice:focus-visible,.levels .choice:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.level-name{margin:0;font-weight:800;font-size:1.05em;color:var(--navy)}
.go{display:flex;gap:.6em;justify-content:center;width:100%}
.menu-col .pill{min-width:10em;min-height:56px;font-family:var(--round);color:#3B2A0C;font-size:1.3em}
.menu-col .pill.alt{background:rgba(255,255,255,.94);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),0 4px 0 rgba(30,58,95,.35)}
.go:has(#continue:not([hidden])) .pill{min-width:0;flex:1;padding-left:.6em;padding-right:.6em}
.home .links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em;color:var(--navy);font-weight:800}
.home .link:focus-visible{outline:3px solid var(--navy)}
@media (max-height:700px){.hero-map{width:min(220px,55vw)}}
@media (max-height:600px){.hero-map{display:none}}
@media (max-height:480px){
  .home{flex-direction:row;gap:.4em 1.4em;padding:.5em 1em}
  .home .title{font-size:2.1em}
  .lead{flex:0 1 13em;min-width:0}
  .menu-col{gap:.3em;width:auto;flex:0 1 26em;min-width:0}
  .menu-col .pill{min-width:0;width:100%;min-height:46px;padding-left:1em;padding-right:1em;font-size:1.15em}
  .modes .choice,.levels .choice{min-height:44px;font-size:1.05em}
  .tagline{font-size:1em}
  .level-name{font-size:.95em}
  .home .link{padding:.3em .45em;font-size:.95em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) .lead{padding-top:44px}}
@media (max-height:480px) and (max-width:620px){.home .title{font-size:1.7em}}

/* the round */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6em;
  padding:max(.45em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) .35em max(.7em,env(safe-area-inset-left));position:relative;z-index:5}
#menu{width:48px;height:48px;border-color:#fff;background:radial-gradient(circle at 35% 30%,#3D6596,var(--navy) 70%);box-shadow:0 3px 0 rgba(30,58,95,.35)}
#menu svg{stroke:#fff}
.ask{justify-self:center;text-align:center;background:#fff;border-radius:1em;padding:.25em 1.1em .3em;box-shadow:0 3px 0 rgba(30,58,95,.18);min-width:0;max-width:100%;line-height:1.1}
.ask-lead{display:block;font-size:.85em;font-weight:800;color:#5D7389}
.ask-name{display:block;font-size:1.75em;font-weight:900;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask.new{animation:askin .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes askin{0%{transform:scale(.85);opacity:.4}100%{transform:scale(1);opacity:1}}
.side{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;font-weight:900;min-width:4.4em}
.hearts{font-size:1.5em;letter-spacing:.05em;white-space:nowrap}
.hearts i{font-style:normal;color:var(--bad);display:inline-block}
.hearts i.off{color:rgba(30,58,95,.2)}
.hearts i.break{animation:hbreak .5s}
@keyframes hbreak{0%{transform:scale(1.5);color:var(--bad)}100%{transform:scale(1)}}
.count{font-size:1em;color:var(--navy)}
.bar-progress{height:6px;margin:0 1em;background:rgba(30,58,95,.12);border-radius:3px;overflow:hidden}
.bar-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7CCB7A,var(--good));transition:width .35s}
.stage{flex:1;min-height:0;position:relative;overflow:hidden;padding:.4em max(.6em,env(safe-area-inset-right)) max(.6em,env(safe-area-inset-bottom)) max(.6em,env(safe-area-inset-left))}
.msg{position:absolute;left:50%;bottom:max(.8em,env(safe-area-inset-bottom));transform:translate(-50%,8px);background:#fff;color:var(--navy);border-radius:999px;padding:.4em 1.1em;
  font-weight:800;font-size:1.05em;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 14px rgba(30,58,95,.2);z-index:6}
.msg.show{opacity:1;transform:translate(-50%,0)}
.msg.good{color:#22682A}.msg.bad{color:#B23A22}
#game.shake .stage{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.float{position:fixed;transform:translate(-50%,-50%);font-weight:900;pointer-events:none;z-index:25;white-space:nowrap;animation:rise .9s ease-out forwards}
.float.pts{font-size:1.4em;color:#22682A;text-shadow:0 2px 0 #fff,0 0 8px #fff}
.float.bad,.float.reveal{font-size:1.15em;padding:.2em .6em;border-radius:.6em;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.2);animation:hold 1.7s ease-out forwards}
.float.bad{color:#B23A22}.float.reveal{color:#7A5600;background:#FFF3C4}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%)}}
@keyframes hold{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}12%{opacity:1;transform:translate(-50%,-80%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%)}}

/* the magnifier */
.loupe-veil{position:fixed;inset:0;z-index:15;background:rgba(30,58,95,.35);display:grid;place-items:center;padding:.6em}
.loupe{position:relative;width:min(440px,94vw);height:min(320px,78vh);background:var(--sea);border-radius:1.2em;border:4px solid #fff;
  box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden;animation:lz .22s cubic-bezier(.3,1.4,.5,1)}
@keyframes lz{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.loupe .map{position:absolute;inset:0}
.loupe .st{stroke-width:2px}
.loupe-say{position:absolute;left:.6em;top:.5em;margin:0;background:#fff;border-radius:999px;padding:.2em .8em;font-weight:900;pointer-events:none;z-index:1}
.loupe-x{position:absolute;right:.4em;top:.4em;width:44px;height:44px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.loupe-x svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round}

@media (max-height:480px){
  .top{padding-top:max(.25em,env(safe-area-inset-top));padding-bottom:.2em}
  #menu{width:44px;height:44px}
  .ask{padding:.1em .9em .15em;display:flex;align-items:baseline;gap:.4em}
  .ask-lead{display:inline;font-size:.85em}
  .ask-name{display:inline;font-size:1.45em}
  .hearts{font-size:1.25em}
  .stage{padding-top:.2em}
}
@media (max-width:420px){.ask{padding:.2em .7em}.ask-name{font-size:1.5em}.side{min-width:3.6em}.hearts{font-size:1.2em}}
/* the result card on a phone on its side: one row of buttons, so the score stays in view */
@media (max-height:480px){
  .card:has(.starline),.card:has(#over-home){width:min(34em,100%)}
  .card:has(.starline) .actions,.card:has(#over-home) .actions{flex-wrap:nowrap;gap:.5em}
  .card .actions .pill{padding:.45em 1.1em;min-height:44px;font-size:1em;white-space:nowrap}
  .card .who,.card .where{font-size:1em}
}