/*=========================================================
    BOUND WORLD
    ISEKAI HUD THEME
    PART 1/3
=========================================================*/

:root{

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

--bg-black:#04070d;
--bg-deep:#08121d;
--bg-main:#0b1827;
--bg-panel:#102133;
--bg-panel2:#15293d;
--bg-panel3:#1b3148;

--glass:rgba(26,45,67,.74);
--glass2:rgba(18,33,50,.82);

/*=================================================
BORDERS
=================================================*/

--border:#35c8ff;
--border-soft:#2d7ea6;
--border-dark:#1d5c82;

/*=================================================
TEXT
=================================================*/

--text-main:#eef9ff;
--text-soft:#b8d8e9;
--text-dim:#7ea9bf;

/*=================================================
HUD COLORS
=================================================*/

--cyan:#3fd9ff;
--cyan2:#5ce8ff;
--cyan3:#7ff3ff;

--blue:#3b82ff;
--blue2:#65b5ff;

--teal:#35d4b8;
--green:#55d889;

--gold:#ffd86a;
--orange:#ffb14b;

--red:#ff697e;

--shadow:
0 12px 36px rgba(0,0,0,.55);

--glow:
0 0 18px rgba(63,217,255,.22);

}

/*=========================================================
GLOBAL
=========================================================*/

*{
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

margin:0;

font-family:"Merriweather",serif;

background:

radial-gradient(circle at top,
#214f75 0%,
#0f2033 18%,
#09131d 45%,
#04070d 100%);

background-attachment:fixed;

color:var(--text-main);

line-height:1.6;

}

/*=========================================================
TYPOGRAPHY
=========================================================*/

h1,h2,h3,h4,h5,h6{

font-family:"Cinzel",serif;

font-weight:700;

color:white;

letter-spacing:.8px;

text-shadow:

0 0 8px rgba(90,220,255,.22);

}

.small{

font-size:13px;

color:var(--text-soft);

line-height:1.6;

}

/*=========================================================
TOP NAVIGATION
=========================================================*/

.topnav{

overflow:hidden;

background:

linear-gradient(
90deg,
#08131f,
#11273b,
#08131f);

border-bottom:

1px solid rgba(72,210,255,.35);

box-shadow:

0 4px 24px rgba(0,0,0,.5);

backdrop-filter:blur(12px);

}

.topnav a{

float:left;

padding:

15px 18px;

text-decoration:none;

font-size:15px;

font-weight:600;

color:#b8d8e9;

transition:

all .22s ease;

}

.topnav a:hover{

background:

rgba(60,220,255,.08);

color:white;

box-shadow:

inset 0 -2px 0 var(--cyan);

}

.topnav a.active{

background:

linear-gradient(
135deg,
#35d8ff,
#1679d9);

color:white;

box-shadow:

0 0 18px rgba(63,217,255,.28);

}

/*=========================================================
MAIN CONTAINER
=========================================================*/

.container{

max-width:1400px;

margin:

30px auto 120px auto;

padding:24px;

border-radius:22px;

background:

linear-gradient(
180deg,
rgba(20,36,54,.94),
rgba(11,24,39,.97));

border:

1px solid rgba(64,215,255,.25);

backdrop-filter:

blur(16px);

box-shadow:

var(--shadow);

}

/*=========================================================
SECTIONS
=========================================================*/

.section{

margin-bottom:24px;

padding:20px;

border-radius:18px;

background:

linear-gradient(
180deg,
rgba(25,46,69,.96),
rgba(17,32,48,.97));

border:

1px solid rgba(70,215,255,.20);

box-shadow:

0 10px 28px rgba(0,0,0,.35);

position:relative;

overflow:hidden;

}

.section::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:

linear-gradient(
90deg,
transparent,
var(--cyan),
transparent);

opacity:.7;

}

/*=========================================================
TOP BAR
=========================================================*/

.topbar{

display:grid;

grid-template-columns:

1fr 1fr 1fr;

gap:18px;

margin-bottom:24px;

}

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

select,
input{

width:100%;

padding:12px;

margin-top:6px;

margin-bottom:14px;

border-radius:12px;

background:

linear-gradient(
180deg,
#132638,
#0d1b2b);

border:

1px solid rgba(70,215,255,.22);

color:white;

font-size:14px;

transition:

all .2s;

}

select:hover,
input:hover{

border-color:

var(--cyan);

}

select:focus,
input:focus{

outline:none;

border-color:

var(--cyan2);

box-shadow:

0 0 18px rgba(70,220,255,.28);

}
select option {
    background: #132638;
    color: white;
}
/*=========================================================
BUTTONS
=========================================================*/

button{

width:100%;

padding:11px;

margin-top:8px;

border:none;

border-radius:12px;

cursor:pointer;

font-weight:bold;

letter-spacing:.4px;

color:white;

background:

linear-gradient(
135deg,
#28b5ff,
#1672d8);

transition:

all .18s ease;

box-shadow:

0 6px 18px rgba(20,120,255,.28);

}

button:hover{

transform:

translateY(-2px);

filter:brightness(1.06);

box-shadow:

0 0 20px rgba(70,220,255,.30);

}

button:disabled{

background:#3d4e5c;

color:#9fb2bf;

cursor:not-allowed;

box-shadow:none;

transform:none;

}

/*=========================================================
STAT BOXES
=========================================================*/

.statBox,
.classRow,
.equipColumn{

background:

linear-gradient(
180deg,
#173047,
#122639);

border:

1px solid rgba(70,215,255,.20);

border-radius:16px;

box-shadow:

0 8px 20px rgba(0,0,0,.28);

}

.statBox{

padding:16px;

}

.classRow{

display:flex;

justify-content:space-between;

align-items:center;

gap:12px;

padding:14px;

margin-bottom:12px;

}

/*=========================================================
SPECIAL BUTTONS
=========================================================*/

.btnUp{

background:

linear-gradient(
135deg,
#2fd8ff,
#1b82ff);

}

.btnDown,
.removeBtn,
.refundBtn,
.btnRefundClass{

background:

linear-gradient(
135deg,
#ff7a7a,
#d44747);

}

.btnDown:hover,
.removeBtn:hover,
.refundBtn:hover,
.btnRefundClass:hover{

box-shadow:

0 0 18px rgba(255,90,90,.35);

}

.msg-success{

color:#68ffc8;

font-weight:bold;

}

.msg-error{

color:#ff8b8b;

font-weight:bold;

}
/*=========================================================
    BOUND WORLD
    ISEKAI HUD THEME
    PART 2/3
=========================================================*/

/*=================================================
ABILITY GRID
=================================================*/

#abilitiesList{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:18px;

align-items:start;

}

/*=================================================
COMPACT ABILITY CARD
=================================================*/

.abilityCard{

position:relative;

padding:10px 12px;

border-radius:14px;

background:
linear-gradient(
180deg,
rgba(23,46,69,.98),
rgba(14,29,45,.98));

border:
1px solid rgba(63,217,255,.25);

box-shadow:
0 6px 18px rgba(0,0,0,.30);

display:flex;

flex-direction:column;

gap:6px;

}


/* HEADER */

.abilityHeader{

display:flex;

justify-content:space-between;

align-items:center;

}


.abilityHeader b{

font-family:"Cinzel",serif;

font-size:.95rem;

color:white;

}


/* RANK BADGE */

.rank{

padding:3px 10px;

font-size:10px;

}


/* STAT LINE */

.abilityStats{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:3px 10px;

font-size:11px;

color:var(--text-soft);

padding:5px 0;

}


/* DESCRIPTION TOGGLE */

.abilityDescription{

margin-top:4px;

}


.descriptionToggle{

width:100%;

padding:5px 8px;

font-size:11px;

text-align:left;

background:

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

border:

1px solid rgba(63,217,255,.15);

border-radius:8px;

color:#9fefff;

cursor:pointer;

}


.descriptionToggle:hover{

background:

rgba(63,217,255,.12);

}


/* HIDDEN DESCRIPTION */

.descriptionText{

margin-top:6px;

padding:8px;

font-size:12px;

line-height:1.45;

background:

rgba(0,0,0,.20);

border-left:

2px solid var(--cyan);

border-radius:6px;

}
/*================================================= RANK BADGES =================================================*/ .rank{ float:right; padding:5px 13px; border-radius:999px; font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); } /* D */ .rank-d, .rank-D{ background: linear-gradient( 180deg, #8f949a, #656d76); color:white; } /* C */ .rank-c, .rank-C{ background: linear-gradient( 180deg, #36dba3, #1d9b6d); color:white; } /* B */ .rank-b, .rank-B{ background: linear-gradient( 180deg, #5eb6ff, #267dff); color:white; } /* A */ .rank-a, .rank-A{ background: linear-gradient( 180deg, #5df4ff, #24a8ff); color:white; } /* S */ .rank-s, .rank-S{ background: linear-gradient( 180deg, #ffe788, #ffc53d); color:#2b1b00; border-color: rgba(255,255,255,.35); }

/* BUTTON */

.abilityCard button:last-child{

margin-top:4px;

padding:7px;

font-size:12px;

}

/*=================================================
TABLES
=================================================*/

table{

width:100%;

border-collapse:collapse;

font-size:13px;

}

th{

padding:9px;

background:

linear-gradient(
180deg,
#1d405f,
#17344d);

color:white;

border:

1px solid rgba(63,217,255,.24);

}

td{

padding:8px;

background:

rgba(255,255,255,.025);

border:

1px solid rgba(63,217,255,.12);

color:var(--text-soft);

}

/*=================================================
LOCKED ROW
=================================================*/

.lockedSlotRow{

background:

rgba(255,255,255,.02);

color:#7d99ab;

font-style:italic;

}

.lockedSlotRow td{

opacity:.6;

}

.lockedSlotRow .removeBtn{

background:#58606a!important;

cursor:not-allowed;

}

/*=================================================
EQUIPMENT GRID
=================================================*/

.equipGrid{

display:grid;

grid-template-columns:1fr;

gap:22px;

margin-top:12px;

}

.equipColumn{

padding:18px;

overflow-x:auto;

background:

linear-gradient(
180deg,
#163149,
#12273b);

border:

1px solid rgba(63,217,255,.18);

}

/*=================================================
BOTTOM HUD BAR
=================================================*/

.bottomToolbar{

position:fixed;

left:0;
bottom:0;

width:100%;

padding:15px 22px;

display:flex;

justify-content:space-between;

align-items:center;

background:

linear-gradient(
90deg,
rgba(8,18,28,.98),
rgba(17,38,58,.98),
rgba(8,18,28,.98));

border-top:

1px solid rgba(63,217,255,.28);

backdrop-filter:blur(14px);

box-shadow:

0 -8px 28px rgba(0,0,0,.45);

z-index:9999;

}

.bottomToolbar .toolGroup{

display:flex;

gap:22px;

flex-wrap:wrap;

align-items:center;

}

.bottomToolbar .equipDisplay{

font-weight:bold;

color:#8cf4ff;

text-shadow:

0 0 10px rgba(90,230,255,.30);

}

/*=================================================
HUD ANIMATION
=================================================*/

@keyframes hudSweep{

0%{

transform:translateX(-40%);

}

100%{

transform:translateX(40%);

}

}
/*=========================================================
    BOUND WORLD
    ISEKAI HUD THEME
    PART 3/3
=========================================================*/

/*=================================================
ATTRIBUTE BUILDER
=================================================*/

.attributeSection{
    margin-bottom:32px;
}

.attributeLayout{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:26px;
    margin-top:20px;
}

.attributePanel{

    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(20,40,60,.96),
            rgba(12,24,37,.98)
        );

    border:1px solid rgba(63,217,255,.20);

    border-radius:20px;

    padding:20px;

    backdrop-filter:blur(16px);

    box-shadow:
        0 12px 32px rgba(0,0,0,.35);

}

.attributePanel::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );

}

/*=================================================
ATTRIBUTE ROW
=================================================*/

.attribute{

    display:grid;

    grid-template-columns:
        60px
        42px
        70px
        42px
        1fr;

    align-items:center;

    gap:12px;

    padding:14px;

    margin-bottom:12px;

    border-radius:14px;

    border:1px solid rgba(63,217,255,.15);

    background:

        linear-gradient(
            180deg,
            rgba(25,46,69,.96),
            rgba(16,31,48,.98)
        );

    transition:
        .2s;

}

.attribute:hover{

    transform:translateY(-2px);

    border-color:var(--cyan);

    box-shadow:
        0 0 18px rgba(63,217,255,.14);

}

.attribute.active{

    border-color:var(--gold);

    box-shadow:

        inset 0 0 18px rgba(255,216,106,.08),

        0 0 20px rgba(255,216,106,.15);

}

/*=================================================
ATTRIBUTE LABELS
=================================================*/

.attributeCode{

    text-align:center;

    font-family:"Cinzel",serif;

    font-size:18px;

    font-weight:bold;

    color:var(--cyan2);

    text-shadow:
        0 0 8px rgba(100,240,255,.22);

}

.attributeName{

    color:white;

    font-weight:bold;

}

.attributeValue{

    text-align:center;

    font-family:"Cinzel",serif;

    font-size:25px;

    color:var(--gold);

}

/*=================================================
ATTRIBUTE BUTTONS
=================================================*/

.attrBtn{

    width:42px;
    height:42px;

    padding:0;

    margin:0;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:20px;

    font-weight:bold;

    color:white;

    background:

        linear-gradient(
            135deg,
            #38dbff,
            #1977ff
        );

    transition:.18s;

    box-shadow:

        0 6px 16px rgba(25,119,255,.28);

}

.attrBtn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 0 18px rgba(63,217,255,.35);

}

.attrBtn:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/*=================================================
DESCRIPTION
=================================================*/

#title{

    margin-top:0;
    margin-bottom:14px;

}

#desc{

    color:var(--text-soft);

    line-height:1.8;

    font-size:15px;

}

#desc strong{

    color:white;

}

/*=================================================
STATUS
=================================================*/

#status{

    margin-top:18px;

    padding-top:14px;

    border-top:

        1px solid rgba(63,217,255,.18);

    font-size:16px;

    font-weight:bold;

}

.good{

    color:#69ffc2;

}

.bad{

    color:#ff8b97;

}

/*=================================================
SCROLLBAR
=================================================*/

::-webkit-scrollbar{

    width:12px;

    height:12px;

}

::-webkit-scrollbar-track{

    background:#09131d;

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(
            180deg,
            #36d8ff,
            #1b7cff
        );

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(
            180deg,
            #63e8ff,
            #2c9cff
        );

}

/*=================================================
TEXT SELECTION
=================================================*/

::selection{

    background:
        rgba(63,217,255,.28);

    color:white;

}

/*=================================================
HUD GLOW
=================================================*/

.container,
.section,
.attributePanel,
.abilityCard, 
.equipColumn{

    animation:hudPulse 6s ease-in-out infinite;

}

@keyframes hudPulse{

0%{

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

}

50%{

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        0 0 24px rgba(63,217,255,.08);

}

100%{

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

}

}

/*=================================================
SUBTLE SCANLINE EFFECT
=================================================*/

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.035;

    background:

        repeating-linear-gradient(

            180deg,

            transparent 0px,

            transparent 3px,

            rgba(120,240,255,.10) 4px

        );

    animation:scanMove 12s linear infinite;

}

@keyframes scanMove{

    from{

        transform:translateY(-40px);

    }

    to{

        transform:translateY(40px);

    }

}

/*=================================================
RESPONSIVE
=================================================*/

@media (max-width:1100px){

    #abilitiesList{

        grid-template-columns:repeat(2,1fr);

    }

    .topbar{

        grid-template-columns:1fr;

    }

}

@media (max-width:900px){

    .attributeLayout{

        grid-template-columns:1fr;

    }

}

@media (max-width:700px){

    #abilitiesList{

        grid-template-columns:1fr;

    }

    .bottomToolbar{

        flex-direction:column;

        gap:12px;

        width:100%;

    }

    .topnav a{

        float:none;

        display:block;

        text-align:left;

    }

}
.builderPage{
    display:none;
}

.builderPage.active{
    display:block;
}

nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;

    width: 100%;
    padding: 12px;

    background:
        linear-gradient(
            90deg,
            #08131f,
            #11273b,
            #08131f
        );

    border-bottom: 1px solid rgba(63,217,255,.35);
}

nav button {
    padding: 12px 20px;

    border: 1px solid rgba(63,217,255,.35);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #28b5ff,
            #1672d8
        );

    color: white;

    font-family: "Cinzel", serif;
    font-weight: bold;
    font-size: 15px;

    cursor: pointer;

    transition: .2s ease;
}

nav button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 18px rgba(63,217,255,.45);
}