@font-face{font-family:'Hemicycle UI';src:url('../fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
html,body{font-family:'Hemicycle UI',sans-serif;font-optical-sizing:auto}button,input,select,textarea{font-family:'Hemicycle UI',sans-serif}button{line-height:1.25}.btn,.mini{display:inline-flex;align-items:center;justify-content:center;text-align:center}[hidden]{display:none!important}
.launch-start,.screen.in-battle .turn-clock,.damage-number,.heal-number,.vote-number{font-family:Anton,'Hemicycle UI',sans-serif}
.home-options-button,.home-action-stack .mail-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0}.home-options-button svg,.home-action-stack .mail-button svg{display:block;width:22px;height:22px;margin:0}.home-action-stack{gap:8px;z-index:2}.home-action-stack .objective-access{height:44px}.tab .nav-icon{display:grid;place-items:center}.tab .nav-icon svg{display:block;margin:0}.profile-button{display:grid;place-items:center}.mini.news{padding:0;display:grid;place-items:center}
/* Scale the printed overlay with its own card, not the device width. */
.cromo{container-type:inline-size}.cromo .top{padding:5px 5px 0;align-items:center;min-height:23px}.cromo .cost{display:grid;place-items:center;min-width:22px;min-height:22px;padding:1px 4px;font-size:calc(clamp(10px,11cqi,16px) * var(--ui-text-scale,1));line-height:1.1;background:#070e1bf2;border-color:#d7bb78;font-weight:800;font-variant-numeric:tabular-nums}
.cromo .bot{padding:17px 5px 5px;background:linear-gradient(transparent,#050a15ee 28%,#050a15fa);line-height:1.2;gap:5px;display:flex;flex-direction:column}.cromo .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;min-height:2.35em;font-size:calc(clamp(8.5px,8.9cqi,12px) * var(--ui-text-scale,1));line-height:1.17;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
.cromo .st{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3px;align-items:stretch}.card-stat{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;padding:2px 1px;border:1px solid #7383a14d;background:#18263c;border-radius:4px;min-height:18px;font-variant-numeric:tabular-nums}.card-stat small{font-size:calc(clamp(6px,7.2cqi,10px) * var(--ui-text-scale,1));font-weight:800;line-height:1;color:#c3d2eb}.card-stat b{font-size:calc(clamp(8px,10cqi,14px) * var(--ui-text-scale,1));font-weight:800;line-height:1.1;color:#fff;white-space:nowrap}.card-stat.aguante{background:#142c32;border-color:#61b29e66}.card-stat.aguante small{color:#a4e0cc}.card-stat.zasca{background:#342b1e;border-color:#d8b46866}.card-stat.zasca small{color:#ffdc91}.card-stat i{font-style:normal;font-size:.78em;color:#aac5c4}
.cromo .badge{bottom:auto;top:33px;right:5px;font-size:calc(9px * var(--ui-text-scale,1));line-height:1.15;padding:2px 4px;min-height:16px}.cromo .lbl{top:32px;left:auto;right:5px;font-size:calc(7px * var(--ui-text-scale,1));line-height:1.1;padding:3px}.cromo .battle-guard{top:32px;left:5px;font-size:calc(7px * var(--ui-text-scale,1));padding:2px}
.zoom-card-wrap .cromo .nm{font-size:calc(19px * var(--ui-text-scale,1));min-height:0;line-height:1.2}.zoom-card-wrap .cromo .bot{padding:28px 12px 12px;gap:9px}.zoom-card-wrap .card-stat{min-height:31px;border-radius:6px;gap:6px}.zoom-card-wrap .card-stat small{font-size:calc(13px * var(--ui-text-scale,1))}.zoom-card-wrap .card-stat b{font-size:calc(21px * var(--ui-text-scale,1))}.zoom-card-wrap .cromo .cost{min-width:36px;min-height:34px;font-size:calc(22px * var(--ui-text-scale,1))}.zoom-card-wrap .cromo .badge{top:58px;bottom:auto;right:12px}
.battle-wrap .cromo .nm{font-size:calc(clamp(6px,9cqi,10px) * var(--ui-text-scale,1));min-height:0;-webkit-line-clamp:1}.battle-wrap .cromo .bot{padding:10px 3px 3px;gap:3px}.battle-wrap .card-stat{gap:1px;min-height:13px;padding:1px}.battle-wrap .card-stat small{font-size:calc(clamp(5px,7cqi,8px) * var(--ui-text-scale,1))}.battle-wrap .card-stat b{font-size:calc(clamp(6px,10cqi,12px) * var(--ui-text-scale,1))}.battle-wrap .cromo .top{padding:3px 3px 0;min-height:18px}.battle-wrap .cromo .cost{min-height:17px;min-width:17px;padding:0 3px;font-size:calc(clamp(8px,11cqi,13px) * var(--ui-text-scale,1))}
@media(max-height:500px){.home-action-stack{gap:4px}.home-action-stack .home-options-button,.home-action-stack .mail-button{height:38px;min-height:38px}.objective-modal>.bar .btn{min-height:38px}}
/* On short battle cards, keep status badges between the cost and the name. */
@media(max-height:600px){.battle-wrap .cromo .lbl{top:21px;font-size:calc(6px * var(--ui-text-scale,1));line-height:1.1;padding:1px 2px}.battle-wrap .cromo .battle-guard{top:21px;font-size:calc(6px * var(--ui-text-scale,1));line-height:1.1;padding:1px 2px}.battle-wrap .cromo:has(.battle-guard) .lbl{display:none}.battle-wrap .cromo .strong-signal{top:21px;width:11px;height:11px;font-size:calc(11px * var(--ui-text-scale,1))}.battle-wrap .cromo .crown{top:0;font-size:calc(9px * var(--ui-text-scale,1))}.battle-wrap .cromo .cost{min-width:16px;min-height:16px;padding:0 2px}}
/* Leave room for the frame and allow every name to wrap in card previews. */
.cromo:not(.action-card) .bot{padding-left:8%;padding-right:8%;padding-bottom:8%}
.cromo .nm{display:block;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
.zoom-card-wrap .cromo .nm{font-size:calc(6.3cqi * var(--ui-text-scale,1))}
.battle-wrap .cromo .nm{display:-webkit-box;-webkit-line-clamp:1;overflow:hidden}
.battle-wrap .cromo:not(.action-card) .bot{padding:10px 3px 3px}