html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0c0c10;
  color: #ddd;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  width: var(--game-w, 320px);
  height: var(--game-h, 180px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  outline: none;
  box-shadow: 0 0 24px #000;
}

#error {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  display: none;
  white-space: pre-wrap;
  background: #2a0a0a;
  color: #ffb3b3;
  padding: 8px;
  border: 1px solid #ff6060;
  font-size: 12px;
  z-index: 999;
  max-height: 40vh;
  overflow: auto;
}

.mobileUnsupported {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(180deg, #111322 0%, #26213a 58%, #1a1424 100%);
  font-family: sans-serif;
}

.mobileUnsupported__cow {
  width: clamp(96px, 34vw, 168px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.mobileUnsupported__title {
  margin: 0;
  color: #fff0a8;
  font-size: clamp(26px, 8vw, 48px);
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.1;
  text-shadow: 2px 2px 0 rgba(6, 4, 10, 0.7);
}

.mobileUnsupported__message {
  margin: 0;
  max-width: 28ch;
  color: #d8d7ef;
  font-size: clamp(16px, 4.8vw, 24px);
  line-height: 1.35;
  text-shadow: 1px 1px 0 rgba(6, 4, 10, 0.7);
}

.shareOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 10, 0.64);
}

.sharePanel {
  width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid #ffe89a;
  border-radius: 8px;
  background: #111820;
  box-shadow: 0 18px 48px #000c;
}

.sharePanel h1 {
  margin: 0 0 12px;
  color: #fff1a8;
  font-size: 16px;
  letter-spacing: 0;
}

.sharePanel input {
  box-sizing: border-box;
  width: 100%;
  padding: 9px;
  border: 1px solid #3c5260;
  border-radius: 5px;
  background: #070b10;
  color: #e8f0f4;
  font: inherit;
}

.shareActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.shareActions button {
  flex: 1 1 0;
  padding: 9px 10px;
  border: 1px solid #5c7480;
  border-radius: 6px;
  background: #22313a;
  color: #f5f1dd;
  font: inherit;
  cursor: pointer;
}

.shareActions button:hover {
  border-color: #fff1a8;
  background: #30424d;
}