:root {
    --char-shadow: drop-shadow(black 0 0 10px);
}

.portrait-picture {
    background-image: url(./char/00_port.png);
    height: 350px;
    width: 260px;
    filter: var(--char-shadow);
}

/* Base set up */
.npc .portrait-picture {
    background-position: 0 -350px;
}
.full-body-character.enemy_h {
    background-size: initial;
    background-position-x: 1000px;
}
.full-body-character.enemy_sp {
    background-size: initial;
    background-position-x: 510px;
}
.full-body-character.companion_sp {
    background-size: initial;
    background-position-x: 590px;
}
.full-body-character.main.omnicam::before,
.room.chat::before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
}
.full-body-character.omnicam::before {
    background-image: url(./char/omnicam.png);
    width: 128px;
    height: 129px;
    top: 80px;
    animation: cam-bounce 3s infinite;
}
.room.chat::before {
    height: 100%;
    width: 550px;
}
.map-badge:hover,
.map-badge {
    background: transparent;
    background-image: url(./bg/map_badges_01.png);
}
.map-badge:hover {
    filter: drop-shadow(2px 2px 0px var(--border-color))
            drop-shadow(2px -2px 0px var(--border-color))
            drop-shadow(-2px 2px 0px var(--border-color))
            drop-shadow(-2px -2px 0px var(--border-color));
}

/* Hero */
.main .portrait-picture {
    background-position: -260px 0;
}
.main_t .portrait-picture {
    background-position: -520px 0;
}
.hero .portrait-picture {
    background-position: -780px 0;
}
.hero_t .portrait-picture {
    background-position: -1040px 0;
}

.full-body-character.main {
    background-image: url(./char/main_001.png);
    filter: var(--char-shadow);
}
.full-body-character.main.civilian {
    background-position: 0 -1080px;
}
.full-body-character.main.nude {
    background-image: url(./char/main_002.png);
}
.full-body-character.main.hard {
    background-image: url(./char/main_002.png);
    background-position: 0 -1080px;
}

.room.chat {
    background-image: url(./chat/chat_bg.jpg);
}
.room.chat.civilian {
    background-position: -1920px 0;
}
.room.chat.nude {
    background-position: 0 -1080px;
}

/* Combat */
.full-body-character.hero {
    background-image: url(./char/main_cb_001.png);
    left: 0 !important;
}
/* Hero Solo */
.room.cg.mast001_01 {
    background-image: url(./cg/mc_mast_001.jpg);
    background-position: 0 0;
}
.room.cg.mast001_02 {
    background-image: url(./cg/mc_mast_001.jpg);
    background-position: -1920px 0;
}
.room.cg.mast001_03 {
    background-image: url(./cg/mc_mast_001.jpg);
    background-position: 0 -1080px;
}
.room.cg.defeat {
    background-image: url(./cg/mc_mast_001.jpg);
    background-position: -1920px -1080px;
}
/* Landlord */
.landlord .portrait-picture {
    background-position: -260px -350px;
}
.full-body-character.landlord {
    background-image: url(./char/landlord.png);
    filter: var(--char-shadow);
}
.full-body-character.landlord.hard {
    background-position: 0 -1080px;
}
.room.cg.landlord001_01 {
    background-image: url(./cg/landlord_001.jpg);
    background-position: 0 0;
}
.room.cg.landlord001_02 {
    background-image: url(./cg/landlord_001.jpg);
    background-position: -1920px 0;
}
.room.cg.landlord001_03 {
    background-image: url(./cg/landlord_001.jpg);
    background-position: 0 -1080px;
}
/* TK */
.tk .portrait-picture {
    background-position: -520px -350px;
}
.tk_civ .portrait-picture {
    background-image: url(char/01_port.png);
    background-position: -520px 0;
}
.full-body-character.tk {
    background-image: url(./char/tk.png);
    filter: var(--char-shadow);
}

.full-body-character.tk.civilian {
    background-position: 0 -1080px;
}
.room.chat.tk::before {
    background-image: url(./chat/users_0001.png);
}

.room.cg.tk_boulder001_01 {
    background-image: url(./cg/boulder_tk_001.jpg);
    background-position: 0 0;
}
.room.cg.tk_boulder001_02 {
    background-image: url(./cg/boulder_tk_001.jpg);
    background-position: -1920px 0;
}
.room.cg.tk_boulder001_03 {
    background-image: url(./cg/boulder_tk_001.jpg);
    background-position: 0 -1080px;
}
/* Night Shade */
.nightShade .portrait-picture {
    background-position: -780px -350px;
}
.full-body-character.nightShade {
    background-image: url(./char/night_shade.png);
    filter: var(--char-shadow);
}
.room.chat.nightShade::before {
    background-image: url(./chat/users_0001.png);
    background-position: -1100px 0;
}
.room.cg.night001_01 {
    background-image: url(./cg/night_shade_001.jpg);
    background-position: 0 0;
}
.room.cg.night001_02 {
    background-image: url(./cg/night_shade_001.jpg);
    background-position: -1920px 0;
}
.room.cg.night001_03 {
    background-image: url(./cg/night_shade_001.jpg);
    background-position: 0 -1080px;
}
/* Amphi */
.amphi .portrait-picture {
    background-position: -1040px -700px;
}
.full-body-character.amphi {
    background-image: url(./char/amphi.png);
    filter: var(--char-shadow);
}
.full-body-character.amphi.hard {
    background-position: 0 -1080px;
}
.room.chat.amphi::before {
    background-image: url(./chat/users_0001.png);
    background-position: -550px 0;
}
.room.cg.amphi001 {
    background-image: url(./cg/amphi_001.jpg);
    background-position: 0 0;
}
.room.cg.amphi002_01 {
    background-image: url(./cg/amphi_001.jpg);
    background-position: -1920px 0;
}
.room.cg.amphi002_02 {
    background-image: url(./cg/amphi_001.jpg);
    background-position: 0 -1080px;
}
.room.cg.amphi002_03 {
    background-image: url(./cg/amphi_001.jpg);
    background-position: -1920px -1080px;
}
/* Asmodeus */
.asmodeus .portrait-picture {
    background-position: -780px -700px;
}
.full-body-character.asmodeus {
    background-image: url(./char/asmodeus.png);
    filter: var(--char-shadow);
}
.full-body-character.asmodeus.hood {
    background-position: 0 -1080px;
}
.room.chat.asmodeus::before {
    background-image: url(./chat/users_0001.png);
    background-position: 0 -1080px;
}
.room.cg.asmodeus001_01 {
    background-image: url(./cg/asmodeus_001.jpg);
    background-position: 0 0;
}.room.cg.asmodeus001_02 {
    background-image: url(./cg/asmodeus_001.jpg);
    background-position: -1920px 0;
}.room.cg.asmodeus001_03 {
    background-image: url(./cg/asmodeus_001.jpg);
    background-position: 0 -1080px;
}

/* Dominion TBD */
.dominion .portrait-picture {
    background-position: -260px -1050px;
}
.full-body-character.dominion {
    background-image: url(./char/dominion.png);
    filter: var(--char-shadow);
}

/* Captain Flag */
.flag .portrait-picture {
    background-position: -1040px -1050px;
}
.full-body-character.flag {
    background-image: url(./char/flag.png);
    filter: var(--char-shadow);
}
.full-body-character.companion_sp.flag {
    background-image: url(./char/00_teamup.png);
    filter: none;
}

/* Omar - Clerk - Hero Store */
.hs_clerk .portrait-picture {
    background-image: url(char/01_port.png);
    background-position: -260px 0;
}
.room.cg.hs_clerk001_01 {
    background-image: url(./cg/clerk_001.jpg);
    background-position: 0 0;
}
.room.cg.hs_clerk001_02 {
    background-image: url(./cg/clerk_001.jpg);
    background-position: -1920px 0;
}
.room.cg.hs_clerk001_03 {
    background-image: url(./cg/clerk_001.jpg);
    background-position: 0 -1080px;
}

/* Enemies */

/* Raging Bull */
.ragingBull .portrait-picture {
    background-position: -1040px -350px;
}
.map-badge.ragingBull {
    background-image: url(./bg/map_badges_01.png);
    background-position: 0 -140px;
}
.full-body-character.enemy_h.ragingBullDemo,
.full-body-character.enemy_h.ragingBull {
    background-image: url(./char/raging_001.png);
}
.full-body-character.enemy_h.ragingBull.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.ragingBullDemo,
.full-body-character.enemy_h.ragingBull.seduced {
    background-position-y: -2160px;
}
.room.cg.raging001 {
    background-image: url(./cg/night_shade_001.jpg);
    background-position: -1920px -1080px;
}
.room.cg.raging002_01 {
    background-image: url(./cg/raging_001.jpg);
    background-position: 0 0;
}.room.cg.raging002_02 {
    background-image: url(./cg/raging_001.jpg);
    background-position: -1920px 0;
}.room.cg.raging002_03 {
    background-image: url(./cg/raging_001.jpg);
    background-position: 0 -1080px;
}

/* Boulder */
.npc.boulder .portrait-picture {
    background-position: 0 -700px;
}
.map-badge.boulder {
    background-image: url(./bg/map_badges_01.png);
    background-position: -120px -140px;
}
.full-body-character.enemy_h.boulder_demo,
.full-body-character.enemy_h.boulder_demo_2,
.full-body-character.enemy_h.boulder {
    background-image: url(./char/boulder_001.png);
}
.full-body-character.enemy_h.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.seduced {
    background-position-y: -2160px;
}

.room.cg.boulder001_01 {
    background-image: url(./cg/boulder_001.jpg);
    background-position: 0 0;
}
.room.cg.boulder001_02 {
    background-image: url(./cg/boulder_001.jpg);
    background-position: -1920px 0;
}
.room.cg.boulder001_03 {
    background-image: url(./cg/boulder_001.jpg);
    background-position: 0 -1080px;
}


/* Gunman */

.npc.gunman .portrait-picture {
    background-position: 0 -1050px;
}
.map-badge.gunman {
    background-image: url(./bg/map_badges_01.png);
    background-position: -240px -140px;
}
.full-body-character.enemy_h.gunman {
    background-image: url(./char/gunman_001.png);
}
.full-body-character.enemy_h.gunman.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.gunman.seduced {
    background-position-y: -2160px;
}
.room.cg.gunman001_01 {
    background-image: url(./cg/gunman_001.jpg);
    background-position: 0 0;
}
.room.cg.gunman001_02 {
    background-image: url(./cg/gunman_001.jpg);
    background-position: -1920px 0;
}
.room.cg.gunman001_03 {
    background-image: url(./cg/gunman_001.jpg);
    background-position: 0 -1080px;
}

/* Demon Pirate LeChonk */
.npc.lechonk .portrait-picture {
    background-position: -780px -1050px;
}
.map-badge.lechonk {
    background-image: url(./bg/map_badges_01.png);
    background-position: -360px -140px;
}
.full-body-character.enemy_h.lechonk_demo,
.full-body-character.enemy_h.lechonk_demo_2,
.full-body-character.enemy_h.lechonk {
    background-image: url(./char/lechonk_001.png);
}
.full-body-character.enemy_h.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.seduced {
    background-position-y: -2160px;
}
.room.cg.lechonk001_01 {
    background-image: url(./cg/lechonk_001.jpg);
    background-position: 0 0;
}
.room.cg.lechonk001_02 {
    background-image: url(./cg/lechonk_001.jpg);
    background-position: -1920px 0;
}
.room.cg.lechonk001_03 {
    background-image: url(./cg/lechonk_001.jpg);
    background-position: 0 -1080px;
}

/* Robber > Small */
.npc.robberSmall .portrait-picture {
    background-position: -260px -700px;
}
.map-badge.robberSmall {
    background-image: url(./bg/map_badges_01.png);
    background-position: -120px 0;
}
.full-body-character.enemy_h.robberSmall {
    background-image: url(./char/robber_small_001.png);
}
.full-body-character.enemy_h.robberSmall.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.robberSmall.seduced {
    background-position-y: -2160px;
}
.room.cg.robberSmall001 {
    background-image: url(./cg/enemies_001.jpg);
    background-position: 0 0;
}

/* Biker */
.npc.biker .portrait-picture {
    background-position: -520px -700px;
}
.map-badge.biker {
    background-image: url(./bg/map_badges_01.png);
    background-position: -240px 0;
}
.full-body-character.enemy_h.biker {
    background-image: url(./char/biker_001.png);
}
.full-body-character.enemy_h.biker.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.biker.seduced {
    background-position-y: -2160px;
}
.room.cg.biker001 {
    background-image: url(./cg/enemies_001.jpg);
    background-position: -1920px 0;
}


/* Punk */

.enemy_sp.punk .portrait-picture,
.npc.punk .portrait-picture {
    background-position: -520px -1050px;
}
.map-badge.punk {
    background-image: url(./bg/map_badges_01.png);
    background-position: -360px 0;
}
.full-body-character.enemy_sp.punk,
.full-body-character.enemy_h.punk {
    background-image: url(./char/punk.png);
}
.full-body-character.enemy_h.punk.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.punk.seduced {
    background-position-y: -2160px;
}
.room.cg.punk001 {
    background-image: url(./cg/enemies_001.jpg);
    background-position: 0 -1080px;
}

/* Sailor */

.enemy_sp.sailor .portrait-picture,
.sailor .portrait-picture {
    background-image: url(char/01_port.png);
    background-position: 0 0;
}
.map-badge.sailor {
    background-image: url(./bg/map_badges_01.png);
    background-position: -480px 0;
}
.full-body-character.enemy_sp.sailor,
.full-body-character.enemy_h.sailor {
    background-image: url(./char/sailor.png);
}
.full-body-character.enemy_h.sailor.interested {
    background-position-y: -1080px;
}
.full-body-character.enemy_h.sailor.seduced {
    background-position-y: -2160px;
}
.room.cg.sailor001 {
    background-image: url(./cg/enemies_001.jpg);
    background-position: -1920px -1080px;
}

/* Jobs */

.room.job {
    background-image: url(./bg/jobs_00.jpg);
}
.room.job.temp {
    background-position: 0 0;
}
.room.job.burger {
    background-position: -1920px 0;
}
.room.job.janitor {
    background-position: 0 -1080px;
}

/* Backgrounds */
.room.start {
    background-image: url(./bg/cover.jpg);
}
 .room.map {
    background-image: url(./bg/map_d.jpg);
 }
 .room.map.night {
    background-image: url(./bg/map_n.jpg);
 }
 .room.map.cards {
   background: linear-gradient(45deg, #294c61, #29545f, #100e3d);
 }

.room.black {
  background: linear-gradient(45deg, #000, #000, #333);
}


.room.home {
    background-image: url(./bg/home.jpg);
}
.room.street.alley {
    background-image: url(./bg/night_001.jpg);
}
.room.street.docks {
    background-image: url(./bg/night_001.jpg);
    background-position: -1920px 0;
}

.room.street.downtown {
    background-image: url(./bg/day_001.jpg);
}
.room.street.heroStore {
    background-image: url(./bg/day_001.jpg);
    background-position: -1920px 0;
}

.room.street.heroVod {
    background-image: url(./bg/herovod.jpg);
}

.room.combat {
    background-image: url(./bg/battle_01.jpg);
    /* background: linear-gradient(45deg, #999, #ddd, #333); */
}

/* CARDS */
.full-body-character.companion_sp.card {
    background: linear-gradient(45deg, #3b118d, #1e3bd369);
}

.game-shield.action-image.tc_show {
    background: linear-gradient(45deg, #0f0716, #101314, #272385);
}
.game-shield.action-image.tc_show::before {
  content: " ";
  font-size: 40px;
  white-space: pre;
  position: absolute;
  left: 80px;
  top: 45px;
  font-weight: 700;
}
.full-body-character.companion_sp.card::after,
.game-shield.action-image.tc_show::after {
    content: " ";
    position: absolute;
    height: 840px;
    width: 600px;
    top: 90px;
    right: 80px;

}
.full-body-character.companion_sp.card::after {
    top: 12px;
    right: 660px;
}
.full-body-character.companion_sp.card.TC001::after,
.game-shield.action-image.tc_show.TC001::after {
    background-image: url(./cg/tc/001-005.png);
}
.game-shield.action-image.tc_show.TC001::before {
  content: "001 - CAPTAIN FLAG \A ★★★☆☆ \A\A Age: Unknown (Active since before the 1940's)\A Powers: Strength, Flight, Invulnerability\A\A Captain Flag is one of the classic super heroes.";
}


.full-body-character.companion_sp.card.TC003::after,
.game-shield.action-image.tc_show.TC003::after {
    background-image: url(./cg/tc/001-005.png);
    background-position-y: -1680px;
}
.game-shield.action-image.tc_show.TC003::before {
  content: "003 - THE IMMORTAL FENCER \A ★★☆☆☆ \A\A Age: At least 400 years\A Powers: Immortality, Enhanced Healing\A\A It is said that The Immortal Fencer predates the\A French Revolution.";
}
.full-body-character.companion_sp.card.TC004::after,
.game-shield.action-image.tc_show.TC004::after {
    background-image: url(./cg/tc/001-005.png);
    background-position-y: -2520px;
}
.game-shield.action-image.tc_show.TC004::before {
  content: "004 - NIMBUS \A ★☆☆☆☆ \A\A Age: 24\A Powers: Flight\A\A While airborne Nimbus has a top speed of mach 4.";
}
.full-body-character.companion_sp.card.TC005::after,
.game-shield.action-image.tc_show.TC005::after {
    background-image: url(./cg/tc/001-005.png);
    background-position-y: -3360px;
}
.game-shield.action-image.tc_show.TC005::before {
  content: "005 - PONTUS \A ★★★☆☆ \A\A Age: 243\A Powers: Breathe Underwater, Strength, Invulnerability\A\A Pontus is the current king of Atlantis. \A He has been retired from the hero circuit ever since\A taking the crown.";
}


.full-body-character.companion_sp.card.TC007::after,
.game-shield.action-image.tc_show.TC007::after {
    background-image: url(./cg/tc/006-010.png);
    background-position-y: -840px;
}
.game-shield.action-image.tc_show.TC007::before {
  content: "007 - EL DEMÓNICO \A ★☆☆☆☆ \A\A Age: 42\A Powers: None\A\A After El Demónico got suspended from the wrestling\A federation, he turned to crime.\A Thanks to TechMaster™ he rehabilitated and now\A works for the good guys.";
}
.full-body-character.companion_sp.card.TC008::after,
.game-shield.action-image.tc_show.TC008::after {
    background-image: url(./cg/tc/006-010.png);
    background-position-y: -1680px;
}
.game-shield.action-image.tc_show.TC008::before {
  content: "008 - THE BLUR \A ★★☆☆☆ \A\A Age: 32\A Powers: Speed\A\A He can be seen usually eating fast food around\A the city.\A It is believed that he needs to consume lots amount\A of calories to keep up with his metabolism.";
}


.full-body-character.companion_sp.card.TC010::after,
.game-shield.action-image.tc_show.TC010::after {
    background-image: url(./cg/tc/006-010.png);
    background-position-y: -3360px;
}
.game-shield.action-image.tc_show.TC010::before {
  content: "010 - NIGHT SHADE \A ★☆☆☆☆ \A\A Age: Unkown (Probably in his 20s)\A Powers: Rapid Healing\A\A It is believed that Night Shade has been trained by\A martial artists all over the world.";
}
.full-body-character.companion_sp.card.TC011::after,
.game-shield.action-image.tc_show.TC011::after {
    background-image: url(./cg/tc/011-015.png);
}
.game-shield.action-image.tc_show.TC011::before {
  content: "011 - ARCHER III \A ★☆☆☆☆ \A\A Age: 23\A Powers: None\A\A The third generation of Archers, he currently\A shares his name with his father.\A He uses an array of trick arrows to avoid \A maiming his enemies.";
}


.full-body-character.companion_sp.card.TC014::after,
.game-shield.action-image.tc_show.TC014::after {
    background-image: url(./cg/tc/011-015.png);
    background-position-y: -2520px;
}
.game-shield.action-image.tc_show.TC014::before {
  content: "014 - AMPHITRIOS \A ★☆☆☆☆ \A\A Age: 25\A Powers: Breathe Underwater, Psionics on Sea Creatures, \A Invulnerability\A\A One of the children of Pontus, Amphitrios is a prince\A of Atlantins.\A He entered the hero scene to replace his father.\A Hopefully he will become as respected.";
}
.full-body-character.companion_sp.card.TC015::after,
.game-shield.action-image.tc_show.TC015::after {
    background-image: url(./cg/tc/011-015.png);
    background-position-y: -3360px;
}
.game-shield.action-image.tc_show.TC015::before {
  content: "015 - TECHMASTER™ \A ★★☆☆☆ \A\A Age: 29\A Powers: None\A\A Theodore Thompson became a millionaire at\A 12 years old.\A Now the CEO of TheoTech™, he spends some of his\A time in different types of mech armors stopping\A bad guys.";
}


.full-body-character.companion_sp.card.TC019::after,
.game-shield.action-image.tc_show.TC019::after {
    background-image: url(./cg/tc/016-020.png);
    background-position-y: -2520px;
}
.game-shield.action-image.tc_show.TC019::before {
  content: "019 - NIMBUS \A ★★★★☆ \A\A Age: 24\A Powers: Flight\A\A It has been said that Nimbus is capable of using\A his flight powers even when being fucked by someone\A three times his size!";
}
.full-body-character.companion_sp.card.TC020::after,
.game-shield.action-image.tc_show.TC020::after {
    background-image: url(./cg/tc/016-020.png);
    background-position-y: -3360px;
}
.game-shield.action-image.tc_show.TC020::before {
  content: "020 - PONTUS \A ★★★★★ \A\A Age: 243\A Powers: Breathe Underwater, Strength, Invulnerability\A\A It is suspected that centuries ago, Pontus demanded \A sexual payment to cross his territory from sea captains.";
}

.full-body-character.companion_sp.card.TC022::after,
.game-shield.action-image.tc_show.TC022::after {
    background-image: url(./cg/tc/021-025.png);
    background-position-y: -840px;
}
.game-shield.action-image.tc_show.TC022::before {
  content: "022 - EL DEMÓNICO \A ★★★★☆ \A\A Age: 42\A Powers: None\A\A Some say that El Demónico switched sides after \A a hero managed to survive more than seven rounds \A of his poundings.";
}


.full-body-character.companion_sp.card.TC026::after,
.game-shield.action-image.tc_show.TC026::after {
    background-image: url(./cg/tc/026-030.png);
}
.game-shield.action-image.tc_show.TC026::before {
    content: "026 - ARCHER III \A ★★★★☆ \A\A Age: 23\A Powers: None\A\A It is said that Archer can use his training as a \A marksman to aim flawlesly all his volleys of cum.";
}



.full-body-character.companion_sp.card.TC029::after,
.game-shield.action-image.tc_show.TC029::after {
    background-image: url(./cg/tc/026-030.png);
    background-position-y: -2520px;
}
.game-shield.action-image.tc_show.TC029::before {
  content: "029 - AMPHITRIOS \A ★★★★☆ \A\A Age: 25\A Powers: Breathe Underwater, Psionics on Sea Creatures, \A Invulnerability\A\A Amphitrios once took on the whole Atlantean\A royal guard all by himself.\A Just not in a fight...";
}


@keyframes cam-bounce {
  0% {top: 80px;}
  25% {right: 5px;}
  50% {top: 90px;}
  75% {right: -5px}
  100% {top: 80px;}
}