:root{--color-bg: #1a1a2e;--color-bg-panel: rgba(30, 30, 50, .9);--color-bg-panel-light: rgba(40, 40, 60, .95);--color-text: #e8e8e8;--color-text-muted: #a0a0a0;--color-brass: #b5a642;--color-brass-light: #d4c36a;--color-frost: #a8d5e5;--color-accent: #e94560;--color-success: #4ecca3;--color-error: #ff6b6b;--font-narrative: "Merriweather", Georgia, serif;--font-ui: "Inter", system-ui, sans-serif;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--chat-width: 400px;--chat-max-height: 50vh;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-ui);font-size:16px;line-height:1.5}#game-container{position:relative;width:100%;height:100%;overflow:hidden}#loading-screen{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-bg);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity var(--transition-slow)}#loading-screen.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-bg-panel);border-top-color:var(--color-brass);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-md)}@keyframes spin{to{transform:rotate(360deg)}}.loading-content p{font-family:var(--font-narrative);font-style:italic;color:var(--color-frost)}.fade-in{animation:fadeIn var(--transition-normal) ease forwards}.fade-out{animation:fadeOut var(--transition-normal) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg-panel);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:var(--color-brass);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-brass-light)}:focus-visible{outline:2px solid var(--color-frost);outline-offset:2px}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none}input,textarea{font-family:inherit;font-size:inherit;border:none;background:none;color:inherit}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}#scene-view{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity var(--transition-slow);z-index:1}#scene-view:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#1a1a2e33,#1a1a2e66,#1a1a2eb3);pointer-events:none}#scene-view.fade-out{opacity:0}#scene-view.fade-in{opacity:1}#narrative-box{position:absolute;top:var(--spacing-lg);left:50%;transform:translate(-50%);width:min(90%,700px);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-panel);border:1px solid var(--color-brass);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:10;transition:opacity var(--transition-normal)}#narrative-box p{font-family:var(--font-narrative);font-size:1.1rem;line-height:1.7;color:var(--color-frost);font-style:italic}#narrative-box.hidden{opacity:0;pointer-events:none}#chat-overlay{position:absolute;bottom:100px;left:50%;transform:translate(-50%);width:min(95%,var(--chat-width));max-height:var(--chat-max-height);background:var(--color-bg-panel);border:1px solid var(--color-brass);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;z-index:20;transition:opacity var(--transition-normal);overflow:hidden}#chat-overlay.hidden{opacity:0;pointer-events:none}.chat-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-bg-panel-light);border-bottom:1px solid rgba(181,166,66,.3)}.npc-portrait{width:48px;height:48px;border-radius:50%;border:2px solid var(--color-brass);object-fit:cover;background-color:var(--color-bg)}.npc-name{font-weight:600;color:var(--color-brass-light);font-size:1rem}.chat-messages{flex:1;overflow-y:auto;padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);max-height:250px}.chat-message{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);max-width:85%;line-height:1.5}.chat-message.npc{background:#a8d5e526;border:1px solid rgba(168,213,229,.3);align-self:flex-start;color:var(--color-frost)}.chat-message.npc:before{content:"";margin-right:var(--spacing-xs)}.chat-message.user{background:#b5a64233;border:1px solid rgba(181,166,66,.3);align-self:flex-end;color:var(--color-brass-light)}.chat-message.typing{color:var(--color-text-muted);font-style:italic}.chat-message.typing:after{content:"...";animation:typing 1.5s infinite}@keyframes typing{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.chat-input-container{display:flex;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--color-bg-panel-light);border-top:1px solid rgba(181,166,66,.3)}.chat-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg);border:1px solid rgba(181,166,66,.5);border-radius:var(--radius-md);color:var(--color-text);transition:border-color var(--transition-fast)}.chat-input:focus{border-color:var(--color-brass-light);outline:none}.chat-input:disabled{opacity:.5;cursor:not-allowed}.chat-send-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-brass);color:var(--color-bg);font-weight:600;border-radius:var(--radius-md);transition:background-color var(--transition-fast),transform var(--transition-fast)}.chat-send-btn:hover:not(:disabled){background:var(--color-brass-light);transform:translateY(-1px)}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}#hint-buttons{position:absolute;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;z-index:15;transition:opacity var(--transition-normal)}#hint-buttons.hidden{opacity:0;pointer-events:none}.hint-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-panel);border:1px solid var(--color-brass);border-radius:var(--radius-lg);color:var(--color-brass-light);font-size:.9rem;transition:background-color var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast)}.hint-btn:hover{background:var(--color-bg-panel-light);border-color:var(--color-brass-light);transform:translateY(-2px)}.hint-btn .icon{font-size:1.1rem}@media (max-width: 600px){#narrative-box{top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md)}#narrative-box p{font-size:.95rem}#chat-overlay{bottom:80px;max-height:45vh}.chat-messages{max-height:180px}#hint-buttons{bottom:var(--spacing-md)}.hint-btn{font-size:.85rem;padding:var(--spacing-xs) var(--spacing-sm)}}#video-player{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition-slow)}#video-player.active{opacity:1;pointer-events:auto}#video-player video{width:100%;height:100%;object-fit:cover}#video-player .skip-btn{position:absolute;bottom:var(--spacing-xl);right:var(--spacing-xl);padding:var(--spacing-sm) var(--spacing-lg);background:#0009;border:1px solid var(--color-brass);border-radius:var(--radius-md);color:var(--color-brass-light);font-size:.9rem;opacity:0;transition:opacity var(--transition-normal),background-color var(--transition-fast)}#video-player .skip-btn.visible{opacity:1}#video-player .skip-btn:hover{background:#000c}#video-player .fade-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;pointer-events:none;transition:opacity var(--transition-slow)}#video-player .fade-overlay.active{opacity:1}@media (max-width: 600px){#video-player .skip-btn{bottom:var(--spacing-lg);right:var(--spacing-lg);font-size:.85rem}}#language-selector{position:fixed;top:0;left:0;width:100%;height:100%;background:#0003;display:none;justify-content:center;align-items:center;z-index:1000}#language-selector.active{display:flex}.language-selector-content{text-align:center;color:var(--color-text)}.language-selector-content h2{font-size:2rem;margin-bottom:.5rem;color:var(--color-accent)}.language-selector-content h3{font-size:1.2rem;margin-bottom:2rem;opacity:.8}.language-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.language-btn{display:flex;align-items:center;justify-content:center;padding:1rem 2rem;background:var(--color-surface);border:2px solid var(--color-accent);border-radius:12px;cursor:pointer;transition:all .3s ease;min-width:160px}.language-btn:hover{background:var(--color-accent);transform:scale(1.05)}.language-btn .name{font-size:1.2rem;color:var(--color-text);font-weight:500}