body {
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: large;
}

#top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 10px 0 12px 0;
  z-index: 2000;
  background: transparent;
  pointer-events: none;
}

#top-nav .top-button {
  pointer-events: auto;
  background: transparent;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1.5em;
  text-decoration: none;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: normal;
  box-sizing: border-box;
  border-radius: 0;
  transition: color 0.2s, text-decoration 0.2s;
  outline: none;
  line-height: 1.2;
}

#top-nav .top-button:hover {
  color: #5e5e5e;
}

h1 {
  font-size: 3em;
  margin-top: 100px; /* Add margin so it's not hidden behind nav */
}

.impressum-link {
  position: fixed;
  bottom: 12px;
  right: 16px;
  z-index: 1000;
  font-size: 0.8em;
  padding: 3px 6px;
  color: #ffffff;
  border-radius: 6px;
  opacity: 0.85;
  background: none;
  transition: color 0.2s, text-shadow 0.2s, opacity 0.2s;
  text-decoration: none; /* Remove underline */
}

.impressum-link:hover {
  color: #5e5e5e;
  text-shadow: 0 2px 8px #1976d255;
  opacity: 1;
}

/* Scrollbar styling */
html {
  scrollbar-width: thin;
  scrollbar-color: #555 #222;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #222;
  border-radius: 4px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 4px;
  border: 1px solid #222;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background-color: #666;
}

figure {
  margin: 0;
  padding: 0;
  text-align: center;
}

.drawing-container {
  position: relative;
  margin-top: 120px;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible; /* Ensure content isn't clipped */
}

.drawing-section {
  width: 90%;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  padding: 10px 0; /* Remove horizontal padding, keep vertical */
  box-sizing: border-box;
  overflow: visible;
  text-align: center; /* Add this to help with centering */
}

#svg-container.gleds-drawing {
  padding: 0; /* Remove the 50px horizontal padding */
  width: 100%;
  max-width: 3000px;
  margin: 0 auto;
}


/* Add padding to SVG containers to ensure space for zoom boxes */
#case-back-container.gleds-drawing {
  padding: 0 50px; /* Add horizontal padding */
}

/* SVG styling for both main and zoomed SVGs */
.gleds-drawing {
  display: block;
  background: none !important;
}

/* Main SVG container - using percentage width */
#svg-container.gleds-drawing {
  width: 100%; /* Increased from previous 75% */
  max-width: 3000px; /* Increased from previous 1200px */
  margin: 0 auto; /* This centers the SVG */
}

.gleds-drawing svg {
  width: 100% !important;
  height: auto !important;
  display: block;
  background: none !important;
}

/* SVG element styling */
.gleds-drawing svg line,
.gleds-drawing svg path,
.gleds-drawing svg polyline,
.gleds-drawing svg polygon {
  stroke: #ffffff !important;
  stroke-width: 2px !important;
}

.gleds-drawing svg rect,
.gleds-drawing svg circle,
.gleds-drawing svg ellipse {
  fill: #000000 !important;
}

.svg-gleds svg {
  transform: scale(0.75);
  transform-origin: center 0%; /* Moved up from center center */
  display: block;
  margin: 0 auto;
}

.svg-case-back svg {
  transform: scale(1);
  transform-origin: center top;
  display: block;
  margin: 0 auto;
}

/* Zoom panels container - customize overall column width */
.zoom-panels {
  position: absolute; /* Take it out of the normal flow */
  /* Default position - override with more specific selectors */
  top: 50px;
  right: 20px;
  width: 320px; /* Fixed width */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Individual containers now full width of their parent */
.zoom-container {
  position: absolute;
  background: transparent !important;
  padding: 0; /* No padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box !important; /* Important: Changes how sizing works */
}

/* Size and appearance of SVGs inside zoom containers */
.zoom-svg {
  background: transparent !important;
  border-radius: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* First zoom container - border directly on SVG */
#zoom-container-1 {
  border: none; /* Remove border from container */
  background: transparent !important;
  overflow: visible; /* Allow SVG to extend beyond */
}

/* Apply border directly to the first SVG */
#zoom-svg-1 {
  border: 2px solid #1976d2 !important; /* Border on SVG instead of container */
}

/* Second zoom container - border directly on SVG */
#zoom-container-2 {
  border: none; /* Remove border from container */
  background: transparent !important;
  overflow: visible; /* Allow SVG to extend beyond */
}

/* Apply border directly to the second SVG */
#zoom-svg-2 {
  border: 2px solid #7619d2 !important; /* Border on SVG instead of container */
}

/* Selection rectangle styling with different colors */
.gleds-drawing svg rect.selection-rect-1 {
  fill: rgba(25, 118, 210, 0.15) !important;
  stroke: #1976d2 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

.gleds-drawing svg rect.selection-rect-2 {
  fill: rgba(118, 25, 210, 0.15) !important; 
  stroke: #7619d2 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

/* Make sure elements in the zoomed SVG have correct styling */
.zoom-svg rect:not(.selection-rect),
.zoom-svg circle,
.zoom-svg ellipse {
  fill: #000000 !important;
}

.zoom-svg line,
.zoom-svg path,
.zoom-svg polyline,
.zoom-svg polygon {
  stroke: #ffffff !important;
  stroke-width: 2px !important;
}

/* Containers 3, 4, 5 - make transparent with colored borders */
#zoom-container-3, #zoom-container-4, #zoom-container-5 {
  border: none;
  background: transparent !important;
  overflow: visible;
}

/* Case back zoom containers */
#zoom-container-6, #zoom-container-7, #zoom-container-8 {
  border: none;
  background: transparent !important;
  overflow: visible;
}

/* Case inside zoom containers */
#zoom-container-9, #zoom-container-10 {
  border: none;
  background: transparent !important;
  overflow: visible;
}

/* Borders for the zoomed SVGs */
#zoom-svg-9 { border: 2px solid #ff7300 !important; } /* Purple */
#zoom-svg-10 { border: 2px solid #00fdfd !important; } /* Blue */

.gleds-drawing svg rect.selection-rect-9 {
  fill: rgba(255, 115, 0, 0.15) !important;
  stroke: #ff7300 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}
.gleds-drawing svg rect.selection-rect-10 {
  fill: rgba(0, 253, 253, 0.15) !important; /* Matches cyan stroke */
  stroke: #00fdfd !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

.svg-case-inside svg {
  transform: scale(0.935);
  transform-origin: center top;
  display: block;
  margin: 0 auto;
}

/* Modal left borders & headings for case inside zoom boxes */
#info-modal-9 {
  border-left: 4px solid #ff7300; /* Purple */
}
#info-modal-10 {
  border-left: 4px solid #00fdfd; /* Blue */
}
#info-modal-9 h2 {
  color: #ff7300;
  border-bottom: 1px solid #ff7300;
}
#info-modal-10 h2 {
  color: #00fdfd;
  border-bottom: 1px solid #00fdfd;
}

.case-inside-section {
  position: relative;
}

/* Borders for the zoomed SVGs */
#zoom-svg-6 { border: 2px solid #ff09ca !important; } /* Pink */
#zoom-svg-7 { border: 2px solid #33ff00 !important; } /* Teal */
#zoom-svg-8 { border: 2px solid #e5ff00 !important; } /* Orange */

/* Selection rectangles for case back */
.gleds-drawing svg rect.selection-rect-6 {
  fill: rgba(255, 9, 202, 0.15) !important; /* Matches pink stroke */
  stroke: #ff09ca !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

/* Box 7: Fixed to match green stroke */
.gleds-drawing svg rect.selection-rect-7 {
  fill: rgba(51, 255, 0, 0.15) !important; /* Matches green stroke */
  stroke: #33ff00 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

/* Box 8: Fixed to match yellow stroke */
.gleds-drawing svg rect.selection-rect-8 {
  fill: rgba(229, 255, 0, 0.15) !important; /* Matches yellow stroke */
  stroke: #e5ff00 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

/* Apply borders directly to SVGs 3, 4, 5 */
#zoom-svg-3 {
  border: 2px solid #d21919 !important;
}

#zoom-svg-4 {
  border: 2px solid #19d2a1 !important;
}

#zoom-svg-5 {
  border: 2px solid #d2a119 !important;
}


/* Selection rectangle styling for new rectangles */
.gleds-drawing svg rect.selection-rect-3 {
  fill: rgba(210, 25, 25, 0.15) !important;
  stroke: #d21919 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

.gleds-drawing svg rect.selection-rect-4 {
  fill: rgba(25, 210, 161, 0.15) !important;
  stroke: #19d2a1 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}

.gleds-drawing svg rect.selection-rect-5 {
  fill: rgba(210, 161, 25, 0.15) !important;
  stroke: #d2a119 !important;
  stroke-width: 2px !important;
  pointer-events: none;
}



/* Make zoom containers clickable */
.zoom-container {
  cursor: pointer;
  pointer-events: auto !important;
  transition: transform 0.2s ease;
  z-index: 10;
}

.zoom-container:hover {
  transform: scale(1.05);
}

/* Dark overlay */
#dark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  transition: opacity 0.3s ease;
}

/* Info modals */
.info-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  max-width: 500px;
  width: 90%;
  z-index: 101;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Modal left borders - match zoom box colors */
#info-modal-1 {
  border-left: 4px solid #1976d2; /* Blue */
}

#info-modal-2 {
  border-left: 4px solid #7619d2; /* Purple */
}

#info-modal-3 {
  border-left: 4px solid #d21919; /* Red */
}

#info-modal-4 {
  border-left: 4px solid #19d2a1; /* Teal */
}

#info-modal-5 {
  border-left: 4px solid #d2a119; /* Gold/amber */
}

/* General modal styling */
.info-modal h2 {
  margin-top: 0;
  padding-bottom: 10px;
}

/* Color-coordinated modal headings */
#info-modal-1 h2 {
  color: #1976d2; /* Blue - matches zoom box 1 */
  border-bottom: 1px solid #1976d2;
}

#info-modal-2 h2 {
  color: #7619d2; /* Purple - matches zoom box 2 */
  border-bottom: 1px solid #7619d2;
}

#info-modal-3 h2 {
  color: #d21919; /* Red - matches zoom box 3 */
  border-bottom: 1px solid #d21919;
}

#info-modal-4 h2 {
  color: #19d2a1; /* Teal - matches zoom box 4 */
  border-bottom: 1px solid #19d2a1;
}

#info-modal-5 h2 {
  color: #d2a119; /* Gold/amber - matches zoom box 5 */
  border-bottom: 1px solid #d2a119;
}

/* Modal left borders for case back zoom boxes */
#info-modal-6 {
  border-left: 4px solid #ff09ca; /* Pink */
}

#info-modal-7 {
  border-left: 4px solid #33ff00; /* Teal */
}

#info-modal-8 {
  border-left: 4px solid #e5ff00; /* Orange */
}

/* Color-coordinated modal headings for case back zoom boxes */
#info-modal-6 h2 {
  color: #ff09ca; /* Pink - matches zoom box 6 */
  border-bottom: 1px solid #ff09ca;
}

#info-modal-7 h2 {
  color: #33ff00; /* Teal - matches zoom box 7 */
  border-bottom: 1px solid #33ff00;
}

#info-modal-8 h2 {
  color: #e5ff00; /* Orange - matches zoom box 8 */
  border-bottom: 1px solid #e5ff00;
}

.info-modal p {
  margin: 10px 0;
  line-height: 1.5;
}

/* Hidden elements */
.overlay-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Visible elements */
.overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Button press visualizations */
.button-demo {
  margin: 15px 0;
}

.press-type {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.press-animation {
  width: 60px;
  height: 30px;
  background: #333;
  border: 2px solid #1976d2;
  border-radius: 15px;
  margin-right: 15px;
  position: relative;
  flex-shrink: 0;
}

/* Button animation settings */
:root {
  /* Total duration of each animation cycle (including pauses) */
  --single-press-total: 6s;
  --double-press-total: 6s;  
  --long-press-total: 6s;
  --double-hold-total: 6s;
  --extra-long-total: 6s;
}

/* Base animation styling */
.press-animation::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(25, 118, 210, 0.3);
  border-radius: 13px;
  transform-origin: center;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Individual animation durations */
.single-short::before {
  animation-name: singleShort;
  animation-duration: var(--single-press-total);
}

.double-short::before {
  animation-name: doubleShort;
  animation-duration: var(--double-press-total);
}

.long-press::before {
  animation-name: longPress;
  animation-duration: var(--long-press-total);
}

.double-hold::before {
  animation-name: doubleHold;
  animation-duration: var(--double-hold-total);
}

.extra-long::before {
  animation-name: extraLong;
  animation-duration: var(--extra-long-total);
}

/* Keyframes with simple percentages */
@keyframes singleShort {
  /* Pressed - adjust these percentages to control "on" time */
  0%, 5% { opacity: 1; transform: scale(1); }
  
  /* Off until next cycle - adjust to control pause length */
  8%, 100% { opacity: 0; transform: scale(0.9); }
}

@keyframes doubleShort {
  /* First press - adjust these percentages */
  0%, 5% { opacity: 1; transform: scale(1); }
  
  /* Gap between presses */
  8% { opacity: 0; transform: scale(0.9); }
  
  /* Second press - adjust these percentages */
  11%, 16% { opacity: 1; transform: scale(1); }
  
  /* Off until next cycle */
  19%, 100% { opacity: 0; transform: scale(0.9); }
}

@keyframes longPress {
  /* Long press - adjust these percentages for duration */
  0%, 15% { opacity: 1; transform: scale(1); }
  
  /* Off until next cycle */
  18%, 100% { opacity: 0; transform: scale(0.9); }
}

@keyframes doubleHold {
  /* First press */
  0%, 5% { opacity: 1; transform: scale(1); }
  
  /* Gap */
  8% { opacity: 0; transform: scale(0.9); }
  
  /* Second press and hold */
  11%, 90% { opacity: 1; transform: scale(1); }
  
  /* Off until next cycle */
  93%, 100% { opacity: 0; transform: scale(0.9); }
}

@keyframes extraLong {
  /* Extra long press - adjust these percentages */
  0%, 90% { opacity: 1; transform: scale(1); }
  
  /* Off until next cycle */
  93%, 100% { opacity: 0; transform: scale(0.9); }
}


/* Battery indicator styling */
.battery-levels {
  margin: 20px 0;
}

.battery-levels p {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 1.1em;
}

.battery-levels p strong {
  width: 80px;
  display: inline-block;
  margin-right: 10px;
}

.case-back-section {
  /* We'll control positioning via JavaScript */
  position: relative;
}