/* ======================================================================
   【ファイル】css/lobby.css
   【概要】ゲーム中以外の画面の見た目：ホーム（タイトル画面）・起動ロゴ・結果画面（成績とランク）・ショップ・ステージ選択・タイピングの選択画面・
     クリア画面・ジョブ選び・おとも選び・難易度選び・エンドロール・通算成績・設定・あそびかた・宴（エンドレス）画面・みんなで遊ぶロビー・
     ホームの背景・エンディングのカットイン。
   【主な内容】
     ・.overlay / .card     … 画面いっぱいの重ね画面と、真ん中のカード
     ・#splash             … 起動ロゴ
     ・.home と変数 --h-*  … ポップなホーム画面の色（.home.endless では宴の色に差しかえる）
     ・.shop-* / .r-*      … ショップと、品のめずらしさ（ノーマル〜レジェンド）の枠
     ・.stage-* / .tsel-* / .clear-* / .over-* / .rstats / .dif-* / .otomo-* … ステージ選択・タイピングの選択・クリアと結果・難易度・おとも
     ・.cr-* / .fc          … エンドロール・通算成績と、エンディングのカットイン
     ・.room-* / .rc-*      … みんなで遊ぶロビー
     ・.bgv-<key>          … ショップで買う背景（変数 --bgb = 背景の色、--bgp = 模様）
     ・@media (max-width:…) … 画面の幅に合わせて並びを変える（条件分岐）。prefers-reduced-motion では動きを止める
   ====================================================================== */
/* 画面いっぱいの重ね画面（安全領域ぶん空ける） */
.overlay{position:fixed;inset:0;display:grid;place-items:center;overflow:auto;background:radial-gradient(ellipse at center,rgba(13,11,31,.55),rgba(13,11,31,.92));
    padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* 真ん中のカード */
.card{width:min(480px,100%);box-sizing:border-box;background:rgba(18,14,42,.9);border:1px solid var(--line);border-radius:8px;padding:28px 26px;display:flex;flex-direction:column;gap:18px}
/* 見出し */
.title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(38px,9vw,52px);line-height:1;color:var(--gold);text-wrap:balance;letter-spacing:.04em}
.title small{display:block;font-family:var(--f-ui);font-size:13px;letter-spacing:.3em;color:var(--mute);margin-bottom:8px}
/* モード選択 */
/* 2つ並んだボタン（.on が選択中） */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* モードのボタン（.on が選択中） */
.mode{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;font:inherit;color:var(--paper);background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 12px;cursor:pointer}
.mode b{font-size:17px}
.mode small{font-size:12px;color:var(--mute)}
.mode.on{border-color:var(--gold);background:rgba(242,193,78,.14)}
.mode:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 起動時の会社ロゴ（スプラッシュ）：白地にロゴがふわっと出て、少し見せたらフェードアウトしてタイトルへ */
#splash{position:fixed;inset:0;z-index:50;cursor:pointer;overflow:hidden;transition:opacity .5s ease}
#splash.out{opacity:0;pointer-events:none}
/* 起動ロゴの白い地 */
.sp-white{position:absolute;inset:0;background:#fff;display:grid;place-items:center}
.sp-white img{width:min(820px,100vw);max-width:100%;height:auto;opacity:0;transform:scale(.97);animation:logoIn 1s ease-out .25s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
/* 起動ロゴの下のコピーライト（ロゴと一緒にふわっと出る） */
.sp-cp{position:absolute;left:0;right:0;bottom:28px;margin:0;text-align:center;font-size:13px;font-weight:600;letter-spacing:.14em;color:#8a7f72;opacity:0;animation:logoIn 1s ease-out .25s forwards}
/* ロゴが消えたあと、タイトルが跳ねて出る */
.home-head.pop{animation:homePop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes homePop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
/* 条件：動きを減らす設定なら、ロゴもタイトルもすぐ出す */
@media (prefers-reduced-motion:reduce){.sp-white img,.sp-cp{animation-duration:.01s}.home-head.pop{animation:none}}
/* 会社名の表示 */
.credit{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--mute);letter-spacing:.08em}
.credit-logo{display:block;width:150px;height:auto;opacity:.9}
.credit-cp{font-size:12px}
/* 説明文・入力欄・ボタン・状態の表示 */
.lead{margin:0;line-height:1.7;color:var(--paper)}
/* 名前・合言葉の入力欄 */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute);letter-spacing:.08em;min-width:0}
.fields input{font:inherit;font-size:18px;padding:9px 11px;border-radius:5px;border:1px solid var(--line);background:rgba(10,8,26,.85);color:var(--paper);outline:none;min-width:0}
.fields input:focus{border-color:var(--gold)}
/* ボタンの並び */
.actions{display:flex;flex-direction:column;gap:8px}
.actions .btn{padding:13px 18px}
/* コンティニュー（ボス戦をはじめから）：金色の大きなボタンで目立たせる。左に剣のしるし、光が走って、ふちがゆっくり光る */
#contBtn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px;font-family:var(--f-pop);font-weight:400;font-size:24px;letter-spacing:.06em;color:#2b0f00;
    background:linear-gradient(#fff3a0,#ffd23f 45%,#ff9a1f);border:3px solid #000;border-radius:14px;box-shadow:0 5px 0 #000,0 0 0 3px #ffe14d inset;text-shadow:0 1px 0 rgba(255,255,255,.6);animation:contGlow 1.4s ease-in-out infinite;transition:transform .12s}
#contBtn::before{content:"⚔";display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:#2b0f00;color:#ffe14d;font-size:24px;text-shadow:none;box-shadow:0 0 0 3px #fff3a0}
#contBtn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:contShine 2.6s ease-in-out infinite}
#contBtn[hidden]{display:none}
#contBtn .cont-txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
#contBtn small{display:block;font-family:var(--f-ui);font-size:13px;font-weight:900;letter-spacing:.02em;opacity:1;color:#6a2a00;margin-top:2px}
#contBtn:hover{transform:translateY(-2px)}
#contBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #000,0 0 0 3px #ffe14d inset}
#contBtn:disabled{animation:none;filter:grayscale(.6) brightness(.8)}
@keyframes contGlow{50%{box-shadow:0 5px 0 #000,0 0 0 3px #ffe14d inset,0 0 26px 6px rgba(255,190,40,.75)}}
@keyframes contShine{0%,55%{left:-40%}100%{left:130%}}
/* 条件：動きを減らす設定なら、「つづける」ボタンの動きを止める */
@media (prefers-reduced-motion:reduce){#contBtn,#contBtn::after{animation:none}#contBtn::after{display:none}}
/* 状態の表示 */
.status{font-size:12px;color:var(--mute);line-height:1.6;margin:0}
.status.good{color:var(--jade)}
/* 結果の数字 */
.result{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.result div{display:flex;flex-direction:column;gap:2px}
.result b{font-family:var(--f-display);font-weight:400;font-size:30px;font-variant-numeric:tabular-nums}
/* 条件：画面がせまいときは、入力欄を1列にする */
@media (max-width:640px){
    .fields{grid-template-columns:1fr}
}

/* ===== ホーム画面：フォールガイズ風のポップでコミカルなデザイン ===== */
/* 配置：上にタイトル、左に着せ替え、右にあそぶ。スマホでは縦に積む */
/* ホーム画面（変数 --h-* = ホームの色、--f-round = 丸いフォント。背景は --bgb があればそれ） */
.home{
    --h-ink:#2b1a5a;--h-ink2:#5b4a8a;--h-white:#ffffff;--h-cream:#f6f2ff;--h-line:#e3d9ff;
    --h-yellow:#ffd23f;--h-yellow-d:#d29f00;--h-pink:#ff4fa3;--h-pink-d:#b8236c;--h-cyan:#4fd8ff;
    --f-round:"M PLUS Rounded 1c","Zen Kaku Gothic New","Hiragino Maru Gothic ProN",sans-serif;
    place-items:start center;background:var(--bgb,linear-gradient(168deg,#22186e 0%,#4a2dc4 28%,#8a3fe0 54%,#d24fbf 80%,#ff8f86 100%));color:var(--h-ink);font-family:var(--f-round)}
.home-bg{position:fixed;inset:-64px;pointer-events:none;overflow:hidden}
/* ショップの「ことだまの宵」（html に .bg-rich が付く）：宵の空に、うすい光のにじみ・麻の葉もよう（下ほど濃い）・ゆっくり昇る言霊の光。
   宴モードでは同じ形のまま、血の赤と炎の色に変わる（光は火の粉になって速く昇る）。色は下の --hb-* で切り替える */
.home{--hb-g1:rgba(255,226,160,.42);--hb-g2:rgba(79,216,255,.30);--hb-g3:rgba(255,110,199,.34);--hb-vig:rgba(14,6,48,.55);
    --hb-asa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.28' viewBox='0 0 40 69.28'%3E%3Cpath d='M-40 0L0 0M-40 69.28L0 69.28M-20 -34.64L0 0M-20 -11.55L0 0M-20 11.55L0 0M-20 34.64L0 0M-20 34.64L0 23.09M-20 34.64L0 46.19M-20 34.64L0 69.28M-20 34.64L20 34.64M-20 57.74L0 69.28M-20 80.83L0 69.28M-20 103.92L0 69.28M0 -23.09L0 0M0 0L0 23.09M0 0L20 -34.64M0 0L20 -11.55M0 0L20 11.55M0 0L20 34.64M0 0L40 0M0 23.09L20 34.64M0 46.19L0 69.28M0 46.19L20 34.64M0 69.28L0 92.38M0 69.28L20 34.64M0 69.28L20 57.74M0 69.28L20 80.83M0 69.28L20 103.92M0 69.28L40 69.28M20 -34.64L40 0M20 -11.55L40 0M20 11.55L20 34.64M20 11.55L40 0M20 34.64L20 57.74M20 34.64L40 0M20 34.64L40 23.09M20 34.64L40 46.19M20 34.64L40 69.28M20 34.64L60 34.64M20 57.74L40 69.28M20 80.83L40 69.28M20 103.92L40 69.28M40 -23.09L40 0M40 0L40 23.09M40 0L60 -34.64M40 0L60 -11.55M40 0L60 11.55M40 0L60 34.64M40 0L80 0M40 23.09L60 34.64M40 46.19L40 69.28M40 46.19L60 34.64M40 69.28L40 92.38M40 69.28L60 34.64M40 69.28L60 57.74M40 69.28L60 80.83M40 69.28L60 103.92M40 69.28L80 69.28' fill='none' stroke='%23fff' stroke-width='.7'/%3E%3C/svg%3E");--hb-orb:255,246,214;--hb-orb2:180,236,255;--hb-rise:70s}
/* 背景を買ったとき（.bg-rich）の、ホームの背景の重ね方 */
:root.bg-rich .home-bg{
    background-image:
    radial-gradient(70% 50% at 50% -8%,var(--hb-g1),transparent 70%),
    radial-gradient(42% 38% at 6% 34%,var(--hb-g2),transparent 72%),
    radial-gradient(48% 42% at 96% 62%,var(--hb-g3),transparent 72%),
    radial-gradient(120% 90% at 50% 45%,transparent 55%,var(--hb-vig) 100%)}
:root.bg-rich .home-bg::before,:root.bg-rich .home-bg::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
:root.bg-rich .home-bg::before{top:0;bottom:0;background:var(--hb-asa) 0 0/56px 97px;opacity:.16;
    -webkit-mask-image:linear-gradient(to bottom,transparent 8%,rgba(0,0,0,.35) 45%,#000 100%);mask-image:linear-gradient(to bottom,transparent 8%,rgba(0,0,0,.35) 45%,#000 100%)}
/* 言霊の光：600px の高さでくり返す点を、ちょうど 600px 上へ動かしてつなぎ目なく昇らせる */
:root.bg-rich .home-bg::after{top:0;height:calc(100% + 600px);will-change:transform;animation:hb-rise var(--hb-rise) linear infinite;
    background-image:
    radial-gradient(circle at 12% 18%,rgba(var(--hb-orb),.95) 0 1.6px,rgba(var(--hb-orb),.28) 3px,transparent 9px),
    radial-gradient(circle at 34% 62%,rgba(var(--hb-orb2),.85) 0 1.2px,rgba(var(--hb-orb2),.22) 2.6px,transparent 7px),
    radial-gradient(circle at 58% 30%,rgba(var(--hb-orb),.9) 0 2.2px,rgba(var(--hb-orb),.25) 4px,transparent 13px),
    radial-gradient(circle at 81% 74%,rgba(var(--hb-orb),.8) 0 1.4px,rgba(var(--hb-orb),.2) 3px,transparent 8px),
    radial-gradient(circle at 92% 12%,rgba(var(--hb-orb2),.75) 0 1px,rgba(var(--hb-orb2),.2) 2.4px,transparent 6px),
    radial-gradient(circle at 46% 88%,rgba(var(--hb-orb),.7) 0 1.8px,rgba(var(--hb-orb),.18) 3.6px,transparent 11px);
    background-size:430px 600px,310px 600px,520px 600px,370px 600px,250px 600px,470px 600px}
@keyframes hb-rise{to{transform:translateY(-600px)}}
/* 条件：動きを減らす設定なら、背景の動きを止める */
@media (prefers-reduced-motion:reduce){:root.bg-rich .home-bg::after{animation:none}}
/* 背景を買ったときは、模様を1枚だけ敷く */
:root[class*="bgv-"]:not(.bg-rich) .home-bg{background-image:var(--bgp);background-size:var(--bgs,64px 64px);background-position:0 0}
/* ショップの「ポップ水玉」（前のいつもの背景）：水玉を2枚ずらして重ね、ななめに流す */
:root.bgv-pop .home-bg{background-image:radial-gradient(rgba(255,255,255,.22) 22%,transparent 23%),radial-gradient(rgba(255,255,255,.12) 22%,transparent 23%);
    background-size:64px 64px,64px 64px;background-position:0 0,32px 32px;animation:dots 22s linear infinite}
@keyframes dots{to{transform:translate(64px,64px)}}
/* タイトル（文字がゆらゆら揺れる） */
.home-head{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:100px}
.home-kicker{margin:0;font-weight:900;font-size:14px;letter-spacing:.2em;color:var(--h-white);text-shadow:0 2px 0 rgba(43,26,90,.45)}
/* タイトルの上の帯：濃い色のリボンに白抜きの字、「共闘」だけ黄色。両はしに光る星、ときどき光が走る */
.home-kicker{position:relative;display:inline-flex;align-items:center;gap:.7em;font-family:var(--f-round);text-shadow:none}
.home-kicker::before,.home-kicker::after{content:"✦";color:var(--h-yellow);font-size:1.6em;line-height:1;text-shadow:2px 0 0 var(--h-ink),-2px 0 0 var(--h-ink),0 2px 0 var(--h-ink),0 -2px 0 var(--h-ink),0 0 12px rgba(255,210,63,.95);animation:hkStar 1.8s ease-in-out infinite}
.home-kicker::after{animation-delay:-.9s}
/* タイトルの上の小見出しの札 */
.hk-in{position:relative;overflow:hidden;padding:.35em 1.1em .35em 1.3em;border-radius:999px;background:var(--h-ink);border:2px solid var(--h-white);
    box-shadow:0 4px 0 rgba(43,26,90,.45),0 0 0 3px var(--h-ink)}
.hk-in b{color:var(--h-yellow);font-weight:900}
.hk-in::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:hkShine 3.6s ease-in-out infinite}
@keyframes hkStar{0%,100%{transform:scale(.8) rotate(0);opacity:.7}50%{transform:scale(1.2) rotate(45deg);opacity:1}}
@keyframes hkShine{0%,60%{left:-40%}100%{left:130%}}
/* 条件：動きを減らす設定なら、小見出しの光の動きを止める */
@media (prefers-reduced-motion:reduce){.home-kicker::before,.home-kicker::after,.hk-in::after{animation:none}.hk-in::after{display:none}}
/* タイトル（文字がゆらゆら揺れる） */
.home-title{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .2em;font-family:var(--f-round);font-weight:900;font-size:clamp(46px,9vw,92px);line-height:1.02;letter-spacing:.02em;text-wrap:balance}
.home-title span{display:inline-block;
    text-shadow:4px 0 0 var(--h-ink),-4px 0 0 var(--h-ink),0 4px 0 var(--h-ink),0 -4px 0 var(--h-ink),4px 4px 0 var(--h-ink),-4px 4px 0 var(--h-ink),4px -4px 0 var(--h-ink),-4px -4px 0 var(--h-ink),0 10px 0 var(--h-ink),0 14px 18px rgba(43,26,90,.35);
    animation:wobble 2.6s ease-in-out infinite}
.home-title .t1{color:var(--h-white)}
.home-title .t2{color:var(--h-yellow);animation-delay:-1.3s}
@keyframes wobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 白いパネル（ポップな影つき） */
.pop-panel{position:relative;background:var(--h-white);border-radius:30px;padding:30px 22px 22px;display:flex;flex-direction:column;gap:14px;min-width:0;
    box-shadow:0 8px 0 rgba(43,26,90,.28),0 18px 40px rgba(43,26,90,.25)}
/* 着せ替えとあそぶの置き場所 */
.dress{grid-area:dress}.play{grid-area:play}
/* ショップ（ホームとは別の画面）。左に試着、右に品物。スマホでは縦に積む */
.shop-wrap{position:relative;width:min(1040px,100%);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px;padding-block:8px 24px;
    grid-template-areas:"head head" "fit goods";align-items:start}
/* ショップの見出しとコイン */
.shop-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.shop-back{align-self:center;font-size:15px;padding:8px 18px}
.shop-title{margin:0;font-weight:900;font-size:clamp(34px,6vw,56px);color:var(--h-white);
    text-shadow:3px 0 0 var(--h-ink),-3px 0 0 var(--h-ink),0 3px 0 var(--h-ink),0 -3px 0 var(--h-ink),3px 3px 0 var(--h-ink),-3px 3px 0 var(--h-ink),3px -3px 0 var(--h-ink),-3px -3px 0 var(--h-ink),0 7px 0 var(--h-ink)}
.shop-coin{margin:0 0 0 auto;display:flex;align-items:center;gap:6px;font-weight:900;font-size:15px;color:var(--h-ink);background:var(--h-white);border-radius:999px;padding:6px 16px;box-shadow:0 4px 0 rgba(43,26,90,.3)}
.shop-coin b{font-size:24px;color:var(--h-yellow-d);font-variant-numeric:tabular-nums}
/* 試着の欄と品物の欄 */
.shop-fit{grid-area:fit;position:sticky;top:8px}.shop-goods{grid-area:goods}
.shop-fit .dress-stage{height:320px}
.shop-hint{margin:0;font-size:13px;font-weight:700;color:var(--h-ink2)}
/* コインの印 */
.coin-ico{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c4,#ffd23a 45%,#d29f00);box-shadow:0 2px 0 rgba(43,26,90,.25)}
/* ステージ選択（ひとりで／みんなで あそぶ のあと）。カードの背景はそのステージの空の色 */
.stage-wrap{position:relative;width:min(900px,100%);display:flex;flex-direction:column;gap:22px;padding-block:8px 24px}
/* 遊び方の表示と、カードの並び（2列） */
.stage-mode{margin:0 0 0 auto;font-weight:900;font-size:14px;color:var(--h-ink);background:var(--h-white);border-radius:999px;padding:6px 16px;box-shadow:0 4px 0 rgba(43,26,90,.3)}
.stage-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* タイピングモードの選択画面：難易度とおとも選びは隠し、大きな3枚のカードと遊び方で画面いっぱいを使う */
.typing-sel .dif-pick,.typing-sel .otomo-pick{display:none}
.typing-sel .stage-wrap{width:min(1180px,100%);min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px)}
.typing-sel .stage-list{display:flex;flex:1}
/* タイピングの選択画面（打ちまちがいの扱い・難易度のカード・遊び方） */
.tsel{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px;width:100%}
.tsel-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;min-height:clamp(360px,58vh,560px)}
.tsel-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 18px 24px;font:inherit;color:#fff;text-align:center;cursor:pointer;overflow:hidden;
    border:5px solid var(--h-white);border-radius:30px;box-shadow:0 10px 0 rgba(43,26,90,.35),0 18px 34px rgba(43,26,90,.3);transition:transform .15s}
.tsel-card::before{content:"";position:absolute;inset:-40% -40% auto auto;width:80%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.tsel-card.dif-e{background:linear-gradient(165deg,#5be3a0 0%,#22b07a 55%,#13805a 100%)}
.tsel-card.dif-n{background:linear-gradient(165deg,#6fb4ff 0%,#3b7bff 55%,#2a4fc4 100%)}
.tsel-card.dif-h{background:linear-gradient(165deg,#ff8a7a 0%,#ff4a5e 55%,#b0204a 100%)}
.tsel-card:hover{transform:translateY(-6px)}
.tsel-card:active{transform:translateY(2px)}
.tsel-card:focus-visible{outline:4px solid var(--h-cyan);outline-offset:5px}
.tsel-lv{font-family:var(--f-pop);font-size:14px;letter-spacing:.2em;color:var(--h-ink);background:var(--h-white);border-radius:999px;padding:3px 14px}
.tsel-name{font-family:var(--f-pop);font-size:clamp(34px,4.6vw,56px);line-height:1;text-shadow:var(--ol3)}
.tsel-len{font-weight:900;font-size:clamp(16px,1.8vw,20px);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.tsel-ex{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:12px 10px;border-radius:18px;background:rgba(13,11,31,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.tsel-ro{font-family:var(--f-pop);font-size:14px;color:#6ff2ff;letter-spacing:.04em;word-break:break-all}
.tsel-kana{font-family:var(--f-pop);font-size:clamp(18px,2.4vw,30px);line-height:1.2;text-shadow:var(--ol2);word-break:break-all}
/* 途中で改行されない文のまとまり */
.nb{display:inline-block}
/* 難易度ごとの最高スコア */
.tsel-best{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 8px;padding:4px 14px;border-radius:999px;background:rgba(13,11,31,.35);font-weight:900}
.tsel-best small{font-size:12px;opacity:.9}.tsel-best b{font-family:var(--f-pop);font-size:20px;color:#ffe14d;text-shadow:var(--ol2)}
.tsel-note{font-size:13px;font-weight:700;line-height:1.5;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.tsel-go{margin-top:auto;font-family:var(--f-pop);font-size:18px;color:var(--h-ink);background:var(--h-yellow);border-radius:999px;padding:8px 26px;box-shadow:0 4px 0 var(--h-yellow-d)}
.tsel-last{position:absolute;top:14px;right:14px;font-size:12px;font-weight:900;color:var(--h-ink);background:var(--h-white);border-radius:999px;padding:3px 10px}
.tsel-rules{list-style:none;margin:0;padding:16px 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:var(--h-white);border-radius:26px;box-shadow:0 8px 0 rgba(43,26,90,.3)}
.tsel-rules li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;color:var(--h-ink)}
.tsel-rules .tsel-ic{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--h-cream);font-size:20px;color:#ff4a6e}
.tsel-rules b{font-size:14px}
.tsel-rules li>span:last-child{font-size:12px;font-weight:700;line-height:1.4;color:var(--h-ink2)}
.tsel-opt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:10px 14px;background:var(--h-white);border-radius:999px;box-shadow:0 6px 0 rgba(43,26,90,.3);align-self:center}
.tsel-opt-h{font-weight:900;font-size:14px;color:var(--h-ink);padding:0 6px}
.tsel-opt-b{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:150px;padding:6px 16px;font:inherit;color:var(--h-ink);background:var(--h-cream);border:3px solid var(--h-line);border-radius:999px;cursor:pointer}
.tsel-opt-b b{font-size:15px}.tsel-opt-b small{font-size:11px;font-weight:700;color:var(--h-ink2)}
.tsel-opt-b.on{border-color:var(--h-pink);background:#ffe8f4;box-shadow:0 3px 0 var(--h-pink-d)}
.tsel-opt-b:focus-visible{outline:3px solid var(--h-cyan);outline-offset:2px}
/* 条件：画面がせまいときは、選択肢を横いっぱいにする */
@media (max-width:620px){.tsel-opt{border-radius:22px}.tsel-opt-b{min-width:0;flex:1}}
/* お題の出典 */
.tsel-src{margin:0;font-size:12px;font-weight:700;line-height:1.6;text-align:center;color:var(--h-white);text-shadow:0 1px 2px rgba(43,26,90,.7)}
.tsel-src a{color:var(--h-white);text-decoration:underline;text-underline-offset:2px}
.tsel-src a:focus-visible{outline:3px solid var(--h-cyan);outline-offset:2px;border-radius:4px}
/* 条件：画面が860px 以下なら、遊び方を2列にする */
@media (max-width:860px){.tsel-rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 条件：画面がせまいときは、カードを1列にする */
@media (max-width:620px){.tsel-cards{grid-template-columns:minmax(0,1fr);min-height:0}.tsel-card{gap:8px;padding:20px 14px}.tsel-note{display:none}.tsel-rules{grid-template-columns:minmax(0,1fr)}}
/* 条件：動きを減らす設定なら、カードの動きを止める */
@media (prefers-reduced-motion:reduce){.tsel-card,.tsel-card:hover{transition:none;transform:none}}
/* ステージのカード（マウスを乗せると少し傾く） */
.stage-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;text-align:left;font:inherit;color:#fff;
    border:4px solid var(--h-white);border-radius:26px;padding:18px 20px;cursor:pointer;overflow:hidden;box-shadow:0 8px 0 rgba(43,26,90,.3),0 16px 30px rgba(43,26,90,.25);transition:transform .15s}
.stage-card:hover{transform:translateY(-3px)}
.stage-card:focus-visible{outline:3px solid var(--h-cyan);outline-offset:4px}
/* カードの中の文字（番号・名前・説明・札） */
.stage-num{font-family:"Dela Gothic One",var(--f-round);font-size:34px;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.stage-name{font-weight:900;font-size:22px;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.stage-desc{font-size:13px;font-weight:700;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.stage-badge{position:absolute;top:14px;right:14px;font-size:12px;font-weight:900;color:var(--h-ink);background:var(--h-yellow);border-radius:999px;padding:3px 10px;box-shadow:0 3px 0 var(--h-yellow-d)}
/* 選べないカード（.locked）は灰色 */
.stage-card.locked{cursor:not-allowed;filter:grayscale(.85) brightness(.75)}
.stage-card.locked:hover{transform:none}
.stage-card.locked .stage-badge{background:#3a3550;color:#fff;box-shadow:none}
/* 挑戦できる（まだクリアしていない）札は赤。クリア済みの黄色と見分ける */
.stage-badge.challenge{background:#e5332a;color:#fff;box-shadow:0 3px 0 #8a1410}
/* 知らせ */
.stage-note{margin:0;min-height:1.5em;text-align:center;font-weight:900;color:var(--h-white);text-shadow:0 1px 2px rgba(43,26,90,.6)}
/* 条件：画面がせまいときは、カードを1列にする */
@media (max-width:620px){.stage-list{grid-template-columns:minmax(0,1fr)}.stage-mode{margin-left:0}}
/* ステージクリア画面：回る光の筋・紙ふぶき・弾んで出る文字 */
.clear-overlay{overflow-x:hidden;overflow-y:auto}
.clear-rays{position:fixed;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;opacity:.55;
    background:repeating-conic-gradient(from 0deg,rgba(255,210,58,.38) 0deg 9deg,transparent 9deg 22.5deg);animation:rays 14s linear infinite;
    -webkit-mask:radial-gradient(circle,#000 0 18%,transparent 55%);mask:radial-gradient(circle,#000 0 18%,transparent 55%)}
@keyframes rays{to{transform:rotate(360deg)}}
/* 紙ふぶき（JS が1枚ずつ色と動きを決める） */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-24px;width:10px;height:16px;border-radius:2px;animation:confetti-fall linear forwards}
@keyframes confetti-fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--rot))}}
/* クリアのカード */
.clear-card{position:relative;border:2px solid #ffd23a;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:clear-pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes clear-pop{0%{transform:scale(.3) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
/* ステージ名と見出し */
.clear-stage{margin:0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--mute)}
.clear-title{margin:0;text-align:center;font-family:"Dela Gothic One",var(--f-display);font-weight:400;font-size:clamp(26px,7.4vw,44px);line-height:1.1;white-space:nowrap;color:#ffd23a;
    text-shadow:0 4px 0 #b86a00}
.clear-title span{display:inline-block;animation:clear-letter .5s cubic-bezier(.2,1.8,.4,1) both}
@keyframes clear-letter{0%{transform:translateY(-60px) scale(.2);opacity:0}100%{transform:none;opacity:1}}
/* 記録の数字 */
.clear-card .result{grid-template-columns:repeat(3,minmax(0,1fr))}
.clear-card .result b{font-size:24px;overflow-wrap:anywhere}
/* コインの内訳と、最長の言葉 */
.coin-break .own{grid-column:1/-1;text-align:right;font-size:12px;color:var(--mute)}
.clear-card .result .wide{grid-column:1/-1;align-items:center;background:rgba(255,210,58,.1);border:1px solid rgba(255,210,58,.4);border-radius:10px;padding:10px}
.clear-long b{font-family:"Zen Antique",var(--f-display);font-size:32px;color:#fff3c4;word-break:break-all;text-align:center}
.clear-long small{font-size:12px;color:var(--mute)}
/* コインの内訳（.bonus 初クリア / .total 合計 / .new NEW の印） */
.coin-break{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:15px;background:rgba(0,0,0,.25);border-radius:10px;padding:12px 14px}
.coin-break span{color:var(--paper)}
.coin-break b{text-align:right;color:#ffd23a;font-variant-numeric:tabular-nums}
.coin-break .bonus{color:#ff9ad5}
.coin-break .total{border-top:1px solid var(--line);padding-top:6px;font-weight:900;font-size:17px}
.coin-break .new{display:inline-block;font-style:normal;margin-left:6px;font-size:11px;font-weight:900;color:#1a1030;background:#ff9ad5;border-radius:999px;padding:0 7px;vertical-align:2px;animation:new-pulse 1s ease-in-out infinite}
@keyframes new-pulse{50%{transform:scale(1.15)}}
/* 条件：とてもせまいときは、記録を2列にする */
@media (max-width:420px){.clear-card .result{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 条件：動きを減らす設定なら、光・紙ふぶき・弾みを止める */
@media (prefers-reduced-motion:reduce){.clear-rays,.clear-card,.clear-title span,.confetti i{animation:none}.confetti{display:none}}
/* ホーム画面の左上の入口 */
/* ショップの入口ボタン */
.shop-home{position:relative;display:inline-flex;white-space:nowrap;align-items:center;gap:6px;font:inherit;font-family:var(--f-round);font-weight:900;font-size:14px;color:var(--h-ink);
    background:var(--h-yellow);border:0;border-radius:999px;padding:5px 14px 5px 8px;cursor:pointer;box-shadow:0 4px 0 var(--h-yellow-d)}
.shop-home b{font-size:13px;background:var(--h-white);border-radius:999px;padding:0 8px;font-variant-numeric:tabular-nums}
.shop-home:hover{transform:translateY(-2px)}
.shop-home:active{transform:translateY(3px);box-shadow:0 1px 0 var(--h-yellow-d)}
.shop-home:focus-visible{outline:3px solid var(--h-cyan);outline-offset:3px}
/* 条件：画面がせまいとき（760px 以下）は、ショップを1列にする */
@media (max-width:760px){
    .shop-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fit" "goods"}
    .shop-fit{position:relative;top:auto}.shop-fit .dress-stage{height:220px}
    .shop-coin{margin-left:0}
}
/* 品物の一覧（種類ごとのまとまり → 品のカード） */
.shop-list{display:flex;flex-direction:column;gap:12px}
.shop-group{display:grid;grid-template-columns:4.2em minmax(0,1fr);align-items:start;gap:8px}
.shop-group .pick-h{padding-top:10px}
.shop-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.shop-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"th th" "nm nm" "pr pr" "tr by";align-items:center;gap:4px 8px;background:var(--h-cream);border:3px solid var(--h-line);border-radius:18px;padding:9px 10px}
/* 試着中のカード */
.shop-item.trying{outline:3px solid var(--h-cyan);outline-offset:3px}
/* レア度の札（絵の左上）と枠：ノーマル → レア → エピック → レジェンドの順に豪華にする */
/* めずらしさの札と枠：ノーマル */
.shop-rarity{position:absolute;top:14px;left:15px;z-index:1;font-size:11px;font-weight:900;letter-spacing:.04em;color:#fff;border-radius:999px;padding:1px 9px;pointer-events:none}
/* めずらしさの札と枠：ノーマル */
.r-normal .shop-rarity{background:#8a82a6}
/* レア（青） */
.r-rare{border-color:#4f9dff;background:linear-gradient(180deg,#eef6ff,#dcecff);box-shadow:0 4px 0 #bcd8ff}
.r-rare .shop-rarity{background:#2f7fe8}
/* エピック（紫のグラデーションの枠） */
.r-epic{border:3px solid transparent;
    background:linear-gradient(180deg,#f8efff,#ead9ff) padding-box,linear-gradient(135deg,#c86bff,#6b4dff,#ff6ec7) border-box;
    box-shadow:0 4px 0 #b892ff,0 0 14px rgba(168,107,255,.45)}
.r-epic .shop-rarity{background:linear-gradient(90deg,#a54dff,#6b4dff)}
/* レジェンド（金の枠が流れ、光が横切る） */
.r-legend{border:4px solid transparent;overflow:hidden;
    background:linear-gradient(180deg,#fffaf0,#ffefc2) padding-box,linear-gradient(120deg,#fff3a8,#ffb800,#ff6a3d,#ffd23a,#fff3a8) border-box;
    background-size:100% 100%,300% 300%;animation:legend-border 4s linear infinite;
    box-shadow:0 4px 0 #d29f00,0 0 22px rgba(255,190,40,.7)}
.r-legend::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:legend-shine 3s ease-in-out infinite}
.r-legend .shop-rarity{background:linear-gradient(90deg,#ff9a00,#ff4f6d);box-shadow:0 0 8px rgba(255,170,0,.9)}
@keyframes legend-border{to{background-position:0 0,300% 0}}
@keyframes legend-shine{0%{background-position:150% 0}60%,100%{background-position:-100% 0}}
/* 条件：動きを減らす設定なら、レジェンドの動きを止める */
@media (prefers-reduced-motion:reduce){.r-legend,.r-legend::after{animation:none}}
/* 品のカードの中身（絵・名前・値段・ためす・買う） */
.shop-thumb{grid-area:th;justify-self:stretch;width:100%;height:104px;object-fit:contain;border-radius:14px;cursor:pointer;
    background:radial-gradient(circle at 50% 55%,#fff 0 38%,#efe7ff 39% 100%)}
.shop-item b{grid-area:nm;font-size:15px;font-weight:900;color:var(--h-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-price{grid-area:pr;font-size:13px;font-weight:900;color:var(--h-yellow-d);white-space:nowrap}
.shop-try{grid-area:tr;justify-self:start;font-size:13px;padding:5px 10px;white-space:nowrap}
.shop-try[aria-pressed="true"]{background:var(--h-cyan);border-color:var(--h-cyan)}
.shop-buy{grid-area:by;font-size:14px;padding:6px 12px;white-space:nowrap;margin-bottom:4px}
.shop-done{margin:0;font-weight:900;color:var(--h-ink2)}
/* パネルの見出しの札 */
.pop-h{position:absolute;top:-16px;left:20px;margin:0;font-weight:900;font-size:19px;color:var(--h-white);background:var(--h-ink);padding:5px 18px;border-radius:999px;box-shadow:0 4px 0 rgba(43,26,90,.3)}

/* 着せ替えのプレビューの枠（ドラッグで回せる） */
.dress-stage{position:relative;height:260px;border-radius:22px;overflow:hidden;cursor:grab;touch-action:none;
    background:radial-gradient(circle at 50% 38%,#fff 0 22%,#ffe9f6 23% 46%,#e9dcff 47%)}
.dress-stage:active{cursor:grabbing}
.dress-canvas{display:block;width:100%;height:100%}
.dress-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:12px;font-weight:800;color:var(--h-ink2);pointer-events:none}
/* 着せ替えの選択（見出し＋ボタン） */
.pick{display:grid;grid-template-columns:4.2em minmax(0,1fr);align-items:center;gap:8px}
.pick-h{font-weight:900;font-size:14px;color:var(--h-ink2)}
/* 色の丸いボタンと、品のボタンの並び */
.swatches,.chips{display:flex;flex-wrap:wrap;gap:8px}
/* 色の丸いボタン（.on が選択中） */
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid var(--h-white);box-shadow:0 0 0 2px var(--h-line),0 3px 0 rgba(43,26,90,.25);cursor:pointer;padding:0;transition:transform .15s}
.swatch:hover{transform:scale(1.12) rotate(-6deg)}
.swatch.on{box-shadow:0 0 0 3px var(--h-ink),0 3px 0 rgba(43,26,90,.35);transform:scale(1.12)}
/* 品のボタン（.on が選択中） */
.chip{font:inherit;font-weight:800;font-size:14px;color:var(--h-ink);background:var(--h-cream);border:2px solid var(--h-line);border-radius:999px;padding:5px 12px;cursor:pointer;transition:transform .15s}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--h-ink);border-color:var(--h-ink);color:var(--h-white)}
/* キーボードで選んだときの枠 */
.swatch:focus-visible,.chip:focus-visible,.btn-pop:focus-visible,.home .mode:focus-visible{outline:3px solid var(--h-cyan);outline-offset:3px}

/* 入力欄 */
.pop-field{display:flex;flex-direction:column;gap:4px;font-weight:900;font-size:13px;color:var(--h-ink2);min-width:0}
.pop-field input{font:inherit;font-weight:800;font-size:19px;color:var(--h-ink);background:var(--h-cream);border:3px solid var(--h-line);border-radius:16px;padding:9px 14px;outline:none;min-width:0}
.pop-field input:focus{border-color:var(--h-pink)}

/* ポップなボタン（押すと沈む。押せないときは灰色） */
.btn-pop{font:inherit;font-weight:900;font-size:18px;border:0;border-radius:999px;padding:12px 22px;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    transition:transform .12s,box-shadow .12s,filter .12s}
.btn-pop small{font-size:12px;font-weight:800;opacity:.85}
.btn-pop:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-pop:active{transform:translateY(4px)}
.btn-pop[disabled]{filter:grayscale(.7) opacity(.6);cursor:not-allowed;transform:none}
/* 色違い：黄・桃・白 */
.btn-yellow{background:var(--h-yellow);color:var(--h-ink);box-shadow:0 6px 0 var(--h-yellow-d),0 10px 18px rgba(43,26,90,.25)}
.btn-yellow:active{box-shadow:0 2px 0 var(--h-yellow-d)}
.btn-pink{background:var(--h-pink);color:var(--h-white);box-shadow:0 6px 0 var(--h-pink-d),0 10px 18px rgba(43,26,90,.25)}
.btn-pink:active{box-shadow:0 2px 0 var(--h-pink-d)}
.btn-white{background:var(--h-cream);color:var(--h-ink);border:2px solid var(--h-line);box-shadow:0 5px 0 var(--h-line);align-self:flex-start}
.btn-white:active{box-shadow:0 1px 0 var(--h-line)}
/* 大きいボタン（ゆっくりふくらむ） */
.btn-big{font-size:24px;padding:16px 22px;animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03)}}
/* 大きいボタンにマウスを乗せたら、ふくらみを止める */
.btn-big:hover{animation:none}

/* 合言葉の入力と「入る」ボタン */
.online-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.online-row .btn-pop{padding:13px 20px}
/* ホームの状態の表示 */
.home .status{font-size:13px;font-weight:700;color:var(--h-ink2);line-height:1.6}
.home .status.good{color:#0a8f6a}


/* ホームの下の行 */
.home-foot{grid-area:foot;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px}
.home-foot .status{color:var(--h-white);text-shadow:0 1px 2px rgba(43,26,90,.6)}
.home-foot a{color:inherit}
.home .credit{color:var(--h-white);font-weight:800;text-shadow:0 1px 2px rgba(43,26,90,.6)}

/* 条件：とてもせまいときは、1列にする */
@media (max-width:420px){
    .online-row{grid-template-columns:minmax(0,1fr)}
    .pick,.shop-group{grid-template-columns:minmax(0,1fr);gap:6px}
    .shop-group .pick-h{padding-top:0}
}
/* 条件：動きを減らす設定なら、背景・タイトル・大きいボタンの動きを止める */
@media (prefers-reduced-motion:reduce){
    .home-bg,.home-title span,.btn-big{animation:none}
}

/* キャラ（職業）選び */
/* JOB_ORD の順に横一列。名前（最長は「ディフェンダー」7字）が1行に収まるよう、枠の幅に合わせて文字の大きさを決める */
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;container-type:inline-size}
/* ジョブのボタン（変数 --job = ジョブの色。aria-checked が選択中） */
.job{--job:#ffd23f;font:inherit;color:var(--h-ink);text-align:center;align-items:center;display:flex;flex-direction:column;gap:1px;min-width:0;
    background:color-mix(in srgb,var(--job) 22%,var(--h-cream));border:3px solid var(--job);border-radius:18px;padding:9px 4px 8px;cursor:pointer;box-shadow:0 4px 0 var(--h-line);transition:transform .15s}
.job b{font-weight:900;font-size:clamp(10px,calc(((100cqw - 24px)/4 - 14px)/7.2),16px);line-height:1.2;white-space:nowrap;letter-spacing:-.04em}
.job .job-stat{font-size:11px;font-weight:800;color:var(--h-ink2)}
.job .job-skill{align-self:flex-start;margin-top:3px;font-size:11px;font-weight:900;color:#1a1030;background:var(--job);border-radius:999px;padding:1px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job:hover{transform:translateY(-2px)}
.job[aria-checked="true"]{border-color:var(--h-ink);background:color-mix(in srgb,var(--job) 50%,var(--h-white));box-shadow:0 4px 0 var(--h-ink)}
.job:focus-visible{outline:3px solid var(--h-cyan);outline-offset:3px}
/* ジョブの説明 */
.job-desc{margin:0;font-size:13px;line-height:1.6;color:var(--h-ink);background:var(--h-cream);border-radius:14px;padding:8px 12px}
.job-desc b{font-weight:900}
/* まだ解放していない生業（ショップで解放）：薄く、値段を出す。押すと中身を見せる（peek） */
.job.locked{opacity:.55;border-style:dashed;filter:grayscale(.6)}
.job.locked .job-stat{color:var(--h-ink)}
.job.locked.peek{opacity:.9;filter:none}
.job-lock{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px;font-weight:900;color:var(--h-ink)}
.job-lock .job-shop{padding:2px 10px}
.job-passive{display:block;color:var(--h-ink2);font-weight:700}
/* ジョブの説明：見出しの行と説明の行。説明は言葉のきりのいいところで折り返す */
.job-desc{text-wrap:pretty}
/* メニューの画面の説明文は、言葉の途中で折り返さない（文節のきれめで折り返す） */
.home,.home-modal{word-break:auto-phrase}
/* ジョブの説明の行 */
.jd-row{display:block}.jd-row+.jd-row{margin-top:6px}
.jd-h{display:block;font-weight:900;color:var(--h-ink)}
.jd-t{display:block}
.jd-n{display:inline-block;font-size:.88em;color:var(--h-ink2);font-weight:700}
/* 条件：とてもせまいときは、ジョブのボタンを小さくする */
@media (max-width:420px){.jobs{gap:6px}.job{padding:7px 3px}.job .job-skill{white-space:normal;text-align:center;line-height:1.3}}

/* おとも選び（ステージ選択の上、ひとりで遊ぶときだけ） */
/* おとも選びのパネル */
.otomo-pick{background:var(--h-white);border-radius:26px;padding:14px 18px 16px;box-shadow:0 8px 0 rgba(43,26,90,.3)}
.otomo-pick[hidden]{display:none}
.otomo-h{margin:0 0 10px;font-size:18px;font-weight:900;color:var(--h-ink)}
.otomo-h small{margin-left:10px;font-size:12px;font-weight:700;color:var(--h-ink2)}
/* おとものカードの並び（5列） */
.otomo-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
/* おとものカード（.on が選択中） */
.otomo-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;border:3px solid var(--h-line);border-radius:18px;background:var(--h-cream);font:inherit;color:var(--h-ink);cursor:pointer;transition:transform .15s}
.otomo-card{position:relative}
.otomo-card:hover{transform:translateY(-2px)}
/* 愛着度の段階：右上にハート2つ。届いていない段階は色なし（うすい灰色）、届いた段階は桃色で脈打つ */
.otomo-hearts{position:absolute;top:4px;right:6px;display:flex;gap:1px;font-size:20px;line-height:1}
.otomo-hearts i{font-style:normal;color:#e4dde9;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 2px 0 #b8adc4}
.otomo-hearts i.on{color:var(--h-pink);text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 2px 0 var(--h-pink-d);animation:otomoheart 1.6s ease-in-out infinite}
@keyframes otomoheart{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}}
/* 条件：動きを減らす設定なら、おとものハートの動きを止める */
@media (prefers-reduced-motion:reduce){.otomo-hearts i.on{animation:none}}
/* おとものカード（キーボードで選んだときの枠） */
.otomo-card:focus-visible{outline:3px solid var(--h-cyan);outline-offset:3px}
.otomo-card.on{border-color:var(--h-pink);background:#fff0f8;box-shadow:0 4px 0 var(--h-pink-d)}
.otomo-card img,.otomo-none{width:76px;height:76px}
.otomo-none{display:grid;place-items:center;font-size:30px;font-weight:900;color:var(--h-line)}
.otomo-card .nm{font-weight:900;font-size:16px}
.otomo-card .rl{font-size:11px;font-weight:700;line-height:1.35;color:var(--h-ink2);text-align:center}
/* 条件：画面がせまいときは、3列にする */
@media (max-width:620px){.otomo-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* エンドロール：星の夜空に、名前が下から上へ流れる */
/* エンドロールの画面（変数はホームと同じ色） */
.credits-page{--h-ink:#2b1a5a;--h-ink2:#5b4a8a;--h-white:#ffffff;--h-cream:#f6f2ff;--h-line:#e3d9ff;--h-cyan:#4fd8ff;z-index:40;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#3a2a6e 0%,#140f2e 45%,#05040f 100%);color:#fff7e6;font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif}
/* 星空（2枚の星をゆっくり流し、またたかせる） */
.cr-sky{position:absolute;inset:0;pointer-events:none}
.cr-stars{position:absolute;inset:-50%;background-repeat:repeat}
.cr-stars.s1{background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#fff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#ffe9a8,transparent),radial-gradient(1px 1px at 210px 170px,#fff,transparent);background-size:240px 200px;animation:crDrift 90s linear infinite,crTwinkle 3.2s ease-in-out infinite alternate}
.cr-stars.s2{background-image:radial-gradient(2px 2px at 50px 80px,#cfe6ff,transparent),radial-gradient(1.5px 1.5px at 260px 30px,#fff,transparent),radial-gradient(2px 2px at 170px 230px,#ffd6f0,transparent);background-size:320px 280px;opacity:.7;animation:crDrift 150s linear infinite reverse,crTwinkle 4.6s ease-in-out infinite alternate-reverse}
.cr-glow{position:absolute;left:50%;bottom:-30vh;width:120vw;height:60vh;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,180,90,.28),transparent 70%);animation:crBreath 8s ease-in-out infinite alternate}
@keyframes crDrift{to{transform:translateY(-200px)}}
@keyframes crTwinkle{from{opacity:.45}to{opacity:1}}
@keyframes crBreath{from{opacity:.6}to{opacity:1}}
/* 「とばす／もどる」ボタン（.done で脈打つ） */
.cr-skip{position:absolute;top:18px;right:18px;z-index:2;padding:8px 20px;font-size:15px}
.cr-skip.done{animation:crPulse 1.2s ease-in-out infinite}
@keyframes crPulse{50%{transform:scale(1.08)}}
/* 流れる中身の枠（上下をぼかす。.still は動きを減らす設定用で、自分でスクロールする） */
.cr-view{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.cr-roll{display:flex;flex-direction:column;align-items:center;gap:110px;padding:0 16px 40px;text-align:center;will-change:transform;transform:translateY(100vh)}
.cr-view.still{overflow-y:auto;-webkit-mask-image:none;mask-image:none}
.cr-view.still .cr-roll{transform:none;padding-top:90px}
/* 1つのかたまりと、その中の文字（見出し・名前・絵） */
.cr-block{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(680px,100%)}
.cr-kicker{margin:0;font-size:16px;font-weight:800;letter-spacing:.3em;color:#ffd98a}
.cr-logo{margin:0;font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(48px,10vw,104px);line-height:1.15;letter-spacing:.04em;color:#ffe27a;background:linear-gradient(100deg,#ffd23f 0%,#ffe27a 35%,#ffffff 48%,#ffe27a 60%,#ffb347 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px rgba(255,200,80,.65)) drop-shadow(0 3px 0 rgba(90,40,0,.55));animation:crShine 3.5s ease-in-out infinite}
.cr-h{margin:0;font-size:clamp(18px,2.6vw,24px);font-weight:900;letter-spacing:.35em;color:#9fd8ff;text-shadow:0 0 10px rgba(120,200,255,.5)}
.cr-names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cr-names li{font-size:clamp(20px,3.4vw,28px);font-weight:900;overflow-wrap:anywhere;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.cr-thanks .cr-h{color:#ffb6dd;text-shadow:0 0 12px rgba(255,140,200,.6)}
.cr-thanks .cr-names li{font-size:clamp(24px,4.4vw,36px);color:#fff3c4}
.cr-pals{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;align-items:center;justify-items:center;gap:8px}
.cr-pals img{width:96px;height:96px}
.cr-cast{display:flex;flex-direction:column;align-items:center;gap:6px}
.cr-sub{display:flex;align-items:center;gap:14px;margin:26px 0 8px;font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-size:clamp(22px,3.6vw,32px);font-weight:900;letter-spacing:.3em;padding-left:.3em;background:linear-gradient(100deg,#fff4c2 0%,#ffd36a 40%,#ffffff 55%,#ffb3e0 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(255,210,120,.55));animation:crShine 4s ease-in-out infinite}
.cr-sub::before,.cr-sub::after{content:"";width:clamp(34px,8vw,70px);height:2px;background:linear-gradient(90deg,transparent,#ffd36a);border-radius:2px;box-shadow:0 0 8px rgba(255,210,120,.8)}
.cr-sub::after{background:linear-gradient(90deg,#ffd36a,transparent)}
.cr-pals.cr-bosses img{width:min(180px,22vw);height:min(180px,22vw)}
.cr-pals img.in{animation:crPopIn .7s cubic-bezier(.2,1.6,.4,1) both,crHop 1.4s ease-in-out .7s infinite}
.cr-pals img.in:nth-child(2n){animation-delay:0s,-.7s}
@keyframes crHop{50%{transform:translateY(-10px)}}
/* 最後のかたまり（ありがとう・会社ロゴ・おわり） */
.cr-final{gap:18px}
.cr-thank{margin:0;font-size:clamp(20px,3.4vw,28px);font-weight:900}
.cr-thank.big{font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(48px,10vw,96px);letter-spacing:.04em;background:linear-gradient(100deg,#ff6ec7 0%,#ffe27a 30%,#ffffff 45%,#7dffb0 60%,#6fd3ff 80%,#b78bff 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px rgba(255,200,120,.7));animation:crShine 3s ease-in-out infinite}
.cr-company{width:min(260px,70vw);height:auto;margin-top:26px}
.cr-company-text{margin:26px 0 0;font-size:22px;font-weight:900}
.cr-end{margin:30px 0 0;font-size:16px;font-weight:800;letter-spacing:.5em;color:#cbbfff}
/* 背景の花火の canvas と、重なりの順 */
.cr-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.cr-view{z-index:1}
.cr-skip{z-index:3}
/* 名前などは、画面に入ってくると弾んで現れる */
.cr-pop{opacity:0;transform:translateY(24px) scale(.6)}
/* .in：弾んで出る。ロゴと「ありがとう」は光も流す */
.cr-pop.in{opacity:1;transform:none;animation:crPopIn .7s cubic-bezier(.2,1.6,.4,1) both}
.cr-logo.cr-pop.in{animation:crPopIn .9s cubic-bezier(.2,1.6,.4,1) both,crShine 3.5s ease-in-out .9s infinite}
.cr-thank.big.cr-pop.in{animation:crPopIn .9s cubic-bezier(.2,1.6,.4,1) both,crShine 3s ease-in-out .9s infinite}
@keyframes crPopIn{0%{opacity:0;transform:translateY(24px) scale(.6)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes crShine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
/* 虹色の名前（スペシャルサンクス） */
.cr-names li.cr-rainbow{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:900;font-size:clamp(32px,6vw,56px);
    background:linear-gradient(90deg,#ff6ec7,#ffe27a,#7dffb0,#6fd3ff,#b78bff,#ff6ec7);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 12px rgba(255,160,220,.6))}
.cr-names li.cr-rainbow.in{animation:crPopIn .8s cubic-bezier(.2,1.6,.4,1) both,crRainbow 2.4s linear .8s infinite}
@keyframes crRainbow{to{background-position:-200% 0}}
/* タイトルと最後の場面の後ろで回る光の筋 */
.cr-rayed{position:relative}
.cr-rays{position:absolute;left:50%;top:50%;width:min(900px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,226,122,.16) 0deg 7deg,transparent 7deg 20deg);
    -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 68%);mask-image:radial-gradient(circle,#000 18%,transparent 68%);animation:crSpin 26s linear infinite}
@keyframes crSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* 締め（.finale）：光の筋を桃色にして、「ありがとう」を弾ませる */
.cr-final.finale .cr-rays{background:repeating-conic-gradient(from 0deg,rgba(255,180,230,.28) 0deg 8deg,transparent 8deg 18deg);animation-duration:9s}
.cr-final.finale .cr-thank.big{animation:crBoing .8s cubic-bezier(.2,1.8,.4,1) both,crShine 1.6s ease-in-out infinite}
@keyframes crBoing{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1.08)}}
/* 条件：動きを減らす設定なら、エンドロールの動きを全部止める */
@media (prefers-reduced-motion:reduce){.cr-stars,.cr-glow,.cr-pals img,.cr-sub,.cr-skip.done,.cr-rays,.cr-pop.in,.cr-logo,.cr-thank.big,.cr-names li.cr-rainbow{animation:none!important}.cr-pop{opacity:1;transform:none}}
/* 設定の画面 */
/* 設定の画面とカード */
.settings-ov{z-index:45}
.settings-card{gap:16px}
.settings-title{margin:0;font-size:24px;font-weight:900;color:var(--gold)}
/* 選択肢のまとまり（選ばれたものは金色、選べないものは薄く） */
.settings-group{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px}
.settings-group legend{padding:0;margin-bottom:8px;font-weight:900;color:var(--paper)}
.settings-opt{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:2px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.05);cursor:pointer}
.settings-opt:has(input:checked){border-color:var(--gold);background:rgba(242,193,78,.12)}
.settings-opt input{margin-top:3px;accent-color:var(--gold)}
.settings-opt span{display:flex;flex-direction:column;gap:2px}
.settings-opt b{font-size:16px;color:var(--paper)}
.settings-opt small{font-size:12px;color:var(--mute);line-height:1.5}
/* 難易度選び（ステージ選択の上） */
/* 難易度のパネルとカード（3列） */
.dif-pick{background:var(--h-white);border-radius:26px;padding:14px 18px 16px;box-shadow:0 8px 0 rgba(43,26,90,.3)}
.dif-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dif-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 12px;border:3px solid var(--h-line);border-radius:18px;background:var(--h-cream);font:inherit;color:var(--h-ink);cursor:pointer;transition:transform .15s}
.dif-card:hover{transform:translateY(-2px)}
.dif-card:focus-visible{outline:3px solid var(--h-cyan);outline-offset:3px}
.dif-card .nm{font-weight:900;font-size:18px}
.dif-card .best{font-size:11px;font-weight:900;color:var(--h-ink);background:var(--h-white);border-radius:999px;padding:1px 8px}
.dif-card .ds{font-size:11px;font-weight:700;line-height:1.35;color:var(--h-ink2);text-align:center}
/* 選んだ難易度の色（かんたん 緑 / ふつう 青 / むずかしい 赤） */
.dif-card.dif-e.on{border-color:#2fbf7a;background:#e6fff1;box-shadow:0 4px 0 #1f8f58}
.dif-card.dif-n.on{border-color:#3b8bff;background:#e8f1ff;box-shadow:0 4px 0 #2563c4}
.dif-card.dif-h.on{border-color:#ff4a4a;background:#ffecec;box-shadow:0 4px 0 #c02626}
/* 条件：画面がせまいときは、説明を隠す */
@media (max-width:620px){.dif-card .ds{display:none}.dif-card .nm{font-size:15px;letter-spacing:-.02em;white-space:nowrap}}
/* ステージのカードの、難易度ごとのクリア札（クリアした難易度だけ色つきで並ぶ） */
/* 札の並びと、難易度ごとの色 */
.stage-difs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.stage-difs i{font-style:normal;font-size:12px;font-weight:900;padding:3px 10px;border-radius:999px;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.stage-difs i.dif-e{background:#2fbf7a}
.stage-difs i.dif-n{background:#3b8bff}
.stage-difs i.dif-h{background:#ff4a4a}
.stage-difs i.none{background:rgba(0,0,0,.3);color:rgba(255,255,255,.8);box-shadow:none;font-weight:700}
/* 設定の注意書きと、選べない選択肢 */
.settings-note{margin:0;min-height:1.2em;font-size:12px;font-weight:700;color:#ffb3a0}
.settings-opt:has(input:disabled){opacity:.5;cursor:not-allowed}
/* セーブデータの引き継ぎ：説明・コードの欄・書き出す／読み込むボタン・結果の知らせ */
.save-help{margin:0;font-size:12px;line-height:1.6;color:var(--mute)}
.save-label{font-size:13px;font-weight:700;color:var(--paper)}
.save-code{width:100%;box-sizing:border-box;resize:vertical;min-height:64px;padding:8px 10px;border:2px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(0,0,0,.25);color:var(--paper);font:12px/1.4 ui-monospace,Consolas,monospace;word-break:break-all}
.save-code:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.save-btns{display:flex;flex-wrap:wrap;gap:10px}
.save-btns .btn{min-height:40px}
.save-btns .save-import{background:#3a3550}
.save-note{margin:0;min-height:1.2em;font-size:12px;font-weight:700;color:#9dffc8}
.save-note.bad{color:#ffb3a0}
/* ホームの「みんなで あそぶ」 */
.online-h{margin:6px 0 0;font-weight:900;font-size:15px;color:var(--h-ink)}
/* 「ロビーをつくる」ボタン */
.room-make{width:100%}
.room-make small{font-weight:800}
/* ショップの BGM（バトルの曲） */
/* 曲の印（♪。試聴中は弾む。使っている曲は緑の枠） */
.music-ico{display:grid;place-items:center;font-size:52px;font-weight:900;color:#fff;cursor:pointer;
    background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 55%),var(--mc,#8fa8ff);text-shadow:0 3px 0 rgba(43,26,90,.35)}
.music-ico.playing{animation:musicBeat .5s ease-in-out infinite alternate}
@keyframes musicBeat{from{transform:scale(1)}to{transform:scale(1.06) rotate(-3deg)}}
/* 使っている曲は緑の枠 */
.music-item.using{outline:3px solid #2fbf7a;outline-offset:2px}
/* 条件：動きを減らす設定なら、弾みを止める */
@media (prefers-reduced-motion:reduce){.music-ico.playing{animation:none}}

/* ===== ホーム画面（A案）：上にバー（左ショップ・中央タイトル・右メニュー）、下に 生業｜キャラ｜あそぶ の3列。スマホでは縦に積む ===== */
/* ホームの並び（上にバー、真ん中の段に ジョブ｜キャラ｜あそぶ、下に足もと） */
.home-wrap{position:relative;width:min(1240px,100%);display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr) minmax(0,340px);gap:44px 28px;padding-block:10px 28px;
    grid-template-areas:"bar bar bar" "job hero play" "foot foot foot";align-items:start}
/* 上のバー（左・真ん中・右） */
.home-bar{grid-area:bar;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px}
/* バーの左右 */
.bar-l{display:flex;justify-content:flex-start}
.bar-r{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* バーのボタン（BGM がオフなら薄く） */
.bar-btn{font:inherit;font-family:var(--f-round);font-weight:900;font-size:13px;color:var(--h-ink);background:var(--h-white);border:0;border-radius:999px;padding:7px 14px;cursor:pointer;box-shadow:0 4px 0 rgba(43,26,90,.3);white-space:nowrap}
.bar-btn.bgm-btn[aria-pressed="false"]{background:rgba(255,255,255,.55);color:var(--h-ink2)}
.bar-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,26,90,.3)}
/* キーボードで選んだときの枠 */
.bar-btn:focus-visible,.name-pill:focus-within{outline:3px solid var(--h-cyan);outline-offset:3px}
/* タイトル */
.home-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.home-title{font-size:clamp(40px,6.4vw,74px)}
/* 3つの欄の置き場所 */
.job-panel{grid-area:job}.hero{grid-area:hero}.play{grid-area:play}
/* ジョブのボタンとパネルの間隔 */
.job{gap:0}
/* ホームのパネルの間隔 */
.home-wrap .pop-panel{gap:18px;padding:36px 22px 24px}
.home-wrap .jobs{gap:10px}
/* まんなか：キャラを大きく */
/* キャラの欄（プレビューを大きく） */
.hero{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.hero .dress-stage{width:100%;height:clamp(300px,48vh,430px);background:transparent;overflow:visible}
/* キャンバスは上へはみ出す（dressup.js が高さを決める）。さわるのは枠だけ */
.hero .dress-canvas{position:relative;pointer-events:none}
.hero .dress-hint{color:var(--h-white);text-shadow:0 1px 2px rgba(43,26,90,.7)}
/* 名前の入力と「よそおい」ボタン */
.hero-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* キャラの台は枠の外まで描くので、となりの枠・なまえの欄・宴モードのボタンは台より手前に */
.home-wrap>.pop-panel,.home-wrap>.utage-dock,.hero-row{position:relative;z-index:1}
/* 名前の入力 */
.name-pill{display:flex;align-items:center;gap:8px;background:var(--h-white);border-radius:999px;padding:6px 8px 6px 16px;font-weight:900;font-size:13px;color:var(--h-ink2);box-shadow:0 4px 0 rgba(43,26,90,.3)}
.name-pill input{width:9em;font:inherit;font-weight:900;font-size:17px;color:var(--h-ink);background:var(--h-cream);border:0;border-radius:999px;padding:5px 12px;outline:none}
/* 「よそおい」ボタン */
.hero-dress{font-size:15px;padding:9px 18px}
/* 宴モードへの切りかえ：右の列のいちばん下（フッターのすぐ上）に、あそぶ枠とは別に置く */
.utage-dock{grid-column:3;grid-row:2/-2;align-self:end;justify-self:center;width:calc(100% - 80px)} /* あそぶ枠と同じ右の列で、下の端にそろえる（あそぶ枠の高さは変えない）。幅は「みんなで あそぶ」より少しせまい */
@media (min-width:901px){.utage-dock{zoom:.8}} /* あそぶ枠と同じ0.8倍 */
/* 大きさは「みんなで あそぶ」（高さ68px・文字23px）より少し小さく */
.utage-dock .mode-switch{min-height:62px;padding:8px 16px 8px 10px;gap:14px;border-radius:22px}
.utage-dock .mode-switch .ms-ico{width:48px;height:48px}
.utage-dock .mode-switch svg{width:30px;height:15px}
.utage-dock .mode-switch .ms-txt b{font-size:20px}
.utage-dock .mode-switch .ms-txt small{font-size:13px}
.utage-dock .mode-switch .ms-go{width:34px;height:34px;font-size:22px}
/* あそぶ・いどむ枠の見出し */
.play-top{display:flex;align-items:center;margin-top:-4px}
/* モード切りかえ：右下の .utage-dock の中。何のボタンか文字で分かるように */
/* モードの切りかえボタン（アイコン・文字・矢印） */
.mode-switch{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;font:inherit;text-align:left;cursor:pointer;
    color:#fff;background:linear-gradient(135deg,#3b2a7a,#2b1a5a);border:0;border-radius:18px;padding:10px 14px;box-shadow:0 4px 0 rgba(43,26,90,.35);transition:transform .15s}
.mode-switch:hover{transform:translateY(-2px)}
.mode-switch:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,26,90,.35)}
.mode-switch:focus-visible{outline:3px solid var(--h-cyan);outline-offset:3px}
.mode-switch .ms-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--h-yellow);color:#2b1a5a}
.mode-switch svg{width:28px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
.mode-switch .ms-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.mode-switch .ms-txt b{font-weight:900;font-size:17px;line-height:1.25;white-space:nowrap}
.mode-switch .ms-txt small{font-weight:700;font-size:12px;color:#d8ccff}
.mode-switch .ms-go{flex:none;display:grid;place-items:center;width:30px;height:30px;font-weight:900;font-size:20px;line-height:1;color:#2b1a5a;background:#fff;border-radius:50%}
/* 2つに分かれたモードのボタン */
.mode-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--h-ink);border-radius:999px;padding:4px}
.mode-seg .mode{font:inherit;font-weight:900;font-size:16px;color:#fff;background:transparent;border:0;border-radius:999px;padding:9px 6px;cursor:pointer}
.mode-seg .mode.on{background:var(--h-white);color:var(--h-ink)}
/* 「みんなで あそぶ」と「ひとりで あそぶ」のボタンの大きさ */
.btn-minna{font-size:20px;padding:14px 22px}
/* 「ひとりで／みんなで あそぶ」ボタンの高さ */
.play .btn-big{min-height:72px}.play .btn-minna{min-height:60px}
/* エンドロール：下の「開発 宴のはじまり」ロゴのとなり */
/* 「エンドロール」ボタン */
.credits-btn{font:inherit;font-family:var(--f-round);font-weight:900;font-size:13px;letter-spacing:.04em;color:var(--h-ink);background:var(--h-white);border:0;border-radius:999px;padding:6px 14px;margin-left:4px;cursor:pointer;box-shadow:0 3px 0 rgba(43,26,90,.3);text-shadow:none;white-space:nowrap}
.credits-btn:hover{transform:translateY(-1px)}
.credits-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(43,26,90,.3)}
.credits-btn:focus-visible{outline:3px solid var(--h-cyan);outline-offset:3px}
/* 足もとの置き場所 */
.home-foot{grid-area:foot}
/* よそおいの引き出し（右から） */
/* よそおいの引き出し（右から出る） */
.dress-sheet{position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(400px,100vw);box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;gap:14px;
    padding:20px 20px max(20px,env(safe-area-inset-bottom,0px));background:var(--h-white);box-shadow:-10px 0 40px rgba(43,26,90,.35);border-radius:28px 0 0 28px;animation:sheetIn .25s ease-out}
.dress-sheet[hidden]{display:none}
/* よそおいは種類ごとのタブで1つずつ見せる。スクロールバーは出さない（はみ出したときは、ホイールやスワイプでだけ動く） */
.dress-sheet{scrollbar-width:none}.dress-sheet::-webkit-scrollbar{display:none}
/* 着せ替えの引き出しのボタン */
.sheet-btns{display:flex;gap:8px}
/* タブ：手帳のインデックスのように上だけ丸く、選んだタブは下の枠とつながる */
.shop-tabs.dress-tabs{flex-wrap:nowrap;gap:4px;padding:0;border-bottom:3px solid var(--h-line);margin-bottom:-10px}
/* 着せ替えのタブ */
.dress-tabs .shop-tab{flex:1 1 0;justify-content:center;min-width:0;padding:7px 4px 6px;border:3px solid var(--h-line);border-bottom:0;border-radius:14px 14px 0 0;background:var(--h-cream);color:var(--h-ink2)}
.dress-tabs .shop-tab:hover{transform:none;background:var(--h-white)}
.dress-tabs .shop-tab.on{background:var(--h-white);color:var(--h-ink);margin-bottom:-3px;padding-bottom:9px}
/* 中のアイテム：ほぼ正方形のタイルを、どのタブも横4つ×縦2段にそろえる（いろ8・ぼうし8 がちょうど収まり、タブを切りかえても枠の高さが変わらない） */
.dress-sheet .pick{display:block;min-height:calc(var(--tile-h) * 2 + 10px);padding:12px;border:3px solid var(--h-line);border-top:0;border-radius:0 0 20px 20px}.dress-sheet .pick[hidden]{display:none}
.dress-sheet{--tile-h:66px}
.dress-sheet .chips,.dress-sheet .swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--tile-h);gap:10px}
.dress-sheet .chip{height:auto;display:grid;place-items:center;text-align:center;padding:4px;border-width:3px;border-radius:16px;font-size:14px;font-weight:900;line-height:1.2;box-shadow:0 3px 0 var(--h-line)}
.dress-sheet .chip.on{transform:translateY(-2px);box-shadow:0 5px 0 rgba(43,26,90,.35)}
.dress-sheet .swatch{width:auto;height:auto;border-radius:16px}
/* レア度：値段で決まる（ショップと同じ）。タイルの色と枠を、うっすらレア度の色にする。ノーマルはそのまま */
.dress-sheet .chip.rar-rare{background:#eaf3ff;border-color:#a9cdff;box-shadow:0 3px 0 #a9cdff}
.dress-sheet .chip.rar-epic{background:#f2eaff;border-color:#cfb4ff;box-shadow:0 3px 0 #cfb4ff}
.dress-sheet .chip.rar-legend{background:linear-gradient(180deg,#fff6dc,#ffe7b3);border-color:#ffc760;box-shadow:0 3px 0 #ffc760}
.dress-sheet .chip.on.rar-rare{box-shadow:0 5px 0 #4f9dff}.dress-sheet .chip.on.rar-epic{box-shadow:0 5px 0 #a54dff}.dress-sheet .chip.on.rar-legend{box-shadow:0 5px 0 #ff9a00}
.dress-sheet .chip.on.rar-rare{border-color:#4f9dff}.dress-sheet .chip.on.rar-epic{border-color:#a54dff}.dress-sheet .chip.on.rar-legend{border-color:#ff9a00}
.dress-sheet .chip.on[class*="rar-"]{background:var(--h-ink)}
@keyframes sheetIn{from{transform:translateX(40px);opacity:0}}
@keyframes dressIn{from{transform:translateY(18px);opacity:0}}
/* 引き出しの見出し */
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{margin:0;font-weight:900;font-size:22px;color:var(--h-ink)}
.sheet-head .btn-pop{align-self:center;font-size:14px;padding:7px 16px}
/* ホームの上に出る小窓（みんなで あそぶ・あそびかた） */
/* 小窓（ホームの上に重ねる。変数はホームと同じ色） */
.home-modal{z-index:35;place-items:center;--h-ink:#2b1a5a;--h-ink2:#5b4a8a;--h-white:#ffffff;--h-cream:#f6f2ff;--h-line:#e3d9ff;--h-yellow:#ffd23f;--h-yellow-d:#d29f00;--h-pink:#ff4fa3;--h-pink-d:#b8236c;--h-cyan:#4fd8ff;
    --f-round:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-family:var(--f-round);color:var(--h-ink)}
/* 「みんなで あそぶ」のカード */
.minna-card{width:min(460px,100%);box-sizing:border-box;padding-top:34px}
.minna-or{margin:4px 0 0;font-weight:900;font-size:14px;color:var(--h-ink2)}
/* 「あそびかた」のカード */
.howto-card{width:min(880px,100%);box-sizing:border-box;padding-top:34px;max-height:calc(100dvh - 40px);overflow:visible}
/* あそびかた：タブで4つに分けて、項目ごとのカードに短い箇条書き */
/* あそびかたの見出しとタブ（aria-selected が選択中） */
.ht-lead{margin:0;font-weight:900;font-size:16px;color:var(--h-ink)}
.ht-tabs{display:flex;flex-wrap:nowrap;gap:6px;background:var(--h-cream);border-radius:999px;padding:5px}
.ht-tab{flex:1 1 auto;min-width:0;white-space:nowrap;font:inherit;font-weight:900;font-size:15px;color:var(--h-ink2);background:transparent;border:0;border-radius:999px;padding:9px 14px;cursor:pointer}
.ht-tab:hover{color:var(--h-ink)}
.ht-tab[aria-selected="true"]{background:var(--h-ink);color:#fff;box-shadow:0 3px 0 rgba(43,26,90,.25)}
.ht-tab:focus-visible{outline:3px solid var(--h-cyan);outline-offset:2px}
/* 中身（スクロールする）と、2列のカード */
.ht-body{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -6px;padding:2px 6px 6px}
.ht-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ht-panel[hidden]{display:none}
/* カード（広いものと、最後の1枚は2列ぶん） */
.ht-card{background:var(--h-cream);border:2px solid var(--h-line);border-radius:20px;padding:14px 16px 16px;min-width:0}
.ht-card.ht-wide,.ht-panel>.ht-card:last-child:nth-child(odd){grid-column:1/-1}
/* カードの見出しと、アイコン */
.ht-card h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:900;font-size:18px;color:var(--h-pink-d)}
.ht-card h3 small{margin-left:auto;font-size:12px;font-weight:900;color:#fff;background:var(--h-ink2);border-radius:999px;padding:2px 10px}
.ht-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--h-white);font-size:18px;box-shadow:0 2px 0 var(--h-line)}
/* 箇条書き（頭に丸） */
.ht-card ul,.ht-card ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ht-card li{position:relative;padding-left:16px;font-size:14px;line-height:1.6;color:var(--h-ink)}
.ht-card ul>li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--h-pink)}
.ht-card strong{color:var(--h-pink-d)}
/* キーの表示 */
.ht-card kbd{display:inline-block;min-width:1.4em;text-align:center;font-family:inherit;font-size:12px;font-weight:900;color:var(--h-ink);background:#fff;border:1px solid var(--h-line);border-bottom-width:3px;border-radius:6px;padding:0 5px;margin:0 1px;line-height:1.5}
/* 注意書き */
.ht-note{margin:0;font-size:13px;line-height:1.6;color:var(--h-ink2)}
/* 注意書き */
li.ht-note{color:var(--h-ink2)}
.ht-card>.ht-note+ul,.ht-card>ol+.ht-note{margin-top:8px}
/* 注意のカード（赤） */
.ht-warn{background:#fff1f3;border-color:#ffc2cf}
.ht-warn h3{color:#c4234a}
.ht-warn ul>li::before{background:#e8486b}
/* 色の点 */
.ht-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.ht-dot.g{background:#3ccf7a}.ht-dot.b{background:#4a8dff}.ht-dot.y{background:#ffc93a}
.ht-card ul>li:has(.ht-dot){padding-left:0}.ht-card ul>li:has(.ht-dot)::before{display:none}
/* 番号つき（みんなで の手順・ボス） */
/* 番号つきの箇条書き（counter で番号を付ける） */
.ht-steps,.ht-boss{counter-reset:n}
.ht-steps>li,.ht-boss>li{counter-increment:n;padding-left:34px;min-height:26px}
.ht-steps>li::before,.ht-boss>li::before{content:counter(n);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--h-ink);color:#fff;font-size:13px;font-weight:900}
/* ボスの一覧（2列） */
.ht-boss{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px!important}
.ht-boss b,.ht-otomo b{display:block;font-weight:900;color:var(--h-ink)}
.ht-boss span{display:block;font-size:13px;color:var(--h-ink2)}
/* おともの一覧 */
.ht-otomo>li{padding-left:0}.ht-otomo>li::before{display:none}
.ht-otomo b{display:inline-block;min-width:3em;margin-right:6px;padding:0 8px;border-radius:999px;background:var(--h-yellow);text-align:center;font-size:13px}
/* 条件：画面がせまいときは、1列にする */
@media (max-width:640px){
    .ht-panel{grid-template-columns:minmax(0,1fr)}
    .ht-boss{grid-template-columns:minmax(0,1fr)}
    .ht-tab{font-size:13px;padding:8px 6px}
}
/* 小窓の閉じるボタン */
.home-modal .btn-white{align-self:flex-end}
/* エンドレスのときだけ・ふつうのときだけ出す要素 */
.home:not(.endless) .for-endless,.home.endless .for-normal{display:none}
/* 一回り大きく：PC幅では全体を大きめに、生業の枠はとくに大きく */
/* 条件：広い画面（901px 以上）では、全体を大きめにする */
@media (min-width:901px){
    /* フルスクリーン前提：画面いっぱいに広げる。左右の列は同じ幅にして、まんなかのキャラが画面の中心に来るようにする。
       広い画面では全体を拡大し、小さい画面では少し縮める（--hz は dressup.js の fitHome が画面の大きさから決める。1 = そのまま）。
       左列は上にジョブ、その下の空きによそおいが広がる。キャラは左右の列にまたがって、縦も中央に置く。
       左右の列は同じ幅（1.5 : 1 : 1.5）にして、キャラとタイトルを画面のまんなかに置く。右の「あそぶ」枠は0.8倍なので列の右に寄せる */
    .home{padding:0}
    .home-wrap{zoom:var(--hz,1);box-sizing:border-box;width:calc(100vw / var(--hz,1));max-width:none;min-height:calc(100vh / var(--hz,1));align-self:stretch;
        padding:clamp(10px,calc(1.8vh / var(--hz,1)),26px) clamp(24px,calc(2.6vw / var(--hz,1)),64px);gap:clamp(10px,calc(1.6vh / var(--hz,1)),22px) clamp(20px,calc(2vw / var(--hz,1)),40px);
        grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto auto minmax(0,1fr) auto;
        grid-template-areas:"bar bar bar" "job hero play" "dress hero play" "foot foot foot"}
    .job-panel,.play{align-self:start}.hero{align-self:end} /* キャラ・台・なまえの欄は、列の下のほう（フッターのすぐ上）に置く */
    .play{zoom:.8;box-sizing:border-box;justify-self:end;width:80%} /* 右のあそぶ枠は0.8倍の大きさ（幅も中身も0.8倍）。列の右に寄せる */
    .utage-dock{justify-self:end;width:calc(80% - 80px);margin-right:40px} /* 宴モードのボタンも、あそぶ枠のまんなかの下に */
    .home-wrap>.home-bar{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.5fr);column-gap:clamp(20px,calc(2vw / var(--hz,1)),40px);align-items:start} /* タイトルをキャラの真上に（下の列と同じ幅）。ホームだけ。「みんなで あそぶ」のバーは元の3列のまま */
    .home-head{justify-self:center;width:max-content}.home-title{flex-wrap:nowrap;white-space:nowrap} /* 列より広くても1行のまま、キャラの真上で左右に広がる */
    .dress-sheet{position:static;grid-area:dress;width:auto;max-height:100%;min-height:0;z-index:auto;border-radius:34px;padding:16px 26px 18px;
        gap:10px;box-shadow:0 8px 0 rgba(43,26,90,.25),0 18px 40px rgba(43,26,90,.3);animation:dressIn .25s ease-out}
    .home-wrap>.dress-sheet{position:relative;z-index:1}
    .home.endless .dress-sheet{box-shadow:0 8px 0 rgba(30,0,0,.4),0 18px 40px rgba(30,0,0,.35)}
    .hero{gap:12px}
    .hero .dress-stage{height:clamp(280px,calc(47vh / var(--hz,1)),560px)} /* タイトルとフッターにかぶらない高さ */
    .endless-best span{padding:5px 8px}.endless-best b{font-size:18px}
    .home-wrap .pop-panel{gap:20px;padding:40px 26px 28px;border-radius:34px}
    .home-wrap .pop-h{font-size:22px;padding:6px 22px}
    .home-wrap .jobs{gap:12px}
    .home-wrap .job-panel{gap:14px;padding:34px 24px 20px}
    .home-wrap .job{min-height:68px;padding:10px 4px 8px;border-radius:20px;justify-content:center}
    .home-wrap .job b{font-size:clamp(10px,calc(((100cqw - 36px)/4 - 14px)/7.2),21px)}
    .home-wrap .job .job-stat{font-size:13px;margin-top:2px}
    .home-wrap .job-desc{font-size:14px;line-height:1.6;padding:10px 14px}
    .home-bar .bar-btn{font-size:15px;padding:9px 18px}
    .home-bar .shop-home{font-size:16px;padding:7px 16px 7px 10px}
    .home-bar .shop-home b{font-size:15px}
    .home-title{font-size:clamp(44px,7vw,84px)}
    .home-head{min-height:124px}
    .home-kicker{font-size:17px}
    .mode-seg .mode{font-size:18px;padding:11px 6px}
    .play .status{font-size:14px}
    .play .btn-big{font-size:28px;min-height:84px}
    .play .btn-minna{font-size:23px;min-height:68px}
    .mode-switch .ms-txt b{font-size:18px}
    .mode-switch .ms-txt small{font-size:13px}
    .name-pill{font-size:15px;padding:8px 10px 8px 18px}
    .name-pill input{font-size:19px;width:9.5em}
    .hero-dress{font-size:17px;padding:11px 22px}
    .endless-rule{font-size:15px}
}
/* 条件：画面が900px 以下のときは、ホームを1列に積む */
@media (max-width:900px){
    .home-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "hero" "job" "play" "utage" "foot";gap:24px}
    .utage-dock{grid-column:auto;grid-row:auto;grid-area:utage}
    .home-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l r" "t t"}
    .bar-l{grid-area:l}.bar-r{grid-area:r}.home-head,.room-title{grid-area:t;justify-self:center}
    .hero .dress-stage{height:260px}
}
/* 条件：とてもせまいときは、バーのボタンを小さくする */
@media (max-width:420px){.bar-btn{font-size:12px;padding:6px 10px}.bar-r{gap:6px}}

/* ===== 宴モード（「宴モード」ボタンで、ふつうの画面と同じ形・文字のまま、色だけが地獄に変わる）
   血の赤と炎の橙、焼けた黒。パネルは骨のような生成り ===== */
/* 大きな ∞ の背景（エンドレスのときだけ） */
.endless-bg{display:none}
/* 宴（エンドレス）画面の色（変数 --h-* を宴の色に差しかえる） */
.home.endless{--h-ink:#2a0606;--h-ink2:#7a2a1e;--h-white:#f6e6d2;--h-cream:#ecd6bf;--h-line:#d9a98a;
    --h-yellow:#ff8a1f;--h-yellow-d:#a83a00;--h-pink:#d81e10;--h-pink-d:#6e0804;--h-cyan:#ff5a1f;
    background:linear-gradient(160deg,#3a0c40 0%,#a01e3c 45%,#ff6a2a 80%,#ffb24a 100%)}
/* いつもの背景（ことだまの宵）の宴モード：同じ形で、空は焼けた黒から炎へ。麻の葉は焦げた金、光は火の粉 */
:root.bg-rich .home.endless{background:linear-gradient(168deg,#22072e 0%,#5e0e30 28%,#b0241e 56%,#ea5a26 80%,#ffb04a 100%);
    --hb-g1:rgba(255,150,60,.40);--hb-g2:rgba(255,60,20,.26);--hb-g3:rgba(255,190,90,.24);--hb-vig:rgba(12,0,0,.62);
    --hb-asa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.28' viewBox='0 0 40 69.28'%3E%3Cpath d='M-40 0L0 0M-40 69.28L0 69.28M-20 -34.64L0 0M-20 -11.55L0 0M-20 11.55L0 0M-20 34.64L0 0M-20 34.64L0 23.09M-20 34.64L0 46.19M-20 34.64L0 69.28M-20 34.64L20 34.64M-20 57.74L0 69.28M-20 80.83L0 69.28M-20 103.92L0 69.28M0 -23.09L0 0M0 0L0 23.09M0 0L20 -34.64M0 0L20 -11.55M0 0L20 11.55M0 0L20 34.64M0 0L40 0M0 23.09L20 34.64M0 46.19L0 69.28M0 46.19L20 34.64M0 69.28L0 92.38M0 69.28L20 34.64M0 69.28L20 57.74M0 69.28L20 80.83M0 69.28L20 103.92M0 69.28L40 69.28M20 -34.64L40 0M20 -11.55L40 0M20 11.55L20 34.64M20 11.55L40 0M20 34.64L20 57.74M20 34.64L40 0M20 34.64L40 23.09M20 34.64L40 46.19M20 34.64L40 69.28M20 34.64L60 34.64M20 57.74L40 69.28M20 80.83L40 69.28M20 103.92L40 69.28M40 -23.09L40 0M40 0L40 23.09M40 0L60 -34.64M40 0L60 -11.55M40 0L60 11.55M40 0L60 34.64M40 0L80 0M40 23.09L60 34.64M40 46.19L40 69.28M40 46.19L60 34.64M40 69.28L40 92.38M40 69.28L60 34.64M40 69.28L60 57.74M40 69.28L60 80.83M40 69.28L60 103.92M40 69.28L80 69.28' fill='none' stroke='%23ffc68a' stroke-width='.7'/%3E%3C/svg%3E");--hb-orb:255,196,110;--hb-orb2:255,120,50;--hb-rise:26s}
/* 光って切りかわるのは「宴モードへ」を押したときだけ（次の画面へ進むときは光らない） */
.home.endless.flash{animation:endlessIn .5s ease-out}
@keyframes endlessIn{from{filter:brightness(2.4) sepia(1) saturate(4) hue-rotate(-25deg)}}
/* 宴の背景の水玉 */
:root.bgv-pop .home.endless .home-bg{background-image:radial-gradient(rgba(255,190,90,.24) 22%,transparent 23%),radial-gradient(rgba(255,130,50,.14) 22%,transparent 23%)}
/* エンドレスのときだけの要素を出す */
.home.endless .for-endless{display:revert}
.home.endless .play-endless{display:flex}
.home.endless .endless-best{display:grid}
/* 影の色：ふだんの紫を赤黒に */
.home.endless .home-kicker{text-shadow:0 2px 0 rgba(30,0,0,.55)}
.home.endless .home-title span{text-shadow:4px 0 0 var(--h-ink),-4px 0 0 var(--h-ink),0 4px 0 var(--h-ink),0 -4px 0 var(--h-ink),4px 4px 0 var(--h-ink),-4px 4px 0 var(--h-ink),4px -4px 0 var(--h-ink),-4px -4px 0 var(--h-ink),0 10px 0 var(--h-ink),0 14px 18px rgba(30,0,0,.45)}
.home.endless .pop-panel{box-shadow:0 8px 0 rgba(30,0,0,.4),0 18px 40px rgba(30,0,0,.35)}
.home.endless .pop-h,.home.endless .bar-btn,.home.endless .name-pill{box-shadow:0 4px 0 rgba(30,0,0,.4)}
.home.endless .bar-btn:active{box-shadow:0 1px 0 rgba(30,0,0,.4)}
.home.endless .bar-btn.bgm-btn[aria-pressed="false"]{background:rgba(246,230,210,.55)}
.home.endless .credits-btn{box-shadow:0 3px 0 rgba(30,0,0,.4)}
.home.endless .credits-btn:active{box-shadow:0 1px 0 rgba(30,0,0,.4)}
.home.endless .mode-switch{background:linear-gradient(135deg,#9a1a0e,#4a0906);box-shadow:0 4px 0 rgba(30,0,0,.45)}
.home.endless .mode-switch:active{box-shadow:0 1px 0 rgba(30,0,0,.45)}
.home.endless .mode-switch .ms-ico,.home.endless .mode-switch .ms-go{color:#2a0606}
.home.endless .mode-switch .ms-go{background:#f6e6d2}
.home.endless .mode-switch .ms-txt small{color:#f0bfa6}
.home.endless .btn-yellow{box-shadow:0 6px 0 var(--h-yellow-d),0 10px 18px rgba(30,0,0,.3)}
.home.endless .btn-pink{box-shadow:0 6px 0 var(--h-pink-d),0 10px 18px rgba(30,0,0,.3)}
.home.endless .btn-yellow:active{box-shadow:0 2px 0 var(--h-yellow-d)}
.home.endless .btn-pink:active{box-shadow:0 2px 0 var(--h-pink-d)}
.home.endless .home-foot .status,.home.endless .credit{text-shadow:0 1px 2px rgba(30,0,0,.6)}
.home.endless .hero .dress-hint{text-shadow:0 1px 2px rgba(30,0,0,.7)}
/* 宴モードのタイトルの「宴」：朱の落款（はんこ）のように、炎色の角丸の札に白抜き。まわりがゆらゆら光る */
.home.endless .home-title .t-en{display:inline-grid;place-items:center;width:1.18em;height:1.18em;margin-left:.06em;font-size:.88em;line-height:1;color:#fff4e0;
    background:radial-gradient(circle at 32% 26%,#ffb04a 0%,#ff5a1f 38%,#c8160c 70%,#6e0804 100%);border:.07em solid var(--h-ink);border-radius:24%;
    text-shadow:0 .05em 0 #5a0602,0 0 .18em rgba(255,200,120,.6);
    box-shadow:0 .12em 0 var(--h-ink),inset 0 0 0 .05em rgba(255,226,170,.55),0 0 .3em rgba(255,110,30,.7);
    animation:wobble 2.6s ease-in-out infinite,en-flare 1.4s ease-in-out infinite alternate;animation-delay:-.6s,0s}
@keyframes en-flare{to{box-shadow:0 .12em 0 var(--h-ink),inset 0 0 0 .05em rgba(255,226,170,.7),0 0 .6em rgba(255,140,40,.95),0 0 1.1em rgba(255,60,20,.55)}}
/* 条件：動きを減らす設定なら、宴のタイトルの動きを止める */
@media (prefers-reduced-motion:reduce){.home.endless .home-title .t-en{animation:none}}
/* 宴の説明 */
.endless-rule{margin:0;font-size:13px;font-weight:700;line-height:1.6;color:var(--h-ink2)}
.endless-best{display:grid;grid-template-columns:1fr 1fr;width:100%;box-sizing:border-box;margin:0 0 12px;border:1px solid var(--h-line);border-radius:10px;overflow:hidden;background:var(--h-line);gap:1px;text-align:center}
.endless-best span{display:flex;flex-direction:column;gap:2px;background:var(--h-white);padding:8px;font-size:11px;letter-spacing:.2em;color:var(--h-ink2)}
.endless-best b{font-size:20px;letter-spacing:0;color:var(--h-ink)}
/* 条件：動きを減らす設定なら、切りかわりと引き出しの動きを止める */
@media (prefers-reduced-motion:reduce){.home.endless,.dress-sheet{animation:none}}

/* ===== みんなで あそぶ（ロビー）：上に合言葉、横に4人の枠、下は 左チャット｜まんなか設定｜右しゅつじん ===== */
/* ロビーの全体と見出し */
.room-wrap{position:relative;width:min(1240px,100%);display:flex;flex-direction:column;gap:16px;padding-block:4px 20px}
.room-title{margin:0;display:flex;flex-wrap:nowrap;white-space:nowrap;gap:.3em;font-family:var(--f-round);font-weight:900;font-size:clamp(28px,4vw,44px)}
.room-title span{text-shadow:3px 0 0 var(--h-ink),-3px 0 0 var(--h-ink),0 3px 0 var(--h-ink),0 -3px 0 var(--h-ink),3px 3px 0 var(--h-ink),-3px 3px 0 var(--h-ink),3px -3px 0 var(--h-ink),-3px -3px 0 var(--h-ink),0 7px 0 var(--h-ink)}
.room-title .t1{color:var(--h-white)}.room-title .t2{color:var(--h-yellow)}
/* 合言葉と人数 */
.room-code{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;margin:0;font-weight:900;font-size:14px;color:var(--h-white);text-shadow:0 1px 2px rgba(43,26,90,.6)}
.room-code b{font-size:28px;letter-spacing:.2em;color:var(--h-ink);background:var(--h-white);border-radius:12px;padding:2px 10px 2px 16px;text-shadow:none;box-shadow:0 4px 0 rgba(43,26,90,.3)}
.room-code small{font-size:12px}
/* リーダーだけが合言葉を変えられる（入力欄と「変える」） */
.room-code-edit{display:inline-flex;align-items:center;gap:6px}
.room-code-edit input{width:9.5em;font:inherit;font-weight:800;font-size:15px;padding:5px 12px;border:2px solid var(--h-line);border-radius:999px;background:var(--h-white);color:var(--h-ink);text-shadow:none}
.room-code-edit input:focus{outline:3px solid var(--h-cyan);outline-offset:1px}
.room-count{background:rgba(43,26,90,.35);border-radius:999px;padding:2px 10px}
/* メンバーの枠の並び（4列） */
.room-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
/* メンバーの枠（変数 --pc = その人の色。自分は黄色っぽく、ゲーム中は薄く） */
.room-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:280px;box-sizing:border-box;padding:34px 12px 14px;border-radius:24px;
    background:var(--h-white);border:4px solid var(--pc,var(--h-ink));box-shadow:0 6px 0 rgba(43,26,90,.3)}
.room-card.me{background:#fffbea}
.room-card.playing{opacity:.6}
.room-card .rc-pv{display:block;width:150px;height:150px}
/* 名前とジョブ（自分の枠では選べる） */
.rc-name{font-size:17px;font-weight:900;color:var(--h-ink);overflow-wrap:anywhere;text-align:center}
/* ジョブ：ほかの人は札、自分は押すと一覧が上に開くボタン（--job = ジョブの色） */
.rc-job,.rc-job-btn{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;font:inherit;font-weight:900;font-size:14px;color:var(--h-ink);
    background:linear-gradient(180deg,#fff 0 55%,color-mix(in srgb,var(--job) 16%,#fff));border:3px solid var(--job);border-radius:16px;padding:5px 10px 5px 5px;box-shadow:0 4px 0 color-mix(in srgb,var(--job) 70%,#2b1a5a)}
.rc-job{font-size:13px}
/* ジョブの頭の字の丸い印 */
.rjb-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-size:14px;font-weight:900;color:#fff;
    background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--job) 55%,#fff),var(--job) 70%);text-shadow:0 1px 0 rgba(43,26,90,.45);box-shadow:inset 0 -2px 0 rgba(43,26,90,.18)}
/* ロビーのジョブを選ぶ部品（ボタンと開く一覧） */
.rc-job-pick{position:relative;width:100%}
.rc-job-btn{cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s}
.rc-job-btn b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rjb-car{flex:none;width:22px;height:22px;border-radius:50%;background:var(--h-ink);position:relative;transition:transform .2s}
.rjb-car::before{content:"";position:absolute;left:7px;top:5px;width:6px;height:6px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.rc-job-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 color-mix(in srgb,var(--job) 70%,#2b1a5a)}
.rc-job-btn:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--job) 70%,#2b1a5a)}
.rc-job-btn[aria-expanded="true"] .rjb-car{transform:rotate(180deg)}
.rc-job-btn:focus-visible,.rjm-opt:focus-visible,.rc-dress:focus-visible{outline:3px solid var(--h-cyan);outline-offset:2px}
.rc-job-btn.rolled{animation:jobRoll .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes jobRoll{0%{transform:scale(.85) rotate(-4deg)}60%{transform:scale(1.08) rotate(2deg)}100%{transform:none}}
/* ジョブの一覧（ボタンの上に開く） */
.rc-job-menu{position:absolute;left:-6px;right:-6px;bottom:calc(100% + 10px);z-index:20;display:flex;flex-direction:column;gap:4px;padding:8px;box-sizing:border-box;
    background:var(--h-white);border:3px solid var(--h-ink);border-radius:20px;box-shadow:0 8px 0 rgba(43,26,90,.25),0 18px 36px rgba(43,26,90,.35);transform-origin:50% 100%;animation:jobMenuIn .18s ease-out}
.rc-job-menu[hidden]{display:none}
.rc-job-menu::after{content:"";position:absolute;left:calc(50% - 9px);bottom:-11px;width:14px;height:14px;background:var(--h-white);border:solid var(--h-ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
@keyframes jobMenuIn{from{opacity:0;transform:translateY(8px) scale(.96)}}
/* 一覧の選択肢 */
.rjm-opt{display:flex;align-items:center;gap:8px;width:100%;font:inherit;text-align:left;color:var(--h-ink);background:transparent;border:2px solid transparent;border-radius:14px;padding:5px 8px 5px 5px;cursor:pointer;transition:background .12s}
.rjm-opt:hover,.rjm-opt:focus-visible{background:color-mix(in srgb,var(--job) 14%,#fff);border-color:color-mix(in srgb,var(--job) 45%,#fff)}
.rjm-opt.on{background:color-mix(in srgb,var(--job) 22%,#fff);border-color:var(--job)}
.rjm-opt.on .rjm-txt b::after{content:"✓";margin-left:6px;color:var(--h-pink)}
.rjm-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rjm-txt b{font-size:14px;font-weight:900}
.rjm-txt small{font-size:11px;font-weight:700;color:var(--h-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rjm-opt.taken small{color:#e0304e}
.rjm-opt:disabled{cursor:not-allowed;opacity:.45}
.rjm-rnd{border-bottom:2px dashed var(--h-line);border-radius:14px 14px 4px 4px;margin-bottom:2px}
.rjm-rnd .rjb-ico{background:conic-gradient(#e5473a,#f2c230,#2fb36d,#3f7fe0,#b48cff,#e5473a);font-size:16px}
.rjm-rnd:hover,.rjm-rnd:focus-visible{background:#fff6d6;border-color:var(--h-yellow)}
/* 自分の枠の「きせかえ」 */
.rc-dress{position:absolute;top:40px;right:10px;font:inherit;font-size:12px;font-weight:900;color:var(--h-ink);background:var(--h-yellow);border:0;border-radius:999px;padding:5px 11px;cursor:pointer;box-shadow:0 3px 0 var(--h-yellow-d);transition:transform .15s}
.rc-dress:hover{transform:translateY(-2px)}
/* ジョブがかぶっている枠 */
.room-card.dup{box-shadow:0 0 0 4px #ff3b5c,0 6px 0 rgba(43,26,90,.3)}
/* 「ジョブかぶり」の札 */
.rc-tags .rc-dup{background:#ff3b5c}
/* ジョブの注意書き */
.room-job-note{width:0;min-width:100%;box-sizing:border-box;margin:0;padding:10px 14px;border-radius:16px;background:#fff0f3;border:3px solid #ff3b5c;font-size:14px;font-weight:900;color:#c41d3c;text-align:center;box-shadow:0 4px 0 rgba(43,26,90,.2)}
.room-job-note[hidden]{display:none}
/* ロビーの着せ替えの窓：左にプレビュー、右に「よそおい」の欄（ホームの欄を付け替えて使う） */
.room-dress-card{width:min(820px,100%);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;padding:22px;align-items:stretch}
.room-dress-stage{height:auto;min-height:360px}
.room-dress .dress-sheet{position:static;width:auto;max-height:none;min-height:0;z-index:auto;padding:0;background:transparent;box-shadow:none;border-radius:0;animation:none;overflow:visible}
/* 条件：画面がせまいときは、ロビーの着せ替えを1列にする */
@media (max-width:640px){.room-dress-card{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}.room-dress-stage{min-height:0;height:220px}}
/* 札（リーダー・あなた・プレイ中） */
.rc-tags{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:4px;justify-content:space-between}
.rc-tags i{font-style:normal;font-size:11px;font-weight:900;border-radius:999px;padding:2px 9px;background:var(--h-ink);color:#fff}
.rc-tags .rc-lead{background:var(--h-yellow);color:var(--h-ink)}
.rc-tags .rc-me{background:var(--h-pink)}
.rc-tags .rc-play{background:#8a80b0}
/* 空いている枠 */
.room-card.empty{justify-content:center;border:4px dashed rgba(255,255,255,.8);background:rgba(255,255,255,.25);box-shadow:none;color:var(--h-white);font-weight:900;font-size:16px;text-shadow:0 1px 2px rgba(43,26,90,.6)}
.room-card.empty small{font-size:12px}
/* 下の段（チャット｜設定｜しゅつじん） */
.room-bottom{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr) auto;gap:20px;align-items:end}
/* チャット（記録と入力欄） */
.room-chat{display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px}
.room-sub{margin:0;font-weight:900;font-size:15px;color:var(--h-ink)}
.room-chat-log{list-style:none;margin:0;padding:8px 10px;height:130px;overflow-y:auto;background:var(--h-cream);border-radius:12px;display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:700;color:var(--h-ink);overflow-wrap:anywhere}
.room-chat-log b{font-weight:900;text-shadow:0 1px 0 rgba(43,26,90,.25)}
.room-chat-log .sys{font-size:12px;color:var(--h-ink2);text-align:center}
.room-chat-form{display:flex;gap:8px}
.room-chat-form input{flex:1;min-width:0;font:inherit;font-weight:700;font-size:15px;padding:9px 14px;border:2px solid var(--h-line);border-radius:999px;background:var(--h-white);color:var(--h-ink)}
.room-chat-form input:focus{outline:3px solid var(--h-cyan);outline-offset:1px}
.room-chat-form .btn-pop{padding:9px 16px;font-size:15px}
/* しゅつじん準備：ほかの枠と同じ白い枠に見出しの札。上にリーダーの帯、むずかしさは色つきの3つのボタン、ステージは番号の大きなカード */
.room-setup{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--h-white);border-radius:28px;padding:30px 18px 18px;box-shadow:0 8px 0 rgba(43,26,90,.25),0 18px 40px rgba(43,26,90,.2)}
.room-lead-note{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:var(--h-ink2);background:var(--h-cream);border-radius:999px;padding:6px 14px 6px 8px}
.room-lead-note i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--h-yellow);box-shadow:0 2px 0 var(--h-yellow-d,#d29f00);font-size:15px;flex:none}
.room-lead-note.me{color:var(--h-ink);background:linear-gradient(90deg,#fff3b8,var(--h-cream))}
.room-field{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:center;gap:10px}
.room-setup .pick-h{font-size:14px;color:var(--h-ink)}
.room-setup .chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.15;border-width:3px;border-radius:16px;box-shadow:0 4px 0 var(--h-line);transition:transform .15s,box-shadow .15s}
.room-setup .chip b{font-weight:900}
.room-setup .chip small{font-size:11px;font-weight:800;color:var(--h-ink2)}
.room-setup .chip:not(:disabled):hover{transform:translateY(-2px)}
.room-setup .chip:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--h-line)}
.room-setup .chip.on{background:var(--h-yellow);border-color:var(--h-ink);box-shadow:0 4px 0 var(--h-ink);color:var(--h-ink)}
.room-setup .chip.on small{color:var(--h-ink)}
.room-setup .chip:disabled{cursor:default;opacity:.55}
.room-setup .chip.on:disabled{opacity:1}
/* むずかしさ：3つ横並び。色で見分ける（かんたん＝緑、ふつう＝水色、むずかしい＝赤）。★は数で強さ */
.room-difs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.room-difs .chip{padding:7px 6px;font-size:15px}
.room-difs .chip small{letter-spacing:.1em;color:#e0a400}
.room-difs .chip[data-k="e"]{--dk:#2fbf7a}.room-difs .chip[data-k="n"]{--dk:#2aa8e0}.room-difs .chip[data-k="h"]{--dk:#e5333b}
.room-difs .chip{border-color:color-mix(in srgb,var(--dk) 45%,var(--h-line))}
.room-difs .chip.on{background:var(--dk);border-color:var(--h-ink);color:#fff;text-shadow:0 1px 0 rgba(43,26,90,.4)}
.room-difs .chip.on small{color:#fff6b0}
/* モード：ふつう／宴モードの2つ横並び。宴モードを選んだら朱色。宴モードの間はステージの欄をしまう */
.room-field[hidden]{display:none}
.room-ens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.room-ens .chip{padding:7px 6px;font-size:15px}
.room-ens .chip.on:last-child{background:#c8231b;border-color:var(--h-ink);color:#fff}
.room-ens .chip.on:last-child small{color:#ffe0c0}
/* ステージ：番号を大きく、名前を小さく。選んでいるステージは黄色 */
.room-stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.room-stages .chip{padding:6px 6px 7px;min-height:58px}
.room-stages .chip b{font-family:var(--f-round);font-size:22px;line-height:1}
.room-stages .chip small{font-size:11px;text-align:center}
.room-stages .chip.locked{background:#ece8f4;border-style:dashed}
/* 「しゅつじん！」と「待っています」 */
.room-go{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:240px}
.room-go .btn-big{font-size:28px;padding:22px 30px}
.room-wait{margin:0;padding:14px;border-radius:18px;background:var(--h-white);font-weight:900;color:var(--h-ink);text-align:center;box-shadow:0 6px 0 rgba(43,26,90,.25);animation:roomWait 1.6s ease-in-out infinite}
@keyframes roomWait{50%{opacity:.55}}
/* 画面には見せず、読み上げだけに使う文字 */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 条件：画面が980px 以下のときは、下の段を2列にする */
@media (max-width:980px){
    .room-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"set set" "chat go"}
    .room-setup{grid-area:set}.room-chat{grid-area:chat}.room-go{grid-area:go;min-width:0}
}
/* 条件：画面が760px 以下のときは、枠を2列・下の段を1列にする */
@media (max-width:760px){
    .room-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    .room-card{min-height:220px}.room-card .rc-pv{width:110px;height:110px}
    .room-bottom{grid-template-columns:minmax(0,1fr);grid-template-areas:"set" "go" "chat"}
}
/* 条件：動きを減らす設定なら、「待っています」の点滅を止める */
@media (prefers-reduced-motion:reduce){.room-wait{animation:none}}
/* ===== ホームの背景（ショップで買う）。html に .bgv-<key> が付くと、ホーム系の画面の背景が変わる。ショップの見本もこれを使う ===== */
/* 背景ごとの色（--bgb）と模様（--bgp） */
.bgv-pop{--bgb:linear-gradient(160deg,#ff6ec7 0%,#a46bff 52%,#4fc3ff 100%);--bgp:radial-gradient(rgba(255,255,255,.3) 22%,transparent 23%)}
.bgv-otomo{--bgb:linear-gradient(160deg,#8fd6ff 0%,#c9b8ff 55%,#ffc6e6 100%);--bgp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M8 30a6 6 0 0 1 6-6 8 8 0 0 1 15-1 5.5 5.5 0 0 1 3 10.5H12A4.5 4.5 0 0 1 8 30z' fill='%23fff' fill-opacity='.55'/%3E%3Cpath d='M48 7l1.2 3.8L53 12l-3.8 1.2L48 17l-1.2-3.8L43 12l3.8-1.2z' fill='%23fff' fill-opacity='.85'/%3E%3Ccircle cx='20' cy='52' r='1.6' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='54' cy='46' r='1.2' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E")}
/* 見本は自分の背景の大きさで描く（使っている背景の --bgts が html から伝わってこないよう、ここで戻す） */
:where(.bg-thumb){--bgts:32px 32px}
/* ショップの背景の見本 */
.bg-thumb{display:block;position:relative;background:var(--bgp,radial-gradient(rgba(255,255,255,.3) 22%,transparent 23%)) 0 0/var(--bgts,32px 32px),var(--bgb,linear-gradient(160deg,#ff6ec7 0%,#a46bff 52%,#4fc3ff 100%));box-shadow:inset 0 0 0 2px rgba(43,26,90,.15)}
.bg-thumb.bgv-yoi{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.28' viewBox='0 0 40 69.28'%3E%3Cpath d='M-40 0L0 0M-40 69.28L0 69.28M-20 -34.64L0 0M-20 -11.55L0 0M-20 11.55L0 0M-20 34.64L0 0M-20 34.64L0 23.09M-20 34.64L0 46.19M-20 34.64L0 69.28M-20 34.64L20 34.64M-20 57.74L0 69.28M-20 80.83L0 69.28M-20 103.92L0 69.28M0 -23.09L0 0M0 0L0 23.09M0 0L20 -34.64M0 0L20 -11.55M0 0L20 11.55M0 0L20 34.64M0 0L40 0M0 23.09L20 34.64M0 46.19L0 69.28M0 46.19L20 34.64M0 69.28L0 92.38M0 69.28L20 34.64M0 69.28L20 57.74M0 69.28L20 80.83M0 69.28L20 103.92M0 69.28L40 69.28M20 -34.64L40 0M20 -11.55L40 0M20 11.55L20 34.64M20 11.55L40 0M20 34.64L20 57.74M20 34.64L40 0M20 34.64L40 23.09M20 34.64L40 46.19M20 34.64L40 69.28M20 34.64L60 34.64M20 57.74L40 69.28M20 80.83L40 69.28M20 103.92L40 69.28M40 -23.09L40 0M40 0L40 23.09M40 0L60 -34.64M40 0L60 -11.55M40 0L60 11.55M40 0L60 34.64M40 0L80 0M40 23.09L60 34.64M40 46.19L40 69.28M40 46.19L60 34.64M40 69.28L40 92.38M40 69.28L60 34.64M40 69.28L60 57.74M40 69.28L60 80.83M40 69.28L60 103.92M40 69.28L80 69.28' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='.7'/%3E%3C/svg%3E") 0 0/28px 48.5px,radial-gradient(80% 60% at 50% -10%,rgba(255,226,160,.5),transparent 70%),radial-gradient(60% 60% at 100% 70%,rgba(255,110,199,.4),transparent 70%),linear-gradient(168deg,#22186e 0%,#4a2dc4 28%,#8a3fe0 54%,#d24fbf 80%,#ff8f86 100%)}
.bg-kind{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:11px;font-weight:900;color:#fff;border-radius:999px;padding:2px 8px}
.bg-kind.cute{background:#ff4fa3}.bg-kind.cool{background:#2b1a5a}
/* レジェンドの背景：おともがふわふわ浮かぶ。模様はゆっくり流す（おともがいっしょにずれないよう、背景の位置だけ動かす） */
:root.bgv-otomo .home-bg{animation:bg-drift 22s linear infinite}
@keyframes bg-drift{to{background-position:64px 64px}}
/* 背景に浮かぶおとも */
.bg-pets{position:absolute;inset:0}
.bg-pets img{position:absolute;height:auto;filter:drop-shadow(0 8px 10px rgba(43,26,90,.25));animation:pet-bob 3.8s ease-in-out infinite alternate,pet-tilt 5.2s ease-in-out infinite alternate}
.bg-thumb:has(.thumb-pet){overflow:hidden}
.bg-thumb .thumb-pet{position:absolute;top:16px;width:50px;height:auto;filter:drop-shadow(0 3px 4px rgba(43,26,90,.3));animation:pet-bob 2.4s ease-in-out infinite alternate,pet-tilt 3.2s ease-in-out infinite alternate}
.bg-thumb .thumb-pet:nth-of-type(1){right:44px;animation-delay:-1.2s,-.8s}.bg-thumb .thumb-pet:nth-of-type(2){right:4px;top:22px}
@keyframes pet-bob{from{translate:0 -14px}to{translate:0 14px}}
@keyframes pet-tilt{from{rotate:-7deg}to{rotate:7deg}}
/* 条件：動きを減らす設定なら、おともの動きを止める */
@media (prefers-reduced-motion:reduce){:root.bgv-otomo .home-bg,.bg-pets img,.bg-thumb .thumb-pet{animation:none}}
/* ===== 背景の宴モード：宴のホーム（ステージ選択も）では、買った背景もそれぞれの「宴の色」になる。--bgbe = 地の色、--bgpe = 模様 ===== */
:root[class*="bgv-"]:not(.bg-rich) .home.endless{background:var(--bgbe,linear-gradient(160deg,#3a0c40 0%,#a01e3c 45%,#ff6a2a 80%,#ffb24a 100%))}
:root[class*="bgv-"]:not(.bg-rich) .home.endless .home-bg{background-image:var(--bgpe,var(--bgp))}
/* 背景「おとも」の色 */
.bgv-otomo{--bgbe:radial-gradient(40% 30% at 78% 70%,rgba(255,214,140,.7),transparent 70%),linear-gradient(160deg,#3a0f3e 0%,#a82a44 48%,#ff8a4a 80%,#ffc46a 100%);--bgpe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M8 30a6 6 0 0 1 6-6 8 8 0 0 1 15-1 5.5 5.5 0 0 1 3 10.5H12A4.5 4.5 0 0 1 8 30z' fill='%23ffd2b0' fill-opacity='.4'/%3E%3Cpath d='M48 7l1.2 3.8L53 12l-3.8 1.2L48 17l-1.2-3.8L43 12l3.8-1.2z' fill='%23ffe08a' fill-opacity='.9'/%3E%3Ccircle cx='20' cy='52' r='1.6' fill='%23ffe08a' fill-opacity='.8'/%3E%3Ccircle cx='54' cy='46' r='1.2' fill='%23ffe08a' fill-opacity='.7'/%3E%3C/svg%3E")}
/* 宴の画面では、おともに影を付ける */
.home.endless .bg-pets img{filter:drop-shadow(0 8px 12px rgba(40,0,0,.5)) drop-shadow(0 0 10px rgba(255,120,50,.35))}
/* ネオン：夜の電脳グリッド（クール） */
.bgv-neon{--bgb:radial-gradient(70% 45% at 50% 105%,rgba(255,40,200,.5),transparent 70%),radial-gradient(45% 35% at 85% 8%,rgba(0,220,255,.32),transparent 70%),linear-gradient(180deg,#06041a 0%,#130a3a 55%,#2a0b4c 100%);--bgp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 .5H48M.5 0V48' stroke='%234fe6ff' stroke-opacity='.28' stroke-width='1'/%3E%3Ccircle cx='.5' cy='.5' r='1.6' fill='%23ff4fd8' fill-opacity='.9'/%3E%3Cpath d='M24 24h2' stroke='%234fe6ff' stroke-opacity='.18'/%3E%3C/svg%3E");--bgs:48px 48px;--bgts:24px 24px;
    --bgbe:radial-gradient(70% 45% at 50% 105%,rgba(255,90,20,.55),transparent 70%),radial-gradient(45% 35% at 85% 8%,rgba(255,40,40,.3),transparent 70%),linear-gradient(180deg,#14031e 0%,#4a0a34 50%,#a8261e 82%,#ff8a2a 100%);--bgpe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 .5H48M.5 0V48' stroke='%23ff5a2a' stroke-opacity='.28' stroke-width='1'/%3E%3Ccircle cx='.5' cy='.5' r='1.6' fill='%23ffc04a' fill-opacity='.9'/%3E%3Cpath d='M24 24h2' stroke='%23ff5a2a' stroke-opacity='.18'/%3E%3C/svg%3E")}
/* 背景ごとの動き（ネオン・さくら・宇宙） */
:root.bgv-neon .home-bg{animation:bg-neon 6s linear infinite}
@keyframes bg-neon{to{background-position:0 48px}}
/* 桜吹雪：春の空に花びら（かわいい）。宴では夜桜、血の色の花びら */
.bgv-sakura{--bgb:radial-gradient(70% 50% at 15% 0%,rgba(255,255,255,.7),transparent 70%),linear-gradient(170deg,#ffe6f1 0%,#ffbfd8 48%,#b9ccff 100%);--bgp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath transform='translate(18 22) rotate(0) scale(1.0)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ff8fbf' fill-opacity='0.85'/%3E%3Cpath transform='translate(78 14) rotate(40) scale(1.2)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ffffff' fill-opacity='0.9'/%3E%3Cpath transform='translate(52 58) rotate(-30) scale(1.4)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ffb3d1' fill-opacity='0.8'/%3E%3Cpath transform='translate(100 72) rotate(70) scale(1.1)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ff8fbf' fill-opacity='0.85'/%3E%3Cpath transform='translate(28 96) rotate(15) scale(1.3)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ffffff' fill-opacity='0.9'/%3E%3Cpath transform='translate(86 108) rotate(-55) scale(1.0)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ffb3d1' fill-opacity='0.8'/%3E%3C/svg%3E");--bgs:120px 120px;--bgts:60px 60px;
    --bgbe:radial-gradient(30% 26% at 80% 70%,rgba(255,220,150,.75),transparent 70%),linear-gradient(170deg,#3a0a32 0%,#a0283e 48%,#ff8a4a 82%,#ffc878 100%);--bgpe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath transform='translate(18 22) rotate(0) scale(1.0)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23d81e3a' fill-opacity='0.9'/%3E%3Cpath transform='translate(78 14) rotate(40) scale(1.2)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ffc2c2' fill-opacity='0.75'/%3E%3Cpath transform='translate(52 58) rotate(-30) scale(1.4)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%238a0a1c' fill-opacity='0.85'/%3E%3Cpath transform='translate(100 72) rotate(70) scale(1.1)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23d81e3a' fill-opacity='0.9'/%3E%3Cpath transform='translate(28 96) rotate(15) scale(1.3)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%23ffc2c2' fill-opacity='0.75'/%3E%3Cpath transform='translate(86 108) rotate(-55) scale(1.0)' d='M0 -7C4 -7 6 -2 4 3 3 6 1 7 0 6-1 7-3 6-4 3-6 -2-4 -7 0 -7z' fill='%238a0a1c' fill-opacity='0.85'/%3E%3C/svg%3E")}
:root.bgv-sakura .home-bg{animation:bg-sakura 18s linear infinite}
@keyframes bg-sakura{to{background-position:-120px 120px}}
/* 星の海：深い宇宙と星雲（クール）。宴では赤い星雲 */
.bgv-space{--bgb:radial-gradient(55% 45% at 18% 25%,rgba(150,80,255,.45),transparent 70%),radial-gradient(50% 40% at 85% 75%,rgba(0,200,220,.32),transparent 70%),linear-gradient(180deg,#02010a 0%,#0b0830 60%,#1a0d3e 100%);--bgp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='47.6' cy='108.8' r='1' fill='%239fe8ff' fill-opacity='0.95'/%3E%3Ccircle cx='94.8' cy='116.2' r='1.6' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='167.5' cy='51.9' r='0.8' fill='%23ffffff' fill-opacity='0.52'/%3E%3Ccircle cx='143.4' cy='108.2' r='1.6' fill='%23ffffff' fill-opacity='0.69'/%3E%3Ccircle cx='127.8' cy='30.1' r='0.8' fill='%239fe8ff' fill-opacity='0.92'/%3E%3Ccircle cx='104.6' cy='148.3' r='0.6' fill='%23ffffff' fill-opacity='0.50'/%3E%3Ccircle cx='191.5' cy='8.6' r='0.6' fill='%23ffffff' fill-opacity='0.89'/%3E%3Ccircle cx='53.9' cy='118.9' r='1.2' fill='%23ffffff' fill-opacity='0.83'/%3E%3Ccircle cx='184.2' cy='79.0' r='1.6' fill='%239fe8ff' fill-opacity='0.67'/%3E%3Ccircle cx='187.1' cy='175.8' r='0.6' fill='%23ffffff' fill-opacity='0.42'/%3E%3Ccircle cx='99.0' cy='51.6' r='1.2' fill='%23ffffff' fill-opacity='0.87'/%3E%3Ccircle cx='171.0' cy='84.2' r='1.2' fill='%23ffffff' fill-opacity='0.74'/%3E%3Ccircle cx='106.8' cy='81.5' r='0.8' fill='%239fe8ff' fill-opacity='0.94'/%3E%3Ccircle cx='136.4' cy='185.8' r='1' fill='%23ffffff' fill-opacity='0.99'/%3E%3Ccircle cx='134.3' cy='32.6' r='1' fill='%23ffffff' fill-opacity='0.98'/%3E%3Ccircle cx='180.9' cy='113.8' r='0.8' fill='%23ffffff' fill-opacity='0.78'/%3E%3Ccircle cx='197.6' cy='53.4' r='0.6' fill='%239fe8ff' fill-opacity='0.44'/%3E%3Ccircle cx='170.8' cy='198.0' r='0.6' fill='%23ffffff' fill-opacity='0.61'/%3E%3Cpath d='M150 40l1.4 5.6 5.6 1.4-5.6 1.4-1.4 5.6-1.4-5.6-5.6-1.4 5.6-1.4z' fill='%23ffffff'/%3E%3Cpath d='M40 150l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%239fe8ff' fill-opacity='.9'/%3E%3C/svg%3E");--bgs:200px 200px;--bgts:100px 100px;
    --bgbe:radial-gradient(55% 45% at 18% 25%,rgba(255,60,30,.45),transparent 70%),radial-gradient(28% 28% at 82% 22%,rgba(255,170,90,.55),transparent 70%),linear-gradient(180deg,#12021a 0%,#3a0a28 55%,#7a1a1a 85%,#b8401c 100%);--bgpe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='47.6' cy='108.8' r='1' fill='%23ff7a3a' fill-opacity='0.95'/%3E%3Ccircle cx='94.8' cy='116.2' r='1.6' fill='%23ffd9a8' fill-opacity='0.41'/%3E%3Ccircle cx='167.5' cy='51.9' r='0.8' fill='%23ffd9a8' fill-opacity='0.52'/%3E%3Ccircle cx='143.4' cy='108.2' r='1.6' fill='%23ffd9a8' fill-opacity='0.69'/%3E%3Ccircle cx='127.8' cy='30.1' r='0.8' fill='%23ff7a3a' fill-opacity='0.92'/%3E%3Ccircle cx='104.6' cy='148.3' r='0.6' fill='%23ffd9a8' fill-opacity='0.50'/%3E%3Ccircle cx='191.5' cy='8.6' r='0.6' fill='%23ffd9a8' fill-opacity='0.89'/%3E%3Ccircle cx='53.9' cy='118.9' r='1.2' fill='%23ffd9a8' fill-opacity='0.83'/%3E%3Ccircle cx='184.2' cy='79.0' r='1.6' fill='%23ff7a3a' fill-opacity='0.67'/%3E%3Ccircle cx='187.1' cy='175.8' r='0.6' fill='%23ffd9a8' fill-opacity='0.42'/%3E%3Ccircle cx='99.0' cy='51.6' r='1.2' fill='%23ffd9a8' fill-opacity='0.87'/%3E%3Ccircle cx='171.0' cy='84.2' r='1.2' fill='%23ffd9a8' fill-opacity='0.74'/%3E%3Ccircle cx='106.8' cy='81.5' r='0.8' fill='%23ff7a3a' fill-opacity='0.94'/%3E%3Ccircle cx='136.4' cy='185.8' r='1' fill='%23ffd9a8' fill-opacity='0.99'/%3E%3Ccircle cx='134.3' cy='32.6' r='1' fill='%23ffd9a8' fill-opacity='0.98'/%3E%3Ccircle cx='180.9' cy='113.8' r='0.8' fill='%23ffd9a8' fill-opacity='0.78'/%3E%3Ccircle cx='197.6' cy='53.4' r='0.6' fill='%23ff7a3a' fill-opacity='0.44'/%3E%3Ccircle cx='170.8' cy='198.0' r='0.6' fill='%23ffd9a8' fill-opacity='0.61'/%3E%3Cpath d='M150 40l1.4 5.6 5.6 1.4-5.6 1.4-1.4 5.6-1.4-5.6-5.6-1.4 5.6-1.4z' fill='%23ffd9a8'/%3E%3Cpath d='M40 150l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%23ff7a3a' fill-opacity='.9'/%3E%3C/svg%3E")}
:root.bgv-space .home-bg{animation:bg-space 90s linear infinite}
@keyframes bg-space{to{background-position:-200px 0}}
/* 条件：動きを減らす設定なら、背景の動きを止める */
@media (prefers-reduced-motion:reduce){:root.bgv-neon .home-bg,:root.bgv-sakura .home-bg,:root.bgv-space .home-bg{animation:none}}
/* いつもの背景「ゆうやけ雲」：模様なし。夕焼けの空にやわらかい雲が二重にゆっくり流れ、上のほうに小さな星（だれでもなじむ、いちばんシンプルな背景）。
   宴では燃える夕焼けの空に、紫のシルエットの雲。雲は .home-bg の ::before（遠く）・::after（手前）、色は --yz-far / --yz-near で切り替える */
.bgv-yuzora{--bgb:radial-gradient(38% 30% at 72% 34%,rgba(255,244,214,.85),transparent 70%),linear-gradient(180deg,#4f6fe8 0%,#8f86f2 32%,#e99ad0 62%,#ffc49c 100%);--bgp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='109' cy='134' r='1' fill='%23ffffff' fill-opacity='0.55'/%3E%3Ccircle cx='205' cy='46' r='1.3' fill='%23ffffff' fill-opacity='0.56'/%3E%3Ccircle cx='147' cy='45' r='1' fill='%23ffffff' fill-opacity='0.49'/%3E%3Ccircle cx='22' cy='194' r='1.3' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='143' cy='95' r='1' fill='%23ffffff' fill-opacity='0.64'/%3E%3Ccircle cx='148' cy='38' r='0.8' fill='%23ffffff' fill-opacity='0.72'/%3E%3Ccircle cx='15' cy='9' r='0.8' fill='%23ffffff' fill-opacity='0.62'/%3E%3Ccircle cx='187' cy='78' r='1.3' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='125' cy='154' r='1' fill='%23ffffff' fill-opacity='0.35'/%3E%3Ccircle cx='20' cy='157' r='1' fill='%23ffffff' fill-opacity='0.80'/%3E%3C/svg%3E");--bgs:240px 240px;--bgts:120px 120px;
    --bgbe:radial-gradient(34% 28% at 72% 58%,rgba(255,226,150,.9),transparent 70%),linear-gradient(180deg,#2a0a3e 0%,#7a1a4a 30%,#d8402e 62%,#ff9a3c 84%,#ffd17a 100%);--bgpe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='109' cy='134' r='1' fill='%23ffe2b0' fill-opacity='0.55'/%3E%3Ccircle cx='205' cy='46' r='1.3' fill='%23ffe2b0' fill-opacity='0.56'/%3E%3Ccircle cx='147' cy='45' r='1' fill='%23ffe2b0' fill-opacity='0.49'/%3E%3Ccircle cx='22' cy='194' r='1.3' fill='%23ffe2b0' fill-opacity='0.64'/%3E%3Ccircle cx='143' cy='95' r='1' fill='%23ffe2b0' fill-opacity='0.64'/%3E%3Ccircle cx='148' cy='38' r='0.8' fill='%23ffe2b0' fill-opacity='0.72'/%3E%3Ccircle cx='15' cy='9' r='0.8' fill='%23ffe2b0' fill-opacity='0.62'/%3E%3Ccircle cx='187' cy='78' r='1.3' fill='%23ffe2b0' fill-opacity='0.73'/%3E%3Ccircle cx='125' cy='154' r='1' fill='%23ffe2b0' fill-opacity='0.35'/%3E%3Ccircle cx='20' cy='157' r='1' fill='%23ffe2b0' fill-opacity='0.80'/%3E%3C/svg%3E");
    --yz-far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='240' viewBox='0 0 900 240'%3E%3Cg fill='%23ffe2ef' fill-opacity='0.55'%3E%3Ccircle cx='-900' cy='125' r='47'/%3E%3Ccircle cx='0' cy='125' r='47'/%3E%3Ccircle cx='900' cy='125' r='47'/%3E%3Ccircle cx='-840' cy='129' r='53'/%3E%3Ccircle cx='60' cy='129' r='53'/%3E%3Ccircle cx='960' cy='129' r='53'/%3E%3Ccircle cx='-781' cy='113' r='73'/%3E%3Ccircle cx='119' cy='113' r='73'/%3E%3Ccircle cx='1019' cy='113' r='73'/%3E%3Ccircle cx='-712' cy='128' r='41'/%3E%3Ccircle cx='188' cy='128' r='41'/%3E%3Ccircle cx='1088' cy='128' r='41'/%3E%3Ccircle cx='-666' cy='134' r='78'/%3E%3Ccircle cx='234' cy='134' r='78'/%3E%3Ccircle cx='1134' cy='134' r='78'/%3E%3Ccircle cx='-578' cy='128' r='76'/%3E%3Ccircle cx='322' cy='128' r='76'/%3E%3Ccircle cx='1222' cy='128' r='76'/%3E%3Ccircle cx='-474' cy='132' r='85'/%3E%3Ccircle cx='426' cy='132' r='85'/%3E%3Ccircle cx='1326' cy='132' r='85'/%3E%3Ccircle cx='-396' cy='111' r='67'/%3E%3Ccircle cx='504' cy='111' r='67'/%3E%3Ccircle cx='1404' cy='111' r='67'/%3E%3Ccircle cx='-323' cy='131' r='51'/%3E%3Ccircle cx='577' cy='131' r='51'/%3E%3Ccircle cx='1477' cy='131' r='51'/%3E%3Ccircle cx='-276' cy='131' r='51'/%3E%3Ccircle cx='624' cy='131' r='51'/%3E%3Ccircle cx='1524' cy='131' r='51'/%3E%3Ccircle cx='-218' cy='135' r='52'/%3E%3Ccircle cx='682' cy='135' r='52'/%3E%3Ccircle cx='1582' cy='135' r='52'/%3E%3Ccircle cx='-166' cy='130' r='63'/%3E%3Ccircle cx='734' cy='130' r='63'/%3E%3Ccircle cx='1634' cy='130' r='63'/%3E%3Ccircle cx='-108' cy='115' r='82'/%3E%3Ccircle cx='792' cy='115' r='82'/%3E%3Ccircle cx='1692' cy='115' r='82'/%3E%3Ccircle cx='-8' cy='121' r='49'/%3E%3Ccircle cx='892' cy='121' r='49'/%3E%3Ccircle cx='1792' cy='121' r='49'/%3E%3Crect x='0' y='150' width='900' height='90'/%3E%3C/g%3E%3C/svg%3E");--yz-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='260' viewBox='0 0 1100 260'%3E%3Cg fill='%23e9c6e6' fill-opacity='0.9'%3E%3Ccircle cx='-1100' cy='108' r='108'/%3E%3Ccircle cx='0' cy='108' r='108'/%3E%3Ccircle cx='1100' cy='108' r='108'/%3E%3Ccircle cx='-1000' cy='138' r='60'/%3E%3Ccircle cx='100' cy='138' r='60'/%3E%3Ccircle cx='1200' cy='138' r='60'/%3E%3Ccircle cx='-924' cy='140' r='92'/%3E%3Ccircle cx='176' cy='140' r='92'/%3E%3Ccircle cx='1276' cy='140' r='92'/%3E%3Ccircle cx='-814' cy='132' r='88'/%3E%3Ccircle cx='286' cy='132' r='88'/%3E%3Ccircle cx='1386' cy='132' r='88'/%3E%3Ccircle cx='-727' cy='142' r='79'/%3E%3Ccircle cx='373' cy='142' r='79'/%3E%3Ccircle cx='1473' cy='142' r='79'/%3E%3Ccircle cx='-628' cy='106' r='110'/%3E%3Ccircle cx='472' cy='106' r='110'/%3E%3Ccircle cx='1572' cy='106' r='110'/%3E%3Ccircle cx='-500' cy='146' r='79'/%3E%3Ccircle cx='600' cy='146' r='79'/%3E%3Ccircle cx='1700' cy='146' r='79'/%3E%3Ccircle cx='-427' cy='148' r='57'/%3E%3Ccircle cx='673' cy='148' r='57'/%3E%3Ccircle cx='1773' cy='148' r='57'/%3E%3Ccircle cx='-367' cy='128' r='76'/%3E%3Ccircle cx='733' cy='128' r='76'/%3E%3Ccircle cx='1833' cy='128' r='76'/%3E%3Ccircle cx='-279' cy='145' r='86'/%3E%3Ccircle cx='821' cy='145' r='86'/%3E%3Ccircle cx='1921' cy='145' r='86'/%3E%3Ccircle cx='-200' cy='151' r='73'/%3E%3Ccircle cx='900' cy='151' r='73'/%3E%3Ccircle cx='2000' cy='151' r='73'/%3E%3Ccircle cx='-116' cy='118' r='110'/%3E%3Ccircle cx='984' cy='118' r='110'/%3E%3Ccircle cx='2084' cy='118' r='110'/%3E%3Ccircle cx='-7' cy='116' r='104'/%3E%3Ccircle cx='1093' cy='116' r='104'/%3E%3Ccircle cx='2193' cy='116' r='104'/%3E%3Crect x='0' y='170' width='1100' height='90'/%3E%3C/g%3E%3C/svg%3E")}
/* 背景「夕空」の宴の画面 */
:root.bgv-yuzora .home.endless{--yz-far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='240' viewBox='0 0 900 240'%3E%3Cg fill='%238a2a4a' fill-opacity='0.72'%3E%3Ccircle cx='-900' cy='125' r='47'/%3E%3Ccircle cx='0' cy='125' r='47'/%3E%3Ccircle cx='900' cy='125' r='47'/%3E%3Ccircle cx='-840' cy='129' r='53'/%3E%3Ccircle cx='60' cy='129' r='53'/%3E%3Ccircle cx='960' cy='129' r='53'/%3E%3Ccircle cx='-781' cy='113' r='73'/%3E%3Ccircle cx='119' cy='113' r='73'/%3E%3Ccircle cx='1019' cy='113' r='73'/%3E%3Ccircle cx='-712' cy='128' r='41'/%3E%3Ccircle cx='188' cy='128' r='41'/%3E%3Ccircle cx='1088' cy='128' r='41'/%3E%3Ccircle cx='-666' cy='134' r='78'/%3E%3Ccircle cx='234' cy='134' r='78'/%3E%3Ccircle cx='1134' cy='134' r='78'/%3E%3Ccircle cx='-578' cy='128' r='76'/%3E%3Ccircle cx='322' cy='128' r='76'/%3E%3Ccircle cx='1222' cy='128' r='76'/%3E%3Ccircle cx='-474' cy='132' r='85'/%3E%3Ccircle cx='426' cy='132' r='85'/%3E%3Ccircle cx='1326' cy='132' r='85'/%3E%3Ccircle cx='-396' cy='111' r='67'/%3E%3Ccircle cx='504' cy='111' r='67'/%3E%3Ccircle cx='1404' cy='111' r='67'/%3E%3Ccircle cx='-323' cy='131' r='51'/%3E%3Ccircle cx='577' cy='131' r='51'/%3E%3Ccircle cx='1477' cy='131' r='51'/%3E%3Ccircle cx='-276' cy='131' r='51'/%3E%3Ccircle cx='624' cy='131' r='51'/%3E%3Ccircle cx='1524' cy='131' r='51'/%3E%3Ccircle cx='-218' cy='135' r='52'/%3E%3Ccircle cx='682' cy='135' r='52'/%3E%3Ccircle cx='1582' cy='135' r='52'/%3E%3Ccircle cx='-166' cy='130' r='63'/%3E%3Ccircle cx='734' cy='130' r='63'/%3E%3Ccircle cx='1634' cy='130' r='63'/%3E%3Ccircle cx='-108' cy='115' r='82'/%3E%3Ccircle cx='792' cy='115' r='82'/%3E%3Ccircle cx='1692' cy='115' r='82'/%3E%3Ccircle cx='-8' cy='121' r='49'/%3E%3Ccircle cx='892' cy='121' r='49'/%3E%3Ccircle cx='1792' cy='121' r='49'/%3E%3Crect x='0' y='150' width='900' height='90'/%3E%3C/g%3E%3C/svg%3E");--yz-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='260' viewBox='0 0 1100 260'%3E%3Cg fill='%233e0c2e' fill-opacity='0.94'%3E%3Ccircle cx='-1100' cy='108' r='108'/%3E%3Ccircle cx='0' cy='108' r='108'/%3E%3Ccircle cx='1100' cy='108' r='108'/%3E%3Ccircle cx='-1000' cy='138' r='60'/%3E%3Ccircle cx='100' cy='138' r='60'/%3E%3Ccircle cx='1200' cy='138' r='60'/%3E%3Ccircle cx='-924' cy='140' r='92'/%3E%3Ccircle cx='176' cy='140' r='92'/%3E%3Ccircle cx='1276' cy='140' r='92'/%3E%3Ccircle cx='-814' cy='132' r='88'/%3E%3Ccircle cx='286' cy='132' r='88'/%3E%3Ccircle cx='1386' cy='132' r='88'/%3E%3Ccircle cx='-727' cy='142' r='79'/%3E%3Ccircle cx='373' cy='142' r='79'/%3E%3Ccircle cx='1473' cy='142' r='79'/%3E%3Ccircle cx='-628' cy='106' r='110'/%3E%3Ccircle cx='472' cy='106' r='110'/%3E%3Ccircle cx='1572' cy='106' r='110'/%3E%3Ccircle cx='-500' cy='146' r='79'/%3E%3Ccircle cx='600' cy='146' r='79'/%3E%3Ccircle cx='1700' cy='146' r='79'/%3E%3Ccircle cx='-427' cy='148' r='57'/%3E%3Ccircle cx='673' cy='148' r='57'/%3E%3Ccircle cx='1773' cy='148' r='57'/%3E%3Ccircle cx='-367' cy='128' r='76'/%3E%3Ccircle cx='733' cy='128' r='76'/%3E%3Ccircle cx='1833' cy='128' r='76'/%3E%3Ccircle cx='-279' cy='145' r='86'/%3E%3Ccircle cx='821' cy='145' r='86'/%3E%3Ccircle cx='1921' cy='145' r='86'/%3E%3Ccircle cx='-200' cy='151' r='73'/%3E%3Ccircle cx='900' cy='151' r='73'/%3E%3Ccircle cx='2000' cy='151' r='73'/%3E%3Ccircle cx='-116' cy='118' r='110'/%3E%3Ccircle cx='984' cy='118' r='110'/%3E%3Ccircle cx='2084' cy='118' r='110'/%3E%3Ccircle cx='-7' cy='116' r='104'/%3E%3Ccircle cx='1093' cy='116' r='104'/%3E%3Ccircle cx='2193' cy='116' r='104'/%3E%3Crect x='0' y='170' width='1100' height='90'/%3E%3C/g%3E%3C/svg%3E")}
:root.bgv-yuzora .home-bg::before,:root.bgv-yuzora .home-bg::after{content:"";position:absolute;left:0;right:0;pointer-events:none;background-repeat:repeat-x}
:root.bgv-yuzora .home-bg::before{bottom:120px;height:240px;background-image:var(--yz-far);background-size:900px 240px;animation:yz-far 160s linear infinite}
:root.bgv-yuzora .home-bg::after{bottom:0;height:260px;background-image:var(--yz-near);background-size:1100px 260px;animation:yz-near 90s linear infinite}
@keyframes yz-far{to{background-position:-900px 0}}
@keyframes yz-near{to{background-position:1100px 0}}
/* 背景「夕空」の見本 */
.bg-thumb.bgv-yuzora{background:var(--yz-near) 0 100%/330px 78px repeat-x,var(--yz-far) 0 70%/270px 72px repeat-x,var(--bgb)}
/* 条件：動きを減らす設定なら、夕空の動きを止める */
@media (prefers-reduced-motion:reduce){:root.bgv-yuzora .home-bg::before,:root.bgv-yuzora .home-bg::after{animation:none}}
/* ショップのタブ（欄ごとに切り替え） */
.shop-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 6px}
.shop-tab{flex:none;display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:900;font-size:14px;color:var(--h-ink);background:var(--h-cream);
    border:2px solid var(--h-line);border-radius:999px;padding:6px 14px;cursor:pointer;transition:transform .12s}
.shop-tab:hover{transform:translateY(-1px)}
.shop-tab:focus-visible{outline:3px solid var(--h-cyan);outline-offset:2px}
.shop-tab.on{background:var(--h-ink);border-color:var(--h-ink);color:var(--h-white)}
.shop-tab small{font-size:11px;font-weight:900;min-width:18px;padding:0 5px;border-radius:999px;background:var(--h-pink);color:#fff;text-align:center;line-height:18px}
.shop-list.tabbed .shop-group{grid-template-columns:minmax(0,1fr)}
.shop-list.tabbed .shop-group .pick-h{padding-top:0;font-size:13px;color:var(--h-ink2)}
.shop-group[hidden]{display:none}
/* ===== リザルト（倒れたとき・クリアのとき）：タイルで記録を並べ、ランクのはんこを押す ===== */
.pop-res{width:min(600px,100%);position:relative}
/* 結果画面のカード */
.over-card{border:2px solid #ff4fa3;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:clear-pop .6s cubic-bezier(.2,1.6,.4,1) both}
.over-title{text-align:center;font-family:var(--f-pop);color:#ff7ad1;text-shadow:var(--ol3);animation:over-wob 2.4s ease-in-out infinite}
.over-title small{font-family:var(--f-pop);font-size:15px;letter-spacing:.2em;color:#fff;text-shadow:var(--ol2)}
@keyframes over-wob{50%{transform:rotate(-2deg) scale(1.04)}}
/* 結果の数字の並び */
.pop-res .result{gap:10px}
/* タイル：暗い地に、上のふちだけ色を差す（色を使いすぎると読みにくいので、数字と細い線だけに色を付ける） */
.pop-res .result>div,.rstats .rs{--c:#d9b84a;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--c);border-radius:10px;padding:8px 12px;min-width:0;
    animation:tile-in .45s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.25s + var(--i,0)*.06s)}
.pop-res .result>div:nth-child(1){--i:0}.pop-res .result>div:nth-child(2){--i:1}.pop-res .result>div:nth-child(3){--i:2}.pop-res .result>div:nth-child(4){--i:3}
.pop-res .result .lbl,.rstats .lbl{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.04em;color:#cfc8e6;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-res .result b,.rstats b{font-family:var(--f-pop);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 #000;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* 今回の成績の1項目 */
.rstats .rs{display:flex;flex-direction:column;gap:2px}
.rstats b{font-size:24px;white-space:nowrap}
.rstats b small{font-family:var(--f-ui);font-weight:700;font-size:13px;margin-left:3px;color:#cfc8e6}
/* 最長の言葉 */
.pop-res .clear-long b{font-family:"Zen Antique",var(--f-display);font-size:30px;color:#fff3c4}
.clear-card.pop-res .result .wide{--c:#d9b84a;background:rgba(255,210,58,.1);border:1px solid rgba(255,210,58,.4);border-top:3px solid var(--c)}
.pop-res .clear-long small{font-weight:700;font-size:13px;color:#cfc8e6;text-shadow:none}
@keyframes tile-in{0%{transform:translateY(16px) scale(.7);opacity:0}}
/* 今回の成績の見出しと、その並び（4列） */
.rs-head{margin:4px 0 -6px;text-align:center;font-family:var(--f-pop);font-weight:400;font-size:17px;letter-spacing:.12em;color:#fff;text-shadow:0 2px 0 #000}
.rstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* ランクのはんこ：カードの右上に、少し遅れてドンと押される */
.rank-stamp{--c:#ff4fa3;position:absolute;top:-24px;right:-16px;z-index:2;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;padding-top:10px;box-sizing:border-box;
    font-family:var(--f-pop);font-size:46px;line-height:1;color:#fff;background:var(--c);border:4px solid #000;box-shadow:0 5px 0 #000;text-shadow:var(--ol3);
    transform:rotate(12deg);animation:stamp .55s cubic-bezier(.2,1.6,.4,1) 1.2s both}
.rank-stamp[hidden]{display:none}
.rank-stamp::before{content:"RANK";position:absolute;top:9px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.12em;text-shadow:var(--ol2)}
.rank-stamp.rS{--c:#ffd23a}.rank-stamp.rA{--c:#ff4fa3}.rank-stamp.rB{--c:#4fd8ff}.rank-stamp.rC{--c:#3fcf6a}.rank-stamp.rD{--c:#a98bff}.rank-stamp.rE{--c:#8a8499}
@keyframes stamp{0%{transform:scale(3) rotate(-20deg);opacity:0}100%{transform:rotate(12deg);opacity:1}}
/* 条件：画面がせまいときは、成績を2列にする */
@media (max-width:520px){.rstats{grid-template-columns:repeat(2,minmax(0,1fr))}.rank-stamp{width:68px;height:68px;font-size:34px;top:-18px;right:-6px}.rank-stamp::before{top:6px;font-size:9px}}
/* 条件：動きを減らす設定なら、結果画面の動きを止める */
@media (prefers-reduced-motion:reduce){.over-card,.over-title,.pop-res .result>div,.rstats .rs,.rank-stamp{animation:none}}
/* マルチのリザルト：仲間とくらべる表。自分の行は薄い金色、項目ごとのいちばんは金色の★ */
.rcmp-wrap{display:flex;flex-direction:column;gap:10px}
.rcmp-wrap[hidden]{display:none}
.rcmp-scroll{overflow-x:auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:10px;animation:tile-in .45s cubic-bezier(.2,1.5,.4,1) .9s both}
.rcmp{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rcmp th{padding:7px 6px 5px;font-size:12px;font-weight:700;color:#cfc8e6;text-align:right;white-space:nowrap}
.rcmp th:nth-child(-n+2){text-align:left}
.rcmp td{padding:7px 6px;border-top:1px solid rgba(255,255,255,.1);text-align:right;white-space:nowrap;font-family:var(--f-pop);font-size:15px;color:#fff}
.rcmp td small{margin-left:2px;font-family:var(--f-ui);font-weight:700;font-size:10px;color:#cfc8e6}
.rcmp td.pos{text-align:left;font-size:13px;color:#cfc8e6;padding-left:10px}
.rcmp tr:first-child td.pos{color:#ffd23a}
.rcmp td.nm{text-align:left;font-family:var(--f-ui);font-weight:900;font-size:14px}
.rcmp .dot{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.rcmp .rk{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-family:var(--f-pop);font-size:11px;line-height:1.3;color:#140c26;background:#cfc8e6;vertical-align:1px}
.rcmp .rk.rS,.ht-rank .rk.rS{background:#ffd23a}.rcmp .rk.rA,.ht-rank .rk.rA{background:#ff8ad8}.rcmp .rk.rB,.ht-rank .rk.rB{background:#6fd8ff}.rcmp .rk.rC,.ht-rank .rk.rC{background:#7de3a0}.rcmp .rk.rD,.ht-rank .rk.rD{background:#b9a2ff}.rcmp .rk.rE,.ht-rank .rk.rE{background:#a9a3b8}
.rcmp tr.me td{background:rgba(255,210,58,.09)}
.rcmp td.best{color:#ffd23a}
.rcmp td.best::before{content:"★";margin-right:2px;font-size:10px;vertical-align:2px}
/* 条件：動きを減らす設定なら、比べっこの表の動きを止める */
@media (prefers-reduced-motion:reduce){.rcmp-scroll{animation:none}}
/* あそびかた：リザルトのランクの表 */
.ht-rank{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ht-rank-scroll{overflow-x:auto;background:#fff;border:2px solid var(--h-line);border-radius:12px}
.ht-rank-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--h-ink)}
.ht-rank-table th{padding:7px 10px;font-size:12px;font-weight:900;color:var(--h-ink2);text-align:left;white-space:nowrap;background:var(--h-cream)}
.ht-rank-table td{padding:6px 10px;border-top:1px solid var(--h-line);white-space:nowrap}
.ht-rank .rk{display:inline-block;min-width:1.6em;text-align:center;padding:1px 6px;border-radius:6px;font-family:var(--f-pop);font-size:14px;line-height:1.3;color:#140c26;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
/* エンドロール：あなたの通算記録（項目名と数字の2列） */
.cr-rec-list{margin:0;display:flex;flex-direction:column;gap:8px;width:min(560px,92vw)}
.cr-rec-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 4px;border-bottom:1px dashed rgba(203,191,255,.3);text-align:left}
.cr-rec-row dt{font-size:clamp(14px,2.2vw,17px);font-weight:800;color:#cbbfff}
.cr-rec-row dd{margin:0;font-size:clamp(17px,2.8vw,22px);font-weight:900;text-align:right;overflow-wrap:anywhere;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.cr-rec-none{margin:0;font-size:18px;font-weight:800;color:#cbbfff}
/* 通算記録の見せ場：金の見出し・大きな数字・余韻の一行 */
.cr-rec{position:relative;gap:18px}
.cr-rec-h{color:#ffe27a;font-size:clamp(22px,3.6vw,32px);letter-spacing:.3em;text-shadow:0 0 16px rgba(255,200,90,.7)}
.cr-hero{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:18px 34px;margin:4px 0 6px}
.cr-hero-item{display:flex;flex-direction:column;align-items:center;min-width:120px}
.cr-hero-n{font-family:"Dela Gothic One","M PLUS Rounded 1c",sans-serif;font-weight:400;font-size:clamp(40px,8vw,64px);line-height:1.1;background:linear-gradient(100deg,#ffd23f 0%,#ffe27a 35%,#ffffff 48%,#ffe27a 60%,#ffb347 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(255,200,80,.6));animation:crShine 3.5s ease-in-out infinite}
.cr-hero-item span{font-size:14px;font-weight:800;letter-spacing:.2em;color:#cbbfff;margin-top:4px}
.cr-rec-end{gap:12px;margin-top:14px}
.cr-sad{margin:0;font-size:clamp(16px,2.6vw,20px);font-weight:700;letter-spacing:.14em;color:#b9b0d9;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.cr-sad-b{font-size:clamp(20px,3.4vw,26px);color:#8fa0c8}
.cr-sad.in{animation:crSadIn 2.8s ease both}
@keyframes crSadIn{0%{opacity:0;filter:blur(6px);transform:translateY(12px)}100%{opacity:.9;filter:blur(0);transform:none}}
/* 通算記録のど派手な登場 */
.cr-rec-h{font-size:clamp(26px,5vw,44px);animation:crRecPop 1s cubic-bezier(.2,1.6,.4,1) both}
.cr-rec.in .cr-rec-h{animation:crRecPop 1s cubic-bezier(.2,1.6,.4,1) both,crShine 2.6s ease-in-out 1s infinite}
.cr-hero-n{font-size:clamp(52px,11vw,88px)}
.cr-hero-n.cr-hero-pop{animation:crHeroPop .9s cubic-bezier(.2,1.8,.4,1) both,crShine 3.5s ease-in-out infinite}
@keyframes crRecPop{0%{opacity:0;transform:scale(.3) rotate(-6deg)}70%{opacity:1;transform:scale(1.12) rotate(1deg)}100%{transform:none}}
@keyframes crHeroPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
/* 通算記録の値 */
.cr-rec-row dd{color:#fff}

/* 宴モード（しりとり・タイピング共通）：ロビーの赤い宴と同じ背景で入る */
#stageSel.endless{background:linear-gradient(160deg,#4a0906 0%,#a8180c 52%,#ff6a28 100%)}
#stageSel.endless .shop-title{color:#f6e6d2}
/* 宴モードの「いどむ」：おともの枠と同じ幅・同じくらいの高さ。炎のグラデーションに光の筋が走る */
.endless-go{grid-column:1/-1;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;box-sizing:border-box;min-height:210px;padding:26px 18px;
    border:4px solid #ffd27a;border-radius:26px;cursor:pointer;font:inherit;color:#fff;
    background:radial-gradient(ellipse at 50% 120%,#ffcf4a 0%,#ff6a1f 30%,#c4160c 62%,#4a0906 100%);
    box-shadow:0 8px 0 #4a0906,0 0 0 4px rgba(255,138,31,.35),0 14px 36px rgba(255,90,20,.55);transition:transform .15s}
.endless-go::before{content:"";position:absolute;top:-60%;left:-40%;width:30%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,240,200,.55),transparent);transform:rotate(18deg);animation:egShine 2.6s ease-in-out infinite}
.endless-go::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:radial-gradient(ellipse at 50% 100%,rgba(255,214,90,.55),transparent 70%);animation:egFlame 1.2s ease-in-out infinite alternate;pointer-events:none}
.endless-go>*{position:relative;z-index:1}
.endless-go:hover{transform:translateY(-4px) scale(1.01)}
.endless-go:active{transform:translateY(4px);box-shadow:0 3px 0 #4a0906,0 0 0 4px rgba(255,138,31,.35)}
.endless-go:focus-visible{outline:4px solid #fff3c4;outline-offset:5px}
.endless-go .eg-big{font-family:var(--f-pop);font-size:clamp(46px,7vw,76px);line-height:1;letter-spacing:.12em;color:#fff6dc;text-shadow:0 0 18px rgba(255,200,80,.9),0 4px 0 #6e0804,3px 0 0 #6e0804,-3px 0 0 #6e0804,0 -3px 0 #6e0804}
.endless-go .eg-sub{font-weight:900;font-size:clamp(15px,1.8vw,18px);letter-spacing:.04em;color:#fff6dc;background:rgba(42,6,6,.55);border-radius:999px;padding:6px 18px;text-shadow:0 2px 0 rgba(42,6,6,.8)}
@keyframes egShine{0%,40%{left:-40%}100%{left:130%}}
@keyframes egFlame{from{opacity:.55;transform:scaleY(.9)}to{opacity:1;transform:scaleY(1.08)}}
/* 条件：動きを減らす設定なら、宴の「いどむ」ボタンの光を止める */
@media (prefers-reduced-motion:reduce){.endless-go::before,.endless-go::after{animation:none}}
/* 難易度ごとのステージの最高スコア */
.stage-best{font-size:12px;font-weight:900;color:#fff;background:rgba(13,11,31,.35);border-radius:999px;padding:2px 10px;align-self:flex-start}
/* 通算成績の画面 */
.stats-page{background:radial-gradient(ellipse at 50% 120%,#3a2a6e 0%,#140f2e 45%,#05040f 100%);z-index:45;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow:hidden;color:#fff;padding:0}
.stats-head{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px 8px}
.stats-title{margin:0;font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(28px,4.4vw,40px);letter-spacing:.12em;color:#ffe14d;text-shadow:0 3px 0 #6b3a00,0 0 18px rgba(255,225,77,.45)}
.stats-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.stats-tab{font:inherit;font-weight:900;font-size:14px;color:#fff;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 16px;cursor:pointer}
.stats-tab.on{background:linear-gradient(135deg,#ffe14d,#ff9a3c);color:#2a1a00;border-color:#fff;box-shadow:0 3px 0 #a84a00}
.stats-tab:focus-visible{outline:3px solid #4fd8ff;outline-offset:2px}
.stats-body{flex:1;overflow:auto;padding:12px 16px 16px;min-height:0}
.stats-body .cr-sec{max-width:760px;margin:0 auto}
.stats-foot{display:flex;justify-content:center;padding:12px}
.stats-btn{margin-left:8px}

/* 宴のはじまりのロゴ：ふだんは白ロゴを白い札に、宴モードはダークロゴを赤黒の札にのせる */
.home .credit-logo{opacity:1;background:#fff;border-radius:10px;padding:5px 12px;box-shadow:0 3px 0 rgba(43,26,90,.35)}
.home.endless .credit-logo{background:#2a0606;box-shadow:0 3px 0 rgba(30,0,0,.4)}
.home.endless #logoText{color:#fff6dc;font-weight:900;text-shadow:0 2px 0 rgba(30,0,0,.7)}
/* 設定：音量のつまみ */
.settings-vol{display:grid;grid-template-columns:5em 1fr 2.5em;align-items:center;gap:10px;padding:8px 14px;border:2px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.05)}
.settings-vol span{font-weight:900;color:var(--paper)}
.settings-vol input{width:100%;accent-color:var(--gold)}
.settings-vol b{text-align:right;color:var(--gold);font-variant-numeric:tabular-nums}

/* ===== 十字キーで動けることの小さな案内（ホーム・ステージ選択・ロビー・ゲーム開始時）=====
   キーボードのない端末（スマホ・タブレット）とタイピングモードでは出さない */
.xkeys{display:inline-grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(2,15px);gap:2px;flex:none;vertical-align:middle}
.xkeys i{font-style:normal;display:grid;place-items:center;font-size:9px;font-weight:900;line-height:1;color:var(--h-ink,#2b1a5a);background:#fff;border:1px solid rgba(43,26,90,.35);border-bottom-width:2px;border-radius:4px;text-shadow:none}
.xkeys .u{grid-column:2;grid-row:1}.xkeys .l{grid-column:1;grid-row:2}.xkeys .d{grid-column:2;grid-row:2}.xkeys .r{grid-column:3;grid-row:2}
/* 矢印キーで動けることの案内 */
.arrow-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;font-size:13px;font-weight:800;color:var(--h-ink2);opacity:.85}
.arrow-hint.on-dark{color:var(--h-white);text-shadow:0 1px 2px rgba(43,26,90,.6);opacity:1}
.arrow-hint kbd{font-family:inherit;font-size:11px;font-weight:900;color:var(--h-ink);background:#fff;border:1px solid rgba(43,26,90,.35);border-bottom-width:2px;border-radius:4px;padding:0 4px;text-shadow:none}
.arrow-hint[hidden],.typing-sel .arrow-hint{display:none}
/* 条件：指で触る端末（マウスが無い）なら、矢印キーの案内を隠す */
@media (hover:none) and (pointer:coarse){.arrow-hint,#moveHint{display:none!important}}

/* ===== 最後のボスを倒したときの、エンディングへの入り（credits.js の playFinale） ===== */
.fc{position:fixed;inset:0;z-index:39;overflow:hidden;cursor:pointer;font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;user-select:none}
.fc[hidden]{display:none}
.fc>i{position:absolute;display:block;pointer-events:none}
.fc-dim{inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(255,214,130,.18) 0%,rgba(30,18,70,.78) 45%,rgba(4,3,14,.97) 100%);opacity:0}
.fc.go .fc-dim{animation:fcFade 1.6s ease-out forwards}
.fc-rays{left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;opacity:0;
    background:repeating-conic-gradient(from 0deg,rgba(255,226,150,.16) 0deg 5deg,transparent 5deg 15deg);
    -webkit-mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 18%,transparent 48%);mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 18%,transparent 48%)}
.fc.go .fc-rays{animation:fcFade 2s .6s ease-out forwards,fcSpin 40s linear infinite}
.fc-bar{left:0;right:0;height:13vh;background:#000;transform:scaleY(0)}
.fc-bar.top{top:0;transform-origin:top}.fc-bar.bot{bottom:0;transform-origin:bottom}
.fc.go .fc-bar{animation:fcBar .9s cubic-bezier(.2,.8,.2,1) forwards}
.fc-words{position:absolute;inset:0;pointer-events:none}
.fc-words span{position:absolute;bottom:-40px;transform:translateX(-50%);white-space:nowrap;font-weight:800;color:#fff3c9;opacity:0;
    text-shadow:0 0 10px rgba(255,200,90,.95),0 0 26px rgba(255,150,60,.6)}
.fc.go .fc-words span{animation:fcRise 6.5s ease-out forwards}
.fc-sparks{position:absolute;inset:0;pointer-events:none}
.fc-sparks i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 8px 2px rgba(255,230,160,.9)}
.fc.go .fc-sparks i{animation-name:fcTwinkle;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.fc-lines{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh;padding:0 16px;text-align:center;pointer-events:none}
.fc-line{margin:0;font-weight:800;letter-spacing:.12em;color:#fff7e6;text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 18px rgba(255,210,120,.45)}
.fc-line span{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px)}
.fc.go .fc-line span{animation:fcChar .9s ease-out forwards}
.fc-line.l1{font-size:clamp(18px,3.4vw,30px)}
.fc-line.l2{font-size:clamp(16px,2.8vw,24px);color:#ffe7ad}
.fc-line.l3{margin-top:1.4vh;font-size:clamp(28px,6.4vw,58px);font-weight:900;letter-spacing:.16em;text-shadow:none;filter:drop-shadow(0 0 14px rgba(255,190,80,.8)) drop-shadow(0 3px 0 rgba(90,40,0,.5))}
.fc-line.l3 span{background:linear-gradient(180deg,#fffbe8 0%,#ffd76a 55%,#ff9f43 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fc.go .fc-line.l3 span{animation:fcCharBig 1.1s cubic-bezier(.2,1.4,.4,1) forwards}
.fc-tap{position:absolute;right:18px;bottom:calc(13vh + 10px);margin:0;font-size:12px;font-weight:700;color:rgba(255,255,255,.55);opacity:0;pointer-events:none}
.fc.go .fc-tap{animation:fcFade 1s 2s forwards}
.fc-flash{inset:0;background:radial-gradient(circle at 50% 50%,#fff 0%,#fff6dc 40%,#ffe2a0 100%);opacity:0}
.fc.go .fc-flash{animation:fcFlash 1.1s 6.9s ease-in forwards}
@keyframes fcFade{to{opacity:1}}
@keyframes fcSpin{to{transform:rotate(360deg)}}
@keyframes fcBar{to{transform:scaleY(1)}}
@keyframes fcRise{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:.95}80%{opacity:.7}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-82vh)}}
@keyframes fcTwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.3)}}
@keyframes fcChar{to{opacity:1;filter:blur(0);transform:none}}
@keyframes fcCharBig{0%{opacity:0;transform:scale(2.2);filter:blur(10px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes fcFlash{0%{opacity:0}70%{opacity:1}100%{opacity:1}}
/* 条件：動きを減らす設定なら、エンディングのカットインの動きをほぼ無くす */
@media (prefers-reduced-motion:reduce){.fc *{animation-duration:.01s!important;animation-delay:0s!important}.fc-rays,.fc-words,.fc-sparks{display:none}}
/* もようがえ（ホームの小窓）：持っている壁紙と曲を、タイルで選ぶ */
/* 上にはみ出す見出しの札（.pop-h）が切れないよう、カードはそのまま見せて、中身だけをスクロールさせる */
.decor-card{width:min(560px,100%);box-sizing:border-box;padding-top:34px;max-height:calc(100dvh - 40px);overflow:visible}
.decor-body{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -6px;padding:2px 6px 6px}
.decor-h{margin:0;font-weight:900;font-size:16px;color:var(--h-ink)}
.decor-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.decor-item{display:flex;flex-direction:column;gap:6px;font:inherit;color:var(--h-ink);background:var(--h-cream);border:3px solid var(--h-line);border-radius:16px;padding:7px;cursor:pointer;text-align:center}
.decor-item b{font-size:13px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.decor-item[aria-pressed="true"]{border-color:var(--h-pink);box-shadow:0 0 0 3px rgba(255,79,163,.25)}
.decor-item[aria-pressed="true"] b::before{content:"✓ ";color:var(--h-pink-d)}
.decor-item:focus-visible{outline:3px solid var(--h-cyan);outline-offset:2px}
.decor-thumb{height:64px;border-radius:11px}
.decor-thumb.music-ico{font-size:34px;cursor:inherit}
/* ショップのBGM欄の説明（ホームでも使える） */
.shop-hint{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--h-ink2)}
/* タイトル「コトダマ連鎖!」を、上の「しりとり共闘アクション」にかぶらない程度に少し下げる（まわりの並びは動かさない） */
.home-head .home-title{position:relative;top:.08em}

/* ===== 設定の画面：夜空ふう（金のふち・ハンコの見出し・自前のラジオ／スイッチ／つまみ） ===== */
.settings-card{position:relative;width:min(540px,100%);gap:18px;padding:30px 26px 24px;border:0;border-radius:20px;
    background:radial-gradient(120% 70% at 50% 0%,rgba(120,90,220,.35),transparent 60%),linear-gradient(170deg,#241b52 0%,#16112f 55%,#100c24 100%);
    box-shadow:0 0 0 1px rgba(242,193,78,.55),0 0 0 6px rgba(18,14,42,.9),0 0 0 7px rgba(242,193,78,.3),0 24px 60px rgba(0,0,0,.6)}
.settings-head{position:relative;text-align:center;padding-bottom:12px}
.settings-head::after{content:"";position:absolute;left:50%;bottom:0;width:min(320px,80%);height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.settings-en{margin:0;font-family:var(--f-pop);font-size:12px;letter-spacing:.6em;padding-left:.6em;color:var(--gold);opacity:.85}
.settings-card .settings-title{margin:2px 0 0;font-family:var(--f-display);font-weight:400;font-size:38px;letter-spacing:.3em;padding-left:.3em;color:#fff7ec;text-shadow:0 0 18px rgba(160,120,255,.6),0 3px 0 #000}
.settings-title::before{content:"⚙";display:inline-block;margin-right:.25em;font-size:.7em;color:var(--gold);vertical-align:.12em;animation:setSpin 8s linear infinite}
@keyframes setSpin{to{transform:rotate(360deg)}}
.settings-card .settings-group{position:relative;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}
.settings-card .settings-group legend{display:flex;align-items:center;gap:8px;float:left;width:100%;margin:0 0 10px;font-size:15px;letter-spacing:.08em}
.settings-card .settings-group legend + *{clear:both}
.set-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-family:var(--f-display);font-size:14px;color:#3a0d0d;background:radial-gradient(circle at 35% 30%,#ffe7a0,var(--gold) 60%,#b8862a);box-shadow:0 2px 0 rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(80,40,0,.35)}
.settings-card .set-two{display:grid;grid-template-columns:1fr 1fr}
.set-two legend{grid-column:1/-1}
.settings-card .settings-opt{position:relative;align-items:center;gap:12px;border-radius:12px;border-color:rgba(255,255,255,.12);background:rgba(10,8,26,.45);transition:border-color .15s,background .15s,transform .15s}
.settings-card .settings-opt:hover:not(:has(input:disabled)){border-color:rgba(242,193,78,.6);transform:translateY(-1px)}
.settings-card .settings-opt:has(input:checked){border-color:var(--gold);background:linear-gradient(90deg,rgba(242,193,78,.2),rgba(242,193,78,.06));box-shadow:0 0 18px rgba(242,193,78,.18)}
.settings-card .settings-opt input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:20px;height:20px;border-radius:50%;border:2px solid rgba(243,234,214,.55);background:rgba(0,0,0,.3);display:grid;place-items:center;cursor:inherit}
.settings-card .settings-opt input[type=radio]::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .18s cubic-bezier(.2,1.6,.4,1);box-shadow:0 0 8px var(--gold)}
.settings-card .settings-opt input[type=radio]:checked{border-color:var(--gold)}
.settings-card .settings-opt input[type=radio]:checked::after{transform:scale(1)}
.settings-card .settings-opt input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* 効果音のオン・オフはスイッチの見た目 */
.set-switch input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;order:2;margin:0 0 0 auto;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;cursor:pointer;transition:background .2s}
.set-switch input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff7ec;box-shadow:0 2px 4px rgba(0,0,0,.4);transition:transform .2s cubic-bezier(.2,1.4,.4,1)}
.set-switch input[type=checkbox]:checked{background:linear-gradient(90deg,#d99a1e,var(--gold))}
.set-switch input[type=checkbox]:checked::after{transform:translateX(20px)}
/* 音量のつまみ：金色に満ちていく線 */
.settings-card .settings-vol{border-radius:12px;border-color:rgba(255,255,255,.12);background:rgba(10,8,26,.45);padding:10px 14px}
.settings-card .settings-vol input[type=range]{--p:50%;appearance:none;-webkit-appearance:none;height:8px;border-radius:999px;cursor:pointer;background:linear-gradient(90deg,#d99a1e,var(--gold)) 0/var(--p) 100% no-repeat,rgba(255,255,255,.15)}
.settings-card .settings-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffe7a0 45%,var(--gold));border:2px solid #3a2a08;box-shadow:0 0 10px rgba(242,193,78,.7)}
.settings-card .settings-vol input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffe7a0 45%,var(--gold));border:2px solid #3a2a08;box-shadow:0 0 10px rgba(242,193,78,.7)}
.settings-card .settings-vol input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.settings-card .settings-vol b{font-family:var(--f-pop);font-size:15px}
.settings-card .save-code{border-radius:10px;background:rgba(0,0,0,.35)}
.settings-card .save-btns .btn{border-radius:999px}
.settings-card #settingsClose{align-self:center;min-width:180px;min-height:46px;border-radius:999px;font-size:17px;font-weight:900;letter-spacing:.2em;color:#2b1a5a;background:linear-gradient(#fff,#f1e8ff);box-shadow:0 0 0 3px var(--gold),0 5px 0 #000,0 0 24px rgba(242,193,78,.35);transition:transform .12s}
.settings-card #settingsClose:hover{transform:translateY(-2px)}
.settings-card #settingsClose:active{transform:translateY(2px);box-shadow:0 0 0 3px var(--gold),0 2px 0 #000}
@media (max-width:520px){.settings-card .set-two{grid-template-columns:1fr}.settings-card .settings-title{font-size:30px}}
@media (prefers-reduced-motion:reduce){.settings-title::before{animation:none}}