/* ===== SPLASH (identical to the kiosk app's intro screen) ===== */
  .splash{
    position:fixed; inset:0; z-index:2000;
    background:#0a1530;
    overflow:hidden;
    height:100vh;
    height:100dvh;
    transition: opacity .5s ease, visibility .5s ease;
  }
  .splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .splash-stage-wrapper{
    position:relative;
    width:100vw;
    width:min(100vw, 177.68vh);
    width:min(100vw, 177.68dvh);
    margin:auto;
    top:50%; transform:translateY(-50%);
  }
  .splash-stage-spacer{ width:100%; padding-top:56.281%; }
  .splash-stage{
    position:absolute; top:0; left:0; right:0; bottom:0;
  }
  .splash-bg-img{
    position:absolute; top:0; left:0; right:0; bottom:0;
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .splash-content{
    position:absolute; top:0; left:0; right:0; bottom:0;
    z-index:1;
  }
  .splash-ring{
    position:absolute; left:50%; top:40.38%;
    width:23.33%; height:41.45%;
    transform:translate(-50%, -50%) rotate(0deg);
    border-radius:50%;
    pointer-events:none;
  }
  .splash-ring::before{
    /* crisp static gold ring outline, reinforcing the ring baked into the artwork */
    content:"";
    position:absolute; inset:0;
    border-radius:50%;
    border:2px solid rgba(243,211,135,0.55);
    box-shadow:
      0 0 14px 2px rgba(233,185,73,0.25),
      inset 0 0 14px 2px rgba(233,185,73,0.15);
  }
  .splash-orbit-wrap{
    position:absolute; left:50%; top:40.38%;
    width:23.33%; height:41.45%;
    transform:translate(-50%, -50%) rotate(0deg);
    pointer-events:none;
    animation: splashOrbit 6s linear infinite;
  }
  .splash-orbit-wrap .dot{
    position:absolute; top:0%; left:50%;
    width:5%; height:5%;
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:radial-gradient(circle, #fffaf0 0%, #f8dfa0 45%, rgba(243,211,135,0) 75%);
    box-shadow:0 0 10px 3px rgba(255,248,224,0.85), 0 0 20px 6px rgba(233,185,73,0.45);
  }
  .splash-orbit-wrap.o2{ animation-delay:-1.5s; }
  .splash-orbit-wrap.o3{ animation-delay:-3s; }
  .splash-orbit-wrap.o4{ animation-delay:-4.5s; }
  @keyframes splashOrbit{
    from{ transform:translate(-50%, -50%) rotate(0deg); }
    to{ transform:translate(-50%, -50%) rotate(360deg); }
  }
  .splash-logo-img{
    position:absolute; left:50%; top:10.5%;
    width:7.5%; height:13.4%;
    transform:translate(-50%, -50%);
    object-fit:contain;
    filter: drop-shadow(0 0 10px rgba(233,185,73,0.35));
    opacity:0;
    animation: splashLogoIn 1s ease-out both, splashLogoPulse 3s ease-in-out 1s infinite;
  }
  .splash-wordmark{
    position:absolute; left:50%; top:66.5%;
    transform:translate(-50%, -50%);
    font-weight:800; letter-spacing:0.5px; line-height:1;
    font-size:clamp(20px, 3vw, 46px);
    white-space:nowrap;
    opacity:0;
    animation: splashFadeUp2 1s ease-out 0.4s both;
  }
  .splash-wordmark .w{ color:#fff; }
  .splash-wordmark .g{
    background:linear-gradient(90deg, #f3d387, #e9b949, #f3d387);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation: splashShimmer 4s linear 1.4s infinite;
  }
  .splash-name{
    position:absolute; left:50%; top:71.5%;
    transform:translate(-50%, -50%);
    font-weight:700; color:#fff;
    font-size:clamp(11px, 1.6vw, 22px);
    white-space:nowrap;
    opacity:0;
    animation: splashFadeUp2 1s ease-out 0.8s both;
  }
  .splash-heartbeat{
    position:absolute; left:50%; top:76%;
    transform:translate(-50%, -50%);
    width:15%; height:auto;
    opacity:0;
    animation: splashFadeUp2 1s ease-out 0.9s both;
  }
  .splash-role{
    position:absolute; left:50%; top:79.8%;
    transform:translate(-50%, -50%);
    font-size:clamp(9px, 1vw, 14px); color:#f3d387;
    white-space:nowrap;
    opacity:0;
    animation: splashFadeUp2 1s ease-out 1s both;
  }
 .splash-enter-btn{
    position:absolute; left:50%; top:86%;
    transform:translate(-50%, -50%);
    /* Sized as a real touch target for kiosk-scale landscape screens, not
       just a readable label — the old clamp topped out at 11px/thin
       padding, which looks decorative rather than tappable on a large
       touchscreen even though the whole splash is also click-through. */
    padding:0.8% 2.8%; border:none; border-radius:999px;
    background:linear-gradient(135deg, #f3d387, #e9b949);
    color:#1a1204; font-weight:800; letter-spacing:0.5px; cursor:pointer;
    font-size:clamp(10px, 1vw, 15px);
    box-shadow:0 4px 10px rgba(212,169,74,0.25);
    opacity:0;
    animation: splashFadeUp2 0.9s ease-out 1.2s both, splashBtnPulse 2.6s ease-in-out 2.1s infinite;
    transition:transform .15s ease;
  }
  @keyframes splashHintPulse{
    0%,100%{ opacity:0.4; }
    50%{ opacity:0.9; }
  }

  @keyframes splashLogoIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(0.7);} to{ opacity:1; transform:translate(-50%,-50%) scale(1);} }
  @keyframes splashLogoPulse{
    0%,100%{ filter:drop-shadow(0 0 8px rgba(233,185,73,0.3)); }
    50%{ filter:drop-shadow(0 0 20px rgba(233,185,73,0.65)); }
  }
  @keyframes splashFadeUp2{ from{ opacity:0; transform:translate(-50%,-40%);} to{ opacity:1; transform:translate(-50%,-50%);} }
  @keyframes splashShimmer{ 0%{ background-position:0% center;} 100%{ background-position:200% center;} }
  @keyframes splashBtnPulse{
    0%,100%{ box-shadow:0 0 14px rgba(233,185,73,0.25); }
    50%{ box-shadow:0 0 30px rgba(233,185,73,0.6); }
  }

  @media (prefers-reduced-motion: reduce){
    .splash-logo-img, .splash-wordmark, .splash-name, .splash-enter-btn{
      animation:none !important; opacity:1 !important; transform:translate(-50%,-50%) !important;
    }
    .splash-wordmark .g{ animation:none !important; }
  }

  /* ============================================================
     MOBILE / TABLET PORTRAIT — dedicated taller layout so the
     splash actually fills a phone/tablet screen instead of
     shrinking the wide desktop artwork into a tiny strip.
     ============================================================ */
  .splash-mobile-wrapper{ display:none; }

  @media (max-width: 760px), (orientation: portrait) and (max-width: 1024px){
    .splash-stage-wrapper{ display:none; }
    .splash-mobile-wrapper{
      display:block;
      position:relative;
      width:100vw;
      height:100vh;
      height:100dvh;
      margin:auto;
    }
    .splash-mobile-spacer{ display:none; }
    .splash-mobile-stage{
      position:absolute; top:0; left:0; right:0; bottom:0;
      width:100%; height:100%;
    }
    .splash-mobile-stage .splash-bg-img{
      position:absolute; top:0; left:0; right:0; bottom:0;
      width:100%; height:100%; object-fit:cover; display:block;
    }
    .splash-mobile-stage .splash-content{
      position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;
    }
    .splash-logo-img.m{ top:15.6%; width:11%; height:9.9%; }
    .splash-wordmark.m{ top:56.25%; font-size:clamp(26px, 8vw, 42px); }
    .splash-name.m{ top:59.4%; font-size:clamp(14px, 4vw, 20px); }
    .splash-heartbeat.m{ top:62.15%; width:38%; }
    .splash-role.m{ top:64.76%; font-size:clamp(11px, 3vw, 14px); }
    .splash-enter-btn.m{ top:69.2%; padding:2.2% 7%; font-size:clamp(14px, 4vw, 17px); }
    .splash-tap-hint.m{ top:74.5%; font-size:clamp(10px, 2.6vw, 13px); }
    .splash-orbit-wrap.m{ left:50%; top:40.625%; width:44.44%; height:25%; }
  }
.splash-tap-hint{ position:absolute; left:50%; transform:translate(-50%,-50%); color:#cdd8ee; opacity:.75; white-space:nowrap; animation: splashHintPulse 2.6s ease-in-out 2s infinite; }
.splash{ cursor:pointer; }