/*index*/
/* ------------------------------------------------------------
   0 — MOBILE / DESKTOP TOGGLE BLINK FEEDBACK
   1 — GLOBAL / RESET / BASE FONTS
   2 — BACKGROUND LAYERS (LAYER 0)
   3 — TOP-UI (HEADER + TAB BAR + TOOLTIP)  [LAYER 1]
   4 — TOOLTIP BAR
   5 — CONTENT AREA (LAYER 2)
   6 — ICON GRID MODULE
   7 — HEADER-TAB TEXT SECTIONS
   8 — SEARCH BAR (MATCHES TAB STYLE)
   9 — COPY BUTTON (TIP SECTION)
   10 — LINK STYLE (inside Contact; "BSVhub")
------------------------------------------------------------ */

/* =====================================================
   0 — MOBILE / DESKTOP TOGGLE BLINK FEEDBACK
===================================================== */
@keyframes toggle-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 1; }
}

.blink {
    animation: toggle-blink 0.15s linear;
}

/* =====================================================
   1 — PAGE WRAPPER FADE TRANSITION FOR MOBILE/DESKTOP
===================================================== */
#page-wrapper {
    transition: opacity 0.2s ease; /* fast, smooth fade */
    opacity: 1;                     /* default fully visible */
}

#page-wrapper.fading {
    opacity: 0.2; /* semi-transparent fade during CSS swap */
}


/* ============================================================
   1 — GLOBAL / RESET / BASE FONTS
   ============================================================ */

@font-face {
    font-family: 'VT323';
    src: url('assets/VT323-Regular.ttf') format('truetype');
}

:root {
    --tooltip-speed: 0.45s;      /* tooltip + content sync speed */
    --top-ui-shadow: rgba(0,0,0,0.7);
}

html {
    box-sizing: border-box;
    background-color: rgb(40, 30, 90);
    height: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    letter-spacing: 2px;
    overflow-x: hidden;
    min-height: 100%;
    color: white;
}

/* ============================================================
   PAGE WRAPPER — ALLOW FULL DOCUMENT HEIGHT
   ------------------------------------------------------------
   Required for absolute-positioned background layers
============================================================ */

#page-wrapper {
    position: relative;      /* anchor for absolute backgrounds */
    min-height: 100vh;       /* grows with content */
}

/* ============================================================
   2 — BACKGROUND LAYERS - PAGE HEIGHT AWARE [LAYER 0] 
   ============================================================ */


/* backgrounds: fixed to viewport, decoupled from content scroll */
#background-layer,
#firefly-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   3 — TOP-UI (HEADER + TAB BAR + TOOLTIP)  [LAYER 1]
   ============================================================ */

#top-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    background: transparent;
    pointer-events: auto;
}



/* ------------------------------------------------------------
   HEADER BAR
------------------------------------------------------------ */
.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 0 12px;
    background: rgba(25, 25, 25, 0.6); /* MATCHES TAB & TOOLTIP */

    /*box-shadow: 0 2px 10px var(--top-ui-shadow);*/
}

.header-title {
    font-size: clamp(1rem, 5vw, 3.2rem);
    justify-self: center;
    white-space: nowrap;
    margin: 0;

    color: #111;
    text-shadow:
        0 0 2px #00ff88,
        0 0 5px #00ff88,
        0 0 10px #00ff88,
        0 0 20px #00ff88;
}

.header-icons {
    display: flex;
    gap: 10px;
}

.header-icons-left {
    justify-content: flex-start;
}
.header-icons-right {
    justify-content: flex-end;
}

.header-text-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 1.4rem;
    color: #ffcc66;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    text-decoration: none;

    transition: background 0.3s, transform 0.3s;
}
.header-text-link:hover {
    background: rgba(255,204,102,0.8);
    color: black;
    transform: scale(1.1);
}
.header-text-link.active {
    background: #b8860b;
    color: black;
    box-shadow: 0 0 15px rgba(184,134,11,0.7);
}



/* ------------------------------------------------------------
   TAB BAR
------------------------------------------------------------ */
.tab-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    gap: 10px;
    padding: 12px;

    background-color: rgba(25, 25, 25, 0.6); /* match tooltip background exactly */
    box-shadow: none;/*0 2px 6px var(--top-ui-shadow); /* optional for depth */
}


.tab-bar button {
    flex: 0 0 auto;
    min-width: 100px;

    padding: 12px 18px;
    font-family: 'VT323';
    font-size: clamp(0.9rem, 2.2vw, 1.3rem);
    white-space: nowrap;

    color: white;
    background: rgba(255,255,255,0.1);

    border: 2px solid #ff5733;
    border-radius: 10px;

    transition: background 0.25s, transform 0.25s;
}
.tab-bar button:hover {
    transform: scale(1.06);
    background: rgba(255,87,51,0.8);
}
.tab-bar button.active {
    background: #ff5733;
    color: black;
    box-shadow: 0 0 12px rgba(255,87,51,0.6);
}

/* ============================================================
 4 — TOOLTIP BAR (inside top-ui)
   - Default: single line height (collapsed)
   - Expanded: taller, wraps lines, smooth transition
============================================================ */
#tooltip-display {
  /* existing */
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 14px;

  /* collapsed baseline: one-line rail */
  min-height: 32px;
  max-height: 32px;

  /* allow wrapping by default (non-marquee) */
  white-space: normal;           /* <-- NEW: permit multi-line */
  word-break: break-word;        /* <-- NEW: break long words if needed */
  overflow-wrap: anywhere;       /* <-- NEW: wrap long sequences */

  font-size: 1.2rem;
  color: #00ff88;
  text-align: center;
  background: rgba(25, 25, 25, 0.6);

  /* smooth animation for height & padding */
  transition:
    max-height var(--tooltip-speed) ease,
    padding var(--tooltip-speed) ease;
}

/* Expanded state: room for multi-line messages */
#tooltip-display.expanded {
  /* grow rail height for multi-line; adjust to your needs */
  max-height: 180px;             /* <-- NEW: taller cap for long tooltips */
  padding: 6px 14px;             /* <-- NEW: small vertical padding for readability */
}

/* Marquee-style scrolling (default message only) */
#tooltip-display.marquee {
  overflow: hidden;
  white-space: nowrap;           /* <-- Override to single-line for marquee */
}
#tooltip-display.marquee span {
  display: inline-block;
  padding-left: 0;
  white-space: nowrap;
  animation: scroll-text 600s linear infinite;
}


/* Repeat the message multiple times inside JS */
@keyframes scroll-text {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}


/* ============================================================
   5 — CONTENT AREA (LAYER 2)
   ============================================================ */

#content-area {
    position: relative;
    z-index: 200;

    width: 100%;
    padding-bottom: 40px;

    /* pushed down by JS depending on top-ui height + tooltip expansion */
    transition: top var(--tooltip-speed) ease;
}

.tab-content {
    display: none;
    padding: 20px;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   6 — ICON GRID MODULE (Fixed Aspect Ratio & Centered Images)
   ============================================================ */

ul.icon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    padding: 10px;
}

ul.icon-grid li {
    list-style: none;
    display: flex;
    justify-content: center;
}

ul.icon-grid li a {
    padding: 6px;
    border: 4px solid #2b3a45;
    background: rgba(135,206,235,0.3);
    border-radius: 20px;
    text-decoration: none;

    color: rgba(135,206,235,0.8);
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

ul.icon-grid li a:hover {
    background: rgba(135,206,235,0.6);
    border-color: #cc0022;
    transform: scale(1.04);
}

/* icon wrapper is always a square */
.icon-wrapper {
    position: relative;
    width: clamp(160px, 20vw, 240px);
    aspect-ratio: 1 / 1;  /* ensures height = width */
    flex-shrink: 0;
    display: flex;         /* center image inside */
    align-items: center;
    justify-content: center;
    overflow: hidden;      /* prevents image overflow */
}

/* Apply global sizing only to base icon images, not to the badge */
.icon-wrapper img:not(.icon-badge-new) {
    max-width: 100%;       /* scale down to fit container */
    max-height: 100%;
    width: auto;           /* maintain original ratio */
    height: auto;
    display: block;
    object-fit: contain;   /* keeps image inside wrapper without cropping */
}


/* Badge rules (no need for !important now) */
.icon-wrapper .icon-badge-new {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.icon-text {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    text-align: center;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;

    color: #eee;
    pointer-events: none;
}

/* ============================================================
   7 — HEADER-TAB TEXT SECTIONS (About / Tip / Contact)
   ============================================================ */

.header-tab-content {
    text-align: center;
}

.header-tab-text {
    margin: 0 auto;   /* <-- this centers the block horizontally */
    font-size: 2rem;
    color: #ffd700;
    text-align: center; /* <-- ensure inline text is centered */
}

/* ============================================================
   8 — SEARCH BAR (MATCH TAB STYLE)
   ============================================================ */

#search-box {
    max-width: 155px;
    padding: 12px 18px;

    font-family: 'VT323';
    font-size: 1.2rem;
    border-radius: 10px;

    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,204,102,0.4);

    color: white;
    outline: none;

    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}

#search-box:hover {
    transform: scale(1.06);
    background: rgba(255,204,102,0.2);
    box-shadow: 0 0 12px rgba(255,204,102,0.7);
}

#search-box:focus {
    background: rgba(255,204,102,0.25);
    border-color: #ffcc66;
    box-shadow: 0 0 18px rgba(255,204,102,0.9);
}

#search-box::placeholder {
    color: rgba(200,200,200,0.7);
}



/* ============================================================
   9 — COPY BUTTON (TIP SECTION)
   ============================================================ */

.copy-btn {
    margin-left: 12px;
    padding: 8px 14px;

    font-size: 1.4rem;
    font-family: 'VT323';

    background: #ffcc66;
    border: 2px solid #b8860b;
    color: black;
    border-radius: 10px;

    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.copy-btn:hover {
    background: #ffd98c;
    transform: scale(1.08);
}

.copy-btn:active {
    transform: scale(0.96);
}

/* ------------------------------------------------------------
   10 — LINK STYLE (inside Contact; "BSVhub")
   - Terminal green
   - Bold text
   - 30% transparent black background
   - Subtle hover feedback
------------------------------------------------------------ */
.header-tab-text a {
    color: #00ff88;                  /* terminal green */
    font-weight: bold;               /* make link stand out */
    text-decoration: none;           /* no underline */

    background: rgba(0, 0, 0, 0.3);   /* 30% transparent black */
    padding: 4px 10px;               /* clickable hit area */
    border-radius: 6px;              /* soft edges */

    transition:
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

/* Hover / focus feedback (desktop & keyboard users) */
.header-tab-text a:hover,
.header-tab-text a:focus {
    color: #ffffff;                  /* brighten text */
    background: rgba(0, 0, 0, 0.45);  /* slightly darker on hover */
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6); /* soft green glow */
}