/* ========================================================
   gabs.games v2
   Aesthetic: pixel-art | Layout: dashboard
   Typography: frutiger-clean (Nunito) + Press Start 2P + VT323
   Palette: burgundy-cream
   Patterns: blur-focus | Imagery: lens-flare | Motifs: tech
   Tone: optimistic-bright
   ======================================================== */

:root {
    --burgundy: #3A1A2C;
    --wine: #7A2E4A;
    --cream: #F5EBD9;
    --flare: #E8B94A;
    --teal: #4FB89A;
    --coral: #E07A6A;
    --rose: #B36A7E;

    --cream-t6: rgba(245, 235, 217, 0.06);
    --cream-t12: rgba(245, 235, 217, 0.12);
    --cream-t22: rgba(245, 235, 217, 0.22);
    --cream-t70: rgba(245, 235, 217, 0.7);
    --burgundy-t80: rgba(58, 26, 44, 0.8);

    --font-pixel: "Press Start 2P", monospace;
    --font-body: "Nunito", system-ui, sans-serif;
    --font-mono: "VT323", monospace;

    --rail-w: 156px;
    --right-w: 260px;
    --hero-h: 112px;
    --hud-h: 64px;
}

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

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--burgundy);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
}

body {
    position: relative;
    image-rendering: pixelated;
}

/* ---------- Pixel Grid Overlay ---------- */
#grid-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        repeating-linear-gradient(0deg, var(--cream-t6) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, var(--cream-t6) 0 1px, transparent 1px 8px);
    opacity: 1;
}

/* ---------- Hero Band ---------- */
#hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hero-h);
    padding: 16px 24px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, #2C1322 0%, var(--burgundy) 100%);
    border-bottom: 2px solid var(--wine);
    box-shadow: 0 2px 0 0 var(--cream-t12);
    z-index: 10;
    overflow: hidden;
}

#hero-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}

#hero-logo {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-weight: 400;
    line-height: 1;
}

.pixel-title {
    font-family: var(--font-pixel);
    font-size: clamp(20px, 3.2vw, 38px);
    color: var(--cream);
    letter-spacing: 2px;
    text-shadow:
        2px 0 0 var(--wine),
        0 2px 0 var(--wine),
        2px 2px 0 var(--wine),
        4px 4px 0 rgba(0, 0, 0, 0.4);
}

.px-letter {
    display: inline-block;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 280ms ease-out, transform 280ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

.px-letter.is-in {
    opacity: 1;
    transform: scale(1);
}

#games-title {
    font-family: var(--font-body);
    font-weight: 900;
    font-size: clamp(14px, 1.5vw, 20px);
    color: var(--flare);
    letter-spacing: 3px;
    text-shadow: 0 0 8px rgba(232, 185, 74, 0.45);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 500ms ease-out 600ms, transform 500ms ease-out 600ms;
}

#games-title.is-in {
    opacity: 1;
    transform: translateY(0);
}

#hero-tagline {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--cream-t70);
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 500ms ease-out 900ms, transform 500ms ease-out 900ms;
}

#hero-tagline.is-in {
    opacity: 1;
    transform: translateY(0);
}

.tagline-dot {
    color: var(--flare);
    margin: 0 8px;
}

/* ---------- Lens Flare ---------- */
#lens-flare {
    position: relative;
    width: 160px;
    height: 96px;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 600ms ease-out 400ms, transform 600ms cubic-bezier(0.3, 1.4, 0.5, 1) 400ms;
    pointer-events: none;
}

#lens-flare.is-in {
    opacity: 1;
    transform: scale(1);
}

.lf-rays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(232, 185, 74, 0.55) 4deg,
            transparent 8deg,
            transparent 40deg,
            rgba(232, 185, 74, 0.35) 44deg,
            transparent 48deg,
            transparent 88deg,
            rgba(232, 185, 74, 0.55) 92deg,
            transparent 96deg,
            transparent 136deg,
            rgba(232, 185, 74, 0.3) 140deg,
            transparent 144deg,
            transparent 180deg,
            rgba(232, 185, 74, 0.55) 184deg,
            transparent 188deg,
            transparent 224deg,
            rgba(232, 185, 74, 0.3) 228deg,
            transparent 232deg,
            transparent 272deg,
            rgba(232, 185, 74, 0.55) 276deg,
            transparent 280deg,
            transparent 316deg,
            rgba(232, 185, 74, 0.35) 320deg,
            transparent 324deg);
    filter: contrast(1.1);
    animation: flareSpin 60s linear infinite;
    mask-image: radial-gradient(circle at center, black 0%, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, black 40%, transparent 70%);
}

.lf-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 50% 50%,
            var(--cream) 0%,
            var(--flare) 22%,
            rgba(232, 185, 74, 0.6) 40%,
            transparent 65%);
    animation: flarePulse 3.5s ease-in-out infinite;
}

.lf-speck {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--flare);
    box-shadow: 0 0 6px var(--flare);
    opacity: 0.85;
    animation: speckBlink 2.8s ease-in-out infinite;
}
.lf-speck--a { top: 18%; left: 20%; animation-delay: 0s; }
.lf-speck--b { top: 72%; left: 30%; animation-delay: 0.4s; }
.lf-speck--c { top: 30%; left: 80%; animation-delay: 0.9s; }
.lf-speck--d { top: 60%; left: 70%; animation-delay: 1.3s; }
.lf-speck--e { top: 40%; left: 10%; animation-delay: 1.7s; }
.lf-speck--f { top: 85%; left: 60%; animation-delay: 2.1s; }

@keyframes flareSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes flarePulse {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes speckBlink {
    0%, 90%, 100% { opacity: 0; transform: scale(0.4); }
    40%, 60% { opacity: 1; transform: scale(1); }
}

/* ---------- Left Rail ---------- */
#left-rail {
    position: fixed;
    left: 0;
    top: var(--hero-h);
    bottom: var(--hud-h);
    width: var(--rail-w);
    background: #321627;
    border-right: 2px solid var(--wine);
    box-shadow: inset -2px 0 0 0 var(--cream-t12);
    display: flex;
    flex-direction: column;
    padding: 20px 10px;
    z-index: 9;
    transform: translateX(-12px);
    opacity: 0;
    transition: transform 500ms ease-out 1100ms, opacity 500ms ease-out 1100ms;
}

#left-rail.is-in {
    transform: translateX(0);
    opacity: 1;
}

.rail-brand {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--flare);
    text-align: center;
    padding: 10px 4px;
    line-height: 1.6;
    border: 2px solid var(--wine);
    background: var(--burgundy);
    box-shadow: 2px 2px 0 0 var(--cream-t12);
    margin-bottom: 18px;
}

#rail-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--cream-t70);
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.rail-item:hover,
.rail-item.is-active {
    color: var(--cream);
    background: rgba(179, 106, 126, 0.18);
    border-color: var(--rose);
    transform: translateX(2px);
}

.rail-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--cream);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    image-rendering: pixelated;
    box-shadow: 1px 1px 0 0 var(--wine);
    position: relative;
}

.rail-item:hover .rail-icon,
.rail-item.is-active .rail-icon {
    background-color: var(--flare);
    box-shadow: 0 0 0 1px var(--flare), 1px 1px 0 1px var(--wine), 0 0 8px rgba(232, 185, 74, 0.7);
}

.icon-inventory { clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0 100%, 0 20%, 30% 20%, 30% 0, 70% 0, 70% 20%); }
.icon-quests { clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); }
.icon-stats { clip-path: polygon(0 100%, 25% 60%, 50% 80%, 75% 30%, 100% 50%, 100% 100%); }
.icon-shop { clip-path: polygon(0 30%, 15% 10%, 85% 10%, 100% 30%, 100% 100%, 0 100%); }
.icon-party { clip-path: polygon(25% 0, 45% 20%, 45% 50%, 75% 50%, 75% 20%, 95% 0, 95% 100%, 25% 100%); }

.rail-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.rail-foot {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--rose);
    text-align: center;
    padding: 8px;
    border-top: 1px dashed var(--wine);
}

/* ---------- Stage / Panel Grid ---------- */
#stage {
    position: fixed;
    top: var(--hero-h);
    left: var(--rail-w);
    right: var(--right-w);
    bottom: var(--hud-h);
    padding: 18px;
    overflow: hidden;
    z-index: 5;
}

#panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
    height: 100%;
}

.panel {
    position: relative;
    background: #44203A;
    border: 2px solid var(--wine);
    box-shadow:
        inset 0 0 0 2px var(--cream-t12),
        3px 3px 0 0 rgba(0, 0, 0, 0.35);
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--cream);
    cursor: pointer;
    outline: none;
    transform: scale(0.95);
    opacity: 0;
    transition:
        filter 220ms ease-out,
        opacity 220ms ease-out,
        transform 220ms ease-out,
        box-shadow 220ms ease-out,
        border-color 220ms ease-out,
        background 220ms ease-out;
    filter: blur(2px);
}

.panel.is-in {
    opacity: 0.7;
    transform: scale(1);
}

.panel.is-in.is-focus,
#panel-grid.has-focus .panel.is-in.is-focus {
    opacity: 1;
    filter: blur(0);
    transform: translate(-2px, -2px) scale(1);
    border-color: var(--flare);
    box-shadow:
        inset 0 0 0 2px var(--cream-t22),
        0 0 0 1px var(--flare),
        5px 5px 0 0 rgba(0, 0, 0, 0.45),
        0 0 28px rgba(232, 185, 74, 0.25);
    background: #4C2340;
}

#panel-grid.has-focus .panel.is-in:not(.is-focus) {
    opacity: 0.5;
    filter: blur(2.5px);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--cream-t22);
}

.panel-tag {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--flare);
    letter-spacing: 1px;
}

.panel-chip {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--cream-t70);
    min-width: 22px;
    text-align: right;
}

.panel-title {
    font-family: var(--font-body);
    font-weight: 900;
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--cream);
    letter-spacing: 0.3px;
    line-height: 1.15;
}

.panel-body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cream-t70);
    flex: 1 1 auto;
}

.panel-meter {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
}

.meter-label {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--cream-t70);
    letter-spacing: 1px;
}

.meter-bar {
    position: relative;
    height: 10px;
    background-color: var(--burgundy);
    background-image: repeating-linear-gradient(
        90deg,
        var(--wine) 0 2px,
        transparent 2px 8px
    );
    border: 1px solid var(--wine);
    overflow: hidden;
}

.meter-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background-image:
        repeating-linear-gradient(90deg,
            var(--flare) 0 6px,
            #D0A73E 6px 8px);
    transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.meter-bar.meter-bar--split::before {
    background-image:
        repeating-linear-gradient(90deg,
            var(--teal) 0 6px,
            #45A085 6px 8px);
}

.meter-val {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--flare);
    text-align: right;
    min-width: 54px;
}

/* Featured core panel */
.panel--featured {
    background: linear-gradient(135deg, #5A2A48 0%, #3A1A2C 100%);
    border-color: var(--flare);
}

.panel--featured .panel-title {
    color: var(--flare);
    text-shadow: 0 0 10px rgba(232, 185, 74, 0.35);
}

.panel--featured .panel-tag {
    color: var(--cream);
}

.panel-core-mark {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding-top: 4px;
}

.core-digit {
    font-family: var(--font-pixel);
    font-size: clamp(18px, 2vw, 28px);
    color: var(--cream);
    background: var(--burgundy);
    border: 2px solid var(--wine);
    padding: 6px 10px;
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Right Rail (Quest Log) ---------- */
#right-rail {
    position: fixed;
    right: 0;
    top: var(--hero-h);
    bottom: var(--hud-h);
    width: var(--right-w);
    background: #321627;
    border-left: 2px solid var(--wine);
    box-shadow: inset 2px 0 0 0 var(--cream-t12);
    padding: 16px 14px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    transform: translateX(12px);
    opacity: 0;
    transition: transform 500ms ease-out 1200ms, opacity 500ms ease-out 1200ms;
    overflow: hidden;
}

#right-rail.is-in {
    transform: translateX(0);
    opacity: 1;
}

.rail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--wine);
    margin-bottom: 12px;
}

.rail-head-tag {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--flare);
    letter-spacing: 1px;
}

.rail-head-dot {
    width: 10px;
    height: 10px;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
    animation: logDot 1.4s ease-in-out infinite;
}

@keyframes logDot {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

#quest-log {
    list-style: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    position: relative;
}

.quest {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 6px;
    border-left: 2px solid transparent;
    transition: border-color 220ms ease, background 220ms ease;
    opacity: 0.6;
    transform: translateY(0);
}

.quest.active {
    opacity: 1;
    border-left-color: var(--flare);
    background: rgba(232, 185, 74, 0.08);
    position: relative;
}

.quest.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(232, 185, 74, 0.25) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: flareSweep 1.1s ease-out;
}

@keyframes flareSweep {
    to { transform: translateX(100%); }
}

.q-bullet {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    background: var(--cream);
    box-shadow: 2px 2px 0 0 var(--wine);
}

.quest.active .q-bullet {
    background: var(--flare);
    box-shadow: 2px 2px 0 0 var(--wine), 0 0 10px var(--flare);
}

.q-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--cream);
    line-height: 1.45;
}

.quest.is-typing .q-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--flare);
    animation: typeOut 900ms steps(40, end) forwards, caretBlink 0.6s step-end infinite;
}

@keyframes typeOut {
    from { max-width: 0; }
    to { max-width: 100%; }
}

@keyframes caretBlink {
    50% { border-right-color: transparent; }
}

/* ---------- Bottom HUD ---------- */
#hud {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hud-h);
    background: linear-gradient(0deg, #2A1220 0%, #3A1A2C 100%);
    border-top: 2px solid var(--wine);
    box-shadow: 0 -2px 0 0 var(--cream-t12);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
    z-index: 10;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 500ms ease-out 1300ms, opacity 500ms ease-out 1300ms;
}

#hud.is-in {
    transform: translateY(0);
    opacity: 1;
}

.hud-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 64px;
}

.hud-cell--wide {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: 360px;
}

.hud-label {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--cream-t70);
    letter-spacing: 1px;
}

.hud-val {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--cream);
    line-height: 1;
}

.hud-val--accent {
    color: var(--flare);
    text-shadow: 0 0 8px rgba(232, 185, 74, 0.5);
    font-size: 26px;
}

.hud-meter {
    position: relative;
    flex: 1 1 auto;
    height: 14px;
    background-color: var(--burgundy);
    background-image: repeating-linear-gradient(
        90deg,
        var(--wine) 0 2px,
        transparent 2px 10px);
    border: 1px solid var(--wine);
    overflow: hidden;
}

.hud-meter-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background-image: repeating-linear-gradient(
        90deg,
        var(--flare) 0 8px,
        #CFA63A 8px 10px);
    transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Media Queries ---------- */
@media (max-width: 1100px) {
    :root {
        --rail-w: 120px;
        --right-w: 220px;
    }
    .rail-label { font-size: 10px; }
    .panel-body { font-size: 12px; }
}

@media (max-width: 900px) {
    :root {
        --hero-h: 96px;
        --rail-w: 72px;
        --right-w: 0px;
        --hud-h: 56px;
    }
    .rail-label { display: none; }
    #right-rail { display: none; }
    #panel-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .pixel-title { font-size: 20px; }
    #games-title { font-size: 14px; }
}

@media (max-width: 620px) {
    #panel-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: minmax(140px, auto);
    }
    .hud-cell:not(.hud-cell--wide) { min-width: 48px; }
    .hud-val { font-size: 18px; }
}