:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#eef3f5;background:#10161b}
#network-panel{padding:14px;margin-top:12px;border:1px solid #344653;background:#152432}#network-panel label{display:block;font-size:12px;color:#b4c3cf;margin:12px 0 6px}#network-panel input,#network-panel select{width:100%;min-width:0;padding:9px;background:#202f3b;border:1px solid #344653;color:#eef3f5}#network-panel button{font-size:12px;padding:10px;margin-top:8px}#network-status,.network-hint{font-size:11px;line-height:1.5;margin:12px 0 0}.network-actions{display:flex;align-items:center;gap:8px}.network-actions>*{flex:1}.network-actions input{margin-top:8px}#room-code{text-transform:uppercase}#room-link{font-size:11px}
#weapon-slots{position:fixed;bottom:115px;right:30px;font-size:11px;color:#b4d7e4;text-shadow:0 2px 5px #000}
.map-description{font-size:12px;margin:8px 0;color:#a5bac6}
.difficulty{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:13px;color:#b4c3cf}.difficulty select{padding:8px 15px;background:#202f3b;color:#eef3f5;border:1px solid #4bc6e9}
#damage-direction{position:fixed;left:50%;top:50%;width:180px;height:180px;pointer-events:none}#damage-direction span{position:absolute;top:0;left:50%;transform:translateX(-50%);color:#ff5745;font-size:30px;text-shadow:0 2px 8px #000}
#scoreboard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(650px,94vw);padding:24px;background:#0e1929ed;border:1px solid #4bc6e9;pointer-events:none;z-index:3;box-shadow:0 15px 60px #0008}#scoreboard h2{margin:0;font-size:22px}#scoreboard p{margin:8px 0;font-size:12px}#scoreboard h3{margin:18px 0 8px;font-size:15px}#scoreboard table{width:100%;border-collapse:collapse;font-size:13px}#scoreboard th,#scoreboard td{padding:9px 5px;text-align:center;border-bottom:1px solid #ffffff16}#scoreboard th:first-child,#scoreboard td:first-child{text-align:left}#scoreboard th{color:#a5bac6;font-size:11px}#scoreboard .self{background:#ffffff10}#scoreboard small{display:block;margin-top:18px;font-size:11px;color:#a5bac6}
*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100vh}
#menu{position:fixed;inset:0;display:flex;overflow:auto;padding:24px 0;background:linear-gradient(120deg,#081018e8,#0d172c92)}
.panel{margin:auto}
#settings-panel{margin-top:18px;padding:12px;border:1px solid #344653;background:#152432}#settings-panel summary{cursor:pointer;font-size:13px;color:#78dbf4}#settings-panel label{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px;color:#b4c3cf}#settings-panel input{width:100%;margin:10px 0 0;accent-color:#4bc6e9}#settings-panel select{width:100%;padding:8px;margin-top:8px;background:#202f3b;color:#eef3f5;border:1px solid #4bc6e9}#settings-panel button{padding:9px;font-size:12px;background:#263c4c;color:#d6e6ed}#settings-status{font-size:11px;line-height:1.4;margin:10px 0 0;color:#8ca8ba}
.panel{width:min(440px,90vw);padding:38px;border-left:3px solid #54c6e8;background:#111b24e8;box-shadow:0 20px 80px #0006}
.eyebrow{font-size:11px;letter-spacing:3px;color:#54c6e8}h1{font-size:38px;margin:18px 0}p{font-size:15px;line-height:1.6;color:#b4c3cf}
button{width:100%;margin:12px 0 0;padding:16px;border:0;background:#4bc6e9;color:#07121b;font-weight:bold;font-size:15px;cursor:pointer}button:hover{background:#91e3fa}button:disabled{opacity:.55;cursor:wait}
#status{font-size:12px;min-height:20px}.controls{font-size:12px;margin-bottom:0;color:#8197a8}
#hud{position:fixed;top:24px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;text-shadow:0 2px 5px #000}
#team{color:#69d0ff}#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;color:#fff9;text-shadow:0 1px 3px black;pointer-events:none}
#help{position:fixed;bottom:22px;left:0;right:0;text-align:center;font-size:11px;color:#d3e1e4;text-shadow:0 1px 4px black;padding:0 20px;line-height:1.6}
[hidden]{display:none!important}
#ammo{position:fixed;bottom:64px;right:30px;text-align:right;text-shadow:0 2px 6px #000}#ammo strong{font-size:40px;font-weight:500}#ammo span{font-size:20px;color:#a3b7c7}#ammo small{display:block;font-size:10px;letter-spacing:2px;color:#69d0ff;margin-top:6px}
#score{position:fixed;top:52px;left:26px;font-size:11px;letter-spacing:1px;color:#acbec7;text-shadow:0 2px 5px #000}
#combat-notice{position:fixed;top:58%;width:100%;text-align:center;font-size:13px;color:#ffd46b;text-shadow:0 2px 6px #000;pointer-events:none}#crosshair.hit{color:#ffd46b;transform:translate(-50%,-50%) rotate(45deg);font-size:30px}
.mode-options{display:flex;gap:8px;margin:20px 0 4px}.mode-options button{font-size:12px;padding:12px 8px;background:#202f3b;color:#a8bdca;border:1px solid #344653;margin:0}.mode-options .selected{color:#78dbf4;border-color:#4bc6e9;background:#193644}
#match-score{position:fixed;top:22px;left:50%;transform:translateX(-50%);font-size:20px;text-shadow:0 2px 5px black;white-space:nowrap}.ct{color:#69d0ff}.tr{color:#ff7d6c}.goal{font-size:12px;color:#9aaeb9;margin:0 12px}#timer{position:fixed;top:54px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:2px;text-shadow:0 2px 5px black}
#health{position:fixed;bottom:68px;left:30px;text-shadow:0 2px 6px black}#health small{display:block;letter-spacing:2px;font-size:10px;color:#a5bac6}#health strong{font-weight:500;font-size:40px}#health span{display:block;color:#69d0ff;letter-spacing:1px;font-size:10px}
#damage-overlay{position:fixed;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse,transparent 30%,#d61212ba 100%)}#death-notice{position:fixed;left:50%;top:45%;transform:translateX(-50%);padding:20px;background:#111c26dd;color:#ff9a8c;white-space:nowrap;font-size:15px}
#network-ping{position:fixed;right:18px;top:18px;color:#a7dfb3;font:12px monospace;pointer-events:none;z-index:3}
#network-ping[data-quality="fair"]{color:#edcf86}
#network-ping[data-quality="poor"]{color:#ff8878}
.lobby-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lobby-heading button{width:auto;margin:0;padding:7px 12px;font-size:12px}
#lobby-status{font-size:12px;color:#a9bac8}
#public-rooms{max-height:190px;overflow:auto;display:grid;gap:6px;margin-bottom:16px}
.public-room{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;border:1px solid #344756;font-size:12px}
.public-room button{width:auto;margin:0;padding:7px 12px;font-size:12px;flex-shrink:0}

/* Lobby composition follows the original channel/room screenshots. */
#menu{padding:28px;background:radial-gradient(ellipse at 50% 20%,#253a3ae8,#070b0cf7 80%)}
.panel.lobby-shell{width:min(1120px,100%);padding:12px;display:grid;grid-template-columns:224px minmax(0,1fr);gap:12px;border:7px ridge #626b59;border-radius:18px;background:linear-gradient(135deg,#344b47,#15272b 45%,#1e2b2b);box-shadow:0 0 0 2px #080e10,0 25px 90px #000b,inset 0 0 20px #0009}
.lobby-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid #718079;background:linear-gradient(#333f37,#111c1e);box-shadow:inset 0 0 8px #0008}
.brand-title{font-size:25px;font-style:italic;font-weight:900;letter-spacing:2px;color:#e2e2c9;text-shadow:2px 2px #060b0b}.brand-caption{font-size:10px;letter-spacing:3px;margin-left:12px;color:#e3b95b}.connection-label{font-size:10px;letter-spacing:1px;color:#acc9bb}
.lobby-shell .mode-options{grid-column:1/-1;margin:0;gap:8px;justify-content:flex-end;padding:0 0 10px;border-bottom:2px groove #66736a}
.lobby-shell .mode-options button{max-width:200px;min-height:42px;background:linear-gradient(#63716a,#273f40 48%,#1b2a2b 50%);border:2px ridge #75877a;border-radius:7px;color:#dedfce;text-shadow:1px 2px #000;box-shadow:inset 0 0 8px #0007}
.lobby-shell .mode-options .selected{background:linear-gradient(#e2c774,#9e742c 45%,#694a16 50%,#b99238);border-color:#ecce76;color:#fff5ce;box-shadow:0 0 14px #dca44233,inset 0 0 5px #fff6}
.lobby-sidebar{border:1px solid #5e7974;background:linear-gradient(140deg,#2c5358,#152b32 60%,#101d24);padding:10px;align-self:stretch;box-shadow:inset 0 0 20px #0008}
.profile-card{display:flex;gap:12px;align-items:center;background:#142426;border:1px solid #6a7d6b;padding:10px}.profile-emblem{font-size:30px;color:#d3b565}.profile-card strong{display:block;font-size:13px;color:#e7e5c9}.profile-card small{display:block;font-size:11px;color:#b6c4b6;margin-top:5px}
.character-portrait{height:290px;position:relative;overflow:hidden;background:radial-gradient(ellipse,#41646866,transparent 65%);border-bottom:1px solid #5d7670}.character-portrait img{height:100%;width:100%;object-fit:contain}.character-portrait>span{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:3px;color:#b2c5bd}
.equipment-title{font-size:10px;letter-spacing:1.5px;color:#b0c0b2;margin:18px 0 10px}.equipment-slot{display:grid;grid-template-columns:28px 1fr;gap:4px;padding:12px;margin-top:7px;border:2px groove #526860;background:linear-gradient(110deg,#31484c,#18282e)}.equipment-slot>span{grid-row:span 2;color:#c9ad65;font-size:11px}.equipment-slot strong{font-size:16px;letter-spacing:2px}.equipment-slot small{font-size:10px;color:#b4c5bd}.sidebar-tip{font-size:11px;color:#91aaa7;line-height:1.7;margin:18px 0 0}
.lobby-content{min-width:0;padding:10px 16px;background:#0d202887;border:1px solid #4b6a69;box-shadow:inset 0 0 18px #0005}.lobby-content .eyebrow{font-size:9px;color:#d3bd7c;margin:0;letter-spacing:2px}.lobby-content h1{font-size:24px;margin:8px 0;color:#e7e6cf}.lobby-content p{font-size:12px;line-height:1.5}.lobby-content .difficulty{margin-top:12px}.lobby-content select,.lobby-content input{border-color:#577575!important;background:#152e36!important;color:#e1e6da!important}
.lobby-shell button{border:1px solid #a28d53;background:linear-gradient(#c7ac61,#77602d);color:#fff5d2;text-shadow:1px 1px #32280f;border-radius:3px}.lobby-shell button:hover{background:linear-gradient(#e4ce86,#a3843e)}.lobby-shell button:disabled{cursor:default;filter:saturate(.4)}
.lobby-shell #network-panel{padding:0;border:0;background:none;margin-top:18px}.lobby-heading strong{font-size:14px;color:#e4e1c5}.lobby-shell #lobby-status{margin:8px 0;color:#a9c2bb;font-size:11px}
.room-table{overflow-x:auto;border:2px groove #4f7776;background:#11262d;min-height:230px}.room-table-head,.lobby-shell .public-room{display:grid;grid-template-columns:65px 1.1fr 1.1fr 65px 76px 65px;gap:8px;align-items:center;min-width:560px;padding:9px 10px}.room-table-head{background:linear-gradient(#41666d,#25474e);color:#ceded7;font-size:10px;text-shadow:1px 1px #000;border-bottom:1px solid #658780}.lobby-shell #public-rooms{display:block;max-height:260px;margin:0}.lobby-shell .public-room{font-size:11px;border:0;border-bottom:1px solid #3a575a;min-height:43px}.public-room:nth-child(even){background:#8bb7b70d}.public-room:hover{background:#b3c8bc1a}.public-room span{overflow-wrap:anywhere}.public-room span:nth-child(5){color:#91ce65}.public-room[data-state="full"] span:nth-child(5),.public-room[data-state="finished"] span:nth-child(5){color:#cfac68}.lobby-shell .public-room button{padding:6px 4px;font-size:10px;width:100%;margin:0!important}
.room-setup{margin:14px 0 0;border:1px solid #3c6264;background:#122a31}.room-setup summary{padding:10px;font-size:12px;color:#c6d4c7;cursor:pointer}.room-form{padding:0 12px 12px;display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 14px;align-items:center}.lobby-shell #network-panel .room-form label{margin:0;font-size:11px}.room-form>p,.room-form>#restart-room,.room-form>.network-actions{grid-column:1/-1}.lobby-shell #network-panel .room-form button{margin:0}.lobby-shell #network-panel .room-form input{margin:0}.lobby-shell #settings-panel{background:#132b31;border-color:#3f6060}.lobby-shell #settings-panel summary{color:#c4d3c5}.lobby-shell #enter{border:2px ridge #ddbd65;background:linear-gradient(#b29549,#6a4a12);margin-top:16px}.lobby-shell .controls{font-size:10px;color:#8ea6a0}.lobby-shell #status{font-size:11px;margin:8px 0;min-height:0}.lobby-footer{grid-column:1/-1;display:flex;justify-content:space-between;padding:8px 12px;border-top:2px groove #60736b;color:#93aaa0;font-size:10px;letter-spacing:1px}
@media(max-width:760px){#menu{padding:10px}.panel.lobby-shell{grid-template-columns:140px minmax(0,1fr);gap:7px;padding:7px;border-width:4px}.lobby-sidebar{padding:6px}.profile-card{padding:6px;gap:5px}.profile-card strong{font-size:10px}.profile-emblem{font-size:20px}.character-portrait{height:230px}.lobby-content{padding:12px}.brand-title{font-size:18px}.connection-label{display:none}.room-form{grid-template-columns:1fr}.room-form>*{grid-column:1!important}.equipment-slot{padding:8px;grid-template-columns:20px 1fr}.equipment-slot strong{font-size:13px}}
@media(max-width:480px){.panel.lobby-shell{grid-template-columns:1fr}.lobby-sidebar{display:none}.lobby-brand{padding:10px}.lobby-shell .mode-options button{font-size:10px;padding:10px 4px}.lobby-content h1{font-size:21px}.brand-caption{font-size:9px}.lobby-footer{font-size:8px}}

/* Recovered panel art and original weapon icons; text remains live HTML. */
.equipment-slot{background:#17272c url('/prototipo/assets/lobby/ItemBack.png') center/100% 100% no-repeat;position:relative;padding-top:64px;min-height:106px}
.equipment-slot>img{position:absolute;left:10px;top:12px;width:calc(100% - 20px);height:42px;object-fit:contain;filter:drop-shadow(0 3px 3px #0009)}
.lobby-shell #settings-panel,.room-setup{background:#182c31 url('/prototipo/assets/lobby/menuBack.png') center/100% 100% no-repeat}
.channel-caption{display:block;font-size:9px;letter-spacing:1.5px;color:#b1c4ba;margin-bottom:7px}
.room-table{background:repeating-linear-gradient(0deg,#11262d 0px,#11262d 41px,#355258 42px,#11262d 43px);min-height:302px}
.lobby-shell .public-room{cursor:pointer;outline-offset:-2px}.public-room:focus-visible{outline:2px solid #d7c276}
.lobby-shell .public-room.selected-room{background:#507a7c url('/prototipo/assets/lobby/SelectedBack.png') center/100% 100% no-repeat;box-shadow:inset 3px 0 #d8bc65,inset 0 0 0 1px #8baaa1}
.room-toolbar{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #49615d}.room-toolbar button{width:auto;min-width:110px;margin:0;padding:10px 18px;font-size:12px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.lobby-shell #quick-play{margin-right:auto;background:linear-gradient(#687c42,#38452a);border-color:#a6ad64}.lobby-shell #open-room-setup{background:linear-gradient(#526b6e,#243c42);border-color:#7e9991}.lobby-shell #join-selected{background:linear-gradient(#cda953,#74501a)}
.lobby-content #selected-room-status{color:#b9c9b9;font-size:10px;min-height:15px;margin:7px 0}.lobby-shell button:focus-visible,.lobby-shell summary:focus-visible{outline:2px solid #f2d889;outline-offset:3px}
@media(max-width:760px){.equipment-slot{padding-top:58px}.equipment-slot>img{height:35px}.room-toolbar{flex-wrap:wrap}.room-toolbar button{min-width:90px;padding:9px 12px;font-size:11px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#channels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.lobby-shell .channel-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin:0;text-align:left;background:linear-gradient(#304c54,#17313b);border:1px solid #52736f;color:#d3dfd4}.channel-option strong{font-size:13px}.channel-option span{font-size:10px;font-weight:normal;color:#b5c6bd}.lobby-shell .channel-option.selected{border-color:#cebf76;box-shadow:inset 0 0 0 1px #cfbe6238;background:linear-gradient(#52644d,#233a36)}
.lobby-chat{margin:12px 0;border:2px groove #526b66;background:#14262d}.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#223c42;padding:8px 10px;font-size:11px;color:#d3decf}.chat-heading span{font-size:10px;color:#9fb6ad}.lobby-content #chat-log{height:126px;overflow:auto;padding:8px 10px;background:linear-gradient(90deg,#182d34,#15282d)}.lobby-content #chat-log p{margin:3px 0;font-size:11px;overflow-wrap:anywhere;color:#b8d3d2}.lobby-content #chat-log strong{color:#d1b86f;font-weight:normal}.chat-compose{display:flex;gap:6px;padding:6px;background:#20363d}.lobby-shell #network-panel .chat-compose input{flex:1;min-width:0;font-size:11px;padding:8px}.lobby-shell #network-panel .chat-compose button{width:74px;margin:0;padding:7px;font-size:11px}
.profile-name{display:block;color:#a9c1b6;font-size:10px;margin:12px 0 6px}.lobby-sidebar #player-name{width:100%;padding:8px;background:#172d33;color:#e8e6cb;border:1px solid #667b6d;font-size:12px}
@media(max-width:580px){#channels{grid-template-columns:1fr}.chat-heading{align-items:flex-start;flex-direction:column;gap:4px}}
@media(max-width:480px){.lobby-sidebar{display:block}.profile-card,.character-portrait,.equipment-title,.equipment-slot,.sidebar-tip{display:none}.profile-name{margin-top:0}.lobby-sidebar{padding:10px}.lobby-content{grid-column:1}}
.room-table-head,.lobby-shell .public-room{grid-template-columns:58px 1.3fr 1fr 1fr 58px 68px 54px;min-width:660px;gap:7px}.public-room span:nth-child(5){color:inherit}.public-room span:nth-child(6){color:#91ce65}.public-room[data-state="full"] span:nth-child(6),.public-room[data-state="finished"] span:nth-child(6){color:#cfac68}
.channel-option{flex-wrap:wrap}.channel-option meter{flex:1;min-width:50px;width:70px;height:12px;accent-color:#7db044}.channel-option span{width:100%;text-align:right}.channel-option meter::-webkit-meter-bar{background:#10262c;border:1px solid #4d6b67;border-radius:0}.channel-option meter::-webkit-meter-optimum-value{background:linear-gradient(#96b451,#4b7d29)}