/* ============================================================
   bunnygirl.bar — Pixel Dashboard Aquarium
   Midnight Blue × Pixel Art × Commissioner
   ============================================================ */

/* --- Custom Properties --- */
:root {
    --tile: 8px;

    /* Palette */
    --abyss:        #0A1628;
    --deep:         #0F2044;
    --border:       #1B3A6B;
    --mid-blue:     #2A5298;
    --cyan:         #00D4FF;
    --ice:          #E8F4FF;
    --coral:        #FF6B6B;
    --amber:        #FFD166;
    --seafoam:      #7ECFBD;
    --sky:          #A8C4E0;

    /* Typography scale (tile multiples) */
    --topbar-h:     calc(var(--tile) * 6);   /* 48px */
    --footer-h:     calc(var(--tile) * 10);  /* 80px */
}

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--abyss);
    color: var(--ice);
    font-family: 'Commissioner', sans-serif;
}

img, canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

/* --- CRT Scanlines --- */
.crt-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.08) 1px,
        rgba(0, 0, 0, 0.08) 2px
    );
}

/* --- Noise Overlay --- */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ============================================================
   DASHBOARD STRUCTURE
   ============================================================ */

.dashboard {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--abyss);
    overflow: hidden;
}

/* --- Topbar --- */
.topbar {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    background: var(--deep);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--tile) * 2);
    gap: calc(var(--tile) * 2);
    flex-shrink: 0;
    z-index: 100;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: calc(var(--tile) * 1.5);
}

.topbar-label {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    font-variation-settings: 'wdth' 75;
}

.topbar-sep {
    color: var(--border);
    font-size: 11px;
}

.accent-coral { color: var(--coral); }
.accent-amber { color: var(--amber); }
.accent-cyan  { color: var(--cyan);  }
.accent-seafoam { color: var(--seafoam); }

.status-online {
    color: var(--seafoam);
    animation: blink 1.2s step-end infinite;
}

/* --- Main Grid --- */
.grid-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tile);
    padding: var(--tile);
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   PANELS — base
   ============================================================ */

.panel {
    position: relative;
    background: var(--deep);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform 0.08s ease-out;
    /* no border-radius */
}

.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.06) 1px,
        rgba(0, 0, 0, 0.06) 2px
    );
    pointer-events: none;
    z-index: 2;
}

/* Panel label (top-left, retro LCD) */
.panel-label {
    position: absolute;
    top: calc(var(--tile) * 1);
    left: calc(var(--tile) * 1);
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    font-variation-settings: 'wdth' 75;
    z-index: 10;
    opacity: 0.85;
}

/* Pixel corner accents */
.pixel-corner {
    position: absolute;
    width: calc(var(--tile) * 1);
    height: calc(var(--tile) * 1);
    background: var(--mid-blue);
    z-index: 10;
}
.pixel-corner.tl { top: 0; left: 0; }
.pixel-corner.tr { top: 0; right: 0; }
.pixel-corner.bl { bottom: 0; left: 0; }
.pixel-corner.br { bottom: 0; right: 0; }

/* ============================================================
   HERO PANEL
   ============================================================ */

.panel-hero {
    width: 100%;
    height: 40vh;
    min-height: calc(var(--tile) * 40);
    background: var(--abyss);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Glow dots */
.glow-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.glow-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--cyan);
    opacity: 0.55;
    box-shadow: 0 0 4px var(--cyan), 0 0 8px var(--cyan);
    animation: glimmer 3s ease-in-out infinite;
}

.glow-dot:nth-child(2)  { animation-delay: 0.6s; width: 2px; height: 2px; }
.glow-dot:nth-child(3)  { animation-delay: 1.2s; width: 4px; height: 4px; }
.glow-dot:nth-child(4)  { animation-delay: 0.3s; }
.glow-dot:nth-child(5)  { animation-delay: 2.1s; width: 2px; height: 2px; }
.glow-dot:nth-child(6)  { animation-delay: 0.9s; width: 4px; height: 4px; }
.glow-dot:nth-child(7)  { animation-delay: 1.5s; }
.glow-dot:nth-child(8)  { animation-delay: 2.7s; width: 2px; height: 2px; }
.glow-dot:nth-child(9)  { animation-delay: 0.7s; }
.glow-dot:nth-child(10) { animation-delay: 1.9s; width: 4px; height: 4px; }

/* Swimming fish layer in hero */
.fish-swim-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.fish-canvas {
    position: absolute;
    width: 64px;
    height: 64px;
}

.fish-1 {
    top: 20%;
    animation: swim 14s linear -5s infinite;
}
.fish-2 {
    top: 55%;
    width: 48px;
    height: 48px;
    animation: swim 18s linear -11s infinite;
}
.fish-3 {
    top: 35%;
    width: 56px;
    height: 56px;
    animation: swim 11s linear -3s infinite;
    animation-direction: reverse;
}
.fish-4 {
    top: 70%;
    width: 40px;
    height: 40px;
    animation: swim 22s linear -17s infinite;
}

/* Hero content */
.hero-content {
    position: relative;
    z-index: 5;
    padding: 0 calc(var(--tile) * 6);
    width: 100%;
}

.hero-title-group {
    display: flex;
    align-items: center;
    gap: calc(var(--tile) * 4);
}

.hero-fish-sprite canvas {
    width: 192px;
    height: 192px;
    image-rendering: pixelated;
}

.hero-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 800;
    font-size: 72px;
    letter-spacing: -0.02em;
    color: var(--ice);
    line-height: 1;
    font-variation-settings: 'wdth' 100;
}

.hero-tagline {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: var(--sky);
    margin-top: calc(var(--tile) * 2);
    letter-spacing: 0.03em;
    line-height: 1.6;
}

/* ============================================================
   MIDDLE ROW
   ============================================================ */

.row-middle {
    display: flex;
    gap: var(--tile);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* --- Sidebar Panel --- */
.panel-sidebar {
    width: calc(var(--tile) * 24);  /* 192px, 3 col equivalent */
    min-width: calc(var(--tile) * 24);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--tile) * 4) calc(var(--tile) * 2) calc(var(--tile) * 2);
    gap: calc(var(--tile) * 2);
    overflow: hidden;
    background: var(--abyss);
}

.sidebar-fish-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--tile) * 2);
    flex: 1;
    justify-content: space-evenly;
}

.sidebar-fish {
    width: calc(var(--tile) * 8);
    height: calc(var(--tile) * 8);
    image-rendering: pixelated;
}

.seaweed-scroll-wrapper {
    position: absolute;
    bottom: calc(var(--tile) * 5);
    right: calc(var(--tile) * 1);
    overflow: hidden;
    height: 50%;
    width: 16px;
}

.seaweed-sprite {
    width: 16px;
    height: 64px;
    image-rendering: pixelated;
    animation: seaweed-scroll 6s linear infinite;
}

.sidebar-coral-bottom {
    position: absolute;
    bottom: calc(var(--tile) * 1);
    left: 50%;
    transform: translateX(-50%);
}

.sidebar-coral-bottom canvas {
    width: calc(var(--tile) * 8);
    height: calc(var(--tile) * 4);
    image-rendering: pixelated;
}

/* --- Right Column --- */
.col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tile);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* --- Status Panels Row --- */
.row-status {
    display: flex;
    gap: var(--tile);
    height: calc(var(--tile) * 18);
    flex-shrink: 0;
}

.panel-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--tile) * 1);
    background: var(--deep);
    padding: calc(var(--tile) * 2);
}

.status-value {
    font-family: 'Commissioner', sans-serif;
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -0.02em;
    font-variation-settings: 'wdth' 100;
    line-height: 1;
}

.status-sub {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sky);
    font-variation-settings: 'wdth' 75;
}

.status-cursor {
    margin-top: calc(var(--tile) * 0.5);
}

/* --- Feature Panel --- */
.panel-feature {
    flex: 1;
    min-height: 0;
    padding: calc(var(--tile) * 4) calc(var(--tile) * 3) calc(var(--tile) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--tile) * 2);
    overflow: hidden;
}

.feature-inner {
    display: flex;
    gap: calc(var(--tile) * 3);
    align-items: flex-start;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.feature-sprite-area {
    flex-shrink: 0;
}

.feature-sprite-area canvas {
    width: calc(128px * 3);
    height: calc(64px * 3);
    image-rendering: pixelated;
}

.feature-text {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.feature-heading {
    font-family: 'Commissioner', sans-serif;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--ice);
    margin-bottom: calc(var(--tile) * 2);
    font-variation-settings: 'wdth' 100;
}

.feature-body {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: var(--sky);
    line-height: 1.6;
    margin-bottom: calc(var(--tile) * 2);
}

.feature-body strong {
    font-weight: 700;
    color: var(--coral);
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--tile) * 1);
    margin-top: calc(var(--tile) * 1);
}

.pixel-tag {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
    border: 1px solid var(--amber);
    padding: calc(var(--tile) * 0.5) calc(var(--tile) * 1);
    font-variation-settings: 'wdth' 75;
}

/* ============================================================
   FOOTER TILES
   ============================================================ */

.row-footer {
    display: flex;
    gap: var(--tile);
    height: var(--footer-h);
    flex-shrink: 0;
}

.panel-footer-tile {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--tile) * 1);
    cursor: default;
}

.footer-icon {
    width: calc(var(--tile) * 4);
    height: calc(var(--tile) * 4);
    image-rendering: pixelated;
}

.footer-label {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    font-variation-settings: 'wdth' 75;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes swim {
    from { transform: translateX(-10%); }
    to   { transform: translateX(110%); }
}

@keyframes swim-reverse {
    from { transform: translateX(110%) scaleX(-1); }
    to   { transform: translateX(-10%) scaleX(-1); }
}

@keyframes blink {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.cursor-blink {
    color: var(--cyan);
    animation: blink 1.2s step-end infinite;
    font-size: 13px;
    margin-left: calc(var(--tile) * 0.5);
}

.cursor-blink.small {
    font-size: 10px;
}

@keyframes glimmer {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.15; }
}

@keyframes seaweed-scroll {
    from { transform: translateY(100%); }
    to   { transform: translateY(-100%); }
}

@keyframes panel-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   LOAD ANIMATION
   ============================================================ */

.panel {
    animation: panel-fadein 0.4s ease-out both;
}

.panel-hero    { animation-delay: 0.00s; }
.panel-sidebar { animation-delay: 0.06s; }
#status-1      { animation-delay: 0.12s; }
#status-2      { animation-delay: 0.18s; }
#status-3      { animation-delay: 0.24s; }
.panel-feature { animation-delay: 0.30s; }
#footer-1      { animation-delay: 0.36s; }
#footer-2      { animation-delay: 0.42s; }
#footer-3      { animation-delay: 0.48s; }
#footer-4      { animation-delay: 0.54s; }

/* ============================================================
   TILT-3D HOVER PANELS
   ============================================================ */

.panel[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ============================================================
   RESPONSIVE: smaller screens
   ============================================================ */

@media (max-width: 900px) {
    .row-middle {
        flex-direction: column;
        overflow-y: auto;
    }
    .panel-sidebar {
        width: 100%;
        min-width: unset;
        height: calc(var(--tile) * 20);
        flex-direction: row;
        justify-content: center;
    }
    .sidebar-fish-stack {
        flex-direction: row;
    }
    .seaweed-scroll-wrapper { display: none; }
    .feature-sprite-area { display: none; }
    .hero-fish-sprite { display: none; }
    .hero-title { font-size: 40px; }
    html, body { overflow: auto; }
    .dashboard { height: auto; min-height: 100vh; }
}

@media (max-width: 600px) {
    .row-status { flex-wrap: wrap; height: auto; }
    .panel-status { flex-basis: calc(50% - var(--tile)); }
    .hero-title { font-size: 32px; }
    .row-footer { flex-wrap: wrap; height: auto; }
    .panel-footer-tile { flex-basis: calc(50% - var(--tile)); padding: calc(var(--tile) * 2); }
}