/* Furball Rodeo: the page around the room. Every colour, font and size that
   matters comes from tokens.css; there are no literal colours here, and
   scripts/test/contrast.test.mjs checks that. Layout: one screen. A petrol HUD
   strip on top, the room filling the rest, cards over a scrim for the title
   and the end of a round. */
html,body{height:100%}
body{
  margin:0;background:var(--petrol);color:var(--paper);
  font-family:var(--font-body);overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
#app{height:100%;display:flex;flex-direction:column}

.hud{
  display:flex;align-items:flex-end;gap:18px;
  padding-block:8px 10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  background:var(--petrol);
}
.stat{display:flex;flex-direction:column;gap:3px;min-width:0}
.lab{font:600 10px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.val{font:400 30px/1 var(--font-display);color:var(--marigold);font-variant-numeric:tabular-nums}
.val.sm{font-size:22px;color:var(--paper)}
.combo{align-self:center;background:var(--marigold);color:var(--petrol);font:400 18px/1 var(--font-display);padding:6px 11px;border-radius:999px}
.combo[hidden]{display:none}
.lives{margin-left:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.pips{display:flex;gap:6px;height:16px;align-items:center}
.pip{width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:var(--signal)}
.pip.gone{background:transparent;box-shadow:inset 0 0 0 2px var(--mist)}

#stage{position:relative;flex:1;min-height:0;background:var(--petrol)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

#banner{
  position:absolute;left:0;right:0;top:20%;text-align:center;pointer-events:none;
  font:400 46px/1 var(--font-display);color:var(--marigold);
  text-shadow:0 3px 0 var(--petrol),0 0 14px var(--petrol);
}
#banner[hidden]{display:none}
#banner.show{animation:bannerpop var(--dur-banner) ease-out both}
@keyframes bannerpop{0%{transform:scale(.6);opacity:0}15%{transform:scale(1.1);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.04)}}

.overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--scrim);overflow:auto;
  padding-block:16px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.overlay[hidden]{display:none}
.card{
  width:min(100%,360px);box-sizing:border-box;background:var(--paper);color:var(--petrol);
  padding:24px 22px 22px;border-radius:22px;box-shadow:0 18px 40px rgba(var(--petrol-rgb),.45);
}
.card[hidden]{display:none}
.kicker{margin:0;font:700 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--petrol-2)}
.card h1,.card h2{font:400 54px/.95 var(--font-display);margin:8px 0 12px;text-wrap:balance}
.card h2{font-size:46px}
.lead{margin:0 0 16px;font:400 16px/1.4 var(--font-body)}
.rules{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;margin:0}
.rules dt{align-self:start;background:var(--marigold);padding:4px 9px;border-radius:6px;font:700 12px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.rules dd{margin:0;font:400 15px/1.35 var(--font-body);min-width:0}
.result{display:flex;gap:22px;margin:4px 0 4px}
.result .stat .lab{color:var(--petrol-2)}
.result .val{color:var(--petrol)}
.cta{
  margin-top:18px;width:100%;min-height:var(--target);border:0;border-radius:999px;background:var(--petrol);color:var(--marigold);
  font:400 22px/1 var(--font-display);padding:16px;cursor:pointer;
}
.cta:focus-visible{outline:var(--focus-width) solid var(--focus-on-paper);outline-offset:3px}
.cta:active{transform:scale(.98)}

@media (prefers-reduced-motion:reduce){
  #banner.show{animation:none;opacity:1}
  .cta:active{transform:none}
}