/* UI v2 の寸法と状態（docs/ui_v2.md）。main.css、skin.css、screens.css、skin2.css のあとに読む。
   時代ごとの絵は assets/ui2/skin2.css（tools/cut_ui2.py が生成）が持つ。 */

:root { --fw: 26px; --u-veil: rgba(255, 249, 234, .74); --buy-ink: #4a2c0f; --buy-off-ink: #5b4a33; --ctr-ink: #f6e9cf; --ctr-ink2: #d9c6a2; }
html[data-era='showa'] { --u-veil: rgba(255, 246, 228, .92); --buy-ink: #fff4dc; --buy-off-ink: #ffe6c7; --ctr-ink: #4a1a0c; --ctr-ink2: #7a3f22; }
html[data-era='heisei'] { --u-veil: rgba(8, 18, 60, .72); --buy-ink: #fff; --buy-off-ink: #cfe6ff; --ctr-ink: #eaf5ff; --ctr-ink2: #a9cdf0; }
html[data-era='modern'] { --u-veil: rgba(8, 6, 12, .62); --buy-ink: #fff3cf; --buy-off-ink: #e8dcc0; --ctr-ink: #fff3cf; --ctr-ink2: #c9b98e; }
html:is([data-era='magic'], [data-era='sf'], [data-era='mystic'], [data-era='cosmic']) { --u-veil: rgba(6, 10, 36, .66); --buy-ink: #fff; --buy-off-ink: #cfe0ff; --ctr-ink: #eef4ff; --ctr-ink2: #a8bfe8; }
html[data-era='final'] { --u-veil: rgba(255, 253, 247, .78); --buy-ink: #5a2412; --buy-off-ink: #6a5a45; --ctr-ink: #fbf1dc; --ctr-ink2: #e0cfae; }

/* ===== パネル ================================================================ */
.pn::after { display: none; }
.modal.pn, .modal.pn::before { --fw: 44px; }
.modal.pn { border-radius: 0; }
.m-plate.pn { --fw: 20px; }
.chara.pn, .room-win.pn { --fw: 22px; }
.portrait, .room-slot { inset: 10px; border-radius: 4px; }
.shop { padding: 14px 13px 12px; }
.dock { padding: 13px; }
.status { padding: 16px 20px; }
#hud-left .chara { background-clip: padding-box; }

/* ===== 持ち玉のカウンター ===================================================== */
#ball-counter { --ink: var(--ctr-ink); --ink2: var(--ctr-ink2); top: 4px; height: 116px; padding: 0 62px 0 54px; gap: 12px; border-radius: 0; }
#ball-counter::after { display: none; }
#ball-counter > * { position: relative; z-index: 3; }
.ctr-side { width: 196px; display: flex; align-items: center; gap: 10px; }
.ctr-orb { flex: none; width: 66px; height: 66px; background: url('../assets/icons/h_tama.webp') center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.ctr-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ctr-lab { writing-mode: horizontal-tb; font-size: 20px; letter-spacing: .08em; line-height: 1; color: var(--ink); white-space: nowrap; }
.ctr-rate { justify-content: flex-start; }
.ctr-rate-v { font-size: 18px; color: var(--ink); }
.ctr-rate-l { font-size: 13px; color: var(--ink2); }
.ctr-meta { width: 120px; }
/* 窓の高さに合わせて数字の板を小さくする */
.dg { width: 52px; height: 76px; }
.dg-strip { font-size: 56px; }
.dg-strip i { height: 76px; line-height: 76px; }
.ctr-body.long-unit .dg { width: 44px; }
.ctr-unit { font-size: 46px; }
.ctr-ball { font-size: 30px; color: var(--ctr-ink); }

/* ===== 通貨 ================================================================== */
.cur { padding: 8px 14px 8px 12px; grid-template-columns: 42px 1fr; border-radius: 0; }
.cur-ico { width: 42px; height: 42px; border-radius: 0; background: center / contain no-repeat !important; box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.cur-ico::after { content: none !important; }
.c-tickets .cur-ico { background-image: url('../assets/icons/h_tickets.webp') !important; }
.c-inori .cur-ico { background-image: url('../assets/icons/h_inori.webp') !important; }
.c-fuda .cur-ico { background-image: url('../assets/icons/h_fuda.webp') !important; }
.c-toku .cur-ico { background-image: url('../assets/icons/h_toku.webp') !important; }

/* ===== タブ ================================================================== */
.tab { height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 15px; line-height: 1.1; padding-top: 2px; }
.tab-i { width: 32px; height: 32px; background: center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); transition: transform .15s var(--ease-back); }
.tab:not(.on) .tab-i { filter: saturate(.72) brightness(.92) drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.tab.on .tab-i { transform: scale(1.14) translateY(-1px); }
.tab.locked .tab-i { filter: brightness(0) opacity(.45); }
.tab[data-id='board'] .tab-i { background-image: url('../assets/icons/h_tab_board.webp'); }
.tab[data-id='ball'] .tab-i { background-image: url('../assets/icons/h_tab_ball.webp'); }
.tab[data-id='skill'] .tab-i { background-image: url('../assets/icons/h_tab_skill.webp'); }
.tab[data-id='room'] .tab-i { background-image: url('../assets/icons/h_tab_room.webp'); }
.tab[data-id='prize'] .tab-i { background-image: url('../assets/icons/h_tab_prize.webp'); }

/* ===== 強化カード ============================================================= */
.card { grid-template-columns: 76px 1fr 104px; gap: 8px; min-height: 100px; padding: 9px 11px; border-radius: 0; overflow: visible; }
.card::before { display: none; }
.card.afford { box-shadow: none; filter: drop-shadow(0 0 calc(5px * var(--glow) * var(--user-glow)) var(--neon)); }
.card-ico { width: 76px; height: 76px; border-radius: 0; overflow: visible; color: #f1e3c4; font-size: 30px; text-shadow: 0 2px 3px #000; }
.card-ico img.art { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); transition: transform .15s var(--ease-back); }
.card:hover:not(.locked):not(.maxed) .card-ico img.art { transform: scale(1.12) rotate(-3deg); }
.card-big { grid-template-columns: 92px 1fr 104px; min-height: 122px; }
.card-big .card-ico { width: 92px; height: 104px; }
.card-big .card-ico img.art { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; }
.card-name { font-size: 18px; }
.card-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card-eff { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* レベルは台座の下に載せて、名前と効果の幅を空ける */
.card-lv { position: absolute; left: 50%; bottom: -3px; z-index: 2; transform: translateX(-50%); margin: 0; padding: 0 7px; border-radius: 9px; font: 800 12.5px/18px var(--f-round); white-space: nowrap; color: #fff6e0; background: rgba(20, 12, 6, .86); box-shadow: 0 0 0 1px rgba(255, 220, 150, .55); text-shadow: none; }
.card-lv:empty { display: none; }
.card-gl { position: relative; }
.card-desc { font-size: 13px; line-height: 1.3; }
.card-eff { font-size: 13.5px; }
.card-buy { height: 74px; padding: 0 6px; border-radius: 0; color: var(--buy-off-ink); }
.card.afford .card-buy { color: var(--buy-ink); }
.card.afford .card-buy::after { inset: 8px; border-radius: 8px; }
.card-pr { display: inline-flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; }
.card-price { font-size: 19px; letter-spacing: -.01em; }
.card-price.long { font-size: 16px; }
.card-cur { flex: none; width: 19px; height: 19px; background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.card-cur[data-cur=''] { display: none; }
.card-cur[data-cur='tama'] { background-image: url('../assets/icons/h_tama.webp'); }
.card-cur[data-cur='tickets'] { background-image: url('../assets/icons/h_tickets.webp'); }
.card-cur[data-cur='fuda'] { background-image: url('../assets/icons/h_fuda.webp'); }
.card-n { font: 800 13px var(--f-round); }
.card-n:empty { display: none; }
.card-prog { left: 96px; right: 116px; bottom: 7px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.card.locked { filter: none; opacity: 1; }
.card.locked .card-ico img.art { filter: brightness(0) opacity(.62); }
.card.locked .card-ico::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; background: url('../assets/icons/g_lock.webp') center / contain no-repeat; filter: drop-shadow(0 1px 2px #000); }
.card.locked :is(.card-name, .card-desc) { opacity: .72; }
.card.maxed { opacity: 1; }
.card.maxed .card-buy { color: var(--buy-off-ink); }

/* ===== 交換所と機能ボタン ===================================================== */
.xq { height: 74px; padding: 0 14px 0 8px; border-radius: 0; overflow: visible; }
.xq-bust { width: 72px; height: 58px; border-radius: 4px; }
.xq-bust img.art { top: -3px; width: 150px; }
.xq-go { font-size: 18px; }
.fb { height: 52px; padding: 0 10px; gap: 4px; border-radius: 0; }
.fb b { font-size: 15px; }
.fb-i { width: 38px; height: 38px; border-radius: 0; background: center / contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.fb-i::after { content: none !important; }
.fb-i[data-id='gacha'] { background-image: url('../assets/icons/h_gacha.webp') !important; }
.fb-i[data-id='bag'] { background-image: url('../assets/icons/h_bag.webp') !important; }
.fb-i[data-id='sake'] { background-image: url('../assets/icons/h_sake.webp') !important; }
.fb-i[data-id='codex'] { background-image: url('../assets/icons/h_codex.webp') !important; }
.fb-i[data-id='prestige'] { background-image: url('../assets/icons/h_prestige.webp') !important; }
.fb-i[data-id='settings'] { background-image: url('../assets/icons/h_settings.webp') !important; }
.fb:hover .fb-i { transform: scale(1.12) rotate(-4deg); }

/* ===== 台パン ================================================================ */
.bang { height: 88px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; border-radius: 0; color: var(--buy-ink); }
.bang small { color: inherit; opacity: .8; }
.bang-i { flex: none; width: 54px; height: 54px; background: url('../assets/icons/h_bang.webp') center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); transition: transform .08s; }
.bang:active .bang-i { transform: scale(.82) translateY(3px); }
.bang-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.mp-swap { color: var(--buy-off-ink); }

/* ===== 旧スキンの打ち消し ===================================================== */
.toast { border-radius: 0; overflow: visible; padding: 8px 14px 9px 12px; }
.toast-i, .toast.t-ach .toast-i, .toast.t-unlock .toast-i, .toast.t-item .toast-i, .toast.t-info .toast-i {
  flex: none; width: 44px; height: 44px; border-radius: 0; background: center / contain no-repeat; background-color: transparent; box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}
.toast-bar { display: none; }

/* ===== 持ち物の枠（レア度） =================================================== */
.co-c { border-radius: 6px; background: rgba(0, 0, 0, .14); box-shadow: none; }
.co-c::before { content: ''; position: absolute; inset: -3px; z-index: 2; pointer-events: none; background: url('../assets/ui2/rar_N.webp') center / 100% 100% no-repeat; }
.co-c.r-R::before { background-image: url('../assets/ui2/rar_R.webp'); }
.co-c.r-SR::before { background-image: url('../assets/ui2/rar_SR.webp'); }
.co-c.r-SSR::before { inset: -9px -5px -6px; background-image: url('../assets/ui2/rar_SSR.webp'); }
.co-c.r-SR { background: radial-gradient(circle at 50% 40%, rgba(255, 203, 61, .26), rgba(0, 0, 0, .14) 70%); }
.co-c.r-SSR { background: radial-gradient(circle at 50% 40%, rgba(120, 220, 255, .28), rgba(0, 0, 0, .14) 70%); }
.co-c > * { position: relative; z-index: 3; }
.co-grid { gap: 12px; padding: 8px 10px 8px 6px; }
.co-c.unk { opacity: .78; }
.co-c.sel { box-shadow: 0 0 0 3px var(--hot-border), 0 0 14px var(--hot-border); }
.co-c:hover { filter: brightness(1.1); }
.co-art { background-clip: padding-box; }

/* ===== 交換所 ================================================================ */
.ex-panel { padding: 30px 30px; border-radius: 0; }
.ex-col::before { content: ''; width: 72px; height: 72px; background: center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.ex-col:first-child::before { background-image: url('../assets/icons/h_tama.webp'); }
.ex-col:last-child::before { background-image: url('../assets/icons/h_tickets.webp'); }
.ex-arrow { height: 56px; clip-path: none; background: url('../assets/icons/h_arrow.webp') center / contain no-repeat; }
.ex-left { border-radius: 0; box-shadow: 0 0 0 3px var(--acc2), 0 4px 12px rgba(0, 0, 0, .3); }

/* ===== 図鑑と台選びの札 ======================================================= */
.mc, .cxm { border-radius: 0; }
.pr-gain, .pr-col { border-radius: 0; }
#howto { border-radius: 0; padding: 14px 12px 14px 14px; }
html:not([data-layout='portrait']) .ht-t { font-size: 19px; }
.ht-x { top: 6px; right: 8px; }
#howto::after { bottom: -8px; }
.hold-wrap { border-radius: 0; padding: 12px 14px; }

/* ===== スマホ縦 ============================================================== */
html[data-layout='portrait'] .xq { height: auto; align-self: stretch; }
html[data-layout='portrait'] .bang { flex-direction: column; gap: 0; height: auto; padding: 4px; }
html[data-layout='portrait'] .bang small { display: none; }
html[data-layout='portrait'] .bang b { white-space: nowrap; font-size: 20px; }
html[data-layout='portrait'] .bang-i { width: 58px; height: 58px; }
html[data-layout='portrait'] .bang-t { align-items: center; }

/* 持ち物の札: レア度の文字は枠の内側へ、未入手の影絵は暗い地でも読める明るさに */
.co-c i { position: absolute; left: 12px; top: 10px; z-index: 4; padding: 0 6px; border-radius: 5px; font-size: 12.5px; line-height: 18px; color: #fff !important; background: #6f7886; text-shadow: none; }
.co-c.r-R i { background: #2b6fd6; }
.co-c.r-SR i { background: #c48a06; }
.co-c.r-SSR i { background: linear-gradient(100deg, #36b6ff, #a05dff, #ff5ab0); left: 14px; top: 14px; }
.co-c.unk .co-i img.art { filter: brightness(0) invert(.5); opacity: .6; }
.co-art.unk img.art { filter: brightness(0) invert(.42); opacity: .5; }

/* ===== タイトル ============================================================== */
.ti-btn { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('../assets/ui2/buy_off_modern.webp') 72 fill / 20px stretch; color: #f6ecd6; text-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.ti-btn.primary { background: none; box-shadow: none; border-image: url('../assets/ui2/buy_on_modern.webp') 72 fill / 24px stretch; }
.ti-btn:hover { filter: brightness(1.12); }
.ti-foot { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }