:root{ --ink:#2e1e12; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#000;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}

#shake{position:fixed;inset:0;will-change:transform}
#bg{position:absolute;inset:0;width:100%;height:100%;display:block}
#horse{position:absolute;inset:0;width:100%;height:100%}

#vignette{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(190,20,10,.85) 100%);
  transition:opacity .25s ease}
#vignette.on{opacity:1}

/* 2단계 점프 순간, 말 뒤에서 빛이 확 퍼지는 플래시 — 배경과 뚜렷이 구분되게 */
#jumpFlash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 55%,
    #fff 0%, rgba(255,255,255,.98) 18%, rgba(255,246,200,.75) 40%, transparent 72%)}
#jumpFlash.pop{ animation: jumpFlashPop .55s cubic-bezier(.1,.6,.25,1) }
@keyframes jumpFlashPop{
  0%   { opacity:0;   transform:scale(.3) }
  14%  { opacity:1;   transform:scale(1.1) }
  45%  { opacity:.9;  transform:scale(1.3) }
  100% { opacity:0;   transform:scale(1.9) }
}

/* ---- start overlay ---- */
#start{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;cursor:pointer;
  background:rgba(8,12,18,.92);color:#fff;text-align:center;padding:24px}
#start h1{font-size:clamp(28px,5vw,52px);font-weight:800;letter-spacing:-.02em}
#start p{font-size:clamp(14px,1.7vw,19px);opacity:.75;line-height:1.7;max-width:34em}
#start p.alt{opacity:.9}
#start .cta{margin-top:10px;padding:14px 34px;border-radius:999px;
  background:#fff;color:#111;font-weight:700;font-size:17px}
#start.hide{display:none}

/* ---- badges ---- */
#badge{position:fixed;right:12px;bottom:12px;z-index:40;padding:7px 13px;border-radius:8px;
  background:rgba(150,90,0,.9);color:#fff;font-size:12px;font-weight:600;display:none}
#badge.on{display:block}
#hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;
  color:rgba(255,255,255,.5);font-size:12.5px;letter-spacing:.02em;white-space:nowrap}

.coat{fill:url(#coat);stroke:var(--ink);stroke-width:7;stroke-linejoin:round}
.hand{fill:#e8b98f;stroke:var(--ink);stroke-width:7}
.rein{fill:none;stroke:#3a2513;stroke-width:12;stroke-linecap:round}
.shade{fill:rgba(58,30,10,.20);stroke:none}
.mane-m{fill:#57402a;stroke:#2b1c10;stroke-width:6;stroke-linejoin:round}
.mane-l{fill:none;stroke:#2b1c10;stroke-width:7;stroke-linecap:round;opacity:.55}

/* 3단계: 전체화면 점프스케어 사진 */
#jumpscare{position:fixed;inset:0;z-index:42;opacity:0;pointer-events:none;
  transform:scale(1.14);transform-origin:center;background:#000;
  transition:opacity .1s ease, transform .3s cubic-bezier(.34,1.56,.64,1)}
#jumpscare.on{opacity:1;transform:scale(1)}
#jumpscare.shake{ animation: jsShake .4s ease-out }
@keyframes jsShake{
  0%,100%{ margin:0 }
  20%{ margin:0 0 0 -14px } 40%{ margin:0 0 0 12px }
  60%{ margin:0 0 0 -8px }  80%{ margin:0 0 0 6px }
}
/* object-position을 위쪽으로 당겨 cover 크롭이 중앙 기준으로 자를 때도
   눈(사진 상단부)이 잘려나가지 않게 한다 — 이 사진의 핵심은 눈이다 */
#jsImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;display:none}
#jsImg.show{display:block}
#jsPh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(24,14,8,.92)}
#jsPh.hide{display:none}
#jsPhT{color:#fff;font-size:clamp(18px,3vw,32px);font-weight:700;opacity:.85}
#jsVein{position:absolute;top:6%;left:7%;font-size:clamp(40px,8vw,96px);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
  animation: veinPulse .55s ease-in-out infinite}
@keyframes veinPulse{ 0%,100%{ transform:scale(1) rotate(-6deg) } 50%{ transform:scale(1.25) rotate(4deg) } }

/* 달린 거리 — 화면 위 가운데에 크게 */
#meter{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;pointer-events:none;
  font-size:clamp(40px,7vw,88px);font-weight:900;color:#fff;font-variant-numeric:tabular-nums;
  -webkit-text-stroke:clamp(3px,.5vw,6px) #2e1e12;paint-order:stroke fill;text-shadow:0 6px 0 rgba(46,30,18,.45)}

/* 결과 화면 — 걸린 이미지 위에 반투명으로 얹는다 */
#result{position:fixed;inset:0;z-index:55;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,2vh,18px);text-align:center;padding:24px;
  background:rgba(8,12,18,.72);color:#fff}
#result.on{display:flex}
#result h2{font-size:clamp(34px,6vw,64px);font-weight:900;color:#ffd84a;letter-spacing:.04em}
#resultMeters{font-size:clamp(90px,18vw,200px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;
  -webkit-text-stroke:clamp(4px,.8vw,9px) #2e1e12;paint-order:stroke fill}
#resultNew{display:none;padding:6px 22px;border-radius:999px;background:#e23b2e;border:3px solid #fff;
  font-size:clamp(18px,2.6vw,28px);font-weight:800}
#resultNew.on{display:block}
#result dl{display:grid;grid-template-columns:auto auto;gap:6px 28px;font-size:clamp(16px,2.2vw,24px)}
#result dt{text-align:right;opacity:.8}
#result dd{text-align:left;font-weight:800;font-variant-numeric:tabular-nums}
#retryBtn{margin-top:8px;padding:16px 42px;border:0;border-radius:999px;background:#fff;color:#111;
  font:inherit;font-size:clamp(18px,2.6vw,26px);font-weight:800;cursor:pointer}