@font-face {
      font-family: "Dark Fantasy";
      src: url("fonts/darkfantaisy.otf") format("opentype");
      font-display: swap;
      font-style: normal;
      font-weight: 400;
    }

    :root {
      --ink: #e5e5e3;
      --muted: #85898d;
      --paper: #090a0c;
      --panel: #141619;
      --red: #8f252d;
      --red-bright: #c23d45;
      --line: rgba(190, 190, 194, 0.18);
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Segoe UI", Tahoma, sans-serif;
    }

    .page {
      position: relative;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      overflow: hidden;
      background-color: var(--paper);
      background-image:
        linear-gradient(rgba(190, 190, 194, 0.035) 1px, transparent 1px),
        linear-gradient(90deg,
          rgba(190, 190, 194, 0.035) 1px,
          transparent 1px),
        radial-gradient(circle at 50% 45%,
          rgba(105, 25, 31, 0.22),
          transparent 42%);
      background-size:
        44px 44px,
        44px 44px,
        auto;
    }

    .page::before,
    .page::after {
      position: absolute;
      width: 260px;
      height: 360px;
      border: 1px solid rgba(194, 61, 69, 0.2);
      border-radius: 3px;
      content: "";
      pointer-events: none;
    }

    .page::before {
      top: 13%;
      left: -150px;
      transform: rotate(-18deg);
      background: url("img/dragon.jpg") center / cover;
      filter: grayscale(1) contrast(1.25) brightness(0.55);
      opacity: 0.2;
    }

    .page::after {
      right: -145px;
      bottom: 10%;
      transform: rotate(17deg);
      background: url("img/robot.jpg") center / cover;
      filter: grayscale(1) contrast(1.3) brightness(0.5);
      opacity: 0.16;
    }

    header,
    main,
    footer {
      position: relative;
      z-index: 1;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
      padding: 28px 0;
      border-bottom: 1px solid var(--line);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: inherit;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-decoration: none;
      text-transform: uppercase;
    }

    .brand-mark {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      color: var(--paper);
      background: var(--red);
      border-radius: 2px;
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: 1.45rem;
      transform: rotate(-4deg);
    }

    .edition {
      color: var(--muted);
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    main {
      display: grid;
      flex: 1;
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
      place-items: center;
      padding: 32px 0 80px;
    }

    .screen {
      display: none;
      width: min(820px, 100%);
      animation: reveal 500ms ease both;
    }

    .screen.active {
      display: block;
    }

    .welcome {
      text-align: center;
    }

    .website-title {
      display: block;
      width: min(960px, 100%);
      max-height: 48vh;
      margin: 0 auto 34px;
      object-fit: contain;
      filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 20px;
      color: var(--red-bright);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .eyebrow::before,
    .eyebrow::after {
      width: 28px;
      height: 1px;
      background: currentColor;
      content: "";
    }

    h1,
    h2 {
      margin: 0;
      font-family: "Dark Fantasy", Georgia, serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 0.9;
      text-transform: uppercase;
    }

    h1 {
      max-width: 800px;
      margin: 0 auto 40px;
      font-size: clamp(4rem, 12vw, 9.5rem);
      text-shadow: 0 0 28px rgba(194, 61, 69, 0.16);
    }

    h1 span {
      color: var(--red-bright);
    }

    .welcome h1 {
      display: none;
    }

    .start-button {
      border: 0;
      cursor: pointer;
      font: inherit;
      transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
    }

    .start-button {
      padding: 19px 30px;
      color: #f1eeee;
      background: var(--red);
      border-radius: 2px;
      box-shadow: 6px 6px 0 #4c171c;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    .start-button:hover {
      transform: translateY(-3px);
      background: var(--red-bright);
      box-shadow: 6px 9px 0 #4c171c;
    }

    .lobby-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 34px;
    }

    h2 {
      font-size: clamp(3.5rem, 8vw, 6.8rem);
    }

    .lobby-note {
      max-width: 220px;
      margin: 0 0 4px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.55;
    }

    .choices {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 20px;
    }

    .choice-icon {
      display: grid;
      width: 48px;
      height: 48px;
      margin-bottom: 34px;
      place-items: center;
      background: #6f7378;
      border-radius: 2px;
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: 1.7rem;
    }

    .choices button{
      border-radius:3px;
      background: black;
      color: white;
      padding: 10px;
    }

    .choices button:hover{
      background:#302b25;      
    }

    .choice-title {
      display: block;
      margin-bottom: 7px;
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: 2.5rem;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .choice-description {
      color: var(--muted);
      font-size: 0.88rem;
    }

    .setup,
    .game-screen {
      width: min(1100px, 100%);
    }

    .game-screen {
      --game-card-width: clamp(165px, 19vw, 225px);
      align-self: start;
      margin-top: -58px;
    }

    .setup-panel,
    .game-panel {
      padding: 28px;
      background: rgba(20, 22, 25, 0.94);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .game-screen .game-panel {
      position: relative;
      padding: 10px 16px 14px;
    }

    .setup-form {
      display: grid;
      gap: 14px;
      max-width: 520px;
      margin: 28px auto 0;
    }

    .setup-form label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .setup-form input {
      width: 100%;
      padding: 14px;
      color: var(--ink);
      background: #090a0c;
      border: 1px solid var(--line);
      border-radius: 2px;
      font: inherit;
    }

    .form-actions {
      display: flex;
      gap: 12px;
      margin-top: 8px;
    }

    .form-actions button {
      flex: 1;
    }

    .form-actions button:not(.start-button) {
      padding: 14px;
      border: 1px solid var(--line);
      color: var(--ink);
      background: #24272b;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
    }

    .form-error {
      min-height: 20px;
      color: #f07b80;
      font-size: 0.86rem;
    }

    .game-top {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 30px;
      margin-bottom: 6px;
    }

    .game-top h2 {
      display: none;
    }

    .game-meta {
      color: var(--muted);
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-align: left;
      text-transform: uppercase;
    }

    .code {
      display: inline;
      margin-left: 4px;
      color: var(--red-bright);
      font-size: 1rem;
      letter-spacing: 0.18em;
    }

    .scoreboard {
      position: absolute;
      top: 10px;
      right: 16px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      width: 230px;
      gap: 10px;
      margin: 0;
      padding: 4px 8px;
      background: #0b0c0e;
      border-block: 1px solid var(--line);
      text-align: center;
    }

    .scoreboard strong {
      display: block;
      color: var(--red-bright);
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: 1.8rem;
      font-weight: 400;
      line-height: 1;
    }

    .scoreboard span {
      color: var(--muted);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .vs {
      color: var(--muted);
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: 1.35rem;
    }

    .status {
      min-height: 16px;
      margin: 0 0 6px;
      color: var(--muted);
      font-size: 0.7rem;
      text-align: center;
    }

    .game-table {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--game-card-width);
      gap: 10px;
      margin: 4px 0 6px;
      padding: 6px;
      background: #090a0c;
      border: 1px solid var(--line);
    }

    .battlefield {
      display: grid;
      grid-template-columns: repeat(2, var(--game-card-width));
      justify-content: center;
      gap: clamp(8px, 2vw, 24px);
      min-height: calc(var(--game-card-width) * 1.5 + 16px);
      padding: 4px 0;
      place-items: center;
      background: radial-gradient(circle,
          rgba(105, 25, 31, 0.2),
          transparent 68%);
    }

    .battle-slot {
      display: grid;
      width: var(--game-card-width);
      aspect-ratio: 2 / 3;
      place-items: center;
      border: 1px dashed rgba(190, 190, 194, 0.22);
      color: var(--muted);
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-align: center;
      text-transform: uppercase;
    }

    .battle-slot .card {
      width: 100%;
      height: 100%;
      cursor: default;
    }

    .battle-slot .card:hover {
      transform: none;
    }

    .battle-label {
      display: none;
    }

    .reserve-pile {
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-align: center;
      text-transform: uppercase;
    }

    .reserve-pile img {
      display: block;
      width: var(--game-card-width);
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border: 1px solid var(--line);
      box-shadow:
        8px 8px 0 rgba(90, 90, 90, 0.16),
        5px 5px 0 rgba(90, 90, 90, 0.12);
    }

    .hand-heading {
      margin-top: 4px;
    }

    .cards-label {
      display: none;
    }

    .card-options {
      display: grid;
      grid-template-columns: repeat(3, var(--game-card-width));
      justify-content: center;
      gap: clamp(10px, 4vw, 28px);
    }

    .card-options .card {
      width: var(--game-card-width);
      max-width: var(--game-card-width);
      margin: 0;
    }

    .game-bottom {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 250px;
      gap: 16px;
      align-items: center;
    }

    .hand-area .cards-label {
      display: none;
    }

    .controls-area .attribute {
      min-width: 0;
      padding: 7px 4px;
    }

    .controls-area .attribute:last-child {
      grid-column: 1 / -1;
    }

    .controls-area .play-actions {
      justify-content: stretch;
    }

    .card {
      position: relative;
      container-type: inline-size;
      aspect-ratio: 2 / 3;
      padding: 0;
      overflow: hidden;
      color: var(--ink);
      background: #090a0c;
      border: 2px solid transparent;
      cursor: pointer;
      text-align: left;
    }

    .card.selected {
      border-color: var(--red-bright);
      box-shadow: 0 0 0 3px rgba(194, 61, 69, 0.2);
    }

    .card-dealing {
      animation: card-deal 660ms cubic-bezier(0.18, 0.78, 0.28, 1) both;
      animation-delay: var(--deal-delay, 0ms);
    }

    .card-leaving {
      opacity: 0.16;
      transition: opacity 180ms ease;
    }

    .card-flight {
      position: fixed !important;
      z-index: 30;
      margin: 0;
      pointer-events: none;
      will-change: transform, opacity;
    }

    .combatant {
      position: relative;
      z-index: 1;
      will-change: transform, filter, opacity;
    }

    .combat-you {
      animation: card-clash-you 520ms cubic-bezier(0.25, 0.75, 0.3, 1) both;
    }

    .combat-opponent {
      animation: card-clash-opponent 520ms cubic-bezier(0.25, 0.75, 0.3, 1) both;
    }

    .combat-winner {
      z-index: 2;
      animation: card-victory 1100ms ease-out both;
      box-shadow: 0 0 22px 5px rgba(255, 196, 84, 0.65);
      filter: brightness(1.18) saturate(1.25);
    }

    .combat-loser {
      animation: card-burn 900ms ease-out both;
      filter: grayscale(0.8) sepia(0.65) saturate(1.6) brightness(0.48);
      opacity: 0.48;
    }

    .combat-loser::after {
      position: absolute;
      z-index: 3;
      inset: 0;
      background:
        radial-gradient(circle at 50% 94%, rgba(255, 178, 40, 0.88), transparent 28%),
        linear-gradient(to top, rgba(188, 31, 12, 0.62), transparent 47%);
      content: "";
      mix-blend-mode: screen;
      pointer-events: none;
      animation: burning-embers 900ms ease-out both;
    }

    .combat-draw {
      animation: card-draw 700ms ease-out both;
    }

    @keyframes card-deal {
      from {
        opacity: 0;
        transform: translate(72%, -115%) rotate(11deg) scale(0.68);
      }

      72% {
        opacity: 1;
        transform: translate(-2%, 2%) rotate(-1deg) scale(1.02);
      }

      to {
        opacity: 1;
        transform: translate(0) rotate(0) scale(1);
      }
    }

    @keyframes card-clash-you {
      from {
        transform: translateX(-24%) rotate(-5deg) scale(0.94);
      }

      68% {
        transform: translateX(8%) rotate(3deg) scale(1.04);
      }

      to {
        transform: translateX(0) rotate(0) scale(1);
      }
    }

    @keyframes card-clash-opponent {
      from {
        transform: translateX(24%) rotate(5deg) scale(0.94);
      }

      68% {
        transform: translateX(-8%) rotate(-3deg) scale(1.04);
      }

      to {
        transform: translateX(0) rotate(0) scale(1);
      }
    }

    @keyframes card-victory {
      0% {
        filter: brightness(1) saturate(1);
      }

      38% {
        filter: brightness(1.55) saturate(1.55);
      }

      to {
        filter: brightness(1.18) saturate(1.25);
      }
    }

    @keyframes card-burn {
      from {
        opacity: 1;
        filter: brightness(1) saturate(1);
      }

      to {
        opacity: 0.48;
        filter: grayscale(0.8) sepia(0.65) saturate(1.6) brightness(0.48);
      }
    }

    @keyframes burning-embers {
      from {
        opacity: 0;
        transform: translateY(18%);
      }

      45% {
        opacity: 0.9;
      }

      to {
        opacity: 0.25;
        transform: translateY(-8%);
      }
    }

    @keyframes card-draw {
      0%,
      100% {
        filter: brightness(1);
      }

      45% {
        filter: brightness(1.28);
      }
    }

    .card::before {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: url("img/cardfront.png") center / 100% 100% no-repeat;
      content: "";
    }

    .card-character {
      position: absolute;
      z-index: 1;
      top: 12.5%;
      left: 14%;
      width: 72%;
      height: 45.5%;
      border-radius: 8px;
      object-fit: cover;
      filter: saturate(0.85) contrast(1.08);
    }

    .card-info {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
      padding: 7% 12% 0;
      pointer-events: none;
    }

    .card-name {
      display: block;
      overflow: hidden;
      color: #181719;
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: clamp(0.55rem, 6cqw, 1.1rem);
      line-height: 1;
      text-align: center;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .card-description {
      position: absolute;
      top: 62%;
      right: 11%;
      left: 11%;
      display: -webkit-box;
      height: 16%;
      overflow: hidden;
      color: #302b25;
      font-family: Georgia, serif;
      font-size: clamp(0.42rem, 3.6cqw, 0.72rem);
      line-height: 1.2;
      text-align: center;
      box-orient: vertical;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .card-values {
      position: absolute;
      right: 2%;
      bottom: 7.8%;
      left: 2%;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      align-items: center;
      height: 9%;
      color: #181719;
      font-size: 0;
      line-height: 1;
      text-align: center;
    }

    .card-values span {
      display: grid;
      width: 100%;
      height: 100%;
      place-items: center;
      text-align: center;
    }

    .card-values b {
      display: block;
      color: #181719;
      font-size: clamp(0.45rem, 4.5cqw, 0.8rem);
      font-weight: bold;
      line-height: 1;
    }

    .opponent-deck {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .reserve-pile span {
      display: none;
    }

    .opponent-deck img {
      width: 34px;
      height: 51px;
      object-fit: cover;
      border: 1px solid var(--line);
    }

    .attributes {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 18px 0;
    }

    .attribute {
      flex: 1;
      display: grid;
      align-items: center;
      justify-content: center;
      grid-template-columns: 30px 80px;
      gap: 10px;
      padding: 11px 8px;
      color: var(--muted);
      background: #0b0c0e;
      border: 1px solid var(--line);
      cursor: pointer;
      font: inherit;
      font-size: 0.75rem;
      font-weight: 700;
    }

    .attribute.selected {
      color: #fff;
      background: var(--red);
      border-color: var(--red-bright);
    }

    .game-screen .attributes {
      margin: 8px 0;
    }

    .game-screen .attribute {
      padding: 8px 6px;
    }

    #attribute-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0 0 8px;
      width: 100%;
    }

    #attribute-buttons[hidden] {
      display: none;
    }

    #attribute-buttons img{
      width: 30px;
    }

    .attribute-label {
      text-align: left;
      transform: translateY(-1px);
    }

    .play-actions {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .play-actions #play-button:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }

    .play-actions .start-button{
      padding: 10px;
      font-size: 0.8rem;
      width: 50%;
    }

    .round-result {
      position: fixed;
      z-index: 20;
      top: 50%;
      left: 50%;
      width: min(430px, calc(100% - 32px));
      margin: 0;
      padding: 18px 22px;
      color: var(--muted);
      background: rgba(11, 12, 14, 0.97);
      border: 1px solid var(--red-bright);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
      font-size: 0.86rem;
      text-align: center;
      transform: translate(-50%, -50%);
      animation: result-pop 180ms ease both;
    }

    .round-result strong {
      color: var(--ink);
    }

    .game-over-panel[hidden] {
      display: none;
    }

    .game-over-panel {
      position: fixed;
      z-index: 25;
      top: 50%;
      left: 50%;
      width: min(390px, calc(100% - 32px));
      padding: 30px;
      color: var(--ink);
      background: rgba(11, 12, 14, 0.98);
      border: 1px solid var(--red-bright);
      box-shadow: 0 24px 75px rgba(0, 0, 0, 0.78);
      text-align: center;
      transform: translate(-50%, -50%);
      animation: result-pop 220ms ease both;
    }

    .game-over-panel h3 {
      margin: 0 0 12px;
      color: var(--red-bright);
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: clamp(2.3rem, 6vw, 4rem);
      font-weight: 400;
      line-height: 0.9;
      text-transform: uppercase;
    }

    .game-over-panel p {
      margin: 0 0 24px;
      color: var(--muted);
      line-height: 1.5;
    }

    @keyframes result-pop {
      from {
        opacity: 0;
        transform: translate(-50%, -44%);
      }

      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    .collection-screen {
      width: min(1120px, 100%);
    }

    .collection-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 26px;
    }

    .collection-heading h2 {
      font-size: clamp(3rem, 8vw, 6rem);
    }

    .collection-note {
      max-width: 280px;
      margin: 0 0 4px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.55;
    }

    .collection-layout {
      display: block;
    }

    .collection-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .collection-grid .card {
      width: 100%;
    }

    .card-modal[hidden] {
      display: none;
    }

    .card-modal {
      position: fixed;
      z-index: 10;
      inset: 0;
      display: grid;
      overflow-y: auto;
      padding: 28px 16px;
      place-items: center;
      background: rgba(0, 0, 0, 0.78);
      animation: reveal 180ms ease both;
    }

    .card-modal-content {
      position: relative;
      width: min(760px, 100%);
      padding: 30px 38px 28px;
      background: #141619;
      border: 1px solid var(--line);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
    }

    .card-modal-close {
      position: absolute;
      top: 10px;
      right: 14px;
      width: 36px;
      height: 36px;
      color: var(--ink);
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 1.8rem;
      line-height: 1;
    }

    .card-modal-close:hover {
      color: var(--red-bright);
    }

    .detail-card-preview .card {
      display: block;
      width: min(500px, 78vw);
      margin: 0 auto 20px;
      cursor: default;
    }

    .detail-card-preview .card:hover {
      transform: none;
    }

    .detail-card-preview .card-description {
      font-size: clamp(0.55rem, 3.4cqw, 1rem);
    }

    .detail-card-preview .card-values b {
      font-size: clamp(0.62rem, 3.4cqw, 0.82rem);
    }

    .card-modal h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: "Dark Fantasy", Georgia, serif;
      font-size: 2rem;
      font-weight: 400;
      text-align: center;
      text-transform: uppercase;
    }

    .detail-description {
      min-height: 66px;
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.55;
      text-align: center;
    }

    .detail-attributes {
      display: grid;
      gap: 8px;
    }

    .detail-attribute {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 0.75rem;
      text-transform: uppercase;
    }

    .detail-attribute strong {
      color: var(--ink);
      text-align: right;
    }

    .detail-bar {
      height: 4px;
      margin-top: 3px;
      background: #292c30;
      grid-column: 1 / -1;
    }

    .detail-bar span {
      display: block;
      height: 100%;
      background: var(--red-bright);
    }

    .collection-empty {
      grid-column: 1 / -1;
      color: var(--muted);
      text-align: center;
    }

    footer {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
      padding: 20px 0 26px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-align: center;
    }

    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

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

    @media (max-width: 600px) {

      header,
      main,
      footer {
        width: min(100% - 32px, 1180px);
      }

      header {
        padding: 20px 0;
      }

      .edition {
        display: none;
      }

      main {
        padding: 44px 0 58px;
      }

      .lobby-heading {
        display: block;
      }

      .lobby-note {
        margin-top: 16px;
      }

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

      .choice-icon {
        margin-bottom: 22px;
      }

      .setup-panel,
      .game-panel {
        padding: 18px;
      }

      .game-top {
        display: block;
      }

      .game-screen {
        --game-card-width: clamp(96px, 27vw, 132px);
        margin-top: -20px;
      }

      .game-screen .game-panel {
        padding: 12px;
      }

      .game-bottom {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .game-meta {
        margin-top: 12px;
        text-align: left;
      }

      .card-options {
        gap: 7px;
      }

      .game-table {
        grid-template-columns: minmax(0, 1fr) var(--game-card-width);
        gap: 8px;
        padding: 8px;
      }

      .battlefield {
        min-height: calc(var(--game-card-width) * 1.5 + 20px);
        grid-template-columns: repeat(2, var(--game-card-width));
        gap: 6px;
      }

      .reserve-pile {
        grid-auto-flow: column;
        justify-content: center;
      }

      .reserve-pile img {
        width: var(--game-card-width);
      }

      .card-info {
        padding: 7px;
      }

      .card-values {
        font-size: 0.5rem;
      }

      .website-title {
        max-height: 42vh;
        margin-bottom: 24px;
      }

      .attribute {
        flex-basis: calc(50% - 6px);
      }

      .collection-heading {
        display: block;
      }

      .collection-note {
        margin-top: 14px;
      }

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

      .card-modal-content {
        padding: 34px 18px 22px;
      }
    }

    /* Conserve les dimensions actuelles jusqu'au Full HD et exploite les écrans 1440p/4K. */
    @media (min-width: 2200px) {
      header,
      main,
      footer {
        width: min(78vw, 1800px);
      }

      .screen {
        width: min(72vw, 1250px);
      }

      .website-title {
        width: min(72vw, 1500px);
        max-height: 56vh;
      }

      .setup,
      .game-screen {
        width: min(75vw, 1700px);
      }

      .game-screen {
        --game-card-width: clamp(225px, 14vw, 340px);
      }

      .collection-screen {
        width: min(76vw, 1750px);
      }
    }