:root {
  --frame-bg-top: #22445d;
  --frame-bg-bottom: #06131d;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

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

body {
  display: block;
  overflow: hidden;
  background: radial-gradient(
    circle at 20% 10%,
    #3f6f91 0%,
    #17324a 35%,
    #06131d 100%
  );
  font-family:
    "Avenir Next Condensed", "Trebuchet MS", "Arial Narrow", sans-serif;
  overscroll-behavior: none;
  color: var(--white);
}

.game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: linear-gradient(
    180deg,
    var(--frame-bg-top),
    var(--frame-bg-bottom)
  );
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.qr-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 124px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(12, 31, 46, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

.qr-panel[hidden] {
  display: none;
}

.qr-title {
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.6px;
  font-weight: 700;
}

.qr-image {
  width: 108px;
  height: 108px;
  display: block;
  border-radius: 6px;
  background: #ffffff;
}

.qr-url {
  color: #ffffff;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-align: center;
}

.credit-link {
  position: absolute;
  left: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
  z-index: 20;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: left;
  font-size: clamp(16px, 2.4vw, 12px);
  letter-spacing: 0.9px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.credit-link span {
  display: block;
  white-space: nowrap;
}

.credit-link:active {
  opacity: 0.82;
}