:root {
  --c64-border: #6c5eb5;
  --c64-screen: #352879;
  --c64-text: #9b8ad6;
  --c64-link: #a99be9;
  --c64-scroll-track: #352879;
  --c64-scroll-thumb: #7d6fcf;
  --c64-scroll-thumb-hover: #a99be9;

  --c64-link-content: #b8a6ff;      
  --c64-link-hover: #d5cbff;    
  --c64-link-visited: #9b8ad6; 

  --font-size-base: clamp(8px, 1.2vw, 11px);
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--c64-border);
  display: flex;
  flex-direction: column;   /* make footer stack under the screen */
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.c64-screen {
  width: min(880px, 95vw);
  height: min(550px, 85vh);
  background: var(--c64-screen);
  padding: clamp(4px, 1vw, 6px) clamp(10px, 6vw, 90px) clamp(4px, 1vw, 6px) clamp(2px, 0.5vw, 2px);
  box-sizing: border-box;
  color: var(--c64-text);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--font-size-base);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  margin-bottom: 16px; 
}


.c64-screen h1,
.c64-screen h2 {
  font-family: 'Press Start 2P', monospace;
  text-transform: uppercase; 
  text-shadow: none;
  letter-spacing: 1px;
  line-height: 1.3;
  margin: 8px 0 4px 0;             
  padding-top: 10px;               
  border-top: 1px solid rgba(155, 138, 214, 0.3);
}

.c64-screen h1 {
  font-size: clamp(11px, 1.5vw, 13px);
}

.c64-screen h2 {
  font-size: clamp(10px, 1.3vw, 12px);
  border-top: none;
  margin-top: 6px;
  padding-top: 0;
}

.breadcrumbs {
  position: absolute;
  top: -13px;  
  left: -41px;  
  font-size: var(--font-size-base);
  word-break: break-all;
  max-width: 90%;
  margin: 0;  
}

.breadcrumbs a {
  color: var(--c64-text);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--c64-link);
  text-decoration: underline;
}
.breadcrumbs span {
  margin: 0 4px;
}

.content a {
  color: var(--c64-link-content);
  text-decoration: none;
  border-bottom: 1px dotted var(--c64-link-content);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.content a:hover,
.content a:focus {
  color: var(--c64-link-hover);
  border-bottom-color: var(--c64-link-hover);
}

.content a:visited {
  color: var(--c64-link-visited);
  border-bottom-color: var(--c64-link-visited);
}

.typing {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: -25px 0 -40px 0;
}

.ascii {
  margin: 0 0 0 0;
  white-space: pre;
  overflow-x: auto;
  font-size: 0.9em;
}

p {
  margin: 3px 0 4px 0;
  line-height: 1.5; 
}

.content {
  margin-top: 2px;
  text-transform: uppercase;
  display: none;
}

.content p {
  white-space: normal;
  margin: -20px 0 0 0;
}

.c64-screen ul {
  list-style: none;
  padding-left: 2px;
  margin: -30px 0 -50px 0; 
}

.c64-screen li {
  position: relative;
  padding-left: 12px;
  margin: -15px 0 0 0;  
  line-height: 1; 
}

.c64-screen li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--c64-text);
}

.c64-screen img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0 10px 40px;
  border: 1px solid var(--c64-text);
}

.cursor {
  display: inline-block;
  width: 0.7em;
  height: 1em;
  background: var(--c64-text);
  margin: 0;
  animation: blink 0.9s steps(2, start) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.15) 3px
  );
  pointer-events: none;
  z-index: 3;
}

/* Glow effect */
.c64-screen, .cursor {
  text-shadow: 0 0 4px rgba(155,138,214,0.2);
}

/* Scrollbars */
.c64-screen::-webkit-scrollbar {
  width: 12px;
}
.c64-screen::-webkit-scrollbar-track {
  background: var(--c64-scroll-track);
}
.c64-screen::-webkit-scrollbar-thumb {
  background-color: var(--c64-scroll-thumb);
  border-radius: 2px;
  border: 2px solid var(--c64-scroll-track);
}
.c64-screen::-webkit-scrollbar-thumb:hover {
  background-color: var(--c64-scroll-thumb-hover);
}
.c64-screen {
  scrollbar-color: var(--c64-scroll-thumb) var(--c64-scroll-track);
  scrollbar-width: thin;
}

/* Responsive refinements */
@media (max-width: 900px) {
  .c64-screen {
    width: 96vw;
    height: auto;
    min-height: 70vh;
    padding: 8px 12px;
  }

  .ascii {
    font-size: 0.85em;
    white-space: pre-wrap;       
    overflow-x: hidden;          
  }

  .breadcrumbs {
    position: relative;          
    top: 0;
    left: 0;
    font-size: 0.8em;
    word-break: break-word;
    white-space: normal;
    display: block;
    text-align: left;
    padding: 6px 0;
    margin-bottom: 8px;
  }

  .typing {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  body {
    align-items: stretch;
    padding: 1rem 0;
    overflow-x: hidden;
  }

  .c64-screen {
    width: 94vw;
    height: auto;
    min-height: 80vh;
    padding: 8px 10px;
    overflow-x: hidden;
  }

  .ascii {
    font-size: 0.7em;
    line-height: 1.1;
  }

  .breadcrumbs {
    font-size: 0.7em;
    text-align: left;
    padding: 4px 0;
    margin-bottom: 8px;
  }

  h1, h2 {
    margin: 8px 0 4px 0;
  }
}

@media (max-width: 400px) {
  .breadcrumbs {
    font-size: 0.65em;
    padding: 2px 0;
  }

  .c64-screen {
    padding: 4px 6px;
  }

  .ascii {
    font-size: 0.6em;
    white-space: pre-wrap;
  }
}


/* Footer */
.c64-footer {
  width: 100%;
  text-align: center;
  color: var(--c64-text);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.2vw, 10px);
  line-height: 1.4;
  padding: 12px 0 20px 0;
  background: var(--c64-border);
  text-shadow: 0 0 4px rgba(155,138,214,0.3);
}

.c64-footer p {
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .c64-footer {
    font-size: 0.65rem;
    padding: 10px 0 14px 0;
  }
}