:root{--bg-dark: #0f172a;--primary: #3b82f6;--accent: #f59e0b;--text: #f8fafc;--glass: rgba(30, 41, 59, .8)}.game-container{width:100vw;height:100vh;background:var(--bg-dark);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Inter,system-ui,sans-serif;overflow:hidden;position:relative}.viewport{position:relative;background:#1e293b;border:4px solid #334155;border-radius:12px;overflow:hidden;box-shadow:0 0 50px #00000080}.map-layer{position:absolute;top:0;left:0;transition:transform .1s linear}.grid-bg{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;background-color:#0f172a}.player-fixed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;pointer-events:none}.player-sprite{width:40px;height:40px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px var(--primary);transition:transform .1s ease}.player-sprite img{width:100%;height:100%;object-fit:contain}.direction-indicator{position:absolute;right:-5px;width:10px;height:10px;background:#fff;border-radius:50%}.fov-mask{position:absolute;top:50%;left:50%;width:2000px;height:2000px;margin-top:-1000px;margin-left:-1000px;background:conic-gradient(from 0deg,transparent 0deg,transparent 45deg,rgba(0,0,0,.95) 45.1deg,rgba(0,0,0,.95) 314.9deg,transparent 315deg,transparent 360deg);pointer-events:none;z-index:90}.item-node{position:absolute;width:60px;height:60px;transform:translate(-50%,-50%);cursor:pointer;display:flex;flex-direction:column;align-items:center}.item-icon{width:50px;height:50px;background:var(--glass);border:2px solid rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px}.item-icon img{width:80%;height:80%}.item-label{font-size:12px;margin-top:4px;background:#0009;padding:2px 6px;border-radius:4px;white-space:nowrap}.ui-overlay{position:absolute;width:100%;padding:20px;display:flex;flex-direction:column;align-items:center;z-index:200;pointer-events:none}.ui-overlay.top{top:0}.ui-overlay.bottom{bottom:0}.status-bar{background:var(--glass);padding:4px 12px;border-radius:20px;font-size:12px;display:flex;align-items:center;gap:6px;margin-bottom:10px}.cloud-icon{color:#10b981;animation:pulse 2s infinite}.message-box{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 24px;border-radius:12px;border:1px solid rgba(255,255,255,.1);max-width:80%;text-align:center}.inventory-panel{background:var(--glass);padding:10px 20px;border-radius:12px;display:flex;align-items:center;gap:15px;margin-bottom:15px}.items{display:flex;gap:8px}.inventory-item{background:#3b82f64d;padding:2px 8px;border-radius:4px;font-size:14px}.hint-btn{pointer-events:auto;background:var(--accent);border:none;padding:10px 20px;border-radius:8px;color:#000;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .2s}.hint-btn:hover{transform:scale(1.05)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:300}.modal-content{background:#1e293b;padding:30px;border-radius:16px;text-align:center}.modal-content input{background:#0f172a;border:2px solid var(--primary);color:#fff;font-size:32px;width:100px;text-align:center;margin:20px 0;border-radius:8px}.modal-btns{display:flex;gap:10px;justify-content:center}.modal-btns button{padding:8px 20px;border-radius:6px;cursor:pointer;border:none}.win-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:400;text-align:center}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}