/* Entry screen (js/intro.js): region panels side by side, scrolled horizontally; postcards drawn by three.js. */
/* 100lvh = the largest viewport, so the screen runs on under Safari's toolbar instead of stopping above it */
#intro { position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: 30; overflow: hidden; font-family: Poppins, sans-serif; color: #1b1b1f; background: #9fdaef; }
#intro[hidden], .ip-spacer[hidden] { display: none; }
.ip-spacer { width: 1px; }
.ip-layer { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; }
.ip-bg { z-index: 1; }
.ip-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.ip-gl-top { z-index: 8; }   /* the tapped postcard: above map, titles and the glass pill, below its info pill */
.ip-fg { z-index: 3; }
.ip-panel-bg, .ip-panel { position: relative; flex: 0 0 100vw; height: 100vh; }

/* stamp grid like the mockup: 4 columns, a top and a bottom row; the map sits on top in the middle */
.ip-panel { --sw: min(15vw, 21vh); --sh: calc(var(--sw) * 4 / 3); }
.ip-slot { position: absolute; width: var(--sw); height: var(--sh); transform: translate(-50%, -50%); cursor: pointer; outline: none; border-radius: 4px; }
.ip-slot:focus-visible { box-shadow: 0 0 0 4px rgba(255,255,255,.8); }
.ip-slot-0 { left: 15.4%; top: 19.6%; } .ip-slot-1 { left: 38.5%; top: 19.6%; } .ip-slot-2 { left: 61.6%; top: 19.6%; } .ip-slot-3 { left: 84.6%; top: 19.6%; }
.ip-slot-4 { left: 15.4%; top: 80.3%; } .ip-slot-5 { left: 38.5%; top: 80.3%; } .ip-slot-6 { left: 61.6%; top: 80.3%; } .ip-slot-7 { left: 84.6%; top: 80.3%; }
.ip-flat { display: none; }
/* no WebGL (or lost, or this card's texture not ready yet): show the art as flat stamps */
.ip-slot:not(.ip-gl-ready) .ip-flat, .ip-dom-cards .ip-flat,
.ip-flat-cards .ip-flat { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(20,40,60,.35)); }

.ip-titles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ip-rtitle { position: absolute; left: 0; top: 50%; border: 0; background: none; padding: 0; cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; gap: .08em; white-space: nowrap; will-change: transform;
  font-family: 'Jersey 15', monospace; font-weight: 400; font-size: min(10vw, 17vh); line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; color: rgba(255,255,255, calc(1 - .55 * var(--ghost, 0))); text-shadow: 0 4px 0 rgba(0,0,0, calc(.06 * (1 - var(--ghost, 0)))); }
.ip-rtitle span { font-family: Poppins, sans-serif; font-weight: 300; font-size: .6em; opacity: var(--ghost, 0); }
.ip-rtitle.is-next:hover { color: rgba(255,255,255,.7); }

.ip-map { position: absolute; left: 52.2%; top: 50.5%; transform: translate(-50%, -50%); width: min(34.5vw, 61vh); aspect-ratio: 690 / 565;
  z-index: 2; border: 0; background: none; padding: 0; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ip-map:hover { transform: translate(-50%, -50%) scale(1.02); }
.ip-map img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.ip-map-ph { position: relative; width: 100%; height: 100%; }
.ip-map-ph svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.12)); }
.ip-pin { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: #ffe58a;
  font-family: 'Jersey 15', monospace; font-size: min(1.1vw, 1.7vh); color: #3a2f10; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.ip-map-ph em { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); font-style: normal; font-size: 12px; color: rgba(0,0,0,.45); white-space: nowrap; }

/* top pill: liquid glass (backdrop SVG filter set by js/glass.js; the rim light is CSS) */
.ip-pill { position: absolute; left: 50%; top: 3.4vh; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 14px;
  padding: 14px 40px 14px 26px; border-radius: 999px; background: rgba(255,255,255,.08);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.35), inset 1px 0 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(255,255,255,.5),
    0 12px 32px -14px rgba(20,60,90,.35);
  font-family: 'Jersey 15', monospace; font-weight: 400; font-size: 32px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: #1b1b1f;
  white-space: nowrap; pointer-events: none; }
.ip-ball { width: 32px; height: 32px; flex: none; display: block; }

/* position indicator: three hairlines, barely there */
.ip-dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; }
.ip-dots button { width: 18px; height: 2px; border-radius: 2px; border: 0; padding: 6px 0; background: none; cursor: pointer; position: relative; }
.ip-dots button::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 2px;
  background: rgba(255,255,255,.3); transition: background .3s; }
.ip-dots button.on::before { background: rgba(255,255,255,.75); }

/* postcard info pill */
.ip-tip { position: fixed; z-index: 9; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 14px 30px -12px rgba(20,40,60,.45); font-size: 14px; white-space: nowrap; }
.ip-tip[hidden] { display: none; }
.ip-tip.in { animation: ipPop .28s cubic-bezier(.2,1.4,.4,1) both; }
.ip-tip b { font-weight: 800; letter-spacing: -.01em; }
.ip-arrow { color: #e3353c; font-weight: 700; }
.ip-dot { width: 4px; height: 4px; border-radius: 999px; background: #c9c9d2; }
.ip-place { color: #4a4a55; font-weight: 500; }
@keyframes ipPop { from { opacity: 0; transform: translateY(-8px) scale(.9); } to { opacity: 1; transform: none; } }

/* challenge sheet */
.ip-sheet { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(20,30,45,.35); backdrop-filter: blur(4px); }
.ip-sheet[hidden] { display: none; }
.ip-sheet-card { width: min(520px, calc(100vw - 32px)); background: #fff; border-radius: 28px; padding: 28px 30px 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
  animation: ipPop .25s cubic-bezier(.2,1.3,.4,1) both; }
.ip-sheet-kicker { display: flex; align-items: center; gap: 8px; font-family: 'Jersey 15', monospace; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: #e3353c; }
.ip-sheet-kicker .ip-ball { width: 20px; height: 20px; }
.ip-sheet h2 { margin: 8px 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ip-sheet p { margin: 0 0 18px; color: #6f6f79; font-size: 14px; line-height: 1.5; }
.ip-team { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 22px; }
.ip-team > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 14px; background: #f5f5f8; font-size: 10.5px; font-weight: 600; color: #4a4a55; text-align: center; }
.ip-icon { width: 40px; height: 40px; background-image: url(../assets/icons.png); background-size: 800px auto; image-rendering: pixelated; }
.ip-sheet-btns { display: flex; justify-content: flex-end; gap: 10px; }
.ip-sheet-btns button { padding: 13px 22px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ip-cancel { border: 1px solid #e6e6ec; background: #fff; color: #4a4a55; }
.ip-go { border: 0; background: #e3353c; color: #fff; box-shadow: 0 14px 26px -14px rgba(227,53,60,.8); }

/* phone focus mode backdrop (the centred postcard renders above it on .ip-gl-top) */
.ip-focus { position: fixed; inset: 0; z-index: 7; background: rgba(20,45,70,.38); touch-action: none; animation: ipFade .2s ease both; }
.ip-focus[hidden] { display: none; }
@keyframes ipFade { from { opacity: 0; } to { opacity: 1; } }
/* phone-only bits are hidden on desktop */
.ip-mtitle, .ip-mnext { display: none; }

/* ---- phones: one screen per region, nothing to scroll vertically: title, big map, then all 8 postcards in a
   coverflow strip (js/intro.js updateFlow positions the slots; three.js turns the side cards). Swipe sideways on the map
   to change region; drag the strip to flip through postcards. --u = 1vw, or less on short screens so it all fits. */
/* phones: plain-image postcards (see js/intro.js domFocus / applyMode); no WebGL canvases at all */
.ip-dom-cards .ip-gl { display: none; }
.ip-dom-cards .ip-slot { transform-origin: 50% 50%; will-change: transform; }
.ip-dom-cards .ip-slot.ip-lifted .ip-flat { visibility: hidden; }
.ip-focus-card { position: fixed; z-index: 8; pointer-events: none; object-fit: contain; will-change: transform;
  filter: drop-shadow(0 22px 26px rgba(20,40,60,.4)); }
.ip-focus-card[hidden] { display: none; }
.ip-flow { display: contents; }   /* desktop: the slots are placed on the panel as before */
.ip-flow-cap { display: none; }
/* phones: narrow screens, and touch screens turned sideways (wider than 720 px but short) */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .ip-spacer, .ip-bg, .ip-titles { display: none !important; }
  .ip-fg { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: none !important;
    scrollbar-width: none; }
  .ip-fg::-webkit-scrollbar { display: none; }
  /* custom properties are not validated: an unsupported unit (svh: iOS < 15.4, older Android / in-app browsers) would
     void --u and size the strip and every postcard to 0. Plain vw / vh first, svh only where supported. */
  #intro { --u: 1vw; --y0: 0px; }
  .ip-panel { flex: 0 0 100vw; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
  @supports (width: min(1vw, 2px)) {
    #intro { --u: min(1vw, calc(100vh / 196)); --y0: max(0px, calc((100vh - 190 * var(--u)) / 2)); }
  }
  @supports (height: 100svh) {
    #intro { --u: min(1vw, calc(100svh / 196)); --y0: max(0px, calc((100svh - 190 * var(--u)) / 2)); }
  }
  .ip-slot.ip-active { touch-action: none; z-index: 20; }
  .ip-map { left: 50%; top: calc(var(--y0) + 32 * var(--u)); transform: translateX(-50%); width: calc(88 * var(--u)); aspect-ratio: auto; height: auto; z-index: 1; }
  .ip-map:hover { transform: translateX(-50%); }
  .ip-map img { height: auto; }
  .ip-mtitle, .ip-mnext { display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); border: 0; background: none; padding: 0;
    cursor: pointer; font-family: 'Jersey 15', monospace; line-height: .8; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
  .ip-mtitle { top: calc(var(--y0) + 19 * var(--u)); font-size: calc(24 * var(--u)); z-index: 0; color: #fff; }
  .ip-mnext { top: calc(var(--y0) + 176 * var(--u)); font-size: calc(10 * var(--u)); z-index: 0; color: rgba(255,255,255,.55); gap: .1em; }
  .ip-mnext span { font-family: Poppins, sans-serif; font-weight: 200; font-size: .6em; }
  .ip-flow { display: block; position: absolute; left: 0; right: 0; top: calc(var(--y0) + 116 * var(--u)); height: calc(48 * var(--u)); z-index: 2;
    touch-action: none; }
  .ip-flow .ip-slot { left: 50%; top: 50%; }
  .ip-flow-cap { display: flex; justify-content: center; gap: .5em; position: absolute; left: 0; right: 0; top: calc(var(--y0) + 166 * var(--u)); z-index: 2;
    font-family: Poppins, sans-serif; font-size: calc(3.4 * var(--u)); color: #1b1b1f; white-space: nowrap; pointer-events: none; transition: opacity .2s; }
  .ip-flow-cap b { font-weight: 700; }
  .ip-flow-cap span { opacity: .7; }
  .ip-pill { top: calc(var(--y0) + 4.4 * var(--u)); font-size: calc(5 * var(--u)); gap: calc(2.4 * var(--u)); padding: calc(2.6 * var(--u)) calc(6.5 * var(--u)) calc(2.6 * var(--u)) calc(4.6 * var(--u)); }
  .ip-pill .ip-ball { width: calc(5.2 * var(--u)); height: calc(5.2 * var(--u)); }
  .ip-dots { bottom: 10px; bottom: calc(10px + 100lvh - 100svh); }
  .ip-tip { font-size: 13px; padding: 9px 14px; max-width: calc(100vw - 24px); white-space: normal; flex-wrap: wrap; justify-content: center; }
  .ip-team { grid-template-columns: repeat(3, 1fr); }
}