/* Landing: phone first. The door art fills the screen (cover). */
.door-page { overflow: hidden; }
.stage { position: fixed; inset: 0; overflow: hidden; background: #050510; }
.door-art, .opening { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.door-art { filter: brightness(.9); transition: filter 1s; }
.title { position: absolute; top: 4%; left: 0; right: 0; text-align: center;
  opacity: 0; animation: fadein 2.2s ease .4s forwards; pointer-events: none; }
.title h1 { margin: 0; font-size: clamp(2.2rem, 11vw, 6rem); letter-spacing: .14em;
  text-shadow: 0 0 80px var(--neon); }
.subtitle { margin: .6em 0 0; font-size: clamp(.9rem, 4.2vw, 2rem); letter-spacing: .6em; }
/* The trigger sits low and centered, like the original, over the door. */
#trigger { opacity: 0; animation: fadein 1.4s ease 2.2s forwards, pulse 2.6s ease-in-out 3.6s infinite; }
.panel { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: min(92vw, 30rem); padding: 18px 18px 12px; text-align: center;
  background: rgba(0, 8, 16, .82); border: 2px solid rgba(0, 255, 255, .55);
  border-radius: 16px; box-shadow: 0 0 40px rgba(0, 255, 255, .35); }
.status { margin: 0 0 12px; font-size: 1.05rem; min-height: 1.4em; }
.picker { display: grid; gap: 12px; margin-bottom: 12px; }
.picker button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.picker img { width: 28px; height: 28px; }
.nowallet p { margin: .4em 0; }
.nowallet .links { display: flex; gap: 18px; justify-content: center; }
.nowallet a { color: var(--neon); }
.fine { font-size: .75rem; opacity: .75; margin: 12px 0 0; }
.opening { z-index: 5; background: #000; }
#tapopen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; }
.flash { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 35%, rgba(200,255,255,.9) 60%, rgba(0,255,255,0) 100%); }
.flash.on { animation: flash 1.1s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; background: #fff; } }
.sound-toggle { position: absolute; top: 12px; right: 12px; z-index: 20; width: 48px; height: 48px;
  border-radius: 50%; border: 2px solid var(--neon); background: rgba(0,0,0,.4); color: var(--neon);
  font-size: 1.3rem; cursor: pointer; }
.sound-toggle[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
body[data-state="verifying"] .door-art,
body[data-state="signing"] .door-art { filter: brightness(.7) saturate(1.3); }
.noscript { position: fixed; bottom: 10px; width: 100%; text-align: center; color: #0ff; }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .title, #trigger { animation: none; opacity: 1; }
  .flash.on { animation-duration: .01s; }
}
.nowallet .open-in { flex-wrap: wrap; gap: 10px; }
.nowallet .exact-url code { font-size: 1.15em; color: var(--neon); user-select: all; }
.nowallet .warn { color: #ffb347; }

/* Gate dock (AC33 + two-step): the line, wallet info and buttons stack in
   their own rows, centered and low over the door, so nothing can overlap at
   any width (320-430px phones, tablets, landscape). */
.dock { position: absolute; left: 50%; bottom: max(14%, calc(env(safe-area-inset-bottom) + 24px));
  transform: translateX(-50%); width: min(92vw, 34rem); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.6vh, 22px); }
.dock > [hidden] { display: none !important; }
.prove { margin: 0; padding: .45em .9em; max-width: 100%; text-align: center; text-wrap: balance;
  font-size: clamp(.85rem, 3.4vw, 1.1rem); line-height: 1.45; letter-spacing: .06em;
  background: rgba(0, 6, 14, .55); border-radius: 10px; }
#connect, #trigger { position: static; transform: none; max-width: 100%; }
#trigger { font-size: clamp(1rem, 4.6vw, 1.8rem); }
#connect:hover, #trigger:hover { transform: scale(1.05); }
.walletinfo { max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 8px; font-size: 15px; text-align: center; }
.walletinfo code { font-size: 15px; }
.linkish { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; opacity: .85; min-height: 32px; }
@media (max-width: 360px) { .neon-trigger { padding: 15px 24px; } .dock { gap: 12px; } }
@media (min-aspect-ratio: 4/3) { .dock { bottom: max(9%, calc(env(safe-area-inset-bottom) + 16px)); } }
@media (orientation: landscape) and (max-height: 500px) {
  .title { top: 2%; } .title h1 { font-size: clamp(1.6rem, 7vh, 3rem); } .subtitle { margin-top: .3em; }
  .dock { bottom: 5%; gap: 10px; } .prove { padding: .3em .8em; }
  .neon-trigger { padding: 10px 28px; }
}
body[data-state="connecting"] .walletinfo, body[data-state="opening"] .walletinfo { }