/*
 * Lobby Maker styles — v3 (shared inline tool workspace)
 * --------------------------
 * The toggle button, sliding panel shell, header, and left-panel
 * accent are unchanged from earlier versions (still beige/white,
 * still following the Upgrade/Death/Altars toggle pattern).
 *
 * The toolbar's Font/Color/Style panels used to each float
 * independently as their own absolutely-positioned popover, anchored
 * directly under their own button. That's what let Color's popover
 * overlap Font's neighboring button, and let an open popover cover
 * the title input sitting just below the toolbar. They now share one
 * .lobby-tool-workspace box that sits in normal document flow right
 * under the toolbar - opening a tool pushes the title input down
 * instead of covering it. Multiple tool panels may remain open as a
 * tidy vertical stack (see setLobbySubPanelOpen in lobby.js). The
 * title input itself moved below that workspace and picked
 * up its own heading + more generous sizing so it still reads as the
 * panel's main focus.
 */


.lobby-toggle-button {
    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;
    gap: 0;

    padding: 12px 14px;
    overflow: hidden;

    background: linear-gradient(
        90deg,
        #d8c3a5 0%,
        #ffffff 25%,
        #f0e6d2 50%,
        #ffffff 75%,
        #d8c3a5 100%
    );
    background-size: 260% auto;

    border: 1px solid rgba(216, 195, 165, 0.85);
    border-radius: 999px;

    color: #3a2f1f;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    cursor: pointer;
    user-select: none;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(216, 195, 165, 0.4),
        0 0 18px rgba(255, 255, 255, 0.3),
        0 0 26px rgba(216, 195, 165, 0.25);

    animation: lobby-toggle-hue-shift 8s linear infinite;

    transition:
        padding 0.35s ease,
        transform 0.18s,
        box-shadow 0.18s;
}


/* Loop fix: this button's gradient is 260% of its width, so one full
   tile is 2.6x the button. With background-position percentages the
   shift is (container - image) * pct = -1.6x * pct, so ending at 100%
   only slid it 1.6x - short of a whole tile, which made the colors
   snap back at the loop point. 162.5% (= 260 / 160) slides exactly one
   tile, so the end frame equals the start frame and the loop is
   seamless. Durations were stretched by the same 1.625 factor to keep
   the original pace. */
@keyframes lobby-toggle-hue-shift {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 162.5% 50%;
    }

}


.lobby-toggle-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 1em;

    font-size: 13px;
    line-height: 1;
    text-align: center;

    transition: transform 0.25s ease;
}


.lobby-toggle-key {
    padding: 1px 6px;

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 800;

    color: #ffffff;
}


.lobby-toggle-button .btn-label {
    max-width: 0;
    margin-left: 0;
    opacity: 0;

    overflow: hidden;
    white-space: nowrap;

    transition:
        max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}


.lobby-toggle-button .lobby-toggle-key {
    max-width: 30px;
    margin-left: 6px;
    opacity: 1;

    overflow: hidden;
    white-space: nowrap;

    transition:
        max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}


.lobby-toggle-button:hover .btn-label,
.lobby-toggle-button:focus-visible .btn-label {
    max-width: 140px;
    margin-left: 8px;
    opacity: 1;
}


.lobby-toggle-button:hover,
.lobby-toggle-button:focus-visible {
    padding: 12px 18px;

    transform: translateY(-2px) scale(1.03);

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(216, 195, 165, 0.55),
        0 0 24px rgba(255, 255, 255, 0.4),
        0 0 34px rgba(216, 195, 165, 0.3);
}


.lobby-toggle-button:hover .lobby-toggle-icon {
    transform: translateY(-2px) rotate(-15deg);
}


.lobby-toggle-button.active {
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(216, 195, 165, 0.55),
        0 0 22px rgba(255, 255, 255, 0.4),
        0 0 32px rgba(216, 195, 165, 0.3);
}


.lobby-toggle-button.active .lobby-toggle-icon {
    transform: rotate(180deg);
}


/* ---- Sliding panel shell ---- */

.lobby-panel {
    position: absolute;
    inset: 0;

    z-index: 13;

    display: flex;

    align-items: stretch;
    justify-content: stretch;

    padding: 32px;

    background: linear-gradient(160deg, #1a140d 0%, #221c12 100%);

    border-left: 1px solid rgba(216, 195, 165, 0.35);
    box-shadow: -24px 0 50px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(216, 195, 165, 0.08);

    transform: translateX(100%);
    opacity: 0;

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease-out;

    pointer-events: none;
}


.lobby-panel.open {
    transform: translateX(0);
    opacity: 1;

    pointer-events: auto;
}


.lobby-panel-inner {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: rgba(216, 195, 165, 0.35) transparent;
}


.lobby-panel-inner::-webkit-scrollbar {
    width: 6px;
}


.lobby-panel-inner::-webkit-scrollbar-track {
    background: transparent;
}


.lobby-panel-inner::-webkit-scrollbar-thumb {
    background: rgba(216, 195, 165, 0.3);
    border-radius: 999px;
}


.lobby-panel-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 195, 165, 0.55);
}


.lobby-panel-header {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 20px;
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(216, 195, 165, 0.22);
}


.lobby-panel-heading {
    margin-right: auto;

    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.5px;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #d8c3a5 25%,
        #f0e6d2 50%,
        #d8c3a5 75%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    text-shadow: 0 0 20px rgba(216, 195, 165, 0.55);
}


.lobby-panel-body {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ---- Two-column split: title/preview/history (left) vs all
   formatting controls - toolbar + workspace (right) ----
   Replaces the old single stacked column so the wide panel actually
   gets used instead of everything running full-width one under the
   other. Left column is intentionally the narrower of the two (the
   title input doesn't need much width to be usable), right column
   gets the rest so Font/Color/Style has real room to breathe. */
.lobby-panel-columns {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 28px;
}


.lobby-col-left,
.lobby-col-right {
    display: flex;
    flex-direction: column;
    gap: 16px;

    min-width: 0;
}


.lobby-col-right {
    padding: 20px;

    background: rgba(216, 195, 165, 0.03);

    border: 1px solid rgba(216, 195, 165, 0.16);
    border-radius: 16px;
}


/* Keep the name editor and its immediate results accessible while
   users scroll through the formatting controls. */
.lobby-editor-sticky {
    position: sticky;
    top: 0;
    z-index: 3;

    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 12px;

    background: linear-gradient(165deg, rgba(34, 28, 18, 0.98), rgba(34, 28, 18, 0.92));
    border: 1px solid rgba(216, 195, 165, 0.16);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}


@media (max-width: 800px) {

    .lobby-panel-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lobby-col-right {
        padding: 16px;
    }

    .lobby-editor-sticky {
        position: static;
    }

}


/* ---- Reset button (panel header) ---- */

.lobby-reset-button {
    flex-shrink: 0;

    padding: 9px 16px;

    background: rgba(216, 195, 165, 0.08);

    border: 1px solid rgba(216, 195, 165, 0.4);
    border-radius: 999px;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;

    cursor: pointer;

    transition: background 0.12s, border-color 0.12s, color 0.12s;
}


.lobby-reset-button:hover {
    background: rgba(216, 195, 165, 0.18);

    border-color: #d8c3a5;

    color: #ffffff;
}


/* ---- Toolbar hint (explains the preselect-then-type workflow) ---- */

.lobby-toolbar-hint {
    color: #8a7a63;

    font-family: var(--font-modern);
    font-size: 10.5px;
    line-height: 1.5;
    text-align: center;
}


/* ---- Toolbar: Font / Color / Style / Copy ----
   Now living inside the (narrower) right column rather than spanning
   the full panel width, so a simple flex row - tools on the left,
   Copy pinned right - reads better than trying to center the tool
   group in a much tighter space. */
.lobby-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.lobby-toolbar-tools {
    display: flex;

    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}


/* Bigger, more generously spaced buttons than before - these are the
   main controls of the whole panel, so they read as substantial
   rather than a cramped row of pills. */
.lobby-editor-tool {
    padding: 14px 30px;

    background: rgba(216, 195, 165, 0.08);

    border: 1px solid rgba(216, 195, 165, 0.4);
    border-radius: 999px;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.2s ease-out;
}


.lobby-editor-tool:hover {
    background: rgba(216, 195, 165, 0.18);

    border-color: #d8c3a5;

    color: #ffffff;

    transform: translateY(-1px);
}


.lobby-editor-tool:active {
    transform: translateY(0);
}


.lobby-editor-tool.active {
    background: rgba(216, 195, 165, 0.24);

    border-color: #f0e6d2;

    color: #ffffff;

    box-shadow: 0 0 16px rgba(216, 195, 165, 0.4);

}


.lobby-editor-tool:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}


.lobby-editor-tool--copy {
    margin-left: auto;

    background: linear-gradient(90deg, #d8c3a5 0%, #8a7050 50%, #d8c3a5 100%);

    border-color: #f0e6d2;

    color: #241a0d;
}


.lobby-editor-tool--copy:hover {
    box-shadow: 0 0 16px rgba(216, 195, 165, 0.45);
}


.lobby-editor-tool--copy.lobby-copy-button--copied {
    background: rgba(123, 230, 168, 0.16);

    border-color: #7be6a8;

    color: #eafff2;
}


/* Give the remaining editor controls the same tactile feedback as the
   main toolbar, without changing their active-state semantics. */
.lobby-reset-button,
.lobby-color-mode-button,
.lobby-font-option,
.lobby-gradient-presets button,
.lobby-gradient-stop,
.lobby-style-option,
.lobby-outline-toggle,
.lobby-outline-join-option {
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.2s ease-out;
}


.lobby-color-mode-button:hover,
.lobby-font-option:hover,
.lobby-gradient-presets button:hover,
.lobby-gradient-stop:hover,
.lobby-style-option:hover,
.lobby-outline-toggle:hover,
.lobby-outline-join-option:hover {
    transform: translateY(-1px);
}


.lobby-reset-button:active,
.lobby-color-mode-button:active,
.lobby-font-option:active,
.lobby-gradient-presets button:active,
.lobby-gradient-stop:active,
.lobby-style-option:active,
.lobby-outline-toggle:active,
.lobby-outline-join-option:active {
    transform: translateY(0);
}


/* ---- Shared tool workspace (Font / Color / Style) ----
   Sits in normal document flow directly under the toolbar, instead
   of floating above the page - opening a tool grows this box and
   pushes everything below it (the title input, tag output, history)
   down, rather than covering it. Collapsed to nothing when no tool
   is selected. */
.lobby-tool-workspace {
    display: grid;
    grid-template-rows: 0fr;
    row-gap: 20px;

    padding: 0 28px;

    background: linear-gradient(165deg, #201810 0%, #241d13 100%);

    border: 1px solid transparent;
    border-radius: 14px;

    box-shadow: none;
    opacity: 0;
    overflow: hidden;

    pointer-events: none;

    transition:
        grid-template-rows 0.32s ease-out,
        padding 0.32s ease-out,
        border-color 0.26s ease,
        box-shadow 0.32s ease,
        opacity 0.26s ease;
}


.lobby-tool-workspace--open {
    grid-template-rows: 1fr;

    padding: 24px 28px;

    border-color: rgba(216, 195, 165, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.18);
    opacity: 1;

    pointer-events: auto;
}


/* ---- Title heading + input ----
   The title input is the thing people are actually here to use, so
   it now carries a small label above it (matching the sidebar's own
   input-label convention) and sits noticeably larger than before -
   it stays the visual center of the panel even though the toolbar
   and workspace now sit above it instead of on top of it. */
.lobby-editor-heading {
    text-align: center;

    color: #a8977d;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


/* Same "transparent textarea over a rendered overlay" trick used
   for letter-accurate click targets: the textarea's own text is
   invisible (only its caret shows), and the overlay div underneath
   renders the styled characters in the exact same box/font so
   clicks line up with the letters people can see. */

.lobby-editor-wrap {
    position: relative;

    min-height: 60px;

    padding: 0 130px 0 20px;

    display: grid;
    grid-template-columns: 1fr;
    align-items: center;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.4);
    border-radius: 16px;

    transition: border-color 0.15s, box-shadow 0.15s;
}


.lobby-editor-wrap .lobby-editor-tool--highlight-all {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;

    padding: 8px 12px;

    font-size: 9px;
    letter-spacing: 0.6px;

    transform: translateY(-50%);
}


.lobby-editor-wrap .lobby-editor-tool--highlight-all:hover {
    transform: translateY(calc(-50% - 1px));
}


.lobby-editor-wrap .lobby-editor-tool--highlight-all:active {
    transform: translateY(-50%);
}


.lobby-editor-sticky .lobby-editor-tool--copy {
    width: 100%;
    margin-left: 0;
}


.lobby-editor-wrap:focus-within {
    border-color: #d8c3a5;
    box-shadow: 0 0 0 4px rgba(216, 195, 165, 0.2);
}


.lobby-editor-input,
.lobby-editor-overlay {
    grid-area: 1 / 1;

    width: 100%;

    padding: 0;
    border: 0;

    font-family: var(--font-modern);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.3;
    white-space: pre;

    overflow-x: auto;
    overflow-y: hidden;
}


.lobby-editor-input {
    background: transparent;

    color: transparent;
    caret-color: #f0e6d2;

    outline: none;
    resize: none;

    height: 32px;

    scrollbar-width: none;
}


.lobby-editor-input::-webkit-scrollbar {
    display: none;
}


.lobby-editor-input::placeholder {
    color: #7a6753;
}


.lobby-editor-overlay {
    pointer-events: none;

    color: #f5efe3;
}


.lobby-editor-wrap--empty .lobby-editor-overlay {
    opacity: 0;
}


.lobby-letter-cell {
    display: inline-block;
}


.lobby-letter-cell--selected {
    background: rgba(216, 195, 165, 0.35);
    border-radius: 3px;
}


.lobby-letter-cell--caret {
    box-shadow: inset 2px 0 0 #f0e6d2;
}


.lobby-letter--bold {
    font-weight: 900;
}


.lobby-letter--italic {
    font-style: italic;
}


.lobby-letter--underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}


.lobby-letter--strike {
    text-decoration: line-through;
}


.lobby-letter--underline.lobby-letter--strike {
    text-decoration: underline line-through;
}


/* ---- Tag output preview + copy history ---- */

.lobby-preview-row {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px 16px;

    background: rgba(216, 195, 165, 0.04);

    border: 1px dashed rgba(216, 195, 165, 0.35);
    border-radius: 10px;
}


.lobby-visual-output {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px 16px;

    background: rgba(216, 195, 165, 0.06);
    border: 1px solid rgba(216, 195, 165, 0.28);
    border-radius: 10px;
}


.lobby-visual-preview {
    min-height: 28px;

    color: #7a6a54;

    font-family: var(--font-modern);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}


.lobby-visual-preview--filled {
    color: #f5efe3;
}


.lobby-preview-label {
    color: #a8977d;

    font-family: var(--font-modern);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.lobby-preview-value {
    color: #7a6a54;

    font-family: var(--font-modern);
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
}


.lobby-preview-value--filled {
    color: #f0e6d2;
}


.lobby-history-heading {
    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.lobby-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.lobby-history-entry {
    padding: 9px 12px;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.18);
    border-radius: 8px;

    color: #f0e6d2;

    font-family: var(--font-modern);
    font-size: 11px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.lobby-empty-row {
    padding: 18px;

    border: 1px dashed rgba(216, 195, 165, 0.3);
    border-radius: 8px;

    color: #a8977d;

    text-align: center;

    font-size: 11px;
}


/* ---- Sub-panels (Font / Color / Style) ----
   These now render inline inside the shared .lobby-tool-workspace
   above, in normal document flow - no absolute positioning, no
   floating box of their own, no independent border/shadow (the
   workspace already provides that). They stack naturally when more
   than one is open. */

.lobby-subpanel {
    display: none;

    min-height: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(-6px);
}


.lobby-subpanel--open {
    display: block;

    animation: lobby-subpanel-enter 0.24s ease-out both;
}


@keyframes lobby-subpanel-enter {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.lobby-subpanel-heading {
    margin-bottom: 12px;

    color: #a8977d;

    font-family: var(--font-modern);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* ---- Font sub-panel ---- */

.lobby-font-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;

    max-height: 320px;
    overflow-y: auto;
}


.lobby-font-option {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 12px 14px;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.25);
    border-radius: 10px;

    color: #d8c3a5;

    cursor: pointer;
    text-align: left;

    transition: background 0.12s, border-color 0.12s, color 0.12s;
}


.lobby-font-option:hover {
    background: rgba(216, 195, 165, 0.14);
    border-color: rgba(216, 195, 165, 0.5);
}


.lobby-font-option[aria-pressed="true"] {
    background: rgba(216, 195, 165, 0.22);
    border-color: #f0e6d2;
    color: #ffffff;
}


.lobby-font-option.is-mixed {
    border-color: rgba(216, 195, 165, 0.6);
    border-style: dashed;
}


.lobby-font-option-name {
    font-family: var(--font-modern);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;

    color: #a8977d;
}


.lobby-font-option-preview {
    font-size: 16px;
}


/* ---- Color sub-panel ---- */

.lobby-color-mode-row {
    display: flex;
    gap: 8px;

    margin-bottom: 16px;
}


.lobby-color-mode-button {
    flex: 1;

    padding: 11px;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.3);
    border-radius: 8px;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;

    cursor: pointer;

    transition: background 0.12s, border-color 0.12s, color 0.12s;
}


.lobby-color-mode-button.is-active {
    background: rgba(216, 195, 165, 0.22);
    border-color: #f0e6d2;
    color: #ffffff;
}


/* The picker remains available in Gradient mode too: select a stop,
   then use the same hue, saturation/value, swatch, or hex controls
   to set that stop's color. */
.lobby-color-panel[data-mode="solid"] .lobby-gradient-only {
    display: none;
}


.lobby-color-picker-main {
    display: flex;
    gap: 16px;

    margin-bottom: 16px;
}


.lobby-sv {
    position: relative;

    flex: 1;
    height: 160px;

    border-radius: 10px;
    overflow: hidden;

    background:
        linear-gradient(to top, #000000, transparent),
        linear-gradient(to right, #ffffff, hsl(var(--lobby-hue, 300), 100%, 50%));

    cursor: crosshair;
}


.lobby-sv-cursor {
    position: absolute;
    top: 0;
    left: 0;

    width: 14px;
    height: 14px;

    border: 2px solid #ffffff;
    border-radius: 50%;

    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);

    transform: translate(-50%, -50%);

    pointer-events: none;
}


.lobby-hue {
    position: relative;

    width: 26px;
    height: 160px;

    border-radius: 10px;
    overflow: hidden;

    background: linear-gradient(
        to bottom,
        #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
    );

    cursor: pointer;
}


.lobby-hue-cursor {
    position: absolute;
    left: 0;

    width: 100%;
    height: 4px;

    background: rgba(255, 255, 255, 0.9);

    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);

    transform: translateY(-50%);

    pointer-events: none;
}


.lobby-color-footer {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}


.lobby-color-swatch {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(216, 195, 165, 0.5);
    border-radius: 50%;

    cursor: pointer;
}


.lobby-color-swatch.is-mixed {
    background:
        conic-gradient(#d8c3a5 0turn, #ffffff 0.25turn, #8a7050 0.5turn, #ffffff 0.75turn, #d8c3a5 1turn);
}


.lobby-hex-input {
    flex: 1;

    padding: 10px 12px;

    background: #14100a;

    border: 1px solid rgba(216, 195, 165, 0.35);
    border-radius: 8px;

    color: #f0e6d2;

    font-family: var(--font-modern);
    font-size: 13px;

    outline: none;
}


.lobby-hex-input:focus {
    border-color: #d8c3a5;
}


.lobby-opacity-row {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}


.lobby-opacity-row label {
    flex-shrink: 0;

    width: 110px;

    color: #a8977d;

    font-family: var(--font-modern);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


.lobby-opacity-row input[type="range"] {
    flex: 1;

    accent-color: #d8c3a5;
}


.lobby-opacity-row span {
    flex-shrink: 0;

    width: 36px;

    text-align: right;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 10px;
    font-weight: 700;
}


.lobby-outline-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.lobby-outline-toggle {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.3);
    border-radius: 999px;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;

    cursor: pointer;

    align-self: flex-start;

    transition: background 0.12s, border-color 0.12s, color 0.12s;
}


.lobby-outline-toggle.active {
    background: rgba(216, 195, 165, 0.22);
    border-color: #f0e6d2;
    color: #ffffff;
}


.lobby-outline-joins {
    display: flex;
    gap: 8px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition: max-height 0.25s ease, opacity 0.2s ease;
}


.lobby-outline-joins--open {
    max-height: 60px;
    opacity: 1;
}


.lobby-outline-join-option {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.3);
    border-radius: 8px;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}


.lobby-outline-join-option[aria-pressed="true"] {
    background: rgba(216, 195, 165, 0.22);
    border-color: #f0e6d2;
    color: #ffffff;
}


/* ---- Gradient presets + pill (only visible in gradient mode) ---- */

.lobby-gradient-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 12px;
}


.lobby-gradient-presets button {
    padding: 9px 14px;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.3);
    border-radius: 999px;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 10.5px;
    font-weight: 700;

    cursor: pointer;
}


.lobby-gradient-presets button:hover {
    background: rgba(216, 195, 165, 0.16);
}


.lobby-gradient-presets button.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


.lobby-gradient-stops {
    display: flex;
    gap: 8px;

    margin-bottom: 12px;
}


.lobby-gradient-stop {
    border-radius: 9px;
    width: 32px;
    height: 32px;
}


.lobby-gradient-stop.is-active {
    outline: 2px solid #f0e6d2;
    outline-offset: 2px;
}


.lobby-color-panel--rainbow .lobby-gradient-stops {
    display: none;
}


.lobby-gradient-pill {
    position: relative;

    height: 26px;

    display: flex;

    border-radius: 999px;
    overflow: visible;
}


.lobby-gradient-slice {
    flex: 1;

    height: 100%;
}


.lobby-gradient-pill .lobby-gradient-slice:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}


.lobby-gradient-pill .lobby-gradient-slice:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}


.lobby-gradient-handle {
    position: absolute;
    top: 50%;

    width: 16px;
    height: 16px;

    background: #ffffff;
    border: 2px solid #241a0d;
    border-radius: 50%;

    transform: translate(-50%, -50%);

    cursor: ew-resize;
}


/* ---- Style sub-panel ---- */

.lobby-style-options {
    display: flex;

    justify-content: center;
    gap: 14px;
}


.lobby-style-option {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(216, 195, 165, 0.06);

    border: 1px solid rgba(216, 195, 165, 0.3);
    border-radius: 14px;

    color: #d8c3a5;

    font-family: var(--font-modern);
    font-size: 20px;
    font-weight: 800;

    cursor: pointer;

    transition: background 0.12s, border-color 0.12s, color 0.12s;
}


.lobby-style-option:hover {
    background: rgba(216, 195, 165, 0.16);
}


.lobby-style-option[aria-pressed="true"] {
    background: rgba(216, 195, 165, 0.24);
    border-color: #f0e6d2;
    color: #ffffff;
}


.lobby-style-option.is-mixed {
    border-style: dashed;
    border-color: rgba(216, 195, 165, 0.6);
}


/* ---- Left panel accent while this panel is open ----
   Declared here since the custom properties are defined globally on
   .left-panel via the @property rules in style.css. Toggled by
   lobby.js watching #lobbyPanel's own "open" class. */
.left-panel.left-panel--lobby {
    --left-panel-grad-a: #1a140d;
    --left-panel-grad-b: #221c12;

    --lp-dim: #5c4a30;
    --lp-soft: #8a7050;
    --lp-mid: #c9ab7d;
    --lp-bright: #f0e6d2;
    --lp-text: #d8c3a5;
    --lp-text-dim: #8a7a63;
    --lp-hover-bg: #3a2f1f;
    --lp-surface: #292116;
    --lp-surface-hover: #463922;
    --lp-selected-a: #5c4a30;
    --lp-selected-b: #c9ab7d;

    border-right-color: rgba(216, 195, 165, 0.5);
    box-shadow: inset -1px 0 26px rgba(216, 195, 165, 0.18);
}


@media (max-width: 900px) {

    .lobby-panel-header {
        gap: 12px;
    }

}


@media (max-width: 700px) {

    .lobby-editor-toolbar {
        gap: 10px;
    }

    .lobby-editor-tool--copy {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    .lobby-tool-workspace--open {
        padding: 18px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .lobby-editor-tool,
    .lobby-reset-button,
    .lobby-color-mode-button,
    .lobby-font-option,
    .lobby-gradient-presets button,
    .lobby-gradient-stop,
    .lobby-style-option,
    .lobby-outline-toggle,
    .lobby-outline-join-option,
    .lobby-tool-workspace {
        animation: none;
        transition-duration: 0.01ms;
    }

    .lobby-subpanel--open {
        animation: none;
        opacity: 1;
        transform: none;
    }

}


@media (max-width: 500px) {

    .lobby-toggle-button {
        padding: 10px 14px;
    }

    .lobby-editor-tool {
        padding: 12px 20px;
    }

    .lobby-editor-input,
    .lobby-editor-overlay {
        font-size: 18px;
    }

    .lobby-editor-wrap {
        min-height: 56px;
        padding: 0 126px 0 16px;
    }

    .lobby-color-picker-main {
        flex-direction: column;
    }

    .lobby-hue {
        width: 100%;
        height: 18px;
    }

    .lobby-hue-cursor {
        top: 0;
        left: 0;

        width: 4px;
        height: 100%;

        transform: translateX(-50%);
    }

    .lobby-font-list {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

}