/* ============================================================
   PIP-BOY PERSONAL WEBSITE
   STYLE.CSS

   Main colours are controlled by:

   body.theme-green
   body.theme-amber
   body.pimpboy

   ============================================================ */


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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: #071008;
    color: #39ff14;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 14px;

    overflow-x: hidden;
}


/* ============================================================
   THEMES
   ============================================================ */

body.theme-green {

    --main: #39ff14;
    --bright: #8aff75;
    --dark: #123d0d;
    --darker: #061006;
    --panel: rgba(12, 45, 10, 0.70);
    --line: #39ff14;
    --shadow: rgba(57, 255, 20, 0.45);
    --black: #020602;
}


body.theme-amber {

    --main: #ffb000;
    --bright: #ffd45a;
    --dark: #4a3000;
    --darker: #120b00;
    --panel: rgba(65, 42, 0, 0.72);
    --line: #ffb000;
    --shadow: rgba(255, 176, 0, 0.45);
    --black: #080500;
}


body {
    color: var(--main);
    background:
        radial-gradient(
            ellipse at center,
            #102410 0%,
            #030603 70%
        );
}


/* ============================================================
   CRT EFFECT
   ============================================================ */

body::before {
    content: "";
    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 999;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode: screen;
}


body::after {
    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 998;

    box-shadow:
        inset 0 0 100px rgba(0,0,0,0.85),
        inset 0 0 20px var(--shadow);
}


/* ============================================================
   BOOT
   ============================================================ */

#boot-screen {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #020602;

    color: var(--main);

    text-shadow:
        0 0 8px var(--main),
        0 0 20px var(--shadow);

    font-weight: bold;
}


.boot-inner {
    width: min(700px, 90%);

    line-height: 1.6;

    font-size: clamp(12px, 2vw, 18px);
}


#boot-progress {
    letter-spacing: 4px;
}


.blink {
    animation: blink 0.8s steps(1) infinite;
}


@keyframes blink {

    50% {
        opacity: 0;
    }

}


/* ============================================================
   GENERAL
   ============================================================ */

.hidden {
    display: none !important;
}


#pipboy {
    width: min(1500px, 96vw);

    min-height: 96vh;

    margin: 2vh auto;

    padding: 18px;

    border:
        2px solid var(--main);

    box-shadow:
        0 0 20px var(--shadow),
        inset 0 0 30px rgba(0,0,0,0.6);

    background:
        linear-gradient(
            rgba(5,20,5,0.88),
            rgba(2,10,2,0.94)
        );

    text-shadow:
        0 0 5px var(--shadow);

    position: relative;
}


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

.pip-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom:
        2px solid var(--main);

    padding-bottom: 10px;

    margin-bottom: 10px;
}


.header-title {

    font-size: 20px;

    font-weight: bold;

    letter-spacing: 2px;
}


.header-subtitle {

    font-size: 11px;

    opacity: 0.8;

    margin-top: 3px;
}


.header-right {

    display: flex;

    gap: 16px;

    align-items: center;
}


.status-light {

    width: 10px;
    height: 10px;

    background: var(--main);

    border-radius: 50%;

    box-shadow:
        0 0 10px var(--main);

    animation:
        blink 1.5s steps(1) infinite;
}


/* ============================================================
   MAIN TABS
   ============================================================ */

.main-tabs {

    display: flex;

    gap: 4px;

    border-bottom:
        2px solid var(--main);

    margin-bottom: 8px;
}


.tab-button {

    flex: 1;

    padding: 10px 15px;

    color: var(--main);

    background: transparent;

    border: none;

    border-bottom:
        3px solid transparent;

    font-family: inherit;

    font-weight: bold;

    cursor: pointer;
}


.tab-button:hover,
.tab-button.active {

    background: var(--main);

    color: var(--black);

    text-shadow: none;
}


/* ============================================================
   DISPLAY CONTROLS
   ============================================================ */

.display-controls {

    display: flex;

    justify-content: flex-end;

    gap: 6px;

    margin-bottom: 10px;

    align-items: center;
}


.display-label {
    opacity: 0.7;

    margin-right: 4px;
}


.control-button {

    color: var(--main);

    background: transparent;

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

    font-family: inherit;

    font-size: 11px;

    padding: 4px 9px;

    cursor: pointer;
}


.control-button:hover {

    background: var(--main);

    color: var(--black);
}


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

.panel {
    display: none;
}


.panel.active {
    display: block;
}


/* ============================================================
   COMMON LAYOUT
   ============================================================ */

.pip-layout,
.inventory-layout,
.data-layout,
.map-layout,
.radio-layout {

    display: grid;

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

    min-height: 680px;

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


.inventory-layout,
.data-layout,
.map-layout,
.radio-layout {

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


.pip-sidebar,
.inventory-categories,
.data-sidebar,
.map-sidebar,
.radio-sidebar {

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

    padding: 12px;

    background:
        rgba(0,0,0,0.25);
}


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

.panel-title {

    font-size: 18px;

    font-weight: bold;

    padding-bottom: 10px;

    margin-bottom: 10px;

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


.subtab,
.inventory-button,
.data-button {

    display: block;

    width: 100%;

    padding: 11px 8px;

    text-align: left;

    color: var(--main);

    background: transparent;

    border: none;

    font-family: inherit;

    font-weight: bold;

    cursor: pointer;
}


.subtab:hover,
.subtab.selected,
.inventory-button:hover,
.inventory-button.selected,
.data-button:hover,
.data-button.selected {

    background: var(--main);

    color: var(--black);

    text-shadow: none;
}


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

.pip-content,
.inventory-content,
.data-content,
.map-screen,
.radio-main {

    min-width: 0;

    padding: 18px;

    overflow: hidden;
}


.screen-heading,
.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 18px;

    font-weight: bold;

    padding-bottom: 8px;

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

    margin-bottom: 14px;
}


.character-panel {

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

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

    flex-direction: column;

    text-align: center;
}


.character-panel img {

    max-width: 100%;

    max-height: 430px;

    image-rendering: pixelated;

    object-fit: contain;

    filter:
        drop-shadow(0 0 8px var(--shadow));
}


.image-placeholder {

    padding: 25px;

    border:
        1px dashed var(--main);

    opacity: 0.7;

    font-size: 11px;

    line-height: 1.7;
}


#vault-boy-placeholder {
    display: none;
}


/* ============================================================
   STAT STATUS
   ============================================================ */

.stat-view {
    display: none;
}


.stat-view.active {
    display: block;
}


.status-grid {

    display: grid;

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

    gap: 15px;
}


.status-box {

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

    padding: 15px;

    min-height: 170px;

    background:
        var(--panel);
}


.box-title {

    font-weight: bold;

    margin-bottom: 15px;

    padding-bottom: 6px;

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


.condition-row {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 6px 0;
}


.meter {

    height: 8px;

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

    margin: 4px 0 10px;
}


.meter-fill {

    height: 100%;

    background: var(--main);

    box-shadow:
        0 0 8px var(--shadow);
}


.effect-entry,
.condition-entry,
.equipment-entry {

    padding: 6px 0;

    border-bottom:
        1px dotted rgba(255,255,255,0.15);
}


/* ============================================================
   SPECIAL
   ============================================================ */

.special-grid {

    display: grid;

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

    gap: 10px;
}


.special-card {

    display: grid;

    grid-template-columns: 65px 1fr 65px;

    align-items: center;

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

    padding: 12px;

    background: var(--panel);

    cursor: pointer;
}


.special-card:hover {

    background: var(--main);

    color: var(--black);

    text-shadow: none;
}


.special-letter {

    font-size: 34px;

    font-weight: bold;
}


.special-name {

    font-size: 15px;

    font-weight: bold;
}


.special-value {

    text-align: right;

    font-size: 28px;

    font-weight: bold;
}


/* ============================================================
   SKILLS
   ============================================================ */

.skills-grid {

    display: grid;

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

    gap: 8px;
}


.skill-row {

    display: grid;

    grid-template-columns:
        150px 1fr 45px;

    gap: 10px;

    align-items: center;

    padding: 8px;

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

    background: var(--panel);
}


.skill-bar {

    height: 8px;

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


.skill-fill {

    height: 100%;

    background: var(--main);
}


/* ============================================================
   PERKS
   ============================================================ */

.perk-list {

    display: grid;

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

    gap: 8px;

    max-height: 470px;

    overflow-y: auto;

    padding-right: 5px;
}


.perk-button {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    padding: 11px;

    color: var(--main);

    background: var(--panel);

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

    font-family: inherit;

    text-align: left;

    cursor: pointer;
}


.perk-button:hover,
.perk-button.selected {

    background: var(--main);

    color: var(--black);

    text-shadow: none;
}


.perk-level {

    margin-left: 10px;

    opacity: 0.7;
}


.detail-box {

    margin-top: 15px;

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

    padding: 15px;

    background:
        rgba(0,0,0,0.35);
}


.detail-title {

    font-size: 19px;

    font-weight: bold;

    margin-bottom: 5px;
}


.detail-meta {

    opacity: 0.7;

    margin-bottom: 10px;
}


.detail-text {

    line-height: 1.6;
}


/* ============================================================
   INVENTORY
   ============================================================ */

.inventory-content {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.inventory-table-header {

    display: grid;

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

    gap: 15px;

    padding: 9px 12px;

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

    font-weight: bold;
}


.inventory-list {

    width: 100%;

    flex: 1;

    overflow-y: auto;
}


.inventory-row {

    display: grid;

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

    gap: 15px;

    padding: 12px;

    border-bottom:
        1px dotted var(--main);
}


.inventory-row:hover {

    background: var(--main);

    color: var(--black);

    text-shadow: none;
}


/* ============================================================
   DATA
   ============================================================ */

.data-content {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.terminal-input {

    width: 100%;

    padding: 10px;

    margin-bottom: 12px;

    background: #000;

    color: var(--main);

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

    font-family: inherit;

    outline: none;
}


.data-list {

    display: grid;

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

    gap: 10px;

    overflow-y: auto;

    padding-right: 5px;
}


.data-entry {

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

    padding: 13px;

    background: var(--panel);

    cursor: pointer;
}


.data-entry:hover {

    background: var(--main);

    color: var(--black);

    text-shadow: none;
}


.data-entry-title {

    font-weight: bold;

    margin-bottom: 6px;
}


.data-entry-meta {

    font-size: 11px;

    opacity: 0.7;

    margin-bottom: 8px;
}


.data-entry-description {

    line-height: 1.5;
}


/* ============================================================
   PERSONAL
   ============================================================ */

.personal-header {

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

    padding: 20px;

    margin-bottom: 15px;

    background: var(--panel);
}


.personal-header h1 {

    margin: 6px 0;

    font-size: 28px;
}


.personal-header p {

    margin: 0;

    opacity: 0.8;
}


.small-label {

    font-size: 11px;

    opacity: 0.7;

    letter-spacing: 2px;
}


.personal-section {

    margin-bottom: 18px;

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

    padding: 15px;

    background: var(--panel);
}


.section-title {

    font-weight: bold;

    padding-bottom: 8px;

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

    margin-bottom: 12px;
}


.personal-grid {

    display: grid;

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

    gap: 8px;
}


.personal-card {

    padding: 10px;

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


.personal-card-title {

    font-weight: bold;

    margin-bottom: 5px;
}


.personal-card a {

    color: inherit;
}


/* ============================================================
   MAP
   ============================================================ */

.map-list-button {

    display: block;

    width: 100%;

    color: var(--main);

    background: transparent;

    border: none;

    font-family: inherit;

    text-align: left;

    padding: 10px;

    cursor: pointer;
}


.map-list-button:hover,
.map-list-button.selected {

    background: var(--main);

    color: var(--black);
}


.map-image-container {

    width: 100%;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    overflow: auto;

    background: #000;
}


.map-image-container img {

    max-width: 100%;

    max-height: 75vh;

    object-fit: contain;

    image-rendering: auto;
}


#map-placeholder {
    display: none;
}


/* ============================================================
   RADIO
   ============================================================ */

.radio-layout {

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


.radio-main {

    display: flex;

    flex-direction: column;
}


.radio-display {

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

    padding: 20px;

    margin-bottom: 15px;

    background: var(--panel);
}


.radio-station-name {

    font-size: 25px;

    font-weight: bold;

    margin: 5px 0 10px;
}


.radio-song-name {

    opacity: 0.8;
}


.visualizer-container {

    height: 180px;

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

    background: #000;

    margin-bottom: 15px;
}


#visualizer {

    width: 100%;

    height: 100%;

    display: block;
}


.player-controls {

    display: flex;

    gap: 8px;

    margin-bottom: 15px;
}


.player-controls button {

    flex: 1;

    padding: 11px;

    color: var(--main);

    background: transparent;

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

    font-family: inherit;

    cursor: pointer;
}


.player-controls button:hover {

    background: var(--main);

    color: var(--black);
}


.station-button {

    display: block;

    width: 100%;

    padding: 10px;

    color: var(--main);

    background: transparent;

    border: none;

    font-family: inherit;

    text-align: left;

    cursor: pointer;
}


.station-button:hover,
.station-button.selected {

    background: var(--main);

    color: var(--black);
}


.song-entry {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 10px;

    border-bottom:
        1px dotted var(--main);

    cursor: pointer;
}


.song-entry:hover {

    background: var(--main);

    color: var(--black);
}


/* ============================================================
   PIMP BOY 3 BILLION
   ============================================================ */

body.pimpboy {

    --main: #ffe14a;
    --bright: #fff5a0;
    --dark: #5d4600;
    --darker: #130e00;
    --panel: rgba(90,65,0,0.72);
    --line: #ffe14a;
    --shadow: rgba(255,190,0,0.7);
    --black: #070500;

    background:
        radial-gradient(
            ellipse at center,
            #513c00,
            #090700 70%
        );
}


body.pimpboy #pipboy {

    border-color: #ffe14a;

    box-shadow:
        0 0 35px rgba(255,190,0,0.8),
        inset 0 0 30px rgba(255,220,100,0.15);

    background:
        linear-gradient(
            rgba(50,35,0,0.9),
            rgba(10,7,0,0.96)
        );
}


body.pimpboy .pip-header {

    border-bottom-color: #ffe14a;
}


body.pimpboy .pimpboy-button {

    color: #ffe14a;

    text-shadow:
        0 0 10px #ffe14a;
}


/* ============================================================
   HIDDEN PIMP BUTTON
   ============================================================ */

.pimpboy-button {

    position: fixed;

    right: 8px;

    bottom: 8px;

    width: 14px;

    height: 14px;

    padding: 0;

    border: none;

    background: transparent;

    color: rgba(57,255,20,0.08);

    cursor: pointer;

    z-index: 1001;
}


.pimpboy-button:hover {

    color: var(--main);
}


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

footer {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    flex-wrap: wrap;

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

    margin-top: 12px;

    padding-top: 10px;

    font-size: 10px;

    opacity: 0.65;
}


/* ============================================================
   SCROLLBARS
   ============================================================ */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;
}


::-webkit-scrollbar-track {

    background: #000;
}


::-webkit-scrollbar-thumb {

    background: var(--main);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    #pipboy {

        width: 100vw;

        min-height: 100vh;

        margin: 0;

        padding: 10px;
    }


    .pip-layout {

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


    .character-panel {

        display: none;
    }


    .status-grid,
    .special-grid,
    .skills-grid,
    .perk-list,
    .data-list,
    .personal-grid {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    body {

        font-size: 12px;
    }


    .main-tabs {

        overflow-x: auto;
    }


    .tab-button {

        min-width: 70px;
    }


    .pip-layout,
    .inventory-layout,
    .data-layout,
    .map-layout,
    .radio-layout {

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


    .inventory-table-header,
    .inventory-row {

        grid-template-columns:
            minmax(0,1fr)
            90px
            40px;
    }


    .skill-row {

        grid-template-columns:
            100px 1fr 35px;
    }


    .pip-header {

        align-items: flex-start;
    }


    .header-subtitle {

        display: none;
    }


    footer {

        flex-direction: column;
    }

}