/* ==========================================================================
   COMMODORE 64 - THE FINAL CARTRIDGE III DESKTOP EDITION
   Authentic 1987 Riska B.V. FC3 Desktop GUI & C64 VIC-II Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* --- C64 & FC3 COLOR PALETTE CONSTANTS --- */
:root {
  /* Commodore 64 16-Color VIC-II Palette */
  --c64-black:        #000000;
  --c64-white:        #ffffff;
  --c64-red:          #880000;
  --c64-cyan:         #aaffee;
  --c64-purple:       #cc44cc;
  --c64-green:        #00cc55;
  --c64-blue:         #0000aa;
  --c64-yellow:       #eeee77;
  --c64-orange:       #dd8855;
  --c64-brown:        #664400;
  --c64-light-red:    #ff7777;
  --c64-dark-grey:    #333333;
  --c64-grey:         #777777;
  --c64-light-green:  #aaff66;
  --c64-light-blue:   #0088ff;
  --c64-light-grey:   #bbbbbb;

  /* Authentic Screen Color Schemes */
  --screen-border:    #352879;
  --screen-bg:        #40318d;
  --screen-text:      #887ecb;
  --menu-bg:          #bbbbbb;
  --menu-text:        #000000;
  --menu-highlight-bg:#0000aa;
  --menu-highlight-fg:#ffffff;
  
  --win-border:       #000000;
  --win-title-bg:     #0000aa;
  --win-title-fg:     #ffffff;
  --win-inactive-bg:  #555555;
  --win-inactive-fg:  #bbbbbb;
  --win-body-bg:      #ffffff;
  --win-body-text:    #000000;
  
  --font-c64:         'Press Start 2P', 'VT323', 'Courier New', monospace;
  --font-term:        'VT323', 'Press Start 2P', monospace;
}

/* Color Scheme Themes */
body.theme-fc3-cyan {
  --screen-border:    #352879;
  --screen-bg:        #5dafb8;
  --screen-text:      #0000aa;
  --menu-bg:          #70c5ce;
  --menu-text:        #000000;
}

body.theme-monochrome-green {
  --screen-border:    #051a05;
  --screen-bg:        #082008;
  --screen-text:      #33ff33;
  --menu-bg:          #114411;
  --menu-text:        #33ff33;
  --win-title-bg:     #114411;
  --win-title-fg:     #33ff33;
  --win-body-bg:      #041404;
  --win-body-text:    #33ff33;
}

body.theme-monochrome-amber {
  --screen-border:    #1a1000;
  --screen-bg:        #241500;
  --screen-text:      #ffb000;
  --menu-bg:          #442a00;
  --menu-text:        #ffb000;
  --win-title-bg:     #442a00;
  --win-title-fg:     #ffb000;
  --win-body-bg:      #1c1000;
  --win-body-text:    #ffb000;
}

body.theme-c128-dark {
  --screen-border:    #111111;
  --screen-bg:        #222222;
  --screen-text:      #aaffee;
  --menu-bg:          #333333;
  --menu-text:        #aaffee;
  --win-title-bg:     #005577;
  --win-title-fg:     #ffffff;
  --win-body-bg:      #181818;
  --win-body-text:    #e0e0e0;
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  text-rendering: geometricPrecision;
  image-rendering: pixelated;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1a1a1a;
  font-family: var(--font-c64);
  font-size: 12px;
  color: var(--screen-text);
  user-select: none;
  cursor: default;
}

/* Custom C64 Pixel Mouse Pointer */
body, a, button, select, input, textarea, .c64-clickable {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M0,0 L0,15 L4,11 L7,16 L9,15 L6,10 L11,10 Z'/%3E%3Cpath fill='%23FFFFFF' d='M1,2 L1,13 L4,10 L7,14 L8,13.5 L5,9 L9,9 Z'/%3E%3C/svg%3E"), auto !important;
}

/* ==========================================================================
   MONITOR BEZEL & CRT EMULATION
   ========================================================================== */
.monitor-frame {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #2e2e2e 0%, #151515 100%);
  position: relative;
  padding: 12px;
  overflow: hidden;
}

.monitor-frame.bezel-mode {
  padding: 24px;
}

/* Commodore 1084S / 1702 Style Monitor Bezel */
.crt-housing {
  width: 100%;
  max-width: 1380px;
  height: 100%;
  max-height: 900px;
  background: #c5beaa;
  border-radius: 20px;
  padding: 20px 24px 28px 24px;
  box-shadow: 
    inset 0 4px 6px rgba(255,255,255,0.6),
    inset 0 -6px 12px rgba(0,0,0,0.5),
    0 20px 50px rgba(0,0,0,0.8),
    0 0 0 4px #8f8877;
  display: flex;
  flex-direction: column;
  position: relative;
}

.monitor-top-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  color: #4a443b;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.c64-logo-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c64-logo-badge {
  background: #333333;
  color: #eeee77;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #666666;
  font-size: 10px;
}

.monitor-bezel-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  color: #554e44;
  font-size: 10px;
}

.power-led-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.power-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ff44;
  box-shadow: 0 0 8px #00ff44, inset 0 1px 2px #ffffff;
  animation: powerGlow 3s infinite alternate;
}

.drive-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #330000;
  box-shadow: none;
  transition: all 0.1s ease;
}

.drive-led.active {
  background: #ff2200;
  box-shadow: 0 0 10px #ff2200, inset 0 1px 2px #ffffff;
}

@keyframes powerGlow {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* The Screen Itself (4:3 Ratio or Full Frame) */
.c64-screen-container {
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: var(--screen-border);
  border: 4px solid #111111;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}

/* CRT Scanlines and Curvature Effect */
.crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  opacity: 0.75;
}

.crt-overlay.crt-high {
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.45) 50%
  );
  background-size: 100% 3px;
  opacity: 1;
}

.crt-overlay.crt-off {
  display: none;
}

/* Screen Border area (VIC-II Border) */
.c64-vic-border {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: var(--screen-border);
  position: relative;
  overflow: hidden;
}

/* The Main Desktop Canvas inside border (320x200 simulated grid) */
.fc3-desktop-canvas {
  flex: 1;
  background-color: var(--screen-bg);
  border: 2px solid var(--c64-black);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0);
  background-size: 8px 8px;
}

/* ==========================================================================
   FINAL CARTRIDGE III TOP MENU BAR
   ========================================================================== */
.fc3-menubar {
  height: 28px;
  background-color: var(--menu-bg);
  border-bottom: 2px solid var(--c64-black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  position: relative;
  z-index: 8000;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

.fc3-menu-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fc3-menu-item {
  position: relative;
  padding: 4px 10px;
  color: var(--menu-text);
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid transparent;
}

.fc3-menu-item:hover,
.fc3-menu-item.active {
  background-color: var(--menu-highlight-bg);
  color: var(--menu-highlight-fg);
  border: 1px solid var(--c64-black);
}

/* Dropdown Menu Popup */
.fc3-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--menu-bg);
  border: 2px solid var(--c64-black);
  box-shadow: 4px 4px 0 var(--c64-black);
  z-index: 9000;
  padding: 2px 0;
}

.fc3-menu-item.active .fc3-dropdown {
  display: block;
}

.fc3-dropdown-item {
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--menu-text);
  font-size: 10px;
  border-bottom: 1px dotted rgba(0,0,0,0.2);
  white-space: nowrap;
}

.fc3-dropdown-item:last-child {
  border-bottom: none;
}

.fc3-dropdown-item:hover {
  background-color: var(--menu-highlight-bg);
  color: var(--menu-highlight-fg);
}

.fc3-dropdown-shortcut {
  font-size: 9px;
  opacity: 0.8;
  margin-left: 12px;
}

.fc3-dropdown-divider {
  height: 2px;
  background-color: var(--c64-black);
  margin: 3px 0;
}

/* Right side of Menu Bar: Clock & System Toggles */
.fc3-menubar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  color: var(--menu-text);
}

.fc3-clock-widget {
  background: var(--c64-black);
  color: var(--c64-green);
  padding: 2px 6px;
  border: 1px solid var(--c64-dark-grey);
  font-family: var(--font-term);
  font-size: 14px;
  letter-spacing: 1px;
}

.fc3-quick-btn {
  background: var(--c64-dark-grey);
  color: var(--c64-white);
  border: 1px solid var(--c64-black);
  padding: 3px 7px;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fc3-quick-btn:hover {
  background: var(--c64-blue);
  color: var(--c64-yellow);
}

/* Red FC3 Cartridge Freezer Button */
.fc3-freezer-button {
  background: #cc1100 !important;
  color: #ffffff !important;
  border: 2px outset #ff4444 !important;
  font-weight: bold;
  animation: freezerPulse 2s infinite alternate;
}

.fc3-freezer-button:hover {
  background: #ff2200 !important;
}

@keyframes freezerPulse {
  0% { box-shadow: 0 0 2px #cc1100; }
  100% { box-shadow: 0 0 8px #ff4444; }
}

/* ==========================================================================
   DESKTOP WORKSPACE & ICONS
   ========================================================================== */
.fc3-desktop-workspace {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 16px;
}

/* Desktop Icon Grid */
.fc3-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 18px 14px;
  max-width: 420px;
  position: relative;
  z-index: 10;
}

.fc3-desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.05s ease;
  user-select: none;
}

.fc3-desktop-icon:hover {
  background: rgba(0, 0, 170, 0.3);
  border: 1px dotted var(--c64-yellow);
}

.fc3-desktop-icon:active {
  transform: scale(0.96);
}

.fc3-desktop-icon.selected {
  background: var(--c64-blue);
  border: 1px solid var(--c64-yellow);
}

.fc3-desktop-icon.selected .icon-label {
  color: var(--c64-yellow);
  background: var(--c64-black);
}

.icon-glyph-wrapper {
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
}

.icon-label {
  font-size: 8.5px;
  color: var(--c64-white);
  text-shadow: 1px 1px 0 var(--c64-black);
  line-height: 1.2;
  word-break: break-word;
  padding: 1px 3px;
  border-radius: 2px;
}

/* Pixel art SVG Icons */
.pixel-svg-icon {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

/* Desktop Floating Drive Status / Cartridge Info */
.fc3-desktop-banner {
  position: absolute;
  bottom: 12px;
  right: 16px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid var(--c64-grey);
  padding: 8px 12px;
  color: var(--c64-cyan);
  font-size: 9px;
  line-height: 1.5;
  text-align: right;
  pointer-events: auto;
  box-shadow: 4px 4px 0 var(--c64-black);
}

.fc3-desktop-banner h3 {
  color: var(--c64-yellow);
  font-size: 10px;
  margin-bottom: 4px;
}

/* ==========================================================================
   FINAL CARTRIDGE III WIMP WINDOW SYSTEM
   ========================================================================== */
.fc3-window {
  position: absolute;
  min-width: 320px;
  min-height: 200px;
  background-color: var(--win-body-bg);
  border: 2px solid var(--win-border);
  box-shadow: 6px 6px 0 var(--c64-black);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: box-shadow 0.1s ease;
  overflow: hidden;
}

.fc3-window.active {
  z-index: 500;
  box-shadow: 8px 8px 0 var(--c64-black);
}

.fc3-window.minimized {
  display: none !important;
}

.fc3-window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-shadow: none;
}

/* Window Titlebar */
.fc3-window-header {
  height: 26px;
  background-color: var(--win-inactive-bg);
  color: var(--win-inactive-fg);
  border-bottom: 2px solid var(--c64-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  cursor: move;
  font-size: 10px;
}

.fc3-window.active .fc3-window-header {
  background-color: var(--win-title-bg);
  color: var(--win-title-fg);
}

.fc3-win-gadget {
  width: 18px;
  height: 18px;
  background: var(--c64-light-grey);
  border: 2px outset #ffffff;
  color: var(--c64-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.fc3-win-gadget:active {
  border: 2px inset #000000;
  background: var(--c64-grey);
}

/* Close Gadget (Square in Square - classic Amiga/FC3 style) */
.gadget-close {
  position: relative;
}
.gadget-close::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--c64-black);
  display: block;
}

.fc3-win-title {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

.fc3-win-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Window Toolbar / Action Sub-bar */
.fc3-win-subbar {
  background: var(--c64-light-grey);
  border-bottom: 1px solid var(--c64-black);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: var(--c64-black);
  gap: 8px;
}

.fc3-subbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.fc3-action-btn {
  background: var(--c64-white);
  border: 1px solid var(--c64-black);
  padding: 3px 6px;
  font-size: 8.5px;
  cursor: pointer;
  color: var(--c64-black);
}

.fc3-action-btn:hover {
  background: var(--c64-blue);
  color: var(--c64-white);
}

.fc3-action-btn.active {
  background: var(--c64-yellow);
  color: var(--c64-black);
  border: 1px solid var(--c64-black);
  font-weight: bold;
}

/* Window Body / Content Pane */
.fc3-window-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  background-color: var(--win-body-bg);
  color: var(--win-body-text);
  font-size: 9.5px;
  line-height: 1.6;
  position: relative;
}

/* Custom C64 Pixel Scrollbar */
.fc3-window-body::-webkit-scrollbar {
  width: 16px;
  background: var(--c64-light-grey);
  border-left: 2px solid var(--c64-black);
}

.fc3-window-body::-webkit-scrollbar-thumb {
  background: var(--c64-grey);
  border: 2px outset #ffffff;
}

.fc3-window-body::-webkit-scrollbar-thumb:hover {
  background: var(--c64-dark-grey);
}

/* Window Status / Bottom Bar */
.fc3-window-footer {
  height: 20px;
  background: var(--c64-light-grey);
  border-top: 1px solid var(--c64-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 8.5px;
  color: var(--c64-dark-grey);
}

/* ==========================================================================
   PORTFOLIO CONTENT WINDOW COMPONENTS
   ========================================================================== */

/* Header Card in Profile Window */
.c64-profile-card {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--c64-grey);
}

.c64-avatar-container {
  width: 110px;
  height: 110px;
  border: 2px solid var(--c64-black);
  background: var(--c64-black);
  padding: 3px;
  flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--c64-grey);
  position: relative;
}

.c64-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: contrast(140%) brightness(95%) saturate(110%);
}

.c64-avatar-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--c64-yellow);
  color: var(--c64-black);
  font-size: 7.5px;
  padding: 2px 4px;
  border: 1px solid var(--c64-black);
  font-weight: bold;
}

.c64-profile-info h1 {
  font-size: 13px;
  color: var(--c64-blue);
  margin-bottom: 4px;
}

.c64-profile-title {
  color: var(--c64-red);
  font-size: 9.5px;
  margin-bottom: 8px;
  font-weight: bold;
}

.c64-profile-meta {
  font-size: 8.5px;
  color: var(--c64-dark-grey);
  line-height: 1.6;
}

/* PETSCII Style Banners & Separators */
.petscii-banner {
  background: var(--c64-blue);
  color: var(--c64-yellow);
  padding: 4px 8px;
  margin: 12px 0 8px 0;
  font-size: 9.5px;
  border-left: 6px solid var(--c64-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.petscii-divider {
  color: var(--c64-grey);
  margin: 10px 0;
  letter-spacing: 2px;
  font-size: 9px;
  text-align: center;
}

/* Experience / Career Items */
.c64-timeline-item {
  border: 1px solid var(--c64-grey);
  background: #fdfdfd;
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.c64-timeline-item:hover {
  border-color: var(--c64-blue);
  background: #f0f8ff;
}

.c64-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}

.c64-item-title {
  font-size: 10px;
  color: var(--c64-blue);
  font-weight: bold;
}

.c64-item-company {
  color: var(--c64-brown);
  font-size: 9px;
  margin-top: 2px;
}

.c64-item-date {
  background: var(--c64-black);
  color: var(--c64-green);
  padding: 2px 6px;
  font-size: 8px;
  white-space: nowrap;
  font-family: var(--font-term);
  letter-spacing: 1px;
}

.c64-item-desc {
  font-size: 9px;
  line-height: 1.5;
  color: #222222;
  margin-bottom: 8px;
}

.c64-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.c64-tag {
  background: var(--c64-light-grey);
  color: var(--c64-black);
  border: 1px solid var(--c64-grey);
  padding: 2px 5px;
  font-size: 8px;
}

/* Skills PETSCII Matrix */
.c64-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 9px;
  padding: 4px 6px;
  background: #f8f8f8;
  border-left: 3px solid var(--c64-blue);
}

.c64-skill-name {
  font-weight: bold;
  color: #111111;
  min-width: 140px;
}

.c64-skill-meter {
  color: var(--c64-blue);
  font-family: var(--font-term);
  font-size: 12px;
  letter-spacing: 1px;
}

/* Certifications Table */
.c64-cert-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--c64-grey);
  margin-bottom: 8px;
  background: #ffffff;
}

.c64-cert-badge {
  background: var(--c64-yellow);
  color: var(--c64-black);
  border: 1px solid var(--c64-black);
  font-size: 8px;
  padding: 4px;
  font-weight: bold;
  text-align: center;
  min-width: 54px;
}

.c64-cert-title {
  font-size: 9.5px;
  color: var(--c64-blue);
  font-weight: bold;
  margin-bottom: 2px;
}

.c64-cert-issuer {
  font-size: 8.5px;
  color: var(--c64-red);
}

/* Project Cards */
.c64-project-card {
  border: 2px solid var(--c64-blue);
  background: #ffffff;
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: 3px 3px 0 var(--c64-light-blue);
}

.c64-project-title {
  font-size: 10.5px;
  color: var(--c64-blue);
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Contact Transmission Form */
.c64-form-group {
  margin-bottom: 10px;
}

.c64-form-group label {
  display: block;
  font-size: 8.5px;
  color: var(--c64-blue);
  margin-bottom: 4px;
  font-weight: bold;
}

.c64-input, .c64-textarea {
  width: 100%;
  background: #f4f4f4;
  border: 2px solid var(--c64-black);
  padding: 6px;
  font-family: var(--font-c64);
  font-size: 9px;
  color: #000000;
  outline: none;
}

.c64-input:focus, .c64-textarea:focus {
  background: #ffffff;
  border-color: var(--c64-blue);
  box-shadow: inset 1px 1px 0 var(--c64-yellow);
}

.c64-btn-submit {
  background: var(--c64-green);
  color: var(--c64-black);
  border: 2px outset #ffffff;
  padding: 8px 16px;
  font-family: var(--font-c64);
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  box-shadow: 2px 2px 0 var(--c64-black);
}

.c64-btn-submit:hover {
  background: var(--c64-light-green);
}

.c64-btn-submit:active {
  border: 2px inset #000000;
}

/* ==========================================================================
   1541 FLOPPY DISK CATALOG DIRECTORY ($ / LOAD "$",8)
   ========================================================================== */
.c64-disk-view {
  background: var(--c64-blue) !important;
  color: var(--c64-light-blue) !important;
  font-family: var(--font-c64);
  font-size: 9px;
  line-height: 1.8;
  padding: 12px;
}

.disk-header-line {
  color: var(--c64-yellow);
  font-weight: bold;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--c64-light-blue);
  padding-bottom: 4px;
}

.disk-file-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--c64-light-blue);
}

.disk-file-entry:hover {
  background: var(--c64-light-blue);
  color: var(--c64-blue);
  font-weight: bold;
}

.disk-file-blocks {
  width: 40px;
  text-align: right;
}

.disk-file-name {
  flex: 1;
}

.disk-file-type {
  width: 40px;
  color: var(--c64-yellow);
}

.disk-footer-line {
  margin-top: 12px;
  color: var(--c64-cyan);
  border-top: 1px solid var(--c64-light-blue);
  padding-top: 6px;
}

/* ==========================================================================
   COMMODORE 64 BASIC V2 & FC3 TERMINAL
   ========================================================================== */
.c64-basic-screen {
  background-color: #40318d;
  color: #887ecb;
  font-family: var(--font-c64);
  font-size: 10px;
  line-height: 1.5;
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.basic-banner {
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.6;
}

.basic-log {
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.basic-input-line {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.basic-prompt-symbol {
  color: #aaffee;
  margin-right: 6px;
}

.basic-cli-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--font-c64);
  font-size: 10px;
  outline: none;
  text-transform: uppercase;
}

/* Blinking PETSCII Cursor */
.petscii-cursor {
  display: inline-block;
  width: 8px;
  height: 10px;
  background: #aaffee;
  vertical-align: middle;
  animation: petsciiBlink 0.7s infinite step-start;
}

@keyframes petsciiBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ==========================================================================
   FINAL CARTRIDGE III HARDWARE FREEZER MODAL
   ========================================================================== */
.fc3-freezer-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.fc3-freezer-overlay.active {
  display: flex;
}

.fc3-freezer-box {
  width: 90%;
  max-width: 580px;
  background: var(--c64-black);
  border: 4px solid var(--c64-light-grey);
  box-shadow: 0 0 30px #000000, 0 0 10px var(--c64-red);
  padding: 16px;
  color: var(--c64-cyan);
}

.freezer-titlebar {
  background: var(--c64-red);
  color: var(--c64-white);
  padding: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 16px;
  border: 2px solid var(--c64-white);
}

.freezer-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.freezer-btn {
  background: var(--c64-dark-grey);
  border: 2px solid var(--c64-cyan);
  color: var(--c64-yellow);
  padding: 8px 12px;
  font-family: var(--font-c64);
  font-size: 10px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.freezer-btn:hover {
  background: var(--c64-blue);
  color: var(--c64-white);
  border-color: var(--c64-yellow);
}

/* ==========================================================================
   SID 6581 CHIPTUNE JUKEBOX & OSCILLOSCOPE
   ========================================================================== */
.sid-jukebox-container {
  background: var(--c64-black);
  color: var(--c64-green);
  padding: 12px;
  border: 2px solid var(--c64-dark-grey);
}

.sid-now-playing {
  color: var(--c64-yellow);
  font-size: 10px;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 1px dashed var(--c64-green);
  padding-bottom: 6px;
}

.sid-canvas {
  width: 100%;
  height: 80px;
  background: #051405;
  border: 1px solid var(--c64-green);
  margin-bottom: 10px;
  display: block;
}

.sid-track-select {
  background: var(--c64-black);
  color: var(--c64-cyan);
  border: 1px solid var(--c64-green);
  font-family: var(--font-c64);
  font-size: 8px;
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.sid-track-select:focus {
  outline: 1px solid var(--c64-yellow);
}

.sid-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.sid-btn {
  background: var(--c64-dark-grey);
  color: var(--c64-white);
  border: 1px solid var(--c64-green);
  padding: 6px 10px;
  font-family: var(--font-c64);
  font-size: 8.5px;
  cursor: pointer;
  text-align: center;
}

.sid-btn:hover {
  background: var(--c64-green);
  color: var(--c64-black);
}

.sid-voice-indicators {
  display: flex;
  justify-content: space-around;
  font-size: 8px;
  margin-top: 8px;
  color: var(--c64-cyan);
}

.voice-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--c64-dark-grey);
  border-radius: 50%;
  margin-right: 4px;
}

.voice-led.active {
  background: var(--c64-green);
  box-shadow: 0 0 6px var(--c64-green);
}

/* ==========================================================================
   MACHINE CODE MONITOR ($MONITOR)
   ========================================================================== */
.c64-monitor-screen {
  background: var(--c64-black);
  color: var(--c64-light-green);
  font-family: var(--font-term);
  font-size: 13px;
  padding: 10px;
  line-height: 1.4;
  height: 100%;
  overflow-y: auto;
}

.monitor-header {
  color: var(--c64-yellow);
  border-bottom: 1px solid var(--c64-green);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.monitor-row {
  display: flex;
  gap: 12px;
}

.monitor-addr { color: var(--c64-cyan); }
.monitor-hex  { color: var(--c64-white); }
.monitor-asm  { color: var(--c64-light-green); }

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 900px) {
  .monitor-frame {
    padding: 0;
  }
  .crt-housing {
    padding: 0;
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
    box-shadow: none;
    border: none;
  }
  .monitor-top-badge, .monitor-bezel-bottom {
    display: none;
  }
  .c64-screen-container {
    border: none;
    border-radius: 0;
  }
  .c64-vic-border {
    padding: 6px;
  }
  .fc3-icon-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 8px;
  }
  .fc3-window {
    min-width: 280px;
    width: calc(100% - 16px) !important;
    left: 8px !important;
    top: 36px !important;
  }
  .fc3-desktop-banner {
    display: none;
  }
}

@media (max-width: 600px) {
  .fc3-menubar {
    font-size: 9px;
    padding: 0 4px;
  }
  .fc3-menu-item {
    padding: 4px 6px;
  }
  .fc3-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .c64-profile-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .c64-item-header {
    flex-direction: column;
  }
}