/* Spatial UI — polished */

.spatial-stage{
  position:relative;
  height:min(720px, 80vh);
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(241,236,228,.1);
  background:
    radial-gradient(1000px 600px at 50% 40%, oklch(78% 0.09 230 / .10), transparent 65%),
    linear-gradient(180deg,#0d0d12,#07070a);
  cursor:crosshair;
}

.env-room{
  position:absolute;inset:-4%;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
  pointer-events:none;
}
.env-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(oklch(78% 0.08 230 / .08) 1px, transparent 1px),
    linear-gradient(90deg, oklch(78% 0.08 230 / .08) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(180deg, transparent 0%, black 28%, black 72%, transparent 100%);
}
.env-horizon{
  position:absolute;left:0;right:0;top:48%;height:1px;
  background:linear-gradient(90deg, transparent, oklch(78% 0.09 230 / .4), transparent);
  box-shadow:0 0 40px oklch(78% 0.09 230 / .3);
}
.env-floor{
  position:absolute;left:0;right:0;top:48%;bottom:0;
  background:
    linear-gradient(180deg, transparent, rgba(10,10,15,.65)),
    repeating-linear-gradient(180deg, transparent 0 40px, oklch(78% 0.08 230 / .05) 40px 41px);
  transform:perspective(700px) rotateX(62deg);transform-origin:top;opacity:.75;
}

.env-mesh{
  position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:
    repeating-linear-gradient(45deg, oklch(78% 0.08 230 / .14) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, oklch(78% 0.08 230 / .14) 0 1px, transparent 1px 24px);
  mix-blend-mode:screen;
  animation:meshBreathe 4.5s ease-in-out infinite;
}
@keyframes meshBreathe{0%,100%{opacity:.3;}50%{opacity:.75;}}

.aura{
  position:absolute;left:0;top:0;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, oklch(78% 0.09 230 / .18), transparent 65%);
  filter:blur(14px);pointer-events:none;
  /* no transition — driven by rAF smoothing for zero jank */
  will-change:transform;
}

.stack{
  position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);
  width:min(440px, 64%);
  height:320px;
  transform-style:preserve-3d;
  will-change:transform;
}

.glass-card{
  position:absolute;inset:0;
  border-radius:14px;padding:22px 24px;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(241,236,228,.22);
  color:var(--paper);
  transition:border-color .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s;
  transform-style:preserve-3d;
  will-change:transform, opacity;
}
.glass-card.focused{
  background:linear-gradient(180deg, rgba(28,30,38,.9), rgba(14,16,22,.84));
  border-color:oklch(78% 0.08 230 / .6);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 60px oklch(78% 0.09 230 / .22);
}
.glass-card.is-tab{
  cursor:pointer;
  background:linear-gradient(180deg, rgba(26,28,34,.92), rgba(16,18,22,.86));
  border-color:rgba(241,236,228,.18);
}
.glass-card.is-tab:hover{border-color:oklch(78% 0.09 230 / .5);}
.glass-card.pinched{filter:brightness(1.15);}

.tint-periwinkle.focused{background:linear-gradient(180deg, oklch(28% 0.06 230 / .92), oklch(16% 0.04 230 / .86));}
.tint-warm.focused{background:linear-gradient(180deg, oklch(30% 0.04 60 / .92), oklch(16% 0.03 60 / .86));}
.tint-mono.focused{background:linear-gradient(180deg, oklch(22% 0.005 230 / .92), oklch(12% 0.005 230 / .86));}

.gc-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;margin-bottom:14px;
}
.gc-from{font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.018em;margin-bottom:6px;}
.gc-from.small{font-size:15px;font-weight:500;}
.gc-body p{margin:0;font-size:14px;line-height:1.55;opacity:.85;font-family:var(--body);}
.gc-tab-body{margin-top:6px;}

.gc-actions{
  position:absolute;left:24px;right:24px;bottom:20px;
  display:flex;gap:8px;justify-content:flex-end;
}
.gc-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(241,236,228,.3);background:rgba(241,236,228,.08);color:var(--paper);
  cursor:pointer;transition:all .2s;font-weight:500;
}
.gc-btn:hover{background:rgba(241,236,228,.18);border-color:rgba(241,236,228,.5);}
.gc-btn.ghost{background:transparent;}

.focus-ring{
  position:absolute;inset:-8px;border-radius:18px;pointer-events:none;
  border:1px solid oklch(78% 0.09 230 / .45);
  box-shadow:0 0 30px oklch(78% 0.09 230 / .18);
  opacity:.8;
}

/* HUD — top-right */
.gesture-hud{
  position:absolute;top:18px;right:18px;
  padding:12px 16px;border-radius:8px;
  background:rgba(10,10,14,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(241,236,228,.12);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(241,236,228,.75);
  min-width:210px;
}
.ghud-row{display:flex;justify-content:space-between;gap:14px;padding:3px 0;}
.ghud-k{opacity:.55;}
.ghud-v{color:var(--paper);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px;}
.dot-live{width:5px;height:5px;border-radius:50%;background:oklch(80% 0.17 145);box-shadow:0 0 8px oklch(80% 0.17 145);animation:blink 1.8s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Controls — bottom-left, never overlap hint */
.controls{
  position:absolute;bottom:18px;left:18px;display:flex;gap:8px;flex-wrap:wrap;z-index:4;
}
.ctrl{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  background:rgba(10,10,14,.58);backdrop-filter:blur(14px);
  border:1px solid rgba(241,236,228,.14);color:rgba(241,236,228,.9);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:all .2s;font-weight:500;
}
.ctrl:hover{border-color:rgba(241,236,228,.35);}
.ctrl.on{background:oklch(78% 0.09 230 / .22);border-color:oklch(78% 0.09 230 / .6);color:#fff;}

/* Hint — bottom-right, simple, never overlaps pills */
.hint{
  position:absolute;bottom:24px;right:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,236,228,.5);text-align:right;line-height:1.5;max-width:220px;
}

@media (max-width:820px){
  .spatial-stage{height:min(600px,92vh);}
  .stack{width:80%;height:300px;}
  .gesture-hud{display:none;}
  .hint{display:none;}
}