/* my friendship with Rubik ended, now MapleMono is my best friend */
@font-face {
   font-family: MapleMono;
   src: url('../fonts/MapleMono-Regular.ttf');
   font-weight: normal;
}
@font-face {
   font-family: MapleMono;
   src: url('../fonts/MapleMono-Bold.ttf');
   font-weight: bold;
}


body {
   font-family: "MapleMono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   overflow: hidden;
   
   background-image: var(--sky-main);
   background-color: transparent;
   background-blend-mode: normal;
   background-size: 175vh;
}
.goInTheCenter {
   align-items: center;
   justify-content: center;
   display: flex;
   min-height: 100vh;
   width: 100%;
}
/* chocolate or vanilla? */
:root {
   --inner-bg: repeating-linear-gradient(#F0F0F0, #F0F0F0 2px, #FFFFFF 2px, #FFFFFF 4px);
   
   --sky-main: url('../images/looping-sky.jpg');
   --sky-blend-layer: url('../images/looping-sky-blend-mode.jpg');
   --friend-color: #ffffff;

   --Heading-Alt-color: #000000;
   --Body-Text-color: #3a3a3a;

   --window-outline-shadow: 0 15px 35px #00000015, -2px -2px 0px 0px #DADADA inset, 2px -2px 0px 0px #DADADA inset;
   --window-outline-bottom: 2px solid #DADADA;
   --window-background-color: #ffffff90;

   --topbar-background-gradient: linear-gradient(to top, #C4C4C4, #D2D2D2);
   --topbar-shadow: 0px 1px 0.5px 0px #E4E4E4 inset, 0px -1px 0.5px 0px #7E7E7E inset;
}
body.dark-mode {
   --inner-bg: repeating-linear-gradient(#1a1a1a, #1a1a1a 2px, #2e2e2e 2px, #2e2e2e 4px);
   
   background-image: url('../images/looping-sky-dark.jpg') !important;
   background-color: transparent !important;
   background-blend-mode: normal !important;

   --Heading-Alt-color: #ffffff;
   --Body-Text-color: #f0f0f0;

   --window-outline-shadow: 0 15px 35px #0000007f, -2px -2px 0px 0px #000000 inset, 2px -2px 0px 0px #000000 inset;
   --window-outline-bottom: 4px solid #000000;
   --window-background-color: #0000006a;

   --topbar-background-gradient: linear-gradient(to top, #1f1f1f, #151515);
   --topbar-shadow: 0px 1px 0.5px 0px #000000 inset, 0px -1px 0.5px 0px #323232 inset;
}
body.tinted-sky {
   /* Stack: PNG (top) -> Friend Color (middle) -> Original Sky (bottom) */
   background-image: 
      var(--sky-blend-layer), 
      linear-gradient(var(--friend-color), var(--friend-color)), 
      var(--sky-main);
   
   /* Set blend modes for each transition:
      1. PNG "screens" onto the Color
      2. Color "normal" (or overlay) onto the Sky */
   background-blend-mode: screen, normal, normal;
   
   background-size: 175vh;
}


/* the boxes of doom and despair */
.outer-container {
   background-image: linear-gradient(to top, #D24D4D 20%, #FD6161 80%);
   outline: #B63737 solid 1.75px;
   padding: 25px;
   border-radius: 40px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
}
.inner-container {
   position: relative;
   background: var(--inner-bg);
   box-shadow: 0px 1.75px 0px 0px #B63737 inset, 0px 10px 12px 0px #d42a2a6a inset;
   padding: 30px 30px;
   border-radius: 24px;
   width: 100%;
   min-width: 700px;
   max-width: 900px;
   height: 70vh;
   max-height: 70vh;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;

   overflow-y: scroll;
   scrollbar-color: #ff7675;
   scrollbar-width: none;
}
body.tinted-sky .outer-container {
   /* Gradient from White to Grey, blended over the friend color */
   background-image: 
      linear-gradient(to top, #b8a9d9 20%, #FFFFFF 80%),
      linear-gradient(var(--friend-color), var(--friend-color));
   background-blend-mode: multiply; /* This tints the grey gradient with the friend color */
   
   /* Half-transparent black outline */
   outline: color-mix(in srgb, var(--friend-color), #2e204e 30%) solid 1.75px;
}

body.tinted-sky .inner-container {
   /* Update the insets: friend-color for the top, half-transparent black for the glow */
   box-shadow: 
      0px 1.75px 0px 0px color-mix(in srgb, var(--friend-color), #2e204e 30%) inset, 
      0px 10px 12px 0px color-mix(in srgb, var(--friend-color), transparent 50%) inset;
      
   /* Dynamic scrollbar color */
   scrollbar-color: var(--friend-color) transparent;
}


/* paneling system */
.panels-container {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
   gap: 40px;
   margin-top: 10px;
}
.panel {
   flex: var(--panel-width, 1);
   width: 100%;
   display: flex;
   flex-direction: column;
}
.padded-region {
   padding: 20px;
   padding-top: 10px;
}
.rounded-corners {
   border-radius: var(--corner-radius);
}
.image {
   margin-bottom: 10px; 
   display: block;
}

/* fren */
.friends-grid {
   display: grid;
   width: 100%;
   /* bro what is this 'for real' measurement */
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 25px;
   margin-top: 10px;
}
.friend-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   transition: transform 0.25s ease;
   cursor: pointer;
}
body.friend-card-selected .friends-grid {
   display: none;
}
.friend-card:hover {
   transform: translateY(-5px);
}
.friend-photo {
   width: 100%;
   /* literally UiAspectRatioConstraint */
   aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: 15px;
   filter: contrast(115%);
   box-shadow: 0 2px 20px #00000032;
}
.friend-info-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.7rem;
}
.friend-info-table tr {
   border-bottom: var(--window-outline-bottom);
}
.friend-info-table th {
   text-align: left;
   padding: 8px;
   color: var(--friend-theme-color); 
   width: 40%;
   vertical-align: top;
   background-color: color(from var(--friend-theme-color) srgb r g b / 0.1);
}
body.dark-mode .friend-info-table th {
   color: var(--Body-Text-color);
   background-color: color(from var(--friend-theme-color) srgb r g b / 0.25);
}
.friend-info-table td {
   text-align: left;
   padding: 8px;
   color: var(--Body-Text-color);
   width: 60%;
}
.friend-emoji-list {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 5px 0;
}
.friend-emoji-img {
   height: 24px;
   width: auto;
}
.friend-banner-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 5px 0;
}
.friend-banner-img {
   height: auto;
    max-height: 100px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    image-rendering: pixelated;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.friend-example-img-vertical {
   height: 200px;
   width: auto;
   cursor: pointer;
}
.friend-example-img-horizontal {
   height: auto;
   max-height: 140px;
   width: auto;
   cursor: pointer;
}
.friend-example-img-auto {
   height: auto;
   max-width: 500px;
   width: auto;
   cursor: pointer;
}




/* The Fullscreen Dimmer */
#dim-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999; /* Highest level */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    overflow: auto;
    padding: 100px;
}

#dim-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The Animated Funny Moment Image */
#funny-moment-img {
    max-width: 80%;
    max-height: 80%;
    transform: scale(0.75) translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.2, 1, 0, 1); /* Slightly faster for snappier zoom */
    image-rendering: pixelated;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    position: relative;
    z-index: 10;
}
/* State when zoomed in */
#funny-moment-img.zoomed {
    max-width: none;  /* Allows image to exceed the 80% limit */
    max-height: none; 
    transform: scale(1.15) translateY(0) !important; /* Large zoom */
    cursor: zoom-out;
}
#dim-overlay.active #funny-moment-img {
    transform: scale(1) translateY(0);
    opacity: 1;
}






/* text styles like in the MacOS pages app */
.paragraph-styles {
   font-family: "MapleMono", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   }
.paragraph-styles Heading {
   font-size: 1.8rem;
   font-weight: bold;
   color: #fd5b5b;
   display: block;
}
.paragraph-styles Heading-Alt {
   font-size: 1.8rem;
   font-weight: bolder;
   color: var(--Heading-Alt-color);
   display: block;
}
.paragraph-styles Body-Text {
   font-size: 0.8rem;
   font-weight: bold;
   font-style: italic;
   color: var(--Body-Text-color);
   display: block;
}
.paragraph-styles Sub-Text {
   font-size: 0.8rem;
   font-style: italic;
   color: #8C8C8C;
   display: block;
   margin-top: -5px;
   margin-bottom: 10px;
}
.paragraph-styles Window-Name {
   font-size: 0.75rem;
   color: var(--Body-Text-color);

   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}


/* the epic MacOS Aqua style system thingamabob */
.window {
   border-radius: 10px 10px;
   background-color: var(--window-background-color);
   min-height: 400px;

   /* janky, I know lol */
   box-shadow: var(--window-outline-shadow);
}
.topbar {
   background-image: var(--topbar-background-gradient);
   box-shadow: var(--topbar-shadow);
   height: 20px;
   border-top-right-radius: 10px 10px;
   border-top-left-radius: 10px 10px;

   display: flex;
   align-items: center;
   gap: 6px;
   padding-left: 8px;
   position: relative;
}
/* this magically fixes the topbar's shifting */
* {
  box-sizing: border-box;
}
.round-button {
   background-color: var(--button-color, #fd5b5b);
   background-image: url('../images/round-button-overlay.png');
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   image-rendering: -webkit-optimize-contrast;
   background-blend-mode: screen;
   box-shadow: 0px 1px 2px 0px #00000067 inset;
   border-radius: 100%;
   overflow: hidden;
   width: 12px;
   height: 12px;
   background-size: contain;

   margin: 0;
   display: flex;
   cursor: pointer;
}
.round-button::before {
   content: "";
   width: 100%;
   height: 100%;
   background-image: var(--hover-icon);
   background-size: 100%; 
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   image-rendering: -webkit-optimize-contrast;

   opacity: 0;
}
.round-button:hover::before {
   opacity: 0.67;
}

/* what's up doc(k)? */
.dock {
   background-image: url('../images/dock.png');
   background-size: contain; 
   background-position: center;
   width: 250px;
   height: 40px;
   margin: 0;
   display: flex;
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   bottom: 0px;

   /* align-items: center; */
   align-items: flex-end;
   justify-content: center;
   gap: 15px;
   padding-bottom: 15px;
}
.dock App {
   background-image: var(--app-icon);
   background-size: contain;
   width: 53px;
   height: 53px;
   margin: 0;
   display: flex;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   border-radius: 9.5px;
   position: relative;
}
.dock activeApp {
   background-image: url('../images/activeAppGlow.png');
   background-size: contain;
   width: 16.7px;
   height: 16.7px;
   position: absolute;
   display: block;
   bottom: -2px;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}
.cataclysm-animated:hover App {
   background-image: var(--hover-icon);
}

/* maximize function */
body.is-maximized .outer-container {
   position: fixed;
   top: 20px;
   left: 20px;
   right: 20px;
   bottom: 20px;
   width: auto;
   height: auto;
   max-width: none;
}
body.is-maximized .dock {
   display: none;
}
body.is-maximized .inner-container {
   width: 100%;
   height: 100%;
   max-width: none;
   max-height: none;
   transition: all 0.4s cubic-bezier(0, 1 , 0, 1);
}
body.is-maximized .goInTheCenter {
    display: flex;
}

/* mobile support, this part is Ai generated, sorry.... 😔😔😔 */
@media (max-width: 608px) {

   body {
        overflow-y: auto !important; /* Re-enable scrolling lost from desktop 'hidden' */
        height: auto;
    }

    .goInTheCenter {
      
        align-items: flex-start;
        padding: 10px;
        min-height: auto;
        display: block; /* Flex-center breaks long scrolling pages on mobile */
        height: auto;
        padding-bottom: 120px; /* Space so the dock doesn't cover content */
    
    }

    .outer-container {
        width: 100%;
        min-width: 0;
        padding: 10px;
        border-radius: 20px;
        margin-bottom: 80px;
    }

    .inner-container {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: none;
        padding: 15px;
        overflow-y: visible; /* Let the main page scroll instead of a tiny box */
        height: auto;
    }

    .panels-container {
        flex-direction: column;
        gap: 20px;
    }

    .dock {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; /* Or '100% 100%' if you want it to stretch */
        width: 90%;
        max-width: 350px; /* Keeps it from getting too wide */
        bottom: 0px; /* Lift it slightly off the edge */
    }

    .dock App {
        width: 45px;
        height: 45px;
    }

    .window {
        min-height: 200px;
    }
}