/* 水切り MIZUKIRI — ゲーム画面（index.html）
配色とフォントは css/tokens.css にある。 */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--night)}
body{font-family:var(--sans);color:var(--ink);overscroll-behavior:none;touch-action:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .7s ease .1s;
padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px)
calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
display:flex;flex-direction:column;justify-content:space-between}
/* ---- top row ---- */
#ui.on{opacity:1}
/* 上は素通し。空を面で暗くせず、文字ごとの影だけで読ませる。
下は操作パネルの下敷きなので、ごく薄く残す */
#ui::after{content:'';position:fixed;left:0;right:0;bottom:0;height:26vh;pointer-events:none;z-index:-1;
background:linear-gradient(0deg,rgba(8,18,28,.30),rgba(8,18,28,0))}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.stat{font-size:10px;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase}
.stat b{display:block;font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:.02em;
color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:var(--shadow);margin-top:2px}
.stat.r{text-align:right}
.stat b i{font-style:normal;font-size:11px;font-weight:400;color:var(--ink-dim);margin-left:2px}
/* ---- bounce counter (signature) ---- */
#bounce{position:absolute;left:50%;top:16%;transform:translateX(-50%);text-align:center;opacity:0;
transition:opacity .35s ease}
#bounce.on{opacity:1}
#bounce .n{font-family:var(--sans);font-size:clamp(56px,17vw,120px);font-weight:700;line-height:.9;
letter-spacing:-.04em;font-variant-numeric:tabular-nums;
text-shadow:0 2px 14px rgba(0,0,0,.30)}
#bounce .l{font-family:var(--serif);font-size:12px;letter-spacing:.5em;color:var(--ink-dim);margin-top:6px;
padding-left:.5em}
#bounce.pop .n{animation:pop .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1.34);color:#fff}100%{transform:scale(1);color:var(--ink)}}
.statpop{animation:pop .3s cubic-bezier(.2,1.6,.4,1)}
#envLine{text-align:center}
#ptsPop{position:absolute;left:50%;top:33%;transform:translateX(-50%);font-family:var(--serif);
font-size:clamp(22px,6vw,30px);letter-spacing:.12em;color:var(--amber);opacity:0;
pointer-events:none;text-shadow:var(--shadow);white-space:nowrap}
#ptsPop.on{animation:ptsUp .95s ease forwards}
@keyframes ptsUp{0%{opacity:0;transform:translate(-50%,12px)}18%{opacity:1}
100%{opacity:0;transform:translate(-50%,-30px)}}
#bestLine{font-size:10.5px;letter-spacing:.14em;color:var(--ink-dim);margin-top:2px}
#ghostNote{display:none;font-size:11px;letter-spacing:.18em;color:var(--amber)}
/* ---- bottom control deck ---- */
.deck{display:flex;flex-direction:column;align-items:center;gap:14px}
#meter{width:min(520px,86vw);height:34px;position:relative;opacity:0;transition:opacity .25s ease}
#meter.on{opacity:1}
#meter .track{position:absolute;left:0;right:0;top:15px;height:3px;background:rgba(255,255,255,.18);
border-radius:2px;overflow:hidden}
#meter .fill{position:absolute;left:0;top:0;bottom:0;width:0%;
background:linear-gradient(90deg,var(--water),var(--amber),var(--amber-deep));
box-shadow:0 0 16px rgba(255,183,101,.6)}
#meter .sweet{position:absolute;top:9px;height:15px;border-left:1px solid rgba(255,183,101,.75);
border-right:1px solid rgba(255,183,101,.75);background:rgba(255,183,101,.14);display:none}
#meter .needle{position:absolute;top:6px;width:2px;height:21px;background:var(--ink);
box-shadow:0 0 12px rgba(255,255,255,.9);display:none;transform:translateX(-1px)}
#meter .cap{position:absolute;left:0;right:0;top:-4px;display:flex;justify-content:space-between;
font-size:9.5px;letter-spacing:.2em;color:var(--ink-dim)}
#hint{font-family:var(--serif);font-size:13.5px;letter-spacing:.14em;color:var(--ink-dim);
text-shadow:var(--shadow);min-height:1.2em;text-align:center}
#throwBtn{pointer-events:auto;width:96px;height:96px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
background:radial-gradient(circle at 50% 38%,rgba(255,183,101,.22),rgba(11,16,24,.35));
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
color:var(--ink);font-family:var(--serif);font-size:15px;letter-spacing:.14em;
display:flex;align-items:center;justify-content:center;user-select:none;cursor:pointer;
transition:transform .12s ease,border-color .2s ease,box-shadow .2s ease}
#throwBtn:active,#throwBtn.hold{transform:scale(.94);border-color:var(--amber);
box-shadow:0 0 40px rgba(255,183,101,.35),inset 0 0 30px rgba(255,183,101,.2)}
#throwBtn.hidden{opacity:0;pointer-events:none}
#throwBtn.pill{width:auto;height:auto;padding:17px 36px;border-radius:999px;white-space:nowrap;
background:linear-gradient(180deg,rgba(255,183,101,.20),rgba(11,16,24,.42))}
#aimNote{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.4)}
/* 指で操作する端末には、キーボードの案内は要らない */
@media (pointer:coarse){
#aimNote{display:none}
/* 「この石で投げる」は、左下の「タイトルへ」と重ならないよう右へ寄せる */
#throwBtn.pill{align-self:flex-end}
}
#backBtn{position:absolute;left:calc(env(safe-area-inset-left) + 16px);
bottom:calc(env(safe-area-inset-bottom) + 16px);pointer-events:auto;
font-family:var(--serif);font-size:11px;letter-spacing:.24em;color:var(--ink-dim);
padding:9px 14px 9px 17px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
cursor:pointer;background:rgba(11,16,24,.30);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:color .2s,border-color .2s}
#backBtn:hover{color:var(--ink);border-color:var(--amber)}
/* ---- overlays ---- */
.veil{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:18px;padding:32px;text-align:center;pointer-events:auto;
background:radial-gradient(120% 90% at 50% 60%,rgba(6,16,26,.10),rgba(6,16,26,.66));
transition:opacity .6s ease,visibility .6s}
.veil.off{opacity:0;visibility:hidden;pointer-events:none}
/* 中身はロゴのSVG（css/logo.css）。文字ではないので字送りや行間は効かない */
.title{--logo-w:330px;margin:0;padding:0;line-height:0}
.sub{font-family:var(--serif);font-size:12.5px;letter-spacing:.34em;color:var(--ink-dim);margin:14px 0 0;
padding-left:.34em}
.lede{font-size:13px;line-height:2;color:var(--ink-dim);max-width:30em;margin:6px 0 0}
.btn{pointer-events:auto;border:1px solid rgba(255,255,255,.45);background:rgba(11,16,24,.3);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ink);font-family:var(--serif);
font-size:15px;letter-spacing:.22em;padding:15px 34px 15px 40px;border-radius:999px;cursor:pointer;
transition:background .2s,border-color .2s,transform .1s}
.btn:hover{background:rgba(255,183,101,.16);border-color:var(--amber)}
.btn:active{transform:scale(.97)}
.rank{font-family:var(--serif);font-size:clamp(28px,8vw,44px);letter-spacing:.2em;margin:0;padding-left:.2em;
color:var(--amber)}
.score{display:flex;gap:34px;justify-content:center;margin-top:2px}
.score div{font-size:10px;letter-spacing:.22em;color:var(--ink-dim)}
.score b{display:block;font-size:34px;font-weight:200;color:var(--ink);font-variant-numeric:tabular-nums;
margin-top:4px;letter-spacing:-.02em}
.score b i{font-style:normal;font-size:12px;color:var(--ink-dim);margin-left:3px}
.newbest{font-size:11px;letter-spacing:.3em;color:var(--amber);opacity:0}
.newbest.on{opacity:1;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
/* 全面をおおう。下でタイトルや川が組み上がっていく様子を見せない */
#loading{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:18px;
background:linear-gradient(180deg,#8fb2cd 0%,#a8c3d4 42%,#4e7b86 100%);
transition:opacity .6s ease}
#loading.done{opacity:0;pointer-events:none}
/* 読み込み中はメニューを出さない。明けるときは、波紋が消えたあとにふわっと出す */
#titleVeil .btn,#titleVeil #howtoBtn,#titleVeil #soundBtn,
#titleVeil #bestLine,#titleVeil #ghostNote,#titleVeil #credit{
transition:opacity .8s ease .25s,visibility .8s .25s}
#titleVeil.loading .btn,#titleVeil.loading #howtoBtn,#titleVeil.loading #soundBtn,
#titleVeil.loading #bestLine,#titleVeil.loading #ghostNote,#titleVeil.loading #credit{
opacity:0;visibility:hidden;pointer-events:none;transition:none}
.ldRipple{position:relative;width:64px;height:64px}
.ldRipple i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.75);
opacity:0;animation:ldr 2.1s cubic-bezier(.2,.6,.4,1) infinite}
.ldRipple i:nth-child(2){animation-delay:.7s}
.ldRipple i:nth-child(3){animation-delay:1.4s}
@keyframes ldr{0%{transform:scale(.12);opacity:0}
12%{opacity:.9}
100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.ldRipple i{animation:none;opacity:.5;transform:scale(.7)}}
#howtoBtn,#soundBtn{font-family:var(--serif);font-size:11.5px;letter-spacing:.3em;color:var(--ink-dim);
padding:6px 14px 6px 17px;cursor:pointer;pointer-events:auto;border-bottom:1px solid rgba(255,255,255,.22);
transition:color .2s,border-color .2s}
#howtoBtn:hover,#soundBtn:hover{color:var(--ink);border-color:var(--amber)}
#credit{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 14px);
text-align:center;font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.42);line-height:2}
#credit a{color:rgba(255,255,255,.55);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);
pointer-events:auto;transition:color .2s,border-color .2s}
#credit a:hover{color:var(--amber);border-color:var(--amber)}
#howtoModal{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
padding:28px;background:rgba(6,9,14,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s ease,visibility .38s}
#howtoModal.on{opacity:1;visibility:visible;pointer-events:auto}
#howtoCard{max-width:24em;width:100%;border:1px solid rgba(255,255,255,.25);border-radius:18px;
background:rgba(11,16,24,.72);padding:26px 26px 20px;
transform:translateY(14px);transition:transform .38s cubic-bezier(.2,.9,.3,1)}
#howtoModal.on #howtoCard{transform:translateY(0)}
#howtoCard h2{font-family:var(--serif);font-weight:400;font-size:16px;letter-spacing:.4em;margin:0 0 14px;
padding-left:.4em;text-align:center;color:var(--ink)}
#howtoCard p{font-size:12.5px;line-height:2;color:var(--ink-dim);margin:0 0 10px}
#howtoCard b{color:var(--ink);font-weight:600}
#howtoMore{display:block;width:fit-content;margin:16px auto 0;font-family:var(--serif);
font-size:12px;letter-spacing:.24em;color:var(--ink-dim);text-decoration:none;
padding:4px 4px 5px 7px;border-bottom:1px solid rgba(255,255,255,.24);
pointer-events:auto;transition:color .2s,border-color .2s}
#howtoMore:hover{color:var(--ink);border-color:var(--amber)}
#howtoClose{display:block;margin:12px auto 0;font-family:var(--serif);font-size:12px;letter-spacing:.3em;
color:var(--ink-dim);padding:8px 22px 8px 25px;border:1px solid rgba(255,255,255,.3);
border-radius:999px;cursor:pointer;text-align:center;width:fit-content}
#howtoClose:hover{color:var(--ink);border-color:var(--amber)}
#err{max-width:26em;font-size:13px;line-height:1.9;color:var(--ink-dim);display:none}
/* about.html から背景として読み込むためのモード（?bg=1）。UIを一切出さない */
body.bgmode #ui,body.bgmode .veil,body.bgmode #howtoModal{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}