/* game_dropdown.css -- the guess dropdown of every daily game (silhouette, ostdle, passivedle,
   dokkandle, grid). Owner, 7 Nov 2026: option B of gamedropdown_trial.html (near-black panel,
   site-colour edge, the row you are on lit along a site-colour rail), plain thumbs, no release
   date, no ALT ART tag -- and the list grows OUT OF the search bar: joined to its bottom edge,
   its sides carrying on the bar's 12deg slant.

   NOTHING INSIDE IS TRANSFORMED. The first version skewed the list and skewed every row back,
   and the double transform resampled the thumbs and the text -- they looked blurry (owner). Now
   the box stays upright and only its OUTLINE is cut to the slant with clip-path; the slanted
   edge lines, and the rail on the row you are on, are gradients drawn at the same angle.
   game_dropdown.js works out the numbers each time the list opens, changes or scrolls:
     --lean     how far the slope travels over the list's height (height x tan 12deg)
     --le       the same distance measured across the 102deg gradient (lean x cos 12deg)
     --ac-left  / --ac-w   the box, widened left by --lean so the slope fits inside it
     --ac-max   the room left on screen, so the list is never cut off by the window
     --rx       per row: where the slanted left edge crosses that row (for the rail)
   Selectors carry `.searchwrap >` so they outrank each page's own `.ac` rules. */
.searchwrap > .ac{
  left:var(--ac-left,0px) !important; right:auto !important; width:var(--ac-w,100%) !important;
  top:100% !important; margin-top:-1px !important;
  max-height:var(--ac-max,380px) !important; overflow-x:hidden !important; overflow-y:auto !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  z-index:2 !important;                   /* inside the bar; the bar's own layer is set below */
  transform:none !important;
  clip-path:polygon(var(--lean,0px) 0, 100% 0, calc(100% - var(--lean,0px)) 100%, 0 100%);
  background:
    linear-gradient(102deg, transparent calc(var(--le,0px) - .5px), rgba(var(--acc-rgb,255,216,74),.55) calc(var(--le,0px) - .5px),
                    rgba(var(--acc-rgb,255,216,74),.55) calc(var(--le,0px) + 1px), transparent calc(var(--le,0px) + 1px)),
    linear-gradient(282deg, transparent calc(var(--le,0px) - .5px), rgba(var(--acc-rgb,255,216,74),.55) calc(var(--le,0px) - .5px),
                    rgba(var(--acc-rgb,255,216,74),.55) calc(var(--le,0px) + 1px), transparent calc(var(--le,0px) + 1px)),
    linear-gradient(0deg, rgba(var(--acc-rgb,255,216,74),.45) 0 1px, transparent 1px),
    linear-gradient(180deg,#12151d,#08090d) !important;
  scrollbar-width:none;
}
.searchwrap > .ac::-webkit-scrollbar{display:none}
/* the bar is its own stacking context (search.css: isolation), so the list's z-index cannot lift it
   on its own -- the bar itself rises while its list is open. It stays UNDER the site header (nav.css
   z 200, its menus inside it) -- at 9100 the list covered the nav's dropdown (owner, 7 Nov 2026) --
   and the fixed ? button (z 9000 on every game) steps under the bar while the list is open. */
.searchwrap:has(> .ac.open){z-index:190}
body:has(.searchwrap > .ac.open) .help-btn{z-index:180}
.searchwrap > .ac .ac-row{
  display:flex; align-items:center; gap:14px;
  padding:8px 20px 8px calc(var(--lean,0px) + 18px);
  border:0; border-bottom:1px solid rgba(255,255,255,.05); background:none;
}
.searchwrap > .ac .ac-row:last-child{border-bottom:0}
.searchwrap > .ac .ac-row:hover,
.searchwrap > .ac .ac-row.sel{
  /* the short rail on the slanted left edge, then the wash -- taken out once, put back: the owner
     likes it (7 Nov 2026) */
  background:linear-gradient(102deg, transparent var(--rx,0px), var(--acc,#FFD84A) var(--rx,0px),
             var(--acc,#FFD84A) calc(var(--rx,0px) + 3px), rgba(var(--acc-rgb,255,216,74),.17) calc(var(--rx,0px) + 3px),
             transparent 74%);
}
.searchwrap > .ac .ac-row > img:first-child{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
.searchwrap > .ac .ac-row > div{flex:1 1 auto;min-width:0}
.searchwrap > .ac :is(.ac-nm,.pk-nm){
  font:700 1.06rem/1.15 'Rajdhani',sans-serif; color:#fff; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.searchwrap > .ac :is(.ac-ti,.pk-ti){
  font:600 .86rem/1.2 'Rajdhani',sans-serif; font-style:normal; color:rgba(var(--acc-rgb,255,216,74),.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* B has no rarity plate: the thumb already says what the card is */
.searchwrap > .ac .ac-row .pill-ic,
.searchwrap > .ac .ac-row .pill{display:none !important}
@media (max-width:600px){
  .searchwrap > .ac .ac-row{gap:10px;padding-left:calc(var(--lean,0px) + 14px)}
  .searchwrap > .ac .ac-row > img:first-child{width:44px;height:44px}
  .searchwrap > .ac :is(.ac-nm,.pk-nm){font-size:.98rem}
  .searchwrap > .ac :is(.ac-ti,.pk-ti){font-size:.8rem}
}