html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  
}

header.hero .btn-text-big {
  font-size: 1.0rem !important;      /* default ~0.875–1rem → bump */
  line-height: 1.5;
  
}

/* =============================== */
/*   HERO (Studio Program) 16:9    */
/* =============================== */

header.hero{
  width: 100%;
  height: 100%;
  /*height: min(calc(100vw * 9 / 16), 92vh);  16:9 but never taller than viewport */
  position: relative;
  overflow: hidden; /* keep capture clean */
  display: flex;
  flex-direction: column;

  /* If any older hero styles add big padding, kill them here */
  padding: 0 !important;
}

/* Let the direct container fill the hero frame */
header.hero > .container,
header.hero > .container-fluid{
  width: 100%;
  max-width: none !important;   /* <-- removes the “border” left/right */
  padding-left: 6vw !important;
  padding-right: 6vw !important;
}

/* Ensure the positioned container truly stretches to full height */
header.hero > .container.position-relative,
header.hero > .container-fluid.position-relative{
  height: 100%;
}

/* Pack content toward top and reserve bottom safe area */
header.hero .container.position-relative{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* NOT center */
  height: 100%;

  /* Broadcast-safe padding zones */
  padding-top: 4vh;
  padding-bottom: 10vh;       /* was 14vh; grid max-height now does the heavy lifting */
}

/* Default rows take only what they need */
header.hero .row{
  flex: 0 0 auto;
}

/* Main studio grid row (Artifact / Seeker) */
header.hero .studio-grid-row{
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 72vh;      /* keeps room for title + controls */
  margin-inline: auto;
}

/* Allow render surfaces to shrink inside the grid */
.artifact-stage,
.scr-center{
  height: 100%;
  min-height: 0;
}

/* Debug safe-area guide (remove when done tuning) 
header.hero::after{
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 5%;
  bottom: 18%;
  border: 1px dashed rgba(255,255,255,0.15);
  pointer-events: none;
}*/

header.hero .container.position-relative {
  /*transform: translateY(-10vh);*/
}


:root{
  --pane-toolbar-h: 38px;
  --pane-gap: 10px;
  --pane-radius: 16px;
  --artifact-ui-safe-top: 40px; /*original 72px;*/
  --mq-violet: #7C4DFF;
  --mqTickerDur: 18s; /* constant default */
}

/* Twin-pane layout rules */
.pane{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--pane-gap);
  min-height: 0;
}

/* Make toolbars identical height */
.pane-toolbar{
  height: var(--pane-toolbar-h);
  min-height: var(--pane-toolbar-h);
  display: flex;
  align-items: center;
}

/* Stage takes remaining height */
.pane-stage{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* This is the magic: both panes get same “window” */
.pane-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--pane-radius);
  overflow: hidden;
  position: relative;
  display: flex;
}

.pane-frame canvas,
.pane-frame video,
.pane-frame img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* for video/img */
}

/* canvas doesn't support object-fit; it just stretches to CSS size.
   Keep using your JS to set canvas resolution (width/height attributes) to match */

.pane-toolbar .btn{
  height: 32px;           /* consistent */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-soft.pane-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.card-soft.pane-card > .pane{
  flex: 1 1 auto;
  min-height: 0;
}

/* =============================== */
/*   RUser bar Loggin taken away   */

/* =============================== */

#threeRenderingCanvas{
  width: 100%;
  height: 100%;
  display: block;
}

.user-bar #btnUserLogin {
  display: none !important;
}


/* =============================== */
/*   RADAR OVERLAY (final clean)   */
/*   HTML: <div id="radarGrid" class="radar"> ... </div> */
/* =============================== */

#radarGrid{
  position: absolute;
  inset: 0;
  margin: auto;

  /* Stable square size */
  width: min(45vh, 320px);
  height: min(45vh, 320px);   /* <-- force non-zero height */
  border-radius: 50%;
  overflow: hidden;

  /* Grid background */
  background: url(/img/textures/vY6Tl-eye.png) center / cover no-repeat;

  pointer-events: none;
  z-index: 15;
}

/* Beam */
#radarGrid .beam{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  background: url(/img/textures/GCbf1.png) center / cover no-repeat;
  animation: radarRotate 5s linear infinite;
}

/* Dots */
#radarGrid .dot{
  position: absolute;
  left: calc(var(--x) * 100%);
  top:  calc(var(--y) * 100%);

  width: 4px;
  height: 4px;
  margin: -2px;

  border-radius: 50%;
  background: #cf5;
  box-shadow: 0 0 10px 5px rgba(100, 255, 0, 0.5);
  opacity: 0;
}

@keyframes radarRotate{
  100% { rotate: 1turn; }
}

/* =============================== */
/*   Artifact CONTAINER STAGE        */
/* =============================== */


#artifactContainer .scr-center{
  position: relative;   /* canvas will anchor here */
  width: 100%;
  aspect-ratio: 16 / 9; /* or whatever you want */
  max-height: 60vh; 
  overflow: hidden;
}

#artifactContainer #threeRenderingCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Make the artifact container a vertical layout */
#artifactContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* This is the vertical centering zone */
.artifact-stage {
  flex: 1 1 auto;        /* takes remaining space */
  min-height: 0;         /* IMPORTANT for flexbox */
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
  position: relative;
}

/* Make the column and card stretch so the middle zone has height */
.col-lg-6.d-flex { align-items: stretch; }
.card-soft { height: 100%; }


/* graphicsOverlay CONTENT */


#graphicsOverlay {
  position: absolute;
  padding-top: 0;
  inset: 0;
  z-index: 2;
  pointer-events: none;  /* IMPORTANT: don't block canvas interaction */
}

#graphicsOverlay .gfx-panel{
  position: absolute;
  inset: 0;          /* ✅ anchor to overlay */
  padding-top: var(--artifact-ui-safe-top); /* ✅ move safe-top here */
  width: 100%;
  height: 100%;
  /* your layout */
  display: none;        		/* default hidden */
  flex-direction: column;       /* image on top, caption below */
  align-items: center;
  justify-content: flex-start;

}

#graphicsOverlay .gfx-panel.is-active{
  display: flex;                 /* ✅ show when active */
}


/* Image wrapper takes remaining vertical space above caption */
#graphicsOverlay .gfx-imgwrap{
  
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;                 /* IMPORTANT so flex children can shrink */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 6px 12px;   /* slight breathing room */
  /* background-color: #80d0c7;     move your bg here */
  border-radius: 12px;           /* optional - looks nice */
}

/* Image keeps ratio and fits the available box */
#graphicsOverlay img.gfx-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;          /* only if speak-button needs clicks */
}

/* Caption area stays at bottom */
#graphicsOverlay .gfx-caption{
  flex: 0 0 auto;
  width: 100%;
  padding: 0px 12px 0px 12px;
  text-align: center;
}

/* Caption text styling (match your vibe) */
#graphicsOverlay .gfx-caption-text{
  display: inline-block;
  font-size: clamp(18px, 2.2vw, 34px); /* responsive but controlled */
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}


/* =============================== */
/*   SEEKER CONTAINER STAGE        */
/* =============================== */

#seekerContainer {
  position: relative;
  width: 100%;
  height: 100%;          /* ← adjust later; fixed height keeps things sane */
  margin: 0 auto;
  overflow: hidden;
  background: transparent; /* or a debug color while testing */
}

/* All canvases fill the stage */
#seekerContainer canvas {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
}

/* FaceFilter base */
#jeeFaceFilterProcessingCanvas.scr-center {
  z-index: 1;
  pointer-events: none;
}

#seekerContainer #seeker {
   z-index: 100;          /* higher than radar’s z-index */
}

/* =============================== */
/*   Top MENU CONTAINER            */
/* =============================== */

#btnBackToIndex {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 50;              /* above everything */
  padding: 4px 10px;
  opacity: 0.85;
}

#btnBackToIndex:hover {
  opacity: 1;
}

/* ---------------------------
   Seeker window overlay stage
---------------------------- */
#videoWindow{
  position: relative;  /* anchor absolute overlays */
  overflow: hidden;
  border-radius: 12px;
}

/* ---------------------------
   Focus window (crop rectangle)
---------------------------- */
#focusWindow{
  position: absolute;
  border: 3px solid rgba(59,130,246,0.9);
  box-sizing: border-box;
  cursor: move;
  background-color: rgba(59,130,246,0.1);
  border-radius: 0.25rem;
  z-index: 30; /* above video + chakra */
}
.resize-handle{
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: rgba(59,130,246,0.9);
  border: 1px solid #fff;
  border-radius: 50%;
}
.resize-handle.bottom-right{ bottom:-6px; right:-6px; cursor:nwse-resize; }
.resize-handle.top-left{ top:-6px; left:-6px; cursor:nwse-resize; }
.resize-handle.top-right{ top:-6px; right:-6px; cursor:nesw-resize; }
.resize-handle.bottom-left{ bottom:-6px; left:-6px; cursor:nesw-resize; }

/* ---------------------------
   Chakra canvases: overlay rules
---------------------------- */
#chakraGrid,
#chakraGridThree,
#chakraGridThreeMirror{
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  pointer-events: none;
  background: transparent;
  z-index: 16;
}

#chakraGrid{
  left: 0;
  width: 100%;
}

/* Left half: pinned to left edge */
#chakraGridThree{
  left: 0;
  right: 50%;
  width: auto;
}

/* Right half: pinned to right edge */
#chakraGridThreeMirror{
  left: 50%;
  right: 0;
  width: auto;

  transform: scaleX(-1);
  transform-origin: center;
}


/* sliders sliders sliders                                                                  */

#artifactContainer{ position: relative; }

/* Overlay layer that sits above video, below top buttons if desired */

#chakraOverlayUI.chakra-ui{
  position: absolute;
  inset: 0;
  z-index: 25;           /* above chakra canvases (16), below focusWindow (30) */
  pointer-events: none;  /* IMPORTANT: children will re-enable pointer events */
}

/* Background image layer */
#chakraOverlayUI .chakra-body-bg{
  position: absolute;
  inset: 0;
  background-image: url('/img/chakras/l-body.png'); /* your old asset */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;         /* tune */
  pointer-events: none;
}

/* Sliders layer */
#chakraOverlayUI .chakra-sliders-overlay{
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

/* Each slider "node" */
.chakra-slider-node{
  position: absolute;
  transform: translate(-50%, -50%); /* x,y are center points */
  /*width: 180px;                      tune */
  pointer-events: auto;             /* allow interaction */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* labels
.chakra-slider-node .chakra-label{
  color: #fff;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  width: 70px;
  opacity: 0.9;
} */
.chakra-slider-node .chakra-label.left{ text-align: right; }
.chakra-slider-node .chakra-label.right{ text-align: left; }

/* the slider itself */
.chakra-slider-node input[type="range"]{
  flex: 1;
  height: 3px;
  opacity: 0.95;
}

.chakra-slider-node .chakra-label{
  flex: 0 0 96px;
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.05;
  max-height: 2.1em;   /* 2 lines */
}





#videoTopBtns {
  display: flex;
  align-items: center;
  width: 100%;
}



.seeker-mode-group {
  margin-left: auto;
}

/* STUDIO STUDIO STUDIO */

.l3-btn {
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #ddd;
}
.l3-btn.active {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}


/* 
		Ticker container 
*/

#lowerTicker{
  overflow: hidden;
  white-space: nowrap;
}

#lowerTicker .ticker-track{
  display: inline-flex;
  white-space: nowrap;
  padding-left: 0; /* ✅ static starts at left */
  will-change: transform;
  animation: mqTicker var(--mqTickerDur, 18s) linear infinite;
  animation-play-state: paused;
}

/* Only run when a panel is selected */
#lowerTicker.is-running .ticker-track{
  padding-left: 100%;
  animation-play-state: running;
}
/* Panels sit inline so the track can slide */
#lowerTicker .ticker-panel{
  display: inline-block;
  padding-right: 2rem;
}

/* Label styling */
#lowerTicker .tarot-ex{
  display: inline;
  font-weight: 600;
  opacity: 0.9;
  margin-right: 0.35em;
  white-space: nowrap;
  color: #9D7CFF;
}

#lowerTicker {
  position: relative; /* anchor the slider */
}



@keyframes mqTicker{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* Ticker speed control (right side) */
#ticker-container {
  position: relative;
}

#tickerSpeedControl {
  position: absolute;
  right: 12px;              /* hard right alignment */
  top: 130%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  pointer-events: auto;
  opacity: 0.6;             /* subtle by default */
}

#tickerSpeedControl:hover {
  opacity: 1;
}

#tickerSpeedSlider {
  width: 110px;
  height: 14px;
  background: transparent;
  cursor: pointer;
  accent-color: #444; /* kill browser blue */
}

/* Track */
#tickerSpeedSlider::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}

#tickerSpeedSlider::-moz-range-track {
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}

/* Thumb */
#tickerSpeedSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

#tickerSpeedSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
}





#spreadOverlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;   /* start non-blocking like gfx overlay */
  display: block;         /* ALWAYS in layout */
}

/* Only interactive when something is actually active inside it */
#spreadOverlay .spread-panel.is-active,
#spreadOverlay .lottery-panel.is-active{
  pointer-events: auto;
}

/* Show when active */
#spreadOverlay.active {
  display: block;
}

/* Individual panels */
#spreadOverlay .spread-panel {
  width: 100%;
  height: 100%;
  display: none;      /* JS toggles */
  overflow: auto;
}

#spreadOverlay .spread-panel.is-active {
  display: block;
}

#spreadOverlay .spread-panel.is-active,
#spreadOverlay .lottery-panel.is-active{
  pointer-events: auto;
}

.t-card.is-selected{
  outline: 3px solid rgba(249,115,22,0.95); /* tweak later */
  outline-offset: 2px;
}

.mq-studio .card-details,
.mq-studio #tarotDetails,
.body.mq-studio .tarot-detail-panel { display:none !important; }