/*
 * Shared passive-matrix LCD material pass.
 *
 * Physical stack, back to front:
 *   base background  = reflector sheet / air gap
 *   ::before         = deterministic multi-scale reflector variation
 *   direct children  = LCD ink plane
 *   ::after          = exposed reflector sliver / printed mask / lens
 *
 * The reflector starts 3.9% above its nominal preset value. The multiply-only
 * texture layer removes up to 7.5%, producing an approximate -3.9% to +3.9%
 * reflectance range without painting texture over the dark LCD ink.
 */

:where(
  #goofs .goofs-now-playing,
  .double-a-deck__lcd,
  .double-a-deck__compact-title-window,
  .konami-doublea-machine__display
) {
  --lcd-texture-opacity: 1;
  --lcd-lens-sheen: rgba(255, 255, 255, 0.055);
  --lcd-lens-edge: rgba(255, 255, 255, 0.16);
  --lcd-edge-width: 1px;
  --lcd-sliver-width: 3px;
  --lcd-mask-width: 5px;
  position: relative;
  isolation: isolate;
}

:where(
  #goofs .goofs-now-playing,
  .double-a-deck__lcd,
  .double-a-deck__compact-title-window,
  .konami-doublea-machine__display
)::before,
:where(
  #goofs .goofs-now-playing,
  .double-a-deck__lcd,
  .double-a-deck__compact-title-window,
  .konami-doublea-machine__display
)::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

/* One static, continuous reflector sheet. The three layers resolve as fine
   grain, irregular medium fibers, and broad low-contrast mottling. */
:where(
  #goofs .goofs-now-playing,
  .double-a-deck__lcd,
  .double-a-deck__compact-title-window,
  .konami-doublea-machine__display
)::before {
  z-index: 0;
  opacity: var(--lcd-texture-opacity);
  background:
    radial-gradient(circle at 21% 31%, rgba(18, 24, 20, 0.072) 0 0.34px, transparent 0.54px) 0 0 / 3.7px 4.3px,
    radial-gradient(circle at 73% 66%, rgba(255, 255, 255, 0.035) 0 0.28px, transparent 0.52px) 1.2px 0.8px / 4.9px 3.9px,
    radial-gradient(ellipse at 24% 39%, rgba(21, 28, 23, 0.022) 0 8%, transparent 31%) 0 0 / 31px 23px,
    radial-gradient(ellipse at 81% 68%, rgba(32, 38, 34, 0.026) 0 6%, transparent 34%) 13px 9px / 43px 37px,
    linear-gradient(127deg, rgba(26, 32, 28, 0.02), transparent 24% 58%, rgba(255, 255, 255, 0.018) 83%, rgba(30, 36, 32, 0.018));
  background-color: rgba(255, 255, 255, 0.001);
  mix-blend-mode: multiply;
}

/* Ink sits above the reflector and below the clear lens/mask. */
:where(
  #goofs .goofs-now-playing,
  .double-a-deck__lcd,
  .double-a-deck__compact-title-window,
  .konami-doublea-machine__display
) > * {
  position: relative;
  z-index: 2;
}

/* Lens, narrow exposed reflector overhang, then the printed inner mask. */
:where(
  #goofs .goofs-now-playing,
  .double-a-deck__lcd,
  .double-a-deck__compact-title-window,
  .konami-doublea-machine__display
)::after {
  z-index: 4;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 9%, var(--lcd-lens-sheen) 28%, transparent 47% 79%, rgba(20, 28, 26, 0.026)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 17% 80%, rgba(18, 24, 21, 0.045));
  box-shadow:
    inset 0 0 0 var(--lcd-edge-width) var(--lcd-lens-edge),
    inset 0 0 0 var(--lcd-sliver-width) var(--lcd-sliver),
    inset 0 0 0 var(--lcd-mask-width) var(--lcd-mask);
}

/* -------------------------------------------------------------------------
   GOOFS preset: warmer olive/grey reflector, heavier fibers, faint edge bleed
   ------------------------------------------------------------------------- */

#goofs .goofs-now-playing {
  --lcd-reflector-nominal: #c1bea0;
  --lcd-reflector-active-nominal: #c8c6a9;
  --lcd-reflector: color-mix(in srgb, var(--lcd-reflector-nominal) 96.1%, white 3.9%);
  --lcd-reflector-active: color-mix(in srgb, var(--lcd-reflector-active-nominal) 96.1%, white 3.9%);
  --lcd-sliver: rgba(225, 221, 185, 0.62);
  --lcd-mask: rgba(64, 66, 56, 0.84);
  --lcd-lens-sheen: rgba(255, 252, 225, 0.07);
  --lcd-lens-edge: rgba(248, 242, 210, 0.2);
  --lcd-ink: #20251f;
  --lcd-ink-muted: rgba(44, 50, 42, 0.72);
  --lcd-shadow-near: 0.58px 0.68px 0 rgba(71, 66, 48, 0.24);
  --lcd-shadow-far: 1.35px 1.55px 0.75px rgba(71, 66, 48, 0.13);
  --lcd-bleed: 0 0 0.72px rgba(43, 48, 39, 0.24);
  overflow: hidden;
  color: var(--lcd-ink);
  border-color: #343732;
  background: var(--lcd-reflector);
  box-shadow:
    inset 0 0 0 1px rgba(28, 31, 27, 0.82),
    inset 0 4px 9px rgba(27, 30, 26, 0.28),
    inset 0 -2px 5px rgba(255, 255, 237, 0.12),
    0 2px 0 rgba(151, 157, 153, 0.27),
    0 5px 12px rgba(0, 0, 0, 0.38);
}

#goofs .goofs-now-playing::before {
  background:
    radial-gradient(circle at 21% 31%, rgba(38, 40, 30, 0.072) 0 0.36px, transparent 0.56px) 0 0 / 3.7px 4.3px,
    radial-gradient(circle at 73% 66%, rgba(255, 250, 218, 0.035) 0 0.3px, transparent 0.54px) 1.2px 0.8px / 4.9px 3.9px,
    radial-gradient(ellipse at 24% 39%, rgba(61, 62, 42, 0.026) 0 8%, transparent 31%) 0 0 / 31px 23px,
    radial-gradient(ellipse at 81% 68%, rgba(79, 68, 44, 0.028) 0 6%, transparent 34%) 13px 9px / 43px 37px,
    linear-gradient(127deg, rgba(65, 63, 43, 0.022), transparent 24% 58%, rgba(255, 250, 218, 0.018) 83%, rgba(57, 58, 42, 0.02));
}

#goofs .goofs-now-playing.is-playing {
  background: var(--lcd-reflector-active);
  box-shadow:
    inset 0 0 0 1px rgba(28, 31, 27, 0.82),
    inset 0 4px 9px rgba(27, 30, 26, 0.24),
    inset 0 -2px 5px rgba(255, 255, 237, 0.15),
    0 2px 0 rgba(151, 157, 153, 0.3),
    0 5px 13px rgba(0, 0, 0, 0.4);
}

#goofs :is(
  .goofs-now-playing__label,
  .goofs-now-playing__clock,
  .goofs-now-playing__title
) {
  color: var(--lcd-ink);
  text-shadow:
    var(--lcd-shadow-near),
    var(--lcd-shadow-far),
    var(--lcd-bleed);
}

#goofs .goofs-now-playing__label {
  color: var(--lcd-ink-muted);
}

#goofs .goofs-now-playing__segments {
  color: rgba(45, 51, 43, 0.052);
  text-shadow: none;
}

#goofs .goofs-now-playing.is-playing .goofs-now-playing__title {
  color: #171c17;
  text-shadow:
    var(--lcd-shadow-near),
    var(--lcd-shadow-far),
    var(--lcd-bleed);
}

@media (min-width: 781px) {
  #goofs .goofs-modal__panel.is-nightlight .goofs-now-playing {
    --lcd-reflector-nominal: #d5cba0;
    --lcd-reflector-active-nominal: #dad0a6;
    --lcd-reflector: color-mix(in srgb, var(--lcd-reflector-nominal) 96.1%, white 3.9%);
    --lcd-reflector-active: color-mix(in srgb, var(--lcd-reflector-active-nominal) 96.1%, white 3.9%);
    --lcd-texture-opacity: 0.82;
    --lcd-sliver: rgba(255, 244, 190, 0.7);
    --lcd-lens-sheen: rgba(255, 249, 211, 0.09);
    background: var(--lcd-reflector-active);
    box-shadow:
      inset 0 0 0 1px rgba(63, 52, 28, 0.58),
      inset 0 4px 9px rgba(64, 49, 20, 0.18),
      inset 0 -2px 5px rgba(255, 252, 220, 0.24),
      0 0 12px rgba(255, 202, 92, 0.32),
      0 0 24px rgba(255, 180, 62, 0.18);
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   AA preset: cooler green/smoke/blue-grey reflector, finer paper structure,
   darker non-emissive ink, and almost no edge bleed
   ------------------------------------------------------------------------- */

.double-a-deck .double-a-deck__lcd,
.double-a-deck .double-a-deck__compact-title-window,
.konami-doublea-machine__display {
  --lcd-reflector-nominal: #a2ada2;
  --lcd-reflector-active-nominal: #a8b3a8;
  --lcd-reflector: color-mix(in srgb, var(--lcd-reflector-nominal) 96.1%, white 3.9%);
  --lcd-reflector-active: color-mix(in srgb, var(--lcd-reflector-active-nominal) 96.1%, white 3.9%);
  --lcd-sliver: rgba(200, 216, 211, 0.56);
  --lcd-mask: rgba(26, 33, 33, 0.9);
  --lcd-lens-sheen: rgba(220, 242, 244, 0.052);
  --lcd-lens-edge: rgba(214, 235, 234, 0.16);
  --lcd-ink: #162420;
  --lcd-ink-muted: #263d37;
  --lcd-shadow-near: 0.52px 0.62px 0 rgba(42, 58, 54, 0.2);
  --lcd-shadow-far: 1.18px 1.4px 0.7px rgba(42, 58, 54, 0.1);
  --lcd-bleed: 0 0 0.24px rgba(24, 38, 34, 0.16);
  overflow: hidden;
  color: var(--lcd-ink);
  background: var(--lcd-reflector);
  text-shadow: none;
}

.double-a-deck .double-a-deck__lcd::before,
.double-a-deck .double-a-deck__compact-title-window::before,
.konami-doublea-machine__display::before {
  background:
    radial-gradient(circle at 19% 29%, rgba(25, 42, 39, 0.066) 0 0.32px, transparent 0.52px) 0 0 / 3.9px 4.7px,
    radial-gradient(circle at 76% 63%, rgba(226, 244, 239, 0.032) 0 0.27px, transparent 0.49px) 1.6px 1.1px / 5.2px 4.1px,
    radial-gradient(ellipse at 27% 42%, rgba(45, 66, 63, 0.022) 0 7%, transparent 30%) 0 0 / 37px 29px,
    radial-gradient(ellipse at 79% 67%, rgba(55, 70, 74, 0.025) 0 6%, transparent 33%) 15px 11px / 47px 41px,
    linear-gradient(131deg, rgba(39, 55, 53, 0.019), transparent 23% 61%, rgba(226, 241, 240, 0.016) 84%, rgba(40, 54, 57, 0.018));
}

.double-a-deck .double-a-deck__lcd {
  border-color: #202a28;
  box-shadow:
    inset 0 0 0 1px rgba(20, 30, 28, 0.78),
    inset 0 4px 10px rgba(18, 26, 25, 0.25),
    inset 0 -2px 5px rgba(231, 242, 232, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.1);
}

.double-a-deck .double-a-deck__compact-title-window {
  --lcd-edge-width: 1px;
  --lcd-sliver-width: 2px;
  --lcd-mask-width: 3px;
  border-color: #202a28;
  box-shadow:
    inset 0 2px 5px rgba(18, 26, 25, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

.double-a-deck :is(
  .double-a-deck__lcd-owner,
  .double-a-deck__title,
  .double-a-deck__inline-time
),
.double-a-deck__compact-title-window .double-a-deck__title {
  color: var(--lcd-ink);
  text-shadow:
    var(--lcd-shadow-near),
    var(--lcd-shadow-far),
    var(--lcd-bleed);
}

.double-a-deck.is-nightlight :is(.double-a-deck__lcd, .double-a-deck__compact-title-window) {
  --lcd-reflector-nominal: #bac3ae;
  --lcd-reflector: color-mix(in srgb, var(--lcd-reflector-nominal) 96.1%, white 3.9%);
  --lcd-texture-opacity: 0.84;
  --lcd-sliver: rgba(231, 239, 211, 0.68);
  filter: brightness(1.08) saturate(0.94);
  box-shadow:
    inset 0 0 0 1px rgba(35, 47, 42, 0.62),
    inset 0 4px 10px rgba(37, 51, 44, 0.19),
    inset 0 -2px 5px rgba(245, 248, 218, 0.19),
    0 0 10px rgba(203, 222, 173, 0.2);
}

/* DA-80 uses the same AA material, with a deeper recess and larger mask. */
.konami-doublea-machine .konami-doublea-machine__display {
  --lcd-edge-width: 1px;
  --lcd-sliver-width: 5px;
  --lcd-mask-width: 9px;
  --lcd-reflector-nominal: #858f82;
  --lcd-reflector: color-mix(in srgb, var(--lcd-reflector-nominal) 96.1%, white 3.9%);
  --lcd-sliver: rgba(178, 191, 176, 0.22);
  --lcd-mask: rgba(16, 20, 18, 0.97);
  --lcd-ink: #242b22;
  --lcd-ink-muted: #3b483d;
  --lcd-shadow-near: 0.62px 0.7px 0 rgba(49, 55, 43, 0.38);
  --lcd-shadow-far: 1.49px 1.68px 0.9px rgba(49, 55, 43, 0.15);
  --lcd-bleed: 0 0 0.32px rgba(31, 37, 29, 0.26);
  color: var(--lcd-ink);
  border-color: #111310;
  background: var(--lcd-reflector);
  box-shadow:
    inset 0 0 0 1px rgba(18, 25, 23, 0.9),
    inset 0 7px 18px rgba(13, 19, 18, 0.38),
    inset 0 -3px 8px rgba(221, 231, 218, 0.055),
    0 0 0 1px #45443e;
}

/* DA-80 reflector: fixed, non-directional grain behind both the active field
   and the translucent reflector sliver. Dark LCD ink naturally suppresses it. */
.konami-doublea-machine .konami-doublea-machine__display::before {
  opacity: 0.94;
  background:
    radial-gradient(circle at 19% 27%, rgba(30, 40, 32, 0.052) 0 0.34px, transparent 0.55px) 0 0 / 3.8px 4.4px,
    radial-gradient(circle at 71% 63%, rgba(41, 50, 41, 0.034) 0 0.29px, transparent 0.51px) 1.5px 0.9px / 5.1px 4.2px,
    radial-gradient(ellipse at 24% 37%, rgba(36, 47, 38, 0.024) 0 8%, transparent 34%) 0 0 / 33px 27px,
    radial-gradient(ellipse at 78% 69%, rgba(49, 57, 48, 0.022) 0 7%, transparent 36%) 14px 11px / 51px 43px,
    radial-gradient(ellipse at 47% 51%, rgba(26, 35, 29, 0.018) 0 11%, transparent 57%) 23px 17px / 109px 83px;
}

/* Smoked clear lens with mild edge falloff and one broad, low-energy reflection. */
.konami-doublea-machine .konami-doublea-machine__display::after {
  background:
    radial-gradient(ellipse at 46% 16%, rgba(244, 248, 234, 0.032), transparent 61%),
    radial-gradient(ellipse at 50% 49%, transparent 54%, rgba(16, 22, 18, 0.13) 100%),
    rgba(18, 24, 20, 0.04);
  box-shadow:
    inset 0 0 16px rgba(11, 17, 14, 0.12),
    inset 0 0 0 var(--lcd-edge-width) var(--lcd-lens-edge),
    inset 0 0 0 var(--lcd-sliver-width) var(--lcd-sliver),
    inset 0 0 0 var(--lcd-mask-width) var(--lcd-mask);
}

.konami-doublea-machine__transport-lamp {
  border-color: #26332f;
  background: #4f645d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.36);
}

.konami-doublea-machine[data-transport-state="playing"] .konami-doublea-machine__transport-lamp,
.konami-doublea-machine[data-transport-state="rewinding"] .konami-doublea-machine__transport-lamp,
.konami-doublea-machine[data-transport-state="fast-forwarding"] .konami-doublea-machine__transport-lamp {
  background: #263e36;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    0.52px 0.62px 0 rgba(42, 58, 54, 0.18),
    1.18px 1.4px 0.7px rgba(42, 58, 54, 0.09);
}

.konami-doublea-machine__display :is(
  .konami-doublea-machine__transport-state,
  .konami-doublea-machine__side-readout,
  .konami-doublea-machine__display-title,
  .konami-doublea-machine__counter,
  .konami-doublea-machine__counter-divider,
  .konami-doublea-machine__duration,
  .konami-doublea-machine__status
) {
  color: var(--lcd-ink);
  text-shadow:
    var(--lcd-shadow-near),
    var(--lcd-shadow-far),
    var(--lcd-bleed);
}

.konami-doublea-machine__display .konami-doublea-machine__counter {
  position: relative;
  z-index: 0;
  text-shadow:
    0.75px 0.84px 0 rgba(49, 55, 43, 0.42),
    1.8px 2.02px 1.05px rgba(49, 55, 43, 0.16),
    0 0 0.34px rgba(31, 37, 29, 0.28);
}

/* Only the segmented timer exposes inactive segments. Ordinary text remains
   continuous LCD ink without an invented segment grid. */
.konami-doublea-machine__display .konami-doublea-machine__counter::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(38, 49, 40, 0.075);
  content: "88:88";
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-shadow: none;
  pointer-events: none;
}

/* A changed counter briefly retains its prior segment pattern. The reflector
   remains completely stationary; only the outgoing LCD ink decays. */
.konami-doublea-machine__display .konami-doublea-machine__counter::after {
  position: absolute;
  inset: 0;
  color: rgba(36, 43, 34, 0.11);
  content: attr(data-previous-value);
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-shadow: none;
  pointer-events: none;
}

.konami-doublea-machine__display :is(
  .konami-doublea-machine__side-readout,
  .konami-doublea-machine__counter-divider,
  .konami-doublea-machine__duration,
  .konami-doublea-machine__status
) {
  color: var(--lcd-ink-muted);
}

.konami-doublea-machine[data-transport-state="empty"] .konami-doublea-machine__status,
.konami-doublea-machine[data-transport-state="error"] .konami-doublea-machine__status {
  color: #57492c;
  text-shadow:
    0.52px 0.62px 0 rgba(84, 72, 45, 0.18),
    1.18px 1.4px 0.7px rgba(84, 72, 45, 0.09);
}

/* Development-only material diagnostic. Add lcd-material-debug to html/body
   while inspecting; production markup never applies this class. */
:is(html, body).lcd-material-debug :is(
  #goofs .goofs-now-playing,
  .double-a-deck__lcd,
  .double-a-deck__compact-title-window,
  .konami-doublea-machine__display
) {
  --lcd-texture-opacity: 1.65;
  --lcd-sliver: rgba(255, 229, 86, 0.92);
  --lcd-mask: rgba(227, 48, 170, 0.78);
  outline: 2px dashed #61e8ff;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  :is(
    #goofs .goofs-now-playing,
    .double-a-deck__lcd,
    .double-a-deck__compact-title-window,
    .konami-doublea-machine__display
  )::before,
  :is(
    #goofs .goofs-now-playing,
    .double-a-deck__lcd,
    .double-a-deck__compact-title-window,
    .konami-doublea-machine__display
  )::after {
    display: none;
  }
}