/* ---------------------
   Global reset & basics
   --------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
min-height: 100vh;
background: #1a1c20 url('../xbkgr1.webp') center/cover no-repeat fixed;
font-family: 'Comic Sans MS', 'Futura', 'Verdana', 'Arial', sans-serif;
color: #d2bea9;
}

/*
.navbar {
position: sticky;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-start;
height: 52px;
padding: 0 20px;
background: linear-gradient(
90deg,
rgba(26,30,33,0.8),
rgba(32,40,51,0.9),
rgba(48,63,86,0.9),
rgba(44,71,111,0.9),
rgba(75,109,154,0.9),
rgba(19,109,144,0.9),
rgba(31,95,156,0.9),
rgba(22,142,171,0.9),
rgba(4,214,229,0.9)
);
box-shadow: 0 4px 17px rgba(0, 181, 236, 0.6);
z-index: 9999;
}
*/

.navbar {
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-start;
height: 52px;
padding: 0 20px;
background: linear-gradient(
    90deg,                                   /* left → right */

    /* 0 % → 70 % : first colour (fades into the second) */
    rgba(26,30,33,0.03)   0%,
    rgba(31,95,156,0.15) 70%,

    /* 70 % → 80 % : second colour (fades into the third) */
    rgba(22,142,171,0.25) 80%,

    /* 80 % → 90 % : third colour (fades into the fourth) */
    rgba(0,238,255,0.5)   90%,

    /* 90 % → 100 % : fourth colour (solid to the end) */
    rgba(0,238,255,0.7)  100%
);
z-index: 9999;
}

.logo {
color: rgb(60,158,210);
font-size: calc(36px + 0.5vw);
font-weight: 900;
}

.wrapper {
max-width: 880px;
margin: 0.1rem auto;
background: rgba(22, 22, 22, 0.9);
padding: 0.5rem;
border-radius: 8px;
box-shadow:
0 4px 12px rgba(0,0,0,0.6),
0 0 20px rgba(0,255,255,0.2);
}

.xinner1 {
display: flex;
justify-content: center;
align-items: center;
height:calc(75px + 1.2vw);
padding: 0.6rem 0 0.4rem 0;
margin-bottom: 1rem;
text-align: center;
background: linear-gradient(
    90deg,
    rgba(26,30,33,0.8),
    rgba(32,40,51,0.7),
    rgba(48,63,86,0.65),
    rgba(44,71,111,0.65),
    rgba(75,109,154,0.55),
    rgba(19,109,144,0.5),
    rgba(31,95,156,0.7),
    rgba(22,142,171,0.7),
    rgba(4,214,229,0.9)
);
}
.xinner1 h1 {
font-size: calc(48px + 1.5vw);
color: #6faada;
text-shadow: 0 0 6px rgba(0,0,0);
margin: 0 0 0.5rem;
}
.h2 {
font-size: calc(38px + 1.5vw);
color: #77b7ec;
text-shadow: 0 0 6px rgba(0,0,0);
margin: 0 0 0.5rem;
}
h3 {
margin-top:-50px;
font-size: calc(22px + 0.6vw);
transform:scaleY(1.6);
color: #e1cea8;
text-shadow: 0 0 2px rgba(255,215,0,0.3);
}

.xtxtupdate {
  margin: 1.3rem 0.4rem 1rem 0.4rem;
  padding: 0 0.3rem;
  font-size: calc(25px + 1.4vw);
  color: #c7b8ae;
  line-height: 1;
}

.xinner2 {
  margin: 1rem 0;
  padding: 0 0.4rem;
  font-size: calc(19px + 0.5vw);
  color: #d2bea9;
  line-height: 1.2;
}

.xinner2b {
margin: -0.8rem 0 0.2rem 0;
padding: 0.4rem 0.5rem;
text-align: center;
font-size: calc(24px + 1.3vw);
color: #bbb;
line-height: 1.5;
}
.xinner2b2 {
margin: -0.9rem 0 0.5rem 0;
padding: 0 1rem;
text-align: center;
font-size: calc(22px + 1.2vw);
color: #bbb;
line-height: 1.1;
}

.xinner2c {
margin-top: -6px;
padding: 0 0.1rem;
text-align: center !important;
font-size: calc(21px + 2vw) !important;
color: #bbb;
line-height: 1.2 !important;
}

.xinner3 {
margin: 1.5rem 0;
text-align: center;
}
.xinner3 img {
max-width: 100%;
height: auto;
border-radius: 7px;
box-shadow:
0 0 25px rgba(0, 208, 255, 0.5),
0 0 40px rgba(0, 195, 255, 0.4);
}

.xsignal-warn {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2px;
height:calc(5px + 0.7vw);
padding: 0.4rem 0;
text-align: center;
background: linear-gradient(
90deg,
rgba(34, 30, 30, 0.4),
rgb(69, 45, 46, 0.5),
rgb(90, 46, 46, 0.5),
rgb(131, 39, 39, 0.5),
rgba(203, 18, 18, 0.7),
rgba(255, 25, 25, 0.9)
);
color: #dddddd;
}

.xfootr-title {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2px;
height:calc(70px + 1.2vw);
padding: 0.4rem 0;
text-align: center;
background: linear-gradient(
90deg,
rgba(26,30,33,0.1),
rgba(26,30,33,0.2),
rgba(32,40,51,0.4),
rgba(32,40,51,0.7),
rgba(48,63,86,0.6),
rgba(44,71,111,0.6),
rgba(75,109,154,0.5),
rgba(19,109,144,0.5),
rgba(31,95,156,0.6),
rgba(22,142,171,0.7),
rgba(4,214,229,0.9)
);
color: #dddddd;
}

.xfootr {
margin: -1rem 0 1.3rem 0;
padding: 0 0.5rem;
text-align: center;
font-size: calc(19px + 0.6vw);
color: #bbb;
line-height: 1.1;
}

a {color: #64b9e0; text-decoration: underline;}
a:hover {color: #fff;}