:root{
  --shadow: 0 30px 60px rgba(0,0,0,0.55);
  --live: #28a745; /* Change this to your preferred green */
}

/* ---------- Skin: Amber Tuner (default) ---------- */
[data-theme="tuner"]{
  --bg:#15120f; --panel:#1e1a15; --panel-2:#252019; --face:#0b0a08;
  --accent:#e8a33d; --accent-dim:#7a5a26; --text:#f0e6d2; --live:#6fcf97;
  --line:#3a3128; --muted:#6b6255; --err:#b96a4f;
  --display-font:'Space Grotesk', sans-serif; --mono-font:'IBM Plex Mono', monospace;
  --radius:22px; --radius-inner:12px;
  --iframe-bg:#0b0a08;
}

/* ---------- Skin: Neon Grid ---------- */
[data-theme="neon"]{
  --bg:#0a0a12; --panel:#12121f; --panel-2:#181829; --face:#050508;
  --accent:#ff2ea6; --accent-dim:#5a1f4a; --text:#e8e6ff; --live:#39ffb0;
  --line:#2a2a44; --muted:#5c5c86; --err:#ff5c5c;
  --display-font:'Space Grotesk', sans-serif; --mono-font:'IBM Plex Mono', monospace;
  --radius:14px; --radius-inner:8px;
  --iframe-bg:#050508;
}

/* ---------- Skin: Metal ---------- */
[data-theme="metal"]{
  --bg:#0c0c0d; --panel:#161616; --panel-2:#1c1c1c; --face:#050505;
  --accent:#c81e2c; --accent-dim:#5a1015; --text:#e6e2df; --live:#c81e2c;
  --line:#333; --muted:#6b6b6b; --err:#c81e2c;
  --display-font:'Oswald', sans-serif; --mono-font:'IBM Plex Mono', monospace;
  --radius:4px; --radius-inner:2px;
  --iframe-bg:#050505;
}

/* ---------- Skin: Newsprint ---------- */
[data-theme="paper"]{
  --bg:#eee9df; --panel:#f7f3ea; --panel-2:#ffffff; --face:#f2ede2;
  --accent:#1f1f1f; --accent-dim:#9c9587; --text:#1c1a16; --live:#2c6e49;
  --line:#c9c1af; --muted:#8a8272; --err:#a3402f;
  --display-font:'Oswald', sans-serif; --mono-font:'IBM Plex Mono', monospace;
  --radius:2px; --radius-inner:0px;
  --iframe-bg:#ffffff;
}

*{box-sizing:border-box;}

html,body{
  margin:0; min-height:100%;
  background: var(--bg);
  color:var(--text);
  font-family:var(--display-font);
  transition:background .3s ease, color .3s ease;
  background-image: url('../images/guitar.jpg'); /* Replace with your actual path and image filename */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

.layout {
  position: fixed;
  top: 30px;
  left: 300px; /* Increased to give breathing room on the left */
  right: 60px; /* Reduced to pull the layout flush against the right */
  bottom: 30px;
  display: flex;
  flex-direction: row-reverse; /* Reverses the horizontal order of items */
  align-items: flex-start;
  justify-content: flex-start; /* Aligns content toward the right side */
  gap: 24px;
}



.player-wrap{
  flex:none;
  justify-content: center;
  align-items: center;
}

.side-box{
  flex:1;
  align-self:stretch;
  background:linear-gradient(180deg, var(--panel), var(--panel-2)); 
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  padding:5px;
  min-height:200px;
  overflow:hidden;
}


.side-box iframe{
  width:100%;
  height:100%;
  min-height:184px;
  border:0;
  border-radius:calc(var(--radius) - 8px);
  display:block;
  /* background:var(--iframe-bg); */
}

@media (max-width:820px){
  .layout{ flex-direction:column; bottom:auto; }
  .side-box{ width:100%; min-height:320px; }
}

.skin-switch{
  display:flex; gap:8px; margin-bottom:14px;
  justify-content: center;
  align-items: center;
}
.skin-switch button{
  font-family:var(--mono-font);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px;
  border-radius:20px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s ease;
}
.skin-switch button:hover{ color:var(--text); border-color:var(--accent); }
.skin-switch button.active{
 /* color:var(--bg); background:var(--accent); border-color:var(--accent);*/
}

.unit{
  width:100%; max-width:min(420px, calc(100vw - 60px));
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius:var(--radius);
  padding:22px 22px 26px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  border:1px solid var(--line);
  position:relative;
}

.brand{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 16px; }
.brand-name{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-dim); font-weight:600; }
.status{ display:flex; align-items:center; gap:7px; font-family:var(--mono-font); font-size:11px; letter-spacing:.08em; color:var(--muted); }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .3s, box-shadow .3s; }
.status-dot.live{ background:var(--live); box-shadow:0 0 8px 2px var(--live); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:.55;} }

.display{
  background:var(--face); border-radius:var(--radius-inner);
  padding:18px 18px 14px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.4);
  position:relative; overflow:hidden;
}

.freq-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.freq{ font-family:var(--mono-font); font-size:13px; color:var(--accent); letter-spacing:.12em; opacity:.85; }
.clock{ font-family:var(--mono-font); font-size:12px; color:var(--muted); letter-spacing:.06em; }

.marquee-wrap{
  overflow:hidden; white-space:nowrap; height:30px; position:relative;
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display:inline-block; padding-left:100%;
  font-size:19px; font-weight:600; color:var(--text);
  animation:scroll 14s linear infinite;
}
.marquee-track.short{ padding-left:0; animation:none; }
@keyframes scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }

.subline{ font-family:var(--mono-font); font-size:11px; color:var(--muted); letter-spacing:.05em; margin-top:6px; }

.grille{ display:grid; grid-template-columns:repeat(14, 1fr); gap:4px; margin:18px 4px 20px; }
.grille span{ aspect-ratio:1; border-radius:50%; background:var(--panel-2); box-shadow:inset 0 1px 1px rgba(0,0,0,0.5); transition:background .25s ease; }
.unit.playing .grille span{ animation:flicker 1.6s ease-in-out infinite; background:var(--accent-dim); }
.grille span:nth-child(3n){animation-delay:.15s;}
.grille span:nth-child(4n){animation-delay:.35s;}
.grille span:nth-child(5n){animation-delay:.55s;}
.grille span:nth-child(7n){animation-delay:.75s;}
@keyframes flicker{ 0%,100%{background:var(--accent-dim); opacity:.5;} 50%{background:var(--accent); opacity:1;} }

.controls{ display:flex; align-items:center; gap:18px; padding:2px 6px 0; }

.play-btn{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--line);
  background:var(--face);
  box-shadow:0 6px 14px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex:none; transition:transform .12s ease; color:var(--accent);
}
.play-btn:hover{ transform:translateY(-1px); }
.play-btn:active{ transform:translateY(1px) scale(.98); }
.play-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.play-btn svg{ width:22px; height:22px; }

.vol-block{ flex:1; display:flex; flex-direction:column; gap:6px; }
.vol-label{ font-family:var(--mono-font); font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; display:flex; justify-content:space-between; }

input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--line); border-radius:2px; outline:none; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); cursor:pointer; margin-top:-5.5px; }
input[type="range"]::-moz-range-thumb{ width:14px; height:14px; border:none; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); cursor:pointer; }
input[type="range"]::-moz-range-track{ height:3px; background:var(--line); border-radius:2px; }

.foot{ margin-top:18px; text-align:center; font-family:var(--mono-font); font-size:10px; letter-spacing:.08em; color:var(--muted); }
.foot.err{ color:var(--err); }

@media (max-width:380px){
  .marquee-track{font-size:16px;}
  .play-btn{width:56px; height:56px;}
}
/* Shrunken, display-adjacent play button layout configuration rules */
.play-btn.sub-display-play {
    width: 44px !important;
    height: 44px !important;
    margin: 10px auto 5px auto !important; /* Centers it with tight vertical spacing */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.play-btn.sub-display-play svg {
    width: 20px !important;
    height: 20px !important;
}
/* Container block positioning adjustments */
.vol-block {
    width: 100%;
    max-width: 280px; /* Adjust this value to match your container's width grid */
    margin: 12px auto !important;
    display: flex;
    flex-direction: column;
}

/* --- THE TRACK: Replicates the inset pill look --- */
input[type="range"]#volume {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px; /* Thickness height of the track */
    background: #d8d6e2; /* Matte silver-lavender base base tone */
    border-radius: 7px;
    outline: none;
    /* Soft inset top/bottom shadow to match the image's depth */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 
                inset 0 -1px 2px rgba(255, 255, 255, 0.4);
    margin: 8px 0;
}

/* --- THE THUMB HANDLE: Replicates the rounded pill with ridges --- */
input[type="range"]#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px; /* Width of the thumb slider capsule */
    height: 20px; /* Taller height so it extends slightly past the track borders */
    border-radius: 6px;
    background: #e2e0ed; /* Matches the pill light silver color tone */
    cursor: pointer;
    
    /* Adds the soft 3D edge shading gradient */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 
                inset 0 1px 1px #fff,
                inset 0 -1px 2px rgba(0,0,0,0.15);
                
    /* The 3 vertical ridges seen inside the button image */
    background-image: linear-gradient(90deg, 
        transparent 20%, 
        #9c9aa6 20%, #9c9aa6 30%, transparent 30%, 
        transparent 45%, 
        #9c9aa6 45%, #9c9aa6 55%, transparent 55%, 
        transparent 70%, 
        #9c9aa6 70%, #9c9aa6 80%, transparent 80%
    );
    border: 1px solid #b8b6c2;
    transition: background-color 0.1s;
}

/* Firefox compatibility backup rules support */
input[type="range"]#volume::-moz-range-thumb {
    width: 26px;
    height: 20px;
    border-radius: 6px;
    background: #e2e0ed;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px #fff;
    background-image: linear-gradient(90deg, transparent 20%, #9c9aa6 20%, #9c9aa6 30%, transparent 30%, transparent 45%, #9c9aa6 45%, #9c9aa6 55%, transparent 55%, transparent 70%, #9c9aa6 70%, #9c9aa6 80%, transparent 80%);
    border: 1px solid #b8b6c2;
}

/* Track background layout fill adjustment for Firefox */
input[type="range"]#volume::-moz-range-track {
    height: 14px;
    background: #d8d6e2;
    border-radius: 7px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* ==========================================================================
   Metal2K Radio - Combined Master Horizontal Control Row & Custom Slider
   ========================================================================== */

/* 1. FORCE THE THREE SECTIONS SIDE-BY-SIDE */
.master-control-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important; /* Space between play, slider, and skin buttons */
    margin: 15px auto !important;
    padding: 0 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. PLAY BUTTON TUNING */
.play-btn.sub-display-play {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important; /* Keeps play button perfectly circular */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.play-btn.sub-display-play svg {
    width: 18px !important;
    height: 18px !important;
}

/* 3. CENTER COLUMN: VOLUME BLOCK WRAPPER */
.master-control-row .vol-block {
    flex: 1.2 !important; /* Spans across the center area proportionally */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.master-control-row .vol-label {
    display: none !important; /* Hides "Volume 80" text to preserve horizontal line space */
}

/* 4. CUSTOM SKEUOMORPHIC SLIDER TRACK (INNER GLOW PILL) */
input[type="range"]#volume {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px; /* Smooth track thickness */
    background: #d8d6e2; /* Matte silver-lavender base */
    border-radius: 6px;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 
                inset 0 -1px 2px rgba(255, 255, 255, 0.4);
    margin: 0; /* Clear margins so it centers vertically */
}

/* 5. SLIDER THUMB HANDLE WITH THE 3 RIDGES (WebKit: Chrome/Safari/Edge) */
input[type="range"]#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 18px; /* Slightly taller than the track */
    border-radius: 5px;
    background: #e2e0ed;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 
                inset 0 1px 1px #fff,
                inset 0 -1px 2px rgba(0,0,0,0.15);
    background-image: linear-gradient(90deg, 
        transparent 20%, 
        #9c9aa6 20%, #9c9aa6 30%, transparent 30%, 
        transparent 45%, 
        #9c9aa6 45%, #9c9aa6 55%, transparent 55%, 
        transparent 70%, 
        #9c9aa6 70%, #9c9aa6 80%, transparent 80%
    );
    border: 1px solid #b8b6c2;
    transition: background-color 0.1s;
}

/* Firefox Slider Compatibility Backups */
input[type="range"]#volume::-moz-range-thumb {
    width: 24px;
    height: 18px;
    border-radius: 5px;
    background: #e2e0ed;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px #fff;
    background-image: linear-gradient(90deg, transparent 20%, #9c9aa6 20%, #9c9aa6 30%, transparent 30%, transparent 45%, #9c9aa6 45%, #9c9aa6 55%, transparent 55%, transparent 70%, #9c9aa6 70%, #9c9aa6 80%, transparent 80%);
    border: 1px solid #b8b6c2;
}
input[type="range"]#volume::-moz-range-track {
    height: 12px;
    background: #d8d6e2;
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 6. RIGHT COLUMN: SHRUNKEN SKIN CHOICES BAR */
.master-control-row .skin-switch {
    display: flex !important;
    flex: 1.5 !important; /* Shifts optimum room layout share to the button pack */
    justify-content: space-between !important;
    gap: 3px !important;
    margin: 0 !important;
}

.status-dot.live {
  background: #28a745;
  box-shadow: 0 0 8px 2px #28a745;
}

/* Compact individual pill-buttons to prevent wrapping lines */
.master-control-row .skin-switch button {
    flex: 1 !important;
    padding: 6px 2px !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
}

/* 7. DYNAMIC CLEAN UP FOR DARK THEME (TUNER SKIN BACKGROUND ADJUSTMENT) */
body[data-theme="tuner"] input[type="range"]#volume {
    background: #23222a; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
}

/* ==========================================================================
   Metal2K Radio - Mobile Responsive Patch (Screens under 768px wide)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. Reset your main container layout flow */
    .layout, 
    .player-container,
    .unit,
    #unit {
        width: 100% !important;
        max-width: 360px !important; /* Constrains the player width neatly to your viewport screen */
        min-width: 0 !important;
        margin: 0 auto !important; /* Centers the interface directly over your burning guitar image */
        padding: 8px !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* 2. Lock down background behaviors to prevent horizontal scrolling pages */
    body {
        background-size: cover !important;
        background-position: center center !important;
        overflow-x: hidden !important; 
    }

    /* 3. Forces both VU charts to shrink to fit side-by-side without overflowing boundaries */
    .meters-wrapper {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 10px 0 !important;
        box-sizing: border-box !important;
    }

    .vu-container {
        flex: 1 !important;
        width: 50% !important; /* Allocates exactly half the screen to each meter */
        height: 90px !important; /* Slightly reduces height for smaller viewports */
    }

    /* 4. Tweak the control line spaces */
    .master-control-row {
        gap: 6px !important;
        padding: 0 !important;
    }

    .master-control-row .skin-switch button {
        font-size: 8px !important;
        padding: 5px 2px !important;
    }
}