@import url('fonts/font-face.css');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  --color-pink: #ef006f;
  --color-dark-pink: #481A36;
  --col-dark-purple: #281C31;
  --col-dark-blue: #11101C;
  --col-dark-blue-2: #0d0e1b;
  --col-gray: #B2B2B2;
  --col-white: #fff;

  background-image: url("images/bg.jpg");
  background-color: var(--col-dark-blue);
  background-size: cover;
  color: var(--col-white);
  font-family: Montserrat, sans-serif;
  font-weight: 300;
  font-size: 4.44445vw;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-aspect-ratio: 3/2) {
  body {
    font-size: 2.05128vw;
  }
}

@media screen and (pointer: coarse) and (min-height: 500px) and (min-width: 500px) {
  body {
    font-size: 2.083328vw;
  }
}

@media screen and (pointer: coarse) and (min-height: 500px) and (min-width: 500px) and (min-aspect-ratio: 5/4) {
  body {
    font-size: 1.5625vw;
  }
}

@media screen and (hover: hover) and (pointer: fine) {
  body {
    font-size: 1.1713vw;
  }
}

@media screen and (hover: hover) and (pointer: fine) and (min-width: 1400px) {
  body {
    font-size: 0.833335vw;
  }
}

@media screen and (hover: hover) and (pointer: fine) and (min-width: 2200.02px) {
  body {
    font-size: 16px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Against, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 14em;
}

h2 {
  font-size: 5em;
}

h3 {
  font-size: 2.5em;
}

h4 {
  font-size: 1.1em;
}

a {
  color: var(--col-white);
}

button,
.button {
  color: var(--color-pink);
  font-family: Montserrat, sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  padding: 0.3em 1em;
  background: transparent;
  border: 0.1em solid var(--color-pink);
  border-radius: 0.2em;
  cursor: pointer;
  text-decoration: none;
}

button.round,
.button.round {
  border-radius: 2em;
  box-shadow: 0 0.05em 0.35em 0 var(--color-pink);
}

button.fill,
.button.fill {
  color: var(--col-white);
  font-weight: 700;
  background-color: var(--color-pink);
  box-shadow: 0 0.1em 0.3em 0 var(--color-pink);
}

button:disabled,
.button:disabled {
  border: 0;
  color: var(--col-white);
  font-weight: 700;
  cursor: not-allowed;
  background-color: #1E233B;
}

button img,
.button img {
  margin-right: 0.2em;
}

.header-container {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1920px;
  margin: 3em auto;
  order: 2;
}

.left {
  display: flex;
  margin-top: 8em;
  flex-direction: column;
  align-items: center;
  width: 50%;
  font-size: 0.75em;
}

.left h1 {
  margin: 0;
}

.left h2 {
  margin: -0.4em 0 0.2em 0;
}

.right {
  width: 50%;
}

.right img {
  width: 100%;
  max-width: 786px;
}

.powered {
  display: flex;
  align-items: center;
  font-size: 2.3em;
}

.powered img {
  margin-left: 0.5em;
}

.buttons {
  display: flex;
  margin: 2em 0;
  gap: 2em;
}

.buttons button {
  box-shadow: 0 0 0.25em 0 var(--color-pink);
  transition: transform 0.2s;
}

.buttons button:hover {
  transform: scale(1.05);
}

.stats {
  border: 0.0625em solid var(--color-pink);
  padding: 1.6em 1.9em;
  margin-top: 4em;
}

.stats .title {
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 1em;
}

.stats .stats-list {
  font-size: 1.37em;
  display: flex;
  justify-content: center;
  gap: 2em;
}

.stats .stat {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.stats .stat img {
  margin-right: 0.5em;
  padding: 0.2em;
  border: 0.046em solid var(--color-pink);
  box-shadow: 0 0 0.228em 0 var(--color-pink);
}

.divider {
  z-index: 2;
  position: relative;
  text-align: center;
  background-image: url(images/horizontal-divider.svg);
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 1920px;
  height: min(calc(100vw * calc(60 / 1920)), 3.75em);
  margin: 0 auto;
}

.games-categories {
  margin-top: 6.5em;
  margin-bottom: 8em;
}

section {
  z-index: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section h2 {
  margin-bottom: 0.1em;
}

section .subtitle {
  text-align: center;
  font-size: 1.8em;
}

.categories {
  display: flex;
  margin: 5em 0;
  gap: 4em;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1em 1.5em 0.5em 1.5em;
  width: 12.1em;
  height: 12.1em;
  border: 0.25em solid var(--color-pink);
  border-radius: 0.5em;
  text-align: center;
  cursor: pointer;
  transition: transform 0.4s;
}

.category:hover {
  transform: scale(1.05);
}

.category img {
  margin-bottom: 1em;
}

.games {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  margin-top: 1em;
  margin-bottom: 2em;
}

.participating-games .games {
  display: grid;
  margin-top: 3em;
  grid-template-columns: repeat(2, 1fr);
}

.game {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
  background-color: rgba(var(--col-dark-blue-2) 59%);
  width: 21.5625em;
  border: 0.0625em solid var(--color-pink);
  border-radius: 0.25em;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s;
}

.game:hover {
  box-shadow: 0 0 2.5em 0.3125em var(--color-pink);
}

.game .card-image-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.game .card-image-wrap img {
  display: block;
  width: 100%;
  transition: filter 0.3s ease;
}

.game .card-hover-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  gap: 0.3em;
}

.game .card-hover-label span:first-child {
  font-family: Montserrat, sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--col-white);
}

.game .card-hover-label span:last-child {
  font-family: Montserrat, sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
}

.game:hover .card-image-wrap img {
  filter: blur(0.1875em);
}

.game:hover .card-hover-label {
  opacity: 1;
}

.participating-games .game {
  width: 29.1875em;
  height: 25.3125em;
  background: linear-gradient(to bottom, #1A2847 0%, #121729 55%);
}

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

.play-btn {
  font-size: 1.07em;
  height: 2.8em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.bottom {
  justify-self: flex-end;
  background-color: rgba(13, 14, 27, 0.6);
  padding: 1em 1.5em 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}

.participating-games .bottom {
  padding: 1em 1.5em;
  align-items: center;
}

.bottom button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.participating-games .bottom button {
  width: unset;
  padding: 0.3em 3em;
}

.game .title {
  font-size: 2.2em;
  font-weight: bold;
  color: var(--color-pink);
  text-align: center;
}

.game .subtitle {
  font-size: 1.5em;
  text-align: center;
}

.participating-games .subtitle {
  font-size: 1.8em;
}

footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--col-dark-blue);
  padding: 3em;
  text-align: center;
}

footer::before {
  content: '';
  position: absolute;
  left: 0;
  top: -10em;
  width: 100%;
  height: 10em;
  background: linear-gradient(to top, var(--col-dark-blue) 0%, transparent 100%);
}

footer h3 {
  margin: 0.35em;
  font-size: 3em;
}

footer p {
  font-weight: 200;
  font-size: 1.12em;
  margin-top: 1em;
}

.back, .terms-btn {
  max-width: 1714px;
  width: 100%;
  padding: 0 2em;
  margin: 3em auto 0;
}

.terms-btn {
  display: flex;
  justify-content: flex-end;
  order: 1;
}

.back .button,
.terms-btn .button {
  font-size: 1em;
  padding: 0.2em 1em;
  align-items: center;
  display: inline-flex;
  background-color: var(--col-dark-purple);
  box-shadow: none;
}

.terms-btn .arrow {
  margin-left: 0.7em;
  transform: rotateY(180deg);
}

.raffle-rules h3 {
  margin-bottom: 0.25em;
  font-size: 3em;
}

.raffle-rules .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 3.45em;
}

.raffle-rules ol li {
  width: 24.5em;
  margin-bottom: 3.3em;
  font-size: 1.5em;
  list-style-type: none;
  counter-increment: step-counter;
}

.raffle-rules .step {
  font-weight: 600;
}

.raffle-rules ol li p {
  margin-top: 0;
  font-weight: 200;
  margin-bottom: 0.3em;
  position: relative;
}

.raffle-rules ol li::before {
  content: counter(step-counter);
  margin-left: -2.5em;
  position: absolute;
  padding: 0.3em 0.4em;
  width: 1em;
  text-align: center;
  font-size: 0.75em;
  font-weight: bold;
  background: var(--color-pink);
  border-radius: 2em;
  box-shadow: 0 0.056em 0.389em 0 var(--color-pink);
}

.entered-raffle {
  font-size: 1.125em;
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  text-align: center;
  color: var(--col-gray);
}

.prizes {
  display: flex;
  padding: 1.5em 23em;
  flex-direction: column;
  align-items: center;
  border-radius: 0.25em;
  border: 0.0625em solid var(--color-pink);
  background: linear-gradient(to bottom, #1A2847 0%, #121729 55%);
  margin-bottom: 6em;
}

.prizes h3 {
  margin: 0;
}

.prizes div {
  display: flex;
  gap: 3em;
}

.prizes ul li {
  padding: 0.3em 0;
  font-weight: 700;
  text-align: center;
  list-style-type: none;
}

.prizes ul li::before {
  content: "•";
  font-size: 1.2em;
  line-height: 0.5em;
  margin-right: 0.4em;
}

.prize-1 {
  font-size: 1.375em;
}

.prize-2 {
  font-size: 1.625em;
}

.prize-3 {
  font-size: 1.875em;
}

.vote {
  margin: 3em 0 8em;
}

.vote .button {
  padding: 0.8em 8em;
  font-size: 1.2em;
  display: flex;
}

.overlay {
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(24, 21, 34, 0.81);
}

.overlay .dialog {
  opacity: 0;
  transition: all .2s ease-out;
  transform: translateY(6.25em);
}

.dialog {
  display: grid;
  grid-template-columns: max-content 1fr;
  width: calc(74.625em - 4em);
  padding: 2em;
  border: 0.0625em solid var(--color-pink);
  border-radius: 0.75em;
  box-shadow: 0 0 1.25em var(--color-pink);
  background: url("images/modal-bg.png") center / cover no-repeat, rgb(24, 21, 34);
}

.dialog.visible {
  opacity: 1;
  transform: translateY(0);
}

.preview {
  position: relative;
  border: 0.0625em solid var(--color-pink);
  border-radius: 0.5em;
  margin-right: 4em;
  width: 29em;
  height: 31.875em;
  background: #323232;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-spinner {
  position: absolute;
  width: 3em;
  height: 3em;
  border: 0.25em solid rgba(239, 0, 111, 0.2);
  border-top-color: var(--color-pink);
  border-radius: 50%;
  animation: preview-spin 0.8s linear infinite;
}

@keyframes preview-spin {
  to { transform: rotate(360deg); }
}

.details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.details h3 {
  font-size: 3em;
  margin: 0.5em 0 0 0;
}

.details .subtitle {
  font-size: 1.5em;
}

.details p {
  font-size: 1.5em;
  margin-top: 1.6em;
  margin-bottom: 3em;
}

.details .button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2em;
  margin: 0.5em 0;
  padding: 1em 5.5em;
}

/* ── Voting state styles ─────────────────────────────────────────────────── */

.game.voted {
  box-shadow: 0 0 2.5em 0.3125em var(--color-pink);
}

.game.vote-disabled {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.game.vote-disabled:hover {
  box-shadow: none;
}

button.voted {
  background-color: #2a0e3a;
  border: 0.1em solid var(--color-pink);
  color: var(--color-pink);
  white-space: nowrap;
}

button.vote-disabled {
  opacity: 0.6;
}

/* ── Raffle button ───────────────────────────────────────────────────────── */

.button.raffle {
  padding: 0.3em 2.3em;
}

/* ── Category panels visibility ──────────────────────────────────────────── */

.games-categories .games {
  display: none;
}

.games-categories .games.active {
  display: grid;
}

/* ── Flipped divider ─────────────────────────────────────────────────────── */

.divider.flipped {
  transform: scaleY(-1);
}

/* ── Active category tab ─────────────────────────────────────────────────── */

.category.active {
  box-shadow: 0 0 1.25em 0.1875em var(--color-pink);
}

/* ── Category switch animation ──────────────────────────────────────────── */

@keyframes category-enter {
  from {
    opacity: 0;
    transform: translateY(1em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.games.category-entering {
  animation: category-enter 0.35s ease both;
}

/* ── Vote modal ──────────────────────────────────────────────────────────── */

.vote-modal {
  position: relative;
  background: linear-gradient(to bottom, #1A2847 0%, #121729 55%);
  border: 0.125em solid var(--color-pink);
  border-radius: 0.75em;
  padding: 2em;
  width: 100%;
  max-width: 800px;
  color: var(--col-white);
  box-shadow: 0 0.0625em 0.5875em 0.25em var(--color-pink);
}

.vote-modal--single {
  max-width: 420px;
}

.vote-modal--single h2 {
  font-size: 1.8em;
}

.vote-modal-close {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.vote-modal h2 {
  margin: 0 0 0.1em;
  text-align: center;
  font-size: 2.5em;
  color: var(--color-pink);
  text-shadow: 0 0 0.1em rgba(var(--color-pink), 0.6), 0 0 0.5em rgba(var(--color-pink), 0.3);
}

.vote-modal > p {
  text-align: center;
  font-size: 1.125em;
  margin: 0 0 1.9em;
}

.vote-modal-panels {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  flex-wrap: wrap;
}

/* Standard panel */

.vote-panel-standard {
  flex: 1;
  border: 0.125em solid rgba(239, 0, 111, 0.4);
  border-radius: 0.625em;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.vote-panel-standard .vote-panel-heading {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.vote-panel-standard .vote-panel-heading h3 {
  margin: 0;
  font-size: 1.5em;
}

.vote-panel-standard .vote-panel-desc {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.4;
}

.vote-panel-standard .vote-panel-perk {
  margin: 0.5em 0 0;
  font-size: 1em;
  font-weight: 700;
  color: var(--color-pink);
}

.vote-panel-standard #wg-turnstile {
  margin-top: 0.3em;
}

#wg-std-submit-btn,
#wg-golden-confirm-btn {
  width: 100%;
  padding: 0.7em;
  margin-top: 0.3em;
  background-color: var(--color-dark-pink);
  border: 0.125em solid var(--color-pink);
  border-radius: 5.0625em;
  box-shadow: 0 0.0625em 0.4375em 0 var(--color-pink);
  color: var(--color-pink);
  font-weight: 600;
}

/* Golden panel */

.vote-panel-golden {
  flex: 1;
  border: 0.0625em solid var(--color-pink);
  border-radius: 1em;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  box-shadow: 0 0 1.5em 0.25em rgba(239, 0, 111, 0.4);
  background: linear-gradient(to bottom, #1A2847 0%, #121729 55%);
}

.vote-panel-golden-heading {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.vote-panel-golden-heading h3 {
  margin: 0;
  font-size: 1.625em;
  color: var(--color-pink);
  text-shadow: 0 0 0.154em rgba(var(--color-pink), 0.6), 0 0 0.769em rgba(var(--color-pink), 0.3);
}

.vote-panel-golden-desc {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.4;
}

.vote-panel-golden-perks {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin: 0.3em 0;
}

.vote-panel-golden-perk {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  color: var(--color-pink);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.vote-panel-golden-perk .trophy-icon {
  width: 1.125em;
  height: 1.125em;
}

.vote-panel-voting-as {
  margin: 0.4em 0 0;
  font-size: 0.9em;
  opacity: 0.8;
}

.vote-panel-user-email {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  color: var(--color-pink);
  word-break: break-all;
}

.vote-panel-golden #wg-golden-confirm-btn {
  width: 100%;
  padding: 0.75em;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.vote-panel-newsletter {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 0.9em;
  cursor: pointer;
}

.vote-panel-newsletter input[type="checkbox"] {
  margin-top: 0.15em;
  accent-color: var(--color-pink);
}

.vote-panel-golden #wg-google-signin-btn {
  width: 100%;
  padding: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  background-color: var(--color-dark-pink);
  border: 0.125em solid var(--color-pink);
  border-radius: 5.0625em;
  box-shadow: 0 0.0625em 0.4375em 0 var(--color-pink);
  color: var(--color-pink);
  font-size: 1em;
  font-weight: 600;
}

/* SVG icon colours inside vote panels */

.vote-panel-golden svg[stroke] {
  color: var(--color-pink);
}

.vote-panel-golden svg[fill="currentColor"] {
  color: var(--color-pink);
}

/* ── Vote modal error message ────────────────────────────────────────────── */

.vote-error {
  color: #ff6b6b;
  font-size: 0.85em;
  display: none;
}

.vote-error:not(:empty) {
  display: block;
}

.terms {
  padding: 0 2em;
}

.terms .terms-content {
  max-width: 1300px;
}

.terms .terms-content h2 {
  font-size: 2em;
  margin: 1em 0;
}

.terms .terms-content p {
  margin: 0.5em 0;
  line-height: 1.3em;
}

.terms .terms-content ol {
  padding-left: 1em;
}

.winner-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-title {
  font-size: 2.2em;
  padding: 0.25em 1.1em;
  background-color: var(--color-pink);
  border-radius: 0.1em;
  font-weight: 700;
  margin-top: 1.4em;
  margin-bottom: 1em;
}

.category-title img {
  margin-right: 0.3em;
}

.category-winner {
  width: 29.3em;
  height: 32.2em;
  border: 2px solid var(--color-pink);
  border-radius: 0.3em;
  box-shadow: 0 0.1em 0.5em 0.25em var(--color-pink);
  background-color: var(--col-dark-blue);
}

.character-name {
  font-weight: 400;
  font-size: 4em;
  margin: 0.5em 0;
  color: var(--color-pink);
}

.border-divider {
  width: 50em;
  height: 0.1em;
  background-color: var(--color-pink);
  box-shadow: 0 0.1em 0.2em 0.1em var(--color-pink);
}

.winner-title {
  font-size: 3.5em;
  margin-top: 0.58em;
}

.raffle-title {
  margin-top: 1.22em;
  margin-bottom: 0.9em;
}

.winner-title-section {
  background-color: var(--col-dark-blue);
  border: 1px solid var(--color-pink);
  font-family: Against, sans-serif;
  font-weight: 400;
  font-size: 2.5em;
  padding: 0.1em 1em;
  border-radius: 1em;
  color: var(--color-pink);
}

.winner-title-section img,
.winner-section .prize img{
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  mask: url("images/trophy.svg") no-repeat center / contain;
  background-color: var(--color-pink);
  object-position: -9999px -9999px;
}

.winner-container {
  margin-top: 9.8em;
}

.pink-star {
  mask: url("images/star-solid-white.svg") no-repeat center / contain;
  background-color: var(--color-pink);
  object-position: -9999px -9999px;
}

.congratulations {
  display: flex;
  align-items: center;
}

.congratulations img {
  margin-right: 0.2em;
}

.winner-name {
  font-size: 4.8em;
  font-weight: 400;
}

.winner-rank {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 2.5em;
  color: var(--color-pink);
}

.winner-section .dialog,
.selected-winners {
  width: calc(78.625em - 4em);
}

.winner-section .preview {
  height: 38.2em;
}

.winner-section .details .button {
  margin-top: 6.6em;
  margin-bottom: 0;
}

.selected-winners {
  background: linear-gradient(180deg, #1A2847 0%, #121729 55%);
  border: 0.1em solid var(--color-pink);
  border-radius: 0.4em;
  box-shadow: 0 0.1em 0.3em 0.1em var(--color-pink);
  padding: 3em 5.3em;
  text-align: center;
  margin-bottom: 14.3em;
}

.selected-winners h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 2.5em;
  color: var(--color-pink);
}

.selected-winners span {
  font-weight: 600;
  font-size: 1.5em;
}

.check-prize {
  margin-top: 3em;
  margin-bottom: 2.5em;
}

.winner-section .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #20192E;
  padding: 1.1em 0.5em;
  margin-bottom: 1.5em;
}

.winner-section .step.active {
  border: 0.1em solid var(--color-pink);
  background-color: #2F1835;
}

.winner-section .step span {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.2em;
  margin-bottom: 0.3em;
}

.winner-section .step img {
  width: 0.9em;
  height: 0.9em;
}

.step p {
  font-size: 1.25em;
}

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: min(1em, 1.5vh);
}

.countdown h1 {
  font-size: 17.8em;
}

.countdown h2 {
  font-size: 6.2em;
  margin-top: -0.5em;
}

.countdown-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5em;
  margin-bottom: 1em;
  width: 17em;
  height: 7.2em;
  border-radius: 0.1em;
  font-size: 4.4em;
  border: 0.02em solid rgba(239, 0, 111, 1);
  box-shadow: 0 0.1em 0.1em 0.1em rgba(239, 0, 111, 1);
  background: linear-gradient(180deg, #1A2847 0%, #121729 55%);
}

.countdown-text p {
  font-family: against, serif;
  font-weight: 400;
  text-align: center;
  padding: 0.5em 1.7em;
}

.page {
  filter: blur(0.5em);
  pointer-events: none;
}

/* ── Desktop large ─────────────────────────────────────────────────── */

@media screen and (hover: hover) and (pointer: fine) and (min-width: 1400px) {
  .left {
    font-size: 1em;
  }

  .games {
    gap: 5.1em;
  }

  .participating-games .games {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Tablet responsive ─────────────────────────────────────────────────── */

@media screen and (pointer: coarse) and (min-height: 500px) and (min-width: 500px) {

  /* Hero / main layout */
  main {
    flex-direction: column;
    align-items: center;
    padding: 0 2em;
    margin-bottom: 2em;
    order: 1;
  }

  h2 {
    font-size: 3.5em;
  }

  .back {
    margin-bottom: 3em;
  }

  .right {
    position: absolute;
    top: 1.5em;
    display: flex;
    justify-content: center;
  }

  .right img {
    width: 250px;
  }

  .left {
    z-index: 1;
    font-size: 0.7em;
    margin-top: 11em;
  }

  /* Categories – wrap into rows */
  .categories {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6em;
    margin: 3em 0;
  }

  .category {
    width: 11em;
    height: 11em;
    font-size: 0.75em;
  }

  .category img {
    width: 3.8em;
  }

  /* Sections */
  section {
    padding: 0 2em;
  }

  section .subtitle {
    font-size: 1.4em;
  }

  .games-categories {
    margin-bottom: 5em;
  }

  .raffle-rules .container {
    max-width: 500px;
  }

  /* Games – 2 columns */

  .games  {
    gap: 1em;
    max-width: 650px;
  }

  .bottom {
    font-size: 0.7em;
  }

  .bottom button {
    white-space: unset;
  }

  .participating-games h2 {
    text-align: center;
  }

  .participating-games .games {
    grid-template-columns: repeat(1, 1fr);
  }

  .game,
  .participating-games .game {
    width: auto;
  }

  .participating-games .game {
    height: auto;
  }

  .participating-games .subtitle {
    font-size: 1.4em;
  }

  .vote-modal {
    width: 80%;
  }

  /* Dialog – stacked */
  .dialog {
    grid-template-columns: repeat(2, 1fr);
    width: calc(100vw - 4em);
    padding: 2em;
  }

  .preview {
    width: 90%;
    height: auto;
    aspect-ratio: 29 / 32;
  }

  .details {
    font-size: 0.8em;
  }

  .details .button {
    width: 100%;
  }

  /* Overlay */
  .overlay {
    padding: 2em;
    overflow-y: auto;
  }

  /* Vote modal – panels stacked */
  .vote-modal-panels {
    flex-direction: column;
  }

  /* Raffle */
  .raffle-rules ol li {
    width: auto;
  }

  .prizes {
    font-size: 0.8em;
    padding: 1.5em 4em;
  }

  .prizes div {
    flex-direction: column;
    gap: 1.5em;
  }

  /* Terms buttons */
  .terms-btn {
    z-index: 5;
    justify-content: center;
    padding: 0 1.5em;
    margin-top: 0;
    margin-bottom: 2em;
    order: 2;
  }

  footer {
    font-size: 0.8em;
  }

  .winners {
    font-size: 0.7em;
  }

  .winner-section .dialog,
  .selected-winners {
    width: 90vw;
  }

  .congratulations {
    font-size: 1.5em;
  }

  .countdown {
    font-size: min(0.55em, 1.5vh);
  }
}

/* Tablet landscape – restore side-by-side where space allows */

@media screen and (pointer: coarse) and (min-height: 500px) and (min-width: 500px) and (min-aspect-ratio: 5/4) {
  .games {
    max-width: 700px;
  }

  .dialog {
    grid-template-columns: 1fr 1fr;
  }

  .preview {
    margin-bottom: 0;
  }

  .details .button {
    width: auto;
  }

  .vote-modal-panels {
    flex-direction: row;
  }

  .prizes div {
    flex-direction: row;
  }
}

/* ── Mobile and mobile landscape responsive ─────────────────────────────────────────────────── */

@media screen and (max-width: 499px), screen and (max-height: 499px) and (orientation: landscape) {

  /* Hero / main layout */
  main {
    flex-direction: column;
    align-items: center;
    padding: 0 1.5em;
    margin: 4em 0 0.5em 0;
    order: 1;
    font-size: 1.3em;
  }

  .back {
    margin-bottom: 2.3em;
    font-size: 0.7em;
  }

  .right {
    position: absolute;
    top: 1.4em;
    display: flex;
    justify-content: center;
  }

  .right img {
    width: 112px;
  }

  .left {
    margin-top: 2em;
    width: 100%;
    z-index: 1;
  }

  h1 {
    font-size: 3.6em;
  }

  h2 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 0.7em;
  }

  .powered {
    font-size: 0.85em;
  }

  .powered img {
    width: 7.1em;
    height: 100%;
  }

  .buttons {
    gap: 1em;
    align-items: stretch;
    margin-top: 1em;
    margin-bottom: 0;
  }

  .buttons .button,
  .buttons button {
    text-align: center;
    font-size: 0.75em;
    display: flex;
    justify-content: center;
  }

  /* Stats */
  .stats {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.75em;
    border: none;
  }

  .stats .stats-list {
    flex-wrap: wrap;
    gap: 0.8em;
    align-items: center;
  }

  .stats .title {
    font-size: 1.3em;
  }

  .stat {
    font-size: 0.85em;
  }

  .stat img {
    width: 1.5em;
    height: 1.5em;
  }

  /* Sections */
  section {
    padding: 0 1.5em;
  }

  section .subtitle {
    font-size: 0.8em;
    text-align: center;
  }

  .games-categories {
    margin-top: 1em;
    margin-bottom: 4em;
  }

  /* Categories – wrap into rows */
  .categories {
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
    margin: 2em 0;
  }

  .category {
    width: 5.5em;
    height: 5.5em;
    padding: 0.5em 0.5em 0.3em;
  }

  .category img {
    width: 2em;
    margin-bottom: 0.35em;
  }

  /* Games – 2 columns */
  .games {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    max-width: 550px;
  }

  .game,
  .participating-games .game {
    width: auto;
  }

  .participating-games .games {
    grid-template-columns: repeat(1, 1fr);
    gap: 1em;
  }

  .participating-games .game {
    height: auto;
  }

  .participating-games .subtitle {
    font-size: 0.8em;
  }

  .game .title {
    font-size: 0.9em;
  }

  .bottom {
    padding: 0.6em 0.8em 0.8em;
    gap: 0.4em;
  }

  .bottom button {
    font-size: 0.8em;
    white-space: unset;
  }

  .play-btn {
    font-size: 0.7em;
    height: auto;
  }

  /* Dialog – single column, stacked */

  .dialog {
    grid-template-columns: repeat(2, 1fr);
    width: calc(100vw - 2em);
    padding: 1.5em;
    font-size: 0.7em;
  }

  .preview {
    width: 90%;
    height: 100%;
    aspect-ratio: 29 / 32;
    margin-right: 0;
  }

  .details {
    font-size: 0.85em;
  }

  .details h3 {
    font-size: 2em;
    margin-top: 0;
  }

  .details p {
    margin-bottom: 1.5em;
  }

  .details .button {
    padding: 0.8em 2em;
    width: 100%;
  }

  /* Overlay – scrollable on mobile */
  .overlay {
    padding: 1em;
    overflow-y: auto;
  }

  /* Vote modal – full width, panels stacked */
  .vote-modal {
    max-width: 100%;
    padding: 1.5em;
    font-size: 0.7em;
  }

  .vote-modal h2 {
    font-size: 2em;
  }

  .vote-modal-panels {
    flex-direction: column;
  }

  .vote-panel-standard,
  .vote-panel-golden {
    width: 100%;
  }

  /* Raffle */
  .raffle-rules .container {
    font-size: 0.6em;
  }

  .raffle-rules h3 {
    font-size: 2.5em;
  }

  .raffle-rules ol {
    text-align: center;
  }

  .raffle-rules ol li {
    width: auto;
  }

  .raffle-rules ol li::before {
    display: block;
    position: relative;
    margin: 0 auto 0.8em auto;
  }

  .prizes {
    padding: 1.5em 2em;
  }

  .prizes div {
    flex-direction: column;
    gap: 1.5em;
  }

  .prizes ul {
    margin-top: 1em;
  }

  /* Vote CTA */
  .vote .button {
    padding: 0.8em 4em;
  }

  .divider {
    height: 1em;
  }

  /* Footer */
  footer {
    padding: 2em 1.5em;
  }

  footer h3 {
    font-size: 1.2em;
    margin-bottom: 1em;
  }

  footer p {
    font-weight: 200;
    font-size: 0.7em;
    margin-top: 1em;
  }

  /* Terms buttons */
  .terms-btn {
    z-index: 5;
    order: 2;
    justify-content: center;
    padding: 0 1.5em;
    margin-top: 0;
    margin-bottom: 2em;
    font-size: 0.7em;
  }

  .terms .terms-content h2 {
    font-size: 1.2em;
  }

  .winners h1 {
    font-size: 3em;
  }

  .winners h2 {
    font-size: 1.15em;
  }

  .winners .category-title {
    font-size: 1em;
  }

  .category-title img {
    width: 1em;
    height: 1em;
  }

  .category-winner {
    width: 8.2em;
    height: 8.95em;
  }

  .border-divider {
    font-size: 0.3em;
  }

  .categories {
    font-size: 0.9em;
    gap: 1.1em;
    width: 90vw;
  }

  .winner-section .dialog,
  .selected-winners {
    width: 90vw;
  }

  .winner-title-section {
    font-size: 1em;
  }

  .winner-rank {
    font-size: 1.4em;
  }

  .winner-section .details .button {
    font-size: 1.2em;
  }

  .winner-section .preview {
    height: 19em;
  }

  .winner-container,
  .winner-section .details .button {
    margin-top: 4.5em;
  }

  .selected-winners {
    padding: 1em;
    margin-bottom: 4.1em;
  }

  .check-prize {
    font-size: 0.6em;
  }

  .selected-winners .congrats,
  .thanks {
    font-size: 0.9em;
  }

  .countdown {
    font-size: min(0.28em, 1.5vh);
  }

  .countdown .powered {
    font-size: 2.3em;
  }
}

/* ── Mobile landscape ─────────────────────────────────────────────────── */

@media screen and (max-height: 499px) and (orientation: landscape) {

  .left {
    font-size: 1em;
  }

  .divider {
    height: 2em;
  }

  .dialog {
    width: 80vw;
  }

  .vote-modal--single {
    max-width: 390px;
  }

  .vote-modal-panels {
    flex-direction: row;
  }

  .games {
    grid-template-columns: repeat(3, 1fr);
  }
}