/* ============================================================
   OUTFIT LAB — paper doll wardrobe
   ============================================================ */

.ol-body {
  margin: 0;
  min-height: 100dvh;
  color: #e2e8f0;
  background: #060a10;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  overflow-x: hidden;
}

.ol-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 200, 240, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(56, 189, 248, 0.08), transparent 50%),
    linear-gradient(180deg, #0c121c 0%, #060a10 50%, #04060a 100%);
}

.ol-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  background: rgba(8, 12, 20, 0.94);
  border-bottom: 1px solid rgba(0, 200, 240, 0.3);
  backdrop-filter: blur(10px);
}

.ol-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #f0d78c;
  text-decoration: none;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.ol-brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ol-topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-left: auto;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}

.ol-topnav a {
  color: #94a3b8;
  text-decoration: none;
  padding: 0.35rem 0.15rem;
}

.ol-topnav a:hover,
.ol-topnav a.is-active {
  color: #f0d78c;
}

.ol-main {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0.85rem 2.5rem;
}

.ol-hero {
  margin-bottom: 1rem;
}

.ol-kicker {
  margin: 0 0 0.3rem;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: #f0d78c;
}

.ol-hero h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.ol-lead {
  margin: 0;
  max-width: 40rem;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 400;
}

.ol-agent-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.ol-agent-tab {
  min-height: 56px;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(12, 18, 28, 0.9);
  color: #94a3b8;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ol-agent-tab span {
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #64748b;
}

.ol-agent-tab.is-active {
  color: #0b1220;
  background: linear-gradient(180deg, #f0d78c, #00c8f0);
  border-color: #f0d78c;
  box-shadow: 0 0 18px rgba(0, 200, 240, 0.3);
}

.ol-agent-tab.is-active span {
  color: rgba(11, 18, 32, 0.7);
}

.ol-stage {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .ol-stage {
    grid-template-columns: minmax(280px, 0.95fr) 1.15fr;
    align-items: start;
  }
}

.ol-stage-board {
  border: 1px solid rgba(0, 200, 240, 0.35);
  background: #0a0e14;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.ol-stage-chrome {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: #f0d78c;
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(0, 200, 240, 0.2);
}

.ol-doll-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(58vh, 520px);
  padding: 0.75rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255, 255, 255, 0.06), transparent 65%),
    #f8fafc;
}

.ol-doll {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(56vh, 500px);
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.15s ease, transform 0.2s ease;
}

.ol-doll.is-swapping {
  opacity: 0.25;
  transform: scale(0.97);
}

.ol-stage-note {
  margin: 0;
  padding: 0.65rem 0.75rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #cbd5e1;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  min-height: 3.2em;
}

.ol-wardrobe {
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(8, 14, 24, 0.92);
  border-radius: 4px;
  padding: 0.75rem 0.75rem 1rem;
}

.ol-wardrobe-head h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

.ol-wardrobe-head p {
  margin: 0.25rem 0 0.65rem;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #64748b;
}

.ol-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.ol-filter {
  min-height: 36px;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: #94a3b8;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
}

.ol-filter.is-active {
  color: #0b1220;
  background: #38bdf8;
  border-color: #38bdf8;
  font-weight: 700;
}

.ol-filter-action {
  margin-left: auto;
  border-color: rgba(240, 215, 140, 0.45);
  color: #f0d78c;
}

.ol-filter-action:hover {
  background: rgba(240, 215, 140, 0.12);
}

.ol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

@media (min-width: 520px) {
  .ol-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .ol-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ol-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.65);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  min-height: 0;
  touch-action: manipulation;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.ol-card:hover,
.ol-card:focus-visible {
  border-color: rgba(240, 215, 140, 0.55);
  outline: none;
}

.ol-card.is-on {
  border-color: #f0d78c;
  box-shadow: 0 0 0 1px rgba(240, 215, 140, 0.35), 0 0 16px rgba(0, 200, 240, 0.2);
}

.ol-card:active {
  transform: scale(0.98);
}

.ol-card-thumb {
  display: block;
  aspect-ratio: 2 / 3;
  background: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
}

.ol-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

.ol-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.15rem 0.15rem;
}

.ol-card-tag {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: #38bdf8;
}

.ol-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.ol-disclaimer {
  margin: 0.85rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #64748b;
}

.ol-footer {
  position: relative;
  z-index: 1;
  padding: 1rem 0.85rem 1.5rem;
  text-align: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #64748b;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.ol-footer a {
  color: #f0d78c;
  text-decoration: none;
}

@media (max-width: 560px) {
  .ol-topnav a:nth-child(n + 4) {
    display: none;
  }
}

/* ============================================================
   FIELD PROOF — code-gated realistic mission stills
   ============================================================ */

.ol-proof {
  margin-top: 1.5rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(8, 10, 16, 0.95);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

.ol-proof-chrome {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.35);
  border-bottom: 1px solid rgba(239, 68, 68, 0.25);
}

.ol-proof-chrome #ol-proof-status.is-open {
  color: #86efac;
}

.ol-proof-locked {
  padding: 1.1rem 0.9rem 1.25rem;
}

.ol-proof-lock-copy h2 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}

.ol-proof-lock-copy p {
  margin: 0 0 0.55rem;
  max-width: 40rem;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 400;
}

.ol-proof-hint {
  font-family: "Share Tech Mono", monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em;
  color: #64748b !important;
}

.ol-proof-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
  max-width: 28rem;
}

.ol-proof-input {
  flex: 1 1 12rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #0a0e14;
  color: #f1f5f9;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}

.ol-proof-input:focus {
  outline: none;
  border-color: #f0d78c;
  box-shadow: 0 0 0 1px rgba(240, 215, 140, 0.35);
}

.ol-proof-submit {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid #f0d78c;
  background: linear-gradient(180deg, #f0d78c, #00c8f0);
  color: #0b1220;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  border-radius: 2px;
}

.ol-proof-submit:hover {
  filter: brightness(1.05);
}

.ol-proof-msg {
  min-height: 1.2em;
  margin: 0.55rem 0 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #fca5a5;
}

.ol-proof-msg.is-ok {
  color: #86efac;
}

.ol-proof-open {
  padding: 0.85rem 0.9rem 1rem;
}

.ol-proof-open.is-hidden,
.ol-proof-open[hidden] {
  display: none;
}

.ol-proof-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.ol-proof-kicker {
  margin: 0 0 0.2rem;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: #86efac;
}

.ol-proof-meta h2 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.15rem, 3.5vw, 1.55rem);
  letter-spacing: 0.04em;
}

.ol-proof-caption {
  margin: 0;
  max-width: 38rem;
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 400;
}

.ol-proof-forget {
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  color: #94a3b8;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
}

.ol-proof-forget:hover {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.45);
}

.ol-proof-frame {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #000;
  border-radius: 3px;
  overflow: hidden;
}

.ol-proof-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 560px);
  object-fit: contain;
  background: #05070b;
  transition: opacity 0.2s ease;
}

.ol-proof-img.is-swapping {
  opacity: 0.3;
}

.ol-proof-stamp {
  padding: 0.45rem 0.65rem;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: #64748b;
  background: rgba(0, 0, 0, 0.85);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.ol-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MODE TABS + DRESS-UP DRAG GAME
   ============================================================ */

.ol-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.ol-mode-tab {
  min-height: 52px;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(12, 18, 28, 0.9);
  color: #94a3b8;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ol-mode-tab span {
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #64748b;
}

.ol-mode-tab.is-active {
  color: #0b1220;
  background: linear-gradient(180deg, #7dd3fc, #38bdf8);
  border-color: #7dd3fc;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}

.ol-mode-tab.is-active span {
  color: rgba(11, 18, 32, 0.7);
}

.ol-stage.is-hidden,
.ol-dress.is-hidden,
[data-mode-panel][hidden] {
  display: none !important;
}

.ol-dress {
  display: grid;
  gap: 1rem;
}

/* Mobile/tablet: clothing rack FIRST so options are on-screen without
   scrolling past a tall doll. Desktop keeps doll | rack side-by-side. */
@media (max-width: 899px) {
  .ol-dress {
    display: flex;
    flex-direction: column;
  }
  .ol-piece-rack {
    order: -1;
  }
  .ol-dress-canvas {
    min-height: min(42vh, 380px);
  }
  .ol-dress-stack,
  .ol-dress-base {
    max-height: min(40vh, 360px);
  }
}

@media (min-width: 900px) {
  .ol-dress {
    grid-template-columns: minmax(280px, 0.95fr) 1.15fr;
    align-items: start;
  }
}

.ol-dress-stage-board {
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: #0a0e14;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.ol-dress-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(58vh, 520px);
  padding: 0.75rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255, 255, 255, 0.08), transparent 65%),
    #f8fafc;
  /* Allow page scroll; doll layers handle their own taps */
  touch-action: manipulation;
  user-select: none;
}

.ol-dress-canvas.is-drag-over {
  outline: 3px dashed #38bdf8;
  outline-offset: -8px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(56, 189, 248, 0.12), transparent 65%),
    #eef6ff;
}

.ol-dress-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: min(56vh, 500px);
  line-height: 0;
}

.ol-dress-base {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(56vh, 500px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 1;
}

.ol-dress-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
}

.ol-dress-layer[data-slot="shoes"] { z-index: 3; }
.ol-dress-layer[data-slot="bottom"] { z-index: 4; }
.ol-dress-layer[data-slot="top"] { z-index: 5; }
.ol-dress-layer[data-slot="full"] { z-index: 6; }
.ol-dress-layer[data-slot="outer"] { z-index: 7; }
/* Armor always stacks above clothes */
.ol-dress-layer[data-slot="armor"] { z-index: 8; }
.ol-dress-layer[data-slot="head"] { z-index: 9; }
.ol-dress-layer[data-slot="acc"] { z-index: 10; }
.ol-dress-layer[data-slot="prop"] { z-index: 11; }

.ol-dress-layer.is-on {
  pointer-events: auto;
  cursor: pointer;
}

.ol-dress-layer[hidden] {
  display: none !important;
}

.ol-dress-hint {
  position: absolute;
  bottom: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 0.3rem 0.65rem;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: #475569;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  pointer-events: none;
  transition: opacity 0.2s;
}

.ol-dress-hint.is-hidden {
  opacity: 0;
}

.ol-dress-actions {
  padding: 0.65rem 0.75rem 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.ol-dress-btn {
  min-height: 40px;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.8);
  color: #e2e8f0;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
}

.ol-dress-btn:hover {
  border-color: #38bdf8;
  color: #7dd3fc;
}

.ol-dress-tip {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.3;
  font-weight: 400;
}

.ol-piece-rack {
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(8, 14, 24, 0.92);
  border-radius: 4px;
  padding: 0.75rem 0.75rem 1rem;
}

.ol-piece-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.ol-piece-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

@media (min-width: 520px) {
  .ol-piece-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .ol-piece-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ol-piece {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.65);
  border-radius: 3px;
  cursor: grab;
  /* pan-y: finger can scroll the page through the rack; JS only arms drag
     after a non-vertical movement threshold (see outfit-lab.js). */
  touch-action: pan-y;
  text-align: left;
  color: inherit;
  font: inherit;
  min-height: 0;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  user-select: none;
  -webkit-user-select: none;
}

.ol-piece:active,
.ol-piece.is-dragging {
  cursor: grabbing;
}

.ol-piece.is-worn {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
}

.ol-piece-thumb {
  display: block;
  aspect-ratio: 2 / 3;
  background:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
}

.ol-piece-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
}

.ol-piece-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0 0.1rem 0.1rem;
}

.ol-piece-tag {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: #38bdf8;
}

.ol-piece-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

/* Floating drag ghost */
.ol-drag-ghost {
  position: fixed;
  z-index: 9999;
  width: 110px;
  height: 165px;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  transform: translate(-50%, -50%) scale(1.05);
}

.ol-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  border: 2px solid #38bdf8;
}


/* ══════════════════════════════════════════════════════════════════════════
   OUTFIT LAB — DARK THEME ALIGNMENT
   ──────────────────────────────────────────────────────────────────────────
   Lives here rather than in styles.css because this file loads after it and
   would otherwise win the cascade at equal specificity.

   The page ships a dark body (#060a10) but its two largest surfaces were
   light: 24 garment thumbnails on a #e2e8f0 Photoshop-style transparency
   checkerboard, and the doll stage. Plus two accent gradients that clashed
   with the site palette (gold -> cyan).

   The doll stage is NOT darkened here — the doll and outfit art are opaque
   JPGs on white, so a dark stage would expose a hard white rectangle behind
   the figure. It is instead framed as a deliberate lightbox and dimmed as a
   whole, which keeps the art and its backdrop in sync. Fixing that properly
   needs the art cut out; see the note at the end of this block.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Garment thumbnails: Photoshop checkerboard -> scanner grid ──────────── */
.ol-body .ol-piece-thumb {
  background-color: #0a121c;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.10) 1px, transparent 1px),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(34, 211, 238, 0.07), transparent 70%);
  background-size: 14px 14px, 14px 14px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  border-radius: 3px;
}

/* ── Accent tabs: drop the gold->cyan clash, use the site cyan ───────────── */
.ol-body .ol-mode-tab.is-active,
.ol-body .ol-agent-tab.is-active {
  color: #01151c;
  -webkit-text-fill-color: #01151c;
  background: linear-gradient(178deg, #7ce8f8 0%, #22d3ee 38%, #0fa3c4 100%);
  border-color: #a5f3fc;
  box-shadow:
    0 0 22px rgba(34, 211, 238, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* the agent tab keeps a gold edge so the two rows stay distinguishable */
.ol-body .ol-agent-tab.is-active {
  border-color: #f0b429;
  box-shadow:
    0 0 22px rgba(240, 180, 41, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ── Primary action ─────────────────────────────────────────────────────── */
.ol-body .ol-proof-submit {
  background: linear-gradient(178deg, #7ce8f8 0%, #22d3ee 34%, #0fa3c4 72%, #0b7f9c 100%);
  border-color: #a5f3fc;
  color: #01151c;
  -webkit-text-fill-color: #01151c;
}

/* ── Hint pill was a white chip with slate ink ───────────────────────────── */
.ol-body .ol-dress-hint {
  background: rgba(6, 14, 22, 0.88);
  color: #9fe4f2;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 3px;
}

/* ── Fine print sat at ~4.1:1 ───────────────────────────────────────────── */
.ol-body .ol-disclaimer,
.ol-body .ol-proof-hint { color: #93a7bd !important; }

/* ── Doll stage: frame it as an intentional lightbox and take the glare off.
      The dim is applied to the whole stage so the artwork and its white
      backdrop move together and no seam appears. Hover restores full
      brightness for inspecting an outfit. ──────────────────────────────── */
.ol-body .ol-doll-wrap {
  filter: brightness(0.9) saturate(1.02);
  transition: filter 0.35s ease;
  border: 1px solid #24425e;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 18px 44px rgba(0, 0, 0, 0.55);
}
.ol-body .ol-doll-wrap:hover { filter: none; }

/* ══════════════════════════════════════════════════════════════════════════
   OUTFIT LAB — THE DARK STAGE (supersedes the interim lightbox above)
   ──────────────────────────────────────────────────────────────────────────
   The doll and all 21 Quick Looks have been cut off their white plates, so
   the stage can finally go dark. The earlier `filter: brightness(.9)` hack
   existed only to stop the opaque art glaring; it is cancelled here.

   Read as a holo-projection bay rather than a flat panel: scanner grid,
   ambient bloom behind the figure, and a floor ellipse under the feet so the
   doll is standing on a lit platform instead of floating on a rectangle.
   ══════════════════════════════════════════════════════════════════════════ */

.ol-body .ol-doll-wrap {
  filter: none;
  background-color: #08111b;
  background-image:
    /* floor pool under the feet */
    radial-gradient(ellipse 42% 9% at 50% 90%, rgba(34, 211, 238, 0.30), transparent 72%),
    /* ambient bloom behind the figure */
    radial-gradient(ellipse 62% 55% at 50% 42%, rgba(34, 211, 238, 0.09), transparent 72%),
    /* scanner grid */
    linear-gradient(rgba(34, 211, 238, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.055) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 26px 26px, 26px 26px;
  background-position: center, center, center bottom, center bottom;
  border: 1px solid #24425e;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(120, 190, 220, 0.10),
    0 18px 44px rgba(0, 0, 0, 0.55);
}
/* the interim hover-to-undim is no longer meaningful */
.ol-body .ol-doll-wrap:hover { filter: none; }

/* the figure sits on the platform, lit from below-front */
.ol-body .ol-doll,
.ol-body .ol-doll-layer,
.ol-body .ol-doll img {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}

/* ══════════════════════════════════════════════════════════════════════════
   OUTFIT LAB — WARDROBE CARD THUMBS
   .ol-card-thumb filled with #f1f5f9 to sit behind the old opaque outfit
   JPGs. Those are transparent now, so the pale plate has nothing to hide and
   just reads as 11 light tiles. Given the same scanner-grid treatment as the
   Dress-Up rack so both modes match.
   ══════════════════════════════════════════════════════════════════════════ */

.ol-body .ol-card-thumb {
  background-color: #0a121c;
  background-image:
    radial-gradient(ellipse 50% 12% at 50% 92%, rgba(34, 211, 238, 0.18), transparent 72%),
    linear-gradient(rgba(34, 211, 238, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.075) 1px, transparent 1px);
  background-size: 100% 100%, 16px 16px, 16px 16px;
  border-radius: 3px;
}
.ol-body .ol-card.is-active .ol-card-thumb,
.ol-body .ol-card:hover .ol-card-thumb {
  background-color: #0d1926;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35);
}

/* Outfit + accessory sections lead the rack — they're the two things the game
   is actually built around; the per-slot filters behind them are refinement. */
.ol-body .ol-filter-hero {
  border-color: rgba(34, 211, 238, 0.45);
  color: #9fe4f2;
}
.ol-body .ol-filter-hero.is-active {
  background: linear-gradient(178deg, #22d3ee 0%, #0e7490 100%);
  color: #01151c;
  border-color: #67e8f9;
}

/* Dress-Up shared the Quick Looks problem: .ol-dress-canvas filled #f8fafc.
   The base doll is a transparent cut-out now, so the same holo-bay treatment
   applies — both modes finally read as the same room. */
.ol-body .ol-dress-canvas {
  background-color: #08111b;
  background-image:
    radial-gradient(ellipse 42% 9% at 50% 90%, rgba(34, 211, 238, 0.30), transparent 72%),
    radial-gradient(ellipse 62% 55% at 50% 42%, rgba(34, 211, 238, 0.09), transparent 72%),
    linear-gradient(rgba(34, 211, 238, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.055) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 26px 26px, 26px 26px;
  background-position: center, center, center bottom, center bottom;
  border-color: #24425e;
}