/* Who's That Pokémon? and Compare (2026-11-12) */
.h-sub { font-family:var(--font-d); font-size:clamp(1.1rem, 2.4vw, 1.45rem); letter-spacing:-.02em; margin:0 0 16px; }

/* ── ❓ Who's That Pokémon? ── */
.wtp-stats { display:flex; gap:10px; flex-wrap:wrap; }
.wtp-stat { display:flex; flex-direction:column; padding:10px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(27,18,51,.6); min-width:96px; }
.wtp-stat b { font-family:var(--font-d); font-size:1.15rem; color:var(--gold); }
.wtp-stat span { font-size:.74rem; color:var(--muted); }
.wtp { padding:18px; max-width:760px; margin:0 auto; }
.wtp-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; font-size:.82rem; color:var(--muted); }
.wtp-mode { font:700 .72rem var(--font-d); letter-spacing:.08em; text-transform:uppercase; color:var(--violet); }
.wtp-dots { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.wtp-dots li { width:26px; height:8px; border-radius:6px; background:rgba(255,255,255,.08); }
.wtp-dots li.now { background:rgba(168,120,255,.55); }
.wtp-dots li.ok { background:var(--green); } .wtp-dots li.no { background:var(--red); }
.wtp-round { font-variant-numeric:tabular-nums; }
.wtp-stage { position:relative; display:grid; place-items:center; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:radial-gradient(circle at 50% 50%, #3a2a7a, #170f33 70%); border:1px solid var(--line-2); }
.wtp-rays { position:absolute; inset:-50%; background:repeating-conic-gradient(from 0deg, rgba(255,201,77,.16) 0 7deg, transparent 7deg 18deg); animation:wtpSpin 40s linear infinite; }
@keyframes wtpSpin { to { transform:rotate(360deg); } }
.wtp-mon { position:relative; width:min(62%, 300px); height:auto; aspect-ratio:1; object-fit:contain; transition:filter .55s var(--ease), transform .55s var(--ease); filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.wtp-mon.px { image-rendering:pixelated; }
.wtp-mon.sil { filter:brightness(0) drop-shadow(0 0 2px rgba(168,120,255,.9)) drop-shadow(0 0 18px rgba(124,58,237,.6)); }
.wtp-mon.shown { transform:scale(1.04); }
.wtp-stage.flash::after { content:''; position:absolute; inset:0; background:#fff; animation:wtpFlash .45s ease-out forwards; pointer-events:none; }
@keyframes wtpFlash { from { opacity:.75; } to { opacity:0; } }
.wtp-name { position:absolute; left:0; right:0; bottom:12px; text-align:center; font:700 clamp(1.05rem, 3vw, 1.5rem) var(--font-d); text-shadow:0 2px 12px rgba(0,0,0,.8); padding:0 12px; }
.wtp-name a { color:#fff; text-decoration:none; border-bottom:2px solid var(--gold); }
.wtp-name.ok { color:var(--green); } .wtp-name.no { color:#ffd0d0; }
.wtp-types { display:inline-flex; gap:5px; vertical-align:middle; margin-left:6px; }
.wtp-choices { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:14px; }
.wtp-opt { display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:13px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--text); font-weight:650; font-size:1rem; text-align:left; cursor:pointer; transition:.15s; min-height:52px; overflow-wrap:anywhere; }
.wtp-opt kbd { flex:none; font:600 .7rem var(--font-m); width:22px; height:22px; display:grid; place-items:center; border-radius:6px; border:1px solid var(--line-2); color:var(--muted); }
.wtp-opt:hover:not(:disabled) { border-color:var(--violet); background:rgba(168,120,255,.1); transform:translateY(-1px); }
.wtp-opt:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.wtp-opt:disabled { cursor:default; opacity:.55; }
.wtp-opt.right { opacity:1; border-color:var(--green); background:rgba(94,255,166,.12); }
.wtp-opt.wrong { opacity:1; border-color:var(--red); background:rgba(255,93,93,.12); }
.wtp-after { margin-top:16px; text-align:center; }
.wtp-done b { display:block; font:800 2rem var(--font-d); color:var(--gold); }
.wtp-line { display:block; font-size:1.4rem; letter-spacing:3px; margin:4px 0 6px; }
.wtp-done p { color:var(--muted); margin-bottom:14px; }
.wtp-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wtp-load { text-align:center; color:var(--muted); padding:20px 0 6px; }
.wtp-note { text-align:center; color:var(--muted); font-size:.86rem; margin:16px auto 40px; max-width:60ch; }
.wtp-note a { color:var(--violet); }
@media (max-width:520px) { .wtp { padding:12px; } .wtp-stage { aspect-ratio:1/1; } .wtp-choices { grid-template-columns:1fr; } .wtp-opt { padding:12px 14px; } }
html.lite .wtp-rays { animation:none; }
@media (prefers-reduced-motion: reduce) { .wtp-rays { animation:none; } .wtp-mon, .wtp-opt { transition:none; } }

/* ── ⚔️ Compare ── */
.cmp-pick { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:16px; align-items:start; padding:18px; }
.cmp-lbl { display:block; font:700 .7rem var(--font-d); letter-spacing:.1em; text-transform:uppercase; color:var(--violet); margin-bottom:8px; }
.cmp-slot .finder { margin-top:0; padding:0; }
.cmp-vs { align-self:center; font:800 1.3rem var(--font-d); color:var(--pink); padding-top:20px; }
.cmp-chosen { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--line-2); background:rgba(168,120,255,.08); font-weight:700; }
.cmp-chosen a { color:var(--text); text-decoration:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-x { margin-left:auto; width:30px; height:30px; flex:none; border-radius:8px; border:1px solid var(--line-2); background:none; color:var(--muted); cursor:pointer; }
.cmp-x:hover { color:var(--text); border-color:var(--violet); }
.cmp-res { display:grid; gap:4px; margin-top:6px; }
.cmp-hit { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid transparent; background:rgba(255,255,255,.03); color:var(--text); cursor:pointer; text-align:left; min-width:0; }
.cmp-hit:hover, .cmp-hit:focus-visible { border-color:var(--violet); outline:none; }
.cmp-hit img, .cmp-noav { width:28px; height:28px; border-radius:50%; flex:none; background:var(--bg3); }
.cmp-hit b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-hit small { margin-left:auto; color:var(--muted); white-space:nowrap; }
.cmp-none, .cmp-wait { color:var(--muted); font-size:.9rem; padding:10px 4px; }
.cmp-wait { padding:22px; text-align:center; margin-top:18px; }
.cmp-head { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:14px; padding:20px; margin-top:18px; }
.cmp-who { display:flex; align-items:center; gap:14px; min-width:0; text-decoration:none; color:var(--text); }
.cmp-who.r { flex-direction:row-reverse; text-align:right; }
.cmp-who b { font:700 clamp(1rem, 2.4vw, 1.35rem) var(--font-d); min-width:0; overflow-wrap:anywhere; }
.cmp-av { width:64px; height:64px; border-radius:18px; flex:none; object-fit:cover; box-shadow:0 0 0 2px var(--line-2); }
.cmp-mid { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.cmp-vs.big { padding:0; font-size:1.8rem; background:linear-gradient(135deg, var(--violet), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cmp-verdict { font-size:.82rem; color:var(--muted); max-width:24ch; }
.cmp-stats { padding:14px 18px; margin-top:12px; display:grid; gap:6px; }
.cmp-row { display:grid; grid-template-columns:72px minmax(0, 1fr) 128px minmax(0, 1fr) 72px; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
.cmp-k { text-align:center; font-size:.8rem; color:var(--muted); }
.cmp-v { font-weight:700; font-size:.95rem; } .cmp-row .cmp-v:first-child { text-align:right; }
.cmp-v.win { color:var(--gold); }
.cmp-bar { height:8px; border-radius:6px; background:rgba(255,255,255,.05); overflow:hidden; display:flex; }
.cmp-bar.l { justify-content:flex-end; }
.cmp-bar i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, var(--violet-2), var(--violet)); }
.cmp-bar.r i { background:linear-gradient(90deg, var(--pink), #ff8fc0); }
.cmp-overlap { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; padding:14px 18px; margin-top:12px; text-align:center; }
.cmp-overlap b { display:block; font:800 1.3rem var(--font-d); color:var(--text); }
.cmp-overlap span { font-size:.8rem; color:var(--muted); overflow-wrap:anywhere; }
.cmp-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0 0; }
.cmp-sets { padding:12px 16px; display:grid; gap:6px; }
.cmp-set { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 64px minmax(0, 1fr) 64px; align-items:center; gap:10px; font-size:.85rem; }
.cmp-set-h { font:700 .7rem var(--font-d); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.cmp-set-h span:nth-child(2), .cmp-set-h span:nth-child(4) { grid-column:span 2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-sn { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-sb { height:8px; border-radius:6px; background:rgba(255,255,255,.05); overflow:hidden; }
.cmp-sb i { display:block; height:100%; } .cmp-sb i.a { background:var(--violet); } .cmp-sb i.b { background:var(--pink); }
.cmp-sv { font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap; } .cmp-sv small { color:var(--muted); font-weight:400; }
@media (max-width:720px) {
  .cmp-pick { grid-template-columns:1fr; } .cmp-vs { padding:0; justify-self:center; }
  .cmp-head { grid-template-columns:1fr auto 1fr; padding:14px; gap:8px; } .cmp-who, .cmp-who.r { flex-direction:column; text-align:center; gap:6px; } .cmp-av { width:52px; height:52px; }
  .cmp-row { grid-template-columns:52px minmax(0, 1fr) 84px minmax(0, 1fr) 52px; gap:6px; } .cmp-k { font-size:.72rem; } .cmp-v { font-size:.85rem; }
  .cmp-set { grid-template-columns:minmax(0, 1fr) 54px 54px; } .cmp-set .cmp-sb { display:none; } .cmp-set-h span:nth-child(2), .cmp-set-h span:nth-child(4) { grid-column:auto; }
  .cmp-set-h span:nth-child(3), .cmp-set-h span:nth-child(5) { display:none; }
}