/* Naija's Numbers: go-slow design. Colours and fonts are the tokens at the top. */

/* Layout: pixel scene fills the top of the screen; a phone-first answer box docks at the bottom and points fly up out of it */
:root{
  --ink:#080a16;
  --panel:rgba(9,11,24,.94);
  --edge:#e0592a;
  --cyan:#53d9ea;
  --gold:#f5c542;
  --text:#eef0f6;
  --muted:#9aa0b8;
  --line:#2c3150;
  --rare:#53d9ea;
  --epic:#c58bff;
  --legend:#ffb347;
  --display:"Silkscreen","Courier New",monospace;
  --body:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
body{background:var(--ink);color:var(--text);font-family:var(--body);overflow:hidden}
#stage{position:fixed;inset:0;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}

.hud{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.brand{display:grid;gap:4px;min-width:0}
.brand b{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;text-shadow:0 2px 0 #000}
.where{font-size:11px;color:var(--text);letter-spacing:.04em;text-shadow:0 1px 0 #000,0 0 6px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.where span{color:var(--cyan)}
.pips{display:flex;gap:6px;padding-top:2px}
.pip{width:14px;height:14px;border:1px solid rgba(255,255,255,.4);background:rgba(8,10,22,.6)}
.pip.now{border-color:var(--edge);box-shadow:0 0 0 1px var(--edge)}
.score{justify-self:end;text-align:right;font-family:var(--display);text-shadow:0 2px 0 #000;display:grid;justify-items:end;gap:4px}
.score strong{font-size:22px;font-variant-numeric:tabular-nums;transition:transform .15s}
.score strong.bump{transform:scale(1.25)}
.score small{font-size:10px;color:var(--muted);letter-spacing:.08em}
#wxChip{justify-self:start;font-family:var(--display);font-size:10px;letter-spacing:.1em;color:var(--text);background:rgba(8,10,22,.7);border:1px solid rgba(255,255,255,.3);padding:3px 6px;white-space:nowrap}
#nightChip{pointer-events:auto;font-family:var(--display);font-size:10px;letter-spacing:.1em;color:#fff3c4;background:rgba(60,44,10,.75);border:1px solid #f5c542;padding:4px 7px;display:flex;align-items:center;gap:6px;text-transform:uppercase}
#nightChip i{width:8px;height:8px;background:#ffd34d;box-shadow:0 0 6px #ffd34d;display:block;border-radius:50%}
#nightChip.night{color:#cfd8ff;background:rgba(20,26,60,.8);border-color:#6d7bd6}
#nightChip.night i{background:#eef1ff;box-shadow:inset -3px 0 0 #6d7bd6,0 0 6px #c9d4ff}
.chips{display:flex;gap:6px}
#muteChip{pointer-events:auto;font-family:var(--display);font-size:10px;letter-spacing:.1em;color:#d9f5e4;background:rgba(10,48,30,.75);border:1px solid #3fbf72;padding:4px 7px;display:flex;align-items:center;gap:6px;text-transform:uppercase}
#muteChip i{width:8px;height:8px;display:block;background:#3fbf72;clip-path:polygon(0 30%,35% 30%,75% 0,75% 100%,35% 70%,0 70%)}
#muteChip.off{color:#e3e5ea;background:rgba(40,42,50,.8);border-color:#8a8f99}
#muteChip.off i{background:#8a8f99}

#card{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);max-width:calc(100% - 32px);
  background:var(--panel);border:2px solid var(--edge);padding:12px 18px;display:flex;align-items:center;gap:12px;white-space:nowrap;font-family:var(--display);font-size:clamp(14px,4vw,20px);box-shadow:4px 4px 0 rgba(0,0,0,.45);letter-spacing:.08em;text-transform:uppercase;animation:drop .35s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes drop{from{transform:translate(-50%,-50%) scale(.85);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
#cardDot{width:1em;height:1em;display:block;flex:none}
#cardPts{font-size:inherit;margin:0;font-variant-numeric:tabular-nums}
#cardPts .a{color:var(--cyan)}#cardPts .t{color:var(--gold)}
/* the round chip takes its tier colour; the best answers glow */
#card[data-tier="best"]{border-color:#4fc3ff;box-shadow:0 0 22px rgba(79,195,255,.65),4px 4px 0 rgba(0,0,0,.45);animation:drop .35s cubic-bezier(.2,.9,.3,1.2) both,glow 1.2s ease-in-out .35s 3}
#card[data-tier="best"] #cardBand{color:#4fc3ff}
#card[data-tier="good"]{border-color:#4ade80}#card[data-tier="good"] #cardBand{color:#4ade80}
#card[data-tier="mid"]{border-color:#8a8fa0}#card[data-tier="mid"] #cardBand{color:#c4c8d4}
#card[data-tier="worst"]{border-color:#ff5a5a}#card[data-tier="worst"] #cardBand{color:#ff5a5a}
@keyframes glow{50%{box-shadow:0 0 34px rgba(79,195,255,.95),4px 4px 0 rgba(0,0,0,.45)}}

@keyframes pop{from{transform:translate(-50%,-50%) scale(.6);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}

/* start screen: logo in a box, gently bobbing, with the start button under it */
#intro{position:absolute;left:0;right:0;top:0;display:grid;justify-items:center;align-content:center;gap:22px;pointer-events:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#intro>*{pointer-events:auto}
.logoBox{position:relative;background:#2a3058;border:2px solid var(--edge);padding:14px 18px;box-shadow:0 0 0 3px #12152b,6px 6px 0 rgba(0,0,0,.45)}
.logoBox::before,.logoBox::after{content:"";position:absolute;width:6px;height:6px;background:var(--gold)}
.logoBox::before{left:-4px;top:-4px}.logoBox::after{right:-4px;bottom:-4px}
#logo{display:block;image-rendering:pixelated;max-width:min(78vw,420px);height:auto;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#startBtn{font-size:14px;padding:14px 22px;background:#151935;box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.howto{margin:0;font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
#panel{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-top:2px solid var(--edge);
  padding-block:12px calc(env(safe-area-inset-bottom,0px) + 12px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:620px;margin:0 auto;display:grid;gap:10px}
.qtop{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--muted)}
#clock{color:var(--text);font-size:14px;font-variant-numeric:tabular-nums}
#clock.low{color:#ff6b5a}
.bar{height:6px;background:#1a1e38;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;background:var(--cyan);transform-origin:left;display:block}
.bar b{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.5)}
/* question box: sits in the middle of the scene, between the top bar and the answer box */
#qBox{position:absolute;left:0;right:0;top:80px;bottom:200px;display:grid;place-items:center;pointer-events:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.qcard{width:min(560px,100%);background:var(--panel);border:2px solid var(--edge);box-shadow:0 0 0 3px #12152b,6px 6px 0 rgba(0,0,0,.45);
  padding:16px 18px;display:grid;gap:10px;pointer-events:auto;animation:rise .3s ease-out both;max-height:100%;overflow:auto;box-sizing:border-box}
#qCat{font-family:var(--display);font-size:11px;letter-spacing:.12em;color:var(--cyan);text-transform:uppercase}
#qText{margin:0;font-size:18px;line-height:1.4;font-weight:600;text-wrap:balance}
#qText .mag{color:var(--gold);white-space:nowrap}
form{display:flex;gap:8px}
#guess{flex:1;min-width:0;font:600 18px var(--body);color:var(--text);background:#0e1124;border:2px solid var(--line);padding:10px 12px;font-variant-numeric:tabular-nums}
#guess:focus{outline:none;border-color:var(--cyan)}
#guess.urgent{border-color:#ff3b3b;animation:urgent .6s ease-out infinite}
@keyframes urgent{0%{box-shadow:0 0 0 0 rgba(255,59,59,.75);background:#3a0f16}100%{box-shadow:0 0 0 10px rgba(255,59,59,0);background:#0e1124}}
#guessHint{font-size:11px;color:var(--muted);margin:0}
button{font-family:var(--display);font-size:12px;letter-spacing:.08em;color:var(--text);background:#151935;border:2px solid var(--edge);padding:10px 14px;cursor:pointer;text-transform:uppercase}
button:hover:not(:disabled){background:#1e2348}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button:disabled{opacity:.4;cursor:default}
.reveal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.wrap>*,#revView>*,.reveal div,.reveal strong{min-width:0}
.reveal strong{overflow-wrap:anywhere;display:block}
.reveal div{background:#0e1124;border:1px solid var(--line);padding:8px 10px;display:grid;gap:2px}
.reveal span{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.reveal strong{font-size:16px;font-variant-numeric:tabular-nums}
#revOff{margin:0;font-size:14px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
#revOff.pop{animation:offPop .35s cubic-bezier(.2,.9,.3,1.4)}
@keyframes offPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
/* answer reveal: guess, then answer, slide up one after the other */
@keyframes slideUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
/* closeness meter: centre is the answer; blue, green, grey, red outwards */
.meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-family:var(--display);font-size:9px;letter-spacing:.1em;color:var(--muted)}
.meter .bar{position:relative;height:12px;overflow:visible;background:linear-gradient(90deg,#ff4a4a 0%,#ff7a52 9%,#9a8f9a 22%,#7d8496 30%,#3fd27a 38%,#4fe0a0 44%,#4fc3ff 50%,#4fe0a0 56%,#3fd27a 62%,#7d8496 70%,#9a8f9a 78%,#ff7a52 91%,#ff4a4a 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.25)}
.meter .tk{position:absolute;top:0;bottom:0;width:1px;background:rgba(10,11,18,.45)}
/* a shine sweeps across the bar as the answer is revealed */
.meter .bar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 8%,transparent 16%);background-size:250% 100%;background-position:120% 0;opacity:0}
#revView.go .meter .bar::after{animation:sheen 1.1s ease-out .35s}
@keyframes sheen{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-30% 0}}
.meter .mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#fff}
#meterMark{position:absolute;top:-6px;left:50%;width:8px;height:22px;margin-left:-4px;border:2px solid #0a0b12;box-shadow:0 0 0 1px #fff}
#revView.go #meterMark{animation:pin .25s ease-out 1.3s}
@keyframes pin{50%{transform:translateY(-4px)}}
/* the edges of the screen flash the tier colour when the answer is revealed */
#tierFlash{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;box-shadow:inset 0 0 0 5px var(--tc,#fff),inset 0 0 60px 6px var(--tc,#fff)}
#tierFlash.on{animation:edge 1.1s ease-out forwards,hold 1.8s ease-in-out 1.1s infinite}
#tierFlash.on.best{animation:edge .55s ease-out 3 forwards,hold 1.8s ease-in-out 1.65s infinite}
@keyframes edge{0%{opacity:0}18%{opacity:1}100%{opacity:.5}}
@keyframes hold{0%,100%{opacity:.5}50%{opacity:.85}}
/* the guess and answer boxes pulse in the tier colour while you look at the result */
#revView.go .reveal div{border-color:var(--tc,var(--line));animation:slideUp .3s ease-out both,tablePulse 1.6s ease-in-out .6s infinite}
#revView.go .reveal div:last-child{animation-delay:.22s,.82s}
@keyframes tablePulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 14px 1px var(--tc,#fff),inset 0 0 10px rgba(255,255,255,.06)}}
/* worst answers give the scene a little shake */
#stage.shake{animation:shake .4s steps(8)}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-4px,1px)}40%{transform:translate(4px,-1px)}60%{transform:translate(-3px,0)}80%{transform:translate(2px,1px)}}
#revSrc{margin:2px 0 6px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:0}
/* plain source button: muted and thin so it blends in */
.srcBtn{flex:none;display:inline-block;font:inherit;font-size:11px;line-height:1;color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:4px 8px;background:transparent}
.srcBtn:hover,.srcBtn:focus-visible{color:var(--cyan);border-color:var(--cyan);outline:none}
.srcName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.detail .srcLine{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted)}
#pressOn{width:100%}

.fly{position:absolute;left:0;top:0;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;padding:4px 8px;background:var(--panel);border:1px solid var(--cyan);color:var(--cyan);pointer-events:none;white-space:nowrap;z-index:5}
.fly.time{border-color:var(--gold);color:var(--gold)}

#result{position:absolute;inset:0;display:grid;place-items:center;overflow:auto;background:rgba(5,6,16,.35);
  padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.res{width:min(460px,100%);background:var(--panel);border:1px solid var(--edge);padding:16px;display:grid;gap:10px;animation:rise .4s ease-out both}
.res .tap{font-size:11px;color:var(--muted);margin:0}
.res li{border-top:1px solid var(--line);display:grid}
.res .row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:16px 72px 1fr auto 12px;align-items:center;gap:10px;font-size:12px;padding:6px 2px;cursor:pointer;width:100%}
.res .row:hover{background:rgba(255,255,255,.04)}
.res .row:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.res .row i{font-style:normal;color:var(--muted);transition:transform .15s}
.res .row[aria-expanded="true"] i{transform:rotate(90deg)}
.res .detail{font-size:12px;line-height:1.5;padding:2px 2px 10px 26px;display:grid;gap:4px;color:var(--muted)}
.res .detail q{color:var(--text);quotes:none}
.res .detail .src{color:var(--cyan);word-break:break-word}
@keyframes rise{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.res h2{font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--muted);margin:0;font-weight:400}
.res .tot{font-family:var(--display);font-size:36px;margin:0;font-variant-numeric:tabular-nums}
.res .tot small{font-size:14px;color:var(--muted)}
.res ol{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.res li canvas{image-rendering:pixelated;justify-self:center;max-width:72px;height:auto}
.res li b{font-weight:600;font-variant-numeric:tabular-nums}
.res li .t{color:var(--gold)}
.res .far{font-size:12px;color:var(--muted);margin:0}.res .far span{color:var(--cyan)}
.res .contact{font-size:11px;color:var(--muted);margin:0;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);text-align:center;width:100%;overflow-wrap:anywhere}.res .contact a{color:var(--cyan);text-decoration:none;user-select:all}
.res .copied{font-size:12px;color:var(--cyan);margin:0}.res .next{font-size:12px;color:var(--muted);margin:0;text-align:center;line-height:1.6;font-variant-numeric:tabular-nums}
@media (max-width:600px){.hud{grid-template-columns:minmax(0,1fr) auto}.pips{grid-row:2;grid-column:1}.pips .pip{width:11px;height:11px}.score strong{font-size:18px}.brand b{font-size:12px}#qText{font-size:16px}.qcard{padding:12px 14px;gap:8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#tierFlash.on{opacity:.55}#guess.urgent{background:#3a0f16}}