/* Universal Reset CSS */
@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}*{margin:0;padding:0}*,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5;font-family:verdana,sans-serif;font-size:18px}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin-block-end:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}table{border-collapse:collapse;border-spacing:0}li,ul{list-style:none}button,h1,h2,h3,h4,input,label{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{overflow-wrap:break-word;text-wrap:pretty}a:active,a:link,a:visited{text-decoration:none;outline:0}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}button,input,select,textarea{font-family:inherit;font-size:inherit}small,sub,sup{font-size:75%}textarea:not([rows]){min-height:10em}label{cursor:pointer}:target{scroll-margin-block:5ex}q:after,q:before{content:'';content:none}[hidden]{display:none}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}code,kbd,samp{font-family:monospace,monospace;font-size:1em}b,strong{font-weight:900}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
/**************************
*    Default StyleSheet   *
***************************/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
html,body{
    height:100vh;
}
body {
    background: radial-gradient(circle at 20% 50%, #0a0a0a 0%, #000000 50%, #1a0a1a 100%);
    font-family: 'JetBrains Mono', monospace;
    font-size:0.8em;
    color: #00ffaa;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

#container {
    margin:0 auto;
    max-width:1000px;
    overflow:hidden;
}

/* Columns and Boxes */
.col,.column{                   /* class="{col,column}": TO BE USED INSIDE OF CONTAINER. MANY COLUMNS MAY BE DEFINED */
    display:inline-block;           /* Each column renders left to right on the same block, until a new block is needed */
    overflow:hidden;                /* Any content leaking outside of the column is hidden */
    padding:0 0.75rem;              /* A left & right ( inner ) padding space-boundary */
    position:relative;              /* Registers this class to be the default parent container for boxes and their children */
    float:left;                     /* With the default box-content model ( border-box, etc... ), this forces column positions relative to the #container to be left or right on the current block */
}
._10{width:10%;}                    /* 10% width, relative to parent ( #container ) */
._20{width:20%;}                    /* 20% width, relative to parent ( #container ) */
._30{width:30%;}                    /* 30% width, relative to parent ( #container ) */
._40{width:40%;}                    /* 40% width, relative to parent ( #container ) */
._50{width:50%;}                    /* 50% width, relative to parent ( #container ) */
._60{width:60%;}                    /* 60% width, relative to parent ( #container ) */
._70{width:70%;}                    /* 70% width, relative to parent ( #container ) */
._80{width:80%;}                    /* 80% width, relative to parent ( #container ) */
._90{width:90%;}                    /* 90% width, relative to parent ( #container ) */
._100{width:100%;}                  /* 100% width, relative to parent( #container ) */

.box {                          /* class="box": TO BE USED WITHIN COLUMNS - MANY BOXES MAY BE USED PER COLUMN */
    display:inline-block;           /* Each box renders left to right on the same block, default 1 box per block - 100% width */
    margin:0.75rem 0;               /* A top & bottom ( outer ) margin space-boundary */
    padding:0.75rem;                /* An all-around ( inner ) padding space-boundary */
    position: relative;             /* Registers this class to be the default parent container for children of boxes */
    width:100%;                     /* Box width is 100% of block, thus 1 box/block within a column */
    border-radius:0.92em;           /* Creates a border-radius ( rounded border ) */
    /* backdrop-filter: blur(10px);    /* Ensures no background z layers shows through */
}

/* A Box's head class */
.box .head.head-center{        /* class="head head-center": TO BE USED TO CENTER CONTENT WITH THE head CLASS */
    text-align:center;              /* Specifically align content to center within the 'head head-center' class */
}.box .head{                   /* class="head": TO BE USED ONCE INSIDE OF A SINGLE BOX - Defines the box's 'head' block */
    height:30px;                    /* The total height of the head class */
    width:100%;                     /* The total width of the head class */
    line-height:30px;               /* The defined line-height of the head class */
    position:relative;              /* Register head to be the default parent for positioning of children within head */
    text-shadow:1px 1px #000;       /* Creates a text-shadow for the text within */
    overflow:hidden;                /* Leaking content is hidden, rendered not visibile */
}.box .head .head-menu{          /* class="head-menu": TO BE USED INSIDE OF THE head CLASS - Located on the far right side of the head class */
    display:inline-block;           /* Each head-menu renders left to right on the same block */
    height:30px;                    /* The total height of the head-menu class */
    line-height:30px;               /* The defined line-height of the head-menu class */
    float:right;                    /* (*Warning :) 'Floats' ( virtually disconnects from the box-model ) the head-menu class */
}.box .head span.icon{          /* <span class="icon"> TO BE USED INSIDE OF THE head CLASS - Creates an icon wrapper for a nested icon */
    display:inline-block;           /* Each icon wrapper renders left to right on the same block */
    height:30px;                    /* The total height of the icon wrapper  */
    line-height:30px;               /* The defined line-height of the icon class ( for font-awesome icons ) */
    padding:0 5px;                  /* A left & right ( inner ) padding space-boundary */
}.box .head h2,.box .head h3,.box .head h4,.box .head h5,.box .head h6{
    height:30px;                    /* The total height of the h* element  */
    line-height:30px;               /* The defined line-height of the h* element  */
    display:inline-block;           /* Each h* element renders left to right on the same block */
    padding:0 5px 0 0;              /* A left & right ( inner ) padding space-boundary */
}.box .head h2{font-size:1.3em;}
.box .head h3{font-size:1.25em;}
.box .head h4{font-size:1.2em;}
.box .head h5{font-size:1.15em;}
.box .head h6{font-size:1.1em;}

/* When h* elements are used inside the body class instead of the head class */
.box .body h2,.box .body h3,.box .body h4,.box .body h5,.box .body h6{
    height:30px;                    /* The total height of the h* element  */
    line-height:30px;               /* The defined line-height of the h* element  */
    margin:0 0 5px 0;               /* A bottom ( outer ) margin space-boundary */
    padding:0 5px;                  /* A left & right ( inner ) padding space-boundary */
}

/* A Box's body class */
.box .body{                     /* class="body": TO BE USED ONCE INSIDE OF A BOX - but... may be used several times without issues of wanted */
    padding:15px 10px;              /* A top & bottom / left & right ( inner ) padding space-boundary */
    width:100%;                     /* The total width of the box's body */
}.box .body.body-pad{           /* class="body body-pad": MAY BE USED SUPPLY A BOX BODY WITH ADDITIONAL ( inner ) PADDING */
    padding:25px 20px;              /* A top & bottom / left & right ( inner ) padding space-boundary */
}.box.box-squircle{             /* class="box box-squircle": MAY BE USED TO CREATE A SQUIRCLE BOX */
}.box.box-squircle .head{       /* class="head": WITHIN A SQUIRCLE, MAY BE USED TO FORMAT SQUIRCLE head CLASS */
    border-radius:12px 12px 0 0;
}.box.box-squircle .body{       /* class="body": WITHIN A SQUIRCLE, MAY BE USED TO FORMAT body CLASS */
    border-radius:0 0 12px 12px;
}.box.box-retro{                /* class="box box-retro": MAY BE USED TO CREATE A RETRO BOX */
}.box.box-retro .head{          /* class="head": WITHIN A RETRO, MAY BE USED TO FORMAT head CLASS */
    background:rgb(0, 0, 188);
    border:rgb(24, 1, 24);
}.box.box-retro .head span.icon{/* <span class="icon">: WITHIN A RETRO BOX head CLASS, FORMATS THE icon CLASS */
    background: rgb(2, 2, 92);
}.box.box-retro .body{          /* class="body": WITHIN A RETRO BOX, FORMATS THE body CLASS */
    background:#cddde7;
}.box.box-cosmic .body{         /* class="body": WITHIN A COSMIC BOX, FORMATS THE body CLASS */
}.box.box-subtle .head{         /* class="head": WITHIN A COSMIC BOX, FORMATS THE head CLASS */
    text-shadow: 0.8px 1.5px #001234;
}.box.box-subtle .body{         /* class="body": WITHIN A SUBTLE BOX, FORMATS THE body CLASS */
    background:rgba(3, 3, 3, 0.333);
    box-shadow:1px 2px 3px rgb(50, 255, 193);
}

/* A box body Icon Bar, h* elements & other icons  */
.box .body .icon-bar:first-child{margin:0 0 15px 0;}
.box .body .icon-bar{
    font-size:1.4em;
    text-align:center;
    margin:15px 0;
    opacity:0.8;
    padding:4px;
    text-shadow:0.9px 0.9px #012318;
}
.box .body .h-icon{
    margin:0 3px 0 0;
}.box .body .h-icon + h2{
    display:inline-block;
}.box .body .h-icon.red{
    color:red;
}
.box .body p:first-child{margin:0 0 15px 0;}
.box .body p:last-child{margin:15px 0 0 0;}
.box .body p:only-child{margin:0;}


/* HEADER & FOOTER */
header,footer{
    clear:both;
    width:100%;
    max-width:1200px;
    border-radius:20px;
    overflow:hidden;
    position:relative;
}
header {
    background: rgba(10, 120, 80, 0.1);
    box-shadow: 0 20px 60px rgba(0,255,170,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
    text-align: center;
    padding:40px 20px;
}
header .h-group{
    margin:0 0 15px 0;
}header .h-group h1 {
    background: linear-gradient(45deg, #00ffaa, #ee5800, rgba(27, 255, 42, 0.8));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite alternate;
    font-size: 3em;
    font-weight: 900;
    line-height:30px;
    text-shadow: 0 0 30px rgba(0,255,170,0.5);
}header .h-group h2 {
    background: linear-gradient(45deg, #00ffaa, #ee5800, rgba(27, 255, 42, 0.8));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite alternate;
    font-size: 1.7em;
    line-height:25px;
    font-weight: 900;
}
header .btn-group{
    display:inline-block;
    margin:15px 0 0 0;
}header .btn-group button{
    display:block;
    font-size: 0.88em;
    margin:0 auto;
    padding:8px 12px;
}header button#status-indicator {
    animation: statusPulse 2s ease-in-out infinite;
    background: rgba(0,255,170,0.1);
    border: 1px solid rgba(0,255,170,0.3);
    border-radius: 20px;
    color:#06ff60;
    margin-bottom:8px;
    font-weight:900;
    text-shadow:#000;
}header button#status-indicator span#status-dot {
    animation: dotPulse 1s ease-in-out infinite alternate;
    background:#00ffaa;
    border-radius:50%;
    height:8px;width:8px;
}header button#evolution-status {
    animation: evolutionBlink 2s ease-in-out infinite;
    background: rgba(255,107,107,0.1);
    border: 1px solid #ff6b6b;
    border-radius: 20px;
    color: #ff6b6b;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0,255,170,0.3); }
    50% { box-shadow: 0 0 20px rgba(0,255,170,0.6); }
}

@keyframes dotPulse {
    0% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes borderRotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

@keyframes evolutionBlink {
    0%, 90% { opacity: 1; }
    91%, 100% { opacity: 0.3; }
}

footer{
    position:relative;
    background: ;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    animation: borderRotate 1s linear infinite;
    backdrop-filter: blur(10px);
    box-shadow:1px 1px 5px purple;
    color:#39ff14;
    margin:1em 0;
    padding:0.5em 0.8em;
    font-size:1em;
    text-shadow:1px 1px 4px #000;
    font-weight:777;
}footer .footer-wrapper{
    background: linear-gradient(45deg, #00ffaa, #ee5800, rgba(27, 255, 42, 0.8));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite alternate;
}footer .ul-title{
    font-weight:900;
}footer ul{
    display:inline-block;
    margin:0;
}footer ul li {
    display:inline-block;
    margin:0 10px;
    padding:2px;
}

/* Animated background particles */
#cosmic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    transform: translate3d(0, 0, 0); /* WebKit optimization */
    overflow:hidden;
    z-index: -1;
}
.particle {
    position: absolute;
    width: 4px;
    height: 2px;
    background: #00ffaa;
    border-radius: 50%;
    animation: float 20s infinite linear;
    transform: translate3d(0, 0, 0); /* WebKit optimization */
    opacity: 0.3;
}.particle.pr-red{
    background:red;
}

@keyframes float {
    0% { transform: translateY(100vh) translateX(0); opacity: 0; }
    10% { opacity: 0.3; }
    90% { opacity: 0.3; }
    100% { transform: translateY(0) translateX(50px); opacity: 0; }
}



/* Links, Buttons, Images, Lists, Menus */
a:link,a:visited{               /* Both, a link, and a visited link in its default state */

}a:hover{                       /* A link once it has been hovered */

}a:active{                      /* A link once it has been selected ( held click/tap ) */

}a:visited{                     /* A link once it has been visited already in the past */

}
button{                         /* A button */

}button:hover{                  /* A button once it has been hovered over */

}button:active{                 /* A button once it has been selected ( tapped/clicked ) */

}

img{                            /* Default style of an <img> element */
    margin:30px 0;
}

ol{                             /* An unordered list ( just a random list ) */
    margin:10px 15px;
}ol li{                         /* A list-item in an unordered list */
    list-style-position:inside;
    list-style-type:upper-roman;
}

ol{                             /* An ordered list */

}ol li{                         /* A list-item in an ordered list */

}

/* Text Themes*/
p{                              /* A paragraph block, <p> */
    line-height:15px;
    letter-spacing:0px;
    margin:15px 0;
    text-indent:25px;
    word-spacing:0px;
    word-wrap:break-word;
}

.tip{                           /* class="tip": Used to 'pop out' particular text-tips */
    color:yellowgreen;
}

.text-big {                     /* class="text-big": Makes the text within this wrapper bigger */
    font-size: 1.4em;
}.text-small {                  /* class="text-small": Makes the text within this wrapper smaller */
    font-size: 0.8em;
}.center{                       /* class="center": Makes the phrasing content within this wrapper centered, relative to its parent */
    text-align:center;
}p.center{text-indent: 0}       /* <p class="center": Specifically a <p> element with this class has no text indentation */


/* CLEAR-FIX xHACK */
.clearfix{                      /* class="clearfix": Acts as an inline-block level item to the left, and a block item on the right, removing adjacent content at the right side. E.g. near images */
}.clearfix::after {
  content: "";
  display: table;
  clear: both;
}













.modules-grid {
    text-align:center;
}

.module {
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(0,255,170,0.2);
    border-radius: 12px;
    cursor: pointer;
    display:inline-block;
    margin:4px;
    font-size:0.78em;
    padding: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.module::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,255,170,0.1), transparent);
    transition: left 0.6s;
}

.module:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #00ffaa;
    box-shadow: 0 10px 30px rgba(0,255,170,0.2);
}

.module:hover::before {
    left: 100%;
}

.module.active {
    background: linear-gradient(135deg, rgba(0,255,170,0.15), rgba(0,100,255,0.15));
    border-color: #00ffaa;
    box-shadow: 0 0 25px rgba(0,255,170,0.4);
    transform: scale(1.05);
}

.module.learning {
    border-color: #ffaa00;
    animation: learningPulse 1.5s ease-in-out infinite;
}

@keyframes learningPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255,170,0,0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(255,170,0,0.8);
        transform: scale(1.02);
    }
}

.module-name {
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 1.11em;
}

.module-complexity {
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.complexity-basic { color: #66ff66; }
.complexity-intermediate { color: #ffaa00; }
.complexity-advanced { color: #ff6666; }
.complexity-expert { color: #aa66ff; }
.complexity-theoretical { color: #ff66aa; }

.stats-panel {
    display:block;
}

.metric-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,255,170,0.2);
    border-radius: 12px;
    display:inline-block;
    padding: 8px;
    margin:4px 0;
    text-align:center;
}

.metric-label {
    font-size: 1.1em;
    font-weight:700;
    opacity: 0.8;
    margin-bottom: 10px;
}

.metric-value {
    font-weight: 700;
    color: #00ffaa;
}

.progress-ring {
    width: 40px;
    height: 40px;
    margin: 10px 0;
}

.ring-background {
    fill: none;
    stroke: rgba(0,255,170,0.1);
    stroke-width: 4;
}

.ring-progress {
    fill: none;
    stroke: #00ffaa;
    stroke-width: 4;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.5s ease;
}

.capabilities-grid {
    text-align:center;
    font-size: 0.9em;
}

.capability {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(102,102,102,0.3);
    border-radius: 8px;
    display: inline-block;
    padding: 10px 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.capability.unlocked {
    border-color: #00ffaa;
    color: #00ffaa;
    background: rgba(0,255,170,0.05);
    box-shadow: 0 0 15px rgba(0,255,170,0.1);
}

.capability.unlocked::before {
    content: '✓';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #00ffaa;
    font-weight: bold;
}



.console {
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(0,255,170,0.3);
    border-radius: 12px;
    height: 300px;
    overflow-y: auto;
    padding: 20px;
    font-size: 0.85rem;
    line-height: 1.6;
    backdrop-filter: blur(10px);
}

.console::-webkit-scrollbar {
    width: 8px;
}

.console::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

.console::-webkit-scrollbar-thumb {
    background: #00ffaa;
    border-radius: 4px;
}

.log-entry {
    margin-bottom: 8px;
    animation: logAppear 0.5s ease-out;
}

@keyframes logAppear {
    0% { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}

.thought-stream {
    background: rgba(0,100,255,0.1);
    border-left: 3px solid #0066ff;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #66ccff;
    animation: thoughtAppear 0.8s ease-out;
}

@keyframes thoughtAppear {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.interface-aphorism {
    text-align: center;
    font-style: italic;
    opacity: 0.7;
    font-size: 0.9rem;
    color: #66ccff;
    background: rgba(0,0,0,0.6);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(102,204,255,0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 2px 8px rgba(102,204,255,0.5);
}

/*************** Column-based mobile optimization ***************/

@media (max-width: 768px) {
    .interface {
        padding: 10px;
        margin: 5px;
    }

    .header {
        margin-bottom: 15px;
    }

    .title {
        font-size: 1.6rem;
        margin-bottom: 8px;
    }

    .subtitle {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .status-indicator {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* Two-column layout for main content */
    .main-grid {
        display: block; /* Override grid */
    }

    .modules-section {
        float: left;
        width: 65%;
        padding-right: 8px;
    }

    .stats-panel {
        float: right;
        width: 35%;
        padding-left: 8px;
        gap: 8px;
    }

    /* Compact modules in 2x6 grid */
    .modules-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .module {
        padding: 8px;
        border-radius: 6px;
        font-size: 0.7rem;
    }

    .module-name {
        font-size: 0.65rem;
        margin-bottom: 2px;
        line-height: 1.1;
    }

    .module-complexity {
        font-size: 0.6rem;
    }

    /* Vertical stack stats */
    .stats-panel {
        display: flex;
        flex-direction: column;
    }

    .metric-card {
        padding: 6px;
        margin-bottom: 4px;
    }

    .metric-label {
        font-size: 0.6rem;
        margin-bottom: 2px;
    }

    .metric-value {
        font-size: 0.9rem;
    }

    .progress-ring {
        width: 40px;
        height: 40px;
        margin: 2px auto;
    }

    /* Clear float after main grid */
    .main-grid::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Two-column capabilities */
    .capabilities-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        margin-bottom: 15px;
    }

    .capability {
        padding: 6px 8px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    /* Compact section titles */
    .section-title {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .section-title::before {
        width: 12px;
    }

    /* Two-column console layout */
    .console-section {
        display: block;
    }

    .console-wrapper {
        float: left;
        width: 70%;
    }

    .console {
        height: 180px;
        padding: 10px;
        font-size: 0.7rem;
        margin-bottom: 10px;
    }

    .console-stats {
        float: right;
        width: 30%;
        padding-left: 8px;
    }

    .console-stats .mini-stat {
        background: rgba(0,0,0,0.4);
        border: 1px solid rgba(0,255,170,0.2);
        border-radius: 6px;
        padding: 6px;
        margin-bottom: 6px;
        font-size: 0.65rem;
        text-align: center;
    }

    .console-stats .mini-stat .mini-label {
        opacity: 0.7;
        margin-bottom: 2px;
    }

    .console-stats .mini-stat .mini-value {
        color: #00ffaa;
        font-weight: bold;
    }

    /* Clear float after console */
    .console-section::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Compact footer */
    .interface-aphorism {
        margin-top: 15px;
        padding: 10px;
        font-size: 0.7rem;
    }

    /* Hide evolution status on mobile to save space */
    .evolution-status {
        display: none;
    }
}

/* Extra small screens - single column fallback */
@media (max-width: 480px) {
    .modules-section {
        float: none;
        width: 100%;
        padding-right: 0;
        margin-bottom: 10px;
    }

    .stats-panel {
        float: none;
        width: 100%;
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .console-wrapper {
        float: none;
        width: 100%;
    }

    .console-stats {
        float: none;
        width: 100%;
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-top: 8px;
    }
}