.sim-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1040px;
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.master-header {
    width: 100%; display: flex; gap: 25px; align-items: stretch;
}

.navy-box {
    background: #111827;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.box-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 12px; }

.box-title { color: #f3f4f6; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white; border: none; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.toggle-btn:hover { background: rgba(255, 255, 255, 0.2); }

.hideable-content { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0.2s ease; width: 100%; }
.hidden-content { opacity: 0; visibility: hidden; }

.energy-box { flex: 1; min-height: 150px; }

.master-bar {
    display: flex; height: 94px; width: 100%; background: #0f172a; border-radius: 8px; overflow: hidden; position: relative; flex-shrink: 0;
}

.master-segment { height: 100%; min-width: 0; box-sizing: border-box; transition: width 0.05s linear; }
.bar-gpe { background: linear-gradient(to bottom, #7e578f, #4a3356); }
.bar-ke { background: linear-gradient(to bottom, #3b82f6, #2563eb); }
.bar-therm { background: linear-gradient(to bottom, #b36b48, #824b2f); }

.labels-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.bar-label-overlay { position: absolute; white-space: nowrap; font-weight: 700; color: white; display: flex; gap: 5px; align-items: center; transform: translateX(-50%); transition: left 0.05s linear; }

.bar-ke-label { top: 8px; }
.bar-gpe-label { top: 35px; }
.bar-therm-label { top: 62px; }

.bar-name-label { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.95; display: inline-flex; align-items: center; gap: 4px; }
.bar-value-label { font-size: 15px; font-weight: 700; }

.speedo-box { flex: 0 0 20%; display: flex; flex-direction: column; align-items: center; min-height: 150px; }
#speedoCanvas { width: 154px; height: 94px; display: block; margin: 0 auto; }

/* Wrapper area without white frame */
.simulation-area {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Control toolbar styled as the rounded top card */
.sim-controls {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 0;
    background: #fff;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sim-btn {
    color: white; border: none; border-radius: 8px; padding: 8px 15px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; height: 38px; box-sizing: border-box; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif;
}
.sim-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sim-btn-play { background: #10b981; } 
.sim-btn-active { background: #3b82f6 !important; }
.sim-btn-reset { background: #ef4444; } 

.sim-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.btn-active-flash { background: #f87171 !important; transform: translateY(0) !important; }

#btnToggleGrid { width: 120px; } #btnToggleFriction { width: 145px; } #btnToggleBrakes { width: 135px; } #btnToggleSpeed { width: 145px; } #btnLaunchPause { width: 130px; } #btnReset { width: 110px; }

/* Scrubber deck seamlessly fitting middle */
.scrubber-deck {
    position: relative;
    width: 100%;
    height: 60px;
    background: #111827;
    border-radius: 0;
    box-sizing: border-box;
    border-left: 1px solid #111827;
    border-right: 1px solid #111827;
}

.slider-wrapper { position: absolute; left: 0px; width: 100%; top: 25px; padding: 0 15px; box-sizing: border-box; }
input[type=range].spatial-slider { width: 100%; margin: 0; cursor: pointer; }
.station-marker { position: absolute; top: -18px; transform: translateX(-50%); color: #e0e0e0; font-size: 11px; font-weight: 600; pointer-events: none; }

/* Canvas fitting directly below scrubber */
#simCanvas {
    border-radius: 0;
    border: 1px solid #111827;
    border-top: none;
    border-bottom: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 440;
    display: block;
    box-sizing: border-box;
}

/* Elevation deck as rounded bottom card */
.elevation-joints {
    display: flex;
    gap: 8px;
    background: #f3f4f6;
    padding: 15px;
    border-radius: 0 0 12px 12px;
    justify-content: space-between;
    margin-top: 0;
    border: 1px solid #e5e7eb;
    border-top: none;
    overflow-x: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.joint-control { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; background: #fff; padding: 12px 5px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); border-top: 4px solid #3b82f6; }
.joint-control:nth-child(1) { border-top-color: #ef4444; }
.joint-control:nth-child(7) { border-top-color: #10b981; }
.joint-control.locked { border-top-color: #9ca3af; }
.joint-control.locked .joint-val { margin-top: 30px; margin-bottom: 10px; }

.joint-label { font-size: 13px; font-weight: 600; color: #4b5563; text-transform: uppercase; margin-bottom: 6px; text-align: center; }
.joint-val { font-weight: 700; color: #111827; font-size: 18px; margin: 4px 0; }
.locked-text { font-size: 12px; color: #4b5563; text-align: center; margin-top: 6px; line-height: 1.4; font-weight: 500; }

.btn-elevate { background: #4b5563; color: white; border: none; border-radius: 6px; width: 36px; height: 28px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.btn-elevate:hover { background: #3b82f6; transform: translateY(-1px); }
.btn-elevate:active { transform: translateY(0); }

@media (max-width: 768px) {
    .master-header { flex-direction: column; align-items: stretch; }
    .energy-box, .speedo-box { width: 100%; flex: none; }
    .sim-controls { position: static; margin-bottom: 0; justify-content: center; }
    .elevation-joints { flex-wrap: nowrap; }
}