:root{
  --bg:#ffffff;
  --ink:#15151a;
  --dim:#b3b1aa;
  --mid:#8e8c85;
  --line:#e9e7e2;
  --accent:#e8261a;
  --cells: 6.05;
  --hud: min(clamp(26px, 11vw, 176px), 15vh, (100vw - 64px) / var(--cells));
  --numfont: "Anton","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--bg);
  -webkit-text-size-adjust:100%;overscroll-behavior:none;touch-action:none}
body{font:400 16px/1 -apple-system,"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;color:var(--ink)}

#app{height:100dvh;display:grid;grid-template-rows:auto minmax(96px,1fr) auto auto}

/* ---------- counter ---------- */
#hud{display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(8px,1.8vh,22px) 24px clamp(4px,1vh,12px)}

.num{font-family:var(--numfont);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;white-space:nowrap;user-select:none}

#meter{display:inline-flex;flex-direction:column;align-items:center;transform-origin:50% 0}

#count{font-size:var(--hud);font-weight:400;line-height:1;color:var(--ink);
  display:flex;overflow:hidden;letter-spacing:.005em}
#count .d{display:inline-block;min-width:.53em;text-align:center}
#count .s{display:inline-block;width:.24em}
#count .d.roll{animation:roll .30s cubic-bezier(.16,.9,.2,1)}
#count .d.roll.up{animation:rollUp .30s cubic-bezier(.16,.9,.2,1),tint .6s ease-out}
@keyframes roll{
  0%{transform:translateY(-.55em);opacity:0}
  55%{opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes rollUp{
  0%{transform:translateY(.55em);opacity:0}
  55%{opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes tint{
  0%,40%{color:var(--accent)}
  100%{color:var(--ink)}
}

/* 節目の演出 : 10^n の n が大きいほど大きく長く跳ねる */
#meter{--mileAmp:.05;--mileDur:1s}
#meter.mile{animation:mile var(--mileDur) cubic-bezier(.2,.9,.25,1)}
@keyframes mile{
  0%{transform:scale(1)}
  9%{transform:scale(calc(1 + var(--mileAmp)))}
  30%{transform:scale(calc(1 + var(--mileAmp) * .12))}
  44%{transform:scale(calc(1 + var(--mileAmp) * .5))}
  70%{transform:scale(calc(1 + var(--mileAmp) * .08))}
  100%{transform:scale(1)}
}

/* ---------- 母数 ---------- */
#denom{align-self:center;margin-top:calc(var(--hud) * .05);
  font-size:calc(var(--hud) * .235);font-weight:400;line-height:1;color:var(--dim)}
#denom .s{display:inline-block;width:.24em}
#denom .sl{display:inline-block;margin-right:.22em;opacity:.7}

/* ---------- stage ---------- */
#stage{position:relative;min-height:0;cursor:crosshair}
#cv{display:block;width:100%;height:100%}

/* ---------- controls ---------- */
#ctl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(6px,1.1vh,12px) clamp(16px,3.2vw,46px) clamp(8px,1.3vh,14px)}
#right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:clamp(9px,1.5vw,18px)}
#ctl button,#ctl a{appearance:none;background:none;padding:0;cursor:pointer;text-decoration:none;
  width:clamp(42px,4.4vw,56px);height:clamp(42px,4.4vw,56px);
  border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--mid);
  transition:color .16s,border-color .16s,background .16s}
#ctl button:hover,#ctl a:hover{color:var(--ink);border-color:var(--dim)}
#ctl button:active,#ctl a:active{background:#f4f3ef}
#ctl svg{width:56%;height:56%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%}
#redraw{justify-self:start}

#snd .sp{fill:currentColor;stroke:none}
#snd .mt{opacity:0}
#snd[data-off="1"] .wv{opacity:0}
#snd[data-off="1"] .mt{opacity:1}
#info .dot{fill:currentColor;stroke:none}
#redraw.spin svg{animation:spin .5s cubic-bezier(.3,.85,.3,1)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

#level{grid-column:2;justify-self:center;color:var(--dim);
  font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(13px,1.4vw,18px);letter-spacing:.04em}

/* ---------- ad ---------- */
#ad{display:flex;align-items:center;justify-content:center;
  height:106px;padding:8px 0;border-top:1px solid var(--line);background:var(--bg)}
#adslot{width:728px;max-width:calc(100% - 24px);height:90px;overflow:hidden}
#adslot:empty{border:1px solid var(--line);border-radius:1px;opacity:.5}

@media (max-width:820px){
  #ad{height:66px;padding:6px 0}
  #adslot{width:320px;height:50px}
}
@media (max-height:620px){
  #ad{height:62px;padding:6px 0}
  #adslot{width:320px;height:50px}
}
#nojs{max-width:640px;margin:0 auto;padding:48px 24px;
  font:400 16px/1.8 -apple-system,"Hiragino Sans","Noto Sans JP",Meiryo,sans-serif}
#nojs h1{font:400 44px/1 var(--numfont);margin:0 0 18px}
#nojs a{color:var(--ink)}

@media (max-width:560px){
  #level{display:none}
}