/* Stream Racers - the host studio.
 *
 * Its own sheet because it is the one screen a viewer never sees, and mixing it
 * into lab.css would have the player's pages carrying rules for controls they
 * are not allowed to touch. Everything visual is borrowed from lab.css; what is
 * here is only the arrangement.
 */

/* ===== rows of controls =====
 * A fixed label column, so settings in a column line up instead of each row
 * starting wherever its own label ended. */
.hrow {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.hrow > label {
    flex: 0 0 104px;
    font-size: 19px; letter-spacing: 2px; color: var(--dim);
}
.hrow > .pick { flex: 1; min-width: 0; max-width: none; }
.hrow .grow { flex: 1; min-width: 0; }
.hrow:last-child { margin-bottom: 0; }

.seg { display: flex; gap: 4px; flex-wrap: wrap; }

/* style.css draws selects and segmented buttons in the race widget's greys;
 * here they sit on violet panels, so they take the panels' ink. And what is
 * chosen is cyan, as the tabs are: pink stays the colour of an action
 * (Vice '91, lab.css). */
.pick { background: var(--ink); border-color: var(--line); color: var(--text); color-scheme: dark; }
.opt-btn { background: var(--ink); border-color: var(--line); color: #c9bce3; }
.opt-btn:hover { border-color: #5e4e8c; color: #fff; }
.opt-btn.active, .chip.on { background: #22e4ff; border-color: #22e4ff; color: #10101a; }

.hint {
    font-size: 18px; line-height: 1.35; color: var(--dim);
    margin-top: 10px;
}
.hint b { color: var(--text); }
.hint code { color: #ffd23f; }

.dim { color: var(--dim); }

/* ===== "?" =====
 * An explanation on demand. The tip is drawn over the page, never in it, so
 * hovering one moves nothing. */
.q {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: 0 0 20px;
    border: 2px solid var(--line); border-radius: 50%;
    font-size: 14px; line-height: 1; color: var(--dim);
    cursor: help; user-select: none;
}
.q:hover, .q:focus { border-color: #ffd23f; color: #ffd23f; outline: none; }
.q::after {
    content: attr(data-tip);
    position: absolute; z-index: 40;
    left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content; max-width: 280px;
    padding: 8px 10px;
    background: #0a0618; color: var(--text);
    border: 2px solid #ffd23f; border-radius: 8px;
    font-size: 16px; line-height: 1.3; letter-spacing: 1px; text-align: left;
    white-space: normal;
    pointer-events: none;
    /* not drawn at all until asked for: an invisible tip still takes room,
       and one near the right edge pushed the whole page sideways on a phone */
    display: none;
}
.q:hover::after, .q:focus::after { display: block; }
/* a "?" at the right end of a row opens its tip leftwards */
.panel.relink .q::after, .panel-title .q::after { left: auto; right: -6px; transform: none; }
.panel-title .q::after { left: -6px; right: auto; }

/* ===== activation ===== */
.act-panel { max-width: 560px; }
.act-lead { margin: 0 0 12px; font-size: 20px; line-height: 1.35; color: #d4c8ec; }
.act-who { font-size: 18px; line-height: 1.5; margin: 2px 0 14px; color: var(--dim); }
.act-who b { color: #fff; }
.act-panel #act-buy { margin-top: 12px; display: inline-block; }
.act-panel #act-buy[hidden] { display: none; }
.btn.big { font-size: 24px; padding: 6px 18px; }

/* ===== the head ===== */
.studio-head {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 18px 0 16px;
}
.studio-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* in chrome, like the section heads on the player's pages (lab.css) */
.studio-id h2 {
    margin: 0; font-size: 38px; letter-spacing: 3px; font-weight: normal;
    background: linear-gradient(180deg, #ffffff 0%, #ffd6f5 45%, #ff7ac8 52%, #8be9ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 #000);
}
.state-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 2px 10px 3px;
    background: rgba(139, 212, 39, .12);
    border: 2px solid #3f6a16; border-radius: 8px;
    color: #8bd427; font-size: 16px; letter-spacing: 2px;
}
.state-pill::before {
    content: ''; width: 8px; height: 8px; border-radius: 2px; background: #8bd427;
}
.studio-chan { font-size: 18px; letter-spacing: 1px; color: var(--dim); }
.studio-chan:hover { color: #fff; }
.studio-head .tabs { margin: 0 0 0 auto; }
.tab { position: relative; }
.tab-dot {
    position: absolute; top: -5px; right: -5px;
    width: 12px; height: 12px;
    background: #ffd23f; border: 2px solid #000; border-radius: 3px;
}
.tab-dot[hidden] { display: none; }

.studio-warn {
    margin: -4px 0 14px;
    padding: 8px 12px;
    background: rgba(255, 210, 63, .08);
    border: 2px solid #6a5418; border-radius: 10px;
    color: #ffe27a; font-size: 18px; letter-spacing: 1px;
}
.studio-warn[hidden] { display: none; }

/* ===== setup: three steps ===== */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 980px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--ink-2);
    border: 3px solid var(--stroke);
    border-radius: 14px;
    padding: 16px 18px 18px;
}
.step-top { display: flex; align-items: center; gap: 12px; }
.step-top h3 { margin: 0; font-size: 26px; letter-spacing: 3px; font-weight: normal; }
.step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    background: var(--hot); color: #fff;
    border: 3px solid #000; border-radius: 9px;
    font-size: 24px; line-height: 1;
}
.step-lead { margin: 0; font-size: 19px; line-height: 1.35; color: #d4c8ec; }
.step-lead.dim { color: var(--dim); font-size: 18px; }
.step-lead code, .cmd-list code { color: #ffd23f; font-family: inherit; }
.step-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.step-actions .btn { margin-left: 0; }
.step-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; letter-spacing: 1px; color: var(--dim);
}
.step-meta b { color: #ffd23f; font-weight: normal; font-size: 20px; }

.link-box {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--ink);
    border: 3px solid var(--stroke); border-radius: 10px;
    font-size: 19px; letter-spacing: 1px; color: #ffd23f;
    min-width: 0;
}
.link-box #link-short { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-tag {
    flex: 0 0 auto;
    padding: 0 7px 1px;
    border: 2px solid var(--line); border-radius: 6px;
    font-size: 13px; letter-spacing: 2px; color: var(--dim);
}
.link-raw {
    width: 100%;
    background: var(--ink); color: #ffd23f;
    border: 3px solid #ffd23f; border-radius: 9px;
    font-family: inherit; font-size: 16px; padding: 6px 8px;
}
.link-raw[hidden] { display: none; }

.stale {
    padding: 7px 10px;
    background: rgba(255, 210, 63, .08);
    border: 2px solid #6a5418; border-radius: 9px;
    color: #ffe27a; font-size: 17px; line-height: 1.3;
}
.stale[hidden] { display: none; }

@keyframes copy-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 210, 63, .35); }
}
.btn.pulse { background: #ffd23f; color: #170e2e; animation: copy-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; } }

.cmd-big {
    align-self: flex-start;
    font-family: inherit; font-size: 34px; letter-spacing: 2px;
    padding: 4px 18px 6px;
    background: var(--ink); color: #ffd23f;
    border: 3px dashed #6a5418; border-radius: 10px;
    cursor: copy;
}
.cmd-big:hover { border-color: #ffd23f; }

.cmd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmd-list li {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 8px;
    padding: 5px 10px;
    background: var(--ink-3);
    border: 2px solid var(--stroke); border-radius: 8px;
}
.cmd-list li > code { font-size: 21px; }
.cmd-list li > span { font-size: 17px; color: var(--dim); letter-spacing: 1px; }

.panel.relink {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding: 10px 16px;
    font-size: 18px; color: var(--dim); letter-spacing: 1px;
}
.panel.relink .btn { margin-left: auto; font-size: 18px; padding: 2px 14px; }

/* ===== the look sheet ===== */
.look-box { width: min(560px, 100%); border-left-width: 3px; }
.look-box .sheet-head b { color: #fff; }
.look-box .hrow > label { flex-basis: 118px; }

/* ===== cup ===== */
.panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-title h3 { margin: 0; }
.panel-title .tank-note { margin-left: auto; font-size: 16px; }
.opt-tag {
    padding: 0 7px 1px;
    border: 2px solid var(--line); border-radius: 6px;
    font-size: 13px; letter-spacing: 2px; color: var(--dim);
}

.cup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
.cup-layout .panel + .panel { margin-top: 0; }
@media (max-width: 900px) { .cup-layout { grid-template-columns: minmax(0, 1fr); } }

.crate-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.crate-opt {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px 8px 10px;
    background: var(--ink-3);
    border: 3px solid var(--stroke); border-radius: 12px;
    font-family: inherit; color: var(--text); text-align: left;
    cursor: pointer;
    opacity: .62;
    transition: opacity .12s, transform .12s;
}
.crate-opt:hover { opacity: .9; }
.crate-opt.on { opacity: 1; border-color: var(--tint); box-shadow: 0 0 0 2px var(--tint) inset; }
.crate-opt img {
    width: 100%; height: auto; image-rendering: auto;
    border: 2px solid #000; border-radius: 6px;
}
.crate-opt b { font-size: 22px; font-weight: normal; letter-spacing: 2px; margin-top: 4px; }
.crate-opt span { font-size: 15px; letter-spacing: 2px; color: var(--tint); }

.prize-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px;
    font-size: 18px; letter-spacing: 1px; color: var(--dim);
}
.prize-foot .btn { margin-left: auto; font-size: 17px; padding: 1px 12px; }

/* ===== cup: sky =====
 * Eight chips in the label column's room wrap onto two or three lines, so the
 * label sits level with the first line rather than in the middle of them. */
.hrow.sky-row { align-items: flex-start; }
.hrow.sky-row > label { padding-top: 3px; }
.sky-chips { flex: 1; min-width: 0; gap: 6px; }
.sky-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 17px; padding: 2px 10px; }
/* The colour emoji stand taller than the pixel caps: at the chip's own size
   they made their chips taller than ANY SKY and sat the words lower than in
   CLEAR or SNOW. At the caps' height every chip in the row matches. */
.sky-chip i { font-style: normal; font-size: 14px; line-height: 1; }
/* on a phone the label column leaves the chips too little room: five lines of
   them. The label goes on top and the chips get the panel's whole width. */
@media (max-width: 520px) {
    .hrow.sky-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .hrow.sky-row > label { flex: 0 0 auto; padding-top: 0; }
}

/* ===== cup: venue =====
 * Nine signs in a grid of three: Random first, as it is the default and the
 * one most hosts keep. On a phone the eight venues go two by two and Random
 * becomes a banner across both columns (host.js draws it in both shapes), so
 * the grid does not end on one sign by itself. */
.panel.venue-panel { margin-top: 16px; }

.venue-pick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.venue-tile {
    display: block; width: 100%;
    padding: 0; border: 0; border-radius: 15px;
    background: none; font: inherit; color: inherit;
    cursor: pointer;
    /* the ones not chosen step back a little, so the chosen one reads first
       without the other eight going grey */
    filter: saturate(.8) brightness(.86);
    transition: filter .12s, transform .12s;
}
.venue-tile:hover { filter: none; transform: translateY(-2px); }
.venue-tile:focus-visible { filter: none; outline: 3px dashed var(--text); outline-offset: 3px; }
/* an outline, not a border: it is drawn outside the box and moves nothing */
.venue-tile.on {
    filter: none;
    outline: 3px solid #22e4ff; outline-offset: 3px;
    box-shadow: 0 0 18px rgba(34, 228, 255, .4);
}
/* tabbing onto the chosen sign has to show too: the ring turns white, the
   cyan glow stays to say it is still the chosen one */
.venue-tile.on:focus-visible { outline-color: var(--text); }
.venue-tile svg { display: block; width: 100%; height: auto; }
.venue-tile .rnd-wide { display: none; }

@media (max-width: 760px) {
    .venue-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .venue-tile.rnd { grid-column: 1 / -1; }
    .venue-tile .rnd-std { display: none; }
    .venue-tile .rnd-wide { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .venue-tile { transition: none; }
    .venue-tile:hover { transform: none; }
}

.panel.sched { margin-top: 16px; }
.sched-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sched-row .chip { font-size: 17px; padding: 2px 10px; }
.sched-time { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--dim); }
.sched-time input { width: 116px; max-width: none; }
.sched-time select { max-width: 120px; }
.sched-row .btn { margin-left: auto; }
.panel.sched .hint { margin-top: 8px; }

.cup-foot { margin: 14px 2px 0; font-size: 18px; letter-spacing: 1px; color: var(--dim); }
.cup-foot a { color: #ffd23f; }

/* ===== stats ===== */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 760px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-tile {
    background: var(--ink-2);
    border: 3px solid var(--stroke);
    border-radius: 12px;
    padding: 12px 14px 14px;
}
.stat-tile b {
    display: block;
    font-size: 44px; font-weight: normal; line-height: 1;
    color: #ffd23f;
}
.stat-tile span { font-size: 16px; letter-spacing: 2px; color: var(--dim); }

.champ-list { display: flex; flex-direction: column; gap: 6px; }
.champ-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--ink-3);
    border: 2px solid var(--stroke);
    border-radius: 9px;
    padding: 6px 10px;
    font-size: 20px;
}
.champ-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ-row .when { font-size: 17px; color: var(--dim); letter-spacing: 1px; }
.champ-row .got { font-size: 16px; letter-spacing: 2px; color: #ffd23f; }
.empty-line { font-size: 19px; color: var(--dim); letter-spacing: 1px; }

.panel.commission { margin-top: 16px; }
.panel.commission[hidden] { display: none; }
.panel.commission .btn { margin: 12px 0 0; display: inline-block; }
.channel-skin { margin-top: 16px; max-width: 380px; }

.danger-row { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.danger-row[hidden] { display: none; }
.danger-row .btn { margin-left: 0; background: var(--ink-3); color: #ff7a9c; }
.danger-row .hint { margin: 0; }

/* ===== setup: OBS's own dialog, filled in ===== */
.obs-props {
    margin-top: 2px;
    background: #0d0820;
    border: 2px solid var(--line); border-radius: 10px;
    overflow: hidden;
}
.obs-props-head {
    padding: 4px 10px 5px;
    background: var(--ink-3);
    font-size: 14px; letter-spacing: 2px; color: var(--dim);
}
.obs-prop {
    display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 4px 10px 5px;
    border-top: 2px solid #1c1233;
    font-size: 17px; letter-spacing: 1px;
}
.obs-prop span { color: var(--dim); }
.obs-prop b { font-weight: normal; color: #ffd23f; font-size: 19px; }

/* ===== setup: when nothing shows ===== */
.checklist {
    padding: 8px 12px 10px;
    background: #0d0820;
    border: 2px solid var(--line); border-radius: 10px;
}
.checklist-head { font-size: 14px; letter-spacing: 2px; color: var(--dim); margin-bottom: 4px; }
.checklist ul { margin: 0; padding-left: 18px; font-size: 17px; line-height: 1.4; color: #c9bce3; }

/* ===== the preview sheet ===== */
.preview-box { width: min(1000px, 100%); border-left-width: 3px; }
.preview-box .sheet-head b { color: #fff; }
.preview-stage { display: flex; justify-content: center; }
.preview-frame {
    position: relative; overflow: hidden;
    border: 3px solid #000; border-radius: 8px;
    /* a transparent backdrop should look transparent */
    background: repeating-conic-gradient(#2d1f4f 0% 25%, #21163b 0% 50%) 0 0 / 24px 24px;
}
.preview-frame iframe {
    position: absolute; left: 0; top: 0;
    border: 0; background: transparent;
    transform-origin: top left;
}

@media (max-width: 520px) {
    .crate-opt { padding: 6px 6px 8px; }
    .crate-opt b { font-size: 17px; letter-spacing: 1px; }
    .crate-opt span { font-size: 12px; letter-spacing: 1px; }
    .studio-head .tabs { margin-left: 0; }
}

/* Two plates across a phone: the venue's line under its name would be about
   7px there, so it goes (it is still in each tile's tooltip). */
@media (max-width: 520px) {
    .venue-pick svg .va-sub { display: none; }
}

/* the line pointing at the setup guide (setup.html), under the three steps */
.setup-guide-link { margin: 14px 2px 0; font-size: 18px; color: var(--dim); }
.setup-guide-link a, .act-panel .hint a { color: #ffd23f; }