/* Original user-supplied frames; text and card art remain live layers. */
:is(.card,.eco-card):has(>.template-frame){--cost-x:13.3%;--cost-y:10.3%;--atk-x:13.3%;--hp-x:86.2%;--stat-y:90.4%;container-type:inline-size;isolation:isolate;position:relative;border:0!important;border-radius:0!important;background:#080a10!important;padding:0!important;overflow:hidden;color:#f6eee0}
:is(.card,.eco-card):has(>.frame-rare){--cost-x:15.55%;--cost-y:11.7%;--atk-x:15.55%;--hp-x:84.45%;--stat-y:90%}
:is(.card,.eco-card):has(>.frame-legendary){--cost-x:15.6%;--cost-y:11.9%;--atk-x:15.6%;--hp-x:86.25%;--stat-y:88.9%}
.template-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;z-index:2;pointer-events:none}
:is(.card,.eco-card):has(>.template-frame) .card-picture{position:absolute!important;left:5%!important;right:5%!important;top:4%!important;width:90%!important;height:49%!important;border:0!important;border-radius:0!important;background:linear-gradient(#27323b,#111923);overflow:hidden;display:block}
:is(.card,.eco-card):has(>.template-frame) .card-picture img{position:static!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;transform:none!important;filter:none!important}
:is(.card,.eco-card):has(>.template-frame) .card-bottom{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;display:block!important;background:none!important;padding:0!important;pointer-events:none}
:is(.card,.eco-card):has(>.template-frame) .card-bottom>b{position:absolute!important;left:10%!important;top:54.7%!important;width:80%!important;height:6.5%!important;max-height:none!important;min-height:0!important;padding:0 2%!important;margin:0!important;border:0!important;background:#07080b!important;color:#fff8e9;z-index:3;font-size:6cqw!important;line-height:1.15!important;display:flex!important;align-items:center;justify-content:center;overflow:hidden;text-align:center}
:is(.card,.eco-card):has(>.template-frame) .card-text{position:absolute!important;left:11%!important;top:68%!important;width:78%!important;height:18%!important;max-height:none!important;min-height:0!important;padding:2%!important;margin:0!important;display:block!important;background:none!important;color:#fbf7ee;z-index:3;font-size:6cqw!important;line-height:1.4!important;overflow:hidden;text-align:center}
:is(.card,.eco-card):has(>.template-frame) .card-kind{position:absolute!important;left:24%!important;right:auto!important;top:62.4%!important;bottom:auto!important;width:52%!important;height:3.7%!important;display:flex!important;align-items:center;justify-content:center;padding:0!important;background:#090a10!important;color:#ece2d3;z-index:3;letter-spacing:1px;font-size:4.8cqw!important;line-height:1!important}
:is(.card,.eco-card):has(>.template-frame) :is(.cost,.stat,.spell-seal){position:absolute!important;left:var(--cost-x)!important;top:var(--cost-y)!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:15.6%!important;height:auto!important;aspect-ratio:1;border:0!important;border-radius:50%!important;z-index:3;display:grid!important;place-items:center;padding:0!important;background:radial-gradient(circle at 35% 25%,#5282b4,#063966 65%,#0475a4)!important;color:white!important;text-shadow:0 1px 3px #000;font-size:10cqw!important;line-height:1!important}
:is(.card,.eco-card):has(>.template-frame) :is(.atk,.seal-left){left:var(--atk-x)!important;top:var(--stat-y)!important;background:radial-gradient(circle at 35% 25%,#b76834,#54120b 65%,#1c0505)!important}
:is(.card,.eco-card):has(>.template-frame) :is(.health,.seal-right){left:var(--hp-x)!important;top:var(--stat-y)!important;background:radial-gradient(circle at 35% 25%,#3c99e7,#062b69 65%,#021431)!important}
:is(.card,.eco-card):has(>.template-frame) .spell-seal{font-size:6cqw!important;color:#cec4e7!important}
.economy-screen .eco-card:has(>.template-frame){display:block;min-height:250px;flex:1}.eco-grid{overflow:auto;align-items:stretch}.eco-owned{position:absolute;left:22%;right:22%;bottom:1%;z-index:3;font-style:normal;font-size:10px!important;color:#f8e4b5;text-shadow:0 1px 2px #000;background:#080a10d9}
.eco-unowned .card-picture{filter:grayscale(1) brightness(.45)}
.template-preview.card{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:450/638;align-self:start}
#dialog .deck-card-entry .card:has(>.template-frame) .template-frame{height:195%!important;max-height:none!important}
#dialog .deck-card-entry .card:has(>.template-frame) .card-picture{height:100%!important}
#dialog .deck-card-entry .card:has(>.template-frame) :is(.card-bottom,.card-kind,.stat,.spell-seal){display:none!important}
#dialog .deck-card-entry .card:has(>.template-frame) .cost{top:20%!important}
.vertical-duel .unit-card-art img{object-fit:cover!important;object-position:center top!important;transform:none!important}
@media(max-height:500px){.economy-screen .eco-card:has(>.template-frame){min-height:185px}.eco-owned{font-size:7px!important}.eco-grid{min-height:185px;flex:none}.economy-screen{overflow:auto}.template-preview.card{max-height:260px;width:auto;max-width:100%}}
@media(max-width:1000px) and (orientation:landscape){.vertical-duel .vertical-hand .card:has(>.template-frame) .card-text{display:none!important}.vertical-duel .vertical-hand .card:has(>.template-frame) .card-bottom>b{top:54%!important;height:13%!important;font-size:7cqw!important}.vertical-duel .vertical-hand .card:has(>.template-frame) .card-kind{display:none!important}}
.vertical-duel .duel-player{row-gap:0!important}
@media(max-width:1000px) and (orientation:landscape){#app .vertical-duel .vertical-hand,#app .vertical-duel .vertical-hand .hand-entry{height:95px!important;min-height:0!important}#app .vertical-duel .vertical-hand .card{height:76px!important;min-height:76px!important;max-height:76px!important}}
/* Decorations are images, numbers always come from live game state. */
.number-badge{isolation:isolate;overflow:visible!important}
.number-badge .stat-icon-art{position:absolute!important;inset:-13%!important;width:126%!important;height:126%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;pointer-events:none;z-index:0;transform:none!important}
.number-badge .stat-live-value{position:relative;z-index:1;display:block;font:inherit;font-weight:800;font-family:Georgia,serif;color:#fffef9;line-height:1;text-shadow:-1px -1px 1px #152337,1px -1px 1px #152337,-1px 1px 1px #152337,1px 2px 2px #05080c,0 0 3px #b8dfff;pointer-events:none}
.number-badge .value-attack{font-size:.73em;transform:translate(20%,18%);text-shadow:-1px -1px #4a1406,1px 1px #4a1406,0 0 3px #ffb874}
.number-badge .value-health{font-size:.82em;transform:translateY(7%)}
.number-badge .wide-value{font-size:.64em;letter-spacing:-.08em}
.vertical-slot .number-badge,.slot .number-badge{border:0;background:transparent;box-shadow:none}
.number-badge.stat-up{--stat-ink:#8dff9e}.number-badge.stat-down{--stat-ink:#ff737b}
.number-badge .stat-live-value{color:var(--stat-ink,#fffef9)!important}
.number-flash-up{animation:stat-rise .45s ease-out}.number-flash-down{animation:stat-fall .45s ease-out}
@keyframes stat-rise{0%{filter:brightness(2.2) drop-shadow(0 0 7px #7bffa2)}100%{filter:none}}
@keyframes stat-fall{0%{filter:brightness(2.2) drop-shadow(0 0 7px #ff616f)}100%{filter:none}}
@media(prefers-reduced-motion:reduce){.number-flash-up,.number-flash-down{animation:none}}
.number-badge .value-attack{font-size:.9em;transform:translate(22%,20%);text-shadow:-1px -1px 1px #230700,1px -1px 1px #230700,-1px 1px 1px #230700,1px 2px 2px #230700}.number-badge .value-health{font-size:1em}.number-badge .wide-value{font-size:.64em}