:root { --s: 1; --paper: #eadabd; --ink: #111; --red: #b8322a; --green: #4f8a1c; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: 'Gaegu', cursive;
  -webkit-font-smoothing: antialiased;
}
.w { filter: url(#wob); }

/* ---------- scene (stage units, transformed as a whole) ---------- */
#scene {
  position: fixed; left: 50%; top: 50%; width: 2560px; height: 1440px;
  transform-origin: 0 0; will-change: transform; opacity: 0;
}
#scene img, #scene svg { position: absolute; display: block; }
#plate { left: -640px; top: -360px; width: 3840px; height: 2160px; }
#burst { left: 630px; top: 70px; width: 1300px; height: 1300px; opacity: 0; transform-origin: 50% 50%; }
#ring { left: 0; top: 0; width: 2560px; height: 1440px; transform-origin: 1280px 720px; }
#disk { left: 0; top: 0; width: 2560px; height: 1440px; }
#pulse { left: 0; top: 0; overflow: visible; pointer-events: none; }
#pulse circle { display: block; transform-box: fill-box; transform-origin: center; animation: pulse 1400ms ease-out infinite; }
.pulse.fast circle { animation-duration: 900ms; }
@keyframes pulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.6); opacity: 0; } }
#burst.fire { animation: fire 500ms ease-out forwards; }
@keyframes fire {
  0%   { opacity: 0;   transform: scale(.90); }
  30%  { opacity: .6;  transform: scale(1.02); }
  100% { opacity: 0;   transform: scale(1.12); }
}
#hit {
  position: absolute; border: 0; padding: 0; background: transparent;
  border-radius: 50%; cursor: pointer; outline: none;
}

/* ---------- dive canvas + reduced-motion flash ---------- */
#dive { position: fixed; left: 0; top: 0; display: none; z-index: 2; }
#flash {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--green); opacity: 0; pointer-events: none; z-index: 3;
}

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 5; }
.pill {
  display: flex; align-items: center; gap: calc(16px * var(--s));
  background: #fffdf6; border: calc(5px * var(--s)) solid var(--ink);
  border-radius: calc(60px * var(--s));
  padding: calc(10px * var(--s)) calc(34px * var(--s));
  font-size: calc(44px * var(--s)); font-weight: 700;
  color: var(--ink); font-family: inherit; appearance: none; cursor: pointer;
  text-decoration: none; line-height: 1.05;
}
.pill.small { font-size: calc(34px * var(--s)); padding: calc(6px * var(--s)) calc(26px * var(--s)); gap: calc(12px * var(--s)); }
.yy { width: .9em; height: .9em; flex: none; display: block; }

/* brand: viewport top-left */
#brand {
  position: fixed; z-index: 5; --mist: 1;
  left: calc(56px * var(--s)); top: calc(44px * var(--s));
  display: flex; align-items: center; gap: calc(26px * var(--s));
}
#brand::before {
  content: ''; position: absolute; z-index: -1;
  inset: calc(-45px * var(--s)) calc(-72px * var(--s));
  background: #efe4c8;
  border-radius: calc(80px * var(--s));
  filter: blur(calc(30px * var(--s)));
  opacity: var(--mist, 1);
  transition: opacity 300ms ease;
}
#brand h1, #brand p { text-shadow: 0 0 calc(18px * var(--s)) #f3e9d2, 0 0 calc(36px * var(--s)) #f3e9d2; }
#brand h1 { font-size: calc(104px * var(--s)); font-weight: 700; line-height: .9; letter-spacing: .01em; }
#brand p { font-size: calc(38px * var(--s)); margin-top: calc(6px * var(--s)); }
.chop {
  background: var(--red); color: #f7efdc; font-weight: 700;
  font-size: calc(36px * var(--s)); line-height: .95;
  padding: calc(12px * var(--s)); border-radius: calc(6px * var(--s)); text-align: center;
  transform: rotate(-3deg);
}

/* sound: viewport top-right */
#sound { position: fixed; z-index: 5; right: calc(56px * var(--s)); top: calc(54px * var(--s)); }

/* caption card: safe-area left margin */
#card {
  position: fixed; z-index: 5;
  width: calc(520px * var(--s));
  padding: calc(30px * var(--s)) calc(36px * var(--s));
  background: #faf4e4;
  border: calc(5px * var(--s)) solid var(--ink);
  border-radius: calc(18px * var(--s));
}
#cardInner { transition: opacity .14s ease, transform .22s ease; }
#cap { font-size: calc(58px * var(--s)); font-weight: 700; line-height: 1.02; }
#sub { font-size: calc(36px * var(--s)); margin-top: calc(10px * var(--s)); }
#depth { display: none; gap: calc(14px * var(--s)); align-items: center; margin-top: calc(22px * var(--s)); font-size: calc(44px * var(--s)); font-weight: 700; }
#depth .chop { font-size: calc(30px * var(--s)); transform: none; padding: calc(8px * var(--s)); }

/* launch strip: safe-area right margin */
#strip { position: fixed; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: calc(26px * var(--s)); }
#strip .pill { justify-content: flex-start; }
.pill > span { white-space: nowrap; }
.pill.disabled, .pill[aria-disabled="true"] { cursor: default; }
.pill.disabled .yy, .pill[aria-disabled="true"] .yy,
.pill.disabled > span:not(.soon), .pill[aria-disabled="true"] > span:not(.soon) { opacity: .45; }
.pill .soon { color: var(--red); font-weight: 700; font-size: .7em; margin-left: .35em; letter-spacing: .02em; }
#fb { font-size: calc(34px * var(--s)); height: calc(40px * var(--s)); padding-left: calc(30px * var(--s)); }