.select-field{text-align:left;align-content:start;gap:6px;min-width:0;display:grid;position:relative}.select-field:has(>.sr-only){gap:0}.select-field>label{font:500 14px / 1.3 var(--font-ui);color:var(--muted)}.select-compact>label{font-size:13px}.select-control{border:1px solid var(--play-edge);border-radius:var(--radius-md);background:var(--play-panel);min-height:46px;color:var(--ink);box-shadow:var(--shadow-rest);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);align-items:center;display:flex;position:relative}.select-compact .select-control{min-height:44px}@media (hover:hover){.select-control:hover:not(:has(input:disabled)){border-color:var(--play-edge-strong);background:var(--play-panel-hover)}}.select-control:focus-within,.select-control.is-open{border-color:var(--play-accent);background:var(--play-panel-hover)}.select-control:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}.select-value-display{min-width:0;font:500 var(--text-ui) / 1.35 var(--font-ui);overflow-wrap:anywhere;pointer-events:none;flex:1;padding:10px 12px}.select-compact .select-value-display{font-size:14px}.select-control input{width:calc(100% - 2.35rem);min-width:0;height:100%;color:var(--ink);font:400 16px / 1.35 var(--font-ui);background:0 0;border:0;outline:none;padding:10px 12px;position:absolute;inset:0 2.35rem 0 0}.select-field .select-control input:focus-visible:not(:disabled){outline:none}.select-control:not(.is-open) input{color:#0000;caret-color:#0000;cursor:pointer}.select-control:not(.is-open) input::selection{background:0 0}.select-control input::placeholder{color:var(--muted)}.select-control button{border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-self:stretch;place-items:center;margin-inline-start:auto;padding:0 10px;display:grid;position:relative}.select-control button svg{transition:transform var(--dur-base) var(--ease-out), color var(--dur-fast)}.select-control.is-open button svg{color:var(--play-accent);transform:rotate(180deg)}.select-control:has(input:disabled){background:var(--play-well);box-shadow:none;color:var(--muted);cursor:not-allowed;border-style:dashed}.select-control input:disabled,.select-control button:disabled{cursor:not-allowed}.appearance-select.appearance-icon>.select-field{width:44px}.select-icon-trigger{border:1px solid var(--play-edge);background:var(--play-panel);width:44px;height:44px;color:var(--ink);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);border-radius:50%;place-items:center;padding:0;display:grid}.select-icon-trigger:hover{border-color:var(--play-edge-strong);background:var(--play-panel-hover)}.select-icon-trigger.is-open{border-color:var(--play-accent);color:var(--play-accent);background:var(--play-accent-tint)}.select-icon-trigger:active{transform:scale(.94)}.select-icon-trigger:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}.select-menu{z-index:70;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--play-edge) transparent;border:1px solid var(--play-edge);border-radius:var(--radius-lg);background:var(--play-panel);max-width:min(32rem,100vw - 2rem);max-height:min(20rem,45dvh);color:var(--ink);box-shadow:var(--shadow-float), var(--shadow-rest);transform-origin:top;animation:select-appear var(--dur-fast) var(--ease-out);margin:0;padding:6px;position:fixed;overflow:auto}.select-icon-search{border:1px solid var(--play-edge);border-radius:var(--radius-md);background:var(--play-canvas);width:calc(100% - 4px);color:var(--ink);font:400 16px / 1.35 var(--font-ui);margin:2px 2px 6px;padding:10px 12px}.select-icon-search:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.select-option{border-radius:var(--radius-md);min-height:44px;color:var(--ink);font:400 var(--text-ui) / 1.35 var(--font-ui);overflow-wrap:anywhere;cursor:pointer;transition:background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out);align-items:center;gap:12px;padding:9px 12px;display:flex;position:relative}.select-option>span{white-space:normal;flex:1;min-width:0}.select-option strong{font-weight:500;display:block}.select-option small{color:var(--muted);font-size:var(--text-meta);margin-top:2px;display:block}.select-option>svg{flex:none}.select-option[data-highlighted=true]{background:color-mix(in srgb, var(--ink) 7%, transparent)}.select-option[aria-selected=true]{color:var(--play-accent-strong);background:var(--play-accent-tint)}.select-option[aria-selected=true] strong{font-weight:600}.select-option[aria-selected=true]>svg{color:var(--play-accent);animation:select-check var(--dur-base) var(--ease-spring)}.select-option[aria-selected=true][data-highlighted=true]{background:color-mix(in srgb, var(--play-accent) 16%, var(--play-accent-tint))}.select-option[data-highlighted=true]:before{content:"";border-radius:var(--radius-pill);background:var(--play-accent);width:3px;position:absolute;top:12px;bottom:12px;left:2px}.select-option[aria-disabled=true]{color:var(--muted);cursor:not-allowed;opacity:.6}.select-option[aria-disabled=true] :is(img,.game-preview-image){filter:grayscale(.85)}.select-option img{aspect-ratio:1.6;object-fit:cover;border-radius:var(--radius-sm);width:3.5rem}.select-option>.game-preview-image{border-radius:var(--radius-sm);flex-shrink:0;width:3.5rem;height:2.2rem}.select-group{border-bottom:1px solid var(--play-hairline);color:var(--muted);font:600 var(--text-eyebrow) / 1.4 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;margin:10px 6px 4px;padding:0 6px 6px}.select-menu>div:first-child .select-group,.select-menu [role=listbox]>div:first-child .select-group{margin-top:4px}.grouped-option{margin-left:8px}.select-empty{color:var(--muted);font:400 var(--text-meta) / 1.4 var(--font-ui);margin:0;padding:12px}@keyframes select-appear{0%{opacity:0;translate:0 -4px;scale:.98}}@keyframes select-check{0%{opacity:0;transform:scale(.4)}}@media (prefers-reduced-motion:reduce){.select-menu,.select-option>svg{animation:none}.select-control button svg,.select-icon-trigger{transition-property:color,background-color,border-color}.select-icon-trigger:active{transform:none}}.select-menu.reduced-motion,.select-menu.reduced-motion .select-option>svg,.reduced-motion .select-menu{animation:none}.reduced-motion :is(.select-control,.select-control button svg,.select-icon-trigger){transition-property:color,background-color,border-color,box-shadow}.reduced-motion .select-icon-trigger:active{transform:none}
