/* UI の絵（届いた絵ごとに効く）。main.js が art/ui/manifest.json にある絵の名前ごとに body に ui-<名前> を付ける。届いていない所は style.css の形のまま（％の板・ストックは 4 人ぶん そろってから） */
/* 背景 */
body.ui-title_bg #title{background:url(art/ui/title_bg.webp) center/cover no-repeat}
body.ui-select_bg #sel,body.ui-select_bg #stg,body.ui-select_bg #net{background:url(art/ui/select_bg.webp) center/cover no-repeat}
body.ui-result_bg #result{background:url(art/ui/result_bg.webp) center/cover no-repeat}
@media (orientation:portrait){
  body.ui-title_bg_tall #title{background-image:url(art/ui/title_bg_tall.webp)}
  body.ui-result_bg_tall #result{background-image:url(art/ui/result_bg_tall.webp)}
}
/* 題字（文字入りの絵。画面の文字は 読み上げ用に残して 見えなくする） */
body.ui-logo_text .logo{background:url(art/ui/logo_text.webp) center/contain no-repeat;width:min(520px,86vw);aspect-ratio:2/1;transform:none;filter:none}
body.ui-logo_text .logo span{visibility:hidden}
/* ボタン */
body.ui-btn_main .mbtn.main,body.ui-btn_main .go{background:url(art/ui/btn_main.webp) center/100% 100% no-repeat;border-color:transparent;box-shadow:none}
body.ui-btn_main .mbtn.main:active,body.ui-btn_main .go:active{background-image:url(art/ui/btn_main_on.webp)}
body.ui-btn_sub .mbtn:not(.main),body.ui-btn_sub .back,body.ui-btn_sub .op,body.ui-btn_sub .tbtn{background:url(art/ui/btn_sub.webp) center/100% 100% no-repeat;border-color:transparent;box-shadow:none}
body.ui-btn_sub .mbtn:not(.main):active,body.ui-btn_sub .back:active,body.ui-btn_sub .op.on{background-image:url(art/ui/btn_sub_on.webp)}
body.ui-btn_round .ibtn{background:url(art/ui/btn_round.webp) center/100% 100% no-repeat;border-color:transparent}
body.ui-btn_round .ibtn:active{background-image:url(art/ui/btn_round_on.webp)}
/* 丸ボタンの印（4 列×2 行：音あり・音なし・曲あり・曲なし・設定・とじる・もどる・あそび方）。今は もどる と あそび方 と 音・曲（あり の絵）だけ */
body.ui-icons .back::before,body.ui-icons #bHelp b::before,body.ui-icons #bSnd::before,body.ui-icons #bBgm::before{content:"";display:inline-block;width:1.2em;height:1.2em;vertical-align:-.25em;margin-right:.3em;background:url(art/ui/icons.webp) 0 0/400% 200% no-repeat}
body.ui-icons .back::before{background-position:66.666% 100%}
body.ui-icons #bHelp b::before{background-position:100% 100%}
body.ui-icons #bSnd::before{background-position:0 0}
body.ui-icons #bBgm::before{background-position:66.666% 0}
/* 板（9 分割でのばす） */
/* 板は 外へ はみ出して描く（outset：中の字の場所と 画面の大きさを 変えない＝はみ出し・スクロールを 増やさない） */
body.ui-panel #selInfo{border-color:transparent;background:none;border-image:url(art/ui/panel.webp) 25% fill/16px/8px stretch}
body.ui-panel .netBox{border:0 solid transparent;border-image:url(art/ui/panel.webp) 25% fill/18px/18px stretch}
body.ui-panel_light #helpBody{border:0 solid transparent;border-image:url(art/ui/panel_light.webp) 25%/14px/14px stretch} /* 明るい板の中を ぬると 白い字が 読めない → 枠だけ */
/* キャラ選び・ステージ選びの札の枠（窓の ぬけた枠を 上に重ねる） */
body.ui-card_char .cc::before,body.ui-card_char .sc::before{content:"";position:absolute;inset:-4px;pointer-events:none;z-index:3;background:url(art/ui/card_char.webp) center/100% 100% no-repeat}
body.ui-card_char .cc.on::before{background-image:url(art/ui/card_char_on.webp)}
body.ui-card_stage .sc::before{background-image:url(art/ui/card_stage.webp)}
body.ui-card_stage .sc.on::before{background-image:url(art/ui/card_stage_on.webp)}
body.ui-card_char .cc,body.ui-card_char .sc{border-color:transparent}
body.ui-card_char .cc.on,body.ui-card_char .sc.on{box-shadow:none}
/* 試合の画面：％の板・ストックの印・時間の板・知らせの帯 */
body.ui-hud_plate_p4 .pn{background:url(art/ui/hud_plate_p1.webp) center/100% 100% no-repeat;border-color:transparent}
body.ui-hud_plate_p4 #panels .pn:nth-child(2){background-image:url(art/ui/hud_plate_p2.webp)}
body.ui-hud_plate_p4 #panels .pn:nth-child(3){background-image:url(art/ui/hud_plate_p3.webp)}
body.ui-hud_plate_p4 #panels .pn:nth-child(4){background-image:url(art/ui/hud_plate_p4.webp)}
body.ui-stock_polka .pn .stk{height:13px}
body.ui-stock_polka .pn .stk i{width:13px;height:13px;border:0;border-radius:0;background:center/contain no-repeat}
body.ui-stock_polka .pn[data-ch=hayate] .stk i{background-image:url(art/ui/stock_hayate.webp)}
body.ui-stock_polka .pn[data-ch=gantetsu] .stk i{background-image:url(art/ui/stock_gantetsu.webp)}
body.ui-stock_polka .pn[data-ch=lumina] .stk i{background-image:url(art/ui/stock_lumina.webp)}
body.ui-stock_polka .pn[data-ch=polka] .stk i{background-image:url(art/ui/stock_polka.webp)}
body.ui-timer_plate #timer{background:url(art/ui/timer_plate.webp) center/100% 100% no-repeat;border-color:transparent}
body.ui-banner #big:not(:empty){background:url(art/ui/banner.webp) center/min(100%,720px) auto no-repeat}
/* さわる操作：スティックと 6 つのボタン（3 列×2 行：こうげき・ひっさつ・ジャンプ・ガード・スマッシュ・つかみ）。文字は 絵の印のかわりに 小さく下へ */
body.ui-stick_base #stick{background:url(art/ui/stick_base.webp) center/100% 100% no-repeat;border-color:transparent}
body.ui-stick_knob #stick i{background:url(art/ui/stick_knob.webp) center/100% 100% no-repeat;box-shadow:none}
body.ui-pad_buttons .pb{background:url(art/ui/pad_buttons.webp) 0 0/300% 200% no-repeat;border-color:transparent;box-shadow:none;box-sizing:border-box;padding:0 0 1px;display:flex;align-items:flex-end;justify-content:center;font-size:9.5px;text-shadow:0 1px 2px #000,0 0 3px #000;overflow:visible}
body.ui-pad_buttons .pb>*:first-child,body.ui-pad_buttons .pb{line-height:1}
body.ui-pad_buttons .pb{padding-bottom:0}body.ui-pad_buttons .pb::after{content:none}
/* ボタンの字は 下の かざりの上に 紺の下じきで（外へ出すと 画面の下で 切れた） */
body.ui-pad_buttons .pb{align-items:flex-end}body.ui-pad_buttons .pb span,body.ui-pad_buttons .pb b{transform:translateY(3px);background:rgba(8,12,40,.8);border-radius:6px;padding:0 4px} /* 正方形のまま（前は 上の余白で たてに のびていた）。字は 下の かざりの上に 小さく */
body.ui-pad_buttons .pa{background-position:0 0}
body.ui-pad_buttons .pbb{background-position:50% 0}
body.ui-pad_buttons .pj{background-position:100% 0}
body.ui-pad_buttons .pg{background-position:0 100%}
body.ui-pad_buttons .ps{background-position:50% 100%}
body.ui-pad_buttons .pz{background-position:100% 100%}
/* 結果：順位のかざり（4 列×1 行：金・銀・銅・紺）。数字は 画面の文字を上に重ねる */
body.ui-rank_ribbon .rr .rk{background:url(art/ui/rank_ribbon.webp) 0 0/400% 100% no-repeat;width:34px;height:34px;display:grid;place-items:center;font-size:15px;color:#1a1200}
body.ui-rank_ribbon .rr:nth-child(2) .rk{background-position:33.333% 0}
body.ui-rank_ribbon .rr:nth-child(3) .rk{background-position:66.666% 0}
body.ui-rank_ribbon .rr:nth-child(4) .rk{background-position:100% 0;color:#fff}
/* 札の名前：枠の絵の 名札の上に 字を出す（枠の下に かくれない） */
body.ui-card_char .cc b,body.ui-card_char .sc b{z-index:4;background:none;text-shadow:0 1px 2px #000,0 0 3px #000}
body.ui-card_char .cc.on::after{z-index:4}
/* えらんだ ボタン：絵は 明るい青の板。字は 白にして 黄色の ふちで えらんだ事を はっきり */
body.ui-btn_sub .op.on{color:#fff;text-shadow:0 1px 2px #0a1240;box-shadow:0 0 0 3px #ffd23f;border-radius:10px}
/* ステージの札：名前は 枠の絵の 名札（下の 帯）の上に。説明の字は 枠の外の線に かかるので 名札の上へ。おまかせ（横長）は 枠を のばすと くずれるので 前の形のまま */
body.ui-card_stage .sc:not(.rnd) b{bottom:9%;left:7%;right:7%;padding:0 6px;background:none;line-height:1.15}
body.ui-card_stage .sc:not(.rnd) small{position:absolute;bottom:100%;left:6px;right:0;padding:0 0 2px}
body.ui-card_stage .sc.rnd::before{content:none}
body.ui-card_stage .sc.rnd{border-color:rgba(255,255,255,.35)}
/* 絵のボタンは ふちが 太いので、小さい字が 下のふちに かからないよう 内へ（字は 影で 読みやすく） */
body.ui-btn_main .mbtn.main,body.ui-btn_sub .mbtn:not(.main){padding:12px 18px 18px}
body.ui-btn_main .mbtn.main small{color:#fff;text-shadow:0 1px 2px #7a2a00,0 0 3px #7a2a00}
body.ui-btn_sub .mbtn:not(.main) small{color:#fff;text-shadow:0 1px 2px #0a1240}
/* タイトルの絵の上の 字（一行の説明・曲の名前）：絵の上でも 読めるように 下じきを付ける */
body.ui-title_bg #title .sub{background:rgba(10,16,58,.62);border-radius:10px;padding:2px 10px}
body.ui-title_bg #title .credit{background:rgba(10,16,58,.62);border-radius:8px;padding:1px 8px;color:#fff;opacity:1}
/* ％の板の絵：板の下の 灰色の かげを消す・名前は 上の かざりに かからないよう 紺の所へ下げる */
body.ui-hud_plate_p4 .pn{box-shadow:none}
body.ui-hud_plate_p4 .pn .nm{position:relative;top:1px;color:#fff;background:rgba(8,12,40,.88);border-radius:6px;padding:0 5px;line-height:1.35;text-shadow:none} /* 名前は 紺の下じきの上に（板の かざりに かかっても 読める） */
/* 明るい背景の絵（キャラ選び・結果）の上の字：読めるように 紺の下じき・かげ */
body.ui-select_bg #sel #rules{background:rgba(10,16,58,.78);border-radius:14px;padding:8px 10px}
body.ui-select_bg .bar h2,body.ui-result_bg #resSub,body.ui-result_bg #resWin{text-shadow:0 2px 0 #0a1240,0 0 6px #0a1240,0 0 12px rgba(10,18,64,.8)}
body.ui-result_bg #resSub{color:#ffe066}
@media (max-width:480px){body.ui-select_bg #sel #rules{padding:0;border-radius:8px}} /* スマホは 下じきだけ（余白で スクロールが出たため） */

/* 11/12 重さ：大きい背景は AVIF を先に（読めない端末は webp。art/ui に .avif が無い時も webp） */
body.ui-title_bg #title{background-image:url(art/ui/title_bg.webp);background-image:image-set(url(art/ui/title_bg.avif) type("image/avif"),url(art/ui/title_bg.webp) type("image/webp"))}
body.ui-select_bg #sel,body.ui-select_bg #stg,body.ui-select_bg #net{background-image:url(art/ui/select_bg.webp);background-image:image-set(url(art/ui/select_bg.avif) type("image/avif"),url(art/ui/select_bg.webp) type("image/webp"))}
body.ui-result_bg #result{background-image:url(art/ui/result_bg.webp);background-image:image-set(url(art/ui/result_bg.avif) type("image/avif"),url(art/ui/result_bg.webp) type("image/webp"))}
@media (orientation:portrait){
  body.ui-title_bg_tall #title{background-image:url(art/ui/title_bg_tall.webp);background-image:image-set(url(art/ui/title_bg_tall.avif) type("image/avif"),url(art/ui/title_bg_tall.webp) type("image/webp"))}
  body.ui-result_bg_tall #result{background-image:url(art/ui/result_bg_tall.webp);background-image:image-set(url(art/ui/result_bg_tall.avif) type("image/avif"),url(art/ui/result_bg_tall.webp) type("image/webp"))}
}