.page#cards{display:flex;flex-direction:column}.page#cards>h1{font-size:1.5rem;flex:0;color:#fff;text-shadow:2px 2px 4px black;margin:.5rem .5rem 0}#cards-list{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(2rem,12rem));gap:.5rem;padding:.5rem;justify-content:center;align-content:start}@media (min-width: 50.5rem){#cards-list{grid-template-columns:repeat(auto-fit,minmax(2rem,12rem))}}#cards-list>.card-preview{cursor:pointer;position:relative;aspect-ratio:296/387;container-type:inline-size}#cards-list>.card-preview>*{position:absolute}#cards-list>.card-preview>.card-preview-image-container{left:.0571428571cqw;top:.0071428571cqw;cursor:pointer;width:100%;height:100%;container-type:inline-size}#cards-list>.card-preview>.card-preview-image-container>.card-preview-image-shape,#cards-list>.card-preview>.card-preview-image-container>.card-preview-image-frame{position:absolute}#cards-list>.card-preview>.card-preview-image-container>.card-preview-image-frame{background-size:contain;background-position:center;background-repeat:no-repeat}#cards-list>.card-preview>.card-preview-image-container>.card-preview-image-shape{container-type:inline-size}#cards-list>.card-preview>.card-preview-image-container>.card-preview-image-shape>.card-preview-image-viewport{position:absolute;background-color:#fff;overflow:hidden;pointer-events:none}#cards-list>.card-preview>.card-preview-image-container>.card-preview-image-shape>.card-preview-image-viewport>.card-preview-image{width:100%;height:100%;object-position:center;display:block}#cards-list>.card-preview>.card-preview-elixir{z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;left:0;top:0;width:21.2837837838cqw;height:25.3378378378cqw}#cards-list>.card-preview>.card-preview-elixir>.card-preview-elixir-drop{position:absolute;inset:0;background:url(/cards-assets/elixir.png) no-repeat center/100% 100%}#cards-list>.card-preview>.card-preview-elixir>.card-preview-elixir-cost{--card-elixir-font-size: calc(100cqw * 41 / 296);--card-elixir-shadow: calc(var(--card-elixir-font-size) * .04);--card-elixir-shadow-bottom: calc(var(--card-elixir-font-size) * .12);position:relative;font-family:Supercell Magic;color:#ffe9ff;text-align:center;font-size:var(--card-elixir-font-size);text-shadow:calc(var(--card-elixir-shadow) * -1) calc(var(--card-elixir-shadow) * -1) 0 #760088,var(--card-elixir-shadow) calc(var(--card-elixir-shadow) * -1) 0 #760088,calc(var(--card-elixir-shadow) * -1) var(--card-elixir-shadow-bottom) 0 #760088,var(--card-elixir-shadow) var(--card-elixir-shadow-bottom) 0 #760088}#card-preview-dialog{border:none;padding:0;background:none;height:100vh;cursor:pointer}#card-preview-dialog::backdrop{background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#card-preview-dialog[open]{display:flex;flex-direction:column;justify-content:center;align-items:center}#card-preview-dialog>#card-preview-config-selects-container{margin:0 0 .5rem;font-size:1.2rem;border-radius:.5rem;padding:.25rem .5rem;background:#0000003d;border:1px solid #000;display:flex;flex-direction:column;gap:1rem}#card-preview-dialog>#card-preview-config-selects-container>div{display:flex}#card-preview-dialog>#card-preview-config-selects-container>div>label,#card-preview-dialog>#card-preview-config-selects-container>div>select{font:inherit;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 2px 0 #000,1px 2px 0 #000}#card-preview-dialog>#card-preview-config-selects-container>div>label{flex:0}#card-preview-dialog>#card-preview-config-selects-container>div>select{flex:1;cursor:pointer;background:transparent;border:none;margin-left:.5rem;padding:0 .5rem}@media (min-width: 480px){#card-preview-dialog>#card-preview-config-selects-container{flex-direction:row}}#card-preview-dialog>canvas{max-width:100%;max-height:calc(100% - 40px)}