/* ==========================================================
   ROOT TRAINER
   Clover Field / Deep Sea Terminal Theme

   Web 1.0 educational software inspired
   Frutiger Aero + screentone + nature archive
========================================================== */


:root {

    --sky:#91dcff;
    --field:#dff7c9;
    --leaf:#62b95d;

    --panel:
    rgba(255,255,255,.72);

    --panel-light:
    rgba(255,255,255,.88);

    --ink:#24404b;

    --blue:#258bb5;
    --green:#3e9b55;

    --border:
    rgba(255,255,255,.9);

    --shadow:
    7px 7px 0 rgba(50,120,130,.15),
    0 12px 25px rgba(0,80,110,.15);

    --font:
    "Trebuchet MS",
    "Verdana",
    "Arial",
    sans-serif;

}



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


* {

    box-sizing:border-box;

}


body {

    margin:0;

    min-height:100vh;

    font-family:var(--font);

    color:var(--ink);


    background:

    radial-gradient(
        rgba(50,120,120,.15) 1px,
        transparent 1px
    ),

    linear-gradient(
        180deg,
        var(--sky),
        var(--field)
    );


    background-size:

    14px 14px,
    auto;


    transition:.5s;

}



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


header {

    text-align:center;

    padding:35px 20px 10px;

}



header h1 {

    font-size:3rem;

    margin:0;


    color:#26744f;


    text-shadow:

    0 2px white,
    0 5px 15px rgba(255,255,255,.8);

}


header p {

    margin-top:10px;

}



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


.toolbar {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    padding:20px;

}



.toolbar label {

    background:

    rgba(255,255,255,.6);


    border:

    1px solid white;


    padding:10px;


    border-radius:4px;

}



select {

    padding:7px;

    border:

    1px solid #9bd8e8;


    background:white;

}



/* ==========================================================
   BUTTONS
   Glossy old-web style
========================================================== */


button {


    padding:

    10px 18px;


    cursor:pointer;


    font-family:inherit;


    border:

    2px solid white;


    border-radius:5px;


    background:

    linear-gradient(
        white,
        #cceeff
    );


    box-shadow:

    inset 0 2px white,
    0 3px 8px rgba(0,0,0,.2);


}


button:hover {

    filter:brightness(1.08);

}


button:active {

    transform:translateY(2px);

}



/* ==========================================================
   MAIN AREA
========================================================== */


main {


    max-width:1000px;


    margin:auto;


    padding:20px;


}



/* ==========================================================
   MAIN QUESTION WINDOW
========================================================== */


.questionCard {


    width:100%;


    max-width:700px;


    margin:

    25px auto;


    padding:

    40px;


    background:

    var(--panel-light);


    border:

    3px solid var(--border);


    border-radius:6px;


    box-shadow:

    var(--shadow);


    position:relative;


    overflow:hidden;


}



/* screentone corner */


.questionCard::after {


    content:"";


    position:absolute;


    width:170px;

    height:170px;


    right:-40px;

    bottom:-40px;


    background:

    radial-gradient(

        rgba(40,120,150,.22) 2px,

        transparent 2px

    );


    background-size:

    12px 12px;

}



/* ==========================================================
   QUESTION
========================================================== */


#questionType {

    text-align:center;

    font-size:.9rem;

    color:#43806b;

}



.question {


    text-align:center;


    font-size:5rem;


    margin:

    40px 0;


    color:#126a8b;


    text-shadow:

    0 2px white;

}



#answerInput {


    display:block;


    margin:auto;


    width:140px;


    padding:15px;


    font-size:2rem;


    text-align:center;


    border:

    2px solid #8ed9e7;


    border-radius:4px;


    background:white;

}



/* ==========================================================
   WINDOWS
========================================================== */


.dashboard,
.mastery,
.records,
.storage,
.settings {


    background:

    var(--panel);


    border:

    2px solid white;


    border-radius:4px;


    box-shadow:

    var(--shadow);


    padding:20px;


    margin:20px 0;


    position:relative;


    overflow:hidden;

}



.dashboard::before,
.mastery::before,
.records::before {


    content:"";


    position:absolute;


    inset:0;


    background:

    radial-gradient(

    rgba(0,100,120,.1) 1px,

    transparent 1px

    );


    background-size:

    9px 9px;


    opacity:.35;

}



/* ==========================================================
   STATS
========================================================== */


.statsGrid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:12px;


}



.stat {


    background:white;


    border:

    1px solid #d5eeee;


    padding:15px;


    text-align:center;


    border-radius:3px;

}


.label {

    display:block;

    font-size:.8rem;

    opacity:.7;

}



/* ==========================================================
   MASTERY GRID

   Catalog / specimen style
========================================================== */


#masteryGrid {


    display:grid;


    grid-template-columns:

    repeat(auto-fill,minmax(70px,1fr));


    gap:10px;

}



.masteryCell {

    min-height:70px;

    background:
    linear-gradient(
        white,
        #e7fff1
    );

    border:
    2px solid #b9e8dc;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-size:.75rem;

    text-align:center;

    color:#24404b;

}

body.dark .masteryCell {

    background:
    linear-gradient(
        #063447,
        #075064
    );

    border-color:
    rgba(150,255,255,.45);

    color:#ddffff;

}


/* ==========================================================
   NIGHT MODE
   Deep Sea Observation Terminal
========================================================== */


body.dark {


    color:#ddffff;


    background:

    radial-gradient(

    rgba(100,255,255,.18) 1px,

    transparent 1px

    ),

    linear-gradient(

    180deg,

    #031b35,

    #075064

    );


    background-size:

    14px 14px,
    auto;


}



body.dark header h1 {

    color:#91fff0;

}



body.dark .questionCard,
body.dark .dashboard,
body.dark .mastery,
body.dark .records,
body.dark .storage,
body.dark .settings {


    background:

    rgba(5,50,70,.78);


    border-color:

    rgba(150,255,255,.45);


}



body.dark .question {

    color:#8ffcff;

}



body.dark button {


    background:

    linear-gradient(

    white,

    #8defff

    );

}



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


@media(max-width:800px){


    .statsGrid {

        grid-template-columns:

        1fr 1fr;

    }


}



@media(max-width:600px){


    header h1 {

        font-size:2.2rem;

    }


    .question {

        font-size:3rem;

    }


    .statsGrid {

        grid-template-columns:

        1fr;

    }


}
/* ==========================================================
   HARD CORNER / EARLY WEB UI OVERRIDES
========================================================== */


/* Remove the modern app feeling */

.questionCard,
.dashboard,
.mastery,
.records,
.storage,
.settings,
.stat,
.toolbar label {

    border-radius:0;

}



/* Main windows become old software panels */

.questionCard,
.dashboard,
.mastery,
.records,
.storage,
.settings {


    border:

    2px solid white;


    box-shadow:

    8px 8px 0 rgba(40,100,120,.18),
    12px 12px 25px rgba(0,50,80,.12);


}



/* ==========================================================
   DECORATIVE OFFSET SQUARES
========================================================== */


.questionCard::before,
.dashboard::before,
.mastery::before,
.records::before {


    content:"";


    position:absolute;


    width:55px;

    height:55px;


    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.9),

    rgba(150,230,255,.7)

    );


    border:

    2px solid white;


    box-shadow:

    4px 4px 0 rgba(0,100,140,.2);


    z-index:0;


}



/* different placements */

.questionCard::before {

    top:-18px;

    left:-18px;

}



.dashboard::before {

    top:-14px;

    right:-14px;

}



.mastery::before {

    bottom:-15px;

    left:-15px;

}



.records::before {

    bottom:-15px;

    right:-15px;

}





/* Keep actual content above decoration */

.questionCard > *,
.dashboard > *,
.mastery > *,
.records > *,
.storage > *,
.settings > * {

    position:relative;

    z-index:1;

}



/* ==========================================================
   BUTTONS BECOME WEB 1.0 OBJECTS
========================================================== */


button {


    border-radius:0;


    position:relative;


    border:

    2px solid #ffffff;


    box-shadow:


    3px 3px 0 rgba(0,80,120,.3),
    inset 0 0 0 1px rgba(0,80,120,.15);


}



/* offset square behind buttons */


button::after {


    content:"";


    position:absolute;


    width:12px;

    height:12px;


    right:-7px;

    bottom:-7px;


    background:#8bdcff;


    border:

    2px solid white;


    z-index:-1;


}




/* ==========================================================
   INPUT FIELD
========================================================== */


#answerInput {


    border-radius:0;


    border:

    3px solid #3ca9c8;


    box-shadow:

    5px 5px 0 rgba(30,120,150,.2);


}



/* ==========================================================
   SQUARE LABELS
========================================================== */


.windowTitle {


    display:inline-block;


    padding:6px 12px;


    background:white;


    border:

    2px solid #8dd7e8;


    box-shadow:

    4px 4px 0 rgba(0,80,120,.15);


}
/* ==========================================================
   DECORATIVE CREATURE STICKERS
   Web 1.0 nature computer decorations
========================================================== */


/* Main question window decorations */

.questionCard {

    overflow:visible;

}



.questionCard::before {

    content:"🍀";

    position:absolute;

    left:-35px;

    top:-35px;

    font-size:42px;

    z-index:5;

    filter:

    drop-shadow(3px 3px 0 rgba(0,80,80,.2));

}



.questionCard::after {

    content:"🪲";

    position:absolute;

    right:-35px;

    bottom:-30px;

    font-size:45px;

    z-index:5;

    filter:

    drop-shadow(3px 3px 0 rgba(0,80,80,.2));

}



/* Stats panels */

.dashboard::after {

    content:"🌿";

    position:absolute;

    right:-25px;

    top:-25px;

    font-size:40px;

}



.mastery::after {

    content:"🍀";

    position:absolute;

    left:-25px;

    bottom:-25px;

    font-size:45px;

}



.records::after {

    content:"🐞";

    position:absolute;

    right:-20px;

    bottom:-25px;

    font-size:38px;

}





/* ==========================================================
   NIGHT MODE CREATURE SWAP
========================================================== */


body.dark .questionCard::before {

    content:"🫧";

}



body.dark .questionCard::after {

    content:"🐠";

}



body.dark .dashboard::after {

    content:"🪼";

}



body.dark .mastery::after {

    content:"🪸";

}



body.dark .records::after {

    content:"🐚";

}

body.dark button {

    color:#063342;

    background:

    linear-gradient(
        #e8ffff,
        #63c7df
    );

    box-shadow:

    3px 3px 0 rgba(0,255,255,.25);

}


body.dark select {

    color:#063342;

    background:#dffcff;

}
/* DARK MODE PANELS */

body.dark .storage,
body.dark .settings,
body.dark .stat {

    background:

    rgba(5,50,70,.78);

    color:#ddffff;

    border-color:

    rgba(150,255,255,.45);

}


body.dark .stat {

    box-shadow:

    4px 4px 0 rgba(0,255,255,.12);

}
body.dark h2,
body.dark li,
body.dark label {

    color:#ddffff;

}