/* ============================================================================
明るい世界の外枠（v3）。2026-08-09 新規。
■ 何のためか
3Dロビーがホームになったのに、その先の12画面が**黒と金の古い見た目**のままで、
行き来するたびに世界が切り替わってしまう（ユーザー指摘・2026-08-09）。
ここで**外枠（上のバー・下タブ・下地）だけ**を明るい世界に合わせる。
中身（各画面の本文）は画面ごとに別途。
■ 色の出どころ
3Dロビーの実際の画面から測った色 = docs/DESIGN_TOKENS.md。
目分量の値は1つも無い。変えるときは DESIGN_TOKENS.md も一緒に直すこと。
■ やり方（なぜ上書きなのか）
既存の aamuse_v2_shell.css は45KBあり、細かく調整されている。
直接書き換えると、直したはずのものが戻る事故が起きやすい。
そこで**変数の入れ替え＋数か所の上書き**だけにした。
★戻し方: inc_head_v2.html からこのファイルの読み込み1行を消すだけで、
元の黒と金の見た目に完全に戻る。
■ 触っていないもの
画面の構造（HTML）・下タブの行き先・お金の表示の中身。
位置と色を変えただけで、押せる場所と行き先は1つも変えていない。
============================================================================ */
/* ── ① 色を入れ替える（これだけで大半が明るくなる）───────────────────── */
:root{
--v2-ink:#3A2E4A; /* 本文。白面で12.58:1・紙で11.77:1 */
--v2-muted:#77698A; /* 薄字。白面で5.03:1 */
--v2-paper:#FBF7EF; /* 画面の下地（紙） */
--v2-face:#FFFFFF; /* カードの面 */
--v2-hair:#E4DACB; /* 罫線。面ではなく縁で作る */
/* ★--v2-gold は「金色の文字」として使われている。明るい地では #FFD45E が読めないので
濃い琥珀に置き換える（紙の上で 4.9:1）。金の“面”が要る所は下で個別に指定する。 */
--v2-gold:#B45309;
/* 明るい世界の追加色（DESIGN_TOKENS.md より） */
--v3-sky:#EAF4FF; /* ロビーから続く画面の地 */
--v3-sunken:#F3EEE4; /* 沈んだ面（入力欄・数字の井戸） */
--v3-gold-face:#FFC93C;/* 金の面 */
--v3-gold-ink:#4A3208; /* 金の面の上の文字。7.81:1 */
--v3-blue:#2E9BD6;
--v3-shadow:0 2px 8px rgba(58,46,74,.08);
}
/* ── ② 下地 ───────────────────────────────────────────────────────── */
.v2-stage{background:var(--v3-sky)}
.v2-app{background:var(--v3-sky)}
.v2-bg{background:var(--v3-sky)}
/* ホーム(?home=1)以外は絵の下地を出さない。既存の指定が --v2-paper を見ているので
変数の入れ替えで足りるが、下地の色は「空」に寄せたいのでここで上書きする。 */
.v2-app:not(.is-home) .v2-bg{background:var(--v3-sky)}
/* ── ③ 上のバー（金の彫刻の絵 → 平らな明るいバー）────────────────────
これまでは bar3_top.webp という絵の上に、%指定で文字を重ねていた。
明るい世界では絵を使わず、左に名前・右に所持数を並べる（3Dロビーと同じ並び）。
★Lv と経験値は出さない: 会員データにレベルの列が無く、機能もまだ無い。
無い数字を見せない（3Dロビーでも同じ判断をしている）。 */
.v2-hud{
height:56px;min-height:56px;padding:0 12px;
background:var(--v2-paper);background-image:none;
border-bottom:1px solid var(--v2-hair);
color:var(--v2-ink);
display:flex;align-items:center;gap:8px}
/* 絵の上に置くための絶対位置をやめ、横に並べる */
.v2-hud .v2-slot{position:static;flex:none;width:auto;height:auto;
left:auto;top:auto;overflow:visible}
.v2-hud .v2-slot--lv,
.v2-hud .v2-slot--exp{display:none} /* 機能が無いので出さない */
.v2-hud .v2-slot--face{order:1;width:32px;height:32px}
.v2-hud .v2-slot--face .ic{width:32px;height:32px;border-radius:50%;
background:var(--v3-sunken);border:1px solid var(--v2-hair);box-shadow:none}
.v2-hud .v2-slot--name{order:2;flex:1 1 auto;min-width:0}
.v2-hud .v2-slot--name .txt{font-size:14px;font-weight:900;color:var(--v2-ink);
text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-hud .v2-slot--name a{color:var(--v3-blue);font-size:14px;font-weight:900;text-shadow:none}
/* 所持数。A coin は金、coin は青の丸い印を数字の左に置く。 */
.v2-hud .v2-slot--achip,
.v2-hud .v2-slot--cchip{width:20px;height:20px;border-radius:50%;
display:flex;align-items:center;justify-content:center}
.v2-hud .v2-slot--achip{order:3;background:var(--v3-gold-face)}
.v2-hud .v2-slot--cchip{order:5;background:var(--v3-blue)}
.v2-hud .v2-slot--achip .v2-chip{color:var(--v3-gold-ink)}
.v2-hud .v2-slot--cchip .v2-chip{color:#fff}
.v2-hud .v2-chip{font-size:11px;font-weight:900;background:none;border:0;
width:auto;height:auto;line-height:1;box-shadow:none;text-shadow:none}
.v2-hud .v2-slot--anum{order:4;margin-right:6px}
.v2-hud .v2-slot--cnum{order:6}
.v2-hud .v2-slot--anum .num,
.v2-hud .v2-slot--cnum .num{font-family:var(--v2-num);font-size:13px;font-weight:900;
color:var(--v2-ink);text-shadow:none;font-variant-numeric:tabular-nums}
/* 幅が狭い端末では名前を縮めて、数字を切らない（数字のほうが大事） */
@media (max-width:360px){
.v2-hud{gap:6px;padding:0 8px}
.v2-hud .v2-slot--name .txt{font-size:13px}
.v2-hud .v2-slot--anum .num,
.v2-hud .v2-slot--cnum .num{font-size:12px}
}
/* ══ ④ 下タブ ─ **出さない**（2026-08-09 ユーザー決定の実装）════════════
★決定: 「下タブは全画面から外す。入口はロビーのメニューが持つ」
ホームが3Dロビーになり、行き先はロビーの ≡ が全部持っている。
画面の下に同じ入口をもう1つ置くと、**同じ場所へ行く道が2本**になり、
どちらが正しいのか分からなくなる。
★新デザインの6画面（マイページ・設定・ガチャ・ミッション・ランキング・プレゼント）は
最初から下タブを持っていない。旧デザインの37画面だけが持っていたので、ここで揃える。
★行き止まりを作らないこと: 外す前に、戻る道が無かった画面へ戻るボタンを足した
（お問い合わせ / メールアドレスの変更）。詳細は docs/TOP_BAR.md。
★戻すとき: この display:none の1行を消せば、下タブが元どおり出る。
下の見た目の指定（絵文字・色）はそのまま残してある。 */
.v2-tabs{display:none}
/* 以下は「戻したときのための見た目」。いまは出ないので効かない。
★アイコンの絵は金の宝石で、明るい地には合わない（実測: 明るさ99〜171/255で
設定・お問い合わせは白地だと沈む）。3Dロビーのメニューと同じ絵文字に揃える。 */
.v2-tabs{
background:var(--v2-paper);
border-top:1px solid var(--v2-hair);
box-shadow:0 -4px 14px rgba(58,46,74,.08)}
.v2-tab{color:var(--v2-muted);text-shadow:none}
.v2-tab.on{color:#B45309;text-shadow:none}
.v2-tab i{background-image:none !important;
display:flex;align-items:center;justify-content:center;
font-size:19px;line-height:1;font-style:normal}
.v2-tab--home i::before{content:"🏠"}
.v2-tab--mypage i::before{content:"🙍"}
.v2-tab--gacha i::before{content:"🎡"}
.v2-tab--settings i::before{content:"⚙️"}
.v2-tab--contact i::before{content:"✉️"}
/* 選んでいるタブは絵文字も少し大きく見せる（色だけに頼らない） */
.v2-tab.on i{transform:scale(1.12)}
/* ── ⑤ 画面の下の規約リンク ───────────────────────────────────────── */
.v2-foot{border-top-color:var(--v2-hair)}
.v2-foot a,.v2-foot small{color:var(--v2-muted)}
.v2-foot a:active{color:var(--v2-ink)}
/* ── ⑥ 画面いっぱいの下地 ─────────────────────────────────────────
html と body が #0b0810（ほぼ黒）を直に持っている。変数を通していないので
ここで上書きする。これをやらないと、画面の端やスクロールの外が黒く出る。 */
/* ★元の指定が html:has(.v2-stage) / html.v2-lock という強い書き方なので、
同じ強さで書かないと勝てない（実測で確認: 単に html,body と書くと負ける）。 */
html,body,
html:has(.v2-stage),
html.v2-lock,
html:has(.v2-stage) body,
html.v2-lock body{background:var(--v3-sky)}
/* ══ ページ自体を動かさない（2026-08-09・ユーザー報告「操作していたら違和感」）═══
■ 何が起きていたか
ページを固定する仕組みは前からある（`html:has(.v2-stage)` / `html.v2-lock`）。
ただし**`.v2-stage` を持つ画面にしか効かない**。
新しいデザインの画面（ゲームをえらぶ / チャット / フレンド / お知らせ /
お問い合わせ / マイページ / 設定）は `.v2-stage` を持たないため固定されず、
iOS で**ページ全体がゴムのように動いて**、上のバーごと下がり隙間ができていた。
■ 直し方
同じ考え方を新しい画面にも効かせる。中の一覧だけが動き、ページは動かない。
■ ★body を position:fixed にはしない（v2 の仕組みとの違い）
この中には文字を打つ画面（チャット・お問い合わせ・フレンド）がある。
body を固定すると、キーボードが出たとき入力欄がキーボードの裏に隠れる恐れがある。
`overflow:hidden` と `overscroll-behavior:none` だけで、
「ページが動く・跳ね返る」は止まる。
■ :has() に未対応の端末用に、下の JS が html.v3-lock を付ける（inc_head_v2.html）。
■ 戻すとき: この節を丸ごと消せば元どおり動くようになる。 */
html:has(.v3),
html:has(body#chat),
html:has(body#gamelist),
html.v3-lock{height:100%;overflow:hidden;overscroll-behavior:none}
html:has(.v3) body,
html:has(body#chat) body,
html:has(body#gamelist) body,
html.v3-lock body{margin:0;
height:100%; /* svh に未対応の古いブラウザ用 */
height:100svh; /* ブラウザのバーが出ていても隠れない高さ */
overflow:hidden;overscroll-behavior:none}
/* 高さの基準を dvh から「画面ぴったりの body の100%」へ。
dvh はアドレスバーの出入りで値が変わり、そのたびに画面がガタつくため。 */
html:has(.v3) .v3,
html.v3-lock .v3{height:100%}
/* ── ⑦ 共通部品（入力欄・ボタン・確認欄）───────────────────────────
これらは #1D0F1C（沈んだ黒）を直に持っている。明るい世界では
「白い面＋細い縁」で作る（DESIGN_TOKENS.md: 面ではなく縁で作る）。
★押せる場所・大きさ・並びは変えていない。色だけを変えている。 */
.v2-input,.v2-select,.v2-textarea{
background:var(--v3-sunken);border-color:var(--v2-hair);color:var(--v2-ink)}
.v2-input::placeholder,.v2-textarea::placeholder{color:var(--v2-muted)}
.v2-select option{background:#fff;color:var(--v2-ink)}
.v2-value{background:var(--v3-sunken);border-color:var(--v2-hair);color:var(--v2-ink)}
.v2-check{background:var(--v2-face);border-color:var(--v2-hair)}
.v2-hall__row{background:var(--v3-sunken)}
.v2-menu a:active{background:var(--v3-sunken)}
.v2-ask__btns button{background:var(--v2-face);border-color:var(--v2-hair);color:var(--v2-ink)}
.v2-alert--info{background:var(--v2-face);border-color:var(--v2-hair);color:var(--v2-muted)}
.v2-alert--info b{color:var(--v2-ink)}
/* ★主ボタン（送信・決定）─ 2026-08-09 直し（ユーザー報告
「メールを送るなど、前のボタンが使われていてデザインが合ってません」）
これまで見落としていた。`.v2-btn` には旧デザインの**赤金の絵**（btn_play.png）が
border-image で貼られており、明るい画面の中でここだけ黒赤金のまま残っていた。
絵を外して、3Dロビーの入場ボタンと同じ「金の面のピル」に揃える。
★高さは変えない: 元は 21+22+21 = 64px。同じ padding と line-height を使う。
★戻し方: この節を消せば元の赤金の絵に戻る。 */
.v2-btn:not(.v2-btn--sub){
border-image:none;border-style:none;border-width:0;
padding:21px 18px;line-height:22px;
background:var(--v3-gold-face);
color:var(--v3-gold-ink);
box-shadow:var(--v3-shadow);
text-shadow:none}
/* ★副ボタン（修正に戻る・キャンセル）─ こちらは**読めなくなっていた**。
`#271425`（沈んだ黒）の面に、明るい世界の濃い文字色が乗るため、
暗い地に暗い文字＝ほぼ見えない。エラー画面・ログイン画面など10画面以上で使われている。
白い面＋細い縁にして、主ボタン（金）と押し間違えない見た目を保つ。 */
.v2-btn--sub{
background:var(--v2-face);
border:1.5px solid var(--v2-hair);
color:var(--v2-ink);
box-shadow:var(--v3-shadow);text-shadow:none}
/* 見出し・カード・メニューの面（page.css が var(--v2-face) を見ているので
変数の入れ替えで白になる。影だけ明るい世界のものに揃える） */
.v2-card,.v2-menu,.v2-panel{box-shadow:var(--v3-shadow)}
.v2-note{background:var(--v2-face);border-color:var(--v2-hair);color:var(--v2-muted)}
.v2-note b{color:var(--v2-ink)}
/* ══ ⑧ 上部の共通バー ─ Figma Make 案どおり（2026-08-09・ユーザー指示）═══════
★正本 = Figma Make の案（`tmp/figma_info/mypage.html` ほか）。
画面から**実値を転記**した。勘で置いた数値は1つも無い。
上部バー 高さ56px / 白 #FFFFFF / 下線 1px #E4DACB
影 0 1px 6px rgba(58,46,74,.06) / padding 0 16px / gap 12px
├ 戻る 44×44 丸 / 白 / 枠 1px #E4DACB / 影 0 2px 8px rgba(58,46,74,.08)
└ 題名 金のピル #FFC93C / 文字 #4A3208 / 角999 / 余白 6px 20px
14px 太さ800 / 影 0 2px 8px rgba(255,201,60,.28)
★★ 案には**残高（A coin / coin）が無い**。だから上の財布バー（.v2-hud）は出さない。
残高はマイページのカードと3Dロビーで見る、という案の考え方に従う。
**戻すとき**: 下の `.v2-hud{display:none}` の1行を消せば、財布バーが元どおり出る。
★押せる大きさ44pxは案のまま（iOSの目安を満たす）。 */
.v2-hud{display:none}
.v2-title{
height:56px;padding:0 16px;gap:12px;
background:var(--v2-face);
border-bottom:1px solid var(--v2-hair);
box-shadow:0 1px 6px rgba(58,46,74,.06);
align-items:center}
.v2-title h1{
height:auto;min-height:0;
border:0;border-image:none;border-width:0;
background:var(--v3-gold-face);
color:var(--v3-gold-ink);
border-radius:999px;padding:6px 20px;
text-shadow:none;font-size:14px;font-weight:800;
white-space:nowrap;
box-shadow:0 2px 8px rgba(255,201,60,.28)}
.v2-back{
width:44px;height:44px;
background:var(--v2-face);
border:1px solid var(--v2-hair);border-radius:50%;
filter:none;box-shadow:0 2px 8px rgba(58,46,74,.08);
display:flex;align-items:center;justify-content:center;
font-size:0}
/* ★矢印は**文字で描かない**（2026-08-09 直し・ユーザー報告「戻るボタンがおかしい」）。
元は content:"‹" を26pxで出していたが、「‹」の形・太さ・中心の位置は
端末のフォント次第で大きく変わる。日本語フォントでは全角ぶんの余白を持つものがあり、
丸の中で**左上にずれた妙な形**になっていた。
線2本で自分で描けば、どの端末でも同じ形・同じ位置になる。 */
.v2-back::before{content:"";display:block;
width:10px;height:10px;
border-left:2.5px solid var(--v2-ink);
border-bottom:2.5px solid var(--v2-ink);
border-radius:1px;
transform:rotate(45deg);
margin-left:3px} /* 「く」の字は右に寄って見えるので中心を合わせる */
.v2-back:active{transform:scale(.94);background:var(--v3-sunken);filter:none}
/* ── ⑨ 1項目1枠のメニュー（金の枠の絵 → 白いカード）──────────────────
★元の指定が `.v2-menu a, .v2-menu a:last-child` と同じ強さで書かれているので、
こちらも同じ形で並べないと勝てない（page.css のコメントに「3回同じ失敗をした」
と残っている箇所。順序で勝たせる必要がある）。 */
.v2-menu a,
.v2-menu a:last-child{
background:var(--v2-face);
border-style:solid;border-width:1px;border-color:var(--v2-hair);
border-image:none;
border-radius:14px;
padding:15px 14px;
box-shadow:var(--v3-shadow)}
.v2-menu b{color:var(--v2-ink)}
.v2-menu .ar{color:var(--v2-muted)}
/* ══ 認証まわりのロゴ → DMMぱちタウン（2026-08-19）═══════════════════════
aamuse_v2_page.css は … を A-amuse のロゴ画像に差し替えている（9画面共通）。
売り先が DMMぱちタウンになったので、画像をやめて**文字でロゴを描く**。
・「DMM」= 黒の極太 / 「ぱちタウン」= 白い文字に黒の外枠（ユーザー提示の画像どおり）
・ の中身は「DMMぱちタウン」の1語。前半3文字と後半をCSSだけで分けられないので、
::before に「DMM」、::after に「ぱちタウン」を描き、元の文字は画面外へ押し出す。
★正式なロゴ画像を受け取ったら、ここを background-image に差し替える。 */
.v2-auth__brand b{
width:auto;height:auto;margin:0 auto;
text-indent:0;overflow:visible;white-space:nowrap;text-shadow:none;
display:inline-flex;flex-direction:column;align-items:center;line-height:1;gap:.1em;
color:transparent;font-size:0;
/* ★暗い写真の上では黒い「DMM」が沈む（本番で確認）。白い座布団を敷いて、
どんな背景でも読めるようにする。角丸・余白は控えめに */
background:#fff;border-radius:12px;padding:10px 18px 12px;
box-shadow:0 2px 10px rgba(0,0,0,.25)}
.v2-auth__brand b::before{content:"DMM";display:block;
font:900 44px/0.9 "Hiragino Kaku Gothic StdN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
letter-spacing:-.06em;color:#000;transform:scaleX(1.05)}
.v2-auth__brand b::after{content:"ぱちタウン";display:block;
font:900 27px/1 "Hiragino Kaku Gothic StdN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
letter-spacing:.02em;color:#fff;
-webkit-text-stroke:.14em #000;paint-order:stroke fill;text-shadow:.02em .02em 0 #000}
.v2-auth__brand span{color:var(--v2-muted)}