/* #064 追加4: 新デザインの動く背景（参考 index.html / dashboard.css の .server-canvas・.tech-frame） */
.dgs-bg-canvas, .dgs-bg-wash, .dgs-tech-frame { display: none; }
html[data-dg-theme="space"] body.state-dashboard .dgs-bg-canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html[data-dg-theme="space"] body.state-dashboard .dgs-bg-wash { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 64% 40%, rgba(244,223,0,.12), transparent 40%), linear-gradient(115deg, rgba(244,223,0,.11), transparent 38%); }
html[data-dg-theme="space"][data-dg-mode="yellow"] body.state-dashboard .dgs-bg-wash { background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.34), transparent 44%); }
html[data-dg-theme="space"] body.state-dashboard .dgs-tech-frame { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: .72; }
/* 本体は背景の上に */
html[data-dg-theme="space"] #student-dashboard { position: relative; background-image: none !important; }
html[data-dg-theme="space"] #student-dashboard > .dash-header, html[data-dg-theme="space"] #student-dashboard > .dash-body { position: relative; z-index: 2; }
html[data-dg-theme="space"] .dash-header { position: sticky; top: 0; z-index: 20 !important; }
/* レール（上下） */
.dgs-rail { position: absolute; left: 18px; right: 18px; height: 32px; }
.dgs-rail.top { top: -8px; }
.dgs-rail.bottom { bottom: -8px; transform: rotate(180deg); }
.dgs-rail::before { content: ""; position: absolute; inset: 0; background: #ffcc00; clip-path: polygon(0 0,100% 0,100% 21px,98% 21px,97% 28px,74% 28px,73% 18px,27% 18px,26% 28px,3% 28px,2% 21px,0 21px); filter: drop-shadow(0 0 6px rgba(255,204,0,.5)); }
.dgs-rail::after { content: ""; position: absolute; top: 11px; right: 7%; width: 112px; height: 6px; background: repeating-linear-gradient(90deg, #11110f 0 7px, transparent 7px 12px); opacity: .9; }
.dgs-runner { position: absolute; top: 20px; width: 8%; height: 2px; background: #31d9ff; box-shadow: 0 0 12px #31d9ff; animation: dgsRailRun 5s linear infinite; }
.dgs-rail.bottom .dgs-runner { animation-direction: reverse; animation-duration: 7s; }
html[data-dg-mode="yellow"] .dgs-rail::before { background: #11110f; filter: none; }
html[data-dg-mode="yellow"] .dgs-rail::after { background: repeating-linear-gradient(90deg, #ffcc00 0 7px, transparent 7px 12px); }
html[data-dg-mode="yellow"] .dgs-runner { background: #ffcc00; box-shadow: none; }
/* 流れる 2 進数 */
.dgs-binary { position: absolute; top: 90px; bottom: 100px; width: 17px; overflow: hidden; color: rgba(244,223,0,.46); font: 600 10px/1.55 "Chakra Petch", monospace; word-break: break-all; letter-spacing: 3px; text-shadow: 0 0 7px rgba(244,223,0,.5); writing-mode: vertical-rl; }
.dgs-binary.left { left: 13px; } .dgs-binary.right { right: 13px; }
.dgs-binary span { display: block; animation: dgsDataFall 12s linear infinite; }
.dgs-binary span + span { color: rgba(49,217,255,.42); animation-duration: 17s; animation-direction: reverse; }
html[data-dg-mode="yellow"] .dgs-binary { color: rgba(17,17,15,.52); text-shadow: none; }
html[data-dg-mode="yellow"] .dgs-binary span + span { color: rgba(17,17,15,.38); }
/* システム表示・バーコード */
.dgs-systag { position: absolute; color: rgba(244,223,0,.52); font: 600 10px/1.4 "Chakra Petch", monospace; letter-spacing: .16em; }
.dgs-systag.a { left: 42px; top: 105px; } .dgs-systag.b { right: 45px; top: 112px; text-align: right; }
.dgs-barcode { display: block; width: 104px; height: 22px; margin: 0 0 7px auto; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 9px); opacity: .8; }
html[data-dg-mode="yellow"] .dgs-systag { color: rgba(17,17,15,.52); }
/* レーダー */
.dgs-radar { position: absolute; right: 48px; top: 210px; width: 76px; height: 76px; border: 1px solid rgba(244,223,0,.34); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 10px, rgba(244,223,0,.12) 11px 12px), linear-gradient(90deg, transparent 49%, rgba(244,223,0,.22) 50%, transparent 51%), linear-gradient(transparent 49%, rgba(244,223,0,.22) 50%, transparent 51%); }
.dgs-radar::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(168,255,24,.4), transparent 20%); animation: dgsSpin 3.8s linear infinite; }
html[data-dg-mode="yellow"] .dgs-radar { border-color: rgba(17,17,15,.34); background: repeating-radial-gradient(circle, transparent 0 10px, rgba(17,17,15,.12) 11px 12px); }
/* 回路線と光のパケット */
.dgs-circuit { position: absolute; right: 42px; bottom: 118px; width: 250px; height: 100px; opacity: .5; }
.dgs-circuit i { position: absolute; display: block; height: 1px; background: #ffcc00; transform-origin: left center; animation: dgsTraceGlow 3s ease-in-out infinite; }
.dgs-circuit i::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border: 1px solid #ffcc00; transform: rotate(45deg); background: #0e100f; }
.dgs-circuit i:nth-child(1) { width: 92px; left: 0; top: 24px; }
.dgs-circuit i:nth-child(2) { width: 72px; left: 78px; top: 52px; transform: rotate(28deg); animation-delay: .7s; }
.dgs-circuit i:nth-child(3) { width: 105px; left: 140px; top: 86px; transform: rotate(-24deg); animation-delay: 1.4s; }
.dgs-packet { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #a8ff18; box-shadow: 0 0 11px #a8ff18; offset-path: path("M0 0 H120 L160 40 H285"); animation: dgsPacketMove 5s linear infinite; }
.dgs-packet.p1 { left: 9%; top: 27%; } .dgs-packet.p2 { right: 24%; top: 61%; animation-delay: -2.4s; transform: rotate(180deg); }
/* カウント・HUD リング */
.dgs-countdown { position: absolute; left: 28px; bottom: 118px; display: flex; align-items: flex-end; gap: 9px; color: rgba(255,204,0,.13); font-family: "Chakra Petch", sans-serif; line-height: .72; }
.dgs-countdown span { font-size: clamp(5.5rem, 10vw, 10rem); font-weight: 500; letter-spacing: -.09em; font-variant-numeric: tabular-nums; }
.dgs-countdown i { margin-bottom: 6px; font-style: normal; font-size: .58rem; letter-spacing: .2em; writing-mode: vertical-rl; }
html[data-dg-mode="yellow"] .dgs-countdown { color: rgba(17,17,15,.13); }
.dgs-hud-ring { position: absolute; right: 18px; bottom: 96px; width: clamp(150px, 19vw, 270px); height: auto; opacity: .14; transform-origin: 50% 50%; animation: dgsRingRotate 15s linear infinite, dgsRingFade 7s ease-in-out infinite; }
html[data-dg-mode="dark"] .dgs-hud-ring.for-yellow, html[data-dg-mode="yellow"] .dgs-hud-ring.for-dark { display: none; }
@keyframes dgsRailRun { from { left: -12%; } to { left: 100%; } }
@keyframes dgsDataFall { from { transform: translateY(-42%); } to { transform: translateY(42%); } }
@keyframes dgsSpin { to { transform: rotate(360deg); } }
@keyframes dgsTraceGlow { 0%, 100% { opacity: .2; box-shadow: none; } 45% { opacity: 1; box-shadow: 0 0 8px #ffcc00; } }
@keyframes dgsPacketMove { to { offset-distance: 100%; } }
@keyframes dgsRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dgsRingFade { 0%, 100% { opacity: .04; } 35%, 68% { opacity: .16; } }
@media (max-width: 900px) { .dgs-systag, .dgs-radar, .dgs-circuit, .dgs-countdown, .dgs-hud-ring { display: none; } }
@media (max-width: 600px) { .dgs-binary { opacity: .55; } .dgs-binary.left { left: 5px; } .dgs-binary.right { right: 5px; } .dgs-rail { left: 7px; right: 7px; } }
@media (prefers-reduced-motion: reduce) { .dgs-tech-frame * { animation: none !important; } }
.dgs-systag.a { display: none; }   /* 「← ホーム」と重なるため */