/* ============================================================================
A-amuse v2 各画面の中身（ホーム／ホール／島／マイページ／カード）
2026-08-03 新規。試作 /proto/ から移植。クラス名はすべて v2- 付き。
画像は /img/v2/。
============================================================================ */
/* ══════════════ ホーム ══════════════ */
.v2-home{position:relative;height:100%;overflow:hidden;background:transparent}
/* キャラの立ち絵（背景を抜いた透過PNG）。--v2-char を差し替えるだけで変わる */
.v2-home__char{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);
height:76%;aspect-ratio:2/3;background:var(--v2-char) center bottom/contain no-repeat;
filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
/* 台座。どんな立ち絵でも成立するよう円形にしてある（椅子だと姿勢を選ぶ） */
.v2-home__stage{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
width:86%;aspect-ratio:1143/259;pointer-events:none;
background:url('/img/v2/stage_ring.webp') center/contain no-repeat}
/* 右の縦アイコン */
.v2-rail{position:absolute;right:9px;top:10px;display:flex;flex-direction:column;gap:11px;z-index:5}
.v2-rail a{width:66px;border:0;background:none;color:#fff;display:flex;flex-direction:column;
align-items:center;gap:2px;font-size:9px;font-weight:900;cursor:pointer;text-decoration:none;
white-space:nowrap;letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.95)}
.v2-rail a:active{transform:scale(.94)}
.v2-rail i{width:50px;height:50px;display:block;position:relative;
background:center/contain no-repeat;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.v2-rail .notice i{background-image:url('/img/v2/ico_notice.webp')}
.v2-rail .friend i{background-image:url('/img/v2/ico_friend.webp')}
.v2-rail .rank i{background-image:url('/img/v2/ico_rank.webp')}
.v2-rail .event i{background-image:url('/img/v2/ico_event.webp')}
.v2-rail .mission i{background-image:url('/img/v2/ico_mission.webp')}
.v2-rail .chat i{background-image:url('/img/v2/ico_chat.webp')}
.v2-rail .battle i{background-image:url('/img/v2/ico_battle.webp')}
.v2-rail .multi i{background-image:url('/img/v2/ico_multi.webp')}
/* バトルの誘いの案内（2026-08-05 追加）。
右の小さな赤い印だけでは見落とされるため、届いている間だけ画面の上に出す。
★届いていないときは要素ごと出ないので、普段のホームは今までと1ピクセルも変わらない。 */
.v2-binv{position:absolute;left:10px;top:12px;right:84px;z-index:7;display:flex;align-items:center;
gap:8px;text-decoration:none;padding:10px 12px;border-radius:10px;
background:linear-gradient(180deg,rgba(60,12,30,.96),rgba(30,6,16,.96));
box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1.5px #FFD45E;
animation:v2-binv-pulse 2s ease-in-out infinite}
.v2-binv b{flex:1;min-width:0;font-size:12.5px;font-weight:900;color:#FFD45E;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.v2-binv span{flex:none;font-size:11.5px;font-weight:900;color:#fff}
@keyframes v2-binv-pulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1.5px #FFD45E}
50%{box-shadow:0 4px 18px rgba(255,49,69,.5), inset 0 0 0 1.5px #fff}}
.v2-rail .dot{position:absolute;right:-2px;top:-2px;width:16px;height:16px;border-radius:50%;
background:var(--v2-busy);border:2px solid #2a0a12;font-size:9px;color:#fff;
display:grid;place-items:center;font-weight:900;line-height:1}
/* PLAY ボタン。文字は絵として別に持っているので大きさを後から変えられる */
.v2-play{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;
text-align:center;display:block;text-decoration:none}
.v2-play__b{width:142px;height:142px;border:0;display:grid;place-items:center;
background:url('/img/v2/btn_play.webp') center/contain no-repeat;cursor:pointer;
filter:drop-shadow(0 0 18px rgba(255,143,31,.55)) drop-shadow(0 8px 20px rgba(0,0,0,.55));
animation:v2-pulse 2.4s ease-in-out infinite}
.v2-play:active .v2-play__b{transform:scale(.96)}
.v2-play__t{display:block;width:92px;height:33px;
background:url('/img/v2/txt_play.webp') center/contain no-repeat}
@keyframes v2-pulse{
0%,100%{filter:drop-shadow(0 0 14px rgba(255,143,31,.45)) drop-shadow(0 8px 20px rgba(0,0,0,.55))}
50% {filter:drop-shadow(0 0 30px rgba(255,143,31,.85)) drop-shadow(0 8px 20px rgba(0,0,0,.55))}}
/* ══════════════ ホール一覧 ══════════════ */
.v2-hall{display:flex;gap:12px;margin:0 13px 12px;padding:12px;background:var(--v2-face);
border:1.5px solid var(--v2-hair);border-radius:15px;text-decoration:none;
box-shadow:0 3px 12px rgba(0,0,0,.45)}
.v2-hall.close{opacity:.55}
/* ── ホール・島のカードに金の枠（2026-08-03 追加）─────────────────────────
ここは「ホールをえらぶ → 島をえらぶ → 台をえらぶ」の**一番よく通る3画面**。
上下のバーが豪華なのに中身が平らで、格が合っていなかった。
★padding を 12px → 4px に減らす理由
縁が16px 入るぶん、中身が内側へ寄る。padding をそのままにすると
16+12=28px も余白ができて、カードがすかすかに見える。
縁じたいが余白の役目をするので padding は最小にする。
★この指定は .v2-hall と .v2-isl の**両方の定義より後**に置くこと。
前に置くと、後から来る `border:1.5px solid …` の**一括指定が border-image を打ち消す**。
実際に前へ置いてしまい、島のカードだけ枠が付かなかった。
この1ブロックを消せば、元の「暗い角丸のカード」に戻る。 */
.v2-hall__logo{width:34%;aspect-ratio:1;flex:none;position:relative;border-radius:11px;
overflow:hidden;background:#0F0810}
.v2-hall__logo img{width:100%;height:100%;object-fit:cover;display:block}
.v2-hall__b{position:absolute;left:6px;top:6px;background:var(--v2-busy);color:#fff;
font-size:9.5px;font-weight:900;padding:2px 7px;border-radius:5px;letter-spacing:.04em}
.v2-hall__info{flex:1;min-width:0}
.v2-hall__name{font-size:15px;font-weight:900;color:var(--v2-ink);margin-bottom:7px}
.v2-hall__row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
padding:5px 8px;background:#1D0F1C;border-radius:7px;margin-bottom:4px}
.v2-hall__row .k{font-size:10.5px;font-weight:800;color:var(--v2-muted)}
.v2-hall__row .v{font-family:var(--v2-mono);font-size:15px;font-weight:800;color:var(--v2-ink)}
.v2-hall__row .v i{font-style:normal;font-size:10px;color:var(--v2-muted);margin-left:2px}
.v2-hall__row .v.ok{color:#4ADE80} .v2-hall__row .v.ng{color:var(--v2-busy)}
.v2-hall__row .v.t{font-size:12.5px}
/* ══════════════ 島一覧 ══════════════ */
.v2-isl{display:flex;align-items:center;gap:11px;margin:0 13px 9px;padding:10px 12px;
background:var(--v2-face);border:1.5px solid var(--v2-hair);border-radius:13px;
text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.45)}
.v2-isl__no{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
background:linear-gradient(135deg,#2b7fff,#6fb0ff);color:#fff;font-weight:900;font-size:15px;
font-family:var(--v2-mono)}
/* 島番号の色を金に寄せる（2026-08-03）。
青はこの画面で唯一の寒色で、金と赤で組んだ他の部分から浮いていた。
数字の読みやすさは落とさないよう、地を金・文字を最暗色にして明暗差を確保する。
★元に戻すには、この1ブロックを消せば上の青いグラデに戻る。 */
.v2-isl__no{background:linear-gradient(135deg,#C98A2A,#FFD45E);color:#150B15;
box-shadow:inset 0 0 0 1.5px rgba(255,233,168,.55)}
/* ★金の枠の本体（上の説明を参照）。
.v2-hall と .v2-isl の定義がすべて済んだ**この位置**に置く。 */
.v2-hall,
.v2-isl{
padding:4px;
border-style:solid;
border-width:16px;
border-image:url('/img/v2/panel_frame.png') 64 / 16px stretch;
border-radius:0}
.v2-isl__main{flex:1;min-width:0}
.v2-isl__name{font-size:13.5px;font-weight:900;color:var(--v2-ink);margin-bottom:5px}
/* 6列×2段。島の中の台の並びと同じ形にする（実物の島も6台ずつ背中合わせ）。
max-width が無いと1列が太くなりすぎて点でなく帯に見える。 */
.v2-seats{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;max-width:132px}
.v2-seat{aspect-ratio:1/1.3;border-radius:3px;background:var(--v2-ok)}
.v2-seat.busy{background:var(--v2-busy)}
.v2-seat.stop{background:#3A1E38}
.v2-isl__cnt{flex:none;text-align:right}
.v2-isl__cnt .b{font-size:19px;font-weight:900;font-family:var(--v2-mono);line-height:1}
.v2-isl__cnt .s{font-size:10px;font-weight:800;color:var(--v2-muted)}
/* ══════════════ マイページの項目一覧 ══════════════ */
.v2-menu{margin:0 13px 12px;background:var(--v2-face);border:1.5px solid var(--v2-hair);
border-radius:15px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.45)}
.v2-menu a{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:14px 13px;color:var(--v2-ink);text-decoration:none;font-size:13.5px;font-weight:800;
border-bottom:1px solid var(--v2-hair)}
.v2-menu a:last-child{border-bottom:0}
.v2-menu a:active{background:#1D0F1C}
.v2-menu .ar{font-size:12px;color:var(--v2-muted);font-weight:700}
.v2-menu b{color:var(--v2-gold)}
/* ── 項目1つずつに金の枠（2026-08-03 変更）─────────────────────────────────
最初は「箱ごと1枠・中を区切り線で分ける」形にしたが、**1項目1枠**に変えた。
★理由（ユーザー判断）
設定・マイページの項目は今後まだ増える。
まとめて囲う形だと「どこで区切るか」を項目が増えるたびに考え直すことになる。
1個ずつなら、足しても引いても見た目の決まりが変わらない。
ガチャ画面の「カードBOXを見る」が既に1個1枠で、そちらに揃える形でもある。
★この位置に置く理由（3回同じ失敗をしている）
上の `.v2-menu a{… border-bottom:1px solid …}` と
`.v2-menu a:last-child{border-bottom:0}` より**後**に置かないと、
そちらの border 指定に打ち消されて枠が出ない。
border 系は「後から書いたほう」が勝つ。必ず既存の定義より下に置く。
★高さの決め方
縁が上下16pxずつ入る。元の padding 14px のままだと 16+14+文字+14+16 ≒ 79px になり、
項目が並ぶ画面では高すぎる。padding を 4px に減らして ≒ 59px に収める
（押せる大きさの目安 44px は十分に超えている）。
★この2ブロックを消せば、元の「まとめて1枠」に戻る。 */
.v2-menu{
background:none;
border:0;
border-radius:0;
overflow:visible;
box-shadow:none;
display:flex;
flex-direction:column;
gap:9px} /* 枠と枠のあいだ */
/* ★:last-child も一緒に書く理由（実測で判明）
上に `.v2-menu a:last-child{border-bottom:0}` がある。
これは区切り線を消すための指定だったが、**強さがこちらより上**
（:last-child はクラス1つぶんとして数えるので (0,2,1) 対 (0,1,1)）。
後ろに書いても勝てず、**最後の項目だけ下の枠が消えて 44px に潰れた**。
同じ強さで並べて書くことで、順序で勝たせる。 */
.v2-menu a,
.v2-menu a:last-child{
background:var(--v2-face);
border-style:solid;
border-width:16px;
border-image:url('/img/v2/panel_frame.png') 64 / 16px stretch;
border-radius:0;
padding:6px;
box-shadow:0 3px 12px rgba(0,0,0,.45)}
/* ══════════════ カード ══════════════ */
/* 枠の窓の位置は card_frame.webp から実測した値。目分量ではない。 */
.v2-card{position:relative;aspect-ratio:1024/1536;container-type:size;cursor:pointer;
text-decoration:none;display:block}
.v2-card:active{transform:scale(.97)}
.v2-card__art{position:absolute;left:16.50%;top:14.71%;width:66.89%;height:63.15%;
background:center/cover no-repeat;background-color:#0F0810}
.v2-card__frame{position:absolute;inset:0;
background:url('/img/v2/card_frame.webp') center/100% 100% no-repeat}
/* 名前板は札の高さの6.8%しかない。cqh はカードの高さ基準なので 4.2cqh が正しい */
.v2-card__name{position:absolute;left:21%;top:79.5%;width:58%;height:6.8%;
display:grid;place-items:center;color:#FFE9B0;font-weight:900;letter-spacing:.10em;
font-size:clamp(6px,4.2cqh,24px);white-space:nowrap;overflow:hidden;
text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(255,180,60,.5)}
.v2-card.sel{outline:3px solid var(--v2-gold);outline-offset:2px;border-radius:6px}
.v2-card__use{position:absolute;left:50%;top:8%;transform:translateX(-50%);
background:#4ADE80;color:#06280f;font-size:clamp(8px,14cqh,12px);font-weight:900;
padding:2px 8px;border-radius:999px;white-space:nowrap}
.v2-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 13px 12px}
.v2-cardempty{aspect-ratio:1024/1536;border:1.5px dashed var(--v2-hair);border-radius:8px;
display:grid;place-items:center;color:#5A4A58;font-size:11px;font-weight:900}
/* カードを画面いっぱいで見る。大きさは3つの上限のいちばん小さいもの。
1つでも欠けると縦長か横長のどちらかで必ずあふれる。 */
.v2-view{position:fixed;inset:0;z-index:80;background:rgba(4,2,8,.93);
display:grid;place-items:center;padding:16px}
.v2-view .v2-card{width:min(86vw, calc(var(--v2-appw) - 36px), calc((100dvh - 96px) * 0.6667));
box-shadow:0 18px 50px rgba(0,0,0,.75)}
.v2-view .v2-card.sel{outline:none} /* 大きく見るときは黄枠が絵の邪魔になる */
.v2-view__back{position:absolute;left:14px;top:14px;padding:10px 18px 10px 13px;
border-radius:999px;background:var(--v2-face);border:1.5px solid #5A3A62;color:var(--v2-ink);
font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.v2-view__hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;
color:var(--v2-muted);font-size:11.5px;font-weight:700}
/* 確認のダイアログ */
.v2-ask{position:fixed;inset:0;z-index:70;background:rgba(4,2,8,.72);
display:grid;place-items:center;padding:20px}
.v2-ask__box{width:min(90vw,320px);background:var(--v2-face);border:1.5px solid var(--v2-gold);
border-radius:14px;padding:16px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.7)}
.v2-ask__box p{margin:0 0 14px;color:var(--v2-ink);font-size:13.5px;font-weight:800;line-height:1.7}
.v2-ask__box b{color:var(--v2-gold)}
.v2-ask__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v2-ask__btns button{padding:11px;border-radius:10px;border:1.5px solid #5A3A62;
background:#1D0F1C;color:var(--v2-ink);font-size:13.5px;font-weight:900;cursor:pointer}
.v2-ask__btns .y{background:linear-gradient(135deg,#FFB020,var(--v2-gold));border-color:var(--v2-gold);
color:#3a2400}
/* ══════════════ フォーム（2026-08-03 追加）══════════════
お問い合わせなどの入力画面を **v2 で作り直す**ための部品。
★Bootstrap の .form-control / .btn は使わない。
旧サイトの白いフォームを枠だけ差し替えると「貼り付けた感」が出る、という指摘への対応。
★入力欄の高さは指で押せる 46px 以上を確保（7インチ端末・スマホ前提）。 */
.v2-form{margin:0 13px 14px}
.v2-field{margin-bottom:14px}
.v2-label{display:flex;align-items:center;gap:7px;margin-bottom:6px;
font-size:12.5px;font-weight:900;color:var(--v2-ink)}
.v2-req{background:var(--v2-busy);color:#fff;font-size:9.5px;font-weight:900;
padding:2px 7px;border-radius:999px;letter-spacing:.04em}
/* ★「任意」の印（2026-08-04 追加）。必須と**一目で区別**できるよう、
色を落として枠線だけにする。必須＝塗り／任意＝枠、で意味が伝わる。 */
.v2-opt{background:transparent;color:var(--v2-muted);border:1px solid var(--v2-hair);
font-size:9.5px;font-weight:900;padding:1px 7px;border-radius:999px;letter-spacing:.04em}
.v2-input,.v2-select,.v2-textarea{
width:100%;min-height:46px;padding:11px 13px;border-radius:11px;
background:#1D0F1C;border:1.5px solid var(--v2-hair);color:var(--v2-ink);
font-size:15px;font-weight:600;font-family:inherit;
-webkit-appearance:none;appearance:none}
.v2-textarea{min-height:130px;line-height:1.7;resize:vertical}
.v2-input::placeholder,.v2-textarea::placeholder{color:#6B5A69}
.v2-input:focus,.v2-select:focus,.v2-textarea:focus{
outline:none;border-color:var(--v2-gold);box-shadow:0 0 0 3px rgba(255,212,94,.18)}
.v2-input:disabled{color:var(--v2-muted);background:#150B15}
/* 選択欄の下向き矢印。appearance:none で消えるので自分で描く */
.v2-select{background-image:
linear-gradient(45deg,transparent 50%,var(--v2-gold) 50%),
linear-gradient(135deg,var(--v2-gold) 50%,transparent 50%);
background-position:calc(100% - 18px) 21px, calc(100% - 12px) 21px;
background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}
.v2-select option{background:#1D0F1C;color:var(--v2-ink)}
/* 入力済みの内容を見せるだけの欄（確認画面） */
.v2-value{padding:11px 13px;border-radius:11px;background:#1D0F1C;
border:1.5px solid var(--v2-hair);color:var(--v2-ink);font-size:14.5px;
font-weight:700;line-height:1.7;white-space:pre-wrap;word-break:break-word;min-height:46px}
/* 注意書きの箱。赤＝気をつけること / 灰＝ふつうの案内 */
.v2-alert{margin:0 13px 14px;padding:11px 13px;border-radius:11px;font-size:11.5px;
line-height:1.8;background:#2A1119;border:1.5px solid rgba(255,43,77,.35);color:#F0D6DC}
.v2-alert a{color:var(--v2-gold);font-weight:800}
.v2-alert--info{background:#1D0F1C;border-color:var(--v2-hair);color:#C9B6C6;text-align:center}
.v2-alert--info b{color:var(--v2-ink);font-size:13px}
/* ★注意（黄）。赤ほど強くないが、読み飛ばしてほしくないもの（2026-08-04 追加）。
例: メール未登録だとパスワードを戻せない、という登録画面の注意書き。
余白を詰めてあるのは、入力欄の直下に置くため（.v2-alert の 0 13px だと二重に効く）。 */
.v2-alert--warn{margin:0;background:#2A2211;border-color:rgba(255,196,61,.40);color:#F3E3C2}
.v2-alert--warn b{color:#FFD45E}
/* ── エラー画面の「技術的な内容」（2026-08-03 追加）─────────────────────
error.html でだけ使う。初めは閉じておき、押すと開く。
お客様に SQL の文面をそのまま見せないため。運営が原因を追うときは開けば全文が読める。 */
.v2-errdetail{margin:0 13px 14px;border:1.5px solid var(--v2-hair);border-radius:11px;
background:#150B15;overflow:hidden}
.v2-errdetail summary{padding:9px 13px;font-size:11.5px;font-weight:800;
color:var(--v2-muted);cursor:pointer;list-style:none}
.v2-errdetail summary::-webkit-details-marker{display:none}
.v2-errdetail summary::before{content:"▸ ";color:var(--v2-gold)}
.v2-errdetail[open] summary::before{content:"▾ "}
.v2-errdetail code{display:block;padding:0 13px 11px;font-size:11px;line-height:1.7;
color:#C9B6C6;word-break:break-all;white-space:pre-wrap}
/* 送信ボタン。色は台一覧の「プレイする」と同じ（サイトの中で意味を揃える） */
.v2-btn{display:block;width:100%;border:0;border-radius:999px;padding:14px;
font-size:15.5px;font-weight:900;letter-spacing:.04em;cursor:pointer;text-align:center;
text-decoration:none;font-family:inherit;
background:linear-gradient(135deg,var(--v2-red,#ff2b4d),#ff8f1f);color:#fff;
box-shadow:0 5px 14px rgba(255,43,77,.32);text-shadow:0 1px 2px rgba(0,0,0,.2)}
/* ── 主ボタンに金の枠を巻く（2026-08-03 追加）─────────────────────────────
生成部品 btn_frame.png（480×144・左右72px / 上下36px が縁・中央は透明）。
この1ブロックを消せば、元の「赤→橙のグラデだけ」に戻る。
★寸法の決め方（勘で置かない）
元画像の縁は 左右72px / 上下36px。これを **同じ倍率** で縮めないと絵が歪む。
2分の1にして 左右36px / 上下18px。上下左右で倍率が揃うので角の飾りが崩れない。
border-width … 画面上での縁の太さ（18px / 36px）
border-image-slice … 元画像のどこで切るか（36 / 72）※fill を付けない＝中央は描かない
中央を描かないので、下の赤→橙のグラデがそのまま透ける。
最初は3分の1（左右24px）で試したが、**端の彫刻が潰れて黒い塊に見えた**。
ボタンは横に細長い（約7.5:1）のに部品は 3.3:1 なので、端が小さくなりすぎる。
2分の1まで戻すと彫刻が読める。倍率を下げるときはここを見直すこと。
★padding を減らす理由
縁を足すと、その分だけボタンが縦に伸びる（18+18=36px 増える）。
元は padding:14px。3px に減らして 18+3+文字+3+18 ≒ 61px に収める
（元は約49px なので少し高くなる。押しやすさは損なわない）。
★角丸を残す理由
枠はカプセル形。背景の赤を四角のままにすると、**金の枠から赤い角がはみ出す**
（第1弾のプレビューで実際に起きた）。border-radius:999px を残して背景もカプセルにする。
★:not(.v2-btn--sub) で主ボタンだけに限る理由
副ボタン（キャンセル・戻る）は控えめのままにしたい。
さらに padding を 3px に減らすので、限定しないと**副ボタンだけ潰れる**
（副ボタンは自前の padding を持たず .v2-btn の値を使っているため）。 */
.v2-btn:not(.v2-btn--sub){
/* 高さは 21+22+21 = 64px（差し替え前と同じ）。上下に枠が無くなったぶんを padding で持つ */
padding:21px 0;
border-style:solid;
border-width:0 49px;
/* ★両端の色が中央と食い違っていた原因（2026-08-03 ユーザー指摘「両端の色が違うのが嫌」）
背景のグラデーションは、既定では**枠の内側の大きさ**で作られ、
その外側（＝枠の場所）には**同じ絵が繰り返して**置かれる。
そのため 左の枠には「グラデの終わり（橙）」、右の枠には「グラデの始まり（桃）」が出て、
中央と左右で色が反転していた。
border-box にすると、グラデが**枠まで含めた全体**で1本になり、色が続く。
※イラスト側の問題ではない。部品を作り直しても、これを直さない限り同じ症状が出る。 */
background-origin:border-box;
/* ★2026-08-04 部品を差し替え: btn_frame.png（枠だけ）→ btn_play.png（中身も持つ）
元は 1400×400。上下左右に12pxの透明な余白があり、そのままだと高さ64pxのとき
上下に1.92pxの透明が残って**下地の赤が帯になって見えた**。余白を切って 1376×376 にした
（元は data/img/v2/_orig/btn_play_1400x400.png に保存）。
★数値の根拠（勘で置かない）
絵の高さ376px → ボタンの高さ64px なので 縦の倍率 = 64÷376 = 0.1702。
飾りの幅は288pxなので、横も 288×0.1702 = **49px** にすると縦横が同じ倍率＝飾りが歪まない。
上下は切らない（0）ので、中央の面は絵の上下いっぱいがそのまま縦に縮む。
★fill を付ける理由
この部品は中身（赤い面）も持っている。fill が無いと中央が描かれず、
下のグラデーションが出てしまう。
★下地のグラデーションは残す（絵が読めなかったときに透明なボタンにならない保険）。
ふだんは絵が全面を覆うので見えない。 */
line-height:22px;
border-image:url('/img/v2/btn_play.png?v=2f7352c4') 0 288 fill stretch}
.v2-btn:active{transform:scale(.98)}
/* 副ボタン（修正に戻る等）。主ボタンと同じ色にすると押し間違える */
.v2-btn--sub{background:#271425;border:1.5px solid #5A3A62;color:var(--v2-ink);
box-shadow:none;text-shadow:none}
.v2-btns{margin:0 13px 16px;display:flex;flex-direction:column;gap:10px}
/* チェックボックス（メールアドレスを保存 など）。
標準の四角は小さすぎて押しにくいので、行ごと押せるようにしてある。 */
.v2-check{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 13px;
border-radius:11px;background:#1D0F1C;border:1.5px solid var(--v2-hair);cursor:pointer;
font-size:13.5px;font-weight:700;color:var(--v2-ink);min-height:46px}
.v2-check input{width:20px;height:20px;flex:none;accent-color:var(--v2-gold);cursor:pointer}
.v2-check:active{background:#241528}
/* reCAPTCHA は Google が固定サイズ(304px)で描く。狭い端末だと横にはみ出すので縮める。 */
.v2-captcha{margin:0 0 14px;overflow:hidden}
.v2-captcha .g-recaptcha{transform-origin:0 0}
@media (max-width:360px){ .v2-captcha .g-recaptcha{transform:scale(.86)} }
/* 見出しの下の小さい説明 */
.v2-lead{margin:0 13px 12px;font-size:12.5px;line-height:1.8;color:#C9B6C6}
.v2-lead b{color:var(--v2-ink)}
/* 招待コードなど「読み取って使う番号」。等幅＋字間を空けて読み間違いを防ぐ */
.v2-value--code{font-family:var(--v2-mono);font-size:18px;letter-spacing:.14em;
color:var(--v2-gold);text-align:center}
/* ★ブラウザの自動入力（保存したパスワード等）は、入力欄を勝手に**薄い青**にする。
暗い画面だと浮いて別サイトのように見えるので上書きする。
background では効かない（自動入力は !important 相当で当ててくる）。
内側に大きな影を敷いて塗りつぶすのが定石。 */
.v2-input:-webkit-autofill,
.v2-input:-webkit-autofill:hover,
.v2-input:-webkit-autofill:focus,
.v2-select:-webkit-autofill,
.v2-textarea:-webkit-autofill{
-webkit-text-fill-color:var(--v2-ink);
-webkit-box-shadow:0 0 0 1000px #1D0F1C inset;
box-shadow:0 0 0 1000px #1D0F1C inset;
caret-color:var(--v2-ink);
transition:background-color 9999s ease-in-out 0s}
/* 入力欄の下の小さい説明 */
.v2-hint{margin-top:6px;font-size:11.5px;line-height:1.7;color:var(--v2-muted)}
.v2-hint b{color:var(--v2-ink)}
/* ラジオ（PHPが makeRadioArray で組み立てて入れてくる。こちらで形は決められないので、
中に入る input と label をまとめて押しやすくする） */
.v2-radios{display:flex;flex-wrap:wrap;gap:8px}
.v2-radios label{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;min-height:46px;
border-radius:11px;background:#1D0F1C;border:1.5px solid var(--v2-hair);
color:var(--v2-ink);font-size:13.5px;font-weight:700;cursor:pointer}
.v2-radios input{width:19px;height:19px;accent-color:var(--v2-gold);cursor:pointer}
.v2-radios br{display:none}
/* 同意チェックの中のリンクは、押し分けられるよう色で区別する */
.v2-check a{color:var(--v2-gold);text-decoration:underline}
/* 横に並べる欄（姓・名 / 年・月・日）。狭い端末では1列に落とす */
.v2-row{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.v2-row--3{grid-template-columns:1.2fr 1fr 1fr}
@media (max-width:340px){ .v2-row,.v2-row--3{grid-template-columns:1fr} }
/* ══════════════ お届け先住所（2026-08-03）══════════════
★このページのスクリプト(com/address.html)は、次の目印を**名前で**探して中身を差し替える:
.card / data-no / .card-header h5 / .list-group li（2つ）
.modal .modal-dialog / .address_data / .modal-body .card-subtitle（2つ目）
.btn_area / .address_select / .address_delete / a.address_sned_btn
1つでも変えると「お届け先に設定」「削除」が動かなくなる。
だから**名前は残したまま、見た目だけ v2 にしている**。 */
.v2-addr .card{margin:0 13px 12px;background:var(--v2-face);border:1.5px solid var(--v2-hair);
border-radius:15px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.45)}
.v2-addr .card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:11px 13px;border-bottom:1px solid var(--v2-hair)}
.v2-addr .card-header h5{margin:0;font-size:14.5px;font-weight:900;color:var(--v2-ink)}
.v2-addr .card-body{padding:0}
.v2-addr .list-group{list-style:none;margin:0;padding:0}
.v2-addr .list-group li{padding:11px 13px;font-size:13px;line-height:1.7;color:#C9B6C6;
border-bottom:1px solid var(--v2-hair)}
.v2-addr .card-footer{display:flex;gap:10px;padding:11px 13px}
.v2-addr .card-footer a{flex:1;text-align:center;padding:9px;border-radius:999px;
font-size:12.5px;font-weight:900;text-decoration:none;
background:#1D0F1C;border:1.5px solid #5A3A62;color:var(--v2-ink)}
.v2-addr .selectedaddress{background:#4ADE80;color:#06280f;font-size:10.5px;font-weight:900;
padding:4px 10px;border-radius:999px;white-space:nowrap}
.v2-addr .card-header button{background:linear-gradient(135deg,var(--v2-red,#ff2b4d),#ff8f1f);
border:0;border-radius:999px;padding:7px 12px;color:#fff;font-size:11.5px;font-weight:900;cursor:pointer}
.v2-addr .pagination{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0 13px;
justify-content:center}
.v2-addr .pagination a,.v2-addr .pagination span{color:var(--v2-muted);font-size:12px;font-weight:800;
text-decoration:none;padding:4px 8px}
/* Bootstrap の modal **JS** は inc_script.html で読み込まれている（CSSだけ入れていない）。
その JS は開くとき display:block と .show を付けるので、見た目だけこちらで用意する。 */
.modal{position:fixed;inset:0;z-index:1050;display:none;overflow-y:auto;padding:18px}
.modal-dialog{margin:40px auto;max-width:min(92vw,var(--v2-appw))}
.modal-content{background:var(--v2-face);border:1.5px solid var(--v2-gold);border-radius:16px;
overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.75)}
.modal-header{padding:13px 15px;border-bottom:1px solid var(--v2-hair)}
.modal-title{margin:0;font-size:15px;font-weight:900;color:var(--v2-ink)}
.modal-body{padding:13px 15px;color:var(--v2-ink)}
.modal-body h5{margin:0 0 8px;font-size:14.5px;font-weight:900}
.modal-footer{padding:11px 15px;border-top:1px solid var(--v2-hair);text-align:right}
.modal-footer .btn{background:#1D0F1C;border:1.5px solid #5A3A62;color:var(--v2-ink);
border-radius:999px;padding:9px 18px;font-size:13px;font-weight:900;cursor:pointer}
.modal-backdrop{position:fixed;inset:0;z-index:1040;background:#040208;opacity:0}
.modal-backdrop.show{opacity:.86}
.address_sned_btn{display:inline-block;margin-top:10px;padding:12px 24px;border-radius:999px;
background:linear-gradient(135deg,var(--v2-red,#ff2b4d),#ff8f1f);color:#fff;
font-size:14.5px;font-weight:900;text-decoration:none}
.btn_area{display:none}
/* ══════════════ 文章のページ（規約・ガイド・FAQ・お知らせ）2026-08-03 ══════════════
★中身は既存のまま。Bootstrap を読まないので、素の h1〜h5 / p / ul / table に
こちらで読みやすい体裁を当てる。長文なので行間を広めに取る。 */
.v2-doc{padding:0 13px 20px;color:#D9CBD6;font-size:14px;line-height:1.9}
.v2-doc .container{max-width:none;width:100%;padding:0;margin:0}
/* ★本文の中の h1 は隠す。ページ名は上の .v2-title に出しているので二重になる。
全8ページで文言が一致していることを確認済み（利用規約／プライバシーポリシー／
よくある質問／特定商取引法に基づく表記／ご利用ガイド／はじめての方へ／お問い合わせ、
お知らせだけ「お知らせ一覧」だが意味は同じ）。 */
.v2-doc h1{display:none}
.v2-doc h2{font-size:16px;font-weight:900;color:var(--v2-gold);margin:22px 0 8px}
.v2-doc h3,.v2-doc h4,.v2-doc h5{font-size:14.5px;font-weight:900;color:var(--v2-ink);margin:16px 0 6px}
.v2-doc p{margin:0 0 12px}
.v2-doc a{color:var(--v2-gold)}
.v2-doc ul,.v2-doc ol{margin:0 0 12px;padding-left:1.3em}
.v2-doc li{margin-bottom:6px}
.v2-doc hr{border:0;border-top:1px solid var(--v2-hair);margin:16px 0}
.v2-doc small{font-size:12.5px;color:var(--v2-muted)}
.v2-doc strong,.v2-doc b{color:var(--v2-ink)}
/* 表（特定商取引法の表記など）。狭い画面では横に流れるので、はみ出さず中でスクロールさせる */
.v2-doc table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13px;display:block;
overflow-x:auto}
.v2-doc th,.v2-doc td{border:1px solid var(--v2-hair);padding:9px 11px;text-align:left;
vertical-align:top}
.v2-doc th{background:#1D0F1C;color:var(--v2-ink);font-weight:900;white-space:nowrap}
/* 箱もの（既存の .card / .alert / .list-group をそのまま読めるように） */
.v2-doc .card,.v2-doc .alert,.v2-doc .panel{background:var(--v2-face);
border:1.5px solid var(--v2-hair);border-radius:13px;padding:12px 13px;margin:0 0 12px}
.v2-doc .card-header,.v2-doc .card-body{padding:0}
.v2-doc .list-group{list-style:none;padding:0}
.v2-doc .list-group-item,.v2-doc .list-group li{padding:10px 0;border-bottom:1px solid var(--v2-hair)}
.v2-doc .text-center{text-align:center}
.v2-doc .badge{display:inline-block;background:var(--v2-gold);color:#3a2400;border-radius:999px;
padding:2px 9px;font-size:11px;font-weight:900}
.v2-doc img{max-width:100%;height:auto;border-radius:10px}
/* よくある質問の開閉。Bootstrap の collapse **JS** は inc_script.html にあるので、
閉じている／開いているの見た目だけこちらで用意する。 */
.v2-doc .collapse{display:none}
.v2-doc .collapse.show{display:block}
.v2-doc .collapsing{display:block;overflow:hidden}
.v2-doc [data-toggle="collapse"]{display:block;width:100%;text-align:left;cursor:pointer;
background:var(--v2-face);border:1.5px solid var(--v2-hair);border-radius:11px;
padding:12px 13px;margin:0 0 8px;color:var(--v2-ink);font-size:13.5px;font-weight:800}
.v2-doc [data-toggle="collapse"]:active{background:#241528}
/* お知らせ一覧 */
.v2-doc .m-list-title{font-size:14px;font-weight:900;color:var(--v2-ink)}
.v2-doc .new-date{font-size:11.5px;color:var(--v2-muted);font-family:var(--v2-mono)}
.v2-doc .new-m-type{display:inline-block;background:#1D0F1C;border:1px solid var(--v2-hair);
border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:900;color:var(--v2-gold)}
/* ══════════════ ランキング（2026-08-03）══════════════
100人ぶん並ぶので、1行を軽く作る（枠線1本・影なし）。
1〜3位と10位までだけ色を変えて、上位が一目で分かるようにする。 */
.v2-rank{margin:0 13px 14px;background:var(--v2-face);border:1.5px solid var(--v2-hair);
border-radius:15px;overflow:hidden}
.v2-rank__head,.v2-rank__row{display:grid;grid-template-columns:52px 1fr 84px;align-items:center;
gap:8px;padding:10px 13px;border-bottom:1px solid var(--v2-hair)}
.v2-rank__row:last-child{border-bottom:0}
.v2-rank__head{background:#1D0F1C;font-size:11px;font-weight:900;color:var(--v2-muted);
position:sticky;top:0;z-index:1}
.v2-rank__row .r{font-family:var(--v2-mono);font-size:14px;font-weight:900;color:var(--v2-muted)}
.v2-rank__row .n{font-size:13.5px;font-weight:800;color:var(--v2-ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-rank__row .s{font-family:var(--v2-mono);font-size:13.5px;font-weight:800;
color:var(--v2-gold);text-align:right}
.v2-rank__head .s{text-align:right}
.v2-rank__row.top10 .r{color:var(--v2-ink)}
.v2-rank__row.top1 .r{color:#FFD45E} .v2-rank__row.top1{background:rgba(255,212,94,.07)}
.v2-rank__row.top2 .r{color:#D8D8E0} .v2-rank__row.top2{background:rgba(216,216,224,.05)}
.v2-rank__row.top3 .r{color:#E0A46A} .v2-rank__row.top3{background:rgba(224,164,106,.05)}
/* 中身がまだ無い画面の見せ方。空白だけだと壊れて見えるので、何が来るのかを書く */
.v2-empty{margin:0 13px 14px;padding:34px 16px;text-align:center;
background:var(--v2-face);border:1.5px dashed var(--v2-hair);border-radius:15px}
.v2-empty__ic{font-size:38px;line-height:1;margin-bottom:12px;filter:grayscale(.35);opacity:.85}
.v2-empty__t{font-size:14px;font-weight:900;color:var(--v2-ink);margin-bottom:5px}
.v2-empty__s{font-size:12px;color:var(--v2-muted)}
/* A coin の欄をリンクにしたときだけ効く指定。
いまは無料で遊べるので購入の入口を置いていない（欄は div）。
課金方式に切り替えて a に戻したら、この指定がそのまま効く。 */
a.v2-slot--anum{text-decoration:none}
a.v2-slot--anum:active{transform:scale(.97)}
/* ══════════════ ログイン前の画面（2026-08-03）══════════════
ログイン・会員登録・パスワード再設定など、**まだサイトに入っていない**画面。
上のバー（名前・コイン）と下のタブは、入ってから使うものなので出さない。
★背景はホールの写真のまま（第一印象を作る場所なので）。
ただし文字を読ませる必要があるので、写真の上に暗い幕を1枚かける。 */
.v2-auth{position:relative;z-index:10;min-height:100%;display:flex;flex-direction:column;
padding:0 0 16px}
.v2-auth::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(6,3,10,.82),rgba(6,3,10,.66) 40%,rgba(6,3,10,.88))}
/* 名前の代わりに置く看板。上のバーが無いぶん、ここがサイトの顔になる */
.v2-auth__brand{text-align:center;padding:26px 16px 18px}
.v2-auth__brand b{display:block;font-size:27px;font-weight:900;letter-spacing:.10em;
color:var(--v2-gold);text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 22px rgba(255,180,60,.35)}
.v2-auth__brand span{display:block;margin-top:5px;font-size:11.5px;font-weight:700;
color:#C9B6C6;letter-spacing:.04em}
/* ── ロゴ画像に差し替え（2026-08-03 追加）───────────────────────────────
対象は認証まわりの9画面（login / login_pin / login_senderr / regist /
regist_temp / pass_reset ×4）。**テンプレートは1枚も触っていない。**
この1ブロックを消せば、元の金色の文字ロゴに戻る。
★なぜ HTML を書き換えず CSS でやるか
同じ `A-amuse` が9枚に散っている。9枚を書き換えると、
1枚直し忘れただけで画面ごとにロゴが違う、という事故になる。CSSなら1か所。
★文字を消さずに隠す理由
`A-amuse` の文字は DOM に残したまま、画面の外へ押し出して隠す。
読み上げソフトと検索エンジンには「A-amuse」と伝わる。
画像に差し替えたせいでサイト名が読み取れなくなる、という事故を避ける。
★大きさの根拠
元画像 1024×288（3.5556:1）。幅240px → 高さ 67.5px。
ロゴの置き場所は左右16pxの余白を除いた約370px。240pxなら余裕をもって収まる。 */
.v2-auth__brand b{
width:240px;height:67.5px;margin:0 auto; /* text-align:center では効かないので auto */
background:url('/img/v2/logo_wordmark.png') no-repeat center/contain;
text-indent:-999em;overflow:hidden;white-space:nowrap; /* 文字だけ画面外へ */
text-shadow:none} /* 上の行の影が縁に滲むのを止める */
.v2-auth__main{flex:1}
/* 中身は暗い箱にまとめて、写真の上でも読めるようにする */
.v2-auth .v2-form,.v2-auth .v2-menu,.v2-auth .v2-alert,.v2-auth .v2-btns,.v2-auth .v2-lead{
margin-left:16px;margin-right:16px}
.v2-auth .v2-title{padding-left:16px;padding-right:16px}
.v2-auth .v2-foot{margin-left:16px;margin-right:16px}
/* ── 表示言語の切替えを「一番上」に出す（ログイン画面だけ・2026-09-02・Satoru 指示）──
「下すぎる」。★**まだ言語を選べていない人が最初に見る場所**なので、看板より上に置く。
★色と形は `.v2-lang`（フッターと同じ）をそのまま使う。**ここで色を作らない**
——同じ見た目のものが画面に2つあって色だけ違う、という形にしないため。
★下（フッター）の同じ箱は隠す。**HTML からは消していない**——
inc_footer_v2.html は44枚が共有していて、ログインだけ抜くことができないため。
★`.v2-langtop` を挟んでいるのは、`class="v2-lang"` の書き方を変えられないから
（`scripts/i18n/build.py` がその文字列そのもので「いまの言語」の印を差し替える）。 */
.v2-langtop{padding:12px 16px 0}
.v2-langtop .v2-lang{margin-top:0;justify-content:center}
.v2-auth--langtop .v2-foot .v2-lang{display:none}
/* ══ フレンド画面（2026-08-04 追加）══════════════════════════════════
1行に「名前＋プレイヤーID」と「ボタン」を並べる。
★名前が長くても、ボタンが押せなくならないようにする（ボタンを縮ませない）。 */
.v2-sec{margin:18px 13px 8px;font-size:12.5px;font-weight:900;color:var(--v2-gold);
letter-spacing:.04em}
.v2-frow{display:flex;align-items:center;gap:10px;padding:11px 13px;
border-bottom:1px solid var(--v2-hair)}
.v2-frow:last-child{border-bottom:0}
.v2-frow__n{flex:1;min-width:0} /* 名前側だけ縮む */
.v2-frow__n b{display:block;font-size:14px;color:var(--v2-ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-frow__id{display:block;margin-top:2px;font-family:var(--v2-mono);
font-size:11.5px;color:var(--v2-muted);letter-spacing:.08em}
.v2-frow__b{flex:none;display:flex;gap:6px} /* ボタンは縮まない */
.v2-mini{min-width:56px;min-height:36px;padding:0 12px;border-radius:9px;
border:1.5px solid var(--v2-hair);background:#271425;color:var(--v2-ink);
font-size:12.5px;font-weight:900;font-family:inherit;cursor:pointer}
.v2-mini--ok{background:linear-gradient(135deg,var(--v2-red,#ff2b4d),#ff8f1f);
border-color:transparent;color:#fff}
.v2-mini--ng{color:#FF9AAA;border-color:rgba(255,43,77,.35)}
/* ══════════════ ホールの世界（ホーム）2026-08-08 ══════════════
ユーザー決定のIA変更: ホーム＝ホール。紫のホール世界に店舗の建物が立ち、
タップで島えらび（次スライスで機種ロゴのグリッドになる）へ入る。
手本＝777スロットセブンのロビー。素材は assets_in/hall/store_front.png を
マゼンタ抜きした /img/v2/store_front.webp（看板は無地＝文字はCSSで重ねる）。
★このブロックは .v2-app.is-home / .v2-bldg 配下だけに効く＝ホーム以外は不変。
★看板の文字位置は絵の実測値（白パネル: 上=横13.6〜85.9%・縦11.6〜31.7% /
マーキー=横10.6〜88.9%・縦41.0〜50.3%。抜きスクリプトで計測）。
■ 戻し方: このブロックを消せば元のホーム（キャラと台座）に戻る。 */
/* 世界の絵（ホームだけ。--v2-bg より後勝ち） */
.v2-app.is-home .v2-bg__img{background-image:url('/img/v2/hall_bg_world.webp?v=0c60b4fa')}
/* 旧ホームの主役（キャラ・台座）は建物と入れ替え */
.v2-app.is-home .v2-home__stage,
.v2-app.is-home .v2-home__char{display:none}
/* 建物＝入口 */
.v2-bldg{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
width:min(78%,340px);aspect-ratio:1/1;z-index:4;
display:block;text-decoration:none;-webkit-tap-highlight-color:transparent}
.v2-bldg:active{transform:translate(-50%,-50%) scale(.97)}
.v2-bldg__img{width:100%;height:100%;display:block;
filter:drop-shadow(0 18px 30px rgba(43,16,77,.45));
animation:v2-bldg-float 4.5s ease-in-out infinite alternate}
@keyframes v2-bldg-float{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.v2-bldg__img{animation:none}}
/* 看板（上の大パネル）。手本と同じく1文字ずつ色を変える */
.v2-bldg__sign{position:absolute;left:16%;right:16%;top:12.2%;height:18.6%;
display:flex;align-items:center;justify-content:center;gap:.06em;
font-weight:900;font-size:min(13vw,48px);line-height:1;
animation:v2-bldg-float 4.5s ease-in-out infinite alternate}
.v2-bldg__sign i{font-style:normal;
text-shadow:2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff,
0 4px 8px rgba(43,16,77,.35)}
.v2-bldg__sign i:nth-child(1){color:#FF5A5F}
.v2-bldg__sign i:nth-child(2){color:#FFB020}
.v2-bldg__sign i:nth-child(3){color:#35C24D}
.v2-bldg__sign i:nth-child(4){color:#3B82F6}
/* マーキー（電球枠の中） */
.v2-bldg__marq{position:absolute;left:23%;right:23%;top:41.6%;height:8.6%;
display:flex;align-items:center;justify-content:center;
font-weight:900;font-size:min(6vw,22px);letter-spacing:.04em;color:#C2410C;
animation:v2-bldg-float 4.5s ease-in-out infinite alternate}
/* 入場の合図 */
.v2-bldg__hint{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);
padding:6px 16px;border-radius:999px;white-space:nowrap;
background:rgba(43,16,77,.60);border:1px solid rgba(255,255,255,.35);
color:#fff;font-size:12px;font-weight:900;
animation:v2-bldg-hint 1.6s ease-in-out infinite alternate}
@keyframes v2-bldg-hint{from{opacity:.75}to{opacity:1}}
/* ── 上のバー: ホームも濃紺の平面バーに（台一覧と同じ見た目）──
★同じ指定が data/css/aamuse_v2_list.css（#index 用）にもある。直すときは両方直すこと。
（list.css は台一覧しか読まないため、共通化するとどちらかの画面を巻き込むリスクが
あり、いまは複製で持つ。方向確定後の統合スライスで1か所に寄せる） */
.v2-app.is-home .v2-hud{aspect-ratio:auto;height:52px;container-type:normal;
display:flex;align-items:center;gap:7px;padding:0 12px;
background:#2B2340;border-bottom:1px solid rgba(255,255,255,.14);color:#FFFFFF}
.v2-app.is-home .v2-hud .v2-slot{position:static;left:auto;top:auto;width:auto;height:auto;
padding:0;overflow:visible}
.v2-app.is-home .v2-slot--face{order:1;width:32px;height:32px;flex:none}
.v2-app.is-home .v2-slot--face .ic{width:32px;height:32px;border:1px solid rgba(255,255,255,.35)}
.v2-app.is-home .v2-slot--name{order:2;max-width:96px}
.v2-app.is-home .v2-slot--name .txt{font-size:12px;color:#FFFFFF;text-shadow:none}
.v2-app.is-home .v2-slot--name a{font-size:12px;color:#FFC93C;text-shadow:none}
.v2-app.is-home .v2-slot--lv{order:3;flex:none;background:#FFC93C;border-radius:999px;
min-width:26px;height:20px;padding:0 7px;justify-content:center}
.v2-app.is-home .v2-slot--lv .txt{font-size:11px;color:#452F05;text-shadow:none}
.v2-app.is-home .v2-slot--exp{display:none}
.v2-app.is-home .v2-slot--achip{order:4;margin-left:auto}
.v2-app.is-home .v2-slot--anum{order:5}
.v2-app.is-home .v2-slot--cchip{order:6;margin-left:6px}
.v2-app.is-home .v2-slot--cnum{order:7}
.v2-app.is-home .v2-hud .v2-chip{width:18px;height:18px;display:grid;place-items:center;
background:#FFC93C;border-radius:50%;font-size:10px;color:#452F05;text-shadow:none}
.v2-app.is-home .v2-hud .num{font-size:12.5px;color:#FFFFFF;text-shadow:none}
html.v2-num-wait .v2-app.is-home .v2-hud .num{visibility:visible}
/* 下タブもホームは濃紺（台一覧と同じ見た目。同上の複製注意） */
.v2-app.is-home .v2-tabs{background:#2B2340;border-top:1px solid rgba(255,255,255,.14);
box-shadow:0 -4px 14px rgba(43,16,77,.35)}
.v2-app.is-home .v2-tab{color:rgba(255,255,255,.72);text-shadow:none}
.v2-app.is-home .v2-tab.on{color:#FFC93C;text-shadow:none}
/* ── 左の縦パネル（2026-08-08・ユーザー指示: 参考動画の左端の型）──
参考動画（手本アプリの横画面ロビー）の左端＝縦に積んだ小さなボタンのパネルを、
縦画面の左側に移す。中身は既存のレール（お知らせ/フレンド/チャット/マルチ/
ランキング/プレゼントBOX/ミッション）そのまま＝機能の増減なし。
建物は右へ 56% に寄せ、パネル(幅74px)との重なりを避ける。 */
.v2-app.is-home .v2-rail{
left:8px;right:auto;top:64px;
background:rgba(43,16,77,.55);
border:1px solid rgba(255,255,255,.28);
border-radius:16px;padding:9px 4px;gap:9px}
.v2-app.is-home .v2-rail a{width:64px}
/* 建物はパネルの右の残り幅の中央へ */
.v2-bldg{left:56%;width:min(72%,300px)}