body { width: 590px; padding: 0; margin: 5px; }

body > *:last-child { margin-bottom: 0; }

/* upgrades */
.plus-1:after, .plus-2:after, .plus-3:after, .plus-4:after, .plus-5:after { content: ''; display: inline-block; height: 74px; width: 94px; position: absolute; top: -15px; left: 46px; transform: scale(0.65); }

.plus-1:after { background: url("images/icons/upgrade-1.png"); }

.plus-2:after { background: url("images/icons/upgrade-2.png"); }

.plus-3:after { background: url("images/icons/upgrade-3.png"); }

.plus-4:after { background: url("images/icons/upgrade-4.png"); }

.plus-5:after { background: url("images/icons/upgrade-5.png"); }

/* elements */
.light { background: LightGoldenrodYellow; }

.dark { background: thistle; }

.fire { background: peachpuff; }

.water { background: lightblue; }

.wind { background: #C7E2AA; }

/* damage types */
.physical { background-position: 100% 0; background-image: url("images/icons/damage-physical2.png"); background-repeat: no-repeat; }

.magic { background-position: 100% 0; background-image: url("images/icons/damage-magic2.png"); background-repeat: no-repeat; }

/*
.upcoming {
	opacity: 0.75;
}
*/
table.banners { border: 4px outset #CCC; }
table.banners thead { display: none; }
table.banners > tbody { display: block; }
table.banners > tbody > tr { display: grid; grid-template-areas: "portrait costume upgrades" "portrait dates upgrades" "portrait summary summary" "portrait purpose purpose"; grid-template-areas: "portrait costume costume" "portrait dates tags" "portrait summary summary" "upgrades purpose purpose"; grid-gap: 0.125em 0.5em; grid-template-columns: 120px 1fr auto; grid-template-rows: auto auto 1fr; position: relative; min-height: 120px; }
table.banners > tbody > tr + tr { margin-top: 2px; }
table.banners tbody { position: relative; }
table.banners tbody tr { position: relative; overflow: hidden; }
table.banners tbody tr.new-costume:not(.upcoming):before { content: "NEW"; position: absolute; background-color: inherit; border: 1px solid white; width: 100px; text-align: center; transform: translateX(-50px) translateY(100px) rotate(-45deg); transform-origin: top left; top: -50px; left: 25px; }
table.banners tbody tr.upcoming:before { content: "Coming Soon"; position: absolute; background: white; top: 0; left: 0; }
table.banners tbody td.draw { grid-area: 1 / 1; position: absolute; top: 120px; margin-top: -1.5em; border-radius: 0.25em; background-color: white; }
table.banners tbody td.portrait, table.banners tbody td.image { grid-area: portrait; align-self: start; min-height: 90px; }
table.banners tbody td.portrait img, table.banners tbody td.image img { max-width: 120px; height: auto; }
table.banners tbody td.costume { font-size: 1.5em; grid-area: costume; }
table.banners tbody td.dates { grid-area: dates; font-size: 0.8em; }
table.banners tbody td.tags { grid-area: tags; font-size: 0.8em; }
table.banners tbody td.tags:before { display: inline; content: 'tags: '; }
table.banners tbody td.summary { grid-area: summary; }
table.banners tbody td.upgrades { grid-area: upgrades; }
table.banners > tbody td { align-self: baseline; }
table.banners tr.limited .draw { background: linear-gradient(90deg, #E8BEFA, #ABBFFF, #BBF3C0, #FCF4C9, #FEE3E2, #FBCDF2); }

span.pub-recruit:not(:empty) { font-weight: bold; }
span.pub-recruit:not(:empty):before { content: 'Pub Recruit:'; display: inline; padding-right: 0.5em; }

td.upgrades.unknown table, td.purpose.unknown table { display: none; }

/* UPGRADES */
table.upgrades { display: block; width: 100%; font-size: 0.8em; }
table.upgrades tbody { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(3, 1fr); grid-gap: 0.125em 0.5em; border-spacing: 0; width: 100%; }
table.upgrades tr { display: block; }
table.upgrades th { display: block; border-bottom: 1px solid; }
table.upgrades td { display: block; text-align: center; }
table.upgrades .none { opacity: 0.25; }

/* PURPOSE (TIER INFO) */
td.purpose { grid-area: purpose; font-size: 0.8em; }

table.purpose { width: 100%; }
table.purpose svg { width: 100%; }
table.purpose tbody { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(6, 1fr); grid-gap: 0.125em 0.5em; border-spacing: 0; }
table.purpose th, table.purpose td { display: block; text-align: center; }
table.purpose td:first-child { border-bottom: 1px solid; margin-bottom: 2px; }
table.purpose .tags { display: none; }