/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.isAsleep {
    transform: rotate(270deg);
}

.isParalyzed {
    transform: rotate(90deg);
}

.isConfused {
    transform: rotate(180deg);
}

.activeDamageCounters {
    left: 65px;
    top: -25px;
    position: relative;
}

img.PoisonMarker, img.BurnMarker {
    width: 25px;
}

.poisonedCounter, .burnCounter {
    top: -25px;
    left: -60px;
    position: relative;
}

.statusMarkers {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 4;
}

.pokemonStatusLayer { position: relative; }
.benchCards { position: relative; }
.benchStatusMarkers { top: 4px; right: 4px; }
.statusMarker { animation: statusGlow 1.6s ease-in-out infinite; }
.lowHpWarning .activePokemonImage { animation: lowHpPulse 1s ease-in-out infinite; }

.turnBanner {
    position: fixed;
    z-index: 10001;
    left: 50%;
    top: 28%;
    padding: 12px 34px;
    border: 3px solid #fff;
    border-radius: 999px;
    color: #fff;
    font: bold 30px Arial, sans-serif;
    text-shadow: 2px 2px 3px #000;
    box-shadow: 0 5px 25px #000;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    transition: opacity .2s ease, transform .35s cubic-bezier(.2,.9,.3,1);
}
.turnBannerMine { background: rgba(25,135,84,.94); }
.turnBannerOpponent { background: rgba(108,117,125,.94); }
.turnBannerVisible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@keyframes statusGlow { 50% { transform: scale(1.1); box-shadow: 0 0 12px #fff; } }
@keyframes lowHpPulse { 50% { filter: drop-shadow(0 0 12px #dc3545); } }
.damageNumber {
    position: fixed;
    z-index: 10002;
    left: 50%;
    top: 58%;
    color: #ff334b;
    font: bold 56px Arial, sans-serif;
    text-shadow: 3px 3px 3px #000;
    opacity: 0;
    transform: translate(-50%, 20px) scale(.6);
    transition: opacity .15s ease, transform .8s ease;
    pointer-events: none;
}
.damageNumberVisible { opacity: 1; transform: translate(-50%, -55px) scale(1.15); }
.healingNumber { position: fixed; z-index: 10002; left: 58%; top: 58%; color: #36d278; font: bold 52px Arial; text-shadow: 3px 3px 3px #000; opacity: 0; transform: translateY(20px) scale(.6); transition: .8s ease; }
.healingNumberVisible { opacity: 1; transform: translateY(-55px) scale(1.15); }
.effectivenessBanner { position: fixed; z-index: 10003; left: 50%; top: 36%; padding: 10px 24px; border-radius: 999px; color: #fff; font: bold 25px Arial; text-shadow: 2px 2px #000; opacity: 0; box-shadow: 0 4px 20px #000; }
.effectivenessBanner.super { background: #1683d8; }
.effectivenessBanner.resisted { background: #6c757d; }
.energyFlightFlash { animation: energyFlight .65s ease-out; }
@keyframes energyFlight { 35% { filter: drop-shadow(0 0 22px #4dc3ff); transform: scale(1.08); } }

.statusMarker {
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font: bold 20px/24px Arial, sans-serif;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 1px 4px #000;
}

.statusSleep { background: #536dfe; }
.statusParalysis { background: #f2c300; color: #111; text-shadow: none; }
.statusConfusion { background: #9c27b0; }

#bubble-container {
    position: relative;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(80, 200, 120, 0.6); /* Poison green with some transparency */
    opacity: 0.75;
}

.pokemonDeckCards {
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.selectedTrainerCard {
    width: 120px;
}

.roundDamageCounter {
    background: red;
    width: 18px;
    color: white;
    text-align: center;
    font-size: 10px;
    border: 2px solid black;
    border-radius: 15px;
    font-weight: bold;
}

.activeRoundDamageCounter {
    background: red;
    width: 26px;
    color: white;
    text-align: center;
    margin: auto;
    font-size: 14px;
    border: 2px solid black;
    border-radius: 15px;
    font-weight: bold;
}

.battleOptions {
    background: white;
    float: right;
    position: relative;
    right: 115px;
    min-width: 200px;
    border: 3px solid crimson;
}

.attackButton .text-start {
    width: 80%;
    float: left;
}

.attackButton .text-end {
    width: 20%;
    float: right;
}

.retreatPokemonBench .damageCounters {
    left: 100px;
    margin-top: -125px;
}


.damageCounters {
    left: 85px;
    position: relative;
    text-align: left;
    margin-top: -150px;
    z-index: 100;
}

.damageCountersTrainer {
    left: 90px;
    position: relative;
    text-align: left;
    margin-top: -125px;
    z-index: 100;
}

#trainerPlace {
    height: 200px;
    width: 140px;
    margin-top: -240px;
    position: absolute;
}

.pokemonregister {
    font-size: 30px;
}

.temphide {
    display: none;
}

.attachedPokemonEnergies {
    width: 130px;
    margin: auto;
    height: 25px;
    top: 155px;
    left: 5px;
    position: relative;
    text-align: left;
    z-index: 100;
}

.turnInfo {
    font-size: 10px;
}

.NoBasicOverlay {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 20px;
    margin-top: 50px;
    color: red;
}

.w-20 {
    width: 20% !important;
}

.attachedPokemonBenchEnergies {
    width: 130px;
    margin: auto;
    height: 25px;
    top: -5px;
    left: 2px;
    position: relative;
    text-align: left;
    z-index: 100;
}

.pokemonHandCards.firstofTwoSelections .attachedPokemonBenchTrainerEnergies {
    top: -10px !important;
}

.attachedPokemonBenchTrainerEnergies {
    width: 130px;
    margin: auto;
    height: 25px;
    top: -10px;
    left: 5px;
    position: relative;
    text-align: left;
    z-index: 100;
}

.attachedPokemonEnergy {
    width: 15px !important;
    float: left;
}

.selectPriceCards {
    border: 2px solid white;
    height: 138px;
    width: 100px;
}

.hide {
    display: none;
}

.superLargeReadyIcon {
    font-size: 90px;
}

.activeUserRound {
    padding: 8px;
    background: green;
    border-radius: 15px;
    width: 3px;
    margin: 3px auto 0 auto;
    border: 1px solid black;
    height: 3px;
}

.RemainingDeckCardImage {
    max-width: 100px;
}

.PriceDeckCardImage {
    max-width: 65px;
}

.DiscardedCards {
    float: right;
    right: 55px;
    position: relative;
    top: 20px;
    opacity: 0.4;
}

.discardDeckCardImage {
    max-width: 45px;
    margin-left: -30px;
}

.discardDeckCardImage:first-child {
    margin-left: 0px;
}

.discardSpecialCard {
    font-size: 12px;
}

.cupOnPrices {
    position: absolute;
    top: 50%;
    cursor:pointer;
    left: 50%;
    font-size: 35px;
    color: #ffcb05;
    text-shadow: 0 0 5px #3c5aa6, /* Top shadow */ 0 0 5px #3c5aa6, /* Bottom shadow */ 5px 0 5px #3c5aa6, /* Right shadow */ -5px 0 5px #3c5aa6; /* Left shadow */
    transform: translate(-50%, -50%); /* Center the element both horizontally and vertically */
/ padding: 5 px; /* Adjust padding as needed */
}

.RemainingDeckCards, .RemainingPrizeCards {
    text-align: center; /* Center the contents horizontally */
    position: relative; /* Required for absolute positioning */
}

.CardDeckCounter {
    position: absolute;
    right: 34px;
    font-size: 15px;
    bottom: -12px;
    background: rgb(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 1px 5px;
}

.PriceDeckCounter {
    position: absolute;
    right: 54px;
    font-size: 15px;
    bottom: -12px;
    background: rgb(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 1px 8px;
}


.OpponentBox {
    position: absolute;
    top: 0px;
    width: 150px;
}

.benchBoxTop {
    border: 10px solid black;
    height: 150px;
    margin: -50px 0 0 0;
    background-color: rgba(255, 255, 255, 1);
}

.OpponentBackCards {
    width: auto; /* Adjust the width as needed */
    height: auto; /* Adjust the height as needed */
    max-width: 50px;
    padding: 2px;
}

.selectAvatar {
    cursor: pointer;
}

.myhandArea {
    margin-top: 50px;
}

.centeredBoxOverlay {
    position: fixed; /* Makes the block stay in the same place even when scrolling */
    top: 40%; /* Center vertically */
    left: 50%; /* Center horizontally */
    min-width: 800px;
    background-color: lightsteelblue;
    min-height: 200px;
    border: 5px solid black;
    border-radius: 20px;
    padding: 10px;
    z-index: 1000; /* Ensures it stays above other content */
    transform: translate(-50%, -50%); /* Adjusts the position to truly center it because top/left refer to the top-left corner */
}

.MyAccountBox .musicSettings {
    background-color: rgba(255, 255, 255, 0.8);
}

div#getReady {
    max-width: 600px;
    margin: auto;
}

.musicSettings {
    padding: 5px 10px;
    font-size: 12px;
}

.selectedBenchCard {
    border: 5px solid green;
}

.retreatPokemon {
    text-align: center;
}

.retreatPokemon .attachedPokemonEnergies {
    top: -12px;
    left: -5px;
    height: auto;
}

.retreatPokemonBench .attachedPokemonBenchEnergies {
    top: -12px;
    left: 15px;
    height: auto;
}

.retreatPokemon .activePokemonImage {
    position: unset;
    margin-left: 0;
    text-align: center;
}

.retreatPokemon .activePokemonImage {
    position: unset;
}

.overlayHeader {
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid;
}


.table > :not(caption) > * > * {
    background: transparent;
}

.benchCards img {
    width: 90px;
    max-height: 150px;
}

.benchCardEnergie img {
    width: 90px;
    max-height: 150px;
}

.MyBenchCards img {
    width: 120px;
    max-height: 200px;
}

.benchCards {
    padding: 2px;
    text-align: center;
}

.OpponentCards {
    margin-top: -30px;
}

.benchBoxBottom {
    border: 10px solid black;
    height: 150px;
    margin: 0 0 -50px 0;
    background-color: rgba(255, 255, 255, 1);
}

.MyAccountBox {
    position: absolute;
    bottom: 10px;
    right: 0px;
    width: 150px;
}

.logBox {
    position: absolute;
    top: 340px;
    left: 0px;
    width: 300px;
}

.logHolder {
    height: 300px;
    font-size: 10px;
    overflow: auto;
}

.logHeader {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid black;
}

.mySettingsBox {
    position: absolute;
    top: 0px;
    right: 0px;
}

.myTurnActions {
    position: absolute;
    top: 200px;
    right: 0px;
    width: 200px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.8);
}

.activePokemonImage {
    width: 120px;
    margin-left: -60px;
    position: absolute;
}

.opponentActivePokemon {
    margin-top: 30px;
}

.myActivePokemon {
    margin-top: -45px;
}

.activePokemon {
    text-align: center;
}

.gameBoard {
    height: 630px;
    border: 10px solid black;
    border-radius: 15px;
    margin-top: 50px;
    background-image: url('../images/arena.jpg'); /* Replace 'path/to/your/image.jpg' with the path to your image */
    background-position: center; /* Center the background image */
    background-size: contain; /* Stretch and scale the image to cover the entire element */
}

.row.centerBoard {
    margin-top: 125px;
}

.pokemon1 {
    font-family: pokemon1;
    color: #ffcb05;
    text-shadow: -10px 0 #3c5aa6, 0 10px #3c5aa6, 10px 0 #3c5aa6, 0 -10px #3c5aa6;
}

.pokemonheader {
    font-family: pokemon1;
    color: #ffcb05;
    margin-top: -5px !important;
    text-shadow: -3px 0 #3c5aa6, 0 3px #3c5aa6, 3px 0 #3c5aa6, 0 -3px #3c5aa6;
}

.pokemonheader:hover {
    color: #3c5aa6;
    text-shadow: -3px 0 #ffcb05, 0 3px #ffcb05, 3px 0 #ffcb05, 0 -3px #ffcb05;
    text-decoration: none;
}

.pokemon2 {
    font-family: pokemon2;
    color: #ffcb05;
    text-shadow: -10px 0 #3c5aa6, 0 10px #3c5aa6, 10px 0 #3c5aa6, 0 -10px #3c5aa6;
}


.lead {
    padding-top: 35px;
    color: white;
    font-weight: bold;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.bg-white {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

body {
    background-image: url(../images/background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);;
}

body {
    background-color: #ffffff;
    background-image: url("../images/overlay.png"), -moz-linear-gradient(60deg, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.15)), url("../images/background.jpg");
    background-image: url("../images/overlay.png"), -webkit-linear-gradient(60deg, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.15)), url("../images/background.jpg");
    background-image: url("../images/overlay.png"), -ms-linear-gradient(60deg, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.15)), url("../images/background.jpg");
    background-image: url("../images/overlay.png"), linear-gradient(60deg, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.15)), url("../images/background.jpg");
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 100px 100px, cover, cover;
    background-position: top left, center center, bottom center;
    background-attachment: fixed, fixed, fixed;
}

footer {
    bottom: 15px;
    position: absolute;
    background: white;
    border-radius: 15px;
}

label {
    font-weight: bold;
}

.card {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
}

.header {
    background-image: url(../images/header_bg.png);
    background-position: center center;
    background-repeat: repeat;
}

.headermenu {
    margin-top: 6px;
}

.smallcard {
    width: 100%;
    padding: 5px;
}

.whitebackground {
    padding: 15px;
    background: rgb(255, 255, 255, 0.8);
    border-radius: 20px;
}

.errormessage {
    color: red;
    font-size: 12px;
}

.supersizeenvelop {
    font-size: 150px;
}

.accountcolors {
    color: #ffc107;
}

.accountcolors:hover {
    color: #007bff;
}

.headercolors {
    color: #007bff;
}

.headercolors:hover {
    color: #ffc107 !important;
}

.accountcolorsdefault {
    color: #007bff;
}

.newsbutton {
    position: absolute;
    bottom: 20px;
    width: 90%;
}

.portrait_bot {
    background: #ffc107;
    border: 1px solid #007bff;
    padding: 5px 10px;
    text-align: center;
    border-radius: 0px 0px 15px 15px;
}

.portrait_top {
    border-bottom: none;
    background: #ffc107;
    border: 1px solid #007bff;
    text-align: center;
    padding: 5px 10px;
    margin-top: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 15px 15px 0px 0px;
}

.portrait {
    border: 1px solid #007bff;
    border-bottom: none;
}

.dashboardtitle {
    margin-top: 10px;
    border: 1px solid #007bff;
    padding: 5px 10px;
    background: #ffc107;
    font-weight: bold;
    border-radius: 15px;
    text-transform: uppercase;
    text-align: center;
}

.mydecks {
    text-align: center;
}

.dashboardbutton {
    margin-top: 5px;
}

div#battleroomsouter {
    text-align: left;
}

.onlineplayers {
    font-size: 14px;
    margin-right: 5px;
}

.backgroundonlineplayers {
    position: absolute;
    font-size: 10px;
    margin: 2px;
    color: lime;
}

.filtertitle {
    font-weight: bold;
    padding: 10px 0px;
}

.filterselect {
    cursor: pointer;
}

.deckbuildercard {
    margin-bottom: 10px;
    cursor: pointer;
}

.typeselect {
    margin-right: 15px;
    margin-bottom: 0px;
}

.hoovercard {
    cursor: zoom-in;
}

.fullcard {
    width: 320px;
    z-index: 1000;
    position: fixed;
    top: 200px;
    right: 0px;
}

#carddeck {
    height: 145px;
    width: 110px;
    margin: 10px auto;
    padding: 10px;
    border: 4px solid #ffc107;
    background: #007bff;
    color: #ffc107;
}

#carddeckdelete {
    height: 145px;
    width: 110px;
    margin: 10px auto;
    padding: 10px;
    border: 4px solid black;
    background: red;
    color: #ffc107;
}

.fullcard {
    display: none;
}

i.far.fa-plus-hexagon, i.far.fa-check {
    font-size: 35px;
    margin-top: 15px;
}

i.far.fa-minus-hexagon, i.far.fa-check {
    font-size: 35px;
    margin-top: 15px;
}

.added {
    display: none;
}

span#resetcards {
    float: right;
}

.draggable {
    z-index: 1;
}

.dragMe {
    cursor: grab;
}

img.mycarddeck {
    max-width: 65px;
}

.notdraggable {
    opacity: 0.5;
    border: 2px solid red !important;
    cursor: not-allowed;
}

.col-sm-6.filtersmall {
    font-size: 12px;
    padding-right: 0px;
    text-align: left;
    margin-top: 15px;
}

div#mydeckcards {
    margin-top: 10px;
    min-height: 100px;
}

.typerow {
    text-align: left;
}

span.tinytext {
    font-size: 12px;
}

.searchfilter {
    margin-top: 10px;
    padding: 2px 10px;
}

.table td, .table th {
    padding: 10px;
}

.table {
    margin-bottom: 0px;
}

table.customtable td {
    padding: 10px 0px;
}

.choosedecktitle {
    float: left;
    font-weight: bold;
}

.modal-footer {
    border-top: none;
}

.nodeckselecterror {
    display: none;
    color: red;
    padding-bottom: 10px;
}

.footerbattlebuttons {
    width: 100%;
}

.footerbut {
    text-align: center;
}

div#battleroomsouter {
    max-height: 310px;
    overflow: hidden;
}

div#battlerooms {
    overflow-y: auto;
    max-height: 310px;
}

.spectateeye {
    color: black;
}

.spectateeye i {
    color: black;
    margin-top: 4px;
}

#cardaddedmessage {
    position: sticky;
    top: 20px;
    z-index: 99999;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    display: none;
    color: white;
    background-color: black;
    border-color: red;
    border: 2px solid red;
    padding: 20px;
}

.offlinefield {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    display: none;
}

.tempborder {
    border: 2px solid red;
}

.centerbattlefield {
    padding: 10px;
}

.console {
    float: left;
    background: black;
    color: lime;
    position: absolute;
    z-index: 999999;
    width: 300px;
    padding: 10px;
    margin-top: 100px;
    margin-left: 20px;
}

.consoletitle {
    border-bottom: 2px solid white;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.innerconsole {
    font-size: 13px;
}

.carddeck {
    margin-bottom: 10px;
    text-align: center;
    padding: 0px 25px;
}

.cardgraveyard {
    margin-bottom: 10px;
    text-align: center;
    padding: 0px 25px;
    opacity: 0.2;
}

.pricetable {
    float: left;
    width: 50%;
    padding: 1px;
}

.cardsinhand {
    width: 100px;
    cursor: pointer;
}

.myhand {
    margin-top: 15px;
    bottom: 0px;
    text-align: center;
}

#requesthand {
    background: black;
    padding: 10px;
}

#draggablehandheader {
    color: white;
    text-transform: uppercase;
    border-bottom: 1px solid white;
    margin-bottom: 10px;
}

.cardsleft {
    margin-top: -24px;
    background: black;
    color: white;
    padding: 0px 2px;
    position: relative;
}

.myturntodraw {
    cursor: pointer;
}

.benchplaceholder {
    border: 1px solid #999;
    background: silver;
    border-radius: 10px;
    height: 141px;
}

.activepokemon {
    text-align: center;
}

.activepokemoninner {
    border: 1px solid #999;
    height: 166px;
    border-radius: 10px;
    width: 120px;
    margin: auto;
}

#draggable {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: white;
    text-align: center;
    line-height: 100px;
    cursor: move;
}

.row.bench {
    margin-top: 15px;
    padding: 0px 40px;
}

.row.opponentbench {
    margin-bottom: 15px;
}

.trainerPlace.drop-location.possibleDragBox {
    border: 3px solid blue;
    animation: animate 3s linear infinite
}

.myActivePokemon.activePokemon.possibleDragBox {
    border: 3px solid blue;
    min-height: 190px;
    width: 145px;
    margin: -55px auto;
    padding: 10px;
    animation: animate 3s linear infinite
}

.benchCards.drop-location.possibleDragBox {
    animation: animate;
    border: 3px solid blue;
    height: 130px;
    animation: animate 3s linear infinite
}

.extra_largeinfo {
    background: black;
    color: white;
    padding: 10px;
}

.actiondiv {
    border-bottom: 1px solid white;
}

.ui-draggable {
    cursor: all-scroll;
}

.newcards {
    max-width: 115px;
}

.fa-spinner {
    margin-top: 25px;
    font-size: 100px;
}


.pulse {
    position: relative;
    animation: animate 3s linear infinite;
    cursor: pointer;
}

.pulse i {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    height: 100%;
    cursor: pointer
}

.coinFlipOverlay {
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 45%;
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
    border: 6px solid #d9d9d9;
    border-radius: 50%;
    color: #fff;
    font: bold 62px/80px Arial, sans-serif;
    text-align: center;
    text-shadow: 2px 2px 3px #222;
    box-shadow: 0 4px 18px #000;
    opacity: 0;
    transform: scale(.35) rotateY(0deg);
    transition: opacity .15s ease, transform .8s cubic-bezier(.2,.8,.3,1);
}
.pokemonCoin { overflow: hidden; background: linear-gradient(to bottom, #e43f3f 0 47%, #151515 47% 53%, #f4f4f4 53% 100%); border-color: #f1c75b; }
.coinPokemonMark { position: absolute; left: 0; right: 0; top: 5px; color: #fff; font: bold 23px Arial; text-shadow: 2px 2px 2px #222; }
.coinResultMark { position: absolute; left: 0; right: 0; bottom: -1px; color: #202020; font: bold 43px Arial; text-shadow: 1px 1px #fff; }
.coinHeads .coinResultMark { color: #ffe066; text-shadow: 2px 2px #8a1c1c; }
.coinTails .coinResultMark { color: #222; }
.coinFlipOverlay.coinFlipVisible {
    opacity: 1;
    transform: scale(1) rotateY(720deg);
}

.trainerPlayedOverlay {
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    width: 190px;
    padding: 14px;
    text-align: center;
    color: #fff;
    background: rgba(15, 15, 25, .94);
    border: 3px solid #ffc107;
    border-radius: 14px;
    box-shadow: 0 8px 30px #000;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6) rotate(-4deg);
    transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.trainerPlayedOverlay.trainerPlayedVisible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.trainerPlayedTitle { font-weight: bold; color: #ffc107; margin-bottom: 8px; }
.trainerPlayedCard { width: 135px; max-height: 190px; object-fit: cover; border-radius: 5px; }
.trainerPlayedName { margin-top: 7px; text-transform: capitalize; }

.attackAnimationOverlay {
    position: fixed;
    z-index: 9998;
    left: 50%;
    top: 46%;
    min-width: 280px;
    text-align: center;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    transition: opacity .15s ease, transform .35s cubic-bezier(.2,.9,.3,1);
    pointer-events: none;
}
.attackAnimationVisible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.attackAnimationBurst {
    width: 150px;
    height: 150px;
    margin: 0 auto -95px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0 8%, rgba(255,193,7,.8) 18%, rgba(220,53,69,.45) 42%, transparent 70%);
    animation: attackBurst .7s ease-out both;
}
.attackAnimationLabel {
    position: relative;
    padding: 9px 18px;
    border: 2px solid #ffc107;
    border-radius: 999px;
    background: rgba(0,0,0,.82);
    color: #ffc107;
    font: bold 22px Arial, sans-serif;
    text-transform: capitalize;
    box-shadow: 0 0 18px rgba(255,193,7,.8);
}
@keyframes attackBurst {
    0% { opacity: 0; transform: scale(.2) rotate(-20deg); }
    35% { opacity: 1; transform: scale(1.3) rotate(8deg); }
    100% { opacity: 0; transform: scale(1.9) rotate(0); }
}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0.7), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    40% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    80% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
}

@keyframes smallAnimate {
    0% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0.7), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    40% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    80% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
}


/* Bootstrap 5 friendly "button tile" */
.deck-tile {
    border: 2px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    background: #fff;
    padding: .5rem;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.deck-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}
.deck-tile:focus {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.deck-img-wrap {
    position: relative;
    border-radius: .6rem;
    overflow: hidden;
}

.deck-selected-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: none; /* shown only when selected */
}

.deck-tile.selected {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.20);
}
.deck-tile.selected .deck-selected-badge {
    display: inline-block;
}


/* In-game dialogs (choices and messages) instead of the browser's alert() and prompt() */
.gameDialogBackdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 5, 15, .55);
    opacity: 0;
    transition: opacity .15s ease;
}
.gameDialogBackdrop.gameDialogVisible { opacity: 1; }
.gameDialog {
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 18px 20px;
    color: #fff;
    background: rgba(15, 15, 25, .96);
    border: 3px solid #ffc107;
    border-radius: 14px;
    box-shadow: 0 10px 40px #000;
    transform: scale(.92);
    transition: transform .2s cubic-bezier(.2, .8, .3, 1);
    font-family: Arial, sans-serif;
}
.gameDialogVisible .gameDialog { transform: scale(1); }
.gameDialog-error { border-color: #dc3545; max-width: 460px; }
.gameDialog-info { max-width: 460px; }
.gameDialogStep {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    min-height: 14px;
}
.gameDialogTitle {
    margin: 4px 0 14px;
    font-size: 20px;
    font-weight: bold;
    color: #ffc107;
    text-wrap: balance;
}
.gameDialog-error .gameDialogTitle { color: #ff8a95; }
.gameDialogText { font-size: 16px; line-height: 1.45; margin-bottom: 16px; }
.gameDialogOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}
.gameDialogOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 140px;
    padding: 10px 8px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.gameDialogOption:hover,
.gameDialogOption:focus-visible {
    transform: translateY(-3px);
    border-color: #ffc107;
    background: rgba(255, 193, 7, .14);
    outline: none;
}
.gameDialogOption.gameDialogTextOnly { width: auto; min-width: 140px; flex-direction: row; justify-content: center; }
.gameDialogCard { width: 110px; max-height: 154px; object-fit: contain; border-radius: 6px; }
.gameDialogIcon { width: 44px; height: 44px; }
.gameDialogLabel { font-size: 14px; line-height: 1.25; text-align: center; }
.gameDialogActions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.gameDialogButton {
    padding: 7px 18px;
    font-weight: bold;
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    cursor: pointer;
}
.gameDialogButton:hover, .gameDialogButton:focus-visible { border-color: #fff; outline: none; }
.gameDialogPrimary { color: #111; background: #ffc107; border-color: #ffc107; }
.gameDialogPrimary:hover, .gameDialogPrimary:focus-visible { background: #ffd34d; border-color: #ffd34d; }
@media (max-width: 500px) {
    .gameDialogOption { width: calc(50% - 6px); }
    .gameDialogCard { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
    .gameDialogBackdrop, .gameDialog, .gameDialogOption { transition: none; }
}


/* Ranking page */
.rankingTable th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.rankingNum { font-variant-numeric: tabular-nums; }
.rankingAvatar { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; border: 2px solid #ffc107; }
.rankingMe td { background: rgba(255, 193, 7, .16) !important; }
.rankingNumber { font-weight: bold; color: #666; }
.rankingMedal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: bold;
    color: #222;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.rankingGold { background: #ffd54a; }
.rankingSilver { background: #d6d9dd; }
.rankingBronze { background: #e0a46c; }


/* Number picker in the game dialog */
.gameDialogStepper { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 18px; }
.gameDialogStepper .gameDialogButton { width: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; }
.gameDialogNumber {
    width: 90px;
    padding: 6px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
}
.gameDialogNumber:focus { outline: none; border-color: #ffc107; }

.gameDialogNumber { -moz-appearance: textfield; appearance: textfield; }
.gameDialogNumber::-webkit-outer-spin-button,
.gameDialogNumber::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }