/* Graphics pass: lighting, materials, post-processing overlays. Owned by the graphics work.
   Purely visual: no sizes, positions or display values of existing layout boxes are touched. */

/* ---- the barn behind the chute: shafts of warm light and a darker floor ---- */
#screen-play #pbg::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background:
    linear-gradient(104deg, transparent 18%, rgba(255, 196, 120, .16) 25%, transparent 34%),
    linear-gradient(98deg, transparent 52%, rgba(255, 184, 100, .1) 58%, transparent 66%),
    radial-gradient(ellipse 60% 40% at 22% 8%, rgba(255, 190, 110, .22), transparent 70%); }

/* ---- the viewfinder: calmer scanlines so the horn reads, fine film grain, a soft highlight bloom ---- */
#vf .vf-scan { opacity: .3 }
#screen-play #canvases #gl { filter: contrast(1.05) saturate(1.06) }
#vf::before { content: ""; position: absolute; inset: 0; border-radius: .35em; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
#vf .vf-vig { background: radial-gradient(ellipse at 46% 42%, transparent 50%, rgba(10, 6, 2, .5) 100%), radial-gradient(ellipse 70% 60% at 30% 25%, rgba(255, 200, 130, .07), transparent 70%) }
#screen-play #canvases { box-shadow: 0 1.6em 4.5em rgba(0, 0, 0, .7), 0 .2em .8em rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 232, 196, .09), 0 0 5em rgba(255, 168, 80, .08) }

/* ---- HUD glass and toolbar: a touch of depth ---- */
#screen-play #toolbar { box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 232, 196, .09) }
#screen-play .tool { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -.25em .5em rgba(0, 0, 0, .25) }
#screen-play .tool.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 1.2em color-mix(in srgb, var(--c) 35%, transparent), 0 .4em .9em rgba(0, 0, 0, .5) }

/* ---- chunky buttons and cards, everywhere: a little highlight on top, softer ground shadow ---- */
.btn:not(:disabled) { text-shadow: 0 1px 0 rgba(0, 0, 0, .22) }