/* Lobby: the mini-game picker and the post-creation handout page. */

.lobby {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}

/* Front-page masthead. This page hides the shared .hud-header, so the wordmark is the
   top of the document and carries the extra breathing room the bar used to provide. */
.lobby__brand {
    text-align: center;
    margin-bottom: 2.5rem;
}

.lobby__wordmark {
    margin: 0;
    color: var(--hud-green);
    /* Clamped rather than fixed: a monospace wordmark this long overflows a narrow phone
       at any size that looks right on a desktop. The vw term is what keeps it on one
       line; raise the ceiling, not the middle value, if it should be bigger. */
    font-size: clamp(1.9rem, 9vw, 4.5rem);
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(57, 255, 106, 0.45);
    overflow-wrap: break-word;
}

.lobby__federation {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--hud-text-dim);
}

.lobby__federation a {
    color: var(--hud-amber);
}

/* Rides alongside the wordmark, on its baseline, so it sits at the bottom of the big
   lettering. A fixed 0.7rem rather than an em of the h1, so it stays small however far
   the clamped wordmark scales. */
.lobby__wordmark-version {
    margin-left: 0.6rem;
    font-size: 0.7rem;
    font-weight: normal;
    letter-spacing: 0.12em;
    vertical-align: baseline;
    color: var(--hud-text-dim);
    text-shadow: none;
    white-space: nowrap;
}


.lobby__title {
    color: var(--hud-green);
    letter-spacing: 0.2em;
    font-size: 1rem;
    text-align: center;
}

.lobby__intro {
    text-align: center;
    color: var(--hud-text-dim);
    font-size: 0.8rem;
    margin-bottom: 2rem;
}

.lobby__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--hud-panel);
    border: 1px solid var(--hud-panel-border);
    color: var(--hud-text);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.game-card:hover {
    border-color: var(--hud-green-dim);
    box-shadow: 0 0 12px rgba(57, 255, 106, 0.12);
}

.game-card__icon {
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--hud-green);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.game-card__label {
    margin: 0;
    color: var(--hud-green);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
}

.game-card__tagline {
    margin: 0;
    font-size: 0.75rem;
    color: var(--hud-text-dim);
    line-height: 1.5;
}

.game-card__cta {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--hud-amber);
    letter-spacing: 0.15em;
}

.lobby__resume-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lobby__resume-form input {
    width: 6rem;
    text-align: center;
    letter-spacing: 0.3em;
}

/* A mistyped code is answered here, in place, rather than by navigating to an error
   page — see events.views.event_resume_view. */
.lobby__resume-error {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--hud-amber);
}

/* Post-creation handout: code, QR and the two links. */
.created {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.created__title {
    color: var(--hud-green);
    letter-spacing: 0.2em;
    font-size: 1rem;
    text-align: center;
}

.created__code-panel {
    text-align: center;
    margin-bottom: 1.5rem;
}

.created__code {
    font-size: 3.5rem;
    letter-spacing: 0.35em;
    color: var(--hud-green);
    text-shadow: 0 0 16px rgba(57, 255, 106, 0.4);
    margin: 0.25rem 0 0.75rem;
    /* letter-spacing adds a trailing gap that visually offsets the number */
    text-indent: 0.35em;
}

.created__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

.created__qr {
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 0.75rem auto;
    background: var(--hud-bg);
}

.created__url {
    font-size: 0.75rem;
    word-break: break-all;
}

.created__url a {
    color: var(--hud-amber);
}

@media print {
    .hud-scanlines, .hud-header, .created__cols section:last-child { display: none; }
    .created__qr { max-width: 320px; }
}

/* --- DEBUG-only live games panel ------------------------------------------------
   Collapsed by default via <details>, so no JavaScript and no stored state. Sits in the
   normal lobby column and borrows the standard panel chrome, so it reads as part of the
   page rather than as a bolt-on. */
.debug-panel {
    /* margin-top because it follows the resume panel directly: without it the two
       borders sit flush and read as one box with a divider through it. */
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
    /* On a narrow screen the nowrap timestamps and actions are wider than the panel.
       Scroll inside it rather than letting the table widen the whole page, which would
       give the front page a horizontal scrollbar on a phone. */
    overflow-x: auto;
}

/* Made to match .hud-panel h2 (console.css), which is what the "already running an
   event?" heading above it uses — same amber, size and tracking, same rule underneath. */
.debug-panel__summary {
    cursor: pointer;
    color: var(--hud-amber);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    border-bottom: 1px solid var(--hud-panel-border);
    padding-bottom: 0.5rem;
    list-style-position: inside;
}

.debug-panel[open] .debug-panel__summary {
    margin-bottom: 1rem;
}

.debug-panel__code {
    color: var(--hud-green);
    letter-spacing: 0.15em;
}

/* Only the timestamps and the actions are held on one line. Letting the game and event
   names wrap is what buys the room to fit all six columns in the lobby's width. */
.debug-panel .hud-table td.debug-panel__nowrap,
.debug-panel .hud-table th {
    white-space: nowrap;
}

.debug-panel .hud-table th,
.debug-panel .hud-table td {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
}

.debug-panel .hud-table__actions {
    gap: 0.5rem;
    white-space: nowrap;
}

.debug-panel__build {
    margin-bottom: 0;
    letter-spacing: 0.12em;
}