:root {
    --primary-color: #c0392b;
    --background-color: #000;
    --text-color: #fff;
    --light-text-color: #fff;
    --panel-bg-color: #fff;
    --button-secondary-bg: #eee;
    --button-secondary-hover-bg: #ddd;
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);

    --border-radius-large: 15px;
    --border-radius-round: 50px;

    --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-colored: 0 8px 15px rgba(192, 57, 43, 0.4);
    --shadow-filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.2));
}

body { background: #000; overflow: hidden; }

#body { width: 100dvw; height: 100dvh; display: flex; flex-direction: column; position: relative; align-items: center; overflow: auto; }
#container { width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 1;}
header { display: flex; height: 15dvh; align-items: center; padding: 0 16px; }
main { display: flex; width: 100%; justify-content: center; /* background: #111; */ }
footer { padding: 16px; }
#gameCanvas-wrapper { /* background: #000; */ }

#messages { margin-bottom: 20px; }

#newsletter {width: 100%; display: flex; justify-content: center; align-items: center; padding: 0 1rem; /* height: auto; min-height: fit-content; */}

.popupOnTop {z-index: 6000!important;}

.newsletter-registration {height: 100%; max-width: 100%; cursor: pointer;}
.newsletter-registration.long {display: block;}
.newsletter-registration.short {display: none;}

.popup .newsletter-registration {margin-top: 1rem;}

@media (max-width: 560px) {
  .newsletter-registration.long {display: none;}
  .newsletter-registration.short {display: block;}
}

footer { display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-direction: column;
    z-index: 1;
    padding-top: 1rem;}

.bg { background: url('../gfx/bg_001.webp') center center; background-size: cover; filter: blur(20px); }

.button {text-decoration: none; font-weight: normal; display: inline-block;}
.default .window .content {font-size: 1.5rem; text-align: center;}
.default .window .content strong {font-weight: bold; color: #fd0;}
.alerter .window .content {font-size: 1.5rem; text-align: center;}

.messages.off {display: none}

.socialBlock { display: flex; align-items: center; justify-content: center;  padding: 0.66rem; border-radius: 0.33rem; gap: 0.5rem; flex-wrap: wrap; gap: 0.5rem;}

.popup.default .window { background: radial-gradient(ellipse at 33% 0%, #df0, #590, #060a, #0300 50%) center 0, radial-gradient(ellipse at 66% 100%, #085, #053, #041 60%) center bottom;
    background-size: 300% 100%, 300% 100%;
    background-repeat: no-repeat;}
.popup.default.purple .window {background: radial-gradient(ellipse at top, #d08, #606, #0140 100%) center 0, radial-gradient(ellipse at bottom, #d08, #606, #014 100%) center bottom; }
.button { box-shadow: 0 5px 20px #0008; }

.emojied { list-style: none; padding-left: 0; text-align: left; }
.emojied li { position: relative; padding-left: 1.75rem; margin-bottom: 1rem; }
.emojied li::before {
  content: '🔸';
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0;
}

[data-copytoclipboard] { color: #4f0; font-weight: bold; }

h4 { background: linear-gradient(180deg, #bb0088, #770077 66%, #8800aa); display: inline-block; padding: 0.5rem 1rem; margin: 0 0 0.5rem 0; border-radius: 0.5rem; color: #edff00; }

#bg { background: url('../gfx/bg_001.webp') center; background-size: cover; position: fixed!important; width: 100vw; height: 100vh; z-index: -1; }

strong.conic {
  --yellow-text: #fff;
  --yellow-1: #da0;
  --yellow-2: #860;
  --orange-text: #fff;
  --orange-1: #e70;
  --orange-2: #a30;
  --red-text: #fff;
  --red-1: #f00;
  --red-2: #600;
  --blue-text: #fff;
  --blue-1: #07f;
  --blue-2: #039;
  --green-text: #fff;
  --green-1: #090;
  --green-2: #050;
  --purple-text: #fff;
  --purple-1: #e0e;
  --purple-2: #606;
}

strong.conic { padding: 0.25rem 0.75rem; border-radius: 0.25rem; position: relative; display: inline-block; overflow: hidden; }
strong.conic:after { content: ''; animation: yellow 10s infinite linear; position: absolute; min-width: 150%; min-height: 150%; aspect-ratio: 1; left: 0; top: 50%; margin-top: -75%; margin-left: -25.5%; z-index: -1; }

strong.conic.yellow { color: var(--yellow-text) !important; }
strong.conic.yellow:after { background: conic-gradient( var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1) ); }

strong.conic.orange { color: var(--orange-text) !important; }
strong.conic.orange:after { background: conic-gradient( var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1), var(--orange-2), var(--orange-1) ); }

strong.conic.red { color: var(--red-text) !important; }
strong.conic.red:after { background: conic-gradient( var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1), var(--red-2), var(--red-1) );}

strong.conic.blue { color: var(--blue-text) !important; }
strong.conic.blue:after { background: conic-gradient( var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1) );}

strong.conic.green { color: var(--green-text) !important; }
strong.conic.green:after { background: conic-gradient( var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1), var(--green-2), var(--green-1) );}

strong.conic.purple { color: var(--purple-text) !important; }
strong.conic.purple:after { background: conic-gradient( var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1) );}


@keyframes yellow {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}


.strike {
    color: red!important;
    transform: rotate(-5deg);
    display: inline-block;
    position: relative;
}

.strike:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -0.1rem;
    bottom: -0.1rem;
    background: linear-gradient(33deg, transparent 47%, #f00 47.5%, #f00 52.5%, transparent 53%), linear-gradient(-33deg, transparent 47%, #f00 47.5%, #f00 52.5%, transparent 53%);
}