/* --------------------------------
GLOBAL GAME MODE
-------------------------------- */

html.kc-mode,
body.kc-mode{
margin:0 !important;
height:100% !important;
overflow:hidden !important;
background:#111 !important;
font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* keep theme behind the game */

body.kc-mode > *:not(#kc-root){
position:relative;
z-index:0;
}

/* disable text selection */

body.kc-mode,
body.kc-mode *{
user-select:none !important;
}

/* --------------------------------
MAIN CANVAS
-------------------------------- */

#kc-root{
position:fixed !important;
inset:0 !important;
z-index:999999 !important;
background:#111 !important;
}

#kc-c{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100vw !important;
height:100vh !important;
max-width:none !important;
max-height:none !important;
}

/* --------------------------------
OVERLAY (WELCOME SCREEN)
-------------------------------- */

.kc-overlay{

position:fixed;
inset:0;

display:flex;
align-items:center;
justify-content:center;

z-index:20;

background:rgba(0,0,0,0.35);
backdrop-filter:blur(3px);

color:#fff;
text-align:center;

padding:20px;

}

/* --------------------------------
WELCOME BOX
-------------------------------- */

.kc-box{

max-width:560px;
width:100%;

padding:30px;

border-radius:18px;

background:linear-gradient(
180deg,
rgba(30,30,30,0.92),
rgba(10,10,10,0.92)
);

box-shadow:
0 12px 40px rgba(0,0,0,0.8),
0 0 25px rgba(255,201,77,0.25);

}

/* --------------------------------
TITLE
-------------------------------- */

.kc-title{

font-size:38px;
font-weight:700;

margin-bottom:14px;

color:#FFD966;

}

/* --------------------------------
TEXT
-------------------------------- */

.kc-intro{

font-size:18px;
line-height:1.5;

margin-bottom:12px;

}

.kc-sub{

font-size:15px;
opacity:0.85;

margin-bottom:20px;

}

/* --------------------------------
START INSTRUCTION
-------------------------------- */

.kc-start-instruction{

font-size:16px;
font-weight:600;

color:#FFC94D;

animation:kc-pulse 2.4s ease-in-out infinite;

}

@keyframes kc-pulse{

0%{
transform:scale(1);
opacity:.9;
}

50%{
transform:scale(1.05);
opacity:1;
}

100%{
transform:scale(1);
opacity:.9;
}

}

/* --------------------------------
ARTICLE CTA BUTTON
-------------------------------- */

/* CTA wrapper */

.kc-cta-wrapper{
margin:40px 0;
width:100%;
}

/* button */

.kc-cta-button{
display:block;
width:100%;

padding:30px 24px;

font-size:24px;
font-weight:700;

border-radius:14px;

color:#fff !important;
text-decoration:none !important;

background:#0f0f0f;

box-shadow:0 12px 40px rgba(0,0,0,0.35);

text-align:center;

position:relative;
overflow:hidden;

transition:transform .2s ease, box-shadow .2s ease;
}

/* subtitle */

.kc-cta-sub{
display:block;
font-size:16px;
margin-top:8px;
opacity:.9;
}

/* star animation */

.kc-cta-button::before{

content:"";
position:absolute;
inset:0;

background-image:
radial-gradient(#FFD966 2px, transparent 2px),
radial-gradient(#FFC94D 2px, transparent 2px),
radial-gradient(#FFE08A 3px, transparent 3px);

background-size:60px 60px,90px 90px,120px 120px;
background-position:0 0,30px 40px,60px 20px;

animation:kc-stars 12s linear infinite;

opacity:.55;
z-index:0;

}

.kc-cta-button *{
position:relative;
z-index:2;
}

@keyframes kc-stars{
from{transform:translateY(0)}
to{transform:translateY(120px)}
}