.faction-ability {
	background-image:url("./img/icons/faction-ability.png");
	top:9.6%;
	width:15%;
	height:80%;
	margin-bottom:-24%
}

.faction-ability .faction-ability-count {
    position: relative;
    width: 100%;
    height: 100%;

    left: 40%;
    top: 17%;
    margin-bottom: -24%;

    color: darkcyan;
    font-size: 1.3vw; /* slightly smaller than 1.5vw */
    font-weight: 700;

    white-space: nowrap;
    letter-spacing: -0.05em;
    text-shadow: 0 0 2px #000;
	transform: scaleX(0.9);
transform-origin: left center;
}



#top-menu-btn{
    position:fixed;
    top:10px;
    right:10px;
    z-index:1900;
    font-size:28px;
    cursor:pointer;
}
#player-id-btn {
  white-space: pre-line;
}
#top-menu{
    position:fixed;
    top:45px;
    right:10px;
    background:#111;
    padding:10px;
    border:1px solid #555;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:9999;
}

#top-menu.hidden{
    display:none;
}

#top-menu button{
    min-width:160px;
}

#session-display{
    position:fixed;
    top:10px;
    left:10px;
    background:#000a;
    padding:6px 10px;
    border-radius:6px;
}



/* Dark fullscreen backdrop */
.tp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 99999999999999;

  /* Make text visible */
  color: #fff;
  font-family: Arial, sans-serif;
}

/* Modal box */
.tp-modal {
  width: 420px;
  max-width: 90%;

  background: #1e1e1e;
  border: 2px solid #444;
  border-radius: 12px;

  padding: 24px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  text-align: center;
}

/* Heading */
.tp-modal h3 {
  margin-top: 0;
  margin-bottom: 16px;

  font-size: 22px;
  color: #ffcc66;
}

/* Paragraph text */
.tp-modal p {
  margin-bottom: 20px;

  font-size: 15px;
  line-height: 1.6;

  color: #e0e0e0;

  word-break: break-word;
}

/* Code styling */
.tp-modal code {
  background: #2b2b2b;
  padding: 2px 6px;
  border-radius: 4px;
  color: #8fd3ff;
}

/* URL */
.tp-modal b {
  color: #ffffff;
}

/* Buttons */
.tp-modal button {
  margin: 8px;
  padding: 10px 18px;

  border: none;
  border-radius: 8px;

  cursor: pointer;

  font-size: 14px;
  font-weight: bold;

  transition: 0.2s ease;
}

/* Accept button */
.tp-accept {
  background: #4caf50;
  color: white;
}

.tp-accept:hover {
  background: #5ecb63;
}

/* Cancel button */
.tp-cancel {
  background: #c0392b;
  color: white;
}

.tp-cancel:hover {
  background: #e74c3c;
}



#chat-overlay{
    position:fixed;
    right:10px;
    bottom:10px;

    width:320px;
    height:360px;

    background:#111;
    border:1px solid #555;
    border-radius:8px;

    z-index:9999;

    display:flex;
    flex-direction:column;

    color:goldenrod;
    font-size:14px;
}

#chat-header{
    padding:8px;
    border-bottom:1px solid #333;
    font-weight:bold;
}

#chat-close{
    float:right;
    cursor:pointer;
    color:darkred;
}

#chat-log{
    flex:1;
    overflow-y:auto;
    padding:8px;
}

.chat-line{
    margin-bottom:6px;
    word-break:break-word;
}

.chat-me{
    color:goldenrod;
}

.chat-op{
    color:#ccc;
}

.chat-system{
    color:darkred;
    font-style:italic;
}

#chat-controls{
    display:flex;
    gap:4px;
    padding:8px;
    border-top:1px solid #333;
}

#chat-input{
    flex:1;
    background:black;
    color:goldenrod;
    border:1px solid #555;
}

.chat-alert{
    color:red !important;
}



.export-card {
    width: 410px !important;
    height: 775px !important;
}







* {
	box-sizing: border-box;
	cursor: url(img/icons/cursor.png), auto;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-X: visible;
	scrollbar-width: none;
}

body {
	font-size: 0;
	font-family: Arial Narrow, sans-serif;
	color: goldenrod;
	background-color: #000;
}

body::-webkit-scrollbar {
	display: none;
}

main {
	position: absolute;
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	background-image: url(img/board.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}

a:hover, label:hover, .hover_un:hover {
	text-decoration:underline;
}

div.abs {
	position:fixed;
	width: 100%;
	height: 100%;
	z-index: 2000;
}

#very_start_bg1 {
	background-image: url(img/start.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}

#very_start_bg2 {
	top: 3%;
	left: 2%;
	width: 32%;
	height: 94%;
	border: solid 4px white;
}

#very_start {
	position:absolute;
	height:auto;
	font-size: 20px;
	color: #DDD;
	z-index: 3000;
	text-align: center;
	font-weight: bold;
}

::selection {
	background: transparent;
}

::-moz-selection {
	background: transparent;
}

::-webkit-scrollbar {
	width: 1.5vw;
}

::-webkit-scrollbar-thumb {
	background: #5559;
	border-radius: .5vw;
	height: 3vw;
	border: .35vw double #000;
}

::-webkit-scrollbar-track {
	background: #131313;
}

html {
	scrollbar-color: #5559 #131313;
}

#click-background {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#hand-op {
	position: absolute;
	height: 6.35vw;
	width: 4.45vw;
	top: -7vw;
	left: 33vw;
	border: 1px solid blue;
}

#hand-op .card {
	position: absolute;
}

#youtube {
	position: fixed;
	height: 10px;
	width: 10px;
	display: hidden;
	z-index: -100;
}

/* Make opponent-ready behave inside top menu */
#top-menu #opponent-ready {
  position: relative;        /* stop absolute positioning */
  top: auto;
  left: auto;

  width: 100%;
  height: auto;

  margin-top: 6px;
  padding: 6px;

  background: rgba(20,20,20,0.8);
  border: 1px solid #333;
  border-radius: 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Fix giant vw-based sizing */
#top-menu #opponent-ready p {
  margin: 0;
  font-size: 12px;
}

#top-menu #opponent-ready img {
  width: 28px;
  height: auto;
}

#top-menu #opponent-ready span {
  font-size: 12px;
  margin-top: 2px;
}

/* Optional: make disabled state still look good in menu */
#top-menu #opponent-ready.disabled {
  opacity: 0.6;
  filter: grayscale(100%);
}



.music-customization {
	transform: translate(22.5vw, -.5vw);
}

#notification-bar {
	position: absolute;
	width: 100%;
	height: 14%;
	top: 43%;
	background-color: rgba(10, 10, 10, .95);
	z-index: 100;
}

#notification-bar>div {
	width: 22.1%;
	height: 207.25%;
	top: -66.6%;
	left: 22.55%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

#notification-bar>div::after {
	position: absolute;
	left: 100.5%;
	top: 32.1%;
	width: 205%;
	height: 47.25%;
	color: goldenrod;
	font-size: 1.6vw;
	text-align: left;
	font-weight: 700;
	display: flex;
	align-items: center;
	white-space: pre;
}

#notif-nilfgaard-wins-draws {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-nilfgaard-wins-draws::after {
	content: "Nilfgaard wins draws";
}

#notif-me_win_via_nilfgaard {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-me_win_via_nilfgaard::after {
	content: "Nilfgaard  faction ability triggered: \A Nilfgaard wins any round that ends in a draw. ";
}

#notif-op_win_via_nilfgaard {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-op_win_via_nilfgaard::after {
	content: "Nilfgaard  faction ability triggered: \A Nilfgaard wins any round that ends in a draw. ";
}


#notif-op-leader::after {
	content: "Opponent uses leader";
}

#notif-op-white-flame {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-op-white-flame::after {
	content: "The opponent's leader cancel \A your opponent's Leader Ability";
}

#notif-meve_white_queen {
	background-image: url(img/icons/notif_lyria_rivia.png);
}

#notif-meve_white_queen::after {
	content: "Lyria & Rivia leader allows both players to restore \A 2 units when using the medic ability.";
}

#notif-medicextra {
	background-image: url(img/icons/anim_medic.png);
}

#notif-medicextra::after {
	content: "You and opponent can revive extra card from medic ability! ";
}

#notif-me-first::after {
	content: "You will go first";
}

#notif-op-first::after {
	content: "Your opponent will go first";
}

#notif-me-coin {
	background-image: url(img/icons/notif_me_coin.png);
}

#notif-me-coin-lambert {
	background-image: url(img/icons/notif_me_coin-lambert.png);
}

#notif-me-coin::after {
	content: "You will go first";
}

#notif-me-coin-lambert::after {
	content: "Lambert lets you start the game";
}

#notif-op-coin {
	background-image: url(img/icons/notif_op_coin.png);
}

#notif-op-coin-lambert {
	background-image: url(img/icons/notif_op_coin-lambert.png);
}

#notif-op-coin::after {
	content: "Your opponent will go first";
}

#notif-op-coin-lambert::after {
	content: "Lambert says that you suck! \A The opponent starts the game!";
}

#notif-round-start {
	background-image: url(img/icons/notif_round_start.png);
}

#notif-round-start::after {
	content: "Round Start";
}

#notif-me-pass {
	background-image: url(img/icons/notif_round_passed.png);
}

#notif-me-pass::after {
	content: "Round passed";
}

#notif-op-pass {
	background-image: url(img/icons/notif_round_passed.png);
}

#notif-op-pass::after {
	content: "Your opponent has passed";
}

#notif-win-round {
	background-image: url(img/icons/notif_win_round.png);
}

#notif-win-round::after {
	content: "You won the round!";
}

#notif-win-opleft {
	background-image: url(img/icons/notif_win_round.png);
}

#notif-win-opleft::after {
	content: "Your opponent left the game";
}

#notif-sv-err {
	background-image: url(img/icons/notif_lose_round.png);
}

#notif-sv-err::after {
	content: "Lost connection to the server";
}

#notif-lose-round {
	background-image: url(img/icons/notif_lose_round.png);
}

#notif-lose-round::after {
	content: "Your opponent won the round";
}

#notif-draw-round {
	background-image: url(img/icons/notif_draw_round.png);
}

#notif-draw-round::after {
	content: "The round ended in a draw";
}

#notif-me-turn {
	background-image: url(img/icons/notif_me_turn.png);
}

#notif-me-turn::after {
	content: "Your turn!";
}

#notif-op-turn {
	background-image: url(img/icons/notif_op_turn.png);
}

#notif-op-turn::after {
	content: "Opponent's turn";
}

#notif-north, #notif-north-scorch-cancelled {
	background-image: url(img/icons/notif_north.png);
}

#notif-north::after {
	content: "Northern Realms faction ability triggered: \A North draws an additional card.";
}

#notif-scol_secondchance {
	background-image: url(img/icons/notif_scoiatael.png);
}

#notif-scol_secondchance_necro1 {
	background-image: url(img/icons/notif_scoiatael.png);
}
#notif-gaunter::after {
	content: "Gaunter o'Dim Ability Used \A Both sides recived additional card!";
}

#notif-gaunter {
	background-image: url(img/icons/icon_card_count.png);
}

#notif-scol_secondchance_necro2::after {
	content: "Gaunter o'Dim Ability Used \A Both sides recived additional card!";
}

#notif-scol_secondchance::after {
	content: "Scoia'tael leader passive ability triggered: \A Scoia'tael draws an additional card from grave.";
}

#notif-north-scorch-cancelled::after {
	content: "Northern Realms leader ability used: \A Scorch ability cancelled for the rest of the round.";
}

#notif-monsters {
	background-image: url(img/icons/notif_monsters.png);
}

#notif-monsters::after {
	content: "Monsters faction ability triggered: \A one Monster Unit Card stays on the board";
}

#notif-draw_end {
	background-image: url(img/icons/notif_lose_round.png);
}

#notif-draw_end::after {
	content: "Gwent game can't end in a draw! \A Face opponent again till winner is picked!";
}

#notif-scol_pick {
	background-image: url(img/icons/notif_scoiatael.png);
}

#notif-scol_pick::after {
	content: "Opponent used Scoia'tael faction ability to pick who play first!";
}

#notif-sky {
	background-image: url(img/icons/notif_sky.png);
}

#notif-sky::after {
	content: "Sky Kindom faction ability triggered: \A One Sky Kindom Unit Card stays on the board";
}

#notif-darkstorm::after {
	content: "Darkness is here... \A Darkness bring destruction to the close combat row!";
}

#notif-darkstorm {
	background-image: url(img/icons/notif_darknessishere.png);
}

#notif-scoiatael {
	background-image: url(img/icons/notif_scoiatael.png);
}

#notif-scoiatael::after {
	content: "Opponent used the Scoia'tael faction perk to go first.";
}

#notif-skellige-op {
	background-image: url(img/icons/notif_skellige.png);
}

#notif-skellige-op::after {
	content: "Opponent Skellige Ability Triggered!";
}

#notif-skellige-me {
	background-image: url(img/icons/notif_skellige.png);
}

#notif-skellige-me::after {
	content: "Skellige Ability Triggered!";
}

#notif-witcher_universe {
	background-image: url(img/icons/notif_witcher_universe.png);
}

#notif-witcher_universe::after {
	content: "Witcher Universe faction ability used: \A Turn skipped.";
}

#notif-toussaint, #notif-toussaint-decoy-cancelled {
	background-image: url(img/icons/notif_toussaint.png);
}

#notif-toussaint::after{
	content: "Toussaint faction ability used: \A Toussaint draws an additional card.";
}

#notif-toussaint-decoy-cancelled::after {
	content: "Toussaint leader ability used: \A Decoy ability cancelled for the rest of the round.";
}

#notif-lyria_rivia {
	background-image: url(img/icons/notif_lyria_rivia.png);
}

#notif-lyria_rivia::after {
	content: "Lyria & Rivia faction ability used: \A Morale Boost effect applied to a row.";
}

#notif-zerrikania {
    background-image: url(img/icons/notif_zerrikania.png);
}

#notif-zerrikania::after {
    content: "Zerrikania faction ability used: \A Unit restored from the discard pile.";
}

#notif-coin-false_player-me {
	background-image: url(img/icons/coin_classic_notif/notif_me_coin.png);
}

#notif-coin-false_player-me::after {
	content: "You skipped your turn";
}

#notif-coin-true_player-me {
	background-image: url(img/icons/coin_classic_notif/notif_op_coin.png);
}

#notif-coin-true_player-me::after {
	content: "You skipped your turn \A But your opponent received an additional card";
}

#notif-coin-false_player-op {
	background-image: url(img/icons/coin_classic_notif/notif_op_coin.png);
}

#notif-coin-false_player-op::after {
	content: "Your opponent skipped their turn";
}

#notif-coin-true_player-op {
	background-image: url(img/icons/coin_classic_notif/notif_me_coin.png);
}

#notif-coin-true_player-op::after {
	content: "Your opponent skipped their turn \A And you received an additional card";
}

#notif-whiteflame2-op_nilfgaard {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-whiteflame2-op_nilfgaard::after {
	content: "Your opponent copied your leader ability";
}

#notif-whiteflame2-op_syndicate {
	background-image: url(img/icons/notif_syndicate.png);
}

#notif-whiteflame2-op_syndicate::after {
	content: "Your opponent copied your leader ability";
}

#notif-whiteflame2-me_nilfgaard {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-whiteflame2-me_nilfgaard::after {
	content: "You copied opponent leader ability!";
}

#notif-whiteflame2-me_syndicate {
	background-image: url(img/icons/notif_syndicate.png);
}

#notif-whiteflame2-me_syndicate::after {
	content: "You copied opponent leader ability!";
}

.card-preview {
	position: relative;
	z-index: 80;
}

.card-preview>.card-lg {
	position: absolute;
	top: 11.95vw;
	left: 80.3vw;
}

.card-preview>.card-description {
	top: 43.1vw;
	left: 67.95vw;
}

.card-lg {
	height: 30.4vw;
	width: 16.1vw;
	border-radius: 1.5vw;
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
}

.card-description {
	position: absolute;
	height: 11vw;
	width: 29.12vw;
	background-color: rgba(20, 20, 20, .95);
	color: tan;
	text-align: center;
	pointer-events: none;
	border: .1vw solid #DDDfff57;
	border-width: .1vw 0;
}

.card-description>* {
	position: relative;
}

.card-description>div {
	top: 1vw;
	left: .9vw;
	width: 1.95vw;
	height: 1.95vw;
	margin-bottom: -1.9vw;
	background-size: cover;
	background-position: center;
}

.card-description>h1 {
	font-weight: 700;
	top: .5vw;
	left: 16%;
	height: 16%;
	width: 70%;
	margin-bottom: -2.1vw;
	text-transform: capitalize;
	font-size: 1vw;
}

.card-description>p {
	top: 16%;
	left: 5%;
	width: 90%;
	height: 50%;
	font-size: .9vw;
}

#carousel {
	position: absolute;
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	z-index: 90;
}

#carousel>:nth-child(1) {
	wdith: 100%;
	heigth: 100%;
	padding: 11.5% 10%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

#carousel>:nth-child(1)>:nth-child(3) {
	border: .3vw solid goldenrod;
	box-shadow: 0 0 4vw goldenrod;
	background-origin: border-box;
}

#carousel>:nth-child(1)>:nth-child(3):hover {
	border: .3vw solid goldenrod;
	box-shadow: 0 0 4vw goldenrod;
	background-origin: border-box;
}

#carousel>:nth-child(1)>:nth-child(2n) {
	width: 13.75vw;
	height: 25.9vw;
}

#carousel>:nth-child(1)>:nth-child(4n - 3) {
	width: 11.3vw;
	height: 21.3vw;
	margin: 0 2.75%;
}

#carousel .card-lg {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	position: relative;
}

#carousel .faction {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	position: relative;
}

#carousel .selection {
	border: .3vw solid green;
	box-shadow: 0 0 4vw green;
	background-origin: border-box;
}

.card-lg {
	border: .1vw solid transparent;
}

.card-lg:hover {
	border: .1vw solid goldenrod;
	box-shadow: 0 0 1vw goldenrod;
}

.start-game_class:hover {
	border: .1vw solid white;
	box-shadow: 0 0 .1vw white;
}

#no_hover:hover {
	border: .1vw solid transparent;
	box-shadow: none;
}

#carousel .card-lg:hover {
	background-origin: border-box;
}

#carousel .card-description {
	left: 35.35%;
	top: 77%;
}

#carousel>:nth-child(3) {
	position: absolute;
	width: 100%;
	height: 7.5%;
	top: 12%;
	font-size: 1.75vw;
	line-height: 250%;
	background-color: rgba(10, 10, 10, .95);
	text-align: center;
	box-shadow: 0 0 1vw #DDDfff54;
}

#popup {
	position: absolute;
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	background-color: rgba(10, 10, 10, .95);
	z-index: 1000;
}

#popup>div {
	margin-top: -89px;
	width: 26.5%;
	border: .2vw ridge rgb(40, 40, 40);
	padding: 0 .5vw;
	background-color: rgb(20, 20, 20);
}

#popup h3 {
	display: block;
	font-size: 1.05vw;
	text-transform: uppercase;
	color: grey;
	text-align: center;
	line-height: 100%;
}

#popup p {
	text-align: center;
	font-size: 1.23vw;
	padding-top: .6vw;
	color: tan;
}

#popup>div>div {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .2vw;
	min-width: 10%;
	width: fit-content;
	margin: -1.4vw auto 0;
	border: .2vw ridge rgb(25, 25, 25);
	background-color: #000;
	top: 1.3vw;
}

#popup button {
	display: inline-block;
	width: auto;
	height: 1.8vw;
	border: .2vw ridge rgb(20, 20, 20);
	background-color: rgb(20, 20, 20);
	font-size: 1vw;
	text-shadow: 1vw 1vw 1vw #000;
	text-transform: capitalize;
	margin: 0 .3vw;
}

#popup button:first-child {
	color: green;
}

#popup button:last-child {
	color: darkred;
}

#end-screen {
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	position: absolute;
	z-index: 1000;
	background-color: rgba(10, 10, 10, .95);
}

#end-screen * {
	position: relative;
}

#end-screen>:nth-child(1) {
	top: 12.6%;
	left: 32.9%;
	width: calc(100% * 656 / 1920);
	height: calc(100% * 416 / 1080);
	margin-bottom: -21.65%;
	background-size: contain;
}

.end-draw {
	background-image: url(img/icons/end_draw.png);
}

.end-win {
	background-image: url(img/icons/end_win.png);
}

.end-lose {
	background-image: url(img/icons/end_lose.png);
}

#end-screen>table {
	top: 55%;
	left: 7.6%;
	width: 74%;
	height: 22%;
	margin-bottom: -12.3%;
	table-layout: fixed;
}

#end-screen tbody :first-child th {
	font-size: .9vw;
	text-align: center;
	color: darkslategrey;
	color: rgb(100, 100, 100);
}

#end-screen td {
	font-size: 1.7vw;
	text-align: center;
	color: rgb(180, 180, 180);
}

#end-screen tr :first-child {
	font-size: 1.2vw;
	text-align: right;
	color: darkorange;
	padding-right: 5%;
}

#end-screen>p {
	top: 80%;
	left: 30.1%;
	width: 41%;
	height: 3%;
	font-size: 1.21vw;
	color: rgb(180, 180, 180);
}

#end-screen button {
	position: center;
	height: 3vw;
	width: 10vw;
	top: 87%;
	font-family: Arial Narrow;
	font-size: 1.5vw;
	color: goldenrod;
	background-color: #4c390a66;
	border: .2vw solid #1d180b;
	border-radius: 1vw;
	box-shadow: 0 0 1vw #6d5210;
}

#pass-button:hover, #toggle-music:hover {
	text-shadow: 0 0 1vw #6d5210;
}

@keyframes loading {
	0% {
			background-position: 100% 0;
	}
	100% {
			background-position: 0 0;
	}
}

#end-screen button:hover {
	box-shadow: 0 0 2vw #6d5210;
}

#end-screen button:nth-of-type(1) {
	left: 35%;
}

#end-screen button:nth-of-type(2) {
	left: 55%;
}

.panel {
	display: inline-block;
	height: 100%;
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: visible;
	overflow-y: visible;
	position: absolute;
	height: calc(100vw * 1080 / 1920);
}

.panel div,
.panel section,
.panel span {
	position: relative;
}

#panel-left {
	width: 26.5%;
}

#panel-mid {
	width: 52.5%;
	left: 26.5%;
}

#panel-right {
	width: 21%;
	left: 79%;
}

#weather {
	top: 41.25%;
	left: 27.9%;
	width: 54.9%;
	height: 12.75%;
	margin-bottom: -27%;
	z-index: 1;
}

.leader-box {
	left: 27.5%;
	width: 31.4%;
	height: 12.5%;
	margin-bottom: -26.25%;
}

.leader-box .card {
	pointer-events: none;
}

.leader-box>.leader-container {
	height: 100%;
	width: 63%;
	margin-bottom: -80%;
	display: flex;
	flex-items: center;
	justify-content: center;
}

.leader-box>div>.card {
	position: absolute;
	height: 98%;
	width: 95%;
	border-radius: .6vw;
}

.leader-active {
	top: 33%;
	left: 75%;
	height: 28%;
	width: 24%;
}

.leader-active>div {
	background-image: url(img/icons/icon_leader_active.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

#leader-op {
	top: 7.55%;
}

#leader-me {
	top: 77.5%;
}

.stats {
	height: 12.5%;
	width: 88.5%;
	margin-bottom: -27%;
	background-color: rgba(20, 20, 20, .0);
	outline: none !important;
  border: none !important;
}

.current-turn {
    box-shadow: -3vw 0 1.5vw 0.25vw rgba(255, 215, 0, 1);
}

#stats-op {
	top: 24.25%;
	outline: none !important;
  border: none !important;
}

#stats-me {
	top: 61.75%;
	outline: none !important;
  border: none !important;
}

.profile-img {
	left: 28.4%;
	top: 9.6%;
	width: 21.9%;
	height: 80%;
	margin-bottom: -24%;
	background-image: url(img/icons/profile.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 100%;
}

.profile-img>div {
	left: -10%;
	top: -6%;
	height: 118%;
	width: 118%;
	background-image: url(img/icons/icon_player_border.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	overflow: visible;
}

.profile-img>div>div {
	width: 43%;
	height: 43%;
	left: -10.5%;
	top: .5%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.faction-ability {
	background-image: url('img/icons/faction-ability.png');
	left: 5%;
	top: 9.6%;
	width: 15%;
	height: 80%;
	margin-bottom: -24%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.faction-ability .faction-ability-count{
	left: 40%;
	top: 17%;
	width: 100%;
	height: 100%;
	margin-bottom: -24%;
	position: relative;
	color: #dddddd;
	font-size: 1.5vw;
	font-weight: bold;
}

#stats-me > div > div > div {
	top: 59%;
}

.score-total {
	top: 21%;
	left: 94.8%;
	height: 40%;
	width: 12%;
	margin-bottom: -12%;
	color: #000;
	text-shadow: 0 0 5px #DDD;
	font-size: 2.3vw;
	font-weight: 700;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#score-total-me {
	background-image: url(img/icons/score_total_me.png);
}

#score-total-op {
	background-image: url(img/icons/score_total_op.png);
}

.score-leader>div {
	background-image: url(img/icons/icon_high_score.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	left: -46%;
	top: -32%;
	width: 195%;
	height: 170%;
}

.hand-count {
	top: 58.5%;
	left: 53.25%;
	height: 29.5%;
	width: 17%;
	margin-bottom: -9%;
	font-size: 1.7vw;
	font-weight: 700;
	padding-left: 7%;
	background-image: url(img/icons/icon_card_count.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

#hand-count-me {
	top: 10%;
}

.gem {
	width: 9%;
	height: 31%;
	margin-bottom: -9.25%;
	background-image: url(img/icons/icon_gem_off.png);
}

.gem-on {
	background-image: url(img/icons/icon_gem_on.png);
}

#gem2-op {
	top: 56.25%;
	left: 70.75%;
}

#gem1-op {
	top: 56%;
	left: 80%;
}

#gem2-me {
	top: 9%;
	left: 70.75%;
}

#gem1-me {
	top: 9%;
	left: 80%;
}

.name {
	left: 53%;
	top: 6%;
	width: 41.5%;
	height: 20%;
	margin-bottom: -6%;
	overflow: hidden;
	white-space: nowrap;
	font-size: 1.1vw;
	font-weight: 700;
}

#name-me {
	top: 46%;
}

.deck-name {
	left: 53%;
	top: 25%;
	width: 41.5%;
	height: 30%;
	margin-bottom: -6%;
	overflow: hidden;
	text-transform: capitalize;
	color: tan;
	font-size: .9vw;
}

#deck-name-me {
	top: 64%;
}

.passed {
	height: 0%;
	width: 0%;
	left: 90%;
	top: 87%;
	color: tan;
	font-size: 1.5vw;
	font-weight: 700;
	text-shadow: 1px 1px 2px #000;
}

#passed-me {
	top: -3%
}

#pass-button {
	top: 56.5%;
  left: 25%;
  width: 162px;
  height: 40px;
  background-color: #0f0f0f;
  font-size: 1rem;
  font-weight: lighter;
}

#surrender-button {
	top: 56.5%;
  left: 25%;
  width: 162px;
  height: 40px;
  background-color: #0f0f0f;
  font-size: 1rem;
  font-weight: lighter;
}

#action-buttons {
    display: flex;
	left: -20%;
    gap: 10px;

    background: rgba(30,30,30,0);
    padding: 8px 12px;
    border-radius: 8px;
}

.key-hint, .key-hint-accent {
	padding-right: 4px;
}

.key-hint {
	font-weight: bold;
	color: #e2e2e2;
}

#pass-button.loading {
	background: linear-gradient(to right, #f3f3f359, #0f0f0f, #0f0f0f);
	background-size: 200% 100%;
	animation: loading 2s linear forwards;
}

.field {
	width: 100%;
	height: 38.5%;
}

.field .hero {
	pointer-events: none;
}

#field-op {
	top: -1.1%;
}

/*
#field-op .card {
	pointer-events: none;
}
*/

#field-me {
	top: -1%;
}

#field-hand {
	width: 100%;
	height: 13%;
}

.field-row {
	height: 32%;
	top: 4%;
	display: flex;
	z-index: 1;
}

.field-row>div {
	position: absolute;
}

.row-score {
	width: 5.1%;
	top: 7%;
	height: 95%;
	margin-bottom: -12.65%;
	font-size: 1.8vw;
	color: #000;
	text-shadow: 0 0 5px #DDD;
}

.row-special {
	width: 14.25%;
	height: 100%;
	left: 5.1%;
	margin-bottom: -12.65%;
}

.row-cards {
	height: 100%;
	width: 80.65%;
	left: 19.35%;
	left: 20%;
	width: 79.7%;
}

.row-weather {
	position: absolute;
	top: 5%;
	left: 5.75%;
	width: 94.25%;
	height: 100%;
	pointer-events: none;
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

.frost {
	background-image: url(img/icons/overlay_frost.png);
}

.rain {
	background-image: url(img/icons/overlay_rain.png);
}

.fog {
	background-image: url(img/icons/overlay_fog.png);
}

#hand-row {
	top: 8%;
	height: 91%;
	left: 7.1%;
	width: 92.5%;
	z-index: 1;
}

#op-hand-row {
    top: 9%;
    height: 91%;
    left: 7.1%;
    width: 92.5%;
    z-index: 1;
}

#op-hand-row.human-op {
    top: -83%;
    height: 91%;
    left: 7.1%;
    width: 92.5%;
    z-index: 2;
}

.row-selectable {
	background-color: rgba(255, 255, 0, .08);
}

.row-selectable:hover {
	box-shadow: 0 0 .25vw rgba(255, 255, 0, 1);
	box-sizing: border-box;
}

.card-selectable>.card:hover {
	border: .12vw outset goldenrod;
	border-radius: .3vw;
	margin-bottom: 1vw;
	z-index: 1;
}

.cardpile {
	width: 27.6%;
	height: 13.5%;
	margin-bottom: -36.25%;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	overflow: visible;
	z-index: 1;
}

.cardpile .card {
	pointer-events: none;
}

/*
	Special cards cardpile
*/

.field-row .cardpile {
	width: 14.25%;
	height: 100%;
	left: 5.1%;
	margin-bottom: -12.65%;
	flex: none;
	position: relative;
}

.field-row .cardpile .special {
	top: -1.7vw;
	margin-top: 2.2vw;
	position: absolute;
}

#grave-op {
	top: 6.5%;
	left: 6.5%;
}

#deck-op {
	top: 6.5%;
	left: 51%;
}

#grave-me {
	top: 76.5%;
	left: 6.5%;
}

#deck-me {
	top: 76.5%;
	left: 51%;
}

.deck-card {
	position: relative;
	display: inline-block;
	height: 6.675vw;
	width: 4.45vw;
	background-size: contain;
	background-repeat: no-repeat;
	box-shadow: -.1vw -.1vw .5vw rgba(20, 20, 20, .5);
}

.deck-counter {
	position: relative;
	background-color: rgba(20, 20, 20, .8);
	width: 3vw;
	height: 2vw;
	z-index: 1;
	color: tan;
	font-size: 1.3vw;
}

.cardpile .deck-card {
	top: -5%;
	margin-top: -114.5%;
}

.cardpile>.card {
	top: -5%;
	margin-top: -108.5%;
}

#deck-customization {
	position: absolute;
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	background-color: rgba(10, 10, 10, .95);
	z-index: 85;
}

/* background image layer */
.deck-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-image: url('img/deck.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	opacity: 0.4; /* controls how visible image is */
	z-index: 0;
}

#faction-title {
	position: absolute;
	height: 5%;
	width: 100%;
	top: 6%;
}

#deck-customization h1 {
	position: absolute;
	font-size: 1.45vw;
	color: #dedede;
	line-height: 220%;
	text-transform: capitalize;
	padding: 0 3%;
	top: -60%;
	background-size: contain;
	background-repeat: no-repeat;
}

#faction-description {
    position: absolute;
    font-size: 1.14vw;
    color: #ab977c;
    top: 8.85%;
    left: 20.2%;
    width: 60%;
    text-align: center;

    /* Allow line breaks */
    white-space: normal;
    overflow-wrap: break-word;
}

.deck-options {
	position: absolute;
	font-size: 1vw;
	color: #DDD;
	top: 15%;
}

#select-deck {
	left: 30%;
}

#upload-deck {
	left: 39%;
}

#change-faction {
	left: 46%;
}

#download-deck {
	left: 54%;
}

#select-op-deck {
	left: 62%;
}

#op-deck-name {
	left: 72%;
	color: #cccccc;
	font-style: italic;
}

#site-links {
    right: 5%;
    top: 5%;
    position: absolute;
    font-size: 1vw;
    color: #ccc;
}

#site-links a {
    color: #aaa;
}

.card-array {
	position: absolute;
	width: 34.4%;
	height: 68%;
	overflow-y: scroll;
	padding: .1vw 1.1vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#card-bank {
	top: 22.5%;
	left: 8.275%;
}

#card-deck {
	top: 22.5%;
	left: 58.4%;
}

/*
	Custom display of cards in Array in customization window
*/

.card-array .card-lg {
	width: 9.88vw;
	height: 18.45vw;
	border-radius: 1vw;
	margin-bottom: .75vw;
	position: relative;
}

.card-array .card-lg .card-large-bg {
	width: 9.88vw;
	height: 18.45vw;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	margin-left: -0.05vw;
}

.card-array .card-lg .card-large-faction-band {
	left: -0.05vw;
	top: 0.55vw;
	width: 2.5vw;
	height: 12.8vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	position: absolute;
}

.card-array .card-lg div.card-count {
	position: relative;
	top: 91%;
	left: 74%;
	width: 20%;
	height: 7%;
	font-size: 1.2vw;
	color: #5f4923;
	padding-left: 1.7vw;
	background-image: url(img/icons/preview_count.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75.5%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 1vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
	line-height: 0.8vw;
}

.card-array .card-lg .card-large-quote {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 83%;
	left: 0%;
	width: 98%;
	height: 5vw;
	font-size: 0.7vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

.card-array .card-lg .card-large-power {
	position: absolute;
	top: -2%;
	left: -4%;
	width: 5vw;
	height: 5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-power .card-large-power-strength {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	font-weight: bold;
	font-size: 1.4vw;
	margin-left: -1.8vw;
	margin-top: 0.8vw;
}

.card-array .hero .card-large-power {
	top: -2%;
	left: -4%;
}

.card-array .hero .card-large-power .card-large-power-strength {
	color: #DDD;
}

.card-array .card-lg .card-large-row {
	position: absolute;
	top: 22%;
	left: 0vw;
	width: 3.5vw;
	height: 2.5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-ability {
	position: absolute;
	top: 40%;
	left: 0vw;
	width: 3.5vw;
	height: 2.5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-ability-2 {
	position: absolute;
	top: 56%;
	left: 0vw;
	width: 3.5vw;
	height: 2.5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

/*
	Custom display of cards in Preview
*/


.card-preview .card-lg .card-large-bg {
	width: 100%;
	height: 100%;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
}

.card-preview .card-lg .card-large-faction-band {
	left: 0.15vw;
	top: 1.15vw;
	width: 4.5vw;
	height: 20.5vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	position: absolute;
}

.card-preview .card-lg .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 1.4vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
	line-height: 1.1vw;
}

.card-preview .card-lg .card-large-quote {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 84%;
	left: 0%;
	width: 96%;
	height: 5vw;
	font-size: 0.9vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

.card-preview .card-lg .card-large-power {
	position: absolute;
	top: -2%;
	left: -4%;
	width: 10vw;
	height: 10vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}
.card-preview .card-lg .card-large-power .card-large-power-strength {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	font-weight: bold;
	font-size: 2.5vw;
	margin-left: -3.6vw;
	margin-top: 1.7vw;
}

.card-preview .hero .card-large-power {
	top: -3%;
	left: -6%;
}

.card-preview .hero .card-large-power .card-large-power-strength {
	color: #DDD;
}

.card-preview .card-lg .card-large-row {
	position: absolute;
	top: 25%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-preview .card-lg .card-large-ability {
	position: absolute;
	top: 40%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-preview .card-lg .card-large-ability-2 {
	position: absolute;
	top: 55%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

/*
	Custom display of carousel cards
*/

#carousel .card-lg .card-large-bg {
	height: 100%;
	width: 100%;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}

#carousel .card-lg .card-large-faction-band {
	left: 0.15vw;
	top: 1.15vw;
	width: 4.5vw;
	height: 20.5vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	position: absolute;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-faction-band {
	left: 0.5vw;
	top: 0.6vw;
	width: 3vw;
	height: 18vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-faction-band {
	left: 0.5vw;
	top: 0.5vw;
	width: 2.5vw;
	height: 14.7vw;
}

#carousel .card-lg .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 1.4vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

#carousel .card-lg .card-large-quote {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 86%;
	left: 0%;
	width: 96%;
	height: 5vw;
	font-size: 0.9vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}


#carousel > :nth-child(1) > :nth-child(2n) .card-large-name {
	font-size: 1.3vw;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-quote {
	font-size: 0.8vw;
}


#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-name {
	font-size: 1.1vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-quote {
	font-size: 0.7vw;
}

#carousel .card-lg .card-large-power {
	position: absolute;
	top: -2%;
	left: -4%;
	width: 10vw;
	height: 10vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel .card-lg .card-large-power .card-large-power-strength {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	font-weight: bold;
	font-size: 2.5vw;
	margin-left: -3.6vw;
	margin-top: 1.7vw;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-power {
	top: -2%;
	left: -4%;
	width: 8vw;
	height: 8vw;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-power .card-large-power-strength {
	margin-left: -2.8vw;
	margin-top: 1.1vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-power {
	top: -2%;
	left: -4%;
	width: 7vw;
	height: 7vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-power .card-large-power-strength {
	margin-left: -2.7vw;
	margin-top: 0.9vw;
	font-size: 2.3vw;
}

#carousel .hero .card-large-power {
	top: -3%;
	left: -6%;
}

#carousel .hero .card-large-power .card-large-power-strength {
	color: #DDD;
}

#carousel .card-lg .card-large-row {
	position: absolute;
	top: 25%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-row {
	height: 3.8vw;
	left: 0%;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-row {
	height: 3.4vw;
	left: 0%;
}

#carousel .card-lg .card-large-ability {
	position: absolute;
	top: 41%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel .card-lg .card-large-ability-2 {
	position: absolute;
	top: 56%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-ability {
	height: 3.4vw;
	top: 41%;
	left: 2.5%;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-ability {
	height: 3vw;
	top: 42%;
	left: 2.5%;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-ability-2 {
	height: 3.4vw;
	top: 56%;
	left: 2.5%;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-ability-2 {
	height: 3vw;
	top: 57%;
	left: 2.5%;
}

#carousel .hide .card-large-bg, #carousel .hide .card-large-faction-band, #carousel .hide .card-large-name, #carousel .hide .card-large-power,
#carousel .hide .card-large-power-strength, #carousel .hide .card-large-row, #carousel .hide .card-large-ability, #carousel .hide .card-large-ability-2, #carousel .hide .card-large-quote {
	display: none;
}
/*
	Custom display of leader card
*/
#card-leader .card-large-bg {
	width: 100%;
	height: 100%;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
}

#card-leader .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 0.9vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

#card-leader .card-large-quote {
	display: none;
}
/*
	---
*/
#card-leader {
	position: absolute;
	height: 27%;
	width: 6.9%;
	top: 20.8%;
	left: 46.6%;
}

#card-leader p {
	font-size: 1.1vw;
	text-align: center;
	color: #8f6c36;
	line-height: 0%;
	margin: 9%;
}

#card-leader > div {
	position: relative;
	height: 84.5%;
	margin-top: 24.5%;
	background-size: contain;
	border-radius: .5vw;
	background-repeat: no-repeat;
}

#deck-stats {
	position: absolute;
	width: 12%;
	height: 30%;
	top: 49.5%;
	left: 44.05%;
}

#deck-stats>p:nth-child(odd) {
	color: #82735f;
	font-size: 1.05vw;
	text-align: center;
	margin-bottom: -6.75%;
}

#deck-stats>p:nth-child(even) {
	font-size: 1.2vw;
	text-align: left;
	color: #9f7d3e;
	padding-left: 2.3vw;
	margin-left: 3.95vw;
	margin-bottom: -6.75%;
	background-repeat: no-repeat;
	background-position: left;
	background-size: 2.5vw;
}

#deck-stats>p:nth-child(2) {
	background-image: url(img/icons/deck_stats_count.png);
}

#deck-stats>p:nth-child(4) {
	background-image: url(img/icons/deck_stats_unit.png);
}

#deck-stats>p:nth-child(6) {
	background-image: url(img/icons/deck_stats_special.png);
}

#deck-stats>p:nth-child(8) {
	background-image: url(img/icons/deck_stats_strength.png);
}

#deck-stats>p:nth-child(10) {
	background-image: url(img/icons/deck_stats_hero.png);
}


.tooltip {
  z-index: 9999;
  position: fixed; /* 👈 more reliable than absolute */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  background-color: #fff;   /* white */
  color: #111;              /* dark text */
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;

  opacity: 0;
 
  transition: opacity 0.2s ease;

  border: 1px solid #ccc;
}

.side-tooltip {
  position: fixed;
  left: 20px;
  bottom: 60px; /* a bit above the bottom */

  background: #004f4f; /* dark cyan */
  color: #e0ffff;

  padding: 12px 16px;
  border-radius: 8px;

  font-size: 14px;
  font-family: sans-serif;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;

  pointer-events: none;
  z-index: 9999;
}

.side-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.tooltip.show {
  opacity: 1;
}
.tooltip.show {
	visibility: visible;
	opacity: 1;
}

.tooltip2 {
  z-index: 9999;
  position: fixed; /* 👈 more reliable than absolute */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  background-color: #fff;   /* white */
  color: #111;              /* dark text */
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;

  opacity: 0;
 
  transition: opacity 0.2s ease;

  border: 1px solid #ccc;
}

.tooltip2.show {
  opacity: 1;
}
.tooltip2.show {
	visibility: visible;
	opacity: 1;
}

.start-game_class {
	white-space: nowrap;
	color: #DDD;
	background-color: rgb(20, 20, 20);
	border: .1vw ridge rgb(30, 30, 30);
}

.card-contianer-title {
	position: absolute;
	width: 10%;
	height: 3%;
	font-size: 1.3vw;
	color: #959595;
}

#card-bank-title {
	top: 7.45%;
	left: 8.5%;
}

#card-deck-title {
	top: 7.8%;
	left: 84.45%;
}

.card {
	height: 6.35vw;
	width: 4.45vw;
	background-size: contain;
	background-repeat: no-repeat;
	box-shadow: -.1vw -.1vw .5vw rgba(20, 20, 20, .5);
	display: inline-block;
	position: relative;
	transition: margin-bottom 0.05s, margin-left .25s, margin-right .25s, transform 0.5s;
	z-index=1;
}

.deck-card .card {
	position: absolute;
}

.card>div {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.card>div:nth-child(1) {
	top: -4%;
	left: -4%;
	width: 70%;
	height: 50%;
	margin-bottom: -71%;
	background-position: 0 0;
}

.card>div:nth-child(1)>div {
	top: 13%;
	left: 7%;
	width: 50%;
	heighth: 50%;
	font-size: 1vw;
	font-weight: 700;
	color: #000;
	text-shadow: 0 0 .1vw #DDD;
}

.hero>div:nth-child(1)>div {
	color: #DDD;
	text-shadow: 0 0 .1vw #000;
}

.card>div:nth-child(2) {
	top: 75%;
	left: 65%;
	width: 33%;
	height: 22%;
	margin-bottom: -32%;
}

.card>div:nth-child(3) {
	top: 75%;
	left: 32%;
	width: 33%;
	height: 22%;
	margin-bottom: -32%;
	font-size: 1vw;
}

.card > .card-ability-2:nth-child(4) {
	top: 75%;
	left: 0%;
	width: 33%;
	height: 22%;
	margin-bottom: -32%;
	font-size: 1vw;
}

.card > div:last-child {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: 40% auto;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: background-size 0.25s;
}

.card-container {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.card-container .card {
	margin: 0 1px;
	flex-shrink: 0;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.bg-contain {
	background-size: contain;
	background-repeat: no-repeat;
}

.visible {
	display: visible;
}

.hide {
	display: none;
}

.fade {
	opacity: .2;
	filter: alpha(opacity=20);
}
.hidden { visibility: hidden; }

 .disabled:hover {
	box-shadow: 0px 3px 5px 0px rgb(21, 21, 21) !important;
	/* border-bottom-width: 2px; */
  transform: translateY(0px) !important; 
 }

.noclick {
    pointer-events: none !important;
}

.noclick .allow-click {
    pointer-events: auto !important;
}