:root{color-scheme:dark;--purple:#a970ff;--bg:#0e0e10;--panel:#18181b;--line:#303034;--muted:#adadb8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#efeff1;font:14px/1.45 Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{outline-offset:4px}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #bf94ff}button{color:inherit;background:#303034;border:0;border-radius:4px;padding:7px 12px;font-weight:600}button:hover{background:#414146}[hidden]{display:none!important}.topbar{height:60px;position:fixed;inset:0 0 auto;z-index:20;background:#18181b;box-shadow:0 1px 3px #000;display:flex;align-items:center;gap:28px;padding:0 22px}.brand{font-size:21px;font-weight:900;letter-spacing:-.8px;color:var(--purple);max-width:45vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browse{font-size:17px;font-weight:650}.browse:hover{color:var(--purple)}.demo-badge{margin-left:auto;color:var(--muted);font-size:10px;letter-spacing:1.5px}.top-avatar{display:grid;place-items:center;background:#613db6;width:30px;height:30px;border-radius:50%;font-weight:bold}.sidebar{position:fixed;top:60px;bottom:0;left:0;width:220px;background:#1f1f23;padding:21px 10px}.sidebar-title{font-weight:bold;font-size:12px;padding:0 8px 15px}.side-link{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:4px;font-weight:600}.side-link:hover,.side-link.selected{background:#35353b}.side-icon{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#6441a5}.side-link span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sidebar-note{font-size:12px;color:var(--muted);margin:24px 8px;line-height:1.8}#gallery{margin:60px 0 0 220px;padding:42px 38px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--purple);font-weight:bold}h1{font-size:32px;letter-spacing:-1px;margin:8px 0}.intro{color:var(--muted);margin:0 0 30px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:30px 24px}.card{display:block;min-width:0}.thumbnail{position:relative;aspect-ratio:16/9;background:#24222b;transition:transform .16s,box-shadow .16s;overflow:hidden}.thumbnail img{width:100%;height:100%;object-fit:cover}.card:hover .thumbnail{transform:translate(4px,-4px);box-shadow:-5px 5px 0 #9146ff}.thumbnail .tag{position:absolute;bottom:9px;left:9px;font-size:11px;background:#000b;padding:3px 7px;border-radius:3px}.card h2{font-size:17px;margin:13px 0 3px}.card p{margin:0;color:var(--muted);font-size:12px}.fallback{display:grid;place-items:center;height:100%;font-size:35px;font-weight:900;color:#bf94ff;background:linear-gradient(140deg,#292232,#141317);text-align:center;padding:20px}#watch{margin:60px 0 0 220px;display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:calc(100vh - 60px)}.stream-column{min-width:0}.player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}.player iframe{border:0;display:block;width:100%;height:100%}.live-badge{position:absolute;top:14px;left:14px;padding:1px 5px;background:#eb0400;color:#fff;font-size:11px;font-weight:bold;border-radius:3px;pointer-events:none}.player-controls{position:absolute;bottom:0;left:0;right:0;padding:25px 12px 8px;background:linear-gradient(transparent,#000c);display:flex;align-items:center;gap:7px;opacity:.2;transition:opacity .15s}.player:hover .player-controls,.player:focus-within .player-controls{opacity:1}.sample-label{font-size:11px;margin-right:auto;color:#ddd}.player-controls button{font-size:22px;line-height:1;background:#0005}.player:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;display:grid;place-items:center}.player:fullscreen iframe{width:100%;height:100%}.channel{display:flex;gap:13px;padding:22px 22px 16px;align-items:flex-start;flex-wrap:wrap}.avatar{width:62px;height:62px;border-radius:50%;background:#6441a5;border:3px solid #a970ff;display:grid;place-items:center;font-size:26px;font-weight:800;flex-shrink:0}.channel-copy{flex:1;min-width:190px}.editable-name{padding:0;background:transparent;font-size:20px;font-weight:750;text-align:left}.editable-name:hover{background:transparent;color:#bf94ff}.editable-name span{font-size:14px;color:var(--purple);margin-left:5px}.channel h1{font-size:15px;letter-spacing:0;font-weight:600;margin:5px 0}.category{margin:8px 0 0;color:var(--purple);font-size:12px}.pill{display:inline-block;border-radius:15px;background:#303034;color:#ddd;padding:1px 8px;margin:3px}.channel-actions{margin-left:auto;display:flex;align-items:flex-end;flex-direction:column;gap:7px}.download{display:block;background:#9146ff;border-radius:5px;font-weight:750;font-size:14px;padding:12px 18px;color:white;box-shadow:0 0 0 1px #b785ff66}.download:hover{background:#772ce8}#download-note{color:var(--muted);font-size:10px}.about{background:#18181b;margin:10px 22px 30px;padding:24px;border-radius:5px}.about h2{font-size:19px;margin:0 0 15px}.about p{color:#c4c4cd}.about-detail{display:flex;flex-wrap:wrap;gap:18px;font-weight:bold;font-size:12px;padding:12px 0}.small{font-size:11px;color:var(--muted)!important}.chat-panel{position:sticky;top:60px;height:calc(100vh - 60px);border-left:1px solid #303034;display:flex;flex-direction:column;background:#18181b}.chat-panel header{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid #303034;font-size:12px;font-weight:bold}.chat-notice{color:#adadb8;font-size:12px;text-align:center;padding:18px 12px}#chat-messages{flex:1;overflow-y:auto;padding:0 14px}.chat-line{font-size:13px;padding:7px 0;overflow-wrap:anywhere}.chat-line b{color:#bf94ff}.chat-line:nth-child(3n) b{color:#4ed8ad}.chat-line:nth-child(3n + 1) b{color:#eeac4a}.chat-line .time{font-size:10px;color:#777785;margin-right:5px}#chat-form{padding:13px}.chat-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.chat-bottom span{font-size:11px;color:var(--muted)}.chat-bottom button,#name-form button[type=submit]{background:#9146ff;color:#fff}input{min-width:0;border:1px solid #676773;background:#242428;padding:10px;color:white;border-radius:4px}#chat-input{width:100%}#name-form{display:flex;gap:5px;flex-wrap:wrap}#name-input{width:200px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#38313f;padding:12px 20px;border:1px solid #a970ff;border-radius:6px;z-index:50;max-width:90vw}
@media(min-width:1800px){#watch{grid-template-columns:minmax(0,1fr) 360px}}@media(max-width:1150px){.sidebar{width:65px;padding:16px 6px}.sidebar-title,.side-link span,.sidebar-note{display:none}.side-link{padding:9px}.side-icon{width:32px;height:32px}#gallery,#watch{margin-left:65px}#watch{grid-template-columns:minmax(0,1fr) 280px}.channel-actions{width:100%;align-items:flex-start;margin-left:75px}.about{padding:18px}}@media(max-width:800px){.sidebar{display:none}#gallery,#watch{margin-left:0}#watch{display:block}.chat-panel{position:relative;top:0;height:400px;border-top:1px solid #303034}.topbar{padding:0 14px;gap:18px}.brand{font-size:18px}.demo-badge{display:none}#gallery{padding:25px 18px}.channel{padding:18px 14px}.about{margin:5px 14px 24px}.channel-actions{margin-left:0}.player-controls{opacity:1}.top-avatar{margin-left:auto}}

#code-dialog{width:min(920px,94vw);max-height:90vh;padding:26px;border:1px solid #57515f;border-radius:10px;background:#18181b;color:#efeff1;overflow:auto}#code-dialog::backdrop{background:#000b}.code-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.code-top h2{margin:0;font-size:24px}.code-top p{margin:6px 0;color:#bf94ff}.code-help{color:#bcbcc5;line-height:1.7}.code-panel{margin:20px 0}.code-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.code-heading h3{margin:0;font-size:14px}.code-heading button{background:#9146ff;white-space:nowrap}.code-heading button:disabled{opacity:.5;cursor:default}.code-panel textarea{display:block;width:100%;height:190px;resize:vertical;background:#0e0e10;color:#dedee8;border:1px solid #424249;border-radius:5px;padding:12px;font:12px/1.6 Consolas,monospace;white-space:pre;overflow:auto}#copy-status{color:#bf94ff;min-height:22px}#overlay-instructions{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 Consolas,monospace}#code-dialog summary{cursor:pointer;padding:10px 0}body:has(#code-dialog[open]){overflow:hidden}

button.download{border:0;cursor:pointer;font-family:inherit}button.download:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- gallery filters + grouped sidebar ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 26px}
.chip{border-radius:20px;background:#26262c;border:1px solid #3a3a42;padding:7px 14px;font-weight:650}
.chip[aria-pressed="true"]{background:#9146ff;border-color:#b98bff;color:#fff}
.side-group{font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:800;padding:14px 8px 6px}
.sidebar{overflow-y:auto}
.side-icon.fallback{display:grid;place-items:center;font-size:12px;height:34px;padding:0}
.thumbnail>img{display:block}
/* ---------- player backdrops: the overlay itself is transparent ---------- */
.player iframe{color-scheme:normal;background:transparent}
.player[data-backdrop="game"]{background:
  radial-gradient(ellipse at 50% 120%,#2f6b3f 0 38%,transparent 39%),
  radial-gradient(ellipse at 15% 110%,#3a7d4a 0 30%,transparent 31%),
  radial-gradient(ellipse at 85% 115%,#2c5f3a 0 32%,transparent 33%),
  radial-gradient(circle at 72% 30%,#ffe7a3 0 4%,#ffd36e55 5%,transparent 16%),
  linear-gradient(#5b8fd6,#9cc5f0 55%,#d9ecff)}
.player[data-backdrop="grid"]{background:repeating-conic-gradient(#d9d9d9 0 25%,#ffffff 0 50%) 0 0/28px 28px}
.player[data-backdrop="dark"]{background:#0b0b0d}
/* ---------- customise panel ---------- */
.customise{background:#18181b;margin:10px 22px;padding:22px 24px;border-radius:6px}
.custom-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.custom-head h2{margin:0;font-size:19px}
.custom-block{padding:14px 0;border-top:1px solid #2c2c32}
.custom-block:first-of-type{border-top:0}
.custom-block h3{font-size:14px;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.custom-block h3 small{font-weight:500;color:var(--muted);font-size:12px}
.ghost{background:transparent;border:1px solid #4a4a52;color:#dcdce2}
.ghost:hover{background:#2c2c33}
.field-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#c7c7d0}
.field-list .small{grid-column:1/-1;margin:0}
.colour-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.colour-row{display:flex;align-items:center;gap:10px;background:#222227;border:1px solid #303036;border-radius:30px;padding:6px 14px 6px 6px;text-align:left;font-weight:600}
.colour-row:hover{background:#2b2b31}
.swatch,.swatch-big{--c:#fff;flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(var(--c),var(--c)),repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0 0/10px 10px;box-shadow:0 0 0 2px #0008,0 0 0 3px #fff3}
.colour-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.colour-row code{font-size:11px;color:var(--muted)}
.image-list{display:flex;flex-direction:column;gap:8px}
.image-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#222227;border:1px solid #303036;border-radius:8px;padding:8px 10px}
.img-thumb{width:52px;height:34px;border-radius:4px;background:repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0 0/10px 10px;background-size:cover;background-position:center;flex:0 0 auto}
.img-size{color:var(--muted)}
.button-like{display:inline-block;cursor:pointer;background:#9146ff;color:#fff;border-radius:4px;padding:7px 12px;font-weight:650}
.button-like:hover{background:#772ce8}
.button-like:focus-visible{outline:2px solid #bf94ff;outline-offset:3px}
/* ---------- colour wheel popover ---------- */
.picker{position:fixed;z-index:60;width:272px;background:#1f1f24;border:1px solid #4d4659;border-radius:14px;padding:14px;box-shadow:0 18px 50px #000c}
.picker-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.picker-top strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-top .ghost{padding:3px 9px}
.wheel-wrap{position:relative;width:220px;height:220px;margin:0 auto 10px}
#wheel{display:block;width:220px;height:220px;border-radius:50%;cursor:crosshair;touch-action:none}
#wheel:focus-visible{outline:2px solid #bf94ff;outline-offset:3px}
.wheel-dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #000,0 1px 4px #000;pointer-events:none}
.slider-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#c7c7d0;margin:6px 0}
.slider-row input{flex:1;padding:0;accent-color:#a970ff}
.hex-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.hex-row input{width:110px;font-family:ui-monospace,Consolas,monospace}
.hex-row .ghost{margin-left:auto;padding:6px 9px}
.hex-error{min-height:1em;margin:6px 0 0;font-size:11px;color:#ff9b9b}
.size-note{background:#3a2a12;border:1px solid #a8741a;padding:10px 12px;border-radius:6px;color:#ffe2ad}
.live-badge{top:10px;left:auto;right:10px}
@media(max-width:800px){.customise{margin:5px 14px;padding:18px 16px}}
.side-icon{object-position:0 0}
/* ---------- settings built from the StreamElements Fields ---------- */
.field-check{flex-direction:row!important;align-items:center;gap:8px!important;cursor:pointer}
.field-check input{width:18px;height:18px;accent-color:#a970ff;margin:0}
.field-check.inline{display:inline-flex;font-size:12px;color:#c7c7d0;margin-left:auto}
.range-row{display:flex;align-items:center;gap:10px}
.range-row input[type=range]{flex:1;padding:0;accent-color:#a970ff;min-width:0}
.range-row output{min-width:34px;text-align:right;font-size:12px;color:#c7c7d0}
.range-row .num{width:84px;padding:6px 8px}
.field input[type=number]{padding:8px}
.bg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.bg-thumb{width:128px;height:72px;border-radius:6px;border:1px solid #3a3a42;background:repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0 0/12px 12px;background-size:cover;background-position:center}
.preset-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.preset-row .ghost{padding:5px 10px;font-size:12px}
.game-info{font-size:12px;color:#d6c7ff;background:#241d33;border:1px solid #3d3252;border-radius:6px;padding:8px 10px;margin:12px 0 0}
#group-list .custom-block:first-child{border-top:1px solid #2c2c32}
/* ---------- gallery: transparent previews, your background, search ---------- */
.thumbnail{background:repeating-conic-gradient(#d9d9d9 0 25%,#fff 0 50%) 0 0/16px 16px}
.thumbnail>img{position:relative;z-index:1}
.thumbnail .tag{z-index:2}
.thumb-bg{position:absolute;inset:0;background:center/cover no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.gallery-tools{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
#search{flex:1;min-width:220px;max-width:520px;font-size:15px}
#game-filter,select{background:#242428;color:#fff;border:1px solid #676773;border-radius:4px;padding:9px 10px;font:inherit}
.bg-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#18181b;border:1px solid #2c2c32;border-radius:8px;padding:10px 12px;margin:0 0 16px}
.bg-bar .bg-thumb{width:96px;height:54px}
.bg-bar p{flex:1;min-width:200px;margin:0}
.danger{background:#5c1f24;border:1px solid #b3424d;color:#ffd9dc}
.danger:hover{background:#7a2530}
.build-thumb{display:grid;place-items:center;align-content:center;gap:6px;background:linear-gradient(135deg,#2a1f45,#141317)!important;border:2px dashed #7e5bd6}
.build-thumb span{font-size:40px;color:#bf94ff}.build-thumb strong{font-size:16px}
.build-icon{display:grid;place-items:center;font-size:18px;color:#fff}
.side-group{font-size:11px;font-weight:800;color:var(--muted);padding:14px 8px 4px;letter-spacing:.1em}
/* ---------- shared settings ---------- */
.shared-tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;background:#2d2640;color:#cbb6ff;font-size:10px;font-weight:700;vertical-align:1px}
/* ---------- parts + edit mode ---------- */
.parts-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.part-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#222227;border:1px solid #303036;border-radius:8px;padding:8px 10px;font-size:13px}
.part-row input[type=text]{flex:1;min-width:140px;padding:6px 8px}
.edit-btn{background:#1f3a44;border:1px solid #3cc8ff;color:#bdefff;font-weight:700;padding:11px 16px}
.edit-btn:hover{background:#27505e}
.edit-btn[aria-pressed="true"]{background:#3cc8ff;color:#012}
.channel-actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end}
#download-note{flex-basis:100%;text-align:right}
.player.editing{outline:3px solid #3cc8ff;outline-offset:-3px}
.player.editing .player-controls{opacity:1}
.edit-bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;background:#10262e;border:1px solid #3cc8ff;color:#d8f6ff;padding:10px 14px;font-size:13px}
.edit-bar span{flex:1;min-width:220px;color:#a8dcec}
.edit-bar #edit-done{background:#3cc8ff;color:#012}
/* ---------- build your own ---------- */
.builder{background:#18181b;margin:0 0 10px;padding:18px 22px;border-bottom:1px solid #2c2c32}
.b-layout-row{display:flex;align-items:center;gap:10px;font-size:13px;margin:10px 0}
.b-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:8px 0 14px}
.b-slot{display:flex;align-items:center;gap:10px;background:#222227;border:1px solid #303036;border-radius:8px;padding:8px}
.b-slot .ghost{padding:5px 9px;font-size:12px}
.b-thumb{width:64px;height:36px;object-fit:cover;border-radius:4px;background:repeating-conic-gradient(#d9d9d9 0 25%,#fff 0 50%) 0 0/8px 8px;flex:0 0 auto;display:grid;place-items:center;color:#555}
.b-slot-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.b-slot-copy small{color:var(--muted);font-size:11px}
.b-slot-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-search{display:flex;gap:8px;flex-wrap:wrap}
#b-search{flex:1;min-width:220px}
.b-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:10px}
.b-result{display:flex;align-items:center;gap:10px;background:#202025;border:1px solid #2f2f36;border-radius:8px;padding:8px}
.b-result-img{width:80px;height:45px;object-fit:cover;border-radius:4px;background:repeating-conic-gradient(#d9d9d9 0 25%,#fff 0 50%) 0 0/8px 8px;flex:0 0 auto}
.b-result-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.b-result-copy strong{font-size:13px}.b-result-copy small{font-size:11px;color:var(--muted)}
.b-result button{background:#9146ff;color:#fff;font-size:12px;padding:6px 9px}
.b-more{grid-column:1/-1;justify-self:center}
@media(max-width:800px){.builder{padding:14px}.gallery-tools{flex-direction:column}}
.side-icon{width:48px;height:27px;border-radius:4px;object-fit:cover;object-position:center;background:repeating-conic-gradient(#d9d9d9 0 25%,#fff 0 50%) 0 0/6px 6px;flex:0 0 auto}
.side-icon.fallback,.build-icon{background:#6441a5;font-size:13px}
.b-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}