/* tools/cut_ui2.py が生成。手で直さない。読み込むと時代ごとの素材が乗る */
html[data-era='ancient'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_ancient.webp') 0 0 / 320px; }
html[data-era='ancient'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='ancient'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_ancient.webp') 141 / var(--fw) stretch; }
html[data-era='ancient'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_ancient.webp') 68 68 fill / 20px stretch; }
html[data-era='ancient'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_ancient.webp') 68 68 fill / 20px stretch; }
html[data-era='ancient'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_ancient.webp') 72 72 fill / 16px stretch; }
html[data-era='ancient'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_ancient.webp') 72 72 fill / 16px stretch; }
html[data-era='ancient'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_ancient.webp') 58 58 fill / 13px stretch; }
html[data-era='ancient'] #ball-counter.pn { background: none; }
html[data-era='ancient'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_ancient.webp') 83 142 fill / 54px 86px stretch; }
html[data-era='showa'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_showa.webp') 0 0 / 320px; }
html[data-era='showa'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='showa'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_showa.webp') 141 / var(--fw) stretch; }
html[data-era='showa'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_showa.webp') 68 68 fill / 20px stretch; }
html[data-era='showa'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_showa.webp') 68 68 fill / 20px stretch; }
html[data-era='showa'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_showa.webp') 72 72 fill / 16px stretch; }
html[data-era='showa'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_showa.webp') 72 72 fill / 16px stretch; }
html[data-era='showa'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_showa.webp') 58 58 fill / 13px stretch; }
html[data-era='showa'] #ball-counter.pn { background: none; }
html[data-era='showa'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_showa.webp') 83 140 fill / 54px 86px stretch; }
html[data-era='heisei'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_heisei.webp') 0 0 / 320px; }
html[data-era='heisei'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='heisei'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_heisei.webp') 141 / var(--fw) stretch; }
html[data-era='heisei'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_heisei.webp') 68 68 fill / 20px stretch; }
html[data-era='heisei'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_heisei.webp') 68 68 fill / 20px stretch; }
html[data-era='heisei'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_heisei.webp') 72 72 fill / 16px stretch; }
html[data-era='heisei'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_heisei.webp') 72 72 fill / 16px stretch; }
html[data-era='heisei'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_heisei.webp') 58 58 fill / 13px stretch; }
html[data-era='heisei'] #ball-counter.pn { background: none; }
html[data-era='heisei'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_heisei.webp') 83 136 fill / 54px 86px stretch; }
html[data-era='modern'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_modern.webp') 0 0 / 320px; }
html[data-era='modern'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='modern'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_modern.webp') 141 / var(--fw) stretch; }
html[data-era='modern'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_modern.webp') 68 68 fill / 20px stretch; }
html[data-era='modern'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_modern.webp') 68 68 fill / 20px stretch; }
html[data-era='modern'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_modern.webp') 72 72 fill / 16px stretch; }
html[data-era='modern'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_modern.webp') 72 72 fill / 16px stretch; }
html[data-era='modern'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_modern.webp') 58 58 fill / 13px stretch; }
html[data-era='modern'] #ball-counter.pn { background: none; }
html[data-era='modern'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_modern.webp') 83 113 fill / 54px 86px stretch; }
html[data-era='final'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_final.webp') 0 0 / 320px; }
html[data-era='final'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='final'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_final.webp') 141 / var(--fw) stretch; }
html[data-era='final'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_final.webp') 68 68 fill / 20px stretch; }
html[data-era='final'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_final.webp') 68 68 fill / 20px stretch; }
html[data-era='final'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_final.webp') 72 72 fill / 16px stretch; }
html[data-era='final'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_final.webp') 72 72 fill / 16px stretch; }
html[data-era='final'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_final.webp') 58 58 fill / 13px stretch; }
html[data-era='final'] #ball-counter.pn { background: none; }
html[data-era='final'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_final.webp') 83 129 fill / 54px 86px stretch; }
html[data-era='magic'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_unreal.webp') 0 0 / 320px; }
html[data-era='magic'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='magic'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_unreal.webp') 141 / var(--fw) stretch; }
html[data-era='magic'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='magic'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='magic'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='magic'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='magic'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_unreal.webp') 58 58 fill / 13px stretch; }
html[data-era='magic'] #ball-counter.pn { background: none; }
html[data-era='magic'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_unreal.webp') 83 118 fill / 54px 86px stretch; }
html[data-era='sf'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_unreal.webp') 0 0 / 320px; }
html[data-era='sf'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='sf'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_unreal.webp') 141 / var(--fw) stretch; }
html[data-era='sf'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='sf'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='sf'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='sf'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='sf'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_unreal.webp') 58 58 fill / 13px stretch; }
html[data-era='sf'] #ball-counter.pn { background: none; }
html[data-era='sf'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_unreal.webp') 83 118 fill / 54px 86px stretch; }
html[data-era='mystic'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_unreal.webp') 0 0 / 320px; }
html[data-era='mystic'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='mystic'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_unreal.webp') 141 / var(--fw) stretch; }
html[data-era='mystic'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='mystic'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='mystic'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='mystic'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='mystic'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_unreal.webp') 58 58 fill / 13px stretch; }
html[data-era='mystic'] #ball-counter.pn { background: none; }
html[data-era='mystic'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_unreal.webp') 83 118 fill / 54px 86px stretch; }
html[data-era='cosmic'] :is(.pn, .modal.pn, .m-plate.pn) { background: linear-gradient(var(--u-veil), var(--u-veil)), url('mat_unreal.webp') 0 0 / 320px; }
html[data-era='cosmic'] :is(.modal.pn, .m-plate.pn) { border: 0; border-image: none; }
html[data-era='cosmic'] :is(.pn, .modal.pn, .m-plate.pn)::before { display: block; inset: 0; padding: 0; background: none; -webkit-mask: none; mask: none; border: 0 solid transparent; border-width: var(--fw); border-image: url('frame2_unreal.webp') 141 / var(--fw) stretch; }
html[data-era='cosmic'] :is(.card, .cur, .xq, .fb, .toast, .ex-panel, .pr-gain, .pr-col, .mc, .co-slot, .tr-side, .co-side, .hold-wrap, .cxa, .cxm, .sk-r, #howto) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='cosmic'] :is(.card.afford, .fb.hot, .xq.hot, .card-big, .mc.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('card_hot_unreal.webp') 68 68 fill / 20px stretch; }
html[data-era='cosmic'] :is(.card-buy, .mp-swap, .auto-btn) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_off_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='cosmic'] :is(.card.afford .card-buy, .bang, .auto-btn.on) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('buy_on_unreal.webp') 72 72 fill / 16px stretch; }
html[data-era='cosmic'] :is(.card-ico, .co-art) { background: none; box-shadow: none; border: 0 solid transparent; border-image: url('socket_unreal.webp') 58 58 fill / 13px stretch; }
html[data-era='cosmic'] #ball-counter.pn { background: none; }
html[data-era='cosmic'] #ball-counter.pn::before { border-width: 0; border: 0 solid transparent; border-image: url('housing_unreal.webp') 83 118 fill / 54px 86px stretch; }