/* ======================================================
NIGHTANGELS - VASSAGO.CSS
Univers : Vassago / Secrets / Reliques
====================================================== */

body[data-universe="vassago"]{

--accent-color:#d34821;

--theme-bg:#050507;

--theme-primary:#d34821;

--theme-text:#ece7df;

--theme-glow:
rgba(211,72,33,.45);

--hero-image:
url('/images/background/vassago.webp');

--hero-image-mobile:
url('/images/background/vassago-mobile.webp');

--archive-image:
url('/images/background/vassago-corridor.webp');

--archive-image-mobile:
url('/images/background/vassago-corridor-mobile.webp');

color:var(--theme-text);

overflow-x:hidden;

display:flex;

flex-direction:column;

min-height:100vh;

}

/* ======================================================
BACKGROUND SYSTEM
====================================================== */

body[data-universe="vassago"]::before{

content:'';

position:fixed;

inset:0;

z-index:-10;

pointer-events:none;

background-image:

var(--hero-image);

background-size:cover;

background-position:center top;

background-repeat:no-repeat;

opacity:.95;

}

body[data-universe="vassago"]::after{

content:'';

position:fixed;

inset:0;

z-index:-9;

pointer-events:none;

background:

linear-gradient(

to bottom,

transparent,

rgba(0,0,0,.82)

);

}

/* ======================================================
PAGE LAYOUT
====================================================== */

.vassago-page{

position:relative;

display:flex;

flex-direction:column;

align-items:center;

padding:

105px
20px
20px;

min-height:auto;

}

.vassago-page::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

linear-gradient(

transparent 35%,

rgba(0,0,0,.15) 50%,

rgba(0,0,0,.85) 100%

);

}

/* ======================================================
CONVERSATION UI
====================================================== */

.conversation-ui{

position:relative;

z-index:2;

width:min(
1300px,
100%
);

padding:10px;

display:flex;

flex-direction:column;

flex:1;

}

/* ======================================================
CHAT
====================================================== */

#chat{

max-height:260px;

overflow-y:auto;

padding:

14px
26px;

border-radius:24px;

background:

rgba(
0,
0,
0,
.35
);

backdrop-filter:

blur(10px);

-webkit-backdrop-filter:

blur(10px);

}

/* ======================================================
MESSAGES
====================================================== */

.message{

margin:

10px 0;

line-height:1.45;

}

.message.pnj{

color:#ffceb3;

text-shadow:

0 0 10px

rgba(
255,
100,
30,
.15
);

}

.message.player{

color:#dddddd;

}

#pnj-name{

color:

var(--theme-primary);

text-shadow:

0 0 15px

rgba(
211,
72,
33,
.35
);

}

/* ======================================================
CHOICES / BUTTONS
====================================================== */

#choices{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:10px;

}

#choices button,
#unlock-btn,
#leave-vassago{

background:

rgba(
15,
15,
15,
.8
);

border:

1px solid

rgba(
211,
72,
33,
.45
);

padding:

12px
20px;

color:white;

cursor:pointer;

transition:.3s;

}

#choices button:hover,
#unlock-btn:hover,
#leave-vassago:hover{

transform:

scale(1.03);

box-shadow:

0 0 20px

rgba(
211,
72,
33,
.35
);

}

/* ======================================================
INPUTS
====================================================== */

#unlock-container{

display:none;

margin:10px;

}

#unlock-code{

padding:12px;

background:

rgba(
0,
0,
0,
.6
);

border:

1px solid

rgba(
255,
120,
40,
.3
);

color:white;

}

/* ======================================================
ENDING SCREEN
====================================================== */

#ending-screen{

display:none;

width:100%;

max-width:1300px;

text-align:center;

animation:fadeIn 2s ease;

}

.ending-text{

font-size:.95rem;

letter-spacing:2px;

text-transform:uppercase;

opacity:.8;

margin-bottom:20px;

}

/* ======================================================
ARCHIVE / PARCHEMIN PAGE
====================================================== */

.vassago-archive-page{

position:relative;

display:flex;

justify-content:center;

align-items:center;

padding:

120px
20px
40px;

min-height:100vh;

overflow:hidden;

}

.vassago-archive-page::before{

content:"";

position:fixed;

inset:0;

z-index:-10;

background-image:

var(--archive-image);

background-size:cover;

background-position:center;

background-repeat:no-repeat;

opacity:.95;

}

.vassago-archive-page::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

rgba(0,0,0,.25),

rgba(0,0,0,.65),

rgba(0,0,0,.9)

);

}

/* ======================================================
LETTER BLOCK
====================================================== */

.vassago-lore-container{

position:relative;

z-index:2;

width:min(
900px,
100%
);

padding:

40px
30px;

background:

linear-gradient(

180deg,

rgba(10,10,10,.88),

rgba(20,10,10,.92)

);

border:

1px solid

rgba(180,40,40,.25);

border-radius:16px;

backdrop-filter:

blur(8px);

box-shadow:

0 0 40px

rgba(0,0,0,.6);

}

.vassago-lore-intro{

text-align:center;

font-size:1.05rem;

margin-bottom:30px;

opacity:.9;

}

.vassago-lore-title{

text-align:center;

font-size:2rem;

margin-bottom:40px;

color:

var(--theme-primary);

}

.vassago-lore-text{

line-height:1.9;

font-size:1.08rem;

white-space:pre-line;

overflow-wrap:break-word;

}

.vassago-lore-actions{

margin-top:50px;

display:flex;

justify-content:center;

}

/* ======================================================
FOOTER
====================================================== */

body[data-universe="vassago"] footer{

margin-top:auto;

position:relative;

z-index:2;

}

/* ======================================================
MOBILE
====================================================== */

@media(max-width:768px){

body[data-universe="vassago"]{

--hero-image:

var(--hero-image-mobile);

--archive-image:

var(--archive-image-mobile);

}

.vassago-page{

padding:

280px
10px
0;

}

.conversation-ui{

max-height:320px;

}

#chat{

max-height:200px;

padding-bottom:40px;

}

.message{

font-size:

clamp(
0.95rem,
2.8vw,
1.1rem
);

line-height:1.3;

margin:

12px 0;

}

.vassago-archive-page{

padding:

130px
12px
20px;

}

.vassago-lore-container{

padding:

24px
20px;

border-radius:12px;

}

.vassago-lore-intro{

font-size:.95rem;

margin-bottom:18px;

line-height:1.7;

}

.vassago-lore-title{

font-size:

clamp(
2rem,
8vw,
3rem
);

margin-bottom:16px;

}

.vassago-lore-text{

font-size:

clamp(
1rem,
4.6vw,
1.15rem
);

line-height:1.55;

}

.vassago-lore-actions{

margin-top:30px;

}

}