/* Pokébot extras (2026-11-12): quick search, shiny mode, the doors to the new pages, Who's That Pokémon?, compare */

/* ── 🔍 quick search: the nav button ── */
.qs-open { order:3; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 10px; border-radius:11px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; transition:.18s; flex:none; }
.qs-open:hover { color:var(--text); border-color:var(--violet); background:rgba(168,120,255,.08); }
.qs-open:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.qs-hint { font:600 .7rem/1 var(--font-m); padding:4px 6px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted); }
.nav .wrap > .links { order:2; margin-left:auto; }
.nav .wrap > .menu-btn { order:4; }
@media (max-width:1199px) { .qs-open { margin-left:auto; height:42px; width:42px; padding:0; justify-content:center; } .qs-hint { display:none; } }
@media (min-width:1200px) and (max-width:1340px) { .qs-hint { display:none; } .qs-open { width:36px; padding:0; justify-content:center; } }

/* ── 🔍 quick search: the dialog ── */
.qs { position:fixed; inset:0; z-index:600; display:flex; justify-content:center; align-items:flex-start; padding:10vh 16px 16px; }
.qs[hidden] { display:none; }
.qs-back { position:absolute; inset:0; background:rgba(6,3,13,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.qs-box { position:relative; width:min(640px, 100%); max-height:min(72vh, 640px); display:flex; flex-direction:column; border-radius:18px; border:1px solid var(--line-2); background:linear-gradient(180deg, #1b1233, #0f0920); box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(168,120,255,.08); overflow:hidden; animation:qsIn .18s var(--ease); }
@keyframes qsIn { from { opacity:0; transform:translateY(-8px) scale(.98); } }
.qs-in { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--muted); }
.qs-in input { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--text); font:500 1.05rem var(--font-b); }
.qs-in input::-webkit-search-cancel-button { display:none; }
.qs-esc { font:600 .7rem var(--font-m); padding:4px 7px; border-radius:6px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; }
.qs-list { overflow-y:auto; padding:6px; overscroll-behavior:contain; }
.qs-g + .qs-g { margin-top:4px; }
.qs-gt { padding:8px 10px 4px; font:700 .66rem var(--font-d); letter-spacing:.1em; text-transform:uppercase; color:var(--violet); }
.qs-item { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:11px; text-decoration:none; color:var(--text); scroll-margin:6px; }
.qs-item.on { background:rgba(168,120,255,.14); box-shadow:inset 0 0 0 1px rgba(168,120,255,.3); }
.qs-item img, .qs-ico { flex:none; width:34px; height:34px; border-radius:8px; object-fit:cover; display:grid; place-items:center; background:rgba(255,255,255,.04); }
.qs-item .qs-card { width:28px; height:39px; border-radius:3px; object-fit:cover; }
.qs-item .qs-mon { object-fit:contain; image-rendering:pixelated; background:none; }
.qs-item .qs-av { border-radius:50%; }
.qs-ico { font-size:.95rem; color:var(--muted); }
.qs-txt { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.3; }
.qs-txt b { font-weight:650; font-size:.93rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qs-txt small { color:var(--muted); font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qs-txt mark { background:none; color:var(--gold); }
.qs-rar { flex:none; width:8px; height:8px; border-radius:50%; background:var(--c-common); }
.qs-rar.r-uncommon { background:var(--c-uncommon); } .qs-rar.r-rare { background:var(--c-rare); } .qs-rar.r-holo { background:var(--c-holo); } .qs-rar.r-promo { background:var(--c-promo); }
.qs-rar.r-ultra { background:var(--c-ultra); } .qs-rar.r-sir { background:var(--c-sir); } .qs-rar.r-mythical { background:var(--c-mythical); }
.qs-empty, .qs-tip { padding:18px 14px; color:var(--muted); font-size:.88rem; }
.qs-tip button { all:unset; cursor:pointer; color:var(--violet); text-decoration:underline; text-underline-offset:3px; }
.qs-tip button:focus-visible { outline:2px solid var(--cyan); }
.qs-tip a { color:var(--gold); }
.qs-foot { display:flex; gap:16px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:.74rem; }
.qs-foot kbd, .qs-in kbd { font:600 .68rem var(--font-m); padding:2px 6px; margin-right:3px; border-radius:5px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); }
@media (max-width:640px) { .qs { padding-top:12px; } .qs-box { max-height:calc(100dvh - 24px); } .qs-foot { display:none; } }
html.qs-on { overflow:hidden; }
html.lite .qs-back { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(6,3,13,.9); }
html.lite .qs-box { animation:none; }

/* ── ✨ shiny mode ── */
html.shiny-mode .brand img { box-shadow:0 0 0 1px rgba(255,201,77,.6), 0 0 22px rgba(255,201,77,.55); }
html.shiny-mode .brand b { color:var(--gold); }
.sparkle-burst { position:fixed; inset:0; pointer-events:none; z-index:700; overflow:hidden; }
.sparkle-burst i { position:absolute; top:-20px; left:var(--x); width:14px; height:14px; transform:scale(var(--s)); background:radial-gradient(circle, #fff 0 20%, var(--gold) 21% 40%, transparent 41%); clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation:sparkleFall 2.2s var(--d) ease-in forwards; }
@keyframes sparkleFall { to { transform:translateY(105vh) rotate(260deg) scale(var(--s)); opacity:.2; } }

/* ── doors ── */
.dice-btn { margin-top:12px; }
.wtp-door { display:flex; align-items:center; gap:14px; padding:12px 18px; margin:0 0 18px; text-decoration:none; color:var(--text); border-color:rgba(255,201,77,.28); }
.wtp-door:hover { border-color:var(--gold); }
.wtp-door-sil { width:56px; height:56px; object-fit:contain; filter:brightness(0) drop-shadow(0 0 6px rgba(168,120,255,.7)); }
.wtp-door span { display:flex; flex-direction:column; line-height:1.3; }
.wtp-door small { color:var(--muted); font-size:.8rem; }
.wtp-door .wtp-door-go { margin-left:auto; color:var(--gold); font-weight:700; white-space:nowrap; }
.nf-wtp { display:inline-flex; align-items:center; gap:12px; margin-top:26px; padding:10px 16px; border-radius:14px; border:1px dashed var(--line-2); text-decoration:none; color:var(--muted); font-size:.9rem; }
.nf-wtp:hover { color:var(--text); border-color:var(--gold); }
.nf-wtp img { width:46px; height:46px; object-fit:contain; filter:brightness(0) drop-shadow(0 0 5px rgba(168,120,255,.8)); border-radius:0; box-shadow:none; margin:0; animation:none; }
.nf-wtp b { color:var(--gold); }