/* User-supplied sprite sheets and pixel card model, scoped to RapLike. */
:root{--flow-green:#36ef5c;--improv-blue:#19b7ff;--insult-red:#ff4b5b;--card-ink:#161627}
.flow{--category:var(--flow-green);color:var(--flow-green)}
.improv{--category:var(--improv-blue);color:var(--improv-blue)}
.insult{--category:var(--insult-red);color:var(--insult-red)}
.sheet-sprite canvas{width:100%;height:100%;display:block;image-rendering:pixelated;object-fit:contain;object-position:center bottom}
.player-fighter .sheet-sprite{transform:scaleX(-1)}
.intro-character>.sheet-sprite{animation:none}
.fighter>.sheet-sprite{width:110%;max-width:none;height:110%}
.nervous>.sheet-sprite{animation:none}
.sheet-sprite.coroa .champion-crown{left:43%;top:8%}
.rap-card{border:3px solid var(--category);background:var(--card-ink);padding:5px;clip-path:polygon(11px 0,calc(100% - 11px) 0,calc(100% - 11px) 5px,calc(100% - 5px) 5px,calc(100% - 5px) 11px,100% 11px,100% calc(100% - 11px),calc(100% - 5px) calc(100% - 11px),calc(100% - 5px) calc(100% - 5px),calc(100% - 11px) calc(100% - 5px),calc(100% - 11px) 100%,11px 100%,11px calc(100% - 5px),5px calc(100% - 5px),5px calc(100% - 11px),0 calc(100% - 11px),0 11px,5px 11px,5px 5px,11px 5px);color:var(--text)}
.rap-card.flow{--category:var(--flow-green)}.rap-card.improv{--category:var(--improv-blue)}.rap-card.insult{--category:var(--insult-red)}
.rap-card::after{inset:2px;border:1px solid color-mix(in srgb,var(--category) 50%,transparent)}
.card-heading,.hand .rap-card .card-heading{border:0;display:flex;align-items:flex-start;justify-content:space-between;gap:7px;padding:7px 5px 0;min-height:53px}
.card-heading h3,.hand .card-heading h3{font-size:19px;color:#f7f5ff;line-height:1.05;overflow-wrap:normal;text-wrap:balance;min-width:0}
.card-cost,.hand .card-cost{display:flex;align-items:center;justify-content:flex-end;gap:4px;border:0;min-width:40px;width:auto;height:31px;flex-shrink:0;color:#f7f5ff;font-size:29px;line-height:1}
.card-cost .icon{width:16px;height:25px;color:#cbccde;transform:rotate(-5deg)}.card-cost b{font:inherit;font-weight:700}
.card-art,.hand .rap-card .card-art{height:125px;position:relative;background:var(--card-ink);display:block;overflow:hidden}
.card-art>img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;padding:0 4px 16px}
.card-kind{position:absolute;bottom:0;left:7px;color:var(--category);font-family:var(--pixel);font-size:13px;line-height:1.2}
.card-description,.hand .card-description{font-size:12px;line-height:1.45;padding:11px 7px;margin:6px 3px 0;min-height:108px;border:2px solid var(--category);color:#f7f2ff;background:transparent}
.card-bottom{margin:6px 4px 0;padding:5px 0 3px;border:0;font-size:9px;line-height:1.4}
.rap-card.upgraded .card-heading{background:transparent}
.rap-card.selected{border-color:#fff;background:#24243b;outline:0}
.rap-card.unavailable{border-color:var(--category);opacity:.52}
/* Filled outer silhouette keeps the stepped corners connected at every size. */
.rap-card{border:0;padding:8px;background:var(--category)}
.rap-card::before{content:'';position:absolute;inset:3px;z-index:-1;clip-path:inherit;background:var(--card-ink);pointer-events:none}
.rap-card::after{inset:6px;border:1px solid color-mix(in srgb,var(--category) 38%,transparent)}
.rap-card.selected{background:#fff}.rap-card.selected::before{background:#24243b}
.hand .rap-card .card-art{height:148px}
.pick-cards .card-heading{min-height:74px;padding:12px 9px 0}
.pick-cards .card-heading h3{font-size:30px}.pick-cards .card-cost{font-size:41px;min-width:60px;height:43px;gap:7px}.pick-cards .card-cost .icon{width:24px;height:36px}
.pick-cards .card-art{height:250px}.pick-cards .card-art>img{padding-bottom:24px}.pick-cards .card-kind{font-size:20px;left:12px}
.pick-cards .card-description{font-size:14px;min-height:132px;padding:16px 12px}.pick-cards .card-bottom{font-size:11px;padding:7px 0}
.training-cards .card-heading{min-height:64px;padding:9px 5px 0}.training-cards .card-heading h3{font-size:23px}.training-cards .card-cost{min-width:44px;height:35px;font-size:30px}.training-cards .card-cost .icon{width:17px;height:26px}
.training-cards .card-art{height:145px}.training-cards .card-kind{font-size:15px;left:7px}.training-cards .card-description{font-size:12px;min-height:116px;padding:11px 8px}.training-cards .card-bottom{font-size:10px}
.deck-grid .card-heading h3{font-size:19px}.deck-grid .card-heading{min-height:61px}.deck-grid .card-description{font-size:11px;min-height:116px}
@media(max-width:1150px){.hand .card-heading h3{font-size:17px}.hand .card-cost{font-size:27px;min-width:36px}.hand .card-cost .icon{width:14px}.hand .card-description{font-size:11px;min-height:112px}}
@media(max-width:820px){.hand .rap-card{min-width:155px}.hand{display:flex;overflow-x:auto;max-width:100%!important;padding:12px 5px 8px}.hand>.rap-card{flex:0 0 174px;width:174px}.hand .card-description{font-size:12px;min-height:115px}.hand .card-art{height:112px}.hand .card-heading h3{font-size:18px}.fighter>.sheet-sprite{width:115%;height:112%}.pick-cards .card-heading h3{font-size:23px}.pick-cards .card-heading{min-height:70px;padding:9px 5px 0}.pick-cards .card-cost{min-width:42px;height:35px;font-size:31px}.pick-cards .card-cost .icon{width:17px;height:28px}.pick-cards .card-art{height:180px}.pick-cards .card-kind{font-size:17px}.pick-cards .card-description{font-size:12px;min-height:140px;padding:13px 8px}}
@media(max-width:560px){.hand>.rap-card,.hand:has(>.rap-card:nth-child(7))>.rap-card{flex:0 0 160px;width:160px;min-width:160px}.hand .card-heading{min-height:60px;padding:8px 3px 0;gap:4px}.hand .card-heading h3{font-size:17px}.hand .card-cost{font-size:28px;min-width:37px;gap:3px}.hand .card-cost .icon{width:14px;height:23px}.hand .card-art{height:113px}.hand .card-description{font-size:12px;line-height:1.45;padding:10px 6px;min-height:119px;margin-inline:1px}.hand .card-bottom{font-size:9px}.card-kind{font-size:13px;left:6px}.player-fighter,.rival-fighter{bottom:21px}.fighter>.sheet-sprite{width:115%;height:110%}.pick-cards .card-heading{min-height:74px;padding:12px 8px 0}.pick-cards .card-heading h3{font-size:28px}.pick-cards .card-cost{font-size:39px;min-width:57px;height:40px}.pick-cards .card-cost .icon{width:22px;height:34px}.pick-cards .card-art{height:245px}.pick-cards .card-description{font-size:14px;min-height:120px;padding:15px 10px}.pick-cards .card-kind{font-size:19px;left:11px}.training-cards .card-heading,.deck-grid .card-heading{padding:7px 2px 0;min-height:61px;gap:4px}.training-cards .card-heading h3,.deck-grid .card-heading h3{font-size:17px}.training-cards .card-cost,.deck-grid .card-cost{font-size:26px;min-width:33px;height:30px;gap:2px}.training-cards .card-cost .icon,.deck-grid .card-cost .icon{width:12px;height:22px}.training-cards .card-art,.deck-grid .card-art{height:115px}.training-cards .card-kind{font-size:13px;left:6px}.training-cards .card-description,.deck-grid .card-description{font-size:11px;min-height:130px;padding:9px 5px;margin-inline:1px}.training-cards .card-bottom{font-size:9px}}
@media(max-width:560px){.hand .rap-card .card-art{height:130px}}