/* CSS STYLE SHEET */

/* GLOBAL RESET & FONTS */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0d0a06;
  --bg2:#141009;
  --bg3:#1c1508;
  --orange:#c8601a;
  --orange-dim:#7a3a0e;
  --amber:#d4900a;
  --teal:#1a8a7a;
  --teal-bright:#2ec4b0;
  --teal-dim:#0d4a42;
  --brown:#4a3010;
  --text:#c8a060;
  --text-dim:#7a5830;
  --text-bright:#e8c080;
  --border:#2a1c08;
  --border-teal:#0d3d36;
}
body{background:var(--bg);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:13px;line-height:1.6;}

/* LIGHT MODE OVERRIDES */
body.light-mode {
  --bg: #F0F0F0;       /* Light grey main background */
  --bg2: #e0e0e0;      /* Slightly darker light grey for panels */
  --bg3: #d8d8d8;      /* Even darker light grey for accents */
  --text: #222222;     /* Dark text for readability */
  --text-dim: #555555; /* Dimmed dark text */
  --border: #cccccc;   /* Lighter borders */
  
  /* Subtle grid pattern background */
  background-image: 
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* CRT/SCANLINE EFFECT (texture overlay) */
    /*
    body::before{
    content:'';position:fixed;top:0;left:0;right:0;bottom:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.08) 3px,rgba(0,0,0,0.08) 4px);
    pointer-events:none;z-index:9999;
    }
    */

    /*
    .scanline-over{
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.18) 2px,rgba(0,0,0,0.18) 4px);
    pointer-events:none;
    }
    */

/* MAIN CONTAINER (width and centering) */
.wrap{padding:16px;max-width:760px;margin:0 auto;}
/* ACCESSIBILITY (only visible for screen readers) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* HEADER (flex for horizontal alignment) */
.header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--orange-dim);padding-bottom:12px;margin-bottom:20px;
}

    /* FONT: VT323 */
    .logo{font-family:'VT323',monospace;font-size:32px;color:var(--amber);letter-spacing:3px;}
    .logo em{color:var(--teal-bright);font-style:normal;}
    /* DATE/TIME */

    /* UPDATED: Added flex tools to line up the switch next to the text */
    .header-right{
      text-align:right;font-size:11px;color:var(--text-dim);line-height:2;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    /* ADDED: Switch image sizing & cursor rules */
    .header-switch {
      height: 60px;
      cursor: pointer;
    }

    /* valdr_ blink animation */
    .blink{animation:blink 1s step-end infinite;}
    @keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

    .logo a, .logo a:visited {
      color: inherit;
      text-decoration: none;
    }

    /* NAV CONTAINER (positioning, font, colour) */
    .nav{display:flex;gap:1px;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:12px;}
    .nav a{
    font-family:'VT323',monospace;font-size:17px;letter-spacing:1px;
    color:var(--text-dim);text-decoration:none;padding:4px 12px;cursor:pointer;
    border:1px solid transparent;
    }
    .nav a:hover,.nav a.active{color:var(--amber);border-color:var(--orange-dim);}

    /* --- NAV AUTH LINK --- */
    .nav a.nav-auth {
      margin-left: auto;
      color:var(--teal-bright); 
    }

    .nav a.nav-auth:hover {
      color:var(--teal-bright);
      border-color:var(--teal-bright);
    }


/* GRID STRUCTURE (2-column asynchronous layout */
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* left column 2 fractional units - right column 1 fr */
    gap: 16px;
}

/* --- BIO --- */

        /* BIO PANEL */
        .bio-panel {
            padding: 16px;
            border: 1px solid var(--border);
            background: var(--bg-dark);
        }

        /* BIO CONTAINER */
        .profile-top {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 12px;
        }


            /* AVATAR CONTAINER */
            .avatar {
                position: relative;
                width: 300px;  
                height: 300px;
                flex-shrink: 0; /* prevents image from getting squished */
                border: 1px solid var(--border);
            }

                /* AVATAR MODIFIER */
                .avatar-gif {
                    width: 300px;
                    height: 300px;
                    display: block;
                    border: 1px solid var(--border);
                }

            /* AVATAR TEXT (dot point list) */
            .avatar-text {
                list-style: none;
                padding-left: 10px;
                margin: 0;
                font-size: 11px;
                color: var(--text-dim);
                line-height: 1.4;
            }

            /* BIO SECTION */
            .profile-bio {
                border-top: 1px solid var(--border-dim);
                padding-top: 12px;
            }

/* --- GAME CARDS --- */

.computer-card {
    height: 220px;          /* reserves the space immediately */
    display: flex;
    align-items: center;    /* vertical centre */
    justify-content: center;/* horizontal centre */
}

.computer-card img {
    width: 220px;
    max-width: 90%;
    height: auto;
    display: block;
}

/* project preview cards */
.game-card{
    border:1px solid var(--border-teal);background:var(--bg2);
    display:flex;flex-direction:column;
  }
  .game-card .game-title{
    background:var(--teal-dim);border-bottom:1px solid var(--border-teal);color:var(--teal-bright);
  }

    .game-title{
        background:var(--bg3);border-bottom:1px solid var(--border);
        padding:6px 12px;font-family:'VT323',monospace;font-size:16px;
        color:var(--amber);letter-spacing:1px;
    }

    .game-body{padding:16px 14px;flex:1;}
    .game-desc{font-size:12px;color:var(--text-dim);line-height:1.8;margin-bottom:14px;}

    /* statistics box */
    .grid-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
    .mini-stat{
        background:var(--bg3);border:1px solid var(--border-teal);
        padding:10px 10px 8px;text-align:center;
    }
    .mini-stat .n{font-family:'VT323',monospace;font-size:26px;color:var(--teal-bright);}
    .mini-stat .l{font-size:10px;color:var(--text-dim);margin-top:2px;}


    /* game status (online, under construction) */     
    .game-stat{
        display:flex;justify-content:space-between;
        font-size:11px;color:var(--text-dim);
        border-top:1px solid var(--border-teal);padding-top:10px;margin-top:8px;
    }
    .game-stat strong{color:var(--teal-bright);}

    /* button link to game pages */
    .play-btn{
        display:block;width:70%;margin:14px auto 0;
        background:var(--teal-dim);border:1px solid var(--teal);
        color:var(--teal-bright);font-family:'VT323',monospace;font-size:15px;
        letter-spacing:2px;padding:8px;cursor:pointer;text-align:center;
        text-decoration:none;
    }
    .play-btn:hover{background:var(--teal);color:#fff;}

/* --- SINGLE COLUMN LAYOUT --- */    
/* portfolio, journal, projects */       

.layout-single {
    display: block; /* vertical stack */
}

.col {
    display: flex;
    flex-direction: column;
    gap: 16px; /* vertical spacing */
}

/* --- WEB POSTS --- */

.post {border:1px solid var(--border); background:var(--bg2); margin-bottom:12px; position: relative;}

    .post:last-child{margin-bottom:0;}
    .post-head{
    display:flex;justify-content:space-between; align-items:baseline;
    padding:8px 12px; border-bottom:1px solid var(--border);
    }
    .post-type{color:var(--teal-bright); font-size:12px;}
    .post-meta{color:var(--text-dim); font-size:11px;}
    .post-caption{padding:12px; font-size:12px; color:var(--text); line-height:1.8; color: inherit; font-style: italic;}
    .post-body{padding:12px; font-size:12px; color:var(--text); line-height:1.8; color: inherit;}
    .post-tag{padding:0 12px 10px; font-size:11px; color:var(--orange);}

    /* fixes hyperlink formatting */
    .link, .post-type a {text-decoration:none; color:inherit; display:inline-block;}
    .post-caption a, .post-caption a:visited {color:inherit;}
    .post-body a, .post-body a:visited {color:inherit;}
    .post-type a:visited, .post-type a:active {color:inherit;}

    

    /* handles images within posts (prevents overflow) */
    .post-body img {
        max-width: 100%;  
        height: auto;     
        display: block;
        margin: 10px auto; 
        border: 1px solid var(--border);
    }

    .post-status {
      position: absolute;
      bottom: 8px;  
      right: 12px;   
      
      font-size: 9px;
      letter-spacing: 1px;
      color:var(--text-dim); 
      opacity: 0.7;
      text-transform: uppercase;
      font-family: 'Share Tech Mono', monospace;
      pointer-events: none; 
    }

    .image-group {
      width: 50%;
      padding-top: 20px;
      margin: 10px auto; 
      text-align: center;
    }

    .image-group img {
      width: 100%; 
      height: auto;
      display: block;
      border: 1px solid var(--border);
      margin-bottom: 10px;
    }

    .image-row {
        width: 50%;
        margin: 10px auto;
        display: flex;
        gap: 10px;
    }

    .image-row img {
        width: 100%;
        height: auto;
        margin: 0 0 10px;
    }

    .image-row.same-height {
        width: fit-content;
        max-width: 100%;
        margin: 10px auto;
        justify-content: center;
    }

    .image-row.same-height img {
        width: auto;
        height: 100px;
        max-width: none;
    }

    .image-caption {
      font-size: 11px;
      color: var(--text-dim);
      font-style: italic;
      line-height: 1.4;
    }

/* --- JUMP TO TOP --- */
#jump-top {
  position: fixed;
  bottom: 20px; /* always sits BELOW kill-audio */
  right: 20px;
  background: var(--bg);
  color: var(--teal-bright);
  border: 1px solid var(--teal-dim);
  font-family: 'VT323', monospace;
  padding: 6px 12px;
  cursor: pointer;
  z-index: 10000;
  font-size: 14px;
  transition: all 0.2s ease;
  text-transform: lowercase;
  display: none;
  white-space: nowrap;
}

#jump-top:hover {
  background: var(--teal-dim);
  color: #fff;
  border-color: var(--teal-bright);
  box-shadow: 0 0 10px rgba(46, 196, 176, 0.3);
} 



/* --- KILL AUDIO --- */
  #kill-audio {
    position: fixed;
    bottom: 60px;
    right: 20px;
    background: var(--bg);
    color: var(--teal-bright);
    border: 1px solid var(--teal-dim);
    font-family: 'VT323', monospace;
    padding: 6px 12px;
    cursor: pointer;
    z-index: 10000; 
    font-size: 14px;
    transition: all 0.2s ease;
    text-transform: lowercase;
}

#kill-audio:hover {
    background: var(--teal-dim);
    color: #fff;
    border-color: var(--teal-bright);
    box-shadow: 0 0 10px rgba(46, 196, 176, 0.3);
}

#kill-audio:active {
    transform: scale(0.95);
}

.has-kill-audio #kill-audio {
  display: none;
}


#jump-top, #kill-audio, .nav a, .filter-btn, .play-btn {
  touch-action: manipulation;
}

/* --- TAG FILTER --- */

.filter-wrap {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'VT323', monospace;
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
  transition: 0.2s;
}

.filter-btn:hover, .filter-btn.active {
  border-color: var(--teal-bright);
  color: var(--teal-bright);
  background: var(--bg3);
}

/* helper class for the JS to hide posts */
.hidden {
  display: none !important;
}

/* --- LIGHTBOX CLICKABLE IMAGES --- */

#lightbox {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px); 
  z-index: 9999;
  cursor: default !important;
  align-items: center;
  justify-content: center;
}

/* enlarging the image */
#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border: 1px solid var(--orange-dim);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  object-fit: contain;
}

/* UI suggestion that images are clickable */
.post-body img {
  cursor: pointer !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.post-body img:hover {
  filter: brightness(1.1);
  transform: scale(1.01);
}



/* --- FOOTER --- */

.footer{
  margin-top:24px;border-top:1px solid var(--border);padding-top:10px;
  display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);
}
    .footer a{color:var(--text-dim);text-decoration:none;}
    .footer a:hover{color:var(--amber);}


/* MOBILE & TABLET MODIFIERS */
@media (min-width: 769px) and (max-width: 1180px) {
  #jump-top, #kill-audio {
    font-size: 18px;
    padding: 10px 16px;
  }
  .has-kill-audio #kill-audio {
    bottom: 70px;
  }
}

@media (max-width: 768px) {
    /* home page vertical stack */
    .layout {
      display: flex;
      flex-direction: column;
    }
  
    /* bio panel */
    .profile-top {
      flex-direction: column; /* vertical stack */
      align-items: center;
      text-align: center;
    }
  
    /* adjust avatar */
    .avatar, .avatar-gif {
      width: 100%;
      max-width: 300px;
      height: auto;
    }
  
    /* makes nav buttons bigger */
    .nav {
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .nav a {
      padding: 8px 16px;
      font-size: 18px;
    }
  
    /* makes the images full size for mobile */
    .image-group {
      width: 100%;
      margin: 10px 0;
    }

    #jump-top {
      font-size: 18px;
      padding: 10px 16px;
      bottom: 20px;
    }
    #kill-audio {
      font-size: 18px;
      padding: 10px 16px;
    }
    .has-kill-audio #kill-audio {
      bottom: 70px;
    }
    
  }
  

  
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* each field takes full container width */
.contact-form input,
.contact-form textarea,
.contact-form button {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-family: inherit;
  background: var(--ochre-dark);
  resize: vertical;
  color: var(--ochre-light);
}
.contact-form button {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.contact-form button:hover {
  opacity: 0.85;
}

/* taller fields */
.contact-form input,
.contact-form textarea {
  min-height: 48px;
  padding: 14px;
  border: 1px solid var(--border);
  outline: none;
}

.contact-form textarea {
  min-height: 180px;
}

/* button styling override */
.contact-form button {
  background: var(--teal-dim);
  border: 1px solid var(--border-teal);
  padding: 14px;
  color: var(--teal-bright);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

#submitted {
  text-align: center;
  margin-top: 200px;
  margin-bottom: 200px;
  font-style: italic;
}

/* --- NATIVE - YOUTUBE EMBED --- */
.yt-native {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
}

.yt-native iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
}


/* --- CUSTOM - YOUTUBE EMBED --- */
.yt-player {
  border: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  gap: 0;
  height: 120px;
  overflow: hidden;
}

.yt-thumb {
  width: 160px;
  height: 120px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  margin: 0;
}

.yt-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  transition: background 0.2s;
}

.yt-thumb:hover .yt-thumb-overlay {
  background: rgba(0,0,0,0.5);
}

.yt-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--amber);
}

.yt-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
}

.yt-title {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: var(--amber);
  letter-spacing: 1px;
}

.yt-sub {
  font-size: 11px;
  color: var(--text-dim);
}

.yt-iframe-wrap {
  display: none;
  width: 100%;
  height: 120px;
}

.yt-iframe-wrap iframe {
  width: 100%;
  height: 120px;
  border: none;
  display: block;
}

.yt-player.playing .yt-thumb,
.yt-player.playing .yt-info {
  display: none;
}

.yt-player.playing .yt-iframe-wrap {
  display: block;
}

/* --- LARGE CUSTOM YOUTUBE EMBED --- */
.yt-post-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg2);
  box-sizing: border-box;
}

.yt-post-player img,
.yt-post-player iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  margin: 0;
}

.yt-post-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  transition: background .2s;
}

.yt-post-player:hover .yt-post-overlay {
  background: rgba(0,0,0,.5);
}

.yt-post-overlay i {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--amber);
}