body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:#1a1a1a;font-family:Arial,sans-serif;color:#fff}#app-container{display:flex;width:100%;height:100%}.ad-container{width:10%;height:100%;background-color:#333;display:flex;align-items:center;justify-content:center;border-right:1px solid #444;border-left:1px solid #444}#game-container{width:100%;height:100%;position:relative;background-color:#000}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;z-index:10}#hud{width:100%;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;height:100%}#hud-top{font-size:24px;font-weight:700;text-shadow:2px 2px 0 #000}#hud-controls{font-size:14px;text-align:left;width:fit-content;pointer-events:auto}#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:24px;font-weight:700;text-shadow:1px 1px 0 #000;pointer-events:none}#settings-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;pointer-events:auto;z-index:100}.modal-content{background:#fff;color:#000;padding:20px;border-radius:10px;text-align:center;min-width:200px}#chat-container{position:absolute;bottom:70px;left:20px;width:300px;height:200px;display:flex;flex-direction:column;pointer-events:none;z-index:150}#chat-messages{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;margin-bottom:5px;text-shadow:none;background:transparent;padding:5px;border-radius:5px;height:150px;pointer-events:auto;transition:background-color .3s}#chat-messages.active{background:#fffc}.chat-msg{background:#ffffff80;padding:2px 5px;margin-bottom:2px;border-radius:3px;font-size:14px;opacity:1;transition:opacity .5s;color:#000;font-weight:700}.chat-msg.faded{opacity:0}#chat-messages.active .chat-msg{opacity:1!important}#chat-input{width:100%;padding:5px;background:#ffffffe6;border:1px solid #ccc;color:#000;box-sizing:border-box;pointer-events:auto;display:none}#joystick-zone{position:absolute;bottom:50px;left:50%;transform:translate(-50%);width:150px;height:150px;z-index:10;display:none}@media (hover: none) and (pointer: coarse){#joystick-zone{display:block}#hud-controls p{display:none}}#game-over-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;padding:40px;border-radius:10px;text-align:center;z-index:100;border:2px solid white;pointer-events:auto}@media (max-width: 768px){#game-over-modal{width:85%;padding:20px;top:40%}#ad-end-screen{width:100%!important;height:150px!important}}#chat-toggle-btn{background:#00000080;border:1px solid #fff;color:#fff;padding:5px 10px;border-radius:5px;font-size:20px;margin-top:10px;cursor:pointer;pointer-events:auto}#invite-btn{background:#00000080;border:1px solid #fff;color:#fff;padding:5px 10px;border-radius:5px;font-size:20px;margin-right:10px;cursor:pointer;pointer-events:auto}#info-btn{position:absolute;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background:#0009;color:#fff;border:2px solid #fff;font-size:24px;cursor:pointer;z-index:50;display:flex;align-items:center;justify-content:center;transition:background .2s;pointer-events:auto}#settings-btn{position:absolute;top:20px;right:20px;width:50px;height:50px;border-radius:50%;background:#0009;color:#fff;border:2px solid #fff;font-size:24px;cursor:pointer;z-index:50;display:flex;align-items:center;justify-content:center;transition:background .2s;pointer-events:auto}#info-btn:hover,#settings-btn:hover{background:#000000e6}#info-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:2000;pointer-events:auto}#info-modal .modal-content{background:#222;color:#fff;border:2px solid #555;max-width:400px;width:90%;padding:20px;border-radius:10px;text-align:center}#info-modal h2{margin-top:0;color:#fc0}#info-modal h3{margin-bottom:10px;border-bottom:1px solid #444;padding-bottom:5px}#info-modal p{margin:10px 0;line-height:1.4}#info-modal button{background:#444;color:#fff;border:1px solid #777;padding:10px 20px;cursor:pointer;font-size:16px;border-radius:5px;margin-top:15px}#info-modal button:hover{background:#666}.slide{width:100%;text-align:center;animation:fadeIn .5s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.pop-in{animation:popIn .5s ease-out forwards}.ready-btn-center{pointer-events:auto;cursor:pointer;font-size:24px;padding:15px 30px;border-radius:8px;border:2px solid #fff;background-color:#f44;color:#fff;font-weight:700;text-transform:uppercase;box-shadow:0 4px 6px #0000004d;transition:all .2s ease}.ready-btn-center:hover{transform:scale(1.05);box-shadow:0 6px 8px #0006}.ready-btn-center.ready{background-color:#4caf50}.modal-btn{background-color:#4caf50;color:#fff;border:none;padding:12px 24px;font-size:18px;border-radius:6px;cursor:pointer;transition:background-color .2s,transform .1s;box-shadow:0 4px 6px #0000004d;font-weight:700;text-transform:uppercase}.modal-btn:hover{background-color:#45a049;transform:scale(1.05)}.modal-btn:active{transform:scale(.98)}.nav-btn{background-color:#333;color:#fff;border:2px solid #555;padding:8px 20px;font-size:20px;border-radius:6px;cursor:pointer;transition:all .2s ease;min-width:50px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background-color:#555;border-color:#777;transform:scale(1.1)}.nav-btn:active{transform:scale(.95);background-color:#222}