:root {
  --accent: #9f00ff;
  --background: #000;
  --text: #fff;
  --header: #000;
}

body {
  font-family: "Cour";
  color: var(--text);
  background-color: var(--background);
  background-image: url(/images/stars.gif);
  align-items: center;
}

@font-face {
  font-family: 'Cour';
  src: url('/fonts/cour.woff2') format('woff2');
}

#boatContainer {
  width:50%;
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 3px inset #9f00ff;
}

#boatGame {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-height: 100%;
  margin: auto;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.subheader {
  color:var(--header);
  font-weight:bold;
  letter-spacing:3px;
  padding:5px 0 5px 5px;
  background-color:var(--accent);
}

#main {
  display:flex;
  flex-direction:horizontal;
  gap: 6px;
  margin-top:3px;
}

#shop {
  flex:1;
  display: flex;
  flex-direction: column;
}

#upgrades {
  flex:1;
  display: flex;
  flex-direction: column;
}

#prestige {
  flex:1;
  display: flex;
  flex-direction: column;
}

.shopItem {
  background-color: var(--background);
  background-image: none;
  border: 3px inset #9f00ff;
  padding: 6px;
  margin: 3px 0;
}

.cost {
  color: #049b5a;
}

.cost.bad {
  color: #e24b4a;
}

#messageBox {
  background-color: var(--background);
  flex:1;
  height: 100px;
  overflow-y: auto;
  padding: 0 5px 5px 5px;
  border: 3px inset #9f00ff;
  margin: 5px 0;
}

.message {
  margin-top: 3px;
}

#savePopup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#savePopupInner {
  background: var(--background);
  border: 3px inset #9f00ff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 300px;
}

#saveString {
  width: 100%;
  resize: vertical;
  font-family: monospace;
  font-size: 0.75rem;
}

#top {
  display: flex;
  gap: 12px;
  align-items: center;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#pausePlay {
  color:var(--text);
}

#pausePlay.autoplay-blocked {
  animation: pulse 1.2s infinite;
}

#musicbox {
  margin-left:-5px;
  margin-bottom:5px;
  user-select: none;
}

#musicbox button {
  width:169px;
  height:auto;
  padding:5px 0;
  margin-bottom: 5px;
  background:black;
  border:3px inset var(--accent);
  color:white;
}

#musicbox button:hover {
  cursor:pointer;
  background:var(--accent);
}

#musicbox button:active {
  transform: scale(0.95);
}

#musicContent {
  padding-top:10px;
  display: flex;
  flex-direction: column;
  color: var(--text);
  letter-spacing: 0;
  align-items: center;
}

#volumeSlider {
  margin:10px;
  width: 169px;
  height: 5px;
  background: var(--accent);
}

#volumeSlider::-webkit-slider-thumb {
  border-radius:0;
  border:3px inset var(--accent);
  width: 10px;
  height: 10px;
  background: var(--accent);
  cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
  border-radius:0;
  border:3px inset var(--accent);
  width: 10px;
  height: 10px;
  background: var(--accent);
  cursor: pointer;
}

#songname {
  font-size:12px;
  color:var(--text);
  padding-bottom:5px;
  text-decoration: none;
}