#openFriends{position:absolute;right:calc(var(--safe-right,0px) + 22px);top:50%;display:flex;align-items:center;gap:10px;padding:14px;border:1px solid #c6f66b55;border-radius:16px;background:#171d15;color:#c6f66b;font:600 14px Arial;cursor:pointer;min-height:48px;touch-action:manipulation}#openFriends svg{width:24px;height:24px}
#friendsPanel{position:fixed;inset:0;z-index:400;background:#000b;display:grid;place-items:center;padding:16px;color:#ecf1e8;font:14px/1.45 Arial;backdrop-filter:blur(12px)}#friendsPanel[hidden],#friendsPanel [hidden],#friendHud[hidden],#friendFinish[hidden]{display:none!important}
.friend-card{width:min(700px,100%);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #ffffff24;border-radius:24px;background:#111610;box-shadow:0 25px 100px #0008;padding:24px;box-sizing:border-box}.friend-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}.friend-heading h2{font-size:26px;margin:0;flex:1;letter-spacing:-.7px}.friend-heading small{display:block;font-size:10px;color:#c6f66b;letter-spacing:2px;margin-bottom:4px}.friend-card button,.friend-card input,.friend-card select,#friendHud button,#friendFinish button{font:inherit;min-height:44px;border-radius:10px;border:1px solid #ffffff24;background:#252c22;color:#eef5e8;padding:10px 14px;touch-action:manipulation;box-sizing:border-box}.friend-card button,#friendHud button,#friendFinish button{cursor:pointer}.friend-card button:hover{border-color:#c6f66b88}.friend-card button:disabled{opacity:.4;cursor:default}.friend-card :focus-visible,#friendHud :focus-visible,#friendFinish :focus-visible{outline:2px solid #c6f66b;outline-offset:3px}.friend-card button.friend-primary,#friendFinish button{background:#c6f66b;color:#16200d;border-color:#c6f66b;font-weight:700}.friend-card .friend-icon{width:44px;padding:8px;font-size:23px;flex-shrink:0}.friend-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6}.friend-toolbar,.friend-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.friend-toolbar{justify-content:space-between;margin-bottom:18px}.friend-toolbar h3{margin:0;font-size:18px}.friend-room{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #ffffff12}.friend-room .friend-code{flex:1;text-align:left;font-family:monospace;font-size:18px;letter-spacing:1px;background:transparent;border:0;padding:8px}.friend-room small{display:block;color:#a3ad9c;font:12px Arial;letter-spacing:0;margin-top:6px}#friendJoinForm{display:flex;gap:8px;margin-top:20px}#friendCodeInput{min-width:0;flex:1;text-transform:uppercase;font-family:monospace;letter-spacing:2px}#friendEmpty,.friend-muted{color:#a3ad9c}#friendEmpty{padding:24px 0;text-align:center}.friend-card fieldset{border:0;padding:0;margin:0 0 22px}.friend-card legend{font-weight:700;margin-bottom:12px}.friend-maps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.friend-maps label{display:flex;flex-direction:column;gap:6px;align-items:center;border:1px solid #ffffff1f;padding:12px;border-radius:16px;cursor:pointer;background:#1c2318}.friend-maps label:has(input:checked){border-color:#c6f66b;background:#29331f}.friend-maps img{width:76px;height:76px;border-radius:50%}.friend-maps input,.friend-all input{width:18px;height:18px;min-height:18px;accent-color:#c6f66b}.friend-all{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:40px}.friend-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.friend-options label{display:grid;gap:8px}.friend-options select{width:100%}#friendCreateMatch{width:100%}#friendStatus{color:#d5eaaa;min-height:20px;margin:14px 0 0}#friendMatchId{font:26px monospace;letter-spacing:3px}#friendRoomMeta{color:#a3ad9c;margin:8px 0 16px}.friend-table-wrap{overflow:auto;margin:20px 0;max-height:35vh}.friend-card table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;white-space:nowrap}.friend-card th{color:#a3ad9c;font-weight:400;position:sticky;top:0;background:#111610}.friend-card td,.friend-card th{padding:9px 10px;border-bottom:1px solid #ffffff12}.friend-card td:nth-child(2){max-width:220px;overflow:hidden;text-overflow:ellipsis}.friend-you{color:#c6f66b}#friendPhase{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#c6f66b}#friendWinner{font-size:26px;margin:8px 0;overflow-wrap:anywhere}#friendRule{color:#c1c9ba;font-size:13px}#friendDeleteConfirm{position:sticky;bottom:0;border:1px solid #cf8471;background:#30221d;padding:14px;border-radius:12px;margin-top:14px}#friendCopyValue{width:100%}
#friendHud{position:absolute;bottom:calc(var(--safe-bottom,0px) + 16px);left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:12px;background:#111b10eb;border:1px solid #ffffff25;color:#eaf2e5;border-radius:14px;padding:9px 12px;font:12px Arial;white-space:nowrap}#friendHud small{display:block;color:#a9b69f;font-size:9px;letter-spacing:1px;margin-bottom:4px}#friendTime{font:700 20px monospace;color:#c6f66b}#friendHud button{font-size:12px;min-height:40px;padding:8px}#friendCountdown{position:absolute;z-index:15;inset:0;display:grid;place-items:center;font:800 100px Arial;color:white;text-shadow:0 3px 40px #000;pointer-events:none}#friendFinish{position:absolute;z-index:25;top:50%;left:50%;transform:translate(-50%,-50%);background:#111b10f2;border:1px solid #c6f66b77;border-radius:24px;padding:28px;text-align:center;color:#eaf2e5;width:min(410px,80%);box-sizing:border-box;font:14px Arial}#friendFinishTitle{font-size:28px;overflow-wrap:anywhere;margin:6px 0}#friendFinishText{color:#b7c2ae}
@media(max-height:600px){.friend-card{padding:16px 20px;border-radius:18px;max-height:calc(100dvh - 16px)}#friendsPanel{padding:8px}.friend-heading{margin-bottom:12px}.friend-heading h2{font-size:22px}.friend-maps img{width:42px;height:42px}.friend-maps label{flex-direction:row;padding:8px;justify-content:center}.friend-card fieldset{margin-bottom:10px}.friend-options{margin-bottom:12px}.friend-all{margin-top:4px}.friend-table-wrap{max-height:25vh;margin:12px 0}#friendHud{bottom:8px;padding:6px 10px}#openFriends{right:16px;top:48%;max-width:144px;font-size:12px;padding:10px}}
@media(max-width:520px){.friend-maps{gap:5px}.friend-card{padding:16px}.friend-maps label{padding:8px}.friend-maps img{width:52px;height:52px}.friend-heading h2{font-size:21px}.friend-room{gap:4px}.friend-room .friend-code{font-size:16px}}

@media(max-height:600px){#friendDetail .friend-toolbar{margin-bottom:6px}#friendRoomMeta{margin:6px 0 8px}#friendRule{margin:8px 0;font-size:12px}#friendLobbyNote{margin:8px 0}.friend-heading small{font-size:9px;margin-bottom:2px}.friend-heading{margin-bottom:10px}#friendStatus:empty{min-height:0;margin:0}.friend-table-wrap{margin:8px 0}.friend-card td,.friend-card th{padding:7px 10px}}

.friend-room .friend-code{min-width:0;padding:8px;font-family:monospace;font-size:18px;letter-spacing:1px;flex:1}.friend-room .friend-icon:disabled{opacity:.3;cursor:default}.friend-room .friend-icon:first-of-type{color:#c6f66b}.friend-room .friend-icon:nth-of-type(2):enabled{color:#c6f66b}.friend-room small{white-space:nowrap}.friend-table-wrap{max-height:48vh}
@media(max-width:760px){.friend-room{gap:5px}.friend-room .friend-code{font-size:15px}.friend-room .friend-icon{width:44px;padding:9px}}

/* Room history, invitations and immediate final standings. */
#friendTimer{position:absolute;top:calc(var(--safe-top,0px) + 54px);left:50%;transform:translateX(-50%);z-index:12;pointer-events:none;background:#111b10eb;border:1px solid #ffffff25;border-radius:12px;padding:7px 14px;color:#c6f66b;font:700 20px monospace}#friendTimer.without-metrics{top:calc(var(--safe-top,0px) + 12px)}#friendTimer[hidden],#friendInviteActions[hidden],#friendInviteActions [hidden]{display:none!important}
#friendFinish{width:min(560px,calc(100% - 32px));max-height:calc(100% - 28px);overflow:auto;padding:22px}#friendFinish .friend-table-wrap{max-height:40vh;margin:16px 0}#friendFinish table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;white-space:nowrap}#friendFinish td,#friendFinish th{padding:9px 10px;border-bottom:1px solid #ffffff18}#friendFinish th{position:sticky;top:0;background:#111b10;color:#b7c2ae;font-weight:400}#friendFinish td:nth-child(2){max-width:200px;overflow:hidden;text-overflow:ellipsis}#friendFinish button{min-width:150px}#friendFinishText{margin:8px 0}
#friendInviteActions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}#friendInviteActions button{min-height:44px;flex:1;padding:10px;border:1px solid #ffffff25;border-radius:10px;background:#252c22;color:#eef5e8;font:13px Arial;cursor:pointer;touch-action:manipulation}#friendArenaCopyValue{width:100%;box-sizing:border-box;min-height:40px;border-radius:8px;border:1px solid #ffffff25;background:#171d15;color:#ecf1e8;padding:8px;user-select:text;-webkit-user-select:text}#friendArenaCopyStatus{width:100%;font-size:12px;color:#c6f66b;margin:0}
@media(max-height:600px){#friendFinish{padding:14px 20px}#friendFinishTitle{font-size:22px}#friendFinish .friend-table-wrap{max-height:32vh;margin:10px 0}#friendFinish td,#friendFinish th{padding:7px 9px}}
@media(max-width:520px){.friend-room{flex-wrap:wrap;padding:12px 0}.friend-room .friend-code{flex-basis:100%;padding:0 0 6px}.friend-room .friend-icon{flex:0 0 44px}.friend-room .friend-icon:last-child{margin-left:auto}}

.friend-options{grid-template-columns:repeat(3,minmax(0,1fr))}
#arena.spectator-camera{cursor:grab}#arena.spectator-dragging{cursor:grabbing}