/* ============================================================
   XenChucks — wave 2, builder D: professional polish &
   feedback/micro-interactions. Brand: #6ea8ff / #cfe2ff / #0b0c11.
   Progressive enhancement: every component here is additive —
   pages work fine if this file is absent.
   ============================================================ */

/* ---------- A. Toast system (#334) ---------- */
.xc-toasts{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(1.2rem + env(safe-area-inset-bottom, 0px));
  z-index:1200;display:flex;flex-direction:column;gap:.6rem;
  width:min(92vw, 26rem);pointer-events:none;
}
.xc-toast{
  pointer-events:auto;display:flex;align-items:center;gap:.7rem;
  background:#151824;border:1px solid rgba(110,168,255,.35);
  border-left:4px solid var(--blue);
  color:var(--ink);border-radius:14px;padding:.8rem 1rem;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  font-size:.95rem;line-height:1.45;
  animation:xc-toast-in .28s cubic-bezier(.2,1.4,.4,1);
}
.xc-toast-success{border-left-color:#7ee2a8}
.xc-toast-error{border-left-color:#ff8f8f}
.xc-toast-icon{
  flex:none;width:1.7rem;height:1.7rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;
  background:rgba(110,168,255,.15);color:var(--blue2);
}
.xc-toast-success .xc-toast-icon{background:rgba(126,226,168,.15);color:#7ee2a8}
.xc-toast-error .xc-toast-icon{background:rgba(255,143,143,.15);color:#ff8f8f}
.xc-toast-body{flex:1}
.xc-toast-action{
  flex:none;border:1px solid var(--blue);background:transparent;color:var(--blue2);
  border-radius:999px;padding:.45rem 1rem;font-weight:700;font-size:.85rem;cursor:pointer;
}
.xc-toast-action:hover{background:rgba(110,168,255,.15)}
.xc-toast-close{
  flex:none;border:0;background:transparent;color:var(--muted);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:.2rem .4rem;border-radius:8px;
  min-width:44px;min-height:44px;
}
.xc-toast-close:hover{color:var(--ink)}
.xc-toast-action:focus-visible,.xc-toast-close:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}
.xc-toast-out{opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s}
@keyframes xc-toast-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .xc-toast{animation:xc-toast-fade .2s ease}
  @keyframes xc-toast-fade{from{opacity:0}to{opacity:1}}
  .xc-toast-out{transform:none}
}

/* ---------- B. Scroll progress bar (#331) ---------- */
.xc-scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue2),var(--blue));
  z-index:1100;pointer-events:none;
}

/* ---------- C. Skeleton cards (#322) ---------- */
.xc-skeleton{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);padding:1.2rem;min-height:7rem;
}
.xc-skeleton .sk{
  display:block;height:.9rem;border-radius:6px;margin-bottom:.7rem;
  background:linear-gradient(90deg,#1b2030 25%,#232a40 50%,#1b2030 75%);
  background-size:200% 100%;animation:xc-shimmer 1.4s linear infinite;
}
.xc-skeleton .sk:last-child{margin-bottom:0}
.xc-skeleton .sk.w40{width:40%}.xc-skeleton .sk.w60{width:60%}.xc-skeleton .sk.w80{width:80%}
@keyframes xc-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
  .xc-skeleton .sk{animation:none;background:#1b2030}
}
body.no-motion .xc-skeleton .sk{animation:none;background:#1b2030}

/* ---------- D. Empty state (#311) ---------- */
.xc-empty{
  text-align:center;border:1px dashed rgba(110,168,255,.35);
  border-radius:var(--radius);padding:2.6rem 1.6rem;background:rgba(21,24,36,.5);
  max-width:34rem;margin:0 auto;
}
.xc-empty-icon{font-size:2.4rem;margin-bottom:.8rem;display:block}
.xc-empty h3{font-family:var(--font-body);font-weight:800;font-size:1.15rem;margin-bottom:.4rem}
.xc-empty p{color:var(--muted);margin-bottom:1.2rem}

/* ---------- E. "Coming soon" honesty card (#312) ----------
   Three fixed slots: what's decided / what's still pending /
   what you can do now. Placeholders must say WHAT is missing
   and WHEN it resolves — never a blank. */
.xc-soon-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);overflow:hidden;max-width:44rem;margin:0 auto;
}
.xc-soon-head{
  padding:1.1rem 1.4rem;background:rgba(110,168,255,.08);
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em;
}
.xc-soon-head .soon-tag{
  display:inline-block;font-family:var(--font-body);font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);
  border:1px solid rgba(110,168,255,.4);border-radius:999px;
  padding:.25rem .8rem;margin-left:.7rem;vertical-align:middle;
}
.xc-soon-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.xc-soon-slot{padding:1.1rem 1.3rem;border-top:1px solid var(--line)}
.xc-soon-slot + .xc-soon-slot{border-left:1px solid var(--line)}
.xc-soon-slot h4{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.5rem;color:var(--blue2);
}
.xc-soon-slot p{font-size:.92rem;color:var(--muted);margin:0}
.xc-soon-slot p strong{color:var(--ink)}
@media (max-width:640px){
  .xc-soon-slots{grid-template-columns:1fr}
  .xc-soon-slot + .xc-soon-slot{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- F. Error page design system (#308) ----------
   404, offline, and future error pages share this layout,
   brand voice, and "here's what you can do next" structure. */
.xc-error{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2rem 1.4rem;background:var(--bg);
}
.xc-error-box{max-width:30rem}
.xc-error-code{
  font-family:var(--font-display);font-size:clamp(3.4rem,12vw,5.5rem);
  line-height:1;margin-bottom:.6rem;
  background:linear-gradient(100deg,var(--blue2),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.xc-error h1{font-family:var(--font-display);font-size:1.6rem;margin-bottom:.6rem}
.xc-error p{color:var(--muted);margin-bottom:1.6rem}
.xc-error-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.xc-error .xc-error-mark{
  width:88px;height:88px;border-radius:22px;margin:0 auto 1.2rem;display:block;
}

/* ---------- G. Social icon set (#315) ----------
   One SVG family in brand blue, reused in footer, share kit,
   and press page. Usage:
   <svg class="xc-soc" aria-hidden="true"><use href="assets/social-icons.svg#i-x"/></svg>
   Available ids: i-x i-reddit i-tiktok i-youtube i-discord i-instagram */
.xc-soc{width:1.35rem;height:1.35rem;fill:currentColor;flex:none;vertical-align:-.28rem}
a.xc-soc-link{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--blue2);
  text-decoration:none;padding:.55rem .8rem;border-radius:12px;min-height:44px;
}
a.xc-soc-link:hover{background:rgba(110,168,255,.1);color:var(--ink)}
.xc-soc-row{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

/* ---------- H. Animated form success panel (#321) ----------
   Slide + fade in with a drawn checkmark. Reduced motion shows
   the end state with no animation. */
.success.xc-anim{animation:xc-success-in .5s cubic-bezier(.2,1.2,.4,1)}
@keyframes xc-success-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.xc-check{
  width:76px;height:76px;margin:0 auto .4rem;display:block;
}
.xc-check circle{
  fill:none;stroke:#7ee2a8;stroke-width:4;opacity:.9;
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:xc-draw .7s ease forwards;
}
.xc-check path{
  fill:none;stroke:#7ee2a8;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:80;stroke-dashoffset:80;
  animation:xc-draw .45s .5s ease forwards;
}
@keyframes xc-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .success.xc-anim{animation:none}
  .xc-check circle,.xc-check path{animation:none;stroke-dashoffset:0}
}
body.no-motion .success.xc-anim{animation:none}
body.no-motion .xc-check circle,body.no-motion .xc-check path{animation:none;stroke-dashoffset:0}

/* ---------- I. Multi-step progress indicator (#324) ----------
   "Step 1 of 2" dots + a back button that never loses data
   (the form stays in the DOM; steps are fieldsets toggled).
   One-step forms stay one step — don't add this unless a flow
   genuinely has multiple screens. */
.xc-steps{display:flex;align-items:center;gap:.6rem;margin:0 0 1.2rem}
.xc-steps ol{list-style:none;display:flex;gap:.5rem;margin:0;padding:0}
.xc-steps li{
  width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line);color:var(--muted);font-weight:800;font-size:.85rem;
}
.xc-steps li[aria-current="step"]{border-color:var(--blue);color:var(--blue2);background:rgba(110,168,255,.12)}
.xc-steps li.xc-step-done{border-color:#7ee2a8;color:#7ee2a8}
.xc-steps .xc-step-label{font-size:.85rem;color:var(--muted);font-weight:600}
.xc-step-back{
  margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:.5rem 1.1rem;font-weight:700;cursor:pointer;min-height:44px;
}
.xc-step-back:hover{border-color:var(--blue)}

/* ---------- J. Inline validation, sane timing (#329) ----------
   Validate on blur, never scold mid-keystroke; re-validate on
   input only after a field has errored once. Errors carry a
   text message + icon (never color alone); the valid state is
   a calm check, not a celebration. */
.xc-field{position:relative}
.xc-field-msg{
  display:none;align-items:flex-start;gap:.45rem;
  font-size:.85rem;font-weight:600;margin-top:.4rem;line-height:1.4;
}
.xc-field-msg .xc-f-ico{flex:none;font-weight:800}
.xc-field-invalid .xc-field-msg{display:flex;color:#ff9d9d}
.xc-field-invalid input,.xc-field-invalid textarea,.xc-field-invalid select{
  border-color:#ff8f8f !important;
}
.xc-field-invalid input[aria-invalid="true"]{box-shadow:0 0 0 3px rgba(255,143,143,.18)}
.xc-field-valid .xc-field-msg{display:flex;color:#7ee2a8}
.xc-field-valid input{border-color:rgba(126,226,168,.6) !important}

/* ---------- K. Live character counters (#330) ---------- */
.xc-count{
  display:block;text-align:right;font-size:.78rem;color:var(--muted);
  margin-top:.3rem;font-variant-numeric:tabular-nums;
}
.xc-count.xc-count-near{color:#ffcf8a}

/* ---------- L. Tactile press states on game buttons (#320) ----------
   Deeper than the global :active — rapid tapping feels physical. */
[data-clicker] [data-click-btn],
[data-clicker] button{
  transition:transform .07s ease, box-shadow .07s ease, filter .07s ease;
}
[data-clicker] [data-click-btn]:active,
[data-clicker] button:active{
  transform:scale(.93);
  box-shadow:0 0 0 6px rgba(110,168,255,.22), 0 2px 18px rgba(110,168,255,.5);
  filter:brightness(1.25);
}

/* ---------- M. Desktop nav hover previews (#325) ----------
   Hovering (or focusing) Tricks reveals a mini card with the
   first three tricks. Desktop hover only; touch and keyboard
   get the same links via the normal nav. */
.xc-nav-preview{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  width:17rem;background:#151824;border:1px solid rgba(110,168,255,.35);
  border-radius:14px;padding:1rem 1.1rem;z-index:1000;text-align:left;
  box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.xc-nav-preview.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.xc-nav-preview strong{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.xc-nav-preview a{display:block;padding:.45rem .3rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.92rem;font-weight:600}
.xc-nav-preview a:hover{background:rgba(110,168,255,.1);color:var(--blue2)}
.xc-nav-preview a small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
@media (hover:none),(prefers-reduced-motion:reduce){
  .xc-nav-preview{display:none}
}

/* ---------- N. Async buttons name what they're doing (#333) ----------
   Descriptive loading labels + aria-busy, never a bare spinner. */
button[aria-busy="true"],.btn[aria-busy="true"]{
  cursor:wait;opacity:.75;position:relative;
}
button[aria-busy="true"]::after,.btn[aria-busy="true"]::after{
  content:"";display:inline-block;width:.9em;height:.9em;margin-left:.6em;
  border:2px solid rgba(11,20,40,.35);border-top-color:#0b1428;border-radius:50%;
  vertical-align:-.12em;animation:xc-spin .7s linear infinite;
}
@keyframes xc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  button[aria-busy="true"]::after,.btn[aria-busy="true"]::after{animation-duration:1.6s}
}

/* ---------- O. Reduced-motion alternatives (#335) ----------
   Turning motion off shows the meaningful end-state — it never
   removes information. */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .xc-success-in,.success.xc-anim{animation:none}
  [data-clicker] [data-click-btn]:active,[data-clicker] button:active{
    transform:none;box-shadow:0 0 0 3px rgba(110,168,255,.35);filter:brightness(1.12);
  }
}
body.no-motion .reveal{opacity:1 !important;transform:none !important;transition:none}
body.no-motion [data-clicker] [data-click-btn]:active,
body.no-motion [data-clicker] button:active{
  transform:none;box-shadow:0 0 0 3px rgba(110,168,255,.35);filter:brightness(1.12);
}

/* ---------- P. Print extensions: FAQ + devlog (#310) ----------
   The base print stylesheet covers chrome hiding; these add
   clean black-on-white reading for the long content pages. */
@media print{
  .xc-toasts,.xc-scroll-progress,.xc-nav-preview{display:none !important}
  /* FAQ + devlog print cleanly in black-on-white (#310) */
  .faq-list details{break-inside:avoid;margin-bottom:1rem;border-bottom:1px solid #999;padding-bottom:.8rem}
  .faq-list summary{font-weight:800;color:#000;font-size:1.02rem;list-style:none}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list details p,.faq-list details li{color:#222}
  .tldr{border:1px solid #999;border-radius:8px;padding:.8rem 1rem;break-inside:avoid}
  .tldr h2{color:#000;font-size:1rem}
  a[href^="http"]{color:#000;text-decoration:underline}
  /* printed FAQ keeps its links useful: show the destination once */
  .faq-list details a[href^="http"]::after{content:" <" attr(href) ">";font-size:.8em;color:#444;word-break:break-all}
  .xc-soon-card,.xc-empty{border:1px solid #999;background:#fff}
  .xc-soon-card p,.xc-empty p{color:#333}
}