/* ===========================================
GLOBAL STYLES
=========================================== */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Lacquer&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Special+Elite&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: url(../images/background-regular.png) no-repeat center center fixed;
background-size: cover;
min-height: 100vh;
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
color: white;
}


/* ===========================================
HEADER
=========================================== */
#header {
width: 100%;
}

.nav-container {
position: relative;
top: 20px;
left: 20px;
right: 40px;
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px);
z-index: 1000;
}

#case-title {
font-family: 'Lacquer', system-ui;
font-size: 2.2rem;
color: white;
text-shadow: 2px 2px 4px black;
margin: 0;
}

#nav-links {
font-family: 'Lacquer', system-ui;
font-size: 1.2rem;
}

#nav-links a {
color: white;
text-decoration: none;
margin-left: 30px;
transition: color 0.3s ease;
}

#nav-links a:hover {
color: #ffcccc;
}


/* ===========================================
MAIN SECTION
=========================================== */
main {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 40px;
}


/* ===========================================
FOOTER
=========================================== */
#footer {
width: 100%;
text-align: center;
font-family: 'Special Elite', system-ui;
font-size: 1rem;
color: white;
margin-top: 3rem;
}


/* ===========================================
FRAGMENT STYLES
=========================================== */
.fragment-1 {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
margin-top: 100px;
}

.fragment-box {
width: 500px;
padding: 1rem;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}

.fragment-name {
font-family: 'Special Elite', cursive;
color: white;
font-size: 2rem;
letter-spacing: 1px;
}


audio {
border-radius: 30px;
padding: 0.5rem;
max-width: 320px;
background-color: white;
outline: none;
display: block;
margin: 1.5rem auto 0 auto;
}


/* ===========================================
INTRO PAGE STYLING
=========================================== */
.main_section {
margin-top: 100px;
width: 100%;
font-family: 'Special Elite', monospace;
}

.main_section .row {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.main_section .col-md-6 {
width: 50%;
padding: 1rem;
}

.main_section img {
width: 500px;
height: 500px;
}

.main_section p {
margin-top: 3rem;
font-size: 1.2rem;
color: #eaeaea;
line-height: 1.8;
letter-spacing: 1.5px;
}

.main_section audio {
display: block;
margin: 4.5rem auto 0 auto;
border-radius: 30px;
background: white;
padding: 0.5rem;
width: 100%;
max-width: 300px;
}

.fragment-list{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}

#target{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
border: 2px dashed #bbb;
background-color: rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}

.answer_container{
display: flex;
align-items: center;
justify-content: space-between;
}

.answer_box{
width: 180px;
height: 180px;
padding: 5px;
border: 2px solid green;
}

.answer_box img{
width: 100%;
height: 100%;
}

.check_logos div{
display: none;
}

.frag_holder{
border: 1px red solid;
height: 210px;
width: 310px;
padding: 5px;
}

#Chapter-1-solve, #Chapter-2-solve, #Chapter-3-solve{
display: none;
}


/* FULL CHAPTER ORDERING STYLES */

#Full-chapter-solve{
display: none;
}

#full-chapter-1-audio,#full-chapter-2-audio,#full-chapter-3-audio{
display: none;
}

#full-chapters{
display: flex;
}

/* --------------------------------------------
ACCESSIBLE & BALANCED ABOUT PAGE STYLING
-------------------------------------------- */

#about-page {
background: url(../images/background-regular.png) no-repeat center center fixed;
background-size: cover;
color: #f5f5f5;
font-family: 'Special Elite', monospace;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}

/* Team Section Container */
.teams-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
width: 100%;
padding: 60px 20px;
}

/* Individual Team Group */
.team-column {
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid #444;
border-radius: 12px;
padding: 30px;
max-width: 800px;
width: 100%;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}

.team-title {
font-family: 'Lacquer', sans-serif;
font-size: 1.8rem;
text-align: center;
color: #80d0ff;
border-bottom: 2px solid #64c5ea;
padding-bottom: 10px;
margin-bottom: 20px;
letter-spacing: 0.5px;
}

/* Name/Role Table Style */
.team-roles-names {
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 20px;
}

.name-column,
.role-column {
display: flex;
flex-direction: column;
gap: 10px;
font-family: 'Courier New', monospace;
}

.name-column h4,
.role-column h4 {
font-size: 1.1rem;
color: #aad4ff;
margin-bottom: 5px;
}

.team-member {
font-size: 1rem;
color: #f0f0f0;
white-space: nowrap;
}

/* Audio and Foley Details */
.inline-credits {
margin-top: 20px;
font-family: 'Courier New', monospace;
color: #e0e0e0;
line-height: 1.6;
}

.inline-credits h2 {
font-size: 1.2rem;
margin-top: 24px;
color: #ffd8d8;
border-bottom: 1px solid #888;
padding-bottom: 5px;
}

.inline-credits p {
margin: 5px 0;
}

.inline-credits ol {
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}

.inline-credits ol li {
margin-bottom: 6px;
}

/* Footer Styling */
#footer {
width: 100%;
text-align: center;
font-family: 'Special Elite', system-ui;
font-size: 1rem;
color: #cccccc;
margin-top: auto;
padding: 20px 0;
}

.footer-links {
margin-top: 10px;
}

.footer-links a {
text-decoration: none;
color: #bbb;
margin: 0 10px;
font-size: 1.05rem;
transition: color 0.3s ease;
}

.footer-links a:hover {
color: #ffffff;
}


/* ===========================================
TABS (Listen / Solve)
=========================================== */
.tab {
display: flex;
justify-content: center;
margin-top: 40px;
gap: 10px;
}

.tab button, .chapter_solve_ready button, #restart_game button, #final-btn{
font-family: 'Special Elite', cursive;
font-size: 1.2rem;
padding: 10px 30px;
border-radius: 30px;
border: 3px solid white;
background-color: black;
color: white;
cursor: pointer;
transition: 0.3s;
}

#chapter_solve_ready{
display: flex;
flex-direction: column;
align-items: center;
}

.tab button:first-child.active,
.tab button:first-child:focus {
background-color: #5e1818;
}

.tab button:last-child.active,
.tab button:last-child:focus {
background-color: #5e1818;
}

/* ===========================================
CHAPTER CARDS
=========================================== */

#chapter-1-content, #chapter-2-content, #chapter-3-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
background: transparent;
border: 2px solid white;
margin: 40px auto;
}

#chapter-1-content .card-title, #chapter-2-content .card-title,#chapter-3-content .card-title, h1, h2, h3, h4 {
font-family: 'Special Elite', cursive;
color: white;
font-size: 2rem;
letter-spacing: 1px;
}

#chapter-1-solve, #chapter-2-solve,#chapter-3-solve{
background: none;
display: flex;
align-items: center;
border: none;
}

#Chapter-1-solve .card-title-solve, #Chapter-2-solve .card-title-solve, #Chapter-3-solve .card-title-solve{
font-family: 'Special Elite', cursive;
color: white;
font-size: 2rem;
letter-spacing: 1px;
}


#chapter-1-content .card-img-top,#chapter-2-content .card-img-top,#chapter-3-content .card-img-top {
width: 100%;
margin-top: 24px;
transition: border 0.3s ease;
}

#chapter-1-content audio,#chapter-2-content audio,#chapter-3-content audio {
width: 100%;
border-radius: 30px;
background-color: white;
padding: 5px;
}


/* Audio */
audio {
margin-top: 20px;
border-radius: 25px;
background-color: white;
padding: 8px;
width: 100%;
max-width: 400px;
}

/* ===========================================
FRAGMENT GRID STYLING
=========================================== */
.fragment-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 40px;
padding: 20px;
justify-items: center;
}


.frag_holder {
border: none;
width: 180px;
height: 180px;
text-align: center;
font-family: 'Special Elite', cursive;
border: 2px dashed #bbb;
background-color: rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}

.frag_holder img.fragment {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
cursor: grab;
}

.frag_holder p {
color: white;
margin-top: 5px;
font-size: 0.9rem;
}

/* ===========================================
INSTRUCTION TEXT
=========================================== */
#Chapter-1-solve > h5,
#chapter-1-solve > h5,
#Chapter-2-solve > h5,
#chapter-2-solve > h5,
#Chapter-3-solve > h5,
#chapter-3-solve > h5 {
font-family: 'Special Elite', cursive;
font-size: 1.8rem;
color: white;
margin-top: 50px;
}


.solve-instruction {
text-align: center;
font-family: 'Special Elite', cursive;
font-size: 1.4rem;
color: white;
margin-top: 50px;
margin-bottom: 10px;
}




/* ===========================================
ANSWER AREA
=========================================== */
.answer_container {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 90px;
}

.answer {
text-align: center;
font-family: 'Special Elite', cursive;
color: white;
}


.answer p{
font-size: 1.2rem;
}

.answer_box {
background-color: rgba(255, 255, 255, 0.05);
border: 2px dashed white;
padding: 5px;
}

.check_logos {
margin-top: 10px;
}

.check_logos .correct {
color: #8aff8a;
}

.check_logos .replace {
color: #6ad2ff;
}

.check_logos .incorrect {
color: #ff6b6b;
}

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

.buttons{
display: flex;
align-items: center;
justify-content: center;
}

.check,.reset
{
font-family: 'Special Elite', cursive;
padding: 10px 30px;
font-size: 1rem;
margin: 40px 30px;
border-radius: 30px;
border: none;
background-color: white;
color: black;
cursor: pointer;
transition: 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.check:hover,
.reset:hover {
background-color: #5e1818;
color: white;
}

/* ===========================================
ERROR BOX
=========================================== */
#error_box {
text-align: center;
color: #ff9999;
font-family: 'Courier New', monospace;
margin-top: 20px;
font-size: 1.1rem;
}


/* ===============================
FULL CHAPTER PAGE STYLING
================================ */

#full-chapters {
display: flex;
justify-content: center;
gap: 60px;
margin: 60px;
}

.chapter-box {
padding: 10px;
display: flex;
justify-content: center;
}


.chapter-name {
text-align: center;
font-family: 'Special Elite', cursive;
color: white;
font-size: 1.7rem;
margin-bottom: 10px;
}

.audio-containers {
display: flex;
justify-content: center;
gap: 30px;
}

.audio-containers audio {
border-radius: 25px;
background-color: white;
padding: 0.5rem;
max-width: 350px;
}

/* ===============================
FULL CHAPTER SOLVE SECTION
================================ */
#Full-chapter-solve {
margin-top: 40px;
text-align: center;
}

.chapter-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 40px;
padding: 20px;
justify-items: center;
}


.chapter-list .frag_holder {
border: none;
width: 180px;
height: 180px;
text-align: center;
font-family: 'Special Elite', cursive;
border: 2px dashed #bbb;
background-color: rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}

.chapter-list  .frag_holder img {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
cursor: grab;
}

.frag_holder p {
color: white;
margin-top: 5px;
font-size: 0.9rem;
}


#Chapter-1-solve, #Chapter-2-solve,#Chapter-3-solve {
flex-direction: column;
}

.card-img-top-1{
width: 90%;
height: 90%;
}

#correct-audio h2{
margin-top: 60px;
color:#6ad2ff;
text-shadow: 1.5px 1.5px #772d2d;
font-weight: bold;
}
#correct-audio h3{
margin: 50px;
color:#6ad2ff;
text-shadow: 1.5px 1.5px #772d2d;
font-weight: bold;
}


#correct-audio  .chapter_solve_ready .congrats-msg{
color: #772d2d;
text-shadow: 1px 1px #e0e0e0;
font-weight: bold;
font-size: 2.5rem;
}

#correct-audio  .chapter_solve_ready h3{
color: #772d2d;
text-shadow: 1px 1px #e0e0e0;
font-weight: bold;
font-size: 2.5rem;
}


.chapter_solve_ready button{
background-color: #772d2d;
}

#restart_game button, #final-btn{
margin-top: 40px;
background-color: #772d2d;
}

.final-btn{
display: flex;
justify-content: center;
}




/* ========== 768px (tablets & small landscape phones) ========== */


@media screen and  (min-width: 769px) {
    #chapter-1-content, #chapter-2-content, #chapter-3-content {
        width: 50%;
    }

    #chapter-1-solve, #chapter-2-solve, #chapter-3-solve {
        width: 50%;
        margin: 0 auto;
        align-items: center;
    }

}
@media screen and  (min-width: 1024px) {
    #chapter-1-content, #chapter-2-content, #chapter-3-content {
        width: 35%;
    }

    #chapter-1-solve, #chapter-2-solve, #chapter-3-solve {
        width: 35%;
        margin: 0 auto;
        align-items: center;
    }

}

@media screen and  (max-width: 768px) {


#nav-links {
flex-wrap: wrap;
gap: 15px;
}

.main_section .row,
.teams-container,
.fragment-list,
.chapter-list,
.answer_container {
flex-direction: column;
gap: 20px;
}

.col-md-6,
.team-column,
.frag_holder,
.answer_box {
width: 100% !important;
padding: 1rem;
}

.main_section img,
.card-img-top-1 {
width: 100%;
height: auto;
}

.buttons {
gap: 10px;
}

.check, .reset {
    margin: 20px 10px;
}

#chapter-1-content, #chapter-2-content, #chapter-3-content {
    margin: 40px 100px;
}
}

/* ========== 480px (standard smartphones) ========== */
@media screen and  (max-width: 480px) {
.nav-container {
flex-direction: row;
align-items: flex-start;
padding: 0;
}

#case-title {
font-family: 'Lacquer', system-ui;
font-size: 1.5rem;
color: white;
text-shadow: 2px 2px 4px black;
margin: 0;
}


#nav-links {
font-size: 1.1rem;
display: flex;
flex-direction: row;
gap: 2px;
}

.main_section .col-md-6,
.team-column,
.frag_holder,
.answer_box {
width: 100% !important;
padding: 0.5rem;
}

.main_section img,
.card-img-top-1 {
width: 100%;
height: auto;
}


.fragment-list,
.chapter-list,
.audio-containers,
.answer_container {
flex-direction: column;
gap: 20px;
}

.fragment-box {
    width: auto;
}
audio {
    width: 95%;
    max-width: 100%;
}

footer p{
    margin-top: 1rem;
    margin-bottom: 0;
}

#chapter-1-solve, #chapter-2-solve, #chapter-3-solve,#chapter-1-solve, #chapter-2-solve, #chapter-3-solve {
    margin: 0 20px;
}

}

/* ========== 320px (small phones) ========== */
@media screen and (max-width: 320px) {
.check, .reset {
    padding: 5px 20px;
}    

.nav-container {
display: flex;
flex-direction: row;
padding: 0;
}
#case-title {
font-family: 'Lacquer', system-ui;
font-size: 1.2rem;
color: white;
text-shadow: 2px 2px 4px black;
margin: 0;
}

#nav-links {
display: flex;
flex-direction: row;
gap: 8px;
font-size: 0.9rem;
}

#nav-links a {
    color: white;
    text-decoration: none;
    margin-left: 0px;
    transition: color 0.3s ease;
}

.main_section .row,
.teams-container,
.audio-containers,
.fragment-list,
.chapter-list,
.answer_container {
    flex-direction: column !important;
    gap: 15px;
}

.main_section p {
    margin-top: 3rem;
    font-size: 1rem;
    color: #eaeaea;
    line-height: 1.8;
    letter-spacing: 1.5px;
}

.main_section p {
    font-size: 1.1rem;
    margin: 1em 0.5em;
}

.main_section audio {
    margin: 1rem auto 0 auto;
}

.main_section img,
.card-img-top-1 {
    width: 100%;
    height: auto;
}

audio {
width: 100%;
max-width: 100%;
}

.name-column, .role-column {
    flex-direction: column;
    gap: 10px;
    font-family: 'Courier New', monospace;
    flex-wrap: wrap;
}

.team-roles-names {
    justify-content: space-between;
    margin-bottom: 20px;
}

.team-member {
    white-space: wrap;
}

.inline-credits ol {
    padding-left: 25px;
}

footer p{
    margin-top: 1rem;
    margin-bottom: 0;
}

#chapter-1-content, #chapter-2-content, #chapter-3-content {
    margin: 40px 20px;
}

.fragment-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.tab button, .chapter_solve_ready button, #restart_game button, #final-btn {
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    padding: 5px 20px;
}

}