/* Layout Styles - Lake Wequaquet */

/* Top Bar */
.top-bar { padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.5); z-index: 10; }
.time-location { display: flex; align-items: baseline; gap: 12px; }
.time { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: #7a8090; }
.time-period { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #506070; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; background: rgba(60,80,100,0.2); border-radius: 3px; }
.time-controls { display: flex; align-items: center; gap: 4px; }
.time-btn { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: #7090b0; background: rgba(60,80,100,0.3); border: 1px solid rgba(100,150,255,0.2); padding: 4px 10px; border-radius: 3px; cursor: pointer; transition: all 0.2s; }
.time-btn:hover { background: rgba(60,80,100,0.5); color: #a0c0e0; }
.time-btn:active { background: rgba(80,120,180,0.5); }
.time-speed { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #80a0c0; min-width: 30px; text-align: center; background: rgba(40,60,90,0.3); padding: 2px 6px; border-radius: 3px; }
.time-control-panel { position: fixed; top: 50px; left: 16px; z-index: 100; display: flex; align-items: center; gap: 6px; background: rgba(10,15,25,0.9); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(100,150,255,0.15); font-family: 'IBM Plex Mono', monospace; }
.time-control-label { font-size: 0.6rem; color: #506070; }
.location { font-size: 0.9rem; color: #e8944c; }
.top-controls { display: flex; gap: 8px; align-items: center; }
.activity-badge { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #4a5060; background: rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 10px; }
.restart-btn { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #6a5050; background: rgba(100,50,50,0.2); border: 1px solid #4a3030; padding: 3px 8px; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.restart-btn:hover { background: rgba(150,50,50,0.3); border-color: #6a4040; color: #aa7070; }

/* Scene Container */
.scene-container { flex: 1; position: relative; background: #080a0c; overflow: hidden; transform: translateZ(0); isolation: isolate; }
.scene-container.zoom-limit { box-shadow: inset 0 0 30px rgba(100,150,200,0.3), inset 0 0 60px rgba(80,120,180,0.15); }
.scene-container.zoom-limit::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid rgba(100,150,200,0.4); pointer-events: none; animation: zoom-limit-pulse 0.5s ease-out; }
.scene-wrapper { width: 100%; height: 100%; position: absolute; will-change: transform; transform-origin: center center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.scene { width: 100%; height: 100%; position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.scene.active { opacity: 1; pointer-events: auto; }
#viewSky { width: 400%; height: 400%; top: -150%; left: -150%; will-change: transform; transform: translateZ(0); contain: layout style; }

/* Nav Bar */
.nav-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; padding: 10px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); z-index: 15; transform: translateZ(0); backface-visibility: hidden; }
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; background: rgba(20,25,30,0.8); border: 1px solid #2a3040; border-radius: 6px; cursor: pointer; transition: all 0.25s; min-width: 55px; }
.nav-btn:hover { background: rgba(30,35,45,0.9); border-color: #4a5060; }
.nav-btn.active { background: rgba(40,35,30,0.9); border-color: #e8944c; }
.nav-icon { font-size: 1.1rem; line-height: 1; }
.nav-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.45rem; color: #6a7080; text-transform: uppercase; }
.nav-btn.active .nav-label { color: #c0a080; }

/* Bottom Bar */
.bottom-bar { padding: 8px 16px; background: #12161c; display: flex; justify-content: space-between; align-items: center; z-index: 10; transform: translateZ(0); backface-visibility: hidden; }
.stats { display: flex; gap: 12px; align-items: center; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.45rem; color: #4a5060; text-transform: uppercase; }
.stat-value { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: #7a8090; }
.inventory-group { display: flex; gap: 6px; }
.inventory { display: flex; align-items: center; gap: 2px; padding: 2px 6px; background: rgba(255,255,255,0.03); border-radius: 3px; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #4a5050; }
.inventory.has-items { background: rgba(200,150,100,0.1); color: #a08060; }
.mood-text { font-size: 0.7rem; color: #5a6070; font-style: italic; max-width: 200px; text-align: right; }

/* Fuel Bar */
.fuel-bar { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); display: none; gap: 10px; z-index: 20; }
.fuel-bar.visible { display: flex; }
.fuel-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 14px; background: rgba(20,15,10,0.9); border: 1px solid #3a3020; border-radius: 6px; cursor: pointer; transition: all 0.2s; min-width: 60px; }
.fuel-btn:hover { background: rgba(40,30,20,0.9); border-color: #5a4030; }
.fuel-btn.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.fuel-icon { font-size: 1.3rem; }
.fuel-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; color: #8a7060; text-transform: uppercase; }
.fuel-count { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #aa9070; }

/* Scene Indicator */
.scene-indicator { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #5a6070; background: rgba(0,0,0,0.5); padding: 4px 12px; border-radius: 4px; z-index: 20; display: none; }
.scene-indicator.visible { display: block; }