/* Gamepad filter sidebar — cohesive, compact SaaS design system. */
.play-filter-content{--filter-line:rgba(255,255,255,.085);--filter-surface:rgba(255,255,255,.035);--filter-surface-hover:rgba(255,255,255,.065);--filter-accent:#a8c9ff;color:var(--text-primary,#f1f2f5)}
.play-filter-content .play-filter-group{border:1px solid var(--filter-line);border-radius:12px;margin:9px 10px;background:rgba(255,255,255,.018);overflow:hidden;box-shadow:none}
.play-filter-content .play-filter-group>summary{position:relative;display:flex;align-items:center;min-height:48px;padding:12px 36px 12px 15px;font-size:12px;font-weight:650;letter-spacing:.025em;cursor:pointer;list-style:none;transition:background .15s ease}
.play-filter-content .play-filter-group>summary::-webkit-details-marker{display:none}
.play-filter-content .play-filter-group>summary::after{content:'';position:absolute;right:17px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-65%) rotate(45deg);opacity:.55;transition:transform .2s}
.play-filter-content .play-filter-group[open]>summary::after{transform:translateY(-20%) rotate(225deg)}
.play-filter-content .play-filter-group>summary:hover{background:var(--filter-surface-hover)}
.play-filter-content .play-filter-group[open]>summary{border-bottom:1px solid var(--filter-line)}
.play-filter-content .play-filter-group-body{padding:14px}
.play-filter-content .play-rule-summary-line{display:flex;flex-direction:column;gap:5px;min-width:0}
.play-filter-content .play-rule-summary{display:flex;flex-wrap:wrap;gap:4px}
.play-filter-content .play-rule-summary small{font-size:10px;font-weight:500;opacity:.7;background:var(--filter-surface);padding:3px 6px;border-radius:4px}
/* Conditions are a two-column grid of tidy field modules, not a dashboard of oversized tiles. */
.play-filter-content .play-conditions-group .play-filter-group-body.condition-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;padding:13px!important}
.play-filter-content .play-conditions-group .condition-field{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:10px;min-width:0;min-height:89px;padding:12px!important;border:1px solid var(--filter-line);border-radius:9px;background:var(--filter-surface)}
.play-filter-content .play-conditions-group .condition-field-heading{display:block;text-align:left;font-size:11px;font-weight:600;letter-spacing:.01em;line-height:1.3;min-height:0;color:inherit;opacity:.8}
.play-filter-content .play-conditions-group .condition-check{display:none}
.play-filter-content .play-conditions-group .condition-field-controls{display:flex!important;flex-flow:row nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:5px!important;width:100%;min-width:0;padding:0!important}
.play-filter-content .play-conditions-group .condition-pill{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 31px!important;width:31px!important;height:31px!important;min-width:0!important;min-height:0!important;max-width:31px!important;aspect-ratio:1!important;border:1px solid var(--filter-line)!important;border-radius:50%!important;background:rgba(255,255,255,.045)!important;color:inherit!important;font-size:11px!important;font-weight:650!important;padding:0!important;line-height:1!important;transition:background .15s,border-color .15s,box-shadow .15s}
.play-filter-content .play-conditions-group .condition-pill:hover:not(:disabled){background:rgba(255,255,255,.13)!important;transform:none}
.play-filter-content .play-conditions-group .condition-pill.is-selected{background:rgba(168,201,255,.2)!important;border-color:rgba(168,201,255,.55)!important;color:#d9e8ff!important;box-shadow:inset 0 0 0 1px rgba(168,201,255,.08)}
.play-filter-content .play-conditions-group .condition-wide{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;min-height:58px;gap:12px}
.play-filter-content .play-conditions-group .condition-wide .condition-field-heading{flex:0 0 42%}
.play-filter-content .play-conditions-group .condition-wide .condition-field-controls{flex:1;width:auto}
.play-filter-content select,.play-filter-content input:not([type=checkbox]):not([type=radio]){box-sizing:border-box;min-width:0;max-width:100%;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(0,0,0,.17);color:inherit;min-height:34px;padding:7px 9px;font-size:12px;outline:none}
.play-filter-content select:focus-visible,.play-filter-content input:focus-visible,.play-filter-content button:focus-visible{outline:2px solid var(--filter-accent);outline-offset:2px}
/* Event rules share the same visual language and remain usable in narrow sidebars. */
.play-filter-content .play-anchor-rule .event-card-grid,.play-filter-content .play-neighbor-rule .event-card-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;padding:0!important}
.play-filter-content .event-card-grid>*{min-width:0;min-height:93px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:11px;padding:12px!important;border:1px solid var(--filter-line);border-radius:9px;background:var(--filter-surface)}
.play-filter-content .event-card-grid .event-card-title,.play-filter-content .event-card-grid .play-filter-field{font-size:11px;font-weight:600;line-height:1.35;text-align:left}
.play-filter-content .event-card-grid .event-zone-card{align-items:stretch!important}
.play-filter-content .event-zone-pills{display:flex;flex-flow:row nowrap;justify-content:flex-start;gap:6px}
.play-filter-content .event-zone-pill{flex:0 0 31px;width:31px;height:31px;font-size:11px;background:rgba(255,255,255,.045);border:1px solid var(--filter-line)}
.play-filter-content .event-zone-pill.is-selected{background:rgba(168,201,255,.2);border-color:rgba(168,201,255,.55);color:#d9e8ff}
.play-filter-content .event-card-grid .event-distance-control,.play-filter-content .event-card-grid .play-area-filter{grid-column:1/-1;min-height:0;flex-wrap:wrap}
.play-filter-content .event-card-grid .event-flags-control{max-height:155px;overflow:auto}
.play-filter-content .play-rule-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px}
.play-filter-content .play-add-event{display:flex;justify-content:center;align-items:center;min-height:37px;width:calc(100% - 20px);margin:7px 10px 12px;border:1px dashed rgba(168,201,255,.25)!important;border-radius:8px;background:rgba(168,201,255,.035);color:inherit;font-size:12px;font-weight:600;transition:background .15s}
.play-filter-content .play-add-event:hover{background:rgba(168,201,255,.11)}
.play-filter-content footer{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;gap:8px;padding:13px 14px;background:var(--surface,#242329);border-top:1px solid var(--filter-line);backdrop-filter:blur(14px)}
.play-filter-content footer .gamepad-apply-filters{flex:1;min-height:38px;border-radius:8px;background:#b7d0ff;color:#142036;font-size:12px;font-weight:750}
.play-filter-content footer button.secondary{min-height:38px;border-radius:8px}
@media(min-width:660px){.play-filter-content .play-conditions-group .play-filter-group-body.condition-grid,.play-filter-content .play-anchor-rule .event-card-grid,.play-filter-content .play-neighbor-rule .event-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:340px){.play-filter-content .play-conditions-group .condition-field{padding:9px!important}.play-filter-content .play-conditions-group .condition-pill,.play-filter-content .event-zone-pill{flex-basis:27px!important;width:27px!important;height:27px!important}.play-filter-content .play-conditions-group .condition-field-controls{gap:3px!important}}
@media(prefers-reduced-motion:reduce){.play-filter-content *{transition:none!important}}

/* Timeline insertion points and reorder handles */
.play-filter-content .play-event-draggable{display:flex;align-items:stretch;position:relative;gap:4px;margin:0 10px}
.play-filter-content .play-event-draggable>.play-filter-group{flex:1;min-width:0;margin:4px 0}
.play-filter-content .play-event-drag-handle{flex:0 0 22px;align-self:center;background:transparent;border:0;color:rgba(255,255,255,.42);cursor:grab;font-size:20px;padding:7px 0;touch-action:none}
.play-filter-content .play-event-drag-handle:active{cursor:grabbing}
.play-filter-content .play-event-drag-handle:hover{color:#d9e8ff}
.play-filter-content .play-event-insert-slot{display:flex;align-items:center;justify-content:center;min-height:23px;margin:0 12px;position:relative}
.play-filter-content .play-event-insert-slot:before{content:'';position:absolute;left:12%;right:12%;top:50%;border-top:1px dashed rgba(255,255,255,.12)}
.play-filter-content .play-event-insert{position:relative;z-index:1;width:23px;height:23px;border:1px solid rgba(255,255,255,.19);border-radius:50%;background:#292b30;color:#d8e0eb;font-size:17px;line-height:1;cursor:pointer;padding:0}
.play-filter-content .play-event-insert:hover{background:#39495c;border-color:#8bbaff;color:white}
.play-filter-content .play-event-insert-slot:has(.play-event-insert:hover):before{border-color:#8bbaff}

/* Compact play-condition field density: override older filter-apply dimensions. */
.play-filter-content .play-conditions-group .play-filter-group-body.condition-grid{gap:6px!important;padding:8px!important;align-items:stretch}
.play-filter-content .play-conditions-group .condition-field{box-sizing:border-box;min-height:65px!important;gap:6px!important;padding:9px 10px!important;border-radius:7px;justify-content:center}
.play-filter-content .play-conditions-group .condition-field-heading{font-size:10.5px!important;line-height:1.2!important}
.play-filter-content .play-conditions-group .condition-field-controls{gap:4px!important}
.play-filter-content .play-conditions-group .condition-pill{flex:0 0 27px!important;width:27px!important;height:27px!important;max-width:27px!important;font-size:10px!important}
.play-filter-content .play-conditions-group .condition-wide{min-height:45px!important;gap:8px!important;justify-content:space-between}
.play-filter-content .play-conditions-group .condition-wide .condition-field-heading{flex:0 0 40%}
.play-filter-content .play-conditions-group .condition-wide select{min-height:30px;padding:5px 7px}
@media(max-width:340px){.play-filter-content .play-conditions-group .condition-field{padding:7px!important}.play-filter-content .play-conditions-group .condition-pill{flex-basis:24px!important;width:24px!important;height:24px!important;max-width:24px!important}}
/* Flags live in a compact, anchored overlay rather than expanding their grid cell. */
.play-filter-content .event-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row;align-items:stretch}
.play-filter-content .event-card-grid>*{min-height:72px;gap:7px;padding:10px!important;justify-content:center}
.play-filter-content .event-card-grid .event-flags-card{position:relative;min-height:72px;overflow:visible;z-index:4}
.play-filter-content .event-flags-trigger{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-width:0;min-height:34px;padding:7px 10px;border:1px solid var(--filter-line);border-radius:7px;background:rgba(255,255,255,.045);color:inherit;font-size:12px;text-align:left;cursor:pointer}
.play-filter-content .event-flags-trigger:hover{background:rgba(255,255,255,.09)}
.play-filter-content .event-flags-popover.explorer-lines-panel.is-open{position:absolute;top:calc(100% + 7px);left:auto;right:0;z-index:1000;width:min(320px,calc(100vw - 42px));max-height:min(380px,65vh);overflow:auto;display:block;padding:12px;transform:none}
.play-filter-content .event-flags-popover-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px}
.play-filter-content .event-flags-popover-heading button{width:24px;height:24px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.play-filter-content .event-flags-popover .event-flags-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:none;overflow:visible}
.play-filter-content .event-flags-popover .play-filter-flag{padding:7px;gap:5px;font-size:10px;min-height:35px}
.play-filter-content .event-flags-popover .play-filter-flag small{font-size:9px}
.play-filter-content .event-card-grid .event-xg-control{margin:0;gap:6px;align-items:end}
.play-filter-content .event-card-grid .event-distance-control{min-height:0}
@media(min-width:660px){.play-filter-content .event-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* Flags panel uses the browser top layer to escape clipped accordion/scroll containers. */
.play-filter-content .event-flags-popover.explorer-lines-panel.is-open[popover]{position:fixed!important;inset:auto;box-sizing:border-box;margin:0;z-index:2147483647;overscroll-behavior:contain;overflow-y:auto;overflow-x:hidden;box-shadow:0 18px 45px rgba(0,0,0,.48);}
.play-filter-content .event-flags-popover[popover]:popover-open{display:block;}
/* Fallback for browsers without the popover top layer. */
@supports not selector(:popover-open){.play-filter-content .play-filter-group:has(.event-flags-popover){overflow:visible!important}}

/* Event type OR multi-select */
.play-filters .event-type-multi{position:relative;min-width:0;align-self:stretch;z-index:2}
.play-filters .event-type-multi[open]{z-index:25}
.play-filters .event-type-multi-trigger{display:flex;flex-direction:column;gap:5px;justify-content:center;min-height:54px;padding:9px 12px;cursor:pointer;list-style:none;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:rgba(255,255,255,.035);font-size:11px;color:rgba(255,255,255,.65)}
.play-filters .event-type-multi-trigger::-webkit-details-marker{display:none}
.play-filters .event-type-multi-value{color:#f3f7ff;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.play-filters .event-type-multi-options{position:absolute;top:calc(100% + 5px);left:0;width:max(100%,240px);max-width:min(340px,90vw);max-height:300px;overflow:auto;overscroll-behavior:contain;padding:9px;background:#182330;border:1px solid rgba(255,255,255,.17);border-radius:11px;box-shadow:0 15px 35px rgba(0,0,0,.45)}
.play-filters .event-type-multi-caption{font-size:11px;color:#aab9cc;padding:5px 7px}
.play-filters .event-type-multi-clear{display:block;margin:3px 5px 7px auto;font-size:11px;cursor:pointer}
.play-filters .event-type-multi-option{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:#e7edf6}
.play-filters .event-type-multi-option:hover{background:rgba(255,255,255,.08)}
.play-filters .event-type-multi-option input{flex:none;accent-color:#6caeff}

/* Two-column filter cards and consistent floating selector panels. */
@media(min-width:660px){.play-filter-content .play-conditions-group .play-filter-group-body.condition-grid,.play-filter-content .play-anchor-rule .event-card-grid,.play-filter-content .play-neighbor-rule .event-card-grid,.play-filter-content .event-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.play-filter-content .event-type-multi-options.explorer-lines-panel.is-open{position:absolute;z-index:1100;display:block;top:calc(100% + 7px);left:0;right:auto;width:min(320px,calc(100vw - 42px));max-height:min(380px,65vh);overflow:auto;background:#182330;border:1px solid rgba(255,255,255,.17);border-radius:11px;box-shadow:0 18px 45px rgba(0,0,0,.48)}
.play-filter-content .filter-presets-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:11px 13px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.045);color:inherit;font-weight:650;cursor:pointer}
.play-filter-content .filter-presets .plays-scope{margin-top:12px}
.gamepad-team-league-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;padding-bottom:15px}
.gamepad-team-league-row .gamepad-league-filter,.gamepad-team-league-row .gamepad-team-filter{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0;font-size:12px;font-weight:600;min-width:0}
.gamepad-team-league-row select{width:100%;min-width:0;padding:9px 8px;border:1px solid rgb(var(--text-rgb) / .2);border-radius:8px;background:var(--surface);color:var(--text)}

/* Collapsed condition summaries mirror the event rule summaries. */
.play-filter-content .play-conditions-group[open] > summary .play-rule-summary{display:none}
.play-filter-content .play-conditions-group > summary .play-rule-summary-line{min-width:0}