/* Xora World (t993): navy + old gold. Home = AstraRoad world (flagship landmarks) + persistent gold console (everyday tools).
   Transform/opacity motion only. No rainbow. */
html{--xw-gold:#D9B65F;--xw-gold-hi:#F2D98F;--xw-gold-lo:#8A6A22;--xw-navy:#060B1E}
#xw{order:-10;position:relative;margin:0 0 18px;display:flex;flex-direction:column;gap:14px}
.xw-world{position:relative;height:min(calc(100vh - 330px),620px);min-height:380px;border-radius:24px;overflow:hidden;background:radial-gradient(120% 80% at 50% 10%,#1B2B5C 0,#0A1430 55%,#040816 100%);isolation:isolate;contain:layout paint;border:1px solid rgba(217,182,95,.35);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.xw-pan{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;display:flex;align-items:center}
.xw-pan::-webkit-scrollbar{display:none}
.xw-stage{position:relative;flex:none;width:max(100%,calc(var(--xw-h,620px)*16/9));aspect-ratio:16/9;overflow:hidden;will-change:transform}
.xw-art,.xw-fg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .7s ease}
.xw-fg{inset:-2%;pointer-events:none;will-change:transform}
#xw.xw-lit .xw-art,#xw.xw-fg-on .xw-fg,#xw-guest.xw-lit .xw-art,#xw-guest.xw-fg-on .xw-fg{opacity:1}
/* t1333 mobile speed: a small compressed world (AVIF, WebP fallback, ~12 KB, preloaded in <head>) shows the moment the world is built;
   world.js swaps in the full painted world after the page has loaded. */
.xw-art{opacity:1;transition:none;background-image:url(/assets/console/world/world-lqip-480.webp);background-image:image-set(url(/assets/console/world/world-lqip-480.avif) type("image/avif"),url(/assets/console/world/world-lqip-480.webp) type("image/webp"))}
.xw-stars{position:absolute;inset:-5% -10% 40% -10%;background-image:radial-gradient(1.2px 1.2px at 10% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 60%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 55% 15%,#FFE7A8 50%,transparent 51%),radial-gradient(1px 1px at 75% 40%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 90% 10%,#fff 50%,transparent 51%);background-size:220px 160px;opacity:.55;animation:xwTw 6s ease-in-out infinite alternate;pointer-events:none;will-change:transform}
@keyframes xwTw{to{opacity:.25}}
.xw-motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* landmark pills (translate property, so global :active resets can't move them mid-tap) */
.xw-pill{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid rgba(217,182,95,.75);background:linear-gradient(180deg,rgba(14,22,48,.88),rgba(6,10,26,.94));color:#FFF6DC;font-weight:700;font-size:14px;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.55),0 0 18px rgba(242,217,143,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:scale .15s ease,box-shadow .2s;white-space:nowrap;z-index:1}
.xw-pill svg{width:28px;height:28px;padding:3px;border-radius:50%;border:1px solid var(--xw-gold);color:#FFE7A8;background:radial-gradient(circle,rgba(242,217,143,.32),rgba(217,182,95,.08));stroke-width:2.4}
.xw-pill.xw-soon{border-style:dashed;color:#E6D7AE}
.xw-pill.xw-soon::after{content:"Soon";margin-left:2px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;color:#1A1204;background:var(--xw-gold)}
.xw-pill:hover,.xw-pill:focus-visible{box-shadow:0 0 0 2px var(--xw-gold-hi),0 0 26px rgba(242,217,143,.55);outline:none}
.xw-pill:active{scale:.96}
.xw-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;padding:4px 12px;border-radius:999px;font-size:12px;color:#E8D9AE;background:rgba(4,8,22,.6);pointer-events:none;white-space:nowrap;animation:xwHint 5s ease 1.2s forwards;z-index:2}
@keyframes xwHint{0%,70%{opacity:1}100%{opacity:0}}
.xw-top{position:absolute;top:10px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}
.xw-top>*{pointer-events:auto}
.xw-title{margin:0;padding:4px 12px;border-radius:999px;background:rgba(4,8,22,.6);border:1px solid rgba(217,182,95,.4);color:var(--xw-gold-hi);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.xw-sound{width:44px;height:44px;border-radius:50%;border:1px solid rgba(217,182,95,.45);background:rgba(6,10,26,.72);color:#F2D98F;display:flex;align-items:center;justify-content:center}
#xw.xw-flying .xw-pill,#xw.xw-flying .xw-top{opacity:0;transition:opacity .15s}
/* persistent gold console */
.xw-console{position:relative;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:14px;border-radius:20px;border:1px solid rgba(217,182,95,.45);background:radial-gradient(90% 120% at 0 0,rgba(242,217,143,.14),transparent 60%),linear-gradient(180deg,#0B1533,#050916);box-shadow:inset 0 1px 0 rgba(242,217,143,.15),0 14px 34px rgba(0,0,0,.45)}
.xw-hero{display:flex;flex-direction:column;align-items:center;gap:6px;perspective:700px}
.xw-hero-card{position:relative;width:100%;aspect-ratio:5/7;padding:0;border-radius:9px;overflow:hidden;border:2px solid var(--xw-gold);background:#0A1430;box-shadow:0 0 0 1px #000,0 12px 26px rgba(0,0,0,.6),0 0 26px rgba(242,217,143,.3);transform:rotateY(-10deg) rotateX(4deg);animation:xwFloat 5s ease-in-out infinite;color:#FFF3D0}
.xw-hero-card img{width:100%;height:100%;object-fit:cover}
.xw-hero-card b{position:absolute;left:4px;right:4px;bottom:4px;padding:2px 4px;border-radius:5px;background:rgba(4,8,22,.85);font-size:10px;line-height:1.2}
.xw-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.38) 48%,transparent 62%);background-size:260% 100%;mix-blend-mode:screen;animation:rdFoil 4.5s ease-in-out infinite;pointer-events:none}
@keyframes xwFloat{50%{transform:rotateY(-4deg) rotateX(2deg) translateY(-4px)}}
.xw-cap{margin:0;font-size:10px;font-weight:600;color:#E9DBB2;text-align:center;line-height:1.25}
.xw-bars{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xw-bar{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:10px;border:1px solid rgba(217,182,95,.75);background:linear-gradient(180deg,rgba(18,28,58,.92),rgba(6,10,26,.96));color:#F6E7BC;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(242,217,143,.2),0 6px 16px rgba(0,0,0,.4);animation:xwIn .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*40ms);transition:scale .12s,box-shadow .2s}
.xw-bar svg{width:22px;height:22px;flex:none;color:var(--xw-gold-hi)}
.xw-bar span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xw-bar i{font-style:normal;font-size:8px;color:var(--xw-gold)}
.xw-bar:hover{box-shadow:inset 0 1px 0 rgba(242,217,143,.3),0 0 20px rgba(242,217,143,.3)}
.xw-bar:active{scale:.97}
.xw-sound:focus-visible,.xw-bar:focus-visible,.xw-hero-card:focus-visible{outline:3px solid var(--xw-gold-hi);outline-offset:2px}
@keyframes xwIn{from{opacity:0;transform:translateY(8px)}}
/* home: world + console replace the old hero/actions (hidden, not removed); feed stays below */
html[data-xw] #screen-dashboard #rd-home .rd-hero,html[data-xw] #screen-dashboard #rd-home .rd-actions{display:none}
/* Coming soon sheet */
#xw-soon{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(60% 50% at 50% 45%,rgba(30,50,110,.55),rgba(2,4,12,.88));opacity:0;transition:opacity .22s ease}
#xw-soon.xw-in{opacity:1}
.xw-soon-card{width:min(420px,100%);padding:30px 24px 22px;border-radius:22px;text-align:center;border:1px solid var(--xw-gold);background:linear-gradient(180deg,#0E1A3E,#050916);box-shadow:0 0 0 1px #000,0 30px 70px rgba(0,0,0,.7),0 0 60px rgba(242,217,143,.18);transform:translateY(14px) scale(.97);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
#xw-soon.xw-in .xw-soon-card{transform:none}
.xw-soon-glow{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--xw-gold);background:radial-gradient(circle,rgba(242,217,143,.35),rgba(217,182,95,.05) 70%);box-shadow:0 0 40px rgba(242,217,143,.35)}
.xw-soon-glow svg{width:34px;height:34px;color:var(--xw-gold-hi)}
.xw-soon-k{margin:0;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--xw-gold)}
#xw-soon h2{margin:6px 0 8px;font-size:26px;font-weight:800;color:#FFF3D0}
.xw-soon-p{margin:0 0 18px;font-size:14px;line-height:1.5;color:#C9BFA2}
.xw-soon-x{min-height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--xw-gold);background:linear-gradient(180deg,#F2D98F,#C9A24A 55%,#8A6A22);color:#1A1204;font-weight:800}
/* section screens: old-gold edges on glass panels (entrance motion is done with WAAPI in world.js) */
html.rd .screen:not(#screen-dashboard) .card-base{border-color:rgba(217,182,95,.28)!important;box-shadow:inset 0 1px 0 rgba(242,217,143,.12),0 14px 34px rgba(0,0,0,.4)}
/* Backroads card back */
.xw-cb{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 22px;perspective:1100px}
.xw-cb-card{width:min(62vw,250px);aspect-ratio:5/7;padding:0;border:0;background:none;border-radius:14px}
.xw-cb-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.1,.2,1)}
.xw-cb-card.xw-flip .xw-cb-in{transform:rotateY(180deg)}
.xw-cb-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 20px 44px rgba(0,0,0,.6),0 0 30px rgba(217,182,95,.25)}
.xw-cb-f{transform:rotateY(180deg)}
.xw-cb-in picture{display:contents}
/* faces swap at the half-turn so the right side shows even when another effect flattens 3D */
.xw-cb-f{opacity:0;transition:opacity 0s .3s}.xw-cb-b img,.xw-cb-in>img.xw-cb-b{opacity:1;transition:opacity 0s .3s}.xw-cb-card.xw-flip .xw-cb-f{opacity:1}.xw-cb-card.xw-flip .xw-cb-b img{opacity:0}
.xw-cb-in img{border-radius:4.8%/3.4%;box-shadow:0 1.5px 0 #2a2a33,0 3px 0 #15151c,0 20px 44px rgba(0,0,0,.6),0 0 30px rgba(217,182,95,.25)}
.xw-cb-card::after{content:"";position:absolute;inset:0;border-radius:4.8%/3.4%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);background-size:300% 100%;background-position:120% 0;transition:background-position .9s ease-out}
.xw-cb-card{position:relative}.xw-cb-card:hover::after,.xw-cb-card.xw-flip::after{background-position:-60% 0}
.xw-cb-cap{margin:0;font-size:12px;color:#C9B98C}
/* phone: world is a compact swipeable band; pills compact */
@media (max-width:899px){
#xw{margin:0 -16px 18px;gap:12px}
.xw-world{height:auto;min-height:0;border-radius:0 0 22px 22px;border-width:0 0 1px}
.xw-pan{position:relative;inset:auto;padding:54px 0 34px}
.xw-stage{width:max(100%,150vw)}
.xw-pill{min-height:36px;padding:3px 10px 3px 3px;font-size:12px;gap:5px}
.xw-pill svg{width:24px;height:24px;padding:4px}
.xw-pill.xw-soon::after{font-size:9px;padding:1px 4px}
.xw-console{margin:0 16px;grid-template-columns:78px 1fr;gap:10px;padding:12px}
.xw-bar{min-height:46px;font-size:12px;letter-spacing:.06em;padding:0 10px;gap:8px}
}
@media (min-width:900px){.xw-world{--xw-h:620px}.xw-console{grid-template-columns:120px 1fr}.xw-bars{grid-template-columns:repeat(3,1fr)}.xw-hint{display:none}}
@media (prefers-reduced-motion:reduce){.xw-stars,.xw-hero-card,.xw-shine,.xw-bar,.xw-hint{animation:none!important}.xw-art,.xw-fg,.xw-cb-in,#xw-soon,.xw-soon-card{transition:none}.xw-motes{display:none}}
@media (max-width:899px){
.xw-pill{flex-direction:column;gap:2px;min-height:44px;min-width:44px;padding:4px 8px 5px;border-radius:14px;font-size:11px;line-height:1.1}
.xw-pill svg{width:26px;height:26px}
.xw-pill.xw-soon::after{position:absolute;top:-7px;right:-6px;margin:0}
.xw-pill.xw-l{translate:-12% -50%}.xw-pill.xw-r{translate:-88% -50%}
}
#xw .xw-pill svg,#xw .xw-bar svg,#xw-soon .xw-soon-glow svg{color:#FFE2A0!important;stroke:currentColor}
/* signed-out landing: world + console above the sign-in card */
#xw-guest{width:100%;max-width:1000px;flex:none;display:flex;flex-direction:column;gap:12px;margin:0 0 18px}
#xw-guest .xw-pill svg,#xw-guest .xw-bar svg{color:#FFE2A0!important}
.xw-gconsole{grid-template-columns:78px 1fr}
.xw-join{border-color:var(--xw-gold-hi);background:linear-gradient(180deg,#F2D98F,#C9A24A 55%,#8A6A22);color:#1A1204}
.xw-join svg{color:#1A1204!important}
.xw-gmsg{margin:0;min-height:1.2em;text-align:center;font-size:13px;color:#F2D98F}
@media (max-width:899px){#xw-guest{width:calc(100% + 40px);margin:-20px -20px 16px}#xw-guest .xw-gconsole{margin:0 16px}}
/* t1059: phone fits the whole AstraRoad world (no swipe); gold menu gets more room on narrow screens */
@media (max-width:899px){
.xw-stage{width:100%}
.xw-pan{overflow-x:hidden;padding:46px 0 22px}
.xw-hint{display:none}
.xw-pill{padding:3px 5px 4px;font-size:10px;min-width:40px}
.xw-pill span{max-width:72px;white-space:normal;text-align:center}
}
@media (max-width:420px){
.xw-console{grid-template-columns:64px 1fr;gap:8px;padding:10px}
.xw-bars{gap:6px}
.xw-bar{font-size:11px;letter-spacing:.03em;padding:0 8px;gap:6px}
}
@media (max-width:899px){.xw-pill{min-height:34px;padding:2px 5px 3px;border-radius:11px}.xw-pill svg{width:18px;height:18px;padding:2px}.xw-pill span{max-width:64px}}
@media (max-width:899px){.xw-stage .xw-pill[data-xwgo="novaworks"]{translate:-30% -30%}.xw-stage .xw-pill[data-xwgo="aetherion"]{translate:-30% -60%}}

/* t1333: static stand-in for the signed-out world (index.html), same box as #xw-guest; world.js replaces it. Hidden for ?classicux / redesign off. */
#xw-guest-ph{width:100%;max-width:1000px;flex:none;display:flex;flex-direction:column;gap:12px;margin:0 0 18px;pointer-events:none}
#xw-guest-ph .xw-ph-console{height:180px}
#xw-guest-ph .xw-ph-msg{height:16px}
html:not(.rd) #xw-guest-ph{display:none}
@media (max-width:899px){#xw-guest-ph{width:calc(100% + 40px);margin:-20px -20px 16px}#xw-guest-ph .xw-ph-console{height:166px;margin:0 16px}}
/* t1333: same gold Soon badge as the world pills, for module tiles (e.g. Slab Quest). */
.xw-soon-tag{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;line-height:1.5;color:#1A1204;background:var(--xw-gold,#D9B65F);font-family:inherit}