/* variant B ("the field"): one 3D world — the wordmark, the menu and a field of doors + open doorways around them */
#view { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
#field { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
body.b #portal { position: absolute; inset: auto; pointer-events: none; opacity: 0; }
#wordmark { position: absolute; pointer-events: none; overflow: visible; fill: var(--grey); opacity: 0; visibility: hidden; }
body.b #menu { top: 0; }
/* Give transformed menu lettering twice the raster detail while retaining its
   original layout, touch targets and accessible labels. */
body.b #menu .opt { position: relative; }
body.b #menu .opt-size { visibility: hidden; }
body.b #menu .opt-label { position: absolute; left: 50%; top: 50%; font-size: 2em; line-height: 1; letter-spacing: .005em; transform: translate(-50%, -50%) scale(.5); pointer-events: none; }

/* each piece is a small 3D object (js/field.js): a door = its frontal art + the edges of its slab; a doorway = frame
   art + jambs going back + the world canvas behind. Opacity is set per face (an opacity on the piece would flatten it).
   A layer's own edge is not anti-aliased in 3D, so every face keeps a transparent margin and its visible edge falls
   inside the texture: the art has transparent padding, the solid faces a 1 px transparent border, the world a bleed. */
.item { position: absolute; left: 0; top: 0; pointer-events: none; transform-style: preserve-3d; will-change: transform; }
/* Project phone pieces directly through #view's lens. Their transforms include
   the camera, so flattening the wordmark's layer cannot flatten the door field. */
#view.phone-depth > .item { left: 50%; top: 50%; transform-origin: 0 0; }
#view.phone-depth { overflow: visible; transform-style: preserve-3d; }
.item .face { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.item .face.rim { box-sizing: border-box; border: 1px solid transparent; background-clip: padding-box; }

#phonePan { display: contents; }
#phonePan.phone-pan { display: block; position: fixed; inset: 0; z-index: 3; overflow: hidden; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab; }
#phonePan.phone-pan.dragging { cursor: grabbing; }
#phonePan.phone-pan.pan-locked { pointer-events: none; touch-action: auto; }
body.b #trailer.on { pointer-events: auto; }
#flightSurface { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; }
#flightSurface[hidden] { display: none; }

/* ── the closing card (10-02): its own look — pink paper with an ink outline, left-aligned; the community (a row of
      the game's blocky heads), a hello in the language you picked, the language as a flag pill — centred, compact.
      (10-02 b: no kicker pill — the crew row heads the card, the headline right under it) ── */
#popup { align-items: center; padding: 16px; background: rgba(10,12,28,.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#popup.hidden { display: none; }
#popup .card { background: #F4A8DD; border: 2.5px solid #141612; border-radius: 28px; padding: 22px 22px 20px; width: min(336px, 100%); text-align: left;
  box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 -5px 0 rgba(20,22,18,.08); animation: popSpring .7s cubic-bezier(.2,1.35,.35,1) both; backdrop-filter: none; -webkit-backdrop-filter: none; }
#popup.out { animation: popFade .3s ease both; }
#popup.out .card { animation: popOut .3s ease both; }
@keyframes popSpring { from { opacity: 0; transform: translateY(40px) scale(.72) rotate(3deg); } }
@keyframes popFade { to { opacity: 0; } }
#popup .pop-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
#popup .pop-crew svg { display: block; }
#popup .pop-crew svg g { animation: popHop 2.6s ease-in-out infinite; }
#popup .pop-crew svg g:nth-child(2) { animation-delay: .18s; } #popup .pop-crew svg g:nth-child(3) { animation-delay: .36s; }
#popup .pop-crew svg g:nth-child(4) { animation-delay: .54s; } #popup .pop-crew svg g:nth-child(5) { animation-delay: .72s; }
@keyframes popHop { 0%, 30%, 100% { translate: 0 0; } 15% { translate: 0 -4px; } }
#popup .pop-hi { position: relative; font: 700 13px 'Sora', sans-serif; background: #fff; border: 2px solid #141612; border-radius: 12px; padding: 5px 10px 6px; color: #141612;
  animation: popHi .6s .5s cubic-bezier(.2,1.6,.4,1) both; }
#popup .pop-hi::before { content: ''; position: absolute; left: -7px; top: 50%; width: 10px; height: 10px; background: #fff; border-left: 2px solid #141612; border-bottom: 2px solid #141612;
  transform: translateY(-50%) rotate(45deg); }
@keyframes popHi { from { opacity: 0; transform: scale(.4); } }
#popup h2 { margin: 0 0 10px; font: 800 31px/1.08 'Outfit', 'Sora', sans-serif; letter-spacing: -.03em; color: #141612; }
#popup h2 .g { color: rgba(20,22,18,.5); }
#popup .pop-lang { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 2px solid #141612; border-radius: 999px; padding: 1px 12px 3px 6px;
  font-size: 26px; vertical-align: 2px; white-space: nowrap; }
#popup .pop-flag { display: inline-block; width: 26px; height: 18px; border: 1.8px solid #141612; border-radius: 5px; overflow: hidden; box-sizing: border-box; background: #fff; }
#popup .pop-flag:empty { display: none; }
#popup .pop-flag svg { display: block; width: 100%; height: 100%; }
#popup .pop-sub { margin: 0 0 20px; font: 500 13.5px/1.45 'Sora', sans-serif; color: rgba(20,22,18,.72); }
#popup .cta { display: flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 18px; border-radius: 999px; border: 2.5px solid #141612; white-space: nowrap;
  background: #fff; color: #141612; font: 600 16.5px 'Sora', sans-serif; text-decoration: none; transition: background .15s, color .15s; }
#popup .cta .arr { font-size: 22px; line-height: 1; }
#popup .cta:hover { background: #141612; color: #fff; }
/* (10-02) the call to action POPS into existence a second after the card — the trailer's role-pill pop (fx/pillheap.js:
   at full colour from 30% size, snapped to full in .12 s, swelling 13% and settling by .25 s, a small turn undone) */
#popup .cta { visibility: hidden; }
#popup .cta.pop { visibility: visible; animation: ctaPop .25s linear both; }
@keyframes ctaPop { 0% { transform: scale(.3) rotate(-5deg); } 12% { transform: scale(.705) rotate(-3.6deg); } 24% { transform: scale(.931) rotate(-2.4deg); }
  36% { transform: scale(1.064) rotate(-1.4deg); } 48% { transform: scale(1.116) rotate(-.6deg); } 60% { transform: scale(1.13) rotate(0deg); }
  72% { transform: scale(1.116); } 84% { transform: scale(1.076); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #popup .cta.pop { animation: none; } }