/* ピットストップ — off-white base, ink, muted orange accent only. Quiet "スッ" motion. */
:root{
  --bg:#f7f5f1; --card:#fffdfa; --ink:#1c1a17; --sub:#8a8378; --line:#e6e0d5;
  --accent:#c96a2c; --accent-soft:#f3e3d3; --danger:#b0483e; --ok:#5d7d4f;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;font-size:15px;line-height:1.6}
#app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;padding:0 20px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--accent);text-decoration:none}
.screen{display:none;padding:28px 0 40px;animation:fade .38s cubic-bezier(.22,.8,.3,1)}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}.tg-needle{animation:none!important}}

.kicker{font-size:11px;letter-spacing:.28em;color:var(--sub);text-align:center}
.small{font-size:11px;color:var(--sub)}
.center{text-align:center}
.err{color:var(--danger);font-size:13px;margin:8px 0}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);margin:2px 0 12px}
.chk input{width:16px;height:16px}
.sep-line{border:none;border-top:1px solid var(--line);margin:20px 0}
.note{font-size:12px;color:var(--sub);margin-top:14px}

/* title */
.title-wrap{text-align:center;padding-top:9dvh}
.title-logo{font-size:40px;font-weight:800;letter-spacing:.04em;margin:10px 0 6px}
.title-catch{color:var(--sub);font-size:14px}
.title-gauge{position:relative;height:64px;margin:38px auto 8px;max-width:300px;border-bottom:2px solid var(--line)}
.tg-zone{position:absolute;bottom:0;left:56%;width:22%;height:8px;background:var(--accent-soft);border-radius:4px 4px 0 0}
.tg-needle{position:absolute;bottom:0;left:50%;width:2px;height:56px;background:var(--accent);transform-origin:bottom center;animation:sweep 2.6s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes sweep{from{transform:rotate(-52deg)}to{transform:rotate(52deg)}}
.tg-hub{position:absolute;bottom:-5px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--ink)}
.btn-primary{background:var(--ink);color:#f7f5f1;border-radius:999px;padding:13px 34px;font-weight:700;letter-spacing:.06em;transition:transform .25s cubic-bezier(.22,.8,.3,1),opacity .25s}
.btn-primary:active{transform:scale(.97)}
.btn-primary.big{font-size:16px;padding:15px 44px;margin-top:26px}
.btn-primary.block{display:block;width:100%}
.btn-quiet{display:block;margin:14px auto 0;padding:10px 18px;color:var(--sub);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.title-sub{margin-top:14px;font-size:12px;color:var(--sub)}
.title-foot{margin-top:44px;font-size:12px;color:var(--sub)}
.title-guide{margin-top:10px;font-size:13px}

/* panels / auth */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;margin-top:6dvh}
.panel-title{text-align:center;font-size:24px;margin:8px 0 18px}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:18px}
.seg-btn{flex:1;padding:8px;border-radius:999px;font-size:14px;color:var(--sub);transition:all .25s}
.seg-btn.on{background:var(--ink);color:#f7f5f1}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:12px;color:var(--sub);margin-bottom:5px}
.fld input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:15px}
.fld input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
#form-auth .btn-primary{width:100%;margin-top:4px}

/* home */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:6px 0 16px}
.tb-name{font-weight:700}
.tb-logout{font-size:12px;color:var(--sub)}
.stat-row{display:flex;gap:10px;margin-bottom:20px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-align:center}
.s-label{display:block;font-size:10px;letter-spacing:.14em;color:var(--sub)}
.s-num{display:block;font-size:24px;font-weight:800;margin-top:2px}
#btn-play{margin-top:0}
.howto{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-top:20px}
.howto h3{font-size:13px;letter-spacing:.1em;margin-bottom:8px}
.howto ul{list-style:none}
.howto li{font-size:13px;color:#453f35;margin-bottom:8px}
.menu-list{margin-top:20px;border-top:1px solid var(--line)}
.menu-row{display:flex;width:100%;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);text-align:left}
.mr-sub{font-size:12px;color:var(--sub)}
.menu-row.off{color:var(--sub)}
.home-foot{text-align:center;font-size:11px;color:var(--sub);margin-top:26px}

/* game */
.game-head{display:flex;justify-content:space-between;align-items:center;padding:4px 0 10px}
.back{font-size:20px;width:36px;height:36px;color:var(--sub)}
.gh-round{font-size:12px;letter-spacing:.18em;color:var(--sub)}
.gh-score{font-size:12px;letter-spacing:.1em;color:var(--sub)}
.gh-score b{color:var(--ink);font-size:15px}
.timebar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
#g-time-fill{height:100%;width:100%;background:var(--accent);transition:width .2s linear}
.round{padding-top:26px}
.r-title{text-align:center;font-size:22px}
.r-sub{text-align:center;color:var(--sub);font-size:13px;margin-top:4px}
.gauge{position:relative;height:120px;margin:34px 4px 0;border-bottom:2px solid var(--line)}
.gauge-zone{position:absolute;bottom:0;height:100%;background:linear-gradient(to top,var(--accent-soft),rgba(243,227,211,0));border-radius:8px 8px 0 0}
.gauge-center{position:absolute;bottom:0;width:2px;height:100%;background:var(--accent);opacity:.55}
.gauge-needle{position:absolute;bottom:0;width:3px;height:104px;background:var(--ink);border-radius:2px;transform:translateX(-50%)}
.gauge-scale{position:absolute;bottom:-22px;left:0;right:0;display:flex;justify-content:space-between;font-size:10px;color:var(--sub)}
.gauge-value{text-align:center;margin-top:38px;font-size:34px;font-weight:800}
.gv-unit{font-size:14px;color:var(--sub);margin-left:6px;font-weight:600}
#btn-stop{margin-top:14px}
.seq-log{min-height:44px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:18px 0 14px;font-size:12.5px}
.seq-log .done-step{display:block;color:var(--ok)}
.seq-log-empty{color:var(--sub)}
.seq-btns{display:flex;flex-direction:column;gap:9px}
.seq-btn{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:14.5px;transition:opacity .25s,transform .25s}
.seq-btn:active{transform:scale(.98)}
.seq-btn.used{opacity:0;pointer-events:none;transform:translateY(-4px)}
.seq-btn.wrong{border-color:var(--danger);color:var(--danger)}
.seq-msg{text-align:center;font-size:13px;color:var(--danger);min-height:22px;margin-top:10px}
.round-flash{position:absolute;inset:0;background:rgba(247,245,241,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;animation:fade .3s ease}
.rf-label{font-size:13px;letter-spacing:.3em;color:var(--accent);font-weight:700}
.rf-score{font-size:44px;font-weight:800;margin:6px 0}
.rf-note{color:var(--sub);font-size:13px}

/* result */
.result-panel{text-align:center}
.res-grade{font-size:64px;font-weight:800;color:var(--accent);line-height:1.1}
.res-score{font-size:30px;font-weight:800}
.res-max{font-size:14px;color:var(--sub);font-weight:600}
.res-best{font-size:13px;color:var(--sub);margin-top:4px;min-height:20px}
.res-rounds{list-style:none;text-align:left;margin:18px 0 6px;border-top:1px solid var(--line)}
.res-rounds li{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.res-rounds .rr-score{font-weight:700}

/* ranking */
.subbar{display:flex;align-items:center;gap:6px;padding-bottom:14px}
.subbar h2{font-size:19px}
.rank-list{border-top:1px solid var(--line)}
.rank-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.rank-no{width:28px;text-align:center;font-weight:800;color:var(--sub)}
.rank-row:nth-child(1) .rank-no{color:var(--accent)}
.rank-name{flex:1}
.rank-grade{font-size:12px;color:var(--sub);width:20px;text-align:center}
.rank-score{font-weight:800}
.rank-empty{padding:26px 0;text-align:center;color:var(--sub);font-size:13px}
.rank-me{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;text-align:center}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#f7f5f1;font-size:13px;padding:10px 18px;border-radius:999px;z-index:20;animation:fade .3s ease}

/* === Quality 2026-10-28: sound / feedback / pit texture / result emotion === */
.sound-bar{display:flex;justify-content:flex-end;gap:6px;padding-top:calc(8px + env(safe-area-inset-top))}
.sound-btn{font-size:10.5px;letter-spacing:.08em;font-weight:700;color:var(--ink);background:rgba(255,253,250,.88);border:1px solid var(--line);border-radius:999px;padding:6px 10px;backdrop-filter:blur(4px)}
.sound-btn.off{color:var(--sub);opacity:.75}
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(201,106,44,.7);animation:sparkFly .55s cubic-bezier(.22,.8,.3,1) forwards}
.spark.cool{background:#8a8378;box-shadow:none;width:5px;height:5px}
@keyframes sparkFly{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
#g-score.bump{animation:bump .32s cubic-bezier(.22,.8,.3,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
#scr-game{background:radial-gradient(120% 46% at 50% 0%,rgba(201,106,44,.07),transparent 60%),linear-gradient(to bottom,transparent 0 78%,rgba(28,26,23,.035) 78% 78.4%,transparent 78.4%),repeating-linear-gradient(90deg,transparent 0 47px,rgba(28,26,23,.008) 47px 48px)}
.pit-deco{position:relative;height:46px;max-width:320px;margin:14px auto 0}
.pit-tire{position:absolute;left:6px;bottom:0;width:44px;height:44px;filter:drop-shadow(0 4px 4px rgba(28,26,23,.25))}
.pit-wrench{position:absolute;right:44px;bottom:4px;width:30px;height:30px;opacity:.75;transform:rotate(8deg)}
.pit-cone{position:absolute;right:8px;bottom:0;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:26px solid var(--accent);opacity:.85}
.pit-cone::after{content:"";position:absolute;left:-11px;top:14px;width:22px;height:4px;background:#fffdfa;opacity:.8}
.gauge{background:linear-gradient(to bottom,rgba(255,253,250,.9),rgba(230,224,213,.5)),repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(28,26,23,.14) calc(10% - 1px) 10%);border:1px solid var(--line);border-bottom:2px solid #cfc6b4;border-radius:10px 10px 0 0;box-shadow:inset 0 -14px 22px rgba(28,26,23,.06),inset 0 1px 0 #fff}
.gauge-zone{background:linear-gradient(to top,rgba(201,106,44,.34),rgba(243,227,211,.12));box-shadow:0 0 14px rgba(201,106,44,.28);border-left:1px solid rgba(201,106,44,.35);border-right:1px solid rgba(201,106,44,.35)}
.gauge-needle{box-shadow:0 0 0 1px rgba(255,253,250,.6),2px 0 6px rgba(28,26,23,.3)}
.gauge-needle.snapped{animation:needleSnap .22s cubic-bezier(.22,.8,.3,1)}
@keyframes needleSnap{0%{height:104px}40%{height:94px}100%{height:104px}}
.gauge.shake{animation:shakeX .34s ease}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
.gauge.is-stopped ~ .gauge-value{animation:bump .3s cubic-bezier(.22,.8,.3,1)}
.seq-btn{position:relative;padding-left:32px;box-shadow:0 1px 2px rgba(28,26,23,.05),inset 0 1px 0 #fff}
.seq-btn::before{content:"";position:absolute;left:13px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8d0bf,#8a8378);box-shadow:inset 0 0 2px rgba(28,26,23,.5)}
.seq-btn.wrong{animation:shakeX .34s ease}
.seq-log .done-step{animation:stepIn .3s cubic-bezier(.22,.8,.3,1)}
@keyframes stepIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.round-flash .rf-score{animation:rfPop .38s cubic-bezier(.22,.8,.3,1)}
@keyframes rfPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.round-flash.rf-perfect .rf-label{font-size:16px}
.round-flash.rf-perfect{background:rgba(247,245,241,.9)}
.round-flash.rf-miss .rf-label,.round-flash.rf-time-up .rf-label{color:var(--danger)}
.res-title{font-size:17px;font-weight:800;letter-spacing:.06em;margin-top:2px}
.res-time{font-size:12px;color:var(--sub);margin-top:6px;letter-spacing:.08em}
.res-quote{font-size:13.5px;color:#453f35;margin-top:8px;line-height:1.7}
.res-grade.stamp{animation:stamp .42s cubic-bezier(.22,.8,.3,1)}
@keyframes stamp{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.spark{display:none}.gauge.shake,.seq-btn.wrong,.res-grade.stamp{animation:none}}

/* === Realism 2026-10-29: garage air / instrument & tool material / work weight (drawing only) === */
body{background:radial-gradient(130% 42% at 50% -6%,rgba(255,252,244,.9),rgba(255,252,244,0) 62%),linear-gradient(to bottom,#f8f6f2 0 72%,#f1ede4 86%,#eae4d6 100%);background-color:var(--bg)}
.btn-primary{background:linear-gradient(to bottom,#2e2a25,#1c1a17 55%,#141210);box-shadow:0 10px 22px rgba(28,26,23,.20),0 2px 5px rgba(28,26,23,.18),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 4px rgba(0,0,0,.35)}
.btn-primary:active{transform:scale(.97) translateY(1px);box-shadow:0 4px 10px rgba(28,26,23,.20),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 3px rgba(0,0,0,.35)}
.panel{background:linear-gradient(to bottom,#fffefa,#fdfaf3 60%,#f8f3e9);box-shadow:0 14px 30px rgba(28,26,23,.08),0 2px 6px rgba(28,26,23,.05),inset 0 1px 0 #fff}
.stat{background:linear-gradient(to bottom,#fffefa,#faf6ec);box-shadow:0 6px 14px rgba(28,26,23,.06),0 1px 3px rgba(28,26,23,.05),inset 0 1px 0 #fff}
.s-num{text-shadow:0 1px 0 #fff,0 -1px 1px rgba(28,26,23,.08)}
.howto{background:linear-gradient(to bottom,#fffefa,#faf6ec);box-shadow:0 6px 14px rgba(28,26,23,.05),inset 0 1px 0 #fff}
.title-logo{text-shadow:0 1px 0 rgba(255,255,255,.7),0 10px 24px rgba(28,26,23,.10)}
.title-gauge{border-bottom:none;background:linear-gradient(to top,rgba(28,26,23,.055),rgba(28,26,23,0) 46%),repeating-linear-gradient(90deg,transparent 0 9px,rgba(28,26,23,.13) 9px 10px);background-size:100% 100%,100% 9px;background-position:bottom,bottom;background-repeat:no-repeat;box-shadow:0 2px 0 -1px #cfc6b4}
.title-gauge::after{content:"";position:absolute;left:6%;right:6%;bottom:-13px;height:10px;border-radius:50%;background:radial-gradient(50% 100% at 50% 0%,rgba(28,26,23,.13),transparent 70%)}
.tg-zone{background:linear-gradient(to top,var(--accent-soft),#f8ecdc);box-shadow:0 0 12px rgba(201,106,44,.22),inset 0 1px 0 rgba(255,255,255,.65)}
.tg-needle{background:linear-gradient(to top,#a34d1d,var(--accent) 60%,#e08b4d);box-shadow:1px 0 3px rgba(28,26,23,.25)}
.tg-hub{background:radial-gradient(circle at 35% 32%,#5a544a,#26231f 72%);box-shadow:0 2px 4px rgba(28,26,23,.35),inset 0 1px 1px rgba(255,255,255,.35)}
#scr-title .title-wrap{position:relative}
#scr-title .title-wrap::before{content:"";position:absolute;left:50%;top:-4dvh;width:340px;max-width:92vw;height:300px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 42%,rgba(255,246,226,.75),rgba(255,246,226,0) 68%);pointer-events:none}
#scr-game{position:relative;background:radial-gradient(120% 40% at 50% -4%,rgba(255,240,214,.5),transparent 58%),repeating-linear-gradient(90deg,transparent 0 47px,rgba(28,26,23,.014) 47px 48px),linear-gradient(to bottom,rgba(255,253,250,0) 0 60%,rgba(28,26,23,.028) 76.8%,rgba(28,26,23,.05) 77.2%,rgba(120,108,88,.06) 78%,rgba(94,84,68,.085) 100%)}
#scr-game::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,rgba(122,110,92,.34) 1.2px,transparent 1.8px),radial-gradient(circle,rgba(122,110,92,.22) 1px,transparent 1.6px),radial-gradient(circle,rgba(255,252,240,.8) 1px,transparent 1.6px);background-size:190px 260px,260px 340px,150px 210px;background-position:12px 30px,90px 120px,50px 190px;animation:dustDrift 13s ease-in-out infinite alternate}
@keyframes dustDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(5px,-9px,0)}}
.timebar{height:5px;background:linear-gradient(to bottom,#d9d1c0,#e9e3d5);box-shadow:inset 0 1px 3px rgba(28,26,23,.28),inset 0 -1px 0 rgba(255,255,255,.6)}
#g-time-fill{background:linear-gradient(to bottom,#e08b4d,var(--accent) 55%,#a34d1d);box-shadow:0 0 8px rgba(201,106,44,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.pit-deco::before{content:"";position:absolute;left:-6px;right:-6px;bottom:-7px;height:11px;border-radius:3px;background:linear-gradient(to bottom,#b3a68d,#8a7d68 55%,#6f6452);box-shadow:0 7px 10px rgba(28,26,23,.18),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(28,26,23,.3)}
.pit-deco::after{content:"";position:absolute;left:2%;right:2%;bottom:-17px;height:11px;border-radius:50%;background:radial-gradient(50% 100% at 50% 0%,rgba(28,26,23,.16),transparent 70%)}
.pit-tire{filter:drop-shadow(0 5px 5px rgba(28,26,23,.35)) drop-shadow(0 1px 1px rgba(28,26,23,.3))}
.pit-wrench{filter:drop-shadow(0 3px 3px rgba(28,26,23,.30))}
.pit-cone{filter:drop-shadow(0 4px 4px rgba(28,26,23,.28))}
.gauge{background:linear-gradient(to bottom,rgba(255,253,250,.94),rgba(232,226,214,.55)),repeating-linear-gradient(90deg,transparent 0 calc(2% - 1px),rgba(28,26,23,.05) calc(2% - 1px) 2%),repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(28,26,23,.15) calc(10% - 1px) 10%);border:1px solid #d8d0bf;border-bottom:3px solid #bfb49e;box-shadow:0 12px 24px rgba(28,26,23,.10),0 2px 5px rgba(28,26,23,.07),inset 0 -16px 24px rgba(28,26,23,.07),inset 0 1px 0 #fff}
.gauge::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 4px at 11px 11px,#c9c0ab 2.6px,#6f695e 3.6px,rgba(28,26,23,.18) 4.4px,transparent 5.4px),radial-gradient(circle 4px at calc(100% - 11px) 11px,#c9c0ab 2.6px,#6f695e 3.6px,rgba(28,26,23,.18) 4.4px,transparent 5.4px),radial-gradient(circle 4px at 11px calc(100% - 9px),#c9c0ab 2.6px,#6f695e 3.6px,rgba(28,26,23,.18) 4.4px,transparent 5.4px),radial-gradient(circle 4px at calc(100% - 11px) calc(100% - 9px),#c9c0ab 2.6px,#6f695e 3.6px,rgba(28,26,23,.18) 4.4px,transparent 5.4px)}
.gauge::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.13) 45%,rgba(255,255,255,.03) 56%,transparent 70%)}
.gauge-zone{background:linear-gradient(to top,rgba(201,106,44,.40),rgba(243,227,211,.14));box-shadow:0 0 16px rgba(201,106,44,.30),inset 0 1px 0 rgba(255,255,255,.35)}
.gauge-needle{background:linear-gradient(to right,#0f0d0b,#2b2823 55%,#0f0d0b);box-shadow:0 0 0 1px rgba(255,253,250,.55),2px 0 7px rgba(28,26,23,.35)}
.gauge-needle::after{content:"";position:absolute;left:50%;bottom:-4px;width:13px;height:13px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 36% 32%,#e3dcc9,#8a8378 58%,#57534a);box-shadow:0 2px 4px rgba(28,26,23,.4),inset 0 -1px 2px rgba(28,26,23,.4)}
.gauge-needle.settle{animation:needleSettle .34s cubic-bezier(.22,.8,.3,1)}
@keyframes needleSettle{0%{margin-left:0}30%{margin-left:-1.6px}55%{margin-left:1.2px}78%{margin-left:-.6px}100%{margin-left:0}}
.gauge-value{text-shadow:0 1px 0 #fff,0 -1px 1px rgba(28,26,23,.10)}
.seq-btns{background:linear-gradient(to bottom,#efe9db,#e7dfcd);border:1px solid #ddd4c0;border-radius:14px;padding:10px;box-shadow:inset 0 2px 8px rgba(28,26,23,.10),inset 0 -1px 0 rgba(255,255,255,.55),0 8px 18px rgba(28,26,23,.06)}
.seq-btn{background:linear-gradient(to bottom,#fffefa,#faf5ea 55%,#f1ebdb);border-color:#ddd4c0;box-shadow:0 4px 9px rgba(28,26,23,.09),0 1px 2px rgba(28,26,23,.07),inset 0 1px 0 #fff,inset 0 -2px 3px rgba(28,26,23,.05);padding-right:32px}
.seq-btn::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8d0bf,#8a8378);box-shadow:inset 0 0 2px rgba(28,26,23,.5)}
.seq-btn:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(28,26,23,.10),inset 0 1px 0 #fff,inset 0 -1px 2px rgba(28,26,23,.06)}
.seq-log{position:relative;background:linear-gradient(to bottom,#fffefa,#fbf7ec);box-shadow:0 6px 14px rgba(28,26,23,.06),inset 0 1px 0 #fff;padding-top:14px}
.seq-log::before{content:"";position:absolute;left:50%;top:-6px;width:64px;height:12px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(to bottom,#c9c0ab,#8a8378 60%,#6f695e);box-shadow:0 2px 4px rgba(28,26,23,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.seq-log .done-step{border-bottom:1px dashed rgba(93,125,79,.22);padding:1px 0}
.seq-log .done-step:last-child{border-bottom:none}
.round-flash{background:radial-gradient(90% 60% at 50% 42%,rgba(255,250,238,.96),rgba(247,245,241,.93) 70%)}
.rf-score{text-shadow:0 1px 0 #fff,0 8px 20px rgba(28,26,23,.12)}
.round-flash.rf-perfect .rf-label{text-shadow:0 0 14px rgba(201,106,44,.45)}
.res-grade{text-shadow:0 2px 0 rgba(255,255,255,.65),0 10px 22px rgba(201,106,44,.22)}
.res-rounds li{box-shadow:0 1px 0 rgba(255,255,255,.5)}
.rank-row{box-shadow:0 1px 0 rgba(255,255,255,.45)}
.puff{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(196,186,168,.5),rgba(196,186,168,0) 68%);animation:puffGrow .62s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes puffGrow{from{opacity:.85;transform:translate(-50%,-50%) scale(.35)}to{opacity:0;transform:translate(-50%,-58%) scale(1.25)}}
.ring{position:absolute;border-radius:50%;border:2px solid rgba(201,106,44,.55);box-shadow:0 0 10px rgba(201,106,44,.25);animation:ringOut .55s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes ringOut{from{opacity:.9;transform:translate(-50%,-50%) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
@media (prefers-reduced-motion:reduce){#scr-game::after{animation:none}.gauge-needle.settle{animation:none}.puff,.ring{display:none}}

/* === Appify 2026-10-28: play surface fixed to viewport (game page only, scoped by body.game) === */
html:has(> body.game){height:100%;overflow:hidden;overscroll-behavior:none}
body.game{position:fixed;inset:0;left:0;right:0;margin-left:auto;margin-right:auto;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body.game #app{height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}

/* === Recheck 2026-10-29: 新条件一式（長押し全廃／収納再編／チップ回避／案内役ジン／プレイヤーチップ／カタログ／ネイティブ級演出） === */
/* --- 長押しポップアップ全廃: プレイ面は callout/選択を止め、入力欄だけ選択可を維持 --- */
#app, #app *, #toast, #fx-layer{-webkit-touch-callout:none}
#app :not(input):not(textarea), #toast, #fx-layer{user-select:none;-webkit-user-select:none}
#app input, #app textarea{user-select:text;-webkit-user-select:text}
/* --- CENTERチップ回避: 音ボタンは左へ寄せてチップ（右上）と分離。プレイ中はチップ自体を隠す（本作側回避・共通キット無変更） --- */
.sound-bar{justify-content:flex-start}
body.game-active #azc-chip, body.game-active #azc-menu{display:none!important}
/* --- ホーム追加カード（.azip-card）被りの本作側回避（2026-11-02 バグ総点検）:
   ログイン画面の「登録せずに試す」やリセット画面の送信ボタンがカードに覆われて
   押せなくなっていたため、ゲーム／結果／フォーム画面ではカードを出さない --- */
body.play-active .azip-card, body.end-active .azip-card, body.form-active .azip-card, body.home-active .azip-card{display:none !important}
/* --- 案内役ジン（ゲーム専用オリジナル・実サービス意匠は持ち込まない） --- */
.guide-slot{display:inline-flex;flex:none;align-items:center;justify-content:center}
.guide-slot svg{width:44px;height:44px;display:block;animation:jinFloat 3.6s ease-in-out infinite alternate}
.guide-slot.big svg{width:62px;height:62px}
.guide-slot.sm svg{width:40px;height:40px}
@keyframes jinFloat{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
.guide-name{font-weight:800;font-size:13px;letter-spacing:.04em}
.guide-name-chip{font-size:11px;color:var(--sub);font-weight:700}
.title-guide-chara{display:flex;align-items:center;gap:11px;justify-content:center;margin-top:20px;text-align:left}
.tgc-text{max-width:210px}
.tgc-line{font-size:12px;color:var(--sub);line-height:1.55;margin-top:1px}
.howto-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.howto-head h3{margin:0}
.subbar-guide{margin-left:auto;display:flex;align-items:center;gap:6px}
.res-guide{display:flex;align-items:center;gap:7px;justify-content:center;margin-top:10px}
/* --- CENTERアバター／名前（プレイヤー本人・全タイトル共通の見せ方） --- */
.az-player{display:flex;align-items:center;gap:9px}
.azp-av{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none;background:#e9e2d2;box-shadow:0 0 0 1px var(--line),0 3px 7px rgba(28,26,23,.13)}
.azp-av svg,.azp-av img{width:36px;height:36px;display:block;object-fit:cover}
.azp-meta{display:flex;flex-direction:column;line-height:1.3;text-align:left;min-width:0}
.azp-name{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.azp-sub{font-size:10px;color:var(--sub);letter-spacing:.1em;font-weight:700}
.title-player{justify-content:center;width:fit-content;max-width:100%;margin:16px auto 0;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 16px 5px 5px;box-shadow:0 6px 14px rgba(28,26,23,.06)}
.rank-player{justify-content:center;margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.res-player{justify-content:center;margin-top:12px}
/* --- タイトル収納: 追加した案内役＋プレイヤーチップの分を間隔で吸収（844内） --- */
#scr-title .title-wrap{padding-top:3.5dvh}
#scr-title .btn-primary.big{margin-top:18px}
#scr-title .title-gauge{margin-top:22px}
#scr-title .title-foot{margin-top:24px}
/* --- 主プレイ画面の再編: 縮小ではなく再編で大きく（ゲージ面は余白を使って拡大、手順面は完了ボタンの畳み込みで収納） --- */
#scr-game.active{display:flex;flex-direction:column;min-height:calc(100dvh - 46px);padding-top:10px}
#scr-game .round{flex:1;display:flex;flex-direction:column;padding-top:12px}
#round-gauge{justify-content:center}
#round-gauge .gauge{height:168px;margin-top:26px}
#round-gauge .gauge-needle{height:150px}
#round-gauge .gauge-value{font-size:40px;margin-top:44px}
#round-gauge #btn-stop{margin-top:18px;padding:17px 44px}
@keyframes needleSnap{0%{height:150px}40%{height:138px}100%{height:150px}}
#round-seq .seq-log{margin:12px 0 10px;min-height:38px}
#round-seq .seq-btns{gap:7px;padding:8px}
#round-seq .seq-btn{padding:10.5px 30px 10.5px 30px;font-size:14px}
.seq-btn.used{height:0;min-height:0;padding-top:0;padding-bottom:0;border-width:0;margin-top:-7px;overflow:hidden;box-shadow:none}
.seq-btn.used::before,.seq-btn.used::after{display:none}
/* --- ショップカタログ（アズコイン販売中） --- */
.shop-guide{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.shop-guide .guide-slot svg{width:44px;height:44px}
.shop-guide-text{margin-left:2px}
.shop-guide-name{font-weight:800;font-size:14.5px}
.shop-guide-sub{color:var(--sub);font-size:12px}
.shop-cat-note{font-size:12px;color:var(--sub);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;line-height:1.65;margin-bottom:6px}
.shop-cat-head{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--sub);margin:16px 2px 2px}
.shop-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.shop-item small{display:block;color:var(--sub);font-size:12px;font-weight:400}
.btn-disabled{font-size:12px;font-weight:700;color:var(--sub);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 13px;white-space:nowrap}
.catalog-row{gap:10px;flex-wrap:wrap}
.catalog-row .s-main{flex:1;min-width:0}
.catalog-row .s-main b{font-size:14.5px}
.catalog-row .s-effect{flex:0 0 100%;color:var(--sub);font-size:12px;line-height:1.65}
.catalog-row .s-price{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.catalog-row .s-tax{display:inline!important;font-size:10px;color:var(--sub);font-weight:700;margin-left:3px}
.shop-ic-wrap{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;background:#fffdf8;border:1px solid var(--line);border-radius:10px}
.shop-ic{width:23px;height:23px;display:block}
.shop-badge-design{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#a34d1d;background:var(--accent-soft);border-radius:99px;padding:2px 7px;margin-left:7px;vertical-align:2px}
.catalog-btn{font:inherit}
.catalog-btn:disabled{opacity:.85;cursor:default}
/* --- ネイティブアプリ級の演出（静かなイージングのみ・派手さは光と粒子の質で） --- */
@keyframes riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#scr-title.active .title-wrap>*{animation:riseIn .55s cubic-bezier(.22,1,.36,1) both}
#scr-title.active .title-wrap>*:nth-child(2){animation-delay:.05s}
#scr-title.active .title-wrap>*:nth-child(3){animation-delay:.1s}
#scr-title.active .title-wrap>*:nth-child(4){animation-delay:.16s}
#scr-title.active .title-wrap>*:nth-child(5){animation-delay:.22s}
#scr-title.active .title-wrap>*:nth-child(6){animation-delay:.28s}
#scr-title.active .title-wrap>*:nth-child(7){animation-delay:.34s}
#scr-title.active .title-wrap>*:nth-child(8){animation-delay:.4s}
#scr-shop.active .catalog-row, #scr-shop.active .ref-item, #scr-ranking.active .rank-row{animation:riseIn .34s cubic-bezier(.22,1,.36,1) both}
#scr-shop.active .catalog-row:nth-of-type(3){animation-delay:.05s}
#scr-result.active .result-panel>*{animation:riseIn .45s cubic-bezier(.22,1,.36,1) both}
#scr-result.active .result-panel>*:nth-child(3){animation-delay:.06s}
#scr-result.active .result-panel>*:nth-child(5){animation-delay:.12s}
#btn-retry{animation:retryGlow 2.6s ease-in-out infinite}
@keyframes retryGlow{0%,100%{box-shadow:0 10px 22px rgba(28,26,23,.20),0 0 0 0 rgba(201,106,44,0)}50%{box-shadow:0 10px 22px rgba(28,26,23,.20),0 0 0 5px rgba(201,106,44,.14)}}
.res-grade{position:relative}
#scr-result.active .res-grade::after{content:"";position:absolute;inset:-6px -18px;background:linear-gradient(105deg,transparent 42%,rgba(255,214,150,.5) 50%,transparent 58%);transform:translateX(-90%);animation:gradeGlint 1.1s cubic-bezier(.22,1,.36,1) .25s both;pointer-events:none}
@keyframes gradeGlint{to{transform:translateX(90%)}}
.menu-row, .shop-item{transition:scale .16s cubic-bezier(.22,1,.36,1)}
.menu-row:active, .shop-item:active{scale:.985}
@media (prefers-reduced-motion:reduce){
  .guide-slot svg, #btn-retry{animation:none}
  #scr-title.active .title-wrap>*, #scr-shop.active .catalog-row, #scr-shop.active .ref-item, #scr-ranking.active .rank-row, #scr-result.active .result-panel>*{animation:none}
  #scr-result.active .res-grade::after{display:none}
}

/* === アイテムショップ大型化（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */
.azs-balance{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.azs-balance-label{font-size:11px;letter-spacing:.08em;color:var(--sub);font-weight:700}
.azs-balance-num{font-size:20px;font-variant-numeric:tabular-nums}
.azs-balance-link{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
.azs-guest{margin-top:14px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 16px}
.azs-guest p{font-size:13.5px;line-height:1.7;margin-bottom:14px}
.azs-stage{display:flex;align-items:center;gap:4px;margin-top:16px}
.azs-arrow{appearance:none;border:none;background:none;font-size:30px;line-height:1;color:var(--sub);cursor:pointer;padding:10px 6px;flex:none;transition:transform .25s cubic-bezier(.22,.8,.3,1),color .25s;-webkit-tap-highlight-color:transparent}
.azs-arrow:active{transform:scale(.9);color:var(--ink)}
.azs-focus{flex:1;height:218px;border-radius:20px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .45s cubic-bezier(.22,.8,.3,1)}
.azs-focus .shop-ic{width:132px;height:132px;animation:azsIn .5s cubic-bezier(.22,.8,.3,1) both}
@keyframes azsIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.azs-info{text-align:center;margin-top:16px}
.azs-kind{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--sub)}
.azs-name{font-size:22px;letter-spacing:.03em;margin-top:4px}
.azs-effect{font-size:13px;color:#55524b;line-height:1.7;margin-top:8px;min-height:2.6em}
.azs-price{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px}
.azs-price-unit{font-size:13px;font-weight:700;color:var(--sub)}
.azs-owned{font-size:12.5px;color:var(--accent);font-weight:700;min-height:1.4em;margin-top:4px}
.azs-action{width:100%;margin-top:10px;padding:14px 26px;font-size:16px}
.azs-action:disabled{opacity:.45;cursor:default}
.azs-note{font-size:11.5px;color:var(--sub);margin-top:10px}
.azs-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
.azs-dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
.azs-dot{width:6px;height:6px;border-radius:99px;background:var(--line);transition:background .3s,width .3s cubic-bezier(.22,.8,.3,1)}
.azs-dot.on{background:var(--ink);width:18px}
.azs-strip{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.azs-thumb{position:relative;appearance:none;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:#fffdf8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.22,.8,.3,1),border-color .25s;-webkit-tap-highlight-color:transparent;padding:0}
.azs-thumb .shop-ic{width:30px;height:30px}
.azs-thumb.on{border-color:var(--ink);transform:translateY(-2px)}
.azs-thumb-owned{position:absolute;right:3px;bottom:3px;font-size:9px;font-weight:700;color:#fff;background:var(--accent);border-radius:99px;padding:1px 5px}
.azs-sheet-wrap{position:fixed;inset:0;z-index:80}
.azs-sheet-backdrop{position:absolute;inset:0;background:rgba(28,26,22,.42);animation:azsFade .25s ease both}
.azs-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:20px 20px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto;animation:azsSheet .38s cubic-bezier(.22,.8,.3,1) both}
@keyframes azsFade{from{opacity:0}to{opacity:1}}
@keyframes azsSheet{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.azs-sheet-kind{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--sub)}
.azs-sheet-name{font-size:19px;margin-top:3px}
.azs-sheet-rows{margin-top:14px;border-top:1px solid var(--line)}
.azs-sheet-rows>div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.azs-sheet-rows b{font-size:16px;font-variant-numeric:tabular-nums}
.azs-sheet-note{font-size:11.5px;color:var(--sub);margin-top:12px}
.azs-sheet-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
.azs-sheet-error{font-size:13px;color:var(--danger);margin-top:10px}
.azs-sheet-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.item-qty{font-weight:700;color:var(--accent)}
/* 進行アイテムのボタン */
.btn-item{display:block;margin:0 auto 12px;background:var(--card);border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:700}
.btn-item:active{transform:scale(.97)}
.seq-btn.hint-glow{border-color:#c9a959;box-shadow:0 0 0 2px rgba(201,169,89,.55),0 0 18px rgba(201,169,89,.5)}
.retry-bar{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:center}
.retry-note{font-size:13.5px;margin-bottom:10px}
.retry-btns{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.btn-quiet.inline{display:inline-block;margin:0}
/* ゲージの紋（AZRIONプレミアム装備時のみ表示） */
.gauge-crest{display:none;position:absolute;top:10px;right:12px;width:24px;height:24px;border-radius:50%;border:1.5px solid #c9a959;color:#a87c22;font-size:12px;font-weight:800;align-items:center;justify-content:center;background:rgba(255,253,248,.85)}
/* === 化粧品の反映 === */
/* 金の工具セット：工具棚のタイヤとレンチが金の輝きに */
body.skin-tool-gold .pit-tire{filter:sepia(.9) saturate(2.8) hue-rotate(-10deg) brightness(1.1) drop-shadow(0 4px 4px rgba(120,84,20,.4))}
body.skin-tool-gold .pit-wrench{filter:sepia(.95) saturate(3.2) hue-rotate(-8deg) brightness(1.12) drop-shadow(0 3px 3px rgba(120,84,20,.4));opacity:1}
/* 木目の工具棚：棚板（工具棚）と作業台（手順トレイ）が木目に */
body.skin-garage-wood .pit-deco::before{background:linear-gradient(to bottom,#b98a5a,#96683c 55%,#7a5228);box-shadow:0 7px 10px rgba(90,58,24,.25),inset 0 1px 0 rgba(255,240,214,.5),inset 0 -2px 3px rgba(60,38,14,.4)}
body.skin-garage-wood .seq-btns{background:linear-gradient(to bottom,#c49a68,#a97c48);border-color:#8a6236;box-shadow:inset 0 2px 8px rgba(60,38,14,.25),inset 0 -1px 0 rgba(255,240,214,.35),0 8px 18px rgba(90,58,24,.12)}
body.skin-garage-wood .seq-btn{background:linear-gradient(to bottom,#fff8ec,#f7ecd8 55%,#efdfc2)}
/* AZRIONプレミアム：ゲージの縁に金のライン＋右上に小さな紋 */
body.skin-tool-azrion .gauge{border-color:#c9a959;box-shadow:0 12px 24px rgba(28,26,23,.10),0 2px 5px rgba(28,26,23,.07),inset 0 0 0 1.5px rgba(201,169,89,.65),inset 0 -16px 24px rgba(28,26,23,.07),inset 0 1px 0 #fff}
body.skin-tool-azrion .gauge-center{background:#c9a959;opacity:.95}
body.skin-tool-azrion .gauge-crest{display:flex}
body.skin-tool-azrion .pit-wrench{filter:drop-shadow(0 3px 3px rgba(168,124,34,.55))}
/* テーマ：夕日のドライブ（画面全体が暖かい夕日の色合いに） */
body.theme-sunset{--bg:#f9ecdc;--card:#fffaf0;--line:#ecd9bd;--accent-soft:#f8ddba;background:radial-gradient(130% 42% at 50% -6%,rgba(255,214,150,.75),rgba(255,214,150,0) 62%),linear-gradient(to bottom,#fcebd2 0 72%,#f7ddba 86%,#f0d0a2 100%);background-color:var(--bg)}
body.theme-sunset .tg-zone{background:linear-gradient(to top,#f2b26b,#f8ddba);box-shadow:0 0 12px rgba(224,139,77,.4)}
/* テーマ：真夜中のガレージ（画面全体が静かな夜の灯りの色合いに） */
body.theme-midnight{--bg:#16181d;--card:#1f232a;--ink:#ece7db;--sub:#98a0a8;--line:#333a44;--accent-soft:#3a2e22;background:radial-gradient(130% 42% at 50% -6%,rgba(90,110,150,.20),rgba(90,110,150,0) 62%),linear-gradient(to bottom,#1a1d23 0 72%,#14161a 100%);background-color:var(--bg)}
body.theme-midnight .panel,body.theme-midnight .stat,body.theme-midnight .howto{background:linear-gradient(to bottom,#232830,#1d2129);box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
body.theme-midnight .fld input{background:#262b33;color:var(--ink)}
body.theme-midnight .seq-btns{background:linear-gradient(to bottom,#232830,#1b1f26);border-color:#333a44}
body.theme-midnight .seq-btn{background:linear-gradient(to bottom,#2a3038,#22262e);border-color:#3a414c;color:var(--ink)}
body.theme-midnight .seq-log{background:linear-gradient(to bottom,#232830,#1d2129)}
body.theme-midnight .gauge{background:linear-gradient(to bottom,rgba(38,43,52,.94),rgba(24,27,33,.6));border-color:#3a414c}
body.theme-midnight .azs-thumb{background:#232830}
body.theme-midnight .title-logo{text-shadow:0 1px 0 rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.4)}

.azs-banner{display:block;margin:30px 0 2px;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;overflow:hidden;line-height:0;aspect-ratio:4/1;background:#16222e;transition:transform .12s ease}
.azs-banner img{display:block;width:100%;height:100%;object-fit:cover}
.azs-banner:active{transform:scale(.99)}

/* === ノースクロール是正 (2026-11-01 FIX1): タイトル画面を 375×812 に収める ===
   構造のみの是正（文言・導線・世界観は不変）。 */
#app { padding-top: 12px; }
#scr-title .title-logo { margin-top: 6px; line-height: 1.2; }
#scr-title .title-gauge { margin-top: 14px; }
#scr-title .title-guide-chara { margin-top: 12px; }
#scr-title .title-player { margin-top: 10px; padding: 2px 11px 2px 2px; }
#scr-title .title-player .azp-av, #scr-title .title-player .azp-av svg, #scr-title .title-player .azp-av img { width: 26px; height: 26px; }
#scr-title #btn-start { margin-top: 12px; }
#scr-title .title-foot { margin-top: 12px; line-height: 1.5; }
#scr-title .title-guide { margin-top: 6px; }
#scr-title .azs-banner { margin-top: 10px; height: 38px; aspect-ratio: auto; }
#scr-title .azs-banner img { object-position: center 42%; }
.azi-strip { padding-top: 10px !important; padding-bottom: 10px !important; }
.azi-strip-title { line-height: 1.35 !important; }
.azi-strip-sub { line-height: 1.4 !important; }

/* === ノースクロール是正 調整2 (2026-11-01 FIX1): #app 上パディング追加を取り消し ===
   元の #app は上パディング0で、認証等の周辺画面の高さを増やさないため。 */
#app { padding-top: 0; }

/* === バグ総点検 是正2 (2026-11-02): 低い画面 (〜720px) の収納 ===
   375×667 の実測: (1) 手順ラウンド (8ステップ) が #app を約101px 溢れる
   (2) ホームが約128px 溢れ「アイテムショップ」が画面下に落ちる
   (3) タイトルでホーム追加カード (533..657) がガイドリンク (564..585) と
   アズサババナー (595..633) を覆う。構造・文言は不変、余白と寸法のみ詰める。
   812px の画面には適用されない。 */
@media (max-height: 720px){
  /* タイトル: カードの上端 (533) より上にリンクとバナーを収める */
  #scr-title{padding-top:12px}
  #scr-title .title-wrap{padding-top:1dvh}
  #scr-title .title-logo{font-size:34px;margin:6px 0 4px}
  #scr-title .title-gauge{height:36px;margin-top:8px}
  #scr-title .tg-needle{height:34px}
  #scr-title .title-guide-chara{margin-top:8px}
  #scr-title .guide-slot.big svg{width:50px;height:50px}
  #scr-title .title-player{margin-top:8px}
  #scr-title #btn-start{margin-top:10px}
  #scr-title .title-sub{margin-top:8px}
  #scr-title .title-foot{margin-top:8px}
  #scr-title .title-guide{margin-top:4px}
  #scr-title .azs-banner{margin-top:6px}
  /* ホーム: 全メニュー行を画面内に収める */
  #scr-home{padding-top:14px}
  #scr-home .topbar{padding-bottom:8px}
  #scr-home .stat-row{margin-bottom:12px}
  #scr-home .stat{padding:8px 6px}
  #scr-home .s-num{font-size:20px}
  #scr-home .btn-primary.big{padding-top:12px;padding-bottom:12px}
  #scr-home .howto{margin-top:12px;padding:12px 14px}
  #scr-home .howto-head{margin-bottom:4px}
  #scr-home .howto li{margin-bottom:5px;font-size:12.5px;line-height:1.5}
  #scr-home .menu-list{margin-top:12px}
  #scr-home .menu-row{padding:11px 2px}
  #scr-home .home-foot{margin-top:14px}
  /* 手順ラウンド: 8ステップ全表示でも #app に収める */
  #scr-game.active{padding-top:6px}
  #scr-game .game-head{padding:2px 0 6px}
  #scr-game .round{padding-top:8px}
  #round-seq .r-title{font-size:19px}
  #round-seq .r-sub{margin-top:2px}
  #round-seq .seq-log{margin:8px 0;padding:8px 12px;min-height:30px}
  #round-seq .seq-btns{gap:5px;padding:6px}
  #round-seq .seq-btn{padding-top:7.5px;padding-bottom:7.5px;font-size:13.5px}
  #round-seq .seq-msg{min-height:18px;margin-top:6px}
  /* パスワード再設定: 2フォーム縦積みで3番目の入力欄の中心が折り返しに
     かかっていた (本番667で中心 y=673)。上部側の余白だけを詰めて欄を内側へ */
  #scr-reset .panel{margin-top:2dvh;padding-top:20px;padding-bottom:20px}
  #scr-reset .fld{margin-bottom:10px}
  #scr-reset .sep-line{margin:14px 0}
  #scr-reset .note{margin-top:10px}
}