/* Claimverse phone orientation (Oct 31 2026). Loaded on every screen, but the sideways rules only apply when orient.js puts
   class "cv-ls" on <html>: a touch phone held sideways (short screen) AND the switch landscapeOn = 1 (or team preview).
   PC / laptop / TV never get "cv-ls", so the big layout stays exactly as it is. Portrait phones are not touched. */
html.cv-ls{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--lsx:calc(var(--sl) + 8px);--lsr:calc(var(--sr) + 8px)}
/* top row: logo left, search middle, settings right */
html.cv-ls .top{left:var(--lsx)!important;right:auto!important;top:calc(6px + var(--safe-t))!important;flex-direction:row!important;align-items:center!important;gap:8px!important;max-width:42vw!important}
html.cv-ls .brand{max-width:100%!important;padding:3px 12px 3px 4px!important;flex:0 0 auto!important}
html.cv-ls .brand img,html.cv-ls .brand .logo-mark{width:26px!important;height:26px!important}
html.cv-ls .brand h1{font-size:1.02rem!important}
html.cv-ls .brand .tagline{display:none!important}
html.cv-ls .stats{display:none!important}
html.cv-ls body.stats-open .stats{display:flex!important;position:static!important;flex:1 1 auto!important;min-width:0!important;flex-wrap:nowrap!important;overflow-x:auto!important;margin:0!important;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)!important;mask-image:linear-gradient(90deg,#000 85%,transparent)!important}
html.cv-ls .gear-btn{position:fixed!important;top:calc(6px + var(--safe-t))!important;right:var(--lsr)!important;width:38px!important;height:38px!important}
html.cv-ls .acct-btn{position:fixed!important;top:calc(6px + var(--safe-t))!important;right:calc(var(--sr) + 52px)!important}
html.cv-ls .search{left:auto!important;right:calc(var(--ls-acct,46px) + 6px)!important;top:calc(5px + var(--safe-t))!important;width:clamp(150px,calc(100vw - var(--ls-acct,46px) - 42vw - 30px),340px)!important;margin-top:0!important;border-radius:12px}
html.cv-ls .search input{padding:8px 6px}
html.cv-ls .search-results{max-height:calc(100vh - 70px)}
/* second row: news banner left, map chips right */
html.cv-ls #cvBanner{left:var(--lsx)!important;right:auto!important;transform:none!important;top:calc(48px + var(--safe-t))!important;width:min(460px,calc(100vw - var(--sl) - var(--sr) - 210px))!important;max-width:none!important}
html.cv-ls .quick{top:calc(50px + var(--safe-t))!important;right:var(--lsr)!important;max-width:200px;margin-top:0!important}
html.cv-ls .where{left:var(--lsx)!important;top:calc(50px + var(--safe-t))!important;max-width:min(380px,calc(100vw - var(--sl) - var(--sr) - 260px))!important;margin-top:0!important}
html.cv-ls body.has-banner .where{top:calc(52px + var(--bn-h,34px) + var(--safe-t))!important}
html.cv-ls .moons{left:var(--lsx)!important;right:auto!important;max-width:calc(100vw - var(--sl) - var(--sr) - 120px);top:calc(84px + var(--safe-t))!important;margin-top:0!important}
html.cv-ls body.has-banner .moons{top:calc(86px + var(--bn-h,34px) + var(--safe-t))!important}
html.cv-ls .space-chip{top:calc(50px + var(--safe-t))!important;margin-top:0!important}
html.cv-ls body.has-banner .space-chip{top:calc(52px + var(--bn-h,34px) + var(--safe-t))!important}
html.cv-ls .intro-line{left:var(--lsx)!important;right:auto!important;top:calc(84px + var(--safe-t))!important;max-width:min(380px,44vw)!important;margin-top:0!important;text-align:left}
html.cv-ls body.has-banner .intro-line{top:calc(86px + var(--bn-h,34px) + var(--safe-t))!important}
html.cv-ls .scene-title{top:calc(50px + var(--safe-t))!important;left:20vw!important;right:20vw!important}
html.cv-ls body.has-banner .scene-title{top:calc(54px + var(--bn-h,34px) + var(--safe-t))!important}
html.cv-ls .rail{right:var(--lsr)!important}
html.cv-ls .rail button small{font-size:.54rem}
/* the phone rules for the zoom bar (one button at street zoom, icons only when short) also apply sideways on wide phones */
html.cv-ls body.rail-mini:not(.rail-open) .rail button:not(.on){display:none}html.cv-ls body.rail-mini:not(.rail-open) .rail{padding:3px}
html.cv-ls .rail.compact button small{display:none}html.cv-ls .rail.compact button{padding:4px 4px;min-width:40px}html.cv-ls .rail.compact{gap:2px;padding:3px}
/* bottom row: ? and share, the menu, then the claim button, all in one line */
html.cv-ls .bottom{left:var(--lsx)!important;right:var(--lsr)!important;width:auto!important;transform:none!important;flex-direction:row!important;align-items:flex-end!important;justify-content:center!important;gap:8px!important;padding:0 0 calc(6px + var(--safe-b)) 30px!important}
html.cv-ls .bottom .fabs{position:static!important;flex-direction:row!important;order:0;gap:6px;align-self:flex-end;margin-bottom:2px}
html.cv-ls .bottom .fab{width:38px;height:38px}
html.cv-ls .dock{order:1;flex:0 1 460px;min-width:0;padding:3px!important;border-radius:16px!important}
html.cv-ls .dock button{padding:3px 2px!important;font-size:.62rem!important;border-radius:12px!important;min-width:0}
html.cv-ls .dock button .ic{width:19px!important;height:19px!important;margin:0 0 1px!important}
html.cv-ls .cta{order:2;align-self:flex-end!important;flex:none;padding:10px 16px!important;font-size:.92rem!important;white-space:nowrap;margin-bottom:2px}
html.cv-ls .bottom .pts-pill,html.cv-ls .bottom .vid-pill{left:0!important}
html.cv-ls .bottom .take-pill{left:0!important}
html.cv-ls .bottom .vid-pop{left:0!important}
html.cv-ls .pts-tip{position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(440px,62vw)!important;max-width:none!important;bottom:calc(62px + var(--safe-b))!important;max-height:calc(100vh - 190px);overflow:auto}
html.cv-ls .maplibregl-ctrl-bottom-left{bottom:calc(10px + var(--safe-b))!important;left:var(--sl)!important}
html.cv-ls .maplibregl-ctrl-bottom-right{bottom:calc(58px + var(--safe-b))!important}
html.cv-ls .maplibregl-ctrl-bottom-right{right:var(--sr)}
html.cv-ls .toast{top:calc(6px + var(--safe-t))!important;left:50%!important;right:auto!important;max-width:min(520px,70vw)!important}
/* panels open on the right side (map stays visible on the left) instead of a tall sheet from the bottom */
html.cv-ls .sheet{left:auto!important;right:var(--lsr)!important;top:calc(6px + var(--safe-t))!important;bottom:calc(6px + var(--safe-b))!important;width:min(460px,calc(100vw - var(--sl) - var(--sr) - 120px))!important;max-height:none!important;border-radius:20px!important;border-bottom:1px solid var(--line)!important;animation-name:cvLsIn!important}
html.cv-ls .sheet-body{padding-bottom:12px!important}
@keyframes cvLsIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
html.cv-ls body.cv3d #ptsTip,html.cv-ls body.walking #ptsTip,html.cv-ls body:has(.sheet:not([hidden])) #ptsTip{display:none!important}
/* placing your home */
html.cv-ls .placer-hint{top:calc(50px + var(--safe-t))!important;left:calc(var(--sl) + 60px)!important;right:calc(var(--sr) + 60px)!important;margin-top:0!important}
html.cv-ls body.has-banner .placer-hint{top:calc(54px + var(--bn-h,34px) + var(--safe-t))!important}
html.cv-ls body.placing .where,html.cv-ls body.placing .moons,html.cv-ls body.placing .intro-line,html.cv-ls body.placing .space-chip{display:none!important}
html.cv-ls .placer-bar{left:var(--lsx)!important;right:var(--lsr)!important;bottom:calc(8px + var(--safe-b))!important}
/* pop-ups: centred, never taller than the screen */
html.cv-ls .welcome{align-items:center!important;padding:8px calc(var(--sr) + 8px) 8px calc(var(--sl) + 8px)!important}
html.cv-ls .wel-card{max-height:calc(100vh - 16px);overflow:auto;width:min(560px,100%)!important;padding:14px 16px 10px!important}
html.cv-ls .wel-h{margin:2px 30px 6px!important;font-size:1.3rem!important}
html.cv-ls .wel-steps{margin-bottom:8px!important}
html.cv-ls .wel-cta{padding:11px!important}
html.cv-ls .share-modal{align-items:center!important}
html.cv-ls .sm-card{border-radius:20px!important;max-height:calc(100vh - 16px)!important}
html.cv-ls #cv3dUi .c3-walkbar{top:calc(env(safe-area-inset-top,0px) + 52px)!important;right:var(--lsr)!important}
html.cv-ls #cv3dUi .c3-joy{left:calc(var(--sl) + 40px)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)!important}

html.cv-ls .cvi-ov{padding:8px calc(var(--sr) + 8px) 8px calc(var(--sl) + 8px)!important}
html.cv-ls .cvi-box{max-height:calc(100vh - 16px)!important;width:min(520px,100%)!important}
html.cv-ls .obj-card{bottom:calc(60px + var(--safe-b))!important}
html.cv-ls .cvp-card{bottom:calc(60px + var(--safe-b))!important}
html.cv-ls .guide-card{max-height:calc(100vh - 16px);overflow:auto;width:min(420px,calc(100% - 24px))!important}

/* 3D walk on a phone held straight: "Turn your phone sideways" (shows only while walking; goes away by itself when turned) */
#cvTurn{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 80% at 50% 40%,#0d1336 0%,#05060f 70%);color:#fff;text-align:center}
#cvTurn .ct-in{max-width:320px}
#cvTurn .ct-ph{width:96px;height:96px;color:var(--gold,#ffcc4d);animation:cvTurnRot 2.4s ease-in-out infinite}
#cvTurn h2{margin:14px 0 6px;font-size:1.35rem}
#cvTurn p{margin:0 0 18px;color:var(--muted,#a6aed0);font-size:.95rem;line-height:1.4}
@keyframes cvTurnRot{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){#cvTurn .ct-ph{animation:none}}
body.cv-turn #cv3dUi{visibility:hidden}
