* {
    box-sizing: border-box;
    --primary: #4CA6FF;
    --primary-dark: #265380;
    --negative: #FF766B;
    --negative-dark: #932C2B;
    --overlay-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);

    --btn-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 1px rgba(0,0,0,0.18),
        0 1px 2px rgba(0,0,0,0.18),
        0 2px 6px rgba(0,0,0,0.16);
    --btn-shadow-hover:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 1px rgba(0,0,0,0.15),
        0 2px 4px rgba(0,0,0,0.20),
        0 6px 14px rgba(0,0,0,0.20);
    --btn-shadow-active:
        inset 0 2px 5px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.10);

    --blue-gradient:   linear-gradient(#4C87F2, #0252C2);
    --red-gradient:    linear-gradient(#FB6A68, #D92F2E);
    --purple-gradient: linear-gradient(#8A47C2, #602A9C);
    --orange-gradient: linear-gradient(#FB7B28, #E45E18);
    --green-gradient:  linear-gradient(#54B66A, #258243);
    --gold-gradient:   linear-gradient(#F1BE44, #B18009);
    --aether-gradient: linear-gradient(#F0554D, #B8150C);

    --blue-hover:   linear-gradient(#679AF6, #0061E8);
    --red-hover:    linear-gradient(#FD8685, #E14B4A);
    --purple-hover: linear-gradient(#995CCC, #712FBA);
    --orange-hover: linear-gradient(#FD8D44, #EC7334);
    --green-hover:  linear-gradient(#67C17C, #2BA051);
    --gold-hover:   linear-gradient(#F5C95F, #D59909);
    --aether-hover: linear-gradient(#F46E68, #DC170C);

    --blue-active:   linear-gradient(#3477F0, #0247A9);
    --red-active:    linear-gradient(#FA514F, #C92625);
    --purple-active: linear-gradient(#7D3CB4, #542588);
    --orange-active: linear-gradient(#FB6C0F, #CD5416);
    --green-active:  linear-gradient(#48A95E, #1F6E39);
    --gold-active:   linear-gradient(#EFB62C, #996E08);
    --aether-active: linear-gradient(#EE3F35, #A0120A);
}

/* base — this is what kills the bottom-right bevel */
.btn-blue, .btn-red, .btn-purple, .btn-orange,
.btn-green, .btn-gold, .btn-aether {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid;          /* solid + appearance:none = no native bevel */
    border-radius: 6px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    box-shadow: var(--btn-shadow);
    transition: background .12s ease, box-shadow .12s ease, transform .08s ease;
}
.btn-blue:hover, .btn-red:hover, .btn-purple:hover, .btn-orange:hover,
.btn-green:hover, .btn-gold:hover, .btn-aether:hover {
}
.btn-blue:active, .btn-red:active, .btn-purple:active, .btn-orange:active,
.btn-green:active, .btn-gold:active, .btn-aether:active {
    transform: translateY(1px);
}

.btn-blue   { background: var(--blue-gradient);   border-color: #013885; }
.btn-red    { background: var(--red-gradient);    border-color: #AB201F; }
.btn-purple { background: var(--purple-gradient); border-color: #421D6C; }
.btn-orange { background: var(--orange-gradient); border-color: #AD4712; }
.btn-green  { background: var(--green-gradient);  border-color: #17522A; }
.btn-gold   { background: var(--gold-gradient);   border-color: #775606; }
.btn-aether { background: var(--aether-gradient); border-color: #7F0E08; }

.btn-blue:hover   { background: var(--blue-hover); }
.btn-red:hover    { background: var(--red-hover); }
.btn-purple:hover { background: var(--purple-hover); }
.btn-orange:hover { background: var(--orange-hover); }
.btn-green:hover  { background: var(--green-hover); }
.btn-gold:hover   { background: var(--gold-hover); }
.btn-aether:hover { background: var(--aether-hover); }

.btn-blue:active   { background: var(--blue-active); }
.btn-red:active    { background: var(--red-active); }
.btn-purple:active { background: var(--purple-active); }
.btn-orange:active { background: var(--orange-active); }
.btn-green:active  { background: var(--green-active); }
.btn-gold:active   { background: var(--gold-active); }
.btn-aether:active { background: var(--aether-active); }

.dungeon-btn {
    appearance: none; -webkit-appearance: none;
    background: var(--blue-gradient);
    border: 1px solid #013885;
    border-radius: 6px;
    width: 44px; height: 44px;
    box-shadow: var(--btn-shadow);
    transition: background .12s ease, box-shadow .12s ease, transform .08s ease;
}
.dungeon-btn:hover  { background: var(--blue-hover); }
.dungeon-btn:active { background: var(--blue-active); }

.dungeon-btn.dungeon-tier-2 { background: var(--purple-gradient); border-color: #421D6C; }
.dungeon-btn.dungeon-tier-2:hover  { background: var(--purple-hover); }
.dungeon-btn.dungeon-tier-2:active { background: var(--purple-active); }

.dungeon-btn.dungeon-tier-3 { background: var(--gold-gradient); border-color: #775606; }
.dungeon-btn.dungeon-tier-3:hover  { background: var(--gold-hover); }
.dungeon-btn.dungeon-tier-3:active { background: var(--gold-active); }

.dungeon-btn.dungeon-tier-4 { background: var(--aether-gradient); border-color: #7F0E08; }
.dungeon-btn.dungeon-tier-4:hover  { background: var(--aether-hover); }
.dungeon-btn.dungeon-tier-4:active { background: var(--aether-active); }

.dungeon-btn img {
    width: 40px;
}

.dungeon-btn img:not(.selected) {
    filter: grayscale(100%);
}

.dungeon-btn:not(.locked) img:not(.selected) {
    cursor: pointer;
}

.dungeon-btn:not(.locked) img:hover {
    filter: none;
}

#power-up-speed {
  --flash-border: #0077c2;
  --flash-ring:  rgba(72,186,255,.55);
  --flash-glow:  rgba(72,186,255,.9);
}

#power-up-army {
  --flash-border: #8a5600;                 /* darkened B57204 for contrast on white */
  --flash-ring:  rgba(181,114,4,.55);
  --flash-glow:  rgba(181,114,4,.9);
}

#power-up-xp {
  --flash-border: #840b9d;                 /* darkened BD10E0 for contrast on white */
  --flash-ring:  rgba(189,16,224,.55);
  --flash-glow:  rgba(189,16,224,.9);
}

/*#power-up-speed svg.active,
#power-up-army svg.active,
#power-up-xp svg.active {
    border-color: var(--flash-border);
    box-shadow: 0 0 0 3px var(--flash-ring),
                0 0 22px 6px var(--flash-glow);
    transform: scale(1.08);
}*/

@keyframes flash {
  0%, 100% {
    border-color: var(--surface-line);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1);
  }
  35% {
    border-color: var(--flash-border);
    box-shadow: 0 0 0 3px var(--flash-ring),
                0 0 22px 6px var(--flash-glow);
    transform: scale(1.08);
  }
}
.activated { animation: flash .55s ease; }
.deny{ animation:deny .3s ease; }

@keyframes deny{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

@keyframes notifyCannot {
    0% { color: red; }
    100% { color: black; }
}

@keyframes denyText {
    0% { color: red; }
    100% { color: white; }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.notify-cannot {
    animation: notifyCannot 1s ease-in-out;
}

.deny-text {
    animation: denyText .6s ease;
}

html {
    width: 100%;
    height: 100%;
    user-select: none;
}

body {
    margin: 0px;
    /*background-color: var(--primary-dark);*/
    /*background-color: #18191C;*/
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden; /* Disable scrolling */
    overscroll-behavior: none;
    /*background: url(../images/grid.png);*/
    /*background: url(../images/space-background.jpg);*/

    /** These four lines are requested by the CrazyGames technical requirements: https://docs.crazygames.com/requirements/technical/ */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

#content {
    display: flex;
    justify-content: center;
    height: 100%;
    position: relative;
    /*margin: auto;*/
}

#canvas {
    /*background-color: rgb(204, 230, 255);*/
    /*background: url(../images/grid.png);*/
    margin: auto;
    display: block;
}

#game-mode-tooltip-overlay {
    --tooltip-left: 24px;
}

#stat-tooltip {
    white-space: pre-line;
}

#game-mode-tooltip-overlay::before, #stat-tooltip-overlay::before {
    content: '';
    display: block;  
    position: absolute;
    width: 0;
    height: 0;
    border: 15px solid transparent;
}

#game-mode-tooltip-overlay::after, #stat-tooltip-overlay::after {
    content: '';
    display: block;  
    position: absolute;
    width: 0;
    height: 0;
    border: 14px solid transparent;
}

#game-mode-tooltip-overlay::before {
    left: var(--tooltip-left);
    border-bottom-color: rgb(128,128,128,0.9);
    bottom: 100%;
    pointer-events: none;
}

#game-mode-tooltip-overlay::after {
    left: calc(var(--tooltip-left) + 1px);
    border-bottom-color: rgba(255,255,255,1);
    bottom: calc(100% - 1px);
    pointer-events: none;
}

#stat-tooltip-overlay::before {
    border-left-color: rgb(128,128,128,0.9);
    left: 100%;
    /*top: 6px;*/
    pointer-events: none;
}

#stat-tooltip-overlay::after {
    border-left-color: rgba(255,255,255,1);
    left: calc(100% - 1px);
    /*top: 7px;*/
    pointer-events: none;
}

#title-overlay {
    font-size: 16vh;
    color: rgba(0,0,0,0.8);
    transform: none;
    top: 0%;
    cursor: default;
}

#invite-overlay {
    color: rgba(0,0,0,0.8);
    cursor: default;
    top:0px;
    transform: initial;
}

#game-mode-overlay {
    /*display: inline-block;*/
}

#game-mode-overlay.closed {
    margin-left: 282px;
}

#game-mode-overlay.open {
    margin-left: 404px;
}

#game-mode-overlay.closed .game-mode-button-container:not(.selected) {
    display: none;
}

#game-mode-overlay.open #game-mode-buttons-container {
    display: flex;
}

.game-mode {
    background: var(--primary);
    border: 1px solid var(--primary-dark);
    margin: auto;
    border-radius: 6px;
    width: 44px;
    padding: 0;
    height: 44px;
    margin-bottom: 16px;
}

.game-mode-button-container {
    display: grid;
}

#game-mode-overlay.open .game-mode-button-container:not(:last-child) {
    margin-right: 8px;
}

.game-mode-label {
    font-size: 10px;
}

.game-mode img {
    padding-top: 1px;
}

.game-mode img:not(.selected) {
    filter: grayscale(100%);
    cursor: pointer;
}

.game-mode img:hover {
    filter: none;
}

#status-overlay {
    font-size: 8vh;
    color: rgba(0,0,0,0.8);
    cursor: default;
}

#stats {
    position: absolute;
    right: 0px;
    top: 20px;
    font-family: monospace;
    width: 240px;
    font-size: 18px;
    background-color: rgb(0,0,0,0.6);
    z-index: 9999;

    /*display: flex;
    height: fit-content;*/
}

#timer {
    position: absolute;
    transform: translateX(-50%);  /* centers the timer on the x we set, whatever its width */
    text-align: center;
    z-index: 9999;
}

.fade-in-victory {
    animation: fadeIn 2.0s ease-in forwards;
    opacity: 0;
}

/*.fade-in-victory-team {
    animation: fadeIn 2.0s ease-in forwards;
    opacity: 0;
}*/

.fade-in-loss {
    animation: fadeIn 2.5s ease-in forwards;
    opacity: 0;
}

.leaderboard {
    display: block;
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.card {
    border-radius: 5px;
    padding: 4px;
    height: fit-content;
    margin: 18px;
    clear: both;
}

.card span {
}

.button, .input {
    /*background: var(--primary);
    border: 1px solid var(--primary-dark);*/
    margin: 0 8px;
    padding: 8px 28px;
    border-radius: 12px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    outline: none;
    overflow: hidden;
    color: white;
    width: fit-content;
    margin: auto;
}

.button {
    cursor: pointer;
}

.input {
    border-radius: 12px;
    width: 50%;
}

.button:hover {
    /*background: var(--primary-dark);*/
}

.button:not(:last-child) {
    margin-bottom: 16px;
}

.button:first-child {
    margin-bottom: 16px;
}

.overlay {
    /*cursor: auto;*/
    position: absolute;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,1.0);
    border-radius: 10px;
    display: grid;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    border: 1px solid rgb(128,128,128,1.0);
    z-index: 9999;
    box-shadow: var(--overlay-shadow);
}

.text-only-overlay {
    background-color: rgba(0,0,0,0);
    border: 0;
    /* I get Comic Sans MS to work on desktop and Baskerville to work on Android. Supposedly that American Typewriter works on ios and Mac. Others are fallback. */
    font-family: 'Comic Sans MS', 'Baskerville', 'American Typewriter', 'Palatino', 'Roboto Light', 'Marker Felt', 'Chalkduster';
}

.dark-overlay {
    position: fixed; /* Fixed position to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    z-index: 999; /* Ensure it's on top of other content */
    /* To allow click-through, for the banner ad */
    /*pointer-events: none;*/
}

#yes-no-dialog {
    z-index: 99999;
}

.game-mode-button, .invite-game-mode-button {

    width: 40px;
}

.select-color-container {
    display: flex;
}

.header {
    font-size: 14px;
    margin-bottom: 16px;
    display: block;
}

.invite-header {
    font-weight: bold;
}

.invite-header:not(:first-child) {
    margin-top: 16px;
}

input[type=checkbox] {
    display: none;
}

.checkbox::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 10px;
    cursor: pointer;
    background: var(--primary);
    border: 1px solid var(--primary-dark);
    border-radius: 4px;
}

input[type=checkbox]:checked + .checkbox::before {
    content: '✓';
    font-size: 18px;
    line-height: 1;
    /*color: var(--primary-dark);*/
}

.seat-name {
    margin-bottom: 16px;
    cursor: pointer;
}

.invite-seat {
    cursor: pointer;
}

.invite-link {
    /*cursor: pointer;*/
}

.button.negative {
    border-color: var(--negative-dark);
    background: var(--negative);
}

.button.negative:hover {
    background: var(--negative-dark);
}

#rpg-stats-overlay,
#rpg-level-overlay,
#battle-results-overlay,
#reincarnation-overlay,
#next-floor-overlay,
#skills-overlay,
#enter-dungeon-overlay,
#achievements-overlay,
#revive-overlay,
#reward-overlay,
#boost-overlay,
#boosts-overlay {
    font: 16px monospace;
}

.reward-option svg {
    margin-bottom: 4px;
    cursor: pointer;
}

.clickable {
    cursor: pointer;
}

.rpg-button-boost:not(#stats-fighters-increase-boosted) {
    visibility: hidden;
}

.color-fighters   { --glow: rgba(139,  87,  42, .7); }  /* #8B572A */
.color-necromancy { --glow: rgba(201, 201, 201, .7); }  /* #c9c9c9 */
.color-health     { --glow: rgba( 65, 117,   5, .7); }  /* #417505 */
.color-convert    { --glow: rgba(248, 231,  28, .7); }  /* #F8E71C */
.color-attack     { --glow: rgba(208,   2,  27, .7); }  /* #D0021B */
.color-heal       { --glow: rgba( 74, 144, 226, .7); }  /* #4A90E2 */
.color-regen      { --glow: rgba( 80, 227, 194, .7); }  /* #50E3C2 */
.color-xp         { --glow: rgba(189,  16 ,224, .7); }

.reward-option.selected svg {
    filter:
        drop-shadow( 1px  0   2px var(--glow))
        drop-shadow(-1px  0   2px var(--glow))
        drop-shadow( 0    1px 2px var(--glow))
        drop-shadow( 0   -1px 2px var(--glow));
}

.button.rpg-button {
    border-radius: 8px;
    width: 42px;
    padding: 8px;
    /*width: 26px;
    padding: 0px;*/
    margin: 0px;
}

.button.rpg-help-button {
    width: 18px;
    line-height: 16px;
    border-radius: 12px;
    padding: 0px;
    margin: 0px;
}

.rpg-stat-header-label, .rpg-stat-header-value, .rpg-stat-header-increase, .rpg-stat-header-cost {
    font-weight: bold;
}

.rpg-stat-header-row {
}
.rpg-stat-row {
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: left;
}

.rpg-stat-label {
    /*font-weight: bold;*/
}

.battle-result {
    float: right;
}

.rpg-stat-header-label, .rpg-stat-label, .battle-result {
    /*width: 80px;*/
    display: inline-block;
}

.rpg-stat-header-value, .rpg-stat-value {
    /*width: 80px;*/
    display: inline-block;
}

.rpg-stat-header-increase, .rpg-stat-increase {
    display: inline-block;
}

.rpg-stat-header-cost, .rpg-stat-cost {
    display: inline-block;
}

.health-bar {
    border-radius: 99px;
    /*width: 12px;
    flex-shrink: 0;*/
}

#floor-stats-label {
    font-family: monospace;
}

.ingame-overlay-container {
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: max-content;
    z-index: 9999;
    position: absolute;
}

#stats-container {
    flex-direction: column;
    gap: 16px;
    /*background: #252525;
    color: white;*/
}

.gui-icon { width: 48px; height: 48px; }

.your-army-row {
    display: flex; align-items: center;
}

.your-army-icon {
    margin-right: 8px;
}

.your-army-label-value-wrapper {
    display: flex; flex-direction: column;
}

.your-army-label-value-wrapper span {
    text-align: left;
}

.your-army-row .rpg-button {
    margin-left: 32px;
    margin-right: 12px;
    padding: 8px 0;
}

.overlay-header {
    font-size: 18px;
    font-weight: bold
}

.btn-wrapper {
  display: inline-block; /* or inline-flex */
  width: fit-content;
  padding: 0;
  margin: 0;
  line-height: 0; /* kills any extra inline spacing */
}

/*select, .select {
    text-align: center;
    background: var(--primary);
    border: 1px solid var(--primary-dark);
    margin: 0 8px;
    padding: 8px 0px;
    border-radius: 12px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    outline: none;
    color: white;
    width: fit-content;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

select:hover, .select:hover {
    background-color: var(--primary-dark);
}

select option {
    background: white;
    color: black;
    font-weight: normal;
}*/

.gui-stats-and-health {
    display: flex;
    flex-direction: row;
}

/*.gui-stats-and-health {
    position: absolute;
    top: 0;
    z-index: 2;
}
#gui-stats-and-health-player  { left: 0; }
#gui-stats-and-health-monster { right: 0; }*/

.gui-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    height: fit-content;
}

.gui-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gui-stat-row svg {
    width: 40px;
    height: 40px;
}

.gui-stat-row span {
    font-family: monospace;
    font-size: 18px;
}

.gui-stat-row svg,
.achievement-row .gui-icon svg,
svg.gui-icon,
.reward-option svg,
.icon-menu-row svg/*,
svg.reward-icon*/ {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
/*.gui-stat-row svg { filter: url(#icon-bevel); }*/


#power-ups-wrapper, #exit-wrapper {
    flex-direction: column;
    gap: 16px;
    display: flex;
    position: absolute;
    z-index: 1;
    /*top: 76px;
    left: 72px;
    margin-left: 64px;*/
}


#power-ups {
    flex-direction: row;
    gap: 16px;
    display: flex;
}

.power-up-video-icon {
    position: absolute;
    left: -8px;
    top: -10px;
    width: 24px;
    height: 24px;
}

.button-video-icon {
    width: 32px;
    height: 32px;
}

.power-up-icon {
    height: 48px;
    width: 48px;
}

.reward-video-icon {
    position: absolute;
    left: -10px;
    top: -12px;
    width: 28px;
    height: 28px;
}

.revive-icon,
.reward-icon {
    height: 60px;
    width: 60px;
}

.revive-label,
.reward-label {
    font-family: monospace;
    text-align: center;
    font-size: 12px;
}

.power-up {
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}
.power-up:hover {
    opacity: 0.9;
}

.power-up-label {
    font-family: monospace;
    text-align: center;
    font-size: 10px;
}

.power-up-shortcut {
    position: absolute;
    top: -5px;
    right: -5px;
    font-family: monospace;
    font-size: 10px;
    line-height: 1;
    color: #fff;
    background: #000;
    border-radius: 3px;
    padding: 2px 4px;
}

.power-up-remaining {
    position: absolute;
    top: -5px;
    left: -5px;
    font-family: monospace;
    font-size: 10px;
    line-height: 1;
    color: #fff;
    background: #000;
    border-radius: 3px;
    padding: 2px 4px;
    z-index: 1;
}

.power-up-shortcut, .power-up-video-icon {
    z-index: 1;
}

.revive-power-up-icon-wrapper,
.reward-option {
    display: flex;
    flex-direction: column;
}


.cooldown {
    display: flex;
    align-items: center;
    margin-top: 1px
}

.cooldown-track {
    flex: 1;
    height: 9px;
    background: #000;
    border: 1px solid #000;
    border-radius: 999px;
    overflow: hidden;
}

.cooldown-fill {
    height: 100%;
    transform-origin: left center;
}


.select-container {
    position: relative; display: inline-block; width: fit-content;
    margin: auto; user-select: none;
}
.select-trigger {
    border: 1px solid #775606;            /* gold border */
    background: var(--gold-gradient);     /* default theme = gold */
    box-shadow: var(--btn-shadow);
    padding: 8px 40px 8px 28px; border-radius: 20px;
    line-height: 24px; font-size: 14px; font-weight: 600;
    letter-spacing: 0.02em; color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    cursor: pointer; white-space: nowrap; outline: none; overflow: hidden;
    transition: background 0.15s ease;
}
.select-trigger:hover                      { background: var(--gold-hover); }
.select-container.open .select-trigger     { background: var(--gold-active); }
.select-trigger::after {
    content: ''; position: absolute; right: 18px; top: 50%;
    width: 7px; height: 7px; border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease; pointer-events: none;
}
.select-container.open .select-trigger::after { transform: translateY(-35%) rotate(-135deg); }
.select-options {
    position: absolute; top: calc(100% + 6px); left: 50%; min-width: 100%;
    background: rgba(255,255,255,0.95); border: 1px solid rgb(128,128,128,0.9);
    border-radius: 10px; padding: 6px 0; z-index: 9999;
    opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    max-height: 240px; overflow-y: auto;
}
.select-container.open .select-options { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.select-option {
    padding: 8px 28px; font-size: 14px; font-weight: 600;
    letter-spacing: 0.02em; color: #775606; cursor: pointer;
    white-space: nowrap; transition: background 0.1s ease, color 0.1s ease;
}
.select-option:hover         { background: #EBB735; color: white; }
.select-option.selected      { background: #996E12; color: white; }
.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* positive = blue */
.select-container.positive .select-trigger { border-color: #013885; background: var(--blue-gradient); }
.select-container.positive .select-trigger:hover { background: var(--blue-hover); }
.select-container.positive.open .select-trigger { background: var(--blue-active); }
.select-container.positive .select-option { color: var(--primary-dark); }
.select-container.positive .select-option:hover { background: var(--primary); color: white; }
.select-container.positive .select-option.selected { background: var(--primary-dark); color: white; }

/* negative = red */
.select-container.negative .select-trigger { border-color: #AB201F; background: var(--red-gradient); }
.select-container.negative .select-trigger:hover { background: var(--red-hover); }
.select-container.negative.open .select-trigger { background: var(--red-active); }
.select-container.negative .select-option { color: var(--negative-dark); }
.select-container.negative .select-option:hover { background: var(--negative); color: white; }
.select-container.negative .select-option.selected { background: var(--negative-dark); color: white; }

/* compact */
.select-container.compact .select-trigger {
    padding: 6px 32px 6px 12px; font-size: 10px; border-radius: 6px; line-height: 18px;
}
.select-container.compact .select-trigger::after { right: 12px; width: 5px; height: 5px; }
.select-container.compact .select-options { border-radius: 6px; }
.select-container.compact .select-option { padding: 6px 12px; font-size: 10px; }



/* --- Toast notifications --- */
/* Add this to the end of app.css, before the dimension comments */
 
#toast-container {
    position: fixed;
    /*bottom: 20px;*/
   /* left: 50%;
    transform: translateX(-50%);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 99999;
    pointer-events: none;
    bottom: 4px;
    right: 4px;
}
 
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: white;
    border: 1px solid;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-12px);
    animation: toastIn 0.25s ease forwards;
    max-width: 400px;
    word-break: break-word;
}
 
.toast.removing {
    animation: toastOut 0.3s ease forwards;
}
 
.toast.neutral {
    background: rgba(255,255,255,0.95);
    border-color: rgb(128,128,128,0.9);
    color: #333;
}
 
.toast.positive {
    background: var(--primary);
    border-color: var(--primary-dark);
}
 
.toast.negative {
    background: var(--negative);
    border-color: var(--negative-dark);
}
 
.toast-dismiss {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0.7;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    font-weight: bold;
}
 
.toast-dismiss:hover {
    opacity: 1;
}
 
@keyframes toastIn {
    0% { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 1; transform: translateY(0); }
}
 
@keyframes toastOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-12px); }
}

#bottom-banner-728-90 {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 728px;
  height: 90px;
  z-index: 100;
}

#bottom-banner-468-60 {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 468px;
  height: 60px;
  z-index: 100;
}


/* 1077 x 606 */
/* 907 x 510 */
/* 821 x 462 */

/*
    < 1024w || < 560h
*/

@media (max-height: 610px) {
    #extra-skills-inner {
        max-height: 201px;
        overflow: auto;
        margin-bottom: 16px
    }
}
/*
@media (max-height: 550px) {
    .button.rpg-button {
        padding: 4px;
        width: 34px;
    }
}

@media (max-height: 670px) {
    .button.rpg-button.small {
        padding: 4px;
        width: 34px;
    }
}*/

/*@media (max-height: 449px) {
    #stats-container, #skills-overlay, #battle-results-overlay {
        transform: translate(-50%, -50%) scale(0.8);
    }
    #gui-stats-player {
        transform: translate(10%, -10%)  scale(0.8);
    }
    #gui-stats-monsters {
        transform: translate(-10%, -10%)  scale(0.8);
    }
}*/

@media (max-height: 630px) and (min-height: 550px) {
    #stats-container {
        transform: translate(-50%, -50%) scale(0.85) !important;
    }
}

@media (max-height: 550px) and (min-height: 520px) {
    #stats-container {
        transform: translate(-50%, -50%) scale(0.80) !important;
    }
}

@media (max-height: 520px) and (min-height: 485px) {
    #stats-container {
        transform: translate(-50%, -50%) scale(0.75) !important;
    }
}

@media (max-height: 720px) and (min-height: 690px) {
    #skills-overlay {
        transform: translate(-50%, -50%) scale(0.95) !important;
    }
}

@media (max-height: 690px) and (min-height: 650px) {
    #skills-overlay {
        transform: translate(-50%, -50%) scale(0.9) !important;
    }
}

@media (max-height: 650px) and (min-height: 620px) {
    #skills-overlay {
        transform: translate(-50%, -50%) scale(0.85) !important;
    }
}

@media (max-height: 620px) and (min-height: 610px) {
    #skills-overlay {
        transform: translate(-50%, -50%) scale(0.80) !important;
    }
}

@media (max-height: 590px) and (min-height: 540px) {
    #achievements-overlay {
        transform: translate(-50%, -50%) scale(0.9) !important;
    }
}

@media (max-height: 540px) and (min-height: 485px) {
    #achievements-overlay {
        transform: translate(-50%, -50%) scale(0.8) !important;
    }
}

#icon-credits {
    background: rgba(255, 255, 255, 0.75);
    padding: 3px 6px;
    border-radius: 4px;
}

#discord-container {
    position: fixed;
    bottom: 4px;
    left: 8px;
    justify-content: start;
    flex-direction: row;
    gap: 16px;
    display: flex;
    background: rgba(255, 255, 255, 0.75);
    padding: 4px 8px;
    border-radius: 4px;
}

#stat-tooltip-overlay {
    width: 234px
}

@media (max-width: 1000px) {
    #stat-tooltip-overlay {
        width: 140px
    }
}

/*.dungeon-btn.locked img {
    filter: grayscale(100%);
}*/

/*@keyframes dungeonBossPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 74, 63, 0); }
    50%      { box-shadow: 0 0 10px 2px rgba(232, 74, 63, 0.7); }
}*/


/*@property --bg-hue {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
body {
  --bg-hue: 0deg;
  background-color: hsl(var(--bg-hue) 15% 96%);
  animation: bg-hue-cycle 300s linear infinite;
}
@keyframes bg-hue-cycle {
  to { --bg-hue: 360deg; }
}*/

/*body {
  animation: colorshift 60s ease-in-out infinite;
}

@keyframes colorshift {
  0%   { background-color: rgb(255, 255, 191); }
  16.67% { background-color: rgb(255, 191, 255); }
  33.33% { background-color: rgb(191, 255, 255); }
  50%  { background-color: rgb(255, 191, 191); }
  66.67% { background-color: rgb(191, 255, 191); }
  83.33% { background-color: rgb(191, 191, 255); }
  100% { background-color: rgb(255, 255, 191); }
}*/
/*
@media (max-height: 600px) {
    #release-notes-overlay {
        transform: translate(-50%, -60%) scale(0.8);
    }
}*/

#achievements-icon {
    cursor: pointer;
}

.achievement-row {
    display: grid;
    grid-template-columns: 1fr 192px 128px;
    gap: 16px;
    align-items: center;
    text-align: left;
}

.overlay-subtitle {
    color: #666;
    font-size: .85em;
}

#achievements-overlay .overlay-subtitle { text-align: center; margin: 4px 0 16px; }

/* Buy-amount segmented toggle */
.buy-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.buy-amount-label {
    font-size: 14px;
}
.buy-amount-toggle {
    display: inline-flex;
    border: 1px solid #013885;          /* single continuous outer border */
    border-radius: 8px;
    overflow: hidden;                    /* clips the button corners cleanly */
    box-shadow: var(--btn-shadow);
}
.stats-buy-amount {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    border: 0;
    border-left: 1px solid #013885;      /* divider between buttons only */
    background: #fff;
    color: #000;
    font-family: monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    width: 42px;
    padding: 8px 0;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.stats-buy-amount:first-child {
    border-left: 0;                      /* no divider before the first button */
}
.stats-buy-amount:not(.selected):hover {
    background: #eef4ff;
}
.stats-buy-amount.selected {
    background: var(--blue-active);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
    cursor: default;
}

/* row layout: icon | task | progress | bonus */
.achievement-row {
    display: grid;
    grid-template-columns: 26px 1fr 150px 64px;
    align-items: center;
    column-gap: 12px;
    padding: 7px 2px;
}
.achievement-row.achievement-header {
    color: #888;
    font-size: .8em;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}
.achievement-row .gui-icon { width: 32px; height: 32px; position: relative; }   /* size only, doesn't touch your global .gui-icon */

.achievement-row .gui-icon img {
    position: absolute;
    left: 0px;
    top: 0px;
}

.achievement-progress { display: flex; flex-direction: column; gap: 3px; }
.achievement-count    { font-size: .75em; color: #555; text-align: center; }
.progress-track {
    height: 10px;
    background: rgba(0,0,0,0.14);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--green-gradient);   /* reused */
}

.achievement-bonus {
    text-align: end;
    font-weight: 600;
    color: #602A9C;                      /* dark stop of --purple-gradient, ties reward to your XP purple */
}

/* total row */
.achievement-row.achievement-total {
    font-weight: bold;
    border-top: 2px solid rgba(0,0,0,0.85);
    margin-top: 8px;
    padding-top: 12px;
}
.achievement-row.achievement-total .progress-fill { background: var(--purple-gradient); }   /* reused */

.icon-menu-row {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.icon-menu-row span {
    font-family: monospace;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    font-size: 12px;
    margin-top: 2px;
}

.icon-menu-world-svg {
    transform: scale(0.8) translate(calc(10% + 16px), calc(10% + 16px));
    transform: scale(0.9) translate(calc(5% + 8px), calc(5% + 8px));
}


/* ============================================================
   RESPAWN OVERLAY  —  ADD THIS BLOCK TO app.css
   ============================================================ */
 
#respawn-overlay{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
 
/* handwritten voice — same font stack as .text-only-overlay, lightened for the dark overlay */
.respawn-title{
    font-family:'Comic Sans MS','Baskerville','American Typewriter','Palatino','Roboto Light','Marker Felt','Chalkduster';
    color:#f2f2f2;
    text-shadow:0 2px 4px rgba(0,0,0,.55);
    font-size:clamp(22px,4vh,36px);
    text-align:center;
    margin:0;
}
 
/* dark HUD panel — same language as the #stats leaderboard */
.respawn-panel{
    font-family:monospace;
    background:rgba(0,0,0,.62);
    color:#fff;
    border-radius:8px;
    padding:10px 12px;
    box-shadow:var(--overlay-shadow);
}
.respawn-stat-line{display:flex;justify-content:center;gap:32px;font-size:15px;padding:2px 6px 8px;}
.respawn-stat-line .label{color:#b9b9b9;margin-right:8px;}
.respawn-divider{height:1px;background:rgba(255,255,255,.18);margin:0 2px 6px;}
.respawn-rank-row{display:grid;grid-template-columns:max-content 1fr max-content;gap:18px;padding:3px 8px;font-size:15px;border-radius:5px;color:#d6d6d6;}
.respawn-rank-row .score{text-align:right;}
.respawn-rank-row.me{background:rgba(76,166,255,.30);color:#fff;font-weight:bold;}
 
.respawn-note{
    font-family:monospace;font-size:13px;color:#cdcdcd;
    text-shadow:0 1px 2px rgba(0,0,0,.6);text-align:center;margin:0;
}
 
/* action row: Main Menu (red, matches your battle-results) + Boosts pill */
.respawn-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.respawn-actions .button{margin:0;padding:9px 18px;}
 
/* boost pill — the count + one "get more" button */
#respawn-boosts{
    display:inline-flex;align-items:center;gap:10px;
    font-family:monospace;color:#fff;
    background:rgba(0,0,0,.62);border-radius:999px;
    padding:6px 8px 6px 14px;box-shadow:var(--overlay-shadow);
}
#respawn-boosts .rb-icon{width:28px;height:28px;}
#respawn-boosts .rb-label{font-size:14px;}
#respawn-boosts .rb-count{font-size:18px;font-weight:bold;color:#7ED321;}
#respawn-boosts .rb-count.empty{color:var(--negative);}
#respawn-boosts .rb-get{display:inline-flex;align-items:center;gap:5px;margin:0;padding:6px 12px;border-radius:999px;font-size:13px;}
#respawn-boosts .rb-get .button-video-icon{width:18px;height:18px;}
 
/* countdown strip:  [⏸ pause]  [====== depleting bar ======]  [✕ close] */
.respawn-controls{display:flex;align-items:center;gap:10px;width:100%;max-width:300px;margin-top:2px;}
.respawn-iconbtn{
    flex:0 0 auto;width:30px;height:30px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:8px;cursor:pointer;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);
    transition:background .12s ease;
}
.respawn-iconbtn:hover{background:rgba(255,255,255,.22);}
.respawn-iconbtn svg{width:16px;height:16px;}
.respawn-timer{flex:1 1 auto;height:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);border-radius:999px;overflow:hidden;}
.respawn-timer-fill{height:100%;width:100%;transform-origin:left center;background:var(--blue-gradient);animation:respawn-countdown 5s linear forwards;}
.respawn-controls.paused .respawn-timer-fill{animation-play-state:paused;}
@keyframes respawn-countdown{from{transform:scaleX(1);}to{transform:scaleX(0);}}


#io-boost-boosts-icon,
#io-lobby-boosts-icon {
    cursor: default;
}





/* skeleton rows — same grid/height as real rows */
.respawn-rank-row.skeleton { align-items: center; }
.respawn-rank-row.skeleton .score { justify-self: end; }

.sk-bar {
    display: block;
    height: .8em;
    margin: .175em 0;            /* .8 + .35 ≈ one line of text, so no height jump */
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.26) 50%,
        rgba(255,255,255,.10) 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.2s ease-in-out infinite;
}
.respawn-rank-row.me .sk-bar {
    background-image: linear-gradient(90deg,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.38) 50%,
        rgba(255,255,255,.18) 100%);
}

/* record note: keep its space, show a shimmer bar instead of text */
.respawn-note.skeleton-note {
    color: transparent;
    text-shadow: none;
    position: relative;
    min-height: 1.2em;
    min-width: 260px;
}
.respawn-note.skeleton-note::after {
    content: '';
    position: absolute;
    inset: .2em 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255,255,255,.08) 0%,
        rgba(255,255,255,.22) 50%,
        rgba(255,255,255,.08) 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.2s ease-in-out infinite;
}

.respawn-lb-error {
    display: block;
    text-align: center;
    color: #b9b9b9;
}

@keyframes sk-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-bar, .respawn-note.skeleton-note::after { animation: none; }
}

#touch-tutorial-tap img,
#mouse-tutorial-click img {
    display: block;
    width: 100%;
    height: 100%;
}