/* dolp: the title screen of an underwater console game nobody made. */
@font-face { font-family: "Exo 2"; src: url("/fonts/exo2-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0E2BB8; --ink: #F4F7FF; --accent: #F5C840;
  --water-0: #08198E; --water-1: #1238D8; --cyan: #5FD3FF; --cyan-2: #A8F2FF;
  --sand-0: #3B1E9E; --sand-1: #5A2FD0;
  --gold-0: #6B4208; --gold-1: #E0A21B; --gold-2: #F5C840; --gold-3: #FFE79A;
  --font-display: "Exo 2", system-ui, sans-serif;
  --font-body: "Exo 2", system-ui, sans-serif;
  --swim: cubic-bezier(.2, .8, .2, 1);
  --boing: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 2.6vw, 48px);
  --hud-w: min(440px, 33vw);
  --rx: 50%; --ry: 50%; --rh: 400px; --dl: 360px;
}

html, body { background: var(--water-0); }
body { overflow-x: hidden; font-variant-numeric: tabular-nums; }
.world { position: relative; overflow: hidden; background: linear-gradient(var(--water-1), var(--water-0) 50%, var(--sand-0)); }

/* ---------- stage: the living water ---------- */
.stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; }
.far { position: absolute; inset: -3%; z-index: 0; transition: transform 1.4s var(--swim); animation: wake 1.6s var(--swim) both; }
.far img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; }
@keyframes wake { from { opacity: 0; transform: scale(1.08); } }
.caustics { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: screen; opacity: .5; pointer-events: none; }
.rays { position: absolute; inset: -10% 0 auto; height: 90%; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.rays i { position: absolute; top: 0; width: 8vw; height: 100%; transform-origin: 50% 0; filter: blur(16px);
  background: linear-gradient(180deg, rgba(168, 242, 255, .42), rgba(95, 211, 255, .12) 55%, transparent 85%);
  animation: sway 11s ease-in-out infinite alternate; }
.rays i:nth-child(1) { left: 18%; rotate: 12deg; animation-duration: 13s; }
.rays i:nth-child(2) { left: 34%; width: 5vw; rotate: 8deg; animation-delay: -4s; }
.rays i:nth-child(3) { left: 50%; width: 11vw; rotate: 3deg; animation-duration: 15s; }
.rays i:nth-child(4) { left: 64%; width: 6vw; rotate: -4deg; animation-delay: -7s; }
.rays i:nth-child(5) { left: 78%; rotate: -10deg; animation-duration: 12s; opacity: .7; }
@keyframes sway { from { transform: rotate(-4deg); opacity: .5; } to { transform: rotate(5deg); opacity: 1; } }

.bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bubbles img { position: absolute; top: 100%; width: var(--s, 18px); height: auto; opacity: .85;
  animation: rise var(--t, 9s) linear forwards, wob 2.2s ease-in-out infinite alternate; }
@keyframes rise { to { translate: 0 var(--up, -900px); } }
@keyframes wob { from { margin-left: -6px; } to { margin-left: 6px; } }

/* ---------- the scene: ring halves and dolp, placed by JS (--rx, --ry, --rh, --dl) ---------- */
.scene { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: transform 1.4s var(--swim); }
.ring { position: absolute; left: calc(var(--rx) - var(--rh) * .452); top: calc(var(--ry) - var(--rh) / 2); height: var(--rh); width: auto; max-width: none;
  filter: drop-shadow(0 18px 26px rgba(30, 10, 110, .45)); animation: ringin 1.6s var(--swim) .2s both; }
.ring-back { z-index: 2; }
.ring-front { z-index: 4; clip-path: inset(0 0 0 52%); visibility: hidden; filter: none; }
.scene.is-jump .ring-front { visibility: visible; }
@keyframes ringin { from { opacity: 0; transform: translateY(18%) scale(.92); } }

.dolp { position: absolute; left: 0; top: 0; width: var(--dl); height: calc(var(--dl) * .382); margin: calc(var(--dl) * -.191) 0 0 calc(var(--dl) / -2);
  z-index: 3; pointer-events: auto; cursor: pointer; will-change: transform, filter; opacity: 0; }
.dolp.is-ready { opacity: 1; transition: opacity .6s ease-out; }
.dolp.is-back { z-index: 1; }
.dolp .body { position: absolute; inset: 0; transition: opacity .35s ease-out; }
.dolp .fr { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }
.dolp .fr.is-on { opacity: 1; }
.dolp .face { position: absolute; left: 50%; top: 50%; width: 58%; height: auto; max-width: none; translate: -50% -50%; opacity: 0; transition: opacity .35s ease-out; }
.dolp.is-face .body { opacity: 0; }
.dolp.is-face .face { opacity: 1; }

.glow { position: absolute; z-index: 5; left: var(--rx); top: var(--ry); width: calc(var(--rh) * 1.1); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 190, .95), rgba(255, 200, 70, .55) 30%, rgba(255, 170, 30, 0) 68%);
  mix-blend-mode: screen; opacity: 0; transform: scale(.4); }
.glow.is-on { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.sparks { position: absolute; inset: 0; z-index: 6; }
.sparks img { position: absolute; width: var(--s); height: auto; translate: -50% -50%; animation: spark var(--t, .9s) ease-out forwards; }
@keyframes spark { from { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1) rotate(160deg); opacity: 0; } }

/* ---------- interface: glass and gold, the game's own menu ---------- */
.glass-bg { border: 0 solid transparent; border-image: url("/img/v3/panel.webp") 90 fill / 30px / 0 stretch; }

.title { position: absolute; z-index: 6; left: var(--gutter); top: clamp(22px, 4vh, 52px); width: clamp(240px, 24vw, 460px); animation: drop 1.2s var(--boing) .4s both; }
.wordmark { margin: 0; line-height: 0; }
.wordmark img { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(8, 16, 100, .6)); animation: float 6s ease-in-out 2s infinite; }
.sub { margin: 10px 0 0; padding: 14px 22px; width: fit-content; max-width: 100%; font: 600 18px/1.3 var(--font-body); color: var(--ink); }
.tick { color: var(--gold-2); font-weight: 800; margin-right: .3em; }
@keyframes drop { from { opacity: 0; transform: translateY(-36px); } }
@keyframes float { 50% { transform: translateY(-6px); } }

.jump { position: absolute; z-index: 7; left: var(--jx, 18%); top: var(--jy, 80%); width: var(--jw, 260px); padding: 0; min-height: 0; border: 0; background: none; cursor: pointer;
  translate: -50% -50%; border-radius: 50%; -webkit-tap-highlight-color: transparent;
  transition: transform .6s var(--boing), filter .25s ease-out; animation: pop 1s var(--boing) 1.2s both; }
.jump img { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(40, 10, 90, .55)); animation: bob 3.2s ease-in-out infinite; }
.jump:hover { transform: scale(1.06) translateY(-3px); filter: brightness(1.1); transition: transform .25s var(--boing), filter .25s; }
.jump:active { transform: scale(.92, .86); transition: transform .035s linear; }
.jump.is-busy { filter: brightness(.82) saturate(.7); transform: scale(.95); cursor: default; }
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }

.caption { position: absolute; z-index: 7; left: var(--rx); top: var(--cy, 10%); translate: -50% 0; margin: 0; padding: 12px 26px;
  font: 800 italic 22px/1.2 var(--font-display); color: var(--gold-3); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease-out, transform .5s var(--swim); }
.caption.is-on { opacity: 1; transform: none; }
.caption:empty { visibility: hidden; }

.hud { position: absolute; z-index: 8; left: var(--gutter); bottom: var(--gutter); width: var(--hud-w); padding: 22px 26px 20px;
  display: grid; gap: 12px; color: var(--ink); animation: drop 1.1s var(--swim) .8s both; }
.lore { margin: 0; font: 700 19px/1.35 var(--font-body); }
.ca { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.ca .lbl { grid-column: 1 / -1; font: 800 16px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-2); }
.ca code { display: flex; align-items: center; min-height: 48px; padding: 9px 16px; border-radius: 12px; background: rgba(4, 12, 70, .55);
  box-shadow: inset 0 1px 0 rgba(168, 242, 255, .25); font: 500 16px/1.35 "JetBrains Mono", ui-monospace, monospace; color: #fff; }
.risk { margin: 0; font: 500 16px/1.35 var(--font-body); color: rgba(225, 233, 255, .8); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; white-space: nowrap; text-decoration: none; cursor: pointer;
  font: 800 italic 18px/1 var(--font-display); background: none; border: 0 solid transparent; border-image-width: 26px; border-image-repeat: stretch;
  transition: transform .6s var(--boing), filter .25s ease-out; -webkit-tap-highlight-color: transparent; }
.btn.gold { color: #3A2205; min-height: 58px; border-image-source: url("/img/v3/btn-gold.webp"); border-image-slice: 49% 12% fill; text-shadow: 0 1px 0 rgba(255, 240, 190, .7); }
.btn.glass { color: #fff; border-image-source: url("/img/v3/btn-glass.webp"); border-image-slice: 49% 12% fill; text-shadow: 0 1px 2px rgba(0, 10, 80, .8); }
.btn img { width: 24px; height: 24px; }
.btn.gold img { width: 28px; height: 28px; }
.btn:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.1); transition: transform .25s var(--boing), filter .25s; }
.btn:active { transform: scale(.95, .9); transition: transform .035s linear; }
.btn.is-off { filter: grayscale(.8) brightness(.8); opacity: .6; transform: none; cursor: not-allowed; }
.copy { min-width: 108px; }

/* ---------- phones and portrait: scene, JUMP, then the panel below ---------- */
@media (max-width: 900px), (orientation: portrait) {
  .stage { height: var(--stage-h, 760px); min-height: 0; }
  .title { left: 50%; translate: -50% 0; width: min(80vw, 400px); text-align: center; top: 14px; }
  .wordmark img { width: 82%; margin-inline: auto; }
  .sub { margin: 8px auto 0; font-size: 17px; }
  .hud { position: relative; left: auto; bottom: auto; width: auto; max-width: 560px; margin: 0 max(12px, calc(50% - 280px)) 40px; }
  .ca { grid-template-columns: 1fr; }
  .copy { justify-self: start; }
}
@media (max-width: 360px) {
  .glass-bg { border-image-width: 24px; }
  .hud { padding: 18px 18px 16px; }
  .btn.gold { font-size: 16px; padding: 6px 18px; white-space: normal; text-align: center; line-height: 1.15; }
}
@media (max-height: 700px) and (min-width: 901px) and (orientation: landscape) {
  .title { width: clamp(200px, 17vw, 280px); }
  .sub { font-size: 16px; padding: 10px 18px; }
  .hud { gap: 8px; padding: 18px 22px 16px; }
  .lore { font-size: 17px; }
  .btn.gold { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .far, .ring, .title, .jump, .hud { animation: none; }
  .rays i { animation: none; }
}