/* ===========================================================================
   Yugara cinematic landing — a full-screen title overlay shown in FRONT of the
   BrowserQuest intro. A looping pixel-art video (the YUGARA title card) carries
   the forged logo + scene; this layer adds the glowing START GAME button, the
   secondary menu, atmosphere (vignette + embers) and corner chrome.

   Buttons route into the UNCHANGED app flow (login -> creator -> game); see
   client/js/landing.js. Nothing here touches main.css / yugara.css.
   Loaded after the other sheets so its #landing scope wins cleanly.
   =========================================================================== */

#landing {
    position:fixed; inset:0; z-index:900;
    overflow-y:auto; overflow-x:hidden;         /* scroll page: hero + sections below */
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
    background:#05060a;
    font-family:'Alagard','GraphicPixel', sans-serif;
    opacity:1; transition:opacity .45s ease;
}
/* Chunky square pixel scrollbar for the scroll page - same language as the
   gwent/chat/guild bars in main.css. The native grey slab floating over the
   cinematic hero read as a broken webpage. */
#landing::-webkit-scrollbar { width:13px; }
#landing::-webkit-scrollbar-track { background:#0d0a05; box-shadow:inset 0 0 0 1px #000, inset 0 0 0 2px #332612; }
#landing::-webkit-scrollbar-thumb {
    background:#a97f3f; border:2px solid #0d0a05;   /* hard 2px bevel = the 9-slice kit's light/shadow steps */
    box-shadow:inset 2px 2px 0 #d9b56a, inset -2px -2px 0 #5d4220; }
#landing::-webkit-scrollbar-thumb:hover { background:#c49551; box-shadow:inset 2px 2px 0 #ecd08d, inset -2px -2px 0 #6b4c25; }
/* Firefox only: guarded because Chrome 121+ prefers these standard props over
   ::-webkit-scrollbar styling and would downgrade the bar to a thin native one. */
@supports not selector(::-webkit-scrollbar) {
    #landing { scrollbar-width:thin; scrollbar-color:#a97f3f #0d0a05; }
}

/* Fade-out when entering the login/creator/game. JS adds .landing-hidden, then
   sets display:none after the transition so the video stops compositing. */
#landing.landing-hidden { opacity:0; pointer-events:none; }
/* Hard guarantee: never visible once the game has started. */
body.started #landing { display:none !important; }
/* Returning sessions bypass all first-run ceremony while the signed resume token
   is being checked. On success body.started takes over; on expiry App removes this
   class and reveals the normal wallet panel over the static title backdrop. */
body.session-resume #landing,
body.session-resume #parchment,
body.session-resume #logo { display:none !important; }

/* --- auto-resume loading indicator (#resume-loading, index.html) ---------------
   The session-resume rule above blanks the whole page while the signed token is
   verified and the world loads; this pane fills that window so returning players
   never stare at a black void. Driven entirely by the existing body classes:
   session-resume shows it, started (or the class's removal on expiry) hides it. */
#resume-loading { display:none; }
body.session-resume #resume-loading {
    display:flex; position:fixed; inset:0; z-index:901;
    flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:#05060a;
    font-family:'Alagard','GraphicPixel', sans-serif;
}
body.started #resume-loading { display:none !important; }
.resume-emblem {
    color:#d9b56a; font-size:30px;
    text-shadow:0 0 18px rgba(217,181,106,.35);
    animation:resume-pulse 1.6s ease-in-out infinite;
}
.resume-text { color:#cbb27a; font-size:22px; letter-spacing:1px; }
.resume-dots span { opacity:0; animation:resume-dot 1.5s infinite; }
.resume-dots span:nth-child(2) { animation-delay:.25s; }
.resume-dots span:nth-child(3) { animation-delay:.5s; }
@keyframes resume-pulse { 0%,100% { transform:scale(1); opacity:.7; } 50% { transform:scale(1.2); opacity:1; } }
@keyframes resume-dot   { 0% { opacity:0; } 30% { opacity:1; } 60%,100% { opacity:0; } }

/* --- looping background video (poster shows if autoplay/codec fails) --- */
#landing-video {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    z-index:0; pointer-events:none; background:#05060a;
}

/* --- atmospheric grade: deepen edges, seat the menu, hide any baked footer text --- */
#landing-vignette {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 38%, rgba(0,0,0,0) 38%, rgba(3,5,12,.55) 78%, rgba(3,5,12,.92) 100%),
      linear-gradient(180deg, rgba(4,6,14,.55) 0%, rgba(4,6,14,0) 24%, rgba(4,6,14,0) 46%, rgba(4,6,14,.82) 66%, rgba(3,4,10,.97) 84%, rgba(3,4,10,1) 100%);
}

/* --- forged YUGARA logo (transparent PNG; alpha = luminance, so glow + shine
       hug the letters with no box). Composited normally over the scene. --- */
#landing-logo {
    position:absolute; top:5%; left:50%; transform:translateX(-50%);
    width:min(66vw, 940px); height:auto; z-index:2; pointer-events:auto; cursor:default;
    /* always-on: a slow radiating cyan glow pulse so the title feels alive */
    animation:landing-logo-breathe 4.5s ease-in-out infinite;
    transition:transform .3s ease;
}
@keyframes landing-logo-breathe {
    0%,100% { filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(120,200,255,.22)); }
    50%     { filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(120,200,255,.5)); }
}
/* hover: brighter radiating burst + a tiny lift */
#landing-logo:hover {
    transform:translateX(-50%) scale(1.015);
    animation:landing-logo-radiate 1.4s ease-in-out infinite;
}
@keyframes landing-logo-radiate {
    0%,100% { filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(140,210,255,.55)) drop-shadow(0 0 40px rgba(120,200,255,.3)); }
    50%     { filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(170,225,255,.9)) drop-shadow(0 0 70px rgba(120,200,255,.55)); }
}

/* --- shine sweep on hover, masked to the logo's alpha so the streak only crosses
       the metal letters. A sibling of the logo so it composites cleanly. --- */
#landing-shine {
    position:absolute; top:5%; left:50%; transform:translateX(-50%);
    width:min(66vw, 940px); aspect-ratio:1120 / 330; z-index:3; pointer-events:none;
    mix-blend-mode:screen; opacity:0;
    background:linear-gradient(105deg, transparent 38%, rgba(190,230,255,.95) 50%, transparent 62%);
    background-size:260% 100%; background-position:160% 0;
    -webkit-mask:url('../img/landing/logo.png?v=3') center/contain no-repeat;
            mask:url('../img/landing/logo.png?v=3') center/contain no-repeat;
}
#landing-logo:hover ~ #landing-shine { animation:landing-shine-sweep 0.9s ease-in-out; }
@keyframes landing-shine-sweep {
    0%   { opacity:0; background-position:160% 0; }
    12%  { opacity:1; }
    100% { opacity:0; background-position:-160% 0; }
}

/* --- floating embers (built in landing.js) --- */
.landing-ember {
    position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%; z-index:2;
    background:radial-gradient(circle,#ffd27a,#ff7a2a 60%,rgba(255,90,20,0) 72%);
    box-shadow:0 0 6px 1px rgba(255,150,60,.7); opacity:0;
    animation:landing-rise linear infinite;
}
@keyframes landing-rise {
    0%   { transform:translateY(0) translateX(0) scale(1); opacity:0; }
    12%  { opacity:.95; }
    80%  { opacity:.8; }
    100% { transform:translateY(-78vh) translateX(var(--dx,14px)) scale(.4); opacity:0; }
}

/* --- centre menu --- */
#landing-menu {
    position:relative; z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:16px;
    margin-bottom:6vh; text-align:center;
}
#landing-start {
    position:relative; padding:16px 56px; cursor:pointer; user-select:none;
    font-family:'Alagard','GraphicPixel', serif; font-size:26px; letter-spacing:6px;
    text-transform:uppercase; color:#f4ead2;
    background:linear-gradient(180deg,#3a2f22 0%,#241a10 55%,#140d07 100%);
    border:2px solid #c9a24b; border-radius:12px;
    text-shadow:0 2px 4px rgba(0,0,0,.85);
    box-shadow:
      inset 0 2px 0 rgba(255,230,170,.35), inset 0 -3px 8px rgba(0,0,0,.6),
      0 0 0 4px rgba(0,0,0,.25), 0 0 24px 3px rgba(120,200,255,.32), 0 10px 26px rgba(0,0,0,.6);
    transition:transform .12s, box-shadow .2s, filter .2s; animation:landing-breathe 3.2s ease-in-out infinite;
}
.start-ico {
    width:30px; height:30px; margin-right:14px; vertical-align:-8px;
    image-rendering:pixelated; image-rendering:-moz-crisp-edges;
    filter:drop-shadow(0 0 7px rgba(120,200,255,.7)) drop-shadow(0 2px 2px rgba(0,0,0,.8));
    transition:transform .14s ease, filter .2s;
}
#landing-start:hover .start-ico {
    transform:scale(1.14) rotate(-8deg);
    filter:drop-shadow(0 0 13px rgba(170,225,255,.95)) drop-shadow(0 2px 2px rgba(0,0,0,.8));
}
#landing-start:hover {
    transform:translateY(-2px) scale(1.02); filter:brightness(1.08);
    box-shadow:inset 0 2px 0 rgba(255,230,170,.45), inset 0 -3px 8px rgba(0,0,0,.6),
      0 0 0 4px rgba(0,0,0,.25), 0 0 40px 8px rgba(120,200,255,.6), 0 12px 30px rgba(0,0,0,.7);
}
#landing-start:active { transform:translateY(0) scale(.99); }
@keyframes landing-breathe {
    0%,100% { box-shadow:inset 0 2px 0 rgba(255,230,170,.35),inset 0 -3px 8px rgba(0,0,0,.6),0 0 0 4px rgba(0,0,0,.25),0 0 22px 3px rgba(120,200,255,.30),0 10px 26px rgba(0,0,0,.6); }
    50%     { box-shadow:inset 0 2px 0 rgba(255,230,170,.40),inset 0 -3px 8px rgba(0,0,0,.6),0 0 0 4px rgba(0,0,0,.25),0 0 34px 7px rgba(120,200,255,.55),0 10px 26px rgba(0,0,0,.6); }
}

#landing-subrow { display:flex; gap:22px; align-items:center; }
.landing-link {
    color:#cbb489; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
    text-shadow:0 1px 3px rgba(0,0,0,.9); transition:color .15s, text-shadow .15s;
}
.landing-link:hover { color:#ffe9bf; text-shadow:0 0 12px rgba(255,210,130,.7); }
.landing-sep { color:#5c4a2c; font-size:11px; }

/* --- corners --- */
#landing-ver {
    position:absolute; right:18px; bottom:14px; z-index:3;
    color:#7d6c4f; font-size:11px; letter-spacing:2px;
}
#landing-foot {
    position:absolute; left:50%; bottom:13px; transform:translateX(-50%); z-index:3;
    color:#6f6044; font-size:10px; letter-spacing:2px; white-space:nowrap;
}

/* small screens: shrink the button so it never overflows */
@media (max-width:560px) {
    #landing-start { font-size:20px; letter-spacing:4px; padding:13px 36px; }
    #landing-subrow { gap:14px; }
    .landing-link { font-size:12px; letter-spacing:1px; }
    #landing-foot { font-size:9px; }
}

/* ===========================================================================
   PRE-GAME LOGIN OVER THE TITLE VIDEO (2026-07-09, founder: "instead of black
   screen maybe the video in landing page"). landing.js swaps .landing-hidden
   for .landing-backdrop when routing into login/creator: the video + vignette
   keep playing UNDER the parchment, chrome hides, clicks pass through.
   body.started still hard-removes the whole layer.
   The scroll art itself becomes a dark medieval panel (scoped to .intro so the
   in-game death/credits parchment is untouched).
   =========================================================================== */
#landing.landing-backdrop { opacity:1; pointer-events:none; }
#landing.landing-backdrop #landing-logo,
#landing.landing-backdrop #landing-menu,
#landing.landing-backdrop #landing-shine,
#landing.landing-backdrop .landing-ember { display:none; }

/* The parchment only rises above the (z:900) video layer once landing.js enters
   backdrop mode (body.landing-backdrop) — at the TITLE screen it stays hidden
   behind the video exactly like before. In backdrop mode it becomes a fixed
   full-viewport layer with the panel dead-centered, and the legacy scroll-unroll
   keyframes are disabled (they made the solid panel do a weird "rolling" swap). */
body.landing-backdrop:not(.game) #parchment {
    position:fixed; left:0 !important; top:0 !important; right:0; bottom:0; z-index:920;
    /* neutralize the legacy scroll geometry (per-breakpoint width/height/margins)
       so the panel centers against the real viewport */
    width:auto !important; height:auto !important; margin:0 !important;
}
body.landing-backdrop:not(.game) .parchment-middle { top:50%; transform:translateY(-50%); }
body.landing-backdrop:not(.game) .parchment-left,
body.landing-backdrop:not(.game) .parchment-right,
body.landing-backdrop:not(.game) .animate .parchment-left,
body.landing-backdrop:not(.game) .animate .parchment-right { animation:none !important; }
body.landing-backdrop:not(.game) .animate .parchment-middle { animation:none !important; }

/* scroll art -> dark medieval panel in the game's 9-slice frame */
.intro .parchment-left, .intro .parchment-right { display:none; }
.intro .parchment-middle {
    height:auto !important; min-height:420px;
    padding:26px 46px 34px; 
    background:rgba(15,11,7,.90) !important;
    border:15px solid transparent;
    border-image:url(../img/ui/panel3.png) 40 fill / 20px / 0 stretch;
    box-sizing:border-box;
    box-shadow:0 18px 70px rgba(0,0,0,.8);
    image-rendering:pixelated;
}
.intro #parchment { color:#f0e6d2; }
.intro #parchment h1 {
    color:#e8b873; font-size:34px; letter-spacing:3px; text-shadow:0 3px 0 #000;
}
.intro #loadcharacter h1:after, .intro #createcharacter h1:after {
    content:''; display:block; height:24px; margin:6px auto 0;
    background:url(../img/ui/divider3.png) center/contain no-repeat;
}
/* the beige spritesheet flourishes fight the dark panel — the letterspaced
   Alagard title carries the ornament instead */
.intro #parchment .left-ornament, .intro #parchment .right-ornament { display:none; }
/* terms/confirmation prose is body text, not a title */
.intro #confirmation h1 { font-size:17px; letter-spacing:.5px; color:#d8c49a; line-height:1.7; }

.intro #parchment input {
    background:none; border:12px solid transparent; border-radius:0;
    border-image:url(../img/ui/input3.png) 16 fill / 12px stretch;
    color:#f0e6d2; font-size:20px; padding:6px 8px; animation:none; image-rendering:auto;
}
.intro #parchment input:focus { filter:brightness(1.18); }
.intro #parchment input.field-error { filter:brightness(1.1) sepia(1) hue-rotate(-40deg) saturate(2); }
.intro #parchment ::-webkit-input-placeholder { color:#8f8268; }

/* primary actions = the game's gold button; secondary = dark bronze */
.intro #parchment .play .link, .intro #parchment #continue .link {
    display:inline-block; cursor:pointer; padding:8px 34px; font-size:21px;
    color:#1a1206; letter-spacing:1px; background:none; border:13px solid transparent;
    border-image:url(../img/ui/btn-gold3.png) 20 fill / 13px stretch;
    image-rendering:auto; box-shadow:0 3px 8px rgba(0,0,0,.55); text-shadow:none;
}
.intro #parchment .play .link:hover, .intro #parchment #continue .link:hover { filter:brightness(1.1); }
.intro #parchment .play .link:active, .intro #parchment #continue .link:active { transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #000; }
.intro #parchment #create-new .link, .intro #parchment #cancel .link,
.intro #parchment #wallet-account-switch .link,
.intro #parchment #email-door .link, .intro #parchment #email-back .link, .intro #parchment #email-resend .link,
.intro #parchment #cc-code-resend .link, .intro #parchment #cc-code-back .link {
    display:inline-block; cursor:pointer; padding:5px 20px; font-size:15px;
    color:#e8d8b8; letter-spacing:.5px; background:none; border:11px solid transparent;
    border-image:url(../img/ui/btn-dark3.png) 20 fill / 11px stretch; image-rendering:auto;
}
.intro #parchment #create-new .link:hover, .intro #parchment #cancel .link:hover,
.intro #parchment #wallet-account-switch .link:hover,
.intro #parchment #email-door .link:hover, .intro #parchment #email-back .link:hover,
.intro #parchment #email-resend .link:hover,
.intro #parchment #cc-code-resend .link:hover, .intro #parchment #cc-code-back .link:hover { filter:brightness(1.2); }
.intro #parchment .wallet-hint { margin:14px auto 6px; max-width:520px; color:#b9aa8d; font-size:14px; line-height:1.45; }
.intro #parchment #wallet-account-switch { margin-top:8px; }
.intro #parchment .wallet-existing-form { display:none; }
.intro #parchment #createcharacter.existing-account .wallet-create-form { display:none; }
.intro #parchment #createcharacter.existing-account .wallet-existing-form { display:block; }
.intro #parchment .wallet-terms { margin:10px auto 0; max-width:520px; color:#8f8268; font-size:12px; line-height:1.4; }
.intro #parchment #createcharacter.existing-account .wallet-terms { display:none; }
.intro #parchment .validation-summary { color:#e07a5f; font-size:14px; }

/* ---- Sign in with Email (plans/email-login-resend.md) ----
   The email flow lives INSIDE #loadcharacter behind .email-mode, so the legacy
   parchment class machinery never learns a new article id. .code-sent reveals
   the code input once EMAIL_SENT arrives. */
.intro #parchment #loadcharacter .email-flow { display:none; }
.intro #parchment #loadcharacter.email-mode .entry-doors { display:none; }
.intro #parchment #loadcharacter.email-mode .email-flow { display:block; }
/* email door/back/resend links share the dark-bronze secondary button rule above */
.intro #parchment #email-door { margin-top:10px; }
.intro #parchment .email-form input,
.intro #parchment .cc-verify-form input { display:block; width:300px; max-width:82%; margin:12px auto 0; text-align:center; }
.intro #parchment #emailcodeinput,
.intro #parchment .cc-verify-form input { letter-spacing:10px; font-size:24px; }
.intro #parchment #emailcodeinput { display:none; }
.intro #parchment #loadcharacter.code-sent #emailcodeinput { display:block; }
.intro #parchment #email-resend { display:none; margin-top:8px; }
.intro #parchment #loadcharacter.code-sent #email-resend { display:inline-block; }
.intro #parchment #email-back { margin-top:8px; }
.intro #parchment #loadcharacter.code-sent #loginemailinput { opacity:.55; pointer-events:none; }

/* Email-identity account setup: the code already authenticated the player, so
   creation is name-only (the link-existing form keeps its password). */
.intro #parchment #createcharacter.email-identity #pwinput,
.intro #parchment #createcharacter.email-identity #pwinput2,
.intro #parchment #createcharacter.email-identity #emailinput { display:none; }

/* Wallet signup email verification (.verify-email swaps the create form for the
   code entry until EMAIL_VERIFIED arrives; wallet signups REQUIRE a proven email). */
.intro #parchment #createcharacter .cc-verify-form,
.intro #parchment #createcharacter #cc-verify-hint,
.intro #parchment #createcharacter #cc-code-resend,
.intro #parchment #createcharacter #cc-code-back { display:none; }
.intro #parchment #createcharacter.verify-email .wallet-create-form,
.intro #parchment #createcharacter.verify-email .wallet-existing-form,
.intro #parchment #createcharacter.verify-email #wallet-account-hint,
.intro #parchment #createcharacter.verify-email #wallet-account-switch,
.intro #parchment #createcharacter.verify-email .wallet-terms { display:none; }
.intro #parchment #createcharacter.verify-email .cc-verify-form { display:block; }
.intro #parchment #createcharacter.verify-email #cc-verify-hint { display:block; }
.intro #parchment #createcharacter.verify-email #cc-code-resend { display:inline-block; margin-top:8px; }
.intro #parchment #createcharacter.verify-email #cc-code-back { display:inline-block; margin-top:8px; }
/* the code input itself shares the .email-form input sizing rules above */

/* In-game Settings: the Link Wallet action sits beside Sign Out (email players
   without a wallet only; app.js toggles it). Mirrors #settings-signout, in the
   panel's neutral bronze instead of the sign-out red. */
#settings-actions #settings-linkwallet { display:inline-block; margin-right:14px; cursor:pointer;
    font-family:'Alagard','GraphicPixel',sans-serif; color:#f0e6d2; font-size:13px; letter-spacing:1px;
    padding:6px 24px; user-select:none; background:rgba(70,56,34,.55); border:1px solid #7a6a3a; border-radius:3px; }
#settings-actions #settings-linkwallet:hover { background:rgba(120,96,52,.72); border-color:#ccb877; color:#fff; }
#settings-actions #settings-linkwallet.cant { opacity:.6; cursor:default; }