html, body { margin: 0; height: 100%; overflow: hidden; background: #78b830; }
* { box-sizing: border-box; }

#viewport { position: fixed; inset: 0; overflow: hidden; }

/* ---------- backdrop (safety net beyond 2.48:1, never visible in range) ---------- */
#backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: url(assets/L0_bleed_plate.webp) center / cover no-repeat;
  filter: blur(24px);
  transform: scale(1.06);
}

/* ---------- stage (3456x1392, safe area at 704,240) ---------- */
#stage { position: absolute; left: 0; top: 0; width: 3456px; height: 1392px; transform-origin: 0 0; z-index: 1; will-change: transform; }
#stage img { display: block; position: absolute; pointer-events: none; }
#stage .plate { left: 0; top: 0; width: 3456px; height: 1392px; }
#stage .layer { left: 704px; top: 240px; width: 2048px; height: 1152px; }

.creature-perk { position: absolute; left: 704px; top: 240px; width: 2048px; height: 1152px;
  transform-origin: 1385px 782px; transition: transform .18s ease-out; will-change: transform; }
.creature-breathe { position: absolute; left: 0; top: 0; width: 2048px; height: 1152px;
  transform-origin: 1385px 782px; animation: breathe 3.2s ease-in-out infinite alternate; will-change: transform; }
#stage .creature-perk .layer, #stage .creature-breathe .layer { left: 0; top: 0; }
#perk.noticed { transform: scale(1.01) translateY(-3px); }
#jaw { transform: scale(0); transform-origin: 1305.8px 616.6px; will-change: transform; }

#neon { position: absolute; left: 1984px; top: 225px; width: 620px; height: 230px; pointer-events: none;
  opacity: .85; mix-blend-mode: screen;
  background: radial-gradient(ellipse at center, rgba(255,120,190,.85), rgba(255,60,160,.35) 45%, transparent 72%);
  animation: neonFlicker 7s linear infinite; }

/* ---------- glass + glass FX ---------- */
#glass { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.07) 22%, transparent 27% 58%,
      rgba(255,255,255,.05) 61%, transparent 64%),
    radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0,0,0,.18)); }

#glassfx { position: absolute; left: 0; top: 0; width: 2048px; height: 1152px; transform-origin: 0 0;
  z-index: 3; pointer-events: none; overflow: visible; }
.gfx { position: absolute; pointer-events: none; will-change: transform, opacity; }
.ripple { position: absolute; border-radius: 50%; border: 3px solid rgba(255,255,255,.9);
  pointer-events: none; }

/* ---------- safe-area UI ---------- */
#safeUI { position: absolute; left: 0; top: 0; width: 2048px; height: 1152px; transform-origin: 0 0;
  z-index: 4; pointer-events: none; }

.brand { position: absolute; left: 70px; top: 44px; }
.brand h1 { margin: 0; font: 132px/0.9 'Titan One', sans-serif; color: #fff; letter-spacing: 4px;
  text-shadow: 0 4px 0 rgba(0,0,0,.18), 0 0 1px rgba(0,0,0,.4); }
.brand p { margin: 10px 0 0 6px; font: 34px 'Titan One', sans-serif; color: #1d2b12; letter-spacing: 2px; }
.brand p span { background: #fff; padding: 2px 14px; border-radius: 30px; margin-right: 12px; }

.card { position: absolute; left: 82px; top: 318px; width: 420px; transform: rotate(-3deg);
  background: #fbf8ef; border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,.25);
  font-family: 'Courier Prime', monospace; color: #222; padding: 0 0 18px; }
.card::before, .card::after { content: ''; position: absolute; top: -14px; width: 90px; height: 30px;
  background: rgba(255,255,240,.55); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.card::before { left: -18px; transform: rotate(-28deg); }
.card::after { right: -18px; transform: rotate(24deg); }
.card h3 { margin: 0 0 12px; background: #e0457b; color: #fff; font: 28px 'Titan One', sans-serif;
  letter-spacing: 2px; text-align: center; padding: 10px 0 8px; border-radius: 6px 6px 0 0; }
.card .row { padding: 2px 22px; font-size: 20px; text-transform: uppercase; }
.card .row b { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 24px; color: #1b3fa0; text-transform: none; }
.card .count { margin: 12px 22px 0; padding-top: 12px; border-top: 2px dashed #bbb; font-size: 20px; }
.card .count b { font: 52px 'Permanent Marker', cursive; color: #c8102e; margin-left: 12px;
  vertical-align: middle; display: inline-block; }

#creature-hit { position: absolute; left: 1150px; top: 200px; width: 780px; height: 560px;
  border: 0; background: transparent; border-radius: 50%; cursor: pointer; pointer-events: auto; }

#status { position: absolute; left: 820px; top: 784px; transform: translateX(-50%) rotate(-1.5deg);
  background: #ffd400; border: 6px solid #111; border-radius: 10px; font: 25px 'Titan One', sans-serif;
  text-align: center; padding: 12px 16px; white-space: nowrap; color: #111; letter-spacing: 1px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25); min-width: 560px; max-width: 760px; }

#boop { position: absolute; left: 640px; top: 872px; width: 360px; height: 140px; border-radius: 80px;
  border: 0; background: radial-gradient(circle at 40% 30%, #ff6f8f, #e0115a 60%, #a3003c); color: #fff;
  font: 92px/140px 'Titan One', sans-serif; letter-spacing: 6px; cursor: pointer; pointer-events: auto;
  box-shadow: 0 12px 0 #7a002c, 0 22px 30px rgba(0,0,0,.35); text-shadow: 0 4px 0 rgba(0,0,0,.25);
  animation: boopPulse 1.6s ease-in-out infinite; }
#boop.pressed { translate: 0 8px; box-shadow: 0 4px 0 #7a002c, 0 8px 14px rgba(0,0,0,.35); }

.hint { position: absolute; left: 640px; top: 1024px; width: 360px; text-align: center;
  font: 22px 'Courier Prime', monospace; color: #222; background: rgba(255,255,255,.75);
  border-radius: 20px; padding: 4px 0; }

#pop { position: absolute; left: 930px; top: 130px; font: 150px 'Titan One', sans-serif; color: #fff;
  transform: rotate(-9deg); -webkit-text-stroke: 8px #111; paint-order: stroke fill; display: none; }

#safeUI .disabled, #safeUI a[aria-disabled="true"], #strip a[aria-disabled="true"], #strip button[disabled] {
  opacity: .45; cursor: not-allowed; }
#strip a[aria-disabled="true"] { pointer-events: none; }

/* ---------- bottom strip (viewport-anchored, scales with the viewport) ---------- */
:root { --strip-fs: clamp(14px, 0.45vw + 6px, 20px); }
#strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(var(--strip-fs) + 26px);
  display: flex; align-items: center; gap: calc(var(--strip-fs) * 0.9);
  padding: 0 calc(var(--strip-fs) + 4px); background: rgba(18,22,14,.86);
  color: #e9ffd2; font: var(--strip-fs)/1.2 'Courier Prime', monospace; }
#strip .sp { flex: 1; }
#strip button, #strip a { font: inherit; color: #111; background: #c7ff5a;
  border: 0; border-radius: 4px; padding: calc(var(--strip-fs) * 0.33) calc(var(--strip-fs) * 0.8);
  text-decoration: none; font-weight: 700; cursor: pointer; }
#copy-status { color: #c7ff5a; }

/* ---------- loader ---------- */
#loader { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: #78b830; color: #1d2b12; font: 20px 'Courier Prime', monospace; transition: opacity .4s ease; }
#loader.hide { opacity: 0; pointer-events: none; }

#stage, #glass, #glassfx, #safeUI, #strip { opacity: 0; transition: opacity .4s ease; }
body.ready #stage, body.ready #glass, body.ready #glassfx, body.ready #safeUI, body.ready #strip { opacity: 1; }

/* ---------- idle animations ---------- */
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.006); } }
@keyframes boopPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes neonFlicker {
  0% { opacity: .85; } 2% { opacity: .3; } 4% { opacity: .85; }
  52% { opacity: .85; } 54% { opacity: .3; } 56% { opacity: .85; } 100% { opacity: .85; }
}
body.no-idle #breathe, body.no-idle #neon, body.no-idle #boop { animation: none !important; }

/* ---------- keyboard focus ---------- */
#boop:focus-visible { outline: none;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #111, 0 12px 0 #7a002c, 0 22px 30px rgba(0,0,0,.35); }
#strip button:focus-visible, #strip a:focus-visible { outline: none;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #111; }
#creature-hit:focus-visible { outline: 3px dashed #fff; outline-offset: -8px; }

@media (prefers-reduced-motion: reduce) {
  #breathe, #neon, #boop { animation: none !important; }
}