/* Game options (engine/config.js): rows of buttons, never a <select>. Self-contained: native game pages load it
   without shell.css, so every token has a fallback. Motion rules: docs/cg/MOTION-RULES.md */
.cg-config{position:relative;display:inline-flex;flex:0 0 auto;
  --cgo-hair:var(--hair,color-mix(in srgb,var(--g-ink,#222) 16%,transparent));--cgo-soft:var(--surface-2,color-mix(in srgb,var(--g-ink,#222) 7%,transparent));
  --cgo-ink:var(--g-ink,#222);--cgo-ink-2:var(--g-ink-2,#666);--cgo-panel:var(--g-panel,#fff);--cgo-r:var(--r-btn,5px);
  --cgo-out:var(--e-out,cubic-bezier(.2,.7,.2,1))}
.cg-config-open{min-width:40px;min-height:40px}

/* alone: a popover under the icon, top right */
.cg-config-panel{position:fixed;z-index:80;right:12px;top:60px;width:min(330px,calc(100vw - 16px));max-height:calc(100dvh - 76px);overflow:auto;
  padding:8px 0 6px;box-sizing:border-box;background:var(--cgo-panel);color:var(--cgo-ink);border:1px solid var(--cgo-hair);border-radius:var(--r-card,8px);
  box-shadow:var(--lift,0 1px 2px rgba(0,0,0,.08),0 14px 34px -12px rgba(0,0,0,.32));font:var(--chrome,14px/1.4 system-ui,sans-serif);
  transform-origin:top right;animation:cgo-in var(--t-enter,220ms) var(--cgo-out) backwards}
.cg-config-panel[hidden]{display:none}
.cg-config-panel.leaving{animation:cgo-out var(--t-exit,140ms) var(--cgo-out) forwards;pointer-events:none}
@keyframes cgo-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes cgo-out{to{opacity:0;transform:translateY(-2px) scale(.99)}}
.cg-config-panel :focus-visible{outline:2px solid var(--g-accent,#b54);outline-offset:2px}

/* nested: more rows of the gear popover, under a hairline */
.set-pop .cg-config-inline{display:block;margin-top:4px;padding:6px 0 6px;border-top:1px solid var(--cgo-hair)}

.cg-opt-head{display:flex;align-items:center;gap:6px;padding:2px 8px 4px 12px;min-height:36px}
.cg-opt-title{flex:1;min-width:0;margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cgo-ink-2)}
.cg-config-panel .cg-opt-title{font:var(--g-font-display,600 16px/1.2 system-ui,sans-serif);font-size:16px;letter-spacing:0;text-transform:none;color:var(--cgo-ink)}
.cg-opt-new,.cg-opt-close{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;border:1px solid var(--cgo-hair);border-radius:var(--cgo-r);
  background:transparent;color:var(--cgo-ink);font:inherit;font-size:13px;cursor:pointer;
  transition:transform var(--t-press,100ms) var(--cgo-out),background-color var(--t-hover,80ms) linear}
.cg-opt-new{padding:3px 10px 3px 8px}
.cg-opt-new svg{width:16px;height:16px;fill:currentColor;transition:transform var(--t-enter,220ms) var(--cgo-out)}
.cg-opt-close{width:30px;padding:0;border-color:transparent;color:var(--cgo-ink-2)}
.cg-opt-close svg{width:16px;height:16px}
.cg-opt-new:active,.cg-opt-close:active{transform:scale(.96)}

.cg-opt-list{display:grid}
.cg-opt-row{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;column-gap:8px;row-gap:5px;min-height:38px;padding:4px 6px 4px 12px}
.cg-opt-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cgo-ink-2)}
.cg-opt-row:not(.inline){padding-bottom:8px}
.cg-opt-row:not(.inline) .cg-opt-name{grid-column:1/3;grid-row:1}
.cg-opt-row:not(.inline) .cg-opt-seg{grid-column:1/-1;grid-row:2;padding-right:6px}
.cg-opt-row:not(.inline) .cg-pin{grid-column:3;grid-row:1}

/* inline: one segmented row, like the gear's own Sound / Media rows */
.cg-opt-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--cgo-hair);border-radius:var(--cgo-r)}
.cg-opt-seg button{min-height:26px;padding:2px 9px;border:0;border-radius:calc(var(--cgo-r) - 2px);background:transparent;color:var(--cgo-ink-2);
  font:inherit;font-size:13px;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-press,100ms) var(--cgo-out),background-color var(--t-hover,80ms) linear,color var(--t-hover,80ms) linear}
.cg-opt-seg button[aria-checked=true]{background:var(--cgo-ink);color:var(--cgo-panel)}
/* chips: a longer list wraps under its name */
.cg-opt-seg.chips{display:flex;flex-wrap:wrap;gap:4px;padding:0;border:0}
.cg-opt-seg.chips button{min-height:28px;padding:3px 10px;border:1px solid var(--cgo-hair);border-radius:var(--cgo-r);color:var(--cgo-ink);
  animation:cgo-chip var(--t-enter,220ms) var(--cgo-out) backwards}
.cg-opt-seg.chips button[aria-checked=true]{border-color:var(--cgo-ink);background:var(--cgo-ink);color:var(--cgo-panel)}
@keyframes cgo-chip{from{opacity:0;transform:translateY(-2px)}}
.cg-opt-seg button:active{transform:scale(.96)}
.cg-opt-seg button.picked{transform:scale(.96)}

.cg-opt-step{display:inline-grid;grid-template-columns:30px minmax(40px,auto) 30px;align-items:center;border:1px solid var(--cgo-hair);border-radius:var(--cgo-r)}
.cg-opt-step button{height:30px;border:0;border-radius:var(--cgo-r);background:transparent;color:var(--cgo-ink);font:17px/1 system-ui,sans-serif;cursor:pointer;
  transition:transform var(--t-press,100ms) var(--cgo-out),background-color var(--t-hover,80ms) linear}
.cg-opt-step button:active{transform:scale(.92)}
.cg-opt-step button:disabled{opacity:.28;cursor:default;transform:none}
.cg-opt-step output{padding:0 4px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* a pin is a quiet icon until it is on; what it does is in its tooltip */
.cg-pin{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--cgo-r,5px);background:transparent;color:var(--g-ink-2,#666);
  opacity:.5;cursor:pointer;transition:transform var(--t-press,100ms) var(--cgo-out),opacity var(--t-hover,80ms) linear,background-color var(--t-hover,80ms) linear}
.cg-pin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.cg-pin[aria-pressed=true]{opacity:1;color:var(--g-accent,#b54)}
.cg-pin[aria-pressed=true] svg{fill:currentColor}
.cg-pin:active{transform:scale(.92)}

@media (hover:hover) and (pointer:fine){
  .cg-opt-seg button:not([aria-checked=true]):hover{background:var(--cgo-soft);color:var(--cgo-ink)}
  .cg-opt-step button:not(:disabled):hover,.cg-opt-new:hover,.cg-opt-close:hover{background:var(--cgo-soft)}
  .cg-opt-new:hover svg{transform:rotate(-14deg)}
  .cg-opt-row:hover .cg-pin{opacity:.85}
  .cg-pin:hover{background:var(--cgo-soft);opacity:1}
}
@media (pointer:coarse){
  .cg-opt-seg button,.cg-opt-seg.chips button,.cg-opt-new{min-height:44px}
  .cg-opt-close,.cg-pin{width:44px;height:44px}
  .cg-opt-step{grid-template-columns:44px minmax(40px,auto) 44px}
  .cg-opt-step button{height:44px}
  .cg-opt-row{grid-template-columns:minmax(0,1fr) auto 44px;padding-right:2px}
}
@media (prefers-reduced-motion:reduce){
  .cg-config-panel,.cg-config-panel.leaving,.cg-opt-seg.chips button{animation:none}
}
.set-pop .set-row:has([data-set=challenge]){flex-wrap:wrap;gap:6px}.set-pop [data-set=challenge]{margin-left:auto;max-width:100%;flex-wrap:wrap}