/* Karaoke Queue! shared styles (recreated in update #12; the original file was not in the saved files). */
:root{
  --bg:#0b0615;--panel:#1a1030;--line:#2e2150;--text:#f4efff;--mute:#a99cc7;
  --amber:#ffb63b;--pink:#e0337a;--ok:#2fd19a;--bad:#ff5d6c;--violet:#7c3aed;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* page styles like display:grid must never un-hide things */
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,.display{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-weight:400;letter-spacing:.5px}
h1{font-size:clamp(28px,6vw,44px);margin:6px 0;color:var(--amber)}
h2{font-size:18px;margin:0 0 8px}
a{color:var(--amber)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.hint{color:var(--mute);font-size:14px}
.err{color:var(--bad);min-height:1em;margin:8px 0 0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
input:not([type=radio]):not([type=checkbox]):not([type=file]){width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--text);font:inherit;font-size:16px}
input:focus,button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:#2a1d48;color:var(--text);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;min-height:44px}
button:disabled{opacity:.45;cursor:not-allowed}
button.p,.btn.p{background:var(--violet);border-color:var(--violet)}
button.a{background:var(--amber);border-color:var(--amber);color:#2a1700}
button.d{background:transparent;border-color:var(--bad);color:var(--bad)}
button.s{padding:6px 10px;min-height:36px;font-size:14px}
button.big{width:100%;font-size:20px;padding:16px}
.item{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.item .t{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}.item .t span{display:block;color:var(--mute);font-size:13px}.item .t .hint{display:inline}
ul#queue{list-style:none;margin:0;padding:0}
li.item{cursor:grab}li.item.sel{background:#24173f}li.item.over{outline:2px dashed var(--amber)}
.item .t .dot,.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#555;margin-right:8px;vertical-align:middle}.dot.on{background:var(--ok)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:middle}
.badge.free{background:#2a1d48;color:var(--mute)}.badge.pro{background:var(--amber);color:#2a1700}.badge.dev{background:var(--pink);color:#fff}
.pulse{animation:pulse 1s ease-in-out 4}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,182,59,.55)}}
details summary{cursor:pointer;color:var(--mute);font-size:14px;margin-top:12px}

/* ---- color schemes (picked when the party is created; ids must match THEMES in src/party.ts) ---- */
[data-theme=ocean]{--bg:#041421;--panel:#0b2236;--line:#163a57;--text:#eef8ff;--mute:#8fb3cc;--amber:#38d6ff;--pink:#ff5c8a;--violet:#1e7bd8}
[data-theme=sunset]{--bg:#1a0a06;--panel:#2a130b;--line:#4a2414;--text:#fff3ec;--mute:#d1a58f;--amber:#ffcf4a;--pink:#ff3d7f;--violet:#e8481f}
[data-theme=forest]{--bg:#06140c;--panel:#0e2417;--line:#1d3f2a;--text:#effff4;--mute:#9cc4a8;--amber:#c8f25a;--pink:#ff6b6b;--violet:#1f9d55}
[data-theme=rose]{--bg:#17060f;--panel:#2a0d1d;--line:#4a1835;--text:#fff0f7;--mute:#d6a1bd;--amber:#ffb3d4;--pink:#ff4f6d;--violet:#c92a78}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.swatches label{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--mute);cursor:pointer}
.swatches input{position:absolute;opacity:0;pointer-events:none}
.swatches .sw{width:44px;height:44px;border-radius:50%;border:3px solid transparent;display:block}
.swatches input:checked+.sw{border-color:var(--text)}
.swatches input:focus-visible+.sw{outline:2px solid var(--amber);outline-offset:2px}

/* ---- name bubbles (TV bottom bar) ---- */
.bub{position:relative;display:inline-block;padding:.25em .85em;border-radius:1.2em;background:var(--violet);color:#fff;font-weight:700;margin:.15em .3em;box-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap;max-width:14em;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.bub::after{content:"";position:absolute;left:.9em;bottom:-.35em;border:.4em solid transparent;border-top-color:var(--violet);border-bottom:0}
.bub.first{background:var(--amber);color:#2a1700}.bub.first::after{border-top-color:var(--amber)}
.bub.soon{animation:pulse 1s ease-in-out infinite}
.bub.more{background:var(--line);color:var(--mute)}.bub.more::after{display:none}

/* ---- footer ---- */
.foot{text-align:center;color:var(--mute);font-size:12px;padding:18px 12px 10px}
.foot a{color:var(--mute)}

/* ---- Free vs Pro table ---- */
table.cmp{width:100%;border-collapse:collapse;font-size:14px}
table.cmp th,table.cmp td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center;vertical-align:top}
table.cmp td:first-child,table.cmp th:first-child{text-align:left;color:var(--mute)}
table.cmp th{color:var(--amber);font-size:15px}

/* ---- classy background: soft "stage light" glows + faint dots, follows the color scheme ---- */
body.fancy{
  background:
    radial-gradient(1100px 650px at 8% -12%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 62%),
    radial-gradient(900px 600px at 108% 112%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 60%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--bg);
  background-attachment: fixed;
}
body.fancy .panel{background:color-mix(in srgb, var(--panel) 88%, transparent);backdrop-filter:blur(6px)}