/* The look of 出口はこちらです: the office-night mood (css/themes.css) over dark-industrial, with the exit-sign green as the accent.
   Only tokens and this game's own pieces (.dg-*): the CCTV schematic, the hold window, the death card, the mini game rows. */
[data-theme~="office-night"] {
  --gf-accent: #1d6b45;
  --gf-accent-ink: #ffffff;
  --gf-accent-soft: #dce8e0;
}
.dg-mg-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; }
.dg-step { opacity: 0.55; transition: opacity 0.25s; border-radius: 8px; padding: 6px; }
.dg-step.dg-live { opacity: 1; outline: 2px solid var(--gf-accent); }
.dg-step.dg-done { opacity: 0.8; outline: 2px solid var(--gf-text-dim); }
.dg-shutter { position: relative; width: 120px; height: 150px; border: 3px solid var(--gf-text-dim); overflow: hidden; background: #0d1218; /* pair-ok */ }
.dg-shutter-gap { position: absolute; inset: 0; background: linear-gradient(#1f2b38, #0b0f14); /* pair-ok */ }
.dg-shutter-door { position: absolute; inset: 0; background: repeating-linear-gradient(#7d8183 0 8px, #5b5f61 8px 10px); transition: transform 0.15s linear; /* pair-ok */ }
.dg-shutter small { position: absolute; left: 4px; bottom: 2px; color: var(--gf-text); font-size: 12px; }
.dg-cctv { display: flex; flex-direction: column; gap: 10px; }
.dg-cctv svg { width: 100%; height: auto; background: #050a07; border: 1px solid #1f3a2a; border-radius: 6px; /* pair-ok */ }
.dg-cctv-room { fill: #0f1d15; stroke: #3d7a57; stroke-width: 1.5; }
.dg-cctv-spk { fill: #3fb27a; }
.dg-cctv-t { fill: #9fd8b8; font-size: 13px; font-family: monospace; }
.dg-cctv-dot { fill: #e8d34a; stroke: #fff6b0; stroke-width: 2; }
.dg-cctv-line { min-height: 3em; margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--gf-text); }
.dg-hold { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.dg-hold-btn { min-height: 56px; font-size: 1.1rem; touch-action: none; user-select: none; }
.dg-hold-bar { height: 10px; border-radius: 5px; background: var(--gf-surface-2); overflow: hidden; /* pair-ok */ }
.dg-hold-bar i { display: block; height: 100%; width: 0; background: var(--gf-accent); /* pair-ok */ }
.dg-death { display: flex; flex-direction: column; gap: 12px; }
.dg-death-kicker { margin: 0; color: var(--gf-goal); font-weight: 700; letter-spacing: 0.06em; }
.dg-death-img { width: 100%; max-height: 38vh; object-fit: cover; border-radius: 6px; filter: grayscale(0.4) brightness(0.8); }
.dg-death-text { margin: 0; line-height: 1.7; }
.dg-choices { display: flex; justify-content: flex-end; }
.dg-choices .btn { min-height: 44px; }
/* the title box: the light office panel nearly opaque over the dark corridor photo (AA for the dim lines) */
[data-theme~="office-night"] .gf-title-box { background: color-mix(in srgb, var(--gf-surface) 95%, transparent); }
[data-theme~="office-night"] #notes-btn { color: var(--gf-text); opacity: 1; }
/* 1.0.2: the ending text comes in soon after the photo (the kit fades each part in 1.6 s) */
.gf-ending-text > * { animation-duration: 0.9s; }