/* Optional sharing stays inside the participation section. */
body.desktop-demo .ugc-section { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
body.desktop-demo .ugc-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
body.desktop-demo .ugc-section-heading h3 { margin:6px 0 0; font-size:22px; }
body.desktop-demo .ugc-section-heading p { margin:0; color:var(--muted); font-size:13px; }
body.desktop-demo .ugc-choices { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
body.desktop-demo .ugc-choice { display:flex; align-items:center; gap:16px; padding:0 24px 0 0; text-align:left; overflow:hidden; min-height:142px; background:#121c22; border-color:#34434b; }
body.desktop-demo .ugc-choice>.icon { width:24px; height:24px; flex:0 0 24px; color:#c1d0d8; }
body.desktop-demo .ugc-choice>.icon:last-child { width:18px; height:18px; flex-basis:18px; margin-left:auto; }
body.desktop-demo .ugc-choice strong { display:block; font-size:16px; font-weight:600; }
body.desktop-demo .ugc-choice small { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-top:5px; }
body.desktop-demo .ugc-choice.selected { border-color:var(--accent); }
body.desktop-demo #ugc-editor { scroll-margin-top:98px; margin-top:20px; padding:24px; border:1px solid #34434b; background:#111b21; }
body.desktop-demo #ugc-editor[hidden] { display:none; }
body.desktop-demo .ugc-editor-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
body.desktop-demo .ugc-editor-heading h4 { margin:0; font-size:20px; font-weight:600; }
body.desktop-demo .ugc-editor-heading p { margin:6px 0 0; color:var(--muted); font-size:12px; }
body.desktop-demo .ugc-workspace { display:grid; grid-template-columns:minmax(320px,1fr) minmax(0,1.12fr); gap:48px; align-items:start; }
body.desktop-demo .ugc-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0; }
body.desktop-demo .ugc-field { display:flex; flex-direction:column; gap:7px; font-size:12px; color:#bac8ce; min-width:0; }
body.desktop-demo .ugc-field input,body.desktop-demo .ugc-field select { width:100%; min-height:42px; padding:9px 10px; font-size:12px; }
body.desktop-demo .ugc-fixed { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; color:var(--muted); }
body.desktop-demo .ugc-fixed strong { overflow-wrap:anywhere; }
body.desktop-demo .ugc-fixed small { font-size:10px; }
body.desktop-demo .ugc-stats-toggle,body.desktop-demo .ugc-field-note,body.desktop-demo .ugc-stats-fields { grid-column:1/-1; }
body.desktop-demo .ugc-stats-toggle { display:flex; align-items:center; gap:9px; margin-top:4px; font-size:12px; }
body.desktop-demo .ugc-stats-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
body.desktop-demo .ugc-stats-fields[hidden] { display:none; }
body.desktop-demo .ugc-field-note { margin:0; font-size:11px; line-height:1.7; color:#8fa5b1; }
body.desktop-demo .ugc-preview-column { min-width:0; max-width:460px; width:100%; justify-self:center; }
body.desktop-demo .ugc-preview-label { display:flex; justify-content:space-between; margin-bottom:10px; font-size:11px; color:#a8bac5; }
body.desktop-demo .ugc-export-note { margin:14px 0; font-size:12px; line-height:1.7; color:#b8c5cb; }
body.desktop-demo .ugc-export-actions { display:flex; flex-wrap:wrap; gap:10px; }
body.desktop-demo .ugc-export-actions button { min-height:42px; padding:10px 14px; font-size:12px; }
body.desktop-demo .ugc-feedback { min-height:20px; font-size:12px; color:#f4b385; margin:10px 0 0; }
body.desktop-demo .ugc-copy-fallback { display:block; margin-top:10px; font-size:12px; }
body.desktop-demo .ugc-copy-fallback[hidden] { display:none; }
body.desktop-demo .ugc-copy-fallback textarea { width:100%; margin-top:8px; font-size:12px; }


/* A quiet editor surrounds the expressive, shareable player banner. */
body.desktop-demo .ugc-choice { background:linear-gradient(110deg,#17232a,#10171d); gap:24px; }
body.desktop-demo .ugc-choice.selected { border-color:#b6c7ce; background:#1d2a32; }
body.desktop-demo .ugc-choice-art { align-self:stretch; flex:0 0 110px; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; position:relative; isolation:isolate; overflow:hidden; border-right:1px solid #60707a; }
body.desktop-demo .ugc-choice-art::before { content:''; position:absolute; inset:0; z-index:-2; background:linear-gradient(0deg,#10191fec,transparent 90%),url('./assets/cag-community-kv.jpg') 24% 23%/auto 150%; transition:transform .35s ease; }
body.desktop-demo .ugc-choice-art--player::before { background-position:73% 24%; }
body.desktop-demo .ugc-choice:hover .ugc-choice-art::before { transform:scale(1.05); }
body.desktop-demo .ugc-choice-art b { font:italic 700 36px/.95 Impact,'Arial Narrow',sans-serif; color:#ebf2ef; letter-spacing:.015em; white-space:nowrap; }
body.desktop-demo .ugc-choice-art small { margin-top:8px; color:#c3d0d4; font-size:9px; font-weight:400; letter-spacing:.07em; white-space:nowrap; }
body.desktop-demo .ugc-choice-art--squad { border-bottom:3px solid #d0a475; }
body.desktop-demo .ugc-choice-art--player { border-bottom:3px solid #bed7df; }
body.desktop-demo #ugc-editor { padding:32px; background:linear-gradient(125deg,#141e25,#0e171d); }
body.desktop-demo .ugc-form { align-content:start; gap:16px; }
body.desktop-demo .ugc-form fieldset { border:0; margin:0; padding:0; min-width:0; grid-column:1/-1; }
body.desktop-demo .ugc-form legend { color:#c3ced3; font-size:12px; padding:0; margin-bottom:10px; }
body.desktop-demo .ugc-form fieldset>div { display:flex; gap:8px; }
body.desktop-demo .ugc-style-options { margin-bottom:10px !important; }
body.desktop-demo .ugc-option { position:relative; flex:1; cursor:pointer; }
body.desktop-demo .ugc-option input { position:absolute; inset:0; z-index:1; opacity:0; width:100%; height:100%; min-height:0; margin:0; padding:0; cursor:pointer; }
body.desktop-demo .ugc-option input:disabled { cursor:not-allowed; }
body.desktop-demo .ugc-option>span { display:flex; justify-content:center; align-items:center; gap:8px; min-height:42px; border:1px solid #394851; background:#101920; color:#b1c1ca; font-size:12px; transition:border-color .15s,background .15s; }
body.desktop-demo .ugc-option input:checked+span { border-color:#c9d4d6; background:#293942; color:#f4f8f7; }
body.desktop-demo .ugc-option input:focus-visible+span { outline:2px solid var(--accent); outline-offset:3px; }
body.desktop-demo .ugc-option input:disabled+span { opacity:.45; cursor:not-allowed; }
body.desktop-demo .ugc-swatch i { width:12px; height:12px; display:block; background:var(--swatch); clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%); }
body.desktop-demo .ugc-card { padding:0; border:0; background:#0c1218; width:100%; aspect-ratio:2/3; filter:drop-shadow(0 12px 18px #0004); }
body.desktop-demo .ugc-card>svg { display:block; width:100%; height:auto; }
body.desktop-demo .ugc-card-accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:pre; border:0; }
body.desktop-demo .ugc-code-readout { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:8px 16px; border-block:1px solid #394851; padding:18px 0; margin-top:10px; }
body.desktop-demo .ugc-code-readout>span { font-size:12px; color:#b6c6ce; }
body.desktop-demo .ugc-code-readout strong { grid-column:2; grid-row:1/3; align-self:center; font:700 24px/1.1 'Arial Narrow',Arial,sans-serif; letter-spacing:.04em; color:#e1e7e5; }
body.desktop-demo .ugc-code-readout small { font-size:11px; color:#8fa5b1; }
body.desktop-demo .ugc-preview-label { color:#c1cdd2; }
body.desktop-demo .ugc-export-note { margin:12px 0; font-size:11px; }
body.desktop-demo .ugc-export-actions button { flex:1; padding-inline:10px; }
@media (min-width:1024px) and (max-width:1150px) {
 body.desktop-demo .ugc-workspace { gap:24px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 body.desktop-demo #ugc-editor { padding:24px; }
 body.desktop-demo .ugc-choice { gap:16px; }
 body.desktop-demo .ugc-choice-art { flex-basis:90px; }
 body.desktop-demo .ugc-choice strong { font-size:14px; }
 body.desktop-demo .ugc-choice small { font-size:11px; }
 body.desktop-demo .ugc-choice-art small { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
 body.desktop-demo .ugc-choice-art::before,body.desktop-demo .ugc-option>span { transition:none; }
}