* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #1a4566;
  overflow: hidden;
  touch-action: none;
}

body {
  display: grid;
  place-items: center;
  font-family: "Courier New", Courier, monospace;
  color: #fff;
}

#frame {
  position: relative;
  width: min(100vw, calc(100dvh * 480 / 720));
  height: min(100dvh, calc(100vw * 720 / 480));
  container-type: size;
  background: #6d94b4;
  overflow: hidden;
  user-select: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6% 7% 0;
  text-align: center;
  pointer-events: none;
  font-size: 4.8cqw;
}

.panel[hidden] {
  display: none;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 1.85em;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0.07em 0.07em 0 #17324d;
}

h2 {
  font-size: 1.7em;
  line-height: 1;
}

.panel p {
  margin-top: 0.45em;
  font-size: 0.95em;
  line-height: 1.25;
  text-shadow: 0.06em 0.06em 0 #17324d;
}

.hint {
  max-width: 18em;
  font-size: 0.86em;
}

button {
  pointer-events: auto;
  margin-top: 0.8em;
  padding: 0.55em 0.8em;
  min-height: 2.4em;
  border: 0.16em solid #17324d;
  background: #fff;
  color: #17324d;
  font: inherit;
  font-weight: 700;
  font-size: 1.05em;
  box-shadow: 0.14em 0.14em 0 #17324d;
  cursor: pointer;
}

button:active {
  transform: translate(0.08em, 0.08em);
  box-shadow: 0.06em 0.06em 0 #17324d;
}

button:focus-visible {
  outline: 0.14em solid #ffe56b;
  outline-offset: 0.12em;
}

#start-screen {
  justify-content: center;
  padding: 11% 4% 12%;
  font-size: 3.55cqw;
}

#cup-total-badge {
  position: absolute;
  top: 1.6%;
  left: 2.6%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#cup-total-count {
  margin: 0;
  font-size: clamp(12px, 2.5cqw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgba(23, 50, 77, 0.78);
  text-shadow: 0 1px 0 rgba(244, 249, 255, 0.45);
}

#cup-unlock-track {
  height: 2px;
  margin-top: 3px;
  overflow: hidden;
  background: rgba(23, 50, 77, 0.22);
}

#cup-unlock-fill {
  width: 0;
  height: 100%;
  background: rgba(23, 50, 77, 0.62);
  transition: width 320ms ease-out;
}

#cup-unlock-fill.is-instant {
  transition: none;
}

#start-screen h1 {
  font-size: 1.45em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
}

#start-screen .subtitle {
  margin-top: 0.28em;
  font-size: 0.82em;
}

#start-screen .card {
  width: min(94%, max(16.4em, 320px));
  max-height: 96%;
  padding: 0.7em 0.7em 0.75em;
  border-width: 0.1em;
  box-shadow: 0.08em 0.08em 0 rgba(23, 50, 77, 0.28);
}

#start-screen .card p {
  margin-top: 0;
  font-size: 0.92em;
}

.person-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 0.28em;
  gap: 0.22em;
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 0;
  gap: 0.08em;
}

.choice-vehicle {
  margin-top: 0.4em;
}

#start-screen .card .choice-label {
  height: 14px;
  margin: 0;
  font-size: max(11px, 0.52em);
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.14em;
  color: rgba(23, 50, 77, 0.5);
  text-transform: uppercase;
}

.choice-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-rows: 44px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  min-height: 44px;
}

#start-screen .choice-nav p {
  grid-column: 2;
  width: 100%;
  height: 22px;
  margin: 0;
  overflow: hidden;
  font-size: max(17px, 1.05em);
  font-weight: 700;
  line-height: 22px;
  color: #12283f;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#start-screen .choice-nav button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(23, 50, 77, 0.38);
  border-radius: 2px;
  background: #e7eef5;
  box-shadow: none;
  color: #17324d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

#start-screen .choice-nav button.is-hint {
  animation: nav-hint 2s ease-in-out infinite;
}

@keyframes nav-hint {
  0%,
  100% {
    background-color: #e7eef5;
    border-color: rgba(23, 50, 77, 0.38);
    color: #17324d;
    box-shadow: inset 0 0 0 1px rgba(23, 50, 77, 0.12);
  }
  50% {
    background-color: #ffe56b;
    border-color: #17324d;
    color: #0c2236;
    box-shadow: inset 0 0 0 1px #17324d, 0 0 0 3px rgba(255, 229, 107, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  #start-screen .choice-nav button.is-hint {
    animation: none;
    background-color: #ffeeb0;
    border-color: #17324d;
  }
}

#start-screen .choice-nav button:hover {
  background: #d3e0ec;
  border-color: #17324d;
}

#start-screen .choice-nav button:focus-visible {
  outline: 2px solid #ffe56b;
  outline-offset: 2px;
}

#start-screen .choice-nav button.is-hint:hover,
#start-screen .choice-nav button.is-hint:focus-visible,
#start-screen .choice-nav button.is-hint:active {
  animation: none;
}

#start-screen .choice-nav button:active {
  transform: none;
  background: #b7cbe0;
  border-color: #17324d;
  box-shadow: inset 0 0 0 1px #17324d;
  color: #17324d;
}

.choice-nav button.is-inert {
  visibility: hidden;
}

.choice-nav button:first-of-type {
  grid-column: 1;
}

.choice-nav button:last-of-type {
  grid-column: 3;
}

#skin-preview.is-locked,
#skin-name.is-locked {
  opacity: 0.38;
}

#start-screen .card .outfit-note {
  height: 14px;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.03em;
  color: rgba(23, 50, 77, 0.58);
  white-space: nowrap;
}

.vehicle-frame {
  position: relative;
  width: 8.8em;
  height: 3.14em;
  flex: 0 0 auto;
  touch-action: none;
}

#character-preview {
  touch-action: none;
  opacity: 1;
  transition: opacity 180ms linear;
}

#character-preview.is-fading {
  opacity: 0.42;
}

@media (prefers-reduced-motion: reduce) {
  #character-preview {
    transition: none;
  }
}

#vehicle-lock {
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid #17324d;
  border-radius: 2px;
  background: #f4f9ff;
  box-shadow: none;
  color: #17324d;
  line-height: 0;
}

#vehicle-lock[hidden] {
  display: none;
}

#vehicle-lock:hover {
  background: #e7eef5;
}

#vehicle-lock:focus-visible {
  outline: 2px solid #ffe56b;
  outline-offset: 1px;
}

#vehicle-lock:active {
  transform: none;
  background: #d5e2ef;
  box-shadow: none;
}

#control-hint {
  position: absolute;
  top: 7.2%;
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: 92%;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 2.7cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(23, 50, 77, 0.78);
  text-align: center;
  text-shadow: 0 1px 0 rgba(244, 249, 255, 0.7);
  white-space: nowrap;
}

#control-hint[hidden] {
  display: none;
}

#vehicle-toast {
  position: absolute;
  left: 50%;
  bottom: 6.2%;
  z-index: 6;
  width: max-content;
  max-width: 92%;
  margin: 0;
  padding: 0.4em 0.75em;
  transform: translateX(-50%);
  border: 0.12em solid #17324d;
  background: #f4f9ff;
  color: #17324d;
  font-family: "Courier New", Courier, monospace;
  font-size: 3.1cqw;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-shadow: none;
  pointer-events: none;
  visibility: hidden;
  box-shadow: 0.08em 0.08em 0 rgba(23, 50, 77, 0.28);
}

#vehicle-toast.is-visible {
  visibility: visible;
}

#start-btn,
#pause-actions button,
#again-btn {
  transition: background-color 120ms linear, box-shadow 120ms linear;
}

#start-btn {
  margin-top: 0.72em;
  padding-left: 0.4em;
  padding-right: 0.4em;
  font-size: 1em;
  line-height: 1.15;
  white-space: nowrap;
}

#start-btn:hover,
#pause-actions button:hover,
#again-btn:hover {
  background: #e7eef5;
}

#start-btn:focus-visible,
#pause-actions button:focus-visible,
#again-btn:focus-visible {
  outline: 2px solid #ffe56b;
  outline-offset: 2px;
}

#start-btn:active,
#pause-actions button:active,
#again-btn:active {
  transform: none;
  background: #d5e2ef;
  box-shadow: inset 0 0 0 2px #17324d;
}

#player-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-height: 32px;
  margin-top: 0.16em;
}

#player-line[hidden] {
  display: none;
}

#player-name {
  max-width: 8em;
  overflow: hidden;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(23, 50, 77, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#name-edit,
#player-line .text-btn {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  min-width: 44px;
  min-height: 32px;
  padding: 0.05em 0.4em;
  border-width: 1px;
  background: transparent;
  box-shadow: none;
  font-size: 0.72em;
  font-weight: 500;
}

#name-edit:active,
#player-line .text-btn:active {
  transform: none;
  box-shadow: none;
}

#menu-return-btn,
.text-btn {
  margin-top: 0.42em;
  min-height: 44px;
  padding: 0.45em 0.8em;
  border-width: 1px;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
  color: rgba(23, 50, 77, 0.82);
}

#menu-return-btn:hover,
.text-btn:hover {
  background: rgba(23, 50, 77, 0.06);
}

#menu-return-btn:focus-visible,
.text-btn:focus-visible {
  outline: 2px solid #ffe56b;
  outline-offset: 2px;
}

#menu-return-btn:active,
.text-btn:active {
  transform: none;
  background: rgba(23, 50, 77, 0.1);
  box-shadow: none;
}

#name-screen,
#board-screen {
  z-index: 8;
  justify-content: center;
  padding: 0 7%;
  pointer-events: auto;
  background: rgba(26, 69, 102, 0.28);
}

#name-screen {
  font-size: 4.2cqw;
}

.name-card h2,
.board-card h2 {
  font-size: 1.25em;
}

#name-input {
  width: 100%;
  margin-top: 0.7em;
  min-height: 44px;
  padding: 0.25em 0.4em;
  border: 0.12em solid #17324d;
  background: #fff;
  color: #17324d;
  font: inherit;
  font-weight: 700;
  text-align: center;
}

#name-error {
  min-height: 2.4em;
  margin-top: 0.35em;
  font-size: 0.78em;
  line-height: 1.25;
  color: #8a3b2a;
}

#board-screen {
  font-size: 3.5cqw;
}

.board-card {
  width: min(100%, 18em);
  max-height: 92%;
  overflow: auto;
}

#board-scope,
#board-date,
#score-save-note {
  font-size: 0.82em;
  color: rgba(23, 50, 77, 0.72);
}

#board-list {
  min-height: 4.6em;
  max-height: 14em;
  margin: 0.45em 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  text-align: left;
}

#board-empty {
  min-height: 4.6em;
  margin-top: 0.45em;
}

#score-save-note:empty {
  display: none;
}

#start-screen.blocking {
  pointer-events: auto;
  background: rgba(23, 50, 77, 0.45);
}

#skin-preview {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  background: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#character-preview {
  display: block;
  width: 6.5em;
  height: 6.5em;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
  image-rendering: auto;
}

#pause-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 0.72em;
  gap: 0.42em;
}

#pause-actions[hidden] {
  display: none;
}

#pause-actions button {
  width: 100%;
  margin-top: 0;
}

#menu-btn {
  position: absolute;
  top: 8.2%;
  right: 2.2%;
  z-index: 4;
  margin: 0;
  min-height: 0;
  padding: 0.35em 0.6em;
  font-size: 3.2cqw;
}

#menu-btn[hidden] {
  display: none;
}

#gameover-screen {
  justify-content: center;
  padding: 0 6%;
  font-size: 3.6cqw;
}

#gameover-screen h2 {
  font-size: 0.95em;
  font-weight: 700;
}

#round-caption,
#podium-title,
#podium-scope {
  font-size: 0.78em;
  color: rgba(23, 50, 77, 0.72);
}

#round-caption {
  margin-top: 0.35em;
}

#final-score {
  margin-top: 0;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
}

#podium-title {
  margin-top: 0.45em;
  font-weight: 700;
  color: #17324d;
}

#podium-scope {
  margin-top: 0.12em;
}

#podium-list {
  min-height: 15em;
  margin: 0.28em 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

#gameover-screen .gameover-card {
  width: 100%;
  max-height: 94%;
  overflow-y: auto;
  padding: 0.65em 0.8em;
  touch-action: pan-y;
}

#podium-list li {
  min-height: 1.5em;
  font-size: 1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#podium-list li.score-empty {
  display: block;
  font-weight: 400;
}

#gameover-screen #all-time-record {
  min-height: 2.4em;
  padding: 0.4em 0;
  border-top: 1px solid rgba(23, 50, 77, 0.2);
  font-size: 0.82em;
  overflow-wrap: anywhere;
}

.board-tabs {
  display: flex;
  gap: 0.4em;
}

.board-tabs button {
  flex: 1;
  width: auto;
  min-height: 44px;
  font-size: 0.7em;
  padding: 0.3em;
  box-shadow: none;
}

.board-tabs button[aria-pressed="true"] {
  background: #17324d;
  color: #fff;
}

#podium-list li,
#board-list li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr) auto;
  gap: 0.35em;
  align-items: center;
  padding: 0.18em 0.28em;
  font-size: 0.92em;
}

#podium-list li span:nth-child(2),
#board-list li span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#podium-list li.is-loading {
  min-height: 1.45em;
  background: rgba(23, 50, 77, 0.06);
}

#podium-list li.is-self,
#board-list li.is-self {
  background: rgba(255, 229, 107, 0.55);
}

#podium-list li.is-outside {
  margin-top: 0.2em;
  box-shadow: inset 0 1px 0 rgba(23, 50, 77, 0.16);
}

#podium-list li.is-improved {
  animation: best-fade 1.1s ease-out;
}

@keyframes best-fade {
  from { background: rgba(255, 229, 107, 0.95); }
  to { background: rgba(255, 229, 107, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  #podium-list li.is-improved {
    animation: none;
  }
}

#gameover-screen #again-btn {
  min-height: 48px;
  margin-top: 0.4em;
  font-size: 1.05em;
}

.gameover-secondary {
  display: flex;
  flex-direction: row;
  gap: 0.28em;
  margin-top: 0.35em;
}

.gameover-secondary .text-btn {
  width: 100%;
  margin-top: 0;
  min-height: 44px;
  padding: 0.35em 0.25em;
  font-size: 0.82em;
}

#gameover-screen #score-save-note {
  display: block;
  min-height: 1.25em;
  margin-top: 0.15em;
  font-size: 0.75em;
}

.card {
  pointer-events: auto;
  width: min(100%, 16em);
  padding: 0.9em 0.8em 1em;
  background: #f4f9ff;
  color: #17324d;
  border: 0.16em solid #17324d;
  box-shadow: 0.22em 0.22em 0 #17324d;
}

.card p {
  text-shadow: none;
  font-size: 1em;
}

.card button {
  width: 100%;
}

#sound-btn {
  position: absolute;
  right: 2.2%;
  bottom: 2.4%;
  z-index: 7;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  min-height: 0;
  border-width: 1px;
  box-shadow: none;
  background: rgba(244, 249, 255, 0.9);
  font-size: 18px;
  line-height: 1;
}

#sound-btn:hover {
  background: #e7eef5;
}

#sound-btn:focus-visible {
  outline: 2px solid #ffe56b;
  outline-offset: 2px;
}

#sound-btn:active {
  transform: none;
  box-shadow: none;
  background: #d5e2ef;
}

#sound-btn[aria-pressed="false"] {
  color: rgba(23, 50, 77, 0.45);
}