/* Node-graph puzzle for the compositing breakdowns (comp-game.js). Uses the site's tokens from style.css. */

/* section around it (comp-panel.js): sprayed title + lede with the skip link */
.cg-title { width: min(520px, 100%); margin: 6px 0 4px -1%; }
.cg-title canvas { display: block; width: 100%; }
.no-title .cg-title .sr { position: static; width: auto; height: auto; clip-path: none; }
.no-title .cg-title canvas { display: none; }
.cg-lede { margin-bottom: 20px; }
.cg-skip { color: var(--art); text-decoration: underline; text-underline-offset: 3px; }

/* the Compositing panel opens wide enough for graph + viewer side by side */
.panel.cg-panel { width: min(1100px, 100vw); }
@media (min-width: 761px) {
  /* the viewer stays in sight while the panel scrolls down to the graph */
  .cg-panel .cg-viewer { position: sticky; top: 12px; }
  .cg-panel .cg-screen { max-width: calc((100vh - 160px) * var(--ar)); }
}
@media (max-width: 640px) {
  .panel.cg-panel { padding: 84px 16px 32px; }
  .panel.cg-panel .close { top: 72px; right: 12px; }
}
.cg { --node: #0c1219; --wire: #ffb347; --pre: rgba(160, 190, 210, 0.45); --bad: #ff5d6c; font-family: var(--sans); }

/* shot tabs: brand stickers slapped on a wall. Selected gets a sprayed pink loop, solved a sprayed cyan check (comp-game.js paintTab) */
.cg-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 26px; margin-bottom: 18px; padding: 22px 18px 20px; border-radius: 8px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 79, 163, .05), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(70, 243, 255, .05), transparent 60%),
    #0b0e12;
}
.cg-tab { position: relative; --r: -2.2deg; transform: rotate(var(--r)); filter: brightness(.62) saturate(.8); transition: transform .25s, filter .25s; }
.cg-tab:nth-child(4n+2) { --r: 1.6deg; }
.cg-tab:nth-child(4n+3) { --r: -1deg; }
.cg-tab:nth-child(4n+4) { --r: 2.4deg; }
.cg-tab:hover { filter: brightness(.85); transform: rotate(var(--r)) translateY(-2px); }
.cg-tab.on, .cg-tab.done { filter: none; }
.cg-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }
.cg-paper {
  display: block; position: relative; padding: 13px 20px 11px 18px;
  background: linear-gradient(170deg, #f1ead8, #ddd3bb); color: #15110c;
  font: 700 21px/1 var(--sans); letter-spacing: -.01em;
  clip-path: polygon(0 4%, 6% 0, 100% 0, 100% 78%, 93% 100%, 0 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55);
}
.cg-num {
  position: absolute; left: -8px; top: -10px; z-index: 4; transform: rotate(-6deg);
  font: 500 10px var(--mono); color: #0b0e12; background: var(--cyan); padding: 2px 5px; letter-spacing: .06em;
}
.cg-spray { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.cg-spray path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cg-spray .halo { filter: blur(5px); opacity: .55; }
.cg-spray .fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cg-spray var(--d) cubic-bezier(.4, .1, .3, 1) var(--delay) forwards; }
@keyframes cg-spray { to { stroke-dashoffset: 0; } }

.cg-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* --- graph --- */
.cg-graph {
  position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(circle, rgba(120, 220, 255, 0.07) 1px, transparent 1.2px) 0 0 / 18px 18px,
    #070b10;
}
.cg-graph svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.cg-box { fill: var(--node); stroke: rgba(255, 255, 255, 0.12); }
.cg-band { fill: var(--c); }
.cg-node { --c: #8c7d63; }
.t-read { --c: #a8946e; }
.t-key { --c: #6fbf6a; }
.t-3d { --c: #e0675b; }
.t-merge { --c: #6c8fe0; }
.t-fx { --c: #b07ce6; }
.t-color { --c: #e0b04f; }
.t-write { --c: var(--art); }
.cg-node .cg-box { stroke: color-mix(in srgb, var(--c) 45%, transparent); }
.cg-node.live .cg-box { stroke: var(--art); filter: drop-shadow(0 0 8px rgba(255, 179, 71, 0.55)); }
.cg-name { font: 600 11px var(--mono); fill: var(--fg); }
.cg-label { font: 10px var(--mono); fill: var(--dim); }

.cg-pin { cursor: crosshair; }
.cg-hit { fill: transparent; }
.cg-dot { fill: #0b1016; stroke: var(--c); stroke-width: 2; transition: r .15s, fill .15s; }
.cg-pinlabel { font: 600 9px var(--mono); fill: var(--dim); text-anchor: middle; pointer-events: none; }
.cg-pin:hover .cg-dot, .cg-pin.over .cg-dot, .cg-pin.armed .cg-dot { r: 7; fill: var(--c); }
.cg-pin.full { cursor: default; }
.cg-pin.full .cg-dot { fill: var(--c); }
.cg-pin.hint .cg-dot { animation: cg-pulse 1s ease-in-out infinite; }
@keyframes cg-pulse { 50% { r: 9; fill: var(--art); stroke: var(--art); } }

.cg-wire { fill: none; stroke: var(--wire); stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.6)); pointer-events: none; }
.cg-wire.pre { stroke: var(--pre); filter: none; }
.cg-wire.ghost { stroke-dasharray: 5 5; opacity: .8; }
.cg-wire.draw { transition: stroke-dashoffset .45s ease-out; }

.cg-toast {
  margin: 0 10px 10px; min-height: 2.8em;
  font: 12px/1.4 var(--mono); color: var(--fg); background: rgba(4, 6, 10, 0.8);
  border-left: 2px solid var(--art); padding: 7px 10px; border-radius: 4px;
}
.cg-toast.bad { border-color: var(--bad); }
.cg-toast.pop { animation: cg-pop .25s ease-out; }
@keyframes cg-pop { from { transform: translateY(4px); opacity: 0; } }
.cg.shake .cg-graph { animation: cg-shake .3s; }
@keyframes cg-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* --- viewer --- */
.cg-viewer { margin: 0; }
.cg-screen {
  --ar: 0.8; position: relative; width: 100%; max-width: calc(68vh * var(--ar)); margin: 0 auto;
  border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line);
}
.cg-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-lock {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center;
  background: rgba(4, 6, 10, 0.72); backdrop-filter: blur(6px) grayscale(1); -webkit-backdrop-filter: blur(6px) grayscale(1);
  font-family: var(--mono); color: var(--dim);
}
.cg-lock b { font: 700 22px var(--sans); color: var(--fg); letter-spacing: .02em; }
.cg-lock small { font-size: 11px; }
.cg-lock[hidden], .cg-chip[hidden] { display: none; }
.cg-chip {
  position: absolute; left: 10px; top: 10px; font: 11px var(--mono); color: #04060a;
  background: var(--art); padding: 3px 8px; border-radius: 3px;
}
.cg-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 8px; }
.cg-btn { font: 12px var(--mono); color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.cg-btn:hover { color: var(--fg); }
.cg-btn[hidden] { display: none; }
.cg-next { display: none; }
.cg.solved .cg-next { display: inline-block; color: var(--art); border-color: var(--art); }
.cg-caption { text-align: center; font-size: 14px; color: var(--fg); }
.cg-caption span { color: var(--dim); }
.cg-tools { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 12px 0 0; padding: 0; }
.cg-tools li { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 10px var(--mono); color: var(--dim); letter-spacing: .04em; }
.cg-tools img { width: 28px; height: 28px; object-fit: contain; }

@media (max-width: 760px) {
  .cg-tabs { gap: 18px 20px; padding: 18px 14px 16px; }
  .cg-paper { font-size: 18px; padding: 11px 16px 9px 15px; }
  .cg-body { grid-template-columns: 1fr; gap: 14px; }
  .cg-viewer { order: -1; }
  .cg-screen { max-width: calc(30vh * var(--ar)); }
  .cg-controls { margin: 8px 0 4px; }
}
@media (pointer: coarse) {
  .cg-hit { r: 24px; }   /* finger-sized targets around the 5px pins */
}
@media (prefers-reduced-motion: reduce) {
  .cg-pin.hint .cg-dot { animation: none; r: 8; fill: var(--art); }
  .cg-spray .fresh { animation: none; stroke-dashoffset: 0; }
}

/* the Compositing panel's scrollbar: a pink spray stroke with cyan overspray on a faint painted line.
   Chrome/Safari use the ::-webkit-scrollbar parts; Chrome 121+ ignores them if scrollbar-color is set, so
   the standard (Firefox) properties only go where the webkit ones aren't supported. */
.panel.cg-panel::-webkit-scrollbar { width: 14px; }
.panel.cg-panel::-webkit-scrollbar-track {
  margin: 72px 0 10px;   /* starts below the top bar */
  background: linear-gradient(rgba(255, 47, 180, 0.16), rgba(255, 47, 180, 0.16)) center / 2px 100% no-repeat;
}
.panel.cg-panel::-webkit-scrollbar-thumb {
  border: 3px solid transparent; border-radius: 6px; background-clip: padding-box;
  background-color: #ff2fb4;
  /* overspray: three dot grids with clashing periods, so the dots never line up */
  background-image:
    radial-gradient(rgba(63, 243, 255, 0.75) 0.7px, transparent 1.3px),
    radial-gradient(rgba(63, 243, 255, 0.5) 0.5px, transparent 1.1px),
    radial-gradient(rgba(255, 220, 245, 0.45) 0.5px, transparent 1.1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 45%, rgba(0, 0, 0, 0.25));
  background-size: 7px 13px, 5px 17px, 3px 11px, 100% 100%;
  background-position: 1px 3px, 4px 9px, 2px 1px, 0 0;
}
.panel.cg-panel::-webkit-scrollbar-thumb:hover { background-color: #ff5cc8; }
.panel.cg-panel::-webkit-scrollbar-thumb:active { background-color: #3ff3ff; }
.panel.cg-panel::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .panel.cg-panel { scrollbar-width: thin; scrollbar-color: #ff2fb4 transparent; }
}