:root{
    --arc-navy:#071924;
    --arc-navy2:#0b2635;
    --arc-gold:#b98a3c;
    --arc-gold2:#e0bd74;
    --arc-ink:#34281c;
    --arc-paper:#dbc69b;
    --arc-paper2:#c6aa78;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{overflow:hidden;background:#06141e;color:#e8d7ad}
.arc-login-body{font-family:"IM Fell English",Georgia,serif}
.arc-login-atmosphere,.arc-login-map,.arc-login-vignette,.arc-login-dust{position:fixed;inset:0;pointer-events:none}
.arc-login-atmosphere{overflow:hidden;background:radial-gradient(circle at 50% 42%,#15384c 0,#091d2a 44%,#041019 100%)}
.arc-login-map{opacity:.28;background:
    linear-gradient(rgba(5,18,27,.30),rgba(5,18,27,.55)),
    url("../arcanum/backgrounds/arcanum-map-pattern.png?v=1.5.4") center/900px auto;
    transform:scale(1.08);animation:arcMapDrift 24s ease-in-out infinite alternate}
.arc-login-vignette{box-shadow:inset 0 0 180px 70px rgba(0,0,0,.72)}
.arc-login-dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:#d9b260;opacity:.25;animation:arcDust var(--dur) linear infinite;left:var(--x);top:110%}
.arc-login-scene{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2.2rem 2rem 1.4rem;perspective:1800px}
.arc-login-brand{position:absolute;top:3.2vh;text-align:center;z-index:20;transition:opacity .5s ease,transform .7s ease}
.arc-login-brand h1{margin:0;font-family:Cinzel,Georgia,serif;font-size:clamp(2rem,4vw,4.2rem);font-weight:600;letter-spacing:.16em;color:#e2bd72;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.arc-login-subtitle{margin-top:.15rem;font-family:Cinzel,Georgia,serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#bca16c}
.arc-login-brand-rule{width:160px;height:1px;margin:0 auto .65rem;background:linear-gradient(90deg,transparent,#b98a3c,transparent)}
.arc-book-wrap{position:relative;width:min(1040px,82vw);margin-top:4.5rem;transform-style:preserve-3d}
.arc-book-shadow{position:absolute;left:7%;right:7%;bottom:-5%;height:16%;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(22px)}
.arc-book{position:relative;display:grid;grid-template-columns:1fr 14px 1fr;width:100%;aspect-ratio:1.72/1;transform-style:preserve-3d;transform:rotateX(5deg) scale(.94);animation:arcBookArrive 1.1s cubic-bezier(.2,.8,.2,1) both}
.arc-book::before{content:"";position:absolute;inset:-16px -18px -20px;z-index:-4;border-radius:22px 22px 30px 30px;background:linear-gradient(135deg,#121d25,#07121a 35%,#18242a 70%,#060d12);border:2px solid #6e522b;box-shadow:0 24px 60px rgba(0,0,0,.62),inset 0 0 0 2px rgba(203,158,76,.15)}
.arc-book-cover{position:absolute;top:-10px;bottom:-13px;width:51%;z-index:-2;background:linear-gradient(135deg,#101f2a,#07141d);border:1px solid #8d6932}
.arc-book-cover-left{left:-12px;border-radius:18px 3px 6px 22px;transform:rotateZ(-1deg)}
.arc-book-cover-right{right:-12px;border-radius:3px 18px 22px 6px;transform:rotateZ(1deg)}
.arc-page{position:relative;overflow:hidden;background:
    radial-gradient(circle at 40% 28%,rgba(255,249,215,.55),transparent 36%),
    linear-gradient(105deg,#b99a68,#e5d2a5 12%,#d8c08f 78%,#ad8d5d 100%);
    color:var(--arc-ink);box-shadow:inset 0 0 35px rgba(92,58,25,.35)}
.arc-page::before{content:"";position:absolute;inset:0;opacity:.19;background:url("../arcanum/backgrounds/arcanum-map-pattern.png?v=1.5.4") center/650px auto;mix-blend-mode:multiply}
.arc-page-left{border-radius:12px 3px 7px 18px;transform-origin:right center;box-shadow:inset -20px 0 26px rgba(66,39,17,.22),inset 6px 0 15px rgba(255,248,214,.28)}
.arc-page-right{border-radius:3px 12px 18px 7px;transform-origin:left center;box-shadow:inset 20px 0 26px rgba(66,39,17,.22),inset -6px 0 15px rgba(255,248,214,.28)}
.arc-book-gutter{position:relative;z-index:3;background:linear-gradient(90deg,#6e522c,#39271a 48%,#785a31);box-shadow:0 0 22px rgba(37,20,10,.65)}
.arc-page-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8% 9%;text-align:center}
.arc-page-compass{width:27%;max-width:140px;filter:sepia(.8) saturate(.6) contrast(.9);opacity:.73}
.arc-page-brand{margin-top:1.3rem;font-family:Cinzel,Georgia,serif;font-size:clamp(1.6rem,3vw,3rem);letter-spacing:.10em}
.arc-page-rule{width:52%;height:1px;margin:.8rem 0 1.1rem;background:linear-gradient(90deg,transparent,#77562c,transparent)}
.arc-page-quote{font-size:clamp(.85rem,1.25vw,1.1rem);line-height:1.45;font-style:italic}
.arc-page-whisper{max-width:290px;font-size:.82rem;opacity:.72}
.arc-page-ornament{margin-top:1rem;color:#79582d}
.arc-login-form-page{align-items:stretch;text-align:left;padding:8% 11%}
.arc-small-seal{text-align:center;margin-bottom:.6rem}.arc-small-seal img{width:54px;opacity:.72;filter:sepia(.7)}
.arc-form-kicker{text-align:center;margin-bottom:1.4rem;font-family:Cinzel,Georgia,serif;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}
.arc-login-error{margin:-.4rem 0 1rem;padding:.45rem .65rem;border-top:1px solid rgba(127,40,28,.35);border-bottom:1px solid rgba(127,40,28,.35);color:#8c2d24;text-align:center;font-size:.82rem;animation:arcErrorShake .35s ease}
.arc-field{display:block;margin-bottom:1.35rem;font-family:Cinzel,Georgia,serif;font-size:.60rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.arc-ink-line{display:flex;align-items:center;margin-top:.28rem;border-bottom:1px solid rgba(74,49,24,.65)}
.arc-ink-line input{width:100%;padding:.42rem .1rem .35rem;border:0!important;outline:0!important;background:transparent!important;color:#2f251b;font-family:"IM Fell English",Georgia,serif;font-size:1rem;text-transform:none;letter-spacing:.02em;box-shadow:none!important}
.arc-ink-line i{font-style:normal;color:#6c522f}.arc-password-eye{padding:.2rem;border:0;background:transparent;color:#5c4528;cursor:pointer}
.arc-enter-button{position:relative;width:100%;margin-top:.8rem;padding:.85rem 1rem;overflow:hidden;border:1px solid #b18845;background:linear-gradient(#18384b,#0c2433);color:#e6c77e;font-family:Cinzel,Georgia,serif;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(234,197,116,.12),0 6px 16px rgba(30,18,8,.18);transition:transform .15s ease,box-shadow .15s ease,color .15s ease}
.arc-enter-button::before{content:"";position:absolute;inset:5px;border:1px solid rgba(223,181,94,.24)}
.arc-enter-button:hover{transform:translateY(-1px);color:#ffe6a7;box-shadow:inset 0 0 20px rgba(217,166,70,.12),0 8px 18px rgba(30,18,8,.24)}
.arc-enter-button b{position:absolute;right:12px;font-size:.8rem}
.arc-page-edge{position:absolute;bottom:-8px;height:11px;width:48%;z-index:10;background:repeating-linear-gradient(0deg,#a08154 0 1px,#d1b57f 1px 2px);opacity:.75}
.arc-page-edge-left{left:1%;transform:skewX(-12deg)}.arc-page-edge-right{right:1%;transform:skewX(12deg)}
.arc-entry-flash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none;opacity:0;background:rgba(216,196,155,0);transform:scale(.1)}
.arc-entry-sigil{
    width:min(230px,38vw);
    height:auto;
    overflow:visible;
    color:#a9782e;
    filter:drop-shadow(0 0 8px rgba(205,153,58,.72)) drop-shadow(0 0 22px rgba(215,170,72,.38));
}
.arc-login-foot{position:absolute;bottom:1.2rem;font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:#876f49;opacity:.7}
.is-success .arc-enter-button{pointer-events:none}
.is-success .arc-login-brand{opacity:0;transform:translateY(-30px)}
.is-success .arc-book{animation:arcOpenAndZoom 1.75s cubic-bezier(.62,.02,.26,.99) .18s forwards}
.is-success .arc-entry-flash{animation:arcFlash 1.6s ease .72s forwards}
.has-error .arc-book{animation:arcBookArrive 1.1s cubic-bezier(.2,.8,.2,1) both,arcErrorBook .34s ease 1.1s}
@keyframes arcBookArrive{from{opacity:0;transform:translateY(45px) rotateX(13deg) scale(.87)}to{opacity:1;transform:rotateX(5deg) scale(.94)}}
@keyframes arcMapDrift{from{transform:scale(1.08) translate3d(-6px,-4px,0)}to{transform:scale(1.11) translate3d(8px,5px,0)}}
@keyframes arcDust{from{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.28}to{transform:translateY(-125vh) rotate(160deg);opacity:0}}
@keyframes arcErrorShake{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
@keyframes arcErrorBook{0%,100%{transform:rotateX(5deg) translateX(0) scale(.94)}30%{transform:rotateX(5deg) translateX(-7px) scale(.94)}60%{transform:rotateX(5deg) translateX(7px) scale(.94)}}
@keyframes arcOpenAndZoom{
    0%{transform:rotateX(5deg) scale(.94)}
    32%{transform:rotateX(1deg) scale(1.02)}
    100%{transform:rotateX(0) scale(3.6);opacity:.18}
}
@keyframes arcFlash{
    0%{opacity:0;transform:scale(.15);background:rgba(216,196,155,0)}
    28%{opacity:.78;transform:scale(.58);background:rgba(216,196,155,0)}
    62%{opacity:1;transform:scale(1.15);background:rgba(216,196,155,.12)}
    100%{opacity:1;transform:scale(5.8);background:rgba(216,196,155,1)}
}
@media(max-width:800px){
    .arc-login-scene{padding:1rem}
    .arc-login-brand{top:2vh}.arc-login-brand h1{font-size:2rem}
    .arc-book-wrap{width:min(92vw,560px);margin-top:3rem}
    .arc-book{grid-template-columns:0 0 1fr;aspect-ratio:.78/1;transform:rotateX(2deg) scale(.94)}
    .arc-page-left,.arc-book-gutter,.arc-book-cover-left{display:none}
    .arc-page-right{grid-column:3;border-radius:14px}
    .arc-book-cover-right{width:100%;right:-10px}
    .arc-login-form-page{padding:12% 10%}
    .arc-login-foot{display:none}
}
@media(max-height:700px) and (min-width:801px){
    .arc-login-brand{top:1.2vh}.arc-login-brand h1{font-size:2rem}
    .arc-book-wrap{width:min(850px,76vw);margin-top:3.6rem}
}
@media(prefers-reduced-motion:reduce){
    *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ================================================================
   ARCANUM LOGIN CLICK AREA v1.9.1
================================================================ */

/* Tutta la zona del campo è cliccabile, non solo la riga centrale. */
.arc-field{
    cursor:text;
}

.arc-ink-line{
    position:relative;
    min-height:54px;
    padding:0 .15rem;
    cursor:text;
}

.arc-ink-line input{
    position:relative;
    z-index:2;
    min-height:52px;
    padding:.7rem .15rem .55rem!important;
    cursor:text;
}

.arc-ink-line i,
.arc-password-eye{
    position:relative;
    z-index:3;
}

.arc-password-eye{
    min-width:38px;
    min-height:38px;
}

/* Estende il click del label a tutta l'area del campo. */
.arc-field > span:first-child{
    display:block;
    padding-bottom:.15rem;
}


/* ================================================================
   ARCANUM LOGIN CLICK AREA v1.12.2
   Il campo deve essere cliccabile in tutta la riga, non solo sul testo.
================================================================ */

.arc-field{
    position:relative;
    display:block;
    margin-bottom:1.15rem;
    padding:.35rem .25rem .25rem;
    cursor:text;
}

.arc-field > span:first-child{
    position:relative;
    z-index:5;
    display:block;
    padding:.25rem .15rem .1rem;
    cursor:text;
}

.arc-ink-line{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    width:100%;
    min-height:58px;
    margin-top:0;
    padding:0 .35rem;
    cursor:text;
    border-bottom:1px solid rgba(74,49,24,.65);
}

/* L'input occupa fisicamente tutta l'altezza della riga. */
.arc-ink-line input{
    display:block;
    flex:1 1 auto;
    width:100%;
    height:58px;
    min-height:58px;
    margin:0;
    padding:0 .2rem!important;
    line-height:58px;
    cursor:text;
    pointer-events:auto;
}

/* Area di click invisibile estesa sopra/sotto la riga.
   Il JS inoltra il click al relativo input. */
.arc-field::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    cursor:text;
}

.arc-field:focus-within{
    background:rgba(255,247,214,.16);
}

.arc-field:focus-within .arc-ink-line{
    border-bottom-color:#765329;
    box-shadow:0 2px 0 -1px rgba(118,83,41,.28);
}

/* Occhio password deve restare sopra l'hitbox. */
.arc-password-eye{
    position:relative;
    z-index:8;
    flex:0 0 42px;
    width:42px;
    height:42px;
}

@media(max-width:800px){
    .arc-field{
        padding:.5rem .2rem .35rem;
    }

    .arc-ink-line,
    .arc-ink-line input{
        min-height:62px;
        height:62px;
    }

    .arc-ink-line input{
        line-height:62px;
    }
}

.arc-book-phrase-wrap{
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    min-height:88px;
    margin:.15rem 0 .4rem;
    isolation:isolate;
}
.arc-book-phrase{
    position:relative;
    z-index:2;
    max-width:340px;
    margin:0;
    color:#38291b;
    text-align:center;
    text-wrap:balance;
    transition:opacity .65s ease,filter .9s ease,transform .9s ease,color .7s ease;
}
.arc-phrase-ember{
    position:absolute;
    inset:18% 10%;
    z-index:1;
    pointer-events:none;
    opacity:0;
    background:
        radial-gradient(ellipse at 20% 55%,rgba(140,48,15,.22),transparent 22%),
        radial-gradient(ellipse at 58% 45%,rgba(187,83,16,.28),transparent 19%),
        radial-gradient(ellipse at 80% 60%,rgba(107,35,10,.22),transparent 18%);
    filter:blur(7px);
    mix-blend-mode:multiply;
}
.arc-book-phrase-wrap.is-burning .arc-book-phrase{
    opacity:0;
    color:#7d2f15;
    filter:blur(2px) contrast(1.5);
    transform:scale(.985);
    text-shadow:0 0 2px rgba(157,54,15,.75),0 0 9px rgba(172,70,17,.45);
}
.arc-book-phrase-wrap.is-burning .arc-phrase-ember{
    animation:arcPhraseEmber 1.05s ease forwards;
}
.arc-book-phrase-wrap.is-writing .arc-book-phrase{
    animation:arcPhraseWrite 1.25s cubic-bezier(.22,.72,.2,1) both;
}
@keyframes arcPhraseEmber{
    0%{opacity:0;transform:scale(.9)}
    38%{opacity:.9;transform:scale(1)}
    72%{opacity:.45;filter:blur(9px)}
    100%{opacity:0;transform:scale(1.06);filter:blur(12px)}
}
@keyframes arcPhraseWrite{
    0%{opacity:0;filter:blur(2.5px);transform:translateY(2px);color:#8a5c2b;text-shadow:0 0 7px rgba(101,63,24,.24)}
    45%{opacity:.7;filter:blur(.8px)}
    100%{opacity:1;filter:blur(0);transform:none;color:#38291b;text-shadow:none}
}
.arc-login-foot{
    font-family:Cinzel,Georgia,serif;
    font-size:.62rem;
    letter-spacing:.11em;
    text-transform:none;
}
@media(max-width:800px){
    .arc-book-phrase-wrap{min-height:78px}
    .arc-book-phrase{max-width:280px}
}


/* v1.13.1 — username click fix strutturale */
.arc-field-username{
    position:relative;
    z-index:20;
    display:block;
    width:100%;
    cursor:text;
}
.arc-field-username::after{
    display:none!important;
    content:none!important;
}
.arc-field-username .arc-field-label{
    position:relative;
    z-index:21;
    display:block;
    width:100%;
    padding:.35rem .15rem .15rem;
    cursor:text;
    pointer-events:auto;
}
.arc-field-username .arc-ink-line{
    position:relative;
    z-index:21;
    display:flex;
    width:100%;
    min-height:58px;
    cursor:text;
    pointer-events:auto;
}
.arc-field-username #username{
    position:relative;
    z-index:23;
    display:block;
    flex:1 1 auto;
    width:100%;
    height:58px;
    min-height:58px;
    padding:0 .35rem!important;
    cursor:text;
    pointer-events:auto!important;
}
.arc-field-username .arc-field-decoration{
    position:relative;
    z-index:22;
    display:grid;
    place-items:center;
    width:42px;
    pointer-events:none!important;
    user-select:none;
}


/* ================================================================
   ARCANUM USERNAME HIT AREA v1.13.2
   Fix definitivo: l'input copre fisicamente tutta la riga.
================================================================ */

.arc-field-username{
    position:relative;
    z-index:30;
    width:100%;
}

.arc-field-username .arc-ink-line{
    position:relative;
    z-index:31;
    display:block;
    width:100%;
    height:64px;
    min-height:64px;
    padding:0;
    border-bottom:1px solid rgba(74,49,24,.65);
    cursor:text;
}

/*
 * L'input non "sta dentro" la riga:
 * COPRE la riga intera.
 */
.arc-field-username #username{
    position:absolute!important;
    inset:0 46px 0 0!important;
    z-index:34!important;

    display:block!important;
    width:auto!important;
    height:64px!important;
    min-height:64px!important;

    margin:0!important;
    padding:0 .45rem!important;

    border:0!important;
    outline:0!important;
    background:transparent!important;

    line-height:64px!important;
    cursor:text!important;
    pointer-events:auto!important;

    color:#2f251b!important;
    font-family:"IM Fell English",Georgia,serif!important;
    font-size:1rem!important;
    text-transform:none!important;
    letter-spacing:.02em!important;
    box-shadow:none!important;
}

.arc-field-username .arc-field-decoration{
    position:absolute!important;
    right:.15rem;
    top:0;
    z-index:35!important;

    display:grid!important;
    place-items:center!important;

    width:42px!important;
    height:64px!important;

    pointer-events:none!important;
    user-select:none!important;
}

/* Anche la label porta chiaramente al campo. */
.arc-field-username .arc-field-label{
    display:block;
    width:100%;
    min-height:30px;
    padding:.35rem .15rem .15rem;
    cursor:text;
    pointer-events:auto;
}

/* Debug visuale minimo: al focus evidenziamo tutta la riga, non solo il bordo. */
.arc-field-username:focus-within .arc-ink-line{
    background:rgba(255,248,220,.14);
    border-bottom-color:#765329;
    box-shadow:inset 0 0 0 1px rgba(118,83,41,.08);
}

@media(max-width:800px){
    .arc-field-username .arc-ink-line{
        height:68px;
        min-height:68px;
    }

    .arc-field-username #username{
        height:68px!important;
        min-height:68px!important;
        line-height:68px!important;
    }

    .arc-field-username .arc-field-decoration{
        height:68px!important;
    }
}