:root {
  font-family: "Trebuchet MS", sans-serif;
  color: #233d35;
  background: #b9d8d1;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; }
[hidden] { display: none !important; }

button {
  border: 0;
  cursor: pointer;
  font: 700 11px/1 "Trebuchet MS", sans-serif;
  letter-spacing: .22em;
  color: #fffdf4;
  background: #315d4d;
  padding: 19px 35px;
  border-radius: 4px;
  box-shadow: 0 5px 0 #24473b, 0 12px 30px #233d3530;
  transition: transform .18s, background .18s, box-shadow .18s;
}
button:hover { background: #427764; transform: translateY(-2px); box-shadow: 0 7px 0 #24473b, 0 15px 32px #233d3540; }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 #24473b; }
button:focus-visible { outline: 3px solid #e8ba72; outline-offset: 5px; }
#start-screen { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8vh; pointer-events: none; }
#start-screen button { pointer-events: auto; min-width: 150px; }
#counter {
  position: absolute; top: 28px; left: 30px;
  padding: 12px 15px; border-radius: 4px;
  background: rgba(253, 251, 236, .92); box-shadow: 0 3px 14px #263e3220;
  color: #476254; font-size: 10px; font-weight: 700; letter-spacing: .16em;
}
#counter span { color: #273f35; font-size: 15px; letter-spacing: 0; margin-left: 9px; }
#incident-flash { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 #c76c55; opacity: 0; }
#incident-flash.flash { animation: incident .8s ease-out; }
@keyframes incident { 0% { opacity: .8; box-shadow: inset 0 0 0 9px #c76c55; } 100% { opacity: 0; box-shadow: inset 0 0 0 2px #c76c55; } }
#result { position: absolute; inset: 0; display: grid; place-items: center; background: #243f3460; }
.result-card { position: relative; z-index: 2; text-align: center; background: #fffdf2; padding: 42px 60px 46px; border-radius: 5px; box-shadow: 0 20px 70px #1e392c40; min-width: 310px; }
#result-kicker { color: #a8784f; font-size: 10px; font-weight: 700; letter-spacing: .22em; margin: 0 0 14px; }
#result-title { font: 400 42px/1.1 Georgia, serif; margin: 0 0 12px; }
#result-detail { color: #78877b; font-size: 13px; margin: 0 0 26px; }
#result button { padding: 16px 27px; }
#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -20px; width: 8px; height: 12px; animation: fall 3.2s ease-in forwards; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(720deg); opacity: .5; } }