*,*:before,*:after{box-sizing:border-box}@font-face{font-family:ibm-bold;src:url(/fonts/IBMPlexSans-Bold.ttf)}@font-face{font-family:ibm-regular;src:url(/fonts/IBMPlexSans-Regular.ttf)}:root{font-family:ibm-bold;font-size:1em;--color-bg: #0d0d0d;--color-panel: #1a1a1a;--color-border: #8b6914;--color-gold: #d4af37;--color-health: #8b0000;--color-mana: #0066cc;--color-text: #e7ffee;--color-text-dim: #888888}body,html{height:100vh;margin:0;overflow:hidden;background-color:var(--color-bg);color:var(--color-text)}#game{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;background:#0d0d0d;z-index:0}#ui{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10}#ui>*{pointer-events:auto}.game-hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.hud-top{position:absolute;top:0;left:0;right:0;padding:10px 20px;display:flex;justify-content:center;background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}.resources{display:flex;gap:30px;font-size:1rem;text-shadow:0 2px 4px rgba(0,0,0,.8)}.resource-gold,.resource-lumber,.resource-food{display:flex;align-items:center;gap:5px}.hud-bottom{position:absolute;bottom:20px;left:0;right:0;text-align:center}.controls-hint{color:var(--color-text-dim);font-size:.9rem;font-family:ibm-regular;text-shadow:0 1px 2px rgba(0,0,0,.8);opacity:.7}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100}.loading-screen h1{color:var(--color-gold);font-size:2rem;margin-bottom:20px;text-shadow:0 0 20px rgba(212,175,55,.5)}.loading-bar{width:300px;height:10px;background:var(--color-panel);border:2px solid var(--color-border);border-radius:5px;overflow:hidden}.loading-progress{width:50%;height:100%;background:linear-gradient(90deg,var(--color-gold),#ffd700);animation:loading-pulse 1.5s ease-in-out infinite}@keyframes loading-pulse{0%,to{opacity:.6}50%{opacity:1}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:10;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--color-panel);border:3px solid var(--color-border);border-radius:8px;padding:30px;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 0 40px #000c,inset 0 0 60px #8b69141a;animation:slide-up .3s ease}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{color:var(--color-gold);margin-top:0;font-size:1.8rem;border-bottom:2px solid var(--color-border);padding-bottom:10px}.modal-content p{color:var(--color-text);font-family:ibm-regular;line-height:1.6;margin:20px 0}.modal-content button{background:linear-gradient(180deg,#3d2817,#2a1b0f);border:2px solid var(--color-border);color:var(--color-gold);padding:12px 30px;font-size:1rem;font-family:ibm-bold;cursor:pointer;border-radius:4px;transition:all .2s}.modal-content button:hover{background:linear-gradient(180deg,#4d3827,#3a2b1f);box-shadow:0 0 15px #d4af374d}.modal-content button:active{transform:scale(.98)}.camera-controller{display:flex;position:fixed;top:5vh;right:5vw;z-index:1;gap:1vh}.camera-controller-btn{color:var(--color-text);background-color:var(--color-panel);border:2px solid var(--color-border);border-radius:8px;font-size:1.5rem;width:50px;height:50px;cursor:pointer;opacity:.7;transition:opacity .2s}.camera-controller-btn:hover{opacity:1}.controls-message{position:fixed;color:var(--color-text-dim);top:3vh;left:5vw;opacity:.6;font-size:1rem;max-width:40vw;-webkit-user-select:none;user-select:none;pointer-events:none}