:root{
  --bg:#FBF2E3;
  --surface:#FFFFFF;
  --surface-2:#FFF8EC;
  --text:#1C2B30;
  --text-soft:#5E6E70;
  --border:#E8D9BE;
  --teal:#127D77;
  --teal-strong:#0B4F55;
  --coral:#F0563C;
  --sun:#F2A63D;
  --good:#2E7D5B;
  --good-bg:#E4F3EA;
  --shadow: 0 18px 40px -24px rgba(20,40,45,0.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A2027;
    --surface:#102B32;
    --surface-2:#0D262D;
    --text:#F1E9D8;
    --text-soft:#9FB4B6;
    --border:#1E3E44;
    --teal:#4FD1C4;
    --teal-strong:#8FE3D8;
    --coral:#FF8163;
    --sun:#F5BE6B;
    --good:#7ED0A3;
    --good-bg:#123227;
    --shadow: 0 18px 44px -22px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0A2027;
  --surface:#102B32;
  --surface-2:#0D262D;
  --text:#F1E9D8;
  --text-soft:#9FB4B6;
  --border:#1E3E44;
  --teal:#4FD1C4;
  --teal-strong:#8FE3D8;
  --coral:#FF8163;
  --sun:#F5BE6B;
  --good:#7ED0A3;
  --good-bg:#123227;
  --shadow: 0 18px 44px -22px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  text-wrap:balance;
  margin:0;
}
.mono{
  font-family:"Space Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric:tabular-nums;
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.page{
  max-width:760px;
  margin:0 auto;
  padding-inline:20px;
  padding-block:28px 48px;
}

/* ---------- GATE ---------- */
:root{
  --stars-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ccircle cx='18' cy='26' r='1.2' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='58' cy='78' r='0.8' fill='white' fill-opacity='0.55'/%3E%3Ccircle cx='104' cy='38' r='1' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='150' cy='92' r='1.4' fill='white' fill-opacity='0.8'/%3E%3Ccircle cx='190' cy='150' r='0.9' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='38' cy='138' r='1.1' fill='white' fill-opacity='0.7'/%3E%3Ccircle cx='88' cy='172' r='0.7' fill='white' fill-opacity='0.4'/%3E%3Ccircle cx='128' cy='18' r='0.9' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='8' cy='196' r='1.3' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='176' cy='8' r='0.8' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='210' cy='60' r='1' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='68' cy='10' r='0.6' fill='white' fill-opacity='0.4'/%3E%3C/svg%3E");
}
.gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-x:hidden;
  background-image:
    var(--stars-bg),
    radial-gradient(90% 65% at 50% 8%, #F4ECC6 0%, #DCE6EF 24%, #9FB8CE 48%, #5C7896 72%, #263A54 100%);
  background-repeat:repeat, no-repeat;
  background-size:220px 220px, cover;
}
.gate-wrap{
  width:100%;
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.gate-eyebrow{
  margin:0;
  font-family:"Space Mono", monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#33465F;
  opacity:0.85;
}

/* ---------- CARD CLUSTER + POST-ITS ---------- */
.card-cluster{
  position:relative;
  width:100%;
  max-width:300px;
  margin-inline:auto;
}
.postits{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:26px;
}
.postit{
  perspective:900px;
  z-index:3;
  flex:none;
}
.postit-card{
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.postit-card.flipped{ transform:rotateY(180deg); }
.postit-card:focus-visible{
  outline:2px solid #F0E5A8;
  outline-offset:3px;
}
.postit-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:2px;
  padding:12px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#2A3245;
  box-shadow:0 12px 20px -10px rgba(10,15,25,0.5);
}
.postit-face::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  width:30px;
  height:13px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.35);
}
.postit-front{
  background:#F4ECC6;
}
.postit-back{
  transform:rotateY(180deg);
  background:#F4ECC6;
  font-family:"Work Sans", sans-serif;
  font-size:0.64rem;
  line-height:1.32;
}
.postit:nth-of-type(2) .postit-front,
.postit:nth-of-type(2) .postit-back,
.postit:nth-of-type(4) .postit-front,
.postit:nth-of-type(4) .postit-back{
  background:#DCE6EF;
}
.postit:nth-of-type(3) .postit-front,
.postit:nth-of-type(3) .postit-back{
  background:#E7CFC3;
}

/* sizes tuned per note length; stacked in a row below the card on narrow screens */
.postit:nth-of-type(1){ width:120px; height:140px; transform:rotate(-4deg); }
.postit:nth-of-type(2){ width:92px; height:92px; transform:rotate(6deg); }
.postit:nth-of-type(3){ width:120px; height:140px; transform:rotate(-3deg); }
.postit:nth-of-type(4){ width:80px; height:80px; transform:rotate(5deg); }
.postit:nth-of-type(5){ width:104px; height:104px; transform:rotate(-5deg); }

@media (min-width:820px){
  .card-cluster{ max-width:660px; }
  .postits{ display:contents; }
  .postit{ position:absolute; }
  .postit:nth-of-type(1){ top:0; left:10px; }
  .postit:nth-of-type(3){ top:190px; left:10px; }
  .postit:nth-of-type(2){ top:10px; right:10px; }
  .postit:nth-of-type(4){ top:142px; right:10px; }
  .postit:nth-of-type(5){ top:262px; right:10px; }
}

/* ---------- FLIP CARD ---------- */
.flip-scene{
  position:relative;
  width:100%;
  max-width:300px;
  margin-inline:auto;
  perspective:1400px;
  animation:float 6s ease-in-out infinite;
}
.flip-scene::before{
  content:"";
  position:absolute;
  inset:-18% -30%;
  background:radial-gradient(circle, rgba(240,229,168,0.55) 0%, rgba(240,229,168,0) 68%);
  filter:blur(18px);
  z-index:-1;
  pointer-events:none;
}
@keyframes float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.flip-card{
  position:relative;
  width:100%;
  aspect-ratio:364/624;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip-card.flipped{
  transform:rotateY(180deg);
  cursor:default;
}
.flip-card:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:6px;
}
.flip-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(10,20,25,0.5);
  overflow:hidden;
}
.flip-face.front{
  background:var(--surface);
}
.flip-face.front img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.flip-hint{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  text-align:center;
  font-family:"Space Mono", monospace;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#F4ECC6;
  background:linear-gradient(to top, rgba(30,45,70,0.8), transparent);
}
.flip-face.back{
  transform:rotateY(180deg);
  background-image:
    var(--stars-bg),
    radial-gradient(120% 80% at 50% -8%, rgba(240,229,168,0.32) 0%, rgba(240,229,168,0) 48%),
    linear-gradient(165deg, #30435F 0%, #16233A 100%);
  background-repeat:repeat, no-repeat, no-repeat;
  background-size:170px 170px, auto, auto;
  box-shadow:inset 0 0 44px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  padding:28px 24px;
  text-align:center;
}
.flip-face.back h1{
  font-size:1.5rem;
  font-weight:600;
  color:#F4ECC6;
}
.gate-form{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#gate-input{
  font:inherit;
  font-size:1rem;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(244,236,198,0.35);
  background:rgba(255,255,255,0.08);
  color:#F4ECC6;
  text-align:center;
}
#gate-input::placeholder{
  color:rgba(244,236,198,0.55);
}
#gate-input:focus-visible{
  outline:2px solid #F0E5A8;
  outline-offset:2px;
}
.gate-form button{
  font:inherit;
  font-weight:600;
  font-size:0.95rem;
  padding:12px 14px;
  border-radius:10px;
  border:none;
  background:linear-gradient(180deg, #F4ECC6 0%, #E8D98A 100%);
  color:#1F2E45;
  cursor:pointer;
}
.gate-form button:hover{ background:linear-gradient(180deg, #FBF6DE 0%, #F0E5A8 100%); }
.gate-form button:focus-visible{
  outline:2px solid #F4ECC6;
  outline-offset:2px;
}
.gate-error{
  margin:14px 0 0;
  font-size:0.85rem;
  color:#FF9E80;
}
.back-content.shake{ animation:shake 0.4s; }
@keyframes shake{
  0%, 100%{ transform:translateX(0); }
  20%, 60%{ transform:translateX(-8px); }
  40%, 80%{ transform:translateX(8px); }
}

/* ---------- TRANSITION TO ITINERARY ---------- */
.transition-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.transition-overlay.active{
  opacity:1;
  pointer-events:all;
}
.transition-sweep{
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(180deg, #6EC1E4 0%, #BEE7E8 38%, #F7ECC9 72%, #FBF2E3 100%);
  transition:width 1.5s cubic-bezier(0.65,0,0.35,1);
}
.transition-overlay.active .transition-sweep{
  width:100%;
}
.transition-plane{
  position:absolute;
  top:50%;
  left:-90px;
  width:76px;
  height:76px;
  transform:translateY(-50%);
  transition:left 1.5s cubic-bezier(0.65,0,0.35,1);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,0.35));
}
.transition-overlay.active .transition-plane{
  left:calc(100% - 10px);
}

@media (prefers-reduced-motion: reduce){
  .back-content.shake{ animation:none; }
  .flip-card{ transition:none; }
  .flip-scene{ animation:none; }
  .postit-card{ transition:none; }
  .transition-sweep,
  .transition-plane{ transition:none; }
}

/* ---------- HERO TICKET ---------- */
.hero-ticket{
  display:flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ht-main{
  flex:1;
  padding:26px 24px;
  min-width:0;
}
.ht-top{
  display:flex;
  justify-content:space-between;
  font-family:"Space Mono", monospace;
  font-size:0.66rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.ht-route{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
}
.ht-city{ display:flex; flex-direction:column; }
.ht-code{
  font-family:"Fraunces", serif;
  font-weight:700;
  font-size:2rem;
  line-height:1;
  color:var(--text);
}
.ht-name{
  font-size:0.72rem;
  color:var(--text-soft);
  margin-top:4px;
}
.ht-path{
  flex:1;
  color:var(--coral);
  min-width:50px;
}
.ht-path svg{ width:100%; height:22px; display:block; }
.ht-title{
  margin-top:22px;
  font-size:clamp(1.6rem, 6vw, 2.2rem);
  font-weight:600;
  color:var(--text);
}
.ht-dates{
  margin-top:4px;
  font-family:"Space Mono", monospace;
  font-size:0.85rem;
  color:var(--text-soft);
}
.ht-stub{
  width:150px;
  flex:none;
  padding:24px 18px;
  background:var(--surface-2);
  border-left:2px dashed var(--border);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  position:relative;
}
.ht-stub::before,
.ht-stub::after{
  content:"";
  position:absolute;
  left:-11px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border);
}
.ht-stub::before{ top:-11px; }
.ht-stub::after{ bottom:-11px; }
.ht-barcode{
  height:34px;
  background:repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 5px, var(--text) 5px 7px, transparent 7px 12px);
  opacity:0.5;
}

@media (max-width:480px){
  .hero-ticket{ flex-direction:column; }
  .ht-stub{
    width:auto;
    border-left:none;
    border-top:2px dashed var(--border);
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  .ht-stub::before{ left:-11px; top:-11px; }
  .ht-stub::after{ left:auto; right:-11px; top:-11px; bottom:auto; }
  .ht-barcode{ display:none; }
}

/* ---------- SECTIONS ---------- */
.section{
  padding-block:36px 8px;
}
.section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.section-head svg{ color:var(--teal); flex:none; }
.section-head h2{
  font-size:1.5rem;
  font-weight:600;
  color:var(--text);
}

/* ---------- TICKETS ---------- */
.tickets{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ticket{
  display:flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ticket-main{
  flex:1;
  padding:18px 20px;
  min-width:0;
}
.ticket-label{
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.ticket-route{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.ticket-city{
  display:flex;
  flex-direction:column;
}
.ticket-city .code{
  font-family:"Fraunces", serif;
  font-weight:600;
  font-size:1.5rem;
  line-height:1;
  color:var(--text);
}
.ticket-city .city{
  font-size:0.72rem;
  color:var(--text-soft);
  margin-top:2px;
}
.ticket-city .time{
  font-family:"Space Mono", monospace;
  font-size:0.82rem;
  color:var(--teal);
  margin-top:4px;
}
.ticket-path{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--coral);
  min-width:36px;
}
.ticket-path svg{ width:100%; height:16px; }
.ticket-meta{
  display:flex;
  gap:14px;
  margin-top:12px;
  font-size:0.78rem;
  color:var(--text-soft);
}
.ticket-stub{
  width:132px;
  flex:none;
  padding:18px 14px;
  background:var(--surface-2);
  border-left:2px dashed var(--border);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  position:relative;
}
.ticket-stub::before,
.ticket-stub::after{
  content:"";
  position:absolute;
  left:-9px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border);
}
.ticket-stub::before{ top:-9px; }
.ticket-stub::after{ bottom:-9px; }
.stub-label{
  font-size:0.64rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.stub-code{
  font-family:"Space Mono", monospace;
  font-size:0.95rem;
  color:var(--text);
}
.stub-note{
  font-size:0.7rem;
  color:var(--coral);
}

/* ---------- HOTEL ---------- */
.hotel-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:22px;
}
.badge{
  display:inline-block;
  background:var(--good-bg);
  color:var(--good);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.04em;
  padding:4px 10px;
  border-radius:999px;
}
.hotel-card h3{
  font-size:1.3rem;
  font-weight:600;
  margin-top:10px;
}
.hotel-sub{
  margin:4px 0 0;
  color:var(--text-soft);
  font-size:0.9rem;
}
.hotel-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px 20px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.g-label{
  display:block;
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.g-value{
  display:block;
  margin-top:3px;
  font-size:0.94rem;
}
.hotel-codes{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.code-mono{
  display:block;
  margin-top:3px;
  font-family:"Space Mono", monospace;
  font-size:0.88rem;
  color:var(--teal-strong);
}

footer{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--text-soft);
  font-size:0.85rem;
  text-align:center;
}

@media (max-width:480px){
  .ticket{ flex-direction:column; }
  .ticket-stub{
    width:auto;
    border-left:none;
    border-top:2px dashed var(--border);
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  .ticket-stub::before,
  .ticket-stub::after{
    left:auto;
    top:-9px;
  }
  .ticket-stub::before{ left:-9px; }
  .ticket-stub::after{ right:-9px; left:auto; bottom:auto; top:-9px; }
  .hotel-grid{ grid-template-columns:1fr 1fr; }
}