*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;min-height:100dvh;overflow:hidden;overflow-x:hidden;width:100%;max-width:100%;margin:0;padding:0;box-sizing:border-box;position:fixed;top:0;left:0;right:0;bottom:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;position:fixed;top:0;left:0;right:0;bottom:0}#root{width:100%;height:100%;max-width:100%;overflow:hidden;overflow-x:hidden;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;padding:0;box-sizing:border-box}.phone-frame{width:100%;max-width:480px;height:100%;min-height:100dvh;max-height:960px;aspect-ratio:480 / 960;position:relative;background:#000;display:grid;grid-template-rows:56px 1fr 8px auto 64px;overflow:hidden;overflow-x:hidden;margin:0 auto;padding:0;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);box-sizing:border-box;transform:none}@media (min-width: 480px){.phone-frame{margin:0 auto}}@media (max-width: 480px){.phone-frame{width:100%;max-width:100%;height:100%;min-height:100dvh;max-height:100dvh;aspect-ratio:auto}}.top-hud{grid-row:1;min-height:56px;max-height:56px;width:100%;padding-top:max(0px,env(safe-area-inset-top,0));padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);background:transparent;box-sizing:border-box;overflow:hidden;overflow-x:hidden}.gameplay-area{grid-row:2;position:relative;overflow:hidden;overflow-x:hidden;background:#1a1a1a;min-height:0;width:100%;max-width:100%;display:flex;justify-content:center;align-items:center;padding:0;margin:0;box-sizing:border-box}.exp-bar-container{grid-row:3;height:8px;min-height:8px;max-height:8px;background:#00000080;position:relative;overflow:hidden;margin-top:0;padding-top:0}.exp-bar-fill{height:100%;background:linear-gradient(90deg,#3498db,#2980b9);transition:width .3s ease;width:0%}.equipment-panel{margin-left:0;grid-row:4;overflow-y:auto;overflow-x:hidden;background:linear-gradient(to top,#000000e6,#000000b3);border-top:2px solid rgba(255,255,255,.2);padding:8px;padding-left:max(8px,env(safe-area-inset-left,8px));padding-right:max(8px,env(safe-area-inset-right,8px));min-height:0;width:100%;max-width:100%;box-sizing:border-box}.bottom-menu{grid-row:5;min-height:64px;max-height:64px;border-top:2px solid rgba(255,255,255,.2);padding-bottom:max(0px,env(safe-area-inset-bottom,0));padding-left:max(0px,env(safe-area-inset-left,0));padding-right:max(0px,env(safe-area-inset-right,0));background:transparent;box-sizing:border-box;overflow:hidden}.equipment-grid{--tile-size: clamp(36px, 8vw, 42px);display:grid;grid-template-columns:repeat(6,var(--tile-size));gap:4px;justify-content:center;align-content:start;width:100%;max-width:100%;box-sizing:border-box;padding:0;margin:0 auto}@media (max-width: 400px){.equipment-grid{grid-template-columns:repeat(4,var(--tile-size));--tile-size: clamp(34px, 7.5vw, 40px)}}@media (max-width: 360px){.equipment-grid{grid-template-columns:repeat(3,var(--tile-size));--tile-size: clamp(32px, 7vw, 38px)}}.equipment-tile{width:var(--tile-size);height:var(--tile-size);border-radius:6px;border:1px solid rgba(255,255,255,.2);background:#ffffff0d;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .2s}.equipment-tile:hover{border-color:#fff6;background:#ffffff1a}.equipment-tile.rarity-common{border-color:#9d9d9d;background:#9d9d9d1a}.equipment-tile.rarity-uncommon{border-color:#1eff00;background:#1eff001a}.equipment-tile.rarity-rare{border-color:#0070dd;background:#0070dd1a}.equipment-tile.rarity-epic{border-color:#a335ee;background:#a335ee1a}.equipment-tile.rarity-legendary{border-color:#ff8000;background:#ff80001a}.equipment-tile-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center;opacity:.9}.equipment-tile-empty .equipment-tile-icon{opacity:.3}.equipment-tile-level-badge{position:absolute;top:2px;right:2px;font-size:9px;font-weight:700;color:#fff;background:#0009;padding:1px 3px;border-radius:3px;line-height:1}.logs-panel{position:fixed;bottom:80px;right:10px;width:300px;max-width:calc(100vw - 20px);max-height:400px;background:#000000f2;border:2px solid rgba(255,255,255,.3);border-radius:8px;z-index:10000;display:flex;flex-direction:column;font-family:Courier New,monospace;font-size:10px}.logs-panel-header{padding:8px;background:#ffffff1a;border-bottom:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;align-items:center;cursor:move}.logs-panel-title{color:#fff;font-weight:700;font-size:11px}.logs-panel-close{background:transparent;border:none;color:#fff;cursor:pointer;font-size:16px;padding:0 4px}.logs-panel-content{flex:1;overflow-y:auto;padding:4px;color:#ccc}.log-entry{margin-bottom:2px;padding:2px 4px;border-left:2px solid transparent;word-break:break-word}.log-entry.error{border-left-color:#e74c3c;color:#ff6b6b}.log-entry.warn{border-left-color:#f39c12;color:orange}.log-entry.info{border-left-color:#3498db;color:#5dade2}.log-timestamp{color:#888;margin-right:4px}