* {
    box-sizing:border-box;
}


body {

    margin:0;

    min-height:100vh;

    background:
    radial-gradient(circle at top,#242424,#050505);

    color:white;

    font-family:Orbitron, sans-serif;

}

/* ================================
   SPARKD DEVELOPER PANEL
================================ */


#sparkdDevPanel{

    position:fixed;

    right:20px;

    top:20px;

    width:320px;

    max-height:90vh;

    overflow-y:auto;

    background:#111;

    color:white;

    border:2px solid #ff6a00;

    border-radius:15px;

    padding:20px;

    z-index:99999;

    box-shadow:
    0 0 30px rgba(255,106,0,.5);

}



.devHeader{

    display:flex;

    justify-content:space-between;

    color:#ff6a00;

    font-size:20px;

    font-weight:bold;

}



.devSection{

    margin-top:20px;

    padding:10px;

    border:1px solid #333;

    border-radius:10px;

}



#sparkdDevPanel button{

    width:100%;

    margin-top:8px;

    padding:8px;

    cursor:pointer;

}

/* ==========================
   TEXT COLOR MENU
========================== */


#textColorMenu{

    position:fixed;

    background:#111;

    border:2px solid #ff6a00;

    border-radius:10px;

    padding:10px;

    z-index:9999;

}



#textColorMenu .colorTitle{

    color:white;

    font-weight:bold;

    margin-bottom:8px;

}



#textColorMenu button{

    display:block;

    width:100px;

    margin:4px;

    cursor:pointer;

}

/* =================================
   PREVENT TEXT HIGHLIGHTING
================================= */

body {

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

}


/* Allow text selection where users actually need it */
input,
textarea {

    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;

}



/* =========================
APP
========================= */

#app {

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

}



/* =========================
HEADER
========================= */

header {
    text-align:center;
    padding:90px 20px 20px 20px;
}


header h1 {

    margin:0;

    font-size:42px;

    font-weight:900;

    letter-spacing:3px;

}


header h1 span {

    color:#ff6a00;

}


header p {

    color:#aaa;

    margin-top:8px;

}



/* =========================
TOP TEXT TOOLBAR
========================= */

#textToolbar {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

}



/* =========================
LEFT TOOLBAR
========================= */

#sideToolbar {

    position:fixed;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:5000;

}


#sideToolbar button {

    width:140px;

}



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

button {

    background:#ff6a00;

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:8px;

    font-family:Orbitron;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}


button:hover {

    transform:scale(1.05);

    box-shadow:0 0 15px #ff6a00;

}



/* =========================
EDITOR
========================= */

#editor{

    display:flex;

    justify-content:center;

    align-items:center;

    flex:0 0 auto;

}

/* ================================
   CANVAS BOX
================================ */

#canvasBox {

    width:min(75vh,800px);

    height:min(75vh,800px);

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:#111;

    padding:20px;

    border-radius:15px;

    box-shadow:

    0 0 30px rgba(255,106,0,.35);

}



#memeCanvas {

    background:white;

    border-radius:5px;

}



.canvas-container {

    margin:auto !important;

}

/* ================================
   WORKSPACE LAYOUT
================================ */

#workspace{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:30px;

    width:100%;

    margin-top:20px;

}

/* ================================
   MISSION CONTROL
================================ */

#dailyChallenge{

    flex:0 0 280px;

    width:280px;

    min-height:300px;

    background:#111;

    border:2px solid #ff6a00;

    border-radius:15px;

    padding:20px;

    box-shadow:0 0 20px rgba(255,106,0,.35);

}

#dailyChallenge h2{

    margin-top:0;

    color:#ff6a00;

    text-align:center;

}

/* =========================
CONTROLS
========================= */

#controls {

    margin-top:20px;

    width:90%;

    max-width:600px;

    background:#111;

    padding:20px;

    border-radius:15px;

    display:flex;

    flex-direction:column;

    gap:10px;

}



label {

    color:#ff9900;

}



input {

    padding:12px;

    border-radius:8px;

    border:none;

    background:#222;

    color:white;

    font-size:16px;

}



/* =========================
EMOJI PICKER
========================= */

.emojiContainer {

    position:relative;

}



#emojiPicker {

    display:none;

    position:absolute;

    left:150px;

    top:0;

    width:190px;

    padding:10px;

    background:#111;

    border:2px solid #ff6a00;

    border-radius:10px;

    box-shadow:0 0 20px rgba(255,106,0,.5);

    z-index:9999;

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

    gap:6px;

}



.emojiOption {

    display:flex;

    justify-content:center;

    align-items:center;

    width:38px;

    height:38px;

    font-size:26px;

    cursor:pointer;

    border-radius:6px;

    user-select:none;

}



.emojiOption:hover {

    background:#333;

    transform:scale(1.15);

}



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

footer {


padding:25px;

color:#777;

font-size:13px;


}

/* ================================
HOME BUTTON
================================ */

#homeBtn{


position:absolute;

top:20px;

left:200px;

background:#ff6a00;

color:white;

border:none;

padding:10px 18px;

border-radius:8px;

font-family:Orbitron;

font-weight:bold;

cursor:pointer;

height:42px;


}

#homeBtn:hover{


transform:scale(1.05);

box-shadow:0 0 15px #ff6a00;


}

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

#challengeCategory,
#challengeDifficulty,
#challengeReward{


margin-top:10px;

color:#ffb347;

font-size:14px;

font-weight:bold;


}

#challengeReward{


color:#00ff99;


}

/* ================================
HOLDER CHAT - ELECTRIC BLUE
================================ */

#chatBtn{


position:absolute;

top:20px;

left:20px;

background:#ff6a00;

color:white;

border:none;

padding:10px 18px;

border-radius:8px;

font-family:Orbitron;

font-weight:bold;

cursor:pointer;

text-decoration:none;

display:inline-flex;

align-items:center;

justify-content:center;

height:42px;

box-sizing:border-box;

overflow:hidden;

z-index:1;

isolation:isolate;


}

/* ================================
ELECTRIC BLUE ENERGY - FORWARD
================================ */

#chatBtn::before{


content:"";

position:absolute;

top:0;

left:-100%;

width:45%;

height:100%;

background:linear-gradient(
    90deg,
    transparent,
    rgba(0,174,255,0.35),
    #00b7ff,
    #ffffff,
    #00b7ff,
    rgba(0,174,255,0.35),
    transparent
);

filter:blur(2px);

animation:holderElectricForward 1.8s linear infinite;

z-index:0;

pointer-events:none;


}

/* ================================
ELECTRIC BLUE ENERGY - BACKWARD
================================ */

#chatBtn::after{


content:"";

position:absolute;

bottom:2px;

right:-100%;

width:40%;

height:3px;

background:linear-gradient(
    90deg,
    transparent,
    #008cff,
    #ffffff,
    #008cff,
    transparent
);

box-shadow:
    0 0 6px #008cff,
    0 0 12px #008cff,
    0 0 20px rgba(0,140,255,0.8);

animation:holderElectricBack 1.4s linear infinite;

z-index:0;

pointer-events:none;


}

/* ================================
ELECTRIC ANIMATIONS
================================ */

@keyframes holderElectricForward{


0%{
    left:-45%;
}

100%{
    left:100%;
}


}

@keyframes holderElectricBack{

0%{
    right:-40%;
}

100%{
    right:100%;
}


}

/* ================================
HOLDER CHAT HOVER
================================ */

#chatBtn:hover{


transform:scale(1.05);

box-shadow:
    0 0 8px #008cff,
    0 0 18px #008cff,
    0 0 30px rgba(0,140,255,0.75);


}

/* ================================
CREATOR PROFILE BUTTON
================================ */

#profileBtn{


position:absolute;

top:20px;

left:320px;

background:#ff6a00;

color:white;

border:none;

padding:10px 18px;

border-radius:8px;

font-family:Orbitron;

font-weight:bold;

cursor:pointer;

text-decoration:none;

display:inline-flex;

align-items:center;

justify-content:center;

height:42px;

box-sizing:border-box;


}

#profileBtn:hover{


transform:scale(1.05);

box-shadow:0 0 15px #ff6a00;


}

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

@media(max-width:900px){


#sideToolbar {

    position:static;

    transform:none;

    flex-direction:row;

    justify-content:center;

    margin-bottom:15px;

    z-index:9999 !important;

}


#emojiPicker {

    left:0;

    top:50px;

}


/* ================================
   FABRIC CANVAS LAYER FIX
================================ */

.canvas-container {

    position:relative !important;

    z-index:10;

}


.canvas-container canvas {

    z-index:10 !important;

}


#textToolbar {

    position:relative;

    z-index:9999;

}


}


/* ================================
FORGE ACCESSIBILITY / RESPONSIVE HARDENING
================================ */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

button,
.nav-link,
.emojiOption,
input{
    min-height:44px;
}

button:focus-visible,
.nav-link:focus-visible,
.emojiOption:focus-visible,
input:focus-visible{
    outline:3px solid #ffffff;
    outline-offset:3px;
    box-shadow:0 0 0 5px #ff6a00;
}

#canvasBox{
    max-width:calc(100vw - 40px);
    max-height:calc(100vw - 40px);
}

.canvas-container,
.canvas-container canvas{
    max-width:100% !important;
    max-height:100% !important;
}

@media(max-width:1180px){
    header{
        padding-top:82px;
    }

    #sideToolbar{
        position:static;
        left:auto;
        top:auto;
        transform:none;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        width:min(94vw,760px);
        margin:0 auto 15px;
        gap:8px;
    }

    #sideToolbar button{
        width:auto;
        min-width:132px;
        flex:1 1 132px;
        max-width:180px;
    }

    #emojiPicker{
        left:0;
        top:52px;
    }

    #workspace{
        flex-direction:column;
        align-items:center;
        gap:18px;
        margin-top:10px;
    }

    #canvasBox{
        width:min(82vw,760px);
        height:min(82vw,760px);
    }

    #dailyChallenge{
        width:min(82vw,760px);
        flex:0 0 auto;
        min-height:0;
    }
}

@media(max-width:700px){
    header{
        padding:18px 12px 12px;
    }

    header h1{
        font-size:clamp(28px,9vw,38px);
        letter-spacing:1px;
        margin-top:8px;
    }

    header p{
        font-size:13px;
    }

    #homeBtn,
    #chatBtn,
    #profileBtn{
        position:static;
        width:min(92vw,360px);
        height:auto;
        min-height:44px;
        margin:6px auto;
        display:flex;
    }

    #textToolbar{
        width:92vw;
        flex-wrap:wrap;
    }

    #textInput{
        width:100%;
        min-width:0;
    }

    #addTextBtn{
        width:100%;
    }

    #sideToolbar{
        width:92vw;
    }

    #sideToolbar button{
        max-width:none;
        min-width:calc(50% - 8px);
    }

    #workspace{
        width:100%;
    }

    #canvasBox{
        width:min(92vw,620px);
        height:min(92vw,620px);
        padding:10px;
        border-radius:12px;
    }

    #dailyChallenge{
        width:min(92vw,620px);
        padding:16px;
    }

    #emojiPicker{
        position:fixed;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:min(88vw,320px);
        grid-template-columns:repeat(4,1fr);
    }

    #textColorMenu{
        max-width:90vw;
        max-height:70vh;
        overflow:auto;
    }
}

@media(max-width:420px){
    #sideToolbar button{
        min-width:100%;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:0.01ms !important;
    }
}