/* shell/base.css */
@media (min-width:1000px) {
.camcorder { right:0; top:calc(50% - 265px); transform:rotate(6deg); }
}

/* retro.css */
.camcorder { width:clamp(200px,22vw,270px); }
.camcorder:hover .object-photo { transform:rotate(3deg); }
.object-dialog[data-room="video"] { background:#e8e6df; }
.object-dialog[data-room="video"] { width:min(850px,calc(100vw - 24px)); }
.object-dialog[data-room="video"] .dialog-head > div { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tv-idle,.tv-osd,#vhs-time { font-family:var(--digital); }
.television { padding:22px 24px 15px; background:linear-gradient(125deg,#f1f0e8,#aaa9a3 35%,#deddd4 60%,#90918c); border:3px solid #737570; border-radius:35px 35px 17px 17px; box-shadow:inset 3px 3px 2px #fff9,inset -5px -6px 8px #45484490,0 13px 25px #25291e44; }
.tv-screen { position:relative; aspect-ratio:4/3; overflow:hidden; border:13px solid #282e2b; border-radius:45% / 7%; background:#070908; box-shadow:0 0 0 2px #5e625d,0 0 0 4px #dadbd2,inset 0 0 35px #000; }
.tv-screen { min-height:226px; }
.tv-idle { position:absolute; inset:0; padding:25px; display:flex; flex-direction:column; justify-content:space-between; background:#101473; color:#e6e9fc; font-size:18px; letter-spacing:.07em; text-shadow:2px 0 #8193ed; }
.tv-idle strong { text-align:center; font-size:25px; font-weight:400; }
.tv-osd { position:absolute; bottom:14px; left:18px; right:18px; color:#c0ffb2; font-size:17px; text-shadow:1px 1px #12280a; pointer-events:none; }
.tv-chin { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:19px 8px; font-size:17px; color:#444b44; }
.tv-speaker { width:95px; height:22px; background:repeating-linear-gradient(0deg,#525752 0 1px,transparent 1px 4px); }
.tv-led { width:8px; height:8px; background:#85ed70; border-radius:50%; box-shadow:0 0 6px #cfff8d; }
.tape-slot { width:62%; height:24px; margin:0 auto 15px; border:3px inset #5d625d; background:#121512; text-align:center; font-size:12px; letter-spacing:.22em; color:#959d91; }
.vhs-tape { display:block; width:min(300px,90%); margin:0 auto 12px; padding:0; border:0; background:transparent; cursor:pointer; filter:drop-shadow(2px 9px 5px #0007); transition:transform .8s cubic-bezier(.45,0,.4,1),opacity .55s .2s; }
.vhs-tape img { display:block; width:100%; height:auto; max-height:170px; object-fit:contain; user-select:none; }
.vhs-tape:hover { transform:translateY(-4px); }
.vhs-progress { display:flex; align-items:center; gap:10px; font-size:14px; margin-top:12px; }
.vhs-progress input { flex:1; accent-color:#b2d8a0; }
#vhs-time { display:block; text-align:right; color:#b2d8a0; font-size:14px; margin-top:5px; }
[data-tape="loading"] .vhs-film-tape { transform:translateY(-45px) scale(.82,.12); opacity:0; pointer-events:none; }
[data-tape="loading"] .tv-idle { background:#070918; }
[data-tape="loaded"] .vhs-film-tape,[data-tape="error"] .vhs-film-tape { display:none; }
[data-tape="loaded"] .tv-idle,[data-tape="error"] .tv-idle { display:none; }
.tape-library { display:flex; align-items:center; gap:10px; margin-top:15px; font-size:14px; }
.tape-library select { width:100%; min-width:0; padding:8px; background:#424c45; color:#fff; border:1px solid #959b94; }
@media (max-width:999px) {
.camcorder { transform:translateY(-8px) rotate(5deg); }
}
@media (max-width:650px) {
.object-dialog[data-room="video"] .dialog-inner { padding:12px; }
.television { padding:15px 12px 10px; border-radius:25px 25px 12px 12px; }
.tv-screen { border-width:8px; }
.tv-idle { padding:16px; font-size:15px; }
.tv-idle strong { font-size:19px; }
.tv-speaker { width:60px; }
.tv-chin { padding:14px 6px; }
}

/* desk-v2.css */
.stage .camcorder { width:110%; max-width:285px; transform:rotate(5deg); }
@media(max-width:650px) {
.stage .camcorder { grid-column:1 / span 2; }
}
#bhaumik-video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#000; }

/* interactions.css */
.object-dialog[data-room="video"] { width:min(820px,calc(100vw - 20px),calc((100dvh - 160px) / 1.14)); border:0; background:transparent; border-radius:0; box-shadow:none; }
[data-room="video"] .dialog-inner { padding:0 10px 14px; }
[data-room="video"] .dialog-head { position:absolute; right:18px; top:6px; z-index:5; }
[data-room="video"] .dialog-head > div { display:none; }
.television { position:relative; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
.tv-hardware { position:relative; aspect-ratio:1; }
.tv-photo { display:block; width:100%; height:auto; clip-path:inset(3.5% 0 0); filter:drop-shadow(0 12px 12px #14211d55); }
.tv-hardware .tv-screen { position:absolute; left:16.75%; top:14.91%; width:66.67%; height:50%; min-height:0; aspect-ratio:auto; border:0; border-radius:4% / 6%; box-shadow:inset 0 0 20px #000; background:#10121a; }
.tv-screen::after { content:''; position:absolute; z-index:3; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 20px 5px #0005; background:linear-gradient(135deg,#ffffff0c,transparent 35%,transparent 80%,#ffffff03); }
.tv-idle { font:clamp(10px,2.3vw,18px)/1.4 var(--digital); padding:6%; background:#12194d; }
.tv-idle strong { font:inherit; }
.tv-hardware .vhs-tape { position:absolute; z-index:4; top:70%; left:24%; width:52%; margin:0; max-width:none; transform:translateY(6%) scale(1.08); }
.tv-hardware .vhs-tape img { width:100%; max-height:none; }
[data-tape="loading"] .tv-hardware .vhs-tape { transform:translateY(-2%) scale(.8,.08); opacity:0; }
.vhs-progress { font:12px var(--ui); }
.vhs-progress input { accent-color:#51686d; min-width:0; }
#vhs-time { font:13px var(--digital); color:#33474a; }
@media(prefers-reduced-motion:reduce) {
.vhs-tape { transition:none!important; }
}
.tv-buttons { position:absolute; inset:0; pointer-events:none; }
.object-dialog .tv-buttons button { position:absolute; top:83.5%; width:4.2%; height:6.3%; padding:0; min-height:0; border:0; border-radius:30%; background:transparent; color:transparent; pointer-events:auto; cursor:pointer; }
.tv-buttons button:hover { box-shadow:0 0 9px #e9f6ff75,inset 0 0 0 1px #e7f2ff80; }
.tv-buttons button:active { background:#18344a35; }
.tv-buttons #tv-power { left:16.4%; width:5.5%; }
.tv-buttons #vhs-volume-down { left:49.8%; }
.tv-buttons #vhs-volume-up { left:53.9%; }
.tv-buttons #vhs-rewind { left:59.5%; }
.tv-buttons #vhs-play { left:64.2%; }
.tv-buttons #vhs-forward { left:68.9%; }
.tv-buttons #vhs-eject { left:73.9%; }
.tv-scrub { display:flex; align-items:center; gap:14px; width:82%; margin:0 auto; color:#e5eee7; }
.tv-scrub input { flex:1; min-width:0; accent-color:#afbec0; height:14px; }
.tv-scrub #vhs-time { margin:0; color:#e5eee7; font:12px var(--digital); text-shadow:0 1px 2px #000; }
[data-room="video"] #vhs-message { color:#fff; text-align:center; }
#television[data-power="off"] .tv-screen > * { visibility:hidden; }
#television[data-power="off"] .tv-screen { background:#151718; }
@media(max-width:650px) {
.tv-scrub { width:90%; gap:7px; }
.tv-scrub #vhs-time { font-size:10px; }
}

/* The slot masks the tape as the transport pulls it into the cabinet. */
.tv-hardware { margin-bottom:10%; }
[data-tape="loaded"] .tv-hardware,[data-tape="error"] .tv-hardware { margin-bottom:2%; }
.vhs-slot-mouth { position:absolute; z-index:3; left:26.7%; top:73.3%; width:46.8%; height:7%; border:2px inset #787875; border-radius:2px; background:linear-gradient(#080909,#171a1c 45%,#050606); box-shadow:inset 0 4px 6px #000; }
.vhs-slot-mouth::after { content:''; position:absolute; left:0; right:0; top:0; height:12%; background:linear-gradient(#999b98,#333634); box-shadow:0 2px 3px #000; }
.vhs-insertion-path { position:absolute; z-index:4; top:74%; left:27%; width:46%; height:40%; overflow:hidden; pointer-events:none; perspective:700px; }
.tv-hardware .vhs-insertion-path .vhs-tape { display:block; position:absolute; top:0; left:0; width:100%; opacity:1; pointer-events:auto; transform-origin:50% 0; transform:translateY(60%) rotateX(30deg); transition:transform 1000ms cubic-bezier(.35,0,.2,1),filter 1000ms ease; filter:drop-shadow(0 10px 6px #0008); }
.tv-hardware .vhs-insertion-path .vhs-tape:hover { transform:translateY(56%) rotateX(32deg); }
[data-tape="loading"] .tv-hardware .vhs-insertion-path .vhs-film-tape,[data-tape="loaded"] .tv-hardware .vhs-insertion-path .vhs-film-tape,[data-tape="error"] .tv-hardware .vhs-insertion-path .vhs-film-tape { transform:translateY(-105%) rotateX(65deg) scale(.96); pointer-events:none; filter:drop-shadow(0 1px 1px #000); }
[data-tape="ejecting"] .tv-hardware .vhs-insertion-path .vhs-tape { pointer-events:none; }
.tv-buttons { z-index:5; }
@media(prefers-reduced-motion:reduce) {
  .tv-hardware .vhs-insertion-path .vhs-tape { transition:none; }
}


/* The lower playbar belongs to a tape inside the deck; it stays hidden while the tape is out. */
#television[data-tape="empty"] .tv-scrub,#television[data-tape="ejecting"] .tv-scrub { visibility:hidden; }


/* Tracking static: slamming the tape or jumping the heads throws a burst of noise and a rolling band. */
.tv-static { position:absolute; z-index:2; inset:0; pointer-events:none; opacity:0; transition:opacity .18s ease; }
.tv-static::before { content:''; position:absolute; inset:-12%; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); background-size:150px 150px; opacity:.34; mix-blend-mode:screen; animation:tv-noise .16s steps(3) infinite; }
.tv-static::after { content:''; position:absolute; left:-2%; right:-2%; height:13%; top:-15%; background:linear-gradient(#e8f1e680, #ffffffd9 45%, #e8f1e611 85%, transparent); mix-blend-mode:screen; animation:tv-trackband .55s linear infinite; }
#television.is-tracking .tv-static { opacity:1; }
#television.is-tracking #bhaumik-video,#television.is-tracking .tv-idle { animation:tv-jitter .14s steps(2) infinite; }
@keyframes tv-noise {
  0% { transform:translate(0,0); }
  33% { transform:translate(-5%,4%); }
  66% { transform:translate(4%,-5%); }
  100% { transform:translate(0,0); }
}
@keyframes tv-trackband {
  0% { top:-16%; }
  100% { top:104%; }
}
@keyframes tv-jitter {
  0% { transform:translate(0,0) skewX(0); }
  50% { transform:translate(2px,-1px) skewX(.6deg); }
  100% { transform:translate(-2px,1px) skewX(-.5deg); }
}
@media(prefers-reduced-motion:reduce) {
  .tv-static,.tv-static::before,.tv-static::after,#television.is-tracking #bhaumik-video,#television.is-tracking .tv-idle { animation:none!important; transition:none!important; }
}

/* Keep the complete cabinet and its physical controls inside narrow windows. */
@media (max-width:650px) {
  .object-dialog[data-room="video"] { width:min(calc(100vw - 20px),calc((100dvh - 160px) / 1.14)); }
  [data-room="video"] .dialog-inner { padding:0 4px 12px; }
  .tv-hardware { width:100%; margin-left:0; }
  .tv-scrub { width:92%; }
}

.camcorder-hardware { position:relative; width:128px; height:90px; margin:0 auto -22px; perspective:750px; pointer-events:none; }
.camcorder-hardware > img { width:100%; height:100%; object-fit:contain; }
.camcorder-lcd { position:absolute; left:48%; top:39%; width:36%; height:39%; padding:3px; background:#292b2d; border:2px outset #626364; border-radius:2px; transform-origin:left center; transform:rotateY(-85deg); transition:transform 650ms cubic-bezier(.22,.75,.2,1); box-shadow:3px 5px 5px #0008; }
.camcorder-lcd img { width:100%; height:100%; object-fit:cover; filter:brightness(.85); }
.camcorder-open .camcorder-lcd { transform:rotateY(-15deg); }
.tv-screen { box-shadow:inset 0 0 14px #000b; }
.tv-buttons button.physical-pressed { background:#0003; box-shadow:inset 0 2px 3px #0008; }
.vhs-slot-mouth::after { transform-origin:50% 0; transition:transform 250ms; }
[data-tape="loading"] .vhs-slot-mouth::after,[data-tape="ejecting"] .vhs-slot-mouth::after { transform:perspective(300px) rotateX(62deg); }
@media(prefers-reduced-motion:reduce) { .camcorder-lcd,.vhs-slot-mouth::after { transition:none; } }
