/* Scene 06 · Ba cách làm (LỆNH 40, 41, 42). A WebGL canvas of its own (.ch-gl, pb-chain.js mode "a": the white model at night) under the DOM that
   scene-compete05.js writes from one clock (NQ_CK). The clusters are solid dark cards (no glass, alpha ≥ .94): name 40 px, examples 22 px,
   ✓ and ↔ lines 26–28 px, and a row of "how it works" icons (48 px, white + one warm accent, rounded, labels 18 px) joined by thin arrows; the
   parts' labels are the deck's dark see-through pills (24 px semibold, a 1 px light edge: --nq-pill-* tokens of pitch.css) with a 1 px leader ending
   in a dot; the old way's three files are big warm cards (28 px). Neutral only (blue is NEXQUOTE's, in 07; the icons' one accent is warm).
   LỆNH 46: card v2 (nq-card.css tokens: a gradient ground at .96, a 1 px gradient edge, radius 16, padding 28 / 32, no backdrop-filter; ✓ and ↔ rows with round 22 px badges;
   the speaking card has a light-blue top edge), and the icons are app-style (64 px rounded squares: gradient, solid white glyph, sheen; labels 18 px; thin dotted arrows
   with a light dot running while the card speaks; the others' icons at 70 %). */
#s-compete,#s-compete.active{filter:none!important;transform:none!important}
#s-compete .c5{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#s-compete .c5 *{box-sizing:border-box}
#s-compete .c5 p{margin:0}
#s-compete .c5>*{position:absolute;margin:0;left:0;top:0}
#s-compete .head{z-index:6}
#s-compete.scene .head::before{background:rgba(1,4,12,.85);bottom:-34px;--nqp-fade:200px;   /* LỆNH 42: the title band 85 % dark, solid to about y 200, gone by y 213, out to x 1770 (06 has no line under its title: the buildings' names and the end cards start at y 215) */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--nqp-fade)),transparent 100%),linear-gradient(180deg,transparent 0,#000 34%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--nqp-fade)),transparent 100%),linear-gradient(180deg,transparent 0,#000 34%,#000 86%,transparent 100%)}
#s-compete .c5 .ch-gl{width:1920px;height:1080px;display:block;background:#0A1428}
#s-compete .c5-still{width:1920px;height:1080px;max-width:none;display:none}
#s-compete.c5-still-on .c5-still{display:block}
#s-compete.c5-still-on .c5 .ch-gl{display:none}
#s-compete .c5-bot{top:760px;width:1920px;height:320px;opacity:0;background:linear-gradient(0deg,rgba(4,8,18,.92) 0,rgba(4,8,18,.78) 55%,rgba(4,8,18,0) 100%)}
#s-compete .c5-sky{top:200px;width:1920px;height:460px;opacity:0;background:linear-gradient(180deg,rgba(3,6,14,0) 0,rgba(3,6,14,.34) 14%,rgba(3,6,14,.36) 80%,rgba(3,6,14,0) 100%)}
html.proj #s-compete .c5-sky{background:linear-gradient(180deg,rgba(2,4,10,0) 0,rgba(2,4,10,.8) 10%,rgba(2,4,10,.82) 84%,rgba(2,4,10,0) 100%)}
#s-compete .c5-svg{width:1920px;height:1080px;overflow:visible}
/* a leader: 1 px, its head a filled dot (the subpath of the circle is the only one with an area) */
#s-compete .c5-svg path{fill:var(--nq-ld);stroke:var(--nq-ld);stroke-width:1}
/* a way of quoting: the deck's card v2 (nq-card.css): name 36 px 700, examples 22 px, ✓ and ↔ rows with round badges */
#s-compete .c5-card{opacity:0;width:480px;padding:28px 32px 26px;border-radius:16px;background:var(--nqc-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);/* LỆNH 48: a card that moves carries no large shadow (black on the night stage: it was nearly invisible, and it was blurred again whenever the card moved) */font-variant-numeric:tabular-nums}
#s-compete .c5-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--nqc-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#s-compete .c5-card.sp::after{content:"";position:absolute;left:16px;right:16px;top:-1px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,rgba(156,194,255,0),var(--nqc-sp) 20%,var(--nqc-sp) 80%,rgba(156,194,255,0))}
#s-compete .c5-nm{font:700 36px/1.1 "Inter",sans-serif;letter-spacing:-.02em;color:#fff}
#s-compete .c5-ex{margin-top:6px!important;font:500 22px/1.3 "Inter",sans-serif;color:var(--nqc-body)}
#s-compete :is(.c5-ok,.c5-tr){display:flex;align-items:baseline;gap:12px;margin-top:10px!important;font:600 26px/1.25 "Inter",sans-serif;color:#F4F6F9;text-wrap:balance}
#s-compete :is(.c5-ok,.c5-tr) i{flex:none;display:inline-block;width:22px;height:22px;border-radius:50%;font-style:normal;font-weight:700;font-size:13px;line-height:22px;text-align:center}
#s-compete .c5-ok i{color:#B4CBFF;background:var(--nqc-bdb)}
#s-compete .c5-tr i{color:#C5D0E2;background:var(--nqc-bdg)}
#s-compete .c5-tr{color:#E3E8EF}
#s-compete :is(.c5-card,.c5-full) :is(.c5-nm,.c5-ex){white-space:nowrap}
#s-compete .c5-card:not(.c5-full) :is(.c5-ok,.c5-tr){white-space:nowrap}
#s-compete .c5-col{width:470px;padding:18px 28px 16px}
#s-compete .c5-col .c5-nm{font-size:36px}
#s-compete .c5-col .c5-ex{margin-top:4px!important}
#s-compete .c5-col .c5-how{margin-top:10px;padding-top:12px}
#s-compete .c5-col :is(.c5-ok,.c5-tr){font-size:24px;margin-top:6px!important}
/* how it works: ONE set of app-style icons (LỆNH 46): 64 px rounded squares (a gradient, a solid white glyph, a top sheen, an inner 1 px white edge: in the svg), a soft
   shadow, an 18 px label under each; the arrows thin and dotted, a light dot runs along them while the card speaks. An exception to the deck's colour rule, for app icons only. */
#s-compete .c5-how{position:relative;display:flex;align-items:flex-start;margin-top:12px;padding-top:16px}
#s-compete .c5-how::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22) 20%,rgba(255,255,255,.22) 80%,rgba(255,255,255,0))}
#s-compete .c5-ic{display:flex;flex:none;flex-direction:column;align-items:center;gap:6px}
#s-compete .c5-ic svg{display:block;overflow:visible;width:64px;height:64px;border-radius:14px;box-shadow:0 8px 14px -6px rgba(0,0,0,.6)}
#s-compete .c5-lg{display:flex;align-items:center;gap:6px;height:64px}
#s-compete .c5-lg img{display:block;flex:none;width:64px;height:64px;filter:drop-shadow(0 6px 7px rgba(0,0,0,.45))}
#s-compete .c5-lg img.sm{width:46px;height:46px}
#s-compete .c5-ic em{font:500 18px/1.1 "Inter",sans-serif;font-style:normal;color:#C5D0E2;white-space:nowrap}
#s-compete .c5-ar{display:block;flex:none;margin:27px 12px 0;overflow:visible}
#s-compete .c5-ar .ln{fill:none;stroke:rgba(220,228,240,.62);stroke-width:1.5;stroke-dasharray:.1 4.4;stroke-linecap:round}
#s-compete .c5-ar .hd{fill:none;stroke:rgba(220,228,240,.78);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#s-compete .c5-ar .rd{fill:#fff;opacity:0;stroke:rgba(190,215,255,.55);stroke-width:3}
#s-compete .c5-defs{position:absolute;width:0;height:0;overflow:hidden}
html.proj #s-compete .c5-card .c5-ex{color:var(--nqp-pale)}
/* the parts' labels: the deck's dark see-through pill; the old way's files warm */
#s-compete .c5-lab{opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:var(--nq-pill-ink);background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-compete .c5-file{opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:#FFB566;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px #F2A24B}   /* LỆNH 42: the old way's three versions: a dark see-through pill, an orange edge, orange text */
#s-compete .c5-file i{font-style:normal}
/* the closing line (shown, not spoken), the note on the names */
#s-compete .c5-band{opacity:0;width:1920px;height:116px;background:linear-gradient(to bottom,rgba(6,8,13,0),rgba(6,8,13,.9) 16%,rgba(6,8,13,.9) 84%,rgba(6,8,13,0))}
#s-compete .c5-say{opacity:0;font:700 38px/1.2 "Inter",sans-serif;letter-spacing:-.015em;color:#fff;white-space:nowrap}
#s-compete .c5-src{opacity:0;font:500 24px/1.3 "Inter",sans-serif;color:#D5DCE6;white-space:nowrap}
/* will-change only while something moves (the scene toggles .c5-mv): at rest the text is drawn as text, on whole device pixels */
#s-compete .c5.c5-mv :is(.c5-card,.c5-lab,.c5-file,.c5-say,.c5-src){will-change:opacity,transform}
/* Q&A only: the buildings are buttons; the full copy in a card */
#s-compete .c5-hit,#s-compete .c5-full{display:none}
#s-compete.c5-qa-on .c5-hit{display:block;pointer-events:auto;cursor:pointer}
#s-compete.c5-full-on :is(.c5-card:not(.c5-full),.c5-lab,.c5-file,.c5-svg){visibility:hidden}
#s-compete.c5-qa-on .c5-full.on{display:block;opacity:1;pointer-events:auto;cursor:pointer;left:1260px;top:250px;width:560px;z-index:4}
/* LỆNH 50 §A: the pre-rendered clips (nq-vid.js) under the DOM; while one stands in for the 3D the engine's canvas is hidden */
#s-compete .c5 .nq-vid{width:1920px;height:1080px;display:block;opacity:0;visibility:hidden;object-fit:cover;pointer-events:none;background:#0A1428}
#s-compete .c5 .nq-vid.on{opacity:1;visibility:visible}
#s-compete.nq-vmode .c5 .ch-gl{visibility:hidden}