/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none; /* iOS Safari */
    -ms-user-select: none;     /* oude Edge */
    user-select: none;

    -webkit-touch-callout: none; /* voorkomt long-press menu */
}

/* Global Link Styling */
a {
    color: #ffffff;
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.3s ease, color 0.3s ease;
}

a:hover {
    /* scale i.p.v. font-size zodat de baseline niet verschuift.
       translateY(-4px) tilt de link een stukje omhoog bij hover. */
    transform: translateY(-4px) scale(1.1);
}

/* Global Image with URL Styling */
a img {
    border: 2px solid #ff0000;
    transition: transform 0.3s ease, border-color 0.3s ease;
    border-radius: 4px;
}

a img:hover {
    transform: translateY(-3px);
    border-color: #ff3333;
}

html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    background-color: #000000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #ffffff;
    position: relative;
}

/* tsParticles Canvas */
#tsparticles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: 1;
    pointer-events: none;
}

#tsparticles canvas {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Main Container */
.container {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 3.5rem 2rem 0;
}

body.is-home .container {
    justify-content: flex-start;
}

/* Op home staat de titel IN de page-content (via JS — tussen de links-rij
   en de images), dus .center-content is leeg en hoeft geen shift. Op andere
   pagina's staat de titel gewoon in .center-content, geen shift nodig. */
body:not(.is-home) {
    --home-center-shift: 0px;
}

/* Home: titel zit in de page-content. Voeg ruimte toe boven/onder zodat
   er duidelijk scheiding is tussen de Apps/Games/Websites-rij en de
   afbeeldingen daaronder. */
.main-title.main-title--in-content {
    display: block;
    margin: 9rem auto 3.5rem;
    text-align: center;
}

@media (max-width: 768px) {
    .main-title.main-title--in-content {
        margin: 5rem auto 2.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RD-BUTTON — herbruikbare knop-styling voor editor + live-site.
   Gebruikt voor <a class="rd-btn">Knop</a> die via de editor-block
   "Button" wordt gemaakt. Dezelfde look&feel als de editor's eigen
   "Menu Structuur" knop: rode rand, semi-transparant rode achtergrond,
   afgeronde hoeken. Op hover wordt de achtergrond volledig dezelfde
   kleur als de rand.
   ═══════════════════════════════════════════════════════════════════════ */
.rd-btn {
    display: inline-block;
    padding: 0.55em 1.4em;
    font-size: 25pt;
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 0, 0, 0.3);
    border: 1px solid rgba(255, 0, 0, 0.5);
    border-radius: 6px;
    cursor: pointer;
    transition: background 180ms ease, transform 120ms ease;
    user-select: none;
}

.rd-btn:hover,
.rd-btn:focus {
    background: rgba(255, 0, 0, 0.5); /* gelijk aan de rand-kleur */
    color: #ffffff;
    outline: none;
}

.rd-btn:active {
    transform: translateY(1px);
}

/* Kleinere variant (optioneel: class="rd-btn rd-btn--sm") */
.rd-btn.rd-btn--sm {
    font-size: 14pt;
    padding: 0.4em 1em;
}



body.is-booting .center-content {
    opacity: 0;
    animation: none;
    transition: none;
}

body.is-home .side-menu {
    --menu-shift-y: 56px;
}

body.is-home .menu-item {
    font-size: 2rem;
}

/* Center Content
   Gebruikt padding-top (i.p.v. transform) om de home-titel naar het midden
   te schuiven. Padding duwt de page-container (met de afbeeldingen) NATUUR-
   LIJK mee naar beneden, zodat er geen overlap meer ontstaat tussen de titel
   en de content daaronder — wat bij een transform wél gebeurde omdat transform
   alleen visueel schuift en de document-flow ongemoeid laat. */
.center-content {
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
    perspective: 900px;
    transform-style: preserve-3d;
    width: 100%;
    padding-top: var(--home-center-shift, 0px);
    transition: padding-top 1100ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.main-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    user-select: none;
    text-shadow:
        0 18px 55px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.9;
    user-select: none;
}

.site-notice {
    display: none;
    margin-top: 0.9rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
    text-shadow:
        0 18px 55px rgba(0, 0, 0, 0.75),
        0 10px 28px rgba(0, 0, 0, 0.55);
}

.site-notice-line {
    display: block;
}

.site-notice-line + .site-notice-line {
    margin-top: 0.35rem;
}

body.is-home .site-notice,
body.is-info .site-notice {
    display: block;
}

/* Per-letter styling (the JS wraps each character in a span) */
.letter-wrap {
    display: inline-block;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform 780ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 560ms ease;
}

.letter {
    display: inline-block;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    opacity: 1;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.55),
        0 18px 55px rgba(0, 0, 0, 0.75);
    animation: none;
}

.letter-char {
    display: inline-block;
    transition: opacity 260ms ease;
    opacity: var(--char-opacity, 1);
}

.letter-scramble {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 260ms ease;
    opacity: var(--scramble-opacity, 0);
}

@keyframes letterIn {
    from {
        opacity: 0;
        filter: blur(0.2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.letter-space {
    width: 0.35em;
}

/* Side Menu */
.side-menu {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: calc(3.25rem + 40px + var(--menu-shift-y, 0px));
    transform: translateY(var(--menu-hide-y, 0px));
    width: 100%;
    padding: 0.4rem 0.4rem;
    background: rgba(0, 0, 0, 0.45);
    border-top: 3px solid rgba(255, 0, 0, 0.42);
    border-bottom: 3px solid rgba(255, 0, 0, 0.42);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1;
    transition:
        bottom 1560ms cubic-bezier(0.2, 0.9, 0.2, 1),
        transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 260ms ease;
    margin-top: 0;
    pointer-events: auto;
    display: flex;
    justify-content: center;
}

.side-menu.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.menu-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.2rem;
    text-align: center;
    padding: 0.15rem 0.95rem;
}

.menu-list li {
    will-change: transform;
}

.menu-item {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.35rem 0;
    text-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(0, 0, 0, 0.35);
    transition:
        color 0.3s ease,
        text-shadow 0.3s ease,
        transform 0.3s ease,
        font-size 1560ms cubic-bezier(0.2, 0.9, 0.2, 1);
    position: relative;
    opacity: 0;
    animation: slideInRight 0.5s ease-in-out forwards;
    pointer-events: auto;
}

.menu-list li:nth-child(1) .menu-item { animation-delay: 0.1s; }
.menu-list li:nth-child(2) .menu-item { animation-delay: 0.2s; }
.menu-list li:nth-child(3) .menu-item { animation-delay: 0.3s; }
.menu-list li:nth-child(4) .menu-item { animation-delay: 0.4s; }
.menu-list li:nth-child(5) .menu-item { animation-delay: 0.5s; }

.menu-item:hover {
    color: #ff0000;
    text-shadow:
        0 0 10px rgba(255, 0, 0, 0.5),
        0 8px 22px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.menu-item.is-active {
    color: #ff0000;
    text-shadow:
        0 0 12px rgba(255, 0, 0, 0.55),
        0 8px 22px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.menu-item.is-clicked {
    transform: translateY(1px) scale(0.98);
}

/* Page Container */
.page-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2.5rem;
    padding-bottom: calc(3.25rem + 48px);
    position: relative;
    --page-slide-duration: 2000ms;
    --page-slide-top: 2.5rem;
    --page-slide-in-x: 0px;
    --page-slide-in-y: 0px;
    --page-slide-out-x: 0px;
    --page-slide-out-y: 0px;
}

.page-container.is-transitioning {
    overflow: hidden;
}

.page-container.is-transitioning .page {
    pointer-events: none;
}

.page.page-slide-in,
.page.page-slide-out {
    will-change: transform, opacity;
    transition:
        transform var(--page-slide-duration, 560ms) cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity var(--page-slide-duration, 560ms) ease;
}

.page.page-slide-in {
    position: absolute;
    left: 50%;
    top: var(--page-slide-top, 2.5rem);
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, 0) translate(var(--page-slide-in-x, 0px), var(--page-slide-in-y, 0px));
}

.page.page-slide-out {
    position: absolute;
    left: 50%;
    top: var(--page-slide-top, 2.5rem);
    opacity: 1;
    z-index: 2;
    transform: translate(-50%, 0);
}

.page.page-slide-play.page-slide-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.page.page-slide-play.page-slide-out {
    opacity: 0;
    transform: translate(-50%, 0) translate(var(--page-slide-out-x, 0px), var(--page-slide-out-y, 0px));
}

.page {
    width: min(1100px, 100%);
    min-height: 1px;
    text-align: center;
}

/* Editor-pagina: volledige viewport-breedte gebruiken zodat er maximale
   ruimte is voor canvas + rechterpaneel (blocks / selectors / traits).
   Overschrijft de 1100px-cap van .page én de horizontale padding van
   .container / .page-container die anders de editor visueel smaller maakt.
   De body.is-editor class wordt gezet door main.js bij page-change. */
body.is-editor .page[data-page="editor"] {
    width: 100%;
    max-width: none;
    text-align: left;
}

body.is-editor .page-container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.75rem;
}

body.is-editor .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* Editor-pagina: hoofd-titel en site-notice boven de editor minimaliseren
   zodat de canvas meer verticale ruimte heeft. */
body.is-editor .center-content {
    margin-bottom: 0.25rem;
}

body.is-editor .main-title {
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    margin-bottom: 0.25rem;
}

body.is-editor .site-notice {
    display: none !important;
}

@media (max-width: 980px) {
    .main-title {
        font-size: clamp(2.4rem, 7vw, 4.6rem);
    }

    .site-notice {
        font-size: clamp(0.85rem, 2.4vw, 1rem);
    }

    body.is-home .side-menu {
        --menu-shift-y: 28px;
    }

    body.is-home .menu-item {
        font-size: clamp(1.15rem, 3.2vw, 1.55rem);
    }

    .menu-item {
        font-size: clamp(0.95rem, 2.2vw, 1rem);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 2.4rem 1.2rem calc(10.5rem + env(safe-area-inset-bottom));
        align-items: center;
    }

    .center-content {
        text-align: center;
        margin-bottom: 1rem;
        width: 100%;
    }

    .main-title {
        font-size: clamp(1.6rem, 8.5vw, 2.5rem);
        text-align: center;
    }

    .site-notice {
        text-align: center;
        font-size: clamp(0.85rem, 3.6vw, 1rem);
        line-height: 1.4;
    }

    .page-container {
        padding-top: 1rem;
    }

    .side-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(2.2rem + env(safe-area-inset-bottom) + var(--menu-shift-y, 0px));
        transform: translateY(var(--menu-hide-y, 0px));
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .side-menu.is-hidden {
        opacity: 1;
        pointer-events: auto;
    }

    .menu-list {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .menu-item {
        font-size: clamp(0.78rem, 3.6vw, 0.95rem);
        animation: none;
        opacity: 1;
        padding: 0.25rem 0;
    }

    body.is-home .side-menu {
        --menu-shift-y: 0px;
    }

    /* Home-menu blijft OOK op mobiel horizontaal — niet stacken in kolom.
       Uniforme look met desktop. Items mogen wrapen als er te veel zijn. */
    body.is-home .menu-list {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.9rem 1.2rem;
    }

    body.is-home .menu-list li {
        width: auto;
    }

    body.is-home .menu-item {
        display: inline-block;
        font-size: clamp(0.85rem, 3.6vw, 1.05rem);
    }
}

.portfolio-overview {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-heading {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    text-shadow:
        0 18px 55px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 980px) {
    .portfolio-grid .portfolio-card {
        flex-basis: 240px;
    }
}

@media (max-width: 640px) {
    .portfolio-grid .portfolio-card {
        flex-basis: 100%;
        max-width: 520px;
    }
}

.portfolio-card {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1 1 260px;
    max-width: 320px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 0, 0, 0.0);
    transition:
        transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.portfolio-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 0, 0, 0.35);
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(255, 0, 0, 0.18);
}

.portfolio-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.05);
}

.portfolio-name {
    padding: 0.9rem 1rem 0.95rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    text-shadow:
        0 18px 55px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.portfolio-detail {
    width: 100%;
    text-align: center;
}

.portfolio-back {
    display: inline-block;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    transition: color 180ms ease;
    text-shadow:
        0 18px 55px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.portfolio-back:hover {
    color: rgba(255, 0, 0, 0.95);
}

.portfolio-detail-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 1.15rem;
    text-shadow:
        0 18px 55px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.portfolio-gallery img:only-child,
.portfolio-gallery img:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: min(900px, 100%);
}

@media (max-width: 900px) {
    .portfolio-gallery {
        grid-template-columns: 1fr;
    }
}

.portfolio-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.40);
}

.portfolio-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    text-shadow:
        0 18px 55px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.portfolio-text p + p {
    margin-top: 0.9rem;
}

.game-container {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.40);
}

.game-container embed {
    display: block;
    width: 100%;
    height: 100%;
}

/* Game container sizing is handled in JavaScript for fixed dimensions */

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

@keyframes letterIn {
    from {
        opacity: 0;
        filter: blur(0.2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .center-content {
        animation: none;
    }
    .menu-item {
        animation: none;
        opacity: 1;
    }
    .letter {
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-item {
        font-size: 0.9rem;
        padding: 0.3rem 0;
    }
    
    .main-title {
        font-size: clamp(2rem, 6vw, 4rem);
    }
    
    .subtitle {
        font-size: clamp(0.8rem, 2vw, 1.2rem);
    }

    /* Home gebruikt flex-start zodat de Apps/Games/Websites-links bovenaan
       staan. De titel (via JS in de content) en de afbeeldingen volgen
       natuurlijk eronder — geen vertical centering op home, anders zakken
       de links naar het midden weg. */
    body.is-home .container {
        justify-content: flex-start;
        min-height: 100vh;
    }

    body.is-home .center-content {
        min-height: 0;
    }
}

@media (max-height: 600px) {
    .menu-item {
        padding: 0.3rem 0;
    }
}

/* Content Editor Styles */
.editor-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.editor-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-controls label {
    color: #ffffff;
    font-weight: 500;
}

.editor-controls select {
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: inherit;
}

.editor-controls select option {
    background: #000000;
    color: #ffffff;
}

.editor-controls button {
    background: #ff0000;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.editor-controls button:hover {
    background: #cc0000;
}

/* Quill Editor Dark Theme */
.ql-toolbar {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.ql-container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

#editor-container {
    min-height: 300px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin-top: 10px;
    display: block !important;
    visibility: visible !important;
}

.ql-editor {
    color: #ffffff !important;
    min-height: 300px;
}

.ql-editor p {
    color: #ffffff !important;
}

.ql-toolbar .ql-stroke {
    stroke: #ffffff !important;
}

.ql-toolbar .ql-fill {
    fill: #ffffff !important;
}

.ql-toolbar button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ql-toolbar button.ql-active {
    background: rgba(255, 0, 0, 0.3) !important;
}

/* Quill Font Size Classes */
.ql-editor .ql-size-small {
    font-size: 0.75rem !important;
}

.ql-editor .ql-size-large {
    font-size: 1.5rem !important;
}

.ql-editor .ql-size-huge {
    font-size: 2.25rem !important;
}

/* Quill size dropdown labels */
.ql-toolbar .ql-size .ql-picker-label::before {
    content: "Size";
}

.ql-toolbar .ql-size .ql-picker-item[data-value="0.75rem"]::before {
    content: "Small";
}

.ql-toolbar .ql-size .ql-picker-item[data-value="1rem"]::before {
    content: "Normal";
}

.ql-toolbar .ql-size .ql-picker-item[data-value="1.5rem"]::before {
    content: "Large";
}

.ql-toolbar .ql-size .ql-picker-item[data-value="2.25rem"]::before {
    content: "Huge";
}

/* Quill line-height dropdown labels */
.ql-toolbar .ql-lineheight .ql-picker-label::before {
    content: "Line Height";
}

.ql-toolbar .ql-lineheight .ql-picker-item[data-value="1"]::before {
    content: "1.0";
}

.ql-toolbar .ql-lineheight .ql-picker-item[data-value="1.5"]::before {
    content: "1.5";
}

.ql-toolbar .ql-lineheight .ql-picker-item[data-value="2"]::before {
    content: "2.0";
}

.ql-toolbar .ql-lineheight .ql-picker-item[data-value="2.5"]::before {
    content: "2.5";
}

.ql-toolbar .ql-lineheight .ql-picker-item[data-value="3"]::before {
    content: "3.0";
}

/* General Quill picker dropdown styling */
.ql-toolbar .ql-picker-label {
    color: #ffffff !important;
}

.ql-toolbar .ql-picker-options {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ql-toolbar .ql-picker-item {
    color: #ffffff !important;
}

.ql-toolbar .ql-picker-item:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* Grid toolbar button */
.ql-toolbar .ql-grid::before {
    content: "⊞ Grid";
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}

.ql-toolbar .ql-grid {
    width: auto !important;
    padding: 0 6px !important;
}

.ql-toolbar .ql-grid:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px;
}

/* Flexbox Layout Classes for Editor Content */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.flex-item {
    flex: 1;
    min-width: 250px;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.flex-item h3 {
    margin-top: 0;
    color: #ffffff;
    font-size: 1.2rem;
}

.flex-item p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Game/Project Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.game-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.game-item h3 {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.game-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Simple Grid Layout Classes */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

/* Auto styling for grid items */
.grid-2 > *,
.grid-3 > *,
.grid-4 > * {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-2 > *:hover,
.grid-3 > *:hover,
.grid-4 > *:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Auto styling for headers in grid items */
.grid-2 > * h1,
.grid-2 > * h2,
.grid-2 > * h3,
.grid-2 > * h4,
.grid-3 > * h1,
.grid-3 > * h2,
.grid-3 > * h3,
.grid-3 > * h4,
.grid-4 > * h1,
.grid-4 > * h2,
.grid-4 > * h3,
.grid-4 > * h4 {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Auto styling for images in grid items */
.grid-2 > * img,
.grid-3 > * img,
.grid-4 > * img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 1rem;
    display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
    
    .flex-item {
        min-width: 100%;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .game-item {
        padding: 1rem;
    }
    
    /* Make grids responsive */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .grid-2 > *,
    .grid-3 > *,
    .grid-4 > * {
        padding: 1rem;
    }
}


/* FIXED GRID FOR QUILL (uses <p> instead of div) */
.grid-2, .grid-3 {
  display: grid !important;
  gap: 20px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.grid-2 > span,
.grid-3 > span {
  display: block;
  min-width: 0;
}

/* GrapesJS Container Styling */
#gjs {
  position: relative;
  z-index: 10;
  height: 82vh !important;
  width: 100% !important;
  max-height: 85vh;
  border: 1px solid rgba(255, 0, 0, 0.4);
  margin-top: 12px;
}

/* GrapesJS canvas: NIET padding toevoegen op .gjs-frame — dit veroorzaakt
   dat GrapesJS z'n selectie-overlay uit sync raakt (selectie verschijnt te
   hoog). Gebruik eventueel margin/padding op de body ín het iframe i.p.v. */

/* ── GrapesJS Red Theme ───────────────────────────────────── */

/* Top toolbar: options + commands panels */
.gjs-pn-options,
.gjs-pn-commands {
  background: rgba(40, 0, 0, 0.88) !important;
  border-bottom: 1px solid rgba(255, 0, 0, 0.45) !important;
}

/* Right sidebar panel strip (views tabs) */
.gjs-pn-views {
  background: rgba(40, 0, 0, 0.88) !important;
  border-left: 1px solid rgba(255, 0, 0, 0.45) !important;
  border-bottom: 1px solid rgba(255, 0, 0, 0.35) !important;
}

/* Right sidebar content area */
.gjs-pn-views-container {
  background: rgba(20, 0, 0, 0.92) !important;
  border-left: 1px solid rgba(255, 0, 0, 0.45) !important;
}

/* All panel buttons — normal state */
.gjs-pn-btn {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 4px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

/* Panel button hover */
.gjs-pn-btn:hover {
  background: rgba(255, 0, 0, 0.25) !important;
  color: #fff !important;
}

/* Panel button active */
.gjs-pn-active {
  background: rgba(255, 0, 0, 0.35) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 0, 0, 0.55) !important;
  border-radius: 4px !important;
}

/* Blocks category title bar */
.gjs-block-category .gjs-title,
.gjs-block-category > .gjs-title {
  background: rgba(255, 0, 0, 0.22) !important;
  border-bottom: 1px solid rgba(255, 0, 0, 0.35) !important;
  color: #fff !important;
}

/* Style manager sector title bar */
.gjs-sm-sector .gjs-sm-title,
.gjs-sm-sector > .gjs-sm-title {
  background: rgba(255, 0, 0, 0.22) !important;
  border-bottom: 1px solid rgba(255, 0, 0, 0.35) !important;
  color: #fff !important;
}

/* Trait manager title bar */
.gjs-trt-header {
  background: rgba(255, 0, 0, 0.22) !important;
  border-bottom: 1px solid rgba(255, 0, 0, 0.35) !important;
}

/* Layer rows */
.gjs-layer {
  border-bottom: 1px solid rgba(255, 0, 0, 0.18) !important;
}

.gjs-layer.gjs-selected,
.gjs-layer:hover {
  background: rgba(255, 0, 0, 0.18) !important;
}

/* GrapesJS primary background (panels, dropdowns) */
.gjs-one-bg {
  background-color: rgba(20, 0, 0, 0.95) !important;
}

/* GrapesJS secondary background */
.gjs-two-bg {
  background-color: rgba(35, 0, 0, 0.9) !important;
}

/* Selected component highlight colour */
.gjs-four-color,
.gjs-four-color-h:hover {
  color: rgba(255, 80, 80, 1) !important;
}

.side-menu {
  z-index: 5 !important;
}

#save-content {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(255, 0, 0, 0.3);
  border: 1px solid rgba(255, 0, 0, 0.5);
  color: white;
  border-radius: 6px;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  margin: 10px 0 0;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

#save-content:hover {
  background: rgba(255, 0, 0, 0.45);
}

/* Top toolbar layout — panels naast elkaar zonder overlap
   .gjs-pn-commands  = links (undo/redo/preview)
   .gjs-pn-devices-c = midden-links (device switcher)
   .gjs-pn-options   = rechts van devices (FILES etc.)
   .gjs-pn-views     = uiterst rechts (4 icoontjes) */
.gjs-pn-commands {
  left: 0 !important;
  width: 160px !important;
  box-sizing: border-box;
  padding: 0 6px;
}

.gjs-pn-devices-c {
  left: 160px !important;
  right: auto !important;
  width: 220px !important;
  height: 40px !important;
  min-height: 0 !important;
  max-height: 40px !important;
  box-sizing: border-box;
  padding: 4px 10px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

/* Compacter device-switcher binnen de panel */
.gjs-pn-devices-c .gjs-pn-buttons,
.gjs-pn-devices-c .gjs-select,
.gjs-pn-devices-c select {
  height: 28px !important;
  line-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Top-toolbar panels vaste hoogte zodat .gjs-pn-views er netjes onder past */
.gjs-pn-commands,
.gjs-pn-options {
  height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box;
}

.gjs-pn-options {
  left: 380px !important;
  right: 300px !important;
  width: auto !important;
  box-sizing: border-box;
  padding: 0 10px;
}

/* Subtiele verticale separators zodat de panels visueel gescheiden zijn */
.gjs-pn-devices-c,
.gjs-pn-options {
  border-left: 1px solid rgba(255, 0, 0, 0.35) !important;
}

.gjs-pn-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.gjs-pn-btn {
  flex: 0 0 auto;
}

.gjs-pn-buttons::-webkit-scrollbar {
  height: 6px;
}

.gjs-pn-buttons::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
}

.gjs-blocks-c {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  /* Extra bodem-padding zodat de laatste blocks (bv. "3 Col") niet achter
     het onderliggende menu/toolbar vallen en scrollbaar bereikbaar blijven. */
  padding-bottom: 120px;
}

/* Ook de blocks-panel container zelf moet scrollen als de lijst langer is */
.gjs-pn-views-container,
.gjs-pn-views .gjs-blocks-c {
  overflow-y: auto;
}

.gjs-block {
  flex: 1 1 45%;
  text-align: center;
}

/* Views panel: 2x2 grid of icon buttons.
   Bewuste vaste hoogte zodat .gjs-pn-views-container er exact onder past. */
.gjs-pn-views {
  top: 40px !important;       /* onder top-toolbar (commands/devices/options) */
  height: 90px !important;
  padding: 6px 4px !important;
  box-sizing: border-box;
}

.gjs-pn-views .gjs-pn-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  justify-items: stretch;
  align-items: stretch;
}

.gjs-pn-views .gjs-pn-btn {
  width: auto !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content-paneel start onder de 4-icons met 20px ruimte ertussen.
   .gjs-pn-views-container is absolutely positioned, dus `top` is de enige
   manier om 'm te verschuiven — margin-top werkt niet. */
.gjs-pn-views-container {
  top: 150px !important;   /* 40 (top-bar) + 90 (views-buttons) + 20 gap */
  padding-top: 8px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BREDER RECHTERPANEEL — meer ruimte voor Menu Structuur knop,
   breadcrumb (body > div > ...), selectors en traits. GrapesJS-default
   is 15% (vaak ~230px). We zetten 'm op een vaste bredere maat zodat
   labels en knoppen niet afgekapt worden.
   .gjs-cv-canvas (de editor-canvas) moet met dezelfde waarde naar links
   worden ingekort zodat ze niet overlappen.
   ═══════════════════════════════════════════════════════════════════════ */
.gjs-pn-views,
.gjs-pn-views-container {
  width: 360px !important;
}

.gjs-cv-canvas {
  width: calc(100% - 360px) !important;
}

/* Breadcrumb onder de canvas (body > div > ...) ook mee laten schalen
   zodat die niet onder het rechterpaneel verdwijnt. */
.gjs-cv-canvas .gjs-toolbar,
.gjs-cv-canvas #gjs-cv-tools {
  max-width: 100%;
}

/* Selector-manager (de "body > div" breadcrumb en classes) meer lucht */
.gjs-clm-tags,
.gjs-sm-sectors,
.gjs-trt-traits,
.gjs-sm-sector-title,
.gjs-clm-header {
  padding: 8px 10px !important;
  font-size: 0.92rem !important;
}

.gjs-clm-tag {
  margin: 3px 5px !important;
}

/* Menu Structuur + page-selector onderdelen op de editor-pagina:
   vol breedte gebruiken, maar de inhoud BLIJFT centraal uitgelijnd
   dankzij text-align + gecentreerde knoppen/selects. */
#menu-order-ui {
  width: 100%;
  max-width: none;
  margin: 12px 0 !important;
  padding: 14px 24px !important;
  text-align: center;
  box-sizing: border-box;
}

/* Knop + page-selector containers krijgen een redelijke max-breedte zodat
   de knop/select niet over het hele scherm uitrekt maar centraal staat. */
#menu-order-ui #toggle-menu-editor {
  display: block;
  width: auto !important;
  min-width: 220px;
  max-width: 360px;
  padding: 10px 28px !important;
  margin: 0 auto 10px !important;
}

#menu-order-ui > div {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Save-content knop onder de editor ook centraal en een nette breedte */
body.is-editor #save-content {
  display: block;
  width: auto;
  min-width: 220px;
  max-width: 360px;
  margin: 10px auto !important;
}

/* De "Selecteer pagina om te bewerken" select zelf ook centraal */
body.is-editor #page-select {
  display: block;
  margin: 0 auto !important;
}

@media (max-width: 900px) {
  .gjs-pn-views,
  .gjs-pn-views-container {
    width: 280px !important;
  }
  .gjs-cv-canvas {
    width: calc(100% - 280px) !important;
  }
}

a img {
  width: auto !important;
  max-width: 100%;
  display: block;
}

/* Blocks first (leftmost) */
.gjs-pn-views #open-blocks  { order: -10; }
.gjs-pn-views #open-sm      { order: -4; }
.gjs-pn-views #open-tm      { order: -3; }
.gjs-pn-views #open-layers  { order: -2; }

/* Submenu (appears below main nav, centered under parent) */
#submenu {
  position: fixed;
  z-index: 12;
  top: 0; /* Wordt gezet door JS */
  bottom: auto;
  left: 0; /* Wordt gezet door JS */
  transform: none; /* Wordt gezet door JS: translateX(-50%) */
  display: flex;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  border-radius: 0 0 6px 6px;
  border-bottom: 3px solid rgba(255, 0, 0, 0.42);
  border-left: 3px solid rgba(255, 0, 0, 0.42);
  border-right: 3px solid rgba(255, 0, 0, 0.42);
  flex-wrap: nowrap;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

.submenu-item {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s, color 0.15s;
}

.submenu-item:hover {
  background: rgba(255, 0, 0, 0.25);
  color: #ff6666;
}

/* Menu editor tree UI - PARENTS NAAST ELKAAR */
.menu-editor {
  display: flex;
  flex-direction: row; /* PARENTS NAAST ELKAAR */
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 10px 0;
  width: 100%;
}

/* Parent item container - children onder parent */
.menu-parent-container {
  display: flex;
  flex-direction: column; /* Children ONDER parent */
  gap: 4px;
  align-items: stretch;
  min-width: 150px;
}

/* Editor toolbar */
#page-select {
  text-align: center;
  text-align-last: center;
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid rgba(255, 0, 0, 0.6) !important;
  color: white;
  border-radius: 6px;
  outline: none;
  /* Native dropdown panel kleur (Chromium/Firefox) */
  color-scheme: dark;
}

#page-select option {
  text-align: center;
  background: #000000 !important;
  background-color: #000000 !important;
  color: white;
  border: 1px solid rgba(255, 0, 0, 0.6);
}

#page-select option:hover,
#page-select option:focus,
#page-select option:checked {
  background: #1a0000 !important;
  background-color: #1a0000 !important;
  color: #fff;
  box-shadow: 0 0 0 100px #1a0000 inset;
}

/* Responsive grid blocks for GrapesJS editor
   Using auto-fit+minmax so columns wrap based on CONTAINER width, not viewport.
   This fixes the GrapesJS device preview (Mobile Portrait/Landscape) where the
   iframe viewport media-queries don't always re-evaluate, causing cols 2/3 to
   render stacked/broken and persist in saved output. */
.my-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* .my-grid-3 gebruikt flexbox i.p.v. grid zodat een overgebleven 3e item
   bij een 3→2 wrap GECENTREERD onder de andere 2 komt in plaats van links.
   - flex: 0 1 <basis> = geen grow, wel shrink, basis = 1/3 minus gap
   - justify-content: center zorgt voor de centrering van de orphan */
.my-grid-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.my-grid-3 > * {
  flex: 0 1 calc((100% - 40px) / 3);
  min-width: 220px;
  box-sizing: border-box;
}

/* .grid-3 (zelfde CSS class die in oude/saved content voorkomt) krijgt
   hetzelfde gedrag zodat bestaande pagina's ook meteen goed wrapen. */
.grid-3 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.grid-3 > * {
  flex: 0 1 calc((100% - 3rem) / 3);
  min-width: 220px;
  box-sizing: border-box;
}

/* Tablet + phones: force single column zodra het te krap wordt.
   Breakpoint op 768px zodat kleine tablets (iPad portrait, Android phones
   landscape) al op 1 kolom zitten i.p.v. pas op echte phone-width. */
@media (max-width: 768px) {
  .my-grid {
    grid-template-columns: 1fr;
  }
  .my-grid-3 {
    flex-direction: column;
  }
  .my-grid-3 > *,
  .grid-3 > * {
    flex: 0 1 100%;
  }
}

/* ── Login Pagina ─────────────────────────────────────────────────────── */
.login-wrap {
    max-width: 380px;
    margin: 4rem auto;
    padding: 2rem 2rem 1.5rem;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 51, 51, 0.25);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-title {
    margin: 0 0 1.25rem;
    font-size: 1.6rem;
    color: #fff;
    text-align: center;
    letter-spacing: 0.02em;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.login-field > span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.login-field > input {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.login-field > input:focus {
    outline: none;
    border-color: #ff3333;
    box-shadow: 0 0 0 3px rgba(255, 51, 51, 0.18);
}

.login-submit {
    margin-top: 0.5rem;
    padding: 0.65rem 1rem;
    background: #ff3333;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease;
}

.login-submit:hover {
    background: #ff5555;
}

.login-submit:active {
    transform: translateY(1px);
}

.login-msg {
    min-height: 1.2em;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 0.25rem;
}

.login-msg--ok {
    color: #66ff99;
}

.login-msg--err {
    color: #ff6666;
}

/* Hidden Command Console */
#cmd-console {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #0a0a0a;
    color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    padding: 12px 20px;
    z-index: 999999;
    border-bottom: 2px solid #00ff00;
    box-shadow: 0 4px 30px rgba(0,255,0,0.15);
    max-height: 300px;
    flex-direction: column;
    gap: 0;
}

#cmd-output {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 220px;
    padding-bottom: 8px;
}

#cmd-inputline {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #00ff00;
    padding-top: 8px;
    background: #001a00;
    margin: 0 -20px -12px -20px;
    padding: 8px 20px;
}

#cmd-prompt {
    color: #00ff00;
    flex-shrink: 0;
    user-select: none;
    font-size: 1rem;
    font-weight: bold;
}

#cmd-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    font-weight: bold;
    flex: 1;
    caret-color: #00ff00;
    letter-spacing: 0.03em;
}

#cmd-input::placeholder {
    color: #336633;
    font-weight: normal;
}

/* Component toolbar volledig verbergen (gebruiker wil 'm niet). */
.gjs-toolbar {
    display: none !important;
}

/* === Afbeeldingen schalen mee met hun container ===
   Voorkomt dat foto's uit hun kolom/grid/flex-cel breken wanneer de
   natuurlijke foto-breedte groter is dan de kolom. Werkt voor alle
   grid/flex/column containers (grid-2/3/4, my-grid, flex-container etc.). */
img {
    max-width: 100%;
    height: auto;
}

/* Flex/grid children moeten kunnen krimpen — anders forceert de image
   de container breder dan de kolom. min-width:0 lost dit op. */
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.my-grid > *,
.my-grid-3 > *,
.flex-container > *,
.flex-item {
    min-width: 0;
}

/* === Geselecteerd component in de editor-canvas ===
   Deze regels gelden BINNEN het GrapesJS iframe (dat laadt style.css via
   canvas.styles in editor.js). Geeft de laag die op dat moment geselecteerd
   is een duidelijk rode achtergrond zodat je ziet wat je aan het bewerken bent. */
.gjs-selected:not(body):not(html) {
    background-color: rgba(255, 0, 0, 0.28) !important;
    outline: 2px solid #ff0000 !important;
    outline-offset: -2px;
}

/* Hover-state in canvas iets subtieler */
.gjs-hovered:not(.gjs-selected):not(body):not(html) {
    background-color: rgba(255, 0, 0, 0.12) !important;
    outline: 1px dashed rgba(255, 0, 0, 0.6) !important;
    outline-offset: -1px;
}

/* Highlight van de actieve laag in het layers-panel.
   DOM-structuur (GrapesJS):
     .gjs-layer
       > .gjs-layer-item          ← TITLE ROW, heeft gjs-one-bg / gjs-two-color
           > .gjs-layer-title-c
               > .gjs-layer-title.gjs-layer-title-inn
       > .gjs-layer-children      ← bevat sub-layers (NIET kleuren!)

   We gebruiken direct-child selectors (>) om te voorkomen dat sub-layers
   binnen de actieve layer óók rood worden. */
.rd-layer-active > .gjs-layer-item,
.rd-layer-active > .gjs-layer-item.gjs-one-bg,
.rd-layer-active > .gjs-layer-item.gjs-two-color,
.rd-layer-active > .gjs-layer-item.gjs-two-bg,
.rd-layer-active > .gjs-layer-item > .gjs-layer-title-c,
.rd-layer-active > .gjs-layer-item > .gjs-layer-title-c > .gjs-layer-title,
.rd-layer-active > .gjs-layer-item > .gjs-layer-title-c > .gjs-layer-title.gjs-layer-title-inn {
    background: #cc0000 !important;
    background-color: #cc0000 !important;
    color: #fff !important;
}

/* Linker accent-streep aan de direct-child layer-item */
.rd-layer-active > .gjs-layer-item {
    box-shadow: inset 4px 0 0 #ff5555 !important;
}

/* Hover-state op niet-actieve layers */
.gjs-layer:not(.rd-layer-active):hover > .gjs-layer-item {
    background: rgba(255, 80, 80, 0.22) !important;
    background-color: rgba(255, 80, 80, 0.22) !important;
}