@font-face {
  font-family: 'PixelArt';
  font-display: auto;
  src: url("/fonts/VT323-Regular.ttf");
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'Jersey 15';
  font-display: swap;
  src: url("/fonts/Jersey15-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PixelArtTitle';
  font-display: auto;
  src: url("/fonts/Ka1.ttf");
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'Rocher';
  font-display: auto;
  src: url("/fonts/rocher.woff2");
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'Numbers';
  font-display: auto;
  src: url("/fonts/robotmono.ttf");
  font-weight: normal;
  font-style: normal; 
}

@font-face {
  font-family: 'Circular';
  font-display: auto;
  src: url("/fonts/CircularStd-Book.ttf");
  font-weight: normal;
  font-style: normal; 
}


body {
  --ink: #363435;
  --page-bg: linear-gradient(45deg, #5F0A87, #A4508B);
  --panel-bg: rgba(255, 255, 255, 0.16);
  --panel-border: rgba(255, 255, 255, 0.45);
  --panel-sheen: rgba(255, 255, 255, 0.18);
  --surface-glass: rgba(255, 255, 255, 0.14);
  --surface-glass-strong: rgba(255, 255, 255, 0.22);
  --surface-shadow: rgba(18, 16, 24, 0.28);
  --surface-shadow-soft: rgba(18, 16, 24, 0.18);
  --control-border: rgba(255, 255, 255, 0.72);
  --stage-bg: #03b5aa;
  --accent: #fddf22;
  --accent-soft: rgba(253, 223, 34, 0.42);
  --button-hover: #03B5AA;
  --button-icon: #8b378a;
  --button-text: #363435;
  --button-bg: rgba(255, 255, 255, 0.88);
  --button-bg-hover: rgba(255, 255, 255, 0.98);
  --secondary-button-bg: rgba(255, 255, 255, 0.74);
  --secondary-button-bg-hover: rgba(255, 255, 255, 0.94);
  --cta-text: #363435;
  --cta-icon: #6f2678;
  --account-bg: rgba(255, 255, 255, 0.82);
  --account-bg-hover: rgba(255, 255, 255, 0.96);
  --account-icon: #8b378a;
  --account-border: rgba(255, 255, 255, 0.72);
  --depth-sm: 4px;
  --depth-lg: 6px;
  --shadow-control:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(54, 52, 53, 0.1),
    0 var(--depth-sm) 0 rgba(54, 52, 53, 0.72),
    0 10px 20px rgba(18, 16, 24, 0.16);
  --shadow-control-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 0 rgba(54, 52, 53, 0.12),
    0 var(--depth-lg) 0 rgba(54, 52, 53, 0.78),
    0 16px 28px rgba(18, 16, 24, 0.22),
    0 0 0 3px var(--accent-soft);
  --shadow-control-pressed:
    inset 0 2px 4px rgba(54, 52, 53, 0.2),
    0 2px 0 rgba(54, 52, 53, 0.76),
    0 8px 16px rgba(18, 16, 24, 0.18);
  --shadow-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(54, 52, 53, 0.12),
    0 12px 0 0 rgba(54, 52, 53, 0.92),
    0 30px 70px var(--surface-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 32px color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-stage:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset 0 -5px 0 rgba(54, 52, 53, 0.18),
    inset 0 0 0 3px rgba(54, 52, 53, 0.22),
    0 10px 0 0 rgba(54, 52, 53, 0.96),
    0 28px 68px rgba(18, 16, 24, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.08;
  /* background-color: #5050c2; */
  background: var(--page-bg) no-repeat center center fixed;
  color: white;
}

body[data-theme="sunset"] {
  --page-bg: linear-gradient(45deg, #8d2365, #e06a4f);
  --panel-bg: rgba(255, 202, 143, 0.18);
  --panel-border: rgba(255, 225, 174, 0.58);
  --panel-sheen: rgba(255, 238, 196, 0.22);
  --surface-glass: rgba(255, 222, 181, 0.16);
  --surface-glass-strong: rgba(255, 236, 205, 0.24);
  --surface-shadow: rgba(72, 31, 28, 0.28);
  --surface-shadow-soft: rgba(72, 31, 28, 0.18);
  --control-border: rgba(255, 237, 203, 0.76);
  --stage-bg: #ff9f4f;
  --accent: #ffe66d;
  --accent-soft: rgba(255, 230, 109, 0.45);
  --button-hover: #e06a4f;
  --button-icon: #8a2f25;
  --button-text: #48241c;
  --button-bg: rgba(255, 244, 224, 0.9);
  --button-bg-hover: rgba(255, 250, 237, 0.98);
  --secondary-button-bg: rgba(255, 240, 218, 0.78);
  --secondary-button-bg-hover: rgba(255, 248, 235, 0.96);
  --cta-text: #452115;
  --cta-icon: #b6422b;
  --account-bg: rgba(255, 238, 214, 0.84);
  --account-bg-hover: rgba(255, 249, 236, 0.98);
  --account-icon: #8a2f25;
  --account-border: rgba(255, 230, 190, 0.76);
}

body[data-theme="night"] {
  --page-bg: linear-gradient(45deg, #191b57, #0c8290);
  --panel-bg: rgba(99, 216, 255, 0.14);
  --panel-border: rgba(150, 240, 255, 0.46);
  --panel-sheen: rgba(177, 250, 255, 0.16);
  --surface-glass: rgba(133, 229, 255, 0.12);
  --surface-glass-strong: rgba(173, 247, 255, 0.2);
  --surface-shadow: rgba(5, 19, 42, 0.34);
  --surface-shadow-soft: rgba(5, 19, 42, 0.2);
  --control-border: rgba(185, 247, 255, 0.64);
  --stage-bg: #1f4f8f;
  --accent: #8ff7ff;
  --accent-soft: rgba(143, 247, 255, 0.36);
  --button-hover: #0c8290;
  --button-icon: #087f9b;
  --button-text: #123647;
  --button-bg: rgba(224, 250, 255, 0.9);
  --button-bg-hover: rgba(238, 253, 255, 0.98);
  --secondary-button-bg: rgba(213, 247, 255, 0.78);
  --secondary-button-bg-hover: rgba(232, 252, 255, 0.96);
  --cta-text: #102f3a;
  --cta-icon: #0396b3;
  --account-bg: rgba(213, 247, 255, 0.84);
  --account-bg-hover: rgba(235, 253, 255, 0.98);
  --account-icon: #087f9b;
  --account-border: rgba(150, 240, 255, 0.74);
}

@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 10;
}

@font-palette-values --Normal {
  font-family: Rocher;
  base-palette: 12;
}

@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 1;
}

@font-palette-values --Green {
  font-family: Rocher;
  base-palette: 2;
}

.user-bloc {
  position: absolute;
  top: clamp(1rem, 2dvh, 1.35rem);
  right: clamp(2rem, 3vw, 2.5rem);
  display: flex;
  z-index: 20;

  .user-login {
    font-size: 2rem;
    margin: auto;
    margin-right: 1rem;

    #user-login {
      margin-right: 5px;
      color: #fddf22;
    }
  }

  .icon-user {
    width: 2.45rem;
    height: 2.45rem;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: rgba(54, 52, 53, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 2px 0 rgba(54, 52, 53, 0.45);
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    border-radius: 999px;
    padding: 0;
    backdrop-filter: blur(8px);
    font-size: 1.05rem;
    line-height: 1;

    &:hover {
      color: var(--accent);
      background: rgba(54, 52, 53, 0.3);
      border-color: var(--accent);
      transform: translateY(-2px);
    }
  }

  .dropdown-menu {
    display: none;
    position: absolute;
    top: 3.35rem;
    right: 0;
    background-color: #f9f9f9;
    min-width: 13rem;
    text-align: center;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 0;
    box-shadow: 0 6px 0 0 #363435, 0 18px 40px rgba(0, 0, 0, 0.18);

    &::before {
      content: "";
      position: absolute;
      top: -15px;
      right: 9px;
      border-width: 0 15px 15px 15px;
      border-style: solid;
      border-color: transparent transparent #f9f9f9 transparent; /* Couleur de la flèche */
    }
  }
  
  .dropdown-menu .user-email {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1.3rem;
    color: #363435;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid #ccc;

    span {
      display: block;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .user-login-container {
      font-size: 1.8rem;
      color: var(--button-hover);
      span.elo {
        color: var(--button-icon);
      }
    }
  }

  .dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1.5rem;
    color: #363435;
    padding: 1.5rem 1rem;
    &:hover {
      background: var(--button-hover);
      color: white;

      .fa-solid {
        color: white;
      }
    }
    .fa-solid {
      font-size: 1.3rem;
      margin-right: 0.8rem;
    }
  }

  .dropdown-menu a:not(:last-child) {
    border-bottom: 1px solid #ccc;
  }
  
  .dropdown-menu.show {
    display: block;
  }
}

img.title-dashboard {
  width: 60%;
}

.title-number {
  font-family: 'PixelArtTitle';
  color: black;
  background-color: white;
  padding: 1.5rem;
  border-radius: 2rem;
}

.title-dashboard {
  font-family: 'PixelArtTitle';
}

.brand-logo {
  --brand-plate: color-mix(in srgb, var(--accent) 92%, #ffffff 8%);
  --brand-plate-dark: color-mix(in srgb, var(--accent) 76%, #f07c22 24%);
  --brand-ink: var(--ink);
  position: relative;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.45rem, 1vw, 0.72rem);
  min-width: 0;
  max-width: min(720px, calc(100vw - 7rem));
  padding: clamp(0.22rem, 0.55dvh, 0.36rem) clamp(0.62rem, 1.25vw, 0.98rem);
  color: var(--brand-ink);
  text-decoration: none;
  line-height: 1;
  border: 4px solid var(--brand-ink);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.1) 42%, rgba(54, 52, 53, 0.08) 100%),
    linear-gradient(90deg, var(--brand-plate), var(--brand-plate-dark));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    inset 0 -4px 0 rgba(54, 52, 53, 0.16),
    0 7px 0 0 var(--brand-ink),
    0 18px 34px rgba(18, 16, 24, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transform-origin: top center;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.brand-logo:hover {
  color: var(--brand-ink);
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.68),
    inset 0 -4px 0 rgba(54, 52, 53, 0.16),
    0 9px 0 0 var(--brand-ink),
    0 22px 42px rgba(18, 16, 24, 0.24),
    0 0 0 3px var(--accent-soft);
}

.brand-logo:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(54, 52, 53, 0.2),
    0 3px 0 0 var(--brand-ink),
    0 12px 24px rgba(18, 16, 24, 0.18);
}

.brand-logo:hover .brand-mark,
.brand-logo:focus-visible .brand-mark {
  animation: brand-ball-spin 0.62s cubic-bezier(0.2, 0.92, 0.24, 1.12) both;
}

.brand-mark {
  position: relative;
  width: clamp(2.25rem, 3.15vw, 3.05rem);
  height: clamp(2.25rem, 3.15vw, 3.05rem);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-blob {
  position: absolute;
  left: 0.12rem;
  bottom: 0.06rem;
  width: 68%;
  aspect-ratio: 1 / 0.86;
  border: 3px solid var(--brand-ink);
  border-radius: 48% 52% 45% 55% / 46% 46% 54% 54%;
  background:
    radial-gradient(circle at 62% 27%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
    linear-gradient(180deg, #ff4b5c, #e51c23 58%, #9f1324);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.32),
    0 4px 0 rgba(54, 52, 53, 0.42);
}

.brand-ball {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(0 0.16rem 0 rgba(18, 16, 24, 0.3));
  image-rendering: pixelated;
}

.brand-ball-beach {
  display: block;
}

body[data-theme="sunset"] .brand-ball,
body[data-theme="night"] .brand-ball {
  display: none;
}

body[data-theme="sunset"] .brand-ball-sunset,
body[data-theme="night"] .brand-ball-night {
  display: block;
}

@keyframes brand-ball-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  62% {
    transform: rotate(345deg) scale(1.09);
  }
  82% {
    transform: rotate(372deg) scale(0.98);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo:hover .brand-mark,
  .brand-logo:focus-visible .brand-mark {
    animation: none;
  }
}

.brand-copy {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: clamp(0.42rem, 0.85vw, 0.68rem);
  min-width: 0;
}

.brand-main {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.62rem, 1.1vw, 0.88rem);
  color: #302f34;
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  font-size: clamp(1.82rem, 3.05vw, 2.88rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-text-stroke: 0.5px rgba(54, 52, 53, 0.22);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 0 rgba(54, 52, 53, 0.22),
    0 8px 13px rgba(18, 16, 24, 0.13);
  transition: transform 0.16s ease, text-shadow 0.16s ease;
  white-space: nowrap;
}

.brand-logo:hover .brand-main,
.brand-logo:focus-visible .brand-main {
  transform: translateY(-1px);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 3px 0 color-mix(in srgb, var(--accent) 48%, rgba(54, 52, 53, 0.36)),
    0 9px 13px rgba(18, 16, 24, 0.15);
}

.brand-badge {
  display: inline-grid;
  place-items: center;
  padding: clamp(0.24rem, 0.5dvh, 0.34rem) clamp(0.4rem, 0.75vw, 0.56rem);
  color: var(--accent);
  font-family: 'PixelArt';
  font-size: clamp(0.82rem, 1.15vw, 1.08rem);
  line-height: 1;
  text-transform: uppercase;
  border: 3px solid var(--brand-ink);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 45%),
    rgba(54, 52, 53, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 0 rgba(54, 52, 53, 0.42);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.38), 0 0 12px var(--accent-soft);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  white-space: nowrap;
}

.brand-logo:hover .brand-badge,
.brand-logo:focus-visible .brand-badge {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 0 rgba(54, 52, 53, 0.42),
    0 8px 14px rgba(18, 16, 24, 0.18);
}

.modal {
  .modal-dialog {
    max-width: 700px; /* Ajustez cette valeur selon vos besoins */
  }

  .modal-content {
    padding: 2rem;
    border: none !important;
    border: 2px rgba(255,255,255,.7) solid;
    
    font-size: 1.8rem;
    background: var(--page-bg) no-repeat center center fixed;

    .fa-solid {
      color: white;
      background: none;
      border: none;
      box-shadow: none;
    }

    .modal-header {
      margin: auto;

      img.img-ball {
        width: 40px;
        margin-right: 1rem;
      }

      h2 {
        color: var(--accent);
        font-size: 2.5rem !important;
      }
    }

    .modal-body {
      padding: 4rem 4rem 0rem 4rem;
      .form-group {
        margin-bottom: 2rem;
      }

      .alert-danger {
        text-align: center;
        margin-bottom: 2rem;
      }
    }

    button[type="submit"] {
      font-size: 1.8rem;
      padding: 1rem !important;
      border-radius: 0.8rem;
      /* color: white; */
      margin: auto;
      margin-top: 2rem;
    }

    input {
      color: white;
      height: 4rem;
      max-width: 19rem !important;
      display: block;
      border-radius: 0.5rem;
      font-size: 1.8rem;
      padding: 0 15px;
      border: none;
      background-color: rgba(255,255,255,.3);
      border: 2px rgba(255,255,255,.7) solid;
      box-shadow: 0 7px 0 0 #363435;
      border-radius: 0.5rem !important;
      &::placeholder {
        color: #ffffff87;
      }
    }
  }
}

.user-bloc {
  top: clamp(1rem, 2dvh, 1.35rem);
  right: clamp(1.3rem, 2.6vw, 2.2rem);
  align-items: flex-start;
}

.user-bloc .icon-user {
  width: 2.9rem;
  height: 2.9rem;
  color: var(--home-cta, var(--accent));
  border: 1px solid color-mix(in srgb, var(--home-control-border, rgba(255,255,255,.26)) 75%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%),
    var(--home-control, rgba(21, 21, 29, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 0 rgba(0,0,0,.32),
    0 12px 24px rgba(0,0,0,.18);
  font-size: 1.18rem;
}

/* Connected account trigger: the player's own blobby as the avatar, in a compact pill. The
   disconnected state keeps its round power-off button (this only targets .user-dropdown). */
.user-bloc .user-dropdown .icon-user {
  width: auto;
  min-width: 0;
  height: 2.9rem;
  display: flex;
  align-items: center;
  gap: 0.46rem;
  padding: 0 0.7rem 0 0.32rem;
}

.user-bloc .user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 42%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.2), transparent 62%),
    color-mix(in srgb, var(--home-cta, var(--accent)) 24%, var(--home-control, rgba(21, 21, 29, 0.92)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  image-rendering: pixelated;
}

.user-bloc .icon-user .user-menu-chevron {
  font-size: 0.6rem;
  opacity: 0.72;
  transition: transform 0.14s ease;
}

.user-bloc .icon-user[aria-expanded="true"] .user-menu-chevron {
  transform: rotate(180deg);
}

.user-bloc .icon-user:hover {
  color: var(--home-cta, var(--accent));
  border-color: color-mix(in srgb, var(--home-cta, var(--accent)) 55%, var(--home-control-border, transparent));
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 50%),
    color-mix(in srgb, var(--home-control, #15151d) 82%, var(--home-cta, var(--accent)) 18%);
  transform: translateY(-2px);
}

.user-bloc .icon-user:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.32),
    0 6px 14px rgba(0,0,0,.16);
}

.user-bloc .dropdown-menu {
  top: 3.85rem;
  right: 0;
  min-width: 15.5rem;
  padding: 0.45rem;
  overflow: hidden;
  color: var(--home-text, white);
  text-align: left;
  border: 1px solid var(--home-border, rgba(255,255,255,.18));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-panel, #262333) 92%, #ffffff 8%), var(--home-panel, #262333));
  box-shadow:
    0 8px 0 rgba(0,0,0,.28),
    0 24px 48px rgba(0,0,0,.24);
}

.user-bloc .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.48rem;
  right: 0.92rem;
  width: 0.9rem;
  height: 0.9rem;
  border-left: 1px solid var(--home-border, rgba(255,255,255,.18));
  border-top: 1px solid var(--home-border, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--home-panel, #262333) 94%, #ffffff 6%);
  transform: rotate(45deg);
}

.user-bloc .dropdown-menu .user-email {
  display: grid;
  gap: 0.32rem;
  padding: 0.85rem;
  color: var(--home-text, white);
  border: 1px solid var(--home-control-border, rgba(255,255,255,.18));
  border-radius: 9px;
  background: var(--home-control, #15151d);
}

.user-bloc .dropdown-menu .user-email span {
  min-width: 0;
}

.user-bloc .dropdown-menu .user-login-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--home-text, white);
  font-size: 1.35rem;
  line-height: 1;
}

.user-bloc .dropdown-menu .user-login-container .elo {
  color: var(--home-cta, var(--accent));
  font-family: 'Numbers', monospace;
  font-size: 0.95rem;
}

.user-bloc .dropdown-menu .user-mail {
  display: block;
  color: var(--home-muted, rgba(255,255,255,.65));
  font-size: 1rem;
  line-height: 1.1;
}

.user-bloc .dropdown-menu a {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 3.1rem;
  margin-top: 0.45rem;
  padding: 0.62rem 0.75rem;
  color: var(--home-text, white);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.user-bloc .dropdown-menu a:not(:last-child) {
  border-bottom: 1px solid transparent;
}

.user-bloc .dropdown-menu a .fa-solid {
  margin: 0;
  color: var(--home-cta, var(--accent));
  font-size: 1.05rem;
  text-align: center;
}

.user-bloc .dropdown-menu a:hover {
  color: var(--home-text, white);
  border-color: color-mix(in srgb, var(--home-cta, var(--accent)) 42%, var(--home-control-border, transparent));
  background: color-mix(in srgb, var(--home-control, #15151d) 66%, transparent);
}

.user-bloc .dropdown-menu a:hover .fa-solid {
  color: var(--home-cta, var(--accent));
}

.auth-modal .modal-dialog {
  max-width: min(92vw, 31.5rem);
}

.auth-modal .modal-content {
  overflow: hidden;
  padding: 0;
  color: var(--home-text, white);
  border: 1px solid var(--home-border, rgba(255,255,255,.18)) !important;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-panel, #262333) 96%, #ffffff 4%), var(--home-panel, #262333));
  box-shadow:
    0 8px 0 rgba(0,0,0,.3),
    0 28px 64px rgba(0,0,0,.34);
}

.auth-modal .modal-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--home-border, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--home-panel-2, #211f2d) 82%, transparent);
}

.auth-modal .modal-content .auth-modal-title {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.auth-modal .modal-content .auth-modal-title img.img-ball {
  width: 3rem;
  margin: 0;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.22));
  image-rendering: pixelated;
}

.auth-modal .modal-content .auth-modal-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.auth-modal .modal-content .auth-modal-copy span {
  color: var(--home-cta, var(--accent));
  font-size: 1rem;
  line-height: 1;
}

.auth-modal .modal-content .modal-header h2 {
  margin: 0;
  color: var(--home-text, white) !important;
  font-size: clamp(1.55rem, 3.8vw, 1.95rem) !important;
  line-height: 0.95;
  text-shadow: none;
}

.auth-modal .modal-content .auth-modal-close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  color: var(--home-muted, rgba(255,255,255,.65));
  border: 1px solid var(--home-control-border, rgba(255,255,255,.18));
  border-radius: 9px;
  background: var(--home-control, #15151d);
}

.auth-modal .modal-content .auth-modal-close:hover {
  color: var(--home-text, white);
  border-color: color-mix(in srgb, var(--home-cta, var(--accent)) 42%, var(--home-control-border, transparent));
}

.auth-modal .modal-content .auth-modal-close .fa-solid {
  color: inherit;
  font-size: 1rem;
}

.auth-modal .modal-content .modal-body {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.6rem;
}

.auth-modal .alert-danger {
  margin: 0;
  padding: 0.75rem 0.85rem;
  color: #ffe6e6;
  text-align: left;
  border: 1px solid rgba(229, 28, 35, .45);
  border-radius: 9px;
  background: rgba(229, 28, 35, .16);
}

.auth-modal .alert-danger p {
  margin: 0;
}

.auth-field {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  align-items: stretch;
  min-height: 3.8rem;
  overflow: hidden;
  border: 1px solid var(--home-control-border, rgba(255,255,255,.18));
  border-radius: 10px;
  background: var(--home-control, #15151d);
}

.auth-modal .auth-field .icon-input {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  padding: 0;
  color: var(--home-cta, var(--accent));
  border: 0;
  border-right: 1px solid var(--home-control-border, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--home-panel, #262333) 72%, var(--home-control, #15151d) 28%);
  box-shadow: none;
  font-size: 1rem;
}

.auth-modal .auth-field input.form-control {
  width: 100%;
  max-width: none !important;
  height: 100%;
  min-height: 3.8rem;
  padding: 0 1.05rem;
  color: var(--home-text, white);
  -webkit-text-fill-color: var(--home-text, white);
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  font-size: 1.25rem;
}

.auth-modal .auth-field input.form-control::placeholder {
  color: color-mix(in srgb, var(--home-muted, rgba(255,255,255,.65)) 88%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--home-muted, rgba(255,255,255,.65)) 88%, transparent);
}

.auth-modal .auth-field:focus-within {
  border-color: var(--home-cta, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-cta, var(--accent)) 22%, transparent);
}

.auth-captcha {
  grid-template-columns: 3.05rem minmax(0, 1fr);
  min-height: 6.05rem;
  overflow: visible;
}

.auth-captcha .cf-turnstile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  overflow: hidden;
}

.auth-actions {
  display: grid;
  padding-top: 1.15rem;
  padding-bottom: 0.5rem;
}

.auth-modal .modal-content .auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 4.25rem;
  margin: 0;
  padding: 0.8rem 1rem !important;
  color: #15151d;
  border: 0;
  border-radius: 10px;
  background: var(--home-cta, var(--accent));
  box-shadow: 0 6px 0 var(--home-cta-dark, #c29c24);
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3.4vw, 1.6rem);
  line-height: 1;
  text-transform: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.auth-modal .modal-content .auth-submit:hover {
  background: color-mix(in srgb, var(--home-cta, var(--accent)) 90%, #ffffff 10%);
  box-shadow: 0 7px 0 var(--home-cta-dark, #c29c24);
  transform: translateY(-1px);
}

.auth-modal .modal-content .auth-submit:active {
  box-shadow: 0 3px 0 var(--home-cta-dark, #c29c24);
  transform: translateY(3px);
}

.auth-modal .modal-content .auth-submit .fa-solid {
  color: #15151d;
  font-size: 1.05rem;
}

.auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-top: 0.5rem;
  color: var(--home-muted, rgba(255,255,255,.65));
  font-size: 1.05rem;
  line-height: 1;
}

.auth-switch a {
  color: var(--home-cta, var(--accent));
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--home-cta, var(--accent)) 45%, transparent);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.auth-switch a:hover {
  color: color-mix(in srgb, var(--home-cta, var(--accent)) 82%, #ffffff 18%);
  border-bottom-color: var(--home-cta, var(--accent));
}

.online-mode-modal .modal-dialog {
  max-width: min(92vw, 40rem);
}

.online-mode-modal .modal-body {
  padding-top: 1.35rem;
}

.online-format-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.32rem;
  border-radius: 12px;
  border: 1px solid var(--home-control-border, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--home-panel, #262333) 92%, #000 8%);
}

.online-format-option {
  padding: 0.62rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--home-muted, rgba(255,255,255,.65));
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.32rem);
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.online-format-option:hover {
  color: var(--home-text, white);
}

.online-format-option.active {
  color: #15151d;
  background: var(--home-cta, var(--accent));
  box-shadow: 0 3px 0 var(--home-cta-dark, #c29c24);
}

.online-mode-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.online-mode-choice {
  min-width: 0;
  min-height: 8.2rem;
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  color: var(--home-text, white);
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--home-control-border, rgba(255,255,255,.18));
  border-radius: 10px;
  background: color-mix(in srgb, var(--home-panel, #262333) 86%, var(--home-control, #15151d) 14%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 5px 0 rgba(0,0,0,.28);
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.online-mode-choice .fa-solid {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  color: #15151d !important;
  border-radius: 10px;
  background: var(--home-cta, var(--accent)) !important;
  box-shadow: 0 4px 0 var(--home-cta-dark, #c29c24) !important;
  font-size: 1.2rem;
}

.online-mode-copy {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.online-mode-copy strong {
  color: var(--home-text, white);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 0.95;
  font-weight: 400;
}

.online-mode-copy small {
  color: var(--home-muted, rgba(255,255,255,.65));
  font-size: clamp(0.96rem, 2.2vw, 1.08rem);
  line-height: 1;
}

.online-mode-choice:hover,
.online-mode-choice:focus {
  color: var(--home-text, white);
  border-color: color-mix(in srgb, var(--home-cta, var(--accent)) 48%, var(--home-control-border, transparent));
  background: color-mix(in srgb, var(--home-panel, #262333) 76%, #ffffff 10%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 0 rgba(0,0,0,.3);
  transform: translateY(-1px);
}

.online-mode-choice:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 0 rgba(0,0,0,.3);
  transform: translateY(3px);
}

/* Softer entrance than Bootstrap's default -50px slide: a short rise + settle. */
.auth-modal.fade .modal-dialog {
  transform: translateY(14px) scale(0.985);
  transition: transform 0.18s ease-out;
}

.auth-modal.show .modal-dialog {
  transform: none;
}

/* Dim + blur the page behind auth modals (scoped: other modals keep the stock backdrop). */
body:has(.auth-modal.show) .modal-backdrop.show {
  opacity: 0.62;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* …but not on the home page: the live Phaser demo iframe plays behind the backdrop, and blurring an
   animating canvas layer re-samples it every frame and clips/tears the filter. Drop the blur and just
   darken a bit more instead. */
body:has(.home-shell):has(.auth-modal.show) .modal-backdrop.show {
  opacity: 0.72;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 520px) {
  .online-mode-choices {
    grid-template-columns: 1fr;
  }

  .online-mode-choice {
    min-height: 6.5rem;
  }

  .user-bloc {
    right: 1rem;
  }

  .user-bloc .dropdown-menu {
    min-width: min(16rem, calc(100vw - 2rem));
  }

  .auth-modal .modal-dialog {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .auth-modal .modal-header {
    padding: 0.85rem 0.85rem 0.7rem;
  }

  .auth-modal .modal-body {
    padding: 0.85rem 0.85rem 1.2rem;
  }

  .auth-captcha {
    grid-template-columns: 2.7rem minmax(0, 1fr);
  }

  .auth-captcha .cf-turnstile {
    justify-content: flex-start;
    padding-left: 0.55rem;
  }
}

.container-index {
  margin-top: 5rem;
}

.container-index:has(.home-shell) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100dvh;
  margin-top: 0;
  padding-top: clamp(1.1rem, 2.6dvh, 1.85rem);
  padding-bottom: clamp(0.55rem, 1.6dvh, 1.25rem);
  max-width: min(100%, 1480px);
}

/* The home starts with the logo inside the play prompt. The shared layout logo keeps its
   regular /game position above the left rail, but remains hidden until the demo goes live. */
.container-index:has(.dashboard-container.home-shell) > .row {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(30px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

body.is-home-live .container-index:has(.dashboard-container.home-shell) > .row {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  animation: home-brand-arrive 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

body.is-authenticated .container-index:has(.dashboard-container.home-shell) > .row {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  animation: none;
}

.container-index:has(.home-shell) > .row .d-flex {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.container-index:has(.home-shell) .brand-logo {
  max-width: min(820px, calc(100vw - 7rem));
}

.container-index:has(.home-shell) img.title-dashboard {
  width: auto;
  max-width: min(700px, 88vw);
  max-height: clamp(72px, 13dvh, 112px);
  object-fit: contain;
}

.container-index .fa-solid {
  font-size: 1.8rem;
}

.container-index .bg-game {
  text-align: center;
}

.container-index .bg-game img#bg-game {
  box-shadow: 0px 2px 0px 6px #363435;
  border-radius: 1.5rem;
  width: 85%;
}

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

.container-index {
  .my-blobby {
    height: 9rem;
    img#my-blobby {
      width: 10rem;
      position: relative;
      top: -2.5rem;
      --animate-duration: 0.7s;
    }
  }
}

.container-index img.arrow-right, .container-index img.arrow-left {
  cursor: pointer;
  width: 80px;
  height: 80px;
  margin-top: 1.5rem;
}

.home-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(360px, 0.72fr);
  justify-content: center;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
  min-height: 0;
  padding: clamp(0.2rem, 0.9dvh, 0.75rem) clamp(1rem, 2vw, 2rem) clamp(0.7rem, 1.8dvh, 1.7rem);
}

.home-utility-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: 0.15rem;
}

.home-utility-link {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: clamp(3rem, 5dvh, 3.4rem);
  padding: 0.5rem;
  color: var(--button-text);
  text-decoration: none;
  line-height: 1;
  border: 2px solid var(--control-border);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 45%),
    var(--secondary-button-bg);
  box-shadow: var(--shadow-control);
  backdrop-filter: blur(7px);
  transition: transform 0.12s ease, color 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.home-utility-link::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto;
  height: 42%;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.home-utility-link .fa-solid {
  color: var(--button-icon);
  font-size: clamp(1.1rem, 1.15vw, 1.35rem);
}

.home-utility-cup {
  width: clamp(1.15rem, 1.2vw, 1.4rem);
  height: auto;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  margin-right: 0.42rem;
  animation: kofi-wiggle 3s infinite;
}

.home-utility-link:hover .home-utility-cup {
  filter: brightness(1.08) saturate(1.08);
}

.home-utility-link:hover {
  color: var(--button-text);
  border-color: var(--accent);
  background: var(--secondary-button-bg-hover);
  box-shadow: var(--shadow-control-hover);
  transform: translateY(-2px);
}

.home-utility-link:active {
  box-shadow: var(--shadow-control-pressed);
  transform: translateY(2px);
}

.home-utility-link:hover .fa-solid {
  color: var(--button-icon) !important;
}

.home-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0;
}

.home-stage-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: min(100%, 810px, calc((100dvh - 230px) * 1.333333 + 10px));
  min-width: 0;
  padding: clamp(0.45rem, 1.15dvh, 0.65rem) clamp(0.55rem, 1vw, 0.8rem) clamp(0.5rem, 1.2dvh, 0.75rem);
  border: 4px solid var(--ink);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(180deg, var(--panel-sheen), transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.12)),
    rgba(54, 52, 53, 0.36);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 6px 0 rgba(54, 52, 53, 0.36),
    0 18px 36px var(--surface-shadow-soft);
  backdrop-filter: blur(8px);
}

.home-stage-toolbar::after {
  content: "";
  position: absolute;
  left: clamp(0.8rem, 1.5vw, 1.2rem);
  right: clamp(0.8rem, 1.5vw, 1.2rem);
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.home-stage-frame {
  position: relative;
  box-sizing: content-box;
  overflow: hidden;
  width: min(100%, 800px, calc((100dvh - 255px) * 1.333333));
  aspect-ratio: 4 / 3;
  min-height: 0;
  border: 4px solid var(--ink);
  border-top-width: 3px;
  border-radius: 0 0 16px 16px;
  background: var(--stage-bg);
  outline: 2px solid rgba(255, 255, 255, 0.2);
  outline-offset: -7px;
  box-shadow:
    var(--shadow-stage);
}

.home-stage-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0 1px, rgba(255, 255, 255, 0.06) 1px 2px, transparent 2px 3px),
    radial-gradient(ellipse at center, transparent 75%, rgba(20, 18, 24, 0.3) 100%);
  opacity: 0.65;
  mix-blend-mode: overlay;
}

.home-stage-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 14%, transparent 76%, rgba(54, 52, 53, 0.18)),
    radial-gradient(ellipse at center, transparent 78%, rgba(0, 0, 0, 0.14) 100%);
  mix-blend-mode: soft-light;
}

.container-index .home-stage-frame img#bg-game {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: none;
  transform: scale(1.02);
}

#home-demo-game,
.home-training-demo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 12px;
  background: var(--stage-bg);
}

.home-training-demo {
  display: block;
}

#home-demo-game {
  display: grid;
  place-items: center;
}

#home-demo-game canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
}

.home-play-prompt {
  position: absolute;
  top: clamp(1.9rem, 5.2vw, 3.6rem);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  width: min(88%, 30rem);
  padding: 1rem 0.9rem 0.9rem;
  color: var(--home-text, #f6f3ff);
  border: 1px solid color-mix(in srgb, var(--home-cta, #ffd33f) 58%, var(--home-control-border, #3b384d));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-panel, #262333) 92%, #ffffff 8%), var(--home-panel, #262333));
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--home-cta-dark, #c29c24) 72%, #000000 28%),
    0 18px 32px rgba(18, 16, 24, 0.32);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  text-align: center;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
  backdrop-filter: blur(8px);
}

.home-stage-frame:not(.is-demo-ready) .home-play-prompt {
  opacity: 0;
  transform: translate(-50%, -0.6rem) scale(0.9);
}

.home-prompt-action {
  position: relative;
  width: min(100%, 20rem);
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  margin-top: 0.55rem;
  padding: 0.72rem 1rem 0.78rem;
  color: #15151d;
  border: 0;
  border-radius: 10px;
  background: var(--home-cta, #ffd33f);
  box-shadow: 0 6px 0 var(--home-cta-dark, #c29c24);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.home-prompt-action::before {
  content: none;
}

.home-prompt-action strong {
  margin: 0;
  color: #15151d;
  font-size: clamp(1.5rem, 2.55vw, 2rem);
  line-height: 0.9;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
}

.home-prompt-action .home-play-hint {
  color: color-mix(in srgb, #15151d 76%, #ffffff 24%);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  line-height: 1;
}

.home-stage-frame:not(.is-playing) .home-prompt-action:hover {
  background: color-mix(in srgb, var(--home-cta, #ffd33f) 90%, #ffffff 10%);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--home-cta-dark, #c29c24);
}

.home-stage-frame:not(.is-playing) .home-prompt-action:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--home-cta-dark, #c29c24);
}

body.is-authenticated .home-play-prompt {
  display: none;
}

body.is-authenticated .home-stage-frame:not(.is-demo-ready) .home-play-prompt {
  transform: translateY(-0.35rem) scale(0.96);
}

body.is-authenticated .home-command-panel,
body.is-authenticated .home-prompt-action {
  display: none;
}

.home-command-panel {
  display: grid;
  gap: 0.42rem;
  width: 100%;
}

/* Lightweight rows: a barely-there translucent fill + hairline border instead of a
   solid dark block, so the three bars recede and the yellow keycaps carry the eye. */
.home-command-row {
  min-height: 2.72rem;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: color-mix(in srgb, var(--home-control, #15151d) 38%, transparent);
}

.home-command-name {
  color: var(--home-muted, rgba(255, 255, 255, 0.65));
  font-size: clamp(0.88rem, 1.15vw, 1rem);
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-key-group {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.home-key-group kbd {
  min-width: 1.55rem;
  height: 1.48rem;
  display: inline-grid;
  place-items: center;
  padding: 0.08rem 0.32rem;
  color: #15151d;
  border: 0;
  border-radius: 4px;
  background: var(--home-cta, #ffd33f);
  box-shadow: 0 2px 0 var(--home-cta-dark, #c29c24);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.98rem;
  line-height: 1;
}

.home-key-group .home-key-space {
  min-width: 3.55rem;
}

.home-key-alt {
  color: var(--home-muted, rgba(255, 255, 255, 0.65));
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
}

.home-play-hint {
  color: var(--home-soft-text, rgba(255, 255, 255, 0.78));
  font-size: clamp(0.9rem, 1.25vw, 1.02rem);
  line-height: 1;
}

/* ── Travelling brand logo ─────────────────────────────────────────────────
   Before play it signs the top of the "À toi de jouer" prompt. When the demo
   goes live, the shared layout logo takes over in the exact same place and with
   the exact same rendering as on /game. */

/* Prominent brand signature at the top of the prompt. */
.home-play-prompt .home-prompt-brand.brand-logo {
  width: max-content;
  max-width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: center;
  justify-self: center;
  gap: clamp(0.75rem, 1.5vw, 0.95rem);
  padding: 0.25rem 0 0.3rem;
  margin: 0 auto 0.9rem;
  position: relative;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.home-play-prompt .home-prompt-brand .brand-mark {
  width: clamp(3.2rem, 6.5vw, 3.85rem);
  height: clamp(3.2rem, 6.5vw, 3.85rem);
}

.home-play-prompt .home-prompt-brand .brand-main {
  font-size: clamp(1.45rem, 3.1vw, 1.85rem);
}

.home-play-prompt .home-prompt-brand .brand-badge {
  font-size: clamp(0.94rem, 1.95vw, 1.12rem);
}

.home-play-prompt .home-prompt-brand.brand-logo::after {
  content: none;
}

body.is-authenticated .home-play-prompt .home-prompt-brand.brand-logo {
  justify-self: start;
  margin: 0;
  padding: clamp(0.38rem, 0.85vw, 0.55rem) clamp(0.55rem, 1.2vw, 0.8rem);
  border: 1px solid color-mix(in srgb, var(--home-cta, #ffd33f) 62%, rgba(54, 52, 53, 0.55));
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 50%),
    color-mix(in srgb, var(--home-panel, #262333) 84%, #000000 16%);
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--home-cta-dark, #c29c24) 36%, #000000 64%),
    0 12px 24px rgba(18, 16, 24, 0.24);
}

body.is-authenticated .home-play-prompt .home-prompt-brand .brand-mark {
  width: clamp(2.25rem, 3.2vw, 2.85rem);
  height: clamp(2.25rem, 3.2vw, 2.85rem);
}

body.is-authenticated .home-play-prompt .home-prompt-brand .brand-main {
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
}

body.is-authenticated .home-play-prompt .home-prompt-brand .brand-badge {
  font-size: clamp(0.7rem, 1.05vw, 0.86rem);
}

/* Centre the brand subtitle under the title in the prompt. */
.home-prompt-brand .brand-copy {
  justify-items: center;
}

.home-prompt-brand .brand-main {
  justify-content: center;
}

/* Match live → the prompt signature lifts toward the sidebar and fades, and the
   real logo makes its entrance the same way it does on every other page: the
   demo it "flew" from — a slide + fade in from the right (the demo sits to the
   right of the sidebar) that supports the travel narrative, capped by the brand's
   own ball spin as it settles. `backwards` fill (not `both`) so the plate's hover
   lift works again once the entrance has played. Pure X translation → never crosses
   the panel's top clip edge (overflow:hidden with ~0 clearance up there). */
body.is-home-live .home-prompt-brand.brand-logo {
  opacity: 0;
  transform: translate(-16px, -8px) scale(0.92);
}

/* Glides in from the right with a whisper of overshoot, then settles. */
@keyframes home-brand-arrive {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  70% {
    opacity: 1;
    transform: translateX(-3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-home-live .container-index:has(.dashboard-container.home-shell) > .row,
  body.is-home-live .home-prompt-brand.brand-logo {
    animation: none;
    transform: none;
  }
}

/* Dark veil over the frozen demo until the visitor starts playing — draws the eye to the
   "À toi de jouer" prompt and reads as "click me". Fades out once the match is live (.is-playing,
   toggled by index.js on the first movement key). Sits above the iframe (z 0) but below the
   prompt (z 5) so the invite stays crisp. */
.home-stage-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(13, 17, 28, 0.44) 0%, rgba(13, 17, 28, 0.66) 100%);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.home-stage-frame:not(.is-demo-ready) .home-stage-veil {
  opacity: 0;
}

.home-stage-frame:not(.is-playing) .home-stage-veil {
  pointer-events: auto;
  cursor: pointer;
}

body.is-authenticated .home-stage-frame:not(.is-playing) .home-stage-veil {
  background: linear-gradient(180deg, rgba(10, 12, 20, 0.08), rgba(10, 12, 20, 0.16));
  opacity: 1;
}

.home-stage-frame.is-playing .home-stage-veil {
  opacity: 0;
  pointer-events: none;
}

.home-stage-frame.is-playing .home-play-prompt {
  opacity: 0;
  transform: translate(-50%, -0.6rem) scale(0.9);
}

body.is-authenticated .home-stage-frame.is-playing .home-play-prompt {
  transform: translateY(-0.35rem) scale(0.96);
}

.home-scoreboard {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  color: var(--accent);
  font-family: 'Numbers';
  font-size: 2.2rem;
  line-height: 1;
  padding: 0.7rem 1rem;
  border: 4px solid var(--ink);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 38%),
    rgba(54, 52, 53, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 0 0 rgba(0, 0, 0, 0.48),
    0 15px 28px rgba(0, 0, 0, 0.2);
}

.home-scoreboard span {
  min-width: 3.2rem;
  text-align: center;
}

.home-feature-rail {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-top: 2px solid var(--accent);
  border-radius: 8px;
  background: rgba(54, 52, 53, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 0 rgba(54, 52, 53, 0.62),
    0 12px 24px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(5px);
}

.home-stage-frame:has(#home-demo-game) .home-feature-rail,
.home-stage-frame:has(.home-training-demo) .home-feature-rail {
  display: none;
}

.home-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 1.8rem;
  padding: 0 0.55rem;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(54, 52, 53, 0.5);
}

.home-feature + .home-feature {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.home-feature .fa-solid {
  color: var(--accent);
  font-size: 0.92rem;
}

.home-panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: clamp(1.35rem, 3.6dvh, 2.15rem);
  padding: clamp(1.35rem, 2.8dvh, 1.9rem);
  border: 4px solid var(--panel-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--surface-glass-strong), transparent 35%),
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    var(--panel-bg);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(14px) saturate(1.12);
}

.home-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.08), transparent 28%);
  opacity: 0.84;
}

.home-panel::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  pointer-events: none;
}

.home-panel > * {
  position: relative;
  z-index: 1;
}

.theme-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(8.75rem, 1fr));
  justify-content: end;
  flex: 1 1 auto;
  width: min(100%, 36rem);
  min-width: 0;
  gap: clamp(0.65rem, 1.15vw, 0.9rem);
  margin-bottom: 0;
}

.screen-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 4.25rem;
  padding-right: 0.1rem;
}

.screen-status span {
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: rgba(54, 52, 53, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 0 rgba(54, 52, 53, 0.55);
}

.screen-status span:nth-child(1) {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 0 rgba(54, 52, 53, 0.55);
}

.theme-option {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: clamp(3.05rem, 5.9dvh, 3.55rem);
  padding: 0.5rem clamp(0.6rem, 1.1vw, 0.9rem);
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(1.34rem, 1.32vw, 1.58rem);
  line-height: 1.04;
  border: 3px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 45%),
    rgba(54, 52, 53, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 var(--depth-sm) 0 0 rgba(54, 52, 53, 0.62),
    0 10px 18px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(54, 52, 53, 0.42);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.theme-option::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto;
  height: 40%;
  border-radius: 7px 7px 10px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

.theme-option:hover,
.theme-option.active {
  color: white;
  border-color: var(--accent);
  background: rgba(54, 52, 53, 0.36);
  transform: translateY(-2px);
}

.theme-option.active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 var(--depth-lg) 0 0 rgba(54, 52, 53, 0.68),
    0 16px 28px rgba(0, 0, 0, 0.18),
    0 0 0 3px var(--accent-soft);
}

.theme-option:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.22),
    0 2px 0 rgba(54, 52, 53, 0.66);
}

.theme-swatch {
  position: relative;
  display: block;
  overflow: hidden;
  width: clamp(1.05rem, 1.1vw, 1.3rem);
  height: clamp(1.05rem, 1.1vw, 1.3rem);
  flex: 0 0 clamp(1.05rem, 1.1vw, 1.3rem);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 2px 0 rgba(54, 52, 53, 0.5),
    0 5px 10px rgba(0, 0, 0, 0.14);
}

.theme-swatch::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--theme-swatch-bg);
  clip-path: circle(50% at 50% 50%);
  pointer-events: none;
}

.theme-swatch-beach {
  --theme-swatch-bg: linear-gradient(135deg, #03b5aa 0 50%, #fddf22 50% 100%);
}

.theme-swatch-sunset {
  --theme-swatch-bg: linear-gradient(135deg, #e06a4f 0 50%, #ffe66d 50% 100%);
}

.theme-swatch-night {
  --theme-swatch-bg: linear-gradient(135deg, #191b57 0 50%, #8ff7ff 50% 100%);
}

.player-card {
  padding: 0.2rem 0 0;
}

.home-elo-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.7rem;
  text-decoration: none;
}

.home-elo-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0.5rem 0.4rem;
  border-radius: 12px;
  /* background: radial-gradient(ellipse at center, var(--surface-glass), transparent 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); */
}

.home-elo-label {
  color: var(--accent);
  font-size: 0.92rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.home-elo-pill strong {
  color: var(--home-text, #fff);
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 400;
}

.home-elo-unit {
  color: var(--home-muted, rgba(255, 255, 255, 0.6));
  font-size: 0.78rem;
  line-height: 1;
}

/* .home-elo-stats:hover .home-elo-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px var(--accent-soft);
} */

.player-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--accent);
  font-size: clamp(1.5rem, 3.3dvh, 2rem);
  line-height: 1.04;
  margin-bottom: clamp(0.85rem, 2dvh, 1.35rem);
  text-shadow: 0 1px 0 rgba(54, 52, 53, 0.38), 0 0 14px var(--accent-soft);
}

.player-card-header .fa-solid {
  font-size: 1.4rem;
}

.container-index .home-panel .my-blobby {
  display: grid;
  grid-template-columns: clamp(54px, 7.8dvh, 66px) minmax(0, 1fr) clamp(54px, 7.8dvh, 66px);
  align-items: center;
  height: auto;
  gap: 0.4rem;
}

.blobby-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(118px, 19.5dvh, 152px);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 44%),
    radial-gradient(ellipse at center, var(--surface-glass), transparent 66%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(54, 52, 53, 0.08);
}

.blobby-preview::before {
  content: "";
  position: absolute;
  width: 9.6rem;
  height: 2.2rem;
  bottom: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(54, 52, 53, 0.36), rgba(54, 52, 53, 0.02) 70%);
}

.container-index .home-panel .my-blobby img#my-blobby {
  width: min(clamp(9.2rem, 22dvh, 12.2rem), 100%);
  top: 0;
  z-index: 1;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 10px 0 rgba(54, 52, 53, 0.24))
    drop-shadow(0 18px 18px rgba(18, 16, 24, 0.18));
  transform: translateY(clamp(-34px, -4.2dvh, -22px));
}

.blobby-nav {
  width: clamp(54px, 7.8dvh, 66px);
  height: clamp(54px, 7.8dvh, 66px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 50%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 0 rgba(54, 52, 53, 0.28);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.container-index .blobby-nav img.arrow-right,
.container-index .blobby-nav img.arrow-left {
  width: clamp(54px, 7.6dvh, 64px);
  height: clamp(54px, 7.6dvh, 64px);
  margin-top: 0;
  image-rendering: pixelated;
  transition: transform 0.12s ease;
}

.container-index .blobby-nav:hover img {
  transform: translateY(-2px) scale(1.08);
}

.blobby-nav:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 50%),
    var(--surface-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 5px 0 rgba(54, 52, 53, 0.34),
    0 0 0 3px var(--accent-soft);
  transform: translateY(-2px);
}

.blobby-nav:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    0 2px 0 rgba(54, 52, 53, 0.3);
}

.home-panel .color-picker {
  margin: clamp(0.75rem, 1.6dvh, 1rem) 0 clamp(1.05rem, 2.2dvh, 1.55rem);
}

.home-panel .colors {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem 0.85rem;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 48%, rgba(54, 52, 53, 0.1)),
    color-mix(in srgb, var(--stage-bg) 36%, rgba(54, 52, 53, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(54, 52, 53, 0.14),
    0 2px 0 rgba(54, 52, 53, 0.18);
}

.color-option label {
  width: clamp(24px, 3.5dvh, 28px);
  height: clamp(24px, 3.5dvh, 28px);
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 var(--depth-sm) 0 rgba(54, 52, 53, 0.75),
    0 9px 14px rgba(0, 0, 0, 0.14);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.color-option label.active,
.color-option label:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 var(--depth-sm) 0 rgba(54, 52, 53, 0.72),
    0 10px 16px rgba(0, 0, 0, 0.18),
    0 0 0 3px color-mix(in srgb, var(--accent) 54%, transparent);
}

.home-login.input-group {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 17rem);
  justify-content: center;
  align-items: stretch;
  margin-bottom: 0;
}

.home-panel-divider {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), rgba(255, 255, 255, 0.66), var(--accent), transparent);
  box-shadow: 0 1px 0 rgba(54, 52, 53, 0.28), 0 0 18px var(--accent-soft);
  opacity: 0.86;
}

.home-login .input-group-text {
  width: auto;
  height: clamp(3.7rem, 7.2dvh, 4.7rem);
  display: grid;
  place-items: center;
  color: var(--button-icon);
  border: 3px solid var(--control-border);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 48%),
    white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    0 var(--depth-lg) 0 0 var(--ink),
    0 14px 24px rgba(18, 16, 24, 0.15);
  box-sizing: border-box;
  line-height: 1;
  padding: 0;
}

.home-login .input-group-text::before {
  display: block;
  line-height: 1;
}

.container-index .home-login #login {
  width: 100%;
  max-width: none;
  height: clamp(3.7rem, 7.2dvh, 4.7rem);
  border-width: 3px;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  box-sizing: border-box;
  margin: 0;
  color: var(--button-text) !important;
  -webkit-text-fill-color: var(--button-text);
  caret-color: var(--button-icon);
  font-size: clamp(1.7rem, 3.2dvh, 2.05rem);
  line-height: 1.05;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 48%),
    rgba(255, 255, 255, 0.96);
  border-color: var(--control-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(54, 52, 53, 0.08),
    0 var(--depth-lg) 0 0 var(--ink),
    0 14px 24px rgba(18, 16, 24, 0.15);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.container-index .home-login #login:focus {
  border-color: var(--accent);
  color: var(--button-text) !important;
  -webkit-text-fill-color: var(--button-text);
  background: white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -2px 0 rgba(54, 52, 53, 0.08),
    0 var(--depth-lg) 0 0 var(--ink),
    0 14px 24px rgba(18, 16, 24, 0.15),
    0 0 0 4px var(--accent-soft);
  outline: none;
}

.home-actions {
  display: grid;
  gap: clamp(0.95rem, 2dvh, 1.25rem);
  margin-top: 0;
}

.home-actions form {
  margin: 0;
}

.home-actions .btn-dashboard {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(3.9rem, 8dvh, 4.75rem);
  display: flex;
  align-items: center;
  margin: 0;
  padding: clamp(0.65rem, 1.35dvh, 0.9rem) 1rem !important;
  border-radius: 10px;
  border: 2px solid var(--control-border);
  box-shadow: var(--shadow-control);
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.home-actions .btn-dashboard::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto;
  height: 45%;
  border-radius: 8px 8px 13px 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent);
  opacity: 0.7;
  pointer-events: none;
}

.home-actions .btn-dashboard h4 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 0 !important;
  width: 100%;
  font-size: clamp(1.45rem, 3.05dvh, 1.72rem);
  font-weight: 400;
  line-height: 1.05;
}

.home-actions .hvr-grow:hover,
.theme-switcher .hvr-grow:hover {
  transform: translateY(-2px) !important;
}

.home-actions .btn-dashboard .fa-solid {
  width: 2.15rem;
  text-align: center;
  color: var(--button-icon);
}

.home-actions .btn-dashboard.home-primary-action {
  color: var(--cta-text);
  min-height: clamp(4.35rem, 8.8dvh, 5.35rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 48%),
    var(--accent);
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -3px 0 rgba(54, 52, 53, 0.12),
    0 var(--depth-lg) 0 0 var(--ink),
    0 16px 30px rgba(18, 16, 24, 0.22),
    0 0 0 4px var(--accent-soft),
    0 0 26px var(--accent-soft);
}

.home-actions .btn-dashboard.home-primary-action .fa-solid {
  color: var(--cta-icon);
}

.home-actions .btn-dashboard.home-primary-action:hover {
  color: var(--cta-text);
  background: var(--accent);
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    inset 0 -3px 0 rgba(54, 52, 53, 0.12),
    0 8px 0 0 var(--ink),
    0 22px 38px rgba(18, 16, 24, 0.26),
    0 0 0 4px var(--accent-soft),
    0 0 34px var(--accent-soft);
}

.home-actions .btn-dashboard.home-primary-action:hover .fa-solid {
  color: var(--cta-icon) !important;
}

.home-actions .btn-dashboard:not(.home-primary-action) {
  color: var(--button-text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 48%),
    var(--button-bg);
  box-shadow: var(--shadow-control);
}

.home-actions .btn-dashboard:not(.home-primary-action):hover {
  color: var(--button-text);
  border-color: var(--accent);
  background: var(--button-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-control-hover);
}

.home-actions .btn-dashboard:active {
  box-shadow: var(--shadow-control-pressed);
  transform: translateY(2px) !important;
}

.home-actions .btn-dashboard:not(.home-primary-action):hover .fa-solid {
  color: var(--button-icon) !important;
}

@media (max-width: 900px) {
  .home-utility-nav {
    gap: 0.7rem;
    margin: 0.25rem 0 0;
  }

  .home-utility-link {
    min-width: 0;
  }

  .home-shell {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 820px;
    margin: 0 auto;
  }

  .home-panel {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  body:has(.home-shell) .user-bloc {
    top: 0.45rem;
    right: 2rem;
    transform: none;
    transform-origin: top right;
  }

  .container-index:has(.home-shell) {
    padding-top: 0.8rem;
    padding-bottom: 0.25rem;
  }

  .container-index:has(.home-shell) .brand-logo {
    transform: scale(0.9);
  }

  .container-index:has(.home-shell) .brand-logo:hover {
    transform: translateY(-2px) scale(0.9);
  }

  .container-index:has(.home-shell) > .row {
    margin-bottom: 0.25rem !important;
  }

  .home-shell {
    padding-top: 0.15rem;
    padding-bottom: 0.45rem;
  }

  .home-stage-frame {
    width: min(100%, 800px, calc((100dvh - 230px) * 1.333333));
    box-shadow:
      inset 0 3px 0 rgba(255, 255, 255, 0.24),
      inset 0 -4px 0 rgba(54, 52, 53, 0.16),
      inset 0 0 0 3px rgba(54, 52, 53, 0.22),
      0 8px 0 0 rgba(54, 52, 53, 0.94),
      0 20px 48px rgba(18, 16, 24, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .home-panel {
    gap: clamp(0.7rem, 1.6dvh, 0.95rem);
    padding: clamp(0.95rem, 2dvh, 1.2rem);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      inset 0 -2px 0 rgba(54, 52, 53, 0.1),
      0 8px 0 0 rgba(54, 52, 53, 0.9),
      0 20px 46px var(--surface-shadow),
      0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .player-card-header {
    margin-bottom: 0.55rem;
    font-size: 1.45rem;
  }

  .blobby-preview {
    min-height: clamp(92px, 16dvh, 116px);
  }

  .blobby-preview::before {
    bottom: 0.55rem;
    height: 1.75rem;
  }

  .container-index .home-panel .my-blobby {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
  }

  .blobby-nav {
    width: 50px;
    height: 50px;
  }

  .container-index .blobby-nav img.arrow-right,
  .container-index .blobby-nav img.arrow-left {
    width: 50px;
    height: 50px;
  }

  .container-index .home-panel .my-blobby img#my-blobby {
    width: min(clamp(7.4rem, 18dvh, 9.2rem), 100%);
    transform: translateY(-18px);
  }

  .home-panel .color-picker {
    margin: 0.45rem 0 0.75rem;
  }

  .home-panel .colors {
    padding: 0.35rem 0.5rem 0.55rem;
  }

  .home-login.input-group {
    grid-template-columns: 4rem minmax(0, 16rem);
  }

  .home-login .input-group-text,
  .container-index .home-login #login {
    height: clamp(3.25rem, 6.3dvh, 3.75rem);
  }

  .home-actions {
    gap: clamp(0.55rem, 1.45dvh, 0.8rem);
  }

  .home-actions .btn-dashboard {
    min-height: clamp(3.25rem, 6.6dvh, 3.8rem);
    padding: 0.55rem 0.85rem !important;
  }

  .home-actions .btn-dashboard.home-primary-action {
    min-height: clamp(3.6rem, 7.1dvh, 4.15rem);
  }

  .home-actions .btn-dashboard h4 {
    font-size: 1.28rem;
  }

  .home-utility-link {
    min-height: 2.7rem;
  }
}

@media (max-width: 720px) {
  .container-index:has(.home-shell) {
    margin-top: 0.8rem;
    padding-top: 0.9rem;
  }

  body:has(.home-shell) .user-bloc {
    top: 1rem;
    right: 1rem;
    transform: none;
    transform-origin: top right;
  }

  .container-index:has(.home-shell) img.title-dashboard {
    max-width: calc(100vw - 6.25rem);
  }

  .container-index:has(.home-shell) .brand-logo {
    max-width: calc(100vw - 4.8rem);
    gap: 0.35rem;
    padding: 0.22rem 0.46rem;
    border-width: 3px;
    border-radius: 11px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      inset 0 -3px 0 rgba(54, 52, 53, 0.16),
      0 5px 0 0 var(--brand-ink),
      0 14px 26px rgba(18, 16, 24, 0.2);
  }

  .brand-mark {
    width: 2rem;
    height: 2rem;
  }

  .brand-blob {
    border-width: 2px;
  }

  .brand-copy {
    gap: 0.32rem;
  }

  .brand-main {
    gap: 0.22rem;
    font-size: clamp(1.28rem, 5.9vw, 1.62rem);
    line-height: 0.9;
    -webkit-text-stroke-width: 0.5px;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.78),
      0 2px 0 rgba(54, 52, 53, 0.22),
      0 6px 10px rgba(18, 16, 24, 0.13);
  }

  .brand-badge {
    padding: 0.2rem 0.32rem;
    border-width: 2px;
    font-size: 0.74rem;
  }

  .home-shell {
    padding: 0 0.65rem 3rem;
  }

  .home-stage-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 0.65rem;
  }

  .screen-status {
    display: none;
  }

  .theme-switcher {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .theme-option {
    min-height: 2.75rem;
    padding: 0.35rem 0.35rem;
    font-size: 1.2rem;
    line-height: 1.02;
    gap: 0.32rem;
    border-width: 2px;
  }

  .theme-swatch {
    width: 0.88rem;
    height: 0.88rem;
    flex-basis: 0.88rem;
  }

  .home-utility-link {
    min-height: 2.75rem;
    min-width: 0;
    padding: 0.45rem;
    border-radius: 9px;
  }

  .home-stage-frame,
  .container-index .home-stage-frame img#bg-game {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .home-scoreboard {
    top: 0.8rem;
    font-size: 1.55rem;
    padding: 0.55rem 0.75rem;
  }

  .home-scoreboard span {
    min-width: 2.4rem;
  }

  .home-feature-rail {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .home-feature {
    min-height: 2.35rem;
    padding: 0.35rem 0.4rem;
    font-size: 1rem;
    gap: 0.35rem;
  }

  .home-feature .fa-solid {
    font-size: 0.82rem;
  }

  .home-panel {
    padding: 0.9rem;
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -2px 0 rgba(54, 52, 53, 0.1),
      0 8px 0 0 rgba(54, 52, 53, 0.88),
      0 20px 44px var(--surface-shadow),
      0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .player-card {
    padding: 0.2rem 0 0.5rem;
  }

  .container-index .home-panel .my-blobby {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
  }

  .blobby-nav {
    width: 52px;
    height: 52px;
  }

  .container-index .blobby-nav img.arrow-right,
  .container-index .blobby-nav img.arrow-left {
    width: 52px;
    height: 52px;
  }

  .container-index .home-panel .my-blobby img#my-blobby {
    width: min(9rem, 100%);
    transform: translateY(-26px);
  }

  .home-panel .colors {
    gap: 0.55rem;
    padding: 0.5rem 0.62rem 0.72rem;
  }

  .color-option label {
    width: 25px;
    height: 25px;
  }

  .home-actions .btn-dashboard {
    min-height: 4rem;
    padding: 0.75rem 1rem !important;
  }

  .home-actions .home-primary-action {
    min-height: 4.75rem;
  }

  .home-actions .btn-dashboard h4 {
    font-size: 1.52rem;
  }

  .button-dashboard-title {
    padding-left: 0.9rem;
  }
}

/* .container-index img.arrow-right:hover, .container-index img.arrow-left:hover {
  transform: scale(1.2) !important;
} */

.description {
  text-align: center;
}

.hearings-typing {
  margin-left: 0.5rem;
  color: #FFE900;
}

.hearings {
  text-align: right;
}

a {
  color: #00B7FF;
}

#login {
  /* font-family: 'Rocher';
  font-palette: --Green; */
  color: rgba(255,255,255,.8);
  height: 4.5rem;
  width: 19.5rem;
  display: block;
  border: none;
  background-color: rgba(255,255,255,.3);
  border: 2px rgba(255,255,255,.7) solid;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 1.8rem;
  padding: 0 15px;
  box-shadow: 0 var(--depth-lg) 0 0 #363435;
}

.btn h4 {
  font-size: 1.8rem;
  margin-bottom: 0.4rem !important;
  margin-top: 0.4rem !important;
}

.button-dashboard-title  {
  padding-left: 1.5rem;
}

.home-actions .button-dashboard-title {
  padding-left: clamp(0.72rem, 1.35vw, 1rem);
}

#emoji-user {
  padding-right: 1rem;
  font-size: 3rem;
  cursor: pointer;
}

.icon-dashboard {
  margin-right: 0.4rem;
}

.input-group {
  margin-bottom: 1rem;
}

.input-group-text {
  background: #f3f3f3;
}

.icon-input {
  color: #666666;
  padding: 20.5px;
  box-shadow: 0 var(--depth-lg) 0 0 #363435;
}

ul {
  list-style-type: none;
}

.container-xxl {
  margin-top: 5vh;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1500px;
  }
}

body:has(.home-shell) {
  --home-bg: #17171f;
  --home-rail: #171720;
  --home-panel: #262333;
  --home-panel-2: #211f2d;
  --home-border: #353247;
  --home-muted: #928f9d;
  --home-text: #f6f3ff;
  --home-soft-text: #c7c2d1;
  --home-control: #15151d;
  --home-control-border: #3b384d;
  --home-cta: #ffd33f;
  --home-cta-dark: #c29c24;
  --home-link-accent: var(--home-cta);
  --home-stage-outline: #2f2d3f;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--home-bg) !important;
  color: var(--home-text);
}

body[data-theme="beach"]:has(.home-shell) {
  --home-bg: #181820;
  --home-panel: #252332;
  --home-panel-2: #211f2c;
  --home-cta: #ffd33f;
  --home-cta-dark: #c29c24;
  --home-stage-outline: #33485d;
  --accent: #ffd33f;
}

body[data-theme="sunset"]:has(.home-shell) {
  --home-bg: #1d171f;
  --home-panel: #30202d;
  --home-panel-2: #261b28;
  --home-cta: #ffb84a;
  --home-cta-dark: #b86b2f;
  --home-stage-outline: #5f3544;
  --accent: #ffb84a;
}

body[data-theme="night"]:has(.home-shell) {
  --home-bg: #111621;
  --home-panel: #1b2333;
  --home-panel-2: #171d2a;
  --home-cta: #8ff7ff;
  --home-cta-dark: #397b91;
  --home-stage-outline: #284464;
  --accent: #8ff7ff;
}

body[data-ui-mode="light"]:has(.home-shell) {
  --home-bg: #f7f2e8;
  --home-rail: #e4dece;
  --home-panel: #fffaf0;
  --home-panel-2: #f2eadb;
  --home-border: #c6bba8;
  --home-muted: #5e574f;
  --home-text: #222027;
  --home-soft-text: #423d39;
  --home-control: #fffdf8;
  --home-control-border: #c9bda9;
  --home-cta: #ffd33f;
  --home-cta-dark: #a98114;
  --home-link-accent: #8a6a08;
  --home-stage-outline: #bfb29d;
}

body[data-ui-mode="light"][data-theme="beach"]:has(.home-shell) {
  --home-bg: #f7f2e8;
  --home-rail: #e4dece;
  --home-panel: #fffaf0;
  --home-panel-2: #f2eadb;
  --home-border: #c6bba8;
  --home-muted: #5e574f;
  --home-control: #fffdf8;
  --home-control-border: #c9bda9;
  --home-cta: #ffd33f;
  --home-cta-dark: #a98114;
  --home-link-accent: #8a6a08;
  --home-stage-outline: #bfb29d;
}

body[data-ui-mode="light"][data-theme="sunset"]:has(.home-shell) {
  --home-bg: #faeee8;
  --home-rail: #ead5cb;
  --home-panel: #fff5ef;
  --home-panel-2: #f6dfd4;
  --home-border: #d2b3a4;
  --home-muted: #675049;
  --home-control: #fffaf6;
  --home-control-border: #d2b5a7;
  --home-cta: #ffad63;
  --home-cta-dark: #af5f2f;
  --home-link-accent: #98512b;
  --home-stage-outline: #d6aa99;
}

body[data-ui-mode="light"][data-theme="night"]:has(.home-shell) {
  --home-bg: #eef4fb;
  --home-rail: #dce6f0;
  --home-panel: #f7fbff;
  --home-panel-2: #e6eef8;
  --home-border: #b8c8d8;
  --home-muted: #506172;
  --home-control: #fbfdff;
  --home-control-border: #bac9d8;
  --home-cta: #8fd8ff;
  --home-cta-dark: #2f7099;
  --home-link-accent: #2d638b;
  --home-stage-outline: #a8bfd4;
}

.container-index:has(.home-shell) {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(1rem, 3dvh, 1.8rem) 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.container-index:has(.home-shell)::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 0;
  width: clamp(400px, 30vw, 460px);
  background: var(--home-rail);
  border-right: 1px solid var(--home-border);
  pointer-events: none;
}

.container-index:has(.home-shell) > .row,
.container-index:has(.home-shell) .home-shell {
  position: relative;
  z-index: 1;
}

.container-index:has(.home-shell) > .row {
  width: 100%;
  margin: 0 !important;
  padding: 0 clamp(1.1rem, 2.7vw, 2.25rem);
}

.container-index:has(.home-shell) > .row .d-flex {
  justify-content: flex-start !important;
  align-items: center;
  gap: clamp(0.65rem, 1.2vw, 0.9rem);
  margin: 0 !important;
  padding: 0 !important;
}

.container-index:has(.home-shell) .brand-logo,
.home-panel-brand.brand-logo,
.home-prompt-brand.brand-logo {
  max-width: none;
  padding: 0;
  gap: 0.98rem;
  color: var(--home-text);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
}

.container-index:has(.home-shell) .brand-logo:hover,
.container-index:has(.home-shell) .brand-logo:active,
.home-panel-brand.brand-logo:hover,
.home-panel-brand.brand-logo:active {
  color: var(--home-text);
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
}

.container-index:has(.home-shell) .brand-mark,
.home-panel-brand .brand-mark,
.home-prompt-brand .brand-mark {
  width: clamp(3.35rem, 3.2vw, 3.95rem);
  height: clamp(3.35rem, 3.2vw, 3.95rem);
  overflow: visible;
  display: block;
  flex: 0 0 auto;
}

.container-index:has(.home-shell) .brand-copy,
.home-panel-brand .brand-copy,
.home-prompt-brand .brand-copy {
  grid-template-columns: 1fr;
  gap: 0.05rem;
}

.container-index:has(.home-shell) .brand-main,
.home-panel-brand .brand-main,
.home-prompt-brand .brand-main {
  display: flex;
  gap: 0.28rem;
  color: var(--home-text);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.34rem, 1.75vw, 1.82rem);
  line-height: 0.82;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow: none;
  white-space: nowrap;
}

.container-index:has(.home-shell) .brand-badge,
.home-panel-brand .brand-badge,
.home-prompt-brand .brand-badge {
  display: block;
  padding: 0;
  color: var(--home-cta);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 0.9;
  font-weight: 400;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

/* This comes after the shared plate-free logo reset above so the prompt spacing
   cannot be erased. */
.container-index:has(.dashboard-container.home-shell) .home-play-prompt .home-prompt-brand.brand-logo {
  padding: 0.25rem 0 0.3rem;
  margin: 0 auto 0.9rem;
  left: -0.5rem;
  transform: none;
  transform-origin: center;
}

.container-index:has(.dashboard-container.home-shell) .home-play-prompt .home-prompt-brand .brand-mark {
  width: 3.85rem;
  height: 3.85rem;
}

.container-index:has(.dashboard-container.home-shell) .home-play-prompt .home-prompt-brand .brand-main {
  font-size: 1.85rem;
}

.container-index:has(.dashboard-container.home-shell) .home-play-prompt .home-prompt-brand .brand-badge {
  font-size: 1.12rem;
}

.container-index:has(.home-shell) .brand-logo:hover .brand-main,
.container-index:has(.home-shell) .brand-logo:focus-visible .brand-main,
.home-panel-brand.brand-logo:hover .brand-main,
.home-panel-brand.brand-logo:focus-visible .brand-main {
  transform: translateY(-1px);
  text-shadow:
    0 2px 0 color-mix(in srgb, var(--home-cta) 42%, transparent),
    0 5px 10px rgba(0, 0, 0, 0.22);
}

.container-index:has(.home-shell) .brand-logo:hover .brand-badge,
.container-index:has(.home-shell) .brand-logo:focus-visible .brand-badge,
.home-panel-brand.brand-logo:hover .brand-badge,
.home-panel-brand.brand-logo:focus-visible .brand-badge {
  transform: translateY(-1px) scale(1.04);
  text-shadow: 0 2px 0 color-mix(in srgb, var(--home-cta) 34%, transparent);
}

.home-beta-badge {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  align-self: center;
  min-height: 1.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.32rem 0.66rem 0.3rem;
  overflow: hidden;
  color: var(--home-text);
  border: 1px solid #05040a;
  border-radius: 8px;
  background: #100f16;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-beta-indicator {
  position: relative;
  width: 0.46rem;
  height: 0.46rem;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--home-cta) 76%, #ffffff 24%);
  border-radius: 50%;
  background: var(--home-cta);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--home-cta) 16%, transparent),
    0 0 10px color-mix(in srgb, var(--home-cta) 60%, transparent);
  animation: home-beta-breathe 2.8s ease-in-out infinite;
}

.home-beta-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  font-size: 0.88rem;
  letter-spacing: 0.055em;
}

.home-beta-copy strong {
  color: var(--home-cta);
  font: inherit;
  letter-spacing: 0.2em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--home-cta) 45%, transparent);
}

.home-beta-cursor {
  color: var(--home-cta);
  font: inherit;
  text-shadow: 0 0 8px color-mix(in srgb, var(--home-cta) 45%, transparent);
  animation: home-beta-blink 1s steps(1) infinite;
}

.home-beta-badge-prompt {
  margin: -0.42rem auto 0.28rem;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

@keyframes home-beta-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.15;
  }
}

@keyframes home-beta-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-beta-indicator {
    animation: none;
  }
}

.home-shell {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(1.5rem, 3.5dvh, 2.2rem) clamp(1.1rem, 2.7vw, 2.25rem) clamp(1rem, 2.5dvh, 1.8rem);
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.4rem);
  align-items: stretch;
}

.home-panel {
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3dvh, 2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.home-panel::before,
.home-panel::after {
  content: none;
}

.player-card {
  padding: clamp(1.25rem, 2.5dvh, 1.55rem) clamp(1.2rem, 2.3vw, 1.45rem);
  border-radius: 12px;
  background: color-mix(in srgb, var(--home-panel) 96%, #ffffff 4%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}

.player-card-header {
  justify-content: flex-start;
  margin: 0 0 clamp(1.45rem, 3dvh, 1.9rem);
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.22rem;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  text-shadow: none;
}

.container-index .home-panel .my-blobby {
  grid-template-columns: 2.45rem auto 2.45rem;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.05rem);
  min-height: 5.7rem;
  justify-items: center;
}

.blobby-preview {
  min-height: 5.9rem;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.blobby-preview::before {
  content: none;
}

.container-index .home-panel .my-blobby img#my-blobby {
  width: min(5.4rem, 100%);
  transform: translateY(-0.85rem);
  filter: none;
}

.blobby-nav {
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid var(--home-control-border);
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--home-muted);
}

.container-index .blobby-nav .arrow-right,
.container-index .blobby-nav .arrow-left {
  margin: 0;
  color: inherit;
  font-size: 0.92rem;
  line-height: 1;
  transition: transform 0.12s ease, color 0.12s ease;
}

.blobby-nav:hover {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--home-cta) 50%, transparent);
  transform: translateY(-1px);
  color: var(--home-text);
}

.home-panel .color-picker {
  margin: clamp(1rem, 2dvh, 1.25rem) 0 clamp(1rem, 2.2dvh, 1.35rem);
}

.home-panel .colors {
  justify-content: center;
  gap: 0.66rem;
  padding: 0.3rem 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.color-option label {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.color-option label:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--home-cta) 45%, transparent);
}

.color-option label.active {
  border: 2px solid var(--home-bg);
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--home-cta), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.home-login.input-group {
  display: block;
  margin: 0;
}

.container-index .home-login #login {
  width: 100%;
  max-width: none;
  height: 3.95rem;
  padding: 0 1rem;
  color: var(--home-text) !important;
  -webkit-text-fill-color: var(--home-text);
  caret-color: var(--home-cta);
  border: 1px solid var(--home-control-border);
  border-radius: 10px !important;
  background: var(--home-control);
  box-shadow: none;
  font-family: 'Jersey 15', 'PixelArt', sans-serif;
  font-size: 1.28rem;
  text-align: center;
}

.container-index .home-login #login:focus {
  border-color: var(--home-cta);
  color: var(--home-text) !important;
  -webkit-text-fill-color: var(--home-text);
  background: #12121a;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-cta) 22%, transparent);
}

/* Homepage actions: sober version used before the glossy button experiment. */
.home-actions {
  display: grid;
  gap: 0.9rem;
}

.home-actions .btn-dashboard {
  min-height: 3.7rem;
  padding: 0.7rem 1rem !important;
  border: 1px solid var(--home-control-border);
  border-radius: 10px;
  background: var(--home-panel);
  box-shadow: none;
}

.home-actions .btn-dashboard::before {
  content: none;
}

.home-actions .btn-dashboard h4 {
  justify-content: center;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.28rem, 1.55vw, 1.55rem);
  line-height: 1;
  font-weight: 400;
  text-transform: none;
  word-spacing: 0.12rem;
  color: var(--home-text);
}

.home-actions .button-dashboard-title {
  padding-left: 0;
}

.home-actions .btn-dashboard.home-primary-action {
  min-height: 4.25rem;
  border: 0;
  color: #15151d;
  background: var(--home-cta);
  box-shadow: 0 6px 0 var(--home-cta-dark);
}

.home-actions .btn-dashboard.home-primary-action h4 {
  color: #15151d;
}

.home-actions .btn-dashboard.home-primary-action:hover {
  background: color-mix(in srgb, var(--home-cta) 90%, #ffffff 10%);
  box-shadow: 0 7px 0 var(--home-cta-dark);
  transform: translateY(-1px);
}

.home-actions .btn-dashboard:not(.home-primary-action) {
  color: var(--home-text);
  border: 0;
  background: color-mix(in srgb, var(--home-panel) 84%, #ffffff 9%);
  box-shadow: 0 5px 0 var(--home-panel);
}

.home-actions .btn-dashboard:not(.home-primary-action):hover {
  color: var(--home-text);
  background: color-mix(in srgb, var(--home-panel) 78%, #ffffff 15%);
  box-shadow: 0 6px 0 var(--home-panel);
  transform: translateY(-1px);
}

.home-actions .btn-dashboard:not(.home-primary-action):active {
  box-shadow: 0 2px 0 var(--home-panel);
  transform: translateY(3px) !important;
}

.home-actions .btn-dashboard:active {
  box-shadow: none;
  transform: translateY(2px) !important;
}

.home-actions .btn-dashboard.home-primary-action:active {
  box-shadow: 0 3px 0 var(--home-cta-dark);
}

.home-actions .btn-work-in-progress {
  opacity: 1;
}

.home-utility-nav {
  align-self: end;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-utility-link,
.home-mode-toggle {
  min-width: 0;
  min-height: 3.05rem;
  display: grid;
  grid-template-rows: 1.12rem auto;
  align-items: center;
  justify-items: center;
  gap: 0.22rem;
  padding: 0.5rem 0.25rem;
  color: var(--home-text);
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--home-panel) 84%, #ffffff 9%);
  box-shadow: 0 4px 0 var(--home-panel);
  backdrop-filter: none;
  font-family: 'Jersey 15', 'PixelArt', sans-serif;
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.home-utility-link::before {
  content: none;
}

.home-utility-link .fa-solid {
  color: var(--home-cta);
  font-size: 1rem;
  line-height: 1;
}

.home-utility-link:hover,
.home-mode-toggle:hover {
  color: var(--home-text) !important;
  background: color-mix(in srgb, var(--home-panel) 78%, #ffffff 15%);
  box-shadow: 0 5px 0 var(--home-panel);
  transform: translateY(-1px);
}

.home-utility-link:active,
.home-mode-toggle:active {
  box-shadow: 0 1px 0 var(--home-panel);
  transform: translateY(3px);
}

.home-utility-link:hover .fa-solid {
  color: var(--home-cta) !important;
}

@keyframes kofi-wiggle {
  0%,
  60% {
    transform: rotate(0) scale(1);
  }

  75% {
    transform: rotate(0) scale(1.12);
  }

  80% {
    transform: rotate(0) scale(1.1);
  }

  84%,
  92% {
    transform: rotate(-10deg) scale(1.1);
  }

  88%,
  96% {
    transform: rotate(10deg) scale(1.1);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}

.sidebar-footer {
  position: static;
  z-index: 2;
  align-self: end;
  justify-self: stretch;
  margin-top: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.42rem;
  padding: 0.72rem 0 0.55rem;
  color: var(--home-muted);
  border-top: 1px solid color-mix(in srgb, var(--home-control-border) 74%, transparent);
}

.sidebar-footer-main {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
}

.sidebar-footer-legal {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.28rem 0.46rem;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.74rem, 0.85vw, 0.84rem);
  line-height: 1;
}

.sidebar-footer-legal a {
  color: color-mix(in srgb, var(--home-muted) 82%, transparent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.14s ease;
}

.sidebar-footer-legal a:hover {
  color: #14d7ca;
  text-decoration: underline;
}

.sidebar-footer-legal-sep {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--home-muted) 50%, transparent);
  opacity: 0.7;
}

body[data-ui-mode="light"]:has(.home-shell) .sidebar-footer-legal a {
  color: #6d6459;
}

.sidebar-footer-brand {
  min-width: 0;
  flex: 0 1 auto;
  color: color-mix(in srgb, var(--home-muted) 88%, transparent);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.86rem, 0.95vw, 0.96rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer-separator {
  width: 0.2rem;
  height: 0.2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--home-muted) 58%, transparent);
  opacity: 0.75;
}

.sidebar-footer-support {
  border: 0;
  min-width: 0;
  min-height: 1.45rem;
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--home-text);
  background: transparent;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.86rem, 0.95vw, 1.02rem);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.14s ease, opacity 0.14s ease, transform 0.14s ease;
}

.sidebar-footer-support:hover {
  color: #14d7ca;
  transform: translateY(-1px);
}

.sidebar-footer-support:disabled {
  opacity: 0.72;
  cursor: wait;
}

.sidebar-footer-cup {
  width: 1.18rem;
  height: auto;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  animation: kofi-wiggle 3s infinite;
}

.sidebar-footer-support:hover .sidebar-footer-cup {
  filter: brightness(1.08) saturate(1.08);
}

body[data-ui-mode="light"]:has(.home-shell) .sidebar-footer-brand {
  color: #6d6459;
}

body[data-ui-mode="light"]:has(.home-shell) .sidebar-footer-support {
  color: #222027;
}

@media (max-width: 860px) {
  .sidebar-footer {
    position: static;
    bottom: auto;
  }

}

@media (max-width: 380px) {
  .sidebar-footer {
    gap: 0.38rem;
  }

  .sidebar-footer-brand,
  .sidebar-footer-support {
    font-size: 0.78rem;
  }

  .sidebar-footer-cup {
    width: 1.05rem;
  }
}

.home-mode-icons {
  width: 2rem;
  height: 1.12rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-control) 80%, transparent);
}

.home-mode-toggle .fa-solid {
  width: 0.96rem;
  height: 0.96rem;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.14s ease, background 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
}

body[data-ui-mode="dark"] .home-mode-toggle .home-mode-moon,
body[data-ui-mode="light"] .home-mode-toggle .home-mode-sun {
  color: #15151d;
  background: var(--home-cta);
  opacity: 1;
  transform: scale(1.05);
}

body[data-ui-mode="dark"] .home-mode-toggle .home-mode-sun,
body[data-ui-mode="light"] .home-mode-toggle .home-mode-moon {
  opacity: 0.58;
}

body[data-ui-mode="light"]:has(.home-shell) .player-card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(120, 106, 84, 0.12);
}

body[data-ui-mode="light"]:has(.home-shell) .player-card-header,
body[data-ui-mode="light"]:has(.home-shell) .home-feature,
body[data-ui-mode="light"]:has(.home-shell) .home-utility-link {
  color: #514b44;
}

body[data-ui-mode="light"]:has(.home-shell) .home-utility-link .fa-solid,
body[data-ui-mode="light"]:has(.home-shell) .home-feature .fa-solid {
  color: var(--home-link-accent);
}

body[data-ui-mode="light"]:has(.home-shell) .home-utility-link {
  background: var(--home-panel);
  box-shadow: 0 4px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .home-utility-link:hover {
  background: #ffffff;
  box-shadow: 0 5px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .home-utility-link:active {
  box-shadow: 0 1px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .home-utility-link:hover,
body[data-ui-mode="light"]:has(.home-shell) .home-utility-link:hover .fa-solid {
  color: #222027 !important;
}

body[data-ui-mode="light"]:has(.home-shell) .container-index .home-login #login {
  background: var(--home-control);
  border-color: var(--home-control-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-ui-mode="light"]:has(.home-shell) .container-index .home-login #login:focus {
  background: #ffffff;
  border-color: var(--home-cta-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-cta) 32%, transparent);
}

body[data-ui-mode="light"]:has(.home-shell) .home-actions .btn-dashboard:not(.home-primary-action),
body[data-ui-mode="light"]:has(.home-shell) .theme-switcher,
body[data-ui-mode="light"]:has(.home-shell) .home-demo-mode-switcher {
  background: var(--home-panel);
  border-color: var(--home-control-border);
}

body[data-ui-mode="light"]:has(.home-shell) .home-actions .btn-dashboard:not(.home-primary-action) {
  box-shadow: 0 5px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .home-actions .btn-dashboard:not(.home-primary-action):hover {
  background: #ffffff;
  box-shadow: 0 6px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .home-actions .btn-dashboard:not(.home-primary-action):active {
  box-shadow: 0 2px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .theme-option {
  color: #5c554c;
}

body[data-ui-mode="light"]:has(.home-shell) .home-demo-mode-option {
  color: #5c554c;
}

body[data-ui-mode="light"]:has(.home-shell) .theme-option:hover,
body[data-ui-mode="light"]:has(.home-shell) .theme-option.active,
body[data-ui-mode="light"]:has(.home-shell) .home-demo-mode-option:hover,
body[data-ui-mode="light"]:has(.home-shell) .home-demo-mode-option.active {
  color: #222027;
  background: var(--home-cta);
}

body[data-ui-mode="light"]:has(.home-shell) .color-option label.active,
body[data-ui-mode="light"]:has(.home-shell) .color-option label:hover {
  border-color: #222027;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--home-cta) 72%, transparent);
}

body[data-ui-mode="light"]:has(.home-shell) .home-mode-toggle {
  color: #514b44;
  background: var(--home-panel);
  box-shadow: 0 4px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .home-mode-toggle .home-mode-moon {
  color: #5e574f;
}

body[data-ui-mode="light"]:has(.home-shell) .home-mode-toggle:hover {
  color: #222027;
  background: #ffffff;
  box-shadow: 0 5px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .home-mode-toggle:active {
  box-shadow: 0 1px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.home-shell) .brand-badge {
  color: var(--home-link-accent);
}

body[data-ui-mode="light"]:has(.home-shell) .user-bloc .icon-user {
  color: var(--home-link-accent);
  background: var(--home-panel);
  border-color: var(--home-control-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 3px 0 rgba(150, 130, 96, 0.3),
    0 12px 24px rgba(120, 106, 84, 0.14);
}

body[data-ui-mode="light"]:has(.home-shell) .user-bloc .icon-user:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(150, 130, 96, 0.3),
    0 6px 14px rgba(120, 106, 84, 0.12);
}

.home-stage {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  justify-items: center;
  gap: clamp(0.7rem, 1.1dvh, 0.95rem);
  padding-top: clamp(0.45rem, 1.45dvh, 1rem);
}

.home-stage-toolbar {
  width: min(100%, 920px, calc((100dvh - 164px) * 1.333333));
  justify-self: center;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.home-stage-toolbar::after {
  content: none;
}

.theme-switcher {
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.38rem;
  padding: 0.24rem;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-panel) 86%, transparent);
}

.theme-option {
  min-height: 2rem;
  padding: 0.36rem 0.9rem;
  color: var(--home-muted);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-family: 'Jersey 15', 'PixelArt', sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-shadow: none;
}

.theme-option::before,
.theme-swatch {
  display: none;
}

.theme-option:hover,
.theme-option.active {
  color: #15151d;
  background: var(--home-cta);
  box-shadow: none;
  transform: none;
}

.theme-option:active {
  box-shadow: none;
  transform: translateY(1px);
}

.home-demo-mode-switcher {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.24rem;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-panel) 86%, transparent);
}

.home-demo-mode-option {
  min-height: 2rem;
  min-width: 4.35rem;
  padding: 0.36rem 0.78rem;
  color: var(--home-muted);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: 'Jersey 15', 'PixelArt', sans-serif;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.home-demo-mode-option:hover,
.home-demo-mode-option.active {
  color: #15151d;
  background: var(--home-cta);
}

.home-stage-frame {
  width: min(100%, 920px, calc((100dvh - 164px) * 1.333333));
  max-width: 100%;
  justify-self: center;
  border: 1px solid var(--home-stage-outline);
  border-radius: 16px;
  outline: 0;
  background: var(--stage-bg);
  box-shadow: none;
}

.home-stage-frame::before,
.home-stage-frame::after {
  opacity: 0.18;
}

.container-index .home-stage-frame img#bg-game {
  border-radius: 15px;
}

#home-demo-game canvas,
.home-training-demo {
  border-radius: 15px;
}

.home-feature-rail {
  position: static;
  z-index: auto;
  width: min(100%, 920px, calc((100dvh - 164px) * 1.333333));
  min-width: 0;
  margin-top: -0.15rem;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.2vw, 0.95rem);
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--home-panel) 86%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.12);
  backdrop-filter: none;
}

.home-stage-frame:has(#home-demo-game) .home-feature-rail,
.home-stage-frame:has(.home-training-demo) .home-feature-rail {
  display: flex;
}

.home-feature {
  min-height: 3.25rem;
  padding: 0.72rem 0.85rem;
  justify-content: center;
  gap: 0.55rem;
  color: var(--home-text);
  border-radius: 11px;
  background: color-mix(in srgb, var(--home-control) 72%, transparent);
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: none;
}

.home-feature + .home-feature {
  border-left: 0;
}

.home-feature .fa-solid {
  color: var(--home-cta);
  font-size: 1.12rem;
}

@media (max-width: 1060px) {
  .home-shell {
    grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
    gap: 1.4rem;
  }

  .home-stage-toolbar,
  .home-stage-frame {
    width: 100%;
  }

  .home-stage-toolbar {
    justify-content: stretch;
  }

  .home-feature-rail {
    width: 100%;
    justify-self: stretch;
    gap: 0.55rem;
    border-radius: 14px;
  }

  .home-feature {
    padding-inline: 0.65rem;
    font-size: 0.98rem;
  }
}

@media (min-width: 861px) {
  .player-card {
    margin-top: clamp(0.55rem, 1.7dvh, 1.15rem);
  }

  .home-actions {
    margin-top: clamp(0.45rem, 1.4dvh, 0.95rem);
  }
}

@media (max-width: 860px) {
  .container-index:has(.home-shell)::before {
    content: none;
  }

  .container-index:has(.home-shell) {
    padding-top: 1rem;
  }

  .container-index:has(.home-shell) > .row {
    padding: 0 1rem;
  }

  .home-shell {
    min-height: 0;
    padding: 1.25rem 1rem 2rem;
    grid-template-columns: 1fr;
    gap: 1.55rem;
  }

  .home-panel {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    gap: 1.1rem;
  }

  .home-utility-nav {
    margin-top: 0.4rem;
    width: 100%;
  }

  .home-stage {
    order: 2;
    width: min(100%, 720px);
    margin: 0 auto;
    padding-top: 0;
    transform: none;
  }

  .home-stage-toolbar {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .theme-switcher {
    flex: 1 1 20rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .home-demo-mode-switcher {
    margin-left: 0;
    flex: 0 0 auto;
  }

  .theme-option {
    padding: 0.44rem 0.35rem;
    font-size: 0.95rem;
  }

  .home-demo-mode-switcher {
    width: 100%;
    justify-content: flex-end;
  }

  .home-feature-rail {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
}

@media (max-width: 520px) {
  .container-index:has(.home-shell) .brand-mark {
    width: 2.55rem;
    height: 2.55rem;
  }

  .container-index:has(.home-shell) .brand-main {
    font-size: 0.72rem;
  }

  .container-index:has(.home-shell) .brand-badge {
    font-size: 0.4rem;
  }

  .container-index:has(.home-shell) > .row .d-flex {
    gap: 0.48rem;
  }

  .home-beta-badge {
    min-height: 1.55rem;
    gap: 0.35rem;
    padding: 0.26rem 0.5rem 0.24rem;
  }

  .home-beta-indicator {
    width: 0.38rem;
    height: 0.38rem;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--home-cta) 16%, transparent),
      0 0 8px color-mix(in srgb, var(--home-cta) 50%, transparent);
  }

  .home-beta-copy {
    gap: 0.2rem;
    font-size: 0.72rem;
  }

  .home-beta-copy span {
    font-size: 0.64rem;
  }

  .home-shell {
    padding: 1rem 0.75rem 1.5rem;
  }

  .player-card {
    padding: 1rem;
  }

  .container-index .home-panel .my-blobby {
    grid-template-columns: 2.75rem auto 2.75rem;
    gap: clamp(1rem, 8vw, 1.8rem);
  }

  .blobby-nav {
    width: 2.75rem;
    height: 2.75rem;
  }

  .container-index .blobby-nav img.arrow-right,
  .container-index .blobby-nav img.arrow-left {
    width: 2.25rem;
    height: 2.25rem;
  }

  .container-index .home-panel .my-blobby img#my-blobby {
    width: 5rem;
    transform: translateY(-0.75rem);
  }

  .home-panel .colors {
    gap: 0.52rem;
  }

  .color-option label {
    width: 21px;
    height: 21px;
  }

  .home-actions .btn-dashboard h4 {
    font-size: 0.76rem;
  }

  .home-utility-nav {
    gap: 0.45rem;
    padding: 0;
  }

  .home-utility-link,
  .home-mode-toggle {
    min-height: 2.85rem;
    font-size: 0.82rem;
  }

  .home-feature {
    min-height: 3rem;
    font-size: 0.96rem;
  }

  .home-play-prompt {
    top: 0.6rem;
    width: min(92%, 22rem);
    gap: 0.4rem;
    padding: 0.58rem;
    border-radius: 10px;
  }

  .home-prompt-action {
    width: min(100%, 17.5rem);
    gap: 0.14rem;
    margin-top: 0.3rem;
    padding: 0.58rem 0.75rem 0.64rem;
    box-shadow: 0 4px 0 var(--home-cta-dark);
  }

  .home-prompt-action strong {
    font-size: 1.24rem;
  }

  .home-prompt-action .home-play-hint {
    font-size: 0.72rem;
  }

  .home-command-panel {
    gap: 0.3rem;
  }

  .home-command-row {
    min-height: 2.35rem;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.34rem;
    padding: 0.46rem 0.5rem;
  }

  .home-command-name,
  .home-key-group kbd {
    font-size: 0.82rem;
  }

  .home-key-group {
    gap: 0.2rem;
  }

  .home-key-group kbd {
    min-width: 1.28rem;
    height: 1.24rem;
    padding-inline: 0.22rem;
  }

  .home-key-group .home-key-space {
    min-width: 3rem;
  }

  .home-key-alt {
    font-size: 0.68rem;
  }

  .home-play-hint {
    font-size: 0.8rem;
  }
}

/* Compact desktop pass: keep MacBook-sized viewports inside the screen. */
@media (min-width: 861px) and (max-height: 820px) {
  body:has(.home-shell) {
    overflow: hidden;
  }

  .container-index:has(.home-shell) {
    height: 100dvh;
    min-height: 0;
    padding-top: clamp(0.45rem, 1.35dvh, 0.75rem);
    overflow: hidden;
  }

  .container-index:has(.home-shell)::before {
    /* Cover shell padding + sidebar column (335px) + half the column gap. */
    width: calc(clamp(0.7rem, 1.7vw, 1.15rem) + 335px + clamp(0.5rem, 1.25vw, 1rem));
  }

  .container-index:has(.home-shell) > .row {
    margin-bottom: clamp(0.5rem, 1.3dvh, 0.9rem) !important;
    padding: 0 clamp(0.75rem, 1.8vw, 1.4rem);
  }

  .container-index:has(.home-shell) .brand-logo {
    gap: 0.82rem;
  }

  .container-index:has(.home-shell) .home-shell {
    height: calc(100dvh - 4.85rem);
    min-height: 0;
    padding: clamp(0.65rem, 1.55dvh, 0.9rem) clamp(0.7rem, 1.7vw, 1.15rem) clamp(0.7rem, 1.6dvh, 1rem);
    grid-template-columns: minmax(270px, 335px) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: stretch;
    overflow: hidden;
  }

  .home-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3.4dvh, 2.1rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 0.15rem;
    scrollbar-color: var(--home-control-border) transparent;
  }

  /* Cards have overflow:hidden, so their automatic minimum size is 0 and a
     fixed-height container squeezes them below their content instead of
     letting the column scroll. */
  .home-panel > * {
    flex: 0 0 auto;
  }

  .player-card {
    margin-top: 0;
    padding: clamp(1.1rem, 2.4dvh, 1.4rem) clamp(1.1rem, 2vw, 1.3rem);
    border-radius: 10px;
  }

  .player-card-header {
    margin-bottom: clamp(1.1rem, 2.4dvh, 1.5rem);
    font-size: 1.15rem;
  }

  .container-index .home-panel .my-blobby {
    grid-template-columns: 2.45rem auto 2.45rem;
    gap: clamp(1.1rem, 2.6vw, 1.8rem);
    min-height: 5.7rem;
  }

  .blobby-preview {
    min-height: 5.9rem;
  }

  .container-index .home-panel .my-blobby img#my-blobby {
    width: min(5.4rem, 100%);
    transform: translateY(-0.85rem);
  }

  .blobby-nav {
    width: 2.45rem;
    height: 2.45rem;
  }

  .home-panel .color-picker {
    margin: 0.45rem 0 0.5rem;
  }

  .home-panel .colors {
    gap: 0.45rem;
    padding: 0.18rem 0;
  }

  .color-option label {
    width: 19px;
    height: 19px;
    border-radius: 5px;
  }

  .container-index .home-login #login {
    height: 2.85rem;
    font-size: 1.05rem;
  }

  .home-actions {
    gap: 0.85rem;
    margin-top: 0;
  }

  .home-actions .btn-dashboard {
    min-height: 2.85rem;
    padding: 0.5rem 0.65rem !important;
    border-radius: 9px;
  }

  .home-actions .btn-dashboard.home-primary-action {
    min-height: 3.15rem;
    box-shadow: 0 5px 0 var(--home-cta-dark);
  }

  .home-actions .btn-dashboard h4 {
    font-size: 1.08rem;
  }

  .home-utility-nav {
    align-self: stretch;
    margin-top: auto;
    gap: 0.4rem;
    padding: 0;
  }

  .home-utility-link,
  .home-mode-toggle {
    min-height: 2.42rem;
    padding: 0.38rem 0.18rem;
    font-size: 0.78rem;
    border-radius: 8px;
  }

  .home-stage {
    min-height: 0;
    grid-template-rows: auto max-content max-content;
    align-content: start;
    gap: 0.48rem;
    padding-top: 0.1rem;
  }

  .home-stage-toolbar,
  .home-stage-frame,
  .home-feature-rail {
    width: min(100%, 820px, calc((100dvh - 225px) * 1.333333));
  }

  .theme-option {
    padding: 0.38rem 0.8rem;
    font-size: 0.9rem;
  }

  .home-feature-rail {
    margin-top: 0.25rem;
    gap: 0.42rem;
    padding: 0.4rem;
    border-radius: 12px;
  }

  .home-feature {
    min-height: 2.55rem;
    padding: 0.5rem 0.55rem;
    font-size: 0.92rem;
  }
}

@media (min-width: 861px) and (max-height: 700px) {
  .home-shell {
    grid-template-columns: minmax(250px, 315px) minmax(0, 1fr);
    gap: 0.85rem;
  }

  .home-stage-toolbar,
  .home-stage-frame,
  .home-feature-rail {
    width: min(100%, 740px, calc((100dvh - 225px) * 1.333333));
  }

  .home-feature {
    font-size: 0.84rem;
  }
}

/* Mac-width desktop pass: compact even when Retina scaling reports a taller CSS viewport. */
@media (min-width: 861px) and (max-width: 1500px) {
  body:has(.home-shell) {
    overflow: hidden;
  }

  .container-index:has(.home-shell) {
    height: 100dvh;
    min-height: 0;
    padding-top: clamp(0.45rem, 1.15dvh, 0.8rem);
    overflow: hidden;
  }

  .container-index:has(.home-shell)::before {
    /* Cover shell padding + sidebar column (390px) + half the column gap. */
    width: calc(clamp(0.75rem, 1.5vw, 1.2rem) + 390px + clamp(0.5rem, 1.1vw, 1rem));
  }

  .container-index:has(.home-shell) > .row {
    margin-bottom: clamp(0.5rem, 1.3dvh, 0.9rem) !important;
    padding: 0 clamp(0.8rem, 1.8vw, 1.35rem);
  }

  .container-index:has(.home-shell) .brand-logo {
    gap: 0.85rem;
  }

  .container-index:has(.home-shell) .home-shell {
    height: calc(100dvh - 4.8rem);
    min-height: 0;
    padding: 0.72rem clamp(0.75rem, 1.5vw, 1.2rem) 0.85rem;
    grid-template-columns: minmax(295px, 390px) minmax(0, 1fr);
    gap: clamp(1rem, 2.2vw, 2rem);
    align-items: stretch;
    overflow: hidden;
  }

  .home-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3.4dvh, 2.1rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 0.12rem;
    scrollbar-color: var(--home-control-border) transparent;
  }

  /* Cards have overflow:hidden, so their automatic minimum size is 0 and a
     fixed-height container squeezes them below their content instead of
     letting the column scroll. */
  .home-panel > * {
    flex: 0 0 auto;
  }

  .player-card {
    margin-top: 0;
    padding: clamp(1.1rem, 2.4dvh, 1.4rem) clamp(1.1rem, 2vw, 1.3rem);
    border-radius: 10px;
  }

  .player-card-header {
    margin-bottom: clamp(1.1rem, 2.4dvh, 1.5rem);
    font-size: 1.15rem;
  }

  .container-index .home-panel .my-blobby {
    grid-template-columns: 2.45rem auto 2.45rem;
    min-height: 5.7rem;
    gap: clamp(1.1rem, 2.6vw, 1.8rem);
  }

  .blobby-preview {
    min-height: 5.9rem;
  }

  .container-index .home-panel .my-blobby img#my-blobby {
    width: min(5.4rem, 100%);
    transform: translateY(-0.85rem);
  }

  .blobby-nav {
    width: 2.45rem;
    height: 2.45rem;
  }

  .home-panel .color-picker {
    margin: 0.45rem 0 0.52rem;
  }

  .home-panel .colors {
    gap: 0.45rem;
    padding: 0.18rem 0;
  }

  .color-option label {
    width: 19px;
    height: 19px;
  }

  .container-index .home-login #login {
    height: 2.9rem;
    font-size: 1.06rem;
  }

  .home-actions {
    gap: 0.85rem;
    margin-top: 0;
  }

  .home-actions .btn-dashboard {
    min-height: 2.9rem;
    padding: 0.52rem 0.65rem !important;
    border-radius: 9px;
  }

  .home-actions .btn-dashboard.home-primary-action {
    min-height: 3.18rem;
    box-shadow: 0 5px 0 var(--home-cta-dark);
  }

  .home-actions .btn-dashboard h4 {
    font-size: 1.08rem;
  }

  .home-utility-nav {
    align-self: stretch;
    margin-top: auto;
    gap: 0.4rem;
    padding: 0;
  }

  .home-utility-link,
  .home-mode-toggle {
    min-height: 2.45rem;
    padding: 0.38rem 0.18rem;
    font-size: 0.8rem;
  }

  .home-stage {
    min-height: 0;
    grid-template-rows: auto max-content max-content;
    align-content: start;
    gap: 0.52rem;
    padding-top: 0.05rem;
  }

  .home-stage-toolbar,
  .home-stage-frame,
  .home-feature-rail {
    width: min(100%, 840px, calc((100dvh - 225px) * 1.333333));
  }

  .theme-option {
    padding: 0.38rem 0.8rem;
    font-size: 0.9rem;
  }

  .home-feature-rail {
    margin-top: 0.25rem;
    gap: 0.42rem;
    padding: 0.4rem;
    border-radius: 12px;
  }

  .home-feature {
    min-height: 2.55rem;
    padding: 0.5rem 0.55rem;
    font-size: 0.92rem;
  }
}

.player-card {
  position: relative;
}

.blobby-skin-icon {
  position: absolute;
  top: 0.64rem;
  right: 0.64rem;
  z-index: 2;
  width: 2.05rem;
  height: 2.05rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--home-control-border);
  border-radius: 8px;
  color: var(--home-cta);
  background: color-mix(in srgb, var(--home-control) 72%, var(--home-cta) 10%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.blobby-skin-icon .fa-solid {
  font-size: 0.9rem;
  line-height: 1;
}

.blobby-skin-icon:hover,
.blobby-skin-icon[aria-expanded="true"] {
  color: var(--home-cta);
  border-color: color-mix(in srgb, var(--home-cta) 55%, var(--home-control-border));
  background: color-mix(in srgb, var(--home-control) 72%, var(--home-cta) 16%);
  transform: translateY(-1px);
}

.skin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.skin-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.skin-picker-modal {
  --skin-picker-top: 1rem;
  --skin-picker-left: 1rem;
  position: fixed;
  top: var(--skin-picker-top);
  left: var(--skin-picker-left);
  z-index: 1100;
  width: min(18rem, calc(100vw - 1.5rem));
  max-height: min(31rem, calc(100dvh - 1.5rem));
  overflow: auto;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--home-cta) 38%, var(--home-control-border));
  border-radius: 12px;
  color: var(--home-text);
  background: color-mix(in srgb, var(--home-panel) 96%, #ffffff 4%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateX(-0.65rem) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.skin-picker-modal.open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.skin-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
  font-family: 'Jersey 15', 'PixelArt', monospace;
}

.skin-picker-head strong {
  color: var(--home-text);
  font-size: 1.22rem;
  line-height: 1;
  font-weight: 400;
}

.skin-picker-close {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--home-control-border);
  border-radius: 8px;
  color: var(--home-muted);
  background: transparent;
  cursor: pointer;
}

.skin-picker-close:hover {
  color: var(--home-text);
  border-color: color-mix(in srgb, var(--home-cta) 44%, var(--home-control-border));
}

.skin-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.skin-choice {
  min-width: 0;
  min-height: 5.8rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.35rem 0.45rem;
  border: 1px solid var(--home-control-border);
  border-radius: 10px;
  color: var(--home-muted);
  background: var(--home-control);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.skin-choice img {
  width: 3.15rem;
  max-width: 100%;
  align-self: end;
  image-rendering: pixelated;
}

.skin-choice span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}

.skin-choice:hover,
.skin-choice.active {
  color: var(--home-text);
  border-color: var(--home-cta);
  background: color-mix(in srgb, var(--home-control) 78%, var(--home-cta) 22%);
  transform: translateY(-1px);
}

.skin-choice.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--home-cta) 45%, transparent);
}

@media (max-width: 860px) {
  .skin-modal-backdrop {
    background: rgba(0, 0, 0, 0.34);
  }

  .skin-picker-modal {
    top: auto;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-height: min(72dvh, 32rem);
    border-radius: 14px;
    transform: translateY(1rem);
  }

  .skin-picker-modal.open {
    transform: translateY(0);
  }
}

/* Player identity -----------------------------------------------------------
   Treat the pseudo like a signature instead of nesting another card inside the player card. */
.player-identity {
  width: 100%;
  margin: 0 0 clamp(0.85rem, 1.8dvh, 1.1rem);
}

.player-card:has(.player-identity) .player-card-header {
  margin-bottom: 0.48rem;
}

.player-nameplate {
  min-height: 2.65rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: center;
  padding: 0.08rem 0;
}

.player-nameplate:hover,
.player-nameplate.is-editing,
.player-nameplate:focus-within {
  outline: 0;
}

.player-nameplate .home-login.input-group {
  grid-column: 2;
  justify-self: center;
  width: auto;
  min-width: 0;
  margin: 0;
}

.container-index .player-nameplate .home-login #login {
  width: auto;
  max-width: 17ch;
  height: auto;
  min-height: 1.9rem;
  padding: 0;
  overflow: hidden;
  color: var(--home-text) !important;
  -webkit-text-fill-color: var(--home-text);
  caret-color: var(--home-cta);
  border: 0;
  border-radius: 0 !important;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.62rem, 2.25vw, 1.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.035em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.container-index .player-nameplate.has-long-name .home-login #login {
  font-size: clamp(1.35rem, 1.9vw, 1.58rem);
  letter-spacing: 0.015em;
}

.container-index .player-nameplate .home-login #login:focus {
  color: var(--home-text) !important;
  -webkit-text-fill-color: var(--home-text);
  border: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 12px color-mix(in srgb, var(--home-cta) 20%, transparent);
}

.player-name-edit {
  grid-column: 3;
  justify-self: start;
  min-height: 1.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  margin-left: 0.42rem;
  padding: 0.3rem 0.52rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--home-muted) 18%, transparent);
  border-radius: 999px;
  color: var(--home-muted);
  background: color-mix(in srgb, var(--home-control) 66%, transparent);
  opacity: 0.78;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.76rem;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}

.player-name-edit .fa-solid {
  font-size: 0.68rem;
}

.player-name-edit:hover,
.player-name-edit:focus-visible,
.player-nameplate.is-editing .player-name-edit {
  color: var(--home-cta);
  border-color: color-mix(in srgb, var(--home-cta) 26%, transparent);
  background: color-mix(in srgb, var(--home-cta) 9%, transparent);
  opacity: 1;
  outline: 0;
}

.player-name-edit:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--home-cta) 22%, transparent);
}

.player-name-edit:active {
  transform: translateY(1px);
}

/* --- "Tes stats" : carte jumelle de .player-card, posée juste sous elle --- */
.player-stats {
  padding: clamp(1.05rem, 2.2dvh, 1.35rem) clamp(1.2rem, 2.3vw, 1.45rem) clamp(0.85rem, 1.8dvh, 1.1rem);
  border-radius: 12px;
  background: color-mix(in srgb, var(--home-panel) 96%, #ffffff 4%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.player-stats-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: 100%;
  margin: clamp(0.7rem, 1.5dvh, 0.95rem) 0 0;
  padding: clamp(0.55rem, 1.3dvh, 0.72rem) 0.3rem 0.05rem;
  color: color-mix(in srgb, var(--home-text) 60%, var(--home-muted));
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--home-control-border) 52%, transparent);
  border-radius: 0;
  background: transparent;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.14s ease;
}

.player-stats-more .fa-solid {
  color: currentColor !important;
  font-size: 0.8rem;
  transition: transform 0.14s ease;
}

.player-stats-more:hover,
.player-stats-more:focus-visible {
  color: var(--home-cta);
}

.player-stats-more:hover .fa-solid,
.player-stats-more:focus-visible .fa-solid {
  transform: translateX(2px);
}

.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.player-stat {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.26rem;
  padding: 0.72rem 0.5rem 0.62rem;
  border-radius: 10px;
  background: var(--home-control);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--home-control-border) 58%, transparent);
}

.player-stat-label {
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.player-stat-value {
  max-width: 100%;
  overflow: hidden;
  color: var(--home-text);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.82rem;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
}

.player-stat--elo .player-stat-value {
  color: var(--home-cta);
  text-shadow: 0 0 12px color-mix(in srgb, var(--home-cta) 16%, transparent);
}

.player-stat-unit {
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-ui-mode="light"]:has(.home-shell) .player-stat--elo .player-stat-value {
  color: var(--home-cta-dark);
  text-shadow: none;
}

body[data-ui-mode="light"]:has(.home-shell) .player-stats-more:hover,
body[data-ui-mode="light"]:has(.home-shell) .player-stats-more:focus-visible {
  color: var(--home-cta-dark);
}

body[data-ui-mode="light"]:has(.home-shell) .container-index .player-nameplate .home-login #login {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

@media (max-width: 860px) {
  .player-nameplate {
    min-height: 2.9rem;
  }

  .player-name-edit {
    min-height: 2rem;
    opacity: 0.82;
  }
}

@media (max-width: 480px) {
  .player-name-edit {
    width: 2rem;
    min-height: 2rem;
    margin-left: 0.3rem;
    padding: 0;
  }

  .player-name-edit-copy {
    display: none;
  }
}

@media (min-width: 861px) and (max-height: 820px),
       (min-width: 861px) and (max-width: 1500px) {
  .player-identity {
    margin-bottom: 0.7rem;
  }

  .player-nameplate {
    min-height: 2.45rem;
    padding-block: 0.08rem;
  }

  .container-index .player-nameplate .home-login #login {
    min-height: 1.55rem;
    font-size: 1.48rem;
  }

  .container-index .player-nameplate.has-long-name .home-login #login {
    font-size: 1.25rem;
  }

  .player-name-edit {
    min-height: 1.72rem;
    padding-block: 0.27rem 0.25rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .player-name-edit,
  .player-stats-more,
  .player-stats-more .fa-solid {
    transition: none;
  }
}

/* Hover stays quiet; only the selected color receives the gold game accent. */
.home-panel-main .player-customization .color-option label:hover {
  transform: translateY(-2px);
  filter: brightness(1.12) saturate(1.04);
  box-shadow: none;
}

.home-panel-main .player-customization .color-option label.active,
.home-panel-main .player-customization .color-option label.active:hover {
  border: 2px solid var(--home-bg);
  transform: none;
  filter: none;
  box-shadow:
    0 0 0 2px var(--home-cta),
    0 2px 6px rgba(0, 0, 0, 0.28);
}

.home-panel-main .player-customization .color-option label.active::after {
  content: none;
}

/* Player showcase ----------------------------------------------------------
   One calm hierarchy: identity, character, then customization. */
.home-panel-main .player-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0.95rem, 2.1dvh, 1.2rem) clamp(0.95rem, 1.8vw, 1.2rem) clamp(0.8rem, 1.7dvh, 1rem);
  border: 1px solid color-mix(in srgb, var(--home-control-border) 72%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--home-cta) 6%, transparent), transparent 37%),
    color-mix(in srgb, var(--home-panel) 97%, #ffffff 3%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

.home-panel-main .player-identity {
  margin: 0 0 clamp(0.55rem, 1.2dvh, 0.72rem);
}

.home-panel-main .player-nameplate {
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0;
}

.home-panel-main .player-nameplate .home-login.input-group {
  width: auto;
  min-width: 0;
  margin: 0;
}

.container-index .home-panel-main .player-nameplate .home-login #login {
  min-height: 2.4rem;
  font-size: clamp(2.25rem, 3.6vw, 2.78rem);
  letter-spacing: 0.01em;
  color: var(--home-text) !important;
  -webkit-text-fill-color: var(--home-text);
  text-shadow: 2.5px 2.5px 0 rgba(9, 8, 15, 0.82);
}

.container-index .home-panel-main .player-nameplate.has-long-name .home-login #login {
  font-size: clamp(1.68rem, 2.6vw, 2.02rem);
}

.home-panel-main .player-name-edit {
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--home-control-border) 70%, var(--home-soft-text) 12%);
  border-radius: 9px;
  color: var(--home-soft-text);
  background: var(--home-control);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 3px 0 rgba(0, 0, 0, 0.45);
  opacity: 1;
  transition: transform 0.1s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.home-panel-main .player-name-edit .fa-solid {
  color: inherit;
  font-size: 0.98rem;
}

.home-panel-main .player-name-edit-copy {
  display: none;
}

.home-panel-main .player-name-edit:hover,
.home-panel-main .player-name-edit:focus-visible,
.home-panel-main .player-nameplate.is-editing .player-name-edit {
  color: var(--home-cta);
  border-color: color-mix(in srgb, var(--home-cta) 55%, var(--home-control-border));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 0 rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.home-panel-main .player-name-edit:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.container-index .home-panel .home-panel-main .my-blobby {
  grid-template-columns: 2.2rem minmax(5rem, 6.2rem) 2.2rem;
  min-height: 5.85rem;
  gap: clamp(0.8rem, 2.2vw, 1.3rem);
}

.home-panel-main .blobby-preview {
  min-height: 5.85rem;
}

.home-panel-main .blobby-preview::before {
  content: "";
  width: 5rem;
  height: 0.9rem;
  bottom: 0.05rem;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22), transparent 72%);
  opacity: 0.62;
}

.container-index .home-panel .home-panel-main .my-blobby img#my-blobby {
  width: min(5.55rem, 100%);
  transform: translateY(-0.42rem);
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.14));
}

.home-panel-main .blobby-nav {
  width: 2.2rem;
  height: 2.2rem;
  border-color: transparent;
  border-radius: 50%;
  background: color-mix(in srgb, var(--home-control) 48%, transparent);
  opacity: 0.72;
}

.home-panel-main .blobby-nav:hover,
.home-panel-main .blobby-nav:focus-visible {
  border-color: color-mix(in srgb, var(--home-cta) 30%, transparent);
  background: color-mix(in srgb, var(--home-control) 76%, var(--home-cta) 6%);
  opacity: 1;
}

.player-customization {
  min-height: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  margin-top: 0.72rem;
}

.home-panel .home-panel-main .player-customization .color-picker {
  margin: 0;
}

.home-panel .home-panel-main .player-customization .colors {
  gap: 0.48rem;
  padding: 0.22rem 0.25rem 0.25rem;
  overflow: visible;
}

.home-panel-main .player-customization .color-option label {
  position: relative;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.home-panel-main .blobby-skin-icon {
  position: static;
  width: auto;
  height: auto;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  border: 2px solid color-mix(in srgb, var(--home-control-border) 70%, var(--home-soft-text) 12%);
  border-radius: 999px;
  color: var(--home-soft-text);
  background: var(--home-control);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 3px 0 rgba(0, 0, 0, 0.45);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 1;
  transition: transform 0.1s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.home-panel-main .blobby-skin-icon .fa-solid {
  color: var(--home-cta);
  font-size: 0.82rem;
}

.home-panel-main .blobby-skin-icon:hover,
.home-panel-main .blobby-skin-icon:focus-visible,
.home-panel-main .blobby-skin-icon[aria-expanded="true"] {
  color: var(--home-text);
  border-color: color-mix(in srgb, var(--home-cta) 55%, var(--home-control-border));
  opacity: 1;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 0 rgba(0, 0, 0, 0.5);
}

.home-panel-main .blobby-skin-icon:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .blobby-skin-icon .fa-solid {
  color: var(--home-cta-dark);
}

body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .blobby-skin-icon {
  border-color: color-mix(in srgb, var(--home-control-border) 84%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 3px 0 rgba(150, 130, 96, 0.3);
}

body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .blobby-skin-icon:hover,
body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .blobby-skin-icon:focus-visible,
body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .blobby-skin-icon[aria-expanded="true"] {
  color: var(--home-cta-dark);
  border-color: color-mix(in srgb, var(--home-cta-dark) 45%, var(--home-control-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 0 rgba(150, 130, 96, 0.34);
}

body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .blobby-skin-icon:active {
  box-shadow: 0 1px 0 rgba(150, 130, 96, 0.3);
}

body[data-ui-mode="light"]:has(.home-shell) .container-index .home-panel-main .player-nameplate .home-login #login {
  color: var(--home-text) !important;
  -webkit-text-fill-color: var(--home-text);
  text-shadow: 2px 2px 0 rgba(120, 105, 80, 0.22);
}

body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .player-name-edit {
  border-color: color-mix(in srgb, var(--home-control-border) 84%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 3px 0 rgba(150, 130, 96, 0.3);
}

body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .player-name-edit:hover,
body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .player-name-edit:focus-visible,
body[data-ui-mode="light"]:has(.home-shell) .home-panel-main .player-nameplate.is-editing .player-name-edit {
  color: var(--home-cta-dark);
  border-color: color-mix(in srgb, var(--home-cta-dark) 45%, var(--home-control-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 0 rgba(150, 130, 96, 0.34);
}

@media (max-width: 480px) {
  .home-panel-main .player-name-edit {
    width: 1.85rem;
    height: 1.85rem;
  }
}

/* The wrapper is structural only: retain the sidebar's original natural flow
   so the legal footer remains the final element at the bottom of the page. */
.home-panel-main {
  display: contents;
}

@media (min-width: 861px) and (max-height: 820px),
       (min-width: 861px) and (max-width: 1500px) {
  .home-panel {
    gap: clamp(0.95rem, 2.2dvh, 1.35rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.12rem;
  }

  .home-panel-main .player-card {
    padding: 0.78rem 1rem 0.62rem;
  }

  .home-panel-main .player-identity {
    margin-bottom: 0.38rem;
  }

  .container-index .home-panel .home-panel-main .my-blobby {
    min-height: 4.55rem;
  }

  .home-panel-main .blobby-preview {
    min-height: 4.7rem;
  }

  .container-index .home-panel .home-panel-main .my-blobby img#my-blobby {
    width: min(4.75rem, 100%);
    transform: translateY(-0.62rem);
  }

  .home-panel .home-panel-main .color-picker {
    margin: 0.16rem 0 0.08rem;
  }

  .home-panel-main .home-actions {
    gap: 0.55rem;
  }

  .home-panel-main .home-actions .btn-dashboard {
    min-height: 2.62rem;
    padding-block: 0.4rem !important;
  }

  .home-panel-main .home-actions .btn-dashboard.home-primary-action {
    min-height: 2.88rem;
  }

  .player-stats {
    padding: 0.6rem 0.85rem 0.55rem;
  }

  .player-stat {
    gap: 0.16rem;
    padding: 0.48rem 0.4rem 0.42rem;
  }

  .player-stat-value {
    font-size: 1.34rem;
  }

  .player-stats-more {
    margin-top: 0.5rem;
    padding: 0.42rem 0.3rem 0.02rem;
    font-size: 0.78rem;
  }
}