/* Climb to Dreamland v1.8.0 | (c) 2026 Snoozz, LLC */
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
html, body { margin: 0; padding: 0; background: #05060d; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

.dl-root {
  --u: 2px; --padh: 0px;
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse at top, #141a3a 0%, #05060d 70%);
  font-family: "Press Start 2P", ui-monospace, monospace; color: #e8ecf5;
  touch-action: none;
  padding-top: env(safe-area-inset-top); box-sizing: border-box;
}
.dl-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.dl-screen { position: relative; box-shadow: 0 0 0 2px #2c3e7a, 0 0 40px rgba(60, 90, 200, 0.25); background: #000; }
.dl-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

.dl-bar { position: absolute; top: calc(var(--u) * 35); left: calc(var(--u) * 3); opacity: 0.85; display: flex; gap: calc(var(--u) * 2); z-index: 3; }
.dl-ic {
  font: inherit; font-size: max(9px, calc(var(--u) * 5)); line-height: 1; color: #8fd3ff; background: rgba(5, 6, 13, 0.7);
  border: 2px solid #2c3e7a; padding: calc(var(--u) * 2) calc(var(--u) * 2.5); cursor: pointer; min-width: 30px; min-height: 26px;
}
.dl-ic.off { color: #ff5a6a; }
.dl-ic:focus-visible, .dl-btn:focus-visible, .dl-tab:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; }

/* Overlay */
.dl-ov {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(5, 6, 13, 0.88); display: flex; touch-action: pan-y;
}
.dl-ov[hidden] { display: none; }
.dl-card {
  margin: auto; width: 100%; box-sizing: border-box; padding: calc(var(--u) * 10) calc(var(--u) * 9);
  text-align: center; font-size: calc(var(--u) * 5.5); line-height: 1.6;
}
.dl-logo { font-size: calc(var(--u) * 13); line-height: 1.25; color: #ffd23f; text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #e8364a, calc(var(--u) * 2) calc(var(--u) * 2) 0 #1e2a55; margin-bottom: calc(var(--u) * 5); }
.dl-logo span { color: #8fd3ff; text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #2c3e7a, calc(var(--u) * 2) calc(var(--u) * 2) 0 #1a1423; }
.dl-sub { color: #e8ecf5; margin: 0 0 calc(var(--u) * 6); }
.dl-hero { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 8); }
.dl-hero img { image-rendering: pixelated; }
.dl-hero-p { width: calc(var(--u) * 36); animation: dl-bob 0.8s steps(2) infinite; }
.dl-hero-g { width: calc(var(--u) * 48); animation: dl-bob 0.5s steps(2) infinite reverse; }
.dl-vs { color: #e8364a; font-size: calc(var(--u) * 8); padding-bottom: calc(var(--u) * 12); }
@keyframes dl-bob { 50% { transform: translateY(calc(var(--u) * -2)); } }

.dl-btn {
  display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: calc(var(--u) * 7); line-height: 1.4;
  color: #e8ecf5; background: #1e2a55; border: none; cursor: pointer; text-decoration: none;
  padding: calc(var(--u) * 5) calc(var(--u) * 4); margin: 0 0 calc(var(--u) * 4);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #0f1430, inset calc(var(--u) * 1) calc(var(--u) * 1) 0 #4a5f9e;
}
.dl-btn:active { transform: translateY(1px); }
.dl-btn.primary { background: #ffd23f; color: #1a1423; box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #e0a020, inset calc(var(--u) * 1) calc(var(--u) * 1) 0 #fff3a0; animation: dl-pulse 1.2s steps(2) infinite; }
.dl-btn.book { background: #e8364a; color: #fff; font-size: calc(var(--u) * 5.5); box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #8f1d2c, inset calc(var(--u) * 1) calc(var(--u) * 1) 0 #ff7f8a; }
.dl-btn.small { width: auto; margin: 0; font-size: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 5); }
.dl-btn[disabled] { opacity: 0.6; }
@keyframes dl-pulse { 50% { filter: brightness(1.15); } }

.dl-hi { color: #8fd3ff; margin: calc(var(--u) * 3) 0; }
.dl-tiny { font-size: calc(var(--u) * 4); color: #9aa3c4; line-height: 1.7; margin: calc(var(--u) * 3) 0; }
.dl-tiny a { color: #ffd23f; }
.dl-small { font-size: calc(var(--u) * 4.5); color: #c9cfdb; line-height: 1.7; margin: calc(var(--u) * 3) 0; }
.dl-small.hl { color: #ffd23f; }
.dl-kicker { color: #8fd3ff; font-size: calc(var(--u) * 5); margin-bottom: calc(var(--u) * 2); }
.dl-h2 { font-size: calc(var(--u) * 9); line-height: 1.35; color: #ffd23f; margin: calc(var(--u) * 2) 0 calc(var(--u) * 6); font-weight: normal; }
.dl-h2.big { font-size: calc(var(--u) * 11); }
.dl-h2.red { color: #ff5a6a; }
.dl-label { display: block; color: #8fd3ff; font-size: calc(var(--u) * 5); margin: calc(var(--u) * 5) 0 calc(var(--u) * 3); }

.dl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 3); }
.dl-chip { display: flex; align-items: center; gap: calc(var(--u) * 2); background: #1a1423; border: calc(var(--u) * 0.6) solid #8f1d2c; padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: calc(var(--u) * 4); }
.dl-chip.good { border-color: #2f8a4c; }
.dl-chip img { width: calc(var(--u) * 10); image-rendering: pixelated; }
.dl-chip + .dl-chip { margin: 0; }
.dl-card > .dl-btn.primary { margin-top: calc(var(--u) * 7); }

.dl-tally { background: #0b0e1e; border: calc(var(--u) * 0.6) solid #2c3e7a; padding: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 3); }
.dl-row { display: flex; justify-content: space-between; font-size: calc(var(--u) * 4.5); padding: calc(var(--u) * 1) 0; text-align: left; }
.dl-row b { color: #7dffa0; font-weight: normal; }
.dl-row.tot { border-top: calc(var(--u) * 0.6) dashed #2c3e7a; margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 3); font-size: calc(var(--u) * 6); }
.dl-row.tot b { color: #ffd23f; }
.dl-tip { background: #1e2a55; text-align: left; padding: calc(var(--u) * 5); margin: calc(var(--u) * 5) 0 0; border-left: calc(var(--u) * 2) solid #ffd23f; }
.dl-tip-h { color: #ffd23f; font-size: calc(var(--u) * 4.5); margin-bottom: calc(var(--u) * 2); }
.dl-tip p { margin: 0; font-size: calc(var(--u) * 5); line-height: 1.7; }

.dl-how { text-align: left; }
.dl-how p { font-size: calc(var(--u) * 4.6); line-height: 1.75; margin: 0 0 calc(var(--u) * 4); }
.dl-how b { color: #ffd23f; font-weight: normal; display: block; }

.dl-final { font-size: calc(var(--u) * 14); color: #fff; margin: 0 0 calc(var(--u) * 2); }
.dl-habits { list-style: none; padding: 0; margin: 0; counter-reset: h; }
.dl-habits li { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); background: #1a1423; border-left: calc(var(--u) * 2) solid #e8364a; padding: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2); font-size: calc(var(--u) * 4.5); text-align: left; }
.dl-habits b { color: #ff7f8a; font-weight: normal; }

.dl-form { margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); }
.dl-frow { display: flex; gap: calc(var(--u) * 3); }
.dl-frow input {
  flex: 1; min-width: 0; font: inherit; font-size: max(16px, calc(var(--u) * 6)); text-transform: uppercase; letter-spacing: 1px;
  background: #000; color: #ffd23f; border: calc(var(--u) * 0.8) solid #2c3e7a; padding: calc(var(--u) * 3); border-radius: 0;
  -webkit-user-select: text; user-select: text;
}
.dl-frow input:focus { outline: none; border-color: #ffd23f; }
.dl-err { color: #ff5a6a; font-size: calc(var(--u) * 4.5); min-height: calc(var(--u) * 6); margin-top: calc(var(--u) * 2); }
.dl-ok { color: #7dffa0; font-size: calc(var(--u) * 5.5); padding: calc(var(--u) * 4); background: #0b1a12; }

.dl-boardwrap { margin: calc(var(--u) * 4) 0; }
.dl-tabs { display: flex; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 3); }
.dl-tab { flex: 1; font: inherit; font-size: calc(var(--u) * 4.5); background: #1a1423; color: #9aa3c4; border: calc(var(--u) * 0.6) solid #2c3e7a; padding: calc(var(--u) * 3); cursor: pointer; }
.dl-tab.on { background: #2c3e7a; color: #ffd23f; }
.dl-board { background: #000; border: calc(var(--u) * 0.6) solid #2c3e7a; padding: calc(var(--u) * 3); min-height: calc(var(--u) * 30); }
.dl-brow { display: flex; font-size: calc(var(--u) * 5); padding: calc(var(--u) * 1.5) 0; }
.dl-brow:nth-child(1) { color: #ffd23f; }
.dl-brow:nth-child(2) { color: #e8ecf5; }
.dl-brow:nth-child(3) { color: #e0a070; }
.dl-brow:nth-child(n+4) { color: #9aa3c4; }
.dl-brow.me { background: #1e2a55; }
.dl-brow .rk { width: 2.2em; text-align: left; }
.dl-brow .nm { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-brow .sc { text-align: right; }
.dl-loading { font-size: calc(var(--u) * 4.5); color: #9aa3c4; padding: calc(var(--u) * 8) 0; }

/* Embedded iframe shortcode wrapper */
.dl-embed { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 9 / 16; }
.dl-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* V2 additions */
.dl-sec { color: #8fd3ff; font-size: calc(var(--u) * 4.5); margin: calc(var(--u) * -3) 0 calc(var(--u) * 5); }
.dl-story { display: flex; gap: calc(var(--u) * 4); align-items: center; text-align: left; background: #1a1423; border-left: calc(var(--u) * 2) solid #9b5de5; padding: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 2); }
.dl-story img { width: calc(var(--u) * 18); image-rendering: pixelated; flex: none; }
.dl-story p { margin: 0; font-size: calc(var(--u) * 4.5); line-height: 1.7; }
.dl-story .dl-tip-h { color: #c9a8ff; }
.dl-ver { font-size: calc(var(--u) * 3.5); color: #4a5f9e; margin: calc(var(--u) * 2) 0 0; }
.dl-touch .dl-stage { align-items: flex-start; }
.dl-screen { touch-action: none; }

/* V3 additions */
.dl-toast { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: calc(var(--u) * 46); z-index: 4;
  background: #ffd23f; color: #1a1423; text-decoration: none; font-size: calc(var(--u) * 5); line-height: 1.6; text-align: center;
  padding: calc(var(--u) * 4); box-shadow: 0 0 0 calc(var(--u) * 1) #1a1423, 0 calc(var(--u) * 2) 0 calc(var(--u) * 1) #8f1d2c; }
.dl-toast[hidden] { display: none; }

/* V3.3: name + optional Instagram */
.dl-flabel { display: block; text-align: left; color: #9aa3c4; font-size: calc(var(--u) * 4); margin: calc(var(--u) * 3) 0 calc(var(--u) * 1.5); }
.dl-in {
  width: 100%; box-sizing: border-box; font: inherit; font-size: max(16px, calc(var(--u) * 6)); letter-spacing: 1px;
  background: #000; color: #ffd23f; border: calc(var(--u) * 0.8) solid #2c3e7a; padding: calc(var(--u) * 3); border-radius: 0;
  -webkit-user-select: text; user-select: text;
}
.dl-in:focus { outline: none; border-color: #ffd23f; }
#dl-name { text-transform: uppercase; }
.dl-igrow { display: flex; align-items: stretch; }
.dl-igrow span { display: flex; align-items: center; padding: 0 calc(var(--u) * 3); background: #1e2a55; color: #ff7fb6; font-size: calc(var(--u) * 6); }
.dl-igrow .dl-in { flex: 1; min-width: 0; color: #ff7fb6; }
.dl-consent { display: flex; gap: calc(var(--u) * 3); align-items: flex-start; text-align: left; font-size: calc(var(--u) * 4); line-height: 1.7; color: #c9cfdb; margin: calc(var(--u) * 3) 0 0; cursor: pointer; }
.dl-consent[hidden] { display: none; }
.dl-consent input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: #ffd23f; }
.dl-form .dl-btn.small { width: 100%; margin-top: calc(var(--u) * 4); }
.dl-igtag { display: inline-block; font-size: calc(var(--u) * 3.6); color: #1a1423; background: #ff7fb6; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.5); text-decoration: none; vertical-align: middle; margin-left: calc(var(--u) * 1); }
.dl-small a { color: #ff7fb6; }
.dl-carry { font-size: calc(var(--u) * 5); color: #c9cfdb; margin: 0 0 calc(var(--u) * 3); }
.dl-carry b { color: #ff7fb6; font-weight: normal; }