/* ======================================================
   RESET
====================================================== */

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  /* the scene is always scaled to fit the viewport at exactly a 16:9 crop
     (see the fitScene() script below) — never scroll/zoom to it natively */
  overflow: hidden;
}


/* ======================================================
   ROTATE PROMPT — shown on phones held in portrait (see fitScene() in
   index.html for when this toggles). Desktop and tablets never see it.
====================================================== */

#rotate-prompt {
  position: fixed;
  inset: 0;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg, #065274, #086e9b);
}

#rotate-prompt[hidden] {
  display: none;
}

/* fixed-size container holding both the spinning phone outline and the
   static text label — sized to the phone's own footprint (assets/images/
   phone.svg is 115x206) so #rotate-text lands centered on top of it
   without itself rotating */
#rotate-icon {
  position: relative;
  width: 110px;
  height: 197px;
}

/* the actual exported icon — and only this — is what spins; the label text
   stays upright (see #rotate-text) */
#rotate-phone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: rotate-icon-spin 1.6s ease-in-out infinite;
}

@keyframes rotate-icon-spin {
  0%, 20% { transform: rotate(0deg); }
  50%, 70% { transform: rotate(90deg); }
  100% { transform: rotate(90deg); }
}

/* dead-centered on the phone's own rotation pivot (#rotate-phone rotates
   around its own center, same point as this box's center) — a point sitting
   exactly on a rotation's pivot never moves, so this stays put and upright
   whether the icon is mid-spin, portrait, or landscape */
#rotate-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 78px;
  margin: 0;

  font-family: "apotek-wide", "Inter", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}


/* ======================================================
   BODY
====================================================== */

body {
  background: #000;
}


/* ======================================================
   MAIN SCENE
====================================================== */

#scene {
  /* fixed at its native 1920x1080 design size, then uniformly scaled down
     (via fitScene(), a plain-JS resize handler — see index.html) to
     whatever the largest size is that still fits the viewport at exactly
     16:9, and centered. This keeps the aspect ratio locked and removes any
     need for the page itself to scroll. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;

  width: 1920px;
  height: 1080px;

  overflow: hidden;
}


/* ======================================================
   BACKGROUND
====================================================== */

.background {
  position: absolute;

  left: 0;
  top: 0;

  width: 1920px;
  height: 1080px;

  object-fit: cover;

  z-index: 0;

  pointer-events: none;
}


/* ======================================================
   P5 CANVAS
====================================================== */

canvas {
  position: absolute !important;

  left: 0;
  top: 0;

  width: 1920px !important;
  height: 1080px !important;

  z-index: 10;

  pointer-events: none;
}


/* ======================================================
   WELCOME / CREDITS SCREENS
====================================================== */

#welcome-screen,
#credits-screen {
  position: fixed;

  left: 0;
  top: 0;

  width: 1920px;
  height: 1080px;

  z-index: 15;

  overflow: hidden;
}

#welcome-screen[hidden],
#credits-screen[hidden] {
  display: none;
}

#welcome-title {
  position: absolute;

  left: 50%;
  top: 150px;
  transform: translateX(-50%);

  margin: 0;

  font-family: "apotek-wide", "Inter", sans-serif;
  font-weight: 700;
  font-size: 260px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;

  background-image: linear-gradient(259.66deg, #2eb8f1 10.021%, #d8f4ea 80.111%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* the welcome/credits screens have no opaque backdrop of their own (the
     live animated reef shows straight through), so the gradient text needs
     its own shadow to stay legible against whatever's behind it */
  filter: drop-shadow(0 4px 10px rgba(0, 10, 20, 0.45));
}

#welcome-buttons {
  position: absolute;

  left: 50%;
  top: 590px;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.welcome-btn {
  width: 242px;
  height: 73px;

  background: #e3fae0;
  border: 8px solid #5ed9cd;
  border-radius: 52px;

  color: #021427;
  font-family: "apotek-wide", "Inter", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;

  cursor: pointer;
}

.welcome-btn:hover {
  background: #d3f2ce;
}

.credits-panel {
  position: absolute;

  left: 50%;
  top: 70px;
  transform: translateX(-50%);

  width: 1100px;
  max-height: 860px;
  overflow-y: auto;

  padding: 50px 70px;

  background: rgba(10, 20, 35, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  backdrop-filter: blur(4px);

  color: rgba(220, 235, 245, 0.92);
  font-family: "Alata", sans-serif;
}

.credits-panel #credits-title {
  margin: 0;

  font-family: "apotek-wide", "Inter", sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  text-align: center;

  background-image: linear-gradient(259.66deg, #2eb8f1 10.021%, #d8f4ea 80.111%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.credits-author {
  margin: 10px 0 0;

  font-size: 20px;
  text-align: center;
  color: rgba(220, 235, 245, 0.7);
}

.credits-heading {
  margin: 36px 0 12px;

  font-family: "apotek-wide", "Inter", sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #8fe6da;
}

.credits-text {
  margin: 0 0 14px;

  font-size: 19px;
  line-height: 1.6;
}

.credits-quote {
  margin: 16px 0;
  padding-left: 22px;

  border-left: 4px solid #5ed9cd;

  font-size: 19px;
  line-height: 1.6;
  font-style: italic;
  color: rgba(220, 235, 245, 0.85);
}

.credits-cta {
  margin: 20px 0 0;

  font-family: "apotek-wide", "Inter", sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #8fe6da;
}

#credits-hint {
  margin: 30px 0 0;

  font-family: "Alata", sans-serif;
  font-size: 22px;
  color: rgba(180, 230, 210, 0.9);
  text-align: center;

  cursor: pointer;
}

/* ======================================================
   SOUND TOGGLE
====================================================== */

#sound-toggle {
   
  position: fixed;

  left: 32px;
  top: 32px;

  z-index: 20;

  width: 52px;
  height: 52px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(10, 20, 35, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;

  cursor: pointer;
  backdrop-filter: blur(4px);
}

#sound-toggle:hover {
  background: rgba(10, 20, 35, 0.75);
}

#sound-toggle[aria-pressed="true"] {
  background: rgba(46, 194, 180, 0.55);
  border-color: rgba(255, 255, 255, 0.6);
}

#sound-toggle-icon {
  width: 24px;
  height: 24px;
  pointer-events: none;
}


/* ======================================================
   SOUND PANEL (Music/SFX/UI volume sliders, opened by #sound-toggle)
====================================================== */

#sound-panel {
  position: fixed;

  left: 32px;
  top: 96px;

  z-index: 20;

  width: 220px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 18px 20px;

  background: rgba(10, 20, 35, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  backdrop-filter: blur(4px);

  font-family: "Alata", sans-serif;
}

.sound-row {
  display: flex;
  flex-direction: column;
  gap: 6px;

  color: rgba(220, 235, 245, 0.9);
  font-size: 14px;
}

.sound-row input[type="range"] {
  width: 100%;
  accent-color: #2ec2b4;
  cursor: pointer;
}

#sound-panel[hidden] {
  display: none;
}


/* ======================================================
   PAUSE TOGGLE + PANEL
====================================================== */

#pause-toggle {
  position: fixed;

  left: 100px;
  top: 32px;

  z-index: 20;

  width: 52px;
  height: 52px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(46, 194, 180, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;

  cursor: pointer;
  backdrop-filter: blur(4px);
}

#pause-toggle:hover {
  background: rgba(46, 194, 180, 0.75);
}

#pause-toggle[hidden] {
  display: none;
}


/* ======================================================
   END SCREEN BACK BUTTON — small, bottom-right corner, shown only on the
   dedicated win/lose end screen (see drawEndScreen() in sketch.js)
====================================================== */

#end-screen-back {
  position: fixed;
  right: 32px;
  bottom: 32px;

  z-index: 20;

  padding: 10px 28px;

  background: #e3fae0;
  border: 5px solid #5ed9cd;
  border-radius: 30px;

  color: #021427;
  font-family: "apotek-wide", "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;

  cursor: pointer;
}

#end-screen-back:hover {
  background: #d3f2ce;
}

#end-screen-back[hidden] {
  display: none;
}

#pause-icon {
  width: 20px;
  height: 22px;

  display: flex;
  justify-content: space-between;

  pointer-events: none;
}

#pause-icon span {
  width: 7px;
  height: 100%;

  background: #fff;
  border-radius: 2px;
}

#pause-panel {
  position: fixed;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  z-index: 25;

  width: 320px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  padding: 40px 30px;

  background: rgba(10, 20, 35, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  backdrop-filter: blur(4px);
}

#pause-panel[hidden] {
  display: none;
}

#pause-title {
  margin: 0;

  color: #fff;
  font-family: "apotek-wide", "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
}