:root {
  --ink: #141414;
  --gold: #FFC83D;
  --gold2: #FF9F1C;
  --royal: #2448A8;
  --paper: #FFFDF5;
  --u: 1px;
  --hs: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--royal); font-family: 'Baloo 2', sans-serif; color: var(--ink); }
img { -webkit-user-drag: none; user-select: none; }

#plate { position: fixed; z-index: 0; background: url(assets/L0_bleed_plate.jpg) 0 0 / 100% 100% no-repeat; transform-origin: 50% 50%; }

#safe { position: fixed; z-index: 3; }
#stage { position: absolute; inset: 0; transform-origin: 50% 50%; }
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud .card, #hud #cta, #hud #status { pointer-events: auto; }

.full { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- dog group ---- */
#dogGroup { position: absolute; inset: 0; transform-origin: calc(1280 * var(--u)) calc(1060 * var(--u)); }
#tail { transform-origin: 57.38% 66.53%; }
#hammer {
  position: absolute;
  left: calc(1056 * var(--u));
  top: calc(529 * var(--u));
  width: calc(195 * var(--u));
  height: calc(172 * var(--u));
  transform-origin: calc(224 * var(--u)) calc(531 * var(--u));
  will-change: transform;
}
#dogHit {
  position: absolute;
  left: calc(959 * var(--u));
  top: calc(235 * var(--u));
  width: calc(522 * var(--u));
  height: calc(826 * var(--u));
  cursor: pointer;
}

/* ---- flash layer (safe-area coords, behind dog) ---- */
#flashLayer {
  position: absolute; inset: 0;
  --fx: 22%; --fy: 32%;
  background: radial-gradient(circle at var(--fx) var(--fy), rgba(255,255,220,.85), rgba(255,240,150,.25) 26%, transparent 52%);
  opacity: 0; pointer-events: none;
}

#boltSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
#headBolts { position: absolute; left: calc(1452 * var(--u)); top: calc(400 * var(--u)); width: calc(130 * var(--u)); height: calc(150 * var(--u)); transform-origin: 50% 50%; }
#headBolts.jolt { animation: jolt .15s ease-out; }
@keyframes jolt {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  40% { transform: scale(1.15) rotate(-6deg); filter: brightness(1.4); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

#trailCanvas, #sparksCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#bonkText {
  position: absolute; left: calc(470 * var(--u)); top: calc(470 * var(--u));
  font-family: 'Lilita One'; font-size: calc(64 * var(--u)); color: var(--gold);
  -webkit-text-stroke: calc(8 * var(--u)) var(--ink); paint-order: stroke fill;
  transform: rotate(-8deg) scale(0); transform-origin: 50% 50%; opacity: 0; white-space: nowrap;
}
#bonkText.pop { animation: bonkPop .9s ease-out forwards; }
@keyframes bonkPop {
  0% { transform: rotate(-8deg) scale(.4); opacity: 0; }
  18% { transform: rotate(-8deg) scale(1.15); opacity: 1; }
  35% { transform: rotate(-8deg) scale(1); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1) translateY(-40px); opacity: 0; }
}

#goodBoy {
  position: absolute; left: calc(1560 * var(--u)); top: calc(300 * var(--u));
  font-family: 'Lilita One'; font-size: calc(70 * var(--u)); color: var(--gold);
  -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill;
  transform: rotate(8deg) scale(0); opacity: 0; white-space: nowrap; transform-origin: 50% 50%;
}
#goodBoy.pop { animation: goodPop .9s ease-out forwards; }
@keyframes goodPop {
  0% { transform: rotate(8deg) scale(.5); opacity: 0; }
  20% { transform: rotate(8deg) scale(1.1); opacity: 1; }
  40% { transform: rotate(8deg) scale(1); opacity: 1; }
  100% { transform: rotate(8deg) translateY(-150px) scale(1); opacity: 0; }
}

/* ---- status pill ---- */
#status {
  position: absolute; left: 50%; top: calc(160 * var(--u)); transform: translateX(-50%);
  font-family: 'Lilita One'; font-size: calc(46 * var(--u)); color: #fff;
  background: var(--royal); border: calc(5 * var(--u)) solid var(--ink);
  border-radius: calc(20 * var(--u)); padding: calc(8 * var(--u)) calc(30 * var(--u));
  box-shadow: 0 calc(7 * var(--u)) 0 var(--ink); white-space: nowrap;
}
#status.empty { background: rgba(255,253,245,.75); color: var(--ink); font-size: calc(30 * var(--u)); }
#status.pop { animation: statusPop .4s ease-out; }
@keyframes statusPop { 0% { transform: translateX(-50%) scale(.6); } 60% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(1); } }

/* ---- HUD row ---- */
#hudRow {
  position: absolute; left: 0; right: 0; top: calc(1196 * var(--u));
  display: flex; justify-content: center; align-items: center; gap: calc(48 * var(--u));
}
.card {
  width: calc(330 * var(--u)); background: var(--paper);
  border: calc(5 * var(--u)) solid var(--ink); border-radius: calc(26 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) 0 var(--ink); padding: calc(14 * var(--u)) calc(22 * var(--u)); text-align: center;
}
.card span { display: block; font-weight: 800; font-size: calc(24 * var(--u)); letter-spacing: 1px; }
.card b { display: block; font-family: 'Lilita One'; font-size: calc(64 * var(--u)); line-height: 1; color: var(--royal); }
.card.steps b { color: #d33; }
.card.bump b { animation: numBump .4s ease-out; }
@keyframes numBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.card.shake { animation: cardShake .4s ease-out; }
@keyframes cardShake {
  0%,100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-8px) rotate(-2deg); background: #ffdcdc; }
  40% { transform: translateX(8px) rotate(2deg); background: #ffdcdc; }
  70% { transform: translateX(-5px) rotate(-1deg); background: #fff0f0; }
}
#stepsCard.flash b { color: #d33; }

#cta {
  position: relative; width: calc(820 * var(--u)); font-family: 'Lilita One'; font-size: calc(66 * var(--u)); letter-spacing: 1px; color: var(--ink);
  background: linear-gradient(#FFD95A, #FFB627); border: calc(6 * var(--u)) solid var(--ink);
  border-radius: calc(40 * var(--u)); padding: calc(20 * var(--u)) calc(56 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) 0 var(--ink); cursor: pointer; will-change: transform;
  transition: box-shadow .1s ease; white-space: nowrap; text-align: center; line-height: 1.05;
}
#cta.fetching { font-size: calc(56 * var(--u)); }
#cta small { display: block; font-family: 'Baloo 2'; font-weight: 800; font-size: calc(22 * var(--u)); letter-spacing: 2px; opacity: .75; }
#cta.hover { box-shadow: 0 calc(16 * var(--u)) 0 var(--ink); }
#cta.active { box-shadow: 0 calc(6 * var(--u)) 0 var(--ink); }
#cta[aria-disabled="true"] { filter: grayscale(.35); opacity: .8; cursor: default; }

/* ---- header ---- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; padding: 22px 32px;
}
.logo { display: flex; align-items: center; gap: calc(12px * var(--hs)); }
.logo b {
  font-family: 'Lilita One'; font-size: calc(44px * var(--hs)); letter-spacing: 1px; color: var(--gold);
  -webkit-text-stroke: calc(3px * var(--hs)) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(5px * var(--hs)) 0 var(--ink);
}
.logo small {
  font-family: 'Lilita One'; font-size: calc(16px * var(--hs)); background: var(--ink); color: #fff;
  padding: calc(3px * var(--hs)) calc(10px * var(--hs)); border-radius: calc(20px * var(--hs)); letter-spacing: 1px; white-space: nowrap;
}
nav { display: flex; align-items: center; gap: calc(12px * var(--hs)); }
nav a, #soundBtn {
  font-family: 'Lilita One'; font-size: calc(18px * var(--hs)); text-decoration: none; color: var(--ink);
  background: var(--paper); border: calc(3px * var(--hs)) solid var(--ink); border-radius: calc(14px * var(--hs));
  padding: calc(8px * var(--hs)) calc(18px * var(--hs)); box-shadow: 0 calc(4px * var(--hs)) 0 var(--ink); cursor: pointer;
}
nav a.ca { background: var(--gold); }
#soundBtn { padding: calc(8px * var(--hs)) calc(12px * var(--hs)); line-height: 1; }
nav a.disabled { opacity: .45; cursor: not-allowed; }
#toast {
  position: fixed; top: calc(22px + 52px * var(--hs)); right: 32px; z-index: 60;
  font-family: 'Lilita One'; font-size: calc(16px * var(--hs)); background: var(--ink); color: #fff;
  padding: calc(6px * var(--hs)) calc(14px * var(--hs)); border-radius: calc(12px * var(--hs)); opacity: 0;
  transition: opacity .15s ease; pointer-events: none;
}
#toast.show { opacity: 1; }

/* ---- loader ---- */
#loader {
  position: fixed; inset: 0; z-index: 100; background: var(--royal);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s ease; opacity: 1;
}
#loader.hide { opacity: 0; pointer-events: none; }
#loader svg { width: 120px; height: 138px; animation: spinBolt 1.1s linear infinite; transform-origin: 50% 50%; }
@keyframes spinBolt { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }