:root {
    --color-bg: #FFFFFF;
    --color-text-dark: #102A43;
    --color-primary: #6B46C1;
    --color-secondary: #FF66CC;
    --color-cyan: #00C2CB;
    --color-pink: #FF66CC;
    --color-orange: #FF9933;
    --color-purple: #663399;
    --color-blue: #0077B6;
    
    --font-heading: 'Anton', sans-serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-text-dark);
    font-family: var(--font-body);
    overflow-x: hidden;
    padding-top: 70px; /* Space for fixed header */
}

/* --- UTILITIES --- */
.hidden { display: none !important; }

/* --- HEADER --- */
#global-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--color-text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between for icons on edges */
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.header-logo {
    height: 40px;
    width: auto;
    /* Center absolute or flex? Flex space-between puts icons on edges. 
       To center logo exactly, we might need absolute or 3-col grid. 
       Let's use absolute centering for logo to be safe. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.header-bug-icon-lucide {
    color: white;
    opacity: 0.8;
    width: 24px;
    height: 24px;
}

.header-bug-icon-lucide-left {
    rotate: 90deg;
}

/* --- VIEWS --- */
.view {
    display: none;
    padding: 20px;
    min-height: calc(100vh - 70px);
    animation: fadeIn 0.3s ease-in-out;
}

.view.active-view {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- HOME VIEW --- */
#home-view {
    position: relative;
    display: none;
    overflow: hidden; /* Contain background bugs */
}

#home-view.active-view {
    display: block; /* Content wrapper handles layout */
}

/* Background Decorations */
.bg-bug-deco {
    position: absolute;
    z-index: 0;
    opacity: 1; /* Mockup seems to have them visible, maybe behind content */
    pointer-events: none;
    width: 200px; /* Adjust size as needed */
    opacity: 0.5;
    transition: transform 0.2s ease-out;
}

.bg-top-right{
    top: 100px;
    right: -100px;
    /* Move Left (-x) and Up (-y) */
    transform: translate(calc(-1 * var(--scroll-move, 0px)), calc(-1 * var(--scroll-move, 0px))) rotate(calc(0deg + var(--scroll-rot, 0deg)));
}
.bg-top-left {
    top: 250px;
    left: -100px;
    /* Move Right (+x) and Up (-y) */
    transform: translate(var(--scroll-move, 0px), calc(-1 * var(--scroll-move, 0px))) rotate(calc(90deg + var(--scroll-rot, 0deg)));
}

.bg-middle-right {
    top: 900px;
    right: -270px;
    /* Move Left (-x) and Up (-y) */
    transform: translate(calc(-1 * var(--scroll-move, 0px)), calc(-1 * var(--scroll-move, 0px))) rotate(calc(0deg - var(--scroll-rot, 0deg)));
}

.bg-bottom-left {
    bottom: -250px;
    left: -300px;
    /* Move Right (+x) and Up (-y) */
    transform: translate(var(--scroll-move, 0px), calc(-1 * var(--scroll-move, 0px))) rotate(calc(90deg + var(--scroll-rot, 0deg)));
}

/* Content Wrapper */
.home-content-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Gap between Hero and Nav */
    padding-bottom: 60px;
}

/* Hero Section */
.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.home-hero-text {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    padding: 0 20px;
    line-height: 1.3;
    max-width: 600px;
}

.home-hero-img {
    width: 200px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

.home-hero-img-2{
    max-width: 500px;
    width: 80%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

/* Navigation Section */
.home-nav {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 350px;
}

.nav-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.nav-visual {
    width: 100%;
    height: auto;
}

.btn-nav {
    background-color: var(--color-primary);
    color: #FFF;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    padding: 12px 24px;
    width: 100%;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(107, 70, 193, 0.3);
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-nav:active {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(107, 70, 193, 0.3);
}

/* --- RULES VIEW --- */
#rules-view {
    position: relative;
    overflow: hidden;
}

.rules-bg-left {
    top: 250px;
    right: 450px;
    z-index: -1;
    /* Move Left (-x) and Up (-y) */
    transform: translate(calc(1.2 * var(--scroll-move, 0px)), calc(1.2 * var(--scroll-move, 0px))) rotate(calc(180deg + var(--scroll-rot, 0deg)));

}

.rules-bg-right {
top: 600px;
    right: -600px;
    z-index: -1;
    /* Move Left (-x) and Up (-y) */
    transform: translate(calc(-1.2 * var(--scroll-move, 0px)), calc(1.2 * var(--scroll-move, 0px))) rotate(calc(270deg + var(--scroll-rot, 0deg)));

}

.rules-bg-middle {
    top: 950px;
    right: 1300px;
    z-index: -1;
    /* Move Left (-x) and Up (-y) */
    transform: translate(calc(1.2 * var(--scroll-move, 0px)), calc(1.2 * var(--scroll-move, 0px))) rotate(calc(180deg + var(--scroll-rot, 0deg)));

}

.rules-header {
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

.btn-back-pill {
    background-color: var(--color-secondary);
    color: #FFF;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    padding: 8px 20px;
    border: none;
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
    transition: transform 0.1s;
}

.btn-back-pill:active {
    transform: scale(0.95);
}

.icon-back {
    width: 16px;
    height: 16px;
}

.rules-main-title {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    font-size: 2rem;
    text-transform: uppercase;
    line-height: 1;
}

.rules-content-container {
    max-width: 600px;
    margin: 0 auto; /* Center content if on large screen, but mockup looks left aligned or full width mobile */
    /* Actually mockup is mobile view, so full width is fine. */
    padding-bottom: 40px;
}

.rules-section {
    margin-bottom: 40px;
}

.rules-heading {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.rules-subheading {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    font-size: 1.2rem;
    text-transform: uppercase;

    padding: 20px 0;
}

.rules-list {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    font-size: 0.95rem;
    line-height: 1.5;
    list-style-position: outside;
    margin-left: 20px; /* Space for bullets */
    margin-bottom: 15px;
}

.rules-list li {
    margin-bottom: 5px;
}

.rules-strip-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Function Card Items */
.function-card-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}

.func-card-img {
    width: 80px;
    height: auto;
    flex-shrink: 0;
    /* Shadow? Mockup has subtle shadow maybe */
}

.func-card-info {
    flex-grow: 1;
}

.func-card-title {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.small-list {
    font-size: 0.85rem;
    margin-left: 15px;
    margin-bottom: 0;
}

/* --- GLOSSARY VIEW --- */
.filter-container {
    margin-bottom: 20px;
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #eee;
}

.filter-header {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    padding: 10px 0;

    text-transform: uppercase;
    color: var(--color-text-dark);
    transition: color 0.2s;
}

.filter-header:hover {
    color: var(--color-primary);
}

.filter-right-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-chevron {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

/* Rotate chevron when options are visible (not hidden) */
.filter-options:not(.hidden) ~ .filter-header .filter-chevron {
    /* This selector won't work because header is before options in DOM. 
       We need to toggle a class on the header or container. 
       Let's stick to the script toggling 'hidden' on options. 
       We can add an 'active' class to the header in script if we want rotation.
       For now, let's just style the static chevron or update script to toggle class on header too.
       Wait, the user just asked for the style match. I'll add the rotation logic to script if needed, 
       but for now let's just match the visual style. 
       Actually, let's update script to toggle a class on the container or header for the rotation.
    */
}

/* Better approach: Toggle class on filter-container or header in script */
.filter-container.active .filter-chevron {
    transform: rotate(180deg);
}

.filter-options {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    padding: 10px 0;
    flex-wrap: wrap;
}

.filter-options.hidden {
    display: none;
}

/* Hide default radio buttons */
.filter-options input[type="radio"] {
    display: none;
}

/* Style labels as pill buttons */
.filter-options label {
    display: inline-block;
    padding: 8px 20px;
    background-color: #f0f0f0;
    color: var(--color-text-dark);
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    user-select: none;
}

.filter-options label:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

/* Selected state using :has() */
.filter-options label:has(input:checked) {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 10px rgba(107, 70, 193, 0.3);
}

.glossary-list {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    padding: 20px 0;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

.glossary-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 60px;
}

.glossary-display-img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.glossary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    cursor: pointer;
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--color-text-dark);
    font-size: 1.2rem;
    transition: color 0.2s;
}

.glossary-header:hover {
    color: var(--color-primary);
}

.item-title {
    flex-grow: 1;
}

.item-right-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.item-chevron {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.glossary-item.active .item-chevron {
    transform: rotate(180deg);
}

.glossary-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    opacity: 0;
}

.glossary-item.active .glossary-content {
    max-height: 200px;
    opacity: 1;
    padding-top: 10px;
}

.definition-text {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    font-size: 1rem;
    line-height: 1.6;
}