*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:manipulation;background:#0a1a0a;color:#e8f0e0;font:15px/1.4 system-ui,sans-serif}
h1,h2,h3,.mb{font-family:'Black Ops One',Impact,sans-serif;font-weight:400}
*{ -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent }
input{-webkit-user-select:text;user-select:text}

/* ===== CAPA ===== */
#cover{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0a1a0a;transition:opacity .6s ease}
#cover.out{opacity:0;pointer-events:none}
.cover-bg{position:absolute;inset:0;background:linear-gradient(160deg,#0d2a12 0%,#1a3a22 40%,#0a1a0a 100%);overflow:hidden}
.cover-bg::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 20% 30%,#2a5a32 0%,transparent 40%),
  radial-gradient(circle at 80% 70%,#1a4a28 0%,transparent 35%);
  opacity:.6}
.cover-content{position:relative;text-align:center;z-index:2}
.cover-content h1{font-size:clamp(2.2rem,8vw,3.8rem);color:#c8e6a0;text-shadow:0 0 30px #4a8a3a,0 4px 12px #000;letter-spacing:4px;line-height:1.1;margin-bottom:12px}
.cover-content p{color:#8ab87a;margin-bottom:32px;font-size:1.05rem;letter-spacing:1px}
#play{padding:14px 48px;background:linear-gradient(180deg,#3a8a3a,#1a5a22);color:#e8ffe0;border:2px solid #6aba5a;border-radius:6px;font-size:1.25rem;letter-spacing:.3em;cursor:pointer;box-shadow:0 4px 20px rgba(60,140,60,.4);transition:all .2s}
#play:hover{transform:scale(1.05);box-shadow:0 6px 28px rgba(80,180,80,.55)}

/* ===== LOBBY ===== */
#lobby{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;overflow:auto}
#lobby[hidden]{display:none}
#mn{width:100%;max-width:400px;background:rgba(8,20,10,.92);border:1px solid #2a5a32;border-radius:10px;padding:24px 20px;text-align:center;box-shadow:0 8px 40px #000a}
#mn h1{font-size:clamp(1.4rem,5vw,1.9rem);color:#b8e080;margin-bottom:6px;letter-spacing:2px}
#mn .sm{color:#7aa06a;font-size:.9rem;margin-bottom:18px}
#mn input{width:100%;padding:12px;margin:6px 0;background:#0e1e12;border:1px solid #3a6a3a;border-radius:6px;color:#e0f0d0;font-size:1.05rem;text-align:center}
#cd{text-transform:uppercase;letter-spacing:.2em}
.mb{display:block;width:100%;padding:13px;margin:7px 0;background:linear-gradient(180deg,#2a6a32,#1a4a22);color:#e8ffe0;border:1px solid #4a8a4a;border-radius:6px;font-size:1.05rem;cursor:pointer;transition:all .15s}
.mb:hover{background:linear-gradient(180deg,#3a8a42,#2a5a32)}
.mb small{display:block;font-size:.72rem;opacity:.7;margin-top:3px;font-family:system-ui}
.mb.solo{background:#1a2a1a;border-color:#3a5a3a;font-size:.95rem;padding:10px}
.mb.ins{background:#152015;border-color:#3a5a3a}
.or{opacity:.55;margin:8px 0 4px;font-size:.9rem}
#lb{margin-top:14px;width:100%;max-width:400px}
#lb .code{font-size:1.6rem;color:#c8e080;letter-spacing:6px}
#lb ol{text-align:left;margin:10px 0;padding-left:24px}
#lb button{width:100%}

/* overlays */
.ov{position:fixed;inset:0;z-index:50;background:rgba(4,12,6,.92);overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:8vh 14px}
.ov[hidden]{display:none}
.ovb{width:100%;max-width:400px;background:rgba(8,20,10,.95);border:1px solid #2a5a32;border-radius:10px;padding:22px 18px;text-align:center}
.ovb h2{color:#b8e080;margin-bottom:14px}
.pubit{display:flex;align-items:center;gap:10px;background:#122018;border-radius:8px;padding:10px 12px;border-left:5px solid #6aba5a;text-align:left;margin:7px 0}
.pubit div{flex:1;min-width:0}
.pubit b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pubit small{opacity:.7}
.pubit button{margin:0;width:auto;padding:8px 14px}
#pubst{min-height:1.3em;font-weight:700;margin:6px 0;color:#8ab87a}
.insb{text-align:left}
.insb h2{text-align:center}
.ig{margin-bottom:14px;color:#c0d8b0}
.is{margin:12px 0;padding:10px;background:#0e1c12;border-radius:6px;border-left:3px solid #4a8a4a}
.is b{color:#b8e080;display:block;margin-bottom:4px}
.is p{font-size:.9rem;color:#a0c090;line-height:1.45}

/* fundo menu */
#bgm{position:fixed;inset:0;z-index:-1;background:linear-gradient(160deg,#0a1a0c,#0d2414 50%,#081208)}

/* ===== GAME HUD ===== */
#game{position:fixed;inset:0;z-index:20}
#game[hidden]{display:none!important}
#game canvas{display:block;width:100%;height:100%}

#hud{position:absolute;top:0;left:0;right:0;padding:12px 16px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:30}
.hud-left,.hud-right{background:rgba(6,16,8,.8);border:1px solid #2a5a32;border-radius:8px;padding:8px 14px;pointer-events:auto}
#player-color{width:18px;height:18px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:8px;border:2px solid #fff3}
#status-text{display:inline;font-size:.95rem;color:#c8e0b0}
#timer{font-family:'Black Ops One',sans-serif;font-size:1.3rem;color:#c8e080}
#rank{font-size:.85rem;color:#8ab87a;margin-top:2px}

#inventory{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:30;flex-wrap:wrap;justify-content:center;max-width:95vw}
.inv-btn{width:52px;height:52px;border-radius:10px;border:2px solid #3a6a3a;background:rgba(10,22,12,.85);color:#e0f0d0;font-size:1.4rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .15s}
.inv-btn:disabled{opacity:.35;cursor:default}
.inv-btn:not(:disabled):hover{border-color:#6aba5a;transform:scale(1.08)}
.inv-btn .qty{position:absolute;top:-4px;right:-4px;background:#2a8a3a;color:#fff;font-size:.7rem;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:system-ui}

#minimap-wrap{position:absolute;bottom:18px;right:14px;z-index:30;border:2px solid #2a5a32;border-radius:8px;overflow:hidden;background:rgba(6,16,8,.85)}
#minimap{display:block}

#message{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:1.4rem;color:#c8e080;text-shadow:0 0 12px #2a5a32,0 2px 6px #000;opacity:0;transition:opacity .35s;pointer-events:none;z-index:40;text-align:center;max-width:90vw}

/* mobile controls */
#mobile-controls{position:absolute;inset:0;pointer-events:none;z-index:25}
#joystick-zone{position:absolute;bottom:30px;left:20px;width:130px;height:130px;pointer-events:auto}
#joystick-base{width:110px;height:110px;border-radius:50%;background:rgba(20,40,25,.5);border:2px solid #3a6a3a55;position:relative}
#joystick-stick{width:48px;height:48px;border-radius:50%;background:rgba(80,160,90,.7);border:2px solid #8aba7a;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#action-buttons{position:absolute;bottom:40px;right:160px;display:flex;flex-direction:column;gap:12px;pointer-events:auto}
#action-buttons button{width:56px;height:56px;border-radius:50%;border:2px solid #3a6a3a;background:rgba(15,30,18,.75);color:#c8e0b0;font-size:1.3rem;cursor:pointer}

/* end screen */
#end-screen{position:absolute;inset:0;background:rgba(4,12,6,.9);display:flex;align-items:center;justify-content:center;z-index:50}
#end-screen[hidden]{display:none}
.end-box{background:rgba(8,20,10,.95);border:2px solid #3a7a3a;border-radius:12px;padding:28px 24px;text-align:center;max-width:380px;width:92%}
.end-box h2{color:#c8e080;font-size:1.8rem;margin-bottom:10px}
#end-rank{text-align:left;margin:16px 0;padding-left:20px}
#end-rank li{margin:6px 0;color:#a0c090}

/* cores dos jogadores */
.p0{--pc:#ff6a00}.p1{--pc:#4a9eff}.p2{--pc:#2ecc71}.p3{--pc:#e74c3c}.p4{--pc:#f1c40f}.p5{--pc:#9b59b6}