.app-menu{--menu-width:320px;--menu-edge:12px;--menu-ink:var(--ink,var(--paper,#f3f4e9));--menu-panel:var(--surface,var(--panel,#192328));--menu-raised:var(--surface-raised,var(--panel-raised,#243238));--menu-muted:var(--muted,#a2b2b9);--menu-line:var(--line,#34454d);--menu-accent:var(--lime,var(--accent,#c9f266));--menu-focus:var(--focus,var(--accent,#c9f266));position:relative;z-index:80;flex:none;min-width:0;color:var(--menu-ink);font:inherit;line-height:1.4}
.app-menu,.app-menu *{box-sizing:border-box}
.app-menu-trigger{display:grid;place-items:center;width:46px;height:46px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--menu-line);border-radius:12px;background:var(--menu-panel);color:var(--menu-ink);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-menu-trigger::-webkit-details-marker{display:none}
.app-menu-trigger::marker{content:""}
.app-menu-trigger>svg{display:block;width:23px;height:23px;flex:none}
.app-menu-trigger:hover,.app-menu[open]>.app-menu-trigger{background:var(--menu-raised);border-color:var(--menu-focus)}
.app-menu-panel{position:absolute;top:calc(100% + 10px);right:0;width:var(--menu-width);max-width:calc(100vw - var(--menu-edge) - var(--menu-edge));max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;padding:12px;border:1px solid var(--menu-line);border-radius:18px;background:var(--menu-panel);color:var(--menu-ink);box-shadow:0 18px 55px rgba(0,0,0,.28)}
.app-menu:not([open])>.app-menu-panel{display:none}
.app-menu[data-menu-ready="true"]>.app-menu-panel{position:fixed;top:var(--app-menu-top,76px);left:var(--app-menu-left,12px);right:auto;max-height:var(--app-menu-height,calc(100vh - 100px))}
.app-menu-links{display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
.app-menu-links>.app-menu-link{display:flex;align-items:center;gap:12px;min-height:48px;min-width:0;margin:0;padding:12px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--menu-ink);font:inherit;font-size:16px;font-weight:600;line-height:1.4;text-decoration:none;white-space:normal;text-align:left;letter-spacing:normal}
.app-menu-link>svg{display:block;width:21px;height:21px;flex:none}
.app-menu-link>span{min-width:0;overflow-wrap:break-word}
.app-menu-links>.app-menu-link:hover{background:var(--menu-raised);border-color:var(--menu-line);color:var(--menu-ink)}
.app-menu-links>.app-menu-link.is-active{background:var(--menu-accent);border-color:var(--menu-accent);color:#17270c}
.app-menu-footer{display:flex;align-items:center;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--menu-line)}
.app-menu-theme{display:grid;place-items:center;width:46px;height:46px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--menu-line);border-radius:11px;background:var(--menu-raised);color:var(--menu-ink);cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.app-menu-theme>svg[data-theme-icon]{display:block;width:23px;height:23px;flex:none}
.app-menu-theme:hover{border-color:var(--menu-focus)}
.app-menu-trigger:focus-visible,.app-menu-links>.app-menu-link:focus-visible,.app-menu-theme:focus-visible{outline:2px solid var(--menu-focus);outline-offset:3px}
html[data-theme=light] .app-menu-panel{box-shadow:0 18px 55px rgba(23,37,45,.16)}
@media(max-width:600px){.app-menu-panel{position:fixed;top:76px;left:var(--menu-edge);right:var(--menu-edge);width:auto;max-width:calc(100vw - var(--menu-edge) - var(--menu-edge));max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px)}.app-menu[data-menu-ready="true"]>.app-menu-panel{width:calc(100vw - var(--menu-edge) - var(--menu-edge));max-width:var(--menu-width);right:auto}.app-menu-links>.app-menu-link{min-height:48px;padding:12px;font-size:16px}}

/* Controles del partido y estado en una misma fila junto al tema. */
.app-menu-with-match-controls{--menu-width:360px;--menu-edge:8px}
.app-menu-with-match-controls>.app-menu-panel{padding:10px}
.app-menu-match-controls{justify-content:flex-start;flex-wrap:nowrap;gap:10px;min-width:0}
.app-menu-match-controls>.app-menu-theme,.app-menu-match-controls>.icon-button{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--menu-line);background:var(--menu-raised);color:var(--menu-ink)}
.app-menu-match-controls>.icon-button:hover{border-color:var(--menu-focus);background:var(--hover,var(--menu-raised))}
.app-menu-match-controls>.icon-button[aria-pressed=true]{border-color:var(--notice);background:var(--notice-bg);color:var(--notice)}
.app-menu-match-controls>.icon-button:focus-visible{outline:2px solid var(--menu-focus);outline-offset:2px}
.app-menu-match-controls>.connection{flex:1 1 auto;flex-wrap:nowrap;gap:8px;min-width:0;margin:0;font-size:14px;line-height:1.4}
.app-menu-match-controls #connectionLabel{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-menu-match-controls .presence-count{flex:none;gap:3px;padding:0;min-height:28px;font-size:14px;border:0;border-radius:0;background:transparent}
.app-menu-match-controls .presence-count svg{width:23px;height:23px;min-width:23px;min-height:23px;flex:0 0 23px}
.app-menu-match-controls>.connection.offline .presence-count{display:none}

@media(max-width:340px){.app-menu-match-controls,.app-menu-match-controls>.connection{gap:6px}}