/* Snapclaw — underwater typing platformer */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #03111f;
  display: grid;
  place-items: center;
  font-family: Georgia, "Iowan Old Style", serif;
}

.stage {
  position: relative;
  /* never larger than the viewport in EITHER direction */
  width: min(1280px, 100vw, calc(100vh * 16 / 9));
  width: min(1280px, 100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #0b2f4a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  transition: filter .4s ease;   /* slow-mo grayscale eases in and out */
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 40px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(16, 60, 92, .96),
      rgba(4, 24, 42, .97));
  color: #dff2ff;
}
.overlay.hidden { display: none; }

.kicker {
  font-style: italic;
  letter-spacing: .2em;
  font-size: 15px;
  color: #7fb6d9;
}

.overlay h1 {
  font-size: 72px;
  letter-spacing: .08em;
  color: #ffdf6b;
  text-shadow: 0 0 26px rgba(255, 190, 90, .35), 3px 3px 0 rgba(0, 0, 0, .4);
}

#game-title {
  font-size: 52px;
  line-height: 1.1;
}

/* lobby bubbles drifting up behind the title */
.overlay { overflow: hidden; }
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles i { pointer-events: auto; cursor: pointer; }
.bub-burst {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(210, 238, 255, .85);
  transform: translate(-50%, -50%);
  animation: bub-burst .35s ease-out forwards;
}
@keyframes bub-burst {
  to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
.bubbles i {
  position: absolute;
  bottom: -50px;
  border-radius: 50%;
  border: 1.5px solid rgba(210, 238, 255, .45);
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .5),
      rgba(190, 228, 255, .08) 45%, rgba(190, 228, 255, .03));
  animation: bub-rise linear infinite;
}
.bubbles i:nth-child(1)  { left: 6%;  width: 14px; height: 14px; animation-duration: 9s;  animation-delay: 0s; }
.bubbles i:nth-child(2)  { left: 14%; width: 26px; height: 26px; animation-duration: 13s; animation-delay: 2.2s; }
.bubbles i:nth-child(3)  { left: 21%; width: 10px; height: 10px; animation-duration: 8s;  animation-delay: 4.6s; }
.bubbles i:nth-child(4)  { left: 29%; width: 20px; height: 20px; animation-duration: 12s; animation-delay: 1.1s; }
.bubbles i:nth-child(5)  { left: 36%; width: 8px;  height: 8px;  animation-duration: 7.5s; animation-delay: 5.4s; }
.bubbles i:nth-child(6)  { left: 44%; width: 30px; height: 30px; animation-duration: 15s; animation-delay: 3s; }
.bubbles i:nth-child(7)  { left: 52%; width: 12px; height: 12px; animation-duration: 8.6s; animation-delay: 6.8s; }
.bubbles i:nth-child(8)  { left: 59%; width: 22px; height: 22px; animation-duration: 12.6s; animation-delay: 0.6s; }
.bubbles i:nth-child(9)  { left: 66%; width: 9px;  height: 9px;  animation-duration: 7.8s; animation-delay: 3.8s; }
.bubbles i:nth-child(10) { left: 73%; width: 17px; height: 17px; animation-duration: 10.5s; animation-delay: 5.1s; }
.bubbles i:nth-child(11) { left: 80%; width: 27px; height: 27px; animation-duration: 14s; animation-delay: 1.8s; }
.bubbles i:nth-child(12) { left: 87%; width: 11px; height: 11px; animation-duration: 8.2s; animation-delay: 6.2s; }
.bubbles i:nth-child(13) { left: 93%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: 2.9s; }
.bubbles i:nth-child(14) { left: 48%; width: 15px; height: 15px; animation-duration: 9.6s; animation-delay: 7.7s; }

@keyframes bub-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: .9; }
  100% { transform: translateY(-115vh) translateX(14px); opacity: 0; }
}

.sub { max-width: 560px; font-size: 19px; line-height: 1.5; color: #bcdff2; }

.keys { font-size: 15px; color: #7fb6d9; }
.keys span {
  display: inline-block;
  border: 1px solid #35678c;
  border-radius: 6px;
  padding: 2px 10px;
  background: #0d2c47;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

button {
  font-family: inherit;
  font-size: 20px;
  font-style: italic;
  padding: 14px 42px;
  border: 2px solid #ffdf6b;
  border-radius: 999px;
  background: #ffdf6b;
  color: #08202f;
  cursor: pointer;
  transition: transform .15s ease, background .3s ease, color .3s ease;
}
button:hover { background: transparent; color: #ffdf6b; transform: translateY(-2px); }

/* mobile */
canvas { touch-action: none; }
#kb-catch {
  position: fixed;
  opacity: 0;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
  border: 0;
  padding: 0;
}
#kb-btn {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  padding: 12px 30px;
  z-index: 6;
}
#kb-btn.hidden { display: none; }
@media (max-width: 700px) {
  .overlay h1 { font-size: 30px; }
  #game-title { font-size: 26px; }
  .sub { font-size: 14px; }
  .keys { font-size: 11px; }
  .overlay { gap: 10px; padding: 16px; }
  button { font-size: 16px; padding: 10px 26px; }
}

/* short screens: overlays scroll instead of clipping */
@media (max-height: 520px) {
  .overlay { overflow-y: auto; justify-content: flex-start; padding: 14px; gap: 8px; }
  .overlay h1 { font-size: 24px; }
  .sub { font-size: 13px; }
  .keys { display: none; }
  .hs-board { max-height: 90px; }
}

/* portrait phones: rotate the whole game to play landscape.
   position:fixed keeps the oversized layout box OUT of page flow — if it
   overflows, mobile browsers inflate the layout viewport and every vw/vh
   size goes wrong. */
@media (orientation: portrait) and (pointer: coarse) {
  html, body { overflow: hidden; }
  .stage {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(1280px, 100vh, calc(100vw * 16 / 9));
    width: min(1280px, 100dvh, calc(100vw * 16 / 9));
    transform: translate(-50%, -50%) rotate(90deg);
  }
}