/* ============================================================================
   VICE — GLASS (the Law-5 / Law-6 UI layer)
   LAW 5: UI FLOATS ON GLASS. The scene never costs one second of legibility.
   LAW 6: ONE LUXURY VOICE PER SURFACE.
   Requires: tokens (colours, type, glass, motion). These classes are the
   canonical chrome the React glass components (components/glass/) mirror 1:1.
   ==========================================================================*/

/* ---------------------------------------------------------------------------
   THE STAGE — a place you occupy, looking out at a living world (§0)
-------------------------------------------------------------------------- */
.vice-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--vice-void);
  color: var(--vice-ink);
  font-family: var(--vice-font-body);
}

/* The drawn world sits at the back. Law 1. */
.vice-scene { position: absolute; inset: 0; z-index: 0; }

/* Everything else floats above it. */
.vice-chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;   /* children opt back in */
}
.vice-chrome > * { pointer-events: auto; }

/* ---------------------------------------------------------------------------
   THE SCRIMS — darken the sky behind chrome so text always reads (Law 5)
-------------------------------------------------------------------------- */
.vice-scrim-top {
  position: absolute; top: 0; left: 0; right: 0;
  height: 34%; z-index: 1; pointer-events: none;
  background: var(--vice-scrim);
}
.vice-scrim-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 26%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(4,5,10,0.78) 0%, rgba(4,5,10,0) 100%);
}

/* ---------------------------------------------------------------------------
   THE GLASS CARD — dark glass, blur 16–22px, 1px brass border, gold underline
-------------------------------------------------------------------------- */
.vice-glass {
  position: relative;
  padding: 18px 20px;
  border-radius: 6px;                       /* DECK §3: small radius, never bubbly */
  background: linear-gradient(180deg, var(--vice-glass-top) 0%, var(--vice-glass-bot) 100%);
  -webkit-backdrop-filter: blur(var(--vice-glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--vice-glass-blur)) saturate(120%);
  border: 1px solid var(--vice-brass-border);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--vice-ink);
}

/* The gold underline accent — ONE edge only (DECK §3 stitch discipline). */
.vice-glass::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--vice-brass-line) 22%,
    var(--vice-brass-line) 78%,
    transparent 100%);
  opacity: 0.7;
}

.vice-glass--flat::after { display: none; }

.vice-glass--chamfer {
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.vice-glass__title {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--vice-ink);
}

.vice-glass__label {
  margin: 0 0 10px;
  font-family: var(--vice-font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: var(--vice-track-telemetry);
  text-transform: uppercase;
  color: var(--vice-ink-muted);
}

/* ---------------------------------------------------------------------------
   THE PHASE BADGE — teal → gold pill, the surface's clock on its sleeve (§4)
-------------------------------------------------------------------------- */
.vice-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--vice-brass-border);
  background: linear-gradient(90deg,
    rgba(0, 229, 255, 0.14) 0%,
    rgba(255, 210, 63, 0.14) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--vice-font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: var(--vice-track-telemetry);
  text-transform: uppercase;
  color: var(--vice-amber);
  white-space: nowrap;
}

.vice-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vice-cyan);
  box-shadow: 0 0 8px var(--vice-cyan);
  animation: vice-breathe 3.2s ease-in-out infinite;
}
.vice-badge--pinned .vice-badge__dot {
  background: var(--vice-ink-faint); box-shadow: none; animation: none;
}
.vice-badge__time { color: var(--vice-ink); letter-spacing: 0.12em; }
.vice-badge__phase { color: var(--vice-gold); }

@keyframes vice-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY (Law 6) — body sans · mono telemetry · exactly ONE display voice
-------------------------------------------------------------------------- */
.vice-body {
  font-family: var(--vice-font-body);
  font-size: 13px; line-height: 1.55;
  color: var(--vice-ink);
}
.vice-body--muted { color: var(--vice-ink-muted); }

.vice-telemetry {
  font-family: var(--vice-font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: var(--vice-track-telemetry);
  text-transform: uppercase;
  color: var(--vice-ink-muted);
}

/* Big numerals — style AND instant read. On glass, never on raw scene. */
.vice-figure {
  font-family: var(--vice-font-mono);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vice-ink);
  line-height: 1;
}
.vice-figure--money { color: var(--vice-money); }

/* --- THE DISPLAY VOICES. Pick exactly ONE per surface. --- */
.vice-voice--blackletter {          /* Penthouse */
  font-family: var(--vice-font-blackletter);
  text-transform: lowercase;
  font-size: clamp(38px, 3.6vw, 68px);
  line-height: 0.9;
  color: var(--vice-amber);
  text-shadow: 0 18px 46px rgba(0,0,0,0.72), 0 0 16px rgba(255,231,163,0.08);
}
.vice-voice--serif {                /* HONU */
  font-family: var(--vice-font-serif);
  font-size: clamp(30px, 2.8vw, 52px);
  line-height: 1.05;
  color: var(--vice-brass);
  letter-spacing: 0.01em;
}
.vice-voice--hangul {               /* Hub (용) */
  font-family: var(--vice-font-hangul);
  font-size: clamp(30px, 2.8vw, 52px);
  line-height: 1.1;
  color: var(--vice-amber);
}
.vice-voice--didone {               /* Terrazza */
  font-family: var(--vice-font-didone);
  font-size: clamp(32px, 3vw, 58px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--vice-brass);
}

/* The gold underline under a display voice — the luxury signature. */
.vice-underline {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vice-brass-line);
}

/* ---------------------------------------------------------------------------
   HOVER — Destiny bloom, never colour-swap-only (DECK §6)
-------------------------------------------------------------------------- */
.vice-glass--interactive {
  cursor: pointer;
  transition: transform 220ms var(--vice-ease), border-color 220ms var(--vice-ease),
              box-shadow 220ms var(--vice-ease);
}
.vice-glass--interactive:hover {
  transform: scale(1.02);
  border-color: var(--vice-brass-line);
  box-shadow: 0 22px 56px rgba(0,0,0,0.6), 0 0 22px rgba(212,175,55,0.10);
}

/* Links — default to the luxury voice, never browser blue. */
a { color: var(--vice-gold); text-decoration: none; }
a:hover { color: var(--vice-amber); }