/* INTERNET BABY v5.6b — reservation landing + social glass lobby */
body.ib-reserve-mode { background:#050207; }
body.ib-reserve-mode .noise { opacity:.075; mix-blend-mode:screen; }
body.ib-reserve-mode .scanlines { opacity:.10; }

.reserve-landing {
  min-height:100svh;
  padding:0;
  overflow:auto;
  background:#050207;
}
.reserve-bg {
  position:fixed; inset:0; z-index:-4;
  background:
    linear-gradient(90deg,rgba(3,1,5,.94) 0%,rgba(4,1,6,.77) 38%,rgba(5,2,9,.38) 66%,rgba(5,1,8,.72) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.70)),
    url("./assets/reserve/city-hero.webp") center/cover no-repeat;
  transform:scale(1.015);
}
.reserve-bg::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 69% 25%,rgba(255,61,184,.19),transparent 25%),
    radial-gradient(circle at 18% 72%,rgba(123,77,255,.22),transparent 30%),
    linear-gradient(180deg,transparent 55%,#050207 100%);
}
.reserve-landing header {
  position:relative; z-index:5; min-height:82px; margin:0 4vw;
  border-bottom:1px solid rgba(255,255,255,.17);
}
.reserve-landing .wordmark { font-size:clamp(.86rem,1.15vw,1.08rem); text-shadow:0 0 24px rgba(255,61,184,.24); }
.reserve-landing .wordmark span { color:#ff3db8; }
.reserve-landing .status { color:#e3d6e5; }
.reserve-landing .status i { background:#ff3db8; box-shadow:0 0 16px #ff3db8; }

.reserve-stage {
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.72fr);
  gap:clamp(28px,5vw,86px); align-items:center;
  width:min(1600px,92vw); min-height:calc(100svh - 128px); margin:0 auto;
  padding:6vh 0 8vh;
}
.reserve-copy { max-width:920px; }
.reserve-copy .eyebrow { margin-bottom:1.2rem; color:#ffb7ee; text-shadow:0 0 14px rgba(255,61,184,.5); }
.reserve-title { margin:0; font-family:var(--display); font-size:clamp(4.8rem,10.8vw,10.7rem); line-height:.78; letter-spacing:-.07em; text-transform:uppercase; }
.reserve-title span { display:block; }
.reserve-title .outline { color:transparent; -webkit-text-stroke:2px #ff4cc7; text-shadow:0 0 30px rgba(255,61,184,.35); }
.reserve-kicker { max-width:650px; margin:1.55rem 0 0; color:#e8dfe9; font-size:clamp(.72rem,1vw,.93rem); line-height:1.7; }

.reserve-countdown-wrap { margin-top:2.1rem; }
.reserve-countdown-label { margin-bottom:.55rem; color:#ffabdd; font:700 .62rem var(--mono); letter-spacing:.18em; }
.reserve-countdown { display:grid; grid-template-columns:repeat(4,minmax(76px,118px)); gap:7px; }
.reserve-countdown .unit { padding:.75rem .8rem .7rem; border:1px solid rgba(255,255,255,.18); background:rgba(6,2,9,.68); backdrop-filter:blur(10px); box-shadow:inset 0 0 28px rgba(255,61,184,.045); }
.reserve-countdown strong { display:block; color:#fff8ef; font-family:var(--display); font-size:clamp(1.5rem,2.9vw,2.55rem); line-height:1; letter-spacing:-.04em; }
.reserve-countdown small { display:block; margin-top:.35rem; color:#a995ae; font-size:.46rem; letter-spacing:.15em; }
.reserve-date { margin-top:.55rem; color:#95849c; font-size:.53rem; letter-spacing:.08em; }

.reserve-form {
  width:min(670px,100%); margin-top:1.7rem; padding:1rem;
  border:1px solid rgba(255,255,255,.20); background:rgba(7,3,10,.78); backdrop-filter:blur(16px);
  box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 0 55px rgba(123,77,255,.05);
}
.reserve-form-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.reserve-form-head strong { font-family:var(--display); font-size:clamp(1.15rem,2vw,1.75rem); letter-spacing:-.03em; }
.reserve-form-head span { color:#ff88d1; font-size:.5rem; letter-spacing:.13em; }
.reserve-type-row { display:flex; gap:6px; margin-bottom:.65rem; }
.reserve-type { min-height:31px; padding:0 .72rem; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.035); color:#9f92a5; cursor:pointer; font:700 .54rem var(--mono); letter-spacing:.1em; }
.reserve-type.active { border-color:#ff3db8; color:#fff8ef; background:rgba(255,61,184,.14); box-shadow:0 0 18px rgba(255,61,184,.12); }
.reserve-entry-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.reserve-entry-row input { min-width:0; min-height:50px; padding:0 .9rem; border:1px solid rgba(255,255,255,.18); outline:none; background:#0a060d; color:#fff8ef; font:700 .74rem var(--mono); letter-spacing:.04em; }
.reserve-entry-row input:focus { border-color:#ff3db8; box-shadow:0 0 0 2px rgba(255,61,184,.11); }
.reserve-entry-row button { min-width:190px; min-height:50px; padding:0 1rem; border:0; background:#ff3db8; color:#09040b; cursor:pointer; font:700 .68rem var(--mono); letter-spacing:.09em; }
.reserve-entry-row button:disabled { opacity:.5; cursor:wait; }
.reserve-consent { display:flex; align-items:flex-start; gap:.55rem; margin-top:.7rem; color:#9e91a4; font-size:.50rem; line-height:1.55; }
.reserve-consent input { accent-color:#ff3db8; margin-top:.14rem; }
.reserve-form-status { min-height:17px; margin:.55rem 0 0; color:#bbaec0; font-size:.53rem; letter-spacing:.06em; }
.reserve-form-status.good { color:#c7ff2f; }
.reserve-form-status.bad { color:#ff9b78; }

.reserve-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.85rem; }
.reserve-preview-button { min-width:260px; min-height:52px; border:1px solid rgba(199,255,47,.7); background:#c7ff2f; color:#09040b; cursor:pointer; font:700 .67rem var(--mono); letter-spacing:.1em; transition:.18s ease; }
.reserve-preview-button:disabled { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#786d7c; cursor:not-allowed; }
.reserve-preview-note { align-self:center; max-width:310px; color:#96879b; font-size:.49rem; line-height:1.45; }

.reserve-visuals { position:relative; min-height:620px; align-self:center; }
.reserve-card { position:absolute; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:#09040c; box-shadow:0 28px 65px rgba(0,0,0,.55); }
.reserve-card img { width:100%; height:100%; display:block; object-fit:cover; }
.reserve-card.main { top:2%; right:2%; width:78%; aspect-ratio:16/10; transform:rotate(1.2deg); }
.reserve-card.main::after { content:"LIVE // CITY PREVIEW"; position:absolute; left:12px; bottom:10px; padding:5px 7px; background:rgba(4,1,6,.82); color:#ff8ad3; font:700 .48rem var(--mono); letter-spacing:.12em; }
.reserve-card.fm { left:0; bottom:8%; width:54%; aspect-ratio:1; transform:rotate(-2.2deg); }
.reserve-card.radio { right:1%; bottom:0; width:58%; aspect-ratio:16/9; transform:rotate(2.1deg); }
.reserve-hand { position:absolute; right:-3%; top:48%; width:42%; opacity:.33; mix-blend-mode:screen; filter:drop-shadow(0 0 30px rgba(80,145,255,.22)); pointer-events:none; }
.reserve-glowline { position:absolute; z-index:-1; left:8%; right:-8%; top:43%; height:1px; background:linear-gradient(90deg,transparent,#ff3db8,#7b4dff,transparent); box-shadow:0 0 24px #ff3db8; transform:rotate(-12deg); }

.reserve-footer { position:relative; z-index:4; display:flex; justify-content:space-between; gap:1rem; padding:16px 4vw 20px; border-top:1px solid rgba(255,255,255,.12); color:#756a79; font-size:.49rem; letter-spacing:.11em; background:rgba(4,1,6,.70); }
.reserve-footer strong { color:#cfc4d2; }
.reserve-compat-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; }

/* Locked in-world preview: keep only the radio and a minimal preview HUD. */
body.ib-reserve-mode #fpsHud,
body.ib-reserve-mode #scoreboardOverlay,
body.ib-reserve-mode #deathOverlay,
body.ib-reserve-mode #announcementBanner,
body.ib-reserve-mode .crosshair,
body.ib-reserve-mode .hud-help,
body.ib-reserve-mode #hostButton,
body.ib-reserve-mode #weaponToggleButton,
body.ib-reserve-mode #debugButton,
body.ib-reserve-mode #unstuckButton,
body.ib-reserve-mode #respawnButton { display:none!important; }
body.ib-reserve-mode #networkHud { pointer-events:none; }
body.ib-reserve-mode #chatPanel { display:flex!important; pointer-events:auto; max-height:min(330px,42vh); }
body.ib-reserve-mode .online-pill { display:flex!important; }
body.ib-reserve-mode #musicPlayer { pointer-events:auto; }
body.ib-reserve-mode #exitButton { pointer-events:auto; background:rgba(4,2,7,.74); }
body.ib-reserve-mode .top-controls { z-index:36; }

.reserve-preview-hud { position:fixed; z-index:34; top:22px; left:50%; transform:translateX(-50%); min-width:min(520px,calc(100vw - 34px)); padding:10px 14px; border:1px solid rgba(255,61,184,.43); background:rgba(6,2,9,.72); backdrop-filter:blur(12px); text-align:center; pointer-events:none; box-shadow:0 10px 35px rgba(0,0,0,.34),0 0 28px rgba(255,61,184,.08); }
.reserve-preview-hud small { display:block; color:#ff76ca; font:700 .48rem var(--mono); letter-spacing:.17em; }
.reserve-preview-hud strong { display:block; margin-top:4px; font-family:var(--display); font-size:clamp(.9rem,2vw,1.25rem); letter-spacing:.015em; }
.reserve-preview-hud span { display:block; margin-top:4px; color:#b8a9bf; font-size:.50rem; letter-spacing:.07em; }
.reserve-preview-hud.flash { animation:reserveFlash .35s ease; }
@keyframes reserveFlash { 50% { border-color:#c7ff2f; box-shadow:0 0 40px rgba(199,255,47,.24); } }

@media (max-width:980px) {
  .reserve-stage { grid-template-columns:1fr; padding-top:4vh; }
  .reserve-copy { max-width:780px; }
  .reserve-visuals { min-height:470px; width:min(700px,100%); }
  .reserve-title { font-size:clamp(4.3rem,17vw,8rem); }
}
@media (max-width:640px) {
  .reserve-landing header { margin:0 18px; min-height:68px; }
  .reserve-stage { width:calc(100% - 36px); gap:24px; padding:5vh 0 42px; }
  .reserve-title { font-size:clamp(3.7rem,18vw,6.2rem); }
  .reserve-countdown { grid-template-columns:repeat(4,1fr); }
  .reserve-countdown .unit { padding:.62rem .45rem; }
  .reserve-entry-row { grid-template-columns:1fr; }
  .reserve-entry-row button { min-width:0; }
  .reserve-form-head { align-items:flex-start; flex-direction:column; gap:.35rem; }
  .reserve-visuals { min-height:390px; }
  .reserve-card.main { width:90%; }
  .reserve-card.fm { width:50%; bottom:4%; }
  .reserve-card.radio { width:64%; }
  .reserve-footer { flex-direction:column; }
  body.ib-reserve-mode .music-player { bottom:4px; width:calc(100vw - 12px); }
}

/* v5.6b reserve lobby mobile controls: movement/chat work before premiere; fire stays locked. */
body.ib-reserve-mode #mobileControls { display:flex!important; pointer-events:none; }
body.ib-reserve-mode #mobileJoystick,
body.ib-reserve-mode #mobileLookZone,
body.ib-reserve-mode #mobileJumpButton,
body.ib-reserve-mode #mobileChatButton { pointer-events:auto; }
body.ib-reserve-mode #mobileShootButton { display:none!important; }
body.ib-reserve-mode.ib-reserve-gate-open #mobileShootButton { display:block!important; pointer-events:auto; }


/* v5.6c — release listen card + explicit 3-step reservation flow. */
.spotify-card {
  width:min(670px,100%); margin-top:1.35rem; min-height:118px; padding:10px;
  display:grid; grid-template-columns:96px minmax(0,1fr) 36px; gap:14px; align-items:center;
  border:1px solid rgba(255,255,255,.20); background:linear-gradient(110deg,rgba(8,5,12,.91),rgba(18,6,20,.82));
  color:#fff8ef; text-decoration:none; backdrop-filter:blur(15px); overflow:hidden;
  box-shadow:0 20px 58px rgba(0,0,0,.30),inset 0 0 44px rgba(255,61,184,.035); transition:.18s ease;
}
.spotify-card:hover { transform:translateY(-2px); border-color:rgba(82,255,133,.62); box-shadow:0 22px 64px rgba(0,0,0,.34),0 0 26px rgba(40,220,105,.08); }
.spotify-card img { width:96px; height:96px; object-fit:cover; display:block; border:1px solid rgba(255,255,255,.12); }
.spotify-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.spotify-copy small { color:#55e985; font:700 .48rem var(--mono); letter-spacing:.15em; }
.spotify-copy strong { font-family:var(--display); font-size:clamp(.95rem,1.65vw,1.35rem); line-height:1.05; letter-spacing:-.025em; }
.spotify-copy em { color:#b9adbD; font:700 .49rem var(--mono); font-style:normal; letter-spacing:.10em; margin-top:3px; }
.spotify-mark { color:#55e985; font-size:1.5rem; text-shadow:0 0 14px rgba(85,233,133,.46); }
.world-name-step {
  width:min(670px,100%); margin-top:.85rem; padding:1rem; border:1px solid rgba(255,255,255,.19);
  background:rgba(7,3,10,.78); backdrop-filter:blur(16px); transition:.18s ease;
}
.world-name-step[aria-disabled="true"] { opacity:.58; }
.world-name-head { display:flex; align-items:baseline; gap:.65rem; margin-bottom:.72rem; }
.world-name-head small { color:#ff79ca; font:700 .48rem var(--mono); letter-spacing:.15em; }
.world-name-head strong { font-family:var(--display); font-size:1.02rem; letter-spacing:-.02em; }
.world-name-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.world-name-row input { min-width:0; min-height:50px; padding:0 .9rem; border:1px solid rgba(255,255,255,.18); outline:none; background:#0a060d; color:#fff8ef; font:700 .74rem var(--mono); letter-spacing:.04em; }
.world-name-row input:focus { border-color:#c7ff2f; box-shadow:0 0 0 2px rgba(199,255,47,.10); }
.world-name-status { min-height:16px; margin:.55rem 0 .15rem; color:#a99bad; font-size:.52rem; letter-spacing:.06em; }
.world-name-step .reserve-preview-note { max-width:none; margin-top:.5rem; }
@media (max-width:640px) {
  .spotify-card { grid-template-columns:78px minmax(0,1fr) 20px; min-height:98px; gap:10px; }
  .spotify-card img { width:78px; height:78px; }
  .world-name-row { grid-template-columns:1fr; }
  .world-name-row .reserve-preview-button { min-width:0; }
}

.reserve-step-label { color:#ff79ca; font:700 .48rem var(--mono); letter-spacing:.15em; margin-right:.45rem; vertical-align:middle; }
/* v5.6e — keep display typography breathing consistently as the viewport narrows.
   The previous responsive sizes preserved a very tight negative tracking, which
   made the wordmark/headings feel increasingly cramped in smaller windows. */
@media (max-width:1100px), (max-height:760px) {
  .reserve-title { letter-spacing:-.045em; line-height:.82; }
  .reserve-copy .eyebrow { letter-spacing:.16em; }
  .reserve-kicker { line-height:1.78; }
  .reserve-form-head strong,
  .spotify-copy strong,
  .world-name-head strong { letter-spacing:-.012em; }
}
@media (max-width:740px) {
  .reserve-title { letter-spacing:-.025em; line-height:.86; }
  .reserve-copy .eyebrow { letter-spacing:.17em; line-height:1.55; }
  .reserve-kicker { line-height:1.82; }
  .reserve-countdown-label,
  .reserve-form-head span,
  .spotify-copy small,
  .world-name-head small,
  .reserve-step-label { letter-spacing:.16em; }
}