/* Workplace scene: device states are data attributes on the <svg>, see js/scene.js */
.scene .hit { fill: rgba(47, 91, 255, 0); stroke: var(--cobalt); stroke-opacity: 0; stroke-width: 3; transition: fill .15s, stroke-opacity .15s; }
.scene .decor { pointer-events: none; cursor: default; }
.scene .decor-office { pointer-events: none; filter: drop-shadow(0 3px 0 rgba(20, 33, 61, .18)); }
.scene .clock-sec { transform-origin: 470px 62px; animation: clock-sec 60s steps(60) infinite; }
.scene .clock-min { transform-origin: 470px 62px; animation: clock-sec 3600s linear infinite; }
@keyframes clock-sec { to { transform: rotate(360deg); } }

/* "click me" dots: every clickable device carries a pulsing marker, the name appears on hover */
.scene { overflow: visible; }
.scene .ping .dot { fill: var(--cobalt); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 0 rgba(20, 33, 61, .45)); }
.scene .ping .ring { fill: none; stroke: var(--cobalt); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.8); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.scene .tag { opacity: 0; transform-box: fill-box; pointer-events: none; transition: opacity .15s, translate .15s; translate: 0 6px; }
.scene .tag text { fill: #fff; font: 800 14px var(--font); }
.scene .device { cursor: pointer; outline: none; }
@media (hover: hover) {
  .scene .device:hover .hit { fill: rgba(47, 91, 255, .09); stroke-opacity: .95; }
  .scene .device:hover .tag { opacity: 1; translate: 0 0; }
  .scene .device:hover .ping { opacity: 0; }
}
.scene .device:focus-visible .hit { fill: rgba(47, 91, 255, .12); stroke-opacity: 1; stroke: var(--ink); stroke-width: 4; }
.scene .device:focus-visible .tag { opacity: 1; translate: 0 0; }
.scene .device.is-open .hit { fill: rgba(47, 91, 255, .16); stroke-opacity: 1; }
.scene .device.is-open .ping { opacity: 0; }
.scene .screen-spill { opacity: 0; transition: opacity .5s; }
.scene:not([data-screen-kind="dark"]) .screen-spill { opacity: 1; }
.scene .glare { opacity: .07; pointer-events: none; }
.scene .screen-edge { stroke: #000; stroke-opacity: .35; stroke-width: 6; pointer-events: none; }
.scene[data-screen-kind="dark"] .glare { opacity: .1; }

/* feedback on a device after an action */
.scene .fx-bad { animation: dev-shake .5s linear; }
.scene .fx-bad .hit { fill: rgba(217, 52, 74, .22); stroke: var(--red); stroke-opacity: 1; }
.scene .fx-good .hit, .scene .fx-fix .hit { fill: rgba(31, 157, 85, .2); stroke: var(--green); stroke-opacity: 1; animation: dev-glow 1s ease-out; }
.scene .fx-fix { animation: dev-pop .6s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes dev-shake { 15% { transform: translateX(-5px); } 35% { transform: translateX(5px); } 55% { transform: translateX(-3px); } 75% { transform: translateX(2px); } }
@keyframes dev-glow { 0% { stroke-width: 3; } 40% { stroke-width: 9; } 100% { stroke-width: 3; } }
@keyframes dev-pop { 40% { transform: scale(1.06); } }
.scene .cable { fill: none; stroke-linecap: round; }
.scene .cable-hit { fill: none; stroke: transparent; stroke-width: 22; }
.scene .loose-mark { fill: none; stroke: #F2A33A; stroke-width: 3; stroke-dasharray: 5 4; opacity: .95; }

/* cables: plugged vs. loose */
.scene[data-lan-cable="plugged"] .lan-off, .scene[data-lan-cable="unplugged"] .lan-on,
.scene[data-printer-cable="plugged"] .printer-off, .scene[data-printer-cable="unplugged"] .printer-on,
.scene[data-speaker-cable="plugged"] .speaker-off, .scene[data-speaker-cable="unplugged"] .speaker-on,
.scene[data-monitor-powercable="plugged"] .monitor-power-off, .scene[data-monitor-powercable="unplugged"] .monitor-power-on,
.scene[data-monitor-videocable="plugged"] .monitor-video-off, .scene[data-monitor-videocable="unplugged"] .monitor-video-on,
.scene[data-pc-powercable="plugged"] .pc-power-off, .scene[data-pc-powercable="unplugged"] .pc-power-on,
.scene[data-keyboard-cable="plugged"] .keyboard-off, .scene[data-keyboard-cable="unplugged"] .keyboard-on,
.scene[data-mouse-cable="plugged"] .mouse-off, .scene[data-mouse-cable="unplugged"] .mouse-on { display: none; }

/* LEDs */
.scene .led { fill: #3A4766; transition: fill .2s; }
.scene[data-monitor-led="on"] .monitor-led { fill: #DDE7FF; }
.scene[data-monitor-led="standby"] .monitor-led { fill: #F2A33A; }
.scene .pc-ring { stroke: #3A4766; }
.scene[data-pc-running="true"] .pc-ring { stroke: #3BD16F; }
.scene[data-nic="true"] .pc-nic-led { fill: #3BD16F; animation: led-blink 1.1s steps(2) infinite; }
.scene[data-keyboard-capslock="on"] .caps-led { fill: #3BD16F; }
.scene[data-router-power="on"] .router-led-power,
.scene[data-router-power="on"] .router-led-lan,
.scene[data-router-power="on"] .router-led-wifi,
.scene[data-router-power="on"][data-router-status="ok"] .router-led-net { fill: #3BD16F; }
.scene[data-router-power="on"][data-router-status="hung"] .router-led-net { fill: #FF4D5E; animation: led-blink .6s steps(2) infinite; }
.scene[data-printer-power="on"] .printer-led { fill: #3BD16F; }
.scene[data-printer-power="on"][data-printer-paper="empty"] .printer-led { fill: #F2A33A; animation: led-blink .7s steps(2) infinite; }
.scene[data-printer-paper="empty"] .printer-paper-sheet { display: none; }
.scene .strip-switch { fill: #6B2230; }
.scene[data-powerstrip-power="on"] .strip-switch { fill: #FF4D5E; filter: drop-shadow(0 0 4px #FF4D5E); }
@keyframes led-blink { 50% { fill: #3A4766; } }

/* monitor content (HTML inside foreignObject) */
.scene .screen { width: 310px; height: 222px; overflow: hidden; font-family: var(--font); font-size: 13px; line-height: 1.3; }
.scr { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #fff; padding: 12px; }
.scr-dark { background: #05070C; }
.scr-nosignal { background: #070B16; }
.scr-nosignal .osd { border: 1px solid #5B6B91; background: #121A30; padding: 10px 14px; display: grid; gap: 2px; }
.scr-nosignal .osd strong { font-size: 15px; }
.scr-nosignal .osd span { color: #AFC0E4; font-size: 11px; }
.scr-bios { background: #000; color: #D7D7D7; font-family: var(--mono); align-items: flex-start; justify-content: flex-start; text-align: left; gap: 2px; font-size: 12px; }
.scr-bios p { margin: 0; }
.scr-bios .blink { animation: pulse 1s steps(2) infinite; }
.scr-update { background: #0B5CAD; gap: 10px; }
.scr-update strong { font-size: 14px; }
.scr-update span { font-size: 11px; opacity: .85; }
.scr-update .spinner { width: 26px; height: 26px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scr-login { background: linear-gradient(160deg, #2F5BFF, #14213D); gap: 5px; }
.scr-login .avatar { width: 46px; height: 46px; border-radius: 50%; background: #DCE5FF; }
.scr-login .pw { background: #fff; color: #14213D; border-radius: 4px; padding: 3px 10px; min-width: 150px; letter-spacing: 2px; }
.scr-login .err { color: #FFD0D6; font-weight: 700; }
.scr-login span { font-size: 11px; }
.scr-desktop { background: linear-gradient(150deg, #3B6CFF, #7FA2FF 60%, #B7C9FF); justify-content: flex-start; padding: 10px 10px 30px; gap: 6px; }
.scr-desktop .icons { position: absolute; left: 8px; top: 8px; display: grid; gap: 8px; }
.scr-desktop .icons i { width: 22px; height: 22px; border-radius: 5px; background: rgba(255, 255, 255, .75); }
.scr-desktop .win { margin-left: 30px; width: calc(100% - 40px); background: #fff; color: #14213D; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); text-align: left; padding: 0 0 6px; overflow: hidden; display: grid; }
.scr-desktop .win .bar { background: #E6ECFA; font-size: 10px; font-weight: 700; padding: 2px 8px; margin-bottom: 3px; }
.scr-desktop .win b { padding: 0 8px; font-size: 12px; color: #B91C33; }
.scr-desktop .win span { padding: 0 8px; font-size: 10px; color: #4A5878; }
.scr-desktop .win.ok b { color: #1F9D55; }
.scr-desktop .taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: rgba(20, 33, 61, .85); display: flex; gap: 6px; align-items: center; padding: 0 8px; }
.scr-desktop .taskbar i { width: 12px; height: 12px; border-radius: 3px; background: #AFC0E4; }
.scr-desktop .cursor { position: absolute; right: 60px; bottom: 50px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid #fff; transform: rotate(-30deg); filter: drop-shadow(0 1px 1px #000); }
.scr-desktop .nopointer { position: absolute; right: 10px; bottom: 30px; background: rgba(0, 0, 0, .55); padding: 3px 8px; border-radius: 4px; font-size: 11px; }

/* cable view: devices greyed out, only cables react */
.scene .cablegrp { cursor: inherit; outline: none; }
.scene .cable-hit { pointer-events: none; }
.scene[data-view="cables"] .device { pointer-events: none; cursor: default; }
.scene[data-view="cables"] .device > :not(.cablegrp) { opacity: .2; filter: grayscale(1); }
.scene[data-view="cables"] .decor, .scene[data-view="cables"] .decor-office, .scene[data-view="cables"] .props, .scene[data-view="cables"] .screen-layer { opacity: .15; filter: grayscale(1); }
.scene[data-view="cables"] .hit, .scene[data-view="cables"] .ping, .scene[data-view="cables"] .tag { display: none; }
.scene[data-view="cables"] .cablegrp { pointer-events: all; cursor: pointer; }
.scene[data-view="cables"] .cablegrp .cable-hit { pointer-events: stroke; stroke-width: 28; }
.scene[data-view="cables"] .cable { stroke-width: 7; }
.scene[data-view="cables"] .cablegrp:hover .cable, .scene[data-view="cables"] .cablegrp.is-open .cable, .scene[data-view="cables"] .cablegrp:focus-visible .cable { filter: drop-shadow(0 0 6px rgba(47, 91, 255, .95)); stroke-width: 9; }
.scene[data-view="cables"] .cablegrp:focus-visible { outline: none; }
.scene[data-view="cables"] .cable { animation: cable-pulse 2s ease-in-out infinite; }
@keyframes cable-pulse { 50% { opacity: .75; } }
.scene .screen-layer { pointer-events: none; }
.win-view .scr { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #fff; padding: 12px; }

/* ticket looks: mirrored desk, room colours, rug colours (the desk itself is drawn once, see js/scene.js) */
.scene .props { pointer-events: none; filter: drop-shadow(0 3px 0 rgba(20, 33, 61, .18)); }
.scene.mirrored .tag text, .scene.mirrored .decor-office text { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
.scene[data-room="mint"] { --wall-1: #E6F5EE; --wall-2: #BFE0D0; --floor: #A5C2B4; }
.scene[data-room="peach"] { --wall-1: #FDEEE4; --wall-2: #F1CDB5; --floor: #C9B3A4; }
.scene[data-room="lilac"] { --wall-1: #EEEAFB; --wall-2: #D2CAF0; --floor: #B4AECB; }
.scene[data-room="sand"] { --wall-1: #F6F0DF; --wall-2: #E2D6B5; --floor: #BDB59E; }
.scene[data-room="dusk"] { --wall-1: #C9D4EC; --wall-2: #9AACD3; --floor: #8E9AB8; }
:root[data-theme="dark"] .scene[data-room="mint"] { --wall-1: #17332D; --wall-2: #0F2420; --floor: #14302A; }
:root[data-theme="dark"] .scene[data-room="peach"] { --wall-1: #3A2A2A; --wall-2: #271B1D; --floor: #2E2226; }
:root[data-theme="dark"] .scene[data-room="lilac"] { --wall-1: #2A2650; --wall-2: #1B1838; --floor: #221F42; }
:root[data-theme="dark"] .scene[data-room="sand"] { --wall-1: #35301F; --wall-2: #24200F; --floor: #2A2616; }
:root[data-theme="dark"] .scene[data-room="dusk"] { --wall-1: #1E2C55; --wall-2: #131D3C; --floor: #18234A; }
.scene[data-rug="1"] { --rug: #E5484D; }
.scene[data-rug="2"] { --rug: #3BAA8C; }
.scene[data-rug="3"] { --rug: #F2A33A; }