/* THE LOUNGE — page framing (the HOLLER ROLLER pattern).
 * The stage fills the viewport under the fixed site banner; the canvas sits
 * in it at a crisp integer scale. The blurb and the tuning panel live below
 * the fold.
 */

html:has(.lounge-page),
body:has(.lounge-page) {
    overscroll-behavior: none;
    background: #07060d;
}

html.lounge-playing,
html.lounge-playing body {
    overflow: hidden;
}

/* while a game is on, the paddle is the pointer everywhere on the page */
html.lounge-playing,
html.lounge-playing * {
    cursor: none;
}

.lounge-page {
    background: #07060d;
    width: 100%;
    margin: 0;
    padding: 0 0 2rem;
}

.lounge-stage {
    display: block;
    width: 100%;
    height: calc(100vh - var(--banner-h, 56px));
    height: calc(100dvh - var(--banner-h, 56px));
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: none;
}

.lounge-canvas {
    display: block;
    touch-action: none;
    overscroll-behavior: none;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    background: #07060d;
}

.lounge-canvas:focus-visible {
    outline: 1px dashed #6f5d95;
    outline-offset: -1px;
}

.lounge-placard {
    max-width: min(26rem, calc(100% - 2rem));
    margin: 1.5rem auto 0;
    padding: 0.6rem 1rem 0.5rem;
    border: 1px solid #2c2340;
    border-radius: 2px;
    box-shadow: inset 0 0 0 3px #07060d, inset 0 0 0 4px #1b1528;
}

.lounge-blurb {
    margin: 0;
    color: #6f5d95;
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: center;
}

.lounge-blurb em {
    color: #a63a70;
    font-style: normal;
}

.lounge-build {
    margin: 0.4rem 0 0;
    color: #453567;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.lounge-build-sep {
    margin: 0 0.4em;
}

/* the tuning panel: the original's Paddle, Droid and Blocker menus as sliders */
.lounge-panel {
    max-width: min(44rem, calc(100% - 2rem));
    margin: 1.5rem auto 0;
    color: #8a7f9a;
    font: 0.78rem/1.5 ui-monospace, Menlo, monospace;
}

.lounge-panel summary {
    cursor: pointer;
    color: #b0a78d;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lounge-panel-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 0.8rem;
}

.lounge-panel h3 {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    color: #ff4fa8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lounge-panel label {
    display: grid;
    grid-template-columns: 9.5rem 1fr 2.4rem;
    align-items: center;
    gap: 0.5rem;
}

.lounge-panel input[type=range] {
    width: 100%;
    accent-color: #ff4fa8;
}

.lounge-panel select,
.lounge-panel button {
    font: inherit;
    background: #100e1e;
    color: #e8dfc8;
    border: 1px solid #2c2347;
    padding: 2px 6px;
}

.lounge-panel output {
    text-align: right;
    color: #e8dfc8;
    font-variant-numeric: tabular-nums;
}

.lounge-panel-note {
    margin: 0.8rem 0 0;
    color: #453567;
}

/* who you play: one button a regular, the current one lit */
.lounge-opponents button {
    margin: 0 0.4rem 0.4rem 0;
    letter-spacing: 0.06em;
}

.lounge-opponents button.is-on {
    border-color: #ff4fa8;
    color: #ff4fa8;
}