/* 水切り MIZUKIRI — あそびかたのページ（about.html）
配色とフォントは css/tokens.css にある。 */
:root{
/* 本文が長いので、ゲーム画面より少しだけ明るくする */
--ink-dim:rgba(255,255,255,.66);
--card:rgba(9,17,25,.56);
--card-line:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;font-family:var(--sans);color:var(--ink);
background:linear-gradient(180deg,#8fb2cd 0%,#a8c3d4 42%,#4e7b86 100%);
-webkit-font-smoothing:antialiased}
/* ---- 3D背景：ゲーム本体を背景モードで読み込む ---- */
#bg{position:fixed;inset:0;width:100%;height:100%;border:0;pointer-events:none;z-index:0}
/* 上は素通し。いちばん下だけ、フッターの文字が水面に負けない程度に落とす */
#bgVeil{position:fixed;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(6,16,26,0) 0%,rgba(6,16,26,0) 66%,rgba(6,16,26,.32) 100%)}
main{position:relative;z-index:2}
/* ---- 読み込みの波紋（ゲーム側と同じ意匠） ---- */
#pageLoad{position:fixed;inset:0;z-index:10;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}
#pageLoad.done{opacity:0;pointer-events: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)}}
/* ---- 共通 ---- */
.wrap{max-width:40rem;margin:0 auto;padding:0 clamp(18px,5vw,28px)}
section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
padding:14vh 0 12vh}
.card{background:var(--card);border:1px solid var(--card-line);border-radius:20px;
padding:clamp(22px,5vw,34px);
backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
box-shadow:0 18px 60px rgba(4,10,16,.30);
opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.9,.3,1)}
.card.in{opacity:1;transform:none}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,5.2vw,27px);letter-spacing:.24em;
margin:0 0 20px;padding:0 0 15px .24em;border-bottom:1px solid var(--card-line)}
.lead{font-size:11px;letter-spacing:.28em;color:var(--amber);margin:0 0 18px;padding-left:.3em}
p{font-size:14px;line-height:2.15;color:var(--ink-dim);margin:0 0 14px}
p:last-child{margin-bottom:0}
b{color:var(--ink);font-weight:600}
/* ---- ヒーロー ---- */
#hero{min-height:100svh;justify-content:center;text-align:center}
/* 中身はロゴのSVG（css/logo.css）。文字ではないので字送りや行間は効かない */
.title{--logo-w:400px;margin:0;padding:0;line-height:0}
.sub{font-family:var(--serif);font-size:12.5px;letter-spacing:.34em;color:var(--ink-dim);
margin:18px 0 0;padding-left:.34em;text-shadow:var(--shadow)}
.tagline{font-size:14px;line-height:2.2;color:var(--ink);margin:26px auto 0;max-width:22em;
text-shadow:0 2px 16px rgba(0,0,0,.6)}
.scrollcue{margin-top:44px;font-family:var(--serif);font-size:10.5px;letter-spacing:.34em;
color:var(--ink-faint);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
/* ---- ボタン ---- */
.btn{display:inline-block;font-family:var(--serif);font-size:15px;letter-spacing:.24em;
color:var(--ink);text-decoration:none;padding:16px 36px 16px 42px;border-radius:999px;
border:1px solid rgba(255,255,255,.45);background:rgba(9,17,25,.42);
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);cursor:pointer;
transition:background .2s,border-color .2s,transform .12s}
.btn:hover{background:rgba(255,183,101,.18);border-color:var(--amber)}
.btn:active{transform:scale(.97)}
.btn.solid{background:linear-gradient(180deg,rgba(255,183,101,.30),rgba(9,17,25,.5));border-color:rgba(255,183,101,.6)}
.cta{margin-top:30px;text-align:center}
/* ---- 手順 ---- */
.steps{list-style:none;margin:6px 0 0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 20px 46px;counter-increment:s}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:29px;height:29px;
border-radius:50%;border:1px solid rgba(255,183,101,.55);color:var(--amber);
font-size:12px;display:flex;align-items:center;justify-content:center;
font-variant-numeric:tabular-nums}
.steps h3{font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:.2em;margin:2px 0 6px;color:var(--ink)}
.steps p{margin:0;font-size:13px;line-height:2}
/* ---- 操作デモ ---- */
.demo{margin-top:26px;padding-top:24px;border-top:1px solid var(--card-line)}
.demo-t{font-size:10.5px;letter-spacing:.28em;color:var(--amber);margin:0 0 18px}
.dmeter{position:relative;height:36px;margin:0 2px 6px}
.dcap{position:absolute;left:0;right:0;top:-2px;display:flex;justify-content:space-between;
font-size:9.5px;letter-spacing:.2em;color:var(--ink-faint)}
.dtrack{position:absolute;left:0;right:0;top:17px;height:3px;background:rgba(255,255,255,.2);
border-radius:2px;overflow:hidden}
.dfill{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,.55)}
.dsweet{position:absolute;top:11px;height:15px;display:none;
border-left:1px solid rgba(255,183,101,.8);border-right:1px solid rgba(255,183,101,.8);
background:rgba(255,183,101,.16)}
.dneedle{position:absolute;top:8px;width:2px;height:21px;background:var(--ink);display:none;
box-shadow:0 0 12px rgba(255,255,255,.9);transform:translateX(-1px)}
.dhint{font-family:var(--serif);font-size:12.5px;letter-spacing:.12em;color:var(--ink-dim);
min-height:1.6em;text-align:center;margin-bottom:14px}
.drow{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}
.dbtn{font-family:var(--serif);font-size:14px;letter-spacing:.18em;color:var(--ink);
width:104px;height:104px;border-radius:50%;cursor:pointer;user-select:none;
display:flex;align-items:center;justify-content:center;padding-left:.18em;
-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
border:1px solid rgba(255,255,255,.4);
background:radial-gradient(circle at 50% 38%,rgba(255,183,101,.22),rgba(9,17,25,.4));
transition:transform .12s,border-color .2s,box-shadow .2s}
.dbtn.hold{transform:scale(.94);border-color:var(--amber);
box-shadow:0 0 40px rgba(255,183,101,.3),inset 0 0 30px rgba(255,183,101,.18)}
.dagain{font-family:var(--serif);font-size:12px;letter-spacing:.24em;color:var(--ink-dim);
background:none;border:0;border-bottom:1px solid rgba(255,255,255,.28);
padding:6px 10px 6px 13px;cursor:pointer;display:none}
.dagain:hover{color:var(--ink);border-color:var(--amber)}
.dresult{margin-top:16px;text-align:center;min-height:3.4em}
.dresult .rk{font-family:var(--serif);font-size:clamp(19px,4.6vw,23px);letter-spacing:.18em;
color:var(--amber);margin:0 0 6px;padding-left:.18em}
.dresult .rn{font-size:12.5px;line-height:1.95;color:var(--ink-dim);margin:0}
.dresult .rv{font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);margin:8px 0 0;
font-variant-numeric:tabular-nums}
/* ---- 石の性質 ---- */
.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:12px;margin-top:20px}
.prop{border:1px solid var(--card-line);border-radius:14px;padding:15px 16px;background:rgba(255,255,255,.045)}
.prop h4{font-family:var(--serif);font-size:13.5px;font-weight:400;letter-spacing:.18em;margin:0 0 6px;color:var(--ink)}
.prop p{font-size:12px;line-height:1.95;margin:0}
/* ---- モード ---- */
.modes{margin-top:14px}
.mode{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--card-line)}
.mode:first-child{border-top:0}
.mode .mi{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,183,101,.42);
display:flex;align-items:center;justify-content:center;font-size:15px;margin-top:2px}
.mode h3{font-family:var(--serif);font-size:14.5px;font-weight:400;letter-spacing:.2em;margin:2px 0 5px;color:var(--ink)}
.mode p{font-size:12.5px;line-height:2;margin:0}
/* ---- フッター ---- */
footer{position:relative;z-index:2;text-align:center;padding:0 20px 46px;
font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);line-height:2.2}
footer a{color:rgba(255,255,255,.6);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
footer a:hover{color:var(--amber);border-color:var(--amber)}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.card{opacity:1;transform:none;transition:none}
.scrollcue{animation:none}
}