/* selector-modal.css — build-your-own-path pop-up (playful) */
.selm .modal{ width:min(840px,100%); }
.selm__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.selm__cat{ margin-top:22px; }
.selm__q{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:15px; letter-spacing:.02em; display:flex; align-items:center; gap:10px; }
.selm__q .step{ width:24px; height:24px; border-radius:999px; background:var(--aw-ink-100); color:var(--fg-3); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.selm__q.done .step{ background:var(--accent); color:var(--aw-black); }
.selm__tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin-top:12px; }
.seltile{ position:relative; border:2px solid var(--border); border-radius:12px; padding:15px 14px; cursor:pointer; background:var(--bg-panel);
  font-family:var(--font-body); font-weight:600; font-size:13px; line-height:1.3; text-align:left; color:var(--fg-1);
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease-snap), box-shadow .3s; }
.seltile.pop{ animation:tilepop .55s var(--ease-snap) both; }
@keyframes tilepop{ from{ opacity:0; transform:scale(.3) rotate(-8deg) } 70%{ opacity:1 } to{ opacity:1; transform:none } }
.seltile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--aw-ink-300); }
.seltile.is-pick{ background:var(--aw-black); color:#fff; border-color:var(--aw-black); }
.seltile .num{ position:absolute; top:-11px; right:-11px; width:27px; height:27px; border-radius:999px; background:var(--accent); color:#202020;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; font-size:14px; opacity:0; transform:scale(0); transition:.35s var(--ease-snap); }
.seltile.is-pick .num{ opacity:1; transform:scale(1); }
.seltile.is-win{ background:#1F8A5B; color:#fff; border-color:#1F8A5B; }
.seltile.is-win .num{ background:#fff; color:#1F8A5B; }
.selm__route{ margin-top:26px; width:100%; justify-content:center; transition:transform .35s var(--ease-snap), box-shadow .3s, background .3s; }
.selm__route:disabled{ opacity:.4; cursor:not-allowed; }
.selm__route.win{ transform:scale(1.05); box-shadow:0 0 30px 6px rgba(31,138,91,.4); background:#1F8A5B; color:#fff; animation:winpulse 1.8s ease-in-out infinite; }
@keyframes winpulse{ 0%,100%{ box-shadow:0 0 22px 3px rgba(31,138,91,.35) } 50%{ box-shadow:0 0 40px 9px rgba(31,138,91,.6) } }
.selm__hint{ font-size:12.5px; color:var(--fg-3); margin-top:12px; text-align:center; }
/* result */
.selm__rec .rname{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(24px,3vw,40px); line-height:.95; color:#fff; }
.selm__rec{ background:var(--aw-black); color:#fff; border-radius:var(--radius-lg); padding:clamp(22px,3vw,34px); position:relative; overflow:hidden; }
.selm__rec .rwhy{ color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.6; margin-top:12px; }
.selm__rec .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.selm__rec .chip{ background:rgba(255,255,255,.08); border-radius:999px; padding:6px 12px; font-size:12px; } .selm__rec .chip b{ color:var(--accent); }
.selm__rec .ast{ position:absolute; top:-40px; right:-40px; width:180px; opacity:.1; }