/* ════════════════════════════════════════════════════════════════════
   TITLE-SCREEN.CSS — the join, name and lobby screens of
   "Escape Your Office". Paper cards with a hard orange shadow over the
   real (generated) office, framed by SENTINEL lockdown tape.
   Scoped to .eyo-title so the operator console (/#admin) stays neutral.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@500;600;700&display=swap');

.auth-overlay.eyo-title {
    background-color: var(--ink);
    background-image: url('../assets/room_office.jpg');
    background-size: auto 100%;
    background-position: 0% 50%;
    background-repeat: repeat-x;
    animation: eyo-pan 160s linear infinite alternate;
    font-family: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
}
/* Warm ink veil over the office, so the card reads first. */
.auth-overlay.eyo-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 23, 25, 0.62);
    pointer-events: none;
}
@keyframes eyo-pan {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

/* ── Lockdown tape ──────────────────────────────────────────────── */
.eyo-tape {
    position: absolute;
    left: -5%;
    width: 110%;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--ui-font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    white-space: nowrap;
    overflow: hidden;
    padding: 9px 0;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    z-index: 1;
    pointer-events: none;
}
.eyo-tape-top { top: 4%; transform: rotate(-2.5deg); }
.eyo-tape-bottom { bottom: 5%; transform: rotate(1.8deg); background: var(--lilac); }
.eyo-tape span {
    display: inline-block;
    padding-right: 0;
    animation: eyo-crawl 40s linear infinite;
}
.eyo-tape-bottom span { animation-direction: reverse; }
@keyframes eyo-crawl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Card ───────────────────────────────────────────────────────── */
.eyo-title .auth-card {
    position: relative;
    z-index: 2;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 0;
    box-shadow: 10px 10px 0 var(--accent);
    padding: 34px 40px 30px;
    width: min(540px, 88vw);
    box-sizing: border-box;
    text-align: left;
}
.eyo-kicker {
    margin: 0 0 14px;
    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.eyo-kicker::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e8264f;
    animation: eyo-blink 1.2s steps(2, start) infinite;
}
@keyframes eyo-blink { to { visibility: hidden; } }

.eyo-title .auth-title.eyo-wordmark {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: clamp(38px, 7.5vw, 58px);
    line-height: 0.92;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--ink);
}
.eyo-wordmark em {
    font-style: normal;
    color: var(--accent);
    -webkit-text-stroke: 0;
}
.eyo-sub {
    margin: 0 0 18px;
}
.eyo-sub span {
    display: inline-block;
    background: var(--lilac);
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 4px 12px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
}
.eyo-title .auth-body {
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 18px;
    color: var(--ink);
}
.eyo-title .auth-subtitle {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
}

/* Inputs and buttons: flat, square, ink borders. */
.eyo-title .auth-input {
    border: 3px solid var(--ink);
    border-radius: 0;
    background: #fffdf8;
    color: var(--ink);
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 18px;
    padding: 13px 16px;
}
.eyo-title .auth-input::placeholder { color: #8c8285; font-weight: 500; }
.eyo-title .auth-input:focus { border-color: var(--accent); outline: none; }
.eyo-title .auth-btn {
    width: 100%;
    margin-top: 14px;
    background: var(--accent);
    color: var(--ink);
    border: 3px solid var(--ink);
    border-radius: 0;
    box-shadow: 5px 5px 0 var(--ink);
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 20px;
    transition: transform 0.06s, box-shadow 0.06s;
}
.eyo-title .auth-btn:hover:not(:disabled) {
    background: var(--accent);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
}
.eyo-title .auth-btn:active:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--ink);
}
.eyo-title .auth-btn:disabled {
    background: #d9d1c6;
    color: #6f6669;
    box-shadow: 5px 5px 0 #b3aaa0;
    border-color: #6f6669;
    cursor: not-allowed;
}

/* Players in the lobby: name tags. */
.eyo-title .player-list { display: flex; flex-wrap: wrap; gap: 8px; }
.eyo-title .player-entry {
    background: #fffdf8;
    border: 2px solid var(--ink);
    border-radius: 0;
    color: var(--ink);
    font-weight: 700;
    padding: 6px 12px;
    margin: 0;
}

/* Facts row under the button. */
.eyo-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 2px dashed rgba(28, 23, 25, 0.35);
    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4a4245;
}

/* "LOCKED" rubber stamp on the card corner. */
.eyo-stamp {
    position: absolute;
    top: 18px;
    right: -18px;
    transform: rotate(9deg);
    border: 3px solid #e8264f;
    color: #e8264f;
    background: rgba(245, 240, 230, 0.9);
    font-family: 'Archivo Black', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    padding: 4px 10px;
    pointer-events: none;
}

/* Link to the custom-room product, under the card. */
.eyo-custom-link {
    position: relative;
    z-index: 2;
    max-width: min(540px, 88vw);
    color: var(--paper);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
}
.eyo-custom-link b { color: var(--lilac); }
.eyo-custom-link:hover b { text-decoration: underline; }

/* Invite panel (invite.js) inside the lobby card. */
.eyo-title .sg-invite-label { font-weight: 700; color: var(--ink); }
.eyo-title .sg-invite .auth-btn { width: auto; box-shadow: 3px 3px 0 var(--ink); font-size: 14px; }

@media (max-width: 560px) {
    .eyo-title .auth-card { padding: 26px 22px 22px; box-shadow: 7px 7px 0 var(--accent); }
    .eyo-stamp { right: -6px; top: -16px; font-size: 14px; }
    .eyo-tape { font-size: 11px; padding: 7px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-overlay.eyo-title, .eyo-tape span, .eyo-kicker::before { animation: none; }
}

/* Name tags replace the comma-separated list of the base skin. */
.eyo-title .player-list { justify-content: flex-start; }
.eyo-title .player-list .player-entry + .player-entry::before { content: none; }
.eyo-title .player-list .player-you { color: #7a6f72; font-weight: 600; }