/* ==========================================================================
   The /link page - Steam <-> Discord account linking.

   Deliberately self-contained rather than built on style.css or mobile.css.
   Those two are the site's and the phone app's design systems, each large
   and each calibrated for its own viewport; this is one small page with two
   squares on it, shown on both. Borrowing the palette is worth it, dragging
   in either token scale is not - so the values below are literal, and the
   layout is a single flex row that wraps to a column when there is no room.
   ========================================================================== */

:root {
    --l-bg: #121212;
    --l-panel: #171717;
    --l-panel-2: #1a1a1a;
    --l-border: rgba(255, 255, 255, 0.08);
    --l-text: #ffffff;
    --l-dim: #888888;
    --l-dimmer: #5c5c5c;
    --l-accent: #cd412b;
    --l-green: #22c55e;
    --l-discord: #5865f2;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100dvh;
    background: var(--l-bg);
    color: var(--l-text);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

#lBgLayer {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("/images/background_pripyat_2752x1536.png");
    background-size: cover;
    background-position: center;
}

/* Sits over the photo so text stays readable regardless of what part of
   the image happens to be behind it. */
#lBgLayer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.82);
}

.l-card {
    width: 100%;
    max-width: 44rem;
    background: rgba(23, 23, 23, 0.86);
    border: 1px solid var(--l-border);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.l-home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    color: var(--l-dim);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.l-home:hover { color: var(--l-text); }

.l-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-align: center;
}

.l-subtitle {
    margin: 0.4rem 0 1.75rem;
    text-align: center;
    color: var(--l-dim);
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- The two squares ---------------------------------------------------- */

.l-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.l-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 0;
    min-width: 0;
}

/* Square by construction, not by a fixed pixel size: it tracks the column
   width so the pair stays balanced whether they sit side by side or
   stacked. */
.l-square {
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 1;
    border-radius: 1rem;
    border: 2px solid var(--l-border);
    background: var(--l-panel-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s, background 0.2s;
    text-decoration: none;
}

/* The square is the primary control on this page, so it has to look like
   one. Keyed off [href] because the element loses its href once that side
   is done - at which point it is a portrait, not a button. */
.l-square[href] {
    cursor: pointer;
}

.l-square[href]:hover {
    background: #222222;
    border-color: rgba(255, 255, 255, 0.22);
}

.l-square[href]:active { transform: scale(0.97); }

.l-side[data-service="steam"] .l-square[href]:hover { border-color: #66c0f4; }
.l-side[data-service="discord"] .l-square[href]:hover { border-color: var(--l-discord); }

/* The placeholder logo floats in the middle of the square; the avatar that
   replaces it fills the square edge to edge. */
.l-square .l-logo {
    width: 55%;
    height: 55%;
    display: block;
    object-fit: contain;
}

.l-square .l-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0.85rem;
}

.l-side[data-state="done"] .l-square {
    border-color: var(--l-green);
}

.l-side[data-service="discord"] .l-square .l-logo { color: var(--l-discord); }

.l-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--l-dimmer);
    text-align: center;
}

.l-side[data-state="done"] .l-label { color: var(--l-text); }

.l-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--l-dim);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* The chain between the squares: grey while one side is missing, lit once
   both are in. */
.l-chain {
    flex: 0 0 auto;
    color: var(--l-dimmer);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2.5rem;
    transition: color 0.2s;
}

.l-chain svg { width: 1.75rem; height: 1.75rem; }
.l-chain[data-linked="true"] { color: var(--l-green); }

/* --- Buttons and messages ----------------------------------------------- */

.l-actions {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.l-btn {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.85rem 1.1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--l-text);
    background: var(--l-panel-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    text-decoration: none;
}

.l-btn:active { transform: scale(0.98); }
.l-btn:disabled { opacity: 0.45; cursor: default; }
.l-btn:disabled:active { transform: none; }

.l-btn--steam { background: #2a475e; }
.l-btn--steam:hover:not(:disabled) { background: #33566f; }
.l-btn--discord { background: var(--l-discord); }
.l-btn--discord:hover:not(:disabled) { background: #4752c4; }
.l-btn--ghost { background: transparent; border-color: var(--l-border); color: var(--l-dim); }
.l-btn--ghost:hover:not(:disabled) { color: var(--l-text); border-color: rgba(255, 255, 255, 0.2); }
.l-btn--danger { background: transparent; border-color: rgba(239, 68, 68, 0.35); color: #ef4444; }
.l-btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); }

.l-note {
    margin-top: 1.25rem;
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

.l-note[data-tone="ok"] { background: rgba(34, 197, 94, 0.12); color: #86efac; }
.l-note[data-tone="warn"] { background: rgba(251, 191, 36, 0.12); color: #fcd34d; }
.l-note[data-tone="error"] { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.l-note[data-tone="info"] { background: rgba(255, 255, 255, 0.05); color: var(--l-dim); }

.l-hidden { display: none !important; }

/* --- Unlink confirmation ------------------------------------------------ */

.l-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.l-modal__box {
    width: 100%;
    max-width: 26rem;
    background: var(--l-panel);
    border: 1px solid var(--l-border);
    border-radius: 1rem;
    padding: 1.5rem;
}

.l-modal__title {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.l-modal__text {
    margin: 0 0 1.1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--l-dim);
}

/* The checkbox is the confirmation, not a formality: the danger button
   below stays disabled until it is ticked. */
.l-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--l-text);
    cursor: pointer;
}

.l-check input {
    margin: 0.15rem 0 0;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--l-accent);
    flex: 0 0 auto;
}

.l-modal__actions {
    display: flex;
    gap: 0.6rem;
}

.l-modal__actions .l-btn { flex: 1 1 0; }

/* Phones and anything else too narrow for two squares side by side: stack
   them and turn the chain a quarter turn so it still reads as a join. */
@media (max-width: 30rem) {
    .l-card { padding: 1.5rem 1.15rem; }
    .l-title { font-size: 1.35rem; }
    .l-pair { flex-direction: column; gap: 0.85rem; }
    .l-side { width: 100%; }
    .l-square { max-width: 8.5rem; }
    .l-chain { padding: 0; transform: rotate(90deg); }
}