:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #10253f;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 90vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.desktop-game-page #entirePage,
.desktop-game-page #page-header {
  width: 100%;
}

.game-shell {
  position: relative;
  margin: 45px auto 0;
  width: min(1024px, 100vw, calc(79vh * 1024 / 715));
  width: min(1024px, 100vw, calc(79dvh * 1024 / 715));
  aspect-ratio: 1024 / 715;
  margin-top: 45px;
}

.game-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.fireworks-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: 0;
  pointer-events: none;
  clip-path: inset(88px 0 160px 0);
}

.game-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shape-choice,
.control-button {
  cursor: pointer;
}

.screen-switch-button {
  cursor: pointer;
}

.screen-switch-button rect {
  fill: #ffffff;
  stroke: #7452c7;
  stroke-width: 2;
}

.screen-switch-button text {
  fill: #4d3296;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.screen-switch-button.is-active rect {
  fill: #7452c7;
}

.screen-switch-button.is-active text {
  fill: #ffffff;
}

.screen-switch-button.is-locked {
  cursor: not-allowed;
  opacity: 0.45;
}

.screen-question {
  fill: #24445f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.screen-question.is-success {
  fill: #16823c;
}

.screen-question.is-retry {
  fill: #b85a13;
}

.shape-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
}

.shape-label--sphere {
  fill: #ef8500;
}

.shape-label--prism {
  fill: #7434b5;
}

.shape-label--cube {
  fill: #0878c9;
}

.shape-label--cylinder {
  fill: #16823c;
}

.info-backdrop {
  fill: #10253f;
  fill-opacity: 0.72;
  cursor: pointer;
}

.info-panel > rect {
  fill: #fffdf3;
  stroke: #7452c7;
  stroke-width: 7px;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / 0.35));
}

.info-title,
.info-lead,
.info-copy,
.info-close-button text {
  font-family: Arial, Helvetica, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}

.info-title {
  fill: #5b3cb0;
  font-size: 36px;
  font-weight: 800;
}

.info-lead {
  fill: #24445f;
  font-size: 25px;
  font-weight: 700;
}

.info-copy {
  fill: #31546f;
  font-size: 21px;
  font-weight: 600;
}

.info-close-button {
  cursor: pointer;
}

.info-close-button rect {
  fill: #6dbf3f;
  stroke: #3d8d28;
  stroke-width: 4px;
}

.info-close-button text {
  fill: #ffffff;
  font-size: 25px;
  font-weight: 800;
}

.info-close-button:hover rect,
.info-close-button:focus rect {
  fill: #7dce4e;
  stroke: #ffffff;
}

.start-button {
  cursor: pointer;
  outline: none;
}

.start-button text {
  fill: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.45));
}

.start-button:hover,
.start-button:focus {
  filter: brightness(1.1);
}