/* =========================================================
   DIGITAL.HTML
   DARK PINK / BLACK RETRO CYBERPUNK THEME
   CENTERED LAYOUT
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --bg: #000000;
    --bg-deep: #000000;

    --panel: #0c050b;
    --panel-light: #160813;

    --border: #5d3a51;
    --border-bright: #9a5b83;

    --pink: #ff4fa3;
    --pink-bright: #ff8bc5;
    --pink-hot: #ff1493;

    --pink-dark: #8e285e;

    --text: #cbbac5;
    --text-dim: #806b78;

    --white: #f6eaf1;

    --shadow:
        0 0 0 1px rgba(0, 0, 0, 0.95),
        0 8px 25px rgba(0, 0, 0, 0.75);

    --pixel-font: "Press Start 2P", monospace;
    --body-font: "IBM Plex Mono", monospace;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}
* {
  cursor: url('https://cdn.cursors-4u.net/previews/frangipani-flower-2f631f96-32.webp') 32 32, auto !important;
}
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    /* Simple black background */
    background: #000000 url('media/creatives/cyber_grid.gif') repeat;

    color: var(--text);

    font-family: var(--body-font);

    /* Increased base text size */
    font-size: 14px;

    line-height: 1.65;

    overflow-x: hidden;
}

/* =========================================================
   CUSTOM PINK / BLACK SCROLLBAR
   ========================================================= */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000000;
    border-left: 1px solid #24101d;
}

::-webkit-scrollbar-thumb {
    background: #ff4fa3;
    border: 2px solid #000000;
    border-radius: 0;
}


/* Small pink accent at the ends */
::-webkit-scrollbar-button {
    background: #160813;
    height: 8px;
}

::-webkit-scrollbar-button:hover {
    background: #ff4fa3;
}

/* =========================================================
   MAIN WEBSITE
   ========================================================= */

.site-wrapper {
    width: min(900px, calc(100% - 40px));

    margin: 0 auto;

    padding-top: 18px;
    padding-bottom: 50px;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    min-height: 76px;

    padding: 13px 18px;

    display: flex;
    align-items: center;
    gap: 15px;

    border: 1px solid var(--border);

    border-radius: 6px;

    background:black;

    box-shadow: var(--shadow);
}


.header-title {
    display: flex;
    align-items: center;
    gap: 13px;

    white-space: nowrap;
}


.header-icon {
    font-family: var(--pixel-font);

    font-size: 25px;

    color: var(--pink);

    line-height: 1;

    text-shadow:
        0 0 8px rgba(255, 20, 147, 0.45);
}


.digital-title {
    font-family: var(--pixel-font);

    font-size: 25px;

    letter-spacing: 3px;

    color: var(--white);

    text-shadow:
        0 0 8px rgba(255, 79, 163, 0.25);
}


.header-tagline {
    font-family: var(--pixel-font);

    font-size: 10px;

    color: var(--text);

    letter-spacing: 0.5px;
}


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

.hero {
    position: relative;

    height: 350px;

    margin-top: 5px;

    border: 1px solid var(--border);

    border-radius: 5px;

    overflow: hidden;

    background: #090308;

    box-shadow: var(--shadow);
}


.hero-image {
    position: absolute;
    inset: 0;
}


.hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    filter:
        grayscale(15%)
        sepia(15%)
        brightness(0.75)
        contrast(1.12);
}





/* =========================================================
   HERO TITLE
   ========================================================= */

.hero-logo {
    position: absolute;

    right: 30px;
    top: 38px;

    font-family: var(--pixel-font);

    font-size: 43px;

    font-weight: 600;

    font-style: italic;

    letter-spacing: 5px;

    color: rgba(255, 225, 239, 0.94);

    text-shadow:
        2px 2px 0 rgba(60, 5, 35, 0.9),
        0 0 14px rgba(255, 50, 160, 0.35);
}


.hero-devanagari {
    position: absolute;

    right: 32px;
    top: 91px;

    font-family: "Noto Sans Devanagari", sans-serif;

    font-size: 16px;

    font-style: italic;

    font-weight: 500;

    letter-spacing: 0.5px;

    color: rgba(255, 190, 220, 0.75);

    text-shadow:
        0 0 5px rgba(255, 20, 147, 0.25);

    white-space: nowrap;
}

/* =========================================================
   HERO DEVANAGARI TOOLTIP
   ========================================================= */

.hero-devanagari.tooltip {
    cursor: help;
}


/* Tooltip */

.hero-tooltip-text {
    visibility: hidden;
    opacity: 0;

    position: absolute;

    right: 0;
    top: calc(100% + 10px);

    width: 300px;

    padding: 10px 12px;

    background: #0b0308;

    border: 1px solid var(--pink);
    border-radius: 4px;

    color: var(--pink-bright);

    font-family: var(--body-font);

    font-size: 11px;
    font-weight: 400;

    line-height: 1.55;

    letter-spacing: 0;

    white-space: normal;

    text-align: left;

    box-shadow:
        0 0 10px rgba(255, 20, 147, 0.18);

    z-index: 100;

    pointer-events: none;

    transform: translateY(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/* Little arrow */

.hero-tooltip-text::before {
    content: "";

    position: absolute;

    top: -6px;
    right: 20px;

    width: 10px;
    height: 10px;

    background: #0b0308;

    border-left: 1px solid var(--pink);
    border-top: 1px solid var(--pink);

    transform: rotate(45deg);
}


/* Show tooltip */

.hero-devanagari.tooltip:hover .hero-tooltip-text {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .hero-tooltip-text {
        width: 240px;

        font-size: 10px;

        right: 0;
    }
}


@media (max-width: 430px) {

    .hero-tooltip-text {
        width: 200px;

        padding: 8px 10px;

        font-size: 9px;
    }
}

/* =========================================================
   HERO SIDEBAR
   ========================================================= */

.hero-sidebar {
    position: absolute;

    left: 18px;
    top: 18px;

    width: 270px;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


/* =========================================================
   MINI PANELS
   ========================================================= */

.mini-panel {
    background:black;

    border: 1px solid var(--border-bright);

    border-radius: 6px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.65),
        inset 0 1px rgba(255, 180, 220, 0.06);

    overflow: hidden;
}


.panel-heading {
    padding: 6px 10px;

    color: var(--pink);

    font-family: var(--pixel-font);

    font-size: 6px;

    letter-spacing: 0.5px;

    border-bottom: 1px solid rgba(180, 70, 130, 0.35);

    text-shadow:
        0 0 5px rgba(255, 20, 147, 0.25);
}


.admin-message {
    margin: 6px;

    padding: 6px 8px;

    border: 1px solid #684657;

    border-radius: 4px;

    background: rgba(10, 3, 9, 0.9);

    color: var(--white);

    font-size: 11px;
}

/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.main-nav {
    margin-top: 5px;

    min-height: 40px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 6px 11px;

    border: 1px solid var(--border);

    border-radius: 5px;

    background:black;

    box-shadow: var(--shadow);

    font-family: var(--pixel-font);

    font-size: 8px;

    white-space: nowrap;

    overflow: hidden;
}


.main-nav a {
    color: var(--pink-bright);

    text-decoration: none;

    text-shadow:
        0 0 4px rgba(255, 20, 147, 0.2);
}


.main-nav a:hover {
    color: var(--pink-hot);

    text-shadow:
        0 0 8px rgba(255, 20, 147, 0.7);
}


.nav-label {
    color: var(--text);
}


/* =========================================================
   CONTENT LAYOUT
   ========================================================= */

.content-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px;

    gap: 5px;

    margin-top: 5px;
}


/* =========================================================
   CONTENT PANEL
   ========================================================= */
.content {
    padding: 15px;

    color: var(--text);

    font-size: 13px;

    line-height: 1.7;

    min-height: 470px;
}

.content-panel {
    min-height: 470px;
}

.content-panel,
.sub-nav {
    min-width: 0;

    border: 1px solid var(--border);

    border-radius: 5px;

    background:black;

    box-shadow: var(--shadow);

    overflow: hidden;
}


.content-panel-header {
    min-height: 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 10px;

    border-bottom: 1px solid var(--border);

    background:black;

    color: var(--white);

    font-family: var(--pixel-font);

    font-size: 8px;

    letter-spacing: 0.5px;
}


.window-controls {
    color: #876b79;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content {
    padding: 15px;

    color: var(--text);

    font-size: 13px;

    line-height: 1.7;
}


.content p {
    margin:
        0
        0
        14px;
}


.intro-question {
    text-align: right;

    color: var(--pink-bright);

    font-size: 13px;
}

.intro-question-left {
    text-align: left;

    color: var(--pink-bright);

    font-size: 13px;
}

.creative-intro strong {
    color: var(--white);
    font-weight: 600;

    text-shadow:
        0 0 5px rgba(255, 79, 163, 0.25);
}

.creative-intro em {
    color: var(--pink-bright);
    font-style: italic;
}

.intro-highlight {
    color: var(--pink);
    font-family: var(--pixel-font);
    font-size: 11px;
    letter-spacing: 1px;

    text-align: center;

    padding: 8px 5px;

    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}

.pink-text {
    color: var(--pink-hot);

    text-shadow:
        0 0 6px rgba(255, 20, 147, 0.4);
}

.intro-signoff {
    font-family: var(--pixel-font);

    color: var(--pink-bright);

    text-align: right;

    font-size: 12px;
}

/* =========================================================
   SANSKRIT VERSE TOOLTIP
   ========================================================= */

.intro-question.tooltip {
    position: relative;
    cursor: help;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 320px;
    padding: 10px 12px;
    background: #0b0308;
    border: 1px solid var(--pink);
    border-radius: 4px;
    color: var(--pink-bright);
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.18);
    z-index: 50;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: #0b0308;
    border-left: 1px solid var(--pink);
    border-top: 1px solid var(--pink);
    transform: rotate(45deg);
}

.intro-question.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   INTRO QUESTION LEFT TOOLTIP
   ========================================================= */

.intro-question-left.tooltip {
    position: relative;
    cursor: help;
}

.intro-question-left .tooltip-text {
    visibility: hidden;
    opacity: 0;

    position: absolute;

    left: 0;
    top: calc(100% + 8px);

    width: 450px;

    padding: 10px 12px;

    background: #0b0308;

    border: 1px solid var(--pink);

    border-radius: 4px;

    color: var(--pink-bright);

    font-family: var(--body-font);

    font-size: 11px;

    font-weight: 400;

    line-height: 1.55;

    text-align: left;

    box-shadow:
        0 0 10px rgba(255, 20, 147, 0.18);

    z-index: 50;

    pointer-events: none;

    transform: translateY(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/* Tooltip arrow */

.intro-question-left .tooltip-text::before {
    content: "";

    position: absolute;

    top: -6px;
    left: 20px;

    width: 10px;
    height: 10px;

    background: #0b0308;

    border-left: 1px solid var(--pink);
    border-top: 1px solid var(--pink);

    transform: rotate(45deg);
}


/* Show tooltip */

.intro-question-left.tooltip:hover .tooltip-text {
    visibility: visible;

    opacity: 1;

    transform: translateY(0);
}


.content a {
    color: var(--pink-bright);

    text-decoration: none;
}


.content a:hover {
    color: var(--pink-hot);

    text-decoration: underline;

    text-shadow:
        0 0 5px rgba(255, 20, 147, 0.35);
}


/* =========================================================
   NOTICE
   ========================================================= */

.notice-box {
    text-align: center;
    margin: 20px 0;

    padding: 12px 14px;

    border: 1px solid #70465c;

    border-radius: 5px;

    background:black;

    box-shadow:
        inset 0 1px rgba(255, 140, 195, 0.04);
}


.notice-box p {
    margin: 0;

    color: var(--pink-bright);

    font-size: 12px;
}


/* =========================================================
   SUB NAVIGATION
   ========================================================= */

.sub-nav {
    min-width: 0;

    border: 1px solid var(--border);

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(11, 4, 10, 0.98),
            rgba(3, 1, 3, 0.99)
        );

    box-shadow: var(--shadow);

    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.sub-content {
    padding: 11px;

    display: flex;
    flex-direction: column;

    flex: 1;
}


.sub-description {
    color: var(--text);

    font-size: 11px;

    margin:
        0
        15px
        13px;

    line-height: 1.6;
}


.sub-button {
    width: 100%;

    display: block;

    margin-bottom: 8px;

    padding: 5px 8px;

    border: 1px solid #674556;

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            #24121e,
            #0b0409
        );

    box-shadow:
        inset 0 1px rgba(255, 180, 220, 0.05);

    color: #bfa9b5;

    font-family: var(--pixel-font);

    font-size: 8px;

    text-align: center;

    text-decoration: none;

    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}


.sub-button:hover {
    border-color: var(--pink);

    color: var(--pink-bright);

    background:
        linear-gradient(
            180deg,
            #351326,
            #0d040a
        );

    box-shadow:
        0 0 7px rgba(255, 20, 147, 0.12);
}


/* =========================================================
   SUB NAV IMAGE
   ========================================================= */

.sub-image {
    width: 100%;

    margin-top: 12px;

    overflow: hidden;

    border: 1px solid #674556;

    border-radius: 13px;

    background: #000;

    flex: 1;
}

.sub-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 260px;

    object-fit: cover;

    filter:
        saturate(0.6);
}

/* =========================================================
   DESKTOP ONLY
   ========================================================= */

/*
   These elements are no longer part of the design.
   The HTML elements can be removed entirely, but these rules
   also guarantee they stay hidden if they remain in the HTML.
*/

.top-corner,
.back-top,
.background-title,
.background-japanese {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .site-wrapper {
        width: min(
            900px,
            calc(100% - 30px)
        );

        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body {
        font-size: 13px;
        line-height: 1.65;
    }


    .site-wrapper {
        width: calc(100% - 18px);

        margin: 0 auto;

        padding-top: 9px;
        padding-bottom: 35px;
    }


    /* HEADER */

    .site-header {
        min-height: auto;

        padding: 12px;

        flex-direction: column;

        align-items: flex-start;

        gap: 6px;
    }


    .digital-title {
        font-size: 25px;

        letter-spacing: 2px;
    }


    .header-icon {
        font-size: 28px;
    }


    .header-tagline {
        font-size: 10px;

        padding-left: 2px;

        line-height: 1.4;
    }


    /* HERO */

    .hero {
        height: 390px;
    }


    .hero-sidebar {
        width: 190px;

        left: 9px;

        top: 9px;

        gap: 7px;
    }


    .hero-logo {
        right: 12px;

        top: 20px;

        font-size: 25px;

        letter-spacing: 2px;
    }


    .hero-devanagari {
        right: 13px;

        top: 52px;

        font-size: 8px;
    }


    .panel-heading {
        font-size: 10px;

        padding: 6px 8px;
    }


    .admin-message {
        font-size: 10px;

        padding: 6px;
    }


    /* NAVIGATION */

    .main-nav {
        min-height: auto;

        padding: 9px;

        flex-wrap: wrap;

        white-space: normal;

        gap: 6px 8px;

        font-size: 10px;

        line-height: 1.5;
    }


    /* CONTENT */

    .content-panel {
        min-height: 420px;
    }

    .content {
        min-height: 470px;
    }

    .content-layout {
        grid-template-columns: 1fr;
    }


    .sub-nav {
        order: 2;
    }


    .content-panel {
        order: 1;
    }


    .content-panel-header {
        min-height: 34px;

        font-size: 11px;

        padding: 6px 9px;
    }


    .content {
        padding: 12px;

        font-size: 12px;

        line-height: 1.7;
    }


    .content p {
        margin-bottom: 14px;
    }


    .intro-question {
        text-align: left;

        font-size: 10px;
    }

    /* SUB NAV */

    .sub-content {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .sub-button {
        margin: 0;

        padding: 6px 5px;

        font-size: 9px;
    }

    .sub-content {
        display: flex;

        flex-direction: column;

        padding: 10px;
    }

    .sub-description {
        margin-bottom: 6px;
    }

    .sub-button {
        width: 100%;
    }

    .sub-image {
        margin-top: 12px;

        width: 100%;
    }

    .sub-image img {
        width: 100%;

        height: 240px;

        min-height: 0;

        object-fit: cover;
    }

    .tooltip-text {
        right: auto;
        left: 0;
        width: min(300px, 90vw);
        font-size: 10px;
    }

    .tooltip-text::before {
        left: 20px;
        right: auto;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {

    .site-wrapper {
        width: calc(100% - 12px);
    }


    .site-header {
        padding: 10px;
    }


    .digital-title {
        font-size: 15px;
    }


    .header-icon {
        font-size: 25px;
    }


    .header-tagline {
        font-size: 9px;
    }


    .hero {
        height: 355px;
    }


    .hero-sidebar {
        width: 165px;

        left: 7px;

        top: 7px;
    }


    .hero-logo {
        font-size: 19px;

        right: 8px;

        top: 15px;
    }


    .hero-devanagari {
        right: 8px;

        top: 40px;

        font-size: 8px;
    }


    .panel-heading {
        font-size: 9px;
    }


    .admin-message {
        font-size: 9px;
    }

    .main-nav {
        font-size: 9px;

        gap: 5px 7px;
    }

    .content-panel {
        min-height: 220px;
    }

    .content {
        min-height: 250px;
    }

    .content-panel-header {
        font-size: 10px;
    }


    .content {
        padding: 10px;

        font-size: 11px;
    }


    .intro-question {
        font-size: 9px;
    }



    .sub-description {
        font-size: 9px;
    }


    .sub-button {
        font-size: 8px;
    }

    .sub-image img {
        height: 200px;
    }


    .tooltip-text {
        width: min(270px, 88vw);
        font-size: 9px;
    }


}