/* main.css - Border Styles Only */
/* ============================================ */
/* re.Noir Screen Border System                */
/* Version: 1.0 | Author: Your Name            */
/* Last Updated: [Current Date]                */
/* ============================================ */

/* --- Global Reset --- */
/* Removes default browser margins/padding and sets up full-screen black background */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;          /* Prevents scrollbars */
    background: #000;
     font-family:'Share Tech Mono', monospace;          /* Pure black background */
}

/* --- Screen Container --- */
/* Main container that holds all border and content elements */
.screen {
    position: relative;        /* Establishes positioning context */
    width: 100%;               /* Full viewport width */
    height: 100%;              /* Full viewport height */
}

/* --- Screen Borders Container --- */
/* Fixed-position container that holds all decorative border elements */
.screen-borders {
    position: fixed;           /* Stays in place during scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;      /* Allows clicks to pass through to content */
    z-index: 10;               /* Renders above content but below UI elements */
}

/* ============================================ */
/* TOP BORDER SECTION                           */
/* ============================================ */
.top-screen-border {
    position: absolute;
    top: 0;                    /* Aligns to top of screen */
    left: 0;
    width: 100%;
    height: 35px;              /* Fixed height for top border */
    display: flex;             /* Horizontal layout for border components */
}

.top-screen-border-panel {
    width: 300px;              /* Fixed width for left decorative panel */
    height: 35px;
    flex-shrink: 0;            /* Prevents panel from shrinking */
}

.top-screen-line-filler {
    flex-grow: 1;              /* Expands to fill available horizontal space */
    background: url('../assets/gfx/svg-ui/screen-ui-line-r-h.svg') repeat-x;
    background-size: auto 100%; /* Maintains SVG aspect ratio, stretches vertically */
}

.top-screen-corner-right {
    width: 35px;               /* Matches side border width for alignment */
    height: 35px;
    flex-shrink: 0;
}

/* ============================================ */
/* BOTTOM BORDER SECTION                        */
/* ============================================ */
.bottom-screen-border {
    position: absolute;
    bottom: 0;                 /* Aligns to bottom of screen */
    left: 0;
    width: 100%;
    height: 35px;              /* Fixed height matching top border */
    display: flex;
}

.bottom-screen-corner-left {
    width: 35px;               /* Matches side border width for alignment */
    height: 35px;
    flex-shrink: 0;
}

.bottom-screen-line-filler {
    flex-grow: 1;
    background: url('../assets/gfx/svg-ui/screen-ui-line-l-h.svg') repeat-x;
    background-size: auto 100%;
}

.bottom-screen-border-panel {
    width: 345px;              /* Fixed width for right decorative panel */
    height: 35px;
    flex-shrink: 0;
}

/* ============================================ */
/* LEFT BORDER SECTION                          */
/* ============================================ */
.left-screen-border {
    position: absolute;
    top: 35px;                 /* Starts below top border */
    left: 0px;
    height: calc(100% - 35px); /* Fills from top border to bottom of screen */
    display: flex;
    flex-direction: column;    /* Stacks panel above line filler vertically */
}

.left-screen-border-panel {
    width: 35px;               /* Fixed width matching corner elements */
    height: 550px;             /* Fixed height for decorative SVG panel */
    flex-shrink: 0;
    position: relative;
    left: -5px;                /* SVG FIX: Compensates for 5px internal SVG padding */
}

.left-screen-line-filler {
    flex-grow: 1;              /* Expands to fill vertical space below panel */
    background: url('../assets/gfx/svg-ui/screen-ui-line-l-v.svg') repeat-y;
    background-size: 100% auto; /* Maintains SVG aspect ratio, stretches horizontally */
}

/* ============================================ */
/* RIGHT BORDER SECTION                         */
/* ============================================ */
.right-screen-border {
    position: absolute;
    bottom: 35px;              /* Ends above bottom border */
    right: 0px;
    height: calc(100% - 35px); /* Fills from top to above bottom border */
    display: flex;
    flex-direction: column;    /* Stacks line filler above panel vertically */
}

.right-screen-border-panel {
    margin-bottom: 50px;       /* Positions panel 50px above bottom of container */
    width: 35px;
    height: 550px;             /* Fixed height matching left panel */
    flex-shrink: 0;
    position: relative;
    left: 5px;                 /* SVG FIX: Compensates for 5px internal SVG padding (flipped) */
}

.right-screen-border-panel object {
    transform: scaleX(-1) scaleY(-1); /* Flips left panel SVG horizontally and vertically */
    transform-origin: center;  /* Ensures clean rotation around center point */
}

.right-screen-line-filler {
    flex-grow: 1;              /* Expands to fill vertical space above panel */
    background: url('../assets/gfx/svg-ui/screen-ui-line-r-v.svg') repeat-y;
    background-size: 100% auto;
}

/* ============================================ */
/* SVG OBJECT STYLING                           */
/* ============================================ */
/* Ensures all SVG objects fill their containers without interfering with clicks */
.screen-borders object {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;      /* Prevents SVG from blocking mouse interactions */
}

/* ============================================ */
/* DEVICE SCREEN (CONTENT AREA)                 */
/* ============================================ */
/* Primary content container that sits behind borders */
#device-screen {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: transparent;       /* Dark gray background for content area */
    z-index: 0;                /* Renders below border elements */
    overflow: hidden;          /* Contains any overflowing content */
}

/* ============================================ */
/* CONTENT AREA                                 */
/* ============================================ */
/* Alternative content container (backup/legacy) */
.content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    z-index: 0;
}


#threejs-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Higher than device-screen background */
}


#map-overlay-container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: min(25vw, 250px);
  height: min(25vw, 250px);
  z-index: 20;
  pointer-events: none;
  /* Allows clicks to pass through to the game */
    transform: translateZ(0);
}

.map-overlay {
  width: min(25vw, 250px);
  height: min(25vw, 250px);
  z-index: 20;
  overflow: visible;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #00ff00;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #00ff00;
}

.location-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Copy from old site */
.location-type-gallery { background-color: #9c27b0; }
.location-type-studio { background-color: #2196f3; }
.location-type-workshop { background-color: #ff9800; }
.location-type-lab { background-color: #e91e63; }
.location-type-residential { background-color: #4caf50; }
.location-type-other { background-color: #607d8b; }
.location-type-music_playlist { background-color: #4caf50; } /* Green for music */
.location-type-video_playlist { background-color: #ff4081; } /* Pink for video */
.location-type-installation { background-color: #9c27b0; } /* Purple like gallery */
.location-type-collection { background-color: #00bcd4; } /* Cyan for collections */
.location-type-private { background-color: #ff9800; } /* Orange like workshop */

#action-button-o.active,
#action-button-i.active {
    opacity: 0.7;
    transform: translateY(1px);
}
.dual-button-svg {
    pointer-events: auto !important;  /* Allow SVG clicks */
}

.dual-button-container {
    width: 40px;
    height: 105px;
}
/* ============================================ */
/* SVG ALIGNMENT FIX NOTES:                     */
/* ============================================ */
/* 
 * ISSUE: SVG files have 5px internal padding causing visual misalignment
 * FIX: Applied relative positioning adjustments:
 *   - Left panel: left: -5px (pulls left to compensate for right padding)
 *   - Right panel: left: 5px (pushes right to compensate for left padding after flip)
 * 
 * These values are specific to the current SVG artwork. If SVG files are
 * re-exported with edge-to-edge artwork, these adjustments can be removed.
 */