/* 7arif search bottom sheet (games/retro/sheet-search.js). Works on the main page (style.css tokens) and on the game pages
   (kit.css tokens): only the shared variables are used (--paper, --paper-clip, --paper-2, --ink, --ink-soft, --red, --yellow,
   --font-display, --font-ui, --ib, --il, --ir). Phone: a bottom sheet, input at its top, at most 5 rows of 52 px; it follows
   the visual viewport so the keyboard never covers the input. Wide screens: a card near the top of the page.
   Logical properties only (RTL first). Only transform / opacity animate. */
.ss-root { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.ss-root.hidden { display: none; }
.ss-back { position: absolute; inset: 0; background: rgba(13, 18, 56, .62); }
.ss-panel { position: relative; display: flex; flex-direction: column; gap: 8px; width: min(560px, 100%); margin-inline: auto; max-height: 100%; min-height: 0;
            background: var(--paper); color: var(--ink); padding-block: 16px calc(12px + var(--ib, 0px)); padding-inline: max(14px, var(--il, 0px)) max(14px, var(--ir, 0px));
            clip-path: polygon(0 9px, 4% 4px, 8% 8px, 12% 2px, 17% 7px, 21% 3px, 26% 9px, 30% 4px, 35% 7px, 39% 1px, 44% 6px, 48% 3px, 53% 9px, 57% 4px, 62% 7px, 66% 2px, 71% 8px, 75% 3px, 80% 7px, 84% 1px, 89% 6px, 93% 3px, 97% 8px, 100% 4px, 100% 100%, 0 100%);
            animation: ss-in 180ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ss-in { from { translate: 0 28px; opacity: .4; } to { translate: 0 0; opacity: 1; } }
.ss-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 10px; flex: 0 0 auto; }
.ss-heading { flex: 1 1 0; min-width: 0; }
.ss-kicker { font: 800 13px/1.4 var(--font-ui); color: #AE1C23; }
.ss-title { font: 800 16px/1.45 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.ss-close { flex: 0 0 auto; min-width: 64px; min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper-clip); color: var(--ink);
            font: 800 16px/1 var(--font-ui); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; touch-action: manipulation; transition: translate 60ms; }
.ss-close:active, .ss-close.is-pressed { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.ss-input { flex: 0 0 auto; width: 100%; min-height: 50px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper-clip); color: var(--ink);
            font: 700 18px var(--font-ui); box-shadow: 3px 3px 0 var(--red); -webkit-appearance: none; appearance: none; margin: 0; }
.ss-input::placeholder { color: var(--ink-soft); opacity: 1; }
.ss-input:focus-visible, .ss-input:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ss-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ss-list { list-style: none; margin: 2px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 0 1 auto; border-top: 3px solid var(--ink); }
.ss-list:empty { display: none; }
.ss-row { min-height: 50px; padding: 5px 6px; border-bottom: 1.5px solid var(--ink); cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 1px;
          touch-action: manipulation; transition: translate 60ms; }
.ss-row[aria-selected="true"] { background: var(--paper-2); box-shadow: inset 4px 0 0 var(--red); }
html[dir="rtl"] .ss-row[aria-selected="true"] { box-shadow: inset -4px 0 0 var(--red); }
.ss-row:active, .ss-row.is-pressed { background: var(--yellow); }
.ss-name { font: 800 18px/1.3 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-meta { font: 700 13px/1.4 var(--font-ui); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-meta bdi, .ss-name bdi { font: inherit; color: inherit; }
.ss-empty { min-height: 52px; display: flex; align-items: center; padding: 6px; font: 700 15px/1.5 var(--font-ui); color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .ss-row:hover { background: rgba(244, 210, 31, .4); } }
/* the question's clues under the title (crests, facts, category icons): one compact row, wraps, never cut */
.ss-ctx { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; margin-top: 4px; font: 800 14px/1.3 var(--font-ui); color: var(--ink-meta, #4a3f2c); }
.ss-ctx[hidden] { display: none; }
.ss-ctx img, .ss-ctx .crest { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.ss-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1.5px solid var(--ink); background: var(--paper-clip); color: var(--ink); white-space: nowrap; }
.ss-chip.ok { background: var(--lime); }
/* keyboard open: tighter; the question still shows in full (owner rule 2026-11-11: never hidden, never cut) */
.ss-root.is-kb .ss-panel { padding-block-start: 12px; gap: 6px; animation: none; }
.ss-root.is-kb .ss-kicker { display: none; }

/* wide screens: a card under the masthead, not glued to the bottom edge */
@media (min-width: 700px) and (min-height: 560px) {
  .ss-root { justify-content: flex-start; padding-block-start: 12vh; }
  .ss-panel { padding: 26px 22px 20px; filter: drop-shadow(6px 6px 0 var(--navy-deep, #0D1238)); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-panel { animation: ss-fade 120ms ease-out both; }
  .ss-close, .ss-row { transition: none; }
}
@keyframes ss-fade { from { opacity: .4; } to { opacity: 1; } }
/* a row with the last club's crest (only when the club is an allowed meta field) */
.ss-row.has-crest { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.ss-txt { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ss-crest { flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(1.5px 1.5px 0 rgba(26, 26, 26, .45)); }
.ss-ctx .r-qpin__sep { color: var(--ink-soft); }