@font-face{
  font-family:'Sekuya';
  src:url('sekuya.ttf') format('truetype');
  font-display:block;
}

/* ============================================================
   YUREPUZZ — 揺れる楽園を、止めろ。
   夜のゲーセン。ネオンのピンク・黄・シアン。全部うるさく、帯だけが止まる。
   ============================================================ */
:root{
  --pink:#ff6a13;
  --yellow:#ffc93c;
  --cyan:#fff1dc;
  --ink:#2b160b;
  --white:#fff;
  --pt:env(safe-area-inset-top);
  --pb:env(safe-area-inset-bottom);
  --disp:'Sekuya','Arial Black','Hiragino Sans',sans-serif;
  --ja:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  --ftop:30%;
  --fbot:70%;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow:hidden;background:var(--ink)}
body{
  position:fixed;inset:0;overflow:hidden;width:100%;height:100%;
  background:var(--ink);color:var(--white);
  font-family:var(--ja);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;
}
[hidden]{display:none !important}

#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none}
#ui button,#ui a{pointer-events:auto}
.scr{position:absolute;inset:0}

.srcs{position:fixed;left:0;top:0;width:2px;height:2px;opacity:.01;overflow:hidden;pointer-events:none}
.srcs video{width:2px;height:2px}

#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ---------- タイトル ---------- */
#title{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--pt) + 20px) 16px calc(var(--pb) + 20px);
  text-align:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(43,22,11,0),rgba(43,22,11,.55) 75%);
}
.logo{
  font-family:var(--disp);
  font-size:min(11.6vw,96px);
  line-height:1;letter-spacing:-.02em;
  display:flex;white-space:nowrap;
}
.logo span{
  display:inline-block;
  color:#fff;
  -webkit-text-stroke:.025em var(--ink);
  text-shadow:
    -.06em 0 0 var(--pink),
    .06em 0 0 var(--yellow),
    0 .1em 0 var(--ink),
    0 0 .4em rgba(255,106,19,.9);
  animation:shake 0.9s infinite ease-in-out;
}
.logo span:nth-child(2n){color:var(--pink);text-shadow:-.06em 0 0 #fff,.06em 0 0 var(--yellow),0 .1em 0 var(--ink),0 0 .4em rgba(255,201,60,.8);animation-duration:.7s;animation-delay:-.2s}
.logo span:nth-child(3n){color:var(--yellow);text-shadow:-.06em 0 0 var(--pink),.06em 0 0 #fff,0 .1em 0 var(--ink),0 0 .4em rgba(255,106,19,.9);animation-duration:1.1s;animation-delay:-.5s}
.logo span:nth-child(4){animation-delay:-.33s}
.logo span:nth-child(7){animation-delay:-.61s}
@keyframes shake{
  0%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-.06em,.04em) rotate(-6deg)}
  40%{transform:translate(.05em,-.06em) rotate(5deg)}
  60%{transform:translate(-.03em,.07em) rotate(-3deg)}
  80%{transform:translate(.06em,-.02em) rotate(7deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.tagline{
  margin-top:.6em;
  font-family:var(--disp);font-size:min(6vw,30px);
  color:#fff;letter-spacing:.04em;
  text-shadow:3px 3px 0 var(--pink),-2px -2px 0 var(--cyan);
  transform:rotate(-4deg);
}
.tagline-ja{
  margin-top:.5em;font-weight:900;font-size:min(4.6vw,22px);letter-spacing:.1em;
  color:var(--yellow);text-shadow:0 2px 0 #000,0 0 12px rgba(255,201,60,.6);
}
.start{
  margin-top:2em;
  font-family:var(--disp);font-size:min(7vw,34px);
  color:var(--ink);background:var(--yellow);
  border:0;border-radius:999px;padding:.55em 1.2em .5em;
  box-shadow:0 0 0 4px var(--pink),0 0 0 8px var(--ink),0 0 0 10px var(--cyan),0 0 40px 10px rgba(255,106,19,.7);
  animation:blink 1s infinite steps(2,end),pulse 1.6s infinite ease-in-out;
  cursor:pointer;
}
.start:disabled{opacity:.35;animation:none}
@keyframes blink{50%{filter:brightness(1.6) saturate(1.4)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.howto{
  margin-top:1.6em;font-size:min(4vw,17px);font-weight:700;line-height:1.7;
  text-shadow:0 2px 6px #000,0 0 2px #000;
}
.howto b{color:var(--yellow);font-size:1.3em}
.loading{margin-top:1em;font-family:var(--disp);font-size:14px;color:var(--cyan);animation:blink .5s infinite steps(2,end)}
.foot{
  position:absolute;left:0;right:0;bottom:calc(var(--pb) + 14px);
  font-size:13px;color:rgba(255,255,255,.75);text-decoration:none;letter-spacing:.1em;
}

/* ---------- HUD ---------- */
.hud-top{
  position:absolute;left:0;right:0;top:calc(var(--pt) + 10px);
  display:flex;justify-content:space-between;align-items:center;padding:0 14px;
}
.hud-stage{
  font-family:var(--disp);font-size:20px;color:var(--yellow);
  text-shadow:2px 2px 0 var(--pink),-1px -1px 0 var(--cyan);
}
.hud-dots{display:flex;gap:6px}
.hud-dots i{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);display:block;
}
.hud-dots i.on{background:var(--cyan);border-color:#fff;box-shadow:0 0 10px var(--cyan)}
.hud-dots i.p{background:var(--yellow);border-color:#fff;box-shadow:0 0 12px var(--yellow)}
.hud-dots i.m{background:#555;border-color:#888}
.hud-dots i.now{border-color:var(--pink);animation:blink .3s infinite steps(2,end)}

.combo{
  position:absolute;left:0;right:0;top:calc(var(--ftop) - 64px);
  text-align:center;font-family:var(--disp);font-size:30px;line-height:1;
  color:#fff;text-shadow:3px 3px 0 var(--pink),-2px -2px 0 var(--cyan),0 0 20px var(--pink);
  opacity:0;
}
.combo.show{animation:comboIn .35s ease-out forwards}
.combo small{font-size:.55em;color:var(--yellow)}
@keyframes comboIn{0%{opacity:1;transform:scale(1.8) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}

.hint{
  position:absolute;left:12px;right:12px;top:calc(var(--fbot) + 18px);
  text-align:center;font-weight:900;font-size:min(4.6vw,20px);
  color:var(--yellow);text-shadow:0 2px 0 #000,0 0 10px rgba(255,201,60,.5);
  animation:blink .8s infinite steps(2,end);
}
.ticker{
  position:absolute;left:0;right:0;bottom:calc(var(--pb) + 8px);
  height:28px;overflow:hidden;
  border-top:2px solid var(--pink);border-bottom:2px solid var(--pink);
  background:rgba(0,0,0,.6);
}
.ticker-in{
  position:absolute;top:0;left:0;white-space:nowrap;
  font-family:var(--disp);font-size:16px;line-height:24px;color:var(--yellow);
  animation:tick 14s linear infinite;
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 判定ポップ ---------- */
#pops{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pop{
  position:absolute;left:50%;
  font-family:var(--disp);white-space:nowrap;line-height:1;
  transform:translate(-50%,-50%);
  animation:pop .9s cubic-bezier(.2,1.6,.4,1) forwards;
}
.pop.perfect{font-size:min(13vw,72px);color:var(--yellow);
  text-shadow:4px 4px 0 var(--pink),-3px -3px 0 var(--cyan),0 0 30px #fff,0 0 60px var(--yellow)}
.pop.great{font-size:min(11vw,58px);color:var(--cyan);
  text-shadow:4px 4px 0 var(--pink),-2px -2px 0 #fff,0 0 30px var(--cyan)}
.pop.good{font-size:min(9vw,46px);color:#fff;
  text-shadow:3px 3px 0 var(--pink),0 0 20px var(--pink)}
.pop.miss{font-size:min(9vw,46px);color:#e8352b;
  text-shadow:3px 3px 0 #000,-2px -2px 0 #000,0 0 18px #e8352b}
.pop.gatan{font-family:var(--ja);font-weight:900;font-size:min(20vw,110px);color:#fff;letter-spacing:-.04em;
  -webkit-text-stroke:3px #000;
  text-shadow:6px 6px 0 #ff6a13,-5px -5px 0 #fff1dc,0 0 40px #e8352b;
  animation:pop .9s cubic-bezier(.2,1.6,.4,1) forwards}
.pop.fever{font-size:min(17vw,96px);color:#fff;
  -webkit-text-stroke:3px var(--ink);
  text-shadow:6px 6px 0 var(--pink),-5px -5px 0 var(--yellow),0 0 50px var(--pink),0 0 90px var(--yellow);
  animation:feverPop 1.3s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes feverPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(5) rotate(20deg)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(-8deg)}
  25%{transform:translate(-50%,-50%) scale(1.15) rotate(-5deg)}
  35%,45%,55%,65%{transform:translate(-50%,-50%) scale(1.05) rotate(-6deg)}
  40%,50%,60%{transform:translate(-50%,-50%) scale(1.12) rotate(-4deg)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-90%) scale(1.3) rotate(-6deg)}
}
.pop .ja{display:block;font-family:var(--ja);font-weight:900;font-size:.32em;margin-top:.35em;letter-spacing:.2em}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(3) rotate(-20deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(-6deg)}
  30%{transform:translate(-50%,-50%) scale(1.05) rotate(-4deg)}
  70%{opacity:1;transform:translate(-50%,-60%) scale(1) rotate(-4deg)}
  100%{opacity:0;transform:translate(-50%,-140%) scale(.9) rotate(-4deg)}
}
.pop.miss{animation:popMiss .9s ease-out forwards}
@keyframes popMiss{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
  15%{opacity:1;transform:translate(-56%,-50%) rotate(4deg)}
  30%{transform:translate(-44%,-50%) rotate(-4deg)}
  45%{transform:translate(-50%,-50%) rotate(0)}
  100%{opacity:0;transform:translate(-50%,0%) rotate(10deg)}
}

/* ---------- バナー ---------- */
#banner{position:fixed;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.bn{font-family:var(--disp);line-height:1;white-space:nowrap}
.bn-stage{
  font-size:min(17vw,110px);color:#fff;
  text-shadow:6px 6px 0 var(--pink),-4px -4px 0 var(--cyan),0 0 40px var(--pink);
  animation:slam .5s cubic-bezier(.2,1.5,.4,1) both;
}
.bn-sub{
  margin-top:.4em;font-family:var(--ja);font-weight:900;font-size:min(7vw,34px);letter-spacing:.2em;
  color:var(--ink);background:var(--yellow);padding:.15em .6em;transform:rotate(-3deg);
  box-shadow:6px 6px 0 var(--pink);
  animation:slide .45s .15s cubic-bezier(.2,1.4,.4,1) both;
}
.bn-count{
  font-size:min(48vw,300px);color:var(--yellow);
  text-shadow:8px 8px 0 var(--pink),-6px -6px 0 var(--cyan),0 0 60px var(--yellow);
  animation:count .6s cubic-bezier(.2,1.6,.4,1) both;
}
.bn-go{
  font-size:min(30vw,190px);color:#fff;
  text-shadow:8px 8px 0 var(--pink),-6px -6px 0 var(--cyan),0 0 80px #fff;
  animation:go .7s cubic-bezier(.2,1.6,.4,1) both;
}
.bn-clear.bn-allp{font-size:min(13vw,84px);line-height:1;color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:8px 8px 0 var(--pink),-6px -6px 0 #fff,0 0 90px var(--yellow)}
.bn-clear{
  font-size:min(20vw,130px);color:#fff;
  text-shadow:8px 8px 0 var(--pink),-6px -6px 0 var(--cyan),0 0 80px #fff;
  animation:go 1.4s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes slam{0%{opacity:0;transform:scale(4) rotate(15deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes slide{0%{opacity:0;transform:translateX(120%) rotate(-3deg)}100%{opacity:1;transform:translateX(0) rotate(-3deg)}}
@keyframes count{0%{opacity:0;transform:scale(.2) rotate(-30deg)}60%{opacity:1;transform:scale(1.1) rotate(4deg)}100%{opacity:.0;transform:scale(1.6) rotate(0)}}
@keyframes go{0%{opacity:0;transform:scale(.1) rotate(30deg)}50%{opacity:1;transform:scale(1.15) rotate(-6deg)}100%{opacity:0;transform:scale(2.4) rotate(-6deg)}}

/* ---------- ステージ結果 ---------- */
#result{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at center,rgba(43,22,11,.55),rgba(43,22,11,.85));
}
.res-clear{
  font-family:var(--disp);font-size:min(17vw,110px);line-height:1;color:var(--yellow);
  text-shadow:6px 6px 0 var(--pink),-4px -4px 0 var(--cyan),0 0 60px var(--yellow);
  animation:slam .55s cubic-bezier(.2,1.5,.4,1) both;
}
.res-clear small{display:block;font-size:.42em;color:#fff;margin-bottom:.15em}
.res-label{margin-top:1em;font-weight:900;font-size:18px;letter-spacing:.4em;color:var(--cyan)}
.res-num{font-family:var(--disp);font-size:min(17vw,104px);line-height:1;color:#fff;
  text-shadow:5px 5px 0 var(--pink),0 0 30px rgba(255,255,255,.6)}
.res-num i,.fin-num i{font-style:normal;font-family:var(--ja);font-weight:900;font-size:.45em;margin-left:.08em}
.res-rank,.fin-rank{
  font-family:var(--disp);line-height:1;color:var(--pink);
  -webkit-text-stroke:3px #fff;
  text-shadow:0 0 40px var(--pink),8px 8px 0 var(--ink);
  opacity:0;
}
.res-rank{font-size:min(9vw,52px);margin-top:.45em;white-space:nowrap;color:var(--yellow);-webkit-text-stroke:0;text-shadow:5px 5px 0 var(--pink),-3px -3px 0 var(--cyan),0 0 40px var(--yellow)}
.res-rank.show,.fin-rank.show{animation:stamp2 .45s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp2{0%{opacity:0;transform:scale(4) rotate(-25deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes stamp{0%{opacity:0;transform:scale(5) rotate(-40deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.res-next{
  margin-top:1em;font-family:var(--disp);font-size:22px;color:var(--yellow);opacity:0;
}
.res-next.show{opacity:1;animation:blink .6s infinite steps(2,end)}

/* ---------- 最終結果 ---------- */
#final{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--pt) + 16px) 16px calc(var(--pb) + 16px);
  background:radial-gradient(ellipse at center,rgba(43,22,11,.5),rgba(43,22,11,.9));
}
.fin-head{font-family:var(--disp);font-size:min(9vw,44px);color:var(--cyan);
  text-shadow:3px 3px 0 var(--pink);letter-spacing:.1em}
.fin-num{font-family:var(--disp);font-size:min(16vw,100px);line-height:1;color:var(--yellow);
  text-shadow:6px 6px 0 var(--pink),-4px -4px 0 var(--cyan),0 0 50px var(--yellow)}
.fin-rank{font-family:var(--ja) !important;font-weight:900;font-size:min(11vw,58px);margin-top:.3em;margin-bottom:.35em;white-space:nowrap;letter-spacing:.02em;-webkit-text-stroke:2px #fff !important}
.fin-title{
  margin-top:.3em;font-weight:900;font-size:min(7vw,32px);letter-spacing:.12em;
  color:var(--ink);background:var(--yellow);padding:.15em .7em;transform:rotate(-2deg);
  box-shadow:5px 5px 0 var(--pink);opacity:0;
}
.fin-title.show{animation:slide .45s cubic-bezier(.2,1.4,.4,1) forwards}
.fin-list{list-style:none;margin-top:1em;font-weight:800;font-size:12px;line-height:1.6;display:flex;gap:.9em;flex-wrap:wrap;justify-content:center;opacity:.85}
.fin-list b{font-family:var(--disp);color:var(--yellow);margin-left:.4em;font-size:1.1em}
.fin-wait{margin-top:1em;font-family:var(--disp);font-size:14px;color:var(--cyan);animation:blink .5s infinite steps(2,end)}
.fin-world{margin-top:.6em;line-height:1}
.fw-lead{font-weight:900;font-size:min(4.6vw,20px);letter-spacing:.15em;color:#fff;text-shadow:0 2px 0 #000}
.fw-rank{margin-top:.1em;font-family:var(--disp);font-size:min(20vw,110px);color:var(--cyan);
  text-shadow:5px 5px 0 var(--pink),-3px -3px 0 #fff,0 0 40px var(--cyan)}
.fw-rank i{font-style:normal;font-family:var(--ja);font-weight:900;font-size:.42em;margin-left:.08em;color:#fff}
.fw-rank.land{animation:stamp .4s cubic-bezier(.2,1.6,.4,1) both}
.fw-of{margin-top:.25em;font-weight:900;font-size:15px;color:rgba(255,255,255,.85);letter-spacing:.1em}
.fw-today{
  display:inline-block;margin-top:.7em;font-weight:900;font-size:min(4.4vw,19px);letter-spacing:.06em;
  color:var(--ink);background:var(--cyan);padding:.3em .8em;transform:rotate(-2deg);
  box-shadow:4px 4px 0 var(--pink);opacity:0;
}
.fw-today b{font-family:var(--disp);font-size:1.25em;margin:0 .1em}
.fw-today.show{animation:slide .45s cubic-bezier(.2,1.4,.4,1) forwards}
.fw-no1{color:var(--yellow) !important;text-shadow:5px 5px 0 var(--pink),-3px -3px 0 #fff,0 0 50px var(--yellow) !important}
.fin-acts{margin-top:.8em;display:flex;gap:12px}
.btn-x{
  display:inline-block;margin-top:1em;min-width:min(78vw,300px);
  font-family:var(--ja);font-weight:900;font-size:18px;letter-spacing:.08em;
  color:#fff;background:#000;border:3px solid #fff;border-radius:999px;
  padding:.6em 1.4em;text-decoration:none;
  box-shadow:0 0 0 3px var(--pink),0 0 24px rgba(255,106,19,.6);
  animation:pulse 1.6s infinite ease-in-out;
}
.btn{
  font-family:var(--ja);font-weight:900;font-size:17px;letter-spacing:.1em;
  color:#fff;background:transparent;border:3px solid #fff;border-radius:999px;
  padding:.65em 1.4em;text-decoration:none;cursor:pointer;
}
.btn-main{background:var(--pink);border-color:var(--pink);box-shadow:0 0 24px var(--pink)}
.fin-foot{margin-top:1.2em;font-size:12px;letter-spacing:.15em;color:rgba(255,255,255,.6)}

@media (orientation:landscape) and (max-height:500px){
  .howto{display:none}
  .start{margin-top:1em}
  .res-clear small{display:block;font-size:.42em;color:#fff;margin-bottom:.15em}
.res-label{margin-top:.3em}
  .fin-list{display:none}
  .hint{display:none}
}