/* The Adventures of Monkey D. Lucas — pirate aim trainer */

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

html, body {
  height: 100%;
  /* warm lantern-lit dark — the letterbox bands on phones read as part of
     the scene instead of dead black */
  background: radial-gradient(ellipse at 50% 42%, #33221а 0%, #241710 45%, #140d08 100%);
  background: radial-gradient(ellipse at 50% 42%, #332218 0%, #241710 45%, #140d08 100%);
  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: #1d2f45;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .75);
  cursor: none;
}

.overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 40px;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(64, 42, 24, .96),
      rgba(22, 14, 9, .97));
  color: #f3e6cf;
}
.overlay.hidden { display: none; }

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

.overlay h1 {
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: .05em;
  color: #ffc94d;
  text-shadow: 0 0 26px rgba(255, 170, 60, .3), 3px 3px 0 rgba(0, 0, 0, .45);
}

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

.keys { font-size: 15px; color: #c9a36a; }
.keys span {
  display: inline-block;
  border: 1px solid #7a5a33;
  border-radius: 6px;
  padding: 2px 10px;
  background: #2b1c10;
  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 #ffc94d;
  border-radius: 999px;
  background: #ffc94d;
  color: #241505;
  cursor: pointer;
  transition: transform .15s ease, background .3s ease, color .3s ease;
}
button:hover { background: transparent; color: #ffc94d; transform: translateY(-2px); }

/* drifting clouds behind the lobby title */
.clouds { position: absolute; inset: 0; pointer-events: none; }
.clouds i {
  position: absolute;
  left: -30%;
  border-radius: 999px;
  background: rgba(240, 220, 190, .07);
  box-shadow: 40px 8px 0 10px rgba(240, 220, 190, .05),
    -34px 10px 0 6px rgba(240, 220, 190, .045);
  animation: cloud-drift linear infinite;
}
.clouds i:nth-child(1) { top: 12%; width: 130px; height: 30px; animation-duration: 42s; animation-delay: -6s; }
.clouds i:nth-child(2) { top: 24%; width: 90px;  height: 22px; animation-duration: 55s; animation-delay: -25s; }
.clouds i:nth-child(3) { top: 38%; width: 150px; height: 34px; animation-duration: 48s; animation-delay: -38s; }
.clouds i:nth-child(4) { top: 55%; width: 100px; height: 24px; animation-duration: 60s; animation-delay: -12s; }
.clouds i:nth-child(5) { top: 68%; width: 140px; height: 30px; animation-duration: 46s; animation-delay: -30s; }
.clouds i:nth-child(6) { top: 82%; width: 80px;  height: 20px; animation-duration: 65s; animation-delay: -50s; }

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(175vw); }
}

/* high scores */
.hs { display: flex; gap: 10px; }
.hs input {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  padding: 10px 14px;
  width: 240px;
  border: 1px solid #7a5a33;
  border-radius: 8px;
  background: #2b1c10;
  color: #f3e6cf;
}
.hs input:focus { outline: 2px solid #ffc94d; }
.hs button {
  font-size: 16px;
  padding: 10px 22px;
}
.hs-boards { display: flex; gap: 40px; }
.hs-boards.compact .hs-board { font-size: 12px; max-height: 118px; min-width: 240px; }
.hs-h {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c9a36a;
  margin-bottom: 6px;
}
.hs-board {
  list-style: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  color: #e7d2ac;
  min-width: 280px;
  max-height: 180px;
  overflow-y: auto;
}
.hs-board li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 10px;
  border-radius: 6px;
}
.hs-board li.me { background: rgba(255, 201, 77, .15); color: #ffc94d; }
.hs-board li .n::before { content: counter(hs) ". "; }
.hs-board li { counter-increment: hs; }
.hs-board { counter-reset: hs; }
.hs-board.compact { font-size: 12.5px; max-height: 120px; min-width: 330px; }

button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
button:disabled:hover { background: #ffc94d; color: #241505; transform: none; }

/* mobile */
canvas { touch-action: none; }
@media (max-width: 700px) {
  .overlay h1 { font-size: 34px; }
  .sub { font-size: 15px; }
  .keys { font-size: 12px; }
  .overlay { gap: 12px; padding: 18px; }
  .hs input { width: 170px; font-size: 14px; }
  .hs-boards { gap: 18px; }
  .hs-board { min-width: 0; font-size: 11px; }
  .hs-boards.compact .hs-board { min-width: 0; }
  button { font-size: 16px; padding: 10px 28px; }
}

/* 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);
  }
}