@import '_content/LondyStance.Shared/LondyStance.Shared.577q9v52up.bundle.scp.css';

/* /Components/Landing.razor.rz.scp.css */
.landing[b-6byfa7nuad]{max-width:70rem;margin:0 auto;color:var(--ls-ink);padding:0 .5rem 3rem}
.landing-hero[b-6byfa7nuad]{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding:2rem 0 4.5rem}
.eyebrow[b-6byfa7nuad]{font-size:.65rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:var(--ls-rose);margin:0 0 1rem}
.landing h1[b-6byfa7nuad]{font-size:clamp(2.8rem,5.6vw,4.8rem);line-height:1.03;letter-spacing:-.065em;margin:0 0 1.4rem}
.hero-description[b-6byfa7nuad]{max-width:29rem;font-size:1.05rem;line-height:1.75;color:var(--ls-muted)}
.hero-actions[b-6byfa7nuad]{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin:1.7rem 0 1rem}
.explore-link[b-6byfa7nuad]{font-size:.85rem;color:var(--ls-ink);text-underline-offset:4px}
.small-note[b-6byfa7nuad]{font-size:.74rem;color:var(--ls-muted)}
.hero-preview[b-6byfa7nuad]{padding:1.3rem;background:#f3e7e4;border:1px solid #ead5d1;border-radius:1.6rem;box-shadow:0 16px 45px #572b4210;transform:rotate(2deg)}
.preview-top[b-6byfa7nuad]{display:flex;justify-content:space-between;gap:.6rem;font-size:.67rem;color:#805663}
.preview-top>span:first-child[b-6byfa7nuad]{font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.preview-prompt[b-6byfa7nuad]{text-align:center;font-size:1.3rem;font-weight:700;letter-spacing:-.03em;margin:1.4rem 0}
.sketches[b-6byfa7nuad]{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.sketch[b-6byfa7nuad]{background:#fffdfb;border-radius:.75rem;padding:.8rem .6rem;transform:rotate(-4deg);box-shadow:0 4px 12px #572b4209}
.sketch.second[b-6byfa7nuad]{transform:rotate(3deg)}
.sketch>span[b-6byfa7nuad]{display:block;font-size:.75rem;font-weight:650;text-align:center}
.sketch svg[b-6byfa7nuad]{width:100%;display:block}
.sketch small[b-6byfa7nuad]{display:block;font-size:.6rem;text-align:center;color:#796878}
.preview-bottom[b-6byfa7nuad]{text-align:center;font-size:.75rem;margin-top:1.4rem;line-height:1.5;color:#805663}
.preview-bottom>span[b-6byfa7nuad]{color:var(--ls-rose);font-size:1rem}
.example-label[b-6byfa7nuad]{text-align:center;font-size:.58rem;color:#805663;margin:.6rem 0 0}
.landing h2[b-6byfa7nuad]{font-size:clamp(1.8rem,3.5vw,2.7rem);letter-spacing:-.045em;line-height:1.15;margin:0 0 1rem}
.games-section[b-6byfa7nuad]{scroll-margin-top:2rem;padding:1rem 0 4.5rem}
.games-section>.eyebrow[b-6byfa7nuad],.games-section>h2[b-6byfa7nuad],.section-intro[b-6byfa7nuad]{text-align:center}
.section-intro[b-6byfa7nuad]{color:var(--ls-muted);font-size:.95rem;line-height:1.6;margin:0 0 2rem}
.landing-games[b-6byfa7nuad]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.landing-games>a[b-6byfa7nuad]{display:block;min-width:0;text-decoration:none;color:inherit;border:1px solid var(--ls-line);border-radius:1.3rem;overflow:hidden;background:var(--ls-surface);box-shadow:0 5px 20px #1f1b2606;transition:transform .15s ease,border-color .15s ease}
.landing a:focus-visible[b-6byfa7nuad],.landing summary:focus-visible[b-6byfa7nuad]{outline:3px solid var(--ls-rose);outline-offset:4px}
.together-strip[b-6byfa7nuad]{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;background:var(--ls-rose-tint);border-radius:1.6rem;padding:2.6rem;margin-bottom:4.5rem}
.together-strip>.eyebrow[b-6byfa7nuad]{grid-column:1/-1}
.together-strip h2[b-6byfa7nuad]{margin:0}
.together-strip em[b-6byfa7nuad]{font-style:normal;color:var(--ls-rose)}
.together-strip>div p[b-6byfa7nuad]{font-size:.95rem;line-height:1.8;color:var(--ls-ink-soft);margin:0 0 .8rem}
.how-section[b-6byfa7nuad]{margin-bottom:4.5rem}
.landing-steps[b-6byfa7nuad]{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin:2rem 0 0;padding:0}
.landing-steps li>span[b-6byfa7nuad]{font-size:.8rem;color:var(--ls-rose);font-weight:700}
.landing-steps h3[b-6byfa7nuad]{font-size:1.1rem;letter-spacing:-.02em;margin:.7rem 0}
.landing-steps p[b-6byfa7nuad]{font-size:.9rem;line-height:1.7;color:var(--ls-muted);margin:0}
.landing-faq[b-6byfa7nuad]{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;margin-bottom:4rem}
.faq-list[b-6byfa7nuad]{border-top:1px solid var(--ls-line)}
.faq-list details[b-6byfa7nuad]{border-bottom:1px solid var(--ls-line)}
.faq-list summary[b-6byfa7nuad]{font-size:.92rem;font-weight:600;padding:1.1rem 0;cursor:pointer}
.faq-list details p[b-6byfa7nuad]{font-size:.88rem;line-height:1.7;color:var(--ls-muted);margin:0 0 1.1rem}
.landing-close[b-6byfa7nuad]{text-align:center;padding:2.5rem 1rem;background:radial-gradient(ellipse at center,var(--ls-rose-tint),transparent 70%)}
.landing-close>span[b-6byfa7nuad]{font-size:2rem;color:var(--ls-rose)}
.landing-close h2[b-6byfa7nuad]{margin:.7rem 0 1.5rem}
.landing-close p[b-6byfa7nuad]{font-size:.8rem;color:var(--ls-muted);margin-top:1rem}
@media(hover:hover){
    .landing-games>a:hover[b-6byfa7nuad]{transform:translateY(-4px);border-color:var(--ls-rose)}
}
@media(max-width:800px){
    .landing-hero[b-6byfa7nuad]{gap:1.5rem}
    .landing-games[b-6byfa7nuad]{gap:.7rem}
    .together-strip[b-6byfa7nuad]{padding:1.7rem;gap:1.5rem}
    .landing-faq[b-6byfa7nuad]{gap:1.5rem}
}
@media(max-width:600px){
    .landing[b-6byfa7nuad]{padding:0 .25rem 2rem}
    .landing-hero[b-6byfa7nuad]{grid-template-columns:1fr;padding:1rem 0 3rem;gap:1.6rem}
    .landing h1[b-6byfa7nuad]{font-size:3.25rem}
    .hero-description[b-6byfa7nuad]{font-size:.95rem}
    .hero-preview[b-6byfa7nuad]{margin:.3rem .3rem;transform:rotate(1deg)}
    .hero-actions[b-6byfa7nuad]{gap:1rem}
    .landing-games[b-6byfa7nuad],.landing-steps[b-6byfa7nuad],.together-strip[b-6byfa7nuad],.landing-faq[b-6byfa7nuad]{grid-template-columns:1fr}
    .landing-games[b-6byfa7nuad]{gap:1rem}
    .together-strip[b-6byfa7nuad]{padding:1.6rem;gap:.7rem;margin-bottom:3rem}
    .landing-steps[b-6byfa7nuad]{gap:1.5rem}
    .how-section[b-6byfa7nuad],.games-section[b-6byfa7nuad]{margin-bottom:0;padding-bottom:3rem}
    .landing-faq[b-6byfa7nuad]{gap:.8rem}
    .landing-close[b-6byfa7nuad]{padding:1.5rem 0}
    .landing-close .ls-btn[b-6byfa7nuad]{white-space:normal;text-align:center}
    .hero-preview .preview-top[b-6byfa7nuad]{font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){
    .landing-games>a[b-6byfa7nuad]{transition:none;transform:none}
}
/* The three paper previews share one grid cell, so rotating never moves the page. */
londy-game-preview[b-6byfa7nuad]{display:block;min-width:0}
.preview-slides[b-6byfa7nuad]{display:grid}
.preview-slides>[data-slide][b-6byfa7nuad]{grid-area:1/1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.preview-slides>[hidden][b-6byfa7nuad]{display:flex!important;visibility:hidden;pointer-events:none}
.word-preview[b-6byfa7nuad]{background:#e7eee6;border-color:#d6e1d3}
.mines-preview[b-6byfa7nuad]{background:#e6edf2;border-color:#d6e1e9}
.word-paper[b-6byfa7nuad],.mine-paper[b-6byfa7nuad]{background:#fffdfb;border-radius:.8rem;padding:1.1rem;transform:rotate(-3deg);box-shadow:0 4px 12px #572b4209}
.paper-label[b-6byfa7nuad]{display:block;text-align:center;font-size:.72rem;color:#68796b}
.sample-word[b-6byfa7nuad]{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;max-width:16rem;margin:1rem auto}
.sample-word>*[b-6byfa7nuad]{display:grid;place-items:center;aspect-ratio:1;font-size:1.3rem;font-weight:700;font-style:normal;border-radius:.3rem;background:#d9d5da;color:#49424c}
.sample-word>i:first-child[b-6byfa7nuad],.sample-word>b[b-6byfa7nuad]{background:#678e79;color:white}
.sample-word>i:last-of-type[b-6byfa7nuad]{background:#d6ad5d;color:white}
.word-paper small[b-6byfa7nuad]{display:block;text-align:center;font-size:.7rem;color:#68796b}
.word-paper small span[b-6byfa7nuad]{color:var(--ls-rose);padding:0 .3rem}
.mine-paper[b-6byfa7nuad]{display:flex;align-items:center;gap:1rem}
.sample-mines[b-6byfa7nuad]{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;flex:1}
.sample-mines span[b-6byfa7nuad]{display:grid;place-items:center;aspect-ratio:1;border-radius:.3rem;background:#edf3f5;color:#54718a;font-weight:700}
.sample-mines .covered[b-6byfa7nuad]{background:#c6d7df;box-shadow:inset 0 -3px #b5c8d2}
.sample-mines .flag[b-6byfa7nuad]{color:var(--ls-rose)}
.mine-note[b-6byfa7nuad]{flex:1}
.mine-note>span[b-6byfa7nuad]{color:var(--ls-rose);letter-spacing:.1em}
.mine-note strong[b-6byfa7nuad]{display:block;font-size:1.15rem;margin:.8rem 0;line-height:1.4}
.mine-note small[b-6byfa7nuad]{font-size:.7rem;color:var(--ls-muted)}
.preview-controls[b-6byfa7nuad]{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.3rem}
.preview-controls>div[b-6byfa7nuad]{display:flex}
.preview-controls button[b-6byfa7nuad]{border:0;background:none;cursor:pointer;min-width:32px;min-height:32px;color:var(--ls-muted);font:inherit;font-size:.7rem}
.preview-controls [data-pick][b-6byfa7nuad]::after{content:'';display:block;width:8px;height:8px;border-radius:50%;background:#d9cdd3;margin:auto}
.preview-controls [aria-pressed=true][b-6byfa7nuad]::after{background:var(--ls-rose);width:20px;border-radius:8px}
.preview-controls button:focus-visible[b-6byfa7nuad]{outline:2px solid var(--ls-rose);outline-offset:2px}
.landing-steps[b-6byfa7nuad]{gap:1rem}
.landing-steps li[b-6byfa7nuad]{padding:1.6rem;border:1px solid #e0e7de;border-radius:1.2rem;background:#f0f4ed}
.landing-steps li:nth-child(2)[b-6byfa7nuad]{background:#fbefed;border-color:#efdedb}
.landing-steps li:nth-child(3)[b-6byfa7nuad]{background:#eff2f8;border-color:#dfe4ed}
.landing-steps li>span[b-6byfa7nuad]{display:flex;align-items:center;justify-content:space-between}
.landing-steps i[b-6byfa7nuad]{font-style:normal;font-size:1.7rem;line-height:1}
.landing-steps h3[b-6byfa7nuad]{margin:1.3rem 0 .7rem}
.landing-note[b-6byfa7nuad]{display:flex;align-items:flex-start;gap:1.5rem;max-width:45rem;margin:0 auto 4rem;padding:1.8rem 1rem;border-top:1px solid var(--ls-line);border-bottom:1px solid var(--ls-line)}
.landing-note>span[b-6byfa7nuad]{font-family:Georgia,serif;font-size:5rem;line-height:1;color:var(--ls-rose)}
.note-quote[b-6byfa7nuad]{font-family:Georgia,serif;font-size:1.55rem;line-height:1.55;margin:.5rem 0 1rem}
.note-signature[b-6byfa7nuad]{font-size:.8rem;color:var(--ls-muted);margin:0}
.note-signature span[b-6byfa7nuad]{color:var(--ls-rose)}
.landing-close[b-6byfa7nuad]{padding:1.2rem 1rem .5rem}
.landing[b-6byfa7nuad]{padding-bottom:0}
.landing-close p[b-6byfa7nuad]{margin-bottom:0}
@media(max-width:600px){
    .landing-steps li[b-6byfa7nuad]{padding:1.25rem}
    .landing-steps h3[b-6byfa7nuad]{margin-top:.7rem}
    .landing-note[b-6byfa7nuad]{gap:.6rem;padding:1.3rem .3rem;margin-bottom:3rem}
    .note-quote[b-6byfa7nuad]{font-size:1.3rem}
    .landing-close[b-6byfa7nuad]{padding:1rem 0 0}
    .landing[b-6byfa7nuad]{padding-bottom:0}
    .mine-paper[b-6byfa7nuad]{padding:.9rem;gap:.7rem}
}
.landing-note .founders-photo[b-6byfa7nuad]{width:7rem;height:7rem;object-fit:cover;flex-shrink:0;border-radius:1.2rem;transform:rotate(-3deg);box-shadow:0 5px 18px #572b4214}
@media(max-width:600px){
    .landing-note[b-6byfa7nuad]{flex-direction:column;gap:1.2rem}
    .landing-note .founders-photo[b-6byfa7nuad]{width:5rem;height:5rem;border-radius:1rem}
}

.kart-preview[b-6byfa7nuad]{background:#e4eeee;border-color:#cddfdf}
.kart-paper[b-6byfa7nuad]{padding:.8rem;background:#fffdfb;border-radius:.9rem;transform:rotate(-3deg);box-shadow:0 4px 12px #572b4209}
.kart-postcard[b-6byfa7nuad]{display:block;width:100%;height:auto;border-radius:.6rem}
.kart-caption[b-6byfa7nuad]{display:flex;justify-content:center;gap:1.4rem;margin-top:.7rem;color:#666071;font-size:.72rem}
.kart-caption span[b-6byfa7nuad]{display:flex;align-items:center;gap:.35rem}
.kart-caption i[b-6byfa7nuad]{width:8px;height:8px;border-radius:50%;background:#bc4d75}
.kart-caption span:last-child i[b-6byfa7nuad]{background:#78618b}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-dayo3v44ix] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* One centred column for every page. DuelBoard sets its own narrower max-width
   inside this, so the board stays readable while wider pages can breathe. */
.content[b-dayo3v44ix] {
    --chat-header-offset: calc(3.5rem + env(safe-area-inset-top));
    flex: 1;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-bottom: max(4rem, calc(2rem + env(safe-area-inset-bottom)));
}

.app-footer-brand[b-dayo3v44ix] {
    color: var(--ls-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.app-footer[b-dayo3v44ix] {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ls-line);
    font-size: .78rem;
}

    .app-footer a[b-dayo3v44ix] {
        color: var(--ls-muted);
        text-decoration: none;
    }

        .app-footer a:hover[b-dayo3v44ix] {
            color: var(--ls-rose);
        }

@media (max-width: 640.98px) {
    .content[b-dayo3v44ix] {
        padding: 1.25rem 1rem 3rem;
    }
}

#blazor-error-ui[b-dayo3v44ix] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-dayo3v44ix] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.app-footer[b-dayo3v44ix] { flex-wrap: wrap; row-gap: .7rem; }
.app-footer-contact[b-dayo3v44ix] { flex-basis: 100%; text-align: center; }

/* Chat owns its vertical spacing; :has also follows enhanced navigation. */
.page[b-dayo3v44ix]  .content:has(.chat-shell) {
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.page[b-dayo3v44ix]  .content:has(.chat-shell) + .app-footer {
    display: none;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Palette shared with DuelBoard so the chrome and the game look like one product. */
.topbar[b-7j5a6aterm] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #1f1b26;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
    padding-top: env(safe-area-inset-top);
}

.topbar-inner[b-7j5a6aterm] {
    position: relative;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
}

.brand[b-7j5a6aterm] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
    text-decoration: none;
}

    .brand-mark[b-7j5a6aterm] {
        border-radius: .3rem;
        flex: 0 0 auto;
    }

    .brand-name span[b-7j5a6aterm] {
        color: #b8456b;
    }

    .brand:hover[b-7j5a6aterm] {
        color: #fff;
    }

.nav-links[b-7j5a6aterm] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.nav-form[b-7j5a6aterm] {
    margin: 0;
}

/* ::deep is required because NavLink is a child component — the <a> it renders
   doesn't carry this component's scope attribute. Moving the attribute to the
   ancestor also makes this rule catch the logout <button> in our own markup,
   so one rule covers both. */
.nav-links[b-7j5a6aterm]  .nav-link {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 .8rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Order below is load-bearing: .active, .nav-cta and :hover all resolve to the
   same specificity, so hover is written last to win. Add a variant in the wrong
   place and it will silently do nothing. */
.nav-links[b-7j5a6aterm]  a.active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.nav-links[b-7j5a6aterm]  a.nav-cta {
    color: #fff;
    background: #b8456b;
}

.nav-links[b-7j5a6aterm]  .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.nav-links[b-7j5a6aterm]  a.nav-cta:hover {
    background: #a03c5e;
}

.nav-links[b-7j5a6aterm]  .nav-link:focus-visible {
    outline: 2px solid #b8456b;
    outline-offset: 2px;
}

/* --- mobile ------------------------------------------------------------- */

.nav-toggle[b-7j5a6aterm] {
    display: none;
}

.nav-burger[b-7j5a6aterm] {
    display: none;
    width: 2.5rem;
    height: 2.25rem;
    border-radius: .4rem;
    border: 1px solid rgba(255, 255, 255, .18);
    cursor: pointer;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e") no-repeat center/1.3rem;
}

@media (max-width: 640.98px) {
    .nav-burger[b-7j5a6aterm] {
        display: block;
    }

    .nav-links[b-7j5a6aterm] {
        display: none;
        position: absolute;
        top: 3.5rem;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        padding: .6rem 1rem 1rem;
        background: #1f1b26;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    /* Two classes beats one, so this wins over the .nav-links rule above. */
    .nav-toggle:checked ~ .nav-links[b-7j5a6aterm] {
        display: flex;
    }

    .nav-links[b-7j5a6aterm]  .nav-link {
        height: 2.75rem;
        justify-content: flex-start;
    }
}