@font-face {
	font-family: 'cern';
	src:url('fonts/cern-terminal.eot');
	src:url('fonts/cern-terminal.eot?#iefix') format('embedded-opentype'),
		url('fonts/cern-terminal.woff') format('woff'),
		url('fonts/cern-terminal.ttf') format('truetype'),
		url('fonts/cern-terminal.svg#icomoon') format('svg');
}

@font-face {
    font-family: 'DS-DIGIT';
    src: url('fonts/DS-DIGIT.TTF');
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #111;
    color: #33ff00;
    font-family: 'cern', 'Courier New', monospace;
    font-size: 18px;
    line-height: 1.2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Global Link Styles --- */
a, a:visited, a:active {
    color: #33ff00;
    text-decoration: underline;
}

/* Optional: Invert colors on hover for a nice terminal effect */
a:hover {
    background-color: #33ff00;
    color: #000;
    text-decoration: none;
}

:root {
    /* Define the native resolution of your largest device (the TNC image) */
    --native-width: 500px;
    --native-height: 210px; 
    /* Calculate scale: min 0.4, max 1.0, otherwise fit 95% of viewport width */
    --rack-scale: clamp(0.4, 95vw / 500, 1);
}

#rack {
    /* Remove fixed height, let it grow with content */
    /* min-height: 120px;  <-- REMOVE THIS LINE */
    
    background: #222;
    border-bottom: 4px solid #444;
    display: flex;
    flex-direction: column; /* Stack devices vertically */
    align-items: center;    /* Center them */
    justify-content: center;
    padding: 10px 0;
    gap: 0; /* Gap handled by margins due to scaling */
    overflow: hidden; 
}

.device {
    /* Force the devices to use their native resolution coordinates */
    width: var(--native-width);
    height: var(--native-height);
    position: relative;
    
    /* Scale down to fit screen */
    transform: scale(var(--rack-scale));
    transform-origin: center center;

    /* COMPENSATE for the empty space left by scaling down.
       Formula: Height * (Scale - 1) */
    margin-top: calc(var(--native-height) * (var(--rack-scale) - 1) / 2);
    margin-bottom: calc(var(--native-height) * (var(--rack-scale) - 1) / 2);
}

#radio {
    width: 500px;
    height: 219px;
    background: url('ic28h.png') no-repeat top left;
    background-size: 500px 219px; /* Ensures 1:1 pixel mapping */
    padding: 0 !important;       /* Removes the 10px shift from .device */
    border: none;                /* Removes the 2px border shift */
    box-sizing: border-box;
    box-shadow: none;
    flex-shrink: 0;
    overflow: hidden;
}

#radio-led {
    position: absolute;
    left: 75px;
    top: 38px;
    width: 18px; /* 93 - 75 */
    height: 9px; /* 47 - 38 */
    transition: background 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
}
#radio-led.rx { background: #33ff33; box-shadow: 0 0 10px #00ff00; }
#radio-led.tx { background: #ff3333; box-shadow: 0 0 10px #ff0000; }

#radio-lcd {
    position: absolute;
    left: 217px;
    top: 43px;
    width: 158px; /* 375 - 217 */
    height: 65px; /* 108 - 43 */
    background-color: rgba(0, 255, 0, 0);
    transition: background-color 0.3s;
    // transition: background-color 1s ease-in-out;
    font-family: 'DS-DIGIT', monospace;
    // color: #000;
    color: #222;
    display: flex;
    flex-direction: column;
    // padding: 5px 12px;
    padding: 0;
    box-sizing: border-box;
}

#radio.powered #radio-lcd {
    background-color: rgba(50, 255, 50, 0.4); /* Green backlight glow */
}

#radio-lcd .freq, #radio-lcd .chan {
    opacity: 0;
    // transition: opacity 0.1s;
    transition: opacity 0.07s ease-in-out;
}

#radio.display-on #radio-lcd .freq, 
#radio.display-on #radio-lcd .chan {
    opacity: 1;
}

.freq {   /* Moves the entire frequency down 4px */
    margin-top: 9px;
    margin-left: 5px;
}
.f-small { font-size: 34px; }
.f-large { font-size: 40px; } /* 4px larger than the first digit */
.chan {
    font-size: 32px;
    text-align: right;
    margin-top: -30px; /* 5px lower than frequency */
    transform: translateX(-5px);
    width: 100%;
    line-height: 1;
}

.brand {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.screen {
    background: #39402e;
    color: #000;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 20px;
    padding: 4px 8px;
    border-radius: 2px;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
    width: 120px;
    text-align: center;
    opacity: 0.3;
    transition: opacity 0.2s;
}
#radio.powered .screen { opacity: 1; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }

.leds { display: flex; gap: 15px; align-items: center; }

.led-group { display: flex; flex-direction: column; align-items: center; font-size: 9px; gap: 2px; }

.led {
    width: 10px; height: 6px; background: #300; border: 1px solid #000; transition: background 0.05s;
}
.led.red.on { background: #ff3333; box-shadow: 0 0 5px #ff0000; }
.led.green.on { background: #33ff33; box-shadow: 0 0 5px #00ff00; }

/* --- TNC Photo & LED Mappings --- */
#tnc {
    /* width/height now handled by .device class, but we keep background */
    background: url('kpc2.png') no-repeat top left;
    background-size: 100% 100%; /* Ensure image fills the container */
    padding: 0 !important;
    border: none;
    box-shadow: none;
}

#tnc .led {
    position: absolute;
    box-shadow: none; /* Optional: Reset default shadow if needed */
    transition: background 0.1s;
}

/* Green PWR: 89,144 to 106,152 (17x8) */
#led-pwr {
    left: 89px;
    top: 144px;
    width: 16px;
    height: 7px;
}

/* Red XMIT: 156,144 to 172,151 (16x7) */
#led-xmit {
    left: 156px;
    top: 144px;
    width: 16px;
    height: 7px;
}

/* Red RCVE: 188,144 to 204,152 (16x8) */
#led-rcve {
    left: 188px;
    top: 144px;
    width: 16px;
    height: 7px;
}

/* Red CON: 221,145 to 236,151 (15x6) */
#led-con {
    left: 221px;
    top: 144px;
    width: 16px;
    height: 7px;
}

/* Red STA: 254,145 to 270,151 (16x6) */
#led-sta {
    left: 254px;
    top: 144px;
    width: 16px;
    height: 7px;
}

.controls {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.power-switch {
    width: 30px; height: 30px; background: #333; color: #fff;
    border: 2px solid #000; cursor: pointer; font-size: 10px;
}
.power-switch:active { border-color: #666; }

.toggle-group {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#terminal-container {
    flex: 1;
    background: #000;
    display: flex;
    justify-content: center; /* Centers the 80-character screen on desktop */
    align-items: flex-start;
    overflow: hidden;        /* Prevents weird outer scrolling */
    padding: 5px;
    box-sizing: border-box;
}

#terminal {
    /* STABILITY FIXES */
    width: 100%;
    max-width: 80ch; 
    height: 100%;        /* Fill the container, don't guess pixels */
    
    /* FIX JITTER: Always show scrollbar track so layout doesn't jump */
    overflow-y: scroll; 
    scrollbar-width: thin; /* Modern styling */
    
    /* FIX CUTOFF: Smaller font multiplier ensures 24 lines fit on phones */
    font-size: clamp(12px, 1.9vh, 20px); 
    
    /* BUFFER: Extra space at bottom so text isn't stuck to keyboard */
    // padding: 10px 10px 50px 10px; 
    padding: 5px;
    box-sizing: border-box;

    /* VISUALS */
    white-space: pre-wrap;
    word-break: break-all;
    background-color: #000;
    color: #33ff00;
    border: 1px solid #222;
    box-shadow: inset 0 0 10px #000;
    line-height: 1.2;
    cursor: text;

    /* ADD: Firefox Dark Mode Scrollbar */
    scrollbar-width: auto;      /* Makes it wide enough to see clearly */
    scrollbar-color: #444 #000; /* Dark Grey Thumb, Black Track */
}

// #terminal::-webkit-scrollbar { display: none; }

/* WebKit (Chrome, Safari, Edge) Dark Mode Scrollbar */
#terminal::-webkit-scrollbar {
    width: 12px;               /* Standard width */
}

#terminal::-webkit-scrollbar-track {
    background: #000;          /* Black background to match terminal */
}

#terminal::-webkit-scrollbar-thumb {
    background-color: #444;    /* Dark grey slider */
    border: 1px solid #000;    /* slight border for definition */
    border-radius: 2px;        /* subtle boxy look */
}

#terminal::-webkit-scrollbar-thumb:hover {
    background-color: #666;    /* Lighter grey when you grab it */
}

.cursor {
    display: inline-block; background-color: #33ff00; color: #000;
    width: 1ch; height: 1em; vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* */
#hidden-input {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Locks it to center screen */
    width: 1px;
    height: 1px;
    opacity: 0;
    font-size: 16px;
    border: none;
    outline: none;
    pointer-events: none;
    z-index: -1;
}

/* Ensure the control bar looks consistent */
#aux-controls {
    display: flex;
    gap: 10px;
    padding: 10px;
    align-items: center;
}

/* Ensure the toggle label is visible/sized correctly in the new context */
#aux-controls .toggle-group {
    color: #33ff00; /* Match terminal green */
    font-family: 'cern', monospace;
    font-size: 14px;
}

#aux-controls label {
    cursor: pointer;
}

/* --- BRANDING & LAYOUT UPDATES --- */

/* The new main container for the top section */
#top-shelf {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #222;
    border-bottom: 4px solid #444;
    padding: 10px 0;
    gap: 40px; /* Space between Logo and Radio Rack */
}

/* Update #rack to play nice inside the flex container */
#rack {
    /* Reset styles that are now handled by #top-shelf */
    background: transparent;
    border-bottom: none;
    padding: 0;
    width: auto;
    /* Ensure it doesn't shrink */
    flex-shrink: 0;
}

/* The Branding Left Panel */
#branding {
    display: none; /* Hidden by default on mobile */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'cern', monospace;
    color: #33ff00;
    text-shadow: 0 0 5px #00ff00; /* CRT Glow effect */
    margin-left: 20px;
}

/* Only show branding if screen is wide enough (Tablets/Desktop) */
@media (min-width: 900px) {
    #branding {
        display: flex;
    }
}

.ascii-art {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    line-height: 1.0;
    margin-bottom: 15px;
    
    /* FIX: Keep internal characters aligned to the left */
    text-align: left;
    
    /* FIX: Make the box only as wide as the art, so the parent can center the box */
    display: inline-block;
    
    font-size: 16px;
    color: #33ff00;
}

.brand-title {
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    font-weight: bold;
}

.brand-title .highlight {
    font-size: 32px;
    color: #fff; /* White hot center */
    text-shadow: 0 0 10px #33ff00, 0 0 20px #33ff00;
}

.brand-sub {
    margin-top: 15px;
    font-size: 14px;
    border: 1px solid #33ff00;
    padding: 2px 8px;
    box-shadow: 0 0 5px #33ff00;
    animation: blink-border 2s infinite;
}

@keyframes blink-border {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px #33ff00; }
    50% { opacity: 0.7; box-shadow: none; }
}

/* --- TUTORIAL SYSTEM UPDATES --- */

/* 1. Anchor the container so absolute children stay inside */
#terminal-container {
    position: relative; 
    /* existing styles remain... */
}

/* 2. The Popup - Initial "Hidden" State */
#tutorial-overlay {
    position: fixed;
    top: 140px;
    right: 20px;
    width: 320px;

    transform: translateX(360px);   /* OFF-SCREEN to the right */
    opacity: 0;

    transition:
        transform 0.45s ease,
        opacity 0.45s ease;

    // display: none;
    background-color: rgba(0, 20, 0, 0.95);
    border: 2px solid #33ff00;
    padding: 15px;
    z-index: 2000;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
    animation: tut-pulse 2s infinite;
    pointer-events: none;
}

/* Tutorial Border Pulsate Animation */
@keyframes tut-pulse {
    0%, 100% {
        border-color: #33ff00;
        box-shadow: 0 0 15px rgba(51, 255, 0, 0.5); /* Bright Glow */
    }
    50% {
        border-color: #006600; /* Dim Green Border */
        box-shadow: none;      /* No Glow */
    }
}

/* Header style matching the branding */
.tut-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #33ff00;
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

#tut-img {
    /* 1. Fix the dimensions of the image container */
    width: 100%;
    height: 250px;       /* Adjust this number to make the area taller/shorter */
    
    /* 2. Force the image to resize to fit inside without stretching */
    object-fit: contain; 
    
    /* 3. Aesthetic tweaks */
    background-color: #000;  /* Fill empty space with black */
    border: 1px solid #333;  /* Optional: subtle border around the image area */
    margin-bottom: 10px;
    display: block;
}

#tut-text {
    font-size: 14px;
    margin-bottom: 10px;
    min-height: 40px;
    
    /* SCROLLING LOGIC */
    max-height: 200px;      /* Adjust this to give more/less room for text */
    overflow-y: auto;       /* Allow vertical scrolling */
    overflow-x: hidden;     /* No sideways scrolling */
    padding-right: 8px;     /* Room for the scrollbar */
    
    white-space: pre-wrap;
    font-family: 'Courier New', Courier, monospace;

    /* FIREFOX SCROLLBAR */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* Hidden by default */
    transition: scrollbar-color 0.3s;
}

/* FIREFOX: Show Dark Green scrollbar on hover */
#tut-text:hover {
    scrollbar-color: #005500 transparent; 
}

/* Reveal Scrollbar on Hover (Firefox) */
#tut-text:hover {
    scrollbar-color: #005500 transparent; /* Dark Green Thumb */
}

/* --- CUSTOM TUTORIAL SCROLLBAR (Webkit) --- */

/* 1. Set the width */
#tut-text::-webkit-scrollbar {
    width: 6px; 
}

/* 2. Track is always invisible */
#tut-text::-webkit-scrollbar-track {
    background: transparent; 
}

/* 3. Thumb is invisible by default */
#tut-text::-webkit-scrollbar-thumb {
    background-color: transparent; 
    border-radius: 3px;
}

/* 4. Thumb turns Dark Green when you hover over the text area */
#tut-text:hover::-webkit-scrollbar-thumb {
    background-color: #005500; 
}

/* 5. Thumb turns slightly brighter when grabbed */
#tut-text::-webkit-scrollbar-thumb:active {
    background-color: #007700; 
}

#tut-audio {
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    /* Custom filter to make standard audio controls look slightly greener */
    filter: invert(100%) sepia(100%) saturate(500%) hue-rotate(80deg);
}

.tut-nav {
    display: flex;
    justify-content: space-between;
}

.tut-nav button {
    background: #000;
    color: #33ff00;
    border: 1px solid #33ff00;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 10px;
}

.tut-nav button:hover { background: #33ff00; color: #000; }
.tut-nav button:disabled { border-color: #444; color: #444; cursor: default; background: #000; }

/* --- TUTORIAL SCROLLBAR UPDATES --- */

#tut-content {
    overflow: visible !important; /* Disable wrapper scrolling */
    max-height: none !important;  /* Let it expand naturally */
    margin: 0;
    padding: 0;
}

/* Reveal Scrollbar on Hover (Firefox) */
#tut-content:hover {
    scrollbar-color: #444 transparent; 
}

/* WebKit (Chrome/Safari/Edge) Skinny Scrollbar */
#tut-content::-webkit-scrollbar {
    width: 6px; /* Skinny width */
}

#tut-content::-webkit-scrollbar-track {
    background: transparent; /* Invisible track */
}

#tut-content::-webkit-scrollbar-thumb {
    background-color: transparent; /* Invisible thumb by default */
    border-radius: 3px;
}

/* Reveal Scrollbar on Hover (WebKit) */
#tut-content:hover::-webkit-scrollbar-thumb {
    background-color: #444; /* Matches your terminal scrollbar style */
}

/* Optional: Brighter thumb when actively grabbing it */
#tut-content::-webkit-scrollbar-thumb:active {
    background-color: #666; 
}

/* Dimming Logic Classes */

/* Terminal dims to 85% brightness (15% dim) */
#terminal.dimmed {
    filter: brightness(0.85);
    transition: filter 0.5s;
}

/* Tutorial dims to 25% brightness (75% dim) */
#tutorial-overlay.idle {
    opacity: 0.25;
}
#tutorial-overlay:hover {
    opacity: 1 !important; 
}
#tutorial-overlay.active {
    opacity: 1.0;
}

#tutorial-overlay.tut-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;       /* CHANGED: Explicitly enable clicking when open */
}

/* Ensure the idle dimming overrides the standard open brightness */
#tutorial-overlay.tut-open.idle {
    opacity: 0.25;
}

/* Force elements inside to be clickable */
#tutorial-overlay * {
    pointer-events: auto;
}

/* Style for the Square X Button */
#tut-close {
    background: #000;
    color: #33ff00;
    border: 1px solid #33ff00;
    width: 20px;
    height: 20px;
    line-height: 18px; /* Vertically center the X */
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    padding: 0;
}

#tut-close:hover {
    background: #33ff00;
    color: #000;
}

/* --- S-METER STYLES --- */
#s-meter {
    position: absolute;
    left: 50px; 
    /* CHANGED: Moved up by 25px (52px - 25px = 27px) */
    top: 34px; 
    width: 73px;
    height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start; 
    gap: 1px;
    opacity: 0;
    transition: opacity 0.3s;
}

#radio.powered #s-meter {
    opacity: 1;
}

.s-seg {
    background-color: #222;
    opacity: 0.05;
    transition: opacity 0.25s;
    width: 3px; /* Much smaller width */
}

.s-seg.on {
    opacity: 0.9;
}

/* S-Meter Labels */
.s-label {
    position: absolute;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    /* CHANGED: Decreased font size further */
    font-size: 6px; 
    color: #222;
    /* REMOVED: bottom: 21px; (Moving this to individual classes below) */
    opacity: 0.05;
    transform: scaleX(1.4);
    transform-origin: bottom center;
    transition: opacity 0.1s;
}

/* Label logic: Show when their class is added */
.s-label.on {
    opacity: 0.9;
}

/* Label Positions (Approximate to align with Seg 1, 5, 9) */
.l-1 { 
    left: 6px; 
    bottom: 5px; /* Base 21px + 10px */
}   

.l-5 { 
    left: 34px; 
    bottom: 6px; /* Base 21px + 9px */
}  

.l-9 { 
    left: 53px; 
    bottom: 8px; /* Base 21px + 3px */
}

/* Segment 1: Horizontal Rectangle */
.s-1 { width: 9px; height: 5px; } 

/* Segment 2: Less wide, taller */
.s-2 { width: 8px; height: 5.4px; } 

/* Segment 3: Square */
.s-3 { width: 7px; height: 5.8px; } 

/* Segments 4-13: Progressively narrower and taller */
.s-4 { width: 6.5px; height: 6.2px; }
.s-5 { width: 6px; height: 6.6px; }
.s-6 { width: 5.5px; height: 7px; }
.s-7 { width: 5px; height: 7.4px; }
.s-8 { width: 4.5px; height: 7.8px; }
.s-9 { width: 3px; height: 8.2px; }
.s-10 { width: 2.6px; height: 8.6px; }
.s-11 { width: 2.4px; height: 9px; }
.s-12 { width: 2.2px; height: 9.4px; }
.s-13 { width: 2px; height: 9.8px; } /* Peak Height */

/* Segments 14-15: Same width, 10% shorter increments */
.s-14 { width: 2px; height: 9px; } /* ~10% shorter than 13 */
.s-15 { width: 2px; height: 8px; } /* ~10% shorter than 14 */

/* --- Welcome Popup Styles --- */
#welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.85); 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

#welcome-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#welcome-content {
    position: relative;
    z-index: 2;
    background-color: #000;
    border: 2px solid #33ff00;
    
    /* Pulsating Green Border */
    box-shadow: 0 0 15px rgba(51, 255, 0, 0.4);
    animation: pulsate-border 2s infinite ease-in-out;
    
    max-width: 550px;
    width: 90%;
    text-align: center;
    border-radius: 8px;
    font-family: 'cern', monospace;
    overflow: hidden;
}

@keyframes pulsate-border {
    0% { box-shadow: 0 0 10px rgba(51, 255, 0, 0.2); border-color: #33ff00; }
    50% { box-shadow: 0 0 30px rgba(51, 255, 0, 0.6); border-color: #88ff88; }
    100% { box-shadow: 0 0 10px rgba(51, 255, 0, 0.2); border-color: #33ff00; }
}

#welcome-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.3; 
    transition: background-image 1s ease-in-out;
    z-index: 0;
}

.welcome-inner-wrapper {
    position: relative;
    z-index: 1;
    padding: 40px;
    background: rgba(0, 0, 0, 0.6); 
}

/* Header: Clean Green Base */
.welcome-header {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #33ff00;
    text-shadow: 0 0 5px rgba(51, 255, 0, 0.5);
}

/* Highlight: Restored "White Hot" Glow to match main branding */
.welcome-header .highlight {
    background-color: transparent;
    color: #fff; /* White center */
    text-shadow: 0 0 10px #33ff00, 0 0 20px #33ff00; /* Intense green glow */
    padding: 0;
}

.welcome-author {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: #33ff00;
    margin-bottom: 25px;
    opacity: 0.9;
    text-shadow: 1px 1px 1px #000;
}

.welcome-body p {
    font-size: 16px;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    line-height: 1.6;
    margin-bottom: 15px;
    font-family: 'Courier New', monospace;
}

/* TUTORIAL BUTTON FIXES */
.power-switch.static {
    vertical-align: middle;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -1px;
    
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: normal;
    
    /* Smaller box sizing */
    width: auto;
    height: 15px
    font-size: 10px; /* Slightly smaller text relative to paragraph */
    line-height: 1;
    padding: 0 8px;
    box-sizing: border-box;
    
    /* Ensure colors match the button style exactly */
    background: #333;
    border: 2px solid #000;
    color: #fff;
    box-shadow: none;
}

#btn-welcome-start {
    background: rgba(20, 20, 20, 0.9);
    color: #33ff00;
    border: 1px solid #33ff00;
    padding: 12px 24px;
    font-size: 18px;
    font-family: 'cern', monospace;
    cursor: pointer;
    margin: 20px 0;
    transition: all 0.2s;
    text-transform: uppercase;
}

#btn-welcome-start:hover {
    background: #33ff00;
    color: #000;
    box-shadow: 0 0 15px #33ff00;
}

.welcome-opt-out {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 1px 1px 2px black;
}

/* --- Orientation Lock Styles --- */
#orientation-lock {
    display: none; /* Hidden by default */
}

/* Trigger ONLY on devices that are in landscape 
   AND have a small vertical height (phones).
*/
@media only screen and (orientation: landscape) and (max-height: 500px) {
    #orientation-lock {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #000;
        z-index: 20000; /* Must be higher than Welcome Popup (10000) */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .lock-content {
        font-family: 'cern', monospace;
        color: #33ff00;
        font-size: 24px;
        border: 2px solid #33ff00;
        padding: 20px;
        background: rgba(0, 50, 0, 0.2);
        box-shadow: 0 0 20px #33ff00;
        animation: blink-text 1s infinite;
    }
}

@keyframes blink-text {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}