/* Game picker + filter chips, shared by /reviews/ and /status/ (includes/game_picker.html,
   js/picker.js). One game at a time: the picker switches with ?game=, the chips narrow the
   selected game. Hover never changes a size: chips swap colour and brightness inside the box
   they already have. */

/* ───────── game picker ───────── */
.gpick{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--night-2)}
.gpick-in{padding-top:14px;padding-bottom:14px}
.gpick-tools{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-bottom:12px;min-height:40px}
.gpick-h{flex:none}
.gpick-find{flex:0 1 320px;min-width:0;position:relative}
.gpick-find::before{content:"";position:absolute;left:13px;top:50%;width:10px;height:10px;margin-top:-7px;border:1px solid var(--moon-dim);border-radius:50%;pointer-events:none}
.gpick-find::after{content:"";position:absolute;left:23px;top:50%;width:5px;height:1px;margin-top:4px;background:var(--moon-dim);transform:rotate(45deg);pointer-events:none}
.gpick-find input{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--rule-strong);border-radius:0;background:var(--night);color:var(--moon);font-family:var(--label);font-size:15px;letter-spacing:.03em;transition:border-color .3s}
.gpick-find input::placeholder{color:var(--moon-faint)}
.gpick-find input:focus{outline:none;border-color:var(--sight)}
.gpick-find input::-webkit-search-cancel-button{filter:invert(.7)}
.gpick-none{font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}

/* Two rows that scroll sideways on wide screens: thirty-odd games fit in one glance-able band
   instead of a page-long list. */
.gpick-row{list-style:none;margin:0;padding:0 0 10px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:minmax(212px,1fr);gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.gpick-row::-webkit-scrollbar{height:6px}
.gpick-row::-webkit-scrollbar-thumb{background:var(--rule-strong)}
.gpick-row li{scroll-snap-align:start;min-width:0}
.gpick-row li[hidden]{display:none}
.gpick-row.is-few{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));overflow:visible}

.gchip{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;height:54px;padding:8px 12px 8px 8px;
  border:1px solid var(--rule);background:var(--night);text-decoration:none;color:var(--moon-dim);transition:border-color .3s, color .3s, background-color .3s}
.gchip img,.gchip-ph{width:64px;height:36px;object-fit:cover;background:var(--granite);filter:saturate(.35) brightness(.72);transition:filter .35s}
.gchip-t{display:flex;flex-direction:column;min-width:0;font-family:var(--label);line-height:1.25}
.gchip-t b{font-weight:500;font-size:15px;color:var(--moon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.gchip-t i{font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--moon-faint);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.gchip-t u{display:inline-block;width:9px;height:9px;background:var(--sight-gold);opacity:.75;-webkit-mask:url("../img/sight/star.svg") center/contain no-repeat;mask:url("../img/sight/star.svg") center/contain no-repeat}
.gchip:hover{border-color:var(--rule-strong);color:var(--moon)}
.gchip:hover img{filter:saturate(.8) brightness(.95)}
.gchip:hover b{color:var(--sight)}
/* Selected: the ESP lock — bright frame and gold corner brackets, art in full colour. */
.gchip.on{border-color:var(--sight);background:#0e141d;box-shadow:0 0 0 1px rgba(228,238,244,.08), 0 0 18px rgba(228,238,244,.08)}
.gchip.on img{filter:none}
.gchip.on b{color:var(--sight-gold)}
.gchip.on::before,.gchip.on::after{content:"";position:absolute;width:9px;height:9px;border:0 solid var(--sight-gold);pointer-events:none}
.gchip.on::before{left:-4px;top:-4px;border-top-width:1px;border-left-width:1px}
.gchip.on::after{right:-4px;bottom:-4px;border-bottom-width:1px;border-right-width:1px}

/* Wider chips where the second line is longer ("12 undetected · 3 on update"). */
@media (min-width:641px){
  .gpick--wide .gpick-row{grid-auto-columns:minmax(262px,1fr)}
  .gpick--wide .gpick-row.is-few{grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}
}
.gchip-t i em{font-style:normal;color:var(--moon-faint)}
.gchip-t i em.hot{color:var(--ember)}

/* ───────── filter chips inside the selected game ───────── */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--rule-strong);font-family:var(--label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--moon-dim);text-decoration:none;transition:border-color .3s, color .3s}
.fchip i{font-style:normal;font-size:12px;color:var(--moon-faint);transition:color .3s}
.fchip:hover{border-color:var(--sight);color:var(--moon)}
.fchip.on{border-color:var(--sight-gold);color:#0b1018;background:var(--sight-gold)}
.fchip.on i{color:#0b1018;opacity:.7}

/* Phones: one row of chips that stays under the thumb while reading. */
@media (max-width:640px){
  .gpick{position:sticky;top:0;z-index:15;background:rgba(10,15,23,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .gpick-in{padding-top:10px;padding-bottom:8px}
  .gpick-tools{margin-bottom:8px;min-height:0;flex-wrap:nowrap}
  .gpick-h{display:none}
  .gpick-find{flex:1 1 auto}
  .gpick-find input{padding:8px 10px 8px 34px;font-size:16px}
  .gpick-row,.gpick-row.is-few{grid-template-rows:none;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:max-content;overflow-x:auto;
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding:0 var(--gutter);scrollbar-width:none}
  .gpick-row::-webkit-scrollbar{display:none}
  .gchip{grid-template-columns:40px auto;gap:8px;height:44px;padding:5px 10px 5px 5px}
  .gchip img,.gchip-ph{width:40px;height:32px}
  .gchip-t b{font-size:14px;max-width:150px}
  .gchip-t i{font-size:11px}
  .gpick ~ .sect{scroll-margin-top:96px}
}
@media (prefers-reduced-motion:reduce){
  .gchip,.gchip img,.fchip{transition:none}
}