/* QOS: the pixelated Game Boy camera on screenshots (gb.js) and its dial panel (gbpanel.js). */
.gb-c { position: absolute; display: block; z-index: 1; pointer-events: none; image-rendering: pixelated; opacity: 0; }
.gb-c.gb-v { z-index: 2; }
.gb-c.gb-f { filter: url(#gb-4); }
/* a canvas shows once it has been drawn; never in high contrast */
body:not(.hc) .gb-c.gb-on { opacity: 1; }
body.hc .gb-c { display: none; }
/* pixel to real, in BOTH modes: the canvas fades out over the real picture (and back) while the pointer is over the media,
   the window is filled, the player is live or the picture has focus. gb-t is added a moment after the first draw so a
   picture never fades IN to its pixel look. When the camera is off for a mode, a resolved picture simply stays real. */
.gb-c.gb-t { transition: opacity var(--gb-fade, 400ms) ease; }
body:not(.hc) .gb-c.gb-on.gb-real { opacity: 0; }
/* a video canvas waits (the poster canvas below shows) while its loop isn't playing */
.gb-c.gb-hold { opacity: 0 !important; }
/* ENHANCE: a new picture is hidden from the moment it is inserted until its canvas (placeholder, then the resolve) covers it */
body:not(.hc) img.gb-wait { opacity: 0 !important; }
/* the YouTube facade / live player: no pixel overlay over the player, leave the iframe and the play button alone */
.win-media.vp-live .gb-c { display: none; }
@media (prefers-reduced-motion: reduce) { .gb-c, .gb-c.gb-t { transition: none; } }

/* ---------- the camera panel (its own thing, not SETUP, not TUNE) ---------- */
.gbp { position: fixed; right: 12px; bottom: 64px; z-index: 10003; width: 320px; max-height: calc(100vh - 80px); overflow: auto; background: #0A1A6E; color: #fff; border: 1px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,.45); font: 400 12px/1.4 var(--mono, monospace); letter-spacing: .06em; padding: 0 12px 12px; text-transform: none; }
.gbp[hidden] { display: none; }
.gbp-h { position: sticky; top: 0; margin: 0 -12px 8px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; background: #fff; color: #0A1A6E; font: inherit; font-weight: 700; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.gbp-h:active { cursor: grabbing; }
.gbp-r { display: grid; grid-template-columns: 92px 1fr 62px; align-items: center; gap: 8px; margin: 5px 0; }
.gbp-r input[type=range] { width: 100%; accent-color: #FFC429; margin: 0; }
.gbp-r output { text-align: right; font-variant-numeric: tabular-nums; }
.gbp-ck { grid-template-columns: 20px 1fr; cursor: pointer; }
.gbp-ck input { accent-color: #FFC429; margin: 0; width: 16px; height: 16px; }
.gbp-ck small { display: block; opacity: .7; letter-spacing: .02em; }
.gbp-seg { grid-column: 2 / 4; display: flex; gap: 0; }
.gbp-seg button { flex: 1; }
.gbp button { font: inherit; color: #fff; background: none; border: 1px solid #fff; padding: 4px 8px; cursor: pointer; letter-spacing: inherit; }
.gbp button[aria-pressed=true] { background: #fff; color: #0A1A6E; }
.gbp .gbp-x { border: 1px solid #0A1A6E; color: #0A1A6E; padding: 0 6px; }
.gbp .gbp-x:hover { background: #0A1A6E; color: #fff; }
.gbp-b { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.gbp .msg { margin: 8px 0 0; min-height: 1.4em; color: #FFC429; }
.gbp-k { margin: 6px 0 0; opacity: .6; font-size: 10px; letter-spacing: .08em; }
.gbp :is(button, input):focus-visible { outline: 2px solid #FFC429; outline-offset: 2px; }