/*
 * CSS DEPTH LANGUAGE — the always-on base dimensionality AND the no-WebGPU fallback (the editor's
 * WebKit preview + any browser without WebGPU). The GPU overlay ADDS dynamic directional light,
 * extrusion and neon spill on top of this; with it removed, these static cues must STILL read as
 * a lit 2.5D scene — so we approximate the screen-space extrusion with a HARD offset side-face
 * (solid dark box-shadow down-right) plus a SOFT contact shadow beyond it, the classic bevel
 * hierarchy. Reduced-motion keeps all of this (it's static); only reactive/cursor motion drops.
 */

/* ---- Panels: raised slabs — a hard side-face (thickness) + a soft contact shadow on the ocean. */
:root.m16-lit .panel,
:root.m16-lit .work,
:root.m16-lit .card {
  box-shadow:
    3px 3px 0 rgba(6, 16, 30, 0.22),        /* solid side-face → visible thickness */
    5px 7px 13px rgba(0, 10, 24, 0.36),     /* soft contact shadow, separated                 */
    inset 1px 1px 0 var(--hilite, rgba(255,255,255,.6)); /* top-left lit rim */
}

/* ---- The window itself: clearly floating above the starfield. Deep extrusion + broad env shadow. */
:root.m16-lit .window {
  box-shadow:
    inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow),
    4px 4px 0 rgba(0, 0, 0, 0.34),          /* solid side-face */
    7px 10px 18px rgba(0, 0, 0, 0.5),       /* contact shadow */
    0 22px 64px rgba(0, 0, 0, 0.6);         /* broad ambient drop */
}

/* ---- Title strips sit slightly ABOVE their panel: bottom shadow + top light-catching rim. */
:root.m16-lit .win__title,
:root.m16-lit .panel__title {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 4px 8px rgba(0, 0, 0, 0.28);
  position: relative; z-index: 1;
}

/* ---- Inner content (lined paper / wells / portrait) reads RECESSED into its panel. Text
   (.props__blurb) is NOT a surface — it stays flat content. */
:root.m16-lit .well,
:root.m16-lit .dsi__stage,
:root.m16-lit [data-m16-depth="inset"] {
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.30),
    inset -1px -1px 0 var(--hilite, rgba(255,255,255,.5));
}

/* ---- Navbar road signs: thin illuminated plaques on the sand — NO giant black extrusion. */
:root.m16-lit .win__menu .menu-item {
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.18);
}
:root.m16-lit .win__menu .menu-item[aria-current="page"] {
  box-shadow: inset 0 0 0 1px rgba(150,240,255,0.9), 0 0 8px rgba(60,200,255,0.55), 0 1px 2px rgba(0,0,0,0.25);
}

/* ---- Character carousel: the strip is a RECESSED tray; tiles are shallow badges (small shadow). */
:root.m16-lit .dsi__strip {
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.32), inset -1px -1px 0 var(--hilite, rgba(255,255,255,.4));
}
:root.m16-lit .dsi__ico {
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4), 1px 2px 3px rgba(0,0,0,0.28);
}

/* ---- Declarative depth language (persisted as data-m16-depth; survives snapshots). */
:root.m16-lit [data-m16-depth="elevated"] {
  box-shadow: 5px 5px 0 rgba(0,0,0,0.28), 7px 11px 22px rgba(0, 0, 0, 0.46);
}
:root.m16-lit [data-m16-depth="raised"] {
  box-shadow: 3px 3px 0 rgba(4,12,28,0.22), 4px 7px 12px rgba(0, 8, 20, 0.36);
}
:root.m16-lit [data-m16-depth="flat"] { box-shadow: none; }

/* ---- Buttons are physical raised objects: side-face + contact shadow + top rim. */
:root.m16-lit .btn,
:root.m16-lit .m16-ins-btn,
:root.m16-lit .dsi__arrow,
:root.m16-lit .cap-btn {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset -1px -1px 0 rgba(0, 0, 0, 0.25),
    2px 2px 0 rgba(0, 0, 0, 0.20),
    2px 3px 5px rgba(0, 0, 0, 0.26);
}
/* Physical depress: the face drops down-right, the side-face collapses, bevel inverts to inset. */
:root.m16-lit .btn:active,
:root.m16-lit .m16-ins-btn:active,
:root.m16-lit .dsi__arrow:active,
:root.m16-lit .cap-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset 2px 2px 3px rgba(0, 0, 0, 0.38),
    inset -1px -1px 0 rgba(255, 255, 255, 0.25);
}