/* スリッパロワイアル — off-white base, ink, warm accent only. Quiet "スッ" motion.
   コメディは文章と間で作る。画面は静かに、小さく、洗練。 */
:root{
  --bg:#f7f5f1; --card:#fffdfa; --ink:#1c1a17; --sub:#8a8378; --line:#e6e0d5;
  --accent:#c4532a; --accent-soft:#f6e2d5; --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}.ta-slipper{animation:none!important}}

.kicker{font-size:11px;letter-spacing:.28em;color:var(--sub);text-align:center}
.center{text-align:center}
.err{color:var(--danger);font-size:13px;margin:8px 0}
.note{font-size:12px;color:var(--sub);margin-top:14px}

/* title */
.title-wrap{text-align:center;padding-top:8dvh}
.title-logo{font-size:42px;font-weight:800;letter-spacing:.05em;line-height:1.25;margin:12px 0 8px;text-shadow:0 1px 0 rgba(255,255,255,.9),0 14px 28px rgba(96,74,40,.10)}
.title-catch{color:var(--sub);font-size:14px}
.title-art{position:relative;height:110px;margin:26px auto 4px;max-width:300px}
.title-art::before{content:"";position:absolute;left:50%;bottom:-4px;width:190px;height:30px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(94,74,40,.20),rgba(94,74,40,0) 72%)}
.title-art::after{content:"";position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,150,.20),rgba(255,216,150,0) 70%);pointer-events:none}
.ta-ring{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);border:1.5px dashed var(--line);border-radius:50%;box-shadow:inset 0 0 26px rgba(96,74,40,.06),inset 0 -8px 18px rgba(96,74,40,.05)}
.ta-slipper{position:absolute;left:50%;top:50%;font-size:52px;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 7px rgba(94,74,40,.28));animation:orbit 7s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes orbit{from{transform:translate(-50%,-50%) rotate(-10deg) translateX(-38px)}to{transform:translate(-50%,-50%) rotate(10deg) translateX(38px)}}
.btn-primary{background:linear-gradient(180deg,#2b2823,var(--ink) 55%,#14120f);color:#f7f5f1;border-radius:999px;padding:13px 34px;font-weight:700;letter-spacing:.06em;box-shadow:0 8px 18px -8px rgba(28,26,23,.55),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .25s cubic-bezier(.22,.8,.3,1),opacity .25s,box-shadow .25s}
.btn-primary:active{transform:scale(.97)}
.btn-primary.big{font-size:16px;padding:15px 44px;margin-top:24px}
.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:40px;font-size:12px;color:var(--sub)}
.title-guide{margin-top:10px;font-size:13px}

/* panels / auth */
.panel{background:linear-gradient(180deg,#fffefa,#fffaf1);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;margin-top:6dvh;box-shadow:0 1px 2px rgba(28,26,23,.05),0 16px 36px -16px rgba(64,50,28,.22),inset 0 1px 0 rgba(255,255,255,.9)}
.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:8px;margin-bottom:20px}
.stat{flex:1;background:linear-gradient(180deg,#fffefa,#fdf8ee);border:1px solid var(--line);border-radius:var(--radius);padding:11px 4px;text-align:center;box-shadow:0 1px 2px rgba(28,26,23,.04),0 8px 18px -10px rgba(64,50,28,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.s-label{display:block;font-size:10px;letter-spacing:.1em;color:var(--sub)}
.s-num{display:block;font-size:21px;font-weight:800;margin-top:2px}
#btn-play{margin-top:0}
.howto{background:linear-gradient(180deg,#fffefa,#fffaf1);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-top:20px;box-shadow:0 1px 2px rgba(28,26,23,.04),0 10px 22px -12px rgba(64,50,28,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.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}
.howto-note{font-size:12px;color:var(--sub)}
.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 stage ===== */
#scr-game{padding:0}
#scr-game.active{position:fixed;inset:0;max-width:480px;margin:0 auto;z-index:10;background:linear-gradient(180deg,#e4ddca,#d3cab4);animation:none}
.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,rgba(255,250,225,.10),rgba(255,250,225,0) 55%),radial-gradient(130% 110% at 50% 55%,rgba(0,0,0,0) 72%,rgba(52,42,24,.10))}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:8px;align-items:stretch;z-index:4}
.hud-box{background:linear-gradient(180deg,rgba(255,254,250,.94),rgba(250,246,236,.88));border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;display:flex;align-items:center;gap:5px;box-shadow:0 3px 10px rgba(64,50,28,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.hud-label{font-size:10px;letter-spacing:.12em;color:var(--sub)}
.hud-box b{font-size:16px}
.hud-unit{font-size:11px;color:var(--sub)}
.hud-zone{flex:1;justify-content:center;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden}
.hud-quit{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,rgba(255,254,250,.94),rgba(250,246,236,.88));border:1px solid var(--line);color:var(--sub);font-size:14px;flex:none;box-shadow:0 3px 10px rgba(64,50,28,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.feed{position:absolute;top:calc(56px + env(safe-area-inset-top));left:10px;right:10px;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.feed-line{background:rgba(28,26,23,.78);color:#f7f5f1;font-size:11.5px;padding:4px 10px;border-radius:999px;animation:fade .3s ease;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 8px rgba(40,32,18,.18)}
.feed-line.me{background:var(--accent)}
.ownbar{position:absolute;left:10px;right:10px;bottom:calc(118px + env(safe-area-inset-bottom));z-index:4;background:linear-gradient(180deg,rgba(255,254,250,.94),rgba(250,246,236,.90));border:1px solid var(--line);border-radius:12px;padding:8px 12px;box-shadow:0 -6px 20px rgba(64,50,28,.10),0 4px 14px rgba(64,50,28,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.hp-row{display:flex;align-items:center;gap:8px}
.hp-heart{font-size:10px;letter-spacing:.14em;color:var(--sub);font-weight:700}
.hp-track{flex:1;height:8px;background:linear-gradient(180deg,#d9d0bd,#e9e2d2);border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(64,50,28,.28)}
#hp-fill{height:100%;width:100%;background:linear-gradient(180deg,#7ba168,var(--ok) 60%,#4f6d42);border-radius:99px;transition:width .25s cubic-bezier(.22,.8,.3,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#hp-fill.low{background:linear-gradient(180deg,#c96a5e,var(--danger) 60%,#93382f)}
.hp-num{font-size:13px;font-weight:800;width:30px;text-align:right}
.inv-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.inv-slot{font-size:11.5px;background:linear-gradient(180deg,#fdfaf3,#f4eee0);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:#453f35;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(64,50,28,.08)}
.inv-slot:empty{display:none}
.eat-bar{margin-top:8px;height:16px;background:linear-gradient(180deg,#e7dfcd,#f2ecdc);border:1px solid var(--line);border-radius:99px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px rgba(64,50,28,.22)}
#eat-fill{position:absolute;inset:0;width:0%;background:linear-gradient(180deg,#f9e8d8,var(--accent-soft));box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
#eat-label{position:absolute;inset:0;font-size:10.5px;text-align:center;line-height:16px;color:var(--sub)}
.controls{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));z-index:5;display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px;pointer-events:none}
.stick{pointer-events:auto;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.55),rgba(255,253,250,.30) 58%,rgba(240,234,218,.22));border:1.5px solid rgba(255,253,250,.7);position:relative;flex:none;box-shadow:inset 0 2px 12px rgba(80,62,30,.16),inset 0 -6px 14px rgba(80,62,30,.08),0 6px 16px rgba(64,50,28,.14)}
.stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fffefa,rgba(255,253,250,.92) 55%,rgba(238,232,216,.9));border:1px solid var(--line);transform:translate(-50%,-50%);box-shadow:0 4px 10px rgba(64,50,28,.28),inset 0 1px 0 rgba(255,255,255,1),inset 0 -3px 6px rgba(80,62,30,.10)}
.act-col{pointer-events:auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.btn-atk{width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#da7143,var(--accent) 58%,#a83f1f);color:#fff;font-weight:800;font-size:16px;letter-spacing:.05em;box-shadow:0 8px 22px rgba(168,63,31,.38),0 2px 6px rgba(64,32,16,.25),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -4px 8px rgba(90,30,10,.28);text-shadow:0 1px 2px rgba(90,30,10,.35);transition:transform .15s,box-shadow .15s}
.btn-atk:active{transform:scale(.93);box-shadow:0 3px 10px rgba(168,63,31,.35),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 5px rgba(90,30,10,.28)}
.btn-eat{width:64px;height:44px;border-radius:999px;background:linear-gradient(180deg,#fffefa,#fdf6ea);border:1.5px solid var(--accent);color:var(--accent);font-weight:700;font-size:13px;box-shadow:0 4px 12px rgba(64,50,28,.16),inset 0 1px 0 rgba(255,255,255,.95)}
.btn-eat:active{transform:scale(.95)}
.banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:6;background:rgba(28,26,23,.88);color:#f7f5f1;font-size:15px;font-weight:700;text-align:center;padding:14px 22px;border-radius:14px;max-width:86%;line-height:1.7;animation:fade .35s ease;box-shadow:0 14px 34px rgba(30,24,14,.35),inset 0 1px 0 rgba(255,255,255,.12)}

/* result */
.result-panel{text-align:center}
.res-phrase{font-size:14px;color:var(--accent);font-weight:700;min-height:24px}
.res-placement{font-size:56px;font-weight:800;line-height:1.15;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 1px rgba(28,26,23,.07),0 12px 24px rgba(96,74,40,.10)}
.res-next{font-size:13px;font-weight:700;color:var(--accent);min-height:21px;margin-top:2px}
/* 結果画面の静かな段階表示（スッと順に現れる。再戦への気持ちを作る演出のみ） */
#scr-result.active .result-panel>*{animation:resIn .55s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--d,0s)}
.result-panel>*:nth-child(1){--d:.02s}.result-panel>*:nth-child(2){--d:.07s}.result-panel>*:nth-child(3){--d:.12s}
.result-panel>*:nth-child(4){--d:.18s}.result-panel>*:nth-child(5){--d:.24s}.result-panel>*:nth-child(6){--d:.29s}
.result-panel>*:nth-child(7){--d:.34s}.result-panel>*:nth-child(8){--d:.39s}.result-panel>*:nth-child(9){--d:.45s}
.result-panel>*:nth-child(10){--d:.50s}.result-panel>*:nth-child(11){--d:.55s}
@keyframes resIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 再戦ボタンのごく静かな呼吸（影だけがゆっくり明滅） */
#btn-retry{animation:resIn .55s cubic-bezier(.22,.8,.3,1) both,retryGlow 3.8s ease-in-out 1.6s infinite;animation-delay:var(--d,0s),1.6s}
@keyframes retryGlow{0%,100%{box-shadow:0 8px 18px -8px rgba(28,26,23,.55),inset 0 1px 0 rgba(255,255,255,.16)}50%{box-shadow:0 10px 26px -8px rgba(196,83,42,.50),inset 0 1px 0 rgba(255,255,255,.16)}}
/* 残り人数の節目でHUDが小さく弾む（演出のみ） */
.hud-box.bump{animation:hudBump .45s cubic-bezier(.22,.8,.3,1)}
@keyframes hudBump{0%{transform:scale(1)}35%{transform:scale(1.13)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#scr-result.active .result-panel>*{animation:none}#btn-retry{animation:none}.hud-box.bump{animation:none}}
.res-of{font-size:16px;color:var(--sub);font-weight:600}
.res-score{font-size:15px;color:var(--sub)}
.res-score span{color:var(--ink);font-weight:800;font-size:19px}
.res-best{font-size:13px;color:var(--sub);margin-top:4px;min-height:20px}
.res-stats{list-style:none;text-align:left;margin:18px 0 8px;border-top:1px solid var(--line)}
.res-stats li{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.res-stats b{font-weight:700}

/* ranking */
.subbar{display:flex;align-items:center;gap:6px;padding-bottom:14px}
.subbar h2{font-size:19px}
.back{font-size:20px;width:36px;height:36px;color:var(--sub)}
.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-sub{font-size:11.5px;color:var(--sub)}
.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:linear-gradient(180deg,#2b2823,var(--ink));color:#f7f5f1;font-size:13px;padding:10px 18px;border-radius:999px;z-index:30;animation:fade .3s ease;white-space:nowrap;box-shadow:0 10px 24px rgba(28,26,23,.35),inset 0 1px 0 rgba(255,255,255,.14)}

/* === 品質改修 (2026-10-28): 音トグル / エリア接近ビネット / 結果の小ネタ / 実況サブ行 === */
#zone-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s cubic-bezier(.22,.8,.3,1);box-shadow:inset 0 0 90px 30px rgba(146,84,40,.55)}
.feed-line.sub{background:rgba(28,26,23,.55);font-size:10.5px;color:#e9e2d2}
.res-joke{font-size:12.5px;color:var(--sub);min-height:20px;margin-top:2px;line-height:1.7}
.title-sound{margin-top:8px}
.sound-toggle-quiet{font-size:12px;color:var(--sub);padding:6px 12px}
#btn-sound{font-size:15px}
.ownbar.danger{border-color:rgba(176,72,62,.55)}
.hud-zone.warn{color:var(--danger);font-weight:700}

/* === Webアプリ化 (2026-10-28): ゲーム本編ページ専用 (body.app スコープ)。guide/terms は対象外 === */
html:has(body.app){overscroll-behavior:none}
body.app{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body.app #app{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
body.app .stage,body.app .stick,body.app .btn-atk,body.app .btn-eat{touch-action:none}

/* === Recheck 2026-10-29: 新条件一式（長押し全廃／チップ回避／案内役ミヨ／プレイヤーチップ／カタログ／ネイティブ級演出） === */
/* --- 長押しポップアップ全廃: プレイ面は callout/選択を止め、入力欄だけ選択可を維持 --- */
#app, #app *, #toast{-webkit-touch-callout:none}
#app :not(input):not(textarea), #toast{user-select:none;-webkit-user-select:none}
#app input, #app textarea{user-select:text;-webkit-user-select:text}
/* --- CENTERチップ回避: プレイ中はチップ自体を隠し（本作側回避・共通キット無変更）、ホーム上部は帯で分離 --- */
body.in-game #azc-chip, body.in-game #azc-menu{display:none!important}
#scr-home .topbar{margin-top:30px}
/* --- 案内役ミヨ（ゲーム専用オリジナル） --- */
.guide-slot{display:inline-flex;flex:none;align-items:center;justify-content:center}
.guide-slot svg{width:44px;height:44px;display:block;animation:miyoFloat 3.6s ease-in-out infinite alternate}
.guide-slot.sm svg{width:34px;height:34px}
@keyframes miyoFloat{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:16px;text-align:left}
.tgc-text{display:flex;flex-direction:column}
.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}
/* --- 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:14px 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:14px 0 4px}
/* --- タイトル収納: 案内役＋プレイヤーチップ追加分を間隔の再配分で吸収（844内） --- */
#scr-title .title-wrap{padding-top:4.5dvh}
#scr-title .title-art{height:96px;margin-top:16px}
#scr-title .title-foot{margin-top:24px}
.ta-slipper svg{display:block}
/* --- ショップカタログ（アズコイン販売中） --- */
.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{animation:riseIn .34s cubic-bezier(.22,1,.36,1) both}
#scr-shop.active .catalog-row:nth-of-type(3){animation-delay:.05s}
.result-panel{position:relative;overflow:hidden}
#scr-result.active .result-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,214,150,.35) 50%,transparent 58%);transform:translateX(-90%);animation:resGlint 1.1s cubic-bezier(.22,1,.36,1) .35s both;pointer-events:none}
@keyframes resGlint{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{animation:none}
  #scr-title.active .title-wrap>*, #scr-shop.active .catalog-row, #scr-shop.active .ref-item{animation:none}
  #scr-result.active .result-panel::after{display:none}
}
/* --- UIアニメーションの厚み（2026-10-29 追加指示）: 滑らかさの範囲でふんだんに。承認済みの結果画面・スティック感触は不変 --- */
#scr-home.active .topbar, #scr-home.active .stat-row, #scr-home.active #btn-play, #scr-home.active .howto, #scr-home.active .menu-list, #scr-home.active .home-foot{animation:riseIn .5s cubic-bezier(.22,1,.36,1) both}
#scr-home.active .stat-row{animation-delay:.05s}
#scr-home.active #btn-play{animation-delay:.1s}
#scr-home.active .howto{animation-delay:.16s}
#scr-home.active .menu-list{animation-delay:.22s}
#scr-home.active .home-foot{animation-delay:.28s}
#scr-home.active .s-num{animation:numPop .55s cubic-bezier(.22,1,.36,1) both}
#scr-home.active .stat:nth-child(2) .s-num{animation-delay:.06s}
#scr-home.active .stat:nth-child(3) .s-num{animation-delay:.12s}
#scr-home.active .stat:nth-child(4) .s-num{animation-delay:.18s}
@keyframes numPop{0%{transform:scale(.82);opacity:.4}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
#scr-ranking.active .rank-row{animation:riseIn .4s cubic-bezier(.22,1,.36,1) both}
#scr-ranking.active .rank-row:nth-child(2){animation-delay:.05s}
#scr-ranking.active .rank-row:nth-child(3){animation-delay:.1s}
#scr-ranking.active .rank-row:nth-child(4){animation-delay:.15s}
#scr-ranking.active .rank-row:nth-child(5){animation-delay:.2s}
.hud-quit{transition:transform .18s cubic-bezier(.22,1,.36,1)}
.hud-quit:active{transform:scale(.9)}
.back{transition:transform .18s cubic-bezier(.22,1,.36,1)}
.back:active{transform:scale(.88)}
.btn-eat{transition:transform .15s cubic-bezier(.22,1,.36,1)}
.eat-bar{animation:fade .3s cubic-bezier(.22,.8,.3,1)}
.tb-logout{transition:opacity .2s}
.tb-logout:active{opacity:.55}
@media (prefers-reduced-motion:reduce){
  #scr-home.active .topbar, #scr-home.active .stat-row, #scr-home.active #btn-play, #scr-home.active .howto, #scr-home.active .menu-list, #scr-home.active .home-foot, #scr-home.active .s-num, #scr-ranking.active .rank-row{animation:none}
}
/* --- 画面上端の細いプログレス線（2026-10-29 追加指示）: 本作の基調（アクセント）に溶ける細さ・点滅なし --- */
#az-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none;opacity:0;transition:opacity .3s cubic-bezier(.22,.8,.3,1)}
#az-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(196,83,42,.45),#c4532a 70%);border-radius:0 2px 2px 0;box-shadow:0 1px 5px rgba(196,83,42,.35)}
/* --- 物差し寄せ（2026-10-29 追加指示）: UIを会場に溶かす＋タイトルに公園の空気 --- */
.hud-box,.hud-quit{background:linear-gradient(180deg,rgba(255,254,250,.88),rgba(250,246,236,.82));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ownbar{background:linear-gradient(180deg,rgba(255,254,250,.90),rgba(250,246,236,.86));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#scr-title{background:radial-gradient(120% 55% at 50% 0%,rgba(146,168,112,.22),rgba(146,168,112,0) 62%)}

/* === アイテムショップ大型化（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */
.azs-balance{display:flex;align-items:baseline;gap:10px;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);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:18px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 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:18px}
.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}
.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:var(--card);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}
.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:60}
.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:#b03a30;margin-top:10px}
.azs-sheet-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.azs-sheet-cancel{padding:11px 18px;font-size:14px;color:var(--sub);border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.azs-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,12px);background:var(--ink);color:#fff;font-size:13.5px;padding:11px 18px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.22,.8,.3,1),transform .35s cubic-bezier(.22,.8,.3,1);z-index:70;max-width:88vw;text-align:center}
.azs-toast.on{opacity:1;transform:translate(-50%,0)}
/* --- 再出陣バー（合図券・ゲーム内） --- */
.revive-bar{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:7;background:linear-gradient(180deg,#fffefa,#fffaf1);border:1px solid var(--line);border-radius:16px;padding:18px 20px;text-align:center;width:min(86%,340px);box-shadow:0 14px 34px rgba(30,24,14,.30),inset 0 1px 0 rgba(255,255,255,.9);animation:fade .35s cubic-bezier(.22,.8,.3,1)}
.revive-title{font-size:16px;font-weight:800}
.revive-text{font-size:12.5px;color:var(--sub);line-height:1.7;margin-top:6px}
.revive-count{font-size:12px;font-weight:700;color:var(--accent);min-height:1.5em;margin-top:4px;font-variant-numeric:tabular-nums}
.revive-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.revive-no{padding:9px 18px;font-size:13px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.revive-actions .btn-primary:disabled{opacity:.45;cursor:default}

.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 { font-size: 34px; margin-top: 8px; line-height: 1.2; }
#scr-title .title-guide-chara { margin-top: 10px; }
#scr-title .title-art { height: 62px; margin-top: 10px; }
#scr-title .ta-ring { width: 104px; height: 104px; }
#scr-title .ta-slipper { font-size: 40px; }
#scr-title #btn-start { margin-top: 14px; padding-top: 11px; padding-bottom: 11px; }
#scr-title .title-player { margin-top: 8px; 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 .title-sub { margin-top: 10px; }
#scr-title .title-foot { margin-top: 12px; line-height: 1.55; }
#scr-title .title-guide { margin-top: 6px; }
#scr-title .title-sound { margin-top: 6px; }
#scr-title .title-sound .sound-btn { padding: 4px 12px; }
#scr-title .azi-replay-wrap { margin-top: 8px; }
#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; }

/* === ノースクロール是正 (2026-11-01 FIX1): ホーム画面も 375×812 に収める === */
#scr-home .topbar { padding-bottom: 10px; }
#scr-home .stat-row { margin-bottom: 10px; }
#scr-home .stat { padding: 7px 4px; }
#scr-home .s-num { font-size: 18px; }
#scr-home #btn-play { padding-top: 12px; padding-bottom: 12px; }
#scr-home .howto { margin-top: 12px; padding: 10px 13px; }
#scr-home .howto li { font-size: 12.5px; line-height: 1.5; margin-bottom: 5px; }
#scr-home .howto-note { font-size: 11.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: 12px; }

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