/* ========================================================================
   BOMBARERA APP SHELL V36
   Minimal first-paint CSS. Heavy route/game styles are activated on demand by
   StyleRuntimeV36. This file intentionally contains only global invariants,
   screen visibility, phone blocker, and the route-style loading surface.
   ======================================================================== */
:root{
  --bg:#0a0a15;
  --text:#f0f0ff;
  --text-dim:#9aa9bc;
  --font-title:'Exo 2','Exo 2',system-ui,sans-serif;
  --font-body:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);overflow:hidden}
button,input,select,textarea{font:inherit}
button,a,[role="button"]{-webkit-touch-callout:none}
button{touch-action:manipulation}
img,svg,canvas{max-width:100%}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.app{position:relative;z-index:1;flex:1 1 auto;width:100%;min-width:0;min-height:0;overflow:hidden}
.screen{position:relative;min-width:0;min-height:0}
.screen.hidden{display:none!important}
.home-canvas.hidden{display:none!important}

/* The product currently ships desktop-only. Keep the mobile blocker independent
   from the deferred legacy responsive bundle so it is available on first paint. */
.orientation-lock{display:none}
body.phone-blocked{overflow:hidden!important;background:#050912!important}
body.phone-blocked>.header,
body.phone-blocked>.app,
body.phone-blocked>.footer,
body.phone-blocked>.home-canvas,
body.phone-blocked>.bg-glow,
body.phone-blocked>.tutorial{display:none!important}
body.phone-blocked .orientation-lock{
  position:fixed;inset:0;z-index:999999;display:flex!important;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 50% 30%,rgba(94,111,255,.22),transparent 34%),radial-gradient(circle at 80% 78%,rgba(255,65,167,.14),transparent 32%),#050912
}
.orientation-lock__card{width:min(460px,100%);padding:32px 24px 28px;text-align:center;border:1px solid rgba(255,255,255,.10);border-radius:26px;background:linear-gradient(160deg,rgba(16,23,42,.97),rgba(7,11,21,.98));box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05)}
.orientation-lock__phone{width:72px;height:112px;margin:0 auto 20px;border:3px solid rgba(151,219,255,.72);border-radius:16px;position:relative}
.orientation-lock__phone::after{content:'';position:absolute;left:50%;bottom:7px;width:17px;height:3px;transform:translateX(-50%);border-radius:3px;background:rgba(255,255,255,.42)}
.orientation-lock__eyebrow{display:block;margin-bottom:10px;color:#72dfff;font:900 11px/1 var(--font-title);letter-spacing:.14em}
.orientation-lock strong{display:block;color:#fff;font:900 clamp(21px,6vw,28px)/1.2 var(--font-body)}
.orientation-lock p{margin:12px auto 0;max-width:34ch;color:#c8d5e7;font:700 16px/1.5 var(--font-body)}
.orientation-lock__hint{margin-top:18px;color:#94a8bf;font:900 11px/1 var(--font-title);letter-spacing:.12em}

/* Route CSS loading surface. Kept tiny and independent from legacy CSS. */
.route-style-loader-v36{position:fixed;inset:0;z-index:999990;display:grid;place-items:center;padding:24px;background:rgba(2,7,17,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
.route-style-loader-v36.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.route-style-loader-v36__card{width:min(390px,calc(100vw - 36px));padding:22px 22px 20px;border:1px solid rgba(125,202,255,.22);border-radius:22px;background:linear-gradient(180deg,rgba(9,22,45,.97),rgba(5,13,29,.99));box-shadow:0 28px 80px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06)}
.route-style-loader-v36__eyebrow{display:block;color:#72dcff;font:900 10px/1 var(--font-title);letter-spacing:.16em}
.route-style-loader-v36__card strong{display:block;margin-top:9px;color:#fff;font:1000 22px/1.05 var(--font-body)}
.route-style-loader-v36__status{margin-top:8px;color:#b9c9dc;font:800 13px/1.35 var(--font-body)}
.route-style-loader-v36__track{height:5px;margin-top:16px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}
.route-style-loader-v36__track i{display:block;width:18%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65ddff,#9d77ff);animation:v36RouteLoad 1.05s ease-in-out infinite alternate}
@keyframes v36RouteLoad{from{transform:translateX(0);width:18%}to{transform:translateX(250%);width:28%}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* V65 first-paint guard — critical and intentionally part of app-shell. */
.boot-screen-v65{position:fixed;inset:0;z-index:1000000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 36%,rgba(82,110,255,.18),transparent 30%),radial-gradient(circle at 68% 66%,rgba(188,77,255,.10),transparent 28%),#07101d;opacity:1;visibility:visible;transition:opacity .22s ease,visibility .22s ease}
.boot-screen-v65.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.boot-screen-v65__card{width:min(360px,calc(100vw - 40px));display:grid;justify-items:center;text-align:center}
.boot-screen-v65__mark{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(114,210,255,.26);background:linear-gradient(145deg,rgba(80,189,255,.16),rgba(160,91,255,.18));box-shadow:0 0 34px rgba(93,153,255,.13),inset 0 1px 0 rgba(255,255,255,.07)}
.boot-screen-v65__mark img{width:46px;height:46px;display:block}
.boot-screen-v65__brand{margin-top:14px;color:#f5f9ff;font:900 19px/1 var(--font-body);letter-spacing:.02em}.boot-screen-v65__brand em{font-style:normal;color:#b984ff}
.boot-screen-v65__status{margin-top:9px;color:#8fa5bd;font:700 11px/1.3 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.boot-screen-v65__track{width:170px;height:4px;margin-top:16px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}
.boot-screen-v65__track i{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65ddff,#a978ff,#ffd05e);animation:bootV65 1s ease-in-out infinite alternate}
@keyframes bootV65{from{transform:translateX(-65%)}to{transform:translateX(205%)}}
@media (prefers-reduced-motion:reduce){.boot-screen-v65__track i{animation:none;width:100%;opacity:.7}}