:root {
      color-scheme: light;
    }

    body {
      font-family: Georgia, "Times New Roman", serif;
      background-color: #88775c;
      background-image:
        linear-gradient(rgba(48, 40, 30, .66), rgba(48, 40, 30, .72)),
        url("./old-station-background.webp");
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
    }

    button,
    input,
    select {
      font-family: "Rockwell", "Roboto Slab", Georgia, serif;
    }

    main>section {
      position: relative;
      isolation: isolate;
      background-color: rgba(239, 227, 202, .94) !important;
      background-image:
        linear-gradient(rgba(239, 227, 202, .18), rgba(225, 207, 172, .15)),
        url("./aged-paper-texture.webp");
      background-position: center top;
      background-size: cover;
      border-color: rgba(226, 207, 168, .7) !important;
      box-shadow: 0 28px 70px rgba(24, 17, 12, .52), inset 0 0 42px rgba(105, 77, 42, .08);
    }

    main>section::after {
      content: "";
      position: absolute;
      z-index: 20;
      inset: 0;
      pointer-events: none;
      opacity: .22;
      mix-blend-mode: multiply;
      background:
        linear-gradient(90deg, rgba(80, 45, 18, .22), transparent 3%, transparent 96%, rgba(80, 45, 18, .18)),
        linear-gradient(rgba(80, 45, 18, .16), transparent 4%, transparent 96%, rgba(80, 45, 18, .18));
      box-shadow: inset 0 0 34px rgba(68, 39, 17, .18);
    }

    #shellHeader {
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .035) 50%, transparent 50%) 0 0 / 6px 6px,
        linear-gradient(180deg, #4e594c 0%, #343d35 100%) !important;
      border-bottom: 4px double #bda87d;
    }

    #headerTitle,
    h2,
    h3 {
      font-family: "Rockwell Extra Bold", "Roboto Slab", Georgia, serif;
      text-transform: uppercase;
      letter-spacing: .025em !important;
    }

    #headerTitle {
      color: #f2e4c4;
      text-shadow: 0 2px 0 #1f261f, 0 4px 12px rgba(0, 0, 0, .35);
    }

    article:not(#joinCard) {
      background-color: rgba(247, 238, 218, .92);
      background-image:
        linear-gradient(rgba(250, 242, 224, .22), rgba(225, 207, 171, .12)),
        url("./aged-paper-texture.webp");
      background-position: center;
      background-size: cover;
      box-shadow:
        0 12px 26px rgba(57, 42, 27, .16),
        inset 0 0 24px rgba(103, 68, 31, .09);
    }

    input,
    select {
      border-radius: .35rem !important;
      background-color: rgba(255, 250, 235, .92) !important;
      border-color: #b7a078 !important;
      box-shadow: inset 0 1px 5px rgba(76, 55, 33, .09);
    }

    select {
      color: #33251b !important;
      color-scheme: light;
      appearance: none;
      -webkit-appearance: none;
      padding-right: 2.25rem !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2333251b' d='M3.2 5.7 8 10.5l4.8-4.8 1.1 1.1L8 12.7 2.1 6.8z'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right .7rem center !important;
      background-size: 1rem 1rem !important;
    }

    select option {
      color: #33251b;
      background-color: #fffaf0;
    }

    button {
      border-radius: .35rem !important;
      letter-spacing: .025em;
    }

    #joinCard {
      position: relative;
      isolation: isolate;
      overflow: visible;
      padding: 1.35rem 1.25rem 1.5rem;
      border: 2px solid #9d8c68;
      border-radius: 0px;
      color: #e9dfc7;
      background:
        linear-gradient(rgba(27, 31, 26, .05), rgba(15, 19, 16, .18)),
        url("./ticket-join-texture.webp") center / cover;
      box-shadow: 0 12px 25px rgba(55, 39, 24, .25), inset 0 0 0 4px rgba(230, 217, 184, .07);
    }

    #joinCard::before,
    #joinCard::after {
      content: "";
      position: absolute;
      z-index: 2;
      top: 14px;
      bottom: 14px;
      width: 14px;
      background: radial-gradient(circle, #d8cab1 0 4px, transparent 4.5px) center top / 15px 20px repeat-y;
    }

    #joinCard::before {
      left: -8px;
    }

    #joinCard::after {
      right: -8px;
    }

    #joinCard h2 {
      color: #f2e8cf;
      font-size: 1.65rem;
      text-align: center;
      text-shadow: 0 2px 0 #33372f;
    }

    #joinCard>p {
      color: #cfc5ac;
      text-align: center;
    }

    #joinCard form {
      border-top: 1px dashed rgba(236, 224, 194, .5);
      padding-top: 0.5rem;
    }

    #joinCard label span {
      color: #ded4bb;
      text-transform: uppercase;
      font-size: .68rem;
      letter-spacing: .18em;
    }

    #joinCard input {
      color: #332a22;
    }

    #joinCode {
      font-size: 1.45rem !important;
      letter-spacing: .34em !important;
      border: 2px solid #c2ad83 !important;
      background: #eee2c8 !important;
    }

    .ticket-rail {
      display: flex;
      align-items: center;
      gap: .55rem;
      margin-bottom: .75rem;
      color: #c9b789;
      font: 700 .62rem/1 "Rockwell", Georgia, serif;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .ticket-rail::before,
    .ticket-rail::after {
      content: "";
      height: 1px;
      flex: 1;
      background: #a99770;
    }

    #homeView>article:not(#joinCard) {
      margin-bottom: 1rem;
    }

    /* Madera barnizada y envejecida: campos claros para conservar legibilidad. */
    #createCard {
      position: relative;
      overflow: hidden;
      color: #f4e7c9;
      border: 1px solid #5d371f !important;
      border-radius: 0px;
      background-color: #75482b !important;
      background-image:
        linear-gradient(rgba(87, 48, 25, .3), rgba(44, 22, 11, .18)),
        url("./vintage-wood-texture.webp") !important;
      background-position: center;
      background-size: cover;
      background-blend-mode: multiply, normal;
      box-shadow:
        0 11px 22px rgba(47, 27, 14, .28),
        inset 0 0 0 3px rgba(231, 190, 126, .10),
        inset 0 0 30px rgba(31, 14, 6, .25) !important;
    }

    #createCard::before {
      content: "";
      position: absolute;
      inset: 7px;
      pointer-events: none;
      border: 1px solid rgba(225, 184, 118, .28);
      box-shadow: inset 0 0 10px rgba(27, 12, 5, .22);
    }

    #createCard h2 {
      color: #f6e6c4;
      text-shadow: 0 2px 0 #3e2112;
    }

    #createCard>p,
    #createCard label span {
      color: #e4cfaa;
      text-shadow: 0 2px 4px #000000;
    }

    #createCard input,
    #createCard select {
      color: #33251b;
      background-color: rgba(247, 235, 207, .94) !important;
      border-color: #b58a58 !important;
    }

    /* Dos boletos emparentados, pero con silueta, acomodo y color distintos. */
    #inviteCard,
    #activeSessionCard {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border-radius: .4rem;
    }

    #inviteCard {
      padding-left: 1.55rem;
      border: 0px solid #b48d57 !important;
      background-color: #eddbb5 !important;
      background-image:
        radial-gradient(circle at 0 50%, #efe3c9 0 9px, transparent 9.5px),
        radial-gradient(circle at 100% 50%, #efe3c9 0 9px, transparent 9.5px),
        linear-gradient(90deg, rgba(145, 91, 39, .09), transparent 18%),
        url("./ticket-invite-texture.webp") !important;
      background-size: auto, auto, auto, cover;
      box-shadow: 0 10px 22px rgba(66, 43, 23, .20), inset 0 0 24px rgba(125, 78, 35, .10) !important;
    }

    #inviteCard::before {
      content: "INVITACIÓN";
      position: absolute;
      left: 1.5rem;
      top: 32.5%;
      transform: translateY(-50%) rotate(180deg);
      writing-mode: vertical-rl;
      color: rgba(119, 68, 30, .62);
      font: 800 .56rem/1 "Rockwell", Georgia, serif;
      letter-spacing: .16em;
      border-left: 1px dashed rgba(123, 78, 35, .46);
      padding-left: .38rem;
    }

    #inviteCard>div:not(:last-child) {
      border-radius: .25rem !important;
    }

    #inviteCard h2 {
      color: #7f251b;
    }

    #activeSessionCard {
      padding-right: 6rem;
      padding-left: 1.25rem;
      color: #eee3ca;
      border-top: 5px solid #230a07 !important;
      border-bottom: 5px solid #230a07 !important;
      background-color: #774039 !important;
      background-image:
        linear-gradient(rgba(63, 25, 24, .04), rgba(38, 19, 18, .16)),
        url("./ticket-session-texture.webp") !important;
      background-position: center;
      background-size: cover;
      background-blend-mode: multiply, normal;
      box-shadow: 0 10px 22px rgba(57, 31, 24, .28), inset 0 0 28px rgba(34, 14, 12, .20) !important;
    }

    #activeSessionCard::after {
      content: "VALIDO";
      position: absolute;
      right: .8rem;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      color: #d9c99f;
      font: 900 .65rem/1 "Rockwell", Georgia, serif;
      letter-spacing: .28em;
      border-block: 1px dashed rgba(222, 207, 166, .44);
      padding-block: .45rem;
    }

    #activeSessionCard h2,
    #activeSessionCard>p {
      color: #f0e2c3;
    }

    /* La acción de cumplimiento existe solamente para misiones ya confirmadas. */
    button[data-ticket-complete]:disabled {
      display: none;
    }

    .privacy-panel {
      position: relative;
    }

    .privacy-panel.privacy-hidden > :not(.privacy-toggle) {
      display: none !important;
    }

    .privacy-toggle {
      position: absolute;
      z-index: 20;
      top: .55rem;
      right: .55rem;
      display: flex;
      width: 1.8rem;
      height: 1.8rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px !important;
      border: 0 !important;
      background-color: transparent !important;
      background-image: none !important;
      color: #475569;
      box-shadow: none !important;
    }

    .privacy-toggle svg {
      width: 20px;
      height: 20px;
    }

    .privacy-panel.privacy-hidden .privacy-toggle {
      position: relative;
      top: auto;
      right: auto;
      width: auto;
      height: auto;
      margin-inline: auto;
      gap: .45rem;
      padding: .3rem .45rem;
      font-size: .78rem;
      font-weight: 800;
    }

    /* Tablero ferroviario de madera oscura y muy usada. */
    #appView {
      position: relative;
      margin-inline: -.35rem;
      padding: 1rem;
      border: 2px solid #5a341c;
      border-radius: 0px;
      background-color: #56331e;
      background-image:
        radial-gradient(circle at 10px 10px, #a57948 0 2px, #382013 2.5px 4px, transparent 4.5px),
        linear-gradient(rgba(31, 16, 9, .28), rgba(20, 11, 7, .42)),
        url("./vintage-wood-texture.webp");
      background-position: center;
      background-size: 100% 100%, cover, cover;
      box-shadow:
        inset 0 0 0 3px rgba(218, 176, 116, .10),
        inset 0 0 28px rgba(22, 10, 5, .48),
        0 13px 28px rgba(47, 32, 21, .28);
    }

    #appView::before {
      content: "";
      position: absolute;
      inset: 5px;
      pointer-events: none;
      border: 1px dashed rgba(218, 208, 168, .22);
      border-radius: .25rem;
    }

    #appView>div,
    #appView>nav {
      position: relative;
      z-index: 1;
    }

    #appView article {

      background-color: rgba(241, 230, 205, .96);
    }


    /* Interiores rectos: el carácter viene del material, no de tarjetas redondeadas. */
    article,
    article div,
    article input,
    article select {
      border-radius: 0 !important;
    }

    /* Perforado fino y continuo para el boleto principal. */
    #joinCard::before,
    #joinCard::after {
      top: 9px;
      bottom: 9px;
      width: 15px;
      background:
        radial-gradient(circle, #eee2c8 0 4px, transparent 4.5px) center top / 15px 20px repeat-y;
      filter: drop-shadow(0 1px 0 rgba(54, 42, 29, .28));
    }

    #joinCard::before {
      left: -8px;
    }

    #joinCard::after {
      right: -8px;
    }

    /* Invitación: perforaciones pequeñas arriba y abajo, con muescas laterales grandes. */
    #inviteCard::after {
      content: "";
      position: absolute;
      z-index: 3;
      inset: -1px;
      pointer-events: none;
      background:
        radial-gradient(circle at 0 50%, #ddd2b9 0 9px, transparent 9.5px) left center / 19px 100% no-repeat,
        radial-gradient(circle at 100% 50%, #ddd2b9 0 9px, transparent 9.5px) right center / 19px 100% no-repeat,
        radial-gradient(circle at 11px 0, #ddd2b9 0 3.5px, transparent 4px) left top / 22px 10px repeat-x,
        radial-gradient(circle at 11px 100%, #ddd2b9 0 3.5px, transparent 4px) left bottom / 22px 10px repeat-x;
      filter: drop-shadow(0 1px 0 rgba(103, 67, 33, .20));
    }

    /* Sesión activa: muescas más amplias y espaciadas, como boleto de equipaje. */
    #activeSessionCard::before {
      content: "";
      position: absolute;
      z-index: 3;
      inset: -1px;
      pointer-events: none;
      background:
        radial-gradient(circle at 0 50%, #ddd2b9 0 11px, transparent 11.5px) left top / 23px 24px repeat-y,
        radial-gradient(circle at 100% 50%, #ddd2b9 0 11px, transparent 11.5px) right top / 23px 24px repeat-y;
      filter: drop-shadow(0 1px 0 rgba(43, 24, 20, .35));
    }

    /* Tinta integrada al soporte: equivalente visual a multiply/color burn. */
    button {
      overflow: hidden;
      border: 1px solid rgba(57, 37, 22, .28) !important;
      background-image:
        linear-gradient(rgba(67, 40, 22, .08), rgba(36, 20, 11, .18)),
        url("./aged-paper-texture.webp") !important;
      background-position: center;
      background-size: cover;
      background-blend-mode: color-burn, multiply;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -2px 4px rgba(47, 25, 13, .18),
        0 2px 4px rgba(45, 28, 16, .12);
      filter: saturate(.82) contrast(1.04);
    }

    button:hover {
      filter: saturate(.92) contrast(1.08) brightness(.96);
    }

    button:active {
      box-shadow:
        inset 0 2px 5px rgba(38, 20, 11, .28),
        0 1px 1px rgba(45, 28, 16, .10);
    }

    #turnPanel {
      background:
        linear-gradient(rgba(244, 232, 207, .86), rgba(224, 204, 168, .90)),
        url("./aged-paper-texture.webp") center / cover !important;
      box-shadow: inset 0 0 18px rgba(72, 43, 21, .13), 0 8px 18px rgba(42, 27, 15, .18);
    }

    #countdownOverlay>div,
    #winnerOverlay>div {
      background:
        linear-gradient(rgba(246, 235, 211, .88), rgba(226, 207, 170, .92)),
        url("./aged-paper-texture.webp") center / cover !important;
      box-shadow: inset 0 0 28px rgba(84, 50, 23, .16), 0 22px 55px rgba(20, 12, 7, .48);
    }

    @media (min-width: 640px) {
      body {
        padding-block: 1rem;
      }
    }

    /* Contraste accesible para la tarjeta clara de captura de puntos. */
    #tabPoints p {
      color: #332a22 !important;
    }

    #pointsTicketsSummary > div,
    #pointsTicketsSummary > div > div > div,
    #myFormulaText,
    #myReadyBadge {
      background-color: rgba(255, 250, 235, .72) !important;
      border: 1px solid rgba(119, 96, 61, .28);
    }

    /* Ajustes compactos para conservar espacio en modo app de celular. */
    @media (max-width: 420px) {
      main {
        padding: .5rem !important;
      }

      #shellHeader {
        padding: 1rem 1.1rem 1.15rem !important;
      }

      #headerTitle {
        font-size: 1.55rem !important;
        line-height: 1.1;
      }

      #headerSubtitle {
        margin-top: .2rem;
        font-size: .78rem;
      }
    }

    /*
     * Ajustes de acomodo que todavía pertenecían al bloque embebido.
     * Se mantienen aquí para que la extracción del CSS no cambie el diseño.
     */
    #homeView > article {
      margin-bottom: 1rem;
    }

    #appView {
      padding: .65rem;
    }

    #joinCard::before,
    #joinCard::after {
      background:
        radial-gradient(circle, #eee2c8 0 4px, transparent 4.5px) center top / 15px 20px repeat-y;
    }

    #inviteCard::after {
      background:
        radial-gradient(circle at 0 50%, #efe3c9 0 9px, transparent 9.5px) left center / 19px 100% no-repeat,
        radial-gradient(circle at 100% 50%, #efe3c9 0 9px, transparent 9.5px) right center / 19px 100% no-repeat,
        radial-gradient(circle at 11px 0, #efe3c9 0 3.5px, transparent 4px) left top / 22px 10px repeat-x,
        radial-gradient(circle at 11px 100%, #efe3c9 0 3.5px, transparent 4px) left bottom / 22px 10px repeat-x;
    }