*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020912;color:#fff;font-family:Arial,sans-serif}#app{position:fixed;inset:0;background:url('assets/background.png') center/cover no-repeat}#rotate{display:none}
header{position:absolute;z-index:25;left:2.4vw;right:2vw;top:2vh;display:flex;justify-content:space-between;align-items:start;height:10vh}.dock{min-width:260px;min-height:60px}.headerActions{margin-left:auto;display:flex;gap:8px}.headerActions button{background:#02122270;border:1px solid #59e5ff;color:#fff;border-radius:10px;padding:8px 11px;font-weight:800}
.spinoptLogo{display:flex;align-items:center;font-size:clamp(26px,3.2vw,50px);font-weight:900;text-shadow:0 3px 12px #000;position:relative}.spinoptLogo>span{color:#fff}.spinoptLogo>em{font-style:normal;color:#57ef7c}.spinoptLogo small{position:absolute;left:0;top:102%;font-size:.22em;letter-spacing:.38em;white-space:nowrap;color:#d7f7ff}.compassO{position:relative;width:.92em;height:.92em;margin:0 .03em;border:3px solid #5deaff;border-radius:50%;box-shadow:0 0 12px #36dfff;display:inline-block}.wheelMark:before,.wheelMark:after{content:"";position:absolute;left:50%;top:50%;background:#5deaffaa;transform:translate(-50%,-50%)}.wheelMark:before{width:2px;height:72%}.wheelMark:after{height:2px;width:72%}.needle{position:absolute;inset:8%;animation:needleSpin 2.2s linear infinite}.needle:before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);border-left:.12em solid transparent;border-right:.12em solid transparent;border-bottom:.38em solid #45ef76;filter:drop-shadow(0 0 4px #45ef76)}@keyframes needleSpin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.needle{animation:none}}
.intro{position:absolute;inset:0;z-index:60;background:linear-gradient(90deg,rgba(1,10,19,.18),rgba(1,10,19,.02));transition:opacity .6s}.intro .spinoptLogo{position:absolute;left:8vw;top:24vh;font-size:clamp(45px,6vw,92px);transition:all 1s cubic-bezier(.2,.8,.2,1)}.introCopy{position:absolute;left:8vw;top:48vh;width:min(42vw,650px);text-shadow:0 2px 9px #000}.introCopy h1{font-size:clamp(24px,2.7vw,45px);margin:0;color:#7beaff}.introCopy p{font-size:clamp(12px,1.1vw,18px);line-height:1.45}.introCopy button{padding:12px 24px;border-radius:12px;border:1px solid #61eaff;background:linear-gradient(#1299ef,#0754b6);color:#fff;font-weight:900;letter-spacing:.08em}.intro.docking .spinoptLogo{left:2.4vw;top:2vh;font-size:clamp(26px,3.2vw,50px)}.intro.done{opacity:0;pointer-events:none}.intro.done .spinoptLogo{visibility:hidden}
.steer{position:absolute;z-index:12;left:1.7vw;bottom:1.5vh;width:min(30vw,55vh);aspect-ratio:1}.rim{position:absolute;inset:0;border-radius:50%;border:clamp(7px,.72vw,12px) solid #030f1bdc;box-shadow:0 0 0 3px #54e1ffc7,0 0 18px #127caa;background:#020e190d}.pointer{position:absolute;z-index:8;left:50%;top:-1%;transform:translateX(-50%);border-left:17px solid transparent;border-right:17px solid transparent;border-top:40px solid #61eaff;filter:drop-shadow(0 0 7px #61eaff)}#wheel{position:absolute;inset:6%;border-radius:50%;border:2px solid #5de8ff;transition:transform 4.1s cubic-bezier(.12,.72,.08,1)}#wheel:after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#64e6ff70 0 .4deg,transparent .4deg 45deg)}#labels{position:absolute;inset:6%;z-index:6;pointer-events:none}.lab{position:absolute;font-size:clamp(8px,.72vw,13px);font-weight:800;white-space:nowrap;text-shadow:0 2px 5px #000}#hub{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:22%;aspect-ratio:1;border-radius:50%;border:3px solid #61eaff;background:#01101ddd;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}#hub b{font-size:clamp(14px,1.35vw,23px)}#hub small{font-size:clamp(5px,.34vw,7px);color:#5ff47e}
.dash{position:absolute;left:28.8vw;right:2vw;bottom:2.8vh;height:36vh;display:grid;grid-template-rows:43% 57%;gap:1vh}.panel{position:relative;border:1px solid #4dd8ff6e;border-radius:15px;background:#02111f3a;backdrop-filter:blur(2px);padding:.6vh 2.2vw;overflow:hidden}.top h3{text-align:center;color:#79eaff;font-size:clamp(10px,.95vw,16px);margin:.2vh 0 .4vh}.scroll{display:flex;overflow-x:auto;gap:.5vw;scrollbar-width:none;touch-action:pan-x}.scroll::-webkit-scrollbar{display:none}#cats{height:78%}.cat,.choice{flex:0 0 clamp(72px,7.5vw,118px);border:1px solid #53dcff40;border-radius:11px;background:#04162645;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.cat.sel,.choice.sel{border-color:#65efff;background:#187da53f}.cat i{font-style:normal;font-size:clamp(21px,2.4vw,38px)}.cat span,.choice span{font-size:clamp(7px,.62vw,10px);font-weight:700}.bar{height:16%;display:flex;align-items:center;justify-content:center;gap:12px;color:#bceeff;font-size:clamp(8px,.7vw,12px)}#count{color:#60ef7d}#choices{height:52%}.choice{height:94%}.choice svg{width:38%;height:38%;stroke:#8ceeff;fill:none;stroke-width:2}.bottom nav{height:32%;display:grid;grid-template-columns:.8fr .9fr 1.35fr 1.45fr;gap:.5vw;align-items:center}.bottom nav button{height:78%;border-radius:10px;border:1px solid #53dcff61;background:#03192ca8;color:#fff;font-weight:800;font-size:clamp(7px,.66vw,11px)}#custom{border-color:#e7b946;color:#ffe08a}#spin{background:linear-gradient(#1594f5e0,#0755b7e0);border-color:#73e7ff}.chev{position:absolute;z-index:10;top:48%;transform:translateY(-50%);width:30px;height:55%;border:0;background:linear-gradient(90deg,rgba(2,15,27,.55),transparent);color:#82efff;font-size:30px;opacity:.55}.chev.left{left:2px}.chev.right{right:2px;transform:translateY(-50%) rotate(180deg)}.chev.lower{top:52%}
#result{position:absolute;right:4vw;top:18vh;z-index:30;width:29vw;min-height:22vh;border:1px solid #5de8ff;border-radius:18px;background:#01111fbd;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateX(135%) scale(.9);opacity:0;transition:.55s;pointer-events:none}#result.show{transform:translateX(0) scale(1);opacity:1;pointer-events:auto;box-shadow:0 0 35px #28a9d866}#result small{color:#7feeff;letter-spacing:.2em}#result strong{font-size:clamp(28px,4vw,60px);margin:10px 0;text-shadow:0 0 13px #45dfff}#result button{border:1px solid #5eeaff;background:#176f8f66;color:#fff;padding:8px 17px;border-radius:9px;font-weight:800}
#modal{position:fixed;inset:0;z-index:70;background:#000a;display:grid;place-items:center}.hide{display:none!important}.card{width:min(600px,70vw);max-height:80vh;overflow:auto;background:#061827;border:1px solid #59e6ff;border-radius:17px;padding:20px;position:relative}.card input{width:100%;margin:4px 0;padding:9px;background:#03111d;border:1px solid #2c7695;border-radius:8px;color:#fff}.card #close{position:absolute;right:10px;top:8px;background:none;border:0;color:#fff;font-size:26px}.card footer{display:flex;gap:9px;margin-top:10px}.card footer button{flex:1;padding:10px;border:1px solid #55dfff;border-radius:8px;background:#0a3550;color:#fff;font-weight:800}.copyright{position:absolute;right:2vw;bottom:.5vh;font-size:clamp(6px,.5vw,9px);color:#d9f7ffb8;z-index:15}
@media(orientation:portrait){#app{display:none}#rotate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(circle at 50% 35%,#0c3854,#020912 68%);padding:25px}.rotateCompass{font-size:80px;color:#55eaff}}
.bottom nav{grid-template-columns:.8fr .7fr 1fr 1.3fr 1.05fr!important}#socialBody select{width:100%;padding:10px;margin:6px 0;border:1px solid #2c7695;border-radius:8px;background:#03111d;color:#fff}.headerActions button{min-width:46px}.crumb{height:22%;display:flex;align-items:center;justify-content:center;gap:10px;color:#9ceeff;font-size:clamp(8px,.7vw,12px);letter-spacing:.08em}.crumb .mini{position:absolute;left:2.2vw}.resultActions{display:flex;gap:7px}.resultActions button{font-size:clamp(7px,.6vw,10px)}#customTitle{width:100%;margin:5px 0 10px;padding:10px;background:#03111d;border:1px solid #2c7695;border-radius:8px;color:#fff}
/* V4.1 navigation/branding patch */
#missionsBack{
  background:rgba(3,25,44,.46)!important;
  color:#9ceeff!important;
  border:1px solid rgba(83,220,255,.42)!important;
  border-radius:10px!important;
  font-family:Arial,sans-serif!important;
  font-size:clamp(7px,.62vw,10px)!important;
  font-weight:700!important;
  letter-spacing:.05em!important;
  padding:6px 10px!important;
  box-shadow:0 0 8px rgba(70,220,255,.10);
}
#missionsBack:hover,#missionsBack:active{border-color:#65efff!important;background:rgba(24,125,165,.30)!important;box-shadow:0 0 12px rgba(70,220,255,.28)}
#fullscreen{color:#9ceeff}
@media(orientation:portrait){
  #rotate{gap:14px}
  #rotate .portraitBrand{position:relative;left:auto;top:auto;font-size:clamp(38px,10vw,70px);margin-bottom:40px}
  #rotate .portraitBrand small{font-size:.22em}
  #rotate .compassO{border-color:#5deaff}
  #rotate .needle{animation:needleSpin 2.2s linear infinite}
  #rotate h1{font-size:clamp(25px,7vw,42px);margin:0}
  #rotate p{font-size:clamp(16px,4vw,24px);margin:8px 0}
}

/* V4.2 clarity/social patch */
.headerActions{gap:5px!important}
.headerActions button{
  min-width:0!important;
  padding:5px 8px!important;
  font-size:clamp(7px,.58vw,10px)!important;
  background:rgba(2,18,34,.18)!important;
  border-color:rgba(89,229,255,.32)!important;
  opacity:.78;
  backdrop-filter:blur(2px);
}
.headerActions button:hover,.headerActions button:active{opacity:1;background:rgba(2,35,55,.34)!important}
.challengeHint{font-size:12px;color:#bceeff}
.challengeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:32vh;overflow:auto;margin:8px 0}
.challengePick{padding:8px 5px;border:1px solid rgba(83,220,255,.28);border-radius:8px;background:rgba(3,25,44,.52);color:#fff;font-size:11px}
.challengePick.selected{border-color:#65efff;background:rgba(24,125,165,.42);box-shadow:0 0 8px rgba(70,220,255,.22)}
.challengeCount{text-align:right;color:#62ef80;font-size:11px;margin-bottom:7px}
#challengeTitle{width:100%;padding:10px;margin:5px 0;border:1px solid #2c7695;border-radius:8px;background:#03111d;color:#fff}

/* =========================================================
   V4.3 LOCKED DASHBOARD REGISTRATION
   Background is immutable: centred cover, never stretched.
   Wheel + dash displays share one calibrated viewport system.
   ========================================================= */
#app{
  background-image:url('assets/background.png')!important;
  background-position:50% 50%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* Physical steering-wheel registration */
.steer{
  left:1.45vw!important;
  bottom:1.55vh!important;
  width:min(29.2vw,54.5vh)!important;
  aspect-ratio:1/1!important;
}

/* Physical dashboard screen registration */
.dash{
  left:28.95vw!important;
  right:1.85vw!important;
  bottom:2.35vh!important;
  height:35.15vh!important;
  grid-template-rows:42.5% 57.5%!important;
  gap:.72vh!important;
}
.panel{
  padding:.52vh 2.05vw!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
.crumb{height:21%!important}
#cats{height:79%!important;align-items:center!important}
.bar{height:15%!important}
#choices{height:53%!important;align-items:center!important}
.bottom nav{height:32%!important}

/* Prevent cards/controls from growing beyond the painted dash bays */
.cat,.choice{
  max-height:92%!important;
  min-height:0!important;
}
.bottom nav button{
  max-height:78%!important;
  min-height:0!important;
}

/* Keep overlays subordinate to scenery */
.rim{border-width:clamp(6px,.62vw,10px)!important}
.headerActions{right:0!important}
.copyright{bottom:.35vh!important}

/* Calibrated variants for common landscape ratios.
   Background remains cover; only overlay registration changes. */
@media (orientation:landscape) and (max-aspect-ratio:1.55/1){
  .steer{left:1.1vw!important;bottom:1.7vh!important;width:min(30.2vw,53.5vh)!important}
  .dash{left:29.7vw!important;right:1.4vw!important;bottom:2.5vh!important;height:34.7vh!important}
}
@media (orientation:landscape) and (min-aspect-ratio:1.56/1) and (max-aspect-ratio:1.85/1){
  .steer{left:1.45vw!important;bottom:1.55vh!important;width:min(29.2vw,54.5vh)!important}
  .dash{left:28.95vw!important;right:1.85vw!important;bottom:2.35vh!important;height:35.15vh!important}
}
@media (orientation:landscape) and (min-aspect-ratio:1.86/1){
  .steer{left:1.8vw!important;bottom:1.35vh!important;width:min(28.2vw,55vh)!important}
  .dash{left:28.25vw!important;right:1.65vw!important;bottom:2.15vh!important;height:35.4vh!important}
}

/* Short-height landscape phones */
@media (orientation:landscape) and (max-height:500px){
  .steer{bottom:1.1vh!important;width:min(28vw,56vh)!important}
  .dash{bottom:1.7vh!important;height:36.2vh!important}
  .panel{padding-top:.35vh!important;padding-bottom:.35vh!important}
  .cat span,.choice span{font-size:clamp(6px,.58vw,9px)!important}
}

/* =========================================================
   V4.4 REAL DASH INTEGRATION LOCK
   The artwork IS the dashboard. UI containers add no panel.
   ========================================================= */

/* Row 1 + Row 2 structural containers are fully transparent */
.dash .panel,
.dash .panel.top,
.dash .panel.bottom{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  border-color:transparent!important;
}

/* No artificial dark layer behind either horizontal display */
#cats,#choices,.bar,.crumb{
  background:transparent!important;
  box-shadow:none!important;
}

/* Individual controls remain subtle glass controls, not panels */
.cat,.choice{
  background:rgba(2,18,32,.10)!important;
  border-color:rgba(94,225,255,.24)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.cat.sel,.choice.sel{
  background:rgba(22,135,170,.16)!important;
  border-color:rgba(101,239,255,.72)!important;
  box-shadow:0 0 9px rgba(70,220,255,.16)!important;
}

/* Bottom action controls reveal the physical dashboard beneath */
.bottom nav{
  background:transparent!important;
  box-shadow:none!important;
}
.bottom nav button{
  background:rgba(2,18,32,.14)!important;
  border-color:rgba(83,220,255,.30)!important;
  box-shadow:none!important;
}
.bottom nav button:active,
.bottom nav button:hover{
  background:rgba(18,105,145,.20)!important;
  border-color:rgba(101,239,255,.62)!important;
}
#custom{
  background:rgba(55,43,10,.12)!important;
  border-color:rgba(231,185,70,.58)!important;
}
#spin{
  background:linear-gradient(rgba(21,148,245,.48),rgba(7,85,183,.48))!important;
  border-color:rgba(115,231,255,.72)!important;
}

/* Empty second row should visually disappear into the car dash */
#choices:empty{
  border:0!important;
  background:transparent!important;
}

/* Keep navigation hints light and integrated */
.chev{
  background:transparent!important;
  opacity:.48!important;
  text-shadow:0 0 8px rgba(80,230,255,.45);
}

/* V4.5 ROW-2 PHYSICAL DASH BAY REGISTRATION
   Preserve background, wheel, Row 1 and control-strip coordinates. */
.dash .panel.bottom{
  display:grid!important;
  grid-template-rows:16% 54% 30%!important;
  align-items:center!important;
  padding-top:1.15vh!important;
  padding-bottom:.20vh!important;
}
.dash .panel.bottom .bar{
  height:auto!important;
  align-self:center!important;
  margin:0!important;
  transform:translateY(.35vh);
}
#choices{
  height:100%!important;
  align-self:center!important;
  align-items:center!important;
  margin:0!important;
  padding-top:.25vh!important;
  padding-bottom:.25vh!important;
}
#choices .choice{
  height:78%!important;
  align-self:center!important;
}
.dash .panel.bottom nav{
  height:100%!important;
  align-self:end!important;
  margin:0!important;
  padding:0!important;
}
.dash .panel.bottom nav button{
  height:72%!important;
  align-self:center!important;
}

/* Fine calibration for short landscape phone/tablet browser viewports */
@media (orientation:landscape) and (max-height:650px){
  .dash .panel.bottom{grid-template-rows:15% 54% 31%!important;padding-top:.8vh!important}
  #choices .choice{height:76%!important}
}

/* V4.6 Row 2 simplification */
.row2Meta{display:none!important}
.dash .panel.bottom{
  grid-template-rows:68% 32%!important;
  padding-top:.30vh!important;
}
#choices{
  grid-row:1!important;
  height:100%!important;
  align-items:center!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
#choices .choice{height:72%!important}
.dash .panel.bottom nav{grid-row:2!important}
.topLink{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;
  background:rgba(2,18,34,.18);border:1px solid rgba(89,229,255,.32);
  border-radius:10px;padding:5px 8px;font-size:clamp(7px,.58vw,10px);
  font-weight:800;opacity:.78;
}
.topLink:hover,.topLink:active{opacity:1;background:rgba(2,35,55,.34)}

/* V4.7 BOTTOM CONTROL LEGIBILITY — coordinates unchanged */
.dash .panel.bottom nav{
  background:transparent!important;
}
.dash .panel.bottom nav button{
  background:rgba(1,13,24,.58)!important;
  border:1px solid rgba(101,225,255,.58)!important;
  color:#f7fdff!important;
  font-weight:900!important;
  font-size:clamp(8px,.70vw,12px)!important;
  letter-spacing:.015em!important;
  text-shadow:0 1px 3px #000,0 0 5px rgba(80,225,255,.20)!important;
  box-shadow:inset 0 0 10px rgba(36,151,196,.10),0 1px 5px rgba(0,0,0,.28)!important;
  opacity:1!important;
}
.dash .panel.bottom nav button:hover,
.dash .panel.bottom nav button:active{
  background:rgba(7,45,67,.72)!important;
  border-color:rgba(115,235,255,.88)!important;
}
#custom{
  background:rgba(35,27,4,.62)!important;
  border-color:rgba(239,193,73,.82)!important;
  color:#ffe7a0!important;
  text-shadow:0 1px 3px #000,0 0 5px rgba(239,193,73,.18)!important;
}
#spin{
  background:linear-gradient(rgba(12,113,210,.78),rgba(5,63,142,.80))!important;
  border-color:rgba(121,235,255,.90)!important;
  color:#fff!important;
}

/* V4.8 fullscreen ratio lock */
html,body,#app{width:100%;height:100%;max-width:100%;max-height:100%}
#app{
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
:fullscreen #app,
:-webkit-full-screen #app{
  width:100vw!important;height:100vh!important;
  background-size:cover!important;
  background-position:center center!important;
}
/* Never transform/scale the app canvas itself in fullscreen */
:fullscreen #app{transform:none!important;zoom:1!important}

/* =========================================================
   V4.9 TRUE SCENE MAPPING
   A blurred cover layer fills any spare fullscreen area.
   The actual dashboard artwork is always shown at its native
   1672:941 ratio using contain. UI is registered to that image.
   ========================================================= */
#app{
  background-image:url('assets/background.png')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#app:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(0,8,15,.26);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#sceneBackground{
  position:absolute;z-index:1;
  background:url('assets/background.png') center/100% 100% no-repeat;
  pointer-events:none;
}
header,.steer,.dash,#result,#modal,.copyright,.intro{z-index:12}
.steer,.dash{position:absolute!important}
/* JS writes exact pixel registration after calculating contained image rect. */

/* V5 DIRECT LOAD + HARD DASH ANCHORS */
.intro{display:none!important}
.dash{display:block!important}
.dash .panel.top,.dash .panel.bottom{margin:0!important}
#cats,#choices{margin:0!important}