#friend-ui { position:absolute; inset:0; pointer-events:none; z-index:4; font: 16px/1.4 system-ui,sans-serif; color:#fff1d4; }
#friend-ui [hidden] { display:none!important }
#friend-ui button,#friend-open { background:#ffc167; border:0; border-radius:6px; color:#241c15; font:700 15px system-ui; padding:10px 14px; cursor:pointer; }
#friend-open { position:absolute;top:12px;right:14px;pointer-events:auto;text-decoration:none;background:#172c2a;color:#ffe3af;box-shadow:0 1px 5px #0008 }
#friend-open span { color:#ffc167; }
#room-panel { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(92%,420px);max-height:95%;overflow:auto;padding:26px;background:#162725fa;border:1px solid #a97e45;border-radius:10px;box-shadow:0 12px 56px #120e0b88;pointer-events:auto;text-align:left; }
#room-panel small { color:#f6ba63;font-weight:800;letter-spacing:.12em;font-size:11px; }
#room-panel h1 { font: bold 32px Georgia,serif;margin:8px 0; }
#room-panel p { margin:10px 0 15px; }
#room-panel label { display:block;font-size:13px;font-weight:700;margin:10px 0; }
#room-panel input,#room-panel select { display:block;box-sizing:border-box;width:100%;margin-top:4px;padding:9px 10px;font:16px system-ui;color:#fff2d7;background:#273b38;border:1px solid #8a9587;border-radius:4px; }
#room-panel .row { display:flex;gap:8px;flex-wrap:wrap; }
#friend-ui .quiet,#combat-leave { background:none;color:#efe3c8;text-decoration:underline;padding-left:0;font-size:13px; }
#room-panel button:disabled,#room-rematch:disabled { opacity:.65;cursor:default; }
#online-hud { position:absolute;inset:0;pointer-events:none;font-size:clamp(11px,1.6vw,16px); }
#online-hud header,#online-hud footer { position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 14px;background:#17211fdc; }
#online-hud header {top:0;} #online-hud footer {bottom:0;font-size:13px;}
#friend-ui #combat-leave { pointer-events:auto;background:transparent;color:#ffe4b1;padding:1px 4px; }
#online-reticle { position:absolute;width:8px;height:8px;border:2px solid #fff4bc;border-radius:50%;box-shadow:0 0 0 1px #201810;transform:translate(-50%,-50%); }
#hud-banner,#round-actions { position:absolute;left:50%;transform:translateX(-50%);text-align:center; }
#hud-banner { top:16%;font:800 clamp(20px,3vw,38px) Georgia,serif;color:#ffe1a5;text-shadow:0 2px 6px #23180d; }
#round-actions {top:40%;pointer-events:auto;}
#unity-fullscreen-container {position:relative;}