:root{--bg-dark: #1a120b;--panel-bg: rgba(45, 33, 20, .9);--accent-brass: #b8860b;--accent-gold: #ffd700;--accent-amber: #ffbf00;--accent-red: #8b0000;--text-primary: #e2d1c3;--text-dim: #a68b7c;--border-glow: rgba(255, 191, 0, .4);--font-main: "Cinzel", serif;--font-mono: "Special Elite", cursive}body{margin:0;padding:0;background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-main);overflow:hidden;height:100vh;width:100vw;background-image:radial-gradient(circle at 50% 50%,rgba(184,134,11,.1) 0%,transparent 80%),url(https://www.transparenttextures.com/patterns/dark-leather.png)}#app{display:grid;grid-template-areas:"header header header" "nav main sidebar" "footer footer footer";grid-template-columns:80px 1fr 350px;grid-template-rows:60px 1fr 100px;height:100vh}.status-bar{grid-area:header;background:var(--panel-bg);border-bottom:2px solid var(--accent-brass);display:flex;align-items:center;justify-content:space-between;padding:0 20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 5px 15px #00000080;z-index:100}.mission-clock{color:var(--accent-gold);font-size:1.4rem;text-shadow:2px 2px 4px rgba(0,0,0,1),0 0 10px var(--accent-amber);font-family:var(--font-mono)}.viewport{grid-area:main;position:relative;background-image:url(/steampunk_map.jpg);background-size:cover;background-position:center;overflow:hidden;box-shadow:inset 0 0 150px #000000e6;border:4px double var(--accent-brass);margin:10px}.base-view,.badges-view{position:absolute;top:0;left:0;width:100%;height:100%;transition:all .6s cubic-bezier(.4,0,.2,1);opacity:1;transform:translateY(0)}.base-view.hidden,.badges-view.hidden{opacity:0;transform:translateY(20px);pointer-events:none}.base-overlay{width:100%;height:100%;background:radial-gradient(circle at center,transparent 40%,rgba(26,18,11,.6) 100%);display:flex;align-items:center;justify-content:center}.building-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:25px;width:min(90%,800px)}.building-slot{border:2px solid var(--accent-brass);background:#2d2114b3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;aspect-ratio:1;transition:all .5s;clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%)}.building-slot.locked{filter:sepia(1) brightness(.5)}.building-slot.active{background:#ffbf0033;border-color:var(--accent-gold);box-shadow:0 0 30px var(--accent-amber)}.building-icon{font-size:2.5rem;color:var(--accent-gold)}.status-label{font-size:.7rem;font-family:var(--font-mono);margin-top:5px}.badges-view{background:#1a120bf2;display:flex;flex-direction:column;padding:40px;overflow-y:auto}.section-title{text-align:center;color:var(--accent-gold);margin-bottom:40px;font-size:2rem;letter-spacing:5px;text-shadow:0 0 10px var(--accent-amber)}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:20px;max-width:1000px;margin:0 auto}.badge-item{aspect-ratio:1;border:2px solid var(--accent-brass);background:#2d211499;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .4s;box-shadow:inset 0 0 20px #00000080}.badge-item.earned{background:radial-gradient(circle,var(--accent-brass) 0%,#4d3618 100%);border-color:var(--accent-gold);box-shadow:0 0 20px var(--accent-amber),inset 0 0 10px var(--accent-gold);color:var(--bg-dark)}.badge-icon{font-size:2rem;margin-bottom:8px;opacity:.2}.earned .badge-icon{opacity:1;filter:drop-shadow(0 0 5px gold)}.badge-label{font-size:.7rem;font-family:var(--font-mono)}.ai-commander{grid-area:sidebar;background:var(--panel-bg);border-left:2px solid var(--accent-brass);display:flex;flex-direction:column;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50}.chat-header{padding:15px;border-bottom:2px solid var(--accent-brass);text-align:center;font-size:.9rem;letter-spacing:2px;color:var(--accent-gold)}.chat-log{flex:1;padding:15px;overflow-y:auto;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:.9rem;line-height:1.4}.chat-input-container{padding:15px;border-top:2px solid var(--accent-brass)}textarea{width:100%;background:#1a120b;border:1px solid var(--accent-brass);color:var(--accent-gold);padding:10px;border-radius:4px;resize:none;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.resource-tray{grid-area:footer;background:var(--panel-bg);border-top:2px solid var(--accent-brass);display:flex;align-items:center;justify-content:space-around;padding:0 20px;z-index:100}.progress-bar-container{width:250px;height:16px;background:#000;border:1px solid var(--accent-brass);position:relative;border-radius:8px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#b8860b,gold);box-shadow:0 0 15px var(--accent-amber);transition:width 1s}.dock{grid-area:nav;background:var(--panel-bg);border-right:2px solid var(--accent-brass);display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:25px;z-index:100}.dock-icon{width:50px;height:50px;border:2px solid var(--accent-brass);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-gold);cursor:pointer;transition:.3s;font-size:1.3rem}.dock-icon:hover,.dock-icon.active{background:var(--accent-brass);color:var(--bg-dark);box-shadow:0 0 15px var(--accent-gold)}.game-over{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:1000;text-align:center}.game-over-content h1{font-size:5rem;color:var(--accent-red);text-shadow:0 0 30px var(--accent-red);margin-bottom:20px}.game-over-content button{background:var(--accent-brass);color:#fff;border:none;padding:15px 30px;font-family:var(--font-main);cursor:pointer;border-radius:4px;font-size:1.2rem}.hidden{display:none!important;opacity:0;pointer-events:none}.msg.bot{color:var(--accent-gold);margin-bottom:10px;border-left:2px solid var(--accent-brass);padding-left:10px}.msg.user{color:var(--text-dim);margin-bottom:10px;padding-left:10px}#video-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:9999}.video-container{display:flex;flex-direction:column;align-items:center;gap:20px}#video-frame-container iframe{width:80vw;height:45vw;max-width:1200px;max-height:80vh;border:4px solid var(--accent-brass);box-shadow:0 0 30px var(--accent-gold)}#close-video{background:var(--accent-red);color:#fff;border:2px solid var(--accent-brass);padding:10px 20px;font-family:var(--font-mono);cursor:pointer;font-size:1.2rem;text-transform:uppercase;letter-spacing:2px}#close-video:hover{background:red;box-shadow:0 0 15px red}