/* Innovation Summit 2026 · visitor guide (click-to-travel, no scrolling) */
:root {
  --hall: #1a0640; --plum: #3b0a87; --magenta: #e23fc8; --violet: #7b3fe4; --cyan: #3fd6e2;
  --white: #f7f5fc; --muted: #a99fcb; --line: rgba(247,245,252,.14);
  --grad: linear-gradient(135deg, #7b3fe4, #e23fc8);
  --font: "Poppins", system-ui, sans-serif; --ease: cubic-bezier(.2,.7,.2,1);
}
html[dir="rtl"] { --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--hall); color: var(--white); font: 300 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }

.stage { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(120% 80% at 70% 0%, #4a12a6 0%, #2a0866 45%, #150533 100%); }
.layers { position: absolute; inset: 0; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.layer.on { opacity: 1; }
.shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,7,22,.5) 0%, rgba(11,7,22,0) 20%, rgba(11,7,22,0) 60%, rgba(11,7,22,.85) 100%); }

.intro { position: absolute; inset: 0; z-index: 8; display: grid; align-content: end; padding: 0 clamp(1.25rem,5vw,4rem) clamp(3rem,8vh,6rem); background: linear-gradient(90deg, rgba(11,7,22,.6), rgba(11,7,22,0) 70%); transition: opacity .6s, transform .7s var(--ease); }
.intro.off { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.org { color: var(--muted); margin: 0 0 .8rem; font-size: .9rem; }
.intro h1 { font-size: clamp(2.4rem,7vw,5.6rem); line-height: 1; }
.intro h1 small { display: block; font-size: .4em; font-weight: 300; margin-top: .3rem; opacity: .9; }
.meta { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0 2rem; }
.meta i { width: 28px; height: 1px; background: var(--magenta); }
.go { background: var(--white); color: var(--hall); border: 0; border-radius: 999px; padding: .95rem 1.6rem; font-weight: 500; justify-self: start; }

.hud-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem,3vw,2rem); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 500; font-size: .92rem; }
.brand img { height: 34px; width: auto; }
.brand small { display: block; font-weight: 300; font-size: .72rem; color: var(--muted); }
.partners { position: absolute; top: 1rem; inset-inline-start: 50%; transform: translateX(-50%); display: flex; gap: 1.2rem; align-items: center; opacity: .85; z-index: 6; }
html[dir="rtl"] .partners { transform: translateX(50%); }
.partners img { height: 30px; width: auto; }
.intro-strip { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin-top: 1.8rem; }
.intro-strip img { height: 26px; width: auto; }
.intro-strip .lbl { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-inline-end: .4rem; }
.hours { display: flex; gap: 1.4rem; margin: .4rem 0 0; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.tools { display: flex; gap: .5rem; }
.tool { background: rgba(11,7,22,.55); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; font-size: .8rem; backdrop-filter: blur(10px); display: inline-flex; gap: .45rem; align-items: center; color: var(--white); }
.tool:hover { border-color: rgba(247,245,252,.45); }
.tool em { font-style: normal; color: var(--muted); }
.tool.small { padding: .35rem .75rem; font-size: .76rem; }

/* stop card */
.card { position: absolute; z-index: 6; inset-inline-start: clamp(1rem,3vw,2rem); bottom: clamp(1.5rem,5vh,3rem); max-width: min(32rem, 52vw); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.card.on { opacity: 1; transform: none; pointer-events: auto; }
.zone { margin: 0 0 .3rem; font-size: .8rem; color: var(--cyan); }
.card h2 { font-size: clamp(1.5rem,3vw,2.5rem); line-height: 1.1; margin-bottom: .5rem; }
.card p#cBody { margin: 0 0 .8rem; font-size: .93rem; max-width: 56ch; opacity: .92; }
.onfloor { margin: 0 0 .45rem; font-size: .74rem; color: var(--muted); }
.logos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.logos span { position: relative; width: 96px; height: 58px; border-radius: 12px; background: #fff; display: block; padding: 8px 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(123,63,228,.12); transition: transform .2s var(--ease), box-shadow .2s; }
.logos span:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(226,63,200,.28); }
.logos img { width: 100%; height: 100%; object-fit: contain; display: block; }
.progress { flex: 1; max-width: 160px; height: 2px; background: rgba(247,245,252,.2); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .25s linear; }

/* the map panel */
.guide { position: absolute; z-index: 7; inset-inline-end: clamp(1rem,3vw,2rem); bottom: clamp(1.5rem,5vh,3rem); width: clamp(300px, 30vw, 460px); transition: inset .55s var(--ease), width .55s var(--ease), background .4s, opacity .4s; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: rgba(11,7,22,.28); backdrop-filter: blur(6px); opacity: .88; box-shadow: 0 24px 60px rgba(0,0,0,.55); opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease); }
.stage.in .guide { opacity: 1; transform: none; }
.guide-head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .6rem .55rem .9rem; font-size: .76rem; color: var(--muted); }
.guide.collapsed .map, .guide.collapsed .hall { display: none; }
.map { position: relative; aspect-ratio: 1530/760; background: #0d0820; }
.guide:hover { opacity: 1; background: rgba(11,7,22,.5); }
.guide:hover .map img { opacity: 1; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stand { cursor: pointer; }
.stand rect.card { fill: #f7f5fc; stroke: rgba(255,255,255,.35); stroke-width: 1.2; transition: filter .2s; }
.stand.platinum rect.card { fill: #2a0866; stroke: #e2c982; stroke-width: 2.4; }
.stand.platinum .tierlbl { fill: #e2c982; }
.stand.developer rect.card { stroke: #58c07a; stroke-width: 2; }
.stand.exhibitor rect.card, .stand.small rect.card { stroke: #a56cf5; stroke-width: 1.6; }
.stand.premium rect.card { stroke: #3fd6e2; stroke-width: 2; }
.stand.gcc rect.card { fill: #2a1a55; stroke: #3fd6e2; }
.stand.pavilion rect.card { stroke: #f0a04b; stroke-width: 2; }
.stand.available rect.card { fill: #3fd6e2; }
.stand:hover rect.card { filter: drop-shadow(0 0 8px #3fd6e2); }
.stand text { font-family: var(--font); pointer-events: none; }
.stand .code { font-size: 13px; font-weight: 600; fill: #1c1145; }
.stand.gcc .code { fill: #fff; }
.stand .sz { font-size: 10px; fill: rgba(28,17,69,.7); }
.stand.gcc .sz { fill: rgba(255,255,255,.7); }
.stand .tierlbl { font-size: 9px; letter-spacing: .08em; fill: #6b4a12; font-weight: 600; }
.sec { font-size: 15px; fill: rgba(247,245,252,.6); letter-spacing: .12em; font-family: var(--font); text-transform: uppercase; }
.zone-shape { fill: rgba(123,63,228,.22); stroke: rgba(226,63,200,.6); stroke-width: 2; }
.zone-lbl { font-size: 15px; fill: #f7f5fc; font-family: var(--font); font-weight: 500; }
.zone-sub { font-size: 11px; fill: rgba(247,245,252,.65); font-family: var(--font); }
#points g { cursor: pointer; }
#points circle.ring { fill: rgba(11,7,22,.92); stroke: var(--cyan); stroke-width: 3; transition: fill .2s; }
#points g:hover circle.ring, #points g.now circle.ring { fill: var(--cyan); }
#points g.now text { fill: var(--hall); }
#points g.done circle.ring { fill: var(--cyan); stroke: #fff; }
#points text { fill: #fff; font-size: 26px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: var(--font); }
#points g.done text { fill: var(--hall); }
#points g.flash circle.ring { animation: ringflash .6s ease-in-out 4; }
@keyframes ringflash { 50% { fill: var(--cyan); r: 24; } }
#you { transition: transform .12s linear; }
.hall { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .9rem .8rem; font-size: .74rem; color: var(--muted); border-top: 1px solid var(--line); }
.hall #hallChips { display: flex; gap: .35rem; flex-wrap: wrap; }
.hall button { background: rgba(28,17,69,.7); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .65rem; font-size: .72rem; color: var(--white); }
.hall button.now { background: var(--magenta); border-color: transparent; }

/* overlays */
.overlay { position: absolute; inset: 0; z-index: 20; background: rgba(8,5,16,.94); backdrop-filter: blur(16px); overflow: auto; padding: 1rem clamp(1rem,4vw,3rem) 3rem; }
.ov-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.ov-head h3 { font-size: 1.4rem; }
.exmap { max-height: 86vh; width: auto; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line); }
.recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 1rem; max-width: 1200px; }
.recap video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; border: 1px solid var(--line); }
.renders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: .8rem; }
.renders-grid button { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.renders-grid img { width: 100%; height: 100%; object-fit: cover; }
.lightbox { position: absolute; inset: 0; z-index: 30; background: rgba(5,3,10,.96); display: grid; place-items: center; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 6px; }
.lb-close { position: absolute; top: 1rem; inset-inline-end: 1.2rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(11,7,22,.6); font-size: 1.5rem; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: rgba(11,7,22,.6); font-size: 1.6rem; }
.lb-prev { left: 1rem; } .lb-next { right: 1rem; }
.lb-count { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); font-size: .8rem; color: var(--muted); }

@media (max-width: 900px) {
  .tools .tool[data-open="ovRecap"] { display: none; }
  .tools .tool { padding: .4rem .7rem; font-size: .74rem; }
  .brand span { display: none; }
  .card { max-width: calc(100vw - 2rem); inset-inline-start: 1rem; bottom: auto; top: 4rem; }
  .card h2 { font-size: 1.35rem; }
  .card p#cBody { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; }
  .logos span { width: 48px; height: 34px; padding: 3px; }
  .guide { width: calc(100vw - 1.6rem); inset-inline-end: .8rem; bottom: .8rem; opacity: .92; }
  .guide-head { font-size: .68rem; padding: .4rem .5rem .4rem .7rem; }
  #points circle.ring { r: 24; } #points text { font-size: 30px; }
  .intro { padding-bottom: 3rem; } .intro h1 { font-size: 2.2rem; }
  .exmap { max-height: none; width: 100%; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .card { top: 3.4rem; max-width: 46vw; }
  .guide { width: min(44vw, 300px); }
}
@media (prefers-reduced-motion: reduce) { .layer, .card, .guide { transition: none; } }

/* find-a-stand drawer */
.drawer { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; z-index: 25; width: min(380px, 92vw); background: rgba(11,7,22,.88); backdrop-filter: blur(18px); border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.5); }
.drawer-head { display: flex; gap: .5rem; padding: .9rem; border-bottom: 1px solid var(--line); }
.drawer-head input { flex: 1; background: rgba(247,245,252,.08); border: 1px solid var(--line); border-radius: 999px; padding: .65rem 1rem; color: var(--white); font: inherit; font-size: .9rem; outline: none; }
.drawer-head input:focus { border-color: var(--cyan); }
.drawer-you { padding: .6rem .9rem; font-size: .78rem; color: var(--cyan); border-bottom: 1px solid var(--line); min-height: 1.2rem; }
.drawer-list { overflow: auto; padding: .5rem .6rem 2rem; }
.find-group { font-size: .72rem; color: var(--muted); padding: .8rem .4rem .3rem; text-transform: uppercase; letter-spacing: .06em; }
.find-row { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: start; background: none; border: 1px solid transparent; border-radius: 10px; padding: .45rem .5rem; }
.find-row:hover { background: rgba(247,245,252,.06); border-color: var(--line); }
.find-row.here { border-color: rgba(63,214,226,.5); }
.find-row img { width: 54px; height: 38px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px 6px; flex: 0 0 auto; }
.find-row b { display: block; font-weight: 500; font-size: .88rem; }
.find-row small { color: var(--muted); font-size: .74rem; }
/* recap */
.recap-player { max-width: 1100px; }
.recap-player video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; border: 1px solid var(--line); }
.recap-tabs { display: flex; gap: .5rem; margin: .7rem 0 1.6rem; }
.recap-tabs .tool.now { background: var(--white); color: var(--hall); }
.moments-title { font-size: 1.15rem; font-weight: 500; margin: 0 0 .3rem; }
.moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; max-width: 1100px; }
.moments button { padding: 0; background: rgba(247,245,252,.04); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: start; color: var(--white); display: grid; gap: .3rem; }
.moments button:hover { border-color: rgba(247,245,252,.4); }
.moments img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.moments span { font-size: .84rem; padding: .1rem .7rem 0; }
.moments i { font-style: normal; font-size: .7rem; color: var(--muted); padding: 0 .7rem .6rem; }
@media (max-width: 900px) { .drawer { width: 100vw; } .tools .tool#findBtn { display: inline-flex; } .logos span { width: 60px; height: 40px; padding: 4px 6px; } }

/* ---------- animation polish ---------- */
#routeBase { stroke-dasharray: 10 8; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
#points g.now circle.ring { animation: nowpulse 1.6s ease-in-out infinite; }
@keyframes nowpulse { 50% { filter: drop-shadow(0 0 6px var(--cyan)); } }
.card.on { animation: cardin .5s var(--ease); }
@keyframes cardin { from { opacity: 0; transform: translateY(14px); } }
.logos span { animation: tilein .5s var(--ease) both; }
.logos span:nth-child(2) { animation-delay: .06s; } .logos span:nth-child(3) { animation-delay: .12s; } .logos span:nth-child(4) { animation-delay: .18s; } .logos span:nth-child(5) { animation-delay: .24s; } .logos span:nth-child(6) { animation-delay: .3s; }
@keyframes tilein { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.guide-head { gap: .5rem; }
.guide-tools { display: flex; gap: .35rem; align-items: center; }
.tool.small.now { background: var(--magenta); border-color: transparent; color: #fff; }
/* less crowded small map: hide chevrons, thinner points */
.guide:not(.big) #chevrons { display: none; }
/* big map mode */
.stage.bigmap .guide { inset: 4.5rem clamp(1rem,6vw,5rem) clamp(1rem,4vh,2.5rem); width: auto; inset-inline-end: clamp(1rem,6vw,5rem); opacity: 1; background: rgba(11,7,22,.86); backdrop-filter: blur(20px); display: flex; flex-direction: column; z-index: 15; }
.stage.bigmap .guide .map { flex: 1; min-height: 0; display: grid; place-items: center; background: #06040c; }
.stage.bigmap .guide .map { aspect-ratio: auto; }
.stage.bigmap .guide .map svg { left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; height: 100%; aspect-ratio: 1000/563; max-width: 100%; }
.stage.bigmap #chevrons { display: block; }
.stage.bigmap .guide-head { font-size: .9rem; color: var(--white); padding: .8rem 1rem; }
.stage.bigmap .card, .stage.bigmap .hud-top .tools { opacity: 0; pointer-events: none; }
.stage.bigmap .map { cursor: crosshair; }
#target circle, #here circle { pointer-events: none; }
#routeTo { filter: drop-shadow(0 0 4px #fff); }
/* recap layout */
.recap-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 1.6rem; align-items: start; max-width: 1500px; }
.recap-player { max-width: none; position: sticky; top: 0; }
.recap-side { max-height: calc(100vh - 8rem); overflow: auto; padding-inline-end: .4rem; }
.moments { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; max-width: none; }
.moments img { aspect-ratio: 16/9; }
@media (max-width: 900px) {
  .recap-grid { grid-template-columns: 1fr; } .recap-player { position: static; } .recap-side { max-height: none; }
  .stage.bigmap .guide { inset: 3.6rem .5rem .5rem; }
  .logos span { width: 72px; height: 46px; padding: 5px 8px; }
}

/* find mode: big map on the left, list on the right */
.stage.finding .guide { inset-inline-end: calc(min(380px, 92vw) + 1rem); inset-inline-start: clamp(1rem,3vw,2rem); }
.stage.finding .drawer { top: 4.5rem; bottom: clamp(1rem,4vh,2.5rem); border-radius: 14px; border: 1px solid var(--line); animation: slidein .5s var(--ease); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
html[dir="rtl"] .stage.finding .drawer { animation-name: slideinrtl; }
@keyframes slideinrtl { from { transform: translateX(-40px); opacity: 0; } }
.find-row.sel { background: rgba(63,214,226,.14); border-color: var(--cyan); }
#walkTo:disabled { opacity: .45; cursor: default; }
@media (max-width: 900px) {
  .stage.finding .guide { inset: 3.6rem .5rem 46vh; }
  .stage.finding .drawer { top: auto; height: 44vh; bottom: .5rem; left: .5rem; right: .5rem; width: auto; }
}

.logos span b { position: absolute; top: -8px; inset-inline-start: -6px; font-size: 10px; font-weight: 600; padding: .1rem .4rem; border-radius: 999px; background: var(--hall); color: var(--white); border: 1px solid var(--line); }
.logos span.platinum { background: #2a0866; border: 1.5px solid #e2c982; }
.logos span.platinum b { background: #e2c982; color: #1c1145; border-color: #e2c982; }
.logos span.gcc { background: #2a1a55; }
#routeGlow, #routeBase, #routeDone, #routeCore, #routeTo { vector-effect: non-scaling-stroke; }
#routeGlow { stroke-width: 8; } #routeBase, #routeDone { stroke-width: 3; } #routeCore { stroke-width: 1.2; }

.booth { position: relative; margin-top: .9rem; max-width: 420px; border-radius: 12px; overflow: hidden; border: 1px solid #e2c982; background: #0b0716; box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: cardin .4s var(--ease); }
.booth img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.booth-lbl { position: absolute; left: .6rem; top: .5rem; font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; background: rgba(11,7,22,.75); color: var(--white); z-index: 1; }
.booth-lbl em { font-style: normal; color: #e2c982; }
.booth #boothClose { position: absolute; right: .4rem; top: .35rem; z-index: 1; }
.logos span.has-booth { cursor: pointer; }
.logos span.has-booth::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
@media (max-width: 900px) { .booth { max-width: 100%; } }


/* ---------- floor navigator in a modal ---------- */
.stage.in .guide { background: rgba(11,7,22,.26); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); opacity: .9; }
.guide:hover, .guide.big { opacity: 1; background: rgba(11,7,22,.55); }
.guide.big { width: clamp(420px, 54vw, 820px); }
.navmodal { position: fixed; inset: 0; z-index: 80; background: rgba(4,2,12,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: clamp(.5rem, 2vw, 1.5rem); }
.navmodal[hidden] { display: none; }
.navbox { position: relative; width: min(1240px, 96vw); height: min(88vh, 940px); background: #150834; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.navbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .6rem .5rem .9rem; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.navbox iframe { flex: 1; width: 100%; border: 0; background: #150834; }
@media (max-width: 900px) {
  .guide.big { width: calc(100vw - 1.6rem); }
  .navmodal { padding: 0; }
  .navbox { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media (max-width: 560px) {
  .guide { width: calc(100vw - 1rem); inset-inline-end: .5rem; bottom: .5rem; }
  .guide-tools .tool.small { font-size: .66rem; padding: .28rem .5rem; }
}

/* clean video: no dot pattern, no tint, no filter over the scene */
.stage::before { content: none !important; }
.layer { filter: none !important; opacity: 0; }
.layer.on { opacity: 1 !important; filter: none !important; }
.layers::before, .layers::after { content: none !important; }

.booth-about { margin: .35rem 0 0; font-size: .78rem; line-height: 1.5; opacity: .85; max-width: 34ch; }

/* scenes play whole: never cropped or zoomed */
.stage { background: #000; }

/* travelling marker: smooth continuous motion along the route */
#you circle:last-child { filter: drop-shadow(0 0 6px rgba(63,214,226,.9)); }
#routeDone { transition: none; }

/* full-screen stage: real frame never cropped, sides filled with a blurred copy */
.layers { position: absolute; inset: 0; z-index: 1; }
/* the traveller: a moving dot with a trailing pulse between stations */
#you { transition: transform .3s cubic-bezier(.33,.66,.4,1); }
#you .walk-trail { animation: walkpulse 1.2s ease-out infinite; transform-origin: center; }
@keyframes walkpulse { 0% { r: 10; opacity: .55 } 70% { r: 30; opacity: 0 } 100% { r: 30; opacity: 0 } }

/* map stays hidden on the opening screen */
.guide { opacity: 0 !important; pointer-events: none; }
.stage.in .guide { opacity: .92 !important; pointer-events: auto; }
.stage.in .guide:hover, .stage.in .guide.big { opacity: 1 !important; }
/* scenes fill the screen edge to edge: no black bars anywhere */
.layer { object-fit: cover !important; width: 100%; height: 100%; }
.bgfill { display: none; }

/* logo chips: booth number and a tier colour */
.logos span { position: relative; }
.logos { row-gap: 22px; }
.logos span[data-tier="platinum"] { outline: 2px solid #e9e4ff; box-shadow: 0 0 0 3px rgba(233,228,255,.28); }
.logos span[data-tier="premium"] { outline: 2px solid #ffd479; box-shadow: 0 0 0 3px rgba(255,212,121,.24); }
.logos span[data-tier="developer"] { outline: 2px solid #7ad6a1; }
.logos span[data-tier="pavilion"] { outline: 2px solid #ff9ecb; }
.logos span[data-tier="gcc"] { outline: 2px solid #3fd6e2; }
.logos span[data-tier="exhibitor"], .logos span[data-tier="small"] { outline: 1px solid rgba(255,255,255,.25); }

/* logo chips: original artwork on a white tile, so light logos stay visible */
.logos span { background: #fff !important; border-radius: 10px; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; }
.logos img { mix-blend-mode: normal; }
/* booth number: bigger and higher contrast */
.logos { row-gap: 26px; }

/* booth number: let the badge show and make it readable */
.logos span { overflow: visible !important; }
.logos span b { top: -9px; inset-inline-start: -7px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: .16rem .45rem; background: #140a30; color: #fff; border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 3px 8px rgba(0,0,0,.5); z-index: 2; }
.logos { row-gap: 22px; column-gap: 12px; padding-top: 10px; }

/* named, numbered stand chips instead of logos */
.logos { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; padding-top: 2px; }
.logos span.chip { width: auto !important; height: auto !important; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: 7px 11px 7px 8px; overflow: visible; box-shadow: none; cursor: default; }
.logos span.chip em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--white); line-height: 1.25; }
.logos span.chip b { position: static; font: 800 11px/1 var(--font); letter-spacing: .05em; padding: .22rem .45rem;
  border-radius: 6px; background: #140a30; color: #fff; border: 1px solid rgba(255,255,255,.45); box-shadow: none; }
.logos span.chip.has-booth { cursor: pointer; }
.logos span.chip.has-booth:hover { background: rgba(255,255,255,.14) !important; }
.logos span.chip[data-tier="platinum"] { border-color: #e9e4ff; background: rgba(233,228,255,.14) !important; }
.logos span.chip[data-tier="premium"] { border-color: #ffd479; }
.logos span.chip[data-tier="developer"] { border-color: #7ad6a1; }
.logos span.chip[data-tier="pavilion"] { border-color: #ff9ecb; }
.logos span.chip[data-tier="gcc"] { border-color: #3fd6e2; }

/* the travelling dot on the route line */
#travelDot { filter: drop-shadow(0 0 7px rgba(63,214,226,.95)); transition: opacity .25s ease; }

/* ---------------- phones and small tablets ---------------- */
@media (max-width: 900px) {
  .stage.in .guide { width: calc(100vw - 1rem) !important; inset-inline-end: .5rem; bottom: .5rem; }
  .card { max-width: none; width: calc(100vw - 1.6rem); }
  .logos { gap: 6px; }
  .logos span.chip { padding: 5px 8px 5px 6px; gap: 6px; }
  .logos span.chip em { font-size: .74rem; }
  .logos span.chip b { font-size: 10px; padding: .18rem .36rem; }
  .booth-about { max-width: 100%; font-size: .75rem; }
  #travelDot { r: 9; }
  .navbox { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .navmodal { padding: 0; }
}
@media (max-width: 560px) {
  .stage.in .guide { width: calc(100vw - .8rem) !important; inset-inline-end: .4rem; bottom: .4rem; }
  .logos span.chip em { font-size: .7rem; }
  .card h2, .card .c-title { font-size: 1.05rem; line-height: 1.3; }
  .guide-tools .tool.small { font-size: .64rem; padding: .26rem .45rem; }
}
/* nothing may push the page sideways on a phone */
html, body { max-width: 100%; overflow-x: hidden; }

/* =====================================================================
   v21 · usability and mobile pass
   ===================================================================== */

/* "Find a stand" is the primary tool: it opens the floor navigator */
.tool.find { background: rgba(247,245,252,.14); border-color: rgba(247,245,252,.35); font-weight: 500; }
.tool.find:hover { background: rgba(247,245,252,.22); }
.tool.find svg { flex: 0 0 auto; }

/* navigator modal: a comfortable close target */
.navbar { min-height: 52px; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); font-size: .9rem; color: var(--white); }
.tool.navclose { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 1.35rem; line-height: 1; }

/* respect notches and home indicators */
.hud-top { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }

/* finger-sized controls on touch screens */
@media (pointer: coarse) {
  .tool { min-height: 40px; }
  .tool.small, .guide-tools .tool.small { min-height: 34px; }
  #guideToggle { min-width: 34px; justify-content: center; }
}

@media (max-width: 900px) {
  /* partner logos collided with the header buttons on phones */
  .partners { display: none; }
  .hud-top { padding-inline: .75rem; gap: .5rem; }
  .tools { gap: .4rem; }
  .brand img { height: 30px; }
  .guide { bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)) !important; }
  .card { top: calc(3.9rem + env(safe-area-inset-top, 0px)); }
  .guide-head { flex-wrap: wrap; row-gap: .35rem; }
  #guideMsg { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .guide-tools { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

/* phones: stand chips in one swipeable row so the card stays short */
@media (max-width: 700px) {
  .logos { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding-bottom: 4px; margin-inline-end: -.8rem; padding-inline-end: .8rem; -webkit-overflow-scrolling: touch; }
  .logos::-webkit-scrollbar { display: none; }
  .logos span.chip { flex: 0 0 auto; white-space: nowrap; }
  .card { background: linear-gradient(180deg, rgba(11,7,22,.72), rgba(11,7,22,.45)); border-radius: 14px; padding: .8rem .9rem .6rem; width: calc(100vw - 1rem); inset-inline-start: .5rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .card p#cBody { margin-bottom: .5rem; }
  .intro .meta { flex-wrap: wrap; gap: .5rem .9rem; }
  .intro-strip { gap: .9rem 1.1rem; }
  .intro-strip img { height: 22px; }
}

/* portrait phones: the scenes are ultra-wide, so show the whole frame
   over a blurred copy instead of cropping to a narrow slice */
.bgfill { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) brightness(.45) saturate(1.2); transform: translateZ(0); }
@media (max-aspect-ratio: 4/5) {
  .stage.in .bgfill { display: block; }
  .stage.in .layers { z-index: 1; }
  .stage.in .layer { object-fit: contain !important; }
  .stage.in .shade { background: linear-gradient(180deg, rgba(11,7,22,.55) 0%, rgba(11,7,22,0) 22%, rgba(11,7,22,0) 62%, rgba(11,7,22,.8) 100%); z-index: 2; }
}

/* phones held sideways: map small in the corner, card on the other side */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .stage.in .guide { width: min(42vw, 330px) !important; inset-inline-end: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)) !important; }
  .stage.in .guide.big { width: min(58vw, 480px) !important; }
  .guide-head { flex-wrap: nowrap; }
  #guideMsg { display: none; }
  .card { top: 3.4rem; width: auto; max-width: calc(56vw - 1.5rem); inset-inline-start: .5rem; padding: .6rem .75rem .5rem; }
  .card h2 { font-size: 1.05rem; margin-bottom: .25rem; }
  .card p#cBody { -webkit-line-clamp: 2; font-size: .76rem; }
  .onfloor { display: none; }
  .hud-top { padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); padding-bottom: .5rem; }
  .intro { padding-bottom: 1.2rem; align-content: center; }
  .intro h1 { font-size: 1.8rem; }
  .intro .meta { margin: .6rem 0 .8rem; }
  .intro-strip { display: none; }
}
@media (max-aspect-ratio: 4/5) { .stage.in .layer { object-position: 50% 44%; } }
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .card { background: linear-gradient(180deg, rgba(11,7,22,.74), rgba(11,7,22,.5)); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-height: calc(100vh - 4rem); overflow: hidden; }
  .logos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: .5rem; }
  .logos::-webkit-scrollbar { display: none; }
  .logos span.chip { flex: 0 0 auto; white-space: nowrap; }
}

/* the card sits on a soft glass panel so it stays readable over bright scenes */
.card { background: linear-gradient(180deg, rgba(11,7,22,.66), rgba(11,7,22,.42)); border: 1px solid rgba(247,245,252,.1); border-radius: 16px; padding: 1rem 1.15rem .8rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card h2, .card p#cBody { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.tool { white-space: nowrap; }
.guide-head #guideMsg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* header buttons (language, find a stand) stay tappable on the opening screen */
.hud-top { z-index: 9; }

/* =====================================================================
   v22 · see-through card, booths behind a button
   ===================================================================== */

/* resting state: no panel, the scene shows through, content softly blurred */
.card { background: rgba(11,7,22,.08) !important; border-color: rgba(247,245,252,.08) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .4s, transform .5s var(--ease); cursor: pointer; }
.card > * { transition: filter .35s ease, opacity .35s ease; }
.card > #cTitle, .card > #cBody, .card > .booths-toggle, .card > .logos, .card > .progress { filter: blur(3px); opacity: .5; }
.card > .zone { opacity: .85; }
.card h2, .card p#cBody { text-shadow: 0 1px 10px rgba(0,0,0,.6); }

/* brought forward: on hover, keyboard focus, or a tap */
.card.peek, .card:focus-within { cursor: default;
  background: linear-gradient(180deg, rgba(11,7,22,.72), rgba(11,7,22,.5)) !important; border-color: rgba(247,245,252,.16) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.card.peek > *, .card:focus-within > * { filter: none !important; opacity: 1 !important; }
@media (hover: hover) {
  .card:hover { cursor: default;
    background: linear-gradient(180deg, rgba(11,7,22,.72), rgba(11,7,22,.5)) !important; border-color: rgba(247,245,252,.16) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
  .card:hover > * { filter: none !important; opacity: 1 !important; }
}

/* "Show booths" button */
.booths-toggle { display: inline-flex; align-items: center; gap: .45rem; margin: .1rem 0 .7rem; padding: .45rem .9rem; min-height: 36px;
  border-radius: 999px; border: 1px solid rgba(63,214,226,.55); background: rgba(63,214,226,.12); color: var(--white);
  font-size: .8rem; font-weight: 500; }
.booths-toggle:hover { background: rgba(63,214,226,.22); }
.booths-toggle svg { transition: transform .25s var(--ease); }
.booths-toggle.open svg { transform: rotate(180deg); }
.onfloor { display: none !important; }

/* booth names two side by side */
.card .logos:not([hidden]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important;
  flex-wrap: initial; overflow: visible; margin-inline-end: 0; padding: 2px 0 0; max-height: min(46vh, 420px); overflow-y: auto; }
.card .logos span.chip { width: auto !important; min-width: 0; white-space: normal; align-items: flex-start; flex: initial; animation: none; }
.card .logos span.chip em { line-height: 1.3; overflow-wrap: anywhere; }
.card .logos span.chip b { flex: 0 0 auto; }
@media (max-width: 700px) {
  .card .logos:not([hidden]) { max-height: 34vh; gap: 6px !important; }
  .card .logos span.chip em { font-size: .72rem; }
}
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .card .logos:not([hidden]) { max-height: 38vh; }
}
@media (prefers-reduced-motion: reduce) { .card, .card > * { transition: none; } }

/* =====================================================================
   v22 · see-through card, booths on demand
   ===================================================================== */

/* resting state: the panel is clear so the scene shows through, and the text is softly blurred */
.card { transition: background .35s var(--ease), border-color .35s, backdrop-filter .35s, box-shadow .35s; }
.card.on { background: rgba(11,7,22,.06); border-color: rgba(247,245,252,.14); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; cursor: pointer; }
.card > * { transition: filter .35s var(--ease), opacity .35s var(--ease); }
.card.on > #cTitle, .card.on > #cBody, .card.on > .booths-toggle, .card.on > .logos, .card.on > .progress { filter: blur(3px); opacity: .55; }
.card.on > .zone { opacity: .85; }

/* hover, keyboard focus or a tap brings it forward, sharp and on glass */
.card.on.peek,
.card.on:focus-within { background: linear-gradient(180deg, rgba(11,7,22,.7), rgba(11,7,22,.48)); border-color: rgba(247,245,252,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0,0,0,.4); cursor: default; }
.card.on.peek > *, .card.on:focus-within > * { filter: none; opacity: 1; }
@media (hover: hover) {
  .card.on:hover { background: linear-gradient(180deg, rgba(11,7,22,.7), rgba(11,7,22,.48)); border-color: rgba(247,245,252,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0,0,0,.4); cursor: default; }
  .card.on:hover > * { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .card, .card > * { transition: none; } }

/* "Show booths" button */
.booths-toggle { display: inline-flex; align-items: center; gap: .45rem; margin: .1rem 0 .7rem; padding: .45rem .85rem; min-height: 36px;
  border-radius: 999px; border: 1px solid rgba(63,214,226,.55); background: rgba(63,214,226,.12); color: var(--white);
  font-size: .8rem; font-weight: 500; }
.booths-toggle:hover { background: rgba(63,214,226,.22); }
.booths-toggle svg { transition: transform .25s var(--ease); }
.booths-toggle.open svg { transform: rotate(180deg); }

/* booths two by two; long names wrap instead of stretching the card */
.card .logos:not([hidden]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  flex-wrap: initial; overflow-x: visible; overflow-y: auto; max-height: min(46vh, 22rem); margin: 0 0 .8rem; padding: 2px; }
.card .logos span.chip { width: auto !important; min-width: 0; white-space: normal; align-items: center; animation: none; }
.card .logos span.chip em { overflow-wrap: anywhere; font-size: .8rem; line-height: 1.3; }
.card .logos span.chip b { flex: 0 0 auto; }
@media (max-width: 700px) {
  .card .logos:not([hidden]) { max-height: 34vh; margin-inline-end: 0; padding-inline-end: 2px; gap: 6px; }
  .card .logos span.chip em { font-size: .72rem; }
  .booths-toggle { font-size: .74rem; padding: .35rem .75rem; margin-bottom: .5rem; }
}
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .card .logos:not([hidden]) { max-height: 40vh; }
  .card.peek { overflow-y: auto; }
}

/* =====================================================================
   v22 · see-through station card, booths on demand
   ===================================================================== */

/* resting state: no panel, content softly blurred so the scene shows through */
.card { transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease; }
.card > * { transition: filter .35s ease, opacity .35s ease; }
.stage.in .card:not(.peek) { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; }
.stage.in .card:not(.peek) > *:not(.zone) { filter: blur(3.5px); opacity: .5; }
.stage.in .card:not(.peek) > .zone { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.stage.in .card:not(.peek) > * { pointer-events: none; }
/* hover (mouse), a tap (touch) or keyboard focus brings it forward */
@media (hover: hover) {
  .stage.in .card:hover { background: linear-gradient(180deg, rgba(11,7,22,.66), rgba(11,7,22,.42)); border-color: rgba(247,245,252,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: default; }
  .stage.in .card:hover > * { filter: none !important; opacity: 1 !important; pointer-events: auto !important; }
}
.stage.in .card.peek > *, .stage.in .card:focus-within > * { filter: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .card, .card > * { transition: none; } }

/* "Show booths" toggle */
.booths-toggle { display: inline-flex; align-items: center; gap: .45rem; margin: .1rem 0 .7rem; padding: .45rem .9rem; min-height: 36px;
  border-radius: 999px; border: 1px solid rgba(63,214,226,.55); background: rgba(63,214,226,.12); color: var(--white); font-size: .8rem; font-weight: 500; }
.booths-toggle:hover { background: rgba(63,214,226,.22); }
.booths-toggle svg { transition: transform .25s var(--ease); }
.booths-toggle.open svg { transform: rotate(180deg); }
.booths-panel { margin-bottom: .6rem; }
.onfloor { color: var(--cyan) !important; font-size: .76rem !important; margin: 0 0 .5rem !important; display: block !important; }
.onfloor[hidden] { display: none !important; }

/* booth names: two per row */
.logos, .card .logos { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; row-gap: 8px !important;
  flex-wrap: initial; overflow-x: visible !important; overflow-y: auto; max-height: min(42vh, 360px); margin: 0 !important; padding: 2px 2px 4px !important; }
.logos span.chip { width: auto !important; min-width: 0; white-space: normal !important; align-items: center; animation: none; }
.logos span.chip em { font-size: .78rem; line-height: 1.3; overflow-wrap: anywhere; }
.logos span.chip b { flex: 0 0 auto; }
.logos span.chip.has-booth { border-color: rgba(63,214,226,.6); background: rgba(63,214,226,.1) !important; }
.logos span.chip.has-booth em::after { content: " ›"; color: var(--cyan); }
html[dir="rtl"] .logos span.chip.has-booth em::after { content: " ‹"; }
.logos span.chip.has-booth::after { display: none; }
.logos span.chip.sel { background: rgba(63,214,226,.28) !important; border-color: var(--cyan); }
.logos span.chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* booth detail: a render, or the organisation's logo on a white tile */
.booth .booth-lbl em { color: #fff; font-weight: 600; }
.booth.logo-mode img { object-fit: contain; background: #fff; padding: 1.4rem 2rem; aspect-ratio: 16/7; }
.booth.logo-mode .booth-lbl { background: rgba(20,10,48,.85); }
html[dir="rtl"] .booth-lbl { left: auto; right: .6rem; }
html[dir="rtl"] .booth #boothClose { right: auto; left: .4rem; }
.booth-about { padding: 0 .8rem .7rem; }

@media (max-width: 700px) {
  .logos, .card .logos { max-height: 30vh; }
  .logos span.chip em { font-size: .72rem; }
  .booths-toggle { margin-bottom: .5rem; }
  .booth img { max-height: 24vh; }
}
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .logos, .card .logos { max-height: 34vh; }
  .card { overflow-y: auto; }
}
/* resting state tuned: a faint frosted outline so the card can still be found */
.stage.in .card:not(.peek) { background: rgba(11,7,22,.24); border-color: rgba(247,245,252,.2); }
.stage.in .card:not(.peek) > *:not(.zone) { filter: blur(2.2px); opacity: .72; }
.stage.in .card:not(.peek) h2 { text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.card::after { content: attr(data-hint); position: absolute; top: .9rem; inset-inline-end: 1rem; font-size: .7rem; font-weight: 500;
  padding: .2rem .6rem; border-radius: 999px; background: rgba(11,7,22,.6); border: 1px solid rgba(247,245,252,.25); color: var(--white);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.stage.in .card:not(.peek)::after { opacity: 1; }
@media (hover: hover) { .stage.in .card:hover::after { opacity: 0; } }

/* =====================================================================
   v23 · booth detail card: text never sits on the image
   ===================================================================== */
.booth { max-width: 100%; margin-top: .7rem; border-radius: 14px; border: 1px solid rgba(63,214,226,.45); background: #120a2b; overflow: hidden; }
.booth-media { background: #06040c; }
.booth-media img, .booth img#boothImg { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; max-height: 30vh; background: #06040c; padding: 0; }
.booth-body { padding: .85rem 1rem .95rem; display: grid; gap: .6rem; }
.booth-head { display: flex; align-items: center; gap: .75rem; padding-inline-end: 2.4rem; }
.booth-logo { flex: 0 0 auto; width: 64px; height: 44px; object-fit: contain; background: #fff; border-radius: 10px; padding: 5px 7px; }
.booth-titles { min-width: 0; }
.booth-head h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.booth-code { display: inline-block; margin-top: .2rem; font-size: .7rem; font-weight: 600; color: var(--cyan); }
.booth .booth-about { margin: 0; padding: 0; max-width: none; font-size: .86rem; line-height: 1.6; opacity: .92; color: var(--white); }
.booth-site { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border-radius: 10px;
  background: rgba(63,214,226,.14); border: 1px solid rgba(63,214,226,.55); color: #fff; text-decoration: none; transition: background .2s; }
.booth-site:hover, .booth-site:focus-visible { background: rgba(63,214,226,.26); }
.booth-site-txt { display: grid; min-width: 0; }
.booth-site b { font-size: .84rem; font-weight: 600; }
.booth-site small { font-size: .72rem; color: #9fe8ef; direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[dir="rtl"] .booth-site small { text-align: right; }
.booth-site svg { flex: 0 0 auto; }
html[dir="rtl"] .booth-site svg { transform: scaleX(-1); }
.booth #boothClose { position: absolute; top: .5rem; inset-inline-end: .5rem; left: auto; right: auto; width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; font-size: 1.1rem; background: rgba(11,7,22,.75); z-index: 2; }
html[dir="ltr"] .booth #boothClose { right: .5rem; } html[dir="rtl"] .booth #boothClose { left: .5rem; }
.booth-lbl { display: none !important; }
/* the card scrolls if the details are tall, never spills off screen */
.stage.in .card.peek { max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 900px) {
  .stage.in .card.peek { max-height: calc(100dvh - 5rem - 250px); }
  .booth-media img, .booth img#boothImg { max-height: 22vh; }
  .booth-body { padding: .7rem .8rem .8rem; gap: .5rem; }
  .booth .booth-about { font-size: .8rem; }
}
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .stage.in .card.peek { max-height: calc(100dvh - 4rem); }
}
.booth img.booth-logo { width: 64px !important; height: 44px !important; max-height: none; aspect-ratio: auto; object-fit: contain; background: #fff; padding: 5px 7px; border-radius: 10px; display: block; }
.booth-titles { flex: 1 1 auto; }